Fixed points
- This example demonstrates using fixed connection points for connecting - edges to vertices. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- position: 'relative',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
- );
- }
-
- componentDidMount() {
- class MyCustomConstraintHandler extends mxConstraintHandler {
- // Snaps to fixed points
- intersects(icon, point, source, existingEdge) {
- return (
- !source || existingEdge || mxUtils.intersects(icon.bounds, point)
- );
- }
- }
-
- class MyCustomConnectionHandler extends mxConnectionHandler {
- // connectImage = new mxImage('images/connector.gif', 16, 16);
-
- isConnectableCell(cell) {
- return false;
- }
-
- /*
- * Special case: Snaps source of new connections to fixed points
- * Without a connect preview in connectionHandler.createEdgeState mouseMove
- * and getSourcePerimeterPoint should be overriden by setting sourceConstraint
- * sourceConstraint to null in mouseMove and updating it and returning the
- * nearest point (cp) in getSourcePerimeterPoint (see below)
- */
- updateEdgeState(pt, constraint) {
- if (pt != null && this.previous != null) {
- const constraints = this.graph.getAllConnectionConstraints(
- this.previous
- );
- let nearestConstraint = null;
- let dist = null;
-
- for (let i = 0; i < constraints.length; i++) {
- const cp = this.graph.getConnectionPoint(
- this.previous,
- constraints[i]
- );
-
- if (cp != null) {
- const tmp =
- (cp.x - pt.x) * (cp.x - pt.x) + (cp.y - pt.y) * (cp.y - pt.y);
-
- if (dist == null || tmp < dist) {
- nearestConstraint = constraints[i];
- dist = tmp;
- }
- }
- }
-
- if (nearestConstraint != null) {
- this.sourceConstraint = nearestConstraint;
- }
-
- // In case the edge style must be changed during the preview:
- // this.edgeState.style['edgeStyle'] = 'orthogonalEdgeStyle';
- // And to use the new edge style in the new edge inserted into the graph,
- // update the cell style as follows:
- // this.edgeState.cell.style = mxUtils.setStyle(this.edgeState.cell.style, 'edgeStyle', this.edgeState.style['edgeStyle']);
- }
- return super.updateEdgeState(pt, constraint);
- }
-
- createEdgeState(me) {
- // Connect preview
- const edge = this.graph.createEdge(
- null,
- null,
- null,
- null,
- null,
- 'edgeStyle=orthogonalEdgeStyle'
- );
-
- return new mxCellState(
- this.graph.view,
- edge,
- this.graph.getCellStyle(edge)
- );
- }
- }
-
- class MyCustomEdgeHandler extends mxEdgeHandler {
- // Disables floating connections (only use with no connect image)
- isConnectableCell(cell) {
- return graph.connectionHandler.isConnectableCell(cell);
- }
- }
-
- class MyCustomGraph extends mxGraph {
- createConnectionHandler() {
- const r = new MyCustomConnectionHandler();
- r.constraintHandler = new MyCustomConstraintHandler(this);
- return r;
- }
-
- createEdgeHandler(state, edgeStyle) {
- const r = new MyCustomEdgeHandler(state, edgeStyle);
- r.constraintHandler = new MyCustomConstraintHandler(this);
- return r;
- }
-
- getAllConnectionConstraints(terminal) {
- if (terminal != null && terminal.cell.isVertex()) {
- return [
- new mxConnectionConstraint(new mxPoint(0, 0), true),
- new mxConnectionConstraint(new mxPoint(0.5, 0), true),
- new mxConnectionConstraint(new mxPoint(1, 0), true),
- new mxConnectionConstraint(new mxPoint(0, 0.5), true),
- new mxConnectionConstraint(new mxPoint(1, 0.5), true),
- new mxConnectionConstraint(new mxPoint(0, 1), true),
- new mxConnectionConstraint(new mxPoint(0.5, 1), true),
- new mxConnectionConstraint(new mxPoint(1, 1), true),
- ];
- }
- return null;
- }
- }
-
- // Creates the graph inside the given container
- const graph = new MyCustomGraph(this.el);
- graph.setConnectable(true);
-
- // Enables rubberband selection
- new mxRubberband(graph);
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- const parent = graph.getDefaultParent();
-
- // Adds cells to the model in a single step
- graph.batchUpdate(() => {
- const v1 = graph.insertVertex({
- parent,
- value: 'Hello,',
- position: [20, 20],
- size: [80, 60],
- style: 'shape=triangle;perimeter=trianglePerimeter',
- });
- const v2 = graph.insertVertex({
- parent,
- value: 'World!',
- position: [200, 150],
- size: [80, 60],
- style: 'shape=ellipse;perimeter=ellipsePerimeter',
- });
- const v3 = graph.insertVertex({
- parent,
- value: 'Hello,',
- position: [200, 20],
- size: [80, 30],
- });
- const e1 = graph.insertEdge({
- parent,
- value: '',
- source: v1,
- target: v2,
- style:
- 'edgeStyle=elbowEdgeStyle;elbow=horizontal;' +
- 'exitX=0.5;exitY=1;exitPerimeter=1;entryX=0;entryY=0;entryPerimeter=1;',
- });
- const e2 = graph.insertEdge({
- parent,
- value: '',
- source: v3,
- target: v2,
- style:
- 'edgeStyle=elbowEdgeStyle;elbow=horizontal;orthogonal=0;' +
- 'entryX=0;entryY=0;entryPerimeter=1;',
- });
- });
-
- // Use this code to snap the source point for new connections without a connect preview,
- // ie. without an overridden graph.connectionHandler.createEdgeState
- /*
- let mxConnectionHandlerMouseMove = mxConnectionHandler.prototype.mouseMove;
- mxConnectionHandler.prototype.mouseMove = function(sender, me)
- {
- this.sourceConstraint = null;
-
- mxConnectionHandlerMouseMove.apply(this, arguments);
- };
-
- let mxConnectionHandlerGetSourcePerimeterPoint = mxConnectionHandler.prototype.getSourcePerimeterPoint;
- mxConnectionHandler.prototype.getSourcePerimeterPoint = function(state, pt, me)
- {
- let result = null;
-
- if (this.previous != null && pt != null)
- {
- let constraints = this.graph.getAllConnectionConstraints(this.previous);
- let nearestConstraint = null;
- let nearest = null;
- let dist = null;
-
- for (let i = 0; i < constraints.length; i++)
- {
- let cp = this.graph.getConnectionPoint(this.previous, constraints[i]);
-
- if (cp != null)
- {
- let tmp = (cp.x - pt.x) * (cp.x - pt.x) + (cp.y - pt.y) * (cp.y - pt.y);
-
- if (dist == null || tmp < dist)
- {
- nearestConstraint = constraints[i];
- nearest = cp;
- dist = tmp;
- }
- }
- }
-
- if (nearestConstraint != null)
- {
- this.sourceConstraint = nearestConstraint;
- result = nearest;
- }
- }
-
- if (result == null)
- {
- result = mxConnectionHandlerGetSourcePerimeterPoint.apply(this, arguments);
- }
-
- return result;
- };
- */
- }
-}
-
-export default FixedPoints;
diff --git a/src/pages/connections/HelloPort.js b/src/pages/connections/HelloPort.js
deleted file mode 100644
index 25d194b43..000000000
--- a/src/pages/connections/HelloPort.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
-import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxCodec from '../../mxgraph/serialization/mxCodec';
-import mxUtils from '../../mxgraph/util/mxUtils';
-
-class HelloPort extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Hello Port
- This example demonstrates using the isPort hook for visually connecting - to another cell. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- height: '241px',
- 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.setConnectable(true);
- graph.setTooltips(true);
-
- // Sets the default edge style
- const style = graph.getStylesheet().getDefaultEdgeStyle();
- style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
-
- // Ports are not used as terminals for edges, they are
- // only used to compute the graphical connection point
- graph.isPort = function(cell) {
- const geo = this.getCellGeometry(cell);
-
- return geo != null ? geo.relative : false;
- };
-
- // Implements a tooltip that shows the actual
- // source and target of an edge
- graph.getTooltipForCell = function(cell) {
- if (cell.isEdge()) {
- return `${this.convertValueToString(
- cell.getTerminal(true)
- )} => ${this.convertValueToString(
- cell.getTerminal(false)
- )}`;
- }
-
- return mxGraph.prototype.getTooltipForCell.apply(this, arguments);
- };
-
- // Removes the folding icon and disables any folding
- graph.isCellFoldable = function(cell) {
- return false;
- };
-
- // 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, 80, 80, 30);
- v1.setConnectable(false);
- const v11 = graph.insertVertex(v1, null, '', 1, 1, 10, 10);
- v11.geometry.offset = new mxPoint(-5, -5);
- v11.geometry.relative = true;
- const v12 = graph.insertVertex(v1, null, '', 1, 0, 10, 10);
- v12.geometry.offset = new mxPoint(-5, -5);
- v12.geometry.relative = true;
- const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
- const v3 = graph.insertVertex(parent, null, 'World2', 200, 20, 80, 30);
- var e1 = graph.insertEdge(parent, null, '', v11, v2);
- var e1 = graph.insertEdge(parent, null, '', v12, v3);
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
-
- const button = mxUtils.button('View XML', function() {
- const encoder = new mxCodec();
- const node = encoder.encode(graph.getModel());
- mxUtils.popup(mxUtils.getPrettyXml(node), true);
- });
-
- this.el2.appendChild(button);
- }
-}
-
-export default HelloPort;
diff --git a/src/pages/connections/PortRefs.js b/src/pages/connections/PortRefs.js
deleted file mode 100644
index 750b5f587..000000000
--- a/src/pages/connections/PortRefs.js
+++ /dev/null
@@ -1,294 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxConstraintHandler from '../../mxgraph/handler/mxConstraintHandler';
-import mxImage from '../../mxgraph/util/image/mxImage';
-import mxShape from '../../mxgraph/shape/mxShape';
-import mxTriangle from '../../mxgraph/shape/mxTriangle';
-import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
-import mxConnectionConstraint from '../../mxgraph/view/connection/mxConnectionConstraint';
-import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxConstants from '../../mxgraph/util/mxConstants';
-
-class PortRefs extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Port References Example
- This example demonstrates referencing connection points by ID. The main - difference to the implementation where the connection point is stored in - the connecting edge is that changes to the original port will be - reflected in all existing connections since they reference that port. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- position: 'relative',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Replaces the port image
- mxConstraintHandler.prototype.pointImage = new mxImage(
- 'images/dot.gif',
- 10,
- 10
- );
-
- const graph = new mxGraph(this.el);
- graph.setConnectable(true);
-
- // Disables automatic handling of ports. This disables the reset of the
- // respective style in mxGraph.cellConnected. Note that this feature may
- // be useful if floating and fixed connections are combined.
- graph.setPortsEnabled(false);
-
- // 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();
-
- // Ports are equal for all shapes...
- const ports = new Array();
-
- // NOTE: Constraint is used later for orthogonal edge routing (currently ignored)
- ports.w = { x: 0, y: 0.5, perimeter: true, constraint: 'west' };
- ports.e = { x: 1, y: 0.5, perimeter: true, constraint: 'east' };
- ports.n = { x: 0.5, y: 0, perimeter: true, constraint: 'north' };
- ports.s = { x: 0.5, y: 1, perimeter: true, constraint: 'south' };
- ports.nw = { x: 0, y: 0, perimeter: true, constraint: 'north west' };
- ports.ne = { x: 1, y: 0, perimeter: true, constraint: 'north east' };
- ports.sw = { x: 0, y: 1, perimeter: true, constraint: 'south west' };
- ports.se = { x: 1, y: 1, perimeter: true, constraint: 'south east' };
-
- // ... except for triangles
- const ports2 = new Array();
-
- // NOTE: Constraint is used later for orthogonal edge routing (currently ignored)
- ports2.in1 = { x: 0, y: 0, perimeter: true, constraint: 'west' };
- ports2.in2 = { x: 0, y: 0.25, perimeter: true, constraint: 'west' };
- ports2.in3 = { x: 0, y: 0.5, perimeter: true, constraint: 'west' };
- ports2.in4 = { x: 0, y: 0.75, perimeter: true, constraint: 'west' };
- ports2.in5 = { x: 0, y: 1, perimeter: true, constraint: 'west' };
-
- ports2.out1 = {
- x: 0.5,
- y: 0,
- perimeter: true,
- constraint: 'north east',
- };
- ports2.out2 = { x: 1, y: 0.5, perimeter: true, constraint: 'east' };
- ports2.out3 = {
- x: 0.5,
- y: 1,
- perimeter: true,
- constraint: 'south east',
- };
-
- // Extends shapes classes to return their ports
- mxShape.prototype.getPorts = function() {
- return ports;
- };
-
- mxTriangle.prototype.getPorts = function() {
- return ports2;
- };
-
- // Disables floating connections (only connections via ports allowed)
- graph.connectionHandler.isConnectableCell = function(cell) {
- return false;
- };
- mxEdgeHandler.prototype.isConnectableCell = function(cell) {
- return graph.connectionHandler.isConnectableCell(cell);
- };
-
- // Disables existing port functionality
- graph.view.getTerminalPort = function(state, terminal, source) {
- return terminal;
- };
-
- // Returns all possible ports for a given terminal
- graph.getAllConnectionConstraints = function(terminal, source) {
- if (
- terminal != null &&
- terminal.shape != null &&
- terminal.shape.stencil != null
- ) {
- // for stencils with existing constraints...
- if (terminal.shape.stencil != null) {
- return terminal.shape.stencil.constraints;
- }
- } else if (terminal != null && terminal.cell.isVertex()) {
- if (terminal.shape != null) {
- const ports = terminal.shape.getPorts();
- const cstrs = new Array();
-
- for (const id in ports) {
- const port = ports[id];
-
- const cstr = new mxConnectionConstraint(
- new mxPoint(port.x, port.y),
- port.perimeter
- );
- cstr.id = id;
- cstrs.push(cstr);
- }
-
- return cstrs;
- }
- }
-
- return null;
- };
-
- // Sets the port for the given connection
- graph.setConnectionConstraint = function(
- edge,
- terminal,
- source,
- constraint
- ) {
- if (constraint != null) {
- const key = source
- ? mxConstants.STYLE_SOURCE_PORT
- : mxConstants.STYLE_TARGET_PORT;
-
- if (constraint == null || constraint.id == null) {
- this.setCellStyles(key, null, [edge]);
- } else if (constraint.id != null) {
- this.setCellStyles(key, constraint.id, [edge]);
- }
- }
- };
-
- // Returns the port for the given connection
- graph.getConnectionConstraint = function(edge, terminal, source) {
- const key = source
- ? mxConstants.STYLE_SOURCE_PORT
- : mxConstants.STYLE_TARGET_PORT;
- const id = edge.style[key];
-
- if (id != null) {
- const c = new mxConnectionConstraint(null, null);
- c.id = id;
-
- return c;
- }
-
- return null;
- };
-
- // Returns the actual point for a port by redirecting the constraint to the port
- const graphGetConnectionPoint = graph.getConnectionPoint;
- graph.getConnectionPoint = function(vertex, constraint) {
- if (constraint.id != null && vertex != null && vertex.shape != null) {
- const port = vertex.shape.getPorts()[constraint.id];
-
- if (port != null) {
- constraint = new mxConnectionConstraint(
- new mxPoint(port.x, port.y),
- port.perimeter
- );
- }
- }
-
- return graphGetConnectionPoint.apply(this, arguments);
- };
-
- // Adds cells to the model in a single step
- graph.getModel().beginUpdate();
- try {
- const v1 = graph.insertVertex(parent, null, 'A', 20, 20, 100, 40);
- const v2 = graph.insertVertex(
- parent,
- null,
- 'B',
- 80,
- 100,
- 100,
- 100,
- 'shape=ellipse;perimeter=ellipsePerimeter'
- );
- const v3 = graph.insertVertex(
- parent,
- null,
- 'C',
- 190,
- 30,
- 100,
- 60,
- 'shape=triangle;perimeter=trianglePerimeter;direction=south'
- );
- const e1 = graph.insertEdge(
- parent,
- null,
- '',
- v1,
- v2,
- 'sourcePort=s;targetPort=nw'
- );
- const e2 = graph.insertEdge(
- parent,
- null,
- '',
- v1,
- v3,
- 'sourcePort=e;targetPort=out3'
- );
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
-
- // Comming soon... Integration with orthogonal edge style
- // Sets default edge style to use port constraints (needs to be moved up when uncommented)
- // graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';
- /* let mxUtilsGetPortConstraints = mxUtils.getPortConstraints;
- mxUtils.getPortConstraints = function(terminal, edge, source, defaultValue)
- {
- let key = (source) ? mxConstants.STYLE_SOURCE_PORT : mxConstants.STYLE_TARGET_PORT;
- let id = edge.style[key];
-
- let port = terminal.shape.getPorts()[id];
-
- // TODO: Add support for rotation, direction
- if (port != null)
- {
- return port.constraint;
- }
-
- return mxUtilsGetPortConstraints.apply(this, arguments);
- };
- // Connect preview
- graph.connectionHandler.createEdgeState = function(me)
- {
- let edge = graph.createEdge(null, null, null, null, null);
-
- return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
- };
- */
- }
-}
-
-export default PortRefs;
diff --git a/src/pages/copy_examples_to_json.py b/src/pages/copy_examples_to_json.py
deleted file mode 100644
index dbb0f03dc..000000000
--- a/src/pages/copy_examples_to_json.py
+++ /dev/null
@@ -1,10 +0,0 @@
-import json
-import pathlib
-
-out = {}
-for js_path in pathlib.Path('').rglob('*.js'):
- print(js_path)
- out[js_path.name.rpartition('.')[0]] = js_path.read_text(encoding='utf-8')
-
-with open("examplesListing.json", "w", encoding="utf-8") as f:
- f.write(json.dumps(out, ensure_ascii=False, indent=2))
diff --git a/src/pages/dnd_copypaste/Clipboard.js b/src/pages/dnd_copypaste/Clipboard.js
deleted file mode 100644
index cc2524dc1..000000000
--- a/src/pages/dnd_copypaste/Clipboard.js
+++ /dev/null
@@ -1,357 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxClipboard from '../../mxgraph/util/storage/mxClipboard';
-import mxClient from '../../mxgraph/mxClient';
-import mxCodec from '../../mxgraph/serialization/mxCodec';
-import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
-
-class Clipboard extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
- {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: 'url(\"editors/images/grid.gif\")',\n cursor: 'default',\n }}\n />\n \n );\n };\n\n componentDidMount() {\n // Disables the built-in context menu\n mxEvent.disableContextMenu(this.el);\n\n class MyCustomGraph extends mxGraph {\n // Enables moving of relative children\n isCellLocked(cell) {\n return false;\n }\n\n // Removes folding icon for relative children\n isCellFoldable(cell, collapse) {\n const childCount = this.model.getChildCount(cell);\n\n for (let i = 0; i < childCount; i++) {\n const child = this.model.getChildAt(cell, i);\n const geo = this.getCellGeometry(child);\n\n if (geo != null && geo.relative) {\n return false;\n }\n }\n\n return childCount > 0;\n }\n\n // Returns the relative position of the given child\n getRelativePosition(state, dx, dy) {\n if (state != null) {\n const model = graph.getModel();\n const geo = model.getGeometry(state.cell);\n\n if (geo != null && geo.relative && !model.isEdge(state.cell)) {\n const parent = model.getParent(state.cell);\n\n if (model.isVertex(parent)) {\n const pstate = graph.view.getState(parent);\n\n if (pstate != null) {\n const { scale } = graph.view;\n let x = state.x + dx;\n let y = state.y + dy;\n\n if (geo.offset != null) {\n x -= geo.offset.x * scale;\n y -= geo.offset.y * scale;\n }\n\n x = (x - pstate.x) / pstate.width;\n y = (y - pstate.y) / pstate.height;\n\n if (Math.abs(y - 0.5) <= Math.abs((x - 0.5) / 2)) {\n x = x > 0.5 ? 1 : 0;\n y = Math.min(1, Math.max(0, y));\n } else {\n x = Math.min(1, Math.max(0, x));\n y = y > 0.5 ? 1 : 0;\n }\n\n return new mxPoint(x, y);\n }\n }\n }\n }\n\n return null;\n }\n\n // Replaces translation for relative children\n translateCell(cell, dx, dy) {\n const rel = this.getRelativePosition(\n this.view.getState(cell),\n dx * graph.view.scale,\n dy * graph.view.scale\n );\n\n if (rel != null) {\n let geo = this.model.getGeometry(cell);\n\n if (geo != null && geo.relative) {\n geo = geo.clone();\n geo.x = rel.x;\n geo.y = rel.y;\n\n this.model.setGeometry(cell, geo);\n }\n } else {\n mxGraph.prototype.translateCell.apply(this, arguments);\n }\n }\n }\n\n // Creates the graph inside the given this.el\n const graph = new MyCustomGraph(this.el);\n\n // Sets the base style for all vertices\n const style = graph.getStylesheet().getDefaultVertexStyle();\n style[mxConstants.STYLE_ROUNDED] = true;\n style[mxConstants.STYLE_FILLCOLOR] = '#ffffff';\n style[mxConstants.STYLE_STROKECOLOR] = '#000000';\n style[mxConstants.STYLE_STROKEWIDTH] = '2';\n style[mxConstants.STYLE_FONTCOLOR] = '#000000';\n style[mxConstants.STYLE_FONTSIZE] = '12';\n style[mxConstants.STYLE_FONTSTYLE] = 1;\n graph.getStylesheet().putDefaultVertexStyle(style);\n\n // Replaces move preview for relative children\n graph.graphHandler.getDelta = function(me) {\n const point = mxUtils.convertPoint(\n this.graph.container,\n me.getX(),\n me.getY()\n );\n let delta = new mxPoint(point.x - this.first.x, point.y - this.first.y);\n\n if (\n this.cells != null &&\n this.cells.length > 0 &&\n this.cells[0] != null\n ) {\n const state = this.graph.view.getState(this.cells[0]);\n const rel = graph.getRelativePosition(state, delta.x, delta.y);\n\n if (rel != null) {\n const pstate = this.graph.view.getState(\n this.graph.model.getParent(state.cell)\n );\n\n if (pstate != null) {\n delta = new mxPoint(\n pstate.x + pstate.width * rel.x - state.getCenterX(),\n pstate.y + pstate.height * rel.y - state.getCenterY()\n );\n }\n }\n }\n\n return delta;\n };\n\n // Relative children cannot be removed from parent\n graph.graphHandler.shouldRemoveCellsFromParent = function(\n parent,\n cells,\n evt\n ) {\n return (\n cells.length === 0 &&\n !cells[0].geometry.relative &&\n mxGraphHandler.prototype.shouldRemoveCellsFromParent.apply(\n this,\n arguments\n )\n );\n };\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex({\n parent,\n value: 'Process',\n position: [60, 60],\n size: [90, 40],\n });\n\n const v2 = graph.insertVertex({\n parent: v1,\n value: 'in',\n position: [0, 0.5],\n size: [20, 20],\n style: 'fontSize=9;shape=ellipse;resizable=0;',\n });\n v2.geometry.offset = new mxPoint(-10, -10);\n v2.geometry.relative = true;\n\n const v3 = graph.insertVertex({\n parent: v1,\n value: 'out',\n position: [1, 0.5],\n size: [20, 20],\n style: 'fontSize=9;shape=ellipse;resizable=0;',\n });\n v3.geometry.offset = new mxPoint(-10, -10);\n v3.geometry.relative = true;\n });\n };\n}\n\nexport default Boundary;\n",
- "HoverStyle": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxConstants from '../mxgraph/util/mxConstants';\n\nclass HoverStyle extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n function updateStyle(state, hover) {\n if (hover) {\n state.style[mxConstants.STYLE_FILLCOLOR] = '#ff0000';\n }\n\n // Sets rounded style for both cases since the rounded style\n // is not set in the default style and is therefore inherited\n // once it is set, whereas the above overrides the default value\n state.style[mxConstants.STYLE_ROUNDED] = hover ? '1' : '0';\n state.style[mxConstants.STYLE_STROKEWIDTH] = hover ? '4' : '1';\n state.style[mxConstants.STYLE_FONTSTYLE] = hover\n ? mxConstants.FONT_BOLD\n : '0';\n }\n\n // Changes fill color to red on mouseover\n graph.addMouseListener({\n currentState: null,\n previousStyle: null,\n mouseDown(sender, me) {\n if (this.currentState != null) {\n this.dragLeave(me.getEvent(), this.currentState);\n this.currentState = null;\n }\n },\n mouseMove(sender, me) {\n if (this.currentState != null && me.getState() == this.currentState) {\n return;\n }\n\n let tmp = graph.view.getState(me.getCell());\n\n // Ignores everything but vertices\n if (\n graph.isMouseDown ||\n (tmp != null && !graph.getModel().isVertex(tmp.cell))\n ) {\n tmp = null;\n }\n\n if (tmp != this.currentState) {\n if (this.currentState != null) {\n this.dragLeave(me.getEvent(), this.currentState);\n }\n\n this.currentState = tmp;\n\n if (this.currentState != null) {\n this.dragEnter(me.getEvent(), this.currentState);\n }\n }\n },\n mouseUp(sender, me) {},\n dragEnter(evt, state) {\n if (state != null) {\n this.previousStyle = state.style;\n state.style = mxUtils.clone(state.style);\n updateStyle(state, true);\n state.shape.apply(state);\n state.shape.redraw();\n\n if (state.text != null) {\n state.text.apply(state);\n state.text.redraw();\n }\n }\n },\n dragLeave(evt, state) {\n if (state != null) {\n state.style = this.previousStyle;\n updateStyle(state, false);\n state.shape.apply(state);\n state.shape.redraw();\n\n if (state.text != null) {\n state.text.apply(state);\n state.text.redraw();\n }\n }\n },\n });\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);\n const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default HoverStyle;\n",
- "HelloWorld": "/*\n * Copyright (c) 2006-2018, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\n\nclass HelloWorld extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph with a grid wallpaper\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n };\n\n componentDidMount() {\n // Create a sample graph in the DOM node with the specified ID.\n mxEvent.disableContextMenu(this.el); // Disable the built-in context menu\n const graph = new mxGraph(this.el); // Create the graph inside the given container\n new mxRubberband(graph); // Enable rubberband selection\n\n // Get the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n graph.batchUpdate(() => {\n // Add cells to the model in a single step\n const vertex1 = graph.insertVertex({\n parent,\n value: 'Hello',\n position: [20, 20],\n size: [80, 30],\n relative: false,\n });\n const vertex2 = graph.insertVertex({\n parent,\n value: 'World!',\n position: [200, 150],\n size: [80, 30],\n relative: false,\n });\n const edge = graph.insertEdge({\n parent,\n // value: 'to the',\n source: vertex1,\n target: vertex2,\n });\n });\n };\n}\n\nexport default HelloWorld;\n",
- "DynamicToolbar": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';\nimport mxImage from '../mxgraph/util/mxImage';\nimport mxToolbar from '../mxgraph/util/mxToolbar';\nimport mxGraphModel from '../mxgraph/model/mxGraphModel';\nimport mxCell from '../mxgraph/model/mxCell';\nimport mxGeometry from '../mxgraph/model/mxGeometry';\nimport mxKeyHandler from '../mxgraph/handler/mxKeyHandler';\n\nclass DynamicToolbar extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n position: 'relative',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Defines an icon for creating new connections in the connection handler.\n // This will automatically disable the highlighting of the source vertex.\n mxConnectionHandler.prototype.connectImage = new mxImage(\n 'images/connector.gif',\n 16,\n 16\n );\n\n // Creates the div for the toolbar\n const tbContainer = document.createElement('div');\n tbContainer.style.position = 'absolute';\n tbContainer.style.overflow = 'hidden';\n tbContainer.style.padding = '2px';\n tbContainer.style.left = '0px';\n tbContainer.style.top = '0px';\n tbContainer.style.width = '24px';\n tbContainer.style.bottom = '0px';\n\n this.el.appendChild(tbContainer);\n\n // Creates new toolbar without event processing\n const toolbar = (this.toolbar = new mxToolbar(tbContainer));\n toolbar.enabled = false;\n\n // Creates the div for the graph\n const container = document.createElement('div');\n container.style.position = 'absolute';\n container.style.overflow = 'hidden';\n container.style.left = '24px';\n container.style.top = '0px';\n container.style.right = '0px';\n container.style.bottom = '0px';\n container.style.background = 'url(\"editors/images/grid.gif\")';\n\n this.el.appendChild(container);\n\n // Creates the model and the graph inside the container\n // using the fastest rendering available on the browser\n const model = new mxGraphModel();\n const graph = (this.graph = new mxGraph(container, model));\n\n // Enables new connections in the graph\n graph.setConnectable(true);\n graph.setMultigraph(false);\n\n // Stops editing on enter or escape keypress\n const keyHandler = new mxKeyHandler(graph);\n const rubberband = new mxRubberband(graph);\n\n this.addVertex('editors/images/rectangle.gif', 100, 40, '');\n this.addVertex('editors/images/rounded.gif', 100, 40, 'shape=rounded');\n this.addVertex('editors/images/ellipse.gif', 40, 40, 'shape=ellipse');\n this.addVertex('editors/images/rhombus.gif', 40, 40, 'shape=rhombus');\n this.addVertex('editors/images/triangle.gif', 40, 40, 'shape=triangle');\n this.addVertex('editors/images/cylinder.gif', 40, 40, 'shape=cylinder');\n this.addVertex('editors/images/actor.gif', 30, 40, 'shape=actor');\n }\n\n addVertex(icon, w, h, style) {\n const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);\n vertex.setVertex(true);\n\n const img = this.addToolbarItem(this.graph, this.toolbar, vertex, icon);\n img.enabled = true;\n\n this.graph.getSelectionModel().addListener(mxEvent.CHANGE, () => {\n const tmp = this.graph.isSelectionEmpty();\n mxUtils.setOpacity(img, tmp ? 100 : 20);\n img.enabled = tmp;\n });\n }\n\n addToolbarItem(graph, toolbar, prototype, image) {\n // Function that is executed when the image is dropped on\n // the graph. The cell argument points to the cell under\n // the mousepointer if there is one.\n const funct = (graph, evt, cell, x, y) => {\n graph.stopEditing(false);\n\n const vertex = graph.getModel().cloneCell(prototype);\n vertex.geometry.x = x;\n vertex.geometry.y = y;\n\n graph.addCell(vertex);\n graph.setSelectionCell(vertex);\n };\n\n // Creates the image which is used as the drag icon (preview)\n const img = toolbar.addMode(null, image, (evt, cell) => {\n const pt = this.graph.getPointForEvent(evt);\n funct(graph, evt, cell, pt.x, pt.y);\n });\n\n // Disables dragging if element is disabled. This is a workaround\n // for wrong event order in IE. Following is a dummy listener that\n // is invoked as the last listener in IE.\n mxEvent.addListener(img, 'mousedown', evt => {\n // do nothing\n });\n\n // This listener is always called first before any other listener\n // in all browsers.\n mxEvent.addListener(img, 'mousedown', evt => {\n if (img.enabled == false) {\n mxEvent.consume(evt);\n }\n });\n\n mxUtils.makeDraggable(img, graph, funct);\n return img;\n }\n}\n\nexport default DynamicToolbar;\n",
- "SourceCodeDisplay": "import { Component } from 'react';\nimport Prism from 'prismjs';\nimport 'prismjs/themes/prism-okaidia.css';\nimport 'prismjs/components/prism-markup-templating';\nimport 'prismjs/components/prism-handlebars.min.js';\nimport 'prismjs/components/prism-lua.min.js';\nimport 'prismjs/components/prism-c.min.js';\nimport 'prismjs/components/prism-cpp.min.js';\nimport 'prismjs/components/prism-ruby.min.js';\nimport 'prismjs/components/prism-java.min.js';\nimport 'prismjs/components/prism-javascript.min.js';\nimport 'prismjs/components/prism-bash.min.js';\nimport 'prismjs/components/prism-csharp.min.js';\nimport 'prismjs/components/prism-css.min.js';\nimport 'prismjs/components/prism-typescript.min.js';\nimport 'prismjs/components/prism-yaml.min.js';\nimport 'prismjs/components/prism-json.min.js';\nimport 'prismjs/components/prism-swift.min.js';\nimport 'prismjs/components/prism-jsx.min.js';\nimport 'prismjs/components/prism-dart.min.js';\nimport 'prismjs/components/prism-sql.min.js';\nimport 'prismjs/components/prism-rust.min.js';\nimport 'prismjs/components/prism-php.min.js';\nimport 'prismjs/components/prism-perl.min.js';\nimport 'prismjs/components/prism-go.min.js';\nimport 'prismjs/components/prism-docker.min.js';\nimport 'prismjs/components/prism-python.min.js';\n\n// Adapted from\n// https://betterstack.dev/blog/code-highlighting-in-react-using-prismjs/\n\nexport class SourceCodeDisplay extends Component {\n /**\n *\n * @param code\n * @param plugins\n * @param language\n */\n constructor({ code, plugins, language, theme, style }) {\n if (plugins == null) {\n plugins = ['line-numbers', 'show-language'];\n }\n super({ code, plugins, language, theme, style });\n }\n\n render() {\n // TODO: Support theme!!!\n return (\n <>\n \n {\n this.el = el;\n }}\n className={`language-${this.props.language}`}\n >\n {(this.props.code || '').trim()}\n \n \n \n );\n }\n\n componentDidMount() {\n if (this.el) {\n Prism.highlightElement(this.el);\n }\n }\n\n componentDidUpdate() {\n if (this.el) {\n Prism.highlightElement(this.el);\n }\n }\n}\n\nexport default SourceCodeDisplay;\n",
- "DynamicStyle": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxConstants from '../mxgraph/util/mxConstants';\n\nclass DynamicStyle extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n }}\n />\n \n );\n };\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Disables moving of edge labels in this examples\n graph.edgeLabelsMovable = false;\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Needs to set a flag to check for dynamic style changes,\n // that is, changes to styles on cells where the style was\n // not explicitely changed using mxStyleChange\n graph.getView().updateStyle = true;\n\n // Overrides mxGraphModel.getStyle to return a specific style\n // for edges that reflects their target terminal (in this case\n // the strokeColor will be equal to the target's fillColor).\n const previous = graph.model.getStyle;\n\n graph.model.getStyle = function(cell) {\n if (cell != null) {\n let style = previous.apply(this, arguments);\n\n if (this.isEdge(cell)) {\n const target = this.getTerminal(cell, false);\n\n if (target != null) {\n const targetStyle = graph.getCurrentCellStyle(target);\n const fill = mxUtils.getValue(\n targetStyle,\n mxConstants.STYLE_FILLCOLOR\n );\n\n if (fill != null) {\n style += `;strokeColor=${fill}`;\n }\n }\n } else if (this.isVertex(cell)) {\n const geometry = this.getGeometry(cell);\n\n if (geometry != null && geometry.width > 80) {\n style += ';fillColor=green';\n }\n }\n\n return style;\n }\n\n return null;\n };\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex({\n parent,\n value: 'Hello,',\n position: [20, 20],\n size: [80, 30],\n style: 'fillColor=green',\n });\n const v2 = graph.insertVertex({\n parent,\n value: 'World!',\n position: [200, 150],\n size: [80, 30],\n style: 'fillColor=blue',\n });\n const v3 = graph.insertVertex({\n parent,\n value: 'World!',\n position: [20, 150],\n size: [80, 30],\n style: 'fillColor=red',\n });\n const e1 = graph.insertEdge({\n parent,\n value: 'Connect',\n source: v1,\n target: v2,\n style: 'perimeterSpacing=4;strokeWidth=4;labelBackgroundColor=white;fontStyle=1',\n });\n });\n };\n}\n\nexport default DynamicStyle;\n",
- "PortRefs": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxConstraintHandler from '../mxgraph/handler/mxConstraintHandler';\nimport mxImage from '../mxgraph/util/mxImage';\nimport mxShape from '../mxgraph/shape/mxShape';\nimport mxTriangle from '../mxgraph/shape/mxTriangle';\nimport mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';\nimport mxConnectionConstraint from '../mxgraph/view/mxConnectionConstraint';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxConstants from '../mxgraph/util/mxConstants';\n\nclass PortRefs extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Replaces the port image\n mxConstraintHandler.prototype.pointImage = new mxImage(\n 'images/dot.gif',\n 10,\n 10\n );\n\n const graph = new mxGraph(this.el);\n graph.setConnectable(true);\n\n // Disables automatic handling of ports. This disables the reset of the\n // respective style in mxGraph.cellConnected. Note that this feature may\n // be useful if floating and fixed connections are combined.\n graph.setPortsEnabled(false);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Ports are equal for all shapes...\n const ports = new Array();\n\n // NOTE: Constraint is used later for orthogonal edge routing (currently ignored)\n ports.w = { x: 0, y: 0.5, perimeter: true, constraint: 'west' };\n ports.e = { x: 1, y: 0.5, perimeter: true, constraint: 'east' };\n ports.n = { x: 0.5, y: 0, perimeter: true, constraint: 'north' };\n ports.s = { x: 0.5, y: 1, perimeter: true, constraint: 'south' };\n ports.nw = { x: 0, y: 0, perimeter: true, constraint: 'north west' };\n ports.ne = { x: 1, y: 0, perimeter: true, constraint: 'north east' };\n ports.sw = { x: 0, y: 1, perimeter: true, constraint: 'south west' };\n ports.se = { x: 1, y: 1, perimeter: true, constraint: 'south east' };\n\n // ... except for triangles\n const ports2 = new Array();\n\n // NOTE: Constraint is used later for orthogonal edge routing (currently ignored)\n ports2.in1 = { x: 0, y: 0, perimeter: true, constraint: 'west' };\n ports2.in2 = { x: 0, y: 0.25, perimeter: true, constraint: 'west' };\n ports2.in3 = { x: 0, y: 0.5, perimeter: true, constraint: 'west' };\n ports2.in4 = { x: 0, y: 0.75, perimeter: true, constraint: 'west' };\n ports2.in5 = { x: 0, y: 1, perimeter: true, constraint: 'west' };\n\n ports2.out1 = {\n x: 0.5,\n y: 0,\n perimeter: true,\n constraint: 'north east',\n };\n ports2.out2 = { x: 1, y: 0.5, perimeter: true, constraint: 'east' };\n ports2.out3 = {\n x: 0.5,\n y: 1,\n perimeter: true,\n constraint: 'south east',\n };\n\n // Extends shapes classes to return their ports\n mxShape.prototype.getPorts = function() {\n return ports;\n };\n\n mxTriangle.prototype.getPorts = function() {\n return ports2;\n };\n\n // Disables floating connections (only connections via ports allowed)\n graph.connectionHandler.isConnectableCell = function(cell) {\n return false;\n };\n mxEdgeHandler.prototype.isConnectableCell = function(cell) {\n return graph.connectionHandler.isConnectableCell(cell);\n };\n\n // Disables existing port functionality\n graph.view.getTerminalPort = function(state, terminal, source) {\n return terminal;\n };\n\n // Returns all possible ports for a given terminal\n graph.getAllConnectionConstraints = function(terminal, source) {\n if (\n terminal != null &&\n terminal.shape != null &&\n terminal.shape.stencil != null\n ) {\n // for stencils with existing constraints...\n if (terminal.shape.stencil != null) {\n return terminal.shape.stencil.constraints;\n }\n } else if (terminal != null && this.model.isVertex(terminal.cell)) {\n if (terminal.shape != null) {\n const ports = terminal.shape.getPorts();\n const cstrs = new Array();\n\n for (const id in ports) {\n const port = ports[id];\n\n const cstr = new mxConnectionConstraint(\n new mxPoint(port.x, port.y),\n port.perimeter\n );\n cstr.id = id;\n cstrs.push(cstr);\n }\n\n return cstrs;\n }\n }\n\n return null;\n };\n\n // Sets the port for the given connection\n graph.setConnectionConstraint = function(\n edge,\n terminal,\n source,\n constraint\n ) {\n if (constraint != null) {\n const key = source\n ? mxConstants.STYLE_SOURCE_PORT\n : mxConstants.STYLE_TARGET_PORT;\n\n if (constraint == null || constraint.id == null) {\n this.setCellStyles(key, null, [edge]);\n } else if (constraint.id != null) {\n this.setCellStyles(key, constraint.id, [edge]);\n }\n }\n };\n\n // Returns the port for the given connection\n graph.getConnectionConstraint = function(edge, terminal, source) {\n const key = source\n ? mxConstants.STYLE_SOURCE_PORT\n : mxConstants.STYLE_TARGET_PORT;\n const id = edge.style[key];\n\n if (id != null) {\n const c = new mxConnectionConstraint(null, null);\n c.id = id;\n\n return c;\n }\n\n return null;\n };\n\n // Returns the actual point for a port by redirecting the constraint to the port\n const graphGetConnectionPoint = graph.getConnectionPoint;\n graph.getConnectionPoint = function(vertex, constraint) {\n if (constraint.id != null && vertex != null && vertex.shape != null) {\n const port = vertex.shape.getPorts()[constraint.id];\n\n if (port != null) {\n constraint = new mxConnectionConstraint(\n new mxPoint(port.x, port.y),\n port.perimeter\n );\n }\n }\n\n return graphGetConnectionPoint.apply(this, arguments);\n };\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'A', 20, 20, 100, 40);\n const v2 = graph.insertVertex(\n parent,\n null,\n 'B',\n 80,\n 100,\n 100,\n 100,\n 'shape=ellipse;perimeter=ellipsePerimeter'\n );\n const v3 = graph.insertVertex(\n parent,\n null,\n 'C',\n 190,\n 30,\n 100,\n 60,\n 'shape=triangle;perimeter=trianglePerimeter;direction=south'\n );\n const e1 = graph.insertEdge(\n parent,\n null,\n '',\n v1,\n v2,\n 'sourcePort=s;targetPort=nw'\n );\n const e2 = graph.insertEdge(\n parent,\n null,\n '',\n v1,\n v3,\n 'sourcePort=e;targetPort=out3'\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n // Comming soon... Integration with orthogonal edge style\n // Sets default edge style to use port constraints (needs to be moved up when uncommented)\n // graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';\n /* let mxUtilsGetPortConstraints = mxUtils.getPortConstraints;\n mxUtils.getPortConstraints = function(terminal, edge, source, defaultValue)\n {\n let key = (source) ? mxConstants.STYLE_SOURCE_PORT : mxConstants.STYLE_TARGET_PORT;\n let id = edge.style[key];\n\n let port = terminal.shape.getPorts()[id];\n\n // TODO: Add support for rotation, direction\n if (port != null)\n {\n return port.constraint;\n }\n\n return mxUtilsGetPortConstraints.apply(this, arguments);\n };\n // Connect preview\n graph.connectionHandler.createEdgeState = function(me)\n {\n let edge = graph.createEdge(null, null, null, null, null);\n\n return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));\n };\n */\n }\n}\n\nexport default PortRefs;\n",
- "Groups": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxGraphHandler from '../mxgraph/handler/mxGraphHandler';\nimport mxPopupMenuHandler from '../mxgraph/handler/mxPopupMenuHandler';\n\nclass Groups extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Overrides check for valid roots\n mxGraph.prototype.isValidRoot = function() {\n return false;\n };\n\n // Don't clear selection if multiple cells selected\n const graphHandlerMouseDown = mxGraphHandler.prototype.mouseDown;\n mxGraphHandler.prototype.mouseDown = function(sender, me) {\n graphHandlerMouseDown.apply(this, arguments);\n\n if (\n this.graph.isCellSelected(me.getCell()) &&\n this.graph.getSelectionCount() > 1\n ) {\n this.delayedSelection = false;\n }\n };\n\n // Selects descendants before children selection mode\n const graphHandlerGetInitialCellForEvent =\n mxGraphHandler.prototype.getInitialCellForEvent;\n mxGraphHandler.prototype.getInitialCellForEvent = function(me) {\n const model = this.graph.getModel();\n const psel = model.getParent(this.graph.getSelectionCell());\n let cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);\n let parent = model.getParent(cell);\n\n if (psel == null || (psel != cell && psel != parent)) {\n while (\n !this.graph.isCellSelected(cell) &&\n !this.graph.isCellSelected(parent) &&\n model.isVertex(parent) &&\n !this.graph.isValidRoot(parent)\n ) {\n cell = parent;\n parent = this.cell.getParent();\n }\n }\n\n return cell;\n };\n\n // Selection is delayed to mouseup if child selected\n const graphHandlerIsDelayedSelection =\n mxGraphHandler.prototype.isDelayedSelection;\n mxGraphHandler.prototype.isDelayedSelection = function(cell) {\n let result = graphHandlerIsDelayedSelection.apply(this, arguments);\n const model = this.graph.getModel();\n const psel = model.getParent(this.graph.getSelectionCell());\n const parent = model.getParent(cell);\n\n if (psel == null || (psel != cell && psel != parent)) {\n if (\n !this.graph.isCellSelected(cell) &&\n model.isVertex(parent) &&\n !this.graph.isValidRoot(parent)\n ) {\n result = true;\n }\n }\n\n return result;\n };\n\n // Delayed selection of parent group\n mxGraphHandler.prototype.selectDelayed = function(me) {\n let cell = me.getCell();\n\n if (cell == null) {\n cell = this.cell;\n }\n\n const model = this.graph.getModel();\n let parent = model.getParent(cell);\n\n while (\n this.graph.isCellSelected(cell) &&\n model.isVertex(parent) &&\n !this.graph.isValidRoot(parent)\n ) {\n cell = parent;\n parent = model.getParent(cell);\n }\n\n this.graph.selectCellForEvent(cell, me.getEvent());\n };\n\n // Returns last selected ancestor\n mxPopupMenuHandler.prototype.getCellForPopupEvent = function(me) {\n let cell = me.getCell();\n const model = this.graph.getModel();\n let parent = model.getParent(cell);\n\n while (model.isVertex(parent) && !this.graph.isValidRoot(parent)) {\n if (this.graph.isCellSelected(parent)) {\n cell = parent;\n }\n\n parent = model.getParent(parent);\n }\n\n return cell;\n };\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.constrainChildren = false;\n graph.extendParents = false;\n graph.extendParentsOnAdd = false;\n\n // Uncomment the following if you want the container\n // to fit the size of the graph\n // graph.setResizeContainer(true);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 120, 60);\n const v2 = graph.insertVertex(v1, null, 'World!', 90, 20, 60, 20);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Groups;\n",
- "ContextIcons": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxVertexHandler from '../mxgraph/handler/mxVertexHandler';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxClient from '../mxgraph/mxClient';\n\nclass ContextIcons extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n };\n\n componentDidMount() {\n class mxVertexToolHandler extends mxVertexHandler {\n // Defines a subclass for mxVertexHandler that adds a set of clickable\n // icons to every selected vertex.\n\n domNode = null;\n\n init() {\n super.init();\n\n // In this example we force the use of DIVs for images in IE. This\n // handles transparency in PNG images properly in IE and fixes the\n // problem that IE routes all mouse events for a gesture via the\n // initial IMG node, which means the target vertices\n this.domNode = document.createElement('div');\n this.domNode.style.position = 'absolute';\n this.domNode.style.whiteSpace = 'nowrap';\n\n // Workaround for event redirection via image tag in quirks and IE8\n const createImage = src => {\n return mxUtils.createImage(src);\n };\n\n // Delete\n let img = createImage('images/delete2.png');\n img.setAttribute('title', 'Delete');\n img.style.cursor = 'pointer';\n img.style.width = '16px';\n img.style.height = '16px';\n mxEvent.addGestureListeners(img, evt => {\n // Disables dragging the image\n mxEvent.consume(evt);\n });\n mxEvent.addListener(img, 'click', evt => {\n this.graph.removeCells([this.state.cell]);\n mxEvent.consume(evt);\n });\n this.domNode.appendChild(img);\n\n // Size\n img = createImage('images/fit_to_size.png');\n img.setAttribute('title', 'Resize');\n img.style.cursor = 'se-resize';\n img.style.width = '16px';\n img.style.height = '16px';\n\n mxEvent.addGestureListeners(img, evt => {\n this.start(mxEvent.getClientX(evt), mxEvent.getClientY(evt), 7);\n this.graph.isMouseDown = true;\n this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);\n mxEvent.consume(evt);\n });\n this.domNode.appendChild(img);\n\n // Move\n img = createImage('images/plus.png');\n img.setAttribute('title', 'Move');\n img.style.cursor = 'move';\n img.style.width = '16px';\n img.style.height = '16px';\n\n mxEvent.addGestureListeners(img, evt => {\n this.graph.graphHandler.start(\n this.state.cell,\n mxEvent.getClientX(evt),\n mxEvent.getClientY(evt)\n );\n this.graph.graphHandler.cellWasClicked = true;\n this.graph.isMouseDown = true;\n this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);\n mxEvent.consume(evt);\n });\n this.domNode.appendChild(img);\n\n // Connect\n img = createImage('images/check.png');\n img.setAttribute('title', 'Connect');\n img.style.cursor = 'pointer';\n img.style.width = '16px';\n img.style.height = '16px';\n\n mxEvent.addGestureListeners(img, evt => {\n const pt = mxUtils.convertPoint(\n this.graph.container,\n mxEvent.getClientX(evt),\n mxEvent.getClientY(evt)\n );\n this.graph.connectionHandler.start(this.state, pt.x, pt.y);\n this.graph.isMouseDown = true;\n this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);\n mxEvent.consume(evt);\n });\n this.domNode.appendChild(img);\n\n this.graph.container.appendChild(this.domNode);\n this.redrawTools();\n }\n\n redraw() {\n super.redraw();\n this.redrawTools();\n }\n\n redrawTools() {\n if (this.state != null && this.domNode != null) {\n const dy = 4;\n this.domNode.style.left = `${this.state.x + this.state.width - 56}px`;\n this.domNode.style.top = `${this.state.y + this.state.height + dy}px`;\n }\n }\n\n destroy(sender, me) {\n super.destroy(sender, me);\n\n if (this.domNode != null) {\n this.domNode.parentNode.removeChild(this.domNode);\n this.domNode = null;\n }\n }\n }\n\n class MyCustomGraph extends mxGraph {\n createHandler(state) {\n if (state != null && this.model.isVertex(state.cell)) {\n return new mxVertexToolHandler(state);\n }\n return super.createHandler(state);\n }\n }\n\n // Creates the graph inside the given container\n const graph = new MyCustomGraph(this.el);\n graph.setConnectable(true);\n graph.connectionHandler.createTarget = true;\n\n // Uncomment the following if you want the container\n // to fit the size of the graph\n // graph.setResizeContainer(true);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex({\n parent,\n value: 'Hello,',\n position: [20, 20],\n size: [80, 30],\n });\n const v2 = graph.insertVertex({\n parent,\n value: 'World!',\n position: [200, 150],\n size: [80, 30],\n });\n const e1 = graph.insertEdge({\n parent,\n source: v1,\n target: v2,\n });\n });\n };\n}\n\nexport default ContextIcons;\n",
- "RadialTreeLayout": "/**\n * Copyright (c) 2006-2014, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxPerimeter from '../mxgraph/view/mxPerimeter';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxRadialTreeLayout from '../mxgraph/layout/mxRadialTreeLayout';\n\nclass RadialTreeLayout extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'auto',\n height: '800px',\n borderTop: 'gray 1px solid',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Adds rubberband selection\n new mxRubberband(graph);\n\n // Changes the default vertex style in-place\n let style = graph.getStylesheet().getDefaultVertexStyle();\n style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;\n style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';\n style[mxConstants.STYLE_PERIMETER_SPACING] = 6;\n style[mxConstants.STYLE_ROUNDED] = true;\n style[mxConstants.STYLE_SHADOW] = true;\n\n style = graph.getStylesheet().getDefaultEdgeStyle();\n style[mxConstants.STYLE_ROUNDED] = true;\n\n // Creates a layout algorithm to be used\n // with the graph\n const layout = new mxRadialTreeLayout(graph);\n\n const parent = graph.getDefaultParent();\n\n // Load cells and layouts the graph\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, '1', 500, 500, 80, 30);\n const v2 = graph.insertVertex(parent, null, '2.1', 0, 0, 80, 30);\n const v3 = graph.insertVertex(parent, null, '2.2', 0, 0, 80, 30);\n const v4 = graph.insertVertex(parent, null, '3.1', 0, 0, 80, 30);\n const v4_1 = graph.insertVertex(parent, null, '3.2', 0, 0, 80, 30);\n const v4_2 = graph.insertVertex(parent, null, '3.3', 0, 0, 80, 30);\n const v4_3 = graph.insertVertex(parent, null, '3.6', 0, 0, 80, 30);\n const v4_4 = graph.insertVertex(parent, null, '3.7', 0, 0, 80, 30);\n const v5 = graph.insertVertex(parent, null, '3.4', 0, 0, 80, 30);\n const v6 = graph.insertVertex(parent, null, '2.3', 0, 0, 80, 30);\n const v7 = graph.insertVertex(parent, null, '4.1', 0, 0, 80, 30);\n const v7_1 = graph.insertVertex(parent, null, '4.2', 0, 0, 80, 30);\n const v7_2 = graph.insertVertex(parent, null, '4.3', 0, 0, 80, 30);\n const v7_3 = graph.insertVertex(parent, null, '4.4', 0, 0, 80, 30);\n const v7_4 = graph.insertVertex(parent, null, '4.5', 0, 0, 80, 30);\n const v7_5 = graph.insertVertex(parent, null, '4.6', 0, 0, 80, 30);\n const v7_6 = graph.insertVertex(parent, null, '4.7', 0, 0, 80, 30);\n\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n const e2 = graph.insertEdge(parent, null, '', v1, v3);\n const e3 = graph.insertEdge(parent, null, '', v3, v4);\n const e3_1 = graph.insertEdge(parent, null, '', v3, v4_1);\n const e3_2 = graph.insertEdge(parent, null, '', v3, v4_2);\n const e3_3 = graph.insertEdge(parent, null, '', v3, v4_3);\n const e3_4 = graph.insertEdge(parent, null, '', v3, v4_4);\n const e4 = graph.insertEdge(parent, null, '', v2, v5);\n const e5 = graph.insertEdge(parent, null, '', v1, v6);\n const e6 = graph.insertEdge(parent, null, '', v4_3, v7);\n var e6_1 = graph.insertEdge(parent, null, '', v4_4, v7_4);\n var e6_2 = graph.insertEdge(parent, null, '', v4_4, v7_5);\n var e6_3 = graph.insertEdge(parent, null, '', v4_4, v7_6);\n var e6_1 = graph.insertEdge(parent, null, '', v4_3, v7_1);\n var e6_2 = graph.insertEdge(parent, null, '', v4_3, v7_2);\n var e6_3 = graph.insertEdge(parent, null, '', v4_3, v7_3);\n\n // Executes the layout\n layout.execute(parent);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default RadialTreeLayout;\n",
- "HelloPort": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxCodec from '../mxgraph/io/mxCodec';\nimport mxUtils from '../mxgraph/util/mxUtils';\n\nclass HelloPort extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.setConnectable(true);\n graph.setTooltips(true);\n\n // Sets the default edge style\n const style = graph.getStylesheet().getDefaultEdgeStyle();\n style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;\n\n // Ports are not used as terminals for edges, they are\n // only used to compute the graphical connection point\n graph.isPort = function(cell) {\n const geo = this.getCellGeometry(cell);\n\n return geo != null ? geo.relative : false;\n };\n\n // Implements a tooltip that shows the actual\n // source and target of an edge\n graph.getTooltipForCell = function(cell) {\n if (this.model.isEdge(cell)) {\n return `${this.convertValueToString(\n this.model.getTerminal(cell, true)\n )} => ${this.convertValueToString(\n this.model.getTerminal(cell, false)\n )}`;\n }\n\n return mxGraph.prototype.getTooltipForCell.apply(this, arguments);\n };\n\n // Removes the folding icon and disables any folding\n graph.isCellFoldable = function(cell) {\n return false;\n };\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Hello', 20, 80, 80, 30);\n v1.setConnectable(false);\n const v11 = graph.insertVertex(v1, null, '', 1, 1, 10, 10);\n v11.geometry.offset = new mxPoint(-5, -5);\n v11.geometry.relative = true;\n const v12 = graph.insertVertex(v1, null, '', 1, 0, 10, 10);\n v12.geometry.offset = new mxPoint(-5, -5);\n v12.geometry.relative = true;\n const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);\n const v3 = graph.insertVertex(parent, null, 'World2', 200, 20, 80, 30);\n var e1 = graph.insertEdge(parent, null, '', v11, v2);\n var e1 = graph.insertEdge(parent, null, '', v12, v3);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n const button = mxUtils.button('View XML', function() {\n const encoder = new mxCodec();\n const node = encoder.encode(graph.getModel());\n mxUtils.popup(mxUtils.getPrettyXml(node), true);\n });\n\n this.el2.appendChild(button);\n }\n}\n\nexport default HelloPort;\n",
- "Clipboard": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxClipboard from '../mxgraph/util/mxClipboard';\nimport mxClient from '../mxgraph/mxClient';\nimport mxCodec from '../mxgraph/io/mxCodec';\nimport mxGraphModel from '../mxgraph/model/mxGraphModel';\n\nclass Clipboard extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n };\n\n componentDidMount() {\n // Disables the built-in context menu\n mxEvent.disableContextMenu(this.el);\n\n // Creates the graph inside the given this.el\n const graph = new mxGraph(this.el);\n\n // Public helper method for shared clipboard.\n mxClipboard.cellsToString = function(cells) {\n const codec = new mxCodec();\n const model = new mxGraphModel();\n const parent = model.getChildAt(model.getRoot(), 0);\n\n for (let i = 0; i < cells.length; i++) {\n model.add(parent, cells[i]);\n }\n\n return mxUtils.getXml(codec.encode(model));\n };\n\n // Focused but invisible textarea during control or meta key events\n const textInput = document.createElement('textarea');\n mxUtils.setOpacity(textInput, 0);\n textInput.style.width = '1px';\n textInput.style.height = '1px';\n let restoreFocus = false;\n const gs = graph.gridSize;\n let lastPaste = null;\n let dx = 0;\n let dy = 0;\n\n // Workaround for no copy event in IE/FF if empty\n textInput.value = ' ';\n\n // Shows a textare when control/cmd is pressed to handle native clipboard actions\n mxEvent.addListener(document, 'keydown', function(evt) {\n // No dialog visible\n const source = mxEvent.getSource(evt);\n\n if (\n graph.isEnabled() &&\n !graph.isMouseDown &&\n !graph.isEditing() &&\n source.nodeName !== 'INPUT'\n ) {\n if (\n evt.keyCode === 224 /* FF */ ||\n (!mxClient.IS_MAC && evt.keyCode === 17) /* Control */ ||\n (mxClient.IS_MAC &&\n (evt.keyCode === 91 || evt.keyCode === 93)) /* Left/Right Meta */\n ) {\n // Cannot use parentNode for check in IE\n if (!restoreFocus) {\n // Avoid autoscroll but allow handling of events\n textInput.style.position = 'absolute';\n textInput.style.left = `${graph.container.scrollLeft + 10}px`;\n textInput.style.top = `${graph.container.scrollTop + 10}px`;\n graph.container.appendChild(textInput);\n\n restoreFocus = true;\n textInput.focus();\n textInput.select();\n }\n }\n }\n });\n\n // Restores focus on graph this.el and removes text input from DOM\n mxEvent.addListener(document, 'keyup', function(evt) {\n if (\n restoreFocus &&\n (evt.keyCode === 224 /* FF */ ||\n evt.keyCode === 17 /* Control */ ||\n evt.keyCode === 91 ||\n evt.keyCode === 93) /* Meta */\n ) {\n restoreFocus = false;\n\n if (!graph.isEditing()) {\n graph.container.focus();\n }\n\n textInput.parentNode.removeChild(textInput);\n }\n });\n\n // Inserts the XML for the given cells into the text input for copy\n const copyCells = function(graph, cells) {\n if (cells.length > 0) {\n const clones = graph.cloneCells(cells);\n\n // Checks for orphaned relative children and makes absolute\n for (let i = 0; i < clones.length; i++) {\n const state = graph.view.getState(cells[i]);\n\n if (state != null) {\n const geo = graph.getCellGeometry(clones[i]);\n\n if (geo != null && geo.relative) {\n geo.relative = false;\n geo.x = state.x / state.view.scale - state.view.translate.x;\n geo.y = state.y / state.view.scale - state.view.translate.y;\n }\n }\n }\n\n textInput.value = mxClipboard.cellsToString(clones);\n }\n\n textInput.select();\n lastPaste = textInput.value;\n };\n\n // Handles copy event by putting XML for current selection into text input\n mxEvent.addListener(\n textInput,\n 'copy',\n mxUtils.bind(this, function(evt) {\n if (graph.isEnabled() && !graph.isSelectionEmpty()) {\n copyCells(\n graph,\n mxUtils.sortCells(\n graph.model.getTopmostCells(graph.getSelectionCells())\n )\n );\n dx = 0;\n dy = 0;\n }\n })\n );\n\n // Handles cut event by removing cells putting XML into text input\n mxEvent.addListener(\n textInput,\n 'cut',\n mxUtils.bind(this, function(evt) {\n if (graph.isEnabled() && !graph.isSelectionEmpty()) {\n copyCells(graph, graph.removeCells());\n dx = -gs;\n dy = -gs;\n }\n })\n );\n\n // Merges XML into existing graph and layers\n const importXml = function(xml, dx, dy) {\n dx = dx != null ? dx : 0;\n dy = dy != null ? dy : 0;\n let cells = [];\n\n try {\n const doc = mxUtils.parseXml(xml);\n const node = doc.documentElement;\n\n if (node != null) {\n const model = new mxGraphModel();\n const codec = new mxCodec(node.ownerDocument);\n codec.decode(node, model);\n\n const childCount = model.getChildCount(model.getRoot());\n const targetChildCount = graph.model.getChildCount(\n graph.model.getRoot()\n );\n\n // Merges existing layers and adds new layers\n graph.model.beginUpdate();\n try {\n for (let i = 0; i < childCount; i++) {\n let parent = model.getChildAt(model.getRoot(), i);\n\n // Adds cells to existing layers if not locked\n if (targetChildCount > i) {\n // Inserts into active layer if only one layer is being pasted\n const target =\n childCount === 1\n ? graph.getDefaultParent()\n : graph.model.getChildAt(graph.model.getRoot(), i);\n\n if (!graph.isCellLocked(target)) {\n const children = model.getChildren(parent);\n cells = cells.concat(\n graph.importCells(children, dx, dy, target)\n );\n }\n } else {\n // Delta is non cascading, needs separate move for layers\n parent = graph.importCells(\n [parent],\n 0,\n 0,\n graph.model.getRoot()\n )[0];\n const children = graph.model.getChildren(parent);\n graph.moveCells(children, dx, dy);\n cells = cells.concat(children);\n }\n }\n } finally {\n graph.model.endUpdate();\n }\n }\n } catch (e) {\n alert(e);\n throw e;\n }\n\n return cells;\n };\n\n // Parses and inserts XML into graph\n const pasteText = function(text) {\n const xml = mxUtils.trim(text);\n const x =\n graph.container.scrollLeft / graph.view.scale - graph.view.translate.x;\n const y =\n graph.container.scrollTop / graph.view.scale - graph.view.translate.y;\n\n if (xml.length > 0) {\n if (lastPaste !== xml) {\n lastPaste = xml;\n dx = 0;\n dy = 0;\n } else {\n dx += gs;\n dy += gs;\n }\n\n // Standard paste via control-v\n if (xml.substring(0, 14) === '') {\n graph.setSelectionCells(importXml(xml, dx, dy));\n graph.scrollCellToVisible(graph.getSelectionCell());\n }\n }\n };\n\n // Function to fetch text from paste events\n const extractGraphModelFromEvent = function(evt) {\n let data = null;\n\n if (evt != null) {\n const provider =\n evt.dataTransfer != null ? evt.dataTransfer : evt.clipboardData;\n\n if (provider != null) {\n data =\n mxUtils.indexOf(provider.types, 'text/html') >= 0\n ? provider.getData('text/html')\n : null;\n\n if (\n mxUtils.indexOf(\n provider.types,\n 'text/plain' && (data == null || data.length === 0)\n )\n ) {\n data = provider.getData('text/plain');\n }\n }\n }\n\n return data;\n };\n\n // Handles paste event by parsing and inserting XML\n mxEvent.addListener(textInput, 'paste', function(evt) {\n // Clears existing contents before paste - should not be needed\n // because all text is selected, but doesn't hurt since the\n // actual pasting of the new text is delayed in all cases.\n textInput.value = '';\n\n if (graph.isEnabled()) {\n const xml = extractGraphModelFromEvent(evt);\n\n if (xml != null && xml.length > 0) {\n pasteText(xml);\n } else {\n // Timeout for new value to appear\n window.setTimeout(\n mxUtils.bind(this, function() {\n pasteText(textInput.value);\n }),\n 0\n );\n }\n }\n\n textInput.select();\n });\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex({\n parent,\n value: 'Hello,',\n position: [20, 20],\n size: [80, 30],\n });\n const v2 = graph.insertVertex({\n parent,\n value: 'World!',\n position: [200, 150],\n size: [80, 30],\n });\n const e1 = graph.insertEdge({ parent, source: v1, target: v2 });\n });\n };\n}\n\nexport default Clipboard;\n",
- "__template": "import React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\n\nclass MYNAMEHERE extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n \n\n {\n this.el = el;\n }}\n style={{}}\n />\n \n );\n }\n\n componentDidMount() {}\n}\n\nexport default MYNAMEHERE;\n",
- "Drop": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxClient from '../mxgraph/mxClient';\n\nclass Drop extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '441px',\n background: `url('editors/images/grid.gif')`,\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Checks if the browser is supported\n const fileSupport =\n window.File != null &&\n window.FileReader != null &&\n window.FileList != null;\n\n if (!fileSupport || !mxClient.isBrowserSupported()) {\n // Displays an error message if the browser is not supported.\n mxUtils.error('Browser is not supported!', 200, false);\n } else {\n // Disables the built-in context menu\n mxEvent.disableContextMenu(this.el);\n\n // Creates the graph inside the given this.el\n const graph = new mxGraph(this.el);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n mxEvent.addListener(this.el, 'dragover', function(evt) {\n if (graph.isEnabled()) {\n evt.stopPropagation();\n evt.preventDefault();\n }\n });\n\n mxEvent.addListener(this.el, 'drop', evt => {\n if (graph.isEnabled()) {\n evt.stopPropagation();\n evt.preventDefault();\n\n // Gets drop location point for vertex\n const pt = mxUtils.convertPoint(\n graph.container,\n mxEvent.getClientX(evt),\n mxEvent.getClientY(evt)\n );\n const tr = graph.view.translate;\n const { scale } = graph.view;\n const x = pt.x / scale - tr.x;\n const y = pt.y / scale - tr.y;\n\n // Converts local images to data urls\n const filesArray = evt.dataTransfer.files;\n\n for (let i = 0; i < filesArray.length; i++) {\n this.handleDrop(graph, filesArray[i], x + i * 10, y + i * 10);\n }\n }\n });\n }\n }\n\n handleDrop(graph, file, x, y) {\n // Handles each file as a separate insert for simplicity.\n // Use barrier to handle multiple files as a single insert.\n\n if (file.type.substring(0, 5) === 'image') {\n const reader = new FileReader();\n\n reader.onload = function(e) {\n // Gets size of image for vertex\n let data = e.target.result;\n\n // SVG needs special handling to add viewbox if missing and\n // find initial size from SVG attributes (only for IE11)\n if (file.type.substring(0, 9) === 'image/svg') {\n const comma = data.indexOf(',');\n const svgText = atob(data.substring(comma + 1));\n const root = mxUtils.parseXml(svgText);\n\n // Parses SVG to find width and height\n if (root != null) {\n const svgs = root.getElementsByTagName('svg');\n\n if (svgs.length > 0) {\n const svgRoot = svgs[0];\n let w = parseFloat(svgRoot.getAttribute('width'));\n let h = parseFloat(svgRoot.getAttribute('height'));\n\n // Check if viewBox attribute already exists\n const vb = svgRoot.getAttribute('viewBox');\n\n if (vb == null || vb.length === 0) {\n svgRoot.setAttribute('viewBox', `0 0 ${w} ${h}`);\n }\n // Uses width and height from viewbox for\n // missing width and height attributes\n else if (Number.isNaN(w) || Number.isNaN(h)) {\n const tokens = vb.split(' ');\n\n if (tokens.length > 3) {\n w = parseFloat(tokens[2]);\n h = parseFloat(tokens[3]);\n }\n }\n\n w = Math.max(1, Math.round(w));\n h = Math.max(1, Math.round(h));\n\n data = `data:image/svg+xml,${btoa(\n mxUtils.getXml(svgs[0], '\\n')\n )}`;\n graph.insertVertex({\n position: [x, y],\n size: [w, h],\n style: `shape=image;image=${data};`,\n });\n }\n }\n } else {\n const img = new Image();\n\n img.onload = () => {\n const w = Math.max(1, img.width);\n const h = Math.max(1, img.height);\n\n // Converts format of data url to cell style value for use in vertex\n const semi = data.indexOf(';');\n\n if (semi > 0) {\n data =\n data.substring(0, semi) +\n data.substring(data.indexOf(',', semi + 1));\n }\n\n graph.insertVertex({\n position: [x, y],\n size: [w, h],\n style: `shape=image;image=${data};`,\n });\n };\n\n img.src = data;\n }\n };\n\n reader.readAsDataURL(file);\n }\n }\n}\n\nexport default Drop;\n",
- "Markers": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxCellRenderer from '../mxgraph/view/mxCellRenderer';\nimport mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';\nimport mxGraphHandler from '../mxgraph/handler/mxGraphHandler';\nimport mxCylinder from '../mxgraph/shape/mxCylinder';\nimport mxMarker from '../mxgraph/shape/mxMarker';\nimport mxArrow from '../mxgraph/shape/mxArrow';\n\nclass Markers extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '381px',\n border: '1px solid gray',\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Enables guides\n mxGraphHandler.prototype.guidesEnabled = true;\n mxEdgeHandler.prototype.snapToTerminals = true;\n\n // Registers and defines the custom marker\n mxMarker.addMarker('dash', function(\n canvas,\n shape,\n type,\n pe,\n unitX,\n unitY,\n size,\n source,\n sw,\n filled\n ) {\n const nx = unitX * (size + sw + 1);\n const ny = unitY * (size + sw + 1);\n\n return function() {\n canvas.begin();\n canvas.moveTo(pe.x - nx / 2 - ny / 2, pe.y - ny / 2 + nx / 2);\n canvas.lineTo(\n pe.x + ny / 2 - (3 * nx) / 2,\n pe.y - (3 * ny) / 2 - nx / 2\n );\n canvas.stroke();\n };\n });\n\n // Defines custom message shape\n class MessageShape extends mxCylinder {\n redrawPath(path, x, y, w, h, isForeground) {\n if (isForeground) {\n path.moveTo(0, 0);\n path.lineTo(w / 2, h / 2);\n path.lineTo(w, 0);\n } else {\n path.moveTo(0, 0);\n path.lineTo(w, 0);\n path.lineTo(w, h);\n path.lineTo(0, h);\n path.close();\n }\n }\n }\n mxCellRenderer.registerShape('message', MessageShape);\n\n // Defines custom edge shape\n class LinkShape extends mxArrow {\n paintEdgeShape(c, pts) {\n const width = 10;\n\n // Base vector (between end points)\n const p0 = pts[0];\n const pe = pts[pts.length - 1];\n\n const dx = pe.x - p0.x;\n const dy = pe.y - p0.y;\n const dist = Math.sqrt(dx * dx + dy * dy);\n const length = dist;\n\n // Computes the norm and the inverse norm\n const nx = dx / dist;\n const ny = dy / dist;\n const basex = length * nx;\n const basey = length * ny;\n const floorx = (width * ny) / 3;\n const floory = (-width * nx) / 3;\n\n // Computes points\n const p0x = p0.x - floorx / 2;\n const p0y = p0.y - floory / 2;\n const p1x = p0x + floorx;\n const p1y = p0y + floory;\n const p2x = p1x + basex;\n const p2y = p1y + basey;\n const p3x = p2x + floorx;\n const p3y = p2y + floory;\n // p4 not necessary\n const p5x = p3x - 3 * floorx;\n const p5y = p3y - 3 * floory;\n\n c.begin();\n c.moveTo(p1x, p1y);\n c.lineTo(p2x, p2y);\n c.moveTo(p5x + floorx, p5y + floory);\n c.lineTo(p0x, p0y);\n c.stroke();\n }\n }\n mxCellRenderer.registerShape('link', LinkShape);\n\n // Creates the graph\n const graph = new mxGraph(this.el);\n\n // Sets default styles\n let style = graph.getStylesheet().getDefaultVertexStyle();\n style.fillColor = '#FFFFFF';\n style.strokeColor = '#000000';\n style.fontColor = '#000000';\n style.fontStyle = '1';\n\n style = graph.getStylesheet().getDefaultEdgeStyle();\n style.strokeColor = '#000000';\n style.fontColor = '#000000';\n style.fontStyle = '0';\n style.fontStyle = '0';\n style.startSize = '8';\n style.endSize = '8';\n\n // Populates the graph\n const parent = graph.getDefaultParent();\n\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'v1', 20, 20, 80, 30);\n const v2 = graph.insertVertex(parent, null, 'v2', 440, 20, 80, 30);\n const e1 = graph.insertEdge(\n parent,\n null,\n '',\n v1,\n v2,\n 'dashed=1;' +\n 'startArrow=oval;endArrow=block;sourcePerimeterSpacing=4;startFill=0;endFill=0;'\n );\n const e11 = graph.insertVertex(\n e1,\n null,\n 'Label',\n 0,\n 0,\n 20,\n 14,\n 'shape=message;labelBackgroundColor=#ffffff;labelPosition=left;spacingRight=2;align=right;fontStyle=0;'\n );\n e11.geometry.offset = new mxPoint(-10, -7);\n e11.geometry.relative = true;\n e11.connectable = false;\n\n const v3 = graph.insertVertex(parent, null, 'v3', 20, 120, 80, 30);\n const v4 = graph.insertVertex(parent, null, 'v4', 440, 120, 80, 30);\n const e2 = graph.insertEdge(\n parent,\n null,\n 'Label',\n v3,\n v4,\n 'startArrow=dash;startSize=12;endArrow=block;labelBackgroundColor=#FFFFFF;'\n );\n\n const v5 = graph.insertVertex(\n parent,\n null,\n 'v5',\n 40,\n 220,\n 40,\n 40,\n 'shape=ellipse;perimeter=ellipsePerimeter;'\n );\n const v6 = graph.insertVertex(\n parent,\n null,\n 'v6',\n 460,\n 220,\n 40,\n 40,\n 'shape=doubleEllipse;perimeter=ellipsePerimeter;'\n );\n const e3 = graph.insertEdge(\n parent,\n null,\n 'Link',\n v5,\n v6,\n 'shape=link;labelBackgroundColor=#FFFFFF;'\n );\n } finally {\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Markers;\n",
- "Overlays": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxCellTracker from '../mxgraph/handler/mxCellTracker';\nimport mxCellOverlay from '../mxgraph/view/mxCellOverlay';\nimport mxImage from '../mxgraph/util/mxImage';\nimport mxUtils from '../mxgraph/util/mxUtils';\n\nclass Overlays extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Disables basic selection and cell handling\n graph.setEnabled(false);\n\n // Highlights the vertices when the mouse enters\n const highlight = new mxCellTracker(graph, '#00FF00');\n\n // Enables tooltips for the overlays\n graph.setTooltips(true);\n\n // Installs a handler for click events in the graph\n // that toggles the overlay for the respective cell\n graph.addListener(mxEvent.CLICK, (sender, evt) => {\n const cell = evt.getProperty('cell');\n\n if (cell != null) {\n const overlays = graph.getCellOverlays(cell);\n\n if (overlays == null) {\n // Creates a new overlay with an image and a tooltip\n const overlay = new mxCellOverlay(\n new mxImage('editors/images/overlays/check.png', 16, 16),\n 'Overlay tooltip'\n );\n\n // Installs a handler for clicks on the overlay\n overlay.addListener(mxEvent.CLICK, (sender, evt2) => {\n mxUtils.alert('Overlay clicked');\n });\n\n // Sets the overlay for the cell in the graph\n graph.addCellOverlay(cell, overlay);\n } else {\n graph.removeCellOverlays(cell);\n }\n }\n });\n\n // Installs a handler for double click events in the graph\n // that shows an alert box\n graph.addListener(mxEvent.DOUBLE_CLICK, (sender, evt) => {\n const cell = evt.getProperty('cell');\n mxUtils.alert(`Doubleclick: ${cell != null ? 'Cell' : 'Graph'}`);\n evt.consume();\n });\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex({\n parent,\n value: 'Click,',\n position: [20, 20],\n size: [60, 40],\n });\n const v2 = graph.insertVertex({\n parent,\n value: 'Doubleclick',\n position: [200, 150],\n size: [100, 40],\n });\n const e1 = graph.insertEdge({\n parent,\n source: v1,\n target: v2,\n });\n });\n }\n}\n\nexport default Overlays;\n",
- "Constituent": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxGraphHandler from '../mxgraph/handler/mxGraphHandler';\n\nclass Constituent extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: 'url(\"editors/images/grid.gif\")',\n cursor: 'default',\n }}\n />\n \n );\n };\n\n componentDidMount() {\n // Disables the built-in context menu\n mxEvent.disableContextMenu(this.el);\n\n class MyCustomGraphHandler extends mxGraphHandler {\n /**\n * Redirects start drag to parent.\n */\n getInitialCellForEvent(me) {\n let cell = super.getInitialCellForEvent(me);\n if (this.graph.isPart(cell)) {\n cell = this.cell.getParent();\n }\n return cell;\n }\n }\n\n class MyCustomGraph extends mxGraph {\n foldingEnabled = false;\n\n recursiveResize = true;\n\n isPart(cell) {\n // Helper method to mark parts with constituent=1 in the style\n return this.getCurrentCellStyle(cell).constituent == '1';\n }\n\n selectCellForEvent(cell, evt) {\n // Redirects selection to parent\n if (this.isPart(cell)) {\n cell = this.model.getParent(cell);\n }\n super.selectCellForEvent(cell, evt);\n }\n\n createGraphHandler() {\n return new MyCustomGraphHandler(this);\n }\n }\n\n // Creates the graph inside the given container\n const graph = new MyCustomGraph(this.el);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex({\n parent,\n position: [20, 20],\n size: [120, 70],\n });\n const v2 = graph.insertVertex({\n parent: v1,\n value: 'Constituent',\n position: [20, 20],\n size: [80, 30],\n style: 'constituent=1;',\n });\n });\n }\n}\n\nexport default Constituent;\n",
- "Editing": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxKeyHandler from '../mxgraph/handler/mxKeyHandler';\n\nclass Editing extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n
\n
\n Double-click the upper/lower half of the cell to edit different fields\n of the user object.\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n }}\n />\n \n );\n }\n\n componentDidMount() {\n class MyCustomGraph extends mxGraph {\n getLabel(cell) {\n // Returns a HTML representation of the cell where the\n // upper half is the first value, lower half is second\n // value\n\n const table = document.createElement('table');\n table.style.height = '100%';\n table.style.width = '100%';\n\n const body = document.createElement('tbody');\n const tr1 = document.createElement('tr');\n const td1 = document.createElement('td');\n td1.style.textAlign = 'center';\n td1.style.fontSize = '12px';\n td1.style.color = '#774400';\n mxUtils.write(td1, cell.value.first);\n\n const tr2 = document.createElement('tr');\n const td2 = document.createElement('td');\n td2.style.textAlign = 'center';\n td2.style.fontSize = '12px';\n td2.style.color = '#774400';\n mxUtils.write(td2, cell.value.second);\n\n tr1.appendChild(td1);\n tr2.appendChild(td2);\n body.appendChild(tr1);\n body.appendChild(tr2);\n table.appendChild(body);\n\n return table;\n }\n\n getEditingValue(cell, evt) {\n // Returns the editing value for the given cell and event\n evt.fieldname = this.__getFieldnameForEvent(cell, evt);\n return cell.value[evt.fieldname] || '';\n }\n\n __getFieldnameForEvent(cell, evt) {\n // Helper method that returns the fieldname to be used for\n // a mouse event\n if (evt != null) {\n // Finds the relative coordinates inside the cell\n const point = mxUtils.convertPoint(\n this.container,\n mxEvent.getClientX(evt),\n mxEvent.getClientY(evt)\n );\n const state = this.getView().getState(cell);\n\n if (state != null) {\n point.x -= state.x;\n point.y -= state.y;\n\n // Returns second if mouse in second half of cell\n if (point.y > state.height / 2) {\n return 'second';\n }\n }\n }\n return 'first';\n }\n\n labelChanged(cell, newValue, trigger) {\n // Sets the new value for the given cell and trigger\n const name = trigger != null ? trigger.fieldname : null;\n\n if (name != null) {\n // Clones the user object for correct undo and puts\n // the new value in the correct field.\n const value = mxUtils.clone(cell.value);\n value[name] = newValue;\n newValue = value;\n\n super.labelChanged(cell, newValue, trigger);\n }\n }\n }\n\n // Creates the graph inside the given container\n const graph = new MyCustomGraph(this.el);\n graph.setHtmlLabels(true);\n\n // Adds handling of return and escape keystrokes for editing\n const keyHandler = new mxKeyHandler(graph);\n\n // Sample user objects with 2 fields\n const value = {};\n value.first = 'First value';\n value.second = 'Second value';\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(\n parent,\n null,\n value,\n 100,\n 60,\n 120,\n 80,\n 'overflow=fill;'\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Editing;\n",
- "HierarchicalLayout": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxHierarchicalLayout from '../mxgraph/layout/hierarchical/mxHierarchicalLayout';\nimport mxFastOrganicLayout from '../mxgraph/layout/mxFastOrganicLayout';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxPerimeter from '../mxgraph/view/mxPerimeter';\nimport mxUtils from '../mxgraph/util/mxUtils';\n\nclass HierarchicalLayout extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'absolute',\n overflow: 'auto',\n top: '36px',\n bottom: '0px',\n left: '0px',\n right: '0px',\n borderTop: 'gray 1px solid',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Adds rubberband selection\n new mxRubberband(graph);\n\n // Changes the default vertex style in-place\n let style = graph.getStylesheet().getDefaultVertexStyle();\n style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;\n style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';\n style[mxConstants.STYLE_PERIMETER_SPACING] = 6;\n style[mxConstants.STYLE_ROUNDED] = true;\n style[mxConstants.STYLE_SHADOW] = true;\n\n style = graph.getStylesheet().getDefaultEdgeStyle();\n style[mxConstants.STYLE_ROUNDED] = true;\n\n // Creates a layout algorithm to be used\n // with the graph\n const layout = new mxHierarchicalLayout(graph);\n const organic = new mxFastOrganicLayout(graph);\n organic.forceConstant = 120;\n\n const parent = graph.getDefaultParent();\n\n // Adds a button to execute the layout\n let button = document.createElement('button');\n mxUtils.write(button, 'Hierarchical');\n mxEvent.addListener(button, 'click', function(evt) {\n layout.execute(parent);\n });\n this.el2.appendChild(button);\n\n // Adds a button to execute the layout\n button = document.createElement('button');\n mxUtils.write(button, 'Organic');\n\n mxEvent.addListener(button, 'click', function(evt) {\n organic.execute(parent);\n });\n\n this.el2.appendChild(button);\n\n // Load cells and layouts the graph\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, '1', 0, 0, 80, 30);\n const v2 = graph.insertVertex(parent, null, '2', 0, 0, 80, 30);\n const v3 = graph.insertVertex(parent, null, '3', 0, 0, 80, 30);\n const v4 = graph.insertVertex(parent, null, '4', 0, 0, 80, 30);\n const v5 = graph.insertVertex(parent, null, '5', 0, 0, 80, 30);\n const v6 = graph.insertVertex(parent, null, '6', 0, 0, 80, 30);\n const v7 = graph.insertVertex(parent, null, '7', 0, 0, 80, 30);\n const v8 = graph.insertVertex(parent, null, '8', 0, 0, 80, 30);\n const v9 = graph.insertVertex(parent, null, '9', 0, 0, 80, 30);\n\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n const e2 = graph.insertEdge(parent, null, '', v1, v3);\n const e3 = graph.insertEdge(parent, null, '', v3, v4);\n const e4 = graph.insertEdge(parent, null, '', v2, v5);\n const e5 = graph.insertEdge(parent, null, '', v1, v6);\n const e6 = graph.insertEdge(parent, null, '', v2, v3);\n const e7 = graph.insertEdge(parent, null, '', v6, v4);\n const e8 = graph.insertEdge(parent, null, '', v6, v1);\n const e9 = graph.insertEdge(parent, null, '', v6, v7);\n const e10 = graph.insertEdge(parent, null, '', v7, v8);\n const e11 = graph.insertEdge(parent, null, '', v7, v9);\n const e12 = graph.insertEdge(parent, null, '', v7, v6);\n const e13 = graph.insertEdge(parent, null, '', v7, v5);\n\n // Executes the layout\n layout.execute(parent);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default HierarchicalLayout;\n",
- "OffPage": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxCellTracker from '../mxgraph/handler/mxCellTracker';\nimport mxConstants from '../mxgraph/util/mxConstants';\n\nclass OffPage extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{}}\n />\n \n );\n }\n\n componentDidMount() {\n // Use complete cell as highlight region\n mxConstants.ACTIVE_REGION = 1;\n\n const container = document.createElement('div');\n container.style.position = 'relative';\n container.style.overflow = 'hidden';\n container.style.height = '80vhpx';\n container.style.background = 'url(\"editors/images/grid.gif\")';\n\n this.el.appendChild(container);\n\n // Creates the graph inside the given container\n const graph = new mxGraph(container);\n graph.setEnabled(false);\n\n // Highlights offpage connectors\n const highlight = new mxCellTracker(graph, null, function(me) {\n const cell = me.getCell();\n\n if (\n cell != null &&\n cell.value != null &&\n typeof cell.value.create === 'function'\n ) {\n return cell;\n }\n\n return null;\n });\n\n // Handles clicks on offpage connectors and\n // executes function in user object\n graph.addListener(mxEvent.CLICK, function(source, evt) {\n const cell = evt.getProperty('cell');\n\n if (\n cell != null &&\n cell.value != null &&\n typeof cell.value.create === 'function'\n ) {\n cell.value.create();\n }\n });\n\n // Handles clicks on offpage connectors and\n // executes function in user object\n graph.getCursorForCell = function(cell) {\n if (\n cell != null &&\n cell.value != null &&\n typeof cell.value.create === 'function'\n ) {\n return 'pointer';\n }\n };\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n let first = null;\n let second = null;\n\n first = function() {\n const value = {\n toString() {\n return 'Next';\n },\n create: second,\n };\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n graph.getModel().setRoot(graph.getModel().createRoot());\n const parent = graph.getDefaultParent();\n\n const v1 = graph.insertVertex(\n parent,\n null,\n 'Click',\n 30,\n 20,\n 80,\n 30,\n 'fillColor=#FFFF88;strokeColor=#FF1A00'\n );\n const v2 = graph.insertVertex(\n parent,\n null,\n 'Next',\n 20,\n 150,\n 100,\n 30,\n 'fillColor=#FFFF88;strokeColor=#FF1A00'\n );\n const v3 = graph.insertVertex(\n parent,\n null,\n value,\n 200,\n 150,\n 40,\n 40,\n 'shape=triangle;align=left;fillColor=#C3D9FF;strokeColor=#4096EE'\n );\n const e1 = graph.insertEdge(\n parent,\n null,\n null,\n v1,\n v2,\n 'strokeColor=#FF1A00'\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n };\n\n second = function() {\n const value = {\n toString() {\n return 'Prev';\n },\n create: first,\n };\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n graph.getModel().setRoot(graph.getModel().createRoot());\n const parent = graph.getDefaultParent();\n\n const v1 = graph.insertVertex(\n parent,\n null,\n 'Click',\n 30,\n 20,\n 80,\n 30,\n 'fillColor=#CDEB8B;strokeColor=#008C00'\n );\n const v2 = graph.insertVertex(\n parent,\n null,\n 'Prev',\n 220,\n 20,\n 100,\n 30,\n 'fillColor=#CDEB8B;strokeColor=#008C00'\n );\n const v3 = graph.insertVertex(\n parent,\n null,\n value,\n 30,\n 150,\n 40,\n 40,\n 'shape=triangle;align=right;fillColor=#C3D9FF;strokeColor=#4096EE;direction=west'\n );\n const e1 = graph.insertEdge(\n parent,\n null,\n null,\n v1,\n v2,\n 'strokeColor=#008C00'\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n };\n\n first();\n }\n}\n\nexport default OffPage;\n",
- "Resources": "/**\n * Copyright (c) 2006-2018, JGraph Ltd\n \n\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxClient from '../mxgraph/mxClient';\n\nclass Resources extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Async indirection to load resources asynchronously (see above)\n // Alternatively you can remove the line that sets mxLoadResources\n // anove and change the code to not use this callback.\n\n mxClient.loadResources(() => {\n // Disables the built-in context menu\n mxEvent.disableContextMenu(this.el);\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);\n const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n });\n }\n}\n\nexport default Resources;\n",
- "Indicators": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';\nimport mxKeyHandler from '../mxgraph/handler/mxKeyHandler';\n\nclass Indicators extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '300ph',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.setConnectable(true);\n new mxKeyHandler(graph);\n\n // Enables moving of vertex labels\n graph.vertexLabelsMovable = true;\n\n // Creates a style with an indicator\n let style = graph.getStylesheet().getDefaultVertexStyle();\n\n style[mxConstants.STYLE_SHAPE] = 'label';\n style[mxConstants.STYLE_VERTICAL_ALIGN] = 'bottom';\n style[mxConstants.STYLE_INDICATOR_SHAPE] = 'ellipse';\n style[mxConstants.STYLE_INDICATOR_WIDTH] = 34;\n style[mxConstants.STYLE_INDICATOR_HEIGHT] = 34;\n style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 'top'; // indicator v-alignment\n style[mxConstants.STYLE_IMAGE_ALIGN] = 'center';\n style[mxConstants.STYLE_INDICATOR_COLOR] = 'green';\n delete style[mxConstants.STYLE_STROKECOLOR]; // transparent\n delete style[mxConstants.STYLE_FILLCOLOR]; // transparent\n\n // Creates a style with an indicator\n style = graph.getStylesheet().getDefaultEdgeStyle();\n\n style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;\n style[mxConstants.STYLE_ELBOW] = mxConstants.ELBOW_VERTICAL;\n style[mxConstants.STYLE_ROUNDED] = true;\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n graph.insertVertex(parent, null, 'Bottom Label', 80, 80, 80, 60);\n graph.insertVertex(\n parent,\n null,\n 'Top Label',\n 200,\n 80,\n 60,\n 60,\n 'indicatorShape=actor;indicatorWidth=28;indicatorColor=blue;imageVerticalAlign=bottom;verticalAlign=top'\n );\n graph.insertVertex(\n parent,\n null,\n 'Right Label',\n 300,\n 80,\n 120,\n 60,\n 'indicatorShape=cloud;indicatorWidth=40;indicatorColor=#00FFFF;imageVerticalAlign=center;verticalAlign=middle;imageAlign=left;align=left;spacingLeft=44'\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Indicators;\n",
- "HoverIcons": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxRectangle from '../mxgraph/util/mxRectangle';\nimport mxImage from '../mxgraph/util/mxImage';\n\nclass HoverIcons extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Defines an icon for creating new connections in the connection handler.\n // This will automatically disable the highlighting of the source vertex.\n mxConnectionHandler.prototype.connectImage = new mxImage(\n 'images/connector.gif',\n 16,\n 16\n );\n\n // Defines a new class for all icons\n function mxIconSet(state) {\n this.images = [];\n const { graph } = state.view;\n\n // Icon1\n let img = mxUtils.createImage('images/copy.png');\n img.setAttribute('title', 'Duplicate');\n img.style.position = 'absolute';\n img.style.cursor = 'pointer';\n img.style.width = '16px';\n img.style.height = '16px';\n img.style.left = `${state.x + state.width}px`;\n img.style.top = `${state.y + state.height}px`;\n\n mxEvent.addGestureListeners(img, evt => {\n const s = graph.gridSize;\n graph.setSelectionCells(graph.moveCells([state.cell], s, s, true));\n mxEvent.consume(evt);\n this.destroy();\n });\n\n state.view.graph.container.appendChild(img);\n this.images.push(img);\n\n // Delete\n img = mxUtils.createImage('images/delete2.png');\n img.setAttribute('title', 'Delete');\n img.style.position = 'absolute';\n img.style.cursor = 'pointer';\n img.style.width = '16px';\n img.style.height = '16px';\n img.style.left = `${state.x + state.width}px`;\n img.style.top = `${state.y - 16}px`;\n\n mxEvent.addGestureListeners(img, evt => {\n // Disables dragging the image\n mxEvent.consume(evt);\n });\n\n mxEvent.addListener(img, 'click', evt => {\n graph.removeCells([state.cell]);\n mxEvent.consume(evt);\n this.destroy();\n });\n\n state.view.graph.container.appendChild(img);\n this.images.push(img);\n }\n\n mxIconSet.prototype.destroy = function() {\n if (this.images != null) {\n for (let i = 0; i < this.images.length; i++) {\n const img = this.images[i];\n img.parentNode.removeChild(img);\n }\n }\n\n this.images = null;\n };\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.setConnectable(true);\n\n // Defines the tolerance before removing the icons\n const iconTolerance = 20;\n\n // Shows icons if the mouse is over a cell\n graph.addMouseListener({\n currentState: null,\n currentIconSet: null,\n mouseDown(sender, me) {\n // Hides icons on mouse down\n if (this.currentState != null) {\n this.dragLeave(me.getEvent(), this.currentState);\n this.currentState = null;\n }\n },\n mouseMove(sender, me) {\n if (\n this.currentState != null &&\n (me.getState() == this.currentState || me.getState() == null)\n ) {\n const tol = iconTolerance;\n const tmp = new mxRectangle(\n me.getGraphX() - tol,\n me.getGraphY() - tol,\n 2 * tol,\n 2 * tol\n );\n\n if (mxUtils.intersects(tmp, this.currentState)) {\n return;\n }\n }\n\n let tmp = graph.view.getState(me.getCell());\n\n // Ignores everything but vertices\n if (\n graph.isMouseDown ||\n (tmp != null && !graph.getModel().isVertex(tmp.cell))\n ) {\n tmp = null;\n }\n\n if (tmp != this.currentState) {\n if (this.currentState != null) {\n this.dragLeave(me.getEvent(), this.currentState);\n }\n\n this.currentState = tmp;\n\n if (this.currentState != null) {\n this.dragEnter(me.getEvent(), this.currentState);\n }\n }\n },\n mouseUp(sender, me) {},\n dragEnter(evt, state) {\n if (this.currentIconSet == null) {\n this.currentIconSet = new mxIconSet(state);\n }\n },\n dragLeave(evt, state) {\n if (this.currentIconSet != null) {\n this.currentIconSet.destroy();\n this.currentIconSet = null;\n }\n },\n });\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);\n const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default HoverIcons;\n",
- "Collapse": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRectangle from '../mxgraph/util/mxRectangle';\nimport mxGraphModel from '../mxgraph/model/mxGraphModel';\n\nclass Collapse extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n };\n\n componentDidMount() {\n class MyCustomModel extends mxGraphModel {\n getStyle(cell) {\n // Extends mxGraphModel.getStyle to show an image when collapsed\n if (cell != null) {\n let style = super.getStyle(cell);\n if (this.isCollapsed(cell)) {\n style =\n `${style};shape=image;image=http://www.jgraph.com/images/mxgraph.gif;` +\n `noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`;\n }\n return style;\n }\n return null;\n }\n }\n\n const graph = new mxGraph(this.el, new MyCustomModel());\n const parent = graph.getDefaultParent();\n\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex({\n parent,\n value: 'Container',\n position: [20, 20],\n size: [200, 200],\n style: 'shape=swimlane;startSize=20;',\n });\n v1.geometry.alternateBounds = new mxRectangle(0, 0, 110, 70);\n\n const v11 = graph.insertVertex({\n parent: v1,\n value: 'Hello,',\n position: [10, 40],\n size: [120, 80],\n });\n });\n };\n}\n\nexport default Collapse;\n",
- "LOD": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxUtils from '../mxgraph/util/mxUtils';\n\nclass LOD extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '441px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.centerZoom = false;\n\n // Links level of detail to zoom level but can be independent of zoom\n graph.isCellVisible = function(cell) {\n return cell.lod == null || cell.lod / 2 < this.view.scale;\n };\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, '1', 20, 20, 80, 30);\n v1.lod = 1;\n const v2 = graph.insertVertex(parent, null, '1', 200, 150, 80, 30);\n v2.lod = 1;\n const v3 = graph.insertVertex(parent, null, '2', 20, 150, 40, 20);\n v3.lod = 2;\n const v4 = graph.insertVertex(parent, null, '3', 200, 10, 20, 20);\n v4.lod = 3;\n const e1 = graph.insertEdge(parent, null, '2', v1, v2, 'strokeWidth=2');\n e1.lod = 2;\n var e2 = graph.insertEdge(parent, null, '2', v3, v4, 'strokeWidth=2');\n e2.lod = 2;\n var e2 = graph.insertEdge(parent, null, '3', v1, v4, 'strokeWidth=1');\n e2.lod = 3;\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n this.el2.appendChild(\n mxUtils.button('+', function() {\n graph.zoomIn();\n })\n );\n\n this.el2.appendChild(\n mxUtils.button('-', function() {\n graph.zoomOut();\n })\n );\n }\n}\n\nexport default LOD;\n",
- "Tree": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxGraphView from '../mxgraph/view/mxGraphView';\nimport mxCellRenderer from '../mxgraph/view/mxCellRenderer';\nimport mxCylinder from '../mxgraph/shape/mxCylinder';\nimport mxImage from '../mxgraph/util/mxImage';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxKeyHandler from '../mxgraph/handler/mxKeyHandler';\nimport mxCompactTreeLayout from '../mxgraph/layout/mxCompactTreeLayout';\nimport mxLayoutManager from '../mxgraph/view/mxLayoutManager';\nimport mxRectangle from '../mxgraph/util/mxRectangle';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxClient from '../mxgraph/mxClient';\nimport mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';\n\nclass Tree extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '400px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n /*\n Defines a custom shape for the tree node that includes the\n upper half of the outgoing edge(s).\n */\n class TreeNodeShape extends mxCylinder {\n // Defines the length of the upper edge segment.\n segment = 20;\n\n constructor(bounds, fill, stroke, strokewidth) {\n super(bounds, fill, stroke, strokewidth);\n }\n\n // Needs access to the cell state for rendering\n apply(state) {\n super.apply(state);\n this.state = state;\n }\n\n redrawPath(path, x, y, w, h, isForeground) {\n const { graph } = this.state.view;\n const hasChildren =\n graph.model.getOutgoingEdges(this.state.cell).length > 0;\n\n if (isForeground) {\n if (hasChildren) {\n // Painting outside of vertex bounds is used here\n path.moveTo(w / 2, h + this.segment);\n path.lineTo(w / 2, h);\n path.end();\n }\n } else {\n path.moveTo(0, 0);\n path.lineTo(w, 0);\n path.lineTo(w, h);\n path.lineTo(0, h);\n path.close();\n }\n }\n }\n mxCellRenderer.registerShape('treenode', TreeNodeShape);\n\n class MyCustomGraphView extends mxGraphView {\n updateFloatingTerminalPoint(edge, start, end, source) {\n // Defines a custom perimeter for the nodes in the tree\n let pt = null;\n\n if (source) {\n pt = new mxPoint(\n start.x + start.width / 2,\n start.y + start.height + TreeNodeShape.prototype.segment\n );\n } else {\n pt = new mxPoint(start.x + start.width / 2, start.y);\n }\n\n edge.setAbsoluteTerminalPoint(pt, source);\n }\n }\n\n class MyCustomCellRenderer extends mxCellRenderer {\n getControlBounds(state) {\n // Defines the position of the folding icon\n if (state.control != null) {\n const oldScale = state.control.scale;\n const w = state.control.bounds.width / oldScale;\n const h = state.control.bounds.height / oldScale;\n const s = state.view.scale;\n\n return new mxRectangle(\n state.x + state.width / 2 - (w / 2) * s,\n state.y +\n state.height +\n TreeNodeShape.prototype.segment * s -\n (h / 2) * s,\n w * s,\n h * s\n );\n }\n return null;\n }\n }\n\n // Make the layout instance accessible by MyCustomGraph\n let layout;\n\n class MyCustomGraph extends mxGraph {\n // Sets the collapse and expand icons. The values below are the default\n // values, but this is how to replace them if you need to.\n collapsedImage = new mxImage(\n `${mxClient.imageBasePath}/collapsed.gif`,\n 9,\n 9\n );\n\n expandedImage = new mxImage(\n `${mxClient.imageBasePath}/expanded.gif`,\n 9,\n 9\n );\n\n isCellFoldable(cell) {\n // Defines the condition for showing the folding icon\n return this.model.getOutgoingEdges(cell).length > 0;\n }\n\n createCellRenderer() {\n return new MyCustomCellRenderer();\n }\n\n createGraphView() {\n return new MyCustomGraphView(this);\n }\n\n foldCells(collapse, recurse, cells) {\n // Implements the click on a folding icon\n this.model.beginUpdate();\n try {\n this.toggleSubtree(this, cells[0], !collapse);\n this.model.setCollapsed(cells[0], collapse);\n\n // Executes the layout for the new graph since\n // changes to visiblity and collapsed state do\n // not trigger a layout in the current manager.\n layout.execute(this.getDefaultParent());\n } finally {\n this.model.endUpdate();\n }\n }\n\n toggleSubtree(cell, show) {\n // Updates the visible state of a given subtree taking into\n // account the collapsed state of the traversed branches\n show = show != null ? show : true;\n const cells = [];\n\n this.traverse(cell, true, function(vertex) {\n if (vertex !== cell) {\n cells.push(vertex);\n }\n\n // Stops recursion if a collapsed cell is seen\n return vertex === cell || !this.isCellCollapsed(vertex);\n });\n\n this.toggleCells(show, cells, true);\n }\n }\n\n // Creates the graph inside the given container\n const graph = new MyCustomGraph(this.el);\n\n // Disallow any selections\n graph.setCellsSelectable(false);\n\n // Avoids overlap of edges and collapse icons\n graph.keepEdgesInBackground = true;\n\n // Set some stylesheet options for the visual appearance\n let style = graph.getStylesheet().getDefaultVertexStyle();\n style[mxConstants.STYLE_SHAPE] = 'treenode';\n style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';\n style[mxConstants.STYLE_SHADOW] = true;\n\n style = graph.getStylesheet().getDefaultEdgeStyle();\n style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;\n style[mxConstants.STYLE_ROUNDED] = true;\n\n // Enables automatic sizing for vertices after editing and\n // panning by using the left mouse button.\n graph.setAutoSizeCells(true);\n graph.setPanning(true);\n graph.panningHandler.useLeftButtonForPanning = true;\n\n // Stops editing on enter or escape keypress\n const keyHandler = new mxKeyHandler(graph);\n\n // Enables automatic layout on the graph and installs\n // a tree layout for all groups who's children are\n // being changed, added or removed.\n layout = new mxCompactTreeLayout(graph, false);\n layout.useBoundingBox = false;\n layout.edgeRouting = false;\n layout.levelDistance = 30;\n layout.nodeDistance = 10;\n\n const layoutMgr = new mxLayoutManager(graph);\n\n layoutMgr.getLayout = function(cell) {\n if (cell.getChildCount() > 0) {\n return layout;\n }\n };\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds the root vertex of the tree\n graph.getModel().beginUpdate();\n try {\n const w = graph.container.offsetWidth;\n const root = graph.insertVertex(\n parent,\n 'treeRoot',\n 'Root',\n w / 2 - 30,\n 20,\n 60,\n 40\n );\n\n const v1 = graph.insertVertex(parent, 'v1', 'Child 1', 0, 0, 60, 40);\n graph.insertEdge(parent, null, '', root, v1);\n\n const v2 = graph.insertVertex(parent, 'v2', 'Child 2', 0, 0, 60, 40);\n graph.insertEdge(parent, null, '', root, v2);\n\n const v3 = graph.insertVertex(parent, 'v3', 'Child 3', 0, 0, 60, 40);\n graph.insertEdge(parent, null, '', root, v3);\n\n const v11 = graph.insertVertex(parent, 'v11', 'Child 1.1', 0, 0, 60, 40);\n graph.insertEdge(parent, null, '', v1, v11);\n\n const v12 = graph.insertVertex(parent, 'v12', 'Child 1.2', 0, 0, 60, 40);\n graph.insertEdge(parent, null, '', v1, v12);\n\n const v21 = graph.insertVertex(parent, 'v21', 'Child 2.1', 0, 0, 60, 40);\n graph.insertEdge(parent, null, '', v2, v21);\n\n const v22 = graph.insertVertex(parent, 'v22', 'Child 2.2', 0, 0, 60, 40);\n graph.insertEdge(parent, null, '', v2, v22);\n\n const v221 = graph.insertVertex(\n parent,\n 'v221',\n 'Child 2.2.1',\n 0,\n 0,\n 60,\n 40\n );\n graph.insertEdge(parent, null, '', v22, v221);\n\n const v222 = graph.insertVertex(\n parent,\n 'v222',\n 'Child 2.2.2',\n 0,\n 0,\n 60,\n 40\n );\n graph.insertEdge(parent, null, '', v22, v222);\n\n const v31 = graph.insertVertex(parent, 'v31', 'Child 3.1', 0, 0, 60, 40);\n graph.insertEdge(parent, null, '', v3, v31);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Tree;\n",
- "Labels": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxKeyHandler from '../mxgraph/handler/mxKeyHandler';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxRectangle from '../mxgraph/util/mxRectangle';\n\nclass Labels extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '300px',\n background: \"url('editors/images/grid.gif')\",\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.setTooltips(true);\n graph.htmlLabels = true;\n graph.vertexLabelsMovable = true;\n new mxRubberband(graph);\n new mxKeyHandler(graph);\n\n // Do not allow removing labels from parents\n graph.graphHandler.removeCellsFromParent = false;\n\n // Autosize labels on insert where autosize=1\n graph.autoSizeCellsOnAdd = true;\n\n // Allows moving of relative cells\n graph.isCellLocked = function(cell) {\n return this.isCellsLocked();\n };\n\n graph.isCellResizable = function(cell) {\n const geo = this.model.getGeometry(cell);\n\n return geo == null || !geo.relative;\n };\n\n // Truncates the label to the size of the vertex\n graph.getLabel = function(cell) {\n const label = this.labelsVisible ? this.convertValueToString(cell) : '';\n const geometry = this.model.getGeometry(cell);\n\n if (\n !this.model.isCollapsed(cell) &&\n geometry != null &&\n (geometry.offset == null ||\n (geometry.offset.x == 0 && geometry.offset.y == 0)) &&\n this.model.isVertex(cell) &&\n geometry.width >= 2\n ) {\n const style = this.getCellStyle(cell);\n const fontSize =\n style[mxConstants.STYLE_FONTSIZE] || mxConstants.DEFAULT_FONTSIZE;\n const max = geometry.width / (fontSize * 0.625);\n\n if (max < label.length) {\n return `${label.substring(0, max)}...`;\n }\n }\n\n return label;\n };\n\n // Enables wrapping for vertex labels\n graph.isWrapping = function(cell) {\n return this.model.isCollapsed(cell);\n };\n\n // Enables clipping of vertex labels if no offset is defined\n graph.isLabelClipped = function(cell) {\n const geometry = this.model.getGeometry(cell);\n\n return (\n geometry != null &&\n !geometry.relative &&\n (geometry.offset == null ||\n (geometry.offset.x == 0 && geometry.offset.y == 0))\n );\n };\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(\n parent,\n null,\n 'vertexLabelsMovable',\n 20,\n 20,\n 80,\n 30\n );\n\n // Places sublabels inside the vertex\n const label11 = graph.insertVertex(\n v1,\n null,\n 'Label1',\n 0.5,\n 1,\n 0,\n 0,\n null,\n true\n );\n const label12 = graph.insertVertex(\n v1,\n null,\n 'Label2',\n 0.5,\n 0,\n 0,\n 0,\n null,\n true\n );\n\n const v2 = graph.insertVertex(\n parent,\n null,\n 'Wrapping and clipping is enabled only if the cell is collapsed, otherwise the label is truncated if there is no manual offset.',\n 200,\n 150,\n 80,\n 30\n );\n v2.geometry.alternateBounds = new mxRectangle(0, 0, 80, 30);\n const e1 = graph.insertEdge(parent, null, 'edgeLabelsMovable', v1, v2);\n\n // Places sublabels inside the vertex\n const label21 = graph.insertVertex(\n v2,\n null,\n 'Label1',\n 0.5,\n 1,\n 0,\n 0,\n null,\n true\n );\n const label22 = graph.insertVertex(\n v2,\n null,\n 'Label2',\n 0.5,\n 0,\n 0,\n 0,\n null,\n true\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Labels;\n",
- "Control": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxRectangle from '../mxgraph/util/mxRectangle';\nimport mxCellRenderer from '../mxgraph/view/mxCellRenderer';\nimport mxImageShape from '../mxgraph/shape/mxImageShape';\nimport mxImage from '../mxgraph/util/mxImage';\n\nclass Control extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '441px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n };\n\n componentDidMount() {\n // Specifies the URL and size of the new control\n const deleteImage = new mxImage(\n 'editors/images/overlays/forbidden.png',\n 16,\n 16\n );\n\n class MyCustomCellRenderer extends mxCellRenderer {\n createControl(state) {\n super.createControl(state);\n\n const { graph } = state.view;\n\n if (graph.getModel().isVertex(state.cell)) {\n if (state.deleteControl == null) {\n const b = new mxRectangle(\n 0,\n 0,\n deleteImage.width,\n deleteImage.height\n );\n state.deleteControl = new mxImageShape(b, deleteImage.src);\n state.deleteControl.dialect = graph.dialect;\n state.deleteControl.preserveImageAspect = false;\n\n this.initControl(state, state.deleteControl, false, function(evt) {\n if (graph.isEnabled()) {\n graph.removeCells([state.cell]);\n mxEvent.consume(evt);\n }\n });\n }\n } else if (state.deleteControl != null) {\n state.deleteControl.destroy();\n state.deleteControl = null;\n }\n }\n\n getDeleteControlBounds(state) {\n // Helper function to compute the bounds of the control\n if (state.deleteControl != null) {\n const oldScale = state.deleteControl.scale;\n const w = state.deleteControl.bounds.width / oldScale;\n const h = state.deleteControl.bounds.height / oldScale;\n const s = state.view.scale;\n\n return state.view.graph.getModel().isEdge(state.cell)\n ? new mxRectangle(\n state.x + state.width / 2 - (w / 2) * s,\n state.y + state.height / 2 - (h / 2) * s,\n w * s,\n h * s\n )\n : new mxRectangle(\n state.x + state.width - w * s,\n state.y,\n w * s,\n h * s\n );\n }\n return null;\n }\n\n redrawControl(state) {\n // Overridden to update the scale and bounds of the control\n super.redrawControl(state);\n\n if (state.deleteControl != null) {\n const bounds = this.getDeleteControlBounds(state);\n const s = state.view.scale;\n\n if (\n state.deleteControl.scale !== s ||\n !state.deleteControl.bounds.equals(bounds)\n ) {\n state.deleteControl.bounds = bounds;\n state.deleteControl.scale = s;\n state.deleteControl.redraw();\n }\n }\n }\n\n destroy(state) {\n // Overridden to remove the control if the state is destroyed\n super.destroy(state);\n\n if (state.deleteControl != null) {\n state.deleteControl.destroy();\n state.deleteControl = null;\n }\n }\n }\n\n class MyCustomGraph extends mxGraph {\n createCellRenderer() {\n return new MyCustomCellRenderer();\n }\n }\n\n // Creates the graph inside the given container\n const graph = new MyCustomGraph(this.el);\n graph.setPanning(true);\n\n // Uncomment the following if you want the container\n // to fit the size of the graph\n // graph.setResizeContainer(true);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex({\n parent,\n value: 'Hello,',\n position: [20, 20],\n size: [80, 30],\n });\n const v2 = graph.insertVertex({\n parent,\n value: 'World!',\n position: [200, 150],\n size: [80, 30],\n });\n const e1 = graph.insertEdge({\n parent,\n source: v1,\n target: v2,\n });\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n graph.centerZoom = false;\n\n this.el2.appendChild(\n mxUtils.button('Zoom In', () => {\n graph.zoomIn();\n })\n );\n\n this.el2.appendChild(\n mxUtils.button('Zoom Out', () => {\n graph.zoomOut();\n })\n );\n };\n}\n\nexport default Control;\n",
- "LabelPosition": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\n\nclass LabelPosition extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '300px',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Defines the common part of all cell styles as a string-prefix\n const prefix = 'shape=image;image=images/icons48/keys.png;';\n\n // Adds cells to the model in a single step and set the vertex\n // label positions using the label position styles. Vertical\n // and horizontal label position styles can be combined.\n // Note: Alternatively, vertex labels can be set be overriding\n // mxCellRenderer.getLabelBounds.\n graph.getModel().beginUpdate();\n try {\n graph.insertVertex(\n parent,\n null,\n 'Bottom',\n 60,\n 60,\n 60,\n 60,\n `${prefix}verticalLabelPosition=bottom;verticalAlign=top`\n );\n graph.insertVertex(\n parent,\n null,\n 'Top',\n 140,\n 60,\n 60,\n 60,\n `${prefix}verticalLabelPosition=top;verticalAlign=bottom`\n );\n graph.insertVertex(\n parent,\n null,\n 'Left',\n 60,\n 160,\n 60,\n 60,\n `${prefix}labelPosition=left;align=right`\n );\n graph.insertVertex(\n parent,\n null,\n 'Right',\n 140,\n 160,\n 60,\n 60,\n `${prefix}labelPosition=right;align=left`\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default LabelPosition;\n",
- "Validation": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxClient from '../mxgraph/mxClient';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxMultiplicity from '../mxgraph/view/mxMultiplicity';\nimport mxKeyHandler from '../mxgraph/handler/mxKeyHandler';\n\nclass Validation extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '281px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n const xmlDocument = mxUtils.createXmlDocument();\n const sourceNode = xmlDocument.createElement('Source');\n const targetNode = xmlDocument.createElement('Target');\n const subtargetNode = xmlDocument.createElement('Subtarget');\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.setConnectable(true);\n graph.setTooltips(true);\n graph.setAllowDanglingEdges(false);\n graph.setMultigraph(false);\n\n // Source nodes needs 1..2 connected Targets\n graph.multiplicities.push(\n new mxMultiplicity(\n true,\n 'Source',\n null,\n null,\n 1,\n 2,\n ['Target'],\n 'Source Must Have 1 or 2 Targets',\n 'Source Must Connect to Target'\n )\n );\n\n // Source node does not want any incoming connections\n graph.multiplicities.push(\n new mxMultiplicity(\n false,\n 'Source',\n null,\n null,\n 0,\n 0,\n null,\n 'Source Must Have No Incoming Edge',\n null\n )\n ); // Type does not matter\n\n // Target needs exactly one incoming connection from Source\n graph.multiplicities.push(\n new mxMultiplicity(\n false,\n 'Target',\n null,\n null,\n 1,\n 1,\n ['Source'],\n 'Target Must Have 1 Source',\n 'Target Must Connect From Source'\n )\n );\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Removes cells when [DELETE] is pressed\n const keyHandler = new mxKeyHandler(graph);\n keyHandler.bindKey(46, function(evt) {\n if (graph.isEnabled()) {\n graph.removeCells();\n }\n });\n\n // Installs automatic validation (use editor.validation = true\n // if you are using an mxEditor instance)\n const listener = function(sender, evt) {\n graph.validateGraph();\n };\n\n graph.getModel().addListener(mxEvent.CHANGE, listener);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, sourceNode, 20, 20, 80, 30);\n const v2 = graph.insertVertex(parent, null, targetNode, 200, 20, 80, 30);\n const v3 = graph.insertVertex({\n parent,\n value: targetNode.cloneNode(true),\n position: [200, 80],\n size: [80, 30],\n });\n const v4 = graph.insertVertex(\n parent,\n null,\n targetNode.cloneNode(true),\n 200,\n 140,\n 80,\n 30\n );\n const v5 = graph.insertVertex(\n parent,\n null,\n subtargetNode,\n 200,\n 200,\n 80,\n 30\n );\n const v6 = graph.insertVertex(\n parent,\n null,\n sourceNode.cloneNode(true),\n 20,\n 140,\n 80,\n 30\n );\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n const e2 = graph.insertEdge(parent, null, '', v1, v3);\n const e3 = graph.insertEdge(parent, null, '', v6, v4);\n // var e4 = graph.insertEdge(parent, null, '', v1, v4);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Validation;\n",
- "Toolbar": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxDragSource from '../mxgraph/util/mxDragSource';\nimport mxGraphModel from '../mxgraph/model/mxGraphModel';\nimport mxToolbar from '../mxgraph/util/mxToolbar';\nimport mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';\nimport mxImage from '../mxgraph/util/mxImage';\nimport mxGeometry from '../mxgraph/model/mxGeometry';\nimport mxCell from '../mxgraph/model/mxCell';\nimport mxKeyHandler from '../mxgraph/handler/mxKeyHandler';\n\nclass Toolbar extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '400px',\n border: 'gray dotted 1px',\n cursor: 'default',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Defines an icon for creating new connections in the connection handler.\n // This will automatically disable the highlighting of the source vertex.\n mxConnectionHandler.prototype.connectImage = new mxImage(\n 'images/connector.gif',\n 16,\n 16\n );\n\n // Creates the div for the toolbar\n const tbContainer = document.createElement('div');\n tbContainer.style.position = 'absolute';\n tbContainer.style.overflow = 'hidden';\n tbContainer.style.padding = '2px';\n tbContainer.style.left = '0px';\n tbContainer.style.top = '26px';\n tbContainer.style.width = '24px';\n tbContainer.style.bottom = '0px';\n\n this.el.appendChild(tbContainer);\n\n // Creates new toolbar without event processing\n const toolbar = new mxToolbar(tbContainer);\n toolbar.enabled = false;\n\n // Creates the div for the graph\n const container = document.createElement('div');\n container.style.position = 'absolute';\n container.style.overflow = 'hidden';\n container.style.left = '24px';\n container.style.top = '26px';\n container.style.right = '0px';\n container.style.bottom = '0px';\n container.style.background = 'url(\"editors/images/grid.gif\")';\n\n this.el.appendChild(container);\n\n // Creates the model and the graph inside the container\n // using the fastest rendering available on the browser\n const model = new mxGraphModel();\n const graph = new mxGraph(container, model);\n graph.dropEnabled = true;\n\n // Matches DnD inside the graph\n mxDragSource.prototype.getDropTarget = function(graph, x, y) {\n let cell = graph.getCellAt(x, y);\n if (!graph.isValidDropTarget(cell)) {\n cell = null;\n }\n return cell;\n };\n\n // Enables new connections in the graph\n graph.setConnectable(true);\n graph.setMultigraph(false);\n\n // Stops editing on enter or escape keypress\n const keyHandler = new mxKeyHandler(graph);\n const rubberband = new mxRubberband(graph);\n\n const addVertex = (icon, w, h, style) => {\n const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);\n vertex.setVertex(true);\n\n this.addToolbarItem(graph, toolbar, vertex, icon);\n };\n\n addVertex(\n 'editors/images/swimlane.gif',\n 120,\n 160,\n 'shape=swimlane;startSize=20;'\n );\n addVertex('editors/images/rectangle.gif', 100, 40, '');\n addVertex('editors/images/rounded.gif', 100, 40, 'shape=rounded');\n addVertex('editors/images/ellipse.gif', 40, 40, 'shape=ellipse');\n addVertex('editors/images/rhombus.gif', 40, 40, 'shape=rhombus');\n addVertex('editors/images/triangle.gif', 40, 40, 'shape=triangle');\n addVertex('editors/images/cylinder.gif', 40, 40, 'shape=cylinder');\n addVertex('editors/images/actor.gif', 30, 40, 'shape=actor');\n toolbar.addLine();\n\n const button = mxUtils.button(\n 'Create toolbar entry from selection',\n evt => {\n if (!graph.isSelectionEmpty()) {\n // Creates a copy of the selection array to preserve its state\n const cells = graph.getSelectionCells();\n const bounds = graph.getView().getBounds(cells);\n\n // Function that is executed when the image is dropped on\n // the graph. The cell argument points to the cell under\n // the mousepointer if there is one.\n const funct = (graph, evt, cell) => {\n graph.stopEditing(false);\n\n const pt = graph.getPointForEvent(evt);\n const dx = pt.x - bounds.x;\n const dy = pt.y - bounds.y;\n\n graph.setSelectionCells(graph.importCells(cells, dx, dy, cell));\n };\n\n // Creates the image which is used as the drag icon (preview)\n const img = toolbar.addMode(\n null,\n 'editors/images/outline.gif',\n funct\n );\n mxUtils.makeDraggable(img, graph, funct);\n }\n }\n );\n\n this.el2.appendChild(button);\n }\n\n addToolbarItem(graph, toolbar, prototype, image) {\n // Function that is executed when the image is dropped on\n // the graph. The cell argument points to the cell under\n // the mousepointer if there is one.\n const funct = (graph, evt, cell) => {\n graph.stopEditing(false);\n\n const pt = graph.getPointForEvent(evt);\n const vertex = graph.getModel().cloneCell(prototype);\n vertex.geometry.x = pt.x;\n vertex.geometry.y = pt.y;\n\n graph.setSelectionCells(graph.importCells([vertex], 0, 0, cell));\n };\n\n // Creates the image which is used as the drag icon (preview)\n const img = toolbar.addMode(null, image, funct);\n mxUtils.makeDraggable(img, graph, funct);\n }\n}\n\nexport default Toolbar;\n",
- "Thread": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\n\nclass Thread extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Disables basic selection and cell handling\n graph.setEnabled(false);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n let v1;\n let v2;\n let e1;\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);\n v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);\n e1 = graph.insertEdge(parent, null, '', v1, v2);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n // Function to switch the overlay every 5 secs\n const f = () => {\n const overlays = graph.getCellOverlays(v1);\n\n if (overlays == null) {\n graph.removeCellOverlays(v2);\n graph.setCellWarning(v1, 'Tooltip');\n } else {\n graph.removeCellOverlays(v1);\n graph.setCellWarning(v2, 'Tooltip');\n }\n };\n\n window.setInterval(f, 1000);\n f();\n }\n}\n\nexport default Thread;\n",
- "Animation": "/**\n * Copyright (c) 2006-2017, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxPoint from '../mxgraph/util/mxPoint';\n\nclass Animation extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: 'url(\"editors/images/grid.gif\")',\n cursor: 'default',\n }}\n />\n \n );\n };\n\n componentDidMount() {\n const graph = new mxGraph(this.el);\n graph.setEnabled(false);\n const parent = graph.getDefaultParent();\n\n const vertexStyle =\n 'shape=cylinder;strokeWidth=2;fillColor=#ffffff;strokeColor=black;' +\n 'gradientColor=#a0a0a0;fontColor=black;fontStyle=1;spacingTop=14;';\n\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex({\n parent,\n value: 'Pump',\n position: [20, 20],\n size: [60, 60],\n style: vertexStyle,\n });\n const v2 = graph.insertVertex({\n parent,\n value: 'Tank',\n position: [200, 150],\n size: [60, 60],\n style: vertexStyle,\n });\n var e1 = graph.insertEdge({\n parent,\n source: v1,\n target: v2,\n style:\n 'strokeWidth=3;endArrow=block;endSize=2;endFill=1;strokeColor=black;rounded=1;',\n });\n e1.geometry.points = [new mxPoint(230, 50)];\n graph.orderCells(true, [e1]);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n // Adds animation to edge shape and makes \"pipe\" visible\n const state = graph.view.getState(e1);\n state.shape.node\n .getElementsByTagName('path')[0]\n .removeAttribute('visibility');\n state.shape.node\n .getElementsByTagName('path')[0]\n .setAttribute('stroke-width', '6');\n state.shape.node\n .getElementsByTagName('path')[0]\n .setAttribute('stroke', 'lightGray');\n state.shape.node\n .getElementsByTagName('path')[1]\n .setAttribute('class', 'flow');\n };\n}\n\nexport default Animation;\n",
- "Perimeter": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxGraphView from '../mxgraph/view/mxGraphView';\n\nclass Perimeter extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Redirects the perimeter to the label bounds if intersection\n // between edge and label is found\n const mxGraphViewGetPerimeterPoint =\n mxGraphView.prototype.getPerimeterPoint;\n mxGraphView.prototype.getPerimeterPoint = function(\n terminal,\n next,\n orthogonal,\n border\n ) {\n let point = mxGraphViewGetPerimeterPoint.apply(this, arguments);\n\n if (point != null) {\n const perimeter = this.getPerimeterFunction(terminal);\n\n if (terminal.text != null && terminal.text.boundingBox != null) {\n // Adds a small border to the label bounds\n const b = terminal.text.boundingBox.clone();\n b.grow(3);\n\n if (mxUtils.rectangleIntersectsSegment(b, point, next)) {\n point = perimeter(b, terminal, next, orthogonal);\n }\n }\n }\n\n return point;\n };\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.setVertexLabelsMovable(true);\n graph.setConnectable(true);\n\n // Uncomment the following if you want the container\n // to fit the size of the graph\n // graph.setResizeContainer(true);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(\n parent,\n null,\n 'Label',\n 20,\n 20,\n 80,\n 30,\n 'verticalLabelPosition=bottom'\n );\n const v2 = graph.insertVertex(\n parent,\n null,\n 'Label',\n 200,\n 20,\n 80,\n 30,\n 'verticalLabelPosition=bottom'\n );\n const v3 = graph.insertVertex(\n parent,\n null,\n 'Label',\n 20,\n 150,\n 80,\n 30,\n 'verticalLabelPosition=bottom'\n );\n var e1 = graph.insertEdge(parent, null, '', v1, v2);\n var e1 = graph.insertEdge(parent, null, '', v1, v3);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Perimeter;\n",
- "JsonData": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxCodecRegistry from '../mxgraph/io/mxCodecRegistry';\nimport mxObjectCodec from '../mxgraph/io/mxObjectCodec';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxCodec from '../mxgraph/io/mxCodec';\n\nclass JsonData extends React.Component {\n // Adds an option to view the XML of the graph\n document;\n\n body;\n\n 'View XML';\n\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Disables the built-in context menu\n mxEvent.disableContextMenu(this.el);\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);\n v1.data = new CustomData('v1');\n const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);\n v2.data = new CustomData('v2');\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n this.el2.appendChild(\n mxUtils.button(function() {\n const encoder = new mxCodec();\n const node = encoder.encode(graph.getModel());\n mxUtils.popup(mxUtils.getXml(node), true);\n })\n );\n\n function CustomData(value) {\n this.value = value;\n }\n\n const codec = new mxObjectCodec(new CustomData());\n codec.encode = function(enc, obj) {\n const node = enc.document.createElement('CustomData');\n mxUtils.setTextContent(node, JSON.stringify(obj));\n\n return node;\n };\n codec.decode = function(dec, node, into) {\n const obj = JSON.parse(mxUtils.getTextContent(node));\n obj.constructor = CustomData;\n\n return obj;\n };\n mxCodecRegistry.register(codec);\n }\n}\n\nexport default JsonData;\n",
- "Wrapping": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\n\nclass Wrapping extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Enables HTML labels as wrapping is only available for those\n graph.setHtmlLabels(true);\n\n // Disables in-place editing for edges\n graph.isCellEditable = function(cell) {\n return !this.model.isEdge(cell);\n };\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex({\n parent,\n value: 'Cum Caesar vidisset, portum plenum esse, iuxta navigavit.',\n position: [20, 20],\n size: [100, 70],\n style: 'whiteSpace=wrap;',\n });\n const v2 = graph.insertVertex({\n parent,\n value: 'Cum Caesar vidisset, portum plenum esse, iuxta navigavit.',\n position: [220, 150],\n size: [80, 70],\n style: 'whiteSpace=wrap;',\n });\n const e1 = graph.insertEdge({\n parent,\n value: 'Cum Caesar vidisset, portum plenum esse, iuxta navigavit.',\n source: v1,\n target: v2,\n style: 'whiteSpace=wrap;',\n });\n e1.geometry.width = 100;\n });\n }\n}\n\nexport default Wrapping;\n",
- "Stencils": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxStencilRegistry from '../mxgraph/shape/mxStencilRegistry';\nimport mxCellRenderer from '../mxgraph/view/mxCellRenderer';\nimport mxShape from '../mxgraph/shape/mxShape';\nimport mxVertexHandler from '../mxgraph/handler/mxVertexHandler';\nimport mxCellHighlight from '../mxgraph/handler/mxCellHighlight';\nimport mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';\nimport mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';\nimport mxStencil from '../mxgraph/shape/mxStencil';\n\nclass Stencils extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '401px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n {\n this.el2 = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n width: '601px',\n height: '150px',\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Sets the global shadow color\n mxConstants.SHADOWCOLOR = '#C0C0C0';\n mxConstants.SHADOW_OPACITY = 0.5;\n mxConstants.SHADOW_OFFSET_X = 4;\n mxConstants.SHADOW_OFFSET_Y = 4;\n mxConstants.HANDLE_FILLCOLOR = '#99ccff';\n mxConstants.HANDLE_STROKECOLOR = '#0088cf';\n mxConstants.VERTEX_SELECTION_COLOR = '#00a8ff';\n\n // Enables connections along the outline\n mxConnectionHandler.prototype.outlineConnect = true;\n mxEdgeHandler.prototype.manageLabelHandle = true;\n mxEdgeHandler.prototype.outlineConnect = true;\n mxCellHighlight.prototype.keepOnTop = true;\n\n // Enable rotation handle\n mxVertexHandler.prototype.rotationEnabled = true;\n\n // Uses the shape for resize previews\n mxVertexHandler.prototype.createSelectionShape = function(bounds) {\n const key = this.state.style[mxConstants.STYLE_SHAPE];\n const stencil = mxStencilRegistry.getStencil(key);\n let shape = null;\n\n if (stencil != null) {\n shape = new mxShape(stencil);\n shape.apply(this.state);\n } else {\n shape = new this.state.shape.constructor();\n }\n\n shape.outline = true;\n shape.bounds = bounds;\n shape.stroke = mxConstants.HANDLE_STROKECOLOR;\n shape.strokewidth = this.getSelectionStrokeWidth();\n shape.isDashed = this.isSelectionDashed();\n shape.isShadow = false;\n\n return shape;\n };\n\n // Defines a custom stencil via the canvas API as defined here:\n // http://jgraph.github.io/mxgraph/docs/js-api/files/util/mxXmlCanvas2D-js.html\n\n class CustomShape extends mxShape {\n paintBackground(c, x, y, w, h) {\n c.translate(x, y);\n\n // Head\n c.ellipse(w / 4, 0, w / 2, h / 4);\n c.fillAndStroke();\n\n c.begin();\n c.moveTo(w / 2, h / 4);\n c.lineTo(w / 2, (2 * h) / 3);\n\n // Arms\n c.moveTo(w / 2, h / 3);\n c.lineTo(0, h / 3);\n c.moveTo(w / 2, h / 3);\n c.lineTo(w, h / 3);\n\n // Legs\n c.moveTo(w / 2, (2 * h) / 3);\n c.lineTo(0, h);\n c.moveTo(w / 2, (2 * h) / 3);\n c.lineTo(w, h);\n c.end();\n\n c.stroke();\n }\n }\n\n // Replaces existing actor shape\n mxCellRenderer.registerShape('customShape', CustomShape);\n\n // Loads the stencils into the registry\n const req = mxUtils.load('stencils.xml');\n const root = req.getDocumentElement();\n let shape = root.firstChild;\n\n while (shape != null) {\n if (shape.nodeType === mxConstants.NODETYPE_ELEMENT) {\n mxStencilRegistry.addStencil(\n shape.getAttribute('name'),\n new mxStencil(shape)\n );\n }\n\n shape = shape.nextSibling;\n }\n\n mxEvent.disableContextMenu(this.el);\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.setConnectable(true);\n graph.setTooltips(true);\n graph.setPanning(true);\n\n graph.getTooltipForCell = function(cell) {\n if (cell != null) {\n return cell.style;\n }\n\n return null;\n };\n\n // Changes default styles\n let style = graph.getStylesheet().getDefaultEdgeStyle();\n style[mxConstants.STYLE_EDGE] = 'orthogonalEdgeStyle';\n style = graph.getStylesheet().getDefaultVertexStyle();\n style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff';\n style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df';\n style[mxConstants.STYLE_SHADOW] = '1';\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(\n parent,\n null,\n 'A1',\n 20,\n 20,\n 40,\n 80,\n 'shape=and'\n );\n const v2 = graph.insertVertex(\n parent,\n null,\n 'A2',\n 20,\n 220,\n 40,\n 80,\n 'shape=and'\n );\n const v3 = graph.insertVertex(\n parent,\n null,\n 'X1',\n 160,\n 110,\n 80,\n 80,\n 'shape=xor'\n );\n const e1 = graph.insertEdge(parent, null, '', v1, v3);\n e1.geometry.points = [new mxPoint(90, 60), new mxPoint(90, 130)];\n const e2 = graph.insertEdge(parent, null, '', v2, v3);\n e2.geometry.points = [new mxPoint(90, 260), new mxPoint(90, 170)];\n\n const v4 = graph.insertVertex(\n parent,\n null,\n 'A3',\n 520,\n 20,\n 40,\n 80,\n 'shape=customShape;flipH=1'\n );\n const v5 = graph.insertVertex(\n parent,\n null,\n 'A4',\n 520,\n 220,\n 40,\n 80,\n 'shape=and;flipH=1'\n );\n const v6 = graph.insertVertex(\n parent,\n null,\n 'X2',\n 340,\n 110,\n 80,\n 80,\n 'shape=xor;flipH=1'\n );\n const e3 = graph.insertEdge(parent, null, '', v4, v6);\n e3.geometry.points = [new mxPoint(490, 60), new mxPoint(130, 130)];\n const e4 = graph.insertEdge(parent, null, '', v5, v6);\n e4.geometry.points = [new mxPoint(490, 260), new mxPoint(130, 170)];\n\n const v7 = graph.insertVertex(\n parent,\n null,\n 'O1',\n 250,\n 260,\n 80,\n 60,\n 'shape=or;direction=south'\n );\n const e5 = graph.insertEdge(parent, null, '', v6, v7);\n e5.geometry.points = [new mxPoint(310, 150)];\n const e6 = graph.insertEdge(parent, null, '', v3, v7);\n e6.geometry.points = [new mxPoint(270, 150)];\n\n const e7 = graph.insertEdge(parent, null, '', v7, v5);\n e7.geometry.points = [new mxPoint(290, 370)];\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n this.el2.appendChild(\n mxUtils.button('FlipH', function() {\n graph.toggleCellStyles(mxConstants.STYLE_FLIPH);\n })\n );\n\n this.el2.appendChild(\n mxUtils.button('FlipV', function() {\n graph.toggleCellStyles(mxConstants.STYLE_FLIPV);\n })\n );\n\n this.el2.appendChild(document.createTextNode('\\u00a0'));\n this.el2.appendChild(document.createTextNode('\\u00a0'));\n this.el2.appendChild(document.createTextNode('\\u00a0'));\n this.el2.appendChild(document.createTextNode('\\u00a0'));\n\n this.el2.appendChild(\n mxUtils.button('Rotate', function() {\n const cell = graph.getSelectionCell();\n\n if (cell != null) {\n let geo = graph.getCellGeometry(cell);\n\n if (geo != null) {\n graph.getModel().beginUpdate();\n try {\n // Rotates the size and position in the geometry\n geo = geo.clone();\n geo.x += geo.width / 2 - geo.height / 2;\n geo.y += geo.height / 2 - geo.width / 2;\n const tmp = geo.width;\n geo.width = geo.height;\n geo.height = tmp;\n graph.getModel().setGeometry(cell, geo);\n\n // Reads the current direction and advances by 90 degrees\n const state = graph.view.getState(cell);\n\n if (state != null) {\n let dir =\n state.style[mxConstants.STYLE_DIRECTION] ||\n 'east'; /* default */\n\n if (dir === 'east') {\n dir = 'south';\n } else if (dir === 'south') {\n dir = 'west';\n } else if (dir === 'west') {\n dir = 'north';\n } else if (dir === 'north') {\n dir = 'east';\n }\n\n graph.setCellStyles(mxConstants.STYLE_DIRECTION, dir, [cell]);\n }\n } finally {\n graph.getModel().endUpdate();\n }\n }\n }\n })\n );\n\n this.el2.appendChild(document.createTextNode('\\u00a0'));\n this.el2.appendChild(document.createTextNode('\\u00a0'));\n this.el2.appendChild(document.createTextNode('\\u00a0'));\n this.el2.appendChild(document.createTextNode('\\u00a0'));\n\n this.el2.appendChild(\n mxUtils.button('And', function() {\n graph.setCellStyles(mxConstants.STYLE_SHAPE, 'and');\n })\n );\n this.el2.appendChild(\n mxUtils.button('Or', function() {\n graph.setCellStyles(mxConstants.STYLE_SHAPE, 'or');\n })\n );\n this.el2.appendChild(\n mxUtils.button('Xor', function() {\n graph.setCellStyles(mxConstants.STYLE_SHAPE, 'xor');\n })\n );\n\n this.el2.appendChild(document.createTextNode('\\u00a0'));\n this.el2.appendChild(document.createTextNode('\\u00a0'));\n this.el2.appendChild(document.createTextNode('\\u00a0'));\n this.el2.appendChild(document.createTextNode('\\u00a0'));\n\n this.el2.appendChild(\n mxUtils.button('Style', function() {\n const cell = graph.getSelectionCell();\n\n if (cell != null) {\n const style = mxUtils.prompt(\n 'Style',\n graph.getModel().getStyle(cell)\n );\n\n if (style != null) {\n graph.getModel().setStyle(cell, style);\n }\n }\n })\n );\n\n this.el2.appendChild(\n mxUtils.button('+', function() {\n graph.zoomIn();\n })\n );\n this.el2.appendChild(\n mxUtils.button('-', function() {\n graph.zoomOut();\n })\n );\n }\n}\n\nexport default Stencils;\n",
- "UserObject": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxForm from '../mxgraph/util/mxForm';\nimport mxCellAttributeChange from '../mxgraph/model/atomic_changes/mxCellAttributeChange';\nimport mxKeyHandler from '../mxgraph/handler/mxKeyHandler';\nimport mxRectangle from '../mxgraph/util/mxRectangle';\nimport mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';\n\nclass UserObject extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n \n \n \n {\n this.el = el;\n }}\n style={{\n border: 'solid 1px black',\n overflow: 'hidden',\n height: '241px',\n cursor: 'default',\n }}\n />\n \n \n {\n this.propertiesEl = el;\n }}\n style={{\n border: 'solid 1px black',\n padding: '10px',\n }}\n />\n \n \n \n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Note that these XML nodes will be enclosing the\n // mxCell nodes for the model cells in the output\n const doc = mxUtils.createXmlDocument();\n\n const person1 = doc.createElement('Person');\n person1.setAttribute('firstName', 'Daffy');\n person1.setAttribute('lastName', 'Duck');\n\n const person2 = doc.createElement('Person');\n person2.setAttribute('firstName', 'Bugs');\n person2.setAttribute('lastName', 'Bunny');\n\n const relation = doc.createElement('Knows');\n relation.setAttribute('since', '1985');\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Optional disabling of sizing\n graph.setCellsResizable(false);\n\n // Configures the graph contains to resize and\n // add a border at the bottom, right\n graph.setResizeContainer(true);\n graph.minimumContainerSize = new mxRectangle(0, 0, 500, 380);\n graph.setBorder(60);\n\n // Stops editing on enter key, handles escape\n new mxKeyHandler(graph);\n\n // Overrides method to disallow edge label editing\n graph.isCellEditable = function(cell) {\n return !this.getModel().isEdge(cell);\n };\n\n // Overrides method to provide a cell label in the display\n graph.convertValueToString = function(cell) {\n if (mxUtils.isNode(cell.value)) {\n if (cell.value.nodeName.toLowerCase() == 'person') {\n const firstName = cell.getAttribute('firstName', '');\n const lastName = cell.getAttribute('lastName', '');\n\n if (lastName != null && lastName.length > 0) {\n return `${lastName}, ${firstName}`;\n }\n\n return firstName;\n }\n if (cell.value.nodeName.toLowerCase() == 'knows') {\n return `${cell.value.nodeName} (Since ${cell.getAttribute(\n 'since',\n ''\n )})`;\n }\n }\n\n return '';\n };\n\n // Overrides method to store a cell label in the model\n const { cellLabelChanged } = graph;\n graph.cellLabelChanged = function(cell, newValue, autoSize) {\n if (\n mxUtils.isNode(cell.value) &&\n cell.value.nodeName.toLowerCase() == 'person'\n ) {\n const pos = newValue.indexOf(' ');\n\n const firstName = pos > 0 ? newValue.substring(0, pos) : newValue;\n const lastName =\n pos > 0 ? newValue.substring(pos + 1, newValue.length) : '';\n\n // Clones the value for correct undo/redo\n const elt = cell.value.cloneNode(true);\n\n elt.setAttribute('firstName', firstName);\n elt.setAttribute('lastName', lastName);\n\n newValue = elt;\n autoSize = true;\n }\n\n cellLabelChanged.apply(this, arguments);\n };\n\n // Overrides method to create the editing value\n const { getEditingValue } = graph;\n graph.getEditingValue = function(cell) {\n if (\n mxUtils.isNode(cell.value) &&\n cell.value.nodeName.toLowerCase() == 'person'\n ) {\n const firstName = cell.getAttribute('firstName', '');\n const lastName = cell.getAttribute('lastName', '');\n\n return `${firstName} ${lastName}`;\n }\n };\n\n // Adds a special tooltip for edges\n graph.setTooltips(true);\n\n const { getTooltipForCell } = graph;\n graph.getTooltipForCell = function(cell) {\n // Adds some relation details for edges\n if (graph.getModel().isEdge(cell)) {\n const src = this.getLabel(this.getModel().getTerminal(cell, true));\n const trg = this.getLabel(this.getModel().getTerminal(cell, false));\n\n return `${src} ${cell.value.nodeName} ${trg}`;\n }\n\n return getTooltipForCell.apply(this, arguments);\n };\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Adds an option to view the XML of the graph\n this.el2.appendChild(\n mxUtils.button('View XML', function() {\n const encoder = new mxCodec();\n const node = encoder.encode(graph.getModel());\n mxUtils.popup(mxUtils.getPrettyXml(node), true);\n })\n );\n\n // Changes the style for match the markup\n // Creates the default style for vertices\n let style = graph.getStylesheet().getDefaultVertexStyle();\n style[mxConstants.STYLE_STROKECOLOR] = 'gray';\n style[mxConstants.STYLE_ROUNDED] = true;\n style[mxConstants.STYLE_SHADOW] = true;\n style[mxConstants.STYLE_FILLCOLOR] = '#DFDFDF';\n style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';\n style[mxConstants.STYLE_FONTCOLOR] = 'black';\n style[mxConstants.STYLE_FONTSIZE] = '12';\n style[mxConstants.STYLE_SPACING] = 4;\n\n // Creates the default style for edges\n style = graph.getStylesheet().getDefaultEdgeStyle();\n style[mxConstants.STYLE_STROKECOLOR] = '#0C0C0C';\n style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';\n style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;\n style[mxConstants.STYLE_ROUNDED] = true;\n style[mxConstants.STYLE_FONTCOLOR] = 'black';\n style[mxConstants.STYLE_FONTSIZE] = '10';\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, person1, 40, 40, 80, 30);\n const v2 = graph.insertVertex(parent, null, person2, 200, 150, 80, 30);\n const e1 = graph.insertEdge(parent, null, relation, v1, v2);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n // Implements a properties panel that uses\n // mxCellAttributeChange to change properties\n graph\n .getSelectionModel()\n .addListener(mxEvent.CHANGE, function(sender, evt) {\n this.selectionChanged(graph);\n });\n\n this.selectionChanged(graph);\n }\n\n /**\n * Updates the properties panel\n */\n selectionChanged(graph) {\n const div = this.propertiesEl;\n\n // Forces focusout in IE\n graph.container.focus();\n\n // Clears the DIV the non-DOM way\n div.innerHTML = '';\n\n // Gets the selection cell\n const cell = graph.getSelectionCell();\n\n if (cell == null) {\n mxUtils.writeln(div, 'Nothing selected.');\n } else {\n // Writes the title\n const center = document.createElement('center');\n mxUtils.writeln(center, `${cell.value.nodeName} (${cell.id})`);\n div.appendChild(center);\n mxUtils.br(div);\n\n // Creates the form from the attributes of the user object\n const form = new mxForm();\n\n const attrs = cell.value.attributes;\n\n for (let i = 0; i < attrs.length; i++) {\n this.createTextField(graph, form, cell, attrs[i]);\n }\n\n div.appendChild(form.getTable());\n mxUtils.br(div);\n }\n }\n\n /**\n * Creates the textfield for the given property.\n */\n createTextField(graph, form, cell, attribute) {\n const input = form.addText(`${attribute.nodeName}:`, attribute.nodeValue);\n\n const applyHandler = function() {\n const newValue = input.value || '';\n const oldValue = cell.getAttribute(attribute.nodeName, '');\n\n if (newValue != oldValue) {\n graph.getModel().beginUpdate();\n\n try {\n const edit = new mxCellAttributeChange(\n cell,\n attribute.nodeName,\n newValue\n );\n graph.getModel().execute(edit);\n graph.updateCellSize(cell);\n } finally {\n graph.getModel().endUpdate();\n }\n }\n };\n\n mxEvent.addListener(input, 'keypress', function(evt) {\n // Needs to take shift into account for textareas\n if (evt.keyCode == /* enter */ 13 && !mxEvent.isShiftDown(evt)) {\n input.blur();\n }\n });\n\n // Note: Known problem is the blurring of fields in\n // Firefox by changing the selection, in which case\n // no event is fired in FF and the change is lost.\n // As a workaround you should use a local variable\n // that stores the focused field and invoke blur\n // explicitely where we do the graph.focus above.\n mxEvent.addListener(input, 'blur', applyHandler);\n }\n}\n\nexport default UserObject;\n",
- "Merge": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxPerimeter from '../mxgraph/view/mxPerimeter';\n\nclass Merge extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '280px',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n mxConstants.SHADOWCOLOR = '#c0c0c0';\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // No size handles, please...\n graph.setCellsResizable(false);\n\n // Makes all cells round with a white, bold label\n let style = graph.stylesheet.getDefaultVertexStyle();\n style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;\n style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;\n style[mxConstants.STYLE_FONTCOLOR] = 'white';\n style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';\n style[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD;\n style[mxConstants.STYLE_FONTSIZE] = 14;\n style[mxConstants.STYLE_SHADOW] = true;\n\n // Makes all edge labels gray with a white background\n style = graph.stylesheet.getDefaultEdgeStyle();\n style[mxConstants.STYLE_FONTCOLOR] = 'gray';\n style[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD;\n style[mxConstants.STYLE_FONTCOLOR] = 'black';\n style[mxConstants.STYLE_STROKEWIDTH] = 2;\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the target model in a single step\n // using custom ids for the vertices and edges\n const w = 40;\n const h = 40;\n\n graph.getModel().beginUpdate();\n try {\n const a = graph.insertVertex(\n parent,\n 'a',\n 'A',\n 20,\n 20,\n w,\n h,\n 'fillColor=blue'\n );\n const b = graph.insertVertex(\n parent,\n 'b',\n 'B',\n 20,\n 200,\n w,\n h,\n 'fillColor=blue'\n );\n const c = graph.insertVertex(\n parent,\n 'c',\n 'C',\n 200,\n 20,\n w,\n h,\n 'fillColor=red'\n );\n const d = graph.insertVertex(\n parent,\n 'd',\n 'D',\n 200,\n 200,\n w,\n h,\n 'fillColor=red'\n );\n const ac = graph.insertEdge(\n parent,\n 'ac',\n 'ac',\n a,\n c,\n 'strokeColor=blue;verticalAlign=bottom'\n );\n const ad = graph.insertEdge(\n parent,\n 'ad',\n 'ad',\n a,\n d,\n 'strokeColor=blue;align=left;verticalAlign=bottom'\n );\n const bd = graph.insertEdge(\n parent,\n 'bd',\n 'bd',\n b,\n d,\n 'strokeColor=blue;verticalAlign=bottom'\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n // Creates the second graph model (without a container)\n const graph2 = new mxGraph();\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent2 = graph2.getDefaultParent();\n\n // Adds cells to the target model in a single step\n // using custom ids for the vertices\n graph2.getModel().beginUpdate();\n try {\n const c = graph2.insertVertex(\n parent2,\n 'c',\n 'C',\n 200,\n 20,\n w,\n h,\n 'fillColor=green'\n );\n const d = graph2.insertVertex(\n parent2,\n 'd',\n 'D',\n 200,\n 200,\n w,\n h,\n 'fillColor=green'\n );\n const e = graph2.insertVertex(\n parent2,\n 'e',\n 'E',\n 400,\n 20,\n w,\n h,\n 'fillColor=green'\n );\n const f = graph2.insertVertex(\n parent2,\n 'f',\n 'F',\n 400,\n 200,\n w,\n h,\n 'fillColor=green'\n );\n const ce = graph2.insertEdge(\n parent2,\n 'ce',\n 'ce',\n c,\n e,\n 'strokeColor=green;verticalAlign=bottom'\n );\n const ed = graph2.insertEdge(\n parent2,\n 'ed',\n 'ed',\n e,\n d,\n 'strokeColor=green;align=right;verticalAlign=bottom'\n );\n const fd = graph2.insertEdge(\n parent2,\n 'bd',\n 'fd',\n f,\n d,\n 'strokeColor=green;verticalAlign=bottom'\n );\n } finally {\n // Updates the display\n graph2.getModel().endUpdate();\n }\n\n // Merges the model from the second graph into the model of\n // the first graph. Note: If you add a false to the parameter\n // list then _not_ all edges will be cloned, that is, the\n // edges are assumed to have an identity, and hence the edge\n // \"bd\" will be changed to point from f to d, as specified in\n // the edge for the same id in the second graph.\n graph.getModel().mergeChildren(parent2, parent /* , false */);\n }\n}\n\nexport default Merge;\n",
- "OrgChart": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n\n Orgchart. This example demonstrates using\n automatic layouts, fit to page zoom and poster print (across\n multiple pages).\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxPrintPreview from '../mxgraph/view/mxPrintPreview';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxCellOverlay from '../mxgraph/view/mxCellOverlay';\nimport mxImage from '../mxgraph/util/mxImage';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxWindow from '../mxgraph/util/mxWindow';\nimport mxToolbar from '../mxgraph/util/mxToolbar';\nimport mxLayoutManager from '../mxgraph/view/mxLayoutManager';\nimport mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';\nimport mxCompactTreeLayout from '../mxgraph/layout/mxCompactTreeLayout';\nimport mxKeyHandler from '../mxgraph/handler/mxKeyHandler';\nimport mxClient from '../mxgraph/mxClient';\nimport mxOutline from '../mxgraph/view/mxOutline';\n\nclass OrgChart extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n zIndex: 1,\n position: 'relative',\n overflow: 'hidden',\n height: '50vh',\n background: 'transparent',\n borderStyle: 'solid',\n borderColor: 'lightgray',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Makes the shadow brighter\n mxConstants.SHADOWCOLOR = '#C0C0C0';\n\n // Workaround for Internet Explorer ignoring certain styles\n const container = document.createElement('div');\n container.style.position = 'absolute';\n container.style.overflow = 'hidden';\n container.style.left = '0px';\n container.style.top = '0px';\n container.style.right = '0px';\n container.style.bottom = '0px';\n\n const outline = document.getElementById('outlineContainer');\n\n mxEvent.disableContextMenu(container);\n\n // Sets a gradient background\n if (mxClient.IS_GC || mxClient.IS_SF) {\n container.style.background =\n '-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E7E7E7))';\n } else if (mxClient.IS_NS) {\n container.style.background =\n '-moz-linear-gradient(top, #FFFFFF, #E7E7E7)';\n }\n\n this.el.appendChild(container);\n\n // Creates the graph inside the given container\n const graph = new mxGraph(container);\n\n // Enables automatic sizing for vertices after editing and\n // panning by using the left mouse button.\n graph.setCellsMovable(false);\n graph.setAutoSizeCells(true);\n graph.setPanning(true);\n graph.centerZoom = false;\n graph.panningHandler.useLeftButtonForPanning = true;\n\n // Displays a popupmenu when the user clicks\n // on a cell (using the left mouse button) but\n // do not select the cell when the popup menu\n // is displayed\n graph.panningHandler.popupMenuHandler = false;\n\n // Creates the outline (navigator, overview) for moving\n // around the graph in the top, right corner of the window.\n const outln = new mxOutline(graph, outline);\n\n // Disables tooltips on touch devices\n graph.setTooltips(!mxClient.IS_TOUCH);\n\n // Set some stylesheet options for the visual appearance of vertices\n let style = graph.getStylesheet().getDefaultVertexStyle();\n style[mxConstants.STYLE_SHAPE] = 'label';\n\n style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;\n style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;\n style[mxConstants.STYLE_SPACING_LEFT] = 54;\n\n style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df';\n style[mxConstants.STYLE_STROKECOLOR] = '#5d65df';\n style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff';\n\n style[mxConstants.STYLE_FONTCOLOR] = '#1d258f';\n style[mxConstants.STYLE_FONTFAMILY] = 'Verdana';\n style[mxConstants.STYLE_FONTSIZE] = '12';\n style[mxConstants.STYLE_FONTSTYLE] = '1';\n\n style[mxConstants.STYLE_SHADOW] = '1';\n style[mxConstants.STYLE_ROUNDED] = '1';\n style[mxConstants.STYLE_GLASS] = '1';\n\n style[mxConstants.STYLE_IMAGE] = 'editors/images/dude3.png';\n style[mxConstants.STYLE_IMAGE_WIDTH] = '48';\n style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';\n style[mxConstants.STYLE_SPACING] = 8;\n\n // Sets the default style for edges\n style = graph.getStylesheet().getDefaultEdgeStyle();\n style[mxConstants.STYLE_ROUNDED] = true;\n style[mxConstants.STYLE_STROKEWIDTH] = 3;\n style[mxConstants.STYLE_EXIT_X] = 0.5; // center\n style[mxConstants.STYLE_EXIT_Y] = 1.0; // bottom\n style[mxConstants.STYLE_EXIT_PERIMETER] = 0; // disabled\n style[mxConstants.STYLE_ENTRY_X] = 0.5; // center\n style[mxConstants.STYLE_ENTRY_Y] = 0; // top\n style[mxConstants.STYLE_ENTRY_PERIMETER] = 0; // disabled\n\n // Disable the following for straight lines\n style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;\n\n // Stops editing on enter or escape keypress\n const keyHandler = new mxKeyHandler(graph);\n\n // Enables automatic layout on the graph and installs\n // a tree layout for all groups who's children are\n // being changed, added or removed.\n const layout = new mxCompactTreeLayout(graph, false);\n layout.useBoundingBox = false;\n layout.edgeRouting = false;\n layout.levelDistance = 60;\n layout.nodeDistance = 16;\n\n // Allows the layout to move cells even though cells\n // aren't movable in the graph\n layout.isVertexMovable = function(cell) {\n return true;\n };\n\n const layoutMgr = new mxLayoutManager(graph);\n\n layoutMgr.getLayout = function(cell) {\n if (cell.getChildCount() > 0) {\n return layout;\n }\n };\n\n // Installs a popupmenu handler using local function (see below).\n graph.popupMenuHandler.factoryMethod = function(menu, cell, evt) {\n return createPopupMenu(graph, menu, cell, evt);\n };\n\n // Fix for wrong preferred size\n const oldGetPreferredSizeForCell = graph.getPreferredSizeForCell;\n graph.getPreferredSizeForCell = function(cell) {\n const result = oldGetPreferredSizeForCell.apply(this, arguments);\n\n if (result != null) {\n result.width = Math.max(120, result.width - 40);\n }\n\n return result;\n };\n\n // Sets the maximum text scale to 1\n graph.cellRenderer.getTextScale = function(state) {\n return Math.min(1, state.view.scale);\n };\n\n // Dynamically adds text to the label as we zoom in\n // (without affecting the preferred size for new cells)\n graph.cellRenderer.getLabelValue = function(state) {\n let result = state.cell.value;\n\n if (state.view.graph.getModel().isVertex(state.cell)) {\n if (state.view.scale > 1) {\n result += '\\nDetails 1';\n }\n\n if (state.view.scale > 1.3) {\n result += '\\nDetails 2';\n }\n }\n\n return result;\n };\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds the root vertex of the tree\n graph.getModel().beginUpdate();\n try {\n const w = graph.container.offsetWidth;\n const v1 = graph.insertVertex(\n parent,\n 'treeRoot',\n 'Organization',\n w / 2 - 30,\n 20,\n 140,\n 60,\n 'image=editors/images/house.png'\n );\n graph.updateCellSize(v1);\n addOverlays(graph, v1, false);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n const content = document.createElement('div');\n content.style.padding = '4px';\n this.el2.appendChild(content);\n const tb = new mxToolbar(content);\n\n tb.addItem('Zoom In', 'images/zoom_in32.png', function(evt) {\n graph.zoomIn();\n });\n\n tb.addItem('Zoom Out', 'images/zoom_out32.png', function(evt) {\n graph.zoomOut();\n });\n\n tb.addItem('Actual Size', 'images/view_1_132.png', function(evt) {\n graph.zoomActual();\n });\n\n tb.addItem('Print', 'images/print32.png', function(evt) {\n const preview = new mxPrintPreview(graph, 1);\n preview.open();\n });\n\n tb.addItem('Poster Print', 'images/press32.png', function(evt) {\n const pageCount = mxUtils.prompt('Enter maximum page count', '1');\n\n if (pageCount != null) {\n const scale = mxUtils.getScaleForPageCount(pageCount, graph);\n const preview = new mxPrintPreview(graph, scale);\n preview.open();\n }\n });\n\n // Function to create the entries in the popupmenu\n function createPopupMenu(graph, menu, cell, evt) {\n const model = graph.getModel();\n\n if (cell != null) {\n if (model.isVertex(cell)) {\n menu.addItem(\n 'Add child',\n 'editors/images/overlays/check.png',\n function() {\n addChild(graph, cell);\n }\n );\n }\n\n menu.addItem('Edit label', 'editors/images/text.gif', function() {\n graph.startEditingAtCell(cell);\n });\n\n if (cell.id != 'treeRoot' && model.isVertex(cell)) {\n menu.addItem('Delete', 'editors/images/delete.gif', function() {\n deleteSubtree(graph, cell);\n });\n }\n\n menu.addSeparator();\n }\n\n menu.addItem('Fit', 'editors/images/zoom.gif', function() {\n graph.fit();\n });\n\n menu.addItem('Actual', 'editors/images/zoomactual.gif', function() {\n graph.zoomActual();\n });\n\n menu.addSeparator();\n\n menu.addItem('Print', 'editors/images/print.gif', function() {\n const preview = new mxPrintPreview(graph, 1);\n preview.open();\n });\n\n menu.addItem('Poster Print', 'editors/images/print.gif', function() {\n const pageCount = mxUtils.prompt('Enter maximum page count', '1');\n\n if (pageCount != null) {\n const scale = mxUtils.getScaleForPageCount(pageCount, graph);\n const preview = new mxPrintPreview(graph, scale);\n preview.open();\n }\n });\n }\n\n function addOverlays(graph, cell, addDeleteIcon) {\n let overlay = new mxCellOverlay(\n new mxImage('images/add.png', 24, 24),\n 'Add child'\n );\n overlay.cursor = 'hand';\n overlay.align = mxConstants.ALIGN_CENTER;\n overlay.addListener(\n mxEvent.CLICK,\n mxUtils.bind(this, function(sender, evt) {\n addChild(graph, cell);\n })\n );\n\n graph.addCellOverlay(cell, overlay);\n\n if (addDeleteIcon) {\n overlay = new mxCellOverlay(\n new mxImage('images/close.png', 30, 30),\n 'Delete'\n );\n overlay.cursor = 'hand';\n overlay.offset = new mxPoint(-4, 8);\n overlay.align = mxConstants.ALIGN_RIGHT;\n overlay.verticalAlign = mxConstants.ALIGN_TOP;\n overlay.addListener(\n mxEvent.CLICK,\n mxUtils.bind(this, function(sender, evt) {\n deleteSubtree(graph, cell);\n })\n );\n\n graph.addCellOverlay(cell, overlay);\n }\n }\n\n function addChild(graph, cell) {\n const model = graph.getModel();\n const parent = graph.getDefaultParent();\n let vertex;\n\n model.beginUpdate();\n try {\n vertex = graph.insertVertex(parent, null, 'Double click to set name');\n const geometry = model.getGeometry(vertex);\n\n // Updates the geometry of the vertex with the\n // preferred size computed in the graph\n const size = graph.getPreferredSizeForCell(vertex);\n geometry.width = size.width;\n geometry.height = size.height;\n\n // Adds the edge between the existing cell\n // and the new vertex and executes the\n // automatic layout on the parent\n const edge = graph.insertEdge(parent, null, '', cell, vertex);\n\n // Configures the edge label \"in-place\" to reside\n // at the end of the edge (x = 1) and with an offset\n // of 20 pixels in negative, vertical direction.\n edge.geometry.x = 1;\n edge.geometry.y = 0;\n edge.geometry.offset = new mxPoint(0, -20);\n\n addOverlays(graph, vertex, true);\n } finally {\n model.endUpdate();\n }\n\n return vertex;\n }\n\n function deleteSubtree(graph, cell) {\n // Gets the subtree from cell downwards\n const cells = [];\n graph.traverse(cell, true, function(vertex) {\n cells.push(vertex);\n\n return true;\n });\n\n graph.removeCells(cells);\n }\n }\n}\n\nexport default OrgChart;\n",
- "Visibility": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\n\nclass Visibility extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n let showOne = true;\n let showTwo = true;\n let showThree = true;\n\n // Overridden to implement dynamic conditions\n graph.isCellVisible = function(cell) {\n let result = mxGraph.prototype.isCellVisible.apply(this, arguments);\n\n if (result && cell.value != null) {\n result =\n (showOne && cell.value == '1') ||\n (showTwo && cell.value == '2') ||\n (showThree && cell.value == '3');\n }\n\n return result;\n };\n\n // Adds cells to the model in a single step\n let v1;\n graph.batchUpdate(() => {\n v1 = graph.insertVertex({\n parent,\n value: '1',\n position: [20, 20],\n size: [80, 30],\n });\n const v2 = graph.insertVertex({\n parent,\n value: '2',\n position: [200, 150],\n size: [80, 30],\n });\n const e1 = graph.insertEdge({\n parent,\n value: '3',\n source: v1,\n target: v2,\n });\n });\n\n // Dynamic conditions (requires refresh)\n this.el2.appendChild(\n mxUtils.button('Cond 1', function() {\n showOne = !showOne;\n graph.refresh();\n })\n );\n this.el2.appendChild(\n mxUtils.button('Cond 2', function() {\n showTwo = !showTwo;\n graph.refresh();\n })\n );\n this.el2.appendChild(\n mxUtils.button('Cond 3', function() {\n showThree = !showThree;\n graph.refresh();\n })\n );\n\n // Explicit show/hide\n this.el2.appendChild(\n mxUtils.button('Toggle cell', function() {\n graph.toggleCells(!graph.getModel().isVisible(v1), [v1], true);\n })\n );\n\n // Explicit remove/add\n let removed = null;\n\n this.el2.appendChild(\n mxUtils.button('Add/remove cell', function() {\n if (removed != null) {\n graph.addCells(removed);\n removed = null;\n } else {\n removed = graph.removeCells([v1]);\n }\n })\n );\n }\n}\n\nexport default Visibility;\n",
- "Shape": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxCylinder from '../mxgraph/shape/mxCylinder';\nimport mxCellRenderer from '../mxgraph/view/mxCellRenderer';\n\nclass Shape extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n }}\n />\n \n );\n }\n\n componentDidMount() {\n /*\n The example shape is a \"3D box\" that looks like this:\n ____\n / /|\n /___/ |\n | | /\n |___|/\n\n The code below defines the shape. The BoxShape function\n it the constructor which creates a new object instance.\n \n The next lines use an mxCylinder instance to augment the\n prototype of the shape (\"inheritance\") and reset the\n constructor to the topmost function of the c'tor chain.\n */\n\n class BoxShape extends mxCylinder {\n // Defines the extrusion of the box as a \"static class variable\"\n extrude = 10;\n\n /*\n Next, the mxCylinder's redrawPath method is \"overridden\".\n This method has a isForeground argument to separate two\n paths, one for the background (which must be closed and\n might be filled) and one for the foreground, which is\n just a stroke.\n\n Foreground: /\n _____/\n |\n |\n ____\n Background: / |\n / |\n | /\n |____/\n */\n redrawPath(path, x, y, w, h, isForeground) {\n const dy = this.extrude * this.scale;\n const dx = this.extrude * this.scale;\n\n if (isForeground) {\n path.moveTo(0, dy);\n path.lineTo(w - dx, dy);\n path.lineTo(w, 0);\n path.moveTo(w - dx, dy);\n path.lineTo(w - dx, h);\n } else {\n path.moveTo(0, dy);\n path.lineTo(dx, 0);\n path.lineTo(w, 0);\n path.lineTo(w, h - dy);\n path.lineTo(w - dx, h);\n path.lineTo(0, h);\n path.lineTo(0, dy);\n path.lineTo(dx, 0);\n path.close();\n }\n }\n }\n mxCellRenderer.registerShape('box', BoxShape);\n\n // Creates the graph inside the DOM node.\n const graph = new mxGraph(this.el);\n\n // Disables basic selection and cell handling\n graph.setEnabled(false);\n\n // Changes the default style for vertices \"in-place\"\n // to use the custom shape.\n const style = graph.getStylesheet().getDefaultVertexStyle();\n style[mxConstants.STYLE_SHAPE] = 'box';\n\n // Adds a spacing for the label that matches the\n // extrusion size\n style[mxConstants.STYLE_SPACING_TOP] = BoxShape.prototype.extrude;\n style[mxConstants.STYLE_SPACING_RIGHT] = BoxShape.prototype.extrude;\n\n // Adds a gradient and shadow to improve the user experience\n style[mxConstants.STYLE_GRADIENTCOLOR] = '#FFFFFF';\n style[mxConstants.STYLE_SHADOW] = true;\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Custom', 20, 20, 80, 60);\n const v2 = graph.insertVertex(parent, null, 'Shape', 200, 150, 80, 60);\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Shape;\n",
- "Images": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxRectangle from '../mxgraph/util/mxRectangle';\nimport mxImage from '../mxgraph/util/mxImage';\nimport mxPerimeter from '../mxgraph/view/mxPerimeter';\n\nclass Images extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '200px',\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Sets a background image and restricts child movement to its bounds\n graph.setBackgroundImage(\n new mxImage('images/gradient_background.jpg', 360, 200)\n );\n graph.maximumGraphBounds = new mxRectangle(0, 0, 360, 200);\n\n // Resizes the container but never make it bigger than the background\n graph.minimumContainerSize = new mxRectangle(0, 0, 360, 200);\n graph.setResizeContainer(true);\n\n // Disables basic selection and cell handling\n // graph.setEnabled(false);\n configureStylesheet(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n var v1 = graph.insertVertex(\n parent,\n null,\n 'First Line\\nSecond Line',\n 20,\n 10,\n 80,\n 100,\n 'bottom'\n );\n var v1 = graph.insertVertex(\n parent,\n null,\n 'First Line\\nSecond Line',\n 130,\n 10,\n 80,\n 100,\n 'top'\n );\n var v1 = graph.insertVertex(parent, null, '', 230, 10, 100, 100, 'image');\n var v2 = graph.insertVertex(\n parent,\n null,\n 'First Line\\nSecond Line',\n 20,\n 130,\n 140,\n 60,\n 'right'\n );\n var v2 = graph.insertVertex(\n parent,\n null,\n 'First Line\\nSecond Line',\n 180,\n 130,\n 140,\n 60,\n 'left'\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n function configureStylesheet(graph) {\n let style = {};\n style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;\n style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;\n style[mxConstants.STYLE_IMAGE] = 'images/icons48/keys.png';\n style[mxConstants.STYLE_FONTCOLOR] = '#FFFFFF';\n graph.getStylesheet().putCellStyle('image', style);\n\n style = mxUtils.clone(style);\n style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;\n style[mxConstants.STYLE_STROKECOLOR] = '#000000';\n style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;\n style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;\n style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER;\n style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;\n style[mxConstants.STYLE_IMAGE] = 'images/icons48/gear.png';\n style[mxConstants.STYLE_IMAGE_WIDTH] = '48';\n style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';\n style[mxConstants.STYLE_SPACING_TOP] = '56';\n style[mxConstants.STYLE_SPACING] = '8';\n graph.getStylesheet().putCellStyle('bottom', style);\n\n style = mxUtils.clone(style);\n style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;\n style[mxConstants.STYLE_IMAGE] = 'images/icons48/server.png';\n delete style[mxConstants.STYLE_SPACING_TOP];\n graph.getStylesheet().putCellStyle('top', style);\n\n style = mxUtils.clone(style);\n style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;\n style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_LEFT;\n style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;\n style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;\n style[mxConstants.STYLE_IMAGE] = 'images/icons48/earth.png';\n style[mxConstants.STYLE_SPACING_LEFT] = '55';\n style[mxConstants.STYLE_SPACING] = '4';\n graph.getStylesheet().putCellStyle('right', style);\n\n style = mxUtils.clone(style);\n style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_RIGHT;\n style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_RIGHT;\n delete style[mxConstants.STYLE_SPACING_LEFT];\n style[mxConstants.STYLE_SPACING_RIGHT] = '55';\n graph.getStylesheet().putCellStyle('left', style);\n }\n }\n}\n\nexport default Images;\n",
- "Stylesheet": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';\nimport mxPerimeter from '../mxgraph/view/mxPerimeter';\n\nclass Stylesheet extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '311px',\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the DOM node.\n const graph = new mxGraph(this.el);\n\n // Disables basic selection and cell handling\n graph.setEnabled(false);\n\n // Returns a special label for edges. Note: This does\n // a supercall to use the default implementation.\n graph.getLabel = function(cell) {\n const label = mxGraph.prototype.getLabel.apply(this, arguments);\n\n if (this.getModel().isEdge(cell)) {\n return `Transfer ${label}`;\n }\n return label;\n };\n\n // Installs a custom global tooltip\n graph.setTooltips(true);\n graph.getTooltip = function(state) {\n const { cell } = state;\n const model = this.getModel();\n\n if (model.isEdge(cell)) {\n const source = this.getLabel(model.getTerminal(cell, true));\n const target = this.getLabel(model.getTerminal(cell, false));\n\n return `${source} -> ${target}`;\n }\n return this.getLabel(cell);\n };\n\n // Creates the default style for vertices\n let style = [];\n style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;\n style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;\n style[mxConstants.STYLE_STROKECOLOR] = 'gray';\n style[mxConstants.STYLE_ROUNDED] = true;\n style[mxConstants.STYLE_FILLCOLOR] = '#EEEEEE';\n style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';\n style[mxConstants.STYLE_FONTCOLOR] = '#774400';\n style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;\n style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;\n style[mxConstants.STYLE_FONTSIZE] = '12';\n style[mxConstants.STYLE_FONTSTYLE] = 1;\n graph.getStylesheet().putDefaultVertexStyle(style);\n\n // Creates the default style for edges\n style = [];\n style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CONNECTOR;\n style[mxConstants.STYLE_STROKECOLOR] = '#6482B9';\n style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;\n style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;\n style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;\n style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;\n style[mxConstants.STYLE_FONTSIZE] = '10';\n graph.getStylesheet().putDefaultEdgeStyle(style);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(\n parent,\n null,\n 'Interval 1',\n 20,\n 20,\n 180,\n 30\n );\n const v2 = graph.insertVertex(\n parent,\n null,\n 'Interval 2',\n 140,\n 80,\n 280,\n 30\n );\n const v3 = graph.insertVertex(\n parent,\n null,\n 'Interval 3',\n 200,\n 140,\n 360,\n 30\n );\n const v4 = graph.insertVertex(\n parent,\n null,\n 'Interval 4',\n 480,\n 200,\n 120,\n 30\n );\n const v5 = graph.insertVertex(\n parent,\n null,\n 'Interval 5',\n 60,\n 260,\n 400,\n 30\n );\n const e1 = graph.insertEdge(parent, null, '1', v1, v2);\n e1.getGeometry().points = [{ x: 160, y: 60 }];\n const e2 = graph.insertEdge(parent, null, '2', v1, v5);\n e2.getGeometry().points = [{ x: 80, y: 60 }];\n const e3 = graph.insertEdge(parent, null, '3', v2, v3);\n e3.getGeometry().points = [{ x: 280, y: 120 }];\n const e4 = graph.insertEdge(parent, null, '4', v3, v4);\n e4.getGeometry().points = [{ x: 500, y: 180 }];\n const e5 = graph.insertEdge(parent, null, '5', v3, v5);\n e5.getGeometry().points = [{ x: 380, y: 180 }];\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Stylesheet;\n",
- "ExtendCanvas": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxRectangle from '../mxgraph/util/mxRectangle';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxPoint from '../mxgraph/util/mxPoint';\n\nclass ExtendCanvas extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'auto',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n };\n\n componentDidMount() {\n // Disables the built-in context menu\n mxEvent.disableContextMenu(this.el);\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.panningHandler.ignoreCell = true;\n graph.setPanning(true);\n\n /**\n * Specifies the size of the size for \"tiles\" to be used for a graph with\n * scrollbars but no visible background page. A good value is large\n * enough to reduce the number of repaints that is caused for auto-\n * translation, which depends on this value, and small enough to give\n * a small empty buffer around the graph. Default is 400x400.\n */\n graph.scrollTileSize = new mxRectangle(0, 0, 400, 400);\n\n /**\n * Returns the padding for pages in page view with scrollbars.\n */\n graph.getPagePadding = function() {\n return new mxPoint(\n Math.max(0, Math.round(graph.container.offsetWidth - 34)),\n Math.max(0, Math.round(graph.container.offsetHeight - 34))\n );\n };\n\n /**\n * Returns the size of the page format scaled with the page size.\n */\n graph.getPageSize = function() {\n return this.pageVisible\n ? new mxRectangle(\n 0,\n 0,\n this.pageFormat.width * this.pageScale,\n this.pageFormat.height * this.pageScale\n )\n : this.scrollTileSize;\n };\n\n /**\n * Returns a rectangle describing the position and count of the\n * background pages, where x and y are the position of the top,\n * left page and width and height are the vertical and horizontal\n * page count.\n */\n graph.getPageLayout = function() {\n const size = this.pageVisible ? this.getPageSize() : this.scrollTileSize;\n const bounds = this.getGraphBounds();\n\n if (bounds.width === 0 || bounds.height === 0) {\n return new mxRectangle(0, 0, 1, 1);\n }\n\n // Computes untransformed graph bounds\n const x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x);\n const y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y);\n const w = Math.floor(bounds.width / this.view.scale);\n const h = Math.floor(bounds.height / this.view.scale);\n\n const x0 = Math.floor(x / size.width);\n const y0 = Math.floor(y / size.height);\n const w0 = Math.ceil((x + w) / size.width) - x0;\n const h0 = Math.ceil((y + h) / size.height) - y0;\n\n return new mxRectangle(x0, y0, w0, h0);\n };\n\n // Fits the number of background pages to the graph\n graph.view.getBackgroundPageBounds = function() {\n const layout = this.graph.getPageLayout();\n const page = this.graph.getPageSize();\n\n return new mxRectangle(\n this.scale * (this.translate.x + layout.x * page.width),\n this.scale * (this.translate.y + layout.y * page.height),\n this.scale * layout.width * page.width,\n this.scale * layout.height * page.height\n );\n };\n\n graph.getPreferredPageSize = function(bounds, width, height) {\n const pages = this.getPageLayout();\n const size = this.getPageSize();\n\n return new mxRectangle(\n 0,\n 0,\n pages.width * size.width,\n pages.height * size.height\n );\n };\n\n /**\n * Guesses autoTranslate to avoid another repaint (see below).\n * Works if only the scale of the graph changes or if pages\n * are visible and the visible pages do not change.\n */\n const graphViewValidate = graph.view.validate;\n graph.view.validate = function() {\n if (\n this.graph.container != null &&\n mxUtils.hasScrollbars(this.graph.container)\n ) {\n const pad = this.graph.getPagePadding();\n const size = this.graph.getPageSize();\n\n // Updating scrollbars here causes flickering in quirks and is not needed\n // if zoom method is always used to set the current scale on the graph.\n const tx = this.translate.x;\n const ty = this.translate.y;\n this.translate.x = pad.x / this.scale - (this.x0 || 0) * size.width;\n this.translate.y = pad.y / this.scale - (this.y0 || 0) * size.height;\n }\n\n graphViewValidate.apply(this, arguments);\n };\n\n const graphSizeDidChange = graph.sizeDidChange;\n graph.sizeDidChange = function() {\n if (this.container != null && mxUtils.hasScrollbars(this.container)) {\n const pages = this.getPageLayout();\n const pad = this.getPagePadding();\n const size = this.getPageSize();\n\n // Updates the minimum graph size\n const minw = Math.ceil(\n (2 * pad.x) / this.view.scale + pages.width * size.width\n );\n const minh = Math.ceil(\n (2 * pad.y) / this.view.scale + pages.height * size.height\n );\n\n const min = graph.minimumGraphSize;\n\n // LATER: Fix flicker of scrollbar size in IE quirks mode\n // after delayed call in window.resize event handler\n if (min == null || min.width !== minw || min.height !== minh) {\n graph.minimumGraphSize = new mxRectangle(0, 0, minw, minh);\n }\n\n // Updates auto-translate to include padding and graph size\n const dx = pad.x / this.view.scale - pages.x * size.width;\n const dy = pad.y / this.view.scale - pages.y * size.height;\n\n if (\n !this.autoTranslate &&\n (this.view.translate.x !== dx || this.view.translate.y !== dy)\n ) {\n this.autoTranslate = true;\n this.view.x0 = pages.x;\n this.view.y0 = pages.y;\n\n // NOTE: THIS INVOKES THIS METHOD AGAIN. UNFORTUNATELY THERE IS NO WAY AROUND THIS SINCE THE\n // BOUNDS ARE KNOWN AFTER THE VALIDATION AND SETTING THE TRANSLATE TRIGGERS A REVALIDATION.\n // SHOULD MOVE TRANSLATE/SCALE TO VIEW.\n const tx = graph.view.translate.x;\n const ty = graph.view.translate.y;\n\n graph.view.setTranslate(dx, dy);\n graph.container.scrollLeft += (dx - tx) * graph.view.scale;\n graph.container.scrollTop += (dy - ty) * graph.view.scale;\n\n this.autoTranslate = false;\n return;\n }\n\n graphSizeDidChange.apply(this, arguments);\n }\n };\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);\n const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n // Sets initial scrollbar positions\n window.setTimeout(function() {\n const bounds = graph.getGraphBounds();\n const width = Math.max(\n bounds.width,\n graph.scrollTileSize.width * graph.view.scale\n );\n const height = Math.max(\n bounds.height,\n graph.scrollTileSize.height * graph.view.scale\n );\n graph.container.scrollTop = Math.floor(\n Math.max(\n 0,\n bounds.y - Math.max(20, (graph.container.clientHeight - height) / 4)\n )\n );\n graph.container.scrollLeft = Math.floor(\n Math.max(\n 0,\n bounds.x - Math.max(0, (graph.container.clientWidth - width) / 2)\n )\n );\n }, 0);\n };\n}\n\nexport default ExtendCanvas;\n",
- "DynamicLoading": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxText from '../mxgraph/shape/mxText';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxCodec from '../mxgraph/io/mxCodec';\nimport mxEffects from '../mxgraph/util/mxEffects';\nimport mxPerimeter from '../mxgraph/view/mxPerimeter';\n\nclass DynamicLoading extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'visible',\n position: 'absolute',\n height: '100%',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n };\n\n componentDidMount() {\n let requestId = 0;\n\n // Speedup the animation\n mxText.prototype.enableBoundingBox = false;\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Disables all built-in interactions\n graph.setEnabled(false);\n\n // Handles clicks on cells\n graph.addListener(mxEvent.CLICK, function(sender, evt) {\n const cell = evt.getProperty('cell');\n\n if (cell != null) {\n load(graph, cell);\n }\n });\n\n // Changes the default vertex style in-place\n const style = graph.getStylesheet().getDefaultVertexStyle();\n style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;\n style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;\n style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n const cx = graph.container.clientWidth / 2;\n const cy = graph.container.clientHeight / 2;\n\n const cell = graph.insertVertex(\n parent,\n '0-0',\n '0-0',\n cx - 20,\n cy - 15,\n 60,\n 40\n );\n\n // Animates the changes in the graph model\n graph.getModel().addListener(mxEvent.CHANGE, function(sender, evt) {\n const { changes } = evt.getProperty('edit');\n mxEffects.animateChanges(graph, changes);\n });\n\n // Loads the links for the given cell into the given graph\n // by requesting the respective data in the server-side\n // (implemented for this demo using the server-function)\n function load(graph, cell) {\n if (graph.getModel().isVertex(cell)) {\n const cx = graph.container.clientWidth / 2;\n const cy = graph.container.clientHeight / 2;\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const xml = server(cell.id);\n const doc = mxUtils.parseXml(xml);\n const dec = new mxCodec(doc);\n const model = dec.decode(doc.documentElement);\n\n // Removes all cells which are not in the response\n for (var key in graph.getModel().cells) {\n const tmp = graph.getModel().getCell(key);\n\n if (tmp != cell && graph.getModel().isVertex(tmp)) {\n graph.removeCells([tmp]);\n }\n }\n\n // Merges the response model with the client model\n graph.getModel().mergeChildren(model.getRoot().getChildAt(0), parent);\n\n // Moves the given cell to the center\n let geo = graph.getModel().getGeometry(cell);\n\n if (geo != null) {\n geo = geo.clone();\n geo.x = cx - geo.width / 2;\n geo.y = cy - geo.height / 2;\n\n graph.getModel().setGeometry(cell, geo);\n }\n\n // Creates a list of the new vertices, if there is more\n // than the center vertex which might have existed\n // previously, then this needs to be changed to analyze\n // the target model before calling mergeChildren above\n const vertices = [];\n\n for (var key in graph.getModel().cells) {\n const tmp = graph.getModel().getCell(key);\n\n if (tmp != cell && model.isVertex(tmp)) {\n vertices.push(tmp);\n\n // Changes the initial location \"in-place\"\n // to get a nice animation effect from the\n // center to the radius of the circle\n const geo = model.getGeometry(tmp);\n\n if (geo != null) {\n geo.x = cx - geo.width / 2;\n geo.y = cy - geo.height / 2;\n }\n }\n }\n\n // Arranges the response in a circle\n const cellCount = vertices.length;\n const phi = (2 * Math.PI) / cellCount;\n const r = Math.min(\n graph.container.clientWidth / 4,\n graph.container.clientHeight / 4\n );\n\n for (let i = 0; i < cellCount; i++) {\n let geo = graph.getModel().getGeometry(vertices[i]);\n\n if (geo != null) {\n geo = geo.clone();\n geo.x += r * Math.sin(i * phi);\n geo.y += r * Math.cos(i * phi);\n\n graph.getModel().setGeometry(vertices[i], geo);\n }\n }\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n }\n\n // Simulates the existence of a server that can crawl the\n // big graph with a certain depth and create a graph model\n // for the traversed cells, which is then sent to the client\n function server(cellId) {\n // Increments the request ID as a prefix for the cell IDs\n requestId++;\n\n // Creates a local graph with no display\n const graph = new mxGraph();\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v0 = graph.insertVertex(parent, cellId, 'Dummy', 0, 0, 60, 40);\n const cellCount = parseInt(Math.random() * 16) + 4;\n\n // Creates the random links and cells for the response\n for (let i = 0; i < cellCount; i++) {\n const id = `${requestId}-${i}`;\n const v = graph.insertVertex(parent, id, id, 0, 0, 60, 40);\n const e = graph.insertEdge(parent, null, `Link ${i}`, v0, v);\n }\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n const enc = new mxCodec();\n const node = enc.encode(graph.getModel());\n\n return mxUtils.getXml(node);\n }\n\n load(graph, cell);\n };\n}\n\nexport default DynamicLoading;\n",
- "AutoLayout": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxClient from '../mxgraph/mxClient';\nimport mxMorphing from '../mxgraph/util/mxMorphing';\nimport mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';\nimport mxHierarchicalLayout from '../mxgraph/layout/hierarchical/mxHierarchicalLayout';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxCellOverlay from '../mxgraph/view/mxCellOverlay';\nimport mxImage from '../mxgraph/util/mxImage';\nimport mxEventObject from '../mxgraph/util/mxEventObject';\nimport mxCellRenderer from '../mxgraph/view/mxCellRenderer';\n\nclass AutoLayout extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '641px',\n background: 'url(\"editors/images/grid.gif\")',\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n mxEvent.disableContextMenu(this.el);\n\n class MyCustomCellRenderer extends mxCellRenderer {\n installCellOverlayListeners(state, overlay, shape) {\n super.installCellOverlayListeners(state, overlay, shape);\n\n mxEvent.addListener(\n shape.node,\n mxClient.IS_POINTER ? 'pointerdown' : 'mousedown',\n evt => {\n overlay.fireEvent(\n new mxEventObject('pointerdown', 'event', evt, 'state', state)\n );\n }\n );\n\n if (!mxClient.IS_POINTER && mxClient.IS_TOUCH) {\n mxEvent.addListener(shape.node, 'touchstart', evt => {\n overlay.fireEvent(\n new mxEventObject('pointerdown', 'event', evt, 'state', state)\n );\n });\n }\n }\n }\n\n class MyCustomEdgeHandler extends mxEdgeHandler {\n connect(edge, terminal, isSource, isClone, me) {\n super.connect(edge, terminal, isSource, isClone, me);\n executeLayout();\n }\n }\n\n class MyCustomGraph extends mxGraph {\n createEdgeHandler(state, edgeStyle) {\n return new MyCustomEdgeHandler(state, edgeStyle);\n }\n\n createCellRenderer() {\n return new MyCustomCellRenderer();\n }\n }\n\n // Creates the graph inside the given this.el\n const graph = new MyCustomGraph(this.el);\n graph.setPanning(true);\n graph.panningHandler.useLeftButtonForPanning = true;\n graph.setAllowDanglingEdges(false);\n graph.connectionHandler.select = false;\n graph.view.setTranslate(20, 20);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n const layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);\n const executeLayout = (change, post) => {\n graph.getModel().beginUpdate();\n try {\n if (change != null) {\n change();\n }\n layout.execute(graph.getDefaultParent(), v1);\n } catch (e) {\n throw e;\n } finally {\n // New API for animating graph layout results asynchronously\n const morph = new mxMorphing(graph);\n morph.addListener(mxEvent.DONE, () => {\n graph.getModel().endUpdate();\n if (post != null) {\n post();\n }\n });\n morph.startAnimation();\n }\n };\n\n const addOverlay = cell => {\n // Creates a new overlay with an image and a tooltip\n const overlay = new mxCellOverlay(\n new mxImage('images/add.png', 24, 24),\n 'Add outgoing'\n );\n overlay.cursor = 'hand';\n\n // Installs a handler for clicks on the overlay\n overlay.addListener(mxEvent.CLICK, (sender, evt2) => {\n graph.clearSelection();\n const geo = graph.getCellGeometry(cell);\n\n let v2;\n\n executeLayout(\n () => {\n v2 = graph.insertVertex({\n parent,\n value: 'World!',\n position: [geo.x, geo.y],\n size: [80, 30],\n });\n addOverlay(v2);\n graph.view.refresh(v2);\n const e1 = graph.insertEdge({\n parent,\n source: cell,\n target: v2,\n });\n },\n () => {\n graph.scrollCellToVisible(v2);\n }\n );\n });\n\n // Special CMS event\n overlay.addListener('pointerdown', (sender, eo) => {\n const evt2 = eo.getProperty('event');\n const state = eo.getProperty('state');\n\n graph.popupMenuHandler.hideMenu();\n graph.stopEditing(false);\n\n const pt = mxUtils.convertPoint(\n graph.container,\n mxEvent.getClientX(evt2),\n mxEvent.getClientY(evt2)\n );\n graph.connectionHandler.start(state, pt.x, pt.y);\n graph.isMouseDown = true;\n graph.isMouseTrigger = mxEvent.isMouseEvent(evt2);\n mxEvent.consume(evt2);\n });\n\n // Sets the overlay for the cell in the graph\n graph.addCellOverlay(cell, overlay);\n };\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n let v1;\n try {\n v1 = graph.insertVertex({\n parent,\n value: 'Hello,',\n position: [0, 0],\n size: [80, 30],\n });\n addOverlay(v1);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n graph.resizeCell = function() {\n mxGraph.prototype.resizeCell.apply(this, arguments);\n executeLayout();\n };\n\n graph.connectionHandler.addListener(mxEvent.CONNECT, function() {\n executeLayout();\n });\n }\n}\n\nexport default AutoLayout;\n",
- "FixedIcon": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxLabel from '../mxgraph/shape/mxLabel';\nimport mxRectangle from '../mxgraph/util/mxRectangle';\n\nclass FixedIcon extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n };\n\n componentDidMount() {\n // Overrides the image bounds code to change the position\n mxLabel.prototype.getImageBounds = function(x, y, w, h) {\n const iw = mxUtils.getValue(\n this.style,\n mxConstants.STYLE_IMAGE_WIDTH,\n mxConstants.DEFAULT_IMAGESIZE\n );\n const ih = mxUtils.getValue(\n this.style,\n mxConstants.STYLE_IMAGE_HEIGHT,\n mxConstants.DEFAULT_IMAGESIZE\n );\n\n // Places the icon\n const ix = (w - iw) / 2;\n const iy = h - ih;\n\n return new mxRectangle(x + ix, y + iy, iw, ih);\n };\n\n // Makes the shadow brighter\n mxConstants.SHADOWCOLOR = '#C0C0C0';\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Uncomment the following if you want the container\n // to fit the size of the graph\n // graph.setResizeContainer(true);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(\n parent,\n null,\n 'Fixed icon',\n 20,\n 20,\n 80,\n 50,\n 'shape=label;image=images/plus.png;imageWidth=16;imageHeight=16;spacingBottom=10;' +\n 'fillColor=#adc5ff;gradientColor=#7d85df;glass=1;rounded=1;shadow=1;'\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n };\n}\n\nexport default FixedIcon;\n",
- "_app": "import '../styles/globals.css';\nimport '../public/css/common.css';\nimport './Animation.css';\n\nfunction MyApp({ Component, pageProps }) {\n return {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '601px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Enables guides\n mxGraphHandler.prototype.guidesEnabled = true;\n\n // Alt disables guides\n mxGraphHandler.prototype.useGuidesForEvent = function(me) {\n return !mxEvent.isAltDown(me.getEvent());\n };\n\n // Defines the guides to be red (default)\n mxConstants.GUIDE_COLOR = '#FF0000';\n\n // Defines the guides to be 1 pixel (default)\n mxConstants.GUIDE_STROKEWIDTH = 1;\n\n // Enables snapping waypoints to terminals\n mxEdgeHandler.prototype.snapToTerminals = true;\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.setConnectable(true);\n graph.gridSize = 30;\n\n // Changes the default style for edges \"in-place\" and assigns\n // an alternate edge style which is applied in mxGraph.flip\n // when the user double clicks on the adjustment control point\n // of the edge. The ElbowConnector edge style switches to TopToBottom\n // if the horizontal style is true.\n const style = graph.getStylesheet().getDefaultEdgeStyle();\n style[mxConstants.STYLE_ROUNDED] = true;\n style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;\n graph.alternateEdgeStyle = 'elbow=vertical';\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n let v1;\n try {\n v1 = graph.insertVertex(parent, null, 'Hello,', 20, 40, 80, 70);\n const v2 = graph.insertVertex(parent, null, 'World!', 200, 140, 80, 40);\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n // Handles cursor keys\n const nudge = function(keyCode) {\n if (!graph.isSelectionEmpty()) {\n let dx = 0;\n let dy = 0;\n\n if (keyCode === 37) {\n dx = -1;\n } else if (keyCode === 38) {\n dy = -1;\n } else if (keyCode === 39) {\n dx = 1;\n } else if (keyCode === 40) {\n dy = 1;\n }\n\n graph.moveCells(graph.getSelectionCells(), dx, dy);\n }\n\n // Transfer initial focus to graph container for keystroke handling\n graph.container.focus();\n\n // Handles keystroke events\n const keyHandler = new mxKeyHandler(graph);\n\n // Ignores enter keystroke. Remove this line if you want the\n // enter keystroke to stop editing\n keyHandler.enter = function() {};\n\n keyHandler.bindKey(37, function() {\n nudge(37);\n });\n\n keyHandler.bindKey(38, function() {\n nudge(38);\n });\n\n keyHandler.bindKey(39, function() {\n nudge(39);\n });\n\n keyHandler.bindKey(40, function() {\n nudge(40);\n });\n };\n }\n}\n\nexport default Guides;\n",
- "DragSource": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxCell from '../mxgraph/model/mxCell';\nimport mxGeometry from '../mxgraph/model/mxGeometry';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxDragSource from '../mxgraph/util/mxDragSource';\nimport mxGraphHandler from '../mxgraph/handler/mxGraphHandler';\nimport mxGuide from '../mxgraph/util/mxGuide';\nimport mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';\n\nclass DragSource extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{}}\n />\n \n );\n };\n\n componentDidMount() {\n class MyCustomGuide extends mxGuide {\n isEnabledForEvent(evt) {\n // Alt disables guides\n return !mxEvent.isAltDown(evt);\n }\n }\n\n class MyCustomGraphHandler extends mxGraphHandler {\n // Enables guides\n guidesEnabled = true;\n\n createGuide() {\n return new MyCustomGuide(this.graph, this.getGuideStates());\n }\n }\n\n class MyCustomEdgeHandler extends mxEdgeHandler {\n // Enables snapping waypoints to terminals\n snapToTerminals = true;\n }\n\n class MyCustomGraph extends mxGraph {\n createGraphHandler() {\n return new MyCustomGraphHandler(this);\n }\n\n createEdgeHandler(state, edgeStyle) {\n return new MyCustomEdgeHandler(state, edgeStyle);\n }\n }\n\n const graphs = [];\n\n // Creates the graph inside the given container\n for (let i = 0; i < 2; i++) {\n const container = document.createElement('div');\n container.style.overflow = 'hidden';\n container.style.position = 'relative';\n container.style.width = '321px';\n container.style.height = '241px';\n container.style.background = \"url('editors/images/grid.gif')\";\n container.style.cursor = 'default';\n\n this.el.appendChild(container);\n\n const graph = new MyCustomGraph(container);\n graph.gridSize = 30;\n\n // Uncomment the following if you want the container\n // to fit the size of the graph\n // graph.setResizeContainer(true);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex({\n parent,\n value: 'Hello,',\n position: [20, 20],\n size: [80, 30],\n });\n const v2 = graph.insertVertex({\n parent,\n value: 'World!',\n position: [200, 150],\n size: [80, 30],\n });\n const e1 = graph.insertEdge({\n parent,\n source: v1,\n target: v2,\n });\n });\n\n graphs.push(graph);\n }\n\n // Returns the graph under the mouse\n const graphF = evt => {\n const x = mxEvent.getClientX(evt);\n const y = mxEvent.getClientY(evt);\n const elt = document.elementFromPoint(x, y);\n\n for (const graph of graphs) {\n if (mxUtils.isAncestorNode(graph.container, elt)) {\n return graph;\n }\n }\n\n return null;\n };\n\n // Inserts a cell at the given location\n const funct = (graph, evt, target, x, y) => {\n const cell = new mxCell('Test', new mxGeometry(0, 0, 120, 40));\n cell.vertex = true;\n const cells = graph.importCells([cell], x, y, target);\n\n if (cells != null && cells.length > 0) {\n graph.scrollCellToVisible(cells[0]);\n graph.setSelectionCells(cells);\n }\n };\n\n // Creates a DOM node that acts as the drag source\n const img = mxUtils.createImage('images/icons48/gear.png');\n img.style.width = '48px';\n img.style.height = '48px';\n this.el.appendChild(img);\n\n // Creates the element that is being for the actual preview.\n const dragElt = document.createElement('div');\n dragElt.style.border = 'dashed black 1px';\n dragElt.style.width = '120px';\n dragElt.style.height = '40px';\n\n // Drag source is configured to use dragElt for preview and as drag icon\n // if scalePreview (last) argument is true. Dx and dy are null to force\n // the use of the defaults. Note that dx and dy are only used for the\n // drag icon but not for the preview.\n const ds = mxUtils.makeDraggable(\n img,\n graphF,\n funct,\n dragElt,\n null,\n null,\n graphs[0].autoscroll,\n true\n );\n\n // Redirects feature to global switch. Note that this feature should only be used\n // if the the x and y arguments are used in funct to insert the cell.\n ds.isGuidesEnabled = () => {\n return graphs[0].graphHandler.guidesEnabled;\n };\n\n // Restores original drag icon while outside of graph\n ds.createDragElement = mxDragSource.prototype.createDragElement;\n };\n\n // NOTE: To enable cross-document DnD (eg. between frames),\n // the following methods need to be overridden:\n /* mxDragSourceMouseUp = mxDragSource.prototype.mouseUp;\nmxDragSource.prototype.mouseUp = function(evt)\n{\n let doc = this.element.ownerDocument;\n\n if (doc != document)\n {\n let mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup';\n\n if (this.mouseUpHandler != null)\n {\n mxEvent.removeListener(doc, mu, this.mouseUpHandler);\n }\n }\n\n mxDragSourceMouseUp.apply(this, arguments);\n}; */\n\n /* mxDragSourceMouseDown = mxDragSource.prototype.mouseDown;\nmxDragSource.prototype.mouseDown = function(evt)\n{\n if (this.enabled && !mxEvent.isConsumed(evt))\n {\n mxDragSourceMouseDown.apply(this, arguments);\n let doc = this.element.ownerDocument;\n\n if (doc != document)\n {\n let mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup';\n mxEvent.addListener(doc, mu, this.mouseUpHandler);\n }\n }\n}; */\n}\n\nexport default DragSource;\n",
- "Orthogonal": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxGraphHandler from '../mxgraph/handler/mxGraphHandler';\nimport mxGuide from '../mxgraph/util/mxGuide';\nimport mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';\nimport mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';\nimport mxGraphView from '../mxgraph/view/mxGraphView';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxCellState from '../mxgraph/view/mxCellState';\n\nclass Orthogonal extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Enables guides\n mxGraphHandler.prototype.guidesEnabled = true;\n\n // Alt disables guides\n mxGuide.prototype.isEnabledForEvent = function(evt) {\n return !mxEvent.isAltDown(evt);\n };\n\n // Enables snapping waypoints to terminals\n mxEdgeHandler.prototype.snapToTerminals = true;\n\n // Enables orthogonal connect preview in IE\n mxConnectionHandler.prototype.movePreviewAway = false;\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.disconnectOnMove = false;\n graph.foldingEnabled = false;\n graph.cellsResizable = false;\n graph.extendParents = false;\n graph.setConnectable(true);\n\n // Implements perimeter-less connection points as fixed points (computed before the edge style).\n graph.view.updateFixedTerminalPoint = function(\n edge,\n terminal,\n source,\n constraint\n ) {\n mxGraphView.prototype.updateFixedTerminalPoint.apply(this, arguments);\n\n const pts = edge.absolutePoints;\n const pt = pts[source ? 0 : pts.length - 1];\n\n if (\n terminal != null &&\n pt == null &&\n this.getPerimeterFunction(terminal) == null\n ) {\n edge.setAbsoluteTerminalPoint(\n new mxPoint(\n this.getRoutingCenterX(terminal),\n this.getRoutingCenterY(terminal)\n ),\n source\n );\n }\n };\n\n // Changes the default edge style\n graph.getStylesheet().getDefaultEdgeStyle().edgeStyle =\n 'orthogonalEdgeStyle';\n delete graph.getStylesheet().getDefaultEdgeStyle().endArrow;\n\n // Implements the connect preview\n graph.connectionHandler.createEdgeState = function(me) {\n const edge = graph.createEdge(null, null, null, null, null);\n\n return new mxCellState(\n this.graph.view,\n edge,\n this.graph.getCellStyle(edge)\n );\n };\n\n // Uncomment the following if you want the container\n // to fit the size of the graph\n // graph.setResizeContainer(true);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, '', 40, 40, 40, 30);\n v1.setConnectable(false);\n const v11 = graph.insertVertex(\n v1,\n null,\n '',\n 0.5,\n 0,\n 10,\n 40,\n 'portConstraint=northsouth;',\n true\n );\n v11.geometry.offset = new mxPoint(-5, -5);\n const v12 = graph.insertVertex(\n v1,\n null,\n '',\n 0,\n 0.5,\n 10,\n 10,\n 'portConstraint=west;shape=triangle;direction=west;perimeter=none;' +\n 'routingCenterX=-0.5;routingCenterY=0;',\n true\n );\n v12.geometry.offset = new mxPoint(-10, -5);\n const v13 = graph.insertVertex(\n v1,\n null,\n '',\n 1,\n 0.5,\n 10,\n 10,\n 'portConstraint=east;shape=triangle;direction=east;perimeter=none;' +\n 'routingCenterX=0.5;routingCenterY=0;',\n true\n );\n v13.geometry.offset = new mxPoint(0, -5);\n\n const v2 = graph.addCell(graph.getModel().cloneCell(v1));\n v2.geometry.x = 200;\n v2.geometry.y = 60;\n\n const v3 = graph.addCell(graph.getModel().cloneCell(v1));\n v3.geometry.x = 40;\n v3.geometry.y = 150;\n\n const v4 = graph.addCell(graph.getModel().cloneCell(v1));\n v4.geometry.x = 200;\n v4.geometry.y = 170;\n\n graph.insertEdge(parent, null, '', v1.getChildAt(2), v2.getChildAt(1));\n graph.insertEdge(parent, null, '', v2.getChildAt(2), v3.getChildAt(1));\n graph.insertEdge(parent, null, '', v3.getChildAt(2), v4.getChildAt(1));\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Orthogonal;\n"
-}
\ No newline at end of file
diff --git a/src/pages/icons_images/ContextIcons.js b/src/pages/icons_images/ContextIcons.js
deleted file mode 100644
index 01c9ba2d1..000000000
--- a/src/pages/icons_images/ContextIcons.js
+++ /dev/null
@@ -1,210 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxVertexHandler from '../../mxgraph/handler/mxVertexHandler';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxClient from '../../mxgraph/mxClient';
-
-class ContextIcons extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Clipboard
- This example demonstrates using the clipboard for providing cross-tab - and cross-browser copy and paste. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
- );
- };
-
- componentDidMount() {
- // Disables the built-in context menu
- mxEvent.disableContextMenu(this.el);
-
- // Creates the graph inside the given this.el
- const graph = new mxGraph(this.el);
-
- // Public helper method for shared clipboard.
- mxClipboard.cellsToString = function(cells) {
- const codec = new mxCodec();
- const model = new mxGraphModel();
- const parent = model.getRoot().getChildAt(0);
-
- for (let i = 0; i < cells.length; i++) {
- model.add(parent, cells[i]);
- }
-
- return mxUtils.getXml(codec.encode(model));
- };
-
- // Focused but invisible textarea during control or meta key events
- const textInput = document.createElement('textarea');
- mxUtils.setOpacity(textInput, 0);
- textInput.style.width = '1px';
- textInput.style.height = '1px';
- let restoreFocus = false;
- const gs = graph.gridSize;
- let lastPaste = null;
- let dx = 0;
- let dy = 0;
-
- // Workaround for no copy event in IE/FF if empty
- textInput.value = ' ';
-
- // Shows a textare when control/cmd is pressed to handle native clipboard actions
- mxEvent.addListener(document, 'keydown', function(evt) {
- // No dialog visible
- const source = mxEvent.getSource(evt);
-
- if (
- graph.isEnabled() &&
- !graph.isMouseDown &&
- !graph.isEditing() &&
- source.nodeName !== 'INPUT'
- ) {
- if (
- evt.keyCode === 224 /* FF */ ||
- (!mxClient.IS_MAC && evt.keyCode === 17) /* Control */ ||
- (mxClient.IS_MAC &&
- (evt.keyCode === 91 || evt.keyCode === 93)) /* Left/Right Meta */
- ) {
- // Cannot use parentNode for check in IE
- if (!restoreFocus) {
- // Avoid autoscroll but allow handling of events
- textInput.style.position = 'absolute';
- textInput.style.left = `${graph.container.scrollLeft + 10}px`;
- textInput.style.top = `${graph.container.scrollTop + 10}px`;
- graph.container.appendChild(textInput);
-
- restoreFocus = true;
- textInput.focus();
- textInput.select();
- }
- }
- }
- });
-
- // Restores focus on graph this.el and removes text input from DOM
- mxEvent.addListener(document, 'keyup', function(evt) {
- if (
- restoreFocus &&
- (evt.keyCode === 224 /* FF */ ||
- evt.keyCode === 17 /* Control */ ||
- evt.keyCode === 91 ||
- evt.keyCode === 93) /* Meta */
- ) {
- restoreFocus = false;
-
- if (!graph.isEditing()) {
- graph.container.focus();
- }
-
- textInput.parentNode.removeChild(textInput);
- }
- });
-
- // Inserts the XML for the given cells into the text input for copy
- const copyCells = function(graph, cells) {
- if (cells.length > 0) {
- const clones = graph.cloneCells(cells);
-
- // Checks for orphaned relative children and makes absolute
- for (let i = 0; i < clones.length; i++) {
- const state = graph.view.getState(cells[i]);
-
- if (state != null) {
- const geo = graph.getCellGeometry(clones[i]);
-
- if (geo != null && geo.relative) {
- geo.relative = false;
- geo.x = state.x / state.view.scale - state.view.translate.x;
- geo.y = state.y / state.view.scale - state.view.translate.y;
- }
- }
- }
-
- textInput.value = mxClipboard.cellsToString(clones);
- }
-
- textInput.select();
- lastPaste = textInput.value;
- };
-
- // Handles copy event by putting XML for current selection into text input
- mxEvent.addListener(
- textInput,
- 'copy',
- mxUtils.bind(this, function(evt) {
- if (graph.isEnabled() && !graph.isSelectionEmpty()) {
- copyCells(
- graph,
- mxUtils.sortCells(
- graph.model.getTopmostCells(graph.getSelectionCells())
- )
- );
- dx = 0;
- dy = 0;
- }
- })
- );
-
- // Handles cut event by removing cells putting XML into text input
- mxEvent.addListener(
- textInput,
- 'cut',
- mxUtils.bind(this, function(evt) {
- if (graph.isEnabled() && !graph.isSelectionEmpty()) {
- copyCells(graph, graph.removeCells());
- dx = -gs;
- dy = -gs;
- }
- })
- );
-
- // Merges XML into existing graph and layers
- const importXml = function(xml, dx, dy) {
- dx = dx != null ? dx : 0;
- dy = dy != null ? dy : 0;
- let cells = [];
-
- try {
- const doc = mxUtils.parseXml(xml);
- const node = doc.documentElement;
-
- if (node != null) {
- const model = new mxGraphModel();
- const codec = new mxCodec(node.ownerDocument);
- codec.decode(node, model);
-
- const childCount = model.getRoot().getChildCount();
- const targetChildCount = graph.model.getRoot().getChildCount();
-
- // Merges existing layers and adds new layers
- graph.model.beginUpdate();
- try {
- for (let i = 0; i < childCount; i++) {
- let parent = model.getRoot().getChildAt(i);
-
- // Adds cells to existing layers if not locked
- if (targetChildCount > i) {
- // Inserts into active layer if only one layer is being pasted
- const target =
- childCount === 1
- ? graph.getDefaultParent()
- : graph.model.getRoot().getChildAt(i);
-
- if (!graph.isCellLocked(target)) {
- const children = parent.getChildren();
- cells = cells.concat(
- graph.importCells(children, dx, dy, target)
- );
- }
- } else {
- // Delta is non cascading, needs separate move for layers
- parent = graph.importCells(
- [parent],
- 0,
- 0,
- graph.model.getRoot()
- )[0];
- const children = parent.getChildren();
- graph.moveCells(children, dx, dy);
- cells = cells.concat(children);
- }
- }
- } finally {
- graph.model.endUpdate();
- }
- }
- } catch (e) {
- alert(e);
- throw e;
- }
-
- return cells;
- };
-
- // Parses and inserts XML into graph
- const pasteText = function(text) {
- const xml = mxUtils.trim(text);
- const x =
- graph.container.scrollLeft / graph.view.scale - graph.view.translate.x;
- const y =
- graph.container.scrollTop / graph.view.scale - graph.view.translate.y;
-
- if (xml.length > 0) {
- if (lastPaste !== xml) {
- lastPaste = xml;
- dx = 0;
- dy = 0;
- } else {
- dx += gs;
- dy += gs;
- }
-
- // Standard paste via control-v
- if (xml.substring(0, 14) === '') {
- graph.setSelectionCells(importXml(xml, dx, dy));
- graph.scrollCellToVisible(graph.getSelectionCell());
- }
- }
- };
-
- // Function to fetch text from paste events
- const extractGraphModelFromEvent = function(evt) {
- let data = null;
-
- if (evt != null) {
- const provider =
- evt.dataTransfer != null ? evt.dataTransfer : evt.clipboardData;
-
- if (provider != null) {
- data =
- mxUtils.indexOf(provider.types, 'text/html') >= 0
- ? provider.getData('text/html')
- : null;
-
- if (
- mxUtils.indexOf(
- provider.types,
- 'text/plain' && (data == null || data.length === 0)
- )
- ) {
- data = provider.getData('text/plain');
- }
- }
- }
-
- return data;
- };
-
- // Handles paste event by parsing and inserting XML
- mxEvent.addListener(textInput, 'paste', function(evt) {
- // Clears existing contents before paste - should not be needed
- // because all text is selected, but doesn't hurt since the
- // actual pasting of the new text is delayed in all cases.
- textInput.value = '';
-
- if (graph.isEnabled()) {
- const xml = extractGraphModelFromEvent(evt);
-
- if (xml != null && xml.length > 0) {
- pasteText(xml);
- } else {
- // Timeout for new value to appear
- window.setTimeout(
- mxUtils.bind(this, function() {
- pasteText(textInput.value);
- }),
- 0
- );
- }
- }
-
- textInput.select();
- });
-
- // 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.batchUpdate(() => {
- const v1 = graph.insertVertex({
- parent,
- value: 'Hello,',
- position: [20, 20],
- size: [80, 30],
- });
- const v2 = graph.insertVertex({
- parent,
- value: 'World!',
- position: [200, 150],
- size: [80, 30],
- });
- const e1 = graph.insertEdge({ parent, source: v1, target: v2 });
- });
- };
-}
-
-export default Clipboard;
diff --git a/src/pages/events/Boundary.js b/src/pages/events/Boundary.js
deleted file mode 100644
index a44a06413..000000000
--- a/src/pages/events/Boundary.js
+++ /dev/null
@@ -1,237 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
-import mxUtils from '../../mxgraph/util/mxUtils';
-
-class Boundary extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
- {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n };\n\n componentDidMount() {\n // Enables crisp rendering of rectangles in SVG\n mxConstants.ENTITY_SEGMENT = 20;\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.setDropEnabled(true);\n\n // Disables global features\n graph.collapseToPreferredSize = false;\n graph.constrainChildren = false;\n graph.cellsSelectable = false;\n graph.extendParentsOnAdd = false;\n graph.extendParents = false;\n graph.border = 10;\n\n // Sets global styles\n let style = graph.getStylesheet().getDefaultEdgeStyle();\n style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;\n style[mxConstants.STYLE_ROUNDED] = true;\n\n style = graph.getStylesheet().getDefaultVertexStyle();\n style[mxConstants.STYLE_FILLCOLOR] = '#ffffff';\n style[mxConstants.STYLE_SHAPE] = 'swimlane';\n style[mxConstants.STYLE_STARTSIZE] = 30;\n\n style = [];\n style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;\n style[mxConstants.STYLE_STROKECOLOR] = 'none';\n style[mxConstants.STYLE_FILLCOLOR] = 'none';\n style[mxConstants.STYLE_FOLDABLE] = false;\n graph.getStylesheet().putCellStyle('column', style);\n\n // Installs auto layout for all levels\n const layout = new mxStackLayout(graph, true);\n layout.border = graph.border;\n const layoutMgr = new mxLayoutManager(graph);\n layoutMgr.getLayout = function(cell) {\n if (!cell.collapsed) {\n if (cell.parent !== graph.model.root) {\n layout.resizeParent = true;\n layout.horizontal = false;\n layout.spacing = 10;\n } else {\n layout.resizeParent = true;\n layout.horizontal = true;\n layout.spacing = 40;\n }\n\n return layout;\n }\n\n return null;\n };\n\n // Resizes the container\n graph.setResizeContainer(true);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const col1 = graph.insertVertex(parent, null, '', 0, 0, 120, 0, 'column');\n\n const v1 = graph.insertVertex(col1, null, '1', 0, 0, 100, 30);\n v1.collapsed = true;\n\n const v11 = graph.insertVertex(v1, null, '1.1', 0, 0, 80, 30);\n v11.collapsed = true;\n\n const v111 = graph.insertVertex(v11, null, '1.1.1', 0, 0, 60, 30);\n const v112 = graph.insertVertex(v11, null, '1.1.2', 0, 0, 60, 30);\n\n const v12 = graph.insertVertex(v1, null, '1.2', 0, 0, 80, 30);\n\n const col2 = graph.insertVertex(parent, null, '', 0, 0, 120, 0, 'column');\n\n const v2 = graph.insertVertex(col2, null, '2', 0, 0, 100, 30);\n v2.collapsed = true;\n\n const v21 = graph.insertVertex(v2, null, '2.1', 0, 0, 80, 30);\n v21.collapsed = true;\n\n const v211 = graph.insertVertex(v21, null, '2.1.1', 0, 0, 60, 30);\n const v212 = graph.insertVertex(v21, null, '2.1.2', 0, 0, 60, 30);\n\n const v22 = graph.insertVertex(v2, null, '2.2', 0, 0, 80, 30);\n\n const v3 = graph.insertVertex(col2, null, '3', 0, 0, 100, 30);\n v3.collapsed = true;\n\n const v31 = graph.insertVertex(v3, null, '3.1', 0, 0, 80, 30);\n v31.collapsed = true;\n\n const v311 = graph.insertVertex(v31, null, '3.1.1', 0, 0, 60, 30);\n const v312 = graph.insertVertex(v31, null, '3.1.2', 0, 0, 60, 30);\n\n const v32 = graph.insertVertex(v3, null, '3.2', 0, 0, 80, 30);\n\n graph.insertEdge(parent, null, '', v111, v211);\n graph.insertEdge(parent, null, '', v112, v212);\n graph.insertEdge(parent, null, '', v112, v22);\n\n graph.insertEdge(parent, null, '', v12, v311);\n graph.insertEdge(parent, null, '', v12, v312);\n graph.insertEdge(parent, null, '', v12, v32);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n };\n}\n\nexport default Folding;\n",
- "EdgeTolerance": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxUtils from '../mxgraph/util/mxUtils';\n\nclass EdgeTolerance extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '481px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n const { el } = this;\n\n class MyCustomGraph extends mxGraph {\n fireMouseEvent(evtName, me, sender) {\n // Overrides the mouse event dispatching mechanism to update the\n // cell which is associated with the event in case the native hit\n // detection did not return anything.\n\n // Checks if native hit detection did not return anything\n if (me.getState() == null) {\n // Updates the graph coordinates in the event since we need\n // them here. Storing them in the event means the overridden\n // method doesn't have to do this again.\n if (me.graphX == null || me.graphY == null) {\n const pt = mxUtils.convertPoint(el, me.getX(), me.getY());\n\n me.graphX = pt.x;\n me.graphY = pt.y;\n }\n\n const cell = this.getCellAt(me.graphX, me.graphY);\n if (this.getModel().isEdge(cell)) {\n me.state = this.view.getState(cell);\n\n if (me.state != null && me.state.shape != null) {\n this.container.style.cursor = me.state.shape.node.style.cursor;\n }\n }\n }\n\n if (me.state == null) {\n this.container.style.cursor = 'default';\n }\n\n super.fireMouseEvent(evtName, me, sender);\n }\n\n dblClick(evt, cell) {\n // Overrides double click handling to use the tolerance\n if (cell == null) {\n const pt = mxUtils.convertPoint(\n el,\n mxEvent.getClientX(evt),\n mxEvent.getClientY(evt)\n );\n cell = this.getCellAt(pt.x, pt.y);\n }\n super.dblClick(evt, cell);\n }\n }\n\n // Creates the graph inside the given container\n const graph = new MyCustomGraph(this.el);\n graph.setTolerance(20);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.batchUpdate(() => {\n const v1 = graph.insertVertex({\n parent,\n value: 'Hello,',\n position: [120, 120],\n size: [80, 30],\n });\n const v2 = graph.insertVertex({\n parent,\n value: 'World!',\n position: [400, 250],\n size: [80, 30],\n });\n const e1 = graph.insertEdge({\n parent,\n source: v1,\n target: v2,\n style: 'edgeStyle=orthogonalEdgeStyle;',\n });\n const e2 = graph.insertEdge({\n parent,\n source: v2,\n target: v1,\n style: 'edgeStyle=orthogonalEdgeStyle;',\n });\n });\n }\n}\n\nexport default EdgeTolerance;\n",
- "Events": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';\nimport mxKeyHandler from '../mxgraph/handler/mxKeyHandler';\nimport mxLayoutManager from '../mxgraph/view/mxLayoutManager';\nimport mxParallelEdgeLayout from '../mxgraph/layout/mxParallelEdgeLayout';\nimport mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';\nimport mxImage from '../mxgraph/util/mxImage';\nimport mxClient from '../mxgraph/mxClient';\n\nclass Events extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{}}\n />\n \n );\n }\n\n componentDidMount() {\n // Program starts here. Creates a sample graph in the dynamically\n // created DOM node called container which is created below.\n\n class MyCustomConnectionHandler extends mxConnectionHandler {\n // Sets the image to be used for creating new connections\n connectImage = new mxImage('images/green-dot.gif', 14, 14);\n }\n\n const container = document.createElement('div');\n container.style.position = 'absolute';\n container.style.overflow = 'hidden';\n container.style.left = '0px';\n container.style.top = '0px';\n container.style.right = '0px';\n container.style.bottom = '0px';\n container.style.background = 'url(\"editors/images/grid.gif\")';\n\n // Disables built-in context menu\n mxEvent.disableContextMenu(container);\n this.el.appendChild(container);\n\n class MyCustomGraph extends mxGraph {\n alternateEdgeStyle = 'elbow=vertical';\n\n getTooltipForCell(cell) {\n // Installs a custom tooltip for cells\n return 'Doubleclick and right- or shiftclick';\n }\n\n createConnectionHandler() {\n return new MyCustomConnectionHandler(this);\n }\n }\n\n // Creates the graph inside the DOM node.\n // Optionally you can enable panning, tooltips and connections\n // using graph.setPanning(), setTooltips() & setConnectable().\n // To enable rubberband selection and basic keyboard events,\n // use new mxRubberband(graph) and new mxKeyHandler(graph).\n const graph = new MyCustomGraph(container);\n\n // Enables tooltips, new connections and panning\n graph.setPanning(true);\n graph.setTooltips(true);\n graph.setConnectable(true);\n\n // Automatically handle parallel edges\n const layout = new mxParallelEdgeLayout(graph);\n const layoutMgr = new mxLayoutManager(graph);\n\n layoutMgr.getLayout = function(cell) {\n if (cell.getChildCount() > 0) {\n return layout;\n }\n };\n\n // Enables rubberband (marquee) selection and a handler\n // for basic keystrokes (eg. return, escape during editing).\n const rubberband = new mxRubberband(graph);\n const keyHandler = new mxKeyHandler(graph);\n\n // Changes the default style for edges \"in-place\" and assigns\n // an alternate edge style which is applied in mxGraph.flip\n // when the user double clicks on the adjustment control point\n // of the edge. The ElbowConnector edge style switches to TopToBottom\n // if the horizontal style is true.\n const style = graph.getStylesheet().getDefaultEdgeStyle();\n style[mxConstants.STYLE_ROUNDED] = true;\n style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;\n\n // Installs a popupmenu handler using local function (see below).\n graph.popupMenuHandler.factoryMethod = (menu, cell, evt) => {\n return this.createPopupMenu(graph, menu, cell, evt);\n };\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(\n parent,\n null,\n 'Doubleclick',\n 20,\n 20,\n 80,\n 30\n );\n const v2 = graph.insertVertex(\n parent,\n null,\n 'Right-/Shiftclick',\n 200,\n 150,\n 120,\n 30\n );\n const v3 = graph.insertVertex(\n parent,\n null,\n 'Connect/Reconnect',\n 200,\n 20,\n 120,\n 30\n );\n const v4 = graph.insertVertex(\n parent,\n null,\n 'Control-Drag',\n 20,\n 150,\n 100,\n 30\n );\n const e1 = graph.insertEdge(parent, null, 'Tooltips', v1, v2);\n const e2 = graph.insertEdge(parent, null, '', v2, v3);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n\n createPopupMenu(graph, menu, cell, evt) {\n // Function to create the entries in the popupmenu\n if (cell != null) {\n menu.addItem('Cell Item', 'editors/images/image.gif', () => {\n mxUtils.alert('MenuItem1');\n });\n } else {\n menu.addItem('No-Cell Item', 'editors/images/image.gif', () => {\n mxUtils.alert('MenuItem2');\n });\n }\n menu.addSeparator();\n menu.addItem('MenuItem3', '../src/images/warning.gif', () => {\n mxUtils.alert(`MenuItem3: ${graph.getSelectionCount()} selected`);\n });\n }\n}\n\nexport default Events;\n",
- "Layers": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxCell from '../mxgraph/model/mxCell';\nimport mxGraphModel from '../mxgraph/model/mxGraphModel';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxUtils from '../mxgraph/util/mxUtils';\n\nclass Layers extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container using a model\n // with a custom root and two layers. Layers can also be added\n // dynamically using let layer = model.add(root, new mxCell()).\n const root = new mxCell();\n const layer0 = root.insert(new mxCell());\n const layer1 = root.insert(new mxCell());\n const model = new mxGraphModel(root);\n\n const graph = new mxGraph(this.el, model);\n\n // Disables basic selection and cell handling\n graph.setEnabled(false);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n model.beginUpdate();\n try {\n const v1 = graph.insertVertex(\n layer1,\n null,\n 'Hello,',\n 20,\n 20,\n 80,\n 30,\n 'fillColor=#C0C0C0'\n );\n const v2 = graph.insertVertex(\n layer1,\n null,\n 'Hello,',\n 200,\n 20,\n 80,\n 30,\n 'fillColor=#C0C0C0'\n );\n const v3 = graph.insertVertex(layer0, null, 'World!', 110, 150, 80, 30);\n const e1 = graph.insertEdge(\n layer1,\n null,\n '',\n v1,\n v3,\n 'strokeColor=#0C0C0C'\n );\n e1.geometry.points = [new mxPoint(60, 165)];\n const e2 = graph.insertEdge(layer0, null, '', v2, v3);\n e2.geometry.points = [new mxPoint(240, 165)];\n const e3 = graph.insertEdge(\n layer0,\n null,\n '',\n v1,\n v2,\n 'edgeStyle=topToBottomEdgeStyle'\n );\n e3.geometry.points = [new mxPoint(150, 30)];\n const e4 = graph.insertEdge(\n layer1,\n null,\n '',\n v2,\n v1,\n 'strokeColor=#0C0C0C;edgeStyle=topToBottomEdgeStyle'\n );\n e4.geometry.points = [new mxPoint(150, 40)];\n } finally {\n // Updates the display\n model.endUpdate();\n }\n\n this.el2.appendChild(\n mxUtils.button('Layer 0', function() {\n model.setVisible(layer0, !model.isVisible(layer0));\n })\n );\n\n this.el2.appendChild(\n mxUtils.button('Layer 1', function() {\n model.setVisible(layer1, !model.isVisible(layer1));\n })\n );\n }\n}\n\nexport default Layers;\n",
- "Monitor": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxCellOverlay from '../mxgraph/view/mxCellOverlay';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxCodec from '../mxgraph/io/mxCodec';\nimport mxPerimeter from '../mxgraph/view/mxPerimeter';\nimport mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';\n\nclass Monitor extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '406px',\n cursor: 'default',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n mxConstants.SHADOWCOLOR = '#e0e0e0';\n\n // Creates the graph inside the given container\n const graph = createGraph(this.el);\n\n // Creates a process display using the activity names as IDs to refer to the elements\n const xml =\n '' +\n ' ` +\n `` +\n ` {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '300px',\n // background: \"url('editors/images/grid.gif')\",\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Defines an icon for creating new connections in the connection handler.\n // This will automatically disable the highlighting of the source vertex.\n mxConnectionHandler.prototype.connectImage = new mxImage(\n 'images/connector.gif',\n 16,\n 16\n );\n\n // Creates the div for the graph\n const container = document.createElement('div');\n container.style.position = 'absolute';\n container.style.overflow = 'hidden';\n container.style.left = '00px';\n container.style.top = '40px';\n container.style.right = '0px';\n container.style.bottom = '0px';\n container.style.background = 'url(\"editors/images/grid.gif\")';\n\n this.el.appendChild(container);\n\n // Creates the graph inside the given container\n const graph = new mxGraph(container);\n\n // Enable tooltips, disables mutligraphs, enable loops\n graph.setMultigraph(false);\n graph.setAllowLoops(true);\n\n // Enables rubberband selection and key handling\n const rubberband = new mxRubberband(graph);\n const keyHandler = new mxKeyHandler(graph);\n\n // Assigns the delete key\n keyHandler.bindKey(46, function(evt) {\n if (graph.isEnabled()) {\n graph.removeCells();\n }\n });\n\n // Shared variable between child function scopes\n // aka \"private\" variable\n let currentPermission = null;\n\n const apply = function(permission) {\n graph.clearSelection();\n permission.apply(graph);\n graph.setEnabled(true);\n graph.setTooltips(true);\n\n // Updates the icons on the shapes - rarely\n // needed and very slow for large graphs\n graph.refresh();\n currentPermission = permission;\n };\n\n apply(new Permission());\n\n let button = mxUtils.button('Allow All', function(evt) {\n apply(new Permission());\n });\n this.el.appendChild(button);\n\n button = mxUtils.button('Connect Only', function(evt) {\n apply(new Permission(false, true, false, false, true));\n });\n this.el.appendChild(button);\n\n button = mxUtils.button('Edges Only', function(evt) {\n apply(new Permission(false, false, true, false, false));\n });\n this.el.appendChild(button);\n\n button = mxUtils.button('Vertices Only', function(evt) {\n apply(new Permission(false, false, false, true, false));\n });\n this.el.appendChild(button);\n\n button = mxUtils.button('Select Only', function(evt) {\n apply(new Permission(false, false, false, false, false));\n });\n this.el.appendChild(button);\n\n button = mxUtils.button('Locked', function(evt) {\n apply(new Permission(true, false));\n });\n this.el.appendChild(button);\n\n button = mxUtils.button('Disabled', function(evt) {\n graph.clearSelection();\n graph.setEnabled(false);\n graph.setTooltips(false);\n });\n this.el.appendChild(button);\n\n // Extends hook functions to use permission object. This could\n // be done by assigning the respective switches (eg.\n // setMovable), but this approach is more flexible, doesn't\n // override any existing behaviour or settings, and allows for\n // dynamic conditions to be used in the functions. See the\n // specification for more functions to extend (eg.\n // isSelectable).\n const oldDisconnectable = graph.isCellDisconnectable;\n graph.isCellDisconnectable = function(cell, terminal, source) {\n return (\n oldDisconnectable.apply(this, arguments) && currentPermission.editEdges\n );\n };\n\n const oldTerminalPointMovable = graph.isTerminalPointMovable;\n graph.isTerminalPointMovable = function(cell) {\n return (\n oldTerminalPointMovable.apply(this, arguments) &&\n currentPermission.editEdges\n );\n };\n\n const oldBendable = graph.isCellBendable;\n graph.isCellBendable = function(cell) {\n return oldBendable.apply(this, arguments) && currentPermission.editEdges;\n };\n\n const oldLabelMovable = graph.isLabelMovable;\n graph.isLabelMovable = function(cell) {\n return (\n oldLabelMovable.apply(this, arguments) && currentPermission.editEdges\n );\n };\n\n const oldMovable = graph.isCellMovable;\n graph.isCellMovable = function(cell) {\n return (\n oldMovable.apply(this, arguments) && currentPermission.editVertices\n );\n };\n\n const oldResizable = graph.isCellResizable;\n graph.isCellResizable = function(cell) {\n return (\n oldResizable.apply(this, arguments) && currentPermission.editVertices\n );\n };\n\n const oldEditable = graph.isCellEditable;\n graph.isCellEditable = function(cell) {\n return (\n (oldEditable.apply(this, arguments) &&\n this.getModel().isVertex(cell) &&\n currentPermission.editVertices) ||\n (this.getModel().isEdge(cell) && currentPermission.editEdges)\n );\n };\n\n const oldDeletable = graph.isCellDeletable;\n graph.isCellDeletable = function(cell) {\n return (\n (oldDeletable.apply(this, arguments) &&\n this.getModel().isVertex(cell) &&\n currentPermission.editVertices) ||\n (this.getModel().isEdge(cell) && currentPermission.editEdges)\n );\n };\n\n const oldCloneable = graph.isCellCloneable;\n graph.isCellCloneable = function(cell) {\n return (\n oldCloneable.apply(this, arguments) && currentPermission.cloneCells\n );\n };\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);\n const v2 = graph.insertVertex(parent, null, 'Hello,', 200, 20, 80, 30);\n const v3 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);\n const e1 = graph.insertEdge(parent, null, 'Connection', v1, v3);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n}\n\nexport default Permissions;\n",
- "index": "import Head from 'next/head';\nimport styles from '../styles/Home.module.css';\n\nimport HelloWorld from './HelloWorld';\nimport Anchors from './Anchors';\nimport AutoLayout from './AutoLayout';\nimport Animation from './Animation';\nimport Boundary from './Boundary';\nimport Clipboard from './Clipboard';\nimport DragSource from './DragSource';\nimport Control from './Control';\nimport ContextIcons from './ContextIcons';\nimport Collapse from './Collapse';\nimport Constituent from './Constituent';\nimport DynamicLoading from './DynamicLoading';\nimport Drop from './Drop';\nimport DynamicStyle from './DynamicStyle';\nimport DynamicToolbar from './DynamicToolbar';\nimport EdgeTolerance from './EdgeTolerance';\nimport Editing from './Editing';\nimport Tree from './Tree';\nimport Validation from './Validation';\nimport SwimLanes from './SwimLanes';\nimport Wrapping from './Wrapping';\n// import Windows from \"./Windows\";\nimport Visibility from './Visibility';\nimport UserObject from './UserObject';\nimport Toolbar from './Toolbar';\nimport Thread from './Thread';\n// import Template from \"./Template\";\nimport Stylesheet from './Stylesheet';\nimport Stencils from './Stencils';\nimport SecondLabel from './SecondLabel';\nimport Shape from './Shape';\nimport Resources from './Resources';\nimport RadialTreeLayout from './RadialTreeLayout';\nimport PortRefs from './PortRefs';\nimport Permissions from './Permissions';\nimport Perimeter from './Perimeter';\nimport PageBreaks from './PageBreaks';\nimport Overlays from './Overlays';\nimport Orthogonal from './Orthogonal';\nimport OrgChart from './OrgChart';\nimport OffPage from './OffPage';\nimport Morph from './Morph';\nimport Monitor from './Monitor';\nimport Merge from './Merge';\nimport Markers from './Markers';\nimport LOD from './LOD';\nimport Layers from './Layers';\nimport Labels from './Labels';\nimport LabelPosition from './LabelPosition';\nimport JsonData from './JsonData';\nimport Indicators from './Indicators';\nimport Images from './Images';\nimport HoverIcons from './HoverIcons';\nimport HoverStyle from './HoverStyle';\nimport HierarchicalLayout from './HierarchicalLayout';\nimport HelloPort from './HelloPort';\nimport Handles from './Handles';\nimport Guides from './Guides';\nimport Groups from './Groups';\nimport Grid from './Grid';\nimport Folding from './Folding';\nimport FixedPoints from './FixedPoints';\nimport FixedIcon from './FixedIcon';\nimport Preview from './Previews';\n\nexport default function Home() {\n return (\n \n
\n );\n}\n",
- "Boundary": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxGraphHandler from '../mxgraph/handler/mxGraphHandler';\nimport mxUtils from '../mxgraph/util/mxUtils';\n\nclass Boundary extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n Boundary
- This example demonstrates implementing boundary events in BPMN diagrams. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- height: '241px',
- background: 'url("editors/images/grid.gif")',
- cursor: 'default',
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Disables the built-in context menu
- mxEvent.disableContextMenu(this.el);
-
- class MyCustomGraph extends mxGraph {
- // Enables moving of relative children
- isCellLocked(cell) {
- return false;
- }
-
- // Removes folding icon for relative children
- isCellFoldable(cell, collapse) {
- const childCount = cell.getChildCount();
-
- for (let i = 0; i < childCount; i++) {
- const child = cell.getChildAt(i);
- const geo = this.getCellGeometry(child);
-
- if (geo != null && geo.relative) {
- return false;
- }
- }
-
- return childCount > 0;
- }
-
- // Returns the relative position of the given child
- getRelativePosition(state, dx, dy) {
- if (state != null) {
- const model = graph.getModel();
- const geo = state.cell.getGeometry();
-
- if (geo != null && geo.relative && !state.cell.isEdge()) {
- const parent = state.cell.getParent();
-
- if (parent.isVertex()) {
- const pstate = graph.view.getState(parent);
-
- if (pstate != null) {
- const { scale } = graph.view;
- let x = state.x + dx;
- let y = state.y + dy;
-
- if (geo.offset != null) {
- x -= geo.offset.x * scale;
- y -= geo.offset.y * scale;
- }
-
- x = (x - pstate.x) / pstate.width;
- y = (y - pstate.y) / pstate.height;
-
- if (Math.abs(y - 0.5) <= Math.abs((x - 0.5) / 2)) {
- x = x > 0.5 ? 1 : 0;
- y = Math.min(1, Math.max(0, y));
- } else {
- x = Math.min(1, Math.max(0, x));
- y = y > 0.5 ? 1 : 0;
- }
-
- return new mxPoint(x, y);
- }
- }
- }
- }
-
- return null;
- }
-
- // Replaces translation for relative children
- translateCell(cell, dx, dy) {
- const rel = this.getRelativePosition(
- this.view.getState(cell),
- dx * graph.view.scale,
- dy * graph.view.scale
- );
-
- if (rel != null) {
- let geo = cell.getGeometry();
-
- if (geo != null && geo.relative) {
- geo = geo.clone();
- geo.x = rel.x;
- geo.y = rel.y;
-
- this.model.setGeometry(cell, geo);
- }
- } else {
- mxGraph.prototype.translateCell.apply(this, arguments);
- }
- }
- }
-
- // Creates the graph inside the given this.el
- const graph = new MyCustomGraph(this.el);
-
- // Sets the base style for all vertices
- const style = graph.getStylesheet().getDefaultVertexStyle();
- style[mxConstants.STYLE_ROUNDED] = true;
- style[mxConstants.STYLE_FILLCOLOR] = '#ffffff';
- style[mxConstants.STYLE_STROKECOLOR] = '#000000';
- style[mxConstants.STYLE_STROKEWIDTH] = '2';
- style[mxConstants.STYLE_FONTCOLOR] = '#000000';
- style[mxConstants.STYLE_FONTSIZE] = '12';
- style[mxConstants.STYLE_FONTSTYLE] = 1;
- graph.getStylesheet().putDefaultVertexStyle(style);
-
- // Replaces move preview for relative children
- graph.graphHandler.getDelta = function(me) {
- const point = mxUtils.convertPoint(
- this.graph.container,
- me.getX(),
- me.getY()
- );
- let delta = new mxPoint(point.x - this.first.x, point.y - this.first.y);
-
- if (
- this.cells != null &&
- this.cells.length > 0 &&
- this.cells[0] != null
- ) {
- const state = this.graph.view.getState(this.cells[0]);
- const rel = graph.getRelativePosition(state, delta.x, delta.y);
-
- if (rel != null) {
- const pstate = this.graph.view.getState(
- state.cell.getParent()
- );
-
- if (pstate != null) {
- delta = new mxPoint(
- pstate.x + pstate.width * rel.x - state.getCenterX(),
- pstate.y + pstate.height * rel.y - state.getCenterY()
- );
- }
- }
- }
-
- return delta;
- };
-
- // Relative children cannot be removed from parent
- graph.graphHandler.shouldRemoveCellsFromParent = function(
- parent,
- cells,
- evt
- ) {
- return (
- cells.length === 0 &&
- !cells[0].geometry.relative &&
- mxGraphHandler.prototype.shouldRemoveCellsFromParent.apply(
- this,
- arguments
- )
- );
- };
-
- // Enables rubberband selection
- new mxRubberband(graph);
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- const parent = graph.getDefaultParent();
-
- // Adds cells to the model in a single step
- graph.batchUpdate(() => {
- const v1 = graph.insertVertex({
- parent,
- value: 'Process',
- position: [60, 60],
- size: [90, 40],
- });
-
- const v2 = graph.insertVertex({
- parent: v1,
- value: 'in',
- position: [0, 0.5],
- size: [20, 20],
- style: 'fontSize=9;shape=ellipse;resizable=0;',
- });
- v2.geometry.offset = new mxPoint(-10, -10);
- v2.geometry.relative = true;
-
- const v3 = graph.insertVertex({
- parent: v1,
- value: 'out',
- position: [1, 0.5],
- size: [20, 20],
- style: 'fontSize=9;shape=ellipse;resizable=0;',
- });
- v3.geometry.offset = new mxPoint(-10, -10);
- v3.geometry.relative = true;
- });
- }
-}
-
-export default Boundary;
diff --git a/src/pages/examplesListing.json b/src/pages/examplesListing.json
deleted file mode 100644
index 9323be2be..000000000
--- a/src/pages/examplesListing.json
+++ /dev/null
@@ -1,73 +0,0 @@
-{
- "Morph": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxMorphing from '../mxgraph/util/mxMorphing';\nimport mxUtils from '../mxgraph/util/mxUtils';\n\nclass Morph extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Disables the built-in context menu\n mxEvent.disableContextMenu(this.el);\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n let v1;\n var v2;\n try {\n v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);\n var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n let mult = 1;\n\n this.el2.appendChild(\n mxUtils.button('Morph', function() {\n graph.clearSelection();\n\n graph.getModel().beginUpdate();\n try {\n let geo = graph.getCellGeometry(v1);\n geo = geo.clone();\n geo.x += 180 * mult;\n graph.getModel().setGeometry(v1, geo);\n\n geo = graph.getCellGeometry(v2);\n geo = geo.clone();\n geo.x -= 180 * mult;\n graph.getModel().setGeometry(v2, geo);\n } finally {\n // Arguments are number of steps, ease and delay\n const morph = new mxMorphing(graph, 20, 1.2, 20);\n morph.addListener(mxEvent.DONE, function() {\n graph.getModel().endUpdate();\n });\n morph.startAnimation();\n }\n\n mult *= -1;\n })\n );\n }\n}\n\nexport default Morph;\n",
- "FixedPoints": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxConstraintHandler from '../mxgraph/handler/mxConstraintHandler';\nimport mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';\nimport mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';\nimport mxConnectionConstraint from '../mxgraph/view/mxConnectionConstraint';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxCellState from '../mxgraph/view/mxCellState';\n\nclass FixedPoints extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n };\n\n componentDidMount() {\n // Snaps to fixed points\n mxConstraintHandler.prototype.intersects = function(\n icon,\n point,\n source,\n existingEdge\n ) {\n return !source || existingEdge || mxUtils.intersects(icon.bounds, point);\n };\n\n // Special case: Snaps source of new connections to fixed points\n // Without a connect preview in connectionHandler.createEdgeState mouseMove\n // and getSourcePerimeterPoint should be overriden by setting sourceConstraint\n // sourceConstraint to null in mouseMove and updating it and returning the\n // nearest point (cp) in getSourcePerimeterPoint (see below)\n const mxConnectionHandlerUpdateEdgeState =\n mxConnectionHandler.prototype.updateEdgeState;\n mxConnectionHandler.prototype.updateEdgeState = function(pt, constraint) {\n if (pt != null && this.previous != null) {\n const constraints = this.graph.getAllConnectionConstraints(\n this.previous\n );\n let nearestConstraint = null;\n let dist = null;\n\n for (let i = 0; i < constraints.length; i++) {\n const cp = this.graph.getConnectionPoint(\n this.previous,\n constraints[i]\n );\n\n if (cp != null) {\n const tmp =\n (cp.x - pt.x) * (cp.x - pt.x) + (cp.y - pt.y) * (cp.y - pt.y);\n\n if (dist == null || tmp < dist) {\n nearestConstraint = constraints[i];\n dist = tmp;\n }\n }\n }\n\n if (nearestConstraint != null) {\n this.sourceConstraint = nearestConstraint;\n }\n\n // In case the edge style must be changed during the preview:\n // this.edgeState.style['edgeStyle'] = 'orthogonalEdgeStyle';\n // And to use the new edge style in the new edge inserted into the graph,\n // update the cell style as follows:\n // this.edgeState.cell.style = mxUtils.setStyle(this.edgeState.cell.style, 'edgeStyle', this.edgeState.style['edgeStyle']);\n }\n\n mxConnectionHandlerUpdateEdgeState.apply(this, arguments);\n };\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.setConnectable(true);\n\n // graph.connectionHandler.connectImage = new mxImage('images/connector.gif', 16, 16);\n\n // Disables floating connections (only use with no connect image)\n if (graph.connectionHandler.connectImage == null) {\n graph.connectionHandler.isConnectableCell = function(cell) {\n return false;\n };\n mxEdgeHandler.prototype.isConnectableCell = function(cell) {\n return graph.connectionHandler.isConnectableCell(cell);\n };\n }\n\n graph.getAllConnectionConstraints = function(terminal) {\n if (terminal != null && this.model.isVertex(terminal.cell)) {\n return [\n new mxConnectionConstraint(new mxPoint(0, 0), true),\n new mxConnectionConstraint(new mxPoint(0.5, 0), true),\n new mxConnectionConstraint(new mxPoint(1, 0), true),\n new mxConnectionConstraint(new mxPoint(0, 0.5), true),\n new mxConnectionConstraint(new mxPoint(1, 0.5), true),\n new mxConnectionConstraint(new mxPoint(0, 1), true),\n new mxConnectionConstraint(new mxPoint(0.5, 1), true),\n new mxConnectionConstraint(new mxPoint(1, 1), true),\n ];\n }\n\n return null;\n };\n\n // Connect preview\n graph.connectionHandler.createEdgeState = function(me) {\n const edge = graph.createEdge(\n null,\n null,\n null,\n null,\n null,\n 'edgeStyle=orthogonalEdgeStyle'\n );\n\n return new mxCellState(\n this.graph.view,\n edge,\n this.graph.getCellStyle(edge)\n );\n };\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(\n parent,\n null,\n 'Hello,',\n 20,\n 20,\n 80,\n 60,\n 'shape=triangle;perimeter=trianglePerimeter'\n );\n const v2 = graph.insertVertex(\n parent,\n null,\n 'World!',\n 200,\n 150,\n 80,\n 60,\n 'shape=ellipse;perimeter=ellipsePerimeter'\n );\n const v3 = graph.insertVertex(parent, null, 'Hello,', 200, 20, 80, 30);\n const e1 = graph.insertEdge(\n parent,\n null,\n '',\n v1,\n v2,\n 'edgeStyle=elbowEdgeStyle;elbow=horizontal;' +\n 'exitX=0.5;exitY=1;exitPerimeter=1;entryX=0;entryY=0;entryPerimeter=1;'\n );\n const e2 = graph.insertEdge(\n parent,\n null,\n '',\n v3,\n v2,\n 'edgeStyle=elbowEdgeStyle;elbow=horizontal;orthogonal=0;' +\n 'entryX=0;entryY=0;entryPerimeter=1;'\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n // Use this code to snap the source point for new connections without a connect preview,\n // ie. without an overridden graph.connectionHandler.createEdgeState\n /*\n let mxConnectionHandlerMouseMove = mxConnectionHandler.prototype.mouseMove;\n mxConnectionHandler.prototype.mouseMove = function(sender, me)\n {\n this.sourceConstraint = null;\n\n mxConnectionHandlerMouseMove.apply(this, arguments);\n };\n\n let mxConnectionHandlerGetSourcePerimeterPoint = mxConnectionHandler.prototype.getSourcePerimeterPoint;\n mxConnectionHandler.prototype.getSourcePerimeterPoint = function(state, pt, me)\n {\n let result = null;\n\n if (this.previous != null && pt != null)\n {\n let constraints = this.graph.getAllConnectionConstraints(this.previous);\n let nearestConstraint = null;\n let nearest = null;\n let dist = null;\n\n for (let i = 0; i < constraints.length; i++)\n {\n let cp = this.graph.getConnectionPoint(this.previous, constraints[i]);\n\n if (cp != null)\n {\n let tmp = (cp.x - pt.x) * (cp.x - pt.x) + (cp.y - pt.y) * (cp.y - pt.y);\n\n if (dist == null || tmp < dist)\n {\n nearestConstraint = constraints[i];\n nearest = cp;\n dist = tmp;\n }\n }\n }\n\n if (nearestConstraint != null)\n {\n this.sourceConstraint = nearestConstraint;\n result = nearest;\n }\n }\n\n if (result == null)\n {\n result = mxConnectionHandlerGetSourcePerimeterPoint.apply(this, arguments);\n }\n\n return result;\n };\n */\n };\n}\n\nexport default FixedPoints;\n",
- "FileIO": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxCellTracker from '../mxgraph/handler/mxCellTracker';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxFastOrganicLayout from '../mxgraph/layout/mxFastOrganicLayout';\nimport mxEventObject from '../mxgraph/util/mxEventObject';\nimport mxCodec from '../mxgraph/io/mxCodec';\nimport mxPerimeter from '../mxgraph/view/mxPerimeter';\nimport mxClient from '../mxgraph/mxClient';\n\nclass FileIO extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'auto',\n height: '80vh',\n borderTop: 'gray 1px solid',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n };\n\n componentDidMount() {\n // Program starts here. Creates a sample graph in the\n // DOM node with the specified ID. This function is invoked\n // from the onLoad event handler of the document (see below).\n function main(container) {\n // Checks if browser is supported\n if (!mxClient.isBrowserSupported()) {\n // Displays an error message if the browser is\n // not supported.\n mxUtils.error('Browser is not supported!', 200, false);\n } else {\n // Creates the graph inside the given container\n const graph = new mxGraph(container);\n\n graph.setEnabled(false);\n graph.setPanning(true);\n graph.setTooltips(true);\n graph.panningHandler.useLeftButtonForPanning = true;\n\n // Adds a highlight on the cell under the mousepointer\n new mxCellTracker(graph);\n\n // Changes the default vertex style in-place\n let style = graph.getStylesheet().getDefaultVertexStyle();\n style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ROUNDED;\n style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;\n style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';\n style[mxConstants.STYLE_PERIMETER_SPACING] = 4;\n style[mxConstants.STYLE_SHADOW] = true;\n\n style = graph.getStylesheet().getDefaultEdgeStyle();\n style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';\n\n style = mxUtils.clone(style);\n style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_CLASSIC;\n graph.getStylesheet().putCellStyle('2way', style);\n\n graph.isHtmlLabel = function(cell) {\n return true;\n };\n\n // Larger grid size yields cleaner layout result\n graph.gridSize = 20;\n\n // Creates a layout algorithm to be used\n // with the graph\n const layout = new mxFastOrganicLayout(graph);\n\n // Moves stuff wider apart than usual\n layout.forceConstant = 140;\n\n // Adds a button to execute the layout\n this.el2.appendChild(\n mxUtils.button('Arrange', function(evt) {\n const parent = graph.getDefaultParent();\n layout.execute(parent);\n })\n );\n\n // Load cells and layouts the graph\n graph.getModel().beginUpdate();\n try {\n // Loads the custom file format (TXT file)\n parse(graph, 'fileio.txt');\n\n // Loads the mxGraph file format (XML file)\n // read(graph, 'fileio.xml');\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Executes the layout\n layout.execute(parent);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n graph.dblClick = function(evt, cell) {\n const mxe = new mxEventObject(\n mxEvent.DOUBLE_CLICK,\n 'event',\n evt,\n 'cell',\n cell\n );\n this.fireEvent(mxe);\n\n if (\n this.isEnabled() &&\n !mxEvent.isConsumed(evt) &&\n !mxe.isConsumed() &&\n cell != null\n ) {\n mxUtils.alert(\n `Show properties for cell ${cell.customId || cell.getId()}`\n );\n }\n };\n }\n }\n\n // Custom parser for simple file format\n function parse(graph, filename) {\n const model = graph.getModel();\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n const req = mxUtils.load(filename);\n const text = req.getText();\n\n const lines = text.split('\\n');\n\n // Creates the lookup table for the vertices\n const vertices = [];\n\n // Parses all lines (vertices must be first in the file)\n graph.getModel().beginUpdate();\n try {\n for (let i = 0; i < lines.length; i++) {\n // Ignores comments (starting with #)\n const colon = lines[i].indexOf(':');\n\n if (lines[i].substring(0, 1) != '#' || colon == -1) {\n const comma = lines[i].indexOf(',');\n const value = lines[i].substring(colon + 2, lines[i].length);\n\n if (comma == -1 || comma > colon) {\n const key = lines[i].substring(0, colon);\n\n if (key.length > 0) {\n vertices[key] = graph.insertVertex(\n parent,\n null,\n value,\n 0,\n 0,\n 80,\n 70\n );\n }\n } else if (comma < colon) {\n // Looks up the vertices in the lookup table\n const source = vertices[lines[i].substring(0, comma)];\n const target = vertices[lines[i].substring(comma + 1, colon)];\n\n if (source != null && target != null) {\n const e = graph.insertEdge(parent, null, value, source, target);\n\n // Uses the special 2-way style for 2-way labels\n if (value.indexOf('2-Way') >= 0) {\n e.style = '2way';\n }\n }\n }\n }\n }\n } finally {\n graph.getModel().endUpdate();\n }\n }\n\n // Parses the mxGraph XML file format\n function read(graph, filename) {\n const req = mxUtils.load(filename);\n const root = req.getDocumentElement();\n const dec = new mxCodec(root.ownerDocument);\n\n dec.decode(root, graph.getModel());\n }\n };\n}\n\nexport default FileIO;\n",
- "Grid": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxLog from '../mxgraph/util/mxLog';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxGraphView from '../mxgraph/view/mxGraphView';\n\nclass Grid extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n height: '481px',\n cursor: 'default',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n mxEvent.disableContextMenu(this.el);\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.graphHandler.scaleGrid = true;\n graph.setPanning(true);\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n let repaintGrid;\n\n // Create grid dynamically (requires canvas)\n (function() {\n try {\n const canvas = document.createElement('canvas');\n canvas.style.position = 'absolute';\n canvas.style.top = '0px';\n canvas.style.left = '0px';\n canvas.style.zIndex = -1;\n graph.container.appendChild(canvas);\n\n const ctx = canvas.getContext('2d');\n\n // Modify event filtering to accept canvas as container\n const mxGraphViewIsContainerEvent =\n mxGraphView.prototype.isContainerEvent;\n mxGraphView.prototype.isContainerEvent = function(evt) {\n return (\n mxGraphViewIsContainerEvent.apply(this, arguments) ||\n mxEvent.getSource(evt) === canvas\n );\n };\n\n let s = 0;\n let gs = 0;\n let tr = new mxPoint();\n let w = 0;\n let h = 0;\n\n repaintGrid = function() {\n if (ctx != null) {\n const bounds = graph.getGraphBounds();\n const width = Math.max(\n bounds.x + bounds.width,\n graph.container.clientWidth\n );\n const height = Math.max(\n bounds.y + bounds.height,\n graph.container.clientHeight\n );\n const sizeChanged = width !== w || height !== h;\n\n if (\n graph.view.scale !== s ||\n graph.view.translate.x !== tr.x ||\n graph.view.translate.y !== tr.y ||\n gs !== graph.gridSize ||\n sizeChanged\n ) {\n tr = graph.view.translate.clone();\n s = graph.view.scale;\n gs = graph.gridSize;\n w = width;\n h = height;\n\n // Clears the background if required\n if (!sizeChanged) {\n ctx.clearRect(0, 0, w, h);\n } else {\n canvas.setAttribute('width', w);\n canvas.setAttribute('height', h);\n }\n\n const tx = tr.x * s;\n const ty = tr.y * s;\n\n // Sets the distance of the grid lines in pixels\n const minStepping = graph.gridSize;\n let stepping = minStepping * s;\n\n if (stepping < minStepping) {\n const count =\n Math.round(Math.ceil(minStepping / stepping) / 2) * 2;\n stepping = count * stepping;\n }\n\n const xs = Math.floor((0 - tx) / stepping) * stepping + tx;\n let xe = Math.ceil(w / stepping) * stepping;\n const ys = Math.floor((0 - ty) / stepping) * stepping + ty;\n let ye = Math.ceil(h / stepping) * stepping;\n\n xe += Math.ceil(stepping);\n ye += Math.ceil(stepping);\n\n const ixs = Math.round(xs);\n const ixe = Math.round(xe);\n const iys = Math.round(ys);\n const iye = Math.round(ye);\n\n // Draws the actual grid\n ctx.strokeStyle = '#f6f6f6';\n ctx.beginPath();\n\n for (let x = xs; x <= xe; x += stepping) {\n x = Math.round((x - tx) / stepping) * stepping + tx;\n const ix = Math.round(x);\n\n ctx.moveTo(ix + 0.5, iys + 0.5);\n ctx.lineTo(ix + 0.5, iye + 0.5);\n }\n\n for (let y = ys; y <= ye; y += stepping) {\n y = Math.round((y - ty) / stepping) * stepping + ty;\n const iy = Math.round(y);\n\n ctx.moveTo(ixs + 0.5, iy + 0.5);\n ctx.lineTo(ixe + 0.5, iy + 0.5);\n }\n\n ctx.closePath();\n ctx.stroke();\n }\n }\n };\n } catch (e) {\n mxLog.show();\n mxLog.debug('Using background image');\n\n this.el.style.backgroundImage = \"url('editors/images/grid.gif')\";\n }\n\n const mxGraphViewValidateBackground =\n mxGraphView.prototype.validateBackground;\n mxGraphView.prototype.validateBackground = function() {\n mxGraphViewValidateBackground.apply(this, arguments);\n repaintGrid();\n };\n })();\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);\n const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n graph.centerZoom = false;\n\n this.el2.appendChild(\n mxUtils.button('+', function() {\n graph.zoomIn();\n })\n );\n\n this.el2.appendChild(\n mxUtils.button('-', function() {\n graph.zoomOut();\n })\n );\n }\n}\n\nexport default Grid;\n",
- "Handles": "/**\n * Copyright (c) 2006-2014, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxVertexHandler from '../mxgraph/handler/mxVertexHandler';\nimport mxCellRenderer from '../mxgraph/view/mxCellRenderer';\nimport mxRectangle from '../mxgraph/util/mxRectangle';\nimport mxCylinder from '../mxgraph/shape/mxCylinder';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxHandle from '../mxgraph/handler/mxHandle';\n\nclass Handles extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '441px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n class MyShape extends mxCylinder {\n defaultPos1 = 20;\n\n defaultPos2 = 60;\n\n getLabelBounds(rect) {\n const pos1 =\n mxUtils.getValue(this.style, 'pos1', this.defaultPos1) * this.scale;\n const pos2 =\n mxUtils.getValue(this.style, 'pos2', this.defaultPos2) * this.scale;\n return new mxRectangle(\n rect.x,\n rect.y + pos1,\n rect.width,\n Math.min(rect.height, pos2) - Math.max(0, pos1)\n );\n }\n\n redrawPath(path, x, y, w, h, isForeground) {\n const pos1 = mxUtils.getValue(this.style, 'pos1', this.defaultPos1);\n const pos2 = mxUtils.getValue(this.style, 'pos2', this.defaultPos2);\n\n if (isForeground) {\n if (pos1 < h) {\n path.moveTo(0, pos1);\n path.lineTo(w, pos1);\n }\n\n if (pos2 < h) {\n path.moveTo(0, pos2);\n path.lineTo(w, pos2);\n }\n } else {\n path.rect(0, 0, w, h);\n }\n }\n }\n mxCellRenderer.registerShape('myShape', MyShape);\n\n class MyCustomVertexHandler extends mxVertexHandler {\n livePreview = true;\n\n rotationEnabled = true;\n\n createCustomHandles() {\n if (this.state.style.shape === 'myShape') {\n // Implements the handle for the first divider\n const firstHandle = new mxHandle(this.state);\n\n firstHandle.getPosition = function(bounds) {\n const pos2 = Math.max(\n 0,\n Math.min(\n bounds.height,\n parseFloat(\n mxUtils.getValue(\n this.state.style,\n 'pos2',\n MyShape.prototype.defaultPos2\n )\n )\n )\n );\n const pos1 = Math.max(\n 0,\n Math.min(\n pos2,\n parseFloat(\n mxUtils.getValue(\n this.state.style,\n 'pos1',\n MyShape.prototype.defaultPos1\n )\n )\n )\n );\n\n return new mxPoint(bounds.getCenterX(), bounds.y + pos1);\n };\n\n firstHandle.setPosition = function(bounds, pt) {\n const pos2 = Math.max(\n 0,\n Math.min(\n bounds.height,\n parseFloat(\n mxUtils.getValue(\n this.state.style,\n 'pos2',\n MyShape.prototype.defaultPos2\n )\n )\n )\n );\n\n this.state.style.pos1 = Math.round(\n Math.max(0, Math.min(pos2, pt.y - bounds.y))\n );\n };\n\n firstHandle.execute = function() {\n this.copyStyle('pos1');\n };\n\n firstHandle.ignoreGrid = true;\n\n // Implements the handle for the second divider\n const secondHandle = new mxHandle(this.state);\n\n secondHandle.getPosition = function(bounds) {\n const pos1 = Math.max(\n 0,\n Math.min(\n bounds.height,\n parseFloat(\n mxUtils.getValue(\n this.state.style,\n 'pos1',\n MyShape.prototype.defaultPos1\n )\n )\n )\n );\n const pos2 = Math.max(\n pos1,\n Math.min(\n bounds.height,\n parseFloat(\n mxUtils.getValue(\n this.state.style,\n 'pos2',\n MyShape.prototype.defaultPos2\n )\n )\n )\n );\n\n return new mxPoint(bounds.getCenterX(), bounds.y + pos2);\n };\n\n secondHandle.setPosition = function(bounds, pt) {\n const pos1 = Math.max(\n 0,\n Math.min(\n bounds.height,\n parseFloat(\n mxUtils.getValue(\n this.state.style,\n 'pos1',\n MyShape.prototype.defaultPos1\n )\n )\n )\n );\n\n this.state.style.pos2 = Math.round(\n Math.max(pos1, Math.min(bounds.height, pt.y - bounds.y))\n );\n };\n\n secondHandle.execute = function() {\n this.copyStyle('pos2');\n };\n\n secondHandle.ignoreGrid = true;\n\n return [firstHandle, secondHandle];\n }\n\n return null;\n }\n }\n\n class MyCustomGraph extends mxGraph {\n createVertexHandler(state) {\n return new MyCustomVertexHandler(state);\n }\n }\n\n // Disables the built-in context menu\n mxEvent.disableContextMenu(this.el);\n\n // Creates the graph inside the given container\n const graph = new MyCustomGraph(this.el);\n graph.setCellsCloneable(true);\n graph.setHtmlLabels(true);\n graph.setPanning(true);\n graph.centerZoom = false;\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(\n parent,\n null,\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n 20,\n 20,\n 240,\n 120,\n 'shape=myShape;whiteSpace=wrap;overflow=hidden;pos1=30;pos2=80;'\n );\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n this.el2.appendChild(\n mxUtils.button('+', function() {\n graph.zoomIn();\n })\n );\n this.el2.appendChild(\n mxUtils.button('-', function() {\n graph.zoomOut();\n })\n );\n }\n}\n\nexport default Handles;\n",
- "Windows": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxLog from '../mxgraph/util/mxLog';\nimport mxWindow from '../mxgraph/util/mxWindow';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxKeyHandler from '../mxgraph/handler/mxKeyHandler';\n\nclass Windows extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'auto',\n position: 'relative',\n height: '500px',\n background: 'lightyellow',\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Note that we're using the container scrollbars for the graph so that the\n // container extends to the parent div inside the window\n let wnd = new mxWindow(\n 'Scrollable, resizable, given height',\n this.el,\n 50,\n 50,\n 220,\n 224,\n true,\n true\n );\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Adds rubberband selection and keystrokes\n graph.setTooltips(true);\n graph.setPanning(true);\n const rubberband = new mxRubberband(graph);\n new mxKeyHandler(graph);\n\n mxEvent.disableContextMenu(this.el);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);\n const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n wnd.setMaximizable(true);\n wnd.setResizable(true);\n wnd.setVisible(true);\n\n const lorem =\n 'Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ';\n let content = document.createElement('div');\n mxUtils.write(content, lorem + lorem + lorem);\n\n wnd = new mxWindow(\n 'Scrollable, resizable, auto height',\n content,\n 300,\n 50,\n 200,\n null,\n true,\n true\n );\n wnd.setMaximizable(true);\n wnd.setScrollable(true);\n wnd.setResizable(true);\n wnd.setVisible(true);\n\n content = content.cloneNode(true);\n content.style.width = '400px';\n\n wnd = new mxWindow(\n 'Scrollable, resizable, fixed content',\n content,\n 520,\n 50,\n 220,\n 200,\n true,\n true\n );\n wnd.setMaximizable(true);\n wnd.setScrollable(true);\n wnd.setResizable(true);\n wnd.setVisible(true);\n\n mxLog.show();\n }\n}\n\nexport default Windows;\n",
- "Template": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n \n Template. This is used as a template HTML file by the\n backends to demonstrate the deployment of the client with a graph embedded\n in the page as XML data (see graph variable in the onload-handler).\n \n *** THIS FILE MUST BE DEPLOYED BY ONE OF THE BACKENDS! ***\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxCodec from '../mxgraph/io/mxCodec';\n\nclass Template extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '241px',\n background:\n \"url('/mxgraph/javascript/examples/editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Adds rubberband selection to the graph\n new mxRubberband(graph);\n\n const doc = mxUtils.parseXml(xml);\n const codec = new mxCodec(doc);\n codec.decode(doc.documentElement, graph.getModel());\n }\n}\n\nexport default Template;\n",
- "Anchors": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxShape from '../mxgraph/shape/mxShape';\nimport mxConnectionConstraint from '../mxgraph/view/mxConnectionConstraint';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxPolyline from '../mxgraph/shape/mxPolyline';\nimport mxCellState from '../mxgraph/view/mxCellState';\n\nclass Anchors extends React.Component {\n constructor(props) {\n super(props);\n }\n\n componentDidMount() {\n // Overridden to define per-shape connection points\n mxGraph.prototype.getAllConnectionConstraints = function(terminal, source) {\n if (terminal != null && terminal.shape != null) {\n if (terminal.shape.stencil != null) {\n if (terminal.shape.stencil.constraints != null) {\n return terminal.shape.stencil.constraints;\n }\n } else if (terminal.shape.constraints != null) {\n return terminal.shape.constraints;\n }\n }\n return null;\n };\n\n // Defines the default constraints for all shapes\n mxShape.prototype.constraints = [\n new mxConnectionConstraint(new mxPoint(0.25, 0), true),\n new mxConnectionConstraint(new mxPoint(0.5, 0), true),\n new mxConnectionConstraint(new mxPoint(0.75, 0), true),\n new mxConnectionConstraint(new mxPoint(0, 0.25), true),\n new mxConnectionConstraint(new mxPoint(0, 0.5), true),\n new mxConnectionConstraint(new mxPoint(0, 0.75), true),\n new mxConnectionConstraint(new mxPoint(1, 0.25), true),\n new mxConnectionConstraint(new mxPoint(1, 0.5), true),\n new mxConnectionConstraint(new mxPoint(1, 0.75), true),\n new mxConnectionConstraint(new mxPoint(0.25, 1), true),\n new mxConnectionConstraint(new mxPoint(0.5, 1), true),\n new mxConnectionConstraint(new mxPoint(0.75, 1), true),\n ];\n\n // Edges have no connection points\n mxPolyline.prototype.constraints = null;\n\n // Disables the built-in context menu\n mxEvent.disableContextMenu(this.el);\n\n // Creates the graph inside the given this.el\n const graph = new mxGraph(this.el);\n graph.setConnectable(true);\n\n // Enables connect preview for the default edge style\n graph.connectionHandler.createEdgeState = function(me) {\n const edge = graph.createEdge(null, null, null, null, null);\n return new mxCellState(\n this.graph.view,\n edge,\n this.graph.getCellStyle(edge)\n );\n };\n\n // Specifies the default edge style\n graph.getStylesheet().getDefaultEdgeStyle().edgeStyle =\n 'orthogonalEdgeStyle';\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex({\n parent,\n value: 'Hello,',\n position: [20, 20],\n size: [80, 30],\n });\n const v2 = graph.insertVertex({\n parent,\n value: 'World!',\n position: [200, 150],\n size: [80, 30],\n });\n const e1 = graph.insertEdge({\n parent,\n value: '',\n position: v1,\n size: v2,\n });\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: 'url(\"editors/images/grid.gif\")',\n cursor: 'default',\n }}\n />\n \n );\n };\n}\n\nexport default Anchors;\n",
- "SecondLabel": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxRectangle from '../mxgraph/util/mxRectangle';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxRectangleShape from '../mxgraph/shape/mxRectangleShape';\nimport mxText from '../mxgraph/shape/mxText';\n\nclass SecondLabel extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '241px',\n background: \"url('editors/images/grid.gif')\",\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Simple solution to add additional text to the rectangle shape definition:\n (function() {\n const mxRectangleShapeIsHtmlAllowed =\n mxRectangleShape.prototype.isHtmlAllowed;\n mxRectangleShape.prototype.isHtmlAllowed = function() {\n return (\n mxRectangleShapeIsHtmlAllowed.apply(this, arguments) &&\n this.state == null\n );\n };\n\n const mxRectangleShapePaintForeground =\n mxRectangleShape.prototype.paintForeground;\n mxRectangleShape.prototype.paintForeground = function(c, x, y, w, h) {\n if (\n this.state != null &&\n this.state.cell.geometry != null &&\n !this.state.cell.geometry.relative\n ) {\n c.setFontColor('#a0a0a0');\n c.text(x + 2, y, 0, 0, this.state.cell.id, 'left', 'top');\n }\n\n mxRectangleShapePaintForeground.apply(this, arguments);\n };\n })();\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n\n // Disables the folding icon\n graph.isCellFoldable = function(cell) {\n return false;\n };\n\n let secondLabelVisible = true;\n\n // Hook for returning shape number for a given cell\n graph.getSecondLabel = function(cell) {\n if (!this.model.isEdge(cell)) {\n // Possible to return any string here\n return `The ID of this cell is ${cell.id}`;\n }\n\n return null;\n };\n\n let relativeChildVerticesVisible = true;\n\n // Overrides method to hide relative child vertices\n graph.isCellVisible = function(cell) {\n return (\n !this.model.isVertex(cell) ||\n cell.geometry == null ||\n !cell.geometry.relative ||\n cell.geometry.relative == relativeChildVerticesVisible\n );\n };\n\n // Creates the shape for the shape number and puts it into the draw pane\n const { redrawShape } = graph.cellRenderer;\n graph.cellRenderer.redrawShape = function(state, force, rendering) {\n const result = redrawShape.apply(this, arguments);\n\n if (\n result &&\n secondLabelVisible &&\n state.cell.geometry != null &&\n !state.cell.geometry.relative\n ) {\n const secondLabel = graph.getSecondLabel(state.cell);\n\n if (\n secondLabel != null &&\n state.shape != null &&\n state.secondLabel == null\n ) {\n state.secondLabel = new mxText(\n secondLabel,\n new mxRectangle(),\n mxConstants.ALIGN_LEFT,\n mxConstants.ALIGN_BOTTOM\n );\n\n // Styles the label\n state.secondLabel.color = 'black';\n state.secondLabel.family = 'Verdana';\n state.secondLabel.size = 8;\n state.secondLabel.fontStyle = mxConstants.FONT_ITALIC;\n state.secondLabel.background = 'yellow';\n state.secondLabel.border = 'black';\n state.secondLabel.valign = 'bottom';\n state.secondLabel.dialect = state.shape.dialect;\n state.secondLabel.dialect = mxConstants.DIALECT_STRICTHTML;\n state.secondLabel.wrap = true;\n graph.cellRenderer.initializeLabel(state, state.secondLabel);\n }\n }\n\n if (state.secondLabel != null) {\n const scale = graph.getView().getScale();\n const bounds = new mxRectangle(\n state.x + state.width - 8 * scale,\n state.y + 8 * scale,\n 35,\n 0\n );\n state.secondLabel.state = state;\n state.secondLabel.value = graph.getSecondLabel(state.cell);\n state.secondLabel.scale = scale;\n state.secondLabel.bounds = bounds;\n state.secondLabel.redraw();\n }\n\n return result;\n };\n\n // Destroys the shape number\n const { destroy } = graph.cellRenderer;\n graph.cellRenderer.destroy = function(state) {\n destroy.apply(this, arguments);\n\n if (state.secondLabel != null) {\n state.secondLabel.destroy();\n state.secondLabel = null;\n }\n };\n\n graph.cellRenderer.getShapesForState = function(state) {\n return [state.shape, state.text, state.secondLabel, state.control];\n };\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Hello,', 30, 40, 80, 30);\n // Alternative solution of creating a second label by creating a realtive child vertex\n // with size (0, 0). This will not be selectable and only the label colors can be used\n // for coloring as the actual shape will have zero size.\n const v11 = graph.insertVertex(\n v1,\n null,\n 'World',\n 1,\n 1,\n 0,\n 0,\n 'align=left;verticalAlign=top;labelBackgroundColor=red;labelBorderColor=black',\n true\n );\n v11.geometry.offset = new mxPoint(-8, -8);\n const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);\n // Another alternative solution of creating a second label as a relative child vertex\n // but this time with an automatic size so that the cell is actually selectable and\n // the background is painted as a shape.\n const v21 = graph.insertVertex(\n v2,\n null,\n 'World',\n 1,\n 1,\n 0,\n 0,\n 'align=left;verticalAlign=top;fillColor=red;rounded=1;spacingLeft=4;spacingRight=4',\n true\n );\n v21.geometry.offset = new mxPoint(-8, -8);\n graph.updateCellSize(v21);\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n // Adds a button to execute the layout\n this.el2.appendChild(\n mxUtils.button('Toggle Child Vertices', function(evt) {\n relativeChildVerticesVisible = !relativeChildVerticesVisible;\n graph.refresh();\n })\n );\n\n // Adds a button to execute the layout\n this.el2.appendChild(\n mxUtils.button('Toggle IDs', function(evt) {\n secondLabelVisible = !secondLabelVisible;\n graph.refresh();\n })\n );\n }\n}\n\nexport default SecondLabel;\n",
- "PageBreaks": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxPrintPreview from '../mxgraph/view/mxPrintPreview';\n\nclass PageBreaks extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n overflow: 'hidden',\n position: 'relative',\n height: '481px',\n background: \"url('editors/images/grid.gif')\",\n cursor: 'default',\n }}\n />\n {\n this.el2 = el;\n }}\n />\n \n );\n }\n\n componentDidMount() {\n mxEvent.disableContextMenu(this.el);\n\n // Creates the graph inside the given container\n const graph = new mxGraph(this.el);\n graph.view.setScale(0.15);\n graph.pageBreaksVisible = true;\n graph.pageBreakDashed = true;\n graph.preferPageSize = true;\n graph.centerZoom = false;\n graph.setPanning(true);\n\n // Account for the header and footer size in the page format\n const headerSize = 100;\n const footerSize = 100;\n\n // Removes header and footer from page height\n graph.pageFormat.height -= headerSize + footerSize;\n\n // Takes zoom into account for moving cells\n graph.graphHandler.scaleGrid = true;\n\n // Enables rubberband selection\n new mxRubberband(graph);\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n graph.getModel().beginUpdate();\n try {\n const v1 = graph.insertVertex(parent, null, 'Hello,', 10, 10, 280, 330);\n const v2 = graph.insertVertex(\n parent,\n null,\n 'World!',\n graph.pageFormat.width * graph.pageScale - 280 - 10,\n graph.pageFormat.height * graph.pageScale - 330 - 10,\n 280,\n 330\n );\n const e1 = graph.insertEdge(parent, null, '', v1, v2);\n } finally {\n // Updates the display\n graph.getModel().endUpdate();\n }\n\n this.el2.appendChild(\n mxUtils.button('Toggle Page Breaks', function(evt) {\n graph.pageBreaksVisible = !graph.pageBreaksVisible;\n graph.sizeDidChange();\n })\n );\n\n this.el2.appendChild(\n mxUtils.button('Zoom In', function(evt) {\n graph.zoomIn();\n })\n );\n\n this.el2.appendChild(\n mxUtils.button('Zoom Out', function(evt) {\n graph.zoomOut();\n })\n );\n\n this.el2.appendChild(\n mxUtils.button('Print', function(evt) {\n // Matches actual printer paper size and avoids blank pages\n const scale = 0.5;\n\n // Applies scale to page\n const pf = mxRectangle.fromRectangle(\n graph.pageFormat || mxConstants.PAGE_FORMAT_A4_PORTRAIT\n );\n pf.width = Math.round(pf.width * scale * graph.pageScale);\n pf.height = Math.round(pf.height * scale * graph.pageScale);\n\n // Finds top left corner of top left page\n const bounds = mxRectangle.fromRectangle(graph.getGraphBounds());\n bounds.x -= graph.view.translate.x * graph.view.scale;\n bounds.y -= graph.view.translate.y * graph.view.scale;\n\n const x0 = Math.floor(bounds.x / pf.width) * pf.width;\n const y0 = Math.floor(bounds.y / pf.height) * pf.height;\n\n const preview = new mxPrintPreview(graph, scale, pf, 0, -x0, -y0);\n preview.marginTop = headerSize * scale * graph.pageScale;\n preview.marginBottom = footerSize * scale * graph.pageScale;\n preview.autoOrigin = false;\n\n const oldRenderPage = preview.renderPage;\n preview.renderPage = function(w, h, x, y, content, pageNumber) {\n const div = oldRenderPage.apply(this, arguments);\n\n const header = document.createElement('div');\n header.style.position = 'absolute';\n header.style.boxSizing = 'border-box';\n header.style.fontFamily = 'Arial,Helvetica';\n header.style.height = `${this.marginTop - 10}px`;\n header.style.textAlign = 'center';\n header.style.verticalAlign = 'middle';\n header.style.marginTop = 'auto';\n header.style.fontSize = '12px';\n header.style.width = '100%';\n\n // Vertical centering for text in header/footer\n header.style.lineHeight = `${this.marginTop - 10}px`;\n\n const footer = header.cloneNode(true);\n\n mxUtils.write(header, `Page ${pageNumber} - Header`);\n header.style.borderBottom = '1px solid gray';\n header.style.top = '0px';\n\n mxUtils.write(footer, `Page ${pageNumber} - Footer`);\n footer.style.borderTop = '1px solid gray';\n footer.style.bottom = '0px';\n\n div.firstChild.appendChild(footer);\n div.firstChild.appendChild(header);\n\n return div;\n };\n\n preview.open();\n })\n );\n\n this.el2.appendChild(\n mxUtils.button('Reset View', function(evt) {\n graph.view.scaleAndTranslate(0.15, 0, 0);\n })\n );\n }\n}\n\nexport default PageBreaks;\n",
- "SwimLanes": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxEvent from '../mxgraph/util/mxEvent';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxRubberband from '../mxgraph/handler/mxRubberband';\nimport mxPoint from '../mxgraph/util/mxPoint';\nimport mxStackLayout from '../mxgraph/layout/mxStackLayout';\nimport mxSwimlaneManager from '../mxgraph/view/mxSwimlaneManager';\nimport mxGraphModel from '../mxgraph/model/mxGraphModel';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxPerimeter from '../mxgraph/view/mxPerimeter';\nimport mxUtils from '../mxgraph/util/mxUtils';\nimport mxEditor from '../mxgraph/editor/mxEditor';\nimport mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';\nimport mxImage from '../mxgraph/util/mxImage';\nimport mxLayoutManager from '../mxgraph/view/mxLayoutManager';\nimport mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';\n\nclass SwimLanes extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n {\n this.el = el;\n }}\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '400px',\n border: 'gray dotted 1px',\n cursor: 'default',\n }}\n />\n \n );\n }\n\n componentDidMount() {\n // Defines an icon for creating new connections in the connection handler.\n // This will automatically disable the highlighting of the source vertex.\n mxConnectionHandler.prototype.connectImage = new mxImage(\n 'images/connector.gif',\n 16,\n 16\n );\n\n // Creates a wrapper editor around a new graph inside\n // the given container using an XML config for the\n // keyboard bindings\n const config = mxUtils\n .load('editors/config/keyhandler-commons.xml')\n .getDocumentElement();\n const editor = new mxEditor(config);\n editor.setGraphContainer(this.el);\n const { graph } = editor;\n const model = graph.getModel();\n\n // Auto-resizes the container\n graph.border = 80;\n graph.getView().translate = new mxPoint(graph.border / 2, graph.border / 2);\n graph.setResizeContainer(true);\n graph.graphHandler.setRemoveCellsFromParent(false);\n\n // Changes the default vertex style in-place\n let style = graph.getStylesheet().getDefaultVertexStyle();\n style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;\n style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';\n style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';\n style[mxConstants.STYLE_FONTSIZE] = 11;\n style[mxConstants.STYLE_STARTSIZE] = 22;\n style[mxConstants.STYLE_HORIZONTAL] = false;\n style[mxConstants.STYLE_FONTCOLOR] = 'black';\n style[mxConstants.STYLE_STROKECOLOR] = 'black';\n delete style[mxConstants.STYLE_FILLCOLOR];\n\n style = mxUtils.clone(style);\n style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;\n style[mxConstants.STYLE_FONTSIZE] = 10;\n style[mxConstants.STYLE_ROUNDED] = true;\n style[mxConstants.STYLE_HORIZONTAL] = true;\n style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';\n delete style[mxConstants.STYLE_STARTSIZE];\n style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'none';\n graph.getStylesheet().putCellStyle('process', style);\n\n style = mxUtils.clone(style);\n style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;\n style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;\n delete style[mxConstants.STYLE_ROUNDED];\n graph.getStylesheet().putCellStyle('state', style);\n\n style = mxUtils.clone(style);\n style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RHOMBUS;\n style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RhombusPerimeter;\n style[mxConstants.STYLE_VERTICAL_ALIGN] = 'top';\n style[mxConstants.STYLE_SPACING_TOP] = 40;\n style[mxConstants.STYLE_SPACING_RIGHT] = 64;\n graph.getStylesheet().putCellStyle('condition', style);\n\n style = mxUtils.clone(style);\n style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_DOUBLE_ELLIPSE;\n style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;\n style[mxConstants.STYLE_SPACING_TOP] = 28;\n style[mxConstants.STYLE_FONTSIZE] = 14;\n style[mxConstants.STYLE_FONTSTYLE] = 1;\n delete style[mxConstants.STYLE_SPACING_RIGHT];\n graph.getStylesheet().putCellStyle('end', style);\n\n style = graph.getStylesheet().getDefaultEdgeStyle();\n style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;\n style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_BLOCK;\n style[mxConstants.STYLE_ROUNDED] = true;\n style[mxConstants.STYLE_FONTCOLOR] = 'black';\n style[mxConstants.STYLE_STROKECOLOR] = 'black';\n\n style = mxUtils.clone(style);\n style[mxConstants.STYLE_DASHED] = true;\n style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_OPEN;\n style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_OVAL;\n graph.getStylesheet().putCellStyle('crossover', style);\n\n // Installs double click on middle control point and\n // changes style of edges between empty and this value\n graph.alternateEdgeStyle = 'elbow=vertical';\n\n // Adds automatic layout and various switches if the\n // graph is enabled\n if (graph.isEnabled()) {\n // Allows new connections but no dangling edges\n graph.setConnectable(true);\n graph.setAllowDanglingEdges(false);\n\n // End-states are no valid sources\n const previousIsValidSource = graph.isValidSource;\n\n graph.isValidSource = function(cell) {\n if (previousIsValidSource.apply(this, arguments)) {\n const style = this.getModel().getStyle(cell);\n\n return (\n style == null || !(style == 'end' || style.indexOf('end') == 0)\n );\n }\n\n return false;\n };\n\n // Start-states are no valid targets, we do not\n // perform a call to the superclass function because\n // this would call isValidSource\n // Note: All states are start states in\n // the example below, so we use the state\n // style below\n graph.isValidTarget = function(cell) {\n const style = this.getModel().getStyle(cell);\n\n return (\n !this.getModel().isEdge(cell) &&\n !this.isSwimlane(cell) &&\n (style == null || !(style == 'state' || style.indexOf('state') == 0))\n );\n };\n\n // Allows dropping cells into new lanes and\n // lanes into new pools, but disallows dropping\n // cells on edges to split edges\n graph.setDropEnabled(true);\n graph.setSplitEnabled(false);\n\n // Returns true for valid drop operations\n graph.isValidDropTarget = function(target, cells, evt) {\n if (this.isSplitEnabled() && this.isSplitTarget(target, cells, evt)) {\n return true;\n }\n\n const model = this.getModel();\n let lane = false;\n let pool = false;\n let cell = false;\n\n // Checks if any lanes or pools are selected\n for (let i = 0; i < cells.length; i++) {\n const tmp = model.getParent(cells[i]);\n lane = lane || this.isPool(tmp);\n pool = pool || this.isPool(cells[i]);\n\n cell = cell || !(lane || pool);\n }\n\n return (\n !pool &&\n cell != lane &&\n ((lane && this.isPool(target)) ||\n (cell && this.isPool(model.getParent(target))))\n );\n };\n\n // Adds new method for identifying a pool\n graph.isPool = function(cell) {\n const model = this.getModel();\n const parent = model.getParent(cell);\n\n return parent != null && model.getParent(parent) == model.getRoot();\n };\n\n // Changes swimlane orientation while collapsed\n graph.model.getStyle = function(cell) {\n let style = mxGraphModel.prototype.getStyle.apply(this, arguments);\n\n if (graph.isCellCollapsed(cell)) {\n if (style != null) {\n style += ';';\n } else {\n style = '';\n }\n\n style += 'horizontal=1;align=left;spacingLeft=14;';\n }\n\n return style;\n };\n\n // Keeps widths on collapse/expand\n const foldingHandler = function(sender, evt) {\n const cells = evt.getProperty('cells');\n\n for (let i = 0; i < cells.length; i++) {\n const geo = graph.model.getGeometry(cells[i]);\n\n if (geo.alternateBounds != null) {\n geo.width = geo.alternateBounds.width;\n }\n }\n };\n\n graph.addListener(mxEvent.FOLD_CELLS, foldingHandler);\n }\n\n // Applies size changes to siblings and parents\n new mxSwimlaneManager(graph);\n\n // Creates a stack depending on the orientation of the swimlane\n const layout = new mxStackLayout(graph, false);\n\n // Makes sure all children fit into the parent swimlane\n layout.resizeParent = true;\n\n // Applies the size to children if parent size changes\n layout.fill = true;\n\n // Only update the size of swimlanes\n layout.isVertexIgnored = function(vertex) {\n return !graph.isSwimlane(vertex);\n };\n\n // Keeps the lanes and pools stacked\n const layoutMgr = new mxLayoutManager(graph);\n\n layoutMgr.getLayout = function(cell) {\n if (\n !model.isEdge(cell) &&\n graph.getModel().getChildCount(cell) > 0 &&\n (model.getParent(cell) == model.getRoot() || graph.isPool(cell))\n ) {\n layout.fill = graph.isPool(cell);\n\n return layout;\n }\n\n return null;\n };\n\n // Gets the default parent for inserting new cells. This\n // is normally the first child of the root (ie. layer 0).\n const parent = graph.getDefaultParent();\n\n // Adds cells to the model in a single step\n model.beginUpdate();\n try {\n const pool1 = graph.insertVertex(parent, null, 'Pool 1', 0, 0, 640, 0);\n pool1.setConnectable(false);\n\n const lane1a = graph.insertVertex(pool1, null, 'Lane A', 0, 0, 640, 110);\n lane1a.setConnectable(false);\n\n const lane1b = graph.insertVertex(pool1, null, 'Lane B', 0, 0, 640, 110);\n lane1b.setConnectable(false);\n\n const pool2 = graph.insertVertex(parent, null, 'Pool 2', 0, 0, 640, 0);\n pool2.setConnectable(false);\n\n const lane2a = graph.insertVertex(pool2, null, 'Lane A', 0, 0, 640, 140);\n lane2a.setConnectable(false);\n\n const lane2b = graph.insertVertex(pool2, null, 'Lane B', 0, 0, 640, 110);\n lane2b.setConnectable(false);\n\n const start1 = graph.insertVertex(\n lane1a,\n null,\n null,\n 40,\n 40,\n 30,\n 30,\n 'state'\n );\n const end1 = graph.insertVertex(\n lane1a,\n null,\n 'A',\n 560,\n 40,\n 30,\n 30,\n 'end'\n );\n\n const step1 = graph.insertVertex(\n lane1a,\n null,\n 'Contact\\nProvider',\n 90,\n 30,\n 80,\n 50,\n 'process'\n );\n const step11 = graph.insertVertex(\n lane1a,\n null,\n 'Complete\\nAppropriate\\nRequest',\n 190,\n 30,\n 80,\n 50,\n 'process'\n );\n const step111 = graph.insertVertex(\n lane1a,\n null,\n 'Receive and\\nAcknowledge',\n 385,\n 30,\n 80,\n 50,\n 'process'\n );\n\n const start2 = graph.insertVertex(\n lane2b,\n null,\n null,\n 40,\n 40,\n 30,\n 30,\n 'state'\n );\n\n const step2 = graph.insertVertex(\n lane2b,\n null,\n 'Receive\\nRequest',\n 90,\n 30,\n 80,\n 50,\n 'process'\n );\n const step22 = graph.insertVertex(\n lane2b,\n null,\n 'Refer to Tap\\nSystems\\nCoordinator',\n 190,\n 30,\n 80,\n 50,\n 'process'\n );\n\n const step3 = graph.insertVertex(\n lane1b,\n null,\n 'Request 1st-\\nGate\\nInformation',\n 190,\n 30,\n 80,\n 50,\n 'process'\n );\n const step33 = graph.insertVertex(\n lane1b,\n null,\n 'Receive 1st-\\nGate\\nInformation',\n 290,\n 30,\n 80,\n 50,\n 'process'\n );\n\n const step4 = graph.insertVertex(\n lane2a,\n null,\n 'Receive and\\nAcknowledge',\n 290,\n 20,\n 80,\n 50,\n 'process'\n );\n const step44 = graph.insertVertex(\n lane2a,\n null,\n 'Contract\\nConstraints?',\n 400,\n 20,\n 50,\n 50,\n 'condition'\n );\n const step444 = graph.insertVertex(\n lane2a,\n null,\n 'Tap for gas\\ndelivery?',\n 480,\n 20,\n 50,\n 50,\n 'condition'\n );\n\n const end2 = graph.insertVertex(\n lane2a,\n null,\n 'B',\n 560,\n 30,\n 30,\n 30,\n 'end'\n );\n const end3 = graph.insertVertex(\n lane2a,\n null,\n 'C',\n 560,\n 84,\n 30,\n 30,\n 'end'\n );\n\n let e = null;\n\n graph.insertEdge(lane1a, null, null, start1, step1);\n graph.insertEdge(lane1a, null, null, step1, step11);\n graph.insertEdge(lane1a, null, null, step11, step111);\n\n graph.insertEdge(lane2b, null, null, start2, step2);\n graph.insertEdge(lane2b, null, null, step2, step22);\n graph.insertEdge(parent, null, null, step22, step3);\n\n graph.insertEdge(lane1b, null, null, step3, step33);\n graph.insertEdge(lane2a, null, null, step4, step44);\n graph.insertEdge(\n lane2a,\n null,\n 'No',\n step44,\n step444,\n 'verticalAlign=bottom'\n );\n graph.insertEdge(\n parent,\n null,\n 'Yes',\n step44,\n step111,\n 'verticalAlign=bottom;horizontal=0;labelBackgroundColor=white;'\n );\n\n graph.insertEdge(\n lane2a,\n null,\n 'Yes',\n step444,\n end2,\n 'verticalAlign=bottom'\n );\n e = graph.insertEdge(\n lane2a,\n null,\n 'No',\n step444,\n end3,\n 'verticalAlign=top'\n );\n e.geometry.points = [\n new mxPoint(\n step444.geometry.x + step444.geometry.width / 2,\n end3.geometry.y + end3.geometry.height / 2\n ),\n ];\n\n graph.insertEdge(parent, null, null, step1, step2, 'crossover');\n graph.insertEdge(parent, null, null, step3, step11, 'crossover');\n e = graph.insertEdge(lane1a, null, null, step11, step33, 'crossover');\n e.geometry.points = [\n new mxPoint(\n step33.geometry.x + step33.geometry.width / 2 + 20,\n step11.geometry.y + (step11.geometry.height * 4) / 5\n ),\n ];\n graph.insertEdge(parent, null, null, step33, step4);\n graph.insertEdge(lane1a, null, null, step111, end1);\n } finally {\n // Updates the display\n model.endUpdate();\n }\n }\n}\n\nexport default SwimLanes;\n",
- "Previews": "import React, { useState } from 'react';\n\nimport SourceCodeDisplay from './SourceCodeDisplay';\nimport examplesListing from './examplesListing.json';\n\nfunction Preview({ sourceKey, content }) {\n const [sourceShown, setSourceShown] = useState(false);\n\n return (\n <>\n {content}\n\n {sourceShown ? (\n
\n ) : (\n Morph
\n This example demonstrates using mxMorphing for simple cell animations.\nFixed points
\n This example demonstrates using fixed connection points for connecting\n edges to vertices.\nFile I/O
\n This example demonstrates reading an XML file, writing a custom parser,\n applying an automatic layout and defining a 2-way edge.\nGrid
\n This example demonstrates drawing a grid dynamically using HTML 5\n canvas.\nHandles
\n This example demonstrates using mxHandle to change custom styles\n interactively.\nWindows
\n This example demonstrates using the mxWindow class for displaying\n windows.\nHello, World!
\nAnchors
\n This example demonstrates defining fixed connection points for all\n shapes.\nSecond label
\n This example demonstrates how to add another string label to vertices.\nPagebreaks
\n This example demonstrates using the pageBreaksVisible and preferPageSize\n switches and adding headers and footers to print output.\nSwimlanes
\n This example demonstrates using swimlanes for pools and lanes and adding\n cells and edges between them. This also demonstrates using the stack\n layout as an automatic layout.\n\n setSourceShown(false)}\n style={{ float: 'right', color: 'blue', cursor: 'pointer' }}\n >\n hide source\n \n \n
\n \n setSourceShown(true)}\n style={{ float: 'right', color: 'blue', cursor: 'pointer' }}\n >\n show source\n \n
\n )}\n \n );\n}\n\nexport default Preview;\n",
- "Folding": "/**\n * Copyright (c) 2006-2013, JGraph Ltd\n * Converted to ES9 syntax/React by David Morrissey 2021\n */\n\nimport React from 'react';\nimport mxGraph from '../mxgraph/view/mxGraph';\nimport mxConstants from '../mxgraph/util/mxConstants';\nimport mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';\nimport mxLayoutManager from '../mxgraph/view/mxLayoutManager';\nimport mxStackLayout from '../mxgraph/layout/mxStackLayout';\n\nclass Folding extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n // A container for the graph\n return (\n <>\n Folding
\n This example demonstrates using a layout to implement a nested group\n structure.\nEdge tolerance
\n This example demonstrates increasing the tolerance for hit detection on\n edges.\nEvents
\n Events. This example demonstrates creating a graph container and using\n the mxDivResizer to update the size, interaction on the graph, including\n marquee selection, custom tooltips, context menu handling and changing\n the default menu opacity. It also demonstrates how to use an edgestyle\n in the default stylesheet, and handle the doubleclick on the adjustment\n point. See also: overlays.html for click event handling.\nLayers
\n This example demonstrates using multiple layers to contain cells.\nWorkflow Monitor
\n This example demonstrates using a graph to display the current state of\n a workflow.\nPermissions
\n This example demonstrates creating permissions to define the available\n operations a the graph.\nBoundary
\n This example demonstrates implementing boundary events in BPMN diagrams.\nHoverstyle
\n This example shows hot to change the style of a vertex on mouseover.\nHello, World!
\n This example demonstrates using a DOM node to create a graph and adding\n vertices and edges.\nDynamic Toolbar
\n This example demonstrates changing the state of the toolbar at runtime.\nDynamic Style
\n This example demonstrates changing the style of a cell dynamically by\n overriding mxGraphModel.getStyle.\nPort References Example
\n This example demonstrates referencing connection points by ID. The main\n difference to the implementation where the connection point is stored in\n the connecting edge is that changes to the original port will be\n reflected in all existing connections since they reference that port.\nGroups
\n This example demonstrates using cells as parts of other cells.\nContext icons
\n This example demonstrates adding icons to selected vertices to carry out\n special operations.\nRadial Tree (Hierarchical) Layout
\n This example demonstrates the use of the hierarchical and organic\n layouts. Note that the hierarchical layout requires another script tag\n in the head of the page.\nHello Port
\n This example demonstrates using the isPort hook for visually connecting\n to another cell.\nClipboard
\n This example demonstrates using the clipboard for providing cross-tab\n and cross-browser copy and paste.\nDrop
\n This example demonstrates handling native drag and drop of images\n (requires modern browser).\nMarkers
\n This example demonstrates creating custom markers and customizing the\n built-in markers.\nOverlays
\n This example demonstrates cell highlighting, overlays and handling click\n and double click events. See also: events.html for more event handling.\nConstituent
\n This example demonstrates using cells as parts of other cells.\nEditing
\n This example demonstrates using the in-place editor trigger to specify\n the editing value and write the new value into a specific field of the\n user object. Wrapping and DOM nodes as labels are also demonstrated\n here.\n\n
\n Double-click the upper/lower half of the cell to edit different fields\n of the user object.\n
Hierarchical Layout
\n This example demonstrates the use of the hierarchical and organic\n layouts. Note that the hierarchical layout requires another script tag\n in the head of the page.\nOffpage connector
\n This example demonstrates creating offpage connectors in a graph and\n loading a new diagram on a single click.\nResources
\n This example demonstrates disabling the Synchronous XMLHttpRequest on\n main thread warning.\nIndicators
\n This example demonstrates the use of indicators, which are small\n subshapes inside a parent shape, typically an mxLabel.\nHover icons
\n This example demonstrates showing icons on vertices as mouse hovers over\n them.\nCollapse
\n This example demonstrates changing the style of a cell based on its\n collapsed state.\nLevel of detail
\n This example demonstrates implementing a level of detail per cell.\nTree
\n This example demonstrates folding of subtrees in a acyclic graph (tree).\nLabels
\n This example demonstrates the use of wrapping and clipping for HTML\n labels of vertices, truncating labels to fit the size of a vertex, and\n manually placing vertex labels and relative children that act as\n \"sublabels\".\nControl
\n This example demonstrates adding controls to specific cells in a graph.\nLabel Position
\n This example demonstrates the use of the label position styles to set\n the position of vertex labels.\nValidation
\n This example demonstrates using multiplicities for automatically\n validating a graph.\nToolbar
\n This example demonstrates using existing cells as templates for creating\n new cells.\nThread
\n This example demonstrates setting overlays in mxGraph from within a\n timed function.\nAnimation
\n This example demonstrates using SVG animations on edges to visualize the\n flow in a pipe.\nPerimeter
\n This example demonstrates how to avoid edge and label intersections.\nJSON data
\n This example demonstrates using JSON to encode/decode parts of the graph\n model in mxCodec.\nWrapping
\n This example demonstrates using HTML markup and word-wrapping in vertex\n and edge labels.\nStencils
\n This example demonstrates using an XML file to define new stencils to be\n used as shapes. See docs/stencils.xsd for the XML schema file.\nUser object
\n This example demonstrates using XML objects as values for cells.\nMerge
\n This example demonstrates using the mergeChildren function to merge two\n graphs.\nOrgchart
\nVisibility
\n This example demonstrates using various solutions for hiding and showing\n cells.\nShape
\n This example demonstrates how to implement and use a custom shape.\nImages
\n This example demonstrates using background images and images for for the\n label- and image-shape.\nStylesheet
\n This example demonstrates using a custom stylesheet and control points\n in edges, as well as overriding the getLabel and getTooltip function to\n return dynamic information, and making a supercall in JavaScript.\nExtend canvas
\n This example demonstrates implementing an infinite canvas with\n scrollbars.\nDynamic loading
\n This example demonstrates loading graph model data dynamically to limit\n the number of cells in the model.\nAuto layout
\n This example demonstrates running and animating a layout algorithm after\n every change to a graph.\nFixed icon
\n This example demonstrates customizing the icon position in the mxLabel\n shape.\nGuides
\n This example demonstrates the guides feature which aligns the current\n selection to the existing vertices in the graph. This feature is in RFC\n state. Creating a grid using a canvas and installing a key handler for\n cursor keys is also demonstrated here, as well as snapping waypoints to\n terminals.\nDragsource
\n This example demonstrates using one drag source for multiple graphs and\n changing the drag icon.\nOrthogonal
\n This example demonstrates the use of port constraints and orthogonal\n edge styles and handlers.\nContext icons
- This example demonstrates adding icons to selected vertices to carry out - special operations. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
- );
- };
-
- componentDidMount() {
- class mxVertexToolHandler extends mxVertexHandler {
- // Defines a subclass for mxVertexHandler that adds a set of clickable
- // icons to every selected vertex.
-
- domNode = null;
-
- init() {
- super.init();
-
- // In this example we force the use of DIVs for images in IE. This
- // handles transparency in PNG images properly in IE and fixes the
- // problem that IE routes all mouse events for a gesture via the
- // initial IMG node, which means the target vertices
- this.domNode = document.createElement('div');
- this.domNode.style.position = 'absolute';
- this.domNode.style.whiteSpace = 'nowrap';
-
- // Workaround for event redirection via image tag in quirks and IE8
- const createImage = src => {
- return mxUtils.createImage(src);
- };
-
- // Delete
- let img = createImage('images/delete2.png');
- img.setAttribute('title', 'Delete');
- img.style.cursor = 'pointer';
- img.style.width = '16px';
- img.style.height = '16px';
- mxEvent.addGestureListeners(img, evt => {
- // Disables dragging the image
- mxEvent.consume(evt);
- });
- mxEvent.addListener(img, 'click', evt => {
- this.graph.removeCells([this.state.cell]);
- mxEvent.consume(evt);
- });
- this.domNode.appendChild(img);
-
- // Size
- img = createImage('images/fit_to_size.png');
- img.setAttribute('title', 'Resize');
- img.style.cursor = 'se-resize';
- img.style.width = '16px';
- img.style.height = '16px';
-
- mxEvent.addGestureListeners(img, evt => {
- this.start(mxEvent.getClientX(evt), mxEvent.getClientY(evt), 7);
- this.graph.isMouseDown = true;
- this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
- mxEvent.consume(evt);
- });
- this.domNode.appendChild(img);
-
- // Move
- img = createImage('images/plus.png');
- img.setAttribute('title', 'Move');
- img.style.cursor = 'move';
- img.style.width = '16px';
- img.style.height = '16px';
-
- mxEvent.addGestureListeners(img, evt => {
- this.graph.graphHandler.start(
- this.state.cell,
- mxEvent.getClientX(evt),
- mxEvent.getClientY(evt)
- );
- this.graph.graphHandler.cellWasClicked = true;
- this.graph.isMouseDown = true;
- this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
- mxEvent.consume(evt);
- });
- this.domNode.appendChild(img);
-
- // Connect
- img = createImage('images/check.png');
- img.setAttribute('title', 'Connect');
- img.style.cursor = 'pointer';
- img.style.width = '16px';
- img.style.height = '16px';
-
- mxEvent.addGestureListeners(img, evt => {
- const pt = mxUtils.convertPoint(
- this.graph.container,
- mxEvent.getClientX(evt),
- mxEvent.getClientY(evt)
- );
- this.graph.connectionHandler.start(this.state, pt.x, pt.y);
- this.graph.isMouseDown = true;
- this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
- mxEvent.consume(evt);
- });
- this.domNode.appendChild(img);
-
- this.graph.container.appendChild(this.domNode);
- this.redrawTools();
- }
-
- redraw() {
- super.redraw();
- this.redrawTools();
- }
-
- redrawTools() {
- if (this.state != null && this.domNode != null) {
- const dy = 4;
- this.domNode.style.left = `${this.state.x + this.state.width - 56}px`;
- this.domNode.style.top = `${this.state.y + this.state.height + dy}px`;
- }
- }
-
- destroy(sender, me) {
- super.destroy(sender, me);
-
- if (this.domNode != null) {
- this.domNode.parentNode.removeChild(this.domNode);
- this.domNode = null;
- }
- }
- }
-
- class MyCustomGraph extends mxGraph {
- createHandler(state) {
- if (state != null && state.cell.isVertex()) {
- return new mxVertexToolHandler(state);
- }
- return super.createHandler(state);
- }
- }
-
- // Creates the graph inside the given container
- const graph = new MyCustomGraph(this.el);
- graph.setConnectable(true);
- graph.connectionHandler.createTarget = true;
-
- // Uncomment the following if you want the container
- // to fit the size of the graph
- // graph.setResizeContainer(true);
-
- // Enables rubberband selection
- new mxRubberband(graph);
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- const parent = graph.getDefaultParent();
-
- // Adds cells to the model in a single step
- graph.batchUpdate(() => {
- const v1 = graph.insertVertex({
- parent,
- value: 'Hello,',
- position: [20, 20],
- size: [80, 30],
- });
- const v2 = graph.insertVertex({
- parent,
- value: 'World!',
- position: [200, 150],
- size: [80, 30],
- });
- const e1 = graph.insertEdge({
- parent,
- source: v1,
- target: v2,
- });
- });
- };
-}
-
-export default ContextIcons;
diff --git a/src/pages/icons_images/Control.js b/src/pages/icons_images/Control.js
deleted file mode 100644
index 9a42bb5ec..000000000
--- a/src/pages/icons_images/Control.js
+++ /dev/null
@@ -1,203 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
-import mxCellRenderer from '../../mxgraph/view/cell/mxCellRenderer';
-import mxImageShape from '../../mxgraph/shape/node/mxImageShape';
-import mxImage from '../../mxgraph/util/image/mxImage';
-
-class Control extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Control
- This example demonstrates adding controls to specific cells in a graph. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- height: '441px',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
{
- this.el2 = el;
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Specifies the URL and size of the new control
- const deleteImage = new mxImage(
- 'editors/images/overlays/forbidden.png',
- 16,
- 16
- );
-
- class MyCustomCellRenderer extends mxCellRenderer {
- createControl(state) {
- super.createControl(state);
-
- const { graph } = state.view;
-
- if (state.cell.isVertex()) {
- if (state.deleteControl == null) {
- const b = new mxRectangle(
- 0,
- 0,
- deleteImage.width,
- deleteImage.height
- );
- state.deleteControl = new mxImageShape(b, deleteImage.src);
- state.deleteControl.dialect = graph.dialect;
- state.deleteControl.preserveImageAspect = false;
-
- this.initControl(state, state.deleteControl, false, function(evt) {
- if (graph.isEnabled()) {
- graph.removeCells([state.cell]);
- mxEvent.consume(evt);
- }
- });
- }
- } else if (state.deleteControl != null) {
- state.deleteControl.destroy();
- state.deleteControl = null;
- }
- }
-
- getDeleteControlBounds(state) {
- // Helper function to compute the bounds of the control
- if (state.deleteControl != null) {
- const oldScale = state.deleteControl.scale;
- const w = state.deleteControl.bounds.width / oldScale;
- const h = state.deleteControl.bounds.height / oldScale;
- const s = state.view.scale;
-
- return state.cell.isEdge()
- ? new mxRectangle(
- state.x + state.width / 2 - (w / 2) * s,
- state.y + state.height / 2 - (h / 2) * s,
- w * s,
- h * s
- )
- : new mxRectangle(
- state.x + state.width - w * s,
- state.y,
- w * s,
- h * s
- );
- }
- return null;
- }
-
- redrawControl(state) {
- // Overridden to update the scale and bounds of the control
- super.redrawControl(state);
-
- if (state.deleteControl != null) {
- const bounds = this.getDeleteControlBounds(state);
- const s = state.view.scale;
-
- if (
- state.deleteControl.scale !== s ||
- !state.deleteControl.bounds.equals(bounds)
- ) {
- state.deleteControl.bounds = bounds;
- state.deleteControl.scale = s;
- state.deleteControl.redraw();
- }
- }
- }
-
- destroy(state) {
- // Overridden to remove the control if the state is destroyed
- super.destroy(state);
-
- if (state.deleteControl != null) {
- state.deleteControl.destroy();
- state.deleteControl = null;
- }
- }
- }
-
- class MyCustomGraph extends mxGraph {
- createCellRenderer() {
- return new MyCustomCellRenderer();
- }
- }
-
- // Creates the graph inside the given container
- const graph = new MyCustomGraph(this.el);
- graph.setPanning(true);
-
- // Uncomment the following if you want the container
- // to fit the size of the graph
- // graph.setResizeContainer(true);
-
- // Enables rubberband selection
- new mxRubberband(graph);
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- const parent = graph.getDefaultParent();
-
- // Adds cells to the model in a single step
- graph.getModel().beginUpdate();
- try {
- const v1 = graph.insertVertex({
- parent,
- value: 'Hello,',
- position: [20, 20],
- size: [80, 30],
- });
- const v2 = graph.insertVertex({
- parent,
- value: 'World!',
- position: [200, 150],
- size: [80, 30],
- });
- const e1 = graph.insertEdge({
- parent,
- source: v1,
- target: v2,
- });
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
-
- graph.centerZoom = false;
-
- this.el2.appendChild(
- mxUtils.button('Zoom In', () => {
- graph.zoomIn();
- })
- );
-
- this.el2.appendChild(
- mxUtils.button('Zoom Out', () => {
- graph.zoomOut();
- })
- );
- }
-}
-
-export default Control;
diff --git a/src/pages/icons_images/HoverIcons.js b/src/pages/icons_images/HoverIcons.js
deleted file mode 100644
index 14ee55e42..000000000
--- a/src/pages/icons_images/HoverIcons.js
+++ /dev/null
@@ -1,221 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
-import mxImage from '../../mxgraph/util/image/mxImage';
-
-class HoverIcons extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Hover icons
- This example demonstrates showing icons on vertices as mouse hovers over - them. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Defines an icon for creating new connections in the connection handler.
- // This will automatically disable the highlighting of the source vertex.
- mxConnectionHandler.prototype.connectImage = new mxImage(
- 'images/connector.gif',
- 16,
- 16
- );
-
- // Defines a new class for all icons
- class mxIconSet {
- constructor(state) {
- this.images = [];
- const { graph } = state.view;
-
- // Icon1
- let img = mxUtils.createImage('images/copy.png');
- img.setAttribute('title', 'Duplicate');
- Object.assign(img.style, {
- cursor: 'pointer',
- width: '16px',
- height: '16px',
- position: 'absolute',
- left: `${state.x + state.width}px`,
- top: `${state.y + state.height}px`,
- });
-
- mxEvent.addGestureListeners(img, evt => {
- const s = graph.gridSize;
- graph.setSelectionCells(graph.moveCells([state.cell], s, s, true));
- mxEvent.consume(evt);
- this.destroy();
- });
-
- state.view.graph.container.appendChild(img);
- this.images.push(img);
-
- // Delete
- img = mxUtils.createImage('images/delete2.png');
- img.setAttribute('title', 'Delete');
- Object.assign(img.style, {
- cursor: 'pointer',
- width: '16px',
- height: '16px',
- position: 'absolute',
- left: `${state.x + state.width}px`,
- top: `${state.y - 16}px`,
- });
-
- mxEvent.addGestureListeners(img, evt => {
- // Disables dragging the image
- mxEvent.consume(evt);
- });
-
- mxEvent.addListener(img, 'click', evt => {
- graph.removeCells([state.cell]);
- mxEvent.consume(evt);
- this.destroy();
- });
-
- state.view.graph.container.appendChild(img);
- this.images.push(img);
- }
-
- destroy() {
- if (this.images != null) {
- for (const img of this.images) {
- img.parentNode.removeChild(img);
- }
- }
- this.images = null;
- }
- }
-
- // Creates the graph inside the given container
- const graph = new mxGraph(this.el);
- graph.setConnectable(true);
-
- // Enables rubberband selection
- new mxRubberband(graph);
-
- // Defines the tolerance before removing the icons
- const ICON_TOLERANCE = 20;
-
- // Shows icons if the mouse is over a cell
- graph.addMouseListener({
- currentState: null,
- currentIconSet: null,
-
- mouseDown(sender, me) {
- // Hides icons on mouse down
- if (this.currentState != null) {
- this.dragLeave(me.getEvent(), this.currentState);
- this.currentState = null;
- }
- },
-
- mouseMove(sender, me) {
- if (
- this.currentState != null &&
- (me.getState() === this.currentState || me.getState() == null)
- ) {
- const tol = ICON_TOLERANCE;
- const tmp = new mxRectangle(
- me.getGraphX() - tol,
- me.getGraphY() - tol,
- 2 * tol,
- 2 * tol
- );
- if (mxUtils.intersects(tmp, this.currentState)) {
- return;
- }
- }
-
- let tmp = graph.view.getState(me.getCell());
-
- // Ignore everything but vertices
- if (
- graph.isMouseDown ||
- (tmp != null && !tmp.cell.isVertex())
- ) {
- tmp = null;
- }
-
- if (tmp !== this.currentState) {
- if (this.currentState != null) {
- this.dragLeave(me.getEvent(), this.currentState);
- }
-
- this.currentState = tmp;
- if (this.currentState != null) {
- this.dragEnter(me.getEvent(), this.currentState);
- }
- }
- },
-
- mouseUp(sender, me) {},
-
- dragEnter(evt, state) {
- if (this.currentIconSet == null) {
- this.currentIconSet = new mxIconSet(state);
- }
- },
-
- dragLeave(evt, state) {
- if (this.currentIconSet != null) {
- this.currentIconSet.destroy();
- this.currentIconSet = null;
- }
- },
- });
-
- // 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.batchUpdate(() => {
- const v1 = graph.insertVertex({
- parent,
- value: 'Hello,',
- position: [20, 20],
- size: [80, 30],
- });
- const v2 = graph.insertVertex({
- parent,
- value: 'World!',
- position: [200, 150],
- size: [80, 30],
- });
- const e1 = graph.insertEdge({
- parent,
- source: v1,
- target: v2,
- });
- });
- }
-}
-
-export default HoverIcons;
diff --git a/src/pages/index.js b/src/pages/index.js
deleted file mode 100644
index 144ef21d8..000000000
--- a/src/pages/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Basic from './basic';
-
-export default function Home() {
- return
Labels
- This example demonstrates the use of wrapping and clipping for HTML - labels of vertices, truncating labels to fit the size of a vertex, and - manually placing vertex labels and relative children that act as - "sublabels". - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- height: '300px',
- 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 = cell.getGeometry();
-
- 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 = cell.getGeometry();
-
- if (
- !cell.isCollapsed() &&
- geometry != null &&
- (geometry.offset == null ||
- (geometry.offset.x == 0 && geometry.offset.y == 0)) &&
- cell.isVertex() &&
- 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 cell.isCollapsed();
- };
-
- // Enables clipping of vertex labels if no offset is defined
- graph.isLabelClipped = function(cell) {
- const geometry = cell.getGeometry();
-
- 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 Labels;
diff --git a/src/pages/labels/SecondLabel.js b/src/pages/labels/SecondLabel.js
deleted file mode 100644
index c60096673..000000000
--- a/src/pages/labels/SecondLabel.js
+++ /dev/null
@@ -1,243 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxRectangleShape from '../../mxgraph/shape/node/mxRectangleShape';
-import mxText from '../../mxgraph/shape/mxText';
-
-class SecondLabel extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Second label
- This example demonstrates how to add another string label to vertices. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- }}
- />
-
{
- this.el2 = el;
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Simple solution to add additional text to the rectangle shape definition:
- (function() {
- const mxRectangleShapeIsHtmlAllowed =
- mxRectangleShape.prototype.isHtmlAllowed;
- mxRectangleShape.prototype.isHtmlAllowed = function() {
- return (
- mxRectangleShapeIsHtmlAllowed.apply(this, arguments) &&
- this.state == null
- );
- };
-
- const mxRectangleShapePaintForeground =
- mxRectangleShape.prototype.paintForeground;
- mxRectangleShape.prototype.paintForeground = function(c, x, y, w, h) {
- if (
- this.state != null &&
- this.state.cell.geometry != null &&
- !this.state.cell.geometry.relative
- ) {
- c.setFontColor('#a0a0a0');
- c.text(x + 2, y, 0, 0, this.state.cell.id, 'left', 'top');
- }
-
- mxRectangleShapePaintForeground.apply(this, arguments);
- };
- })();
-
- // Creates the graph inside the given container
- const graph = new mxGraph(this.el);
-
- // Disables the folding icon
- graph.isCellFoldable = function(cell) {
- return false;
- };
-
- let secondLabelVisible = true;
-
- // Hook for returning shape number for a given cell
- graph.getSecondLabel = function(cell) {
- if (!cell.isEdge()) {
- // Possible to return any string here
- return `The ID of this cell is ${cell.id}`;
- }
-
- return null;
- };
-
- let relativeChildVerticesVisible = true;
-
- // Overrides method to hide relative child vertices
- const isVisible = function() {
- return (
- !cell.isVertex() ||
- cell.geometry == null ||
- !cell.geometry.relative ||
- cell.geometry.relative == relativeChildVerticesVisible
- );
- };
-
- // Creates the shape for the shape number and puts it into the draw pane
- const { redrawShape } = graph.cellRenderer;
- graph.cellRenderer.redrawShape = function(state, force, rendering) {
- const result = redrawShape.apply(this, arguments);
-
- if (
- result &&
- secondLabelVisible &&
- state.cell.geometry != null &&
- !state.cell.geometry.relative
- ) {
- const secondLabel = graph.getSecondLabel(state.cell);
-
- if (
- secondLabel != null &&
- state.shape != null &&
- state.secondLabel == null
- ) {
- state.secondLabel = new mxText(
- secondLabel,
- new mxRectangle(),
- mxConstants.ALIGN_LEFT,
- mxConstants.ALIGN_BOTTOM
- );
-
- // Styles the label
- state.secondLabel.color = 'black';
- state.secondLabel.family = 'Verdana';
- state.secondLabel.size = 8;
- state.secondLabel.fontStyle = mxConstants.FONT_ITALIC;
- state.secondLabel.background = 'yellow';
- state.secondLabel.border = 'black';
- state.secondLabel.valign = 'bottom';
- state.secondLabel.dialect = state.shape.dialect;
- state.secondLabel.dialect = mxConstants.DIALECT_STRICTHTML;
- state.secondLabel.wrap = true;
- graph.cellRenderer.initializeLabel(state, state.secondLabel);
- }
- }
-
- if (state.secondLabel != null) {
- const scale = graph.getView().getScale();
- const bounds = new mxRectangle(
- state.x + state.width - 8 * scale,
- state.y + 8 * scale,
- 35,
- 0
- );
- state.secondLabel.state = state;
- state.secondLabel.value = graph.getSecondLabel(state.cell);
- state.secondLabel.scale = scale;
- state.secondLabel.bounds = bounds;
- state.secondLabel.redraw();
- }
-
- return result;
- };
-
- // Destroys the shape number
- const { destroy } = graph.cellRenderer;
- graph.cellRenderer.destroy = function(state) {
- destroy.apply(this, arguments);
-
- if (state.secondLabel != null) {
- state.secondLabel.destroy();
- state.secondLabel = null;
- }
- };
-
- graph.cellRenderer.getShapesForState = function(state) {
- return [state.shape, state.text, state.secondLabel, state.control];
- };
-
- // 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,', 30, 40, 80, 30);
- // Alternative solution of creating a second label by creating a realtive child vertex
- // with size (0, 0). This will not be selectable and only the label colors can be used
- // for coloring as the actual shape will have zero size.
- const v11 = graph.insertVertex(
- v1,
- null,
- 'World',
- 1,
- 1,
- 0,
- 0,
- 'align=left;verticalAlign=top;labelBackgroundColor=red;labelBorderColor=black',
- true
- );
- v11.geometry.offset = new mxPoint(-8, -8);
- const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
- // Another alternative solution of creating a second label as a relative child vertex
- // but this time with an automatic size so that the cell is actually selectable and
- // the background is painted as a shape.
- const v21 = graph.insertVertex(
- v2,
- null,
- 'World',
- 1,
- 1,
- 0,
- 0,
- 'align=left;verticalAlign=top;fillColor=red;rounded=1;spacingLeft=4;spacingRight=4',
- true
- );
- v21.geometry.offset = new mxPoint(-8, -8);
- graph.updateCellSize(v21);
- const e1 = graph.insertEdge(parent, null, '', v1, v2);
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
-
- // Adds a button to execute the layout
- this.el2.appendChild(
- mxUtils.button('Toggle Child Vertices', function(evt) {
- relativeChildVerticesVisible = !relativeChildVerticesVisible;
- graph.refresh();
- })
- );
-
- // Adds a button to execute the layout
- this.el2.appendChild(
- mxUtils.button('Toggle IDs', function(evt) {
- secondLabelVisible = !secondLabelVisible;
- graph.refresh();
- })
- );
- }
-}
-
-export default SecondLabel;
diff --git a/src/pages/labels/Wrapping.js b/src/pages/labels/Wrapping.js
deleted file mode 100644
index e4ac5c77a..000000000
--- a/src/pages/labels/Wrapping.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-
-class Wrapping extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Wrapping
- This example demonstrates using HTML markup and word-wrapping in vertex - and edge labels. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Creates the graph inside the given container
- const graph = new mxGraph(this.el);
-
- // Enables HTML labels as wrapping is only available for those
- graph.setHtmlLabels(true);
-
- // Disables in-place editing for edges
- graph.isCellEditable = function(cell) {
- return !cell.isEdge();
- };
-
- // 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.batchUpdate(() => {
- const v1 = graph.insertVertex({
- parent,
- value: 'Cum Caesar vidisset, portum plenum esse, iuxta navigavit.',
- position: [20, 20],
- size: [100, 70],
- style: 'whiteSpace=wrap;',
- });
- const v2 = graph.insertVertex({
- parent,
- value: 'Cum Caesar vidisset, portum plenum esse, iuxta navigavit.',
- position: [220, 150],
- size: [80, 70],
- style: 'whiteSpace=wrap;',
- });
- const e1 = graph.insertEdge({
- parent,
- value: 'Cum Caesar vidisset, portum plenum esse, iuxta navigavit.',
- source: v1,
- target: v2,
- style: 'whiteSpace=wrap;',
- });
- e1.geometry.width = 100;
- });
- }
-}
-
-export default Wrapping;
diff --git a/src/pages/layout/Collapse.js b/src/pages/layout/Collapse.js
deleted file mode 100644
index 689d192f8..000000000
--- a/src/pages/layout/Collapse.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
-import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
-
-class Collapse extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Collapse
- This example demonstrates changing the style of a cell based on its - collapsed state. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
- );
- };
-
- componentDidMount() {
- const graph = new mxGraph(this.el);
- const parent = graph.getDefaultParent();
-
- const getStyle = function() {
- // Extends mxGraphModel.getStyle to show an image when collapsed
- let style = super.getStyle();
- if (this.isCollapsed()) {
- style =
- `${style};shape=image;image=http://www.jgraph.com/images/mxgraph.gif;` +
- `noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`;
- }
- return style;
- }
-
- graph.batchUpdate(() => {
- const v1 = graph.insertVertex({
- parent,
- value: 'Container',
- position: [20, 20],
- size: [200, 200],
- style: 'shape=swimlane;startSize=20;',
- });
- v1.geometry.alternateBounds = new mxRectangle(0, 0, 110, 70);
- v1.getStyle = getStyle;
-
- const v11 = graph.insertVertex({
- parent: v1,
- value: 'Hello,',
- position: [10, 40],
- size: [120, 80],
- });
- v11.getStyle = getStyle;
- });
- };
-}
-
-export default Collapse;
diff --git a/src/pages/layout/Constituent.js b/src/pages/layout/Constituent.js
deleted file mode 100644
index ac882a4ff..000000000
--- a/src/pages/layout/Constituent.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
-
-class Constituent extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Constituent
- This example demonstrates using cells as parts of other cells. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- height: '241px',
- background: 'url("editors/images/grid.gif")',
- cursor: 'default',
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Disables the built-in context menu
- mxEvent.disableContextMenu(this.el);
-
- class MyCustomGraphHandler extends mxGraphHandler {
- /**
- * Redirects start drag to parent.
- */
- getInitialCellForEvent(me) {
- let cell = super.getInitialCellForEvent(me);
- if (this.graph.isPart(cell)) {
- cell = this.cell.getParent();
- }
- return cell;
- }
- }
-
- class MyCustomGraph extends mxGraph {
- foldingEnabled = false;
-
- recursiveResize = true;
-
- isPart(cell) {
- // Helper method to mark parts with constituent=1 in the style
- return this.getCurrentCellStyle(cell).constituent == '1';
- }
-
- selectCellForEvent(cell, evt) {
- // Redirects selection to parent
- if (this.isPart(cell)) {
- cell = cell.getParent();
- }
- super.selectCellForEvent(cell, evt);
- }
-
- createGraphHandler() {
- return new MyCustomGraphHandler(this);
- }
- }
-
- // Creates the graph inside the given container
- const graph = new MyCustomGraph(this.el);
-
- // Enables rubberband selection
- new mxRubberband(graph);
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- const parent = graph.getDefaultParent();
-
- // Adds cells to the model in a single step
- graph.batchUpdate(() => {
- const v1 = graph.insertVertex({
- parent,
- position: [20, 20],
- size: [120, 70],
- });
- const v2 = graph.insertVertex({
- parent: v1,
- value: 'Constituent',
- position: [20, 20],
- size: [80, 30],
- style: 'constituent=1;',
- });
- });
- }
-}
-
-export default Constituent;
diff --git a/src/pages/layout/Groups.js b/src/pages/layout/Groups.js
deleted file mode 100644
index e7076344e..000000000
--- a/src/pages/layout/Groups.js
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
-import mxPopupMenuHandler from '../../mxgraph/handler/mxPopupMenuHandler';
-
-class Groups extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Groups
- This example demonstrates using cells as parts of other cells. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Overrides check for valid roots
- mxGraph.prototype.isValidRoot = function() {
- return false;
- };
-
- // Don't clear selection if multiple cells selected
- const graphHandlerMouseDown = mxGraphHandler.prototype.mouseDown;
- mxGraphHandler.prototype.mouseDown = function(sender, me) {
- graphHandlerMouseDown.apply(this, arguments);
-
- if (
- this.graph.isCellSelected(me.getCell()) &&
- this.graph.getSelectionCount() > 1
- ) {
- this.delayedSelection = false;
- }
- };
-
- // Selects descendants before children selection mode
- const graphHandlerGetInitialCellForEvent =
- mxGraphHandler.prototype.getInitialCellForEvent;
- mxGraphHandler.prototype.getInitialCellForEvent = function(me) {
- const model = this.graph.getModel();
- const psel = this.graph.getSelectionCell().getParent();
- let cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);
- let parent = cell.getParent();
-
- if (psel == null || (psel != cell && psel != parent)) {
- while (
- !this.graph.isCellSelected(cell) &&
- !this.graph.isCellSelected(parent) &&
- parent.isVertex() &&
- !this.graph.isValidRoot(parent)
- ) {
- cell = parent;
- parent = this.cell.getParent();
- }
- }
-
- return cell;
- };
-
- // Selection is delayed to mouseup if child selected
- const graphHandlerIsDelayedSelection =
- mxGraphHandler.prototype.isDelayedSelection;
- mxGraphHandler.prototype.isDelayedSelection = function(cell) {
- let result = graphHandlerIsDelayedSelection.apply(this, arguments);
- const model = this.graph.getModel();
- const psel = this.graph.getSelectionCell().getParent();
- const parent = cell.getParent();
-
- if (psel == null || (psel != cell && psel != parent)) {
- if (
- !this.graph.isCellSelected(cell) &&
- parent.isVertex() &&
- !this.graph.isValidRoot(parent)
- ) {
- result = true;
- }
- }
-
- return result;
- };
-
- // Delayed selection of parent group
- mxGraphHandler.prototype.selectDelayed = function(me) {
- let cell = me.getCell();
-
- if (cell == null) {
- cell = this.cell;
- }
-
- const model = this.graph.getModel();
- let parent = cell.getParent();
-
- while (
- this.graph.isCellSelected(cell) &&
- parent.isVertex() &&
- !this.graph.isValidRoot(parent)
- ) {
- cell = parent;
- parent = cell.getParent();
- }
-
- this.graph.selectCellForEvent(cell, me.getEvent());
- };
-
- // Returns last selected ancestor
- mxPopupMenuHandler.prototype.getCellForPopupEvent = function(me) {
- let cell = me.getCell();
- const model = this.graph.getModel();
- let parent = cell.getParent();
-
- while (parent.isVertex() && !this.graph.isValidRoot(parent)) {
- if (this.graph.isCellSelected(parent)) {
- cell = parent;
- }
- parent = parent.getParent();
- }
- return cell;
- };
-
- // Creates the graph inside the given container
- const graph = new mxGraph(this.el);
- graph.constrainChildren = false;
- graph.extendParents = false;
- graph.extendParentsOnAdd = false;
-
- // Uncomment the following if you want the container
- // to fit the size of the graph
- // graph.setResizeContainer(true);
-
- // Enables rubberband selection
- new mxRubberband(graph);
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- const parent = graph.getDefaultParent();
-
- // Adds cells to the model in a single step
- graph.getModel().beginUpdate();
- try {
- const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 120, 60);
- const v2 = graph.insertVertex(v1, null, 'World!', 90, 20, 60, 20);
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
- }
-}
-
-export default Groups;
diff --git a/src/pages/layout/Layers.js b/src/pages/layout/Layers.js
deleted file mode 100644
index 645943edd..000000000
--- a/src/pages/layout/Layers.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxCell from '../../mxgraph/view/cell/mxCell';
-import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
-import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxUtils from '../../mxgraph/util/mxUtils';
-
-class Layers extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Layers
- This example demonstrates using multiple layers to contain cells. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- position: 'relative',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- }}
- />
-
{
- this.el2 = el;
- }}
- />
-
- );
- }
-
- 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();
- }
-
- this.el2.appendChild(
- mxUtils.button('Layer 0', function() {
- model.setVisible(layer0, !layer0.isVisible());
- })
- );
-
- this.el2.appendChild(
- mxUtils.button('Layer 1', function() {
- model.setVisible(layer1, !layer1.isVisible());
- })
- );
- }
-}
-
-export default Layers;
diff --git a/src/pages/layout/OrgChart.js b/src/pages/layout/OrgChart.js
deleted file mode 100644
index 5e4a18ee9..000000000
--- a/src/pages/layout/OrgChart.js
+++ /dev/null
@@ -1,416 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
-
- Orgchart. This example demonstrates using
- automatic layouts, fit to page zoom and poster print (across
- multiple pages).
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxPrintPreview from '../../mxgraph/view/graph/mxPrintPreview';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxCellOverlay from '../../mxgraph/view/cell/mxCellOverlay';
-import mxImage from '../../mxgraph/util/image/mxImage';
-import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxWindow from '../../mxgraph/util/gui/mxWindow';
-import mxToolbar from '../../mxgraph/util/gui/mxToolbar';
-import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
-import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
-import mxCompactTreeLayout from '../../mxgraph/layout/mxCompactTreeLayout';
-import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
-import mxClient from '../../mxgraph/mxClient';
-import mxOutline from '../../mxgraph/view/graph/mxOutline';
-
-class OrgChart extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Orgchart
- {
- this.el = el;
- }}
- style={{
- zIndex: 1,
- position: 'relative',
- overflow: 'hidden',
- height: '50vh',
- background: 'transparent',
- borderStyle: 'solid',
- borderColor: 'lightgray',
- }}
- />
-
{
- this.el2 = el;
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Makes the shadow brighter
- mxConstants.SHADOWCOLOR = '#C0C0C0';
-
- // Workaround for Internet Explorer ignoring certain styles
- const container = document.createElement('div');
- container.style.position = 'absolute';
- container.style.overflow = 'hidden';
- container.style.left = '0px';
- container.style.top = '0px';
- container.style.right = '0px';
- container.style.bottom = '0px';
-
- const outline = document.getElementById('outlineContainer');
-
- mxEvent.disableContextMenu(container);
-
- // Sets a gradient background
- if (mxClient.IS_GC || mxClient.IS_SF) {
- container.style.background =
- '-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E7E7E7))';
- } else if (mxClient.IS_NS) {
- container.style.background =
- '-moz-linear-gradient(top, #FFFFFF, #E7E7E7)';
- }
-
- this.el.appendChild(container);
-
- // Creates the graph inside the given container
- const graph = new mxGraph(container);
-
- // Enables automatic sizing for vertices after editing and
- // panning by using the left mouse button.
- graph.setCellsMovable(false);
- graph.setAutoSizeCells(true);
- graph.setPanning(true);
- graph.centerZoom = false;
- graph.panningHandler.useLeftButtonForPanning = true;
-
- // Displays a popupmenu when the user clicks
- // on a cell (using the left mouse button) but
- // do not select the cell when the popup menu
- // is displayed
- graph.panningHandler.popupMenuHandler = false;
-
- // Creates the outline (navigator, overview) for moving
- // around the graph in the top, right corner of the window.
- const outln = new mxOutline(graph, outline);
-
- // Disables tooltips on touch devices
- graph.setTooltips(!mxClient.IS_TOUCH);
-
- // Set some stylesheet options for the visual appearance of vertices
- let style = graph.getStylesheet().getDefaultVertexStyle();
- style[mxConstants.STYLE_SHAPE] = 'label';
-
- style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
- style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
- style[mxConstants.STYLE_SPACING_LEFT] = 54;
-
- style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df';
- style[mxConstants.STYLE_STROKECOLOR] = '#5d65df';
- style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff';
-
- style[mxConstants.STYLE_FONTCOLOR] = '#1d258f';
- style[mxConstants.STYLE_FONTFAMILY] = 'Verdana';
- style[mxConstants.STYLE_FONTSIZE] = '12';
- style[mxConstants.STYLE_FONTSTYLE] = '1';
-
- style[mxConstants.STYLE_SHADOW] = '1';
- style[mxConstants.STYLE_ROUNDED] = '1';
- style[mxConstants.STYLE_GLASS] = '1';
-
- style[mxConstants.STYLE_IMAGE] = 'editors/images/dude3.png';
- style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
- style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
- style[mxConstants.STYLE_SPACING] = 8;
-
- // Sets the default style for edges
- style = graph.getStylesheet().getDefaultEdgeStyle();
- style[mxConstants.STYLE_ROUNDED] = true;
- style[mxConstants.STYLE_STROKEWIDTH] = 3;
- style[mxConstants.STYLE_EXIT_X] = 0.5; // center
- style[mxConstants.STYLE_EXIT_Y] = 1.0; // bottom
- style[mxConstants.STYLE_EXIT_PERIMETER] = 0; // disabled
- style[mxConstants.STYLE_ENTRY_X] = 0.5; // center
- style[mxConstants.STYLE_ENTRY_Y] = 0; // top
- style[mxConstants.STYLE_ENTRY_PERIMETER] = 0; // disabled
-
- // Disable the following for straight lines
- style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;
-
- // Stops editing on enter or escape keypress
- const keyHandler = new mxKeyHandler(graph);
-
- // Enables automatic layout on the graph and installs
- // a tree layout for all groups who's children are
- // being changed, added or removed.
- const layout = new mxCompactTreeLayout(graph, false);
- layout.useBoundingBox = false;
- layout.edgeRouting = false;
- layout.levelDistance = 60;
- layout.nodeDistance = 16;
-
- // Allows the layout to move cells even though cells
- // aren't movable in the graph
- layout.isVertexMovable = function(cell) {
- return true;
- };
-
- const layoutMgr = new mxLayoutManager(graph);
-
- layoutMgr.getLayout = function(cell) {
- if (cell.getChildCount() > 0) {
- return layout;
- }
- };
-
- // Installs a popupmenu handler using local function (see below).
- graph.popupMenuHandler.factoryMethod = function(menu, cell, evt) {
- return createPopupMenu(graph, menu, cell, evt);
- };
-
- // Fix for wrong preferred size
- const oldGetPreferredSizeForCell = graph.getPreferredSizeForCell;
- graph.getPreferredSizeForCell = function(cell) {
- const result = oldGetPreferredSizeForCell.apply(this, arguments);
-
- if (result != null) {
- result.width = Math.max(120, result.width - 40);
- }
-
- return result;
- };
-
- // Sets the maximum text scale to 1
- graph.cellRenderer.getTextScale = function(state) {
- return Math.min(1, state.view.scale);
- };
-
- // Dynamically adds text to the label as we zoom in
- // (without affecting the preferred size for new cells)
- graph.cellRenderer.getLabelValue = function(state) {
- let result = state.cell.value;
-
- if (state.cell.isVertex()) {
- if (state.view.scale > 1) {
- result += '\nDetails 1';
- }
-
- if (state.view.scale > 1.3) {
- result += '\nDetails 2';
- }
- }
-
- return result;
- };
-
- // 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 the root vertex of the tree
- graph.getModel().beginUpdate();
- try {
- const w = graph.container.offsetWidth;
- const v1 = graph.insertVertex(
- parent,
- 'treeRoot',
- 'Organization',
- w / 2 - 30,
- 20,
- 140,
- 60,
- 'image=editors/images/house.png'
- );
- graph.updateCellSize(v1);
- addOverlays(graph, v1, false);
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
-
- const content = document.createElement('div');
- content.style.padding = '4px';
- this.el2.appendChild(content);
- const tb = new mxToolbar(content);
-
- tb.addItem('Zoom In', 'images/zoom_in32.png', function(evt) {
- graph.zoomIn();
- });
-
- tb.addItem('Zoom Out', 'images/zoom_out32.png', function(evt) {
- graph.zoomOut();
- });
-
- tb.addItem('Actual Size', 'images/view_1_132.png', function(evt) {
- graph.zoomActual();
- });
-
- tb.addItem('Print', 'images/print32.png', function(evt) {
- const preview = new mxPrintPreview(graph, 1);
- preview.open();
- });
-
- tb.addItem('Poster Print', 'images/press32.png', function(evt) {
- const pageCount = mxUtils.prompt('Enter maximum page count', '1');
-
- if (pageCount != null) {
- const scale = mxUtils.getScaleForPageCount(pageCount, graph);
- const preview = new mxPrintPreview(graph, scale);
- preview.open();
- }
- });
-
- // Function to create the entries in the popupmenu
- function createPopupMenu(graph, menu, cell, evt) {
- const model = graph.getModel();
-
- if (cell != null) {
- if (cell.isVertex()) {
- menu.addItem(
- 'Add child',
- 'editors/images/overlays/check.png',
- function() {
- addChild(graph, cell);
- }
- );
- }
-
- menu.addItem('Edit label', 'editors/images/text.gif', function() {
- graph.startEditingAtCell(cell);
- });
-
- if (cell.id != 'treeRoot' && cell.isVertex()) {
- menu.addItem('Delete', 'editors/images/delete.gif', function() {
- deleteSubtree(graph, cell);
- });
- }
-
- menu.addSeparator();
- }
-
- menu.addItem('Fit', 'editors/images/zoom.gif', function() {
- graph.fit();
- });
-
- menu.addItem('Actual', 'editors/images/zoomactual.gif', function() {
- graph.zoomActual();
- });
-
- menu.addSeparator();
-
- menu.addItem('Print', 'editors/images/print.gif', function() {
- const preview = new mxPrintPreview(graph, 1);
- preview.open();
- });
-
- menu.addItem('Poster Print', 'editors/images/print.gif', function() {
- const pageCount = mxUtils.prompt('Enter maximum page count', '1');
-
- if (pageCount != null) {
- const scale = mxUtils.getScaleForPageCount(pageCount, graph);
- const preview = new mxPrintPreview(graph, scale);
- preview.open();
- }
- });
- }
-
- function addOverlays(graph, cell, addDeleteIcon) {
- let overlay = new mxCellOverlay(
- new mxImage('images/add.png', 24, 24),
- 'Add child'
- );
- overlay.cursor = 'hand';
- overlay.align = mxConstants.ALIGN_CENTER;
- overlay.addListener(
- mxEvent.CLICK,
- mxUtils.bind(this, function(sender, evt) {
- addChild(graph, cell);
- })
- );
-
- graph.addCellOverlay(cell, overlay);
-
- if (addDeleteIcon) {
- overlay = new mxCellOverlay(
- new mxImage('images/close.png', 30, 30),
- 'Delete'
- );
- overlay.cursor = 'hand';
- overlay.offset = new mxPoint(-4, 8);
- overlay.align = mxConstants.ALIGN_RIGHT;
- overlay.verticalAlign = mxConstants.ALIGN_TOP;
- overlay.addListener(
- mxEvent.CLICK,
- mxUtils.bind(this, function(sender, evt) {
- deleteSubtree(graph, cell);
- })
- );
-
- graph.addCellOverlay(cell, overlay);
- }
- }
-
- function addChild(graph, cell) {
- const model = graph.getModel();
- const parent = graph.getDefaultParent();
- let vertex;
-
- model.beginUpdate();
- try {
- vertex = graph.insertVertex(parent, null, 'Double click to set name');
- const geometry = vertex.getGeometry();
-
- // Updates the geometry of the vertex with the
- // preferred size computed in the graph
- const size = graph.getPreferredSizeForCell(vertex);
- geometry.width = size.width;
- geometry.height = size.height;
-
- // Adds the edge between the existing cell
- // and the new vertex and executes the
- // automatic layout on the parent
- const edge = graph.insertEdge(parent, null, '', cell, vertex);
-
- // Configures the edge label "in-place" to reside
- // at the end of the edge (x = 1) and with an offset
- // of 20 pixels in negative, vertical direction.
- edge.geometry.x = 1;
- edge.geometry.y = 0;
- edge.geometry.offset = new mxPoint(0, -20);
-
- addOverlays(graph, vertex, true);
- } finally {
- model.endUpdate();
- }
-
- return vertex;
- }
-
- function deleteSubtree(graph, cell) {
- // Gets the subtree from cell downwards
- const cells = [];
- graph.traverse(cell, true, function(vertex) {
- cells.push(vertex);
-
- return true;
- });
-
- graph.removeCells(cells);
- }
- }
-}
-
-export default OrgChart;
diff --git a/src/pages/layout/SwimLanes.js b/src/pages/layout/SwimLanes.js
deleted file mode 100644
index defa281fd..000000000
--- a/src/pages/layout/SwimLanes.js
+++ /dev/null
@@ -1,578 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxStackLayout from '../../mxgraph/layout/mxStackLayout';
-import mxSwimlaneManager from '../../mxgraph/view/graph/mxSwimlaneManager';
-import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxPerimeter from '../../mxgraph/util/datatypes/style/mxPerimeter';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxEditor from '../../mxgraph/editor/mxEditor';
-import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
-import mxImage from '../../mxgraph/util/image/mxImage';
-import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
-import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
-
-class SwimLanes extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Swimlanes
- This example demonstrates using swimlanes for pools and lanes and adding - cells and edges between them. This also demonstrates using the stack - layout as an automatic layout. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- height: '400px',
- border: 'gray dotted 1px',
- cursor: 'default',
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Defines an icon for creating new connections in the connection handler.
- // This will automatically disable the highlighting of the source vertex.
- mxConnectionHandler.prototype.connectImage = new mxImage(
- 'images/connector.gif',
- 16,
- 16
- );
-
- // Creates a wrapper editor around a new graph inside
- // the given container using an XML config for the
- // keyboard bindings
- const config = mxUtils
- .load('editors/config/keyhandler-commons.xml')
- .getDocumentElement();
- const editor = new mxEditor(config);
- editor.setGraphContainer(this.el);
- const { graph } = editor;
- const model = graph.getModel();
-
- // Auto-resizes the container
- graph.border = 80;
- graph.getView().translate = new mxPoint(graph.border / 2, graph.border / 2);
- graph.setResizeContainer(true);
- graph.graphHandler.setRemoveCellsFromParent(false);
-
- // Changes the default vertex style in-place
- let style = graph.getStylesheet().getDefaultVertexStyle();
- style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
- style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
- style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
- style[mxConstants.STYLE_FONTSIZE] = 11;
- style[mxConstants.STYLE_STARTSIZE] = 22;
- style[mxConstants.STYLE_HORIZONTAL] = false;
- style[mxConstants.STYLE_FONTCOLOR] = 'black';
- style[mxConstants.STYLE_STROKECOLOR] = 'black';
- delete style[mxConstants.STYLE_FILLCOLOR];
-
- style = mxUtils.clone(style);
- style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
- style[mxConstants.STYLE_FONTSIZE] = 10;
- style[mxConstants.STYLE_ROUNDED] = true;
- style[mxConstants.STYLE_HORIZONTAL] = true;
- style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
- delete style[mxConstants.STYLE_STARTSIZE];
- style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'none';
- graph.getStylesheet().putCellStyle('process', style);
-
- style = mxUtils.clone(style);
- style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
- style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
- delete style[mxConstants.STYLE_ROUNDED];
- graph.getStylesheet().putCellStyle('state', style);
-
- style = mxUtils.clone(style);
- style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RHOMBUS;
- style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RhombusPerimeter;
- style[mxConstants.STYLE_VERTICAL_ALIGN] = 'top';
- style[mxConstants.STYLE_SPACING_TOP] = 40;
- style[mxConstants.STYLE_SPACING_RIGHT] = 64;
- graph.getStylesheet().putCellStyle('condition', style);
-
- style = mxUtils.clone(style);
- style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_DOUBLE_ELLIPSE;
- style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
- style[mxConstants.STYLE_SPACING_TOP] = 28;
- style[mxConstants.STYLE_FONTSIZE] = 14;
- style[mxConstants.STYLE_FONTSTYLE] = 1;
- delete style[mxConstants.STYLE_SPACING_RIGHT];
- graph.getStylesheet().putCellStyle('end', style);
-
- style = graph.getStylesheet().getDefaultEdgeStyle();
- style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
- style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_BLOCK;
- style[mxConstants.STYLE_ROUNDED] = true;
- style[mxConstants.STYLE_FONTCOLOR] = 'black';
- style[mxConstants.STYLE_STROKECOLOR] = 'black';
-
- style = mxUtils.clone(style);
- style[mxConstants.STYLE_DASHED] = true;
- style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_OPEN;
- style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_OVAL;
- graph.getStylesheet().putCellStyle('crossover', style);
-
- // Installs double click on middle control point and
- // changes style of edges between empty and this value
- graph.alternateEdgeStyle = 'elbow=vertical';
-
- // Adds automatic layout and various switches if the
- // graph is enabled
- if (graph.isEnabled()) {
- // Allows new connections but no dangling edges
- graph.setConnectable(true);
- graph.setAllowDanglingEdges(false);
-
- // End-states are no valid sources
- const previousIsValidSource = graph.isValidSource;
-
- graph.isValidSource = function(cell) {
- if (previousIsValidSource.apply(this, arguments)) {
- const style = cell.getStyle();
-
- return (
- style == null || !(style == 'end' || style.indexOf('end') == 0)
- );
- }
-
- return false;
- };
-
- // Start-states are no valid targets, we do not
- // perform a call to the superclass function because
- // this would call isValidSource
- // Note: All states are start states in
- // the example below, so we use the state
- // style below
- graph.isValidTarget = function(cell) {
- const style = cell.getStyle();
-
- return (
- !cell.isEdge() &&
- !this.isSwimlane(cell) &&
- (style == null || !(style == 'state' || style.indexOf('state') == 0))
- );
- };
-
- // Allows dropping cells into new lanes and
- // lanes into new pools, but disallows dropping
- // cells on edges to split edges
- graph.setDropEnabled(true);
- graph.setSplitEnabled(false);
-
- // Returns true for valid drop operations
- graph.isValidDropTarget = function(target, cells, evt) {
- if (this.isSplitEnabled() && this.isSplitTarget(target, cells, evt)) {
- return true;
- }
-
- const model = this.getModel();
- let lane = false;
- let pool = false;
- let cell = false;
-
- // Checks if any lanes or pools are selected
- for (let i = 0; i < cells.length; i++) {
- const tmp = cells[i].getParent();
- lane = lane || this.isPool(tmp);
- pool = pool || this.isPool(cells[i]);
-
- cell = cell || !(lane || pool);
- }
-
- return (
- !pool &&
- cell != lane &&
- ((lane && this.isPool(target)) ||
- (cell && this.isPool(target.getParent())))
- );
- };
-
- // Adds new method for identifying a pool
- graph.isPool = function(cell) {
- const model = this.getModel();
- const parent = cell.getParent();
-
- return parent != null && parent.getParent() == model.getRoot();
- };
-
- // Keeps widths on collapse/expand
- const foldingHandler = function(sender, evt) {
- const cells = evt.getProperty('cells');
-
- for (let i = 0; i < cells.length; i++) {
- const geo = cells[i].getGeometry();
-
- if (geo.alternateBounds != null) {
- geo.width = geo.alternateBounds.width;
- }
- }
- };
-
- graph.addListener(mxEvent.FOLD_CELLS, foldingHandler);
- }
-
- // Changes swimlane orientation while collapsed
- const getStyle = function() {
- let style = super.getStyle();
- if (this.isCellCollapsed()) {
- if (style != null) {
- style += ';';
- } else {
- style = '';
- }
- style += 'horizontal=1;align=left;spacingLeft=14;';
- }
- return style;
- };
-
- // Applies size changes to siblings and parents
- new mxSwimlaneManager(graph);
-
- // Creates a stack depending on the orientation of the swimlane
- const layout = new mxStackLayout(graph, false);
-
- // Makes sure all children fit into the parent swimlane
- layout.resizeParent = true;
-
- // Applies the size to children if parent size changes
- layout.fill = true;
-
- // Only update the size of swimlanes
- layout.isVertexIgnored = function(vertex) {
- return !graph.isSwimlane(vertex);
- };
-
- // Keeps the lanes and pools stacked
- const layoutMgr = new mxLayoutManager(graph);
-
- layoutMgr.getLayout = function(cell) {
- if (
- !cell.isEdge() &&
- cell.getChildCount() > 0 &&
- (cell.getParent() == model.getRoot() || graph.isPool(cell))
- ) {
- layout.fill = graph.isPool(cell);
-
- return layout;
- }
-
- return null;
- };
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- const parent = graph.getDefaultParent();
-
- const insertVertex = options => {
- const v = graph.insertVertex(options);
- v.getStyle = getStyle;
- return v;
- };
-
- const insertEdge = options => {
- const e = graph.insertEdge(options);
- e.getStyle = getStyle;
- return e;
- };
-
- // Adds cells to the model in a single step
- model.batchUpdate(() => {
- const pool1 = insertVertex({
- parent,
- value: 'Pool 1',
- position: [0, 0],
- size: [640, 0],
- });
- pool1.setConnectable(false);
-
- const lane1a = insertVertex({
- parent: pool1,
- value: 'Lane A',
- position: [0, 0],
- size: [640, 110],
- });
- lane1a.setConnectable(false);
-
- const lane1b = insertVertex({
- parent: pool1,
- value: 'Lane B',
- position: [0, 0],
- size: [640, 110],
- });
- lane1b.setConnectable(false);
-
- const pool2 = insertVertex({
- parent,
- value: 'Pool 2',
- position: [0, 0],
- size: [640, 0],
- });
- pool2.setConnectable(false);
-
- const lane2a = insertVertex({
- parent: pool2,
- value: 'Lane A',
- position: [0, 0],
- size: [640, 140],
- });
- lane2a.setConnectable(false);
-
- const lane2b = insertVertex({
- parent: pool2,
- value: 'Lane B',
- position: [0, 0],
- size: [640, 110],
- });
- lane2b.setConnectable(false);
-
- const start1 = insertVertex({
- parent: lane1a,
- position: [40, 40],
- size: [30, 30],
- style: 'state',
- });
- const end1 = insertVertex({
- parent: lane1a,
- value: 'A',
- position: [560, 40],
- size: [30, 30],
- style: 'end',
- });
-
- const step1 = insertVertex({
- parent: lane1a,
- value: 'Contact\nProvider',
- position: [90, 30],
- size: [80, 50],
- style: 'process',
- });
- const step11 = insertVertex({
- parent: lane1a,
- value: 'Complete\nAppropriate\nRequest',
- position: [190, 30],
- size: [80, 50],
- style: 'process',
- });
- const step111 = insertVertex({
- parent: lane1a,
- value: 'Receive and\nAcknowledge',
- position: [385, 30],
- size: [80, 50],
- style: 'process',
- });
-
- const start2 = insertVertex({
- parent: lane2b,
- position: [40, 40],
- size: [30, 30],
- style: 'state',
- });
-
- const step2 = insertVertex({
- parent: lane2b,
- value: 'Receive\nRequest',
- position: [90, 30],
- size: [80, 50],
- style: 'process',
- });
- const step22 = insertVertex({
- parent: lane2b,
- value: 'Refer to Tap\nSystems\nCoordinator',
- position: [190, 30],
- size: [80, 50],
- style: 'process',
- });
-
- const step3 = insertVertex({
- parent: lane1b,
- value: 'Request 1st-\nGate\nInformation',
- position: [190, 30],
- size: [80, 50],
- style: 'process',
- });
- const step33 = insertVertex({
- parent: lane1b,
- value: 'Receive 1st-\nGate\nInformation',
- position: [290, 30],
- size: [80, 50],
- style: 'process',
- });
-
- const step4 = insertVertex({
- parent: lane2a,
- value: 'Receive and\nAcknowledge',
- position: [290, 20],
- size: [80, 50],
- style: 'process',
- });
- const step44 = insertVertex({
- parent: lane2a,
- value: 'Contract\nConstraints?',
- position: [400, 20],
- size: [50, 50],
- style: 'condition',
- });
- const step444 = insertVertex({
- parent: lane2a,
- value: 'Tap for gas\ndelivery?',
- position: [480, 20],
- size: [50, 50],
- style: 'condition',
- });
-
- const end2 = insertVertex({
- parent: lane2a,
- value: 'B',
- position: [560, 30],
- size: [30, 30],
- style: 'end',
- });
- const end3 = insertVertex({
- parent: lane2a,
- value: 'C',
- position: [560, 84],
- size: [30, 30],
- style: 'end',
- });
-
- let e = null;
-
- insertEdge({
- parent: lane1a,
- source: start1,
- target: step1,
- });
- insertEdge({
- parent: lane1a,
- source: step1,
- target: step11,
- });
- insertEdge({
- parent: lane1a,
- source: step11,
- target: step111,
- });
-
- insertEdge({
- parent: lane2b,
- source: start2,
- target: step2,
- });
- insertEdge({
- parent: lane2b,
- source: step2,
- target: step22,
- });
- insertEdge({
- parent,
- source: step22,
- target: step3,
- });
-
- insertEdge({
- parent: lane1b,
- source: step3,
- target: step33,
- });
- insertEdge({
- parent: lane2a,
- source: step4,
- target: step44,
- });
- insertEdge({
- parent: lane2a,
- value: 'No',
- source: step44,
- target: step444,
- style: 'verticalAlign=bottom',
- });
- insertEdge({
- parent,
- value: 'Yes',
- source: step44,
- target: step111,
- style: 'verticalAlign=bottom;horizontal=0;labelBackgroundColor=white;',
- });
-
- insertEdge({
- parent: lane2a,
- value: 'Yes',
- source: step444,
- target: end2,
- style: 'verticalAlign=bottom',
- });
- e = insertEdge({
- parent: lane2a,
- value: 'No',
- source: step444,
- target: end3,
- style: 'verticalAlign=top',
- });
- e.geometry.points = [
- new mxPoint(
- step444.geometry.x + step444.geometry.width / 2,
- end3.geometry.y + end3.geometry.height / 2
- ),
- ];
-
- insertEdge({
- parent,
- source: step1,
- target: step2,
- style: 'crossover',
- });
- insertEdge({
- parent,
- source: step3,
- target: step11,
- style: 'crossover',
- });
- e = insertEdge({
- parent: lane1a,
- source: step11,
- target: step33,
- style: 'crossover',
- });
- e.geometry.points = [
- new mxPoint(
- step33.geometry.x + step33.geometry.width / 2 + 20,
- step11.geometry.y + (step11.geometry.height * 4) / 5
- ),
- ];
- insertEdge({
- parent,
- source: step33,
- target: step4,
- });
- insertEdge({
- parent: lane1a,
- source: step111,
- target: end1,
- });
- });
- }
-}
-
-export default SwimLanes;
diff --git a/src/pages/misc/DynamicLoading.js b/src/pages/misc/DynamicLoading.js
deleted file mode 100644
index 172bfb0bd..000000000
--- a/src/pages/misc/DynamicLoading.js
+++ /dev/null
@@ -1,228 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxText from '../../mxgraph/shape/mxText';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxCodec from '../../mxgraph/serialization/mxCodec';
-import mxEffects from '../../mxgraph/util/animate/mxEffects';
-import mxPerimeter from '../../mxgraph/util/datatypes/style/mxPerimeter';
-
-class DynamicLoading extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Dynamic loading
- This example demonstrates loading graph model data dynamically to limit - the number of cells in the model. - {
- this.el = el;
- }}
- style={{
- overflow: 'visible',
- position: 'absolute',
- height: '100%',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
- );
- };
-
- componentDidMount() {
- let requestId = 0;
-
- // Speedup the animation
- mxText.prototype.enableBoundingBox = false;
-
- // Creates the graph inside the given container
- const graph = new mxGraph(this.el);
-
- // Disables all built-in interactions
- graph.setEnabled(false);
-
- // Handles clicks on cells
- graph.addListener(mxEvent.CLICK, function(sender, evt) {
- const cell = evt.getProperty('cell');
-
- if (cell != null) {
- load(graph, cell);
- }
- });
-
- // Changes the default vertex style in-place
- const style = graph.getStylesheet().getDefaultVertexStyle();
- style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
- style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
- style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- const parent = graph.getDefaultParent();
-
- const cx = graph.container.clientWidth / 2;
- const cy = graph.container.clientHeight / 2;
-
- const cell = graph.insertVertex(
- parent,
- '0-0',
- '0-0',
- cx - 20,
- cy - 15,
- 60,
- 40
- );
-
- // Animates the changes in the graph model
- graph.getModel().addListener(mxEvent.CHANGE, function(sender, evt) {
- const { changes } = evt.getProperty('edit');
- mxEffects.animateChanges(graph, changes);
- });
-
- // Loads the links for the given cell into the given graph
- // by requesting the respective data in the server-side
- // (implemented for this demo using the server-function)
- function load(graph, cell) {
- if (cell.isVertex()) {
- const cx = graph.container.clientWidth / 2;
- const cy = graph.container.clientHeight / 2;
-
- // 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 xml = server(cell.id);
- const doc = mxUtils.parseXml(xml);
- const dec = new mxCodec(doc);
- const model = dec.decode(doc.documentElement);
-
- // Removes all cells which are not in the response
- for (var key in graph.getModel().cells) {
- const tmp = graph.getModel().getCell(key);
-
- if (tmp != cell && tmp.isVertex()) {
- graph.removeCells([tmp]);
- }
- }
-
- // Merges the response model with the client model
- graph.getModel().mergeChildren(model.getRoot().getChildAt(0), parent);
-
- // Moves the given cell to the center
- let geo = cell.getGeometry();
-
- if (geo != null) {
- geo = geo.clone();
- geo.x = cx - geo.width / 2;
- geo.y = cy - geo.height / 2;
-
- graph.getModel().setGeometry(cell, geo);
- }
-
- // Creates a list of the new vertices, if there is more
- // than the center vertex which might have existed
- // previously, then this needs to be changed to analyze
- // the target model before calling mergeChildren above
- const vertices = [];
-
- for (var key in graph.getModel().cells) {
- const tmp = graph.getModel().getCell(key);
-
- if (tmp != cell && tmp.isVertex()) {
- vertices.push(tmp);
-
- // Changes the initial location "in-place"
- // to get a nice animation effect from the
- // center to the radius of the circle
- const geo = tmp.getGeometry();
-
- if (geo != null) {
- geo.x = cx - geo.width / 2;
- geo.y = cy - geo.height / 2;
- }
- }
- }
-
- // Arranges the response in a circle
- const cellCount = vertices.length;
- const phi = (2 * Math.PI) / cellCount;
- const r = Math.min(
- graph.container.clientWidth / 4,
- graph.container.clientHeight / 4
- );
-
- for (let i = 0; i < cellCount; i++) {
- let geo = vertices[i].getGeometry();
-
- if (geo != null) {
- geo = geo.clone();
- geo.x += r * Math.sin(i * phi);
- geo.y += r * Math.cos(i * phi);
-
- graph.getModel().setGeometry(vertices[i], geo);
- }
- }
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
- }
- }
-
- // Simulates the existence of a server that can crawl the
- // big graph with a certain depth and create a graph model
- // for the traversed cells, which is then sent to the client
- function server(cellId) {
- // Increments the request ID as a prefix for the cell IDs
- requestId++;
-
- // Creates a local graph with no display
- const graph = new mxGraph();
-
- // 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 v0 = graph.insertVertex(parent, cellId, 'Dummy', 0, 0, 60, 40);
- const cellCount = parseInt(Math.random() * 16) + 4;
-
- // Creates the random links and cells for the response
- for (let i = 0; i < cellCount; i++) {
- const id = `${requestId}-${i}`;
- const v = graph.insertVertex(parent, id, id, 0, 0, 60, 40);
- const e = graph.insertEdge(parent, null, `Link ${i}`, v0, v);
- }
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
-
- const enc = new mxCodec();
- const node = enc.encode(graph.getModel());
-
- return mxUtils.getXml(node);
- }
-
- load(graph, cell);
- };
-}
-
-export default DynamicLoading;
diff --git a/src/pages/misc/Guides.js b/src/pages/misc/Guides.js
deleted file mode 100644
index 0d7148b56..000000000
--- a/src/pages/misc/Guides.js
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
-import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
-import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
-
-class Guides extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Guides
- This example demonstrates the guides feature which aligns the current - selection to the existing vertices in the graph. This feature is in RFC - state. Creating a grid using a canvas and installing a key handler for - cursor keys is also demonstrated here, as well as snapping waypoints to - terminals. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- height: '601px',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Enables guides
- mxGraphHandler.prototype.guidesEnabled = true;
-
- // Alt disables guides
- mxGraphHandler.prototype.useGuidesForEvent = function(me) {
- return !mxEvent.isAltDown(me.getEvent());
- };
-
- // Defines the guides to be red (default)
- mxConstants.GUIDE_COLOR = '#FF0000';
-
- // Defines the guides to be 1 pixel (default)
- mxConstants.GUIDE_STROKEWIDTH = 1;
-
- // Enables snapping waypoints to terminals
- mxEdgeHandler.prototype.snapToTerminals = true;
-
- // Creates the graph inside the given container
- const graph = new mxGraph(this.el);
- graph.setConnectable(true);
- graph.gridSize = 30;
-
- // Changes the default style for edges "in-place" and assigns
- // an alternate edge style which is applied in mxGraph.flip
- // when the user double clicks on the adjustment control point
- // of the edge. The ElbowConnector edge style switches to TopToBottom
- // if the horizontal style is true.
- const style = graph.getStylesheet().getDefaultEdgeStyle();
- style[mxConstants.STYLE_ROUNDED] = true;
- style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
- graph.alternateEdgeStyle = 'elbow=vertical';
-
- // 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();
- let v1;
- try {
- v1 = graph.insertVertex(parent, null, 'Hello,', 20, 40, 80, 70);
- const v2 = graph.insertVertex(parent, null, 'World!', 200, 140, 80, 40);
- const e1 = graph.insertEdge(parent, null, '', v1, v2);
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
-
- // Handles cursor keys
- const nudge = function(keyCode) {
- if (!graph.isSelectionEmpty()) {
- let dx = 0;
- let dy = 0;
-
- if (keyCode === 37) {
- dx = -1;
- } else if (keyCode === 38) {
- dy = -1;
- } else if (keyCode === 39) {
- dx = 1;
- } else if (keyCode === 40) {
- dy = 1;
- }
-
- graph.moveCells(graph.getSelectionCells(), dx, dy);
- }
-
- // Transfer initial focus to graph container for keystroke handling
- graph.container.focus();
-
- // Handles keystroke events
- const keyHandler = new mxKeyHandler(graph);
-
- // Ignores enter keystroke. Remove this line if you want the
- // enter keystroke to stop editing
- keyHandler.enter = function() {};
-
- keyHandler.bindKey(37, function() {
- nudge(37);
- });
-
- keyHandler.bindKey(38, function() {
- nudge(38);
- });
-
- keyHandler.bindKey(39, function() {
- nudge(39);
- });
-
- keyHandler.bindKey(40, function() {
- nudge(40);
- });
- };
- }
-}
-
-export default Guides;
diff --git a/src/pages/misc/Merge.js b/src/pages/misc/Merge.js
deleted file mode 100644
index d883e58a4..000000000
--- a/src/pages/misc/Merge.js
+++ /dev/null
@@ -1,237 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxPerimeter from '../../mxgraph/util/datatypes/style/mxPerimeter';
-
-class Merge extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Merge
- This example demonstrates using the mergeChildren function to merge two - graphs. - {
- 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 Merge;
diff --git a/src/pages/misc/Monitor.js b/src/pages/misc/Monitor.js
deleted file mode 100644
index df3ebadda..000000000
--- a/src/pages/misc/Monitor.js
+++ /dev/null
@@ -1,296 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxCellOverlay from '../../mxgraph/view/cell/mxCellOverlay';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxCodec from '../../mxgraph/serialization/mxCodec';
-import mxPerimeter from '../../mxgraph/util/datatypes/style/mxPerimeter';
-import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
-
-class Monitor extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Workflow Monitor
- This example demonstrates using a graph to display the current state of - a workflow. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- position: 'relative',
- height: '406px',
- cursor: 'default',
- }}
- />
-
{
- this.el2 = el;
- }}
- />
-
- );
- }
-
- componentDidMount() {
- mxConstants.SHADOWCOLOR = '#e0e0e0';
-
- // Creates the graph inside the given container
- const graph = createGraph(this.el);
-
- // Creates a process display using the activity names as IDs to refer to the elements
- const xml =
- '
Permissions
- This example demonstrates creating permissions to define the available - operations a the graph. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- height: '300px',
- // background: "url('editors/images/grid.gif')",
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Defines an icon for creating new connections in the connection handler.
- // This will automatically disable the highlighting of the source vertex.
- mxConnectionHandler.prototype.connectImage = new mxImage(
- 'images/connector.gif',
- 16,
- 16
- );
-
- // Creates the div for the graph
- const container = document.createElement('div');
- container.style.position = 'absolute';
- container.style.overflow = 'hidden';
- container.style.left = '00px';
- container.style.top = '40px';
- container.style.right = '0px';
- container.style.bottom = '0px';
- container.style.background = 'url("editors/images/grid.gif")';
-
- this.el.appendChild(container);
-
- // Creates the graph inside the given container
- const graph = new mxGraph(container);
-
- // Enable tooltips, disables mutligraphs, enable loops
- graph.setMultigraph(false);
- graph.setAllowLoops(true);
-
- // Enables rubberband selection and key handling
- const rubberband = new mxRubberband(graph);
- const keyHandler = new mxKeyHandler(graph);
-
- // Assigns the delete key
- keyHandler.bindKey(46, function(evt) {
- if (graph.isEnabled()) {
- graph.removeCells();
- }
- });
-
- // Shared variable between child function scopes
- // aka "private" variable
- let currentPermission = null;
-
- const apply = function(permission) {
- graph.clearSelection();
- permission.apply(graph);
- graph.setEnabled(true);
- graph.setTooltips(true);
-
- // Updates the icons on the shapes - rarely
- // needed and very slow for large graphs
- graph.refresh();
- currentPermission = permission;
- };
-
- apply(new Permission());
-
- let button = mxUtils.button('Allow All', function(evt) {
- apply(new Permission());
- });
- this.el.appendChild(button);
-
- button = mxUtils.button('Connect Only', function(evt) {
- apply(new Permission(false, true, false, false, true));
- });
- this.el.appendChild(button);
-
- button = mxUtils.button('Edges Only', function(evt) {
- apply(new Permission(false, false, true, false, false));
- });
- this.el.appendChild(button);
-
- button = mxUtils.button('Vertices Only', function(evt) {
- apply(new Permission(false, false, false, true, false));
- });
- this.el.appendChild(button);
-
- button = mxUtils.button('Select Only', function(evt) {
- apply(new Permission(false, false, false, false, false));
- });
- this.el.appendChild(button);
-
- button = mxUtils.button('Locked', function(evt) {
- apply(new Permission(true, false));
- });
- this.el.appendChild(button);
-
- button = mxUtils.button('Disabled', function(evt) {
- graph.clearSelection();
- graph.setEnabled(false);
- graph.setTooltips(false);
- });
- this.el.appendChild(button);
-
- // Extends hook functions to use permission object. This could
- // be done by assigning the respective switches (eg.
- // setMovable), but this approach is more flexible, doesn't
- // override any existing behaviour or settings, and allows for
- // dynamic conditions to be used in the functions. See the
- // specification for more functions to extend (eg.
- // isSelectable).
- const oldDisconnectable = graph.isCellDisconnectable;
- graph.isCellDisconnectable = function(cell, terminal, source) {
- return (
- oldDisconnectable.apply(this, arguments) && currentPermission.editEdges
- );
- };
-
- const oldTerminalPointMovable = graph.isTerminalPointMovable;
- graph.isTerminalPointMovable = function(cell) {
- return (
- oldTerminalPointMovable.apply(this, arguments) &&
- currentPermission.editEdges
- );
- };
-
- const oldBendable = graph.isCellBendable;
- graph.isCellBendable = function(cell) {
- return oldBendable.apply(this, arguments) && currentPermission.editEdges;
- };
-
- const oldLabelMovable = graph.isLabelMovable;
- graph.isLabelMovable = function(cell) {
- return (
- oldLabelMovable.apply(this, arguments) && currentPermission.editEdges
- );
- };
-
- const oldMovable = graph.isCellMovable;
- graph.isCellMovable = function(cell) {
- return (
- oldMovable.apply(this, arguments) && currentPermission.editVertices
- );
- };
-
- const oldResizable = graph.isCellResizable;
- graph.isCellResizable = function(cell) {
- return (
- oldResizable.apply(this, arguments) && currentPermission.editVertices
- );
- };
-
- const oldEditable = graph.isCellEditable;
- graph.isCellEditable = function(cell) {
- return (
- (oldEditable.apply(this, arguments) &&
- cell.isVertex() &&
- currentPermission.editVertices) ||
- (cell.isEdge() && currentPermission.editEdges)
- );
- };
-
- const oldDeletable = graph.isCellDeletable;
- graph.isCellDeletable = function(cell) {
- return (
- (oldDeletable.apply(this, arguments) &&
- cell.isVertex() &&
- currentPermission.editVertices) ||
- (cell.isEdge() && currentPermission.editEdges)
- );
- };
-
- const oldCloneable = graph.isCellCloneable;
- graph.isCellCloneable = function(cell) {
- return (
- oldCloneable.apply(this, arguments) && currentPermission.cloneCells
- );
- };
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- const parent = graph.getDefaultParent();
-
- // Adds cells to the model in a single step
- graph.getModel().beginUpdate();
- try {
- const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
- const v2 = graph.insertVertex(parent, null, 'Hello,', 200, 20, 80, 30);
- const v3 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
- const e1 = graph.insertEdge(parent, null, 'Connection', v1, v3);
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
- }
-}
-
-export default Permissions;
diff --git a/src/pages/misc/Thread.js b/src/pages/misc/Thread.js
deleted file mode 100644
index 107ded3f3..000000000
--- a/src/pages/misc/Thread.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-
-class Thread extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Thread
- This example demonstrates setting overlays in mxGraph from within a - timed function. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Creates the graph inside the given container
- const graph = new mxGraph(this.el);
-
- // 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();
- let v1;
- let v2;
- let e1;
-
- // Adds cells to the model in a single step
- graph.getModel().beginUpdate();
- try {
- v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
- v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
- e1 = graph.insertEdge(parent, null, '', v1, v2);
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
-
- // Function to switch the overlay every 5 secs
- const f = () => {
- const overlays = graph.getCellOverlays(v1);
-
- if (overlays == null) {
- graph.removeCellOverlays(v2);
- graph.setCellWarning(v1, 'Tooltip');
- } else {
- graph.removeCellOverlays(v1);
- graph.setCellWarning(v2, 'Tooltip');
- }
- };
-
- window.setInterval(f, 1000);
- f();
- }
-}
-
-export default Thread;
diff --git a/src/pages/misc/Validation.js b/src/pages/misc/Validation.js
deleted file mode 100644
index 8471ed34b..000000000
--- a/src/pages/misc/Validation.js
+++ /dev/null
@@ -1,173 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxClient from '../../mxgraph/mxClient';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxMultiplicity from '../../mxgraph/view/connection/mxMultiplicity';
-import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
-
-class Validation extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Validation
- This example demonstrates using multiplicities for automatically - validating a graph. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- height: '281px',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
- );
- }
-
- componentDidMount() {
- const xmlDocument = mxUtils.createXmlDocument();
- const sourceNode = xmlDocument.createElement('Source');
- const targetNode = xmlDocument.createElement('Target');
- const subtargetNode = xmlDocument.createElement('Subtarget');
-
- // Creates the graph inside the given container
- const graph = new mxGraph(this.el);
- graph.setConnectable(true);
- graph.setTooltips(true);
- graph.setAllowDanglingEdges(false);
- graph.setMultigraph(false);
-
- // Source nodes needs 1..2 connected Targets
- graph.multiplicities.push(
- new mxMultiplicity(
- true,
- 'Source',
- null,
- null,
- 1,
- 2,
- ['Target'],
- 'Source Must Have 1 or 2 Targets',
- 'Source Must Connect to Target'
- )
- );
-
- // Source node does not want any incoming connections
- graph.multiplicities.push(
- new mxMultiplicity(
- false,
- 'Source',
- null,
- null,
- 0,
- 0,
- null,
- 'Source Must Have No Incoming Edge',
- null
- )
- ); // Type does not matter
-
- // Target needs exactly one incoming connection from Source
- graph.multiplicities.push(
- new mxMultiplicity(
- false,
- 'Target',
- null,
- null,
- 1,
- 1,
- ['Source'],
- 'Target Must Have 1 Source',
- 'Target Must Connect From Source'
- )
- );
-
- // Enables rubberband selection
- new mxRubberband(graph);
-
- // Removes cells when [DELETE] is pressed
- const keyHandler = new mxKeyHandler(graph);
- keyHandler.bindKey(46, function(evt) {
- if (graph.isEnabled()) {
- graph.removeCells();
- }
- });
-
- // Installs automatic validation (use editor.validation = true
- // if you are using an mxEditor instance)
- const listener = function(sender, evt) {
- graph.validateGraph();
- };
-
- graph.getModel().addListener(mxEvent.CHANGE, listener);
-
- // 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, sourceNode, 20, 20, 80, 30);
- const v2 = graph.insertVertex(parent, null, targetNode, 200, 20, 80, 30);
- const v3 = graph.insertVertex({
- parent,
- value: targetNode.cloneNode(true),
- position: [200, 80],
- size: [80, 30],
- });
- const v4 = graph.insertVertex(
- parent,
- null,
- targetNode.cloneNode(true),
- 200,
- 140,
- 80,
- 30
- );
- const v5 = graph.insertVertex(
- parent,
- null,
- subtargetNode,
- 200,
- 200,
- 80,
- 30
- );
- const v6 = graph.insertVertex(
- parent,
- null,
- sourceNode.cloneNode(true),
- 20,
- 140,
- 80,
- 30
- );
- const e1 = graph.insertEdge(parent, null, '', v1, v2);
- const e2 = graph.insertEdge(parent, null, '', v1, v3);
- const e3 = graph.insertEdge(parent, null, '', v6, v4);
- // var e4 = graph.insertEdge(parent, null, '', v1, v4);
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
- }
-}
-
-export default Validation;
diff --git a/src/pages/misc/Visibility.js b/src/pages/misc/Visibility.js
deleted file mode 100644
index dfc3a4492..000000000
--- a/src/pages/misc/Visibility.js
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxUtils from '../../mxgraph/util/mxUtils';
-
-class Visibility extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Visibility
- This example demonstrates using various solutions for hiding and showing - cells. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- height: '241px',
- 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);
-
- // 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();
-
- let showOne = true;
- let showTwo = true;
- let showThree = true;
-
- // Overridden to implement dynamic conditions
- const isVisible = function() {
- let result = super.isVisible();
- if (result && this.value != null) {
- result =
- (showOne && this.value == '1') ||
- (showTwo && this.value == '2') ||
- (showThree && this.value == '3');
- }
- return result;
- };
-
- // Adds cells to the model in a single step
- let v1;
- graph.batchUpdate(() => {
- v1 = graph.insertVertex({
- parent,
- value: '1',
- position: [20, 20],
- size: [80, 30],
- });
- v1.isVisible = isVisible;
-
- const v2 = graph.insertVertex({
- parent,
- value: '2',
- position: [200, 150],
- size: [80, 30],
- });
- v2.isVisible = isVisible;
-
- const e1 = graph.insertEdge({
- parent,
- value: '3',
- source: v1,
- target: v2,
- });
- e1.isVisible = isVisible;
- });
-
- // Dynamic conditions (requires refresh)
- this.el2.appendChild(
- mxUtils.button('Cond 1', function() {
- showOne = !showOne;
- graph.refresh();
- })
- );
- this.el2.appendChild(
- mxUtils.button('Cond 2', function() {
- showTwo = !showTwo;
- graph.refresh();
- })
- );
- this.el2.appendChild(
- mxUtils.button('Cond 3', function() {
- showThree = !showThree;
- graph.refresh();
- })
- );
-
- // Explicit show/hide
- this.el2.appendChild(
- mxUtils.button('Toggle cell', function() {
- graph.toggleCells(!v1.isVisible(), [v1], true);
- })
- );
-
- // Explicit remove/add
- let removed = null;
-
- this.el2.appendChild(
- mxUtils.button('Add/remove cell', function() {
- if (removed != null) {
- graph.addCells(removed);
- removed = null;
- } else {
- removed = graph.removeCells([v1]);
- }
- })
- );
- }
-}
-
-export default Visibility;
diff --git a/src/pages/misc/index.js b/src/pages/misc/index.js
deleted file mode 100644
index 18a73312b..000000000
--- a/src/pages/misc/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import Preview from '../Previews';
-import Guides from './Guides';
-import Merge from './Merge';
-import Monitor from './Monitor';
-import Permissions from './Permissions';
-import Thread from './Thread';
-import Validation from './Validation';
-import Visibility from './Visibility';
-import PageTabs from '../PageTabs';
-
-export default function _Misc() {
- return (
-
- {/*
- );
-}
diff --git a/src/pages/printing/PageBreaks.js b/src/pages/printing/PageBreaks.js
deleted file mode 100644
index 97b7b6fef..000000000
--- a/src/pages/printing/PageBreaks.js
+++ /dev/null
@@ -1,185 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxPrintPreview from '../../mxgraph/view/graph/mxPrintPreview';
-
-class PageBreaks extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Pagebreaks
- This example demonstrates using the pageBreaksVisible and preferPageSize - switches and adding headers and footers to print output. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- position: 'relative',
- height: '481px',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
{
- this.el2 = el;
- }}
- />
-
- );
- }
-
- componentDidMount() {
- mxEvent.disableContextMenu(this.el);
-
- // Creates the graph inside the given container
- const graph = new mxGraph(this.el);
- graph.view.setScale(0.15);
- graph.pageBreaksVisible = true;
- graph.pageBreakDashed = true;
- graph.preferPageSize = true;
- graph.centerZoom = false;
- graph.setPanning(true);
-
- // Account for the header and footer size in the page format
- const headerSize = 100;
- const footerSize = 100;
-
- // Removes header and footer from page height
- graph.pageFormat.height -= headerSize + footerSize;
-
- // Takes zoom into account for moving cells
- graph.graphHandler.scaleGrid = true;
-
- // Enables rubberband selection
- new mxRubberband(graph);
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- const parent = graph.getDefaultParent();
-
- // Adds cells to the model in a single step
- graph.getModel().beginUpdate();
- try {
- const v1 = graph.insertVertex(parent, null, 'Hello,', 10, 10, 280, 330);
- const v2 = graph.insertVertex(
- parent,
- null,
- 'World!',
- graph.pageFormat.width * graph.pageScale - 280 - 10,
- graph.pageFormat.height * graph.pageScale - 330 - 10,
- 280,
- 330
- );
- const e1 = graph.insertEdge(parent, null, '', v1, v2);
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
-
- this.el2.appendChild(
- mxUtils.button('Toggle Page Breaks', function(evt) {
- graph.pageBreaksVisible = !graph.pageBreaksVisible;
- graph.sizeDidChange();
- })
- );
-
- this.el2.appendChild(
- mxUtils.button('Zoom In', function(evt) {
- graph.zoomIn();
- })
- );
-
- this.el2.appendChild(
- mxUtils.button('Zoom Out', function(evt) {
- graph.zoomOut();
- })
- );
-
- this.el2.appendChild(
- mxUtils.button('Print', function(evt) {
- // Matches actual printer paper size and avoids blank pages
- const scale = 0.5;
-
- // Applies scale to page
- const pf = mxRectangle.fromRectangle(
- graph.pageFormat || mxConstants.PAGE_FORMAT_A4_PORTRAIT
- );
- pf.width = Math.round(pf.width * scale * graph.pageScale);
- pf.height = Math.round(pf.height * scale * graph.pageScale);
-
- // Finds top left corner of top left page
- const bounds = mxRectangle.fromRectangle(graph.getGraphBounds());
- bounds.x -= graph.view.translate.x * graph.view.scale;
- bounds.y -= graph.view.translate.y * graph.view.scale;
-
- const x0 = Math.floor(bounds.x / pf.width) * pf.width;
- const y0 = Math.floor(bounds.y / pf.height) * pf.height;
-
- const preview = new mxPrintPreview(graph, scale, pf, 0, -x0, -y0);
- preview.marginTop = headerSize * scale * graph.pageScale;
- preview.marginBottom = footerSize * scale * graph.pageScale;
- preview.autoOrigin = false;
-
- const oldRenderPage = preview.renderPage;
- preview.renderPage = function(w, h, x, y, content, pageNumber) {
- const div = oldRenderPage.apply(this, arguments);
-
- const header = document.createElement('div');
- header.style.position = 'absolute';
- header.style.boxSizing = 'border-box';
- header.style.fontFamily = 'Arial,Helvetica';
- header.style.height = `${this.marginTop - 10}px`;
- header.style.textAlign = 'center';
- header.style.verticalAlign = 'middle';
- header.style.marginTop = 'auto';
- header.style.fontSize = '12px';
- header.style.width = '100%';
-
- // Vertical centering for text in header/footer
- header.style.lineHeight = `${this.marginTop - 10}px`;
-
- const footer = header.cloneNode(true);
-
- mxUtils.write(header, `Page ${pageNumber} - Header`);
- header.style.borderBottom = '1px solid gray';
- header.style.top = '0px';
-
- mxUtils.write(footer, `Page ${pageNumber} - Footer`);
- footer.style.borderTop = '1px solid gray';
- footer.style.bottom = '0px';
-
- div.firstChild.appendChild(footer);
- div.firstChild.appendChild(header);
-
- return div;
- };
-
- preview.open();
- })
- );
-
- this.el2.appendChild(
- mxUtils.button('Reset View', function(evt) {
- graph.view.scaleAndTranslate(0.15, 0, 0);
- })
- );
- }
-}
-
-export default PageBreaks;
diff --git a/src/pages/printing/index.js b/src/pages/printing/index.js
deleted file mode 100644
index f807e673a..000000000
--- a/src/pages/printing/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import PageTabs from '../PageTabs';
-
-export default function _Printing() {
- return (
-
- {/*
- );
-}
diff --git a/src/pages/shapes_stencils/Shape.js b/src/pages/shapes_stencils/Shape.js
deleted file mode 100644
index c5e283a73..000000000
--- a/src/pages/shapes_stencils/Shape.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxCylinder from '../../mxgraph/shape/node/mxCylinder';
-import mxCellRenderer from '../../mxgraph/view/cell/mxCellRenderer';
-
-class Shape extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Shape
- This example demonstrates how to implement and use a custom shape. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- }}
- />
-
- );
- }
-
- componentDidMount() {
- /*
- The example shape is a "3D box" that looks like this:
- ____
- / /|
- /___/ |
- | | /
- |___|/
-
- The code below defines the shape. The BoxShape function
- it the constructor which creates a new object instance.
-
- The next lines use an mxCylinder instance to augment the
- prototype of the shape ("inheritance") and reset the
- constructor to the topmost function of the c'tor chain.
- */
-
- class BoxShape extends mxCylinder {
- // Defines the extrusion of the box as a "static class variable"
- extrude = 10;
-
- /*
- Next, the mxCylinder's redrawPath method is "overridden".
- This method has a isForeground argument to separate two
- paths, one for the background (which must be closed and
- might be filled) and one for the foreground, which is
- just a stroke.
-
- Foreground: /
- _____/
- |
- |
- ____
- Background: / |
- / |
- | /
- |____/
- */
- redrawPath(path, x, y, w, h, isForeground) {
- const dy = this.extrude * this.scale;
- const dx = this.extrude * this.scale;
-
- if (isForeground) {
- path.moveTo(0, dy);
- path.lineTo(w - dx, dy);
- path.lineTo(w, 0);
- path.moveTo(w - dx, dy);
- path.lineTo(w - dx, h);
- } else {
- path.moveTo(0, dy);
- path.lineTo(dx, 0);
- path.lineTo(w, 0);
- path.lineTo(w, h - dy);
- path.lineTo(w - dx, h);
- path.lineTo(0, h);
- path.lineTo(0, dy);
- path.lineTo(dx, 0);
- path.close();
- }
- }
- }
- mxCellRenderer.registerShape('box', BoxShape);
-
- // Creates the graph inside the DOM node.
- const graph = new mxGraph(this.el);
-
- // Disables basic selection and cell handling
- graph.setEnabled(false);
-
- // Changes the default style for vertices "in-place"
- // to use the custom shape.
- const style = graph.getStylesheet().getDefaultVertexStyle();
- style[mxConstants.STYLE_SHAPE] = 'box';
-
- // Adds a spacing for the label that matches the
- // extrusion size
- style[mxConstants.STYLE_SPACING_TOP] = BoxShape.prototype.extrude;
- style[mxConstants.STYLE_SPACING_RIGHT] = BoxShape.prototype.extrude;
-
- // Adds a gradient and shadow to improve the user experience
- style[mxConstants.STYLE_GRADIENTCOLOR] = '#FFFFFF';
- style[mxConstants.STYLE_SHADOW] = true;
-
- // 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, 'Custom', 20, 20, 80, 60);
- const v2 = graph.insertVertex(parent, null, 'Shape', 200, 150, 80, 60);
- const e1 = graph.insertEdge(parent, null, '', v1, v2);
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
- }
-}
-
-export default Shape;
diff --git a/src/pages/shapes_stencils/Stencils.js b/src/pages/shapes_stencils/Stencils.js
deleted file mode 100644
index 5527df733..000000000
--- a/src/pages/shapes_stencils/Stencils.js
+++ /dev/null
@@ -1,401 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxStencilRegistry from '../../mxgraph/shape/node/mxStencilRegistry';
-import mxCellRenderer from '../../mxgraph/view/cell/mxCellRenderer';
-import mxShape from '../../mxgraph/shape/mxShape';
-import mxVertexHandler from '../../mxgraph/handler/mxVertexHandler';
-import mxCellHighlight from '../../mxgraph/handler/mxCellHighlight';
-import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
-import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
-import mxStencil from '../../mxgraph/shape/node/mxStencil';
-
-class Stencils extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Stencils
- This example demonstrates using an XML file to define new stencils to be - used as shapes. See docs/stencils.xsd for the XML schema file. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- height: '401px',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
{
- this.el2 = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- width: '601px',
- height: '150px',
- cursor: 'default',
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Sets the global shadow color
- mxConstants.SHADOWCOLOR = '#C0C0C0';
- mxConstants.SHADOW_OPACITY = 0.5;
- mxConstants.SHADOW_OFFSET_X = 4;
- mxConstants.SHADOW_OFFSET_Y = 4;
- mxConstants.HANDLE_FILLCOLOR = '#99ccff';
- mxConstants.HANDLE_STROKECOLOR = '#0088cf';
- mxConstants.VERTEX_SELECTION_COLOR = '#00a8ff';
-
- // Enables connections along the outline
- mxConnectionHandler.prototype.outlineConnect = true;
- mxEdgeHandler.prototype.manageLabelHandle = true;
- mxEdgeHandler.prototype.outlineConnect = true;
- mxCellHighlight.prototype.keepOnTop = true;
-
- // Enable rotation handle
- mxVertexHandler.prototype.rotationEnabled = true;
-
- // Uses the shape for resize previews
- mxVertexHandler.prototype.createSelectionShape = function(bounds) {
- const key = this.state.style[mxConstants.STYLE_SHAPE];
- const stencil = mxStencilRegistry.getStencil(key);
- let shape = null;
-
- if (stencil != null) {
- shape = new mxShape(stencil);
- shape.apply(this.state);
- } else {
- shape = new this.state.shape.constructor();
- }
-
- shape.outline = true;
- shape.bounds = bounds;
- shape.stroke = mxConstants.HANDLE_STROKECOLOR;
- shape.strokewidth = this.getSelectionStrokeWidth();
- shape.isDashed = this.isSelectionDashed();
- shape.isShadow = false;
-
- return shape;
- };
-
- // Defines a custom stencil via the canvas API as defined here:
- // http://jgraph.github.io/mxgraph/docs/js-api/files/util/mxXmlCanvas2D-js.html
-
- class CustomShape extends mxShape {
- paintBackground(c, x, y, w, h) {
- c.translate(x, y);
-
- // Head
- c.ellipse(w / 4, 0, w / 2, h / 4);
- c.fillAndStroke();
-
- c.begin();
- c.moveTo(w / 2, h / 4);
- c.lineTo(w / 2, (2 * h) / 3);
-
- // Arms
- c.moveTo(w / 2, h / 3);
- c.lineTo(0, h / 3);
- c.moveTo(w / 2, h / 3);
- c.lineTo(w, h / 3);
-
- // Legs
- c.moveTo(w / 2, (2 * h) / 3);
- c.lineTo(0, h);
- c.moveTo(w / 2, (2 * h) / 3);
- c.lineTo(w, h);
- c.end();
-
- c.stroke();
- }
- }
-
- // Replaces existing actor shape
- mxCellRenderer.registerShape('customShape', CustomShape);
-
- // Loads the stencils into the registry
- const req = mxUtils.load('stencils.xml');
- const root = req.getDocumentElement();
- let shape = root.firstChild;
-
- while (shape != null) {
- if (shape.nodeType === mxConstants.NODETYPE_ELEMENT) {
- mxStencilRegistry.addStencil(
- shape.getAttribute('name'),
- new mxStencil(shape)
- );
- }
-
- shape = shape.nextSibling;
- }
-
- mxEvent.disableContextMenu(this.el);
-
- // Creates the graph inside the given container
- const graph = new mxGraph(this.el);
- graph.setConnectable(true);
- graph.setTooltips(true);
- graph.setPanning(true);
-
- graph.getTooltipForCell = function(cell) {
- if (cell != null) {
- return cell.style;
- }
-
- return null;
- };
-
- // Changes default styles
- let style = graph.getStylesheet().getDefaultEdgeStyle();
- style[mxConstants.STYLE_EDGE] = 'orthogonalEdgeStyle';
- style = graph.getStylesheet().getDefaultVertexStyle();
- style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff';
- style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df';
- style[mxConstants.STYLE_SHADOW] = '1';
-
- // 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,
- 'A1',
- 20,
- 20,
- 40,
- 80,
- 'shape=and'
- );
- const v2 = graph.insertVertex(
- parent,
- null,
- 'A2',
- 20,
- 220,
- 40,
- 80,
- 'shape=and'
- );
- const v3 = graph.insertVertex(
- parent,
- null,
- 'X1',
- 160,
- 110,
- 80,
- 80,
- 'shape=xor'
- );
- const e1 = graph.insertEdge(parent, null, '', v1, v3);
- e1.geometry.points = [new mxPoint(90, 60), new mxPoint(90, 130)];
- const e2 = graph.insertEdge(parent, null, '', v2, v3);
- e2.geometry.points = [new mxPoint(90, 260), new mxPoint(90, 170)];
-
- const v4 = graph.insertVertex(
- parent,
- null,
- 'A3',
- 520,
- 20,
- 40,
- 80,
- 'shape=customShape;flipH=1'
- );
- const v5 = graph.insertVertex(
- parent,
- null,
- 'A4',
- 520,
- 220,
- 40,
- 80,
- 'shape=and;flipH=1'
- );
- const v6 = graph.insertVertex(
- parent,
- null,
- 'X2',
- 340,
- 110,
- 80,
- 80,
- 'shape=xor;flipH=1'
- );
- const e3 = graph.insertEdge(parent, null, '', v4, v6);
- e3.geometry.points = [new mxPoint(490, 60), new mxPoint(130, 130)];
- const e4 = graph.insertEdge(parent, null, '', v5, v6);
- e4.geometry.points = [new mxPoint(490, 260), new mxPoint(130, 170)];
-
- const v7 = graph.insertVertex(
- parent,
- null,
- 'O1',
- 250,
- 260,
- 80,
- 60,
- 'shape=or;direction=south'
- );
- const e5 = graph.insertEdge(parent, null, '', v6, v7);
- e5.geometry.points = [new mxPoint(310, 150)];
- const e6 = graph.insertEdge(parent, null, '', v3, v7);
- e6.geometry.points = [new mxPoint(270, 150)];
-
- const e7 = graph.insertEdge(parent, null, '', v7, v5);
- e7.geometry.points = [new mxPoint(290, 370)];
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
-
- this.el2.appendChild(
- mxUtils.button('FlipH', function() {
- graph.toggleCellStyles(mxConstants.STYLE_FLIPH);
- })
- );
-
- this.el2.appendChild(
- mxUtils.button('FlipV', function() {
- graph.toggleCellStyles(mxConstants.STYLE_FLIPV);
- })
- );
-
- this.el2.appendChild(document.createTextNode('\u00a0'));
- this.el2.appendChild(document.createTextNode('\u00a0'));
- this.el2.appendChild(document.createTextNode('\u00a0'));
- this.el2.appendChild(document.createTextNode('\u00a0'));
-
- this.el2.appendChild(
- mxUtils.button('Rotate', function() {
- const cell = graph.getSelectionCell();
-
- if (cell != null) {
- let geo = graph.getCellGeometry(cell);
-
- if (geo != null) {
- graph.getModel().beginUpdate();
- try {
- // Rotates the size and position in the geometry
- geo = geo.clone();
- geo.x += geo.width / 2 - geo.height / 2;
- geo.y += geo.height / 2 - geo.width / 2;
- const tmp = geo.width;
- geo.width = geo.height;
- geo.height = tmp;
- graph.getModel().setGeometry(cell, geo);
-
- // Reads the current direction and advances by 90 degrees
- const state = graph.view.getState(cell);
-
- if (state != null) {
- let dir =
- state.style[mxConstants.STYLE_DIRECTION] ||
- 'east'; /* default */
-
- if (dir === 'east') {
- dir = 'south';
- } else if (dir === 'south') {
- dir = 'west';
- } else if (dir === 'west') {
- dir = 'north';
- } else if (dir === 'north') {
- dir = 'east';
- }
-
- graph.setCellStyles(mxConstants.STYLE_DIRECTION, dir, [cell]);
- }
- } finally {
- graph.getModel().endUpdate();
- }
- }
- }
- })
- );
-
- this.el2.appendChild(document.createTextNode('\u00a0'));
- this.el2.appendChild(document.createTextNode('\u00a0'));
- this.el2.appendChild(document.createTextNode('\u00a0'));
- this.el2.appendChild(document.createTextNode('\u00a0'));
-
- this.el2.appendChild(
- mxUtils.button('And', function() {
- graph.setCellStyles(mxConstants.STYLE_SHAPE, 'and');
- })
- );
- this.el2.appendChild(
- mxUtils.button('Or', function() {
- graph.setCellStyles(mxConstants.STYLE_SHAPE, 'or');
- })
- );
- this.el2.appendChild(
- mxUtils.button('Xor', function() {
- graph.setCellStyles(mxConstants.STYLE_SHAPE, 'xor');
- })
- );
-
- this.el2.appendChild(document.createTextNode('\u00a0'));
- this.el2.appendChild(document.createTextNode('\u00a0'));
- this.el2.appendChild(document.createTextNode('\u00a0'));
- this.el2.appendChild(document.createTextNode('\u00a0'));
-
- this.el2.appendChild(
- mxUtils.button('Style', function() {
- const cell = graph.getSelectionCell();
-
- if (cell != null) {
- const style = mxUtils.prompt(
- 'Style',
- cell.getStyle()
- );
-
- if (style != null) {
- graph.getModel().setStyle(cell, style);
- }
- }
- })
- );
-
- this.el2.appendChild(
- mxUtils.button('+', function() {
- graph.zoomIn();
- })
- );
- this.el2.appendChild(
- mxUtils.button('-', function() {
- graph.zoomOut();
- })
- );
- }
-}
-
-export default Stencils;
diff --git a/src/pages/shapes_stencils/index.js b/src/pages/shapes_stencils/index.js
deleted file mode 100644
index db0ded617..000000000
--- a/src/pages/shapes_stencils/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import Preview from '../Previews';
-import Shape from './Shape';
-import Stencils from './Stencils';
-import PageTabs from '../PageTabs';
-
-export default function _ShapesStencils() {
- return (
-
-
- );
-}
diff --git a/src/pages/styles/DynamicStyle.js b/src/pages/styles/DynamicStyle.js
deleted file mode 100644
index f40da1cee..000000000
--- a/src/pages/styles/DynamicStyle.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxConstants from '../../mxgraph/util/mxConstants';
-
-class DynamicStyle extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Dynamic Style
- This example demonstrates changing the style of a cell dynamically by - overriding mxGraphModel.getStyle. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- }}
- />
-
- );
- };
-
- componentDidMount() {
- // Creates the graph inside the given container
- const graph = new mxGraph(this.el);
-
- // Disables moving of edge labels in this examples
- graph.edgeLabelsMovable = false;
-
- // Enables rubberband selection
- new mxRubberband(graph);
-
- // Needs to set a flag to check for dynamic style changes,
- // that is, changes to styles on cells where the style was
- // not explicitely changed using mxStyleChange
- graph.getView().updateStyle = true;
-
- // Overrides mxCell.getStyle to return a specific style
- // for edges that reflects their target terminal (in this case
- // the strokeColor will be equal to the target's fillColor).
-
- const getStyle = function() {
- let style = super.getStyle();
-
- if (this.isEdge()) {
- const target = this.getTerminal(false);
-
- if (target != null) {
- const targetStyle = graph.getCurrentCellStyle(target);
- const fill = mxUtils.getValue(
- targetStyle,
- mxConstants.STYLE_FILLCOLOR
- );
-
- if (fill != null) {
- style += `;strokeColor=${fill}`;
- }
- }
- } else if (this.isVertex()) {
- const geometry = this.getGeometry();
- if (geometry != null && geometry.width > 80) {
- style += ';fillColor=green';
- }
- }
- return style;
- };
-
- // 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.batchUpdate(() => {
- const v1 = graph.insertVertex({
- parent,
- value: 'Hello,',
- position: [20, 20],
- size: [80, 30],
- style: 'fillColor=green',
- });
- v1.getStyle = getStyle;
-
- const v2 = graph.insertVertex({
- parent,
- value: 'World!',
- position: [200, 150],
- size: [80, 30],
- style: 'fillColor=blue',
- });
- v2.getStyle = getStyle;
-
- const v3 = graph.insertVertex({
- parent,
- value: 'World!',
- position: [20, 150],
- size: [80, 30],
- style: 'fillColor=red',
- });
- v3.getStyle = getStyle;
-
- const e1 = graph.insertEdge({
- parent,
- value: 'Connect',
- source: v1,
- target: v2,
- style: 'perimeterSpacing=4;strokeWidth=4;labelBackgroundColor=white;fontStyle=1',
- });
- e1.getStyle = getStyle;
- });
- };
-}
-
-export default DynamicStyle;
diff --git a/src/pages/styles/HoverStyle.js b/src/pages/styles/HoverStyle.js
deleted file mode 100644
index d0eca3ff1..000000000
--- a/src/pages/styles/HoverStyle.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxUtils from '../../mxgraph/util/mxUtils';
-
-class HoverStyle extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Hoverstyle
- This example shows hot to change the style of a vertex on mouseover. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Creates the graph inside the given container
- const graph = new mxGraph(this.el);
-
- function updateStyle(state, hover) {
- if (hover) {
- state.style[mxConstants.STYLE_FILLCOLOR] = '#ff0000';
- }
-
- // Sets rounded style for both cases since the rounded style
- // is not set in the default style and is therefore inherited
- // once it is set, whereas the above overrides the default value
- state.style[mxConstants.STYLE_ROUNDED] = hover ? '1' : '0';
- state.style[mxConstants.STYLE_STROKEWIDTH] = hover ? '4' : '1';
- state.style[mxConstants.STYLE_FONTSTYLE] = hover
- ? mxConstants.FONT_BOLD
- : '0';
- }
-
- // Changes fill color to red on mouseover
- graph.addMouseListener({
- currentState: null,
- previousStyle: null,
- mouseDown(sender, me) {
- if (this.currentState != null) {
- this.dragLeave(me.getEvent(), this.currentState);
- this.currentState = null;
- }
- },
- mouseMove(sender, me) {
- if (this.currentState != null && me.getState() == this.currentState) {
- return;
- }
-
- let tmp = graph.view.getState(me.getCell());
-
- // Ignores everything but vertices
- if (
- graph.isMouseDown ||
- (tmp != null && !tmp.cell.isVertex())
- ) {
- tmp = null;
- }
-
- if (tmp != this.currentState) {
- if (this.currentState != null) {
- this.dragLeave(me.getEvent(), this.currentState);
- }
-
- this.currentState = tmp;
-
- if (this.currentState != null) {
- this.dragEnter(me.getEvent(), this.currentState);
- }
- }
- },
- mouseUp(sender, me) {},
- dragEnter(evt, state) {
- if (state != null) {
- this.previousStyle = state.style;
- state.style = mxUtils.clone(state.style);
- updateStyle(state, true);
- state.shape.apply(state);
- state.shape.redraw();
-
- if (state.text != null) {
- state.text.apply(state);
- state.text.redraw();
- }
- }
- },
- dragLeave(evt, state) {
- if (state != null) {
- state.style = this.previousStyle;
- updateStyle(state, false);
- state.shape.apply(state);
- state.shape.redraw();
-
- if (state.text != null) {
- state.text.apply(state);
- state.text.redraw();
- }
- }
- },
- });
-
- // Enables rubberband selection
- new mxRubberband(graph);
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- const parent = graph.getDefaultParent();
-
- // Adds cells to the model in a single step
- graph.getModel().beginUpdate();
- try {
- const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
- const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
- const e1 = graph.insertEdge(parent, null, '', v1, v2);
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
- }
-}
-
-export default HoverStyle;
diff --git a/src/pages/styles/Stylesheet.js b/src/pages/styles/Stylesheet.js
deleted file mode 100644
index 3018c898b..000000000
--- a/src/pages/styles/Stylesheet.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
-import mxPerimeter from '../../mxgraph/util/datatypes/style/mxPerimeter';
-
-class Stylesheet extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Stylesheet
- This example demonstrates using a custom stylesheet and control points - in edges, as well as overriding the getLabel and getTooltip function to - return dynamic information, and making a supercall in JavaScript. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- position: 'relative',
- height: '311px',
- cursor: 'default',
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Creates the graph inside the DOM node.
- const graph = new mxGraph(this.el);
-
- // Disables basic selection and cell handling
- graph.setEnabled(false);
-
- // Returns a special label for edges. Note: This does
- // a supercall to use the default implementation.
- graph.getLabel = function(cell) {
- const label = mxGraph.prototype.getLabel.apply(this, arguments);
-
- if (cell.isEdge()) {
- return `Transfer ${label}`;
- }
- return label;
- };
-
- // Installs a custom global tooltip
- graph.setTooltips(true);
- graph.getTooltip = function(state) {
- const { cell } = state;
- const model = this.getModel();
-
- if (modcellel.isEdge()) {
- const source = this.getLabel(cell.getTerminal(true));
- const target = this.getLabel(cell.getTerminal(false));
-
- return `${source} -> ${target}`;
- }
- return this.getLabel(cell);
- };
-
- // Creates the default style for vertices
- let style = [];
- style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
- style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
- style[mxConstants.STYLE_STROKECOLOR] = 'gray';
- style[mxConstants.STYLE_ROUNDED] = true;
- style[mxConstants.STYLE_FILLCOLOR] = '#EEEEEE';
- style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
- style[mxConstants.STYLE_FONTCOLOR] = '#774400';
- style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
- style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
- style[mxConstants.STYLE_FONTSIZE] = '12';
- style[mxConstants.STYLE_FONTSTYLE] = 1;
- graph.getStylesheet().putDefaultVertexStyle(style);
-
- // Creates the default style for edges
- style = [];
- style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CONNECTOR;
- style[mxConstants.STYLE_STROKECOLOR] = '#6482B9';
- style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
- style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
- style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
- style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;
- style[mxConstants.STYLE_FONTSIZE] = '10';
- graph.getStylesheet().putDefaultEdgeStyle(style);
-
- // 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,
- 'Interval 1',
- 20,
- 20,
- 180,
- 30
- );
- const v2 = graph.insertVertex(
- parent,
- null,
- 'Interval 2',
- 140,
- 80,
- 280,
- 30
- );
- const v3 = graph.insertVertex(
- parent,
- null,
- 'Interval 3',
- 200,
- 140,
- 360,
- 30
- );
- const v4 = graph.insertVertex(
- parent,
- null,
- 'Interval 4',
- 480,
- 200,
- 120,
- 30
- );
- const v5 = graph.insertVertex(
- parent,
- null,
- 'Interval 5',
- 60,
- 260,
- 400,
- 30
- );
- const e1 = graph.insertEdge(parent, null, '1', v1, v2);
- e1.getGeometry().points = [{ x: 160, y: 60 }];
- const e2 = graph.insertEdge(parent, null, '2', v1, v5);
- e2.getGeometry().points = [{ x: 80, y: 60 }];
- const e3 = graph.insertEdge(parent, null, '3', v2, v3);
- e3.getGeometry().points = [{ x: 280, y: 120 }];
- const e4 = graph.insertEdge(parent, null, '4', v3, v4);
- e4.getGeometry().points = [{ x: 500, y: 180 }];
- const e5 = graph.insertEdge(parent, null, '5', v3, v5);
- e5.getGeometry().points = [{ x: 380, y: 180 }];
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
- }
-}
-
-export default Stylesheet;
diff --git a/src/pages/styles/index.js b/src/pages/styles/index.js
deleted file mode 100644
index a1fbf6ca1..000000000
--- a/src/pages/styles/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import Preview from '../Previews';
-import DynamicStyle from './DynamicStyle';
-import HoverStyle from './HoverStyle';
-import Stylesheet from './Stylesheet';
-import PageTabs from '../PageTabs';
-
-export default function _Styles() {
- return (
-
-
- );
-}
diff --git a/src/pages/toolbars/DynamicToolbar.js b/src/pages/toolbars/DynamicToolbar.js
deleted file mode 100644
index 5ef31b34a..000000000
--- a/src/pages/toolbars/DynamicToolbar.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
-import mxImage from '../../mxgraph/util/image/mxImage';
-import mxToolbar from '../../mxgraph/util/gui/mxToolbar';
-import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
-import mxCell from '../../mxgraph/view/cell/mxCell';
-import mxGeometry from '../../mxgraph/util/datatypes/mxGeometry';
-import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
-
-class DynamicToolbar extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Dynamic Toolbar
- This example demonstrates changing the state of the toolbar at runtime. - {
- this.el = el;
- }}
- style={{
- overflow: 'hidden',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- position: 'relative',
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Defines an icon for creating new connections in the connection handler.
- // This will automatically disable the highlighting of the source vertex.
- mxConnectionHandler.prototype.connectImage = new mxImage(
- 'images/connector.gif',
- 16,
- 16
- );
-
- // Creates the div for the toolbar
- const tbContainer = document.createElement('div');
- tbContainer.style.position = 'absolute';
- tbContainer.style.overflow = 'hidden';
- tbContainer.style.padding = '2px';
- tbContainer.style.left = '0px';
- tbContainer.style.top = '0px';
- tbContainer.style.width = '24px';
- tbContainer.style.bottom = '0px';
-
- this.el.appendChild(tbContainer);
-
- // Creates new toolbar without event processing
- const toolbar = (this.toolbar = new mxToolbar(tbContainer));
- toolbar.enabled = false;
-
- // Creates the div for the graph
- const container = document.createElement('div');
- container.style.position = 'absolute';
- container.style.overflow = 'hidden';
- container.style.left = '24px';
- container.style.top = '0px';
- container.style.right = '0px';
- container.style.bottom = '0px';
- container.style.background = 'url("editors/images/grid.gif")';
-
- this.el.appendChild(container);
-
- // Creates the model and the graph inside the container
- // using the fastest rendering available on the browser
- const model = new mxGraphModel();
- const graph = (this.graph = new mxGraph(container, model));
-
- // Enables new connections in the graph
- graph.setConnectable(true);
- graph.setMultigraph(false);
-
- // Stops editing on enter or escape keypress
- const keyHandler = new mxKeyHandler(graph);
- const rubberband = new mxRubberband(graph);
-
- this.addVertex('editors/images/rectangle.gif', 100, 40, '');
- this.addVertex('editors/images/rounded.gif', 100, 40, 'shape=rounded');
- this.addVertex('editors/images/ellipse.gif', 40, 40, 'shape=ellipse');
- this.addVertex('editors/images/rhombus.gif', 40, 40, 'shape=rhombus');
- this.addVertex('editors/images/triangle.gif', 40, 40, 'shape=triangle');
- this.addVertex('editors/images/cylinder.gif', 40, 40, 'shape=cylinder');
- this.addVertex('editors/images/actor.gif', 30, 40, 'shape=actor');
- }
-
- addVertex(icon, w, h, style) {
- const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
- vertex.setVertex(true);
-
- const img = this.addToolbarItem(this.graph, this.toolbar, vertex, icon);
- img.enabled = true;
-
- this.graph.getSelectionModel().addListener(mxEvent.CHANGE, () => {
- const tmp = this.graph.isSelectionEmpty();
- mxUtils.setOpacity(img, tmp ? 100 : 20);
- img.enabled = tmp;
- });
- }
-
- addToolbarItem(graph, toolbar, prototype, image) {
- // Function that is executed when the image is dropped on
- // the graph. The cell argument points to the cell under
- // the mousepointer if there is one.
- const funct = (graph, evt, cell, x, y) => {
- graph.stopEditing(false);
-
- const vertex = graph.getModel().cloneCell(prototype);
- vertex.geometry.x = x;
- vertex.geometry.y = y;
-
- graph.addCell(vertex);
- graph.setSelectionCell(vertex);
- };
-
- // Creates the image which is used as the drag icon (preview)
- const img = toolbar.addMode(null, image, (evt, cell) => {
- const pt = this.graph.getPointForEvent(evt);
- funct(graph, evt, cell, pt.x, pt.y);
- });
-
- // Disables dragging if element is disabled. This is a workaround
- // for wrong event order in IE. Following is a dummy listener that
- // is invoked as the last listener in IE.
- mxEvent.addListener(img, 'mousedown', evt => {
- // do nothing
- });
-
- // This listener is always called first before any other listener
- // in all browsers.
- mxEvent.addListener(img, 'mousedown', evt => {
- if (img.enabled == false) {
- mxEvent.consume(evt);
- }
- });
-
- mxUtils.makeDraggable(img, graph, funct);
- return img;
- }
-}
-
-export default DynamicToolbar;
diff --git a/src/pages/toolbars/Toolbar.js b/src/pages/toolbars/Toolbar.js
deleted file mode 100644
index b5aed2c1b..000000000
--- a/src/pages/toolbars/Toolbar.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxDragSource from '../../mxgraph/util/drag_pan/mxDragSource';
-import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
-import mxToolbar from '../../mxgraph/util/gui/mxToolbar';
-import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
-import mxImage from '../../mxgraph/util/image/mxImage';
-import mxGeometry from '../../mxgraph/util/datatypes/mxGeometry';
-import mxCell from '../../mxgraph/view/cell/mxCell';
-import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
-
-class Toolbar extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Toolbar
- This example demonstrates using existing cells as templates for creating - new cells. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- height: '400px',
- border: 'gray dotted 1px',
- cursor: 'default',
- }}
- />
-
{
- this.el2 = el;
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Defines an icon for creating new connections in the connection handler.
- // This will automatically disable the highlighting of the source vertex.
- mxConnectionHandler.prototype.connectImage = new mxImage(
- 'images/connector.gif',
- 16,
- 16
- );
-
- // Creates the div for the toolbar
- const tbContainer = document.createElement('div');
- tbContainer.style.position = 'absolute';
- tbContainer.style.overflow = 'hidden';
- tbContainer.style.padding = '2px';
- tbContainer.style.left = '0px';
- tbContainer.style.top = '26px';
- tbContainer.style.width = '24px';
- tbContainer.style.bottom = '0px';
-
- this.el.appendChild(tbContainer);
-
- // Creates new toolbar without event processing
- const toolbar = new mxToolbar(tbContainer);
- toolbar.enabled = false;
-
- // Creates the div for the graph
- const container = document.createElement('div');
- container.style.position = 'absolute';
- container.style.overflow = 'hidden';
- container.style.left = '24px';
- container.style.top = '26px';
- container.style.right = '0px';
- container.style.bottom = '0px';
- container.style.background = 'url("editors/images/grid.gif")';
-
- this.el.appendChild(container);
-
- // Creates the model and the graph inside the container
- // using the fastest rendering available on the browser
- const model = new mxGraphModel();
- const graph = new mxGraph(container, model);
- graph.dropEnabled = true;
-
- // Matches DnD inside the graph
- mxDragSource.prototype.getDropTarget = function(graph, x, y) {
- let cell = graph.getCellAt(x, y);
- if (!graph.isValidDropTarget(cell)) {
- cell = null;
- }
- return cell;
- };
-
- // Enables new connections in the graph
- graph.setConnectable(true);
- graph.setMultigraph(false);
-
- // Stops editing on enter or escape keypress
- const keyHandler = new mxKeyHandler(graph);
- const rubberband = new mxRubberband(graph);
-
- const addVertex = (icon, w, h, style) => {
- const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
- vertex.setVertex(true);
-
- this.addToolbarItem(graph, toolbar, vertex, icon);
- };
-
- addVertex(
- 'editors/images/swimlane.gif',
- 120,
- 160,
- 'shape=swimlane;startSize=20;'
- );
- addVertex('editors/images/rectangle.gif', 100, 40, '');
- addVertex('editors/images/rounded.gif', 100, 40, 'shape=rounded');
- addVertex('editors/images/ellipse.gif', 40, 40, 'shape=ellipse');
- addVertex('editors/images/rhombus.gif', 40, 40, 'shape=rhombus');
- addVertex('editors/images/triangle.gif', 40, 40, 'shape=triangle');
- addVertex('editors/images/cylinder.gif', 40, 40, 'shape=cylinder');
- addVertex('editors/images/actor.gif', 30, 40, 'shape=actor');
- toolbar.addLine();
-
- const button = mxUtils.button(
- 'Create toolbar entry from selection',
- evt => {
- if (!graph.isSelectionEmpty()) {
- // Creates a copy of the selection array to preserve its state
- const cells = graph.getSelectionCells();
- const bounds = graph.getView().getBounds(cells);
-
- // Function that is executed when the image is dropped on
- // the graph. The cell argument points to the cell under
- // the mousepointer if there is one.
- const funct = (graph, evt, cell) => {
- graph.stopEditing(false);
-
- const pt = graph.getPointForEvent(evt);
- const dx = pt.x - bounds.x;
- const dy = pt.y - bounds.y;
-
- graph.setSelectionCells(graph.importCells(cells, dx, dy, cell));
- };
-
- // Creates the image which is used as the drag icon (preview)
- const img = toolbar.addMode(
- null,
- 'editors/images/outline.gif',
- funct
- );
- mxUtils.makeDraggable(img, graph, funct);
- }
- }
- );
-
- this.el2.appendChild(button);
- }
-
- addToolbarItem(graph, toolbar, prototype, image) {
- // Function that is executed when the image is dropped on
- // the graph. The cell argument points to the cell under
- // the mousepointer if there is one.
- const funct = (graph, evt, cell) => {
- graph.stopEditing(false);
-
- const pt = graph.getPointForEvent(evt);
- const vertex = graph.getModel().cloneCell(prototype);
- vertex.geometry.x = pt.x;
- vertex.geometry.y = pt.y;
-
- graph.setSelectionCells(graph.importCells([vertex], 0, 0, cell));
- };
-
- // Creates the image which is used as the drag icon (preview)
- const img = toolbar.addMode(null, image, funct);
- mxUtils.makeDraggable(img, graph, funct);
- }
-}
-
-export default Toolbar;
diff --git a/src/pages/toolbars/index.js b/src/pages/toolbars/index.js
deleted file mode 100644
index b6893a2ae..000000000
--- a/src/pages/toolbars/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import Preview from '../Previews';
-import DynamicToolbar from './DynamicToolbar';
-import Toolbar from './Toolbar';
-import PageTabs from '../PageTabs';
-
-export default function _Toolbars() {
- return (
-
-
- );
-}
diff --git a/src/pages/uiconfig.xml b/src/pages/uiconfig.xml
deleted file mode 100644
index 7cf140e92..000000000
--- a/src/pages/uiconfig.xml
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/pages/windows/Windows.js b/src/pages/windows/Windows.js
deleted file mode 100644
index 774973f70..000000000
--- a/src/pages/windows/Windows.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxLog from '../../mxgraph/util/gui/mxLog';
-import mxWindow from '../../mxgraph/util/gui/mxWindow';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
-
-class Windows extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
-
Windows
- This example demonstrates using the mxWindow class for displaying - windows. - {
- this.el = el;
- }}
- style={{
- overflow: 'auto',
- position: 'relative',
- height: '500px',
- background: 'lightyellow',
- cursor: 'default',
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Note that we're using the container scrollbars for the graph so that the
- // container extends to the parent div inside the window
- let wnd = new mxWindow(
- 'Scrollable, resizable, given height',
- this.el,
- 50,
- 50,
- 220,
- 224,
- true,
- true
- );
-
- // Creates the graph inside the given container
- const graph = new mxGraph(this.el);
-
- // Adds rubberband selection and keystrokes
- graph.setTooltips(true);
- graph.setPanning(true);
- const rubberband = new mxRubberband(graph);
- new mxKeyHandler(graph);
-
- mxEvent.disableContextMenu(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();
-
- // Adds cells to the model in a single step
- graph.getModel().beginUpdate();
- try {
- const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
- const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
- const e1 = graph.insertEdge(parent, null, '', v1, v2);
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
-
- wnd.setMaximizable(true);
- wnd.setResizable(true);
- wnd.setVisible(true);
-
- const lorem =
- 'Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ';
- let content = document.createElement('div');
- mxUtils.write(content, lorem + lorem + lorem);
-
- wnd = new mxWindow(
- 'Scrollable, resizable, auto height',
- content,
- 300,
- 50,
- 200,
- null,
- true,
- true
- );
- wnd.setMaximizable(true);
- wnd.setScrollable(true);
- wnd.setResizable(true);
- wnd.setVisible(true);
-
- content = content.cloneNode(true);
- content.style.width = '400px';
-
- wnd = new mxWindow(
- 'Scrollable, resizable, fixed content',
- content,
- 520,
- 50,
- 220,
- 200,
- true,
- true
- );
- wnd.setMaximizable(true);
- wnd.setScrollable(true);
- wnd.setResizable(true);
- wnd.setVisible(true);
-
- mxLog.show();
- }
-}
-
-export default Windows;
diff --git a/src/pages/windows/index.js b/src/pages/windows/index.js
deleted file mode 100644
index 594d77b99..000000000
--- a/src/pages/windows/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import Windows from './Windows';
-import Preview from '../Previews';
-import PageTabs from '../PageTabs';
-
-export default function _Windows() {
- return (
-
-
- );
-}
diff --git a/src/pages/xml_json/FileIO.js b/src/pages/xml_json/FileIO.js
deleted file mode 100644
index d0d77090f..000000000
--- a/src/pages/xml_json/FileIO.js
+++ /dev/null
@@ -1,226 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxCellTracker from '../../mxgraph/handler/mxCellTracker';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxFastOrganicLayout from '../../mxgraph/layout/mxFastOrganicLayout';
-import mxEventObject from '../../mxgraph/util/event/mxEventObject';
-import mxCodec from '../../mxgraph/serialization/mxCodec';
-import mxPerimeter from '../../mxgraph/util/datatypes/style/mxPerimeter';
-import mxClient from '../../mxgraph/mxClient';
-
-class FileIO extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
File I/O
- This example demonstrates reading an XML file, writing a custom parser, - applying an automatic layout and defining a 2-way edge. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'auto',
- height: '80vh',
- borderTop: 'gray 1px solid',
- }}
- />
-
{
- this.el2 = el;
- }}
- />
-
- );
- };
-
- componentDidMount() {
- // 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 browser is supported
- if (!mxClient.isBrowserSupported()) {
- // Displays an error message if the browser is
- // not supported.
- mxUtils.error('Browser is not supported!', 200, false);
- } else {
- // Creates the graph inside the given container
- const graph = new mxGraph(container);
-
- graph.setEnabled(false);
- graph.setPanning(true);
- graph.setTooltips(true);
- graph.panningHandler.useLeftButtonForPanning = true;
-
- // Adds a highlight on the cell under the mousepointer
- new mxCellTracker(graph);
-
- // Changes the default vertex style in-place
- let style = graph.getStylesheet().getDefaultVertexStyle();
- style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ROUNDED;
- style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
- style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
- style[mxConstants.STYLE_PERIMETER_SPACING] = 4;
- style[mxConstants.STYLE_SHADOW] = true;
-
- style = graph.getStylesheet().getDefaultEdgeStyle();
- style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
-
- style = mxUtils.clone(style);
- style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_CLASSIC;
- graph.getStylesheet().putCellStyle('2way', style);
-
- graph.isHtmlLabel = function(cell) {
- return true;
- };
-
- // Larger grid size yields cleaner layout result
- graph.gridSize = 20;
-
- // Creates a layout algorithm to be used
- // with the graph
- const layout = new mxFastOrganicLayout(graph);
-
- // Moves stuff wider apart than usual
- layout.forceConstant = 140;
-
- // Adds a button to execute the layout
- this.el2.appendChild(
- mxUtils.button('Arrange', function(evt) {
- const parent = graph.getDefaultParent();
- layout.execute(parent);
- })
- );
-
- // Load cells and layouts the graph
- graph.getModel().beginUpdate();
- try {
- // Loads the custom file format (TXT file)
- parse(graph, 'fileio.txt');
-
- // Loads the mxGraph file format (XML file)
- // read(graph, 'fileio.xml');
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- const parent = graph.getDefaultParent();
-
- // Executes the layout
- layout.execute(parent);
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
-
- graph.dblClick = function(evt, cell) {
- const mxe = new mxEventObject(
- mxEvent.DOUBLE_CLICK,
- 'event',
- evt,
- 'cell',
- cell
- );
- this.fireEvent(mxe);
-
- if (
- this.isEnabled() &&
- !mxEvent.isConsumed(evt) &&
- !mxe.isConsumed() &&
- cell != null
- ) {
- mxUtils.alert(
- `Show properties for cell ${cell.customId || cell.getId()}`
- );
- }
- };
- }
- }
-
- // Custom parser for simple file format
- function parse(graph, filename) {
- const model = graph.getModel();
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- const parent = graph.getDefaultParent();
-
- const req = mxUtils.load(filename);
- const text = req.getText();
-
- const lines = text.split('\n');
-
- // Creates the lookup table for the vertices
- const vertices = [];
-
- // Parses all lines (vertices must be first in the file)
- graph.getModel().beginUpdate();
- try {
- for (let i = 0; i < lines.length; i++) {
- // Ignores comments (starting with #)
- const colon = lines[i].indexOf(':');
-
- if (lines[i].substring(0, 1) != '#' || colon == -1) {
- const comma = lines[i].indexOf(',');
- const value = lines[i].substring(colon + 2, lines[i].length);
-
- if (comma == -1 || comma > colon) {
- const key = lines[i].substring(0, colon);
-
- if (key.length > 0) {
- vertices[key] = graph.insertVertex(
- parent,
- null,
- value,
- 0,
- 0,
- 80,
- 70
- );
- }
- } else if (comma < colon) {
- // Looks up the vertices in the lookup table
- const source = vertices[lines[i].substring(0, comma)];
- const target = vertices[lines[i].substring(comma + 1, colon)];
-
- if (source != null && target != null) {
- const e = graph.insertEdge(parent, null, value, source, target);
-
- // Uses the special 2-way style for 2-way labels
- if (value.indexOf('2-Way') >= 0) {
- e.style = '2way';
- }
- }
- }
- }
- }
- } finally {
- graph.getModel().endUpdate();
- }
- }
-
- // Parses the mxGraph XML file format
- function read(graph, filename) {
- const req = mxUtils.load(filename);
- const root = req.getDocumentElement();
- const dec = new mxCodec(root.ownerDocument);
-
- dec.decode(root, graph.getModel());
- }
- };
-}
-
-export default FileIO;
diff --git a/src/pages/xml_json/JsonData.js b/src/pages/xml_json/JsonData.js
deleted file mode 100644
index 82cc6e635..000000000
--- a/src/pages/xml_json/JsonData.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxCodecRegistry from '../../mxgraph/serialization/mxCodecRegistry';
-import mxObjectCodec from '../../mxgraph/serialization/mxObjectCodec';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxCodec from '../../mxgraph/serialization/mxCodec';
-
-class JsonData extends React.Component {
- // Adds an option to view the XML of the graph
- document;
-
- body;
-
- 'View XML';
-
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
JSON data
- This example demonstrates using JSON to encode/decode parts of the graph - model in mxCodec. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- height: '241px',
- background: "url('editors/images/grid.gif')",
- cursor: 'default',
- }}
- />
-
{
- this.el2 = el;
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Register a new codec
- function CustomData(value) {
- this.value = value;
- }
- 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) {
- const obj = JSON.parse(mxUtils.getTextContent(node));
- obj.constructor = CustomData;
-
- return obj;
- };
- mxCodecRegistry.register(codec);
-
- // Disables the built-in context menu
- mxEvent.disableContextMenu(this.el);
-
- // Creates the graph inside the given container
- const graph = new mxGraph(this.el);
-
- // Enables rubberband selection
- new mxRubberband(graph);
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- const parent = graph.getDefaultParent();
-
- // Adds cells to the model in a single step
- graph.getModel().beginUpdate();
- try {
- const v1 = graph.insertVertex(parent, null, '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();
- }
-
- this.el2.appendChild(
- mxUtils.button('Show JSON', function() {
- const encoder = new mxCodec();
- const node = encoder.encode(graph.getModel());
- mxUtils.popup(mxUtils.getXml(node), true);
- })
- );
- }
-}
-
-export default JsonData;
diff --git a/src/pages/xml_json/UserObject.js b/src/pages/xml_json/UserObject.js
deleted file mode 100644
index 81326762e..000000000
--- a/src/pages/xml_json/UserObject.js
+++ /dev/null
@@ -1,328 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxConstants from '../../mxgraph/util/mxConstants';
-import mxForm from '../../mxgraph/util/gui/mxForm';
-import mxCellAttributeChange from '../../mxgraph/atomic_changes/mxCellAttributeChange';
-import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
-import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
-import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
-import mxCodec from "../../mxgraph/serialization/mxCodec";
-
-class UserObject extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
-
-
User object
- This example demonstrates using XML objects as values for cells. -|
- {
- this.el = el;
- }}
- style={{
- border: 'solid 1px black',
- overflow: 'hidden',
- height: '241px',
- cursor: 'default',
- }}
- />
- |
-
- {
- this.propertiesEl = el;
- }}
- style={{
- border: 'solid 1px black',
- padding: '10px',
- }}
- />
- |
-
{
- this.el2 = el;
- }}
- />
-
- );
- }
-
- componentDidMount() {
- // Note that these XML nodes will be enclosing the
- // mxCell nodes for the model cells in the output
- const doc = mxUtils.createXmlDocument();
-
- const person1 = doc.createElement('Person');
- person1.setAttribute('firstName', 'Daffy');
- person1.setAttribute('lastName', 'Duck');
-
- const person2 = doc.createElement('Person');
- person2.setAttribute('firstName', 'Bugs');
- person2.setAttribute('lastName', 'Bunny');
-
- const relation = doc.createElement('Knows');
- relation.setAttribute('since', '1985');
-
- // Creates the graph inside the given container
- const graph = new mxGraph(this.el);
-
- // Optional disabling of sizing
- graph.setCellsResizable(false);
-
- // Configures the graph contains to resize and
- // add a border at the bottom, right
- graph.setResizeContainer(true);
- graph.minimumContainerSize = new mxRectangle(0, 0, 500, 380);
- graph.setBorder(60);
-
- // Stops editing on enter key, handles escape
- new mxKeyHandler(graph);
-
- // Overrides method to disallow edge label editing
- graph.isCellEditable = function(cell) {
- return !cell.isEdge();
- };
-
- // Overrides method to provide a cell label in the display
- graph.convertValueToString = function(cell) {
- if (mxUtils.isNode(cell.value)) {
- if (cell.value.nodeName.toLowerCase() == 'person') {
- const firstName = cell.getAttribute('firstName', '');
- const lastName = cell.getAttribute('lastName', '');
-
- if (lastName != null && lastName.length > 0) {
- return `${lastName}, ${firstName}`;
- }
-
- return firstName;
- }
- if (cell.value.nodeName.toLowerCase() == 'knows') {
- return `${cell.value.nodeName} (Since ${cell.getAttribute(
- 'since',
- ''
- )})`;
- }
- }
-
- return '';
- };
-
- // Overrides method to store a cell label in the model
- const { cellLabelChanged } = graph;
- graph.cellLabelChanged = function(cell, newValue, autoSize) {
- if (
- mxUtils.isNode(cell.value) &&
- cell.value.nodeName.toLowerCase() == 'person'
- ) {
- const pos = newValue.indexOf(' ');
-
- const firstName = pos > 0 ? newValue.substring(0, pos) : newValue;
- const lastName =
- pos > 0 ? newValue.substring(pos + 1, newValue.length) : '';
-
- // Clones the value for correct undo/redo
- const elt = cell.value.cloneNode(true);
-
- elt.setAttribute('firstName', firstName);
- elt.setAttribute('lastName', lastName);
-
- newValue = elt;
- autoSize = true;
- }
-
- cellLabelChanged.apply(this, arguments);
- };
-
- // Overrides method to create the editing value
- const { getEditingValue } = graph;
- graph.getEditingValue = function(cell) {
- if (
- mxUtils.isNode(cell.value) &&
- cell.value.nodeName.toLowerCase() == 'person'
- ) {
- const firstName = cell.getAttribute('firstName', '');
- const lastName = cell.getAttribute('lastName', '');
-
- return `${firstName} ${lastName}`;
- }
- };
-
- // Adds a special tooltip for edges
- graph.setTooltips(true);
-
- const { getTooltipForCell } = graph;
- graph.getTooltipForCell = function(cell) {
- // Adds some relation details for edges
- if (cell.isEdge()) {
- const src = this.getLabel(cell.getTerminal(true));
- const trg = this.getLabel(cell.getTerminal(false));
-
- return `${src} ${cell.value.nodeName} ${trg}`;
- }
-
- return getTooltipForCell.apply(this, arguments);
- };
-
- // Enables rubberband selection
- new mxRubberband(graph);
-
- // Adds an option to view the XML of the graph
- this.el2.appendChild(
- mxUtils.button('View XML', function() {
- const encoder = new mxCodec();
- const node = encoder.encode(graph.getModel());
- mxUtils.popup(mxUtils.getPrettyXml(node), true);
- })
- );
-
- // Changes the style for match the markup
- // Creates the default style for vertices
- let style = graph.getStylesheet().getDefaultVertexStyle();
- style[mxConstants.STYLE_STROKECOLOR] = 'gray';
- style[mxConstants.STYLE_ROUNDED] = true;
- style[mxConstants.STYLE_SHADOW] = true;
- style[mxConstants.STYLE_FILLCOLOR] = '#DFDFDF';
- style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
- style[mxConstants.STYLE_FONTCOLOR] = 'black';
- style[mxConstants.STYLE_FONTSIZE] = '12';
- style[mxConstants.STYLE_SPACING] = 4;
-
- // Creates the default style for edges
- style = graph.getStylesheet().getDefaultEdgeStyle();
- style[mxConstants.STYLE_STROKECOLOR] = '#0C0C0C';
- style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
- style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
- style[mxConstants.STYLE_ROUNDED] = true;
- style[mxConstants.STYLE_FONTCOLOR] = 'black';
- style[mxConstants.STYLE_FONTSIZE] = '10';
-
- // 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, person1, 40, 40, 80, 30);
- const v2 = graph.insertVertex(parent, null, person2, 200, 150, 80, 30);
- const e1 = graph.insertEdge(parent, null, relation, v1, v2);
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
-
- // Implements a properties panel that uses
- // mxCellAttributeChange to change properties
- graph
- .getSelectionModel()
- .addListener(mxEvent.CHANGE, function(sender, evt) {
- this.selectionChanged(graph);
- });
-
- this.selectionChanged(graph);
- }
-
- /**
- * Updates the properties panel
- */
- selectionChanged(graph) {
- const div = this.propertiesEl;
-
- // Forces focusout in IE
- graph.container.focus();
-
- // Clears the DIV the non-DOM way
- div.innerHTML = '';
-
- // Gets the selection cell
- const cell = graph.getSelectionCell();
-
- if (cell == null) {
- mxUtils.writeln(div, 'Nothing selected.');
- } else {
- // Writes the title
- const center = document.createElement('center');
- mxUtils.writeln(center, `${cell.value.nodeName} (${cell.id})`);
- div.appendChild(center);
- mxUtils.br(div);
-
- // Creates the form from the attributes of the user object
- const form = new mxForm();
-
- const attrs = cell.value.attributes;
-
- for (let i = 0; i < attrs.length; i++) {
- this.createTextField(graph, form, cell, attrs[i]);
- }
-
- div.appendChild(form.getTable());
- mxUtils.br(div);
- }
- }
-
- /**
- * Creates the textfield for the given property.
- */
- createTextField(graph, form, cell, attribute) {
- const input = form.addText(`${attribute.nodeName}:`, attribute.nodeValue);
-
- const applyHandler = function() {
- const newValue = input.value || '';
- const oldValue = cell.getAttribute(attribute.nodeName, '');
-
- if (newValue != oldValue) {
- graph.getModel().beginUpdate();
-
- try {
- const edit = new mxCellAttributeChange(
- cell,
- attribute.nodeName,
- newValue
- );
- graph.getModel().execute(edit);
- graph.updateCellSize(cell);
- } finally {
- graph.getModel().endUpdate();
- }
- }
- };
-
- mxEvent.addListener(input, 'keypress', function(evt) {
- // Needs to take shift into account for textareas
- if (evt.keyCode == /* enter */ 13 && !mxEvent.isShiftDown(evt)) {
- input.blur();
- }
- });
-
- // Note: Known problem is the blurring of fields in
- // Firefox by changing the selection, in which case
- // no event is fired in FF and the change is lost.
- // As a workaround you should use a local variable
- // that stores the focused field and invoke blur
- // explicitely where we do the graph.focus above.
- mxEvent.addListener(input, 'blur', applyHandler);
- }
-}
-
-export default UserObject;
diff --git a/src/pages/xml_json/index.js b/src/pages/xml_json/index.js
deleted file mode 100644
index 10989af2b..000000000
--- a/src/pages/xml_json/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import Preview from '../Previews';
-import JsonData from './JsonData';
-import UserObject from './UserObject';
-import PageTabs from '../PageTabs';
-
-export default function _XMLJSON() {
- return (
-
-
- );
-}
diff --git a/src/pages/zoom_offpage/LOD.js b/src/pages/zoom_offpage/LOD.js
deleted file mode 100644
index 3fcc5e7aa..000000000
--- a/src/pages/zoom_offpage/LOD.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxUtils from '../../mxgraph/util/mxUtils';
-
-class LOD extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Level of detail
- This example demonstrates implementing a level of detail per cell. - {
- this.el = el;
- }}
- style={{
- position: 'relative',
- overflow: 'hidden',
- 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
- const isVisible = 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.batchUpdate(() => {
- const v1 = graph.insertVertex(parent, null, '1', 20, 20, 80, 30);
- v1.lod = 1;
- v1.isVisible = isVisible;
-
- const v2 = graph.insertVertex(parent, null, '1', 200, 150, 80, 30);
- v2.lod = 1;
- v2.isVisible = isVisible;
-
- const v3 = graph.insertVertex(parent, null, '2', 20, 150, 40, 20);
- v3.lod = 2;
- v3.isVisible = isVisible;
-
- const v4 = graph.insertVertex(parent, null, '3', 200, 10, 20, 20);
- v4.lod = 3;
- v4.isVisible = isVisible;
-
- const e1 = graph.insertEdge(parent, null, '2', v1, v2, 'strokeWidth=2');
- e1.lod = 2;
- e1.isVisible = isVisible;
-
- const e2 = graph.insertEdge(parent, null, '2', v3, v4, 'strokeWidth=2');
- e2.lod = 2;
- e2.isVisible = isVisible;
-
- const e3 = graph.insertEdge(parent, null, '3', v1, v4, 'strokeWidth=1');
- e3.lod = 3;
- e3.isVisible = isVisible;
- });
-
- this.el2.appendChild(
- mxUtils.button('+', function() {
- graph.zoomIn();
- })
- );
-
- this.el2.appendChild(
- mxUtils.button('-', function() {
- graph.zoomOut();
- })
- );
- }
-}
-
-export default LOD;
diff --git a/src/pages/zoom_offpage/OffPage.js b/src/pages/zoom_offpage/OffPage.js
deleted file mode 100644
index 2f5800e7e..000000000
--- a/src/pages/zoom_offpage/OffPage.js
+++ /dev/null
@@ -1,217 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxCellTracker from '../../mxgraph/handler/mxCellTracker';
-import mxConstants from '../../mxgraph/util/mxConstants';
-
-class OffPage extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- // A container for the graph
- return (
- <>
-
Offpage connector
- This example demonstrates creating offpage connectors in a graph and - loading a new diagram on a single click. - {
- this.el = el;
- }}
- style={{}}
- />
-
- );
- }
-
- componentDidMount() {
- // Use complete cell as highlight region
- mxConstants.ACTIVE_REGION = 1;
-
- const container = document.createElement('div');
- container.style.position = 'relative';
- container.style.overflow = 'hidden';
- container.style.height = '80vhpx';
- container.style.background = 'url("editors/images/grid.gif")';
-
- this.el.appendChild(container);
-
- // Creates the graph inside the given container
- const graph = new mxGraph(container);
- graph.setEnabled(false);
-
- // Highlights offpage connectors
- const highlight = new mxCellTracker(graph, null, function(me) {
- const cell = me.getCell();
-
- if (
- cell != null &&
- cell.value != null &&
- typeof cell.value.create === 'function'
- ) {
- return cell;
- }
-
- return null;
- });
-
- // Handles clicks on offpage connectors and
- // executes function in user object
- graph.addListener(mxEvent.CLICK, function(source, evt) {
- const cell = evt.getProperty('cell');
-
- if (
- cell != null &&
- cell.value != null &&
- typeof cell.value.create === 'function'
- ) {
- cell.value.create();
- }
- });
-
- // Handles clicks on offpage connectors and
- // executes function in user object
- graph.getCursorForCell = function(cell) {
- if (
- cell != null &&
- cell.value != null &&
- typeof cell.value.create === 'function'
- ) {
- return 'pointer';
- }
- };
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- let first = null;
- let second = null;
-
- first = function() {
- const value = {
- toString() {
- return 'Next';
- },
- create: second,
- };
-
- // Adds cells to the model in a single step
- graph.getModel().beginUpdate();
- try {
- graph.getModel().setRoot(graph.getModel().createRoot());
- const parent = graph.getDefaultParent();
-
- const v1 = graph.insertVertex(
- parent,
- null,
- 'Click',
- 30,
- 20,
- 80,
- 30,
- 'fillColor=#FFFF88;strokeColor=#FF1A00'
- );
- const v2 = graph.insertVertex(
- parent,
- null,
- 'Next',
- 20,
- 150,
- 100,
- 30,
- 'fillColor=#FFFF88;strokeColor=#FF1A00'
- );
- const v3 = graph.insertVertex(
- parent,
- null,
- value,
- 200,
- 150,
- 40,
- 40,
- 'shape=triangle;align=left;fillColor=#C3D9FF;strokeColor=#4096EE'
- );
- const e1 = graph.insertEdge(
- parent,
- null,
- null,
- v1,
- v2,
- 'strokeColor=#FF1A00'
- );
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
- };
-
- second = function() {
- const value = {
- toString() {
- return 'Prev';
- },
- create: first,
- };
-
- // Adds cells to the model in a single step
- graph.getModel().beginUpdate();
- try {
- graph.getModel().setRoot(graph.getModel().createRoot());
- const parent = graph.getDefaultParent();
-
- const v1 = graph.insertVertex(
- parent,
- null,
- 'Click',
- 30,
- 20,
- 80,
- 30,
- 'fillColor=#CDEB8B;strokeColor=#008C00'
- );
- const v2 = graph.insertVertex(
- parent,
- null,
- 'Prev',
- 220,
- 20,
- 100,
- 30,
- 'fillColor=#CDEB8B;strokeColor=#008C00'
- );
- const v3 = graph.insertVertex(
- parent,
- null,
- value,
- 30,
- 150,
- 40,
- 40,
- 'shape=triangle;align=right;fillColor=#C3D9FF;strokeColor=#4096EE;direction=west'
- );
- const e1 = graph.insertEdge(
- parent,
- null,
- null,
- v1,
- v2,
- 'strokeColor=#008C00'
- );
- } finally {
- // Updates the display
- graph.getModel().endUpdate();
- }
- };
-
- first();
- }
-}
-
-export default OffPage;
diff --git a/src/pages/zoom_offpage/index.js b/src/pages/zoom_offpage/index.js
deleted file mode 100644
index 02f63d223..000000000
--- a/src/pages/zoom_offpage/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import Preview from '../Previews';
-import LOD from './LOD';
-import OffPage from './OffPage';
-import PageTabs from '../PageTabs';
-
-export default function _ZoomOffpage() {
- return (
-
-
- );
-}
diff --git a/src/public/css/common.css b/src/public/css/common.css
deleted file mode 100644
index 21f389211..000000000
--- a/src/public/css/common.css
+++ /dev/null
@@ -1,166 +0,0 @@
-div.mxRubberband {
- position: absolute;
- overflow: hidden;
- border-style: solid;
- border-width: 1px;
- border-color: #0000FF;
- background: #0077FF;
-}
-.mxCellEditor {
- background: url(data:image/gif;base64,R0lGODlhMAAwAIAAAP///wAAACH5BAEAAAAALAAAAAAwADAAAAIxhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8egpAAA7);
- _background: url('../images/transparent.gif');
- border-color: transparent;
- border-style: solid;
- display: inline-block;
- position: absolute;
- overflow: visible;
- word-wrap: normal;
- border-width: 0;
- min-width: 1px;
- resize: none;
- padding: 0px;
- margin: 0px;
-}
-.mxPlainTextEditor * {
- padding: 0px;
- margin: 0px;
-}
-div.mxWindow {
- -webkit-box-shadow: 3px 3px 12px #C0C0C0;
- -moz-box-shadow: 3px 3px 12px #C0C0C0;
- box-shadow: 3px 3px 12px #C0C0C0;
- background: url(data:image/gif;base64,R0lGODlhGgAUAIAAAOzs7PDw8CH5BAAAAAAALAAAAAAaABQAAAIijI+py70Ao5y02lud3lzhD4ZUR5aPiKajyZbqq7YyB9dhAQA7);
- _background: url('../images/window.gif');
- border:1px solid #c3c3c3;
- position: absolute;
- overflow: hidden;
- z-index: 1;
-}
-table.mxWindow {
- border-collapse: collapse;
- table-layout: fixed;
- font-family: Arial;
- font-size: 8pt;
-}
-td.mxWindowTitle {
- background: url(data:image/gif;base64,R0lGODlhFwAXAMQAANfX18rKyuHh4c7OzsDAwMHBwc/Pz+Li4uTk5NHR0dvb2+jo6O/v79/f3/n5+dnZ2dbW1uPj44yMjNPT0+Dg4N3d3ebm5szMzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAXABcAAAWQICESxWiW5Ck6bOu+MMvMdG3f86LvfO/rlqBwSCwaj8ikUohoOp/QaDNCrVqvWKpgezhsv+AwmEIum89ocmPNbrvf64p8Tq/b5Yq8fs/v5x+AgYKDhIAAh4iJiouHEI6PkJGSjhOVlpeYmZUJnJ2en6CcBqMDpaanqKgXq6ytrq+rAbKztLW2shK5uru8vbkhADs=) repeat-x;
- _background: url('../images/window-title.gif') repeat-x;
- text-overflow: ellipsis;
- white-space: nowrap;
- text-align: center;
- font-weight: bold;
- overflow: hidden;
- height: 13px;
- padding: 2px;
- padding-top: 4px;
- padding-bottom: 6px;
- color: black;
-}
-td.mxWindowPane {
- vertical-align: top;
- padding: 0px;
-}
-div.mxWindowPane {
- overflow: hidden;
- position: relative;
-}
-td.mxWindowPane td {
- font-family: Arial;
- font-size: 8pt;
-}
-td.mxWindowPane input, td.mxWindowPane select, td.mxWindowPane textarea, td.mxWindowPane radio {
- border-color: #8C8C8C;
- border-style: solid;
- border-width: 1px;
- font-family: Arial;
- font-size: 8pt;
- padding: 1px;
-}
-td.mxWindowPane button {
- background: url(data:image/gif;base64,R0lGODlhCgATALMAAP7+/t7e3vj4+Ojo6OXl5e/v7/n5+fb29vPz8/39/e3t7fHx8e7u7v///wAAAAAAACH5BAAAAAAALAAAAAAKABMAAAQ2MMlJhb0Y6c2X/2AhjiRjnqiirizqMkEsz0Rt30Ou7y8K/ouDcEg0GI9IgHLJbDif0Kh06owAADs=) repeat-x;
- _background: url('../images/button.gif') repeat-x;
- font-family: Arial;
- font-size: 8pt;
- padding: 2px;
- float: left;
-}
-img.mxToolbarItem {
- margin-right: 6px;
- margin-bottom: 6px;
- border-width: 1px;
-}
-select.mxToolbarCombo {
- vertical-align: top;
- border-style: inset;
- border-width: 2px;
-}
-div.mxToolbarComboContainer {
- padding: 2px;
-}
-img.mxToolbarMode {
- margin: 2px;
- margin-right: 4px;
- margin-bottom: 4px;
- border-width: 0px;
-}
-img.mxToolbarModeSelected {
- margin: 0px;
- margin-right: 2px;
- margin-bottom: 2px;
- border-width: 2px;
- border-style: inset;
-}
-div.mxTooltip {
- -webkit-box-shadow: 3px 3px 12px #C0C0C0;
- -moz-box-shadow: 3px 3px 12px #C0C0C0;
- box-shadow: 3px 3px 12px #C0C0C0;
- background: #FFFFCC;
- border-style: solid;
- border-width: 1px;
- border-color: black;
- font-family: Arial;
- font-size: 8pt;
- position: absolute;
- cursor: default;
- padding: 4px;
- color: black;
-}
-div.mxPopupMenu {
- -webkit-box-shadow: 3px 3px 12px #C0C0C0;
- -moz-box-shadow: 3px 3px 12px #C0C0C0;
- box-shadow: 3px 3px 12px #C0C0C0;
- background: url(data:image/gif;base64,R0lGODlhGgAUAIAAAOzs7PDw8CH5BAAAAAAALAAAAAAaABQAAAIijI+py70Ao5y02lud3lzhD4ZUR5aPiKajyZbqq7YyB9dhAQA7);
- _background: url('../images/window.gif');
- position: absolute;
- border-style: solid;
- border-width: 1px;
- border-color: black;
-}
-table.mxPopupMenu {
- border-collapse: collapse;
- margin-top: 1px;
- margin-bottom: 1px;
-}
-tr.mxPopupMenuItem {
- color: black;
- cursor: pointer;
-}
-tr.mxPopupMenuItemHover {
- background-color: #000066;
- color: #FFFFFF;
- cursor: pointer;
-}
-td.mxPopupMenuItem {
- padding: 2px 30px 2px 10px;
- white-space: nowrap;
- font-family: Arial;
- font-size: 8pt;
-}
-td.mxPopupMenuIcon {
- background-color: #D0D0D0;
- padding: 2px 4px 2px 4px;
-}
-.mxDisabled {
- opacity: 0.2 !important;
- cursor:default !important;
-}
diff --git a/src/public/editors/config/diagrameditor.xml b/src/public/editors/config/diagrameditor.xml
deleted file mode 100644
index f9576bfcb..000000000
--- a/src/public/editors/config/diagrameditor.xml
+++ /dev/null
@@ -1,333 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ' + label +
- ' (' + cell.getId() + ')
') : '') + - ((style != null) ? ('
Style: ' + style + '
') : '') + - 'Connections: ' + cell.getEdgeCount()+ - '
Children: ' + cell.getChildCount(); - } - ]]>
-
-
-
-
-
-
-
-
-
-
-
-
- null
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/public/editors/config/editor-commons.xml b/src/public/editors/config/editor-commons.xml
deleted file mode 100644
index 5d7069847..000000000
--- a/src/public/editors/config/editor-commons.xml
+++ /dev/null
@@ -1,267 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
- 0)
- {
- window.open(href);
- }
- else
- {
- mxUtils.alert('No URL defined. Showing properties...');
- editor.execute('showProperties', cell);
- }
- }
- }
- ]]>
- 0)
- {
- editor.graph.setCellStyles("fontFamily", family);
- }
- }
- ]]>
- 0 && size < 999)
- {
- editor.graph.setCellStyles("fontSize", size);
- }
- }
- ]]>
- = 0 && opacity <= 100)
- {
- editor.graph.setCellStyles("opacity", opacity);
- }
- }
- ]]>
-
-
diff --git a/src/public/editors/config/keyhandler-commons.xml b/src/public/editors/config/keyhandler-commons.xml
deleted file mode 100644
index 1e2c159c8..000000000
--- a/src/public/editors/config/keyhandler-commons.xml
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-
-
diff --git a/src/public/editors/config/keyhandler-minimal.xml b/src/public/editors/config/keyhandler-minimal.xml
deleted file mode 100644
index 7f4ce3cb4..000000000
--- a/src/public/editors/config/keyhandler-minimal.xml
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
diff --git a/src/public/editors/config/layouteditor.xml b/src/public/editors/config/layouteditor.xml
deleted file mode 100644
index 09f3a097a..000000000
--- a/src/public/editors/config/layouteditor.xml
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/public/editors/config/processeditor.xml b/src/public/editors/config/processeditor.xml
deleted file mode 100644
index 3e057d7b1..000000000
--- a/src/public/editors/config/processeditor.xml
+++ /dev/null
@@ -1,333 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 0;
- }
- ]]>
-
- function (cell)
- {
- return mxUtils.isNode(this.model.getValue(cell), 'swimlane');
- }
-
-
- function(cell)
- {
- return !this.isSwimlane(cell.parent);
- }
-
- '+cell.getAttribute('label')+
- ' ('+cell.getId()+')'+
- '
Style: '+cell.getStyle()+ - '
Edges: '+cell.getEdgeCount()+ - '
Children: '+cell.getChildCount(); - } - ]]>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/public/editors/config/wfeditor-commons.xml b/src/public/editors/config/wfeditor-commons.xml
deleted file mode 100644
index 7cfb41b0d..000000000
--- a/src/public/editors/config/wfeditor-commons.xml
+++ /dev/null
@@ -1,184 +0,0 @@
-
-
- function ()
- {
- this.showTasks();
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 0) || this.graph.isSwimlane(cell))
- {
- mxUtils.para(div, mxResources.get('layout'));
- mxUtils.linkAction(div, mxResources.get('verticalTree'),
- this, 'verticalTree', off);
- mxUtils.br(div);
- mxUtils.linkAction(div, mxResources.get('horizontalTree'),
- this, 'horizontalTree', off);
- mxUtils.br(div);
- }
-
- mxUtils.para(div, mxResources.get('format'));
-
- if (mxUtils.isNode(cell.value, 'Symbol'))
- {
- mxUtils.linkAction(div, mxResources.get('image'),
- this, 'image', off);
- mxUtils.br(div);
- }
- else
- {
- mxUtils.linkAction(div, mxResources.get('opacity'),
- this, 'opacity', off);
- mxUtils.br(div);
- if (this.graph.model.isVertex(cell) ||
- (cell.style != null &&
- cell.style.indexOf("arrowEdge") >= 0))
- {
- mxUtils.linkAction(div, mxResources.get('gradientColor'),
- this, 'gradientColor', off);
- mxUtils.br(div);
- }
- if (this.graph.model.isEdge(cell))
- {
- mxUtils.linkAction(div, 'Straight Connector', this, 'straightConnector', off);
- mxUtils.br(div);
- mxUtils.linkAction(div, 'Elbow Connector', this, 'elbowConnector', off);
- mxUtils.br(div);
- mxUtils.linkAction(div, 'Arrow Connector', this, 'arrowConnector', off);
- mxUtils.br(div);
- }
- }
-
- mxUtils.linkAction(div, mxResources.get('toggleRounded'), this, 'toggleRounded', off);
- mxUtils.br(div);
- if (this.graph.isSwimlane(cell) || this.graph.model.isEdge(cell))
- {
- mxUtils.linkAction(div, mxResources.get('toggleOrientation'), this, 'toggleOrientation', off);
- mxUtils.br(div);
- }
-
- if (this.graph.getSelectionCount() > 1)
- {
- mxUtils.para(div, mxResources.get('align'));
- mxUtils.linkAction(div, mxResources.get('left'),
- this, 'alignCellsLeft', off);
- mxUtils.br(div);
- mxUtils.linkAction(div, mxResources.get('center'),
- this, 'alignCellsCenter', off);
- mxUtils.br(div);
- mxUtils.linkAction(div, mxResources.get('right'),
- this, 'alignCellsRight', off);
- mxUtils.br(div);
- mxUtils.linkAction(div, mxResources.get('top'),
- this, 'alignCellsTop', off);
- mxUtils.br(div);
- mxUtils.linkAction(div, mxResources.get('middle'),
- this, 'alignCellsMiddle', off);
- mxUtils.br(div);
- mxUtils.linkAction(div, mxResources.get('bottom'),
- this, 'alignCellsBottom', off);
- mxUtils.br(div);
- }
-
- mxUtils.para(div, mxResources.get('selection'));
- mxUtils.linkAction(div, mxResources.get('clearSelection'),
- this, 'selectNone', off);
- mxUtils.br(div);
- }
- else if (layer.getChildCount() > 0)
- {
- mxUtils.para(div, mxResources.get('selection'));
- mxUtils.linkAction(div, mxResources.get('selectAll'),
- this, 'selectAll', off);
- mxUtils.br(div);
- }
-
- mxUtils.br(div);
- }
- }
- ]]>
-
diff --git a/src/public/editors/config/wfgraph-commons.xml b/src/public/editors/config/wfgraph-commons.xml
deleted file mode 100644
index 218068029..000000000
--- a/src/public/editors/config/wfgraph-commons.xml
+++ /dev/null
@@ -1,152 +0,0 @@
-
- 0) ?
- '
'+href : ''; - let maxlen = 30; - let desc = cell.getAttribute('description'); - if (desc == null || desc.length == 0) - { - desc = ''; - } - else if (desc.length < maxlen) - { - desc = '
'+desc; - } - else - { - desc = '
'+desc.substring(0, maxlen)+'...'; - } - return ''+cell.getAttribute('label')+ - ' ('+cell.getId()+')'+href+desc+ - '
Edges: '+cell.getEdgeCount()+ - '
Children: '+cell.getChildCount(); - } - ]]>
-
- function(cell)
- {
- return cell.getAttribute('label');
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/public/editors/config/wftoolbar-commons.xml b/src/public/editors/config/wftoolbar-commons.xml
deleted file mode 100644
index ca91e1e57..000000000
--- a/src/public/editors/config/wftoolbar-commons.xml
+++ /dev/null
@@ -1,74 +0,0 @@
-
-
-
-
-
-
-
-
-
-
diff --git a/src/public/editors/config/workfloweditor.xml b/src/public/editors/config/workfloweditor.xml
deleted file mode 100644
index 846e7f358..000000000
--- a/src/public/editors/config/workfloweditor.xml
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/src/public/editors/css/process.css b/src/public/editors/css/process.css
deleted file mode 100644
index e5d01c064..000000000
--- a/src/public/editors/css/process.css
+++ /dev/null
@@ -1,3 +0,0 @@
-img.mxToolbarMode {
- margin-right: 7px;
-}
diff --git a/src/public/editors/css/wordpress.css b/src/public/editors/css/wordpress.css
deleted file mode 100644
index c6d4971f1..000000000
--- a/src/public/editors/css/wordpress.css
+++ /dev/null
@@ -1,599 +0,0 @@
-/* Begin Typography & Colors */
-body {
- font-size: 62.5%; /* Resets 1em to 10px */
- font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
- background: #d5d6d7 url('../images/draw/drawbgcolor.jpg');
- color: #333;
- text-align: center;
- }
-
-#page {
- background-color: white;
- border: 1px solid #959596;
- text-align: left;
- }
-
-#header {
- background: #73a0c5 url('../images/draw/drawheader.jpg') no-repeat bottom center;
- }
-
-#headerimg {
- margin: 7px 9px 0;
- height: 62px;
- width: 740px;
- }
-
-#content {
- font-size: 1.2em
- }
-
-.widecolumn .entry p {
- font-size: 1.05em;
- }
-
-.narrowcolumn .entry, .widecolumn .entry {
- line-height: 1.4em;
- }
-
-.widecolumn {
- line-height: 1.6em;
- }
-
-.narrowcolumn .postmetadata {
- text-align: center;
- }
-
-.alt {
- background-color: #f8f8f8;
- border-top: 1px solid #ddd;
- border-bottom: 1px solid #ddd;
- }
-
-pre {
- background: #f8f8f8;
- font-size: 12px;
- padding: 8px;
-}
-
-#footer {
- background: #eee url('../images/draw/drawfooter.jpg') no-repeat top;
- border: none;
- }
-
-small {
- font-family: Arial, Helvetica, Sans-Serif;
- font-size: 0.9em;
- line-height: 1.5em;
- }
-
-h1, h2, h3 {
- font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
- font-weight: bold;
- }
-
-h1 {
- font-size: 2em;
- text-align: center;
- }
-
-#headerimg .description {
- font-size: 1.2em;
- text-align: center;
- }
-
-h2 {
- font-size: 1.6em;
- }
-
-h2.pagetitle {
- font-size: 1.6em;
- }
-
-#sidebar h2 {
- font-family: 'Lucida Grande', Verdana, Sans-Serif;
- font-size: 1.2em;
- }
-
-h3 {
- font-size: 1.3em;
- }
-
-h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
- text-decoration: none;
- color: white;
- }
-
-h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
- color: #333;
- }
-
-h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
- text-decoration: none;
- }
-
-.entry p a:visited {
- color: #b85b5a;
- }
-
-.commentlist li, #commentform input, #commentform textarea {
- font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
- }
-
-.commentlist li {
- font-weight: bold;
- }
-
-.commentlist cite, .commentlist cite a {
- font-weight: bold;
- font-style: normal;
- font-size: 1.1em;
- }
-
-.commentlist p {
- font-weight: normal;
- line-height: 1.5em;
- text-transform: none;
- }
-
-#commentform p {
- font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
- }
-
-.commentmetadata {
- font-weight: normal;
- }
-
-#sidebar {
- font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
- }
-
-small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
- color: #777;
- }
-
-code {
- font: 1.1em 'Courier New', Courier, Fixed;
- }
-
-acronym, abbr, span.caps
-{
- font-size: 0.9em;
- letter-spacing: .07em;
- }
-
-a, h2 a:hover, h3 a:hover {
- color: #06c;
- text-decoration: none;
- }
-
-a:hover {
- color: #147;
- text-decoration: underline;
- }
-
-#wp-calendar #prev a {
- font-size: 9pt;
- }
-
-#wp-calendar a {
- text-decoration: none;
- }
-
-#wp-calendar caption {
- font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
- text-align: center;
- }
-
-#wp-calendar th {
- font-style: normal;
- text-transform: capitalize;
- }
-/* End Typography & Colors */
-
-
-
-/* Begin Structure */
-body {
- margin: 0 0 20px 0;
- padding: 0;
- }
-
-#page {
- background-color: white;
- margin: 20px auto;
- padding: 0;
- width: 760px;
- border: 1px solid #959596;
- }
-
-#header {
- background-color: #73a0c5;
- margin: 0 0 0 1px;
- padding: 0;
- height: 70px;
- width: 758px;
- }
-
-#headerimg {
- margin: 0;
- height: 70px;
- width: 100%;
- }
-
-.narrowcolumn {
- float: left;
- padding: 0 0 20px 45px;
- margin: 0px 0 0;
- width: 450px;
- }
-
-.widecolumn {
- padding: 10px 0 20px 0;
- margin: 5px 0 0 150px;
- width: 450px;
- }
-
-.post {
- margin: 0 0 40px;
-/* text-align: justify; */
- }
-
-.widecolumn .post {
- margin: 0;
- }
-
-.narrowcolumn .postmetadata {
- padding-top: 5px;
- }
-
-.widecolumn .postmetadata {
- margin: 30px 0;
- }
-
-.widecolumn .smallattachment {
- text-align: center;
- float: left;
- width: 128px;
- margin: 5px 5px 5px 0px;
-}
-
-.widecolumn .attachment {
- text-align: center;
- margin: 5px 0px;
-}
-
-.postmetadata {
- clear: left;
-}
-
-#footer {
- padding: 0;
- margin: 0 auto;
- width: 760px;
- clear: both;
- }
-
-#footer p {
- margin: 0;
- padding: 20px 0;
- text-align: center;
- }
-/* End Structure */
-
-
-
-/* Begin Headers */
-h1 {
- padding-top: 30px;
- margin: 0;
- }
-
-h2 {
- margin: 30px 0 0;
- }
-
-h2.pagetitle {
- margin-top: 30px;
- text-align: center;
-}
-
-#sidebar h2 {
- margin: 5px 0 0;
- padding: 0;
- }
-
-h3 {
- padding: 0;
- margin: 30px 0 0;
- }
-
-h3.comments {
- padding: 0;
- margin: 40px auto 20px ;
- }
-/* End Headers */
-
-
-
-/* Begin Images */
-p img {
- padding: 0;
- max-width: 100%;
- }
-
-/* Using 'class="alignright"' on an image will (who would've
- thought?!) align the image to the right. And using 'class="centered',
- will of course center the image. This is much better than using
- align="center", being much more futureproof (and valid) */
-
-img.centered {
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
-
-img.alignright {
- padding: 4px;
- margin: 0 0 2px 7px;
- display: inline;
- }
-
-img.alignleft {
- padding: 4px;
- margin: 0 7px 2px 0;
- display: inline;
- }
-
-.alignright {
- float: right;
- }
-
-.alignleft {
- float: left
- }
-/* End Images */
-
-
-
-/* Begin Lists
-
- Special stylized non-IE bullets
- Do not work in Internet Explorer, which merely default to normal bullets. */
-
-html>body .entry ul {
- margin-left: 0px;
- padding: 0 0 0 30px;
- list-style: none;
- padding-left: 10px;
- text-indent: -10px;
- }
-
-html>body .entry li {
- margin: 7px 0 8px 10px;
- }
-
-.entry ul li:before, #sidebar ul ul li:before {
- content: "\00BB \0020";
- }
-
-.entry ol {
- padding: 0 0 0 35px;
- margin: 0;
- }
-
-.entry ol li {
- margin: 0;
- padding: 0;
- }
-
-.postmetadata ul, .postmetadata li {
- display: inline;
- list-style-type: none;
- list-style-image: none;
- }
-
-#sidebar ul, #sidebar ul ol {
- margin: 0;
- padding: 0;
- }
-
-#sidebar ul li {
- list-style-type: none;
- list-style-image: none;
- margin-bottom: 15px;
- }
-
-#sidebar ul p, #sidebar ul select {
- margin: 5px 0 8px;
- }
-
-#sidebar ul ul, #sidebar ul ol {
- margin: 5px 0 0 10px;
- }
-
-#sidebar ul ul ul, #sidebar ul ol {
- margin: 0 0 0 10px;
- }
-
-ol li, #sidebar ul ol li {
- list-style: decimal outside;
- }
-
-#sidebar ul ul li, #sidebar ul ol li {
- margin: 3px 0 0;
- padding: 0;
- }
-/* End Entry Lists */
-
-
-
-/* Begin Form Elements */
-#searchform {
- margin: 10px auto;
- padding: 5px 3px;
- text-align: center;
- }
-
-#sidebar #searchform #s {
- width: 108px;
- padding: 2px;
- }
-
-#sidebar #searchsubmit {
- padding: 1px;
- }
-
-.entry form { /* This is mainly for password protected posts, makes them look better. */
- text-align:center;
- }
-
-select {
- width: 130px;
- }
-
-#commentform input {
- width: 170px;
- padding: 2px;
- margin: 5px 5px 1px 0;
- }
-
-#commentform textarea {
- width: 100%;
- padding: 2px;
- }
-
-#commentform #submit {
- margin: 0;
- float: right;
- }
-/* End Form Elements */
-
-
-
-/* Begin Comments*/
-.alt {
- margin: 0;
- padding: 10px;
- }
-
-.commentlist {
- padding: 0;
-/* text-align: justify; */
- }
-
-.commentlist li {
- margin: 15px 0 3px;
- padding: 5px 10px 3px;
- list-style: none;
- }
-
-.commentlist p {
- margin: 10px 5px 10px 0;
- }
-
-#commentform p {
- margin: 5px 0;
- }
-
-.nocomments {
- text-align: center;
- margin: 0;
- padding: 0;
- }
-
-.commentmetadata {
- margin: 0;
- display: block;
- }
-/* End Comments */
-
-
-
-/* Begin Sidebar */
-#sidebar
-{
- padding: 20px 0 10px 0;
- margin-left: 545px;
- width: 190px;
- }
-
-#sidebar form {
- margin: 0;
- }
-/* End Sidebar */
-
-
-
-/* Begin Calendar */
-#wp-calendar {
- empty-cells: show;
- margin: 10px auto 0;
- width: 155px;
- }
-
-#wp-calendar #next a {
- padding-right: 10px;
- text-align: right;
- }
-
-#wp-calendar #prev a {
- padding-left: 10px;
- text-align: left;
- }
-
-#wp-calendar a {
- display: block;
- }
-
-#wp-calendar caption {
- text-align: center;
- width: 100%;
- }
-
-#wp-calendar td {
- padding: 3px 0;
- text-align: center;
- }
-
-#wp-calendar td.pad:hover { /* Doesn't work in IE */
- background-color: #fff; }
-/* End Calendar */
-
-
-
-/* Begin Various Tags & Classes */
-acronym, abbr, span.caps {
- cursor: help;
- }
-
-acronym, abbr {
- border-bottom: 1px dashed #999;
- }
-
-blockquote {
- margin: 15px 30px 0 10px;
- padding-left: 20px;
- border-left: 5px solid #ddd;
- }
-
-blockquote cite {
- margin: 5px 0 0;
- display: block;
- }
-
-.center {
- text-align: center;
- }
-
-a img {
- border: none;
- }
-
-.navigation {
- display: block;
- text-align: center;
- margin-top: 10px;
- margin-bottom: 60px;
- }
-/* End Various Tags & Classes*/
-
diff --git a/src/public/editors/diagrameditor.html b/src/public/editors/diagrameditor.html
deleted file mode 100644
index 9f55627e5..000000000
--- a/src/public/editors/diagrameditor.html
+++ /dev/null
@@ -1,340 +0,0 @@
-
-
- mxDraw Example
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/public/editors/diagrams/swimlanes.xml b/src/public/editors/diagrams/swimlanes.xml
deleted file mode 100644
index 0b38f4dc4..000000000
--- a/src/public/editors/diagrams/swimlanes.xml
+++ /dev/null
@@ -1,119 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/public/editors/diagrams/travel-booking.xml b/src/public/editors/diagrams/travel-booking.xml
deleted file mode 100644
index b408aca63..000000000
--- a/src/public/editors/diagrams/travel-booking.xml
+++ /dev/null
@@ -1,226 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/public/editors/diagrams/withdrawal.xml b/src/public/editors/diagrams/withdrawal.xml
deleted file mode 100644
index 42b0bbc95..000000000
--- a/src/public/editors/diagrams/withdrawal.xml
+++ /dev/null
@@ -1,286 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/public/editors/grapheditor.html b/src/public/editors/grapheditor.html
deleted file mode 100644
index 551ae496b..000000000
--- a/src/public/editors/grapheditor.html
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
- Deprecation Warning
-
-
-This example has been deprecated. A new implementation is available here.
-A copy of the old example is here.
-
-
diff --git a/src/public/editors/help/index-all.html b/src/public/editors/help/index-all.html
deleted file mode 100644
index 3f03c1d7d..000000000
--- a/src/public/editors/help/index-all.html
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
- mxGraph Workflow Editor Help Index
-
-
-
-
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
-
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
-
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- - diff --git a/src/public/editors/help/index.html b/src/public/editors/help/index.html deleted file mode 100644 index cb0e7207b..000000000 --- a/src/public/editors/help/index.html +++ /dev/null @@ -1,41 +0,0 @@ - - -mxGraph Workflow Editor Help
-
-
-
- mxGraph Workflow Designer
-
-
-
-
-
-
-
- mxGraph Process Example
-
-
-
-
-
-
-
-
- mxGraph Workflow Example
-
-
-
-
-
-
-
-
-
-
-
') : '') + - ((style != null) ? ('
Style: ' + style + '
') : '') + - 'Connections: ' + cell.getEdgeCount()+ - '
Children: ' + cell.getChildCount(); - } - ]]>
-
Style: '+cell.getStyle()+ - '
Edges: '+cell.getEdgeCount()+ - '
Children: '+cell.getChildCount(); - } - ]]>
'+href : ''; - let maxlen = 30; - let desc = cell.getAttribute('description'); - if (desc == null || desc.length == 0) - { - desc = ''; - } - else if (desc.length < maxlen) - { - desc = '
'+desc; - } - else - { - desc = '
'+desc.substring(0, maxlen)+'...'; - } - return ''+cell.getAttribute('label')+ - ' ('+cell.getId()+')'+href+desc+ - '
Edges: '+cell.getEdgeCount()+ - '
Children: '+cell.getChildCount(); - } - ]]>
-
-
-
-
-
-
-
-
-
-
-
- Source
-
-
-
-
diff --git a/src/public/editors/diagrams/empty.xml b/src/public/editors/diagrams/empty.xml
deleted file mode 100644
index 4d02c0696..000000000
--- a/src/public/editors/diagrams/empty.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
-
- mxDraw
-
-
-
-
- | - - | -
-
-
-
-
- 
- |
-
-
-
- Help Index
-Help Index
-- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
-
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
-
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- - diff --git a/src/public/editors/help/index.html b/src/public/editors/help/index.html deleted file mode 100644 index cb0e7207b..000000000 --- a/src/public/editors/help/index.html +++ /dev/null @@ -1,41 +0,0 @@ - - -
mxGraph Online Help
--Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et -dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip -ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu -fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt -mollit anim id est laborum. -
- See Help Index - - diff --git a/src/public/editors/images/connector.gif b/src/public/editors/images/connector.gif deleted file mode 100644 index 326e061ea..000000000 Binary files a/src/public/editors/images/connector.gif and /dev/null differ diff --git a/src/public/editors/images/grid.gif b/src/public/editors/images/grid.gif deleted file mode 100644 index a82a20d00..000000000 Binary files a/src/public/editors/images/grid.gif and /dev/null differ diff --git a/src/public/editors/images/loading.gif b/src/public/editors/images/loading.gif deleted file mode 100644 index 7bb834d66..000000000 Binary files a/src/public/editors/images/loading.gif and /dev/null differ diff --git a/src/public/editors/images/printer.png b/src/public/editors/images/printer.png deleted file mode 100644 index 7d364686a..000000000 Binary files a/src/public/editors/images/printer.png and /dev/null differ diff --git a/src/public/editors/js/app.js b/src/public/editors/js/app.js deleted file mode 100644 index 940162290..000000000 --- a/src/public/editors/js/app.js +++ /dev/null @@ -1,76 +0,0 @@ -/* - * Copyright (c) 2006-2013, JGraph Ltd - * - * Defines the startup sequence of the application. - */ -{ - /** - * Constructs a new application (returns an mxEditor instance) - */ - function createEditor(config) { - let editor = null; - - const hideSplash = function() { - // Fades-out the splash screen - const splash = document.getElementById('splash'); - - if (splash != null) { - try { - mxEvent.release(splash); - mxEffects.fadeOut(splash, 100, true); - } catch (e) { - splash.parentNode.removeChild(splash); - } - } - }; - - try { - if (!mxClient.isBrowserSupported()) { - mxUtils.error('Browser is not supported!', 200, false); - } else { - mxObjectCodec.allowEval = true; - const node = mxUtils.load(config).getDocumentElement(); - editor = new mxEditor(node); - mxObjectCodec.allowEval = false; - - // Adds active border for panning inside the container - editor.graph.createPanningManager = function() { - const pm = new mxPanningManager(this); - pm.border = 30; - - return pm; - }; - - editor.graph.allowAutoPanning = true; - editor.graph.timerAutoScroll = true; - - // Updates the window title after opening new files - const { title } = document; - const funct = function(sender) { - document.title = `${title} - ${sender.getTitle()}`; - }; - - editor.addListener(mxEvent.OPEN, funct); - - // Prints the current root in the window title if the - // current root of the graph changes (drilling). - editor.addListener(mxEvent.ROOT, funct); - funct(editor); - - // Displays version in statusbar - editor.setStatus(`mxGraph ${mxClient.VERSION}`); - - // Shows the application - hideSplash(); - } - } catch (e) { - hideSplash(); - - // Shows an error message if the editor cannot start - mxUtils.alert(`Cannot start application: ${e.message}`); - throw e; // for debugging - } - - return editor; - } -} diff --git a/src/public/editors/layouteditor.html b/src/public/editors/layouteditor.html deleted file mode 100644 index 35a1695e6..000000000 --- a/src/public/editors/layouteditor.html +++ /dev/null @@ -1,34 +0,0 @@ - - -
-
-
-
- Done
-
-
-
diff --git a/src/public/editors/processeditor.html b/src/public/editors/processeditor.html
deleted file mode 100644
index 6393d284f..000000000
--- a/src/public/editors/processeditor.html
+++ /dev/null
@@ -1,63 +0,0 @@
-
-
-
-
-
-
-
-
-
- Done
-
-
-
diff --git a/src/public/editors/resources/app.txt b/src/public/editors/resources/app.txt
deleted file mode 100644
index 6e3f29d36..000000000
--- a/src/public/editors/resources/app.txt
+++ /dev/null
@@ -1,75 +0,0 @@
-urlHelp=help/index.html
-lastSaved=Last Saved
-currentFile=Current File
-toolbar=Tools
-save=Save
-print=Print
-cut=Cut
-copy=Copy
-paste=Paste
-delete=Delete
-undo=Undo
-redo=Redo
-select=Select
-connect=Connect
-pan=Pan
-zoomIn=Zoom In
-zoomOut=Zoom Out
-zoom=Zoom
-fit=Fit
-actualSize=Actual Size
-selectAll=Select All
-clearSelection=Clear Selection
-shape=Shape
-format=Format
-font=Font
-group=Group
-ungroup=Ungroup
-removeFromParent=Orphan
-align=Align
-left=Left
-right=Right
-center=Center
-top=Top
-middle=Middle
-bottom=Bottom
-collapse=Collapse
-expand=Expand
-toBack=Send to back
-toFront=Bring to front
-enterGroup=Enter group
-exitGroup=Exit group
-layout=Layout
-horizontalTree=Horizontal Tree
-verticalTree=Vertical Tree
-fillColor=Fill Color
-strokeColor=Line Color
-gradientColor=Gradient Color
-bold=Bold
-italic=Italic
-fontColor=Font Color
-fontSize=Font Size
-fontFamily=Font Family
-examples=Examples
-newDiagram=New Diagram
-image=Image
-opacity=Opacity
-selection=Selection
-editStyle=Edit Style
-enterStyle=Enter Style
-enterColorname=Enter Colorname
-enterImageUrl=Enter Image URL
-enterOpacity=Enter Opacity (%)
-enterFontsize=Enter Fontsize (pt)
-enterFontfamily=Enter Fontfamily
-toggleRounded=Rounded
-toggleShadow=Shadow
-toggleOrientation=Orientation
-openHref=Open URL
-show=Show
-exportImage=Export Image
-exportSvg=Export SVG
-changesLost=All changes will be lost!
-swimlanes=Swimlanes
-travelBooking=Travel Booking
-notAvailable=Not available
diff --git a/src/public/editors/resources/app_de.txt b/src/public/editors/resources/app_de.txt
deleted file mode 100644
index 921ad78cd..000000000
--- a/src/public/editors/resources/app_de.txt
+++ /dev/null
@@ -1,73 +0,0 @@
-urlHelp=help/index.html
-lastSaved=Zuletzt Gespeichert
-currentFile=Aktuelle Datei
-toolbar=Tools
-save=Speichern
-print=Drucken
-cut=Ausschneiden
-copy=Kopieren
-paste=Einfügen
-delete=Löschen
-undo=Rückgängig
-redo=Wiederherstellen
-select=Markieren
-connect=Verbinden
-pan=Verschieben
-zoomIn=Hineinzoomen
-zoomOut=Herauszoomen
-zoom=Zoom
-fit=Anpassen
-actualSize=Aktuelle Grösse
-selectAll=Alle Markieren
-clearSelection=Markierung aufheben
-shape=Element
-format=Format
-font=Schrift
-group=Gruppieren
-ungroup=Gruppe aufheben
-removeFromParent=Herauslösen
-align=Ausrichten
-left=Links
-right=Rechts
-center=Zentriert
-top=Oben
-middle=Mitte
-bottom=Unten
-collapse=Zusammenziehen
-expand=Expandieren
-toBack=Nach hinten
-toFront=Nach vorne
-enterGroup=In Gruppe hinein
-exitGroup=Aus Gruppe heraus
-layout=Anordnen
-horizontalTree=Horizontaler Baum
-verticalTree=Vertikaler Baum
-fillColor=Füllfarbe
-strokeColor=Linienfarbe
-gradientColor=Farbverlauf
-bold=Fett
-italic=Kursiv
-fontColor=Schriftfarbe
-fontSize=Schriftgrösse
-fontFamily=Schriftart
-examples=Beispiele
-newDiagram=Neues Diagramm
-image=Bild
-opacity=Transparenz
-selection=Markierung
-editStyle=Style bearbeiten
-enterStyle=Style eingeben
-enterColorname=Farbname eingeben
-enterImageUrl=Bild URL eingeben
-enterOpacity=Deckkraft eingeben (%)
-enterFontsize=Schriftgrösse eingeben (pt)
-enterFontfamily=Schriftart eingeben
-toggleRounded=Abgerundet
-toggleShadow=Schatten
-toggleOrientation=Orientierung
-openHref=URL öffnen
-show=Anzeigen
-exportImage=Exportiere Bild
-exportSvg=Exportiere SVG
-changesLost=Alle Aenderungen gehen verloren!
-notAvailable=Nicht verfügbar
diff --git a/src/public/editors/resources/app_zh.txt b/src/public/editors/resources/app_zh.txt
deleted file mode 100644
index bd1f18e64..000000000
--- a/src/public/editors/resources/app_zh.txt
+++ /dev/null
@@ -1,75 +0,0 @@
-urlHelp=help/index.html
-lastSaved=上次保存
-currentFile=当前文件
-toolbar=工具栏
-save=保存
-print=打印
-cut=剪切
-copy=复制
-paste=粘贴
-delete=删除
-undo=撤销
-redo=重做
-select=选中
-connect=连接
-pan=平移
-zoomIn=放大
-zoomOut=缩小
-zoom=缩放
-fit=适合大小
-actualSize=实际大小
-selectAll=选中全部
-clearSelection=清空选中
-shape=形状
-format=格式
-font=字体
-group=分组
-ungroup=取消分组
-removeFromParent=从父级移除
-align=对齐
-left=左对齐
-right=右对齐
-center=水平居中
-top=顶端对齐
-middle=垂直居中
-bottom=底端对齐
-collapse=折叠
-expand=展开
-toBack=向后
-toFront=向前
-enterGroup=进入分组
-exitGroup=退出分组
-layout=布局
-horizontalTree=水平树状布局
-verticalTree=垂直树状布局
-fillColor=填充颜色
-strokeColor=线条颜色
-gradientColor=渐变色
-bold=粗体
-italic=斜体
-fontColor=字体颜色
-fontSize=字体大小
-fontFamily=字体
-examples=示例
-newDiagram=新图像
-image=图片
-opacity=不透明度
-selection=已选中
-editStyle=编辑样式
-enterStyle=输入样式
-enterColorname=输入颜色名
-enterImageUrl=输入图片URL
-enterOpacity=输入不透明度(%)
-enterFontsize=输入字体大小(pt)
-enterFontfamily=输入字体
-toggleRounded=圆角
-toggleShadow=阴影
-toggleOrientation=方向
-openHref=打开URL
-show=显示
-exportImage=导出图片
-exportSvg=导出SVG
-changesLost=所有更改都将丢失!
-swimlanes=泳道
-travelBooking=旅游预订
-notAvailable=不可用
diff --git a/src/public/editors/workfloweditor.html b/src/public/editors/workfloweditor.html
deleted file mode 100644
index 9185ad64b..000000000
--- a/src/public/editors/workfloweditor.html
+++ /dev/null
@@ -1,65 +0,0 @@
-
-
- |
-
- |
-
-
-
-
-
-
-
-
diff --git a/src/public/favicon.ico b/src/public/favicon.ico
deleted file mode 100644
index 4965832f2..000000000
Binary files a/src/public/favicon.ico and /dev/null differ
diff --git a/src/public/images/add.png b/src/public/images/add.png
deleted file mode 100644
index bf5f8edb1..000000000
Binary files a/src/public/images/add.png and /dev/null differ
diff --git a/src/public/images/button.gif b/src/public/images/button.gif
deleted file mode 100644
index ad55cab61..000000000
Binary files a/src/public/images/button.gif and /dev/null differ
diff --git a/src/public/images/camera.png b/src/public/images/camera.png
deleted file mode 100644
index aecc94d66..000000000
Binary files a/src/public/images/camera.png and /dev/null differ
diff --git a/src/public/images/check.png b/src/public/images/check.png
deleted file mode 100644
index ce81bceb7..000000000
Binary files a/src/public/images/check.png and /dev/null differ
diff --git a/src/public/images/close.gif b/src/public/images/close.gif
deleted file mode 100644
index 1069e94bb..000000000
Binary files a/src/public/images/close.gif and /dev/null differ
diff --git a/src/public/images/close.png b/src/public/images/close.png
deleted file mode 100644
index 4de4396d4..000000000
Binary files a/src/public/images/close.png and /dev/null differ
diff --git a/src/public/images/collapsed.gif b/src/public/images/collapsed.gif
deleted file mode 100644
index 0276444a6..000000000
Binary files a/src/public/images/collapsed.gif and /dev/null differ
diff --git a/src/public/images/connector.gif b/src/public/images/connector.gif
deleted file mode 100644
index 326e061ea..000000000
Binary files a/src/public/images/connector.gif and /dev/null differ
diff --git a/src/public/images/copy.png b/src/public/images/copy.png
deleted file mode 100644
index a987d4397..000000000
Binary files a/src/public/images/copy.png and /dev/null differ
diff --git a/src/public/images/cut.png b/src/public/images/cut.png
deleted file mode 100644
index 52bf94431..000000000
Binary files a/src/public/images/cut.png and /dev/null differ
diff --git a/src/public/images/delete2.png b/src/public/images/delete2.png
deleted file mode 100644
index be78c614b..000000000
Binary files a/src/public/images/delete2.png and /dev/null differ
diff --git a/src/public/images/dot.gif b/src/public/images/dot.gif
deleted file mode 100644
index 08b994764..000000000
Binary files a/src/public/images/dot.gif and /dev/null differ
diff --git a/src/public/images/error.gif b/src/public/images/error.gif
deleted file mode 100644
index 14e1aeefd..000000000
Binary files a/src/public/images/error.gif and /dev/null differ
diff --git a/src/public/images/expanded.gif b/src/public/images/expanded.gif
deleted file mode 100644
index 3767b0baf..000000000
Binary files a/src/public/images/expanded.gif and /dev/null differ
diff --git a/src/public/images/export1.png b/src/public/images/export1.png
deleted file mode 100644
index b8a01b873..000000000
Binary files a/src/public/images/export1.png and /dev/null differ
diff --git a/src/public/images/fit_to_size.png b/src/public/images/fit_to_size.png
deleted file mode 100644
index 4de46b015..000000000
Binary files a/src/public/images/fit_to_size.png and /dev/null differ
diff --git a/src/public/images/gradient_background.jpg b/src/public/images/gradient_background.jpg
deleted file mode 100644
index 7dbf35b3d..000000000
Binary files a/src/public/images/gradient_background.jpg and /dev/null differ
diff --git a/src/public/images/green-dot.gif b/src/public/images/green-dot.gif
deleted file mode 100644
index acaf7b298..000000000
Binary files a/src/public/images/green-dot.gif and /dev/null differ
diff --git a/src/public/images/group.png b/src/public/images/group.png
deleted file mode 100644
index 585ad790d..000000000
Binary files a/src/public/images/group.png and /dev/null differ
diff --git a/src/public/images/handle-connect.png b/src/public/images/handle-connect.png
deleted file mode 100644
index 513ab2b41..000000000
Binary files a/src/public/images/handle-connect.png and /dev/null differ
diff --git a/src/public/images/handle-main.png b/src/public/images/handle-main.png
deleted file mode 100644
index ee067ff81..000000000
Binary files a/src/public/images/handle-main.png and /dev/null differ
diff --git a/src/public/images/icons48/column.png b/src/public/images/icons48/column.png
deleted file mode 100644
index 5ae2c2439..000000000
Binary files a/src/public/images/icons48/column.png and /dev/null differ
diff --git a/src/public/images/icons48/earth.png b/src/public/images/icons48/earth.png
deleted file mode 100644
index 4493880c2..000000000
Binary files a/src/public/images/icons48/earth.png and /dev/null differ
diff --git a/src/public/images/icons48/gear.png b/src/public/images/icons48/gear.png
deleted file mode 100644
index 647d897fd..000000000
Binary files a/src/public/images/icons48/gear.png and /dev/null differ
diff --git a/src/public/images/icons48/keys.png b/src/public/images/icons48/keys.png
deleted file mode 100644
index 41828e429..000000000
Binary files a/src/public/images/icons48/keys.png and /dev/null differ
diff --git a/src/public/images/icons48/mail_new.png b/src/public/images/icons48/mail_new.png
deleted file mode 100644
index 16c666280..000000000
Binary files a/src/public/images/icons48/mail_new.png and /dev/null differ
diff --git a/src/public/images/icons48/server.png b/src/public/images/icons48/server.png
deleted file mode 100644
index 9621c6e46..000000000
Binary files a/src/public/images/icons48/server.png and /dev/null differ
diff --git a/src/public/images/icons48/table.png b/src/public/images/icons48/table.png
deleted file mode 100644
index d4df646fe..000000000
Binary files a/src/public/images/icons48/table.png and /dev/null differ
diff --git a/src/public/images/key.png b/src/public/images/key.png
deleted file mode 100644
index e66758a83..000000000
Binary files a/src/public/images/key.png and /dev/null differ
diff --git a/src/public/images/loading.gif b/src/public/images/loading.gif
deleted file mode 100644
index 118f4b0df..000000000
Binary files a/src/public/images/loading.gif and /dev/null differ
diff --git a/src/public/images/maximize.gif b/src/public/images/maximize.gif
deleted file mode 100644
index e27cf3e19..000000000
Binary files a/src/public/images/maximize.gif and /dev/null differ
diff --git a/src/public/images/minimize.gif b/src/public/images/minimize.gif
deleted file mode 100644
index 1e95e7cae..000000000
Binary files a/src/public/images/minimize.gif and /dev/null differ
diff --git a/src/public/images/navigate_minus.png b/src/public/images/navigate_minus.png
deleted file mode 100644
index 71edaf999..000000000
Binary files a/src/public/images/navigate_minus.png and /dev/null differ
diff --git a/src/public/images/navigate_plus.png b/src/public/images/navigate_plus.png
deleted file mode 100644
index b5b7e8706..000000000
Binary files a/src/public/images/navigate_plus.png and /dev/null differ
diff --git a/src/public/images/normalize.gif b/src/public/images/normalize.gif
deleted file mode 100644
index 34a8d302e..000000000
Binary files a/src/public/images/normalize.gif and /dev/null differ
diff --git a/src/public/images/paste.png b/src/public/images/paste.png
deleted file mode 100644
index fd628d9db..000000000
Binary files a/src/public/images/paste.png and /dev/null differ
diff --git a/src/public/images/plus.png b/src/public/images/plus.png
deleted file mode 100644
index 24a84bb49..000000000
Binary files a/src/public/images/plus.png and /dev/null differ
diff --git a/src/public/images/point.gif b/src/public/images/point.gif
deleted file mode 100644
index 9074c395f..000000000
Binary files a/src/public/images/point.gif and /dev/null differ
diff --git a/src/public/images/press32.png b/src/public/images/press32.png
deleted file mode 100644
index f00e3f707..000000000
Binary files a/src/public/images/press32.png and /dev/null differ
diff --git a/src/public/images/print32.png b/src/public/images/print32.png
deleted file mode 100644
index 0cca86cc1..000000000
Binary files a/src/public/images/print32.png and /dev/null differ
diff --git a/src/public/images/printer.png b/src/public/images/printer.png
deleted file mode 100644
index 6004816bc..000000000
Binary files a/src/public/images/printer.png and /dev/null differ
diff --git a/src/public/images/redo.png b/src/public/images/redo.png
deleted file mode 100644
index 3eae59c51..000000000
Binary files a/src/public/images/redo.png and /dev/null differ
diff --git a/src/public/images/resize.gif b/src/public/images/resize.gif
deleted file mode 100644
index ff558dba0..000000000
Binary files a/src/public/images/resize.gif and /dev/null differ
diff --git a/src/public/images/separator.gif b/src/public/images/separator.gif
deleted file mode 100644
index 5c1b89566..000000000
Binary files a/src/public/images/separator.gif and /dev/null differ
diff --git a/src/public/images/sidebar_bg.gif b/src/public/images/sidebar_bg.gif
deleted file mode 100644
index 67e824486..000000000
Binary files a/src/public/images/sidebar_bg.gif and /dev/null differ
diff --git a/src/public/images/spacer.gif b/src/public/images/spacer.gif
deleted file mode 100644
index 35d42e808..000000000
Binary files a/src/public/images/spacer.gif and /dev/null differ
diff --git a/src/public/images/submenu.gif b/src/public/images/submenu.gif
deleted file mode 100644
index ffe76176d..000000000
Binary files a/src/public/images/submenu.gif and /dev/null differ
diff --git a/src/public/images/toolbar_bg.gif b/src/public/images/toolbar_bg.gif
deleted file mode 100644
index 87b937402..000000000
Binary files a/src/public/images/toolbar_bg.gif and /dev/null differ
diff --git a/src/public/images/transparent.gif b/src/public/images/transparent.gif
deleted file mode 100644
index 76040f2b0..000000000
Binary files a/src/public/images/transparent.gif and /dev/null differ
diff --git a/src/public/images/undo.png b/src/public/images/undo.png
deleted file mode 100644
index 4ba0ffb16..000000000
Binary files a/src/public/images/undo.png and /dev/null differ
diff --git a/src/public/images/view_1_1.png b/src/public/images/view_1_1.png
deleted file mode 100644
index 88657a1ed..000000000
Binary files a/src/public/images/view_1_1.png and /dev/null differ
diff --git a/src/public/images/view_1_132.png b/src/public/images/view_1_132.png
deleted file mode 100644
index e9a1b7299..000000000
Binary files a/src/public/images/view_1_132.png and /dev/null differ
diff --git a/src/public/images/view_next.png b/src/public/images/view_next.png
deleted file mode 100644
index b4094f04e..000000000
Binary files a/src/public/images/view_next.png and /dev/null differ
diff --git a/src/public/images/view_previous.png b/src/public/images/view_previous.png
deleted file mode 100644
index b385b44c3..000000000
Binary files a/src/public/images/view_previous.png and /dev/null differ
diff --git a/src/public/images/warning.gif b/src/public/images/warning.gif
deleted file mode 100644
index 705235f95..000000000
Binary files a/src/public/images/warning.gif and /dev/null differ
diff --git a/src/public/images/warning.png b/src/public/images/warning.png
deleted file mode 100644
index 2f7878964..000000000
Binary files a/src/public/images/warning.png and /dev/null differ
diff --git a/src/public/images/window-title.gif b/src/public/images/window-title.gif
deleted file mode 100644
index 231def8bb..000000000
Binary files a/src/public/images/window-title.gif and /dev/null differ
diff --git a/src/public/images/window.gif b/src/public/images/window.gif
deleted file mode 100644
index 6631c4f5f..000000000
Binary files a/src/public/images/window.gif and /dev/null differ
diff --git a/src/public/images/wires-grid.gif b/src/public/images/wires-grid.gif
deleted file mode 100644
index ad888a2a6..000000000
Binary files a/src/public/images/wires-grid.gif and /dev/null differ
diff --git a/src/public/images/zoom_in.png b/src/public/images/zoom_in.png
deleted file mode 100644
index ad6abb93a..000000000
Binary files a/src/public/images/zoom_in.png and /dev/null differ
diff --git a/src/public/images/zoom_in32.png b/src/public/images/zoom_in32.png
deleted file mode 100644
index 438ff0ff0..000000000
Binary files a/src/public/images/zoom_in32.png and /dev/null differ
diff --git a/src/public/images/zoom_out.png b/src/public/images/zoom_out.png
deleted file mode 100644
index 0566f26bf..000000000
Binary files a/src/public/images/zoom_out.png and /dev/null differ
diff --git a/src/public/images/zoom_out32.png b/src/public/images/zoom_out32.png
deleted file mode 100644
index 8edb7655b..000000000
Binary files a/src/public/images/zoom_out32.png and /dev/null differ
diff --git a/src/public/map-background/images/layers-2x.png b/src/public/map-background/images/layers-2x.png
deleted file mode 100644
index 200c333dc..000000000
Binary files a/src/public/map-background/images/layers-2x.png and /dev/null differ
diff --git a/src/public/map-background/images/layers.png b/src/public/map-background/images/layers.png
deleted file mode 100644
index 1a72e5784..000000000
Binary files a/src/public/map-background/images/layers.png and /dev/null differ
diff --git a/src/public/map-background/images/marker-icon-2x.png b/src/public/map-background/images/marker-icon-2x.png
deleted file mode 100644
index 88f9e5018..000000000
Binary files a/src/public/map-background/images/marker-icon-2x.png and /dev/null differ
diff --git a/src/public/map-background/images/marker-icon.png b/src/public/map-background/images/marker-icon.png
deleted file mode 100644
index 950edf246..000000000
Binary files a/src/public/map-background/images/marker-icon.png and /dev/null differ
diff --git a/src/public/map-background/images/marker-shadow.png b/src/public/map-background/images/marker-shadow.png
deleted file mode 100644
index 9fd297953..000000000
Binary files a/src/public/map-background/images/marker-shadow.png and /dev/null differ
diff --git a/src/public/map-background/leaflet-src.js b/src/public/map-background/leaflet-src.js
deleted file mode 100644
index 87981794f..000000000
--- a/src/public/map-background/leaflet-src.js
+++ /dev/null
@@ -1,13802 +0,0 @@
-/* @preserve
- * Leaflet 1.3.1+Detached: ba6f97fff8647e724e4dfe66d2ed7da11f908989.ba6f97f, a JS library for interactive maps. http://leafletjs.com
- * (c) 2010-2017 Vladimir Agafonkin, (c) 2010-2011 CloudMade
- */
-
-(function (global, factory) {
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
- typeof define === 'function' && define.amd ? define(['exports'], factory) :
- (factory((global.L = {})));
-}(this, (function (exports) { 'use strict';
-
-let version = "1.3.1+HEAD.ba6f97f";
-
-/*
- * @namespace Util
- *
- * Various utility functions, used by Leaflet internally.
- */
-
-let freeze = Object.freeze;
-Object.freeze = (obj) => { return obj; };
-
-// @function extend(dest: Object, src?: Object): Object
-// Merges the properties of the `src` object (or multiple objects) into `dest` object and returns the latter. Has an `L.extend` shortcut.
-function extend(dest) {
- var i, j, len, src;
-
- for (j = 1, len = arguments.length; j < len; j++) {
- src = arguments[j];
- for (i in src) {
- dest[i] = src[i];
- }
- }
- return dest;
-}
-
-// @function create(proto: Object, properties?: Object): Object
-// Compatibility polyfill for [Object.create](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/create)
-let create = Object.create || (function () {
- function F() {}
- return function (proto) {
- F.prototype = proto;
- return new F();
- };
-})();
-
-// @function bind(fn: Function, …): Function
-// Returns a new function bound to the arguments passed, like [Function.prototype.bind](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Function/bind).
-// Has a `L.bind()` shortcut.
-function bind(fn, obj) {
- let slice = Array.prototype.slice;
-
- if (fn.bind) {
- return fn.bind.apply(fn, slice.call(arguments, 1));
- }
-
- let args = slice.call(arguments, 2);
-
- return function () {
- return fn.apply(obj, args.length ? args.concat(slice.call(arguments)) : arguments);
- };
-}
-
-// @property lastId: Number
-// Last unique ID used by [`stamp()`](#util-stamp)
-let lastId = 0;
-
-// @function stamp(obj: Object): Number
-// Returns the unique ID of an object, assigning it one if it doesn't have it.
-function stamp(obj) {
- /*eslint-disable */
- obj._leaflet_id = obj._leaflet_id || ++lastId;
- return obj._leaflet_id;
- /* eslint-enable */
-}
-
-// @function throttle(fn: Function, time: Number, context: Object): Function
-// Returns a function which executes function `fn` with the given scope `context`
-// (so that the `this` keyword refers to `context` inside `fn`'s code). The function
-// `fn` will be called no more than one time per given amount of `time`. The arguments
-// received by the bound function will be any arguments passed when binding the
-// function, followed by any arguments passed when invoking the bound function.
-// Has an `L.throttle` shortcut.
-function throttle(fn, time, context) {
- var lock, args, wrapperFn, later;
-
- later = () => {
- // reset lock and call if queued
- lock = false;
- if (args) {
- wrapperFn.apply(context, args);
- args = false;
- }
- };
-
- wrapperFn = () => {
- if (lock) {
- // called too soon, queue to call later
- args = arguments;
-
- } else {
- // call and lock until later
- fn.apply(context, arguments);
- setTimeout(later, time);
- lock = true;
- }
- };
-
- return wrapperFn;
-}
-
-// @function wrapNum(num: Number, range: Number[], includeMax?: Boolean): Number
-// Returns the number `num` modulo `range` in such a way so it lies within
-// `range[0]` and `range[1]`. The returned value will be always smaller than
-// `range[1]` unless `includeMax` is set to `true`.
-function wrapNum(x, range, includeMax) {
- let max = range[1],
- min = range[0],
- d = max - min;
- return x === max && includeMax ? x : ((x - min) % d + d) % d + min;
-}
-
-// @function falseFn(): Function
-// Returns a function which always returns `false`.
-function falseFn() { return false; }
-
-// @function formatNum(num: Number, digits?: Number): Number
-// Returns the number `num` rounded to `digits` decimals, or to 6 decimals by default.
-function formatNum(num, digits) {
- let pow = Math.pow(10, (digits === undefined ? 6 : digits));
- return Math.round(num * pow) / pow;
-}
-
-// @function trim(str: String): String
-// Compatibility polyfill for [String.prototype.trim](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/Trim)
-function trim(str) {
- return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g, '');
-}
-
-// @function splitWords(str: String): String[]
-// Trims and splits the string on whitespace and returns the array of parts.
-function splitWords(str) {
- return trim(str).split(/\s+/);
-}
-
-// @function setOptions(obj: Object, options: Object): Object
-// Merges the given properties to the `options` of the `obj` object, returning the resulting options. See `Class options`. Has an `L.setOptions` shortcut.
-function setOptions(obj, options) {
- if (!obj.hasOwnProperty('options')) {
- obj.options = obj.options ? create(obj.options) : {};
- }
- for (var i in options) {
- obj.options[i] = options[i];
- }
- return obj.options;
-}
-
-// @function getParamString(obj: Object, existingUrl?: String, uppercase?: Boolean): String
-// Converts an object into a parameter URL string, e.g. `{a: "foo", b: "bar"}`
-// translates to `'?a=foo&b=bar'`. If `existingUrl` is set, the parameters will
-// be appended at the end. If `uppercase` is `true`, the parameter names will
-// be uppercased (e.g. `'?A=foo&B=bar'`)
-function getParamString(obj, existingUrl, uppercase) {
- let params = [];
- for (var i in obj) {
- params.push(encodeURIComponent(uppercase ? i.toUpperCase() : i) + '=' + encodeURIComponent(obj[i]));
- }
- return ((!existingUrl || existingUrl.indexOf('?') === -1) ? '?' : '&') + params.join('&');
-}
-
-let templateRe = /\{ *([\w_-]+) *\}/g;
-
-// @function template(str: String, data: Object): String
-// Simple templating facility, accepts a template string of the form `'Hello {a}, {b}'`
-// and a data object like `{a: 'foo', b: 'bar'}`, returns evaluated string
-// `('Hello foo, bar')`. You can also specify functions instead of strings for
-// data values — they will be evaluated passing `data` as an argument.
-function template(str, data) {
- return str.replace(templateRe, function (str, key) {
- let value = data[key];
-
- if (value === undefined) {
- throw new Error('No value provided for variable ' + str);
-
- } else if (typeof value === 'function') {
- value = value(data);
- }
- return value;
- });
-}
-
-// @function isArray(obj): Boolean
-// Compatibility polyfill for [Array.isArray](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray)
-let isArray = Array.isArray || function (obj) {
- return (Object.prototype.toString.call(obj) === '[object Array]');
-};
-
-// @function indexOf(array: Array, el: Object): Number
-// Compatibility polyfill for [Array.prototype.indexOf](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
-function indexOf(array, el) {
- for (let i = 0; i < array.length; i++) {
- if (array[i] === el) { return i; }
- }
- return -1;
-}
-
-// @property emptyImageUrl: String
-// Data URI string containing a base64-encoded empty GIF image.
-// Used as a hack to free memory from unused images on WebKit-powered
-// mobile devices (by setting image `src` to this string).
-let emptyImageUrl = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
-
-// inspired by http://paulirish.com/2011/requestanimationframe-for-smart-animating/
-
-function getPrefixed(name) {
- return window['webkit' + name] || window['moz' + name] || window['ms' + name];
-}
-
-let lastTime = 0;
-
-// fallback for IE 7-8
-function timeoutDefer(fn) {
- let time = +new Date(),
- timeToCall = Math.max(0, 16 - (time - lastTime));
-
- lastTime = time + timeToCall;
- return window.setTimeout(fn, timeToCall);
-}
-
-let requestFn = window.requestAnimationFrame || getPrefixed('RequestAnimationFrame') || timeoutDefer;
-let cancelFn = window.cancelAnimationFrame || getPrefixed('CancelAnimationFrame') ||
- getPrefixed('CancelRequestAnimationFrame') || function (id) { window.clearTimeout(id); };
-
-// @function requestAnimFrame(fn: Function, context?: Object, immediate?: Boolean): Number
-// Schedules `fn` to be executed when the browser repaints. `fn` is bound to
-// `context` if given. When `immediate` is set, `fn` is called immediately if
-// the browser doesn't have native support for
-// [`window.requestAnimationFrame`](https://developer.mozilla.org/docs/Web/API/window/requestAnimationFrame),
-// otherwise it's delayed. Returns a request ID that can be used to cancel the request.
-function requestAnimFrame(fn, context, immediate) {
- if (immediate && requestFn === timeoutDefer) {
- fn.call(context);
- } else {
- return requestFn.call(window, bind(fn, context));
- }
-}
-
-// @function cancelAnimFrame(id: Number): undefined
-// Cancels a previous `requestAnimFrame`. See also [window.cancelAnimationFrame](https://developer.mozilla.org/docs/Web/API/window/cancelAnimationFrame).
-function cancelAnimFrame(id) {
- if (id) {
- cancelFn.call(window, id);
- }
-}
-
-
-let Util = (Object.freeze || Object)({
- freeze: freeze,
- extend: extend,
- create: create,
- bind: bind,
- lastId: lastId,
- stamp: stamp,
- throttle: throttle,
- wrapNum: wrapNum,
- falseFn: falseFn,
- formatNum: formatNum,
- trim: trim,
- splitWords: splitWords,
- setOptions: setOptions,
- getParamString: getParamString,
- template: template,
- isArray: isArray,
- indexOf: indexOf,
- emptyImageUrl: emptyImageUrl,
- requestFn: requestFn,
- cancelFn: cancelFn,
- requestAnimFrame: requestAnimFrame,
- cancelAnimFrame: cancelAnimFrame
-});
-
-// @class Class
-// @aka L.Class
-
-// @section
-// @uninheritable
-
-// Thanks to John Resig and Dean Edwards for inspiration!
-
-function Class() {}
-
-Class.extend = (props) => {
-
- // @function extend(props: Object): Function
- // [Extends the current class](#class-inheritance) given the properties to be included.
- // Returns a Javascript function that is a class constructor (to be called with `new`).
- let NewClass = () => {
-
- // call the constructor
- if (this.initialize) {
- this.initialize.apply(this, arguments);
- }
-
- // call all constructor hooks
- this.callInitHooks();
- };
-
- let parentProto = NewClass.__super__ = this.prototype;
-
- let proto = create(parentProto);
- proto.constructor = NewClass;
-
- NewClass.prototype = proto;
-
- // inherit parent's statics
- for (var i in this) {
- if (this.hasOwnProperty(i) && i !== 'prototype' && i !== '__super__') {
- NewClass[i] = this[i];
- }
- }
-
- // mix static properties into the class
- if (props.statics) {
- extend(NewClass, props.statics);
- delete props.statics;
- }
-
- // mix includes into the prototype
- if (props.includes) {
- checkDeprecatedMixinEvents(props.includes);
- extend.apply(null, [proto].concat(props.includes));
- delete props.includes;
- }
-
- // merge options
- if (proto.options) {
- props.options = extend(create(proto.options), props.options);
- }
-
- // mix given properties into the prototype
- extend(proto, props);
-
- proto._initHooks = [];
-
- // add method for calling all hooks
- proto.callInitHooks = () => {
-
- if (this._initHooksCalled) { return; }
-
- if (parentProto.callInitHooks) {
- parentProto.callInitHooks.call(this);
- }
-
- this._initHooksCalled = true;
-
- for (let i = 0, len = proto._initHooks.length; i < len; i++) {
- proto._initHooks[i].call(this);
- }
- };
-
- return NewClass;
-};
-
-
-// @function include(properties: Object): this
-// [Includes a mixin](#class-includes) into the current class.
-Class.include = (props) => {
- extend(this.prototype, props);
- return this;
-};
-
-// @function mergeOptions(options: Object): this
-// [Merges `options`](#class-options) into the defaults of the class.
-Class.mergeOptions = (options) => {
- extend(this.prototype.options, options);
- return this;
-};
-
-// @function addInitHook(fn: Function): this
-// Adds a [constructor hook](#class-constructor-hooks) to the class.
-Class.addInitHook = (fn) => { // (Function) || (String, args...)
- let args = Array.prototype.slice.call(arguments, 1);
-
- let init = typeof fn === 'function' ? fn : function () {
- this[fn].apply(this, args);
- };
-
- this.prototype._initHooks = this.prototype._initHooks || [];
- this.prototype._initHooks.push(init);
- return this;
-};
-
-function checkDeprecatedMixinEvents(includes) {
- if (typeof L === 'undefined' || !L || !L.Mixin) { return; }
-
- includes = isArray(includes) ? includes : [includes];
-
- for (let i = 0; i < includes.length; i++) {
- if (includes[i] === L.Mixin.Events) {
- console.warn('Deprecated include of L.Mixin.Events: ' +
- 'this property will be removed in future releases, ' +
- 'please inherit from L.Evented instead.', new Error().stack);
- }
- }
-}
-
-/*
- * @class Evented
- * @aka L.Evented
- * @inherits Class
- *
- * A set of methods shared between event-powered classes (like `Map` and `Marker`). Generally, events allow you to execute some function when something happens with an object (e.g. the user clicks on the map, causing the map to fire `'click'` event).
- *
- * @example
- *
- * ```js
- * map.on('click', function(e) {
- * alert(e.latlng);
- * } );
- * ```
- *
- * Leaflet deals with event listeners by reference, so if you want to add a listener and then remove it, define it as a function:
- *
- * ```js
- * function onClick(e) { ... }
- *
- * map.on('click', onClick);
- * map.off('click', onClick);
- * ```
- */
-
-let Events = {
- /* @method on(type: String, fn: Function, context?: Object): this
- * Adds a listener function (`fn`) to a particular event type of the object. You can optionally specify the context of the listener (object the this keyword will point to). You can also pass several space-separated types (e.g. `'click dblclick'`).
- *
- * @alternative
- * @method on(eventMap: Object): this
- * Adds a set of type/listener pairs, e.g. `{click: onClick, mousemove: onMouseMove}`
- */
- on: function (types, fn, context) {
-
- // types can be a map of types/handlers
- if (typeof types === 'object') {
- for (var type in types) {
- // we don't process space-separated events here for performance;
- // it's a hot path since Layer uses the on(obj) syntax
- this._on(type, types[type], fn);
- }
-
- } else {
- // types can be a string of space-separated words
- types = splitWords(types);
-
- for (let i = 0, len = types.length; i < len; i++) {
- this._on(types[i], fn, context);
- }
- }
-
- return this;
- },
-
- /* @method off(type: String, fn?: Function, context?: Object): this
- * Removes a previously added listener function. If no function is specified, it will remove all the listeners of that particular event from the object. Note that if you passed a custom context to `on`, you must pass the same context to `off` in order to remove the listener.
- *
- * @alternative
- * @method off(eventMap: Object): this
- * Removes a set of type/listener pairs.
- *
- * @alternative
- * @method off: this
- * Removes all listeners to all events on the object.
- */
- off: function (types, fn, context) {
-
- if (!types) {
- // clear all listeners if called without arguments
- delete this._events;
-
- } else if (typeof types === 'object') {
- for (var type in types) {
- this._off(type, types[type], fn);
- }
-
- } else {
- types = splitWords(types);
-
- for (let i = 0, len = types.length; i < len; i++) {
- this._off(types[i], fn, context);
- }
- }
-
- return this;
- },
-
- // attach listener (without syntactic sugar now)
- _on: function (type, fn, context) {
- this._events = this._events || {};
-
- /* get/init listeners for type */
- let typeListeners = this._events[type];
- if (!typeListeners) {
- typeListeners = [];
- this._events[type] = typeListeners;
- }
-
- if (context === this) {
- // Less memory footprint.
- context = undefined;
- }
- let newListener = {fn: fn, ctx: context},
- listeners = typeListeners;
-
- // check if fn already there
- for (let i = 0, len = listeners.length; i < len; i++) {
- if (listeners[i].fn === fn && listeners[i].ctx === context) {
- return;
- }
- }
-
- listeners.push(newListener);
- },
-
- _off: function (type, fn, context) {
- var listeners,
- i,
- len;
-
- if (!this._events) { return; }
-
- listeners = this._events[type];
-
- if (!listeners) {
- return;
- }
-
- if (!fn) {
- // Set all removed listeners to noop so they are not called if remove happens in fire
- for (i = 0, len = listeners.length; i < len; i++) {
- listeners[i].fn = falseFn;
- }
- // clear all listeners for a type if function isn't specified
- delete this._events[type];
- return;
- }
-
- if (context === this) {
- context = undefined;
- }
-
- if (listeners) {
-
- // find fn and remove it
- for (i = 0, len = listeners.length; i < len; i++) {
- let l = listeners[i];
- if (l.ctx !== context) { continue; }
- if (l.fn === fn) {
-
- // set the removed listener to noop so that's not called if remove happens in fire
- l.fn = falseFn;
-
- if (this._firingCount) {
- /* copy array in case events are being fired */
- this._events[type] = listeners = listeners.slice();
- }
- listeners.splice(i, 1);
-
- return;
- }
- }
- }
- },
-
- // @method fire(type: String, data?: Object, propagate?: Boolean): this
- // Fires an event of the specified type. You can optionally provide an data
- // object — the first argument of the listener function will contain its
- // properties. The event can optionally be propagated to event parents.
- fire: function (type, data, propagate) {
- if (!this.listens(type, propagate)) { return this; }
-
- let event = extend({}, data, {
- type: type,
- target: this,
- sourceTarget: data && data.sourceTarget || this
- });
-
- if (this._events) {
- let listeners = this._events[type];
-
- if (listeners) {
- this._firingCount = (this._firingCount + 1) || 1;
- for (let i = 0, len = listeners.length; i < len; i++) {
- let l = listeners[i];
- l.fn.call(l.ctx || this, event);
- }
-
- this._firingCount--;
- }
- }
-
- if (propagate) {
- // propagate the event to parents (set with addEventParent)
- this._propagateEvent(event);
- }
-
- return this;
- },
-
- // @method listens(type: String): Boolean
- // Returns `true` if a particular event type has any listeners attached to it.
- listens: function (type, propagate) {
- let listeners = this._events && this._events[type];
- if (listeners && listeners.length) { return true; }
-
- if (propagate) {
- // also check parents for listeners if event propagates
- for (var id in this._eventParents) {
- if (this._eventParents[id].listens(type, propagate)) { return true; }
- }
- }
- return false;
- },
-
- // @method once(…): this
- // Behaves as [`on(…)`](#evented-on), except the listener will only get fired once and then removed.
- once: function (types, fn, context) {
-
- if (typeof types === 'object') {
- for (var type in types) {
- this.once(type, types[type], fn);
- }
- return this;
- }
-
- let handler = bind(function () {
- this
- .off(types, fn, context)
- .off(types, handler, context);
- }, this);
-
- // add a listener that's executed once and removed after that
- return this
- .on(types, fn, context)
- .on(types, handler, context);
- },
-
- // @method addEventParent(obj: Evented): this
- // Adds an event parent - an `Evented` that will receive propagated events
- addEventParent: function (obj) {
- this._eventParents = this._eventParents || {};
- this._eventParents[stamp(obj)] = obj;
- return this;
- },
-
- // @method removeEventParent(obj: Evented): this
- // Removes an event parent, so it will stop receiving propagated events
- removeEventParent: function (obj) {
- if (this._eventParents) {
- delete this._eventParents[stamp(obj)];
- }
- return this;
- },
-
- _propagateEvent: function (e) {
- for (var id in this._eventParents) {
- this._eventParents[id].fire(e.type, extend({
- layer: e.target,
- propagatedFrom: e.target
- }, e), true);
- }
- }
-};
-
-// aliases; we should ditch those eventually
-
-// @method addEventListener(…): this
-// Alias to [`on(…)`](#evented-on)
-Events.addEventListener = Events.on;
-
-// @method removeEventListener(…): this
-// Alias to [`off(…)`](#evented-off)
-
-// @method clearAllEventListeners(…): this
-// Alias to [`off()`](#evented-off)
-Events.removeEventListener = Events.clearAllEventListeners = Events.off;
-
-// @method addOneTimeEventListener(…): this
-// Alias to [`once(…)`](#evented-once)
-Events.addOneTimeEventListener = Events.once;
-
-// @method fireEvent(…): this
-// Alias to [`fire(…)`](#evented-fire)
-Events.fireEvent = Events.fire;
-
-// @method hasEventListeners(…): Boolean
-// Alias to [`listens(…)`](#evented-listens)
-Events.hasEventListeners = Events.listens;
-
-let Evented = Class.extend(Events);
-
-/*
- * @class Point
- * @aka L.Point
- *
- * Represents a point with `x` and `y` coordinates in pixels.
- *
- * @example
- *
- * ```js
- * let point = L.point(200, 300);
- * ```
- *
- * All Leaflet methods and options that accept `Point` objects also accept them in a simple Array form (unless noted otherwise), so these lines are equivalent:
- *
- * ```js
- * map.panBy([200, 300]);
- * map.panBy(L.point(200, 300));
- * ```
- *
- * Note that `Point` does not inherit from Leafet's `Class` object,
- * which means new classes can't inherit from it, and new methods
- * can't be added to it with the `include` function.
- */
-
-function Point(x, y, round) {
- // @property x: Number; The `x` coordinate of the point
- this.x = (round ? Math.round(x) : x);
- // @property y: Number; The `y` coordinate of the point
- this.y = (round ? Math.round(y) : y);
-}
-
-let trunc = Math.trunc || function (v) {
- return v > 0 ? Math.floor(v) : Math.ceil(v);
-};
-
-Point.prototype = {
-
- // @method clone(): Point
- // Returns a copy of the current point.
- clone: function () {
- return new Point(this.x, this.y);
- },
-
- // @method add(otherPoint: Point): Point
- // Returns the result of addition of the current and the given points.
- add: function (point) {
- // non-destructive, returns a new point
- return this.clone()._add(toPoint(point));
- },
-
- _add: function (point) {
- // destructive, used directly for performance in situations where it's safe to modify existing point
- this.x += point.x;
- this.y += point.y;
- return this;
- },
-
- // @method subtract(otherPoint: Point): Point
- // Returns the result of subtraction of the given point from the current.
- subtract: function (point) {
- return this.clone()._subtract(toPoint(point));
- },
-
- _subtract: function (point) {
- this.x -= point.x;
- this.y -= point.y;
- return this;
- },
-
- // @method divideBy(num: Number): Point
- // Returns the result of division of the current point by the given number.
- divideBy: function (num) {
- return this.clone()._divideBy(num);
- },
-
- _divideBy: function (num) {
- this.x /= num;
- this.y /= num;
- return this;
- },
-
- // @method multiplyBy(num: Number): Point
- // Returns the result of multiplication of the current point by the given number.
- multiplyBy: function (num) {
- return this.clone()._multiplyBy(num);
- },
-
- _multiplyBy: function (num) {
- this.x *= num;
- this.y *= num;
- return this;
- },
-
- // @method scaleBy(scale: Point): Point
- // Multiply each coordinate of the current point by each coordinate of
- // `scale`. In linear algebra terms, multiply the point by the
- // [scaling matrix](https://en.wikipedia.org/wiki/Scaling_%28geometry%29#Matrix_representation)
- // defined by `scale`.
- scaleBy: function (point) {
- return new Point(this.x * point.x, this.y * point.y);
- },
-
- // @method unscaleBy(scale: Point): Point
- // Inverse of `scaleBy`. Divide each coordinate of the current point by
- // each coordinate of `scale`.
- unscaleBy: function (point) {
- return new Point(this.x / point.x, this.y / point.y);
- },
-
- // @method round(): Point
- // Returns a copy of the current point with rounded coordinates.
- round: function () {
- return this.clone()._round();
- },
-
- _round: function () {
- this.x = Math.round(this.x);
- this.y = Math.round(this.y);
- return this;
- },
-
- // @method floor(): Point
- // Returns a copy of the current point with floored coordinates (rounded down).
- floor: function () {
- return this.clone()._floor();
- },
-
- _floor: function () {
- this.x = Math.floor(this.x);
- this.y = Math.floor(this.y);
- return this;
- },
-
- // @method ceil(): Point
- // Returns a copy of the current point with ceiled coordinates (rounded up).
- ceil: function () {
- return this.clone()._ceil();
- },
-
- _ceil: function () {
- this.x = Math.ceil(this.x);
- this.y = Math.ceil(this.y);
- return this;
- },
-
- // @method trunc(): Point
- // Returns a copy of the current point with truncated coordinates (rounded towards zero).
- trunc: function () {
- return this.clone()._trunc();
- },
-
- _trunc: function () {
- this.x = trunc(this.x);
- this.y = trunc(this.y);
- return this;
- },
-
- // @method distanceTo(otherPoint: Point): Number
- // Returns the cartesian distance between the current and the given points.
- distanceTo: function (point) {
- point = toPoint(point);
-
- let x = point.x - this.x,
- y = point.y - this.y;
-
- return Math.sqrt(x * x + y * y);
- },
-
- // @method equals(otherPoint: Point): Boolean
- // Returns `true` if the given point has the same coordinates.
- equals: function (point) {
- point = toPoint(point);
-
- return point.x === this.x &&
- point.y === this.y;
- },
-
- // @method contains(otherPoint: Point): Boolean
- // Returns `true` if both coordinates of the given point are less than the corresponding current point coordinates (in absolute values).
- contains: function (point) {
- point = toPoint(point);
-
- return Math.abs(point.x) <= Math.abs(this.x) &&
- Math.abs(point.y) <= Math.abs(this.y);
- },
-
- // @method toString(): String
- // Returns a string representation of the point for debugging purposes.
- toString: function () {
- return 'Point(' +
- formatNum(this.x) + ', ' +
- formatNum(this.y) + ')';
- }
-};
-
-// @factory L.point(x: Number, y: Number, round?: Boolean)
-// Creates a Point object with the given `x` and `y` coordinates. If optional `round` is set to true, rounds the `x` and `y` values.
-
-// @alternative
-// @factory L.point(coords: Number[])
-// Expects an array of the form `[x, y]` instead.
-
-// @alternative
-// @factory L.point(coords: Object)
-// Expects a plain object of the form `{x: Number, y: Number}` instead.
-function toPoint(x, y, round) {
- if (x instanceof Point) {
- return x;
- }
- if (isArray(x)) {
- return new Point(x[0], x[1]);
- }
- if (x === undefined || x === null) {
- return x;
- }
- if (typeof x === 'object' && 'x' in x && 'y' in x) {
- return new Point(x.x, x.y);
- }
- return new Point(x, y, round);
-}
-
-/*
- * @class Bounds
- * @aka L.Bounds
- *
- * Represents a rectangular area in pixel coordinates.
- *
- * @example
- *
- * ```js
- * var p1 = L.point(10, 10),
- * p2 = L.point(40, 60),
- * bounds = L.bounds(p1, p2);
- * ```
- *
- * All Leaflet methods that accept `Bounds` objects also accept them in a simple Array form (unless noted otherwise), so the bounds example above can be passed like this:
- *
- * ```js
- * otherBounds.intersects([[10, 10], [40, 60]]);
- * ```
- *
- * Note that `Bounds` does not inherit from Leafet's `Class` object,
- * which means new classes can't inherit from it, and new methods
- * can't be added to it with the `include` function.
- */
-
-function Bounds(a, b) {
- if (!a) { return; }
-
- let points = b ? [a, b] : a;
-
- for (let i = 0, len = points.length; i < len; i++) {
- this.extend(points[i]);
- }
-}
-
-Bounds.prototype = {
- // @method extend(point: Point): this
- // Extends the bounds to contain the given point.
- extend: function (point) { // (Point)
- point = toPoint(point);
-
- // @property min: Point
- // The top left corner of the rectangle.
- // @property max: Point
- // The bottom right corner of the rectangle.
- if (!this.min && !this.max) {
- this.min = point.clone();
- this.max = point.clone();
- } else {
- this.min.x = Math.min(point.x, this.min.x);
- this.max.x = Math.max(point.x, this.max.x);
- this.min.y = Math.min(point.y, this.min.y);
- this.max.y = Math.max(point.y, this.max.y);
- }
- return this;
- },
-
- // @method getCenter(round?: Boolean): Point
- // Returns the center point of the bounds.
- getCenter: function (round) {
- return new Point(
- (this.min.x + this.max.x) / 2,
- (this.min.y + this.max.y) / 2, round);
- },
-
- // @method getBottomLeft(): Point
- // Returns the bottom-left point of the bounds.
- getBottomLeft: function () {
- return new Point(this.min.x, this.max.y);
- },
-
- // @method getTopRight(): Point
- // Returns the top-right point of the bounds.
- getTopRight: function () { // -> Point
- return new Point(this.max.x, this.min.y);
- },
-
- // @method getTopLeft(): Point
- // Returns the top-left point of the bounds (i.e. [`this.min`](#bounds-min)).
- getTopLeft: function () {
- return this.min; // left, top
- },
-
- // @method getBottomRight(): Point
- // Returns the bottom-right point of the bounds (i.e. [`this.max`](#bounds-max)).
- getBottomRight: function () {
- return this.max; // right, bottom
- },
-
- // @method getSize(): Point
- // Returns the size of the given bounds
- getSize: function () {
- return this.max.subtract(this.min);
- },
-
- // @method contains(otherBounds: Bounds): Boolean
- // Returns `true` if the rectangle contains the given one.
- // @alternative
- // @method contains(point: Point): Boolean
- // Returns `true` if the rectangle contains the given point.
- contains: function (obj) {
- var min, max;
-
- if (typeof obj[0] === 'number' || obj instanceof Point) {
- obj = toPoint(obj);
- } else {
- obj = toBounds(obj);
- }
-
- if (obj instanceof Bounds) {
- min = obj.min;
- max = obj.max;
- } else {
- min = max = obj;
- }
-
- return (min.x >= this.min.x) &&
- (max.x <= this.max.x) &&
- (min.y >= this.min.y) &&
- (max.y <= this.max.y);
- },
-
- // @method intersects(otherBounds: Bounds): Boolean
- // Returns `true` if the rectangle intersects the given bounds. Two bounds
- // intersect if they have at least one point in common.
- intersects: function (bounds) { // (Bounds) -> Boolean
- bounds = toBounds(bounds);
-
- let min = this.min,
- max = this.max,
- min2 = bounds.min,
- max2 = bounds.max,
- xIntersects = (max2.x >= min.x) && (min2.x <= max.x),
- yIntersects = (max2.y >= min.y) && (min2.y <= max.y);
-
- return xIntersects && yIntersects;
- },
-
- // @method overlaps(otherBounds: Bounds): Boolean
- // Returns `true` if the rectangle overlaps the given bounds. Two bounds
- // overlap if their intersection is an area.
- overlaps: function (bounds) { // (Bounds) -> Boolean
- bounds = toBounds(bounds);
-
- let min = this.min,
- max = this.max,
- min2 = bounds.min,
- max2 = bounds.max,
- xOverlaps = (max2.x > min.x) && (min2.x < max.x),
- yOverlaps = (max2.y > min.y) && (min2.y < max.y);
-
- return xOverlaps && yOverlaps;
- },
-
- isValid: function () {
- return !!(this.min && this.max);
- }
-};
-
-
-// @factory L.bounds(corner1: Point, corner2: Point)
-// Creates a Bounds object from two corners coordinate pairs.
-// @alternative
-// @factory L.bounds(points: Point[])
-// Creates a Bounds object from the given array of points.
-function toBounds(a, b) {
- if (!a || a instanceof Bounds) {
- return a;
- }
- return new Bounds(a, b);
-}
-
-/*
- * @class LatLngBounds
- * @aka L.LatLngBounds
- *
- * Represents a rectangular geographical area on a map.
- *
- * @example
- *
- * ```js
- * var corner1 = L.latLng(40.712, -74.227),
- * corner2 = L.latLng(40.774, -74.125),
- * bounds = L.latLngBounds(corner1, corner2);
- * ```
- *
- * All Leaflet methods that accept LatLngBounds objects also accept them in a simple Array form (unless noted otherwise), so the bounds example above can be passed like this:
- *
- * ```js
- * map.fitBounds([
- * [40.712, -74.227],
- * [40.774, -74.125]
- * ]);
- * ```
- *
- * Caution: if the area crosses the antimeridian (often confused with the International Date Line), you must specify corners _outside_ the [-180, 180] degrees longitude range.
- *
- * Note that `LatLngBounds` does not inherit from Leafet's `Class` object,
- * which means new classes can't inherit from it, and new methods
- * can't be added to it with the `include` function.
- */
-
-function LatLngBounds(corner1, corner2) { // (LatLng, LatLng) or (LatLng[])
- if (!corner1) { return; }
-
- let latlngs = corner2 ? [corner1, corner2] : corner1;
-
- for (let i = 0, len = latlngs.length; i < len; i++) {
- this.extend(latlngs[i]);
- }
-}
-
-LatLngBounds.prototype = {
-
- // @method extend(latlng: LatLng): this
- // Extend the bounds to contain the given point
-
- // @alternative
- // @method extend(otherBounds: LatLngBounds): this
- // Extend the bounds to contain the given bounds
- extend: function (obj) {
- let sw = this._southWest,
- ne = this._northEast,
- sw2, ne2;
-
- if (obj instanceof LatLng) {
- sw2 = obj;
- ne2 = obj;
-
- } else if (obj instanceof LatLngBounds) {
- sw2 = obj._southWest;
- ne2 = obj._northEast;
-
- if (!sw2 || !ne2) { return this; }
-
- } else {
- return obj ? this.extend(toLatLng(obj) || toLatLngBounds(obj)) : this;
- }
-
- if (!sw && !ne) {
- this._southWest = new LatLng(sw2.lat, sw2.lng);
- this._northEast = new LatLng(ne2.lat, ne2.lng);
- } else {
- sw.lat = Math.min(sw2.lat, sw.lat);
- sw.lng = Math.min(sw2.lng, sw.lng);
- ne.lat = Math.max(ne2.lat, ne.lat);
- ne.lng = Math.max(ne2.lng, ne.lng);
- }
-
- return this;
- },
-
- // @method pad(bufferRatio: Number): LatLngBounds
- // Returns bounds created by extending or retracting the current bounds by a given ratio in each direction.
- // For example, a ratio of 0.5 extends the bounds by 50% in each direction.
- // Negative values will retract the bounds.
- pad: function (bufferRatio) {
- let sw = this._southWest,
- ne = this._northEast,
- heightBuffer = Math.abs(sw.lat - ne.lat) * bufferRatio,
- widthBuffer = Math.abs(sw.lng - ne.lng) * bufferRatio;
-
- return new LatLngBounds(
- new LatLng(sw.lat - heightBuffer, sw.lng - widthBuffer),
- new LatLng(ne.lat + heightBuffer, ne.lng + widthBuffer));
- },
-
- // @method getCenter(): LatLng
- // Returns the center point of the bounds.
- getCenter: function () {
- return new LatLng(
- (this._southWest.lat + this._northEast.lat) / 2,
- (this._southWest.lng + this._northEast.lng) / 2);
- },
-
- // @method getSouthWest(): LatLng
- // Returns the south-west point of the bounds.
- getSouthWest: function () {
- return this._southWest;
- },
-
- // @method getNorthEast(): LatLng
- // Returns the north-east point of the bounds.
- getNorthEast: function () {
- return this._northEast;
- },
-
- // @method getNorthWest(): LatLng
- // Returns the north-west point of the bounds.
- getNorthWest: function () {
- return new LatLng(this.getNorth(), this.getWest());
- },
-
- // @method getSouthEast(): LatLng
- // Returns the south-east point of the bounds.
- getSouthEast: function () {
- return new LatLng(this.getSouth(), this.getEast());
- },
-
- // @method getWest(): Number
- // Returns the west longitude of the bounds
- getWest: function () {
- return this._southWest.lng;
- },
-
- // @method getSouth(): Number
- // Returns the south latitude of the bounds
- getSouth: function () {
- return this._southWest.lat;
- },
-
- // @method getEast(): Number
- // Returns the east longitude of the bounds
- getEast: function () {
- return this._northEast.lng;
- },
-
- // @method getNorth(): Number
- // Returns the north latitude of the bounds
- getNorth: function () {
- return this._northEast.lat;
- },
-
- // @method contains(otherBounds: LatLngBounds): Boolean
- // Returns `true` if the rectangle contains the given one.
-
- // @alternative
- // @method contains (latlng: LatLng): Boolean
- // Returns `true` if the rectangle contains the given point.
- contains: function (obj) { // (LatLngBounds) or (LatLng) -> Boolean
- if (typeof obj[0] === 'number' || obj instanceof LatLng || 'lat' in obj) {
- obj = toLatLng(obj);
- } else {
- obj = toLatLngBounds(obj);
- }
-
- let sw = this._southWest,
- ne = this._northEast,
- sw2, ne2;
-
- if (obj instanceof LatLngBounds) {
- sw2 = obj.getSouthWest();
- ne2 = obj.getNorthEast();
- } else {
- sw2 = ne2 = obj;
- }
-
- return (sw2.lat >= sw.lat) && (ne2.lat <= ne.lat) &&
- (sw2.lng >= sw.lng) && (ne2.lng <= ne.lng);
- },
-
- // @method intersects(otherBounds: LatLngBounds): Boolean
- // Returns `true` if the rectangle intersects the given bounds. Two bounds intersect if they have at least one point in common.
- intersects: function (bounds) {
- bounds = toLatLngBounds(bounds);
-
- let sw = this._southWest,
- ne = this._northEast,
- sw2 = bounds.getSouthWest(),
- ne2 = bounds.getNorthEast(),
-
- latIntersects = (ne2.lat >= sw.lat) && (sw2.lat <= ne.lat),
- lngIntersects = (ne2.lng >= sw.lng) && (sw2.lng <= ne.lng);
-
- return latIntersects && lngIntersects;
- },
-
- // @method overlaps(otherBounds: Bounds): Boolean
- // Returns `true` if the rectangle overlaps the given bounds. Two bounds overlap if their intersection is an area.
- overlaps: function (bounds) {
- bounds = toLatLngBounds(bounds);
-
- let sw = this._southWest,
- ne = this._northEast,
- sw2 = bounds.getSouthWest(),
- ne2 = bounds.getNorthEast(),
-
- latOverlaps = (ne2.lat > sw.lat) && (sw2.lat < ne.lat),
- lngOverlaps = (ne2.lng > sw.lng) && (sw2.lng < ne.lng);
-
- return latOverlaps && lngOverlaps;
- },
-
- // @method toBBoxString(): String
- // Returns a string with bounding box coordinates in a 'southwest_lng,southwest_lat,northeast_lng,northeast_lat' format. Useful for sending requests to web services that return geo data.
- toBBoxString: function () {
- return [this.getWest(), this.getSouth(), this.getEast(), this.getNorth()].join(',');
- },
-
- // @method equals(otherBounds: LatLngBounds, maxMargin?: Number): Boolean
- // Returns `true` if the rectangle is equivalent (within a small margin of error) to the given bounds. The margin of error can be overridden by setting `maxMargin` to a small number.
- equals: function (bounds, maxMargin) {
- if (!bounds) { return false; }
-
- bounds = toLatLngBounds(bounds);
-
- return this._southWest.equals(bounds.getSouthWest(), maxMargin) &&
- this._northEast.equals(bounds.getNorthEast(), maxMargin);
- },
-
- // @method isValid(): Boolean
- // Returns `true` if the bounds are properly initialized.
- isValid: function () {
- return !!(this._southWest && this._northEast);
- }
-};
-
-// TODO International date line?
-
-// @factory L.latLngBounds(corner1: LatLng, corner2: LatLng)
-// Creates a `LatLngBounds` object by defining two diagonally opposite corners of the rectangle.
-
-// @alternative
-// @factory L.latLngBounds(latlngs: LatLng[])
-// Creates a `LatLngBounds` object defined by the geographical points it contains. Very useful for zooming the map to fit a particular set of locations with [`fitBounds`](#map-fitbounds).
-function toLatLngBounds(a, b) {
- if (a instanceof LatLngBounds) {
- return a;
- }
- return new LatLngBounds(a, b);
-}
-
-/* @class LatLng
- * @aka L.LatLng
- *
- * Represents a geographical point with a certain latitude and longitude.
- *
- * @example
- *
- * ```
- * let latlng = L.latLng(50.5, 30.5);
- * ```
- *
- * All Leaflet methods that accept LatLng objects also accept them in a simple Array form and simple object form (unless noted otherwise), so these lines are equivalent:
- *
- * ```
- * map.panTo([50, 30]);
- * map.panTo({lon: 30, lat: 50});
- * map.panTo({lat: 50, lng: 30});
- * map.panTo(L.latLng(50, 30));
- * ```
- *
- * Note that `LatLng` does not inherit from Leafet's `Class` object,
- * which means new classes can't inherit from it, and new methods
- * can't be added to it with the `include` function.
- */
-
-function LatLng(lat, lng, alt) {
- if (isNaN(lat) || isNaN(lng)) {
- throw new Error('Invalid LatLng object: (' + lat + ', ' + lng + ')');
- }
-
- // @property lat: Number
- // Latitude in degrees
- this.lat = +lat;
-
- // @property lng: Number
- // Longitude in degrees
- this.lng = +lng;
-
- // @property alt: Number
- // Altitude in meters (optional)
- if (alt !== undefined) {
- this.alt = +alt;
- }
-}
-
-LatLng.prototype = {
- // @method equals(otherLatLng: LatLng, maxMargin?: Number): Boolean
- // Returns `true` if the given `LatLng` point is at the same position (within a small margin of error). The margin of error can be overridden by setting `maxMargin` to a small number.
- equals: function (obj, maxMargin) {
- if (!obj) { return false; }
-
- obj = toLatLng(obj);
-
- let margin = Math.max(
- Math.abs(this.lat - obj.lat),
- Math.abs(this.lng - obj.lng));
-
- return margin <= (maxMargin === undefined ? 1.0E-9 : maxMargin);
- },
-
- // @method toString(): String
- // Returns a string representation of the point (for debugging purposes).
- toString: function (precision) {
- return 'LatLng(' +
- formatNum(this.lat, precision) + ', ' +
- formatNum(this.lng, precision) + ')';
- },
-
- // @method distanceTo(otherLatLng: LatLng): Number
- // Returns the distance (in meters) to the given `LatLng` calculated using the [Spherical Law of Cosines](https://en.wikipedia.org/wiki/Spherical_law_of_cosines).
- distanceTo: function (other) {
- return Earth.distance(this, toLatLng(other));
- },
-
- // @method wrap(): LatLng
- // Returns a new `LatLng` object with the longitude wrapped so it's always between -180 and +180 degrees.
- wrap: function () {
- return Earth.wrapLatLng(this);
- },
-
- // @method toBounds(sizeInMeters: Number): LatLngBounds
- // Returns a new `LatLngBounds` object in which each boundary is `sizeInMeters/2` meters apart from the `LatLng`.
- toBounds: function (sizeInMeters) {
- let latAccuracy = 180 * sizeInMeters / 40075017,
- lngAccuracy = latAccuracy / Math.cos((Math.PI / 180) * this.lat);
-
- return toLatLngBounds(
- [this.lat - latAccuracy, this.lng - lngAccuracy],
- [this.lat + latAccuracy, this.lng + lngAccuracy]);
- },
-
- clone: function () {
- return new LatLng(this.lat, this.lng, this.alt);
- }
-};
-
-
-
-// @factory L.latLng(latitude: Number, longitude: Number, altitude?: Number): LatLng
-// Creates an object representing a geographical point with the given latitude and longitude (and optionally altitude).
-
-// @alternative
-// @factory L.latLng(coords: Array): LatLng
-// Expects an array of the form `[Number, Number]` or `[Number, Number, Number]` instead.
-
-// @alternative
-// @factory L.latLng(coords: Object): LatLng
-// Expects an plain object of the form `{lat: Number, lng: Number}` or `{lat: Number, lng: Number, alt: Number}` instead.
-
-function toLatLng(a, b, c) {
- if (a instanceof LatLng) {
- return a;
- }
- if (isArray(a) && typeof a[0] !== 'object') {
- if (a.length === 3) {
- return new LatLng(a[0], a[1], a[2]);
- }
- if (a.length === 2) {
- return new LatLng(a[0], a[1]);
- }
- return null;
- }
- if (a === undefined || a === null) {
- return a;
- }
- if (typeof a === 'object' && 'lat' in a) {
- return new LatLng(a.lat, 'lng' in a ? a.lng : a.lon, a.alt);
- }
- if (b === undefined) {
- return null;
- }
- return new LatLng(a, b, c);
-}
-
-/*
- * @namespace CRS
- * @crs L.CRS.Base
- * Object that defines coordinate reference systems for projecting
- * geographical points into pixel (screen) coordinates and back (and to
- * coordinates in other units for [WMS](https://en.wikipedia.org/wiki/Web_Map_Service) services). See
- * [spatial reference system](http://en.wikipedia.org/wiki/Coordinate_reference_system).
- *
- * Leaflet defines the most usual CRSs by default. If you want to use a
- * CRS not defined by default, take a look at the
- * [Proj4Leaflet](https://github.com/kartena/Proj4Leaflet) plugin.
- *
- * Note that the CRS instances do not inherit from Leafet's `Class` object,
- * and can't be instantiated. Also, new classes can't inherit from them,
- * and methods can't be added to them with the `include` function.
- */
-
-let CRS = {
- // @method latLngToPoint(latlng: LatLng, zoom: Number): Point
- // Projects geographical coordinates into pixel coordinates for a given zoom.
- latLngToPoint: function (latlng, zoom) {
- let projectedPoint = this.projection.project(latlng),
- scale = this.scale(zoom);
-
- return this.transformation._transform(projectedPoint, scale);
- },
-
- // @method pointToLatLng(point: Point, zoom: Number): LatLng
- // The inverse of `latLngToPoint`. Projects pixel coordinates on a given
- // zoom into geographical coordinates.
- pointToLatLng: function (point, zoom) {
- let scale = this.scale(zoom),
- untransformedPoint = this.transformation.untransform(point, scale);
-
- return this.projection.unproject(untransformedPoint);
- },
-
- // @method project(latlng: LatLng): Point
- // Projects geographical coordinates into coordinates in units accepted for
- // this CRS (e.g. meters for EPSG:3857, for passing it to WMS services).
- project: function (latlng) {
- return this.projection.project(latlng);
- },
-
- // @method unproject(point: Point): LatLng
- // Given a projected coordinate returns the corresponding LatLng.
- // The inverse of `project`.
- unproject: function (point) {
- return this.projection.unproject(point);
- },
-
- // @method scale(zoom: Number): Number
- // Returns the scale used when transforming projected coordinates into
- // pixel coordinates for a particular zoom. For example, it returns
- // `256 * 2^zoom` for Mercator-based CRS.
- scale: function (zoom) {
- return 256 * Math.pow(2, zoom);
- },
-
- // @method zoom(scale: Number): Number
- // Inverse of `scale()`, returns the zoom level corresponding to a scale
- // factor of `scale`.
- zoom: function (scale) {
- return Math.log(scale / 256) / Math.LN2;
- },
-
- // @method getProjectedBounds(zoom: Number): Bounds
- // Returns the projection's bounds scaled and transformed for the provided `zoom`.
- getProjectedBounds: function (zoom) {
- if (this.infinite) { return null; }
-
- let b = this.projection.bounds,
- s = this.scale(zoom),
- min = this.transformation.transform(b.min, s),
- max = this.transformation.transform(b.max, s);
-
- return new Bounds(min, max);
- },
-
- // @method distance(latlng1: LatLng, latlng2: LatLng): Number
- // Returns the distance between two geographical coordinates.
-
- // @property code: String
- // Standard code name of the CRS passed into WMS services (e.g. `'EPSG:3857'`)
- //
- // @property wrapLng: Number[]
- // An array of two numbers defining whether the longitude (horizontal) coordinate
- // axis wraps around a given range and how. Defaults to `[-180, 180]` in most
- // geographical CRSs. If `undefined`, the longitude axis does not wrap around.
- //
- // @property wrapLat: Number[]
- // Like `wrapLng`, but for the latitude (vertical) axis.
-
- // wrapLng: [min, max],
- // wrapLat: [min, max],
-
- // @property infinite: Boolean
- // If true, the coordinate space will be unbounded (infinite in both axes)
- infinite: false,
-
- // @method wrapLatLng(latlng: LatLng): LatLng
- // Returns a `LatLng` where lat and lng has been wrapped according to the
- // CRS's `wrapLat` and `wrapLng` properties, if they are outside the CRS's bounds.
- wrapLatLng: function (latlng) {
- let lng = this.wrapLng ? wrapNum(latlng.lng, this.wrapLng, true) : latlng.lng,
- lat = this.wrapLat ? wrapNum(latlng.lat, this.wrapLat, true) : latlng.lat,
- alt = latlng.alt;
-
- return new LatLng(lat, lng, alt);
- },
-
- // @method wrapLatLngBounds(bounds: LatLngBounds): LatLngBounds
- // Returns a `LatLngBounds` with the same size as the given one, ensuring
- // that its center is within the CRS's bounds.
- // Only accepts actual `L.LatLngBounds` instances, not arrays.
- wrapLatLngBounds: function (bounds) {
- let center = bounds.getCenter(),
- newCenter = this.wrapLatLng(center),
- latShift = center.lat - newCenter.lat,
- lngShift = center.lng - newCenter.lng;
-
- if (latShift === 0 && lngShift === 0) {
- return bounds;
- }
-
- let sw = bounds.getSouthWest(),
- ne = bounds.getNorthEast(),
- newSw = new LatLng(sw.lat - latShift, sw.lng - lngShift),
- newNe = new LatLng(ne.lat - latShift, ne.lng - lngShift);
-
- return new LatLngBounds(newSw, newNe);
- }
-};
-
-/*
- * @namespace CRS
- * @crs L.CRS.Earth
- *
- * Serves as the base for CRS that are global such that they cover the earth.
- * Can only be used as the base for other CRS and cannot be used directly,
- * since it does not have a `code`, `projection` or `transformation`. `distance()` returns
- * meters.
- */
-
-let Earth = extend({}, CRS, {
- wrapLng: [-180, 180],
-
- // Mean Earth Radius, as recommended for use by
- // the International Union of Geodesy and Geophysics,
- // see http://rosettacode.org/wiki/Haversine_formula
- R: 6371000,
-
- // distance between two geographical points using spherical law of cosines approximation
- distance: function (latlng1, latlng2) {
- let rad = Math.PI / 180,
- lat1 = latlng1.lat * rad,
- lat2 = latlng2.lat * rad,
- sinDLat = Math.sin((latlng2.lat - latlng1.lat) * rad / 2),
- sinDLon = Math.sin((latlng2.lng - latlng1.lng) * rad / 2),
- a = sinDLat * sinDLat + Math.cos(lat1) * Math.cos(lat2) * sinDLon * sinDLon,
- c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
- return this.R * c;
- }
-});
-
-/*
- * @namespace Projection
- * @projection L.Projection.SphericalMercator
- *
- * Spherical Mercator projection — the most common projection for online maps,
- * used by almost all free and commercial tile providers. Assumes that Earth is
- * a sphere. Used by the `EPSG:3857` CRS.
- */
-
-let SphericalMercator = {
-
- R: 6378137,
- MAX_LATITUDE: 85.0511287798,
-
- project: function (latlng) {
- let d = Math.PI / 180,
- max = this.MAX_LATITUDE,
- lat = Math.max(Math.min(max, latlng.lat), -max),
- sin = Math.sin(lat * d);
-
- return new Point(
- this.R * latlng.lng * d,
- this.R * Math.log((1 + sin) / (1 - sin)) / 2);
- },
-
- unproject: function (point) {
- let d = 180 / Math.PI;
-
- return new LatLng(
- (2 * Math.atan(Math.exp(point.y / this.R)) - (Math.PI / 2)) * d,
- point.x * d / this.R);
- },
-
- bounds: (function () {
- let d = 6378137 * Math.PI;
- return new Bounds([-d, -d], [d, d]);
- })()
-};
-
-/*
- * @class Transformation
- * @aka L.Transformation
- *
- * Represents an affine transformation: a set of coefficients `a`, `b`, `c`, `d`
- * for transforming a point of a form `(x, y)` into `(a*x + b, c*y + d)` and doing
- * the reverse. Used by Leaflet in its projections code.
- *
- * @example
- *
- * ```js
- * let transformation = L.transformation(2, 5, -1, 10),
- * p = L.point(1, 2),
- * p2 = transformation.transform(p), // L.point(7, 8)
- * p3 = transformation.untransform(p2); // L.point(1, 2)
- * ```
- */
-
-
-// factory new L.Transformation(a: Number, b: Number, c: Number, d: Number)
-// Creates a `Transformation` object with the given coefficients.
-function Transformation(a, b, c, d) {
- if (isArray(a)) {
- // use array properties
- this._a = a[0];
- this._b = a[1];
- this._c = a[2];
- this._d = a[3];
- return;
- }
- this._a = a;
- this._b = b;
- this._c = c;
- this._d = d;
-}
-
-Transformation.prototype = {
- // @method transform(point: Point, scale?: Number): Point
- // Returns a transformed point, optionally multiplied by the given scale.
- // Only accepts actual `L.Point` instances, not arrays.
- transform: function (point, scale) { // (Point, Number) -> Point
- return this._transform(point.clone(), scale);
- },
-
- // destructive transform (faster)
- _transform: function (point, scale) {
- scale = scale || 1;
- point.x = scale * (this._a * point.x + this._b);
- point.y = scale * (this._c * point.y + this._d);
- return point;
- },
-
- // @method untransform(point: Point, scale?: Number): Point
- // Returns the reverse transformation of the given point, optionally divided
- // by the given scale. Only accepts actual `L.Point` instances, not arrays.
- untransform: function (point, scale) {
- scale = scale || 1;
- return new Point(
- (point.x / scale - this._b) / this._a,
- (point.y / scale - this._d) / this._c);
- }
-};
-
-// factory L.transformation(a: Number, b: Number, c: Number, d: Number)
-
-// @factory L.transformation(a: Number, b: Number, c: Number, d: Number)
-// Instantiates a Transformation object with the given coefficients.
-
-// @alternative
-// @factory L.transformation(coefficients: Array): Transformation
-// Expects an coefficients array of the form
-// `[a: Number, b: Number, c: Number, d: Number]`.
-
-function toTransformation(a, b, c, d) {
- return new Transformation(a, b, c, d);
-}
-
-/*
- * @namespace CRS
- * @crs L.CRS.EPSG3857
- *
- * The most common CRS for online maps, used by almost all free and commercial
- * tile providers. Uses Spherical Mercator projection. Set in by default in
- * Map's `crs` option.
- */
-
-var EPSG3857 = extend({}, Earth, {
- code: 'EPSG:3857',
- projection: SphericalMercator,
-
- transformation: (function () {
- let scale = 0.5 / (Math.PI * SphericalMercator.R);
- return toTransformation(scale, 0.5, -scale, 0.5);
- }())
-});
-
-var EPSG900913 = extend({}, EPSG3857, {
- code: 'EPSG:900913'
-});
-
-// @namespace SVG; @section
-// There are several static functions which can be called without instantiating L.SVG:
-
-// @function create(name: String): SVGElement
-// Returns a instance of [SVGElement](https://developer.mozilla.org/docs/Web/API/SVGElement),
-// corresponding to the class name passed. For example, using 'line' will return
-// an instance of [SVGLineElement](https://developer.mozilla.org/docs/Web/API/SVGLineElement).
-function svgCreate(name) {
- return document.createElementNS('http://www.w3.org/2000/svg', name);
-}
-
-// @function pointsToPath(rings: Point[], closed: Boolean): String
-// Generates a SVG path string for multiple rings, with each ring turning
-// into "M..L..L.." instructions
-function pointsToPath(rings, closed) {
- let str = '',
- i, j, len, len2, points, p;
-
- for (i = 0, len = rings.length; i < len; i++) {
- points = rings[i];
-
- for (j = 0, len2 = points.length; j < len2; j++) {
- p = points[j];
- str += (j ? 'L' : 'M') + p.x + ' ' + p.y;
- }
-
- // closes the ring for polygons; "x" is VML syntax
- str += closed ? (svg ? 'z' : 'x') : '';
- }
-
- // SVG complains about empty path strings
- return str || 'M0 0';
-}
-
-/*
- * @namespace Browser
- * @aka L.Browser
- *
- * A namespace with static properties for browser/feature detection used by Leaflet internally.
- *
- * @example
- *
- * ```js
- * if (L.Browser.ielt9) {
- * alert('Upgrade your browser, dude!');
- * }
- * ```
- */
-
-var style$1 = document.documentElement.style;
-
-// @property ie: Boolean; `true` for all Internet Explorer versions (not Edge).
-let ie = 'ActiveXObject' in window;
-
-// @property ielt9: Boolean; `true` for Internet Explorer versions less than 9.
-var ielt9 = ie && !document.addEventListener;
-
-// @property edge: Boolean; `true` for the Edge web browser.
-let edge = 'msLaunchUri' in navigator && !('documentMode' in document);
-
-// @property webkit: Boolean;
-// `true` for webkit-based browsers like Chrome and Safari (including mobile versions).
-let webkit = userAgentContains('webkit');
-
-// @property android: Boolean
-// `true` for any browser running on an Android platform.
-let android = userAgentContains('android');
-
-// @property android23: Boolean; `true` for browsers running on Android 2 or Android 3.
-var android23 = userAgentContains('android 2') || userAgentContains('android 3');
-
-/* See https://stackoverflow.com/a/17961266 for details on detecting stock Android */
-let webkitVer = parseInt(/WebKit\/([0-9]+)|$/.exec(navigator.userAgent)[1], 10); // also matches AppleWebKit
-// @property androidStock: Boolean; `true` for the Android stock browser (i.e. not Chrome)
-let androidStock = android && userAgentContains('Google') && webkitVer < 537 && !('AudioNode' in window);
-
-// @property opera: Boolean; `true` for the Opera browser
-let opera = !!window.opera;
-
-// @property chrome: Boolean; `true` for the Chrome browser.
-let chrome = userAgentContains('chrome');
-
-// @property gecko: Boolean; `true` for gecko-based browsers like Firefox.
-let gecko = userAgentContains('gecko') && !webkit && !opera && !ie;
-
-// @property safari: Boolean; `true` for the Safari browser.
-let safari = !chrome && userAgentContains('safari');
-
-let phantom = userAgentContains('phantom');
-
-// @property opera12: Boolean
-// `true` for the Opera browser supporting CSS transforms (version 12 or later).
-var opera12 = 'OTransition' in style$1;
-
-// @property win: Boolean; `true` when the browser is running in a Windows platform
-let win = navigator.platform.indexOf('Win') === 0;
-
-// @property ie3d: Boolean; `true` for all Internet Explorer versions supporting CSS transforms.
-var ie3d = ie && ('transition' in style$1);
-
-// @property webkit3d: Boolean; `true` for webkit-based browsers supporting CSS transforms.
-var webkit3d = ('WebKitCSSMatrix' in window) && ('m11' in new window.WebKitCSSMatrix()) && !android23;
-
-// @property gecko3d: Boolean; `true` for gecko-based browsers supporting CSS transforms.
-var gecko3d = 'MozPerspective' in style$1;
-
-// @property any3d: Boolean
-// `true` for all browsers supporting CSS transforms.
-var any3d = !window.L_DISABLE_3D && (ie3d || webkit3d || gecko3d) && !opera12 && !phantom;
-
-// @property mobile: Boolean; `true` for all browsers running in a mobile device.
-let mobile = typeof orientation !== 'undefined' || userAgentContains('mobile');
-
-// @property mobileWebkit: Boolean; `true` for all webkit-based browsers in a mobile device.
-let mobileWebkit = mobile && webkit;
-
-// @property mobileWebkit3d: Boolean
-// `true` for all webkit-based browsers in a mobile device supporting CSS transforms.
-var mobileWebkit3d = mobile && webkit3d;
-
-// @property msPointer: Boolean
-// `true` for browsers implementing the Microsoft touch events model (notably IE10).
-let msPointer = !window.PointerEvent && window.MSPointerEvent;
-
-// @property pointer: Boolean
-// `true` for all browsers supporting [pointer events](https://msdn.microsoft.com/en-us/library/dn433244%28v=vs.85%29.aspx).
-let pointer = !!(window.PointerEvent || msPointer);
-
-// @property touch: Boolean
-// `true` for all browsers supporting [touch events](https://developer.mozilla.org/docs/Web/API/Touch_events).
-// This does not necessarily mean that the browser is running in a computer with
-// a touchscreen, it only means that the browser is capable of understanding
-// touch events.
-let touch = !window.L_NO_TOUCH && (pointer || 'ontouchstart' in window ||
- (window.DocumentTouch && document instanceof window.DocumentTouch));
-
-// @property mobileOpera: Boolean; `true` for the Opera browser in a mobile device.
-let mobileOpera = mobile && opera;
-
-// @property mobileGecko: Boolean
-// `true` for gecko-based browsers running in a mobile device.
-let mobileGecko = mobile && gecko;
-
-// @property retina: Boolean
-// `true` for browsers on a high-resolution "retina" screen.
-let retina = (window.devicePixelRatio || (window.screen.deviceXDPI / window.screen.logicalXDPI)) > 1;
-
-
-// @property canvas: Boolean
-// `true` when the browser supports [`