From 1835e6429dd6820f1af36e295cb1df3780dd2a52 Mon Sep 17 00:00:00 2001 From: mcyph <20507948+mcyph@users.noreply.github.com> Date: Thu, 25 Mar 2021 12:55:45 +1100 Subject: [PATCH] started integrating more examples into the next.js app --- src/pages/JsonData.js | 159 +++++++--------- src/pages/LOD.js | 142 ++++++-------- src/pages/LabelPosition.js | 132 ++++++------- src/pages/Labels.js | 285 ++++++++++++++++------------ src/pages/Layers.js | 181 ++++++++++-------- src/pages/Markers.js | 375 ++++++++++++++++++++----------------- src/pages/Merge.js | 322 +++++++++++++++++++------------ src/pages/Monitor.js | 277 +++++++++++++-------------- src/pages/index.js | 18 +- 9 files changed, 997 insertions(+), 894 deletions(-) diff --git a/src/pages/JsonData.js b/src/pages/JsonData.js index 4770d5de2..38d7fd290 100644 --- a/src/pages/JsonData.js +++ b/src/pages/JsonData.js @@ -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 ( <>

JSON data example for mxGraph

-
{ this.el = el; }} style={{ - + position: 'relative', + overflow: 'hidden', + width: '321px', + height: '241px', + background: "url('editors/images/grid.gif')", + cursor: 'default', + }} + /> +
{ + 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(); - - - + // 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(); + } - - - - - - - - - + } +} - - - - -
-
- - +export default JsonData; diff --git a/src/pages/LOD.js b/src/pages/LOD.js index 57444f7ea..4a61625e4 100644 --- a/src/pages/LOD.js +++ b/src/pages/LOD.js @@ -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 ( <>

Level of detail example for mxGraph

-
{ this.el = el; }} style={{ - + position: 'relative', + overflow: 'hidden', + width: '621px', + height: '441px', + background: "url('editors/images/grid.gif')", + cursor: 'default', + }} + /> +
{ + 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(); - })); - } - }; - - - - - - - -
-
- - +export default LOD; diff --git a/src/pages/LabelPosition.js b/src/pages/LabelPosition.js index 83fd37238..a4def364f 100644 --- a/src/pages/LabelPosition.js +++ b/src/pages/LabelPosition.js @@ -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 ( <>

Label Position example for mxGraph

-
{ 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(); - } - } - }; - - - - - - - -
-
- - +export default LabelPosition; diff --git a/src/pages/Labels.js b/src/pages/Labels.js index 822fc1bb3..68c2d06cf 100644 --- a/src/pages/Labels.js +++ b/src/pages/Labels.js @@ -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 ( <>

Hello, World! example for mxGraph

-
{ 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(); - } - } - }; - - - - - - - -
-
- - +export default Labels; diff --git a/src/pages/Layers.js b/src/pages/Layers.js index 88258c67f..f6e3bf426 100644 --- a/src/pages/Layers.js +++ b/src/pages/Layers.js @@ -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 ( <>

Layers example for mxGraph

-
{ 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)); - })); - } - }; - - - - - - - -
-
- - +export default Layers; diff --git a/src/pages/Markers.js b/src/pages/Markers.js index b6b7caf61..f0cd1272e 100644 --- a/src/pages/Markers.js +++ b/src/pages/Markers.js @@ -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 ( <>

Markers example for mxGraph

-
{ 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(); - } - } - }; - - - -
-
- - +export default Markers; diff --git a/src/pages/Merge.js b/src/pages/Merge.js index 6fd0a0989..fa3e37cb5 100644 --- a/src/pages/Merge.js +++ b/src/pages/Merge.js @@ -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 ( <>

Merge example for mxGraph

-
{ 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*/); - } - }; - - - - - - - -
-
- - +export default Merge; diff --git a/src/pages/Monitor.js b/src/pages/Monitor.js index 90e022ccf..c09b01653 100644 --- a/src/pages/Monitor.js +++ b/src/pages/Monitor.js @@ -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 ( <>

mxGraph Workflow Monitor

-
{ 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 = + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + ''; + 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 = ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''; - 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 = ''+ - ''+ - ''; + const xml = + `` + + `` + + ``; 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; - }; - - + } + } +} - - - - -
-
-
- - +export default Monitor; diff --git a/src/pages/index.js b/src/pages/index.js index e888be9a0..94770bd80 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -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 (
@@ -71,6 +79,14 @@ export default function Home() { + + + + + + + +