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-25 12:55:45 +11:00
parent ce3a61f1d0
commit 1835e6429d
9 changed files with 997 additions and 894 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/pages/JsonData.js
View File

@ -9,8 +9,19 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent'; import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxCodecRegistry from '../mxgraph/io/mxCodecRegistry';
import mxObjectCodec from '../mxgraph/io/mxObjectCodec';
import mxUtils from '../mxgraph/util/mxUtils';
import mxCodec from '../mxgraph/io/mxCodec';
class JsonData extends React.Component {
// Adds an option to view the XML of the graph
document;
body;
'View XML';
class MYNAMEHERE extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -20,126 +31,82 @@ class MYNAMEHERE extends React.Component {
return ( return (
<> <>
<h1>JSON data example for mxGraph</h1> <h1>JSON data example for mxGraph</h1>
<div <div
ref={el => { ref={el => {
this.el = el; this.el = el;
}} }}
style={{ style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
<div
ref={el => {
this.el2 = el;
}} }}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
<html>
<head>
<title></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
{
// Disables the built-in context menu // Disables the built-in context menu
mxEvent.disableContextMenu(container); mxEvent.disableContextMenu(this.el);
// Creates the graph inside the given container // Creates the graph inside the given container
let graph = new mxGraph(container); const graph = new mxGraph(this.el);
// Enables rubberband selection // Enables rubberband selection
new mxRubberband(graph); new mxRubberband(graph);
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
// Adds cells to the model in a single step // Adds cells to the model in a single step
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{ const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
v1.data = new CustomData('v1'); v1.data = new CustomData('v1');
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30); const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
v2.data = new CustomData('v2'); v2.data = new CustomData('v2');
var e1 = graph.insertEdge(parent, null, '', v1, v2); const e1 = graph.insertEdge(parent, null, '', v1, v2);
} } finally {
finally
{
// Updates the display // Updates the display
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
}
// Adds an option to view the XML of the graph this.el2.appendChild(
document.body.appendChild(mxUtils.button('View XML', function() mxUtils.button(function() {
{ const encoder = new mxCodec();
let encoder = new mxCodec(); const node = encoder.encode(graph.getModel());
let node = encoder.encode(graph.getModel());
mxUtils.popup(mxUtils.getXml(node), true); mxUtils.popup(mxUtils.getXml(node), true);
})); })
}; );
function CustomData(value) function CustomData(value) {
{
this.value = value; this.value = value;
} }
let codec = new mxObjectCodec(new CustomData()); const codec = new mxObjectCodec(new CustomData());
codec.encode = function(enc, obj) {
codec.encode = function(enc, obj) const node = enc.document.createElement('CustomData');
{
let node = enc.document.createElement('CustomData');
mxUtils.setTextContent(node, JSON.stringify(obj)); mxUtils.setTextContent(node, JSON.stringify(obj));
return node; return node;
}; };
codec.decode = function(dec, node, into) {
codec.decode = function(dec, node, into) const obj = JSON.parse(mxUtils.getTextContent(node));
{
let obj = JSON.parse(mxUtils.getTextContent(node));
obj.constructor = CustomData; obj.constructor = CustomData;
return obj; return obj;
}; };
mxCodecRegistry.register(codec); mxCodecRegistry.register(codec);
</script> }
</head> }
<!-- Page passes the container for the graph to the program --> export default JsonData;
<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>

88
src/pages/LOD.js
View File

@ -6,11 +6,10 @@
*/ */
import React from 'react'; import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxUtils from '../mxgraph/util/mxUtils';
class MYNAMEHERE extends React.Component { class LOD extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -20,95 +19,76 @@ class MYNAMEHERE extends React.Component {
return ( return (
<> <>
<h1>Level of detail example for mxGraph</h1> <h1>Level of detail example for mxGraph</h1>
<div <div
ref={el => { ref={el => {
this.el = el; this.el = el;
}} }}
style={{ style={{
position: 'relative',
overflow: 'hidden',
width: '621px',
height: '441px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
<div
ref={el => {
this.el2 = el;
}} }}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
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 // Creates the graph inside the given container
let graph = new mxGraph(container); const graph = new mxGraph(this.el);
graph.centerZoom = false; graph.centerZoom = false;
// Links level of detail to zoom level but can be independent of zoom // Links level of detail to zoom level but can be independent of zoom
graph.isCellVisible = function(cell) graph.isCellVisible = function(cell) {
{
return cell.lod == null || cell.lod / 2 < this.view.scale; return cell.lod == null || cell.lod / 2 < this.view.scale;
}; };
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
// Adds cells to the model in a single step // Adds cells to the model in a single step
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{ const v1 = graph.insertVertex(parent, null, '1', 20, 20, 80, 30);
var v1 = graph.insertVertex(parent, null, '1', 20, 20, 80, 30);
v1.lod = 1; v1.lod = 1;
var v2 = graph.insertVertex(parent, null, '1', 200, 150, 80, 30); const v2 = graph.insertVertex(parent, null, '1', 200, 150, 80, 30);
v2.lod = 1; v2.lod = 1;
var v3 = graph.insertVertex(parent, null, '2', 20, 150, 40, 20); const v3 = graph.insertVertex(parent, null, '2', 20, 150, 40, 20);
v3.lod = 2; v3.lod = 2;
var v4 = graph.insertVertex(parent, null, '3', 200, 10, 20, 20); const v4 = graph.insertVertex(parent, null, '3', 200, 10, 20, 20);
v4.lod = 3; v4.lod = 3;
var e1 = graph.insertEdge(parent, null, '2', v1, v2, 'strokeWidth=2'); const e1 = graph.insertEdge(parent, null, '2', v1, v2, 'strokeWidth=2');
e1.lod = 2; e1.lod = 2;
var e2 = graph.insertEdge(parent, null, '2', v3, v4, 'strokeWidth=2'); var e2 = graph.insertEdge(parent, null, '2', v3, v4, 'strokeWidth=2');
e2.lod = 2; e2.lod = 2;
var e2 = graph.insertEdge(parent, null, '3', v1, v4, 'strokeWidth=1'); var e2 = graph.insertEdge(parent, null, '3', v1, v4, 'strokeWidth=1');
e2.lod = 3; e2.lod = 3;
} } finally {
finally
{
// Updates the display // Updates the display
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
document.body.appendChild(mxUtils.button('+', function() this.el2.appendChild(
{ mxUtils.button('+', function() {
graph.zoomIn(); graph.zoomIn();
})); })
);
document.body.appendChild(mxUtils.button('-', function() this.el2.appendChild(
{ mxUtils.button('-', function() {
graph.zoomOut(); graph.zoomOut();
})); })
);
} }
}; }
</script>
</head>
<!-- Page passes the container for the graph to the program --> export default LOD;
<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:621px;height:441px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>

102
src/pages/LabelPosition.js
View File

@ -6,11 +6,9 @@
*/ */
import React from 'react'; import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component { class LabelPosition extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -20,45 +18,30 @@ class MYNAMEHERE extends React.Component {
return ( return (
<> <>
<h1>Label Position example for mxGraph</h1> <h1>Label Position example for mxGraph</h1>
<div <div
ref={el => { ref={el => {
this.el = el; this.el = el;
}} }}
style={{ style={{
overflow: 'hidden',
position: 'relative',
height: '300px',
}} }}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
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 // Creates the graph inside the given container
let graph = new mxGraph(container); const graph = new mxGraph(this.el);
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
// Defines the common part of all cell styles as a string-prefix // Defines the common part of all cell styles as a string-prefix
let prefix = 'shape=image;image=images/icons48/keys.png;'; const prefix = 'shape=image;image=images/icons48/keys.png;';
// Adds cells to the model in a single step and set the vertex // Adds cells to the model in a single step and set the vertex
// label positions using the label position styles. Vertical // label positions using the label position styles. Vertical
@ -66,33 +49,52 @@ export default MYNAMEHERE;
// Note: Alternatively, vertex labels can be set be overriding // Note: Alternatively, vertex labels can be set be overriding
// mxCellRenderer.getLabelBounds. // mxCellRenderer.getLabelBounds.
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{ graph.insertVertex(
graph.insertVertex(parent, null, 'Bottom', 60, 60, 60, 60, parent,
prefix+'verticalLabelPosition=bottom;verticalAlign=top'); null,
graph.insertVertex(parent, null, 'Top', 140, 60, 60, 60, 'Bottom',
prefix+'verticalLabelPosition=top;verticalAlign=bottom'); 60,
graph.insertVertex(parent, null, 'Left', 60, 160, 60, 60, 60,
prefix+'labelPosition=left;align=right'); 60,
graph.insertVertex(parent, null, 'Right', 140, 160, 60, 60, 60,
prefix+'labelPosition=right;align=left'); `${prefix}verticalLabelPosition=bottom;verticalAlign=top`
} );
finally graph.insertVertex(
{ parent,
null,
'Top',
140,
60,
60,
60,
`${prefix}verticalLabelPosition=top;verticalAlign=bottom`
);
graph.insertVertex(
parent,
null,
'Left',
60,
160,
60,
60,
`${prefix}labelPosition=left;align=right`
);
graph.insertVertex(
parent,
null,
'Right',
140,
160,
60,
60,
`${prefix}labelPosition=right;align=left`
);
} finally {
// Updates the display // Updates the display
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
} }
}; }
</script>
</head>
<!-- Page passes the container for the graph to the program --> export default LabelPosition;
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;position:absolute;width:100%;height:100%;">
</div>
</body>
</html>

183
src/pages/Labels.js
View File

@ -8,11 +8,13 @@
*/ */
import React from 'react'; import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxKeyHandler from '../mxgraph/handler/mxKeyHandler';
import mxConstants from "../mxgraph/util/mxConstants";
import mxRectangle from "../mxgraph/util/mxRectangle";
class MYNAMEHERE extends React.Component { class Labels extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -22,38 +24,27 @@ class MYNAMEHERE extends React.Component {
return ( return (
<> <>
<h1>Hello, World! example for mxGraph</h1> <h1>Hello, World! example for mxGraph</h1>
<div <div
ref={el => { ref={el => {
this.el = el; this.el = el;
}} }}
style={{ style={{
position: 'absolute',
top: '0px',
left: '0px',
overflow: 'hidden',
width: '100%',
height: '100%',
background: "url('editors/images/grid.gif')",
}} }}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
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 // Creates the graph inside the given container
let graph = new mxGraph(container); const graph = new mxGraph(this.el);
graph.setTooltips(true); graph.setTooltips(true);
graph.htmlLabels = true; graph.htmlLabels = true;
graph.vertexLabelsMovable = true; graph.vertexLabelsMovable = true;
@ -67,35 +58,36 @@ export default MYNAMEHERE;
graph.autoSizeCellsOnAdd = true; graph.autoSizeCellsOnAdd = true;
// Allows moving of relative cells // Allows moving of relative cells
graph.isCellLocked = function(cell) graph.isCellLocked = function(cell) {
{
return this.isCellsLocked(); return this.isCellsLocked();
}; };
graph.isCellResizable = function(cell) graph.isCellResizable = function(cell) {
{ const geo = this.model.getGeometry(cell);
let geo = this.model.getGeometry(cell);
return geo == null || !geo.relative; return geo == null || !geo.relative;
}; };
// Truncates the label to the size of the vertex // Truncates the label to the size of the vertex
graph.getLabel = function(cell) graph.getLabel = function(cell) {
{ const label = this.labelsVisible ? this.convertValueToString(cell) : '';
let label = (this.labelsVisible) ? this.convertValueToString(cell) : ''; const geometry = this.model.getGeometry(cell);
let geometry = this.model.getGeometry(cell);
if (!this.model.isCollapsed(cell) && geometry != null && (geometry.offset == null || if (
(geometry.offset.x == 0 && geometry.offset.y == 0)) && this.model.isVertex(cell) && !this.model.isCollapsed(cell) &&
geometry.width >= 2) geometry != null &&
{ (geometry.offset == null ||
let style = this.getCellStyle(cell); (geometry.offset.x == 0 && geometry.offset.y == 0)) &&
let fontSize = style[mxConstants.STYLE_FONTSIZE] || mxConstants.DEFAULT_FONTSIZE; this.model.isVertex(cell) &&
let max = geometry.width / (fontSize * 0.625); geometry.width >= 2
) {
const style = this.getCellStyle(cell);
const fontSize =
style[mxConstants.STYLE_FONTSIZE] || mxConstants.DEFAULT_FONTSIZE;
const max = geometry.width / (fontSize * 0.625);
if (max < label.length) if (max < label.length) {
{ return `${label.substring(0, max)}...`;
return label.substring(0, max) + '...';
} }
} }
@ -103,58 +95,103 @@ export default MYNAMEHERE;
}; };
// Enables wrapping for vertex labels // Enables wrapping for vertex labels
graph.isWrapping = function(cell) graph.isWrapping = function(cell) {
{
return this.model.isCollapsed(cell); return this.model.isCollapsed(cell);
}; };
// Enables clipping of vertex labels if no offset is defined // Enables clipping of vertex labels if no offset is defined
graph.isLabelClipped = function(cell) graph.isLabelClipped = function(cell) {
{ const geometry = this.model.getGeometry(cell);
let geometry = this.model.getGeometry(cell);
return geometry != null && !geometry.relative && (geometry.offset == null || return (
(geometry.offset.x == 0 && geometry.offset.y == 0)); geometry != null &&
!geometry.relative &&
(geometry.offset == null ||
(geometry.offset.x == 0 && geometry.offset.y == 0))
);
}; };
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
// Adds cells to the model in a single step // Adds cells to the model in a single step
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{ const v1 = graph.insertVertex(
var v1 = graph.insertVertex(parent, null, 'vertexLabelsMovable', 20, 20, 80, 30); parent,
null,
'vertexLabelsMovable',
20,
20,
80,
30
);
// Places sublabels inside the vertex // Places sublabels inside the vertex
var label11 = graph.insertVertex(v1, null, 'Label1', 0.5, 1, 0, 0, null, true); const label11 = graph.insertVertex(
var label12 = graph.insertVertex(v1, null, 'Label2', 0.5, 0, 0, 0, null, true); v1,
null,
'Label1',
0.5,
1,
0,
0,
null,
true
);
const label12 = graph.insertVertex(
v1,
null,
'Label2',
0.5,
0,
0,
0,
null,
true
);
var v2 = graph.insertVertex(parent, null, 'Wrapping and clipping is enabled only if the cell is collapsed, otherwise the label is truncated if there is no manual offset.', 200, 150, 80, 30); const v2 = graph.insertVertex(
parent,
null,
'Wrapping and clipping is enabled only if the cell is collapsed, otherwise the label is truncated if there is no manual offset.',
200,
150,
80,
30
);
v2.geometry.alternateBounds = new mxRectangle(0, 0, 80, 30); v2.geometry.alternateBounds = new mxRectangle(0, 0, 80, 30);
var e1 = graph.insertEdge(parent, null, 'edgeLabelsMovable', v1, v2); const e1 = graph.insertEdge(parent, null, 'edgeLabelsMovable', v1, v2);
// Places sublabels inside the vertex // Places sublabels inside the vertex
var label21 = graph.insertVertex(v2, null, 'Label1', 0.5, 1, 0, 0, null, true); const label21 = graph.insertVertex(
var label22 = graph.insertVertex(v2, null, 'Label2', 0.5, 0, 0, 0, null, true); v2,
} null,
finally 'Label1',
{ 0.5,
1,
0,
0,
null,
true
);
const label22 = graph.insertVertex(
v2,
null,
'Label2',
0.5,
0,
0,
0,
null,
true
);
} finally {
// Updates the display // Updates the display
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
} }
}; }
</script>
</head>
<!-- Page passes the container for the graph to the program --> export default Labels;
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="position:absolute;top:0px;left:0px;overflow:hidden;width:100%;height:100%;background:url('editors/images/grid.gif')">
</div>
</body>
</html>

135
src/pages/Layers.js
View File

@ -6,11 +6,13 @@
*/ */
import React from 'react'; import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxCell from '../mxgraph/model/mxCell';
import mxGraphModel from '../mxgraph/model/mxGraphModel';
import mxPoint from '../mxgraph/util/mxPoint';
import mxUtils from '../mxgraph/util/mxUtils';
class MYNAMEHERE extends React.Component { class Layers extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -20,97 +22,110 @@ class MYNAMEHERE extends React.Component {
return ( return (
<> <>
<h1>Layers example for mxGraph</h1> <h1>Layers example for mxGraph</h1>
<div <div
ref={el => { ref={el => {
this.el = el; this.el = el;
}} }}
style={{ style={{
overflow: 'hidden',
position: 'relative',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
}} }}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
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 using a model // Creates the graph inside the given container using a model
// with a custom root and two layers. Layers can also be added // with a custom root and two layers. Layers can also be added
// dynamically using let layer = model.add(root, new mxCell()). // dynamically using let layer = model.add(root, new mxCell()).
let root = new mxCell(); const root = new mxCell();
var layer0 = root.insert(new mxCell()); const layer0 = root.insert(new mxCell());
var layer1 = root.insert(new mxCell()); const layer1 = root.insert(new mxCell());
let model = new mxGraphModel(root); const model = new mxGraphModel(root);
let graph = new mxGraph(container, model); const graph = new mxGraph(this.el, model);
// Disables basic selection and cell handling // Disables basic selection and cell handling
graph.setEnabled(false); graph.setEnabled(false);
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
// Adds cells to the model in a single step // Adds cells to the model in a single step
model.beginUpdate(); model.beginUpdate();
try try {
{ const v1 = graph.insertVertex(
var v1 = graph.insertVertex(layer1, null, 'Hello,', 20, 20, 80, 30, 'fillColor=#C0C0C0'); layer1,
var v2 = graph.insertVertex(layer1, null, 'Hello,', 200, 20, 80, 30, 'fillColor=#C0C0C0'); null,
var v3 = graph.insertVertex(layer0, null, 'World!', 110, 150, 80, 30); 'Hello,',
var e1 = graph.insertEdge(layer1, null, '', v1, v3, 'strokeColor=#0C0C0C'); 20,
20,
80,
30,
'fillColor=#C0C0C0'
);
const v2 = graph.insertVertex(
layer1,
null,
'Hello,',
200,
20,
80,
30,
'fillColor=#C0C0C0'
);
const v3 = graph.insertVertex(layer0, null, 'World!', 110, 150, 80, 30);
const e1 = graph.insertEdge(
layer1,
null,
'',
v1,
v3,
'strokeColor=#0C0C0C'
);
e1.geometry.points = [new mxPoint(60, 165)]; e1.geometry.points = [new mxPoint(60, 165)];
var e2 = graph.insertEdge(layer0, null, '', v2, v3); const e2 = graph.insertEdge(layer0, null, '', v2, v3);
e2.geometry.points = [new mxPoint(240, 165)]; e2.geometry.points = [new mxPoint(240, 165)];
var e3 = graph.insertEdge(layer0, null, '', v1, v2, const e3 = graph.insertEdge(
'edgeStyle=topToBottomEdgeStyle'); layer0,
null,
'',
v1,
v2,
'edgeStyle=topToBottomEdgeStyle'
);
e3.geometry.points = [new mxPoint(150, 30)]; e3.geometry.points = [new mxPoint(150, 30)];
var e4 = graph.insertEdge(layer1, null, '', v2, v1, const e4 = graph.insertEdge(
'strokeColor=#0C0C0C;edgeStyle=topToBottomEdgeStyle'); layer1,
null,
'',
v2,
v1,
'strokeColor=#0C0C0C;edgeStyle=topToBottomEdgeStyle'
);
e4.geometry.points = [new mxPoint(150, 40)]; e4.geometry.points = [new mxPoint(150, 40)];
} } finally {
finally
{
// Updates the display // Updates the display
model.endUpdate(); model.endUpdate();
} }
document.body.appendChild(mxUtils.button('Layer 0', function() document.body.appendChild(
{ mxUtils.button('Layer 0', function() {
model.setVisible(layer0, !model.isVisible(layer0)); model.setVisible(layer0, !model.isVisible(layer0));
})); })
);
document.body.appendChild(mxUtils.button('Layer 1', function() document.body.appendChild(
{ mxUtils.button('Layer 1', function() {
model.setVisible(layer1, !model.isVisible(layer1)); model.setVisible(layer1, !model.isVisible(layer1));
})); })
);
} }
}; }
</script>
</head>
<!-- Page passes the container for the graph to the program --> export default Layers;
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;position:relative;width:321px;height:241px;background:url('editors/images/grid.gif')">
</div>
</body>
</html>

261
src/pages/Markers.js
View File

@ -6,11 +6,16 @@
*/ */
import React from 'react'; import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxPoint from '../mxgraph/util/mxPoint';
import mxCellRenderer from '../mxgraph/view/mxCellRenderer';
import mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';
import mxGraphHandler from '../mxgraph/handler/mxGraphHandler';
import mxCylinder from '../mxgraph/shape/mxCylinder';
import mxMarker from '../mxgraph/shape/mxMarker';
import mxArrow from '../mxgraph/shape/mxArrow';
class MYNAMEHERE extends React.Component { class Markers extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -20,122 +25,107 @@ class MYNAMEHERE extends React.Component {
return ( return (
<> <>
<h1>Markers example for mxGraph</h1> <h1>Markers example for mxGraph</h1>
<div <div
ref={el => { ref={el => {
this.el = el; this.el = el;
}} }}
style={{ style={{
overflow: 'hidden',
position: 'relative',
width: '641px',
height: '381px',
border: '1px solid gray',
cursor: 'default',
}} }}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
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
{
// Enables guides // Enables guides
mxGraphHandler.prototype.guidesEnabled = true; mxGraphHandler.prototype.guidesEnabled = true;
mxEdgeHandler.prototype.snapToTerminals = true; mxEdgeHandler.prototype.snapToTerminals = true;
// Registers and defines the custom marker // Registers and defines the custom marker
mxMarker.addMarker('dash', function(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) mxMarker.addMarker('dash', function(
{ canvas,
let nx = unitX * (size + sw + 1); shape,
let ny = unitY * (size + sw + 1); type,
pe,
unitX,
unitY,
size,
source,
sw,
filled
) {
const nx = unitX * (size + sw + 1);
const ny = unitY * (size + sw + 1);
return function() return function() {
{
canvas.begin(); canvas.begin();
canvas.moveTo(pe.x - nx / 2 - ny / 2, pe.y - ny / 2 + nx / 2); canvas.moveTo(pe.x - nx / 2 - ny / 2, pe.y - ny / 2 + nx / 2);
canvas.lineTo(pe.x + ny / 2 - 3 * nx / 2, pe.y - 3 * ny / 2 - nx / 2); canvas.lineTo(
pe.x + ny / 2 - (3 * nx) / 2,
pe.y - (3 * ny) / 2 - nx / 2
);
canvas.stroke(); canvas.stroke();
}; };
}); });
// Defines custom message shape // Defines custom message shape
function MessageShape() class MessageShape extends mxCylinder {
{ redrawPath(path, x, y, w, h, isForeground) {
mxCylinder.call(this); if (isForeground) {
};
mxUtils.extend(MessageShape, mxCylinder);
MessageShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
{
if (isForeground)
{
path.moveTo(0, 0); path.moveTo(0, 0);
path.lineTo(w / 2, h / 2); path.lineTo(w / 2, h / 2);
path.lineTo(w, 0); path.lineTo(w, 0);
} } else {
else
{
path.moveTo(0, 0); path.moveTo(0, 0);
path.lineTo(w, 0); path.lineTo(w, 0);
path.lineTo(w, h); path.lineTo(w, h);
path.lineTo(0, h); path.lineTo(0, h);
path.close(); path.close();
} }
}; }
}
// Registers the message shape
mxCellRenderer.registerShape('message', MessageShape); mxCellRenderer.registerShape('message', MessageShape);
// Defines custom edge shape // Defines custom edge shape
function LinkShape() class LinkShape extends mxArrow {
{ paintEdgeShape(c, pts) {
mxArrow.call(this); const width = 10;
};
mxUtils.extend(LinkShape, mxArrow);
LinkShape.prototype.paintEdgeShape = function(c, pts)
{
let width = 10;
// Base vector (between end points) // Base vector (between end points)
var p0 = pts[0]; const p0 = pts[0];
let pe = pts[pts.length - 1]; const pe = pts[pts.length - 1];
let dx = pe.x - p0.x; const dx = pe.x - p0.x;
let dy = pe.y - p0.y; const dy = pe.y - p0.y;
let dist = Math.sqrt(dx * dx + dy * dy); const dist = Math.sqrt(dx * dx + dy * dy);
let length = dist; const length = dist;
// Computes the norm and the inverse norm // Computes the norm and the inverse norm
let nx = dx / dist; const nx = dx / dist;
let ny = dy / dist; const ny = dy / dist;
let basex = length * nx; const basex = length * nx;
let basey = length * ny; const basey = length * ny;
let floorx = width * ny/3; const floorx = (width * ny) / 3;
let floory = -width * nx/3; const floory = (-width * nx) / 3;
// Computes points // Computes points
var p0x = p0.x - floorx / 2; const p0x = p0.x - floorx / 2;
var p0y = p0.y - floory / 2; const p0y = p0.y - floory / 2;
var p1x = p0x + floorx; const p1x = p0x + floorx;
var p1y = p0y + floory; const p1y = p0y + floory;
var p2x = p1x + basex; const p2x = p1x + basex;
var p2y = p1y + basey; const p2y = p1y + basey;
var p3x = p2x + floorx; const p3x = p2x + floorx;
var p3y = p2y + floory; const p3y = p2y + floory;
// p4 not necessary // p4 not necessary
var p5x = p3x - 3 * floorx; const p5x = p3x - 3 * floorx;
var p5y = p3y - 3 * floory; const p5y = p3y - 3 * floory;
c.begin(); c.begin();
c.moveTo(p1x, p1y); c.moveTo(p1x, p1y);
@ -143,66 +133,101 @@ export default MYNAMEHERE;
c.moveTo(p5x + floorx, p5y + floory); c.moveTo(p5x + floorx, p5y + floory);
c.lineTo(p0x, p0y); c.lineTo(p0x, p0y);
c.stroke(); c.stroke();
}; }
}
// Registers the link shape
mxCellRenderer.registerShape('link', LinkShape); mxCellRenderer.registerShape('link', LinkShape);
// Creates the graph // Creates the graph
let graph = new mxGraph(container); const graph = new mxGraph(this.el);
// Sets default styles // Sets default styles
let style = graph.getStylesheet().getDefaultVertexStyle(); let style = graph.getStylesheet().getDefaultVertexStyle();
style['fillColor'] = '#FFFFFF'; style.fillColor = '#FFFFFF';
style['strokeColor'] = '#000000'; style.strokeColor = '#000000';
style['fontColor'] = '#000000'; style.fontColor = '#000000';
style['fontStyle'] = '1'; style.fontStyle = '1';
style = graph.getStylesheet().getDefaultEdgeStyle(); style = graph.getStylesheet().getDefaultEdgeStyle();
style['strokeColor'] = '#000000'; style.strokeColor = '#000000';
style['fontColor'] = '#000000'; style.fontColor = '#000000';
style['fontStyle'] = '0'; style.fontStyle = '0';
style['fontStyle'] = '0'; style.fontStyle = '0';
style['startSize'] = '8'; style.startSize = '8';
style['endSize'] = '8'; style.endSize = '8';
// Populates the graph // Populates the graph
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{ const v1 = graph.insertVertex(parent, null, 'v1', 20, 20, 80, 30);
var v1 = graph.insertVertex(parent, null, 'v1', 20, 20, 80, 30); const v2 = graph.insertVertex(parent, null, 'v2', 440, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'v2', 440, 20, 80, 30); const e1 = graph.insertEdge(
var e1 = graph.insertEdge(parent, null, '', v1, v2, 'dashed=1;'+ parent,
'startArrow=oval;endArrow=block;sourcePerimeterSpacing=4;startFill=0;endFill=0;'); null,
var e11 = graph.insertVertex(e1, null, 'Label', 0, 0, 20, 14, '',
'shape=message;labelBackgroundColor=#ffffff;labelPosition=left;spacingRight=2;align=right;fontStyle=0;'); v1,
v2,
'dashed=1;' +
'startArrow=oval;endArrow=block;sourcePerimeterSpacing=4;startFill=0;endFill=0;'
);
const e11 = graph.insertVertex(
e1,
null,
'Label',
0,
0,
20,
14,
'shape=message;labelBackgroundColor=#ffffff;labelPosition=left;spacingRight=2;align=right;fontStyle=0;'
);
e11.geometry.offset = new mxPoint(-10, -7); e11.geometry.offset = new mxPoint(-10, -7);
e11.geometry.relative = true; e11.geometry.relative = true;
e11.connectable = false; e11.connectable = false;
var v3 = graph.insertVertex(parent, null, 'v3', 20, 120, 80, 30); const v3 = graph.insertVertex(parent, null, 'v3', 20, 120, 80, 30);
var v4 = graph.insertVertex(parent, null, 'v4', 440, 120, 80, 30); const v4 = graph.insertVertex(parent, null, 'v4', 440, 120, 80, 30);
var e2 = graph.insertEdge(parent, null, 'Label', v3, v4, const e2 = graph.insertEdge(
'startArrow=dash;startSize=12;endArrow=block;labelBackgroundColor=#FFFFFF;'); parent,
null,
'Label',
v3,
v4,
'startArrow=dash;startSize=12;endArrow=block;labelBackgroundColor=#FFFFFF;'
);
var v5 = graph.insertVertex(parent, null, 'v5', 40, 220, 40, 40, 'shape=ellipse;perimeter=ellipsePerimeter;'); const v5 = graph.insertVertex(
var v6 = graph.insertVertex(parent, null, 'v6', 460, 220, 40, 40, 'shape=doubleEllipse;perimeter=ellipsePerimeter;'); parent,
var e3 = graph.insertEdge(parent, null, 'Link', v5, v6, null,
'shape=link;labelBackgroundColor=#FFFFFF;'); 'v5',
} 40,
finally 220,
{ 40,
40,
'shape=ellipse;perimeter=ellipsePerimeter;'
);
const v6 = graph.insertVertex(
parent,
null,
'v6',
460,
220,
40,
40,
'shape=doubleEllipse;perimeter=ellipsePerimeter;'
);
const e3 = graph.insertEdge(
parent,
null,
'Link',
v5,
v6,
'shape=link;labelBackgroundColor=#FFFFFF;'
);
} finally {
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
} }
}; }
</script>
</head> export default Markers;
<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer"
style="overflow:hidden;position:relative;width:641px;height:381px;border:1px solid gray;cursor:default;">
</div>
</body>
</html>

212
src/pages/Merge.js
View File

@ -6,11 +6,12 @@
*/ */
import React from 'react'; import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxConstants from "../mxgraph/util/mxConstants";
import mxPerimeter from "../mxgraph/view/mxPerimeter";
class MYNAMEHERE extends React.Component { class Merge extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -20,40 +21,25 @@ class MYNAMEHERE extends React.Component {
return ( return (
<> <>
<h1>Merge example for mxGraph</h1> <h1>Merge example for mxGraph</h1>
<div <div
ref={el => { ref={el => {
this.el = el; this.el = el;
}} }}
style={{ style={{
position: 'relative',
overflow: 'hidden',
height: '280px',
}} }}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
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
{
mxConstants.SHADOWCOLOR = '#c0c0c0'; mxConstants.SHADOWCOLOR = '#c0c0c0';
// Creates the graph inside the given container // Creates the graph inside the given container
let graph = new mxGraph(container); const graph = new mxGraph(this.el);
// No size handles, please... // No size handles, please...
graph.setCellsResizable(false); graph.setCellsResizable(false);
@ -80,52 +66,160 @@ export default MYNAMEHERE;
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
// Adds cells to the target model in a single step // Adds cells to the target model in a single step
// using custom ids for the vertices and edges // using custom ids for the vertices and edges
let w = 40; const w = 40;
let h = 40; const h = 40;
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{ const a = graph.insertVertex(
let a = graph.insertVertex(parent, 'a', 'A', 20, 20, w, h, 'fillColor=blue'); parent,
let b = graph.insertVertex(parent, 'b', 'B', 20, 200, w, h, 'fillColor=blue'); 'a',
let c = graph.insertVertex(parent, 'c', 'C', 200, 20, w, h, 'fillColor=red'); 'A',
let d = graph.insertVertex(parent, 'd', 'D', 200, 200, w, h, 'fillColor=red'); 20,
let ac = graph.insertEdge(parent, 'ac', 'ac', a, c, 'strokeColor=blue;verticalAlign=bottom'); 20,
let ad = graph.insertEdge(parent, 'ad', 'ad', a, d, 'strokeColor=blue;align=left;verticalAlign=bottom'); w,
let bd = graph.insertEdge(parent, 'bd', 'bd', b, d, 'strokeColor=blue;verticalAlign=bottom'); h,
} 'fillColor=blue'
finally );
{ const b = graph.insertVertex(
parent,
'b',
'B',
20,
200,
w,
h,
'fillColor=blue'
);
const c = graph.insertVertex(
parent,
'c',
'C',
200,
20,
w,
h,
'fillColor=red'
);
const d = graph.insertVertex(
parent,
'd',
'D',
200,
200,
w,
h,
'fillColor=red'
);
const ac = graph.insertEdge(
parent,
'ac',
'ac',
a,
c,
'strokeColor=blue;verticalAlign=bottom'
);
const ad = graph.insertEdge(
parent,
'ad',
'ad',
a,
d,
'strokeColor=blue;align=left;verticalAlign=bottom'
);
const bd = graph.insertEdge(
parent,
'bd',
'bd',
b,
d,
'strokeColor=blue;verticalAlign=bottom'
);
} finally {
// Updates the display // Updates the display
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
// Creates the second graph model (without a container) // Creates the second graph model (without a container)
var graph2 = new mxGraph(); const graph2 = new mxGraph();
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
var parent2 = graph2.getDefaultParent(); const parent2 = graph2.getDefaultParent();
// Adds cells to the target model in a single step // Adds cells to the target model in a single step
// using custom ids for the vertices // using custom ids for the vertices
graph2.getModel().beginUpdate(); graph2.getModel().beginUpdate();
try try {
{ const c = graph2.insertVertex(
let c = graph2.insertVertex(parent2, 'c', 'C', 200, 20, w, h, 'fillColor=green'); parent2,
let d = graph2.insertVertex(parent2, 'd', 'D', 200, 200, w, h, 'fillColor=green'); 'c',
let e = graph2.insertVertex(parent2, 'e', 'E', 400, 20, w, h, 'fillColor=green'); 'C',
let f = graph2.insertVertex(parent2, 'f', 'F', 400, 200, w, h, 'fillColor=green'); 200,
let ce = graph2.insertEdge(parent2, 'ce', 'ce', c, e, 'strokeColor=green;verticalAlign=bottom'); 20,
let ed = graph2.insertEdge(parent2, 'ed', 'ed', e, d, 'strokeColor=green;align=right;verticalAlign=bottom'); w,
let fd = graph2.insertEdge(parent2, 'bd', 'fd', f, d, 'strokeColor=green;verticalAlign=bottom'); h,
} 'fillColor=green'
finally );
{ const d = graph2.insertVertex(
parent2,
'd',
'D',
200,
200,
w,
h,
'fillColor=green'
);
const e = graph2.insertVertex(
parent2,
'e',
'E',
400,
20,
w,
h,
'fillColor=green'
);
const f = graph2.insertVertex(
parent2,
'f',
'F',
400,
200,
w,
h,
'fillColor=green'
);
const ce = graph2.insertEdge(
parent2,
'ce',
'ce',
c,
e,
'strokeColor=green;verticalAlign=bottom'
);
const ed = graph2.insertEdge(
parent2,
'ed',
'ed',
e,
d,
'strokeColor=green;align=right;verticalAlign=bottom'
);
const fd = graph2.insertEdge(
parent2,
'bd',
'fd',
f,
d,
'strokeColor=green;verticalAlign=bottom'
);
} finally {
// Updates the display // Updates the display
graph2.getModel().endUpdate(); graph2.getModel().endUpdate();
} }
@ -136,18 +230,8 @@ export default MYNAMEHERE;
// edges are assumed to have an identity, and hence the edge // edges are assumed to have an identity, and hence the edge
// "bd" will be changed to point from f to d, as specified in // "bd" will be changed to point from f to d, as specified in
// the edge for the same id in the second graph. // the edge for the same id in the second graph.
graph.getModel().mergeChildren(parent2, parent/*, false*/); graph.getModel().mergeChildren(parent2, parent /* , false */);
} }
}; }
</script>
</head>
<!-- Page passes the container for the graph to the program --> export default Merge;
<body onload="main(document.getElementById('graphContainer'))" style="overflow:hidden;">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="position:absolute;overflow:hidden;width:100%;height:100%;">
</div>
</body>
</html>

265
src/pages/Monitor.js
View File

@ -8,9 +8,14 @@
import React from 'react'; import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent'; import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxConstants from '../mxgraph/util/mxConstants';
import mxCellOverlay from '../mxgraph/view/mxCellOverlay';
import mxUtils from '../mxgraph/util/mxUtils';
import mxCodec from '../mxgraph/io/mxCodec';
import mxPerimeter from "../mxgraph/view/mxPerimeter";
import mxEdgeStyle from "../mxgraph/view/mxEdgeStyle";
class MYNAMEHERE extends React.Component { class Monitor extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -20,194 +25,180 @@ class MYNAMEHERE extends React.Component {
return ( return (
<> <>
<h1>mxGraph Workflow Monitor</h1> <h1>mxGraph Workflow Monitor</h1>
<div <div
ref={el => { ref={el => {
this.el = el; this.el = el;
}} }}
style={{ style={{
overflow: 'hidden',
position: 'relative',
width: '861px',
height: '406px',
cursor: 'default',
}} }}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
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
{
mxConstants.SHADOWCOLOR = '#e0e0e0'; mxConstants.SHADOWCOLOR = '#e0e0e0';
// Creates the graph inside the given container // Creates the graph inside the given container
let graph = createGraph(container); const graph = createGraph(this.el);
// Creates a process display using the activity names as IDs to refer to the elements // Creates a process display using the activity names as IDs to refer to the elements
let xml = '<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/>'+ const xml =
'<mxCell id="2" value="Claim Handling Process" style="swimlane" vertex="1" parent="1"><mxGeometry x="1" width="850" height="400" as="geometry"/></mxCell>'+ '<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/>' +
'<mxCell id="3" value="Claim Manager" style="swimlane" vertex="1" parent="2"><mxGeometry x="30" width="820" height="200" as="geometry"/></mxCell>'+ '<mxCell id="2" value="Claim Handling Process" style="swimlane" vertex="1" parent="1"><mxGeometry x="1" width="850" height="400" as="geometry"/></mxCell>' +
'<mxCell id="5" value="" style="start" vertex="1" parent="3"><mxGeometry x="40" y="85" width="30" height="30" as="geometry"/></mxCell>'+ '<mxCell id="3" value="Claim Manager" style="swimlane" vertex="1" parent="2"><mxGeometry x="30" width="820" height="200" as="geometry"/></mxCell>' +
'<mxCell id="AuthorizeClaim" value="Authorize&#xa;Claim" vertex="1" parent="3"><mxGeometry x="90" y="80" width="100" height="40" as="geometry"/></mxCell>'+ '<mxCell id="5" value="" style="start" vertex="1" parent="3"><mxGeometry x="40" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="6" value="X" style="step" vertex="1" parent="3"><mxGeometry x="210" y="85" width="30" height="30" as="geometry"/></mxCell>'+ '<mxCell id="AuthorizeClaim" value="Authorize&#xa;Claim" vertex="1" parent="3"><mxGeometry x="90" y="80" width="100" height="40" as="geometry"/></mxCell>' +
'<mxCell id="ApproveClaim" value="Approve&#xa;Claim" vertex="1" parent="3"><mxGeometry x="260" y="80" width="100" height="40" as="geometry"/></mxCell>'+ '<mxCell id="6" value="X" style="step" vertex="1" parent="3"><mxGeometry x="210" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="7" value="X" style="step" vertex="1" parent="3"><mxGeometry x="380" y="85" width="30" height="30" as="geometry"/></mxCell>'+ '<mxCell id="ApproveClaim" value="Approve&#xa;Claim" vertex="1" parent="3"><mxGeometry x="260" y="80" width="100" height="40" as="geometry"/></mxCell>' +
'<mxCell id="8" value="" edge="1" parent="3" source="5" target="AuthorizeClaim"><mxGeometry relative="1" as="geometry"/></mxCell>'+ '<mxCell id="7" value="X" style="step" vertex="1" parent="3"><mxGeometry x="380" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="9" value="" edge="1" parent="3" source="AuthorizeClaim" target="6"><mxGeometry relative="1" as="geometry"/></mxCell>'+ '<mxCell id="8" value="" edge="1" parent="3" source="5" target="AuthorizeClaim"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="10" value="" edge="1" parent="3" source="6" target="ApproveClaim"><mxGeometry relative="1" as="geometry"/></mxCell>'+ '<mxCell id="9" value="" edge="1" parent="3" source="AuthorizeClaim" target="6"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="11" value="" edge="1" parent="3" source="ApproveClaim" target="7"><mxGeometry relative="1" as="geometry"/></mxCell>'+ '<mxCell id="10" value="" edge="1" parent="3" source="6" target="ApproveClaim"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="12" value="" edge="1" parent="3" source="7" target="AuthorizeClaim"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="140" y="40"/></Array></mxGeometry></mxCell>'+ '<mxCell id="11" value="" edge="1" parent="3" source="ApproveClaim" target="7"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="ReviewClaim" value="Review&#xa;Claim" vertex="1" parent="3"><mxGeometry x="480" y="80" width="100" height="40" as="geometry"/></mxCell>'+ '<mxCell id="12" value="" edge="1" parent="3" source="7" target="AuthorizeClaim"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="140" y="40"/></Array></mxGeometry></mxCell>' +
'<mxCell id="22" value="X" style="step" vertex="1" parent="3"><mxGeometry x="600" y="85" width="30" height="30" as="geometry"/></mxCell>'+ '<mxCell id="ReviewClaim" value="Review&#xa;Claim" vertex="1" parent="3"><mxGeometry x="480" y="80" width="100" height="40" as="geometry"/></mxCell>' +
'<mxCell id="23" value="" edge="1" parent="3" source="ReviewClaim" target="22"><mxGeometry relative="1" as="geometry"/></mxCell>'+ '<mxCell id="22" value="X" style="step" vertex="1" parent="3"><mxGeometry x="600" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="ApproveReviewedClaim" value="Approve Rev.&#xa;Claim" vertex="1" parent="3"><mxGeometry x="650" y="80" width="100" height="40" as="geometry"/></mxCell>'+ '<mxCell id="23" value="" edge="1" parent="3" source="ReviewClaim" target="22"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="26" value="" edge="1" parent="3" source="22" target="ApproveReviewedClaim"><mxGeometry relative="1" as="geometry"/></mxCell>'+ '<mxCell id="ApproveReviewedClaim" value="Approve Rev.&#xa;Claim" vertex="1" parent="3"><mxGeometry x="650" y="80" width="100" height="40" as="geometry"/></mxCell>' +
'<mxCell id="27" value="X" style="step" vertex="1" parent="3"><mxGeometry x="770" y="85" width="30" height="30" as="geometry"/></mxCell>'+ '<mxCell id="26" value="" edge="1" parent="3" source="22" target="ApproveReviewedClaim"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="28" value="" edge="1" target="27" parent="3" source="ApproveReviewedClaim"><mxGeometry relative="1" as="geometry"><mxPoint x="740" y="100" as="sourcePoint"/><mxPoint x="760" y="100" as="targetPoint"/></mxGeometry></mxCell>'+ '<mxCell id="27" value="X" style="step" vertex="1" parent="3"><mxGeometry x="770" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="32" value="" edge="1" parent="3" source="27" target="ReviewClaim"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="665" y="160"/></Array></mxGeometry></mxCell>'+ '<mxCell id="28" value="" edge="1" target="27" parent="3" source="ApproveReviewedClaim"><mxGeometry relative="1" as="geometry"><mxPoint x="740" y="100" as="sourcePoint"/><mxPoint x="760" y="100" as="targetPoint"/></mxGeometry></mxCell>' +
'<mxCell id="4" value="Accountant" style="swimlane" vertex="1" parent="2"><mxGeometry x="30" y="200" width="820" height="200" as="geometry"/></mxCell>'+ '<mxCell id="32" value="" edge="1" parent="3" source="27" target="ReviewClaim"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="665" y="160"/></Array></mxGeometry></mxCell>' +
'<mxCell id="EnterAccountingData" value="Enter&#xa;Data" vertex="1" parent="4"><mxGeometry x="430" y="80" width="100" height="40" as="geometry"/></mxCell>'+ '<mxCell id="4" value="Accountant" style="swimlane" vertex="1" parent="2"><mxGeometry x="30" y="200" width="820" height="200" as="geometry"/></mxCell>' +
'<mxCell id="14" value="X" style="step" vertex="1" parent="4"><mxGeometry x="550" y="85" width="30" height="30" as="geometry"/></mxCell>'+ '<mxCell id="EnterAccountingData" value="Enter&#xa;Data" vertex="1" parent="4"><mxGeometry x="430" y="80" width="100" height="40" as="geometry"/></mxCell>' +
'<mxCell id="15" value="" edge="1" parent="4" source="EnterAccountingData" target="14"><mxGeometry relative="1" as="geometry"/></mxCell>'+ '<mxCell id="14" value="X" style="step" vertex="1" parent="4"><mxGeometry x="550" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="CheckAccountingData" value="Check&#xa;Data" vertex="1" parent="4"><mxGeometry x="600" y="80" width="100" height="40" as="geometry"/></mxCell>'+ '<mxCell id="15" value="" edge="1" parent="4" source="EnterAccountingData" target="14"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="16" value="" edge="1" parent="4" source="14" target="CheckAccountingData"><mxGeometry relative="1" as="geometry"/></mxCell>'+ '<mxCell id="CheckAccountingData" value="Check&#xa;Data" vertex="1" parent="4"><mxGeometry x="600" y="80" width="100" height="40" as="geometry"/></mxCell>' +
'<mxCell id="17" value="X" style="step" vertex="1" parent="4"><mxGeometry x="720" y="85" width="30" height="30" as="geometry"/></mxCell>'+ '<mxCell id="16" value="" edge="1" parent="4" source="14" target="CheckAccountingData"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="18" value="" edge="1" parent="4" source="CheckAccountingData" target="17"><mxGeometry relative="1" as="geometry"/></mxCell>'+ '<mxCell id="17" value="X" style="step" vertex="1" parent="4"><mxGeometry x="720" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="19" value="" style="end" vertex="1" parent="4"><mxGeometry x="770" y="85" width="30" height="30" as="geometry"/></mxCell>'+ '<mxCell id="18" value="" edge="1" parent="4" source="CheckAccountingData" target="17"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="20" value="" edge="1" parent="4" source="17" target="19"><mxGeometry relative="1" as="geometry"/></mxCell>'+ '<mxCell id="19" value="" style="end" vertex="1" parent="4"><mxGeometry x="770" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="31" value="" edge="1" parent="4" source="17" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="625" y="160"/></Array></mxGeometry></mxCell>'+ '<mxCell id="20" value="" edge="1" parent="4" source="17" target="19"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="13" value="" edge="1" parent="2" source="7" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"/></mxCell>'+ '<mxCell id="31" value="" edge="1" parent="4" source="17" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="625" y="160"/></Array></mxGeometry></mxCell>' +
'<mxCell id="24" value="" edge="1" parent="2" source="14" target="ReviewClaim" style="edgeStyle=none"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="595" y="180"/><mxPoint x="480" y="180"/><mxPoint x="480" y="100"/></Array></mxGeometry></mxCell>'+ '<mxCell id="13" value="" edge="1" parent="2" source="7" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="29" value="" edge="1" parent="2" source="22" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="469" y="40"/></Array></mxGeometry></mxCell>'+ '<mxCell id="24" value="" edge="1" parent="2" source="14" target="ReviewClaim" style="edgeStyle=none"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="595" y="180"/><mxPoint x="480" y="180"/><mxPoint x="480" y="100"/></Array></mxGeometry></mxCell>' +
'<mxCell id="30" value="" edge="1" parent="2" source="27" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="469" y="40"/></Array></mxGeometry></mxCell>'+ '<mxCell id="29" value="" edge="1" parent="2" source="22" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="469" y="40"/></Array></mxGeometry></mxCell>' +
'<mxCell id="33" value="" edge="1" parent="2" source="6" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="255" y="200"/></Array></mxGeometry></mxCell>'+ '<mxCell id="30" value="" edge="1" parent="2" source="27" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="469" y="40"/></Array></mxGeometry></mxCell>' +
'<mxCell id="33" value="" edge="1" parent="2" source="6" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="255" y="200"/></Array></mxGeometry></mxCell>' +
'</root></mxGraphModel>'; '</root></mxGraphModel>';
let doc = mxUtils.parseXml(xml); const doc = mxUtils.parseXml(xml);
let codec = new mxCodec(doc); const codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel()); codec.decode(doc.documentElement, graph.getModel());
}
// Creates a button to invoke the refresh function // Creates a button to invoke the refresh function
document.body.appendChild(mxUtils.button('Update', function(evt) document.body.appendChild(
{ mxUtils.button('Update', function(evt) {
// XML is normally fetched from URL at server using mxUtils.get - this is a client-side // XML is normally fetched from URL at server using mxUtils.get - this is a client-side
// string with randomized states to demonstrate the idea of the workflow monitor // string with randomized states to demonstrate the idea of the workflow monitor
let xml = '<process><update id="ApproveClaim" state="'+getState()+'"/><update id="AuthorizeClaim" state="'+getState()+'"/>'+ const xml =
'<update id="CheckAccountingData" state="'+getState()+'"/><update id="ReviewClaim" state="'+getState()+'"/>'+ `<process><update id="ApproveClaim" state="${getState()}"/><update id="AuthorizeClaim" state="${getState()}"/>` +
'<update id="ApproveReviewedClaim" state="'+getState()+'"/><update id="EnterAccountingData" state="'+getState()+'"/></process>'; `<update id="CheckAccountingData" state="${getState()}"/><update id="ReviewClaim" state="${getState()}"/>` +
`<update id="ApproveReviewedClaim" state="${getState()}"/><update id="EnterAccountingData" state="${getState()}"/></process>`;
update(graph, xml); update(graph, xml);
})); })
}; );
/** /**
* Updates the display of the given graph using the XML data * Updates the display of the given graph using the XML data
*/ */
function update(graph, xml) function update(graph, xml) {
{ if (xml != null && xml.length > 0) {
if (xml != null && xml.length > 0) const doc = mxUtils.parseXml(xml);
{
let doc = mxUtils.parseXml(xml);
if (doc != null && doc.documentElement != null) if (doc != null && doc.documentElement != null) {
{ const model = graph.getModel();
let model = graph.getModel(); const nodes = doc.documentElement.getElementsByTagName('update');
let nodes = doc.documentElement.getElementsByTagName('update');
if (nodes != null && nodes.length > 0) if (nodes != null && nodes.length > 0) {
{
model.beginUpdate(); model.beginUpdate();
try try {
{ for (let i = 0; i < nodes.length; i++) {
for (let i = 0; i < nodes.length; i++)
{
// Processes the activity nodes inside the process node // Processes the activity nodes inside the process node
let id = nodes[i].getAttribute('id'); const id = nodes[i].getAttribute('id');
let state = nodes[i].getAttribute('state'); const state = nodes[i].getAttribute('state');
// Gets the cell for the given activity name from the model // Gets the cell for the given activity name from the model
let cell = model.getCell(id); const cell = model.getCell(id);
// Updates the cell color and adds some tooltip information // Updates the cell color and adds some tooltip information
if (cell != null) if (cell != null) {
{
// Resets the fillcolor and the overlay // Resets the fillcolor and the overlay
graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, 'white', [cell]); graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, 'white', [
cell,
]);
graph.removeCellOverlays(cell); graph.removeCellOverlays(cell);
// Changes the cell color for the known states // Changes the cell color for the known states
if (state == 'Running') if (state == 'Running') {
{ graph.setCellStyles(
graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#f8cecc', [cell]); mxConstants.STYLE_FILLCOLOR,
} '#f8cecc',
else if (state == 'Waiting') [cell]
{ );
graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#fff2cc', [cell]); } else if (state == 'Waiting') {
} graph.setCellStyles(
else if (state == 'Completed') mxConstants.STYLE_FILLCOLOR,
{ '#fff2cc',
graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#d4e1f5', [cell]); [cell]
);
} else if (state == 'Completed') {
graph.setCellStyles(
mxConstants.STYLE_FILLCOLOR,
'#d4e1f5',
[cell]
);
} }
// Adds tooltip information using an overlay icon // Adds tooltip information using an overlay icon
if (state != 'Init') if (state != 'Init') {
{
// Sets the overlay for the cell in the graph // Sets the overlay for the cell in the graph
graph.addCellOverlay(cell, createOverlay(graph.warningImage, 'State: '+state)); graph.addCellOverlay(
cell,
createOverlay(graph.warningImage, `State: ${state}`)
);
} }
} }
} // for } // for
} } finally {
finally
{
model.endUpdate(); model.endUpdate();
} }
} }
} }
} }
}; }
/** /**
* Creates an overlay object using the given tooltip and text for the alert window * Creates an overlay object using the given tooltip and text for the alert window
* which is being displayed on click. * which is being displayed on click.
*/ */
function createOverlay(image, tooltip) function createOverlay(image, tooltip) {
{ const overlay = new mxCellOverlay(image, tooltip);
let overlay = new mxCellOverlay(image, tooltip);
// Installs a handler for clicks on the overlay // Installs a handler for clicks on the overlay
overlay.addListener(mxEvent.CLICK, function(sender, evt) overlay.addListener(mxEvent.CLICK, function(sender, evt) {
{ mxUtils.alert(`${tooltip}\nLast update: ${new Date()}`);
mxUtils.alert(tooltip + '\nLast update: ' + new Date());
}); });
return overlay; return overlay;
}; }
/** /**
* Creates and returns an empty graph inside the given container. * Creates and returns an empty graph inside the given container.
*/ */
function createGraph(container) function createGraph(container) {
{ const graph = new mxGraph(container);
let graph = new mxGraph(container);
graph.setTooltips(true); graph.setTooltips(true);
graph.setEnabled(false); graph.setEnabled(false);
// Disables folding // Disables folding
graph.isCellFoldable = function(cell, collapse) graph.isCellFoldable = function(cell, collapse) {
{
return false; return false;
}; };
@ -276,40 +267,26 @@ export default MYNAMEHERE;
graph.getStylesheet().putCellStyle('end', style); graph.getStylesheet().putCellStyle('end', style);
return graph; return graph;
}; }
/** /**
* Returns a random state. * Returns a random state.
*/ */
function getState() function getState() {
{
let state = 'Init'; let state = 'Init';
let rnd = Math.random() * 4; const rnd = Math.random() * 4;
if (rnd > 3) if (rnd > 3) {
{
state = 'Completed'; state = 'Completed';
} } else if (rnd > 2) {
else if (rnd > 2)
{
state = 'Running'; state = 'Running';
} } else if (rnd > 1) {
else if (rnd > 1)
{
state = 'Waiting'; state = 'Waiting';
} }
return state; return state;
}; }
</script> }
</head> }
<!-- Page passes the container and control to the main function --> export default Monitor;
<body onload="main(document.getElementById('graphContainer'));">
<!-- Acts as a container for the graph -->
<div id="graphContainer" style="overflow:hidden;position:relative;width:861px;height:406px;cursor:default;">
</div>
<br>
</body>
</html>

18
src/pages/index.js
View File

@ -43,13 +43,21 @@ import Orthogonal from "./Orthogonal";
import OrgChart from "./OrgChart"; import OrgChart from "./OrgChart";
import OffPage from "./OffPage"; import OffPage from "./OffPage";
import Morph from "./Morph"; import Morph from "./Morph";
import Monitor from "./Monitor";
import Merge from "./Merge";
import Markers from "./Markers";
import LOD from "./LOD";
import Layers from "./Layers";
import Labels from "./Labels";
import LabelPosition from "./LabelPosition";
import JsonData from "./JsonData";
export default function Home() { export default function Home() {
return ( return (
<div <div
style={{ style={{
width: '1000px', width: '1000px',
margin: '0 auto', margin: '0 auto'
}} }}
> >
<HelloWorld /> <HelloWorld />
@ -71,6 +79,14 @@ export default function Home() {
<EdgeTolerance /> <EdgeTolerance />
<Editing /> <Editing />
<JsonData />
<LabelPosition />
<Labels />
<Layers />
<LOD />
<Markers />
<Merge />
<Monitor />
<Morph /> <Morph />
<OffPage /> <OffPage />
<OrgChart /> <OrgChart />