From dad45f61ddd0fb522f59e55b371f76f1b4661f1f Mon Sep 17 00:00:00 2001 From: mcyph <20507948+mcyph@users.noreply.github.com> Date: Thu, 25 Mar 2021 11:21:31 +1100 Subject: [PATCH] started integrating more examples into the next.js app --- src/mxgraph/layout/mxCompactTreeLayout.js | 4 + src/mxgraph/shape/mxRhombus.js | 2 + src/mxgraph/util/mxWindow.js | 3 + src/mxgraph/view/mxPerimeter.js | 1 + src/mxgraph/view/mxSwimlaneManager.js | 6 + src/pages/DragSource.js | 2 +- src/pages/Perimeter.js | 185 +++--- src/pages/Permissions.js | 447 +++++++------- src/pages/PortRefs.js | 398 +++++++------ src/pages/RadialTreeLayout.js | 183 +++--- src/pages/Resources.js | 102 ++-- src/pages/SecondLabel.js | 375 ++++++------ src/pages/Shape.js | 207 +++---- src/pages/StandardsMode.js | 111 ---- src/pages/Stencils.js | 683 ++++++++++++---------- src/pages/Stylesheet.js | 267 ++++----- src/pages/Template.js | 54 +- src/pages/Thread.js | 113 ++-- src/pages/Toolbar.js | 317 +++++----- src/pages/index.js | 28 +- 20 files changed, 1669 insertions(+), 1819 deletions(-) delete mode 100644 src/pages/StandardsMode.js diff --git a/src/mxgraph/layout/mxCompactTreeLayout.js b/src/mxgraph/layout/mxCompactTreeLayout.js index 1f4b1f132..e34c2b96a 100644 --- a/src/mxgraph/layout/mxCompactTreeLayout.js +++ b/src/mxgraph/layout/mxCompactTreeLayout.js @@ -7,6 +7,10 @@ import mxDictionary from '../util/mxDictionary'; import mxPoint from '../util/mxPoint'; import mxGraphLayout from './mxGraphLayout'; +import mxCellPath from "../model/mxCellPath"; +import mxRectangle from "../util/mxRectangle"; +import mxUtils from "../util/mxUtils"; +import WeightedCellSorter from "./WeightedCellSorter"; class mxCompactTreeLayout extends mxGraphLayout { /** diff --git a/src/mxgraph/shape/mxRhombus.js b/src/mxgraph/shape/mxRhombus.js index 26ce8f79c..719f2cebb 100644 --- a/src/mxgraph/shape/mxRhombus.js +++ b/src/mxgraph/shape/mxRhombus.js @@ -5,6 +5,8 @@ */ import mxShape from './mxShape'; import mxPoint from '../util/mxPoint'; +import mxUtils from "../util/mxUtils"; +import mxConstants from "../util/mxConstants"; class mxRhombus extends mxShape { /** diff --git a/src/mxgraph/util/mxWindow.js b/src/mxgraph/util/mxWindow.js index 25de418ff..98f57e6d5 100644 --- a/src/mxgraph/util/mxWindow.js +++ b/src/mxgraph/util/mxWindow.js @@ -9,6 +9,9 @@ import mxEventObject from './mxEventObject'; import mxEventSource from './mxEventSource'; import mxUtils from './mxUtils'; import mxEvent from './mxEvent'; +import mxClient from "../mxClient"; +import mxConstants from "./mxConstants"; + class mxWindow extends mxEventSource { /** diff --git a/src/mxgraph/view/mxPerimeter.js b/src/mxgraph/view/mxPerimeter.js index b068afd01..b1b3655a9 100644 --- a/src/mxgraph/view/mxPerimeter.js +++ b/src/mxgraph/view/mxPerimeter.js @@ -6,6 +6,7 @@ import mxUtils from '../util/mxUtils'; import mxPoint from '../util/mxPoint'; +import mxConstants from "../util/mxConstants"; const mxPerimeter = { /** diff --git a/src/mxgraph/view/mxSwimlaneManager.js b/src/mxgraph/view/mxSwimlaneManager.js index 975ea2311..8a001285a 100644 --- a/src/mxgraph/view/mxSwimlaneManager.js +++ b/src/mxgraph/view/mxSwimlaneManager.js @@ -4,6 +4,12 @@ * Updated to ES9 syntax by David Morrissey 2021 */ +import mxEventSource from "../util/mxEventSource"; +import mxUtils from "../util/mxUtils"; +import mxEvent from "../util/mxEvent"; +import mxConstants from "../util/mxConstants"; +import mxRectangle from "../util/mxRectangle"; + class mxSwimlaneManager extends mxEventSource { /** * Variable: graph diff --git a/src/pages/DragSource.js b/src/pages/DragSource.js index 20cbb3a7b..6bcfb36cb 100644 --- a/src/pages/DragSource.js +++ b/src/pages/DragSource.js @@ -123,7 +123,7 @@ class DragSource extends React.Component { const img = mxUtils.createImage('images/icons48/gear.png'); img.style.width = '48px'; img.style.height = '48px'; - document.body.appendChild(img); + this.el.appendChild(img); // Creates the element that is being for the actual preview. const dragElt = document.createElement('div'); diff --git a/src/pages/Perimeter.js b/src/pages/Perimeter.js index ca4db47ff..06c5bc185 100644 --- a/src/pages/Perimeter.js +++ b/src/pages/Perimeter.js @@ -9,8 +9,10 @@ import React from 'react'; import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import mxUtils from "../mxgraph/util/mxUtils"; +import mxGraphView from "../mxgraph/view/mxGraphView"; -class MYNAMEHERE extends React.Component { +class Perimeter extends React.Component { constructor(props) { super(props); } @@ -20,106 +22,109 @@ class MYNAMEHERE extends React.Component { return ( <>

Perimeter example for mxGraph

-
{ this.el = el; }} style={{ - + overflow: 'hidden', + position: 'relative', + width: '321px', + height: '241px', + background: "url('editors/images/grid.gif')", + cursor: 'default', }} /> ); - }; + } componentDidMount() { + // Redirects the perimeter to the label bounds if intersection + // between edge and label is found + const mxGraphViewGetPerimeterPoint = + mxGraphView.prototype.getPerimeterPoint; + mxGraphView.prototype.getPerimeterPoint = function( + terminal, + next, + orthogonal, + border + ) { + let point = mxGraphViewGetPerimeterPoint.apply(this, arguments); - }; + if (point != null) { + const perimeter = this.getPerimeterFunction(terminal); + + if (terminal.text != null && terminal.text.boundingBox != null) { + // Adds a small border to the label bounds + const b = terminal.text.boundingBox.clone(); + b.grow(3); + + if (mxUtils.rectangleIntersectsSegment(b, point, next)) { + point = perimeter(b, terminal, next, orthogonal); + } + } + } + + return point; + }; + + // Creates the graph inside the given container + const graph = new mxGraph(this.el); + graph.setVertexLabelsMovable(true); + graph.setConnectable(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, + null, + 'Label', + 20, + 20, + 80, + 30, + 'verticalLabelPosition=bottom' + ); + const v2 = graph.insertVertex( + parent, + null, + 'Label', + 200, + 20, + 80, + 30, + 'verticalLabelPosition=bottom' + ); + const v3 = graph.insertVertex( + parent, + null, + 'Label', + 20, + 150, + 80, + 30, + 'verticalLabelPosition=bottom' + ); + var e1 = graph.insertEdge(parent, null, '', v1, v2); + var e1 = graph.insertEdge(parent, null, '', v1, v3); + } finally { + // Updates the display + graph.getModel().endUpdate(); + } + } } -export default MYNAMEHERE; - - - function main(container) - { - // Checks if the browser is supported - if (!mxClient.isBrowserSupported()) - { - // Displays an error message if the browser is not supported. - mxUtils.error('Browser is not supported!', 200, false); - } - else - { - // Redirects the perimeter to the label bounds if intersection - // between edge and label is found - mxGraphViewGetPerimeterPoint = mxGraphView.prototype.getPerimeterPoint; - mxGraphView.prototype.getPerimeterPoint = function(terminal, next, orthogonal, border) - { - let point = mxGraphViewGetPerimeterPoint.apply(this, arguments); - - if (point != null) - { - let perimeter = this.getPerimeterFunction(terminal); - - if (terminal.text != null && terminal.text.boundingBox != null) - { - // Adds a small border to the label bounds - let b = terminal.text.boundingBox.clone(); - b.grow(3) - - if (mxUtils.rectangleIntersectsSegment(b, point, next)) - { - point = perimeter(b, terminal, next, orthogonal); - } - } - } - - return point; - }; - - // Creates the graph inside the given container - let graph = new mxGraph(container); - graph.setVertexLabelsMovable(true); - graph.setConnectable(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). - let parent = graph.getDefaultParent(); - - // Adds cells to the model in a single step - graph.getModel().beginUpdate(); - try - { - var v1 = graph.insertVertex(parent, null, 'Label', 20, 20, 80, 30, 'verticalLabelPosition=bottom'); - var v2 = graph.insertVertex(parent, null, 'Label', 200, 20, 80, 30, 'verticalLabelPosition=bottom'); - var v3 = graph.insertVertex(parent, null, 'Label', 20, 150, 80, 30, 'verticalLabelPosition=bottom'); - var e1 = graph.insertEdge(parent, null, '', v1, v2); - var e1 = graph.insertEdge(parent, null, '', v1, v3); - } - finally - { - // Updates the display - graph.getModel().endUpdate(); - } - } - }; - - - - - - - -
-
- - +export default Perimeter; diff --git a/src/pages/Permissions.js b/src/pages/Permissions.js index bd4a3bb68..94a49876a 100644 --- a/src/pages/Permissions.js +++ b/src/pages/Permissions.js @@ -1,16 +1,32 @@ /** * Copyright (c) 2006-2013, JGraph Ltd - - Hello, World! example for mxGraph. This example demonstrates creating - permissions to define the available operations a the graph. + + Hello, World! example for mxGraph. This example demonstrates creating + permissions to define the available operations a the graph. */ import React from 'react'; -import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler'; +import mxKeyHandler from '../mxgraph/handler/mxKeyHandler'; +import mxImage from '../mxgraph/util/mxImage'; +import mxUtils from '../mxgraph/util/mxUtils'; -class MYNAMEHERE extends React.Component { +function Permission(locked, createEdges, editEdges, editVertices, cloneCells) { + this.locked = locked != null ? locked : false; + this.createEdges = createEdges != null ? createEdges : true; + this.editEdges = editEdges != null ? editEdges : true; + this.editVertices = editVertices != null ? editVertices : true; + this.cloneCells = cloneCells != null ? cloneCells : true; +} + +Permission.prototype.apply = function(graph) { + graph.setConnectable(this.createEdges); + graph.setCellsLocked(this.locked); +}; + +class Permissions extends React.Component { constructor(props) { super(props); } @@ -25,246 +41,197 @@ class MYNAMEHERE extends React.Component { ref={el => { this.el = el; }} - style={{ - - }} + style={{}} /> ); - }; + } 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) && + this.getModel().isVertex(cell) && + currentPermission.editVertices) || + (this.getModel().isEdge(cell) && currentPermission.editEdges) + ); + }; + + const oldDeletable = graph.isCellDeletable; + graph.isCellDeletable = function(cell) { + return ( + (oldDeletable.apply(this, arguments) && + this.getModel().isVertex(cell) && + currentPermission.editVertices) || + (this.getModel().isEdge(cell) && 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 MYNAMEHERE; - - - function main() - { - // Checks if the browser is supported - if (!mxClient.isBrowserSupported()) - { - // Displays an error message if the browser is not supported. - mxUtils.error('Browser is not supported!', 200, false); - } - else - { - // 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 - let 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")'; - - document.body.appendChild(container); - - // Creates the graph inside the given container - let graph = new mxGraph(container); - - // Enable tooltips, disables mutligraphs, enable loops - graph.setMultigraph(false); - graph.setAllowLoops(true); - - // Enables rubberband selection and key handling - let rubberband = new mxRubberband(graph); - let 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; - - let 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()); - }); - document.body.appendChild(button); - - let button = mxUtils.button('Connect Only', function(evt) - { - apply(new Permission(false, true, false, false, true)); - }); - document.body.appendChild(button); - - let button = mxUtils.button('Edges Only', function(evt) - { - apply(new Permission(false, false, true, false, false)); - }); - document.body.appendChild(button); - - let button = mxUtils.button('Vertices Only', function(evt) - { - apply(new Permission(false, false, false, true, false)); - }); - document.body.appendChild(button); - - let button = mxUtils.button('Select Only', function(evt) - { - apply(new Permission(false, false, false, false, false)); - }); - document.body.appendChild(button); - - let button = mxUtils.button('Locked', function(evt) - { - apply(new Permission(true, false)); - }); - document.body.appendChild(button); - - let button = mxUtils.button('Disabled', function(evt) - { - graph.clearSelection(); - graph.setEnabled(false); - graph.setTooltips(false); - }); - document.body.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). - let oldDisconnectable = graph.isCellDisconnectable; - graph.isCellDisconnectable = function(cell, terminal, source) - { - return oldDisconnectable.apply(this, arguments) && - currentPermission.editEdges; - }; - - let oldTerminalPointMovable = graph.isTerminalPointMovable; - graph.isTerminalPointMovable = function(cell) - { - return oldTerminalPointMovable.apply(this, arguments) && - currentPermission.editEdges; - }; - - let oldBendable = graph.isCellBendable; - graph.isCellBendable = function(cell) - { - return oldBendable.apply(this, arguments) && - currentPermission.editEdges; - }; - - let oldLabelMovable = graph.isLabelMovable; - graph.isLabelMovable = function(cell) - { - return oldLabelMovable.apply(this, arguments) && - currentPermission.editEdges; - }; - - let oldMovable = graph.isCellMovable; - graph.isCellMovable = function(cell) - { - return oldMovable.apply(this, arguments) && - currentPermission.editVertices; - }; - - let oldResizable = graph.isCellResizable; - graph.isCellResizable = function(cell) - { - return oldResizable.apply(this, arguments) && - currentPermission.editVertices; - }; - - let oldEditable = graph.isCellEditable; - graph.isCellEditable = function(cell) - { - return oldEditable.apply(this, arguments) && - (this.getModel().isVertex(cell) && - currentPermission.editVertices) || - (this.getModel().isEdge(cell) && - currentPermission.editEdges); - }; - - let oldDeletable = graph.isCellDeletable; - graph.isCellDeletable = function(cell) - { - return oldDeletable.apply(this, arguments) && - (this.getModel().isVertex(cell) && - currentPermission.editVertices) || - (this.getModel().isEdge(cell) && - currentPermission.editEdges); - }; - - let 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). - let parent = graph.getDefaultParent(); - - // Adds cells to the model in a single step - graph.getModel().beginUpdate(); - try - { - var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30); - var v2 = graph.insertVertex(parent, null, 'Hello,', 200, 20, 80, 30); - var v3 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30); - var e1 = graph.insertEdge(parent, null, 'Connection', v1, v3); - } - finally - { - // Updates the display - graph.getModel().endUpdate(); - } - } - }; - - function Permission(locked, createEdges, editEdges, editVertices, cloneCells) - { - this.locked = (locked != null) ? locked : false; - this.createEdges = (createEdges != null) ? createEdges : true; - this.editEdges = (editEdges != null) ? editEdges : true;; - this.editVertices = (editVertices != null) ? editVertices : true;; - this.cloneCells = (cloneCells != null) ? cloneCells : true;; - }; - - Permission.prototype.apply = function(graph) - { - graph.setConnectable(this.createEdges); - graph.setCellsLocked(this.locked); - }; - - - - - - - +export default Permissions; diff --git a/src/pages/PortRefs.js b/src/pages/PortRefs.js index 5c1f450f1..7f2043cda 100644 --- a/src/pages/PortRefs.js +++ b/src/pages/PortRefs.js @@ -12,8 +12,16 @@ import React from 'react'; import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import mxConstraintHandler from '../mxgraph/handler/mxConstraintHandler'; +import mxImage from '../mxgraph/util/mxImage'; +import mxShape from '../mxgraph/shape/mxShape'; +import mxTriangle from '../mxgraph/shape/mxTriangle'; +import mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler'; +import mxConnectionConstraint from '../mxgraph/view/mxConnectionConstraint'; +import mxPoint from '../mxgraph/util/mxPoint'; +import mxConstants from '../mxgraph/util/mxConstants'; -class MYNAMEHERE extends React.Component { +class PortRefs extends React.Component { constructor(props) { super(props); } @@ -29,204 +37,237 @@ class MYNAMEHERE extends React.Component { this.el = el; }} style={{ - + overflow: 'hidden', + position: 'relative', + width: '321px', + 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); -export default MYNAMEHERE; + // 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); - function main(container) - { - // Replaces the port image - mxConstraintHandler.prototype.pointImage = new mxImage('images/dot.gif', 10, 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(); - let graph = new mxGraph(container); - graph.setConnectable(true); + // Ports are equal for all shapes... + const ports = new Array(); - // 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); + // 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' }; - // Enables rubberband selection - new mxRubberband(graph); + // ... except for triangles + const ports2 = new Array(); - // Gets the default parent for inserting new cells. This - // is normally the first child of the root (ie. layer 0). - let parent = graph.getDefaultParent(); + // 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' }; - // Ports are equal for all shapes... - let ports = new Array(); + 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', + }; - // 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'}; + // Extends shapes classes to return their ports + mxShape.prototype.getPorts = function() { + return ports; + }; - // ... except for triangles - var ports2 = new Array(); + mxTriangle.prototype.getPorts = function() { + return ports2; + }; - // 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'}; + // 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); + }; - 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'}; + // Disables existing port functionality + graph.view.getTerminalPort = function(state, terminal, source) { + return terminal; + }; - // 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; - } + // 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 && this.model.isVertex(terminal.cell)) - { - if (terminal.shape != null) - { - let ports = terminal.shape.getPorts(); - let cstrs = new Array(); + } else if (terminal != null && this.model.isVertex(terminal.cell)) { + if (terminal.shape != null) { + const ports = terminal.shape.getPorts(); + const cstrs = new Array(); - for (var id in ports) - { - let port = ports[id]; + for (const id in ports) { + const port = ports[id]; - let cstr = new mxConnectionConstraint(new mxPoint(port.x, port.y), port.perimeter); - cstr.id = id; - cstrs.push(cstr); - } - - return cstrs; + 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) - { - let 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) - { - let key = (source) ? mxConstants.STYLE_SOURCE_PORT : mxConstants.STYLE_TARGET_PORT; - let id = edge.style[key]; - - if (id != null) - { - let 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 - graphGetConnectionPoint = graph.getConnectionPoint; - graph.getConnectionPoint = function(vertex, constraint) - { - if (constraint.id != null && vertex != null && vertex.shape != null) - { - let 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 - { - var v1 = graph.insertVertex(parent, null, 'A', 20, 20, 100, 40); - var v2 = graph.insertVertex(parent, null, 'B', 80, 100, 100, 100, - 'shape=ellipse;perimeter=ellipsePerimeter'); - var v3 = graph.insertVertex(parent, null, 'C', 190, 30, 100, 60, - 'shape=triangle;perimeter=trianglePerimeter;direction=south'); - var e1 = graph.insertEdge(parent, null, '', v1, v2, 'sourcePort=s;targetPort=nw'); - var 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; + 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; @@ -250,12 +291,7 @@ export default MYNAMEHERE; return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge)); }; */ - }; - - - -
-
- - + } +} + +export default PortRefs; diff --git a/src/pages/RadialTreeLayout.js b/src/pages/RadialTreeLayout.js index f913a72da..305052109 100644 --- a/src/pages/RadialTreeLayout.js +++ b/src/pages/RadialTreeLayout.js @@ -7,11 +7,13 @@ */ import React from 'react'; -import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import mxPerimeter from '../mxgraph/view/mxPerimeter'; +import mxConstants from '../mxgraph/util/mxConstants'; +import mxRadialTreeLayout from '../mxgraph/layout/mxRadialTreeLayout'; -class MYNAMEHERE extends React.Component { +class RadialTreeLayout extends React.Component { constructor(props) { super(props); } @@ -21,120 +23,91 @@ class MYNAMEHERE extends React.Component { return ( <>

Hierarchical Layout example for mxGraph

-
{ this.el = el; }} style={{ - + position: 'relative', + overflow: 'auto', + height: '800px', + width: '1000px', + borderTop: 'gray 1px solid', }} /> ); - }; + } componentDidMount() { + // Creates the graph inside the given container + const graph = new mxGraph(this.el); - }; + // Adds rubberband selection + new mxRubberband(graph); + + // Changes the default vertex style in-place + let style = graph.getStylesheet().getDefaultVertexStyle(); + style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; + style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; + style[mxConstants.STYLE_PERIMETER_SPACING] = 6; + style[mxConstants.STYLE_ROUNDED] = true; + style[mxConstants.STYLE_SHADOW] = true; + + style = graph.getStylesheet().getDefaultEdgeStyle(); + style[mxConstants.STYLE_ROUNDED] = true; + + // Creates a layout algorithm to be used + // with the graph + const layout = new mxRadialTreeLayout(graph); + + const parent = graph.getDefaultParent(); + + // Load cells and layouts the graph + graph.getModel().beginUpdate(); + try { + const v1 = graph.insertVertex(parent, null, '1', 500, 500, 80, 30); + const v2 = graph.insertVertex(parent, null, '2.1', 0, 0, 80, 30); + const v3 = graph.insertVertex(parent, null, '2.2', 0, 0, 80, 30); + const v4 = graph.insertVertex(parent, null, '3.1', 0, 0, 80, 30); + const v4_1 = graph.insertVertex(parent, null, '3.2', 0, 0, 80, 30); + const v4_2 = graph.insertVertex(parent, null, '3.3', 0, 0, 80, 30); + const v4_3 = graph.insertVertex(parent, null, '3.6', 0, 0, 80, 30); + const v4_4 = graph.insertVertex(parent, null, '3.7', 0, 0, 80, 30); + const v5 = graph.insertVertex(parent, null, '3.4', 0, 0, 80, 30); + const v6 = graph.insertVertex(parent, null, '2.3', 0, 0, 80, 30); + const v7 = graph.insertVertex(parent, null, '4.1', 0, 0, 80, 30); + const v7_1 = graph.insertVertex(parent, null, '4.2', 0, 0, 80, 30); + const v7_2 = graph.insertVertex(parent, null, '4.3', 0, 0, 80, 30); + const v7_3 = graph.insertVertex(parent, null, '4.4', 0, 0, 80, 30); + const v7_4 = graph.insertVertex(parent, null, '4.5', 0, 0, 80, 30); + const v7_5 = graph.insertVertex(parent, null, '4.6', 0, 0, 80, 30); + const v7_6 = graph.insertVertex(parent, null, '4.7', 0, 0, 80, 30); + + const e1 = graph.insertEdge(parent, null, '', v1, v2); + const e2 = graph.insertEdge(parent, null, '', v1, v3); + const e3 = graph.insertEdge(parent, null, '', v3, v4); + const e3_1 = graph.insertEdge(parent, null, '', v3, v4_1); + const e3_2 = graph.insertEdge(parent, null, '', v3, v4_2); + const e3_3 = graph.insertEdge(parent, null, '', v3, v4_3); + const e3_4 = graph.insertEdge(parent, null, '', v3, v4_4); + const e4 = graph.insertEdge(parent, null, '', v2, v5); + const e5 = graph.insertEdge(parent, null, '', v1, v6); + const e6 = graph.insertEdge(parent, null, '', v4_3, v7); + var e6_1 = graph.insertEdge(parent, null, '', v4_4, v7_4); + var e6_2 = graph.insertEdge(parent, null, '', v4_4, v7_5); + var e6_3 = graph.insertEdge(parent, null, '', v4_4, v7_6); + var e6_1 = graph.insertEdge(parent, null, '', v4_3, v7_1); + var e6_2 = graph.insertEdge(parent, null, '', v4_3, v7_2); + var e6_3 = graph.insertEdge(parent, null, '', v4_3, v7_3); + + // Executes the layout + layout.execute(parent); + } finally { + // Updates the display + graph.getModel().endUpdate(); + } + } } -export default MYNAMEHERE; - - 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 - let graph = new mxGraph(container); - - // Adds rubberband selection - new mxRubberband(graph); - - // Changes the default vertex style in-place - let style = graph.getStylesheet().getDefaultVertexStyle(); - style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; - style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; - style[mxConstants.STYLE_PERIMETER_SPACING] = 6; - style[mxConstants.STYLE_ROUNDED] = true; - style[mxConstants.STYLE_SHADOW] = true; - - style = graph.getStylesheet().getDefaultEdgeStyle(); - style[mxConstants.STYLE_ROUNDED] = true; - - // Creates a layout algorithm to be used - // with the graph - let layout = new mxRadialTreeLayout(graph); - - let parent = graph.getDefaultParent(); - - // Load cells and layouts the graph - graph.getModel().beginUpdate(); - try - { - var v1 = graph.insertVertex(parent, null, '1', 500, 500, 80, 30); - var v2 = graph.insertVertex(parent, null, '2.1', 0, 0, 80, 30); - var v3 = graph.insertVertex(parent, null, '2.2', 0, 0, 80, 30); - var v4 = graph.insertVertex(parent, null, '3.1', 0, 0, 80, 30); - var v4_1 = graph.insertVertex(parent, null, '3.2', 0, 0, 80, 30); - var v4_2 = graph.insertVertex(parent, null, '3.3', 0, 0, 80, 30); - var v4_3 = graph.insertVertex(parent, null, '3.6', 0, 0, 80, 30); - var v4_4 = graph.insertVertex(parent, null, '3.7', 0, 0, 80, 30); - var v5 = graph.insertVertex(parent, null, '3.4', 0, 0, 80, 30); - var v6 = graph.insertVertex(parent, null, '2.3', 0, 0, 80, 30); - var v7 = graph.insertVertex(parent, null, '4.1', 0, 0, 80, 30); - var v7_1 = graph.insertVertex(parent, null, '4.2', 0, 0, 80, 30); - var v7_2 = graph.insertVertex(parent, null, '4.3', 0, 0, 80, 30); - var v7_3 = graph.insertVertex(parent, null, '4.4', 0, 0, 80, 30); - var v7_4 = graph.insertVertex(parent, null, '4.5', 0, 0, 80, 30); - var v7_5 = graph.insertVertex(parent, null, '4.6', 0, 0, 80, 30); - var v7_6 = graph.insertVertex(parent, null, '4.7', 0, 0, 80, 30); - - - var e1 = graph.insertEdge(parent, null, '', v1, v2); - var e2 = graph.insertEdge(parent, null, '', v1, v3); - var e3 = graph.insertEdge(parent, null, '', v3, v4); - var e3_1 = graph.insertEdge(parent, null, '', v3, v4_1); - var e3_2 = graph.insertEdge(parent, null, '', v3, v4_2); - var e3_3 = graph.insertEdge(parent, null, '', v3, v4_3); - var e3_4 = graph.insertEdge(parent, null, '', v3, v4_4); - var e4 = graph.insertEdge(parent, null, '', v2, v5); - var e5 = graph.insertEdge(parent, null, '', v1, v6); - var e6 = graph.insertEdge(parent, null, '', v4_3, v7); - var e6_1 = graph.insertEdge(parent, null, '', v4_4, v7_4); - var e6_2 = graph.insertEdge(parent, null, '', v4_4, v7_5); - var e6_3 = graph.insertEdge(parent, null, '', v4_4, v7_6); - var e6_1 = graph.insertEdge(parent, null, '', v4_3, v7_1); - var e6_2 = graph.insertEdge(parent, null, '', v4_3, v7_2); - var e6_3 = graph.insertEdge(parent, null, '', v4_3, v7_3); - - // Executes the layout - layout.execute(parent); - } - finally - { - // Updates the display - graph.getModel().endUpdate(); - } - } - }; - - - - - - - -
-
- - +export default RadialTreeLayout; diff --git a/src/pages/Resources.js b/src/pages/Resources.js index 36966d233..edd23d8a3 100644 --- a/src/pages/Resources.js +++ b/src/pages/Resources.js @@ -9,8 +9,9 @@ import React from 'react'; import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import mxClient from '../mxgraph/mxClient'; -class MYNAMEHERE extends React.Component { +class Resources extends React.Component { constructor(props) { super(props); } @@ -26,74 +27,49 @@ class MYNAMEHERE extends React.Component { this.el = el; }} style={{ - + position: 'relative', + overflow: 'hidden', + width: '321px', + height: '241px', + background: "url('editors/images/grid.gif')", + cursor: 'default', }} /> ); - }; + } componentDidMount() { + // Async indirection to load resources asynchronously (see above) + // Alternatively you can remove the line that sets mxLoadResources + // anove and change the code to not use this callback. - }; + mxClient.loadResources(() => { + // 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); + const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30); + const e1 = graph.insertEdge(parent, null, '', v1, v2); + } finally { + // Updates the display + graph.getModel().endUpdate(); + } + }); + } } -export default MYNAMEHERE; - - - function main(container) - { - // Checks if the browser is supported - if (!mxClient.isBrowserSupported()) - { - // Displays an error message if the browser is not supported. - mxUtils.error('Browser is not supported!', 200, false); - } - else - { - // Async indirection to load resources asynchronously (see above) - // Alternatively you can remove the line that sets mxLoadResources - // anove and change the code to not use this callback. - mxClient.loadResources(function() - { - // Disables the built-in context menu - mxEvent.disableContextMenu(container); - - // Creates the graph inside the given container - let graph = new mxGraph(container); - - // Enables rubberband selection - new mxRubberband(graph); - - // Gets the default parent for inserting new cells. This - // is normally the first child of the root (ie. layer 0). - let parent = graph.getDefaultParent(); - - // Adds cells to the model in a single step - graph.getModel().beginUpdate(); - try - { - var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30); - var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30); - var e1 = graph.insertEdge(parent, null, '', v1, v2); - } - finally - { - // Updates the display - graph.getModel().endUpdate(); - } - }); - } - }; - - - - - - - -
-
- - +export default Resources; diff --git a/src/pages/SecondLabel.js b/src/pages/SecondLabel.js index 2d4b2fb1b..111d62baa 100644 --- a/src/pages/SecondLabel.js +++ b/src/pages/SecondLabel.js @@ -1,16 +1,20 @@ /** * Copyright (c) 2006-2013, JGraph Ltd - - Second label example for mxGraph. This example demonstrates how to - add another string label to vertices. + + Second label example for mxGraph. This example demonstrates how to + add another string label to vertices. */ import React from 'react'; -import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; -import mxRubberband from '../mxgraph/handler/mxRubberband'; +import mxUtils from '../mxgraph/util/mxUtils'; +import mxPoint from '../mxgraph/util/mxPoint'; +import mxRectangle from '../mxgraph/util/mxRectangle'; +import mxConstants from '../mxgraph/util/mxConstants'; +import mxRectangleShape from '../mxgraph/shape/mxRectangleShape'; +import mxText from "../mxgraph/shape/mxText"; -class MYNAMEHERE extends React.Component { +class SecondLabel extends React.Component { constructor(props) { super(props); } @@ -26,34 +30,37 @@ class MYNAMEHERE extends React.Component { this.el = el; }} style={{ - + position: 'relative', + overflow: 'hidden', + width: '321px', + height: '241px', + background: "url('editors/images/grid.gif')", }} /> ); - }; + } componentDidMount() { - - }; -} - -export default MYNAMEHERE; - // Simple solution to add additional text to the rectangle shape definition: - (function() - { - let mxRectangleShapeIsHtmlAllowed = mxRectangleShape.prototype.isHtmlAllowed; - mxRectangleShape.prototype.isHtmlAllowed = function() - { - return mxRectangleShapeIsHtmlAllowed.apply(this, arguments) && this.state == null; + (function() { + const mxRectangleShapeIsHtmlAllowed = + mxRectangleShape.prototype.isHtmlAllowed; + mxRectangleShape.prototype.isHtmlAllowed = function() { + return ( + mxRectangleShapeIsHtmlAllowed.apply(this, arguments) && + this.state == null + ); }; - 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) - { + 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'); } @@ -62,171 +69,175 @@ export default MYNAMEHERE; }; })(); - // Program starts here. Creates a sample graph in the - // DOM node with the specified ID. This function is invoked - // from the onLoad event handler of the document (see below). - function main(container) - { - // Checks if the browser is supported - if (!mxClient.isBrowserSupported()) - { - // Displays an error message if the browser is not supported. - mxUtils.error('Browser is not supported!', 200, false); + // 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 (!this.model.isEdge(cell)) { + // Possible to return any string here + return `The ID of this cell is ${cell.id}`; } - else - { - // Creates the graph inside the given container - let graph = new mxGraph(container); - // Disables the folding icon - graph.isCellFoldable = function(cell) - { - return false; + return null; + }; + + let relativeChildVerticesVisible = true; + + // Overrides method to hide relative child vertices + graph.isCellVisible = function(cell) { + return ( + !this.model.isVertex(cell) || + 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); } + } - let secondLabelVisible = true; + 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(); + } - // Hook for returning shape number for a given cell - graph.getSecondLabel = function(cell) - { - if (!this.model.isEdge(cell)) - { - // Possible to return any string here - return 'The ID of this cell is ' + cell.id; - } + return result; + }; - return null; - }; + // Destroys the shape number + const { destroy } = graph.cellRenderer; + graph.cellRenderer.destroy = function(state) { + destroy.apply(this, arguments); - let relativeChildVerticesVisible = true; - - // Overrides method to hide relative child vertices - graph.isCellVisible = function(cell) - { - return !this.model.isVertex(cell) || cell.geometry == null || - !cell.geometry.relative || - cell.geometry.relative == relativeChildVerticesVisible; - }; - - // Creates the shape for the shape number and puts it into the draw pane - let redrawShape = graph.cellRenderer.redrawShape; - graph.cellRenderer.redrawShape = function(state, force, rendering) - { - let result = redrawShape.apply(this, arguments); - - if (result && secondLabelVisible && state.cell.geometry != null && !state.cell.geometry.relative) - { - let 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) - { - let scale = graph.getView().getScale(); - let 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 - let destroy = graph.cellRenderer.destroy; - 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). - let parent = graph.getDefaultParent(); - - // Adds cells to the model in a single step - graph.getModel().beginUpdate(); - try - { - var 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. - var 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); - var 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. - var 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); - var e1 = graph.insertEdge(parent, null, '', v1, v2); - } - finally - { - // Updates the display - graph.getModel().endUpdate(); - } - - // Adds a button to execute the layout - document.body.insertBefore(mxUtils.button('Toggle Child Vertices', - function(evt) - { - relativeChildVerticesVisible = !relativeChildVerticesVisible; - graph.refresh(); - } - ), document.body.firstChild); - - // Adds a button to execute the layout - document.body.insertBefore(mxUtils.button('Toggle IDs', - function(evt) - { - secondLabelVisible = !secondLabelVisible; - graph.refresh(); - } - ), document.body.firstChild); + 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 + document.body.insertBefore( + mxUtils.button('Toggle Child Vertices', function(evt) { + relativeChildVerticesVisible = !relativeChildVerticesVisible; + graph.refresh(); + }), + document.body.firstChild + ); + + // Adds a button to execute the layout + document.body.insertBefore( + mxUtils.button('Toggle IDs', function(evt) { + secondLabelVisible = !secondLabelVisible; + graph.refresh(); + }), + document.body.firstChild + ); + } +} + +export default SecondLabel; diff --git a/src/pages/Shape.js b/src/pages/Shape.js index 0142de2ae..bea4f83c4 100644 --- a/src/pages/Shape.js +++ b/src/pages/Shape.js @@ -6,11 +6,12 @@ */ import React from 'react'; -import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; -import mxRubberband from '../mxgraph/handler/mxRubberband'; +import mxConstants from '../mxgraph/util/mxConstants'; +import mxCylinder from '../mxgraph/shape/mxCylinder'; +import mxCellRenderer from "../mxgraph/view/mxCellRenderer"; -class MYNAMEHERE extends React.Component { +class Shape extends React.Component { constructor(props) { super(props); } @@ -26,22 +27,17 @@ class MYNAMEHERE extends React.Component { this.el = el; }} style={{ - + overflow: 'hidden', + width: '321px', + height: '241px', + background: "url('editors/images/grid.gif')", }} /> ); - }; + } componentDidMount() { - - }; -} - -export default MYNAMEHERE; - - - /* The example shape is a "3D box" that looks like this: ____ @@ -52,134 +48,93 @@ export default MYNAMEHERE; The code below defines the shape. The BoxShape function it the constructor which creates a new object instance. - */ - function BoxShape() - { - mxCylinder.call(this); - }; - - /* + 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. */ - mxUtils.extend(BoxShape, mxCylinder); - // Defines the extrusion of the box as a "static class variable" - BoxShape.prototype.extrude = 10; + 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. + /* + 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: / | - / | - | / - |____/ - */ - BoxShape.prototype.redrawPath = function(path, x, y, w, h, isForeground) - { - let dy = this.extrude * this.scale; - let dx = this.extrude * this.scale; + 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); + 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(); + } } - 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); - - - - - - - - - -
-
- - +export default Shape; diff --git a/src/pages/StandardsMode.js b/src/pages/StandardsMode.js deleted file mode 100644 index 11b6d5d28..000000000 --- a/src/pages/StandardsMode.js +++ /dev/null @@ -1,111 +0,0 @@ -/** - * Copyright (c) 2006-2013, JGraph Ltd - - Standardsmode example for mxGraph. This example demonstrates using a DOCTYPE with - mxGraph. (The first line is required for this to use VML in all IE versions.) - - To use the DOCTYPE and SVG in IE9, replace the content attribute of the first line - with IE=5,IE=9. - - To use IE7 standards mode in IE 7,8 and 9, replace IE=5 with IE=7. - */ - -import React from 'react'; -import mxEvent from '../mxgraph/util/mxEvent'; -import mxGraph from '../mxgraph/view/mxGraph'; -import mxRubberband from '../mxgraph/handler/mxRubberband'; - -class MYNAMEHERE extends React.Component { - constructor(props) { - super(props); - } - - render() { - // A container for the graph - return ( - <> -

Standardsmode example for mxGraph

- -
{ - this.el = el; - }} - style={{ - - }} - /> - - ); - }; - - componentDidMount() { - - }; -} - -export default MYNAMEHERE; - - - function main(container) - { - // Checks if the browser is supported - if (!mxClient.isBrowserSupported()) - { - // Displays an error message if the browser is not supported. - mxUtils.error('Browser is not supported!', 200, false); - } - else - { - // Creates the graph inside the given container - let graph = new mxGraph(container); - - // Uncomment the following if you want the container - // to fit the size of the graph - //graph.setResizeContainer(true); - - // Enables rubberband selection - new mxRubberband(graph); - - // Gets the default parent for inserting new cells. This - // is normally the first child of the root (ie. layer 0). - let parent = graph.getDefaultParent(); - - // Adds cells to the model in a single step - graph.getModel().beginUpdate(); - try - { - var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30); - var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30); - var e1 = graph.insertEdge(parent, null, '', v1, v2); - } - finally - { - // Updates the display - graph.getModel().endUpdate(); - } - - // Prints the rendering mode and display dialect (VML or SVG) in use - // CSS1Compat means standard - mxLog.show(); - let mode = (document.compatMode == 'CSS1Compat') ? 'standards' : 'quirks'; - let disp = (mxClient.IS_SVG) ? 'svg' : 'vml'; - mxLog.debug(mode + ' ' + disp); - } - }; - - - - - - - -
-
-
- See also:
- IE9SVG
- docs/known-issues.html#Doctypes
- docs/known-issues.html#IE9 - - diff --git a/src/pages/Stencils.js b/src/pages/Stencils.js index 010d8340e..c22ae8779 100644 --- a/src/pages/Stencils.js +++ b/src/pages/Stencils.js @@ -10,8 +10,19 @@ import React from 'react'; import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import mxUtils from "../mxgraph/util/mxUtils"; +import mxConstants from "../mxgraph/util/mxConstants"; +import mxPoint from "../mxgraph/util/mxPoint"; +import mxStencilRegistry from "../mxgraph/shape/mxStencilRegistry"; +import mxCellRenderer from "../mxgraph/view/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/mxStencil"; -class MYNAMEHERE extends React.Component { +class Stencils extends React.Component { constructor(props) { super(props); } @@ -21,332 +32,372 @@ class MYNAMEHERE extends React.Component { return ( <>

Stencils example for mxGraph

-
{ this.el = el; }} style={{ - + position: 'relative', + overflow: 'hidden', + width: '601px', + 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', + graph.getModel().getStyle(cell) + ); + + 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 MYNAMEHERE; - - - function main(container) - { - // Checks if the browser is supported - if (!mxClient.isBrowserSupported()) - { - // Displays an error message if the browser is not supported. - mxUtils.error('Browser is not supported!', 200, false); - } - else - { - // 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) - { - let key = this.state.style[mxConstants.STYLE_SHAPE]; - let 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 - function CustomShape() - { - mxShape.call(this); - }; - mxUtils.extend(CustomShape, mxShape); - CustomShape.prototype.paintBackground = function(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 - let req = mxUtils.load('stencils.xml'); - let 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(container); - - // Creates the graph inside the given container - let graph = new mxGraph(container); - 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). - let parent = graph.getDefaultParent(); - - // Adds cells to the model in a single step - graph.getModel().beginUpdate(); - try - { - var v1 = graph.insertVertex(parent, null, 'A1', 20, 20, 40, 80, 'shape=and'); - var v2 = graph.insertVertex(parent, null, 'A2', 20, 220, 40, 80, 'shape=and'); - var v3 = graph.insertVertex(parent, null, 'X1', 160, 110, 80, 80, 'shape=xor'); - var e1 = graph.insertEdge(parent, null, '', v1, v3); - e1.geometry.points = [new mxPoint(90, 60), new mxPoint(90, 130)]; - var e2 = graph.insertEdge(parent, null, '', v2, v3); - e2.geometry.points = [new mxPoint(90, 260), new mxPoint(90, 170)]; - - var v4 = graph.insertVertex(parent, null, 'A3', 520, 20, 40, 80, 'shape=customShape;flipH=1'); - var v5 = graph.insertVertex(parent, null, 'A4', 520, 220, 40, 80, 'shape=and;flipH=1'); - var v6 = graph.insertVertex(parent, null, 'X2', 340, 110, 80, 80, 'shape=xor;flipH=1'); - var e3 = graph.insertEdge(parent, null, '', v4, v6); - e3.geometry.points = [new mxPoint(490, 60), new mxPoint(130, 130)]; - var e4 = graph.insertEdge(parent, null, '', v5, v6); - e4.geometry.points = [new mxPoint(490, 260), new mxPoint(130, 170)]; - - var v7 = graph.insertVertex(parent, null, 'O1', 250, 260, 80, 60, 'shape=or;direction=south'); - var e5 = graph.insertEdge(parent, null, '', v6, v7); - e5.geometry.points = [new mxPoint(310, 150)]; - var e6 = graph.insertEdge(parent, null, '', v3, v7); - e6.geometry.points = [new mxPoint(270, 150)]; - - var e7 = graph.insertEdge(parent, null, '', v7, v5); - e7.geometry.points = [new mxPoint(290, 370)]; - } - finally - { - // Updates the display - graph.getModel().endUpdate(); - } - - document.body.appendChild(mxUtils.button('FlipH', function() - { - graph.toggleCellStyles(mxConstants.STYLE_FLIPH); - })); - - document.body.appendChild(mxUtils.button('FlipV', function() - { - graph.toggleCellStyles(mxConstants.STYLE_FLIPV); - })); - - document.body.appendChild(document.createTextNode('\u00a0')); - document.body.appendChild(document.createTextNode('\u00a0')); - document.body.appendChild(document.createTextNode('\u00a0')); - document.body.appendChild(document.createTextNode('\u00a0')); - - document.body.appendChild(mxUtils.button('Rotate', function() - { - let 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; - let tmp = geo.width; - geo.width = geo.height; - geo.height = tmp; - graph.getModel().setGeometry(cell, geo); - - // Reads the current direction and advances by 90 degrees - let 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(); - } - } - } - })); - - document.body.appendChild(document.createTextNode('\u00a0')); - document.body.appendChild(document.createTextNode('\u00a0')); - document.body.appendChild(document.createTextNode('\u00a0')); - document.body.appendChild(document.createTextNode('\u00a0')); - - document.body.appendChild(mxUtils.button('And', function() - { - graph.setCellStyles(mxConstants.STYLE_SHAPE, 'and'); - })); - document.body.appendChild(mxUtils.button('Or', function() - { - graph.setCellStyles(mxConstants.STYLE_SHAPE, 'or'); - })); - document.body.appendChild(mxUtils.button('Xor', function() - { - graph.setCellStyles(mxConstants.STYLE_SHAPE, 'xor'); - })); - - document.body.appendChild(document.createTextNode('\u00a0')); - document.body.appendChild(document.createTextNode('\u00a0')); - document.body.appendChild(document.createTextNode('\u00a0')); - document.body.appendChild(document.createTextNode('\u00a0')); - - document.body.appendChild(mxUtils.button('Style', function() - { - let cell = graph.getSelectionCell(); - - if (cell != null) - { - let style = mxUtils.prompt('Style', graph.getModel().getStyle(cell)); - - if (style != null) - { - graph.getModel().setStyle(cell, style); - } - } - })); - - document.body.appendChild(mxUtils.button('+', function() - { - graph.zoomIn(); - })); - document.body.appendChild(mxUtils.button('-', function() - { - graph.zoomOut(); - })); - } - }; - - - - - - - -
-
- - +export default Stencils; diff --git a/src/pages/Stylesheet.js b/src/pages/Stylesheet.js index 29ef02cdb..68bd3456c 100644 --- a/src/pages/Stylesheet.js +++ b/src/pages/Stylesheet.js @@ -8,11 +8,12 @@ */ import React from 'react'; -import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; -import mxRubberband from '../mxgraph/handler/mxRubberband'; +import mxConstants from '../mxgraph/util/mxConstants'; +import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle'; +import mxPerimeter from "../mxgraph/view/mxPerimeter"; -class MYNAMEHERE extends React.Component { +class Stylesheet extends React.Component { constructor(props) { super(props); } @@ -22,146 +23,148 @@ class MYNAMEHERE extends React.Component { return ( <>

Stylesheet example for mxGraph

-
{ this.el = el; }} style={{ - + overflow: 'hidden', + position: 'relative', + width: '621px', + 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 (this.getModel().isEdge(cell)) { + 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 (model.isEdge(cell)) { + const source = this.getLabel(model.getTerminal(cell, true)); + const target = this.getLabel(model.getTerminal(cell, 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 MYNAMEHERE; - - - 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 DOM node. - let graph = new mxGraph(container); - - // 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) - { - let label = mxGraph.prototype.getLabel.apply(this, arguments); - - if (this.getModel().isEdge(cell)) - { - return 'Transfer '+label; - } - else - { - return label; - } - }; - - // Installs a custom global tooltip - graph.setTooltips(true); - graph.getTooltip = function(state) - { - let cell = state.cell; - let model = this.getModel(); - - if (model.isEdge(cell)) - { - let source = this.getLabel(model.getTerminal(cell, true)); - let target = this.getLabel(model.getTerminal(cell, false)); - - return source+' -> '+target; - } - else - { - 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). - let parent = graph.getDefaultParent(); - - // Adds cells to the model in a single step - graph.getModel().beginUpdate(); - try - { - var v1 = graph.insertVertex(parent, null, 'Interval 1', 20, 20, 180, 30); - var v2 = graph.insertVertex(parent, null, 'Interval 2', 140, 80, 280, 30); - var v3 = graph.insertVertex(parent, null, 'Interval 3', 200, 140, 360, 30); - var v4 = graph.insertVertex(parent, null, 'Interval 4', 480, 200, 120, 30); - var v5 = graph.insertVertex(parent, null, 'Interval 5', 60, 260, 400, 30); - var e1 = graph.insertEdge(parent, null, '1', v1, v2); - e1.getGeometry().points = [{x: 160, y: 60}]; - var e2 = graph.insertEdge(parent, null, '2', v1, v5); - e2.getGeometry().points = [{x: 80, y: 60}]; - var e3 = graph.insertEdge(parent, null, '3', v2, v3); - e3.getGeometry().points = [{x: 280, y: 120}]; - var e4 = graph.insertEdge(parent, null, '4', v3, v4); - e4.getGeometry().points = [{x: 500, y: 180}]; - var 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/Template.js b/src/pages/Template.js index 4b456af1d..d96bcdbe5 100644 --- a/src/pages/Template.js +++ b/src/pages/Template.js @@ -9,11 +9,12 @@ */ import React from 'react'; -import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import mxUtils from "../mxgraph/util/mxUtils"; +import mxCodec from "../mxgraph/io/mxCodec"; -class MYNAMEHERE extends React.Component { +class Template extends React.Component { constructor(props) { super(props); } @@ -23,13 +24,17 @@ class MYNAMEHERE extends React.Component { return ( <>

Hello, World!

-
{ this.el = el; }} style={{ - + overflow: 'hidden', + position: 'relative', + width: '321px', + height: '241px', + background: "url('/mxgraph/javascript/examples/editors/images/grid.gif')", + cursor: 'default' }} /> @@ -37,42 +42,19 @@ class MYNAMEHERE extends React.Component { }; componentDidMount() { + // Creates the graph inside the given container + let graph = new mxGraph(this.el); + // Adds rubberband selection to the graph + new mxRubberband(graph); + + let doc = mxUtils.parseXml(xml); + let codec = new mxCodec(doc); + codec.decode(doc.documentElement, graph.getModel()); }; } -export default MYNAMEHERE; +export default Template; - function main(container, xml) - { - // Checks if the browser is supported - if (!mxClient.isBrowserSupported()) - { - // Displays an error message if the browser is not supported. - mxUtils.error('Browser is not supported!', 200, false); - } - else - { - // Creates the graph inside the given container - let graph = new mxGraph(container); - // Adds rubberband selection to the graph - new mxRubberband(graph); - - let doc = mxUtils.parseXml(xml); - let codec = new mxCodec(doc); - codec.decode(doc.documentElement, graph.getModel()); - } - }; - - - - - - - -
-
- - diff --git a/src/pages/Thread.js b/src/pages/Thread.js index fe0c1c2d9..916cafd2c 100644 --- a/src/pages/Thread.js +++ b/src/pages/Thread.js @@ -6,11 +6,9 @@ */ import React from 'react'; -import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; -import mxRubberband from '../mxgraph/handler/mxRubberband'; -class MYNAMEHERE extends React.Component { +class Thread extends React.Component { constructor(props) { super(props); } @@ -20,93 +18,62 @@ class MYNAMEHERE extends React.Component { return ( <>

Thread example for mxGraph

-
{ this.el = el; }} style={{ - + overflow: 'hidden', + width: '321px', + 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); -export default MYNAMEHERE; + // 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 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 - let graph = new mxGraph(container); + // Function to switch the overlay every 5 secs + const f = () => { + const overlays = graph.getCellOverlays(v1); - // Disables basic selection and cell handling - graph.setEnabled(false); - - // Gets the default parent for inserting new cells. This - // is normally the first child of the root (ie. layer 0). - let parent = graph.getDefaultParent(); - var v1, v2, 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 - let f = function() - { - let 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(); + 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/Toolbar.js b/src/pages/Toolbar.js index c5f9c575f..dc6614f6f 100644 --- a/src/pages/Toolbar.js +++ b/src/pages/Toolbar.js @@ -6,11 +6,19 @@ */ import React from 'react'; -import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import mxUtils from '../mxgraph/util/mxUtils'; +import mxDragSource from '../mxgraph/util/mxDragSource'; +import mxGraphModel from '../mxgraph/model/mxGraphModel'; +import mxToolbar from '../mxgraph/util/mxToolbar'; +import mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler'; +import mxImage from '../mxgraph/util/mxImage'; +import mxGeometry from '../mxgraph/model/mxGeometry'; +import mxCell from '../mxgraph/model/mxCell'; +import mxKeyHandler from '../mxgraph/handler/mxKeyHandler'; -class MYNAMEHERE extends React.Component { +class Toolbar extends React.Component { constructor(props) { super(props); } @@ -26,171 +34,158 @@ class MYNAMEHERE extends React.Component { this.el = el; }} style={{ - + position: 'relative', + overflow: 'hidden', + width: '600px', + 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 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); + } + } + ); + + button.style.position = 'absolute'; + button.style.left = '2px'; + button.style.top = '2px'; + + document.body.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 MYNAMEHERE; - - - function main() - { - // 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); - - // 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 div for the toolbar - let 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'; - - document.body.appendChild(tbContainer); - - // Creates new toolbar without event processing - let toolbar = new mxToolbar(tbContainer); - toolbar.enabled = false - - // Creates the div for the graph - 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")'; - - document.body.appendChild(container); - - // Creates the model and the graph inside the container - // using the fastest rendering available on the browser - let model = new mxGraphModel(); - let 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 - let keyHandler = new mxKeyHandler(graph); - let rubberband = new mxRubberband(graph); - - let addVertex = function(icon, w, h, style) - { - let vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style); - vertex.setVertex(true); - - 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(); - - let button = mxUtils.button('Create toolbar entry from selection', function(evt) - { - if (!graph.isSelectionEmpty()) - { - // Creates a copy of the selection array to preserve its state - let cells = graph.getSelectionCells(); - let 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. - let funct = function(graph, evt, cell) - { - graph.stopEditing(false); - - let pt = graph.getPointForEvent(evt); - let dx = pt.x - bounds.x; - let dy = pt.y - bounds.y; - - graph.setSelectionCells(graph.importCells(cells, dx, dy, cell)); - } - - // Creates the image which is used as the drag icon (preview) - let img = toolbar.addMode(null, 'editors/images/outline.gif', funct); - mxUtils.makeDraggable(img, graph, funct); - } - }); - - button.style.position = 'absolute'; - button.style.left = '2px'; - button.style.top = '2px'; - - document.body.appendChild(button); - } - } - - function 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. - let funct = function(graph, evt, cell) - { - graph.stopEditing(false); - - let pt = graph.getPointForEvent(evt); - let 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) - let img = toolbar.addMode(null, image, funct); - mxUtils.makeDraggable(img, graph, funct); - } - - - - - - - - +export default Toolbar; diff --git a/src/pages/index.js b/src/pages/index.js index 43032c879..52533e794 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -22,9 +22,21 @@ import Tree from "./Tree"; import Validation from "./Validation"; import SwimLanes from "./SwimLanes"; import Wrapping from "./Wrapping"; -import Windows from "./Windows"; +//import Windows from "./Windows"; import Visibility from "./Visibility"; import UserObject from "./UserObject"; +import Toolbar from "./Toolbar"; +import Thread from "./Thread"; +//import Template from "./Template"; +import Stylesheet from "./Stylesheet"; +import Stencils from "./Stencils"; +import SecondLabel from "./SecondLabel"; +import Shape from "./Shape"; +import Resources from "./Resources"; +import RadialTreeLayout from "./RadialTreeLayout"; +import PortRefs from "./PortRefs"; +import Permissions from "./Permissions"; +import Perimeter from "./Perimeter"; export default function Home() { return ( @@ -53,13 +65,25 @@ export default function Home() { + + + + + + + + {/**/} + + {/*