zcy
/
maxGraph
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

started integrating more examples into the next.js app

development
mcyph 2021-03-23 23:31:35 +11:00
parent 1b60186ea0
commit f1ae90efc1
23 changed files with 1174 additions and 862 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/mxgraph/shape/mxShape.js
View File

@ -779,14 +779,14 @@ class mxShape {
c.stroke = (...args) => {
strokeDrawn = true;
stroke.apply(this, args);
stroke.apply(c, args);
};
const { fillAndStroke } = c;
c.fillAndStroke = (...args) => {
strokeDrawn = true;
fillAndStroke.apply(this, args);
fillAndStroke.apply(c, args);
};
}

13
src/mxgraph/shape/mxSwimlane.js
View File

@ -6,6 +6,7 @@
import mxShape from './mxShape';
import mxRectangle from '../util/mxRectangle';
import mxConstants from '../util/mxConstants';
import mxUtils from "../util/mxUtils";
class mxSwimlane extends mxShape {
/**
@ -89,20 +90,20 @@ class mxSwimlane extends mxShape {
// East is default
const shapeVertical =
this.direction == mxConstants.DIRECTION_NORTH ||
this.direction == mxConstants.DIRECTION_SOUTH;
this.direction === mxConstants.DIRECTION_NORTH ||
this.direction === mxConstants.DIRECTION_SOUTH;
const realHorizontal = horizontal == !shapeVertical;
const realFlipH =
!realHorizontal &&
flipH !=
(this.direction == mxConstants.DIRECTION_SOUTH ||
this.direction == mxConstants.DIRECTION_WEST);
(this.direction === mxConstants.DIRECTION_SOUTH ||
this.direction === mxConstants.DIRECTION_WEST);
const realFlipV =
realHorizontal &&
flipV !=
(this.direction == mxConstants.DIRECTION_SOUTH ||
this.direction == mxConstants.DIRECTION_WEST);
(this.direction === mxConstants.DIRECTION_SOUTH ||
this.direction === mxConstants.DIRECTION_WEST);
// Shape is horizontal
if (!shapeVertical) {

15
src/mxgraph/util/mxDragSource.js
View File

@ -6,6 +6,11 @@
import mxRectangle from './mxRectangle';
import mxCellHighlight from '../handler/mxCellHighlight';
import mxUtils from './mxUtils';
import mxEvent from "./mxEvent";
import mxClient from "../mxClient";
import mxGuide from "./mxGuide";
import mxConstants from "./mxConstants";
import mxPoint from "./mxPoint";
class mxDragSource {
/**
@ -175,7 +180,7 @@ class mxDragSource {
const evtName = evt.getProperty('eventName');
const me = evt.getProperty('event');
if (evtName != mxEvent.MOUSE_DOWN) {
if (evtName !== mxEvent.MOUSE_DOWN) {
me.consume();
}
};
@ -419,7 +424,7 @@ class mxDragSource {
let elt = this.getElementForEvent(evt);
if (this.checkEventSource) {
while (elt != null && elt != graph.container) {
while (elt != null && elt !== graph.container) {
elt = elt.parentNode;
}
}
@ -449,7 +454,7 @@ class mxDragSource {
graph = null;
}
if (graph != this.currentGraph) {
if (graph !== this.currentGraph) {
if (this.currentGraph != null) {
this.dragExit(this.currentGraph, evt);
}
@ -468,7 +473,7 @@ class mxDragSource {
if (
this.dragElement != null &&
(this.previewElement == null ||
this.previewElement.style.visibility != 'visible')
this.previewElement.style.visibility !== 'visible')
) {
let x = mxEvent.getClientX(evt);
let y = mxEvent.getClientY(evt);
@ -506,7 +511,7 @@ class mxDragSource {
if (
this.currentPoint != null &&
(this.previewElement == null ||
this.previewElement.style.visibility != 'hidden')
this.previewElement.style.visibility !== 'hidden')
) {
const { scale } = this.currentGraph.view;
const tr = this.currentGraph.view.translate;

4
src/pages/Boundary.js
View File

@ -32,8 +32,8 @@ class Boundary extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '821px',
height: '641px',
width: '321px',
height: '241px',
background: 'url("editors/images/grid.gif")',
cursor: 'default'
}}

134
src/pages/Collapse.js
View File

@ -1,16 +1,15 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Collapse example for mxGraph. This example demonstrates changing
the style of a cell based on its collapsed state.
-->
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Collapse example for mxGraph. This example demonstrates changing
* the style of a cell based on its collapsed state.
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxRectangle from '../mxgraph/util/mxRectangle';
class MYNAMEHERE extends React.Component {
class Collapse extends React.Component {
constructor(props) {
super(props);
}
@ -19,14 +18,19 @@ class MYNAMEHERE extends React.Component {
// A container for the graph
return (
<>
<h1></h1>
<h1>Collapse example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
</>
@ -34,77 +38,45 @@ class MYNAMEHERE extends React.Component {
};
componentDidMount = () => {
const graph = new mxGraph(this.el);
const parent = graph.getDefaultParent();
// Extends mxGraphModel.getStyle to show an image when collapsed
const modelGetStyle = graph.model.getStyle;
graph.model.getStyle = function(cell) {
if (cell != null) {
let style = modelGetStyle.apply(this, arguments);
if (this.isCollapsed(cell)) {
style =
`${style};shape=image;image=http://www.jgraph.com/images/mxgraph.gif;` +
`noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`;
}
return style;
}
return null;
};
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(
parent,
null,
'Container',
20,
20,
200,
200,
'shape=swimlane;startSize=20;'
);
v1.geometry.alternateBounds = new mxRectangle(0, 0, 110, 70);
const v11 = graph.insertVertex(v1, null, 'Hello,', 10, 40, 120, 80);
} finally {
graph.getModel().endUpdate();
}
};
}
export default MYNAMEHERE;
<html>
<head>
<title>Collapse example for mxGraph</title>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- Example code -->
<script type="text/javascript">
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main(container)
{
let graph = new mxGraph(container);
let parent = graph.getDefaultParent();
// Extends mxGraphModel.getStyle to show an image when collapsed
let modelGetStyle = graph.model.getStyle;
graph.model.getStyle = function(cell)
{
if (cell != null)
{
let style = modelGetStyle.apply(this, arguments);
if (this.isCollapsed(cell))
{
style = style + ';shape=image;image=http://www.jgraph.com/images/mxgraph.gif;' +
'noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9';
}
return style;
}
return null;
};
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Container', 20, 20, 200, 200,
'shape=swimlane;startSize=20;');
v1.geometry.alternateBounds = new mxRectangle(0, 0, 110, 70);
var v11 = graph.insertVertex(v1, null, 'Hello,', 10, 40, 120, 80);
}
finally
{
graph.getModel().endUpdate();
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>
export default Collapse;

201
src/pages/Constituent.js
View File

@ -1,16 +1,18 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Consistuent example for mxGraph. This example demonstrates using
cells as parts of other cells.
-->
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Consistuent example for mxGraph. This example demonstrates using
* cells as parts of other cells.
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxGraphHandler from "../mxgraph/handler/mxGraphHandler";
import mxClient from "../mxgraph/mxClient";
class MYNAMEHERE extends React.Component {
class Constituent extends React.Component {
constructor(props) {
super(props);
}
@ -19,127 +21,94 @@ class MYNAMEHERE extends React.Component {
// A container for the graph
return (
<>
<h1></h1>
<h1>Consistuent example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: 'url("editors/images/grid.gif")',
cursor: 'default',
}}
/>
</>
);
};
componentDidMount = () => {
componentDidMount() {
class MyCustomGraphHandler extends mxGraphHandler {
/**
* Redirects start drag to parent.
*/
getInitialCellForEvent(me) {
let cell = super.getInitialCellForEvent(me);
if (this.graph.isPart(cell)) {
cell = this.graph.getModel().getParent(cell);
}
return cell;
}
}
};
// Disables the built-in context menu
mxEvent.disableContextMenu(this.el);
class MyCustomGraph extends mxGraph {
foldingEnabled = false;
recursiveResize = true;
isPart(cell) {
// Helper method to mark parts with constituent=1 in the style
return this.getCurrentCellStyle(cell).constituent == '1';
}
selectCellForEvent(cell, evt) {
// Redirects selection to parent
if (this.isPart(cell)) {
cell = this.model.getParent(cell);
}
super.selectCellForEvent(cell, evt);
}
createGraphHandler() {
return new MyCustomGraphHandler(this);
}
}
// Creates the graph inside the given container
const graph = new MyCustomGraph(this.el);
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(parent, null, '', 20, 20, 120, 70);
const v2 = graph.insertVertex(
v1,
null,
'Constituent',
20,
20,
80,
30,
'constituent=1;'
);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
}
}
export default MYNAMEHERE;
<html>
<head>
<title>Consistuent example for mxGraph</title>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- Example code -->
<script type="text/javascript">
/**
* Redirects start drag to parent.
*/
let graphHandlerGetInitialCellForEvent = mxGraphHandler.prototype.getInitialCellForEvent;
mxGraphHandler.prototype.getInitialCellForEvent = function(me)
{
let cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);
if (this.graph.isPart(cell))
{
cell = this.graph.getModel().getParent(cell)
}
return cell;
};
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Disables the built-in context menu
mxEvent.disableContextMenu(container);
// Creates the graph inside the given container
let graph = new mxGraph(container);
graph.foldingEnabled = false;
graph.recursiveResize = true;
// Helper method to mark parts with constituent=1 in the style
graph.isPart = function(cell)
{
return this.getCurrentCellStyle(cell)['constituent'] == '1';
};
// Redirects selection to parent
graph.selectCellForEvent = function(cell)
{
if (this.isPart(cell))
{
cell = this.model.getParent(cell);
}
mxGraph.prototype.selectCellForEvent.apply(this, arguments);
};
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, '', 20, 20, 120, 70);
var v2 = graph.insertVertex(v1, null, 'Constituent', 20, 20, 80, 30, 'constituent=1;');
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>
export default Constituent;

438
src/pages/ContextIcons.js
View File

@ -1,16 +1,19 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Context icons example for mxGraph. This example demonstrates adding
icons to selected vertices to carry out special operations.
-->
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Context icons example for mxGraph. This example demonstrates adding
* icons to selected vertices to carry out special operations.
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxVertexHandler from '../mxgraph/handler/mxVertexHandler';
import mxUtils from '../mxgraph/util/mxUtils';
import mxClient from '../mxgraph/mxClient';
class MYNAMEHERE extends React.Component {
class ContextIcons extends React.Component {
constructor(props) {
super(props);
}
@ -19,14 +22,17 @@ class MYNAMEHERE extends React.Component {
// A container for the graph
return (
<>
<h1></h1>
<h1>Context icons example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
</>
@ -34,229 +40,197 @@ class MYNAMEHERE extends React.Component {
};
componentDidMount = () => {
// Defines a subclass for mxVertexHandler that adds a set of clickable
// icons to every selected vertex.
function mxVertexToolHandler(state) {
mxVertexHandler.apply(this, arguments);
}
mxVertexToolHandler.prototype = new mxVertexHandler();
mxVertexToolHandler.prototype.constructor = mxVertexToolHandler;
mxVertexToolHandler.prototype.domNode = null;
mxVertexToolHandler.prototype.init = function() {
mxVertexHandler.prototype.init.apply(this, arguments);
// In this example we force the use of DIVs for images in IE. This
// handles transparency in PNG images properly in IE and fixes the
// problem that IE routes all mouse events for a gesture via the
// initial IMG node, which means the target vertices
this.domNode = document.createElement('div');
this.domNode.style.position = 'absolute';
this.domNode.style.whiteSpace = 'nowrap';
// Workaround for event redirection via image tag in quirks and IE8
function createImage(src) {
return mxUtils.createImage(src);
}
// Delete
let img = createImage('images/delete2.png');
img.setAttribute('title', 'Delete');
img.style.cursor = 'pointer';
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(
img,
mxUtils.bind(this, function(evt) {
// Disables dragging the image
mxEvent.consume(evt);
})
);
mxEvent.addListener(
img,
'click',
mxUtils.bind(this, function(evt) {
this.graph.removeCells([this.state.cell]);
mxEvent.consume(evt);
})
);
this.domNode.appendChild(img);
// Size
img = createImage('images/fit_to_size.png');
img.setAttribute('title', 'Resize');
img.style.cursor = 'se-resize';
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(
img,
mxUtils.bind(this, function(evt) {
this.start(mxEvent.getClientX(evt), mxEvent.getClientY(evt), 7);
this.graph.isMouseDown = true;
this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
mxEvent.consume(evt);
})
);
this.domNode.appendChild(img);
// Move
img = createImage('images/plus.png');
img.setAttribute('title', 'Move');
img.style.cursor = 'move';
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(
img,
mxUtils.bind(this, function(evt) {
this.graph.graphHandler.start(
this.state.cell,
mxEvent.getClientX(evt),
mxEvent.getClientY(evt)
);
this.graph.graphHandler.cellWasClicked = true;
this.graph.isMouseDown = true;
this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
mxEvent.consume(evt);
})
);
this.domNode.appendChild(img);
// Connect
img = createImage('images/check.png');
img.setAttribute('title', 'Connect');
img.style.cursor = 'pointer';
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(
img,
mxUtils.bind(this, function(evt) {
const pt = mxUtils.convertPoint(
this.graph.container,
mxEvent.getClientX(evt),
mxEvent.getClientY(evt)
);
this.graph.connectionHandler.start(this.state, pt.x, pt.y);
this.graph.isMouseDown = true;
this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
mxEvent.consume(evt);
})
);
this.domNode.appendChild(img);
this.graph.container.appendChild(this.domNode);
this.redrawTools();
};
mxVertexToolHandler.prototype.redraw = function() {
mxVertexHandler.prototype.redraw.apply(this);
this.redrawTools();
};
mxVertexToolHandler.prototype.redrawTools = function() {
if (this.state != null && this.domNode != null) {
const dy = 4;
this.domNode.style.left = `${this.state.x + this.state.width - 56}px`;
this.domNode.style.top = `${this.state.y + this.state.height + dy}px`;
}
};
mxVertexToolHandler.prototype.destroy = function(sender, me) {
mxVertexHandler.prototype.destroy.apply(this, arguments);
if (this.domNode != null) {
this.domNode.parentNode.removeChild(this.domNode);
this.domNode = null;
}
};
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main(container) {
// Checks if the browser is supported
if (!mxClient.isBrowserSupported()) {
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
} else {
// Creates the graph inside the given container
const graph = new mxGraph(container);
graph.setConnectable(true);
graph.connectionHandler.createTarget = true;
graph.createHandler = function(state) {
if (state != null && this.model.isVertex(state.cell)) {
return new mxVertexToolHandler(state);
}
return mxGraph.prototype.createHandler.apply(this, arguments);
};
// Uncomment the following if you want the container
// to fit the size of the graph
// graph.setResizeContainer(true);
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
const v2 = graph.insertVertex(
parent,
null,
'World!',
200,
150,
80,
30
);
const e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
}
}
};
}
export default MYNAMEHERE;
<html>
<head>
<title>Context icons example for mxGraph</title>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- Example code -->
<script type="text/javascript">
// Defines a subclass for mxVertexHandler that adds a set of clickable
// icons to every selected vertex.
function mxVertexToolHandler(state)
{
mxVertexHandler.apply(this, arguments);
};
mxVertexToolHandler.prototype = new mxVertexHandler();
mxVertexToolHandler.prototype.constructor = mxVertexToolHandler;
mxVertexToolHandler.prototype.domNode = null;
mxVertexToolHandler.prototype.init = function()
{
mxVertexHandler.prototype.init.apply(this, arguments);
// In this example we force the use of DIVs for images in IE. This
// handles transparency in PNG images properly in IE and fixes the
// problem that IE routes all mouse events for a gesture via the
// initial IMG node, which means the target vertices
this.domNode = document.createElement('div');
this.domNode.style.position = 'absolute';
this.domNode.style.whiteSpace = 'nowrap';
// Workaround for event redirection via image tag in quirks and IE8
function createImage(src)
{
return mxUtils.createImage(src);
};
// Delete
let img = createImage('images/delete2.png');
img.setAttribute('title', 'Delete');
img.style.cursor = 'pointer';
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(img,
mxUtils.bind(this, function(evt)
{
// Disables dragging the image
mxEvent.consume(evt);
})
);
mxEvent.addListener(img, 'click',
mxUtils.bind(this, function(evt)
{
this.graph.removeCells([this.state.cell]);
mxEvent.consume(evt);
})
);
this.domNode.appendChild(img);
// Size
let img = createImage('images/fit_to_size.png');
img.setAttribute('title', 'Resize');
img.style.cursor = 'se-resize';
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(img,
mxUtils.bind(this, function(evt)
{
this.start(mxEvent.getClientX(evt), mxEvent.getClientY(evt), 7);
this.graph.isMouseDown = true;
this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
mxEvent.consume(evt);
})
);
this.domNode.appendChild(img);
// Move
let img = createImage('images/plus.png');
img.setAttribute('title', 'Move');
img.style.cursor = 'move';
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(img,
mxUtils.bind(this, function(evt)
{
this.graph.graphHandler.start(this.state.cell,
mxEvent.getClientX(evt), mxEvent.getClientY(evt));
this.graph.graphHandler.cellWasClicked = true;
this.graph.isMouseDown = true;
this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
mxEvent.consume(evt);
})
);
this.domNode.appendChild(img);
// Connect
let img = createImage('images/check.png');
img.setAttribute('title', 'Connect');
img.style.cursor = 'pointer';
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(img,
mxUtils.bind(this, function(evt)
{
let pt = mxUtils.convertPoint(this.graph.container,
mxEvent.getClientX(evt), mxEvent.getClientY(evt));
this.graph.connectionHandler.start(this.state, pt.x, pt.y);
this.graph.isMouseDown = true;
this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
mxEvent.consume(evt);
})
);
this.domNode.appendChild(img);
this.graph.container.appendChild(this.domNode);
this.redrawTools();
};
mxVertexToolHandler.prototype.redraw = function()
{
mxVertexHandler.prototype.redraw.apply(this);
this.redrawTools();
};
mxVertexToolHandler.prototype.redrawTools = function()
{
if (this.state != null && this.domNode != null)
{
let dy = 4;
this.domNode.style.left = (this.state.x + this.state.width - 56) + 'px';
this.domNode.style.top = (this.state.y + this.state.height + dy) + 'px';
}
};
mxVertexToolHandler.prototype.destroy = function(sender, me)
{
mxVertexHandler.prototype.destroy.apply(this, arguments);
if (this.domNode != null)
{
this.domNode.parentNode.removeChild(this.domNode);
this.domNode = null;
}
};
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Creates the graph inside the given container
let graph = new mxGraph(container);
graph.setConnectable(true);
graph.connectionHandler.createTarget = true;
graph.createHandler = function(state)
{
if (state != null &&
this.model.isVertex(state.cell))
{
return new mxVertexToolHandler(state);
}
return mxGraph.prototype.createHandler.apply(this, arguments);
};
// Uncomment the following if you want the container
// to fit the size of the graph
//graph.setResizeContainer(true);
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>
export default ContextIcons;

342
src/pages/Control.js
View File

@ -1,16 +1,21 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Control example for mxGraph. This example demonstrates adding
controls to specific cells in a graph.
-->
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Control example for mxGraph. This example demonstrates adding
* controls to specific cells in a graph.
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxUtils from '../mxgraph/util/mxUtils';
import mxRectangle from '../mxgraph/util/mxRectangle';
import mxCellRenderer from '../mxgraph/view/mxCellRenderer';
import mxImageShape from '../mxgraph/shape/mxImageShape';
import mxImage from '../mxgraph/util/mxImage';
class MYNAMEHERE extends React.Component {
class Control extends React.Component {
constructor(props) {
super(props);
}
@ -19,14 +24,22 @@ class MYNAMEHERE extends React.Component {
// A container for the graph
return (
<>
<h1></h1>
<h1>Control example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
width: '621px',
height: '441px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
<div
ref={el => {
this.el2 = el;
}}
/>
</>
@ -34,181 +47,142 @@ class MYNAMEHERE extends React.Component {
};
componentDidMount = () => {
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
graph.setPanning(true);
// Specifies the URL and size of the new control
const deleteImage = new mxImage(
'editors/images/overlays/forbidden.png',
16,
16
);
// Overridden to add an additional control to the state at creation time
const mxCellRendererCreateControl = mxCellRenderer.prototype.createControl;
mxCellRenderer.prototype.createControl = function(state) {
mxCellRendererCreateControl.apply(this, arguments);
const { graph } = state.view;
if (graph.getModel().isVertex(state.cell)) {
if (state.deleteControl == null) {
const b = new mxRectangle(
0,
0,
deleteImage.width,
deleteImage.height
);
state.deleteControl = new mxImageShape(b, deleteImage.src);
state.deleteControl.dialect = graph.dialect;
state.deleteControl.preserveImageAspect = false;
this.initControl(state, state.deleteControl, false, function(evt) {
if (graph.isEnabled()) {
graph.removeCells([state.cell]);
mxEvent.consume(evt);
}
});
}
} else if (state.deleteControl != null) {
state.deleteControl.destroy();
state.deleteControl = null;
}
};
// Helper function to compute the bounds of the control
const getDeleteControlBounds = function(state) {
if (state.deleteControl != null) {
const oldScale = state.deleteControl.scale;
const w = state.deleteControl.bounds.width / oldScale;
const h = state.deleteControl.bounds.height / oldScale;
const s = state.view.scale;
return state.view.graph.getModel().isEdge(state.cell)
? new mxRectangle(
state.x + state.width / 2 - (w / 2) * s,
state.y + state.height / 2 - (h / 2) * s,
w * s,
h * s
)
: new mxRectangle(
state.x + state.width - w * s,
state.y,
w * s,
h * s
);
}
return null;
};
// Overridden to update the scale and bounds of the control
const mxCellRendererRedrawControl = mxCellRenderer.prototype.redrawControl;
mxCellRenderer.prototype.redrawControl = function(state) {
mxCellRendererRedrawControl.apply(this, arguments);
if (state.deleteControl != null) {
const bounds = getDeleteControlBounds(state);
const s = state.view.scale;
if (
state.deleteControl.scale !== s ||
!state.deleteControl.bounds.equals(bounds)
) {
state.deleteControl.bounds = bounds;
state.deleteControl.scale = s;
state.deleteControl.redraw();
}
}
};
// Overridden to remove the control if the state is destroyed
const mxCellRendererDestroy = mxCellRenderer.prototype.destroy;
mxCellRenderer.prototype.destroy = function(state) {
mxCellRendererDestroy.apply(this, arguments);
if (state.deleteControl != null) {
state.deleteControl.destroy();
state.deleteControl = null;
}
};
// Uncomment the following if you want the container
// to fit the size of the graph
// graph.setResizeContainer(true);
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
const e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
graph.centerZoom = false;
this.el2.appendChild(
mxUtils.button('Zoom In', function() {
graph.zoomIn();
})
);
this.el2.appendChild(
mxUtils.button('Zoom Out', function() {
graph.zoomOut();
})
);
};
}
export default MYNAMEHERE;
<html>
<head>
<title>Control example for mxGraph</title>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- Example code -->
<script type="text/javascript">
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Creates the graph inside the given container
let graph = new mxGraph(container);
graph.setPanning(true);
// Specifies the URL and size of the new control
let deleteImage = new mxImage('editors/images/overlays/forbidden.png', 16, 16);
// Overridden to add an additional control to the state at creation time
mxCellRendererCreateControl = mxCellRenderer.prototype.createControl;
mxCellRenderer.prototype.createControl = function(state)
{
mxCellRendererCreateControl.apply(this, arguments);
let graph = state.view.graph;
if (graph.getModel().isVertex(state.cell))
{
if (state.deleteControl == null)
{
let b = new mxRectangle(0, 0, deleteImage.width, deleteImage.height);
state.deleteControl = new mxImageShape(b, deleteImage.src);
state.deleteControl.dialect = graph.dialect;
state.deleteControl.preserveImageAspect = false;
this.initControl(state, state.deleteControl, false, function (evt)
{
if (graph.isEnabled())
{
graph.removeCells([state.cell]);
mxEvent.consume(evt);
}
});
}
}
else if (state.deleteControl != null)
{
state.deleteControl.destroy();
state.deleteControl = null;
}
};
// Helper function to compute the bounds of the control
let getDeleteControlBounds = function(state)
{
if (state.deleteControl != null)
{
let oldScale = state.deleteControl.scale;
let w = state.deleteControl.bounds.width / oldScale;
let h = state.deleteControl.bounds.height / oldScale;
let s = state.view.scale;
return (state.view.graph.getModel().isEdge(state.cell)) ?
new mxRectangle(state.x + state.width / 2 - w / 2 * s,
state.y + state.height / 2 - h / 2 * s, w * s, h * s)
: new mxRectangle(state.x + state.width - w * s,
state.y, w * s, h * s);
}
return null;
};
// Overridden to update the scale and bounds of the control
mxCellRendererRedrawControl = mxCellRenderer.prototype.redrawControl;
mxCellRenderer.prototype.redrawControl = function(state)
{
mxCellRendererRedrawControl.apply(this, arguments);
if (state.deleteControl != null)
{
let bounds = getDeleteControlBounds(state);
let s = state.view.scale;
if (state.deleteControl.scale != s || !state.deleteControl.bounds.equals(bounds))
{
state.deleteControl.bounds = bounds;
state.deleteControl.scale = s;
state.deleteControl.redraw();
}
}
};
// Overridden to remove the control if the state is destroyed
mxCellRendererDestroy = mxCellRenderer.prototype.destroy;
mxCellRenderer.prototype.destroy = function(state)
{
mxCellRendererDestroy.apply(this, arguments);
if (state.deleteControl != null)
{
state.deleteControl.destroy();
state.deleteControl = null;
}
};
// Uncomment the following if you want the container
// to fit the size of the graph
//graph.setResizeContainer(true);
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
graph.centerZoom = false;
document.body.appendChild(mxUtils.button('Zoom In', function()
{
graph.zoomIn();
}));
document.body.appendChild(mxUtils.button('Zoom Out', function()
{
graph.zoomOut();
}));
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;width:621px;height:441px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>
export default Control;

232
src/pages/DragSource.html
View File

@ -1,232 +0,0 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Dragsource example for mxGraph. This example demonstrates using
one drag source for multiple graphs and changing the drag icon.
-->
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
constructor(props) {
super(props);
}
render = () => {
// A container for the graph
return (
<>
<h1></h1>
<div
ref={el => {
this.el = el;
}}
style={{
}}
/>
</>
);
};
componentDidMount = () => {
};
}
export default MYNAMEHERE;
<html>
<head>
<title>Dragsource example for mxGraph</title>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- Example code -->
<script type="text/javascript">
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main()
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Enables guides
mxGraphHandler.prototype.guidesEnabled = true;
// Alt disables guides
mxGuide.prototype.isEnabledForEvent = function(evt)
{
return !mxEvent.isAltDown(evt);
};
// Enables snapping waypoints to terminals
mxEdgeHandler.prototype.snapToTerminals = true;
let graphs = [];
// Creates the graph inside the given container
for (let i = 0; i < 2; i++)
{
let container = document.createElement('div');
container.style.overflow = 'hidden';
container.style.position = 'relative';
container.style.width = '321px';
container.style.height = '241px';
container.style.background = 'url(\'editors/images/grid.gif\')';
container.style.cursor = 'default';
document.body.appendChild(container);
let graph = new mxGraph(container);
graph.gridSize = 30;
// Uncomment the following if you want the container
// to fit the size of the graph
//graph.setResizeContainer(true);
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
graphs.push(graph);
}
// Returns the graph under the mouse
let graphF = function(evt)
{
let x = mxEvent.getClientX(evt);
let y = mxEvent.getClientY(evt);
let elt = document.elementFromPoint(x, y);
for (let i = 0; i < graphs.length; i++)
{
if (mxUtils.isAncestorNode(graphs[i].container, elt))
{
return graphs[i];
}
}
return null;
};
// Inserts a cell at the given location
let funct = function(graph, evt, target, x, y)
{
let cell = new mxCell('Test', new mxGeometry(0, 0, 120, 40));
cell.vertex = true;
let cells = graph.importCells([cell], x, y, target);
if (cells != null && cells.length > 0)
{
graph.scrollCellToVisible(cells[0]);
graph.setSelectionCells(cells);
}
};
// Creates a DOM node that acts as the drag source
let img = mxUtils.createImage('images/icons48/gear.png');
img.style.width = '48px';
img.style.height = '48px';
document.body.appendChild(img);
// Creates the element that is being for the actual preview.
let dragElt = document.createElement('div');
dragElt.style.border = 'dashed black 1px';
dragElt.style.width = '120px';
dragElt.style.height = '40px';
// Drag source is configured to use dragElt for preview and as drag icon
// if scalePreview (last) argument is true. Dx and dy are null to force
// the use of the defaults. Note that dx and dy are only used for the
// drag icon but not for the preview.
let ds = mxUtils.makeDraggable(img, graphF, funct, dragElt, null, null, graph.autoscroll, true);
// Redirects feature to global switch. Note that this feature should only be used
// if the the x and y arguments are used in funct to insert the cell.
ds.isGuidesEnabled = function()
{
return graph.graphHandler.guidesEnabled;
};
// Restores original drag icon while outside of graph
ds.createDragElement = mxDragSource.prototype.createDragElement;
}
};
// NOTE: To enable cross-document DnD (eg. between frames),
// the following methods need to be overridden:
/*mxDragSourceMouseUp = mxDragSource.prototype.mouseUp;
mxDragSource.prototype.mouseUp = function(evt)
{
let doc = this.element.ownerDocument;
if (doc != document)
{
let mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup';
if (this.mouseUpHandler != null)
{
mxEvent.removeListener(doc, mu, this.mouseUpHandler);
}
}
mxDragSourceMouseUp.apply(this, arguments);
};*/
/*mxDragSourceMouseDown = mxDragSource.prototype.mouseDown;
mxDragSource.prototype.mouseDown = function(evt)
{
if (this.enabled && !mxEvent.isConsumed(evt))
{
mxDragSourceMouseDown.apply(this, arguments);
let doc = this.element.ownerDocument;
if (doc != document)
{
let mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup';
mxEvent.addListener(doc, mu, this.mouseUpHandler);
}
}
};*/
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main();">
</body>
</html>

196
src/pages/DragSource.js Normal file
View File

@ -0,0 +1,196 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Dragsource example for mxGraph. This example demonstrates using
* one drag source for multiple graphs and changing the drag icon.
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxCell from '../mxgraph/model/mxCell';
import mxGeometry from '../mxgraph/model/mxGeometry';
import mxUtils from '../mxgraph/util/mxUtils';
import mxDragSource from '../mxgraph/util/mxDragSource';
import mxGraphHandler from "../mxgraph/handler/mxGraphHandler";
import mxGuide from "../mxgraph/util/mxGuide";
import mxEdgeHandler from "../mxgraph/handler/mxEdgeHandler";
class DragSource extends React.Component {
constructor(props) {
super(props);
}
render = () => {
// A container for the graph
return (
<>
<h1>Dragsource example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{}}
/>
</>
);
};
componentDidMount = () => {
// Enables guides
mxGraphHandler.prototype.guidesEnabled = true;
// Alt disables guides
mxGuide.prototype.isEnabledForEvent = function(evt) {
return !mxEvent.isAltDown(evt);
};
// Enables snapping waypoints to terminals
mxEdgeHandler.prototype.snapToTerminals = true;
const graphs = [];
// Creates the graph inside the given container
for (let i = 0; i < 2; i++) {
const container = document.createElement('div');
container.style.overflow = 'hidden';
container.style.position = 'relative';
container.style.width = '321px';
container.style.height = '241px';
container.style.background = "url('editors/images/grid.gif')";
container.style.cursor = 'default';
this.el.appendChild(container);
var graph = new mxGraph(container);
graph.gridSize = 30;
// Uncomment the following if you want the container
// to fit the size of the graph
// graph.setResizeContainer(true);
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
const e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
graphs.push(graph);
}
// Returns the graph under the mouse
const graphF = function(evt) {
const x = mxEvent.getClientX(evt);
const y = mxEvent.getClientY(evt);
const elt = document.elementFromPoint(x, y);
for (let i = 0; i < graphs.length; i++) {
if (mxUtils.isAncestorNode(graphs[i].container, elt)) {
return graphs[i];
}
}
return null;
};
// Inserts a cell at the given location
const funct = function(graph, evt, target, x, y) {
const cell = new mxCell('Test', new mxGeometry(0, 0, 120, 40));
cell.vertex = true;
const cells = graph.importCells([cell], x, y, target);
if (cells != null && cells.length > 0) {
graph.scrollCellToVisible(cells[0]);
graph.setSelectionCells(cells);
}
};
// Creates a DOM node that acts as the drag source
const img = mxUtils.createImage('images/icons48/gear.png');
img.style.width = '48px';
img.style.height = '48px';
document.body.appendChild(img);
// Creates the element that is being for the actual preview.
const dragElt = document.createElement('div');
dragElt.style.border = 'dashed black 1px';
dragElt.style.width = '120px';
dragElt.style.height = '40px';
// Drag source is configured to use dragElt for preview and as drag icon
// if scalePreview (last) argument is true. Dx and dy are null to force
// the use of the defaults. Note that dx and dy are only used for the
// drag icon but not for the preview.
const ds = mxUtils.makeDraggable(
img,
graphF,
funct,
dragElt,
null,
null,
graph.autoscroll,
true
);
// Redirects feature to global switch. Note that this feature should only be used
// if the the x and y arguments are used in funct to insert the cell.
ds.isGuidesEnabled = function() {
return graph.graphHandler.guidesEnabled;
};
// Restores original drag icon while outside of graph
ds.createDragElement = mxDragSource.prototype.createDragElement;
};
// NOTE: To enable cross-document DnD (eg. between frames),
// the following methods need to be overridden:
/* mxDragSourceMouseUp = mxDragSource.prototype.mouseUp;
mxDragSource.prototype.mouseUp = function(evt)
{
let doc = this.element.ownerDocument;
if (doc != document)
{
let mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup';
if (this.mouseUpHandler != null)
{
mxEvent.removeListener(doc, mu, this.mouseUpHandler);
}
}
mxDragSourceMouseUp.apply(this, arguments);
}; */
/* mxDragSourceMouseDown = mxDragSource.prototype.mouseDown;
mxDragSource.prototype.mouseDown = function(evt)
{
if (this.enabled && !mxEvent.isConsumed(evt))
{
mxDragSourceMouseDown.apply(this, arguments);
let doc = this.element.ownerDocument;
if (doc != document)
{
let mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup';
mxEvent.addListener(doc, mu, this.mouseUpHandler);
}
}
}; */
}
export default DragSource;

37
src/pages/dynamicloading.html → src/pages/DynamicLoading.js
View File

@ -4,6 +4,43 @@
Dynamic loading example for mxGraph. This example demonstrates loading
graph model data dynamically to limit the number of cells in the model.
-->
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
constructor(props) {
super(props);
}
render = () => {
// A container for the graph
return (
<>
<h1></h1>
<div
ref={el => {
this.el = el;
}}
style={{
}}
/>
</>
);
};
componentDidMount = () => {
};
}
export default MYNAMEHERE;
<html>
<head>
<title>Dynamic loading example for mxGraph</title>

37
src/pages/dynamicstyle.html → src/pages/DynamicStyle.js
View File

@ -4,6 +4,43 @@
Dynamic Style example for mxGraph. This example demonstrates changing
the style of a cell dynamically by overriding mxGraphModel.getStyle.
-->
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
constructor(props) {
super(props);
}
render = () => {
// A container for the graph
return (
<>
<h1></h1>
<div
ref={el => {
this.el = el;
}}
style={{
}}
/>
</>
);
};
componentDidMount = () => {
};
}
export default MYNAMEHERE;
<html>
<head>
<title>Dynamic Style example for mxGraph</title>

37
src/pages/dynamictoolbar.html → src/pages/DynamicToolbar.js
View File

@ -4,6 +4,43 @@
Dynamic toolbar example for mxGraph. This example demonstrates changing the
state of the toolbar at runtime.
-->
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
constructor(props) {
super(props);
}
render = () => {
// A container for the graph
return (
<>
<h1></h1>
<div
ref={el => {
this.el = el;
}}
style={{
}}
/>
</>
);
};
componentDidMount = () => {
};
}
export default MYNAMEHERE;
<html>
<head>
<title>Toolbar example for mxGraph</title>

37
src/pages/edgetolerance.html → src/pages/EdgeTolerance.js
View File

@ -4,6 +4,43 @@
Edge tolerance example for mxGraph. This example demonstrates increasing
the tolerance for hit detection on edges.
-->
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
constructor(props) {
super(props);
}
render = () => {
// A container for the graph
return (
<>
<h1></h1>
<div
ref={el => {
this.el = el;
}}
style={{
}}
/>
</>
);
};
componentDidMount = () => {
};
}
export default MYNAMEHERE;
<html>
<head>
<title>Edge tolerance example for mxGraph</title>

37
src/pages/editing.html → src/pages/Editing.js
View File

@ -6,6 +6,43 @@
a specific field of the user object. Wrapping and DOM nodes as labels are
also demonstrated here.
-->
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
constructor(props) {
super(props);
}
render = () => {
// A container for the graph
return (
<>
<h1></h1>
<div
ref={el => {
this.el = el;
}}
style={{
}}
/>
</>
);
};
componentDidMount = () => {
};
}
export default MYNAMEHERE;
<html>
<head>
<title>Editing example for mxGraph</title>

37
src/pages/events.html → src/pages/Events.js
View File

@ -9,6 +9,43 @@
default stylesheet, and handle the doubleclick on the adjustment
point. See also: overlays.html for click event handling.
-->
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
constructor(props) {
super(props);
}
render = () => {
// A container for the graph
return (
<>
<h1></h1>
<div
ref={el => {
this.el = el;
}}
style={{
}}
/>
</>
);
};
componentDidMount = () => {
};
}
export default MYNAMEHERE;
<html>
<head>
<title>Events example for mxGraph</title>

37
src/pages/extendcanvas.html → src/pages/ExtendCanvas.js
View File

@ -4,6 +4,43 @@
Extend canvas example for mxGraph. This example demonstrates implementing
an infinite canvas with scrollbars.
-->
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
constructor(props) {
super(props);
}
render = () => {
// A container for the graph
return (
<>
<h1></h1>
<div
ref={el => {
this.el = el;
}}
style={{
}}
/>
</>
);
};
componentDidMount = () => {
};
}
export default MYNAMEHERE;
<html>
<head>
<title>Extend canvas example for mxGraph</title>

36
src/pages/fileio.html → src/pages/FileIO.js
View File

@ -5,6 +5,42 @@
XML file, writing a custom parser, applying an automatic layout and
defining a 2-way edge.
-->
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
constructor(props) {
super(props);
}
render = () => {
// A container for the graph
return (
<>
<h1></h1>
<div
ref={el => {
this.el = el;
}}
style={{
}}
/>
</>
);
};
componentDidMount = () => {
};
}
export default MYNAMEHERE;
<html>
<head>
<title>File I/O example for mxGraph</title>

36
src/pages/fixedicon.html → src/pages/FixedIcon.js
View File

@ -4,6 +4,42 @@
FixedIcon example for mxGraph. This example demonstrates
customizing the icon position in the mxLabel shape.
-->
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
constructor(props) {
super(props);
}
render = () => {
// A container for the graph
return (
<>
<h1></h1>
<div
ref={el => {
this.el = el;
}}
style={{
}}
/>
</>
);
};
componentDidMount = () => {
};
}
export default MYNAMEHERE;
<html>
<head>
<title>Fixed icon example for mxGraph</title>

36
src/pages/fixedpoints.html → src/pages/FixedPoints.js
View File

@ -4,6 +4,42 @@
Fixed points example for mxGraph. This example demonstrates using
fixed connection points for connecting edges to vertices.
-->
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
constructor(props) {
super(props);
}
render = () => {
// A container for the graph
return (
<>
<h1></h1>
<div
ref={el => {
this.el = el;
}}
style={{
}}
/>
</>
);
};
componentDidMount = () => {
};
}
export default MYNAMEHERE;
<html>
<head>
<title>Fixed points example for mxGraph</title>

36
src/pages/folding.html → src/pages/Folding.js
View File

@ -4,6 +4,42 @@
Folding example for mxGraph. This example demonstrates
using a layout to implement a nested group structure.
-->
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
constructor(props) {
super(props);
}
render = () => {
// A container for the graph
return (
<>
<h1></h1>
<div
ref={el => {
this.el = el;
}}
style={{
}}
/>
</>
);
};
componentDidMount = () => {
};
}
export default MYNAMEHERE;
<html>
<head>
<title>Folding example for mxGraph</title>

36
src/pages/graphlayout.html → src/pages/GraphLayout.js
View File

@ -5,6 +5,42 @@
automatic graph layouts and listening to changes of the graph size
to keep the container size in sync.
-->
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
constructor(props) {
super(props);
}
render = () => {
// A container for the graph
return (
<>
<h1></h1>
<div
ref={el => {
this.el = el;
}}
style={{
}}
/>
</>
);
};
componentDidMount = () => {
};
}
export default MYNAMEHERE;
<html>
<head>
<title>Graphlayout example for mxGraph</title>

18
src/pages/index.js
View File

@ -7,16 +7,30 @@ import AutoLayout from "./AutoLayout";
import Animation from "./Animation";
import Boundary from "./Boundary";
import Clipboard from "./Clipboard";
import DragSource from "./DragSource";
import Control from "./Control";
import ContextIcons from "./ContextIcons";
import Collapse from "./Collapse";
import Constituent from "./Constituent";
export default function Home() {
return (
<>
<div style={{
width: '1000px',
margin: '0 auto'
}}>
<HelloWorld />
<Anchors />
<AutoLayout />
<Animation />
<Boundary />
<Clipboard />
</>
<ContextIcons />
<Collapse />
<Constituent />
<ContextIcons />
<Control />
<DragSource />
</div>
);
}