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

159
src/pages/JsonData.js
View File

@ -1,16 +1,27 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
JSON data example for mxGraph. This example demonstrates using
JSON to encode/decode parts of the graph model in mxCodec.
JSON data example for mxGraph. This example demonstrates using
JSON to encode/decode parts of the graph model in mxCodec.
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
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) {
super(props);
}
@ -20,126 +31,82 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>JSON data 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',
}}
/>
<div
ref={el => {
this.el2 = el;
}}
/>
</>
);
};
}
componentDidMount() {
// Disables the built-in context menu
mxEvent.disableContextMenu(this.el);
};
}
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
export default MYNAMEHERE;
// 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();
<html>
<head>
<title></title>
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
v1.data = new CustomData('v1');
const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
v2.data = new CustomData('v2');
const e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
<!-- 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
mxEvent.disableContextMenu(container);
// Creates the graph inside the given container
let graph = new mxGraph(container);
// 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);
v1.data = new CustomData('v1');
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
v2.data = new CustomData('v2');
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
}
// Adds an option to view the XML of the graph
document.body.appendChild(mxUtils.button('View XML', function()
{
let encoder = new mxCodec();
let node = encoder.encode(graph.getModel());
this.el2.appendChild(
mxUtils.button(function() {
const encoder = new mxCodec();
const node = encoder.encode(graph.getModel());
mxUtils.popup(mxUtils.getXml(node), true);
}));
};
})
);
function CustomData(value)
{
function CustomData(value) {
this.value = value;
}
let codec = new mxObjectCodec(new CustomData());
codec.encode = function(enc, obj)
{
let node = enc.document.createElement('CustomData');
const codec = new mxObjectCodec(new CustomData());
codec.encode = function(enc, obj) {
const node = enc.document.createElement('CustomData');
mxUtils.setTextContent(node, JSON.stringify(obj));
return node;
};
codec.decode = function(dec, node, into)
{
let obj = JSON.parse(mxUtils.getTextContent(node));
codec.decode = function(dec, node, into) {
const obj = JSON.parse(mxUtils.getTextContent(node));
obj.constructor = CustomData;
return obj;
};
mxCodecRegistry.register(codec);
</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 JsonData;

142
src/pages/LOD.js
View File

@ -6,11 +6,10 @@
*/
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';
class MYNAMEHERE extends React.Component {
class LOD extends React.Component {
constructor(props) {
super(props);
}
@ -20,95 +19,76 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Level of detail example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
position: 'relative',
overflow: 'hidden',
width: '621px',
height: '441px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
<div
ref={el => {
this.el2 = el;
}}
/>
</>
);
};
}
componentDidMount() {
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
graph.centerZoom = false;
};
// Links level of detail to zoom level but can be independent of zoom
graph.isCellVisible = function(cell) {
return cell.lod == null || cell.lod / 2 < this.view.scale;
};
// 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, '1', 20, 20, 80, 30);
v1.lod = 1;
const v2 = graph.insertVertex(parent, null, '1', 200, 150, 80, 30);
v2.lod = 1;
const v3 = graph.insertVertex(parent, null, '2', 20, 150, 40, 20);
v3.lod = 2;
const v4 = graph.insertVertex(parent, null, '3', 200, 10, 20, 20);
v4.lod = 3;
const e1 = graph.insertEdge(parent, null, '2', v1, v2, 'strokeWidth=2');
e1.lod = 2;
var e2 = graph.insertEdge(parent, null, '2', v3, v4, 'strokeWidth=2');
e2.lod = 2;
var e2 = graph.insertEdge(parent, null, '3', v1, v4, 'strokeWidth=1');
e2.lod = 3;
} finally {
// Updates the display
graph.getModel().endUpdate();
}
this.el2.appendChild(
mxUtils.button('+', function() {
graph.zoomIn();
})
);
this.el2.appendChild(
mxUtils.button('-', function() {
graph.zoomOut();
})
);
}
}
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
let graph = new mxGraph(container);
graph.centerZoom = false;
// Links level of detail to zoom level but can be independent of zoom
graph.isCellVisible = function(cell)
{
return cell.lod == null || cell.lod / 2 < this.view.scale;
};
// 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, '1', 20, 20, 80, 30);
v1.lod = 1;
var v2 = graph.insertVertex(parent, null, '1', 200, 150, 80, 30);
v2.lod = 1;
var v3 = graph.insertVertex(parent, null, '2', 20, 150, 40, 20);
v3.lod = 2;
var v4 = graph.insertVertex(parent, null, '3', 200, 10, 20, 20);
v4.lod = 3;
var e1 = graph.insertEdge(parent, null, '2', v1, v2, 'strokeWidth=2');
e1.lod = 2;
var e2 = graph.insertEdge(parent, null, '2', v3, v4, 'strokeWidth=2');
e2.lod = 2;
var e2 = graph.insertEdge(parent, null, '3', v1, v4, 'strokeWidth=1');
e2.lod = 3;
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
document.body.appendChild(mxUtils.button('+', function()
{
graph.zoomIn();
}));
document.body.appendChild(mxUtils.button('-', 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="position:relative;overflow:hidden;width:621px;height:441px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>
export default LOD;

132
src/pages/LabelPosition.js
View File

@ -6,11 +6,9 @@
*/
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 {
class LabelPosition extends React.Component {
constructor(props) {
super(props);
}
@ -20,79 +18,83 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Label Position example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
position: 'relative',
height: '300px',
}}
/>
</>
);
};
}
componentDidMount() {
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
};
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
// Defines the common part of all cell styles as a string-prefix
const prefix = 'shape=image;image=images/icons48/keys.png;';
// Adds cells to the model in a single step and set the vertex
// label positions using the label position styles. Vertical
// and horizontal label position styles can be combined.
// Note: Alternatively, vertex labels can be set be overriding
// mxCellRenderer.getLabelBounds.
graph.getModel().beginUpdate();
try {
graph.insertVertex(
parent,
null,
'Bottom',
60,
60,
60,
60,
`${prefix}verticalLabelPosition=bottom;verticalAlign=top`
);
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
graph.getModel().endUpdate();
}
}
}
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
let graph = new mxGraph(container);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent();
// Defines the common part of all cell styles as a string-prefix
let prefix = 'shape=image;image=images/icons48/keys.png;';
// Adds cells to the model in a single step and set the vertex
// label positions using the label position styles. Vertical
// and horizontal label position styles can be combined.
// Note: Alternatively, vertex labels can be set be overriding
// mxCellRenderer.getLabelBounds.
graph.getModel().beginUpdate();
try
{
graph.insertVertex(parent, null, 'Bottom', 60, 60, 60, 60,
prefix+'verticalLabelPosition=bottom;verticalAlign=top');
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
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;position:absolute;width:100%;height:100%;">
</div>
</body>
</html>
export default LabelPosition;

285
src/pages/Labels.js
View File

@ -8,11 +8,13 @@
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
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) {
super(props);
}
@ -22,139 +24,174 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Hello, World! example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
position: 'absolute',
top: '0px',
left: '0px',
overflow: 'hidden',
width: '100%',
height: '100%',
background: "url('editors/images/grid.gif')",
}}
/>
</>
);
};
}
componentDidMount() {
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
graph.setTooltips(true);
graph.htmlLabels = true;
graph.vertexLabelsMovable = true;
new mxRubberband(graph);
new mxKeyHandler(graph);
};
// Do not allow removing labels from parents
graph.graphHandler.removeCellsFromParent = false;
// Autosize labels on insert where autosize=1
graph.autoSizeCellsOnAdd = true;
// Allows moving of relative cells
graph.isCellLocked = function(cell) {
return this.isCellsLocked();
};
graph.isCellResizable = function(cell) {
const geo = this.model.getGeometry(cell);
return geo == null || !geo.relative;
};
// Truncates the label to the size of the vertex
graph.getLabel = function(cell) {
const label = this.labelsVisible ? this.convertValueToString(cell) : '';
const geometry = this.model.getGeometry(cell);
if (
!this.model.isCollapsed(cell) &&
geometry != null &&
(geometry.offset == null ||
(geometry.offset.x == 0 && geometry.offset.y == 0)) &&
this.model.isVertex(cell) &&
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) {
return `${label.substring(0, max)}...`;
}
}
return label;
};
// Enables wrapping for vertex labels
graph.isWrapping = function(cell) {
return this.model.isCollapsed(cell);
};
// Enables clipping of vertex labels if no offset is defined
graph.isLabelClipped = function(cell) {
const geometry = this.model.getGeometry(cell);
return (
geometry != null &&
!geometry.relative &&
(geometry.offset == null ||
(geometry.offset.x == 0 && geometry.offset.y == 0))
);
};
// 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,
'vertexLabelsMovable',
20,
20,
80,
30
);
// Places sublabels inside the vertex
const label11 = graph.insertVertex(
v1,
null,
'Label1',
0.5,
1,
0,
0,
null,
true
);
const label12 = graph.insertVertex(
v1,
null,
'Label2',
0.5,
0,
0,
0,
null,
true
);
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);
const e1 = graph.insertEdge(parent, null, 'edgeLabelsMovable', v1, v2);
// Places sublabels inside the vertex
const label21 = graph.insertVertex(
v2,
null,
'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
graph.getModel().endUpdate();
}
}
}
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
let graph = new mxGraph(container);
graph.setTooltips(true);
graph.htmlLabels = true;
graph.vertexLabelsMovable = true;
new mxRubberband(graph);
new mxKeyHandler(graph);
// Do not allow removing labels from parents
graph.graphHandler.removeCellsFromParent = false;
// Autosize labels on insert where autosize=1
graph.autoSizeCellsOnAdd = true;
// Allows moving of relative cells
graph.isCellLocked = function(cell)
{
return this.isCellsLocked();
};
graph.isCellResizable = function(cell)
{
let geo = this.model.getGeometry(cell);
return geo == null || !geo.relative;
};
// Truncates the label to the size of the vertex
graph.getLabel = function(cell)
{
let label = (this.labelsVisible) ? this.convertValueToString(cell) : '';
let geometry = this.model.getGeometry(cell);
if (!this.model.isCollapsed(cell) && geometry != null && (geometry.offset == null ||
(geometry.offset.x == 0 && geometry.offset.y == 0)) && this.model.isVertex(cell) &&
geometry.width >= 2)
{
let style = this.getCellStyle(cell);
let fontSize = style[mxConstants.STYLE_FONTSIZE] || mxConstants.DEFAULT_FONTSIZE;
let max = geometry.width / (fontSize * 0.625);
if (max < label.length)
{
return label.substring(0, max) + '...';
}
}
return label;
};
// Enables wrapping for vertex labels
graph.isWrapping = function(cell)
{
return this.model.isCollapsed(cell);
};
// Enables clipping of vertex labels if no offset is defined
graph.isLabelClipped = function(cell)
{
let geometry = this.model.getGeometry(cell);
return geometry != null && !geometry.relative && (geometry.offset == null ||
(geometry.offset.x == 0 && geometry.offset.y == 0));
};
// 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, 'vertexLabelsMovable', 20, 20, 80, 30);
// Places sublabels inside the vertex
var label11 = graph.insertVertex(v1, null, 'Label1', 0.5, 1, 0, 0, null, true);
var 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);
v2.geometry.alternateBounds = new mxRectangle(0, 0, 80, 30);
var e1 = graph.insertEdge(parent, null, 'edgeLabelsMovable', v1, v2);
// Places sublabels inside the vertex
var label21 = graph.insertVertex(v2, null, 'Label1', 0.5, 1, 0, 0, null, true);
var label22 = graph.insertVertex(v2, null, 'Label2', 0.5, 0, 0, 0, null, true);
}
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:absolute;top:0px;left:0px;overflow:hidden;width:100%;height:100%;background:url('editors/images/grid.gif')">
</div>
</body>
</html>
export default Labels;

181
src/pages/Layers.js
View File

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

375
src/pages/Markers.js
View File

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

322
src/pages/Merge.js
View File

@ -6,11 +6,12 @@
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
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) {
super(props);
}
@ -20,134 +21,217 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Merge example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
position: 'relative',
overflow: 'hidden',
height: '280px',
}}
/>
</>
);
};
}
componentDidMount() {
mxConstants.SHADOWCOLOR = '#c0c0c0';
};
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
// No size handles, please...
graph.setCellsResizable(false);
// Makes all cells round with a white, bold label
let style = graph.stylesheet.getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
style[mxConstants.STYLE_FONTCOLOR] = 'white';
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
style[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD;
style[mxConstants.STYLE_FONTSIZE] = 14;
style[mxConstants.STYLE_SHADOW] = true;
// Makes all edge labels gray with a white background
style = graph.stylesheet.getDefaultEdgeStyle();
style[mxConstants.STYLE_FONTCOLOR] = 'gray';
style[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD;
style[mxConstants.STYLE_FONTCOLOR] = 'black';
style[mxConstants.STYLE_STROKEWIDTH] = 2;
// 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 target model in a single step
// using custom ids for the vertices and edges
const w = 40;
const h = 40;
graph.getModel().beginUpdate();
try {
const a = graph.insertVertex(
parent,
'a',
'A',
20,
20,
w,
h,
'fillColor=blue'
);
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
graph.getModel().endUpdate();
}
// Creates the second graph model (without a container)
const graph2 = new mxGraph();
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent2 = graph2.getDefaultParent();
// Adds cells to the target model in a single step
// using custom ids for the vertices
graph2.getModel().beginUpdate();
try {
const c = graph2.insertVertex(
parent2,
'c',
'C',
200,
20,
w,
h,
'fillColor=green'
);
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
graph2.getModel().endUpdate();
}
// Merges the model from the second graph into the model of
// the first graph. Note: If you add a false to the parameter
// list then _not_ all edges will be cloned, that is, the
// edges are assumed to have an identity, and hence the edge
// "bd" will be changed to point from f to d, as specified in
// the edge for the same id in the second graph.
graph.getModel().mergeChildren(parent2, parent /* , false */);
}
}
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';
// Creates the graph inside the given container
let graph = new mxGraph(container);
// No size handles, please...
graph.setCellsResizable(false);
// Makes all cells round with a white, bold label
let style = graph.stylesheet.getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
style[mxConstants.STYLE_FONTCOLOR] = 'white';
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
style[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD;
style[mxConstants.STYLE_FONTSIZE] = 14;
style[mxConstants.STYLE_SHADOW] = true;
// Makes all edge labels gray with a white background
style = graph.stylesheet.getDefaultEdgeStyle();
style[mxConstants.STYLE_FONTCOLOR] = 'gray';
style[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD;
style[mxConstants.STYLE_FONTCOLOR] = 'black';
style[mxConstants.STYLE_STROKEWIDTH] = 2;
// 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 target model in a single step
// using custom ids for the vertices and edges
let w = 40;
let h = 40;
graph.getModel().beginUpdate();
try
{
let a = graph.insertVertex(parent, 'a', 'A', 20, 20, w, h, 'fillColor=blue');
let b = graph.insertVertex(parent, 'b', 'B', 20, 200, w, h, 'fillColor=blue');
let c = graph.insertVertex(parent, 'c', 'C', 200, 20, w, h, 'fillColor=red');
let d = graph.insertVertex(parent, 'd', 'D', 200, 200, w, h, 'fillColor=red');
let ac = graph.insertEdge(parent, 'ac', 'ac', a, c, 'strokeColor=blue;verticalAlign=bottom');
let ad = graph.insertEdge(parent, 'ad', 'ad', a, d, 'strokeColor=blue;align=left;verticalAlign=bottom');
let bd = graph.insertEdge(parent, 'bd', 'bd', b, d, 'strokeColor=blue;verticalAlign=bottom');
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
// Creates the second graph model (without a container)
var graph2 = new mxGraph();
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent2 = graph2.getDefaultParent();
// Adds cells to the target model in a single step
// using custom ids for the vertices
graph2.getModel().beginUpdate();
try
{
let c = graph2.insertVertex(parent2, 'c', 'C', 200, 20, w, h, 'fillColor=green');
let d = graph2.insertVertex(parent2, 'd', 'D', 200, 200, w, h, 'fillColor=green');
let e = graph2.insertVertex(parent2, 'e', 'E', 400, 20, w, h, 'fillColor=green');
let f = graph2.insertVertex(parent2, 'f', 'F', 400, 200, w, h, 'fillColor=green');
let ce = graph2.insertEdge(parent2, 'ce', 'ce', c, e, 'strokeColor=green;verticalAlign=bottom');
let ed = graph2.insertEdge(parent2, 'ed', 'ed', e, d, 'strokeColor=green;align=right;verticalAlign=bottom');
let fd = graph2.insertEdge(parent2, 'bd', 'fd', f, d, 'strokeColor=green;verticalAlign=bottom');
}
finally
{
// Updates the display
graph2.getModel().endUpdate();
}
// Merges the model from the second graph into the model of
// the first graph. Note: If you add a false to the parameter
// list then _not_ all edges will be cloned, that is, the
// edges are assumed to have an identity, and hence the edge
// "bd" will be changed to point from f to d, as specified in
// the edge for the same id in the second graph.
graph.getModel().mergeChildren(parent2, parent/*, false*/);
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<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>
export default Merge;

277
src/pages/Monitor.js
View File

@ -8,9 +8,14 @@
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
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) {
super(props);
}
@ -20,194 +25,180 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>mxGraph Workflow Monitor</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
position: 'relative',
width: '861px',
height: '406px',
cursor: 'default',
}}
/>
</>
);
};
}
componentDidMount() {
mxConstants.SHADOWCOLOR = '#e0e0e0';
};
}
// Creates the graph inside the given container
const graph = createGraph(this.el);
export default MYNAMEHERE;
// Creates a process display using the activity names as IDs to refer to the elements
const xml =
'<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/>' +
'<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="3" value="Claim Manager" style="swimlane" vertex="1" parent="2"><mxGeometry x="30" width="820" height="200" 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="AuthorizeClaim" value="Authorize&#xa;Claim" vertex="1" parent="3"><mxGeometry x="90" 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="ApproveClaim" value="Approve&#xa;Claim" vertex="1" parent="3"><mxGeometry x="260" y="80" width="100" height="40" 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="8" value="" edge="1" parent="3" source="5" target="AuthorizeClaim"><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="10" value="" edge="1" parent="3" source="6" target="ApproveClaim"><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="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="ReviewClaim" value="Review&#xa;Claim" vertex="1" parent="3"><mxGeometry x="480" y="80" width="100" height="40" 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="23" value="" edge="1" parent="3" source="ReviewClaim" target="22"><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="26" value="" edge="1" parent="3" source="22" target="ApproveReviewedClaim"><mxGeometry relative="1" 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="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="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="4" value="Accountant" style="swimlane" vertex="1" parent="2"><mxGeometry x="30" y="200" width="820" height="200" 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="14" value="X" style="step" vertex="1" parent="4"><mxGeometry x="550" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="15" value="" edge="1" parent="4" source="EnterAccountingData" target="14"><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="16" value="" edge="1" parent="4" source="14" target="CheckAccountingData"><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="18" value="" edge="1" parent="4" source="CheckAccountingData" target="17"><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="20" value="" edge="1" parent="4" source="17" target="19"><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="13" value="" edge="1" parent="2" source="7" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"/></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="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="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>';
const doc = mxUtils.parseXml(xml);
const codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
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';
// Creates the graph inside the given container
let graph = createGraph(container);
// 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"/>'+
'<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="3" value="Claim Manager" style="swimlane" vertex="1" parent="2"><mxGeometry x="30" width="820" height="200" 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="AuthorizeClaim" value="Authorize&#xa;Claim" vertex="1" parent="3"><mxGeometry x="90" 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="ApproveClaim" value="Approve&#xa;Claim" vertex="1" parent="3"><mxGeometry x="260" y="80" width="100" height="40" 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="8" value="" edge="1" parent="3" source="5" target="AuthorizeClaim"><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="10" value="" edge="1" parent="3" source="6" target="ApproveClaim"><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="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="ReviewClaim" value="Review&#xa;Claim" vertex="1" parent="3"><mxGeometry x="480" y="80" width="100" height="40" 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="23" value="" edge="1" parent="3" source="ReviewClaim" target="22"><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="26" value="" edge="1" parent="3" source="22" target="ApproveReviewedClaim"><mxGeometry relative="1" 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="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="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="4" value="Accountant" style="swimlane" vertex="1" parent="2"><mxGeometry x="30" y="200" width="820" height="200" 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="14" value="X" style="step" vertex="1" parent="4"><mxGeometry x="550" y="85" width="30" height="30" as="geometry"/></mxCell>'+
'<mxCell id="15" value="" edge="1" parent="4" source="EnterAccountingData" target="14"><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="16" value="" edge="1" parent="4" source="14" target="CheckAccountingData"><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="18" value="" edge="1" parent="4" source="CheckAccountingData" target="17"><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="20" value="" edge="1" parent="4" source="17" target="19"><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="13" value="" edge="1" parent="2" source="7" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"/></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="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="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>';
let doc = mxUtils.parseXml(xml);
let codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
}
// Creates a button to invoke the refresh function
document.body.appendChild(mxUtils.button('Update', function(evt)
{
// Creates a button to invoke the refresh function
document.body.appendChild(
mxUtils.button('Update', function(evt) {
// 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
let xml = '<process><update id="ApproveClaim" state="'+getState()+'"/><update id="AuthorizeClaim" state="'+getState()+'"/>'+
'<update id="CheckAccountingData" state="'+getState()+'"/><update id="ReviewClaim" state="'+getState()+'"/>'+
'<update id="ApproveReviewedClaim" state="'+getState()+'"/><update id="EnterAccountingData" state="'+getState()+'"/></process>';
const xml =
`<process><update id="ApproveClaim" state="${getState()}"/><update id="AuthorizeClaim" state="${getState()}"/>` +
`<update id="CheckAccountingData" state="${getState()}"/><update id="ReviewClaim" state="${getState()}"/>` +
`<update id="ApproveReviewedClaim" state="${getState()}"/><update id="EnterAccountingData" state="${getState()}"/></process>`;
update(graph, xml);
}));
};
})
);
/**
* Updates the display of the given graph using the XML data
*/
function update(graph, xml)
{
if (xml != null && xml.length > 0)
{
let doc = mxUtils.parseXml(xml);
function update(graph, xml) {
if (xml != null && xml.length > 0) {
const doc = mxUtils.parseXml(xml);
if (doc != null && doc.documentElement != null)
{
let model = graph.getModel();
let nodes = doc.documentElement.getElementsByTagName('update');
if (doc != null && doc.documentElement != null) {
const model = graph.getModel();
const nodes = doc.documentElement.getElementsByTagName('update');
if (nodes != null && nodes.length > 0)
{
if (nodes != null && nodes.length > 0) {
model.beginUpdate();
try
{
for (let i = 0; i < nodes.length; i++)
{
try {
for (let i = 0; i < nodes.length; i++) {
// Processes the activity nodes inside the process node
let id = nodes[i].getAttribute('id');
let state = nodes[i].getAttribute('state');
const id = nodes[i].getAttribute('id');
const state = nodes[i].getAttribute('state');
// 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
if (cell != null)
{
if (cell != null) {
// Resets the fillcolor and the overlay
graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, 'white', [cell]);
graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, 'white', [
cell,
]);
graph.removeCellOverlays(cell);
// Changes the cell color for the known states
if (state == 'Running')
{
graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#f8cecc', [cell]);
}
else if (state == 'Waiting')
{
graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#fff2cc', [cell]);
}
else if (state == 'Completed')
{
graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#d4e1f5', [cell]);
if (state == 'Running') {
graph.setCellStyles(
mxConstants.STYLE_FILLCOLOR,
'#f8cecc',
[cell]
);
} else if (state == 'Waiting') {
graph.setCellStyles(
mxConstants.STYLE_FILLCOLOR,
'#fff2cc',
[cell]
);
} else if (state == 'Completed') {
graph.setCellStyles(
mxConstants.STYLE_FILLCOLOR,
'#d4e1f5',
[cell]
);
}
// Adds tooltip information using an overlay icon
if (state != 'Init')
{
if (state != 'Init') {
// 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
}
finally
{
} finally {
model.endUpdate();
}
}
}
}
};
}
/**
* Creates an overlay object using the given tooltip and text for the alert window
* which is being displayed on click.
*/
function createOverlay(image, tooltip)
{
let overlay = new mxCellOverlay(image, tooltip);
function createOverlay(image, tooltip) {
const overlay = new mxCellOverlay(image, tooltip);
// Installs a handler for clicks on the overlay
overlay.addListener(mxEvent.CLICK, function(sender, evt)
{
mxUtils.alert(tooltip + '\nLast update: ' + new Date());
overlay.addListener(mxEvent.CLICK, function(sender, evt) {
mxUtils.alert(`${tooltip}\nLast update: ${new Date()}`);
});
return overlay;
};
}
/**
* Creates and returns an empty graph inside the given container.
*/
function createGraph(container)
{
let graph = new mxGraph(container);
function createGraph(container) {
const graph = new mxGraph(container);
graph.setTooltips(true);
graph.setEnabled(false);
// Disables folding
graph.isCellFoldable = function(cell, collapse)
{
graph.isCellFoldable = function(cell, collapse) {
return false;
};
@ -276,40 +267,26 @@ export default MYNAMEHERE;
graph.getStylesheet().putCellStyle('end', style);
return graph;
};
}
/**
* Returns a random state.
*/
function getState()
{
function getState() {
let state = 'Init';
let rnd = Math.random() * 4;
const rnd = Math.random() * 4;
if (rnd > 3)
{
if (rnd > 3) {
state = 'Completed';
}
else if (rnd > 2)
{
} else if (rnd > 2) {
state = 'Running';
}
else if (rnd > 1)
{
} else if (rnd > 1) {
state = 'Waiting';
}
return state;
};
</script>
</head>
}
}
}
<!-- Page passes the container and control to the main function -->
<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>
export default Monitor;

18
src/pages/index.js
View File

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