diff --git a/src/mxgraph/shape/mxShape.js b/src/mxgraph/shape/mxShape.js index 86a4ddea6..24ca810f1 100644 --- a/src/mxgraph/shape/mxShape.js +++ b/src/mxgraph/shape/mxShape.js @@ -779,14 +779,14 @@ class mxShape { c.stroke = (...args) => { strokeDrawn = true; - stroke.apply(this, args); + stroke.apply(c, args); }; const { fillAndStroke } = c; c.fillAndStroke = (...args) => { strokeDrawn = true; - fillAndStroke.apply(this, args); + fillAndStroke.apply(c, args); }; } diff --git a/src/mxgraph/shape/mxSwimlane.js b/src/mxgraph/shape/mxSwimlane.js index 48c92c9a1..01911fefd 100644 --- a/src/mxgraph/shape/mxSwimlane.js +++ b/src/mxgraph/shape/mxSwimlane.js @@ -6,6 +6,7 @@ import mxShape from './mxShape'; import mxRectangle from '../util/mxRectangle'; import mxConstants from '../util/mxConstants'; +import mxUtils from "../util/mxUtils"; class mxSwimlane extends mxShape { /** @@ -89,20 +90,20 @@ class mxSwimlane extends mxShape { // East is default const shapeVertical = - this.direction == mxConstants.DIRECTION_NORTH || - this.direction == mxConstants.DIRECTION_SOUTH; + this.direction === mxConstants.DIRECTION_NORTH || + this.direction === mxConstants.DIRECTION_SOUTH; const realHorizontal = horizontal == !shapeVertical; const realFlipH = !realHorizontal && flipH != - (this.direction == mxConstants.DIRECTION_SOUTH || - this.direction == mxConstants.DIRECTION_WEST); + (this.direction === mxConstants.DIRECTION_SOUTH || + this.direction === mxConstants.DIRECTION_WEST); const realFlipV = realHorizontal && flipV != - (this.direction == mxConstants.DIRECTION_SOUTH || - this.direction == mxConstants.DIRECTION_WEST); + (this.direction === mxConstants.DIRECTION_SOUTH || + this.direction === mxConstants.DIRECTION_WEST); // Shape is horizontal if (!shapeVertical) { diff --git a/src/mxgraph/util/mxDragSource.js b/src/mxgraph/util/mxDragSource.js index b9eca8815..9b0598c89 100644 --- a/src/mxgraph/util/mxDragSource.js +++ b/src/mxgraph/util/mxDragSource.js @@ -6,6 +6,11 @@ import mxRectangle from './mxRectangle'; import mxCellHighlight from '../handler/mxCellHighlight'; import mxUtils from './mxUtils'; +import mxEvent from "./mxEvent"; +import mxClient from "../mxClient"; +import mxGuide from "./mxGuide"; +import mxConstants from "./mxConstants"; +import mxPoint from "./mxPoint"; class mxDragSource { /** @@ -175,7 +180,7 @@ class mxDragSource { const evtName = evt.getProperty('eventName'); const me = evt.getProperty('event'); - if (evtName != mxEvent.MOUSE_DOWN) { + if (evtName !== mxEvent.MOUSE_DOWN) { me.consume(); } }; @@ -419,7 +424,7 @@ class mxDragSource { let elt = this.getElementForEvent(evt); if (this.checkEventSource) { - while (elt != null && elt != graph.container) { + while (elt != null && elt !== graph.container) { elt = elt.parentNode; } } @@ -449,7 +454,7 @@ class mxDragSource { graph = null; } - if (graph != this.currentGraph) { + if (graph !== this.currentGraph) { if (this.currentGraph != null) { this.dragExit(this.currentGraph, evt); } @@ -468,7 +473,7 @@ class mxDragSource { if ( this.dragElement != null && (this.previewElement == null || - this.previewElement.style.visibility != 'visible') + this.previewElement.style.visibility !== 'visible') ) { let x = mxEvent.getClientX(evt); let y = mxEvent.getClientY(evt); @@ -506,7 +511,7 @@ class mxDragSource { if ( this.currentPoint != null && (this.previewElement == null || - this.previewElement.style.visibility != 'hidden') + this.previewElement.style.visibility !== 'hidden') ) { const { scale } = this.currentGraph.view; const tr = this.currentGraph.view.translate; diff --git a/src/pages/Boundary.js b/src/pages/Boundary.js index 604296578..cd943bf77 100644 --- a/src/pages/Boundary.js +++ b/src/pages/Boundary.js @@ -32,8 +32,8 @@ class Boundary extends React.Component { style={{ position: 'relative', overflow: 'hidden', - width: '821px', - height: '641px', + width: '321px', + height: '241px', background: 'url("editors/images/grid.gif")', cursor: 'default' }} diff --git a/src/pages/Collapse.js b/src/pages/Collapse.js index 36062b796..4a4e9cefc 100644 --- a/src/pages/Collapse.js +++ b/src/pages/Collapse.js @@ -1,16 +1,15 @@ - +/** + * Copyright (c) 2006-2013, JGraph Ltd + * + * Collapse example for mxGraph. This example demonstrates changing + * the style of a cell based on its collapsed state. + */ import React from 'react'; -import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; -import mxRubberband from '../mxgraph/handler/mxRubberband'; +import mxRectangle from '../mxgraph/util/mxRectangle'; -class MYNAMEHERE extends React.Component { +class Collapse extends React.Component { constructor(props) { super(props); } @@ -19,14 +18,19 @@ class MYNAMEHERE extends React.Component { // A container for the graph return ( <> -

+

Collapse example for mxGraph

{ this.el = el; }} style={{ - + position: 'relative', + overflow: 'hidden', + width: '321px', + height: '241px', + background: "url('editors/images/grid.gif')", + cursor: 'default', }} /> @@ -34,77 +38,45 @@ class MYNAMEHERE extends React.Component { }; componentDidMount = () => { + const graph = new mxGraph(this.el); + const parent = graph.getDefaultParent(); + // Extends mxGraphModel.getStyle to show an image when collapsed + const modelGetStyle = graph.model.getStyle; + graph.model.getStyle = function(cell) { + if (cell != null) { + let style = modelGetStyle.apply(this, arguments); + + if (this.isCollapsed(cell)) { + style = + `${style};shape=image;image=http://www.jgraph.com/images/mxgraph.gif;` + + `noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`; + } + + return style; + } + + return null; + }; + + graph.getModel().beginUpdate(); + try { + const v1 = graph.insertVertex( + parent, + null, + 'Container', + 20, + 20, + 200, + 200, + 'shape=swimlane;startSize=20;' + ); + v1.geometry.alternateBounds = new mxRectangle(0, 0, 110, 70); + const v11 = graph.insertVertex(v1, null, 'Hello,', 10, 40, 120, 80); + } finally { + graph.getModel().endUpdate(); + } }; } -export default MYNAMEHERE; - - - - - Collapse example for mxGraph - - - - - - - - - - - - - - - -
-
- - +export default Collapse; diff --git a/src/pages/Constituent.js b/src/pages/Constituent.js index 2dee3656a..9d2d333c1 100644 --- a/src/pages/Constituent.js +++ b/src/pages/Constituent.js @@ -1,16 +1,18 @@ - +/** + * Copyright (c) 2006-2013, JGraph Ltd + * + * Consistuent example for mxGraph. This example demonstrates using + * cells as parts of other cells. + */ import React from 'react'; import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import mxGraphHandler from "../mxgraph/handler/mxGraphHandler"; +import mxClient from "../mxgraph/mxClient"; -class MYNAMEHERE extends React.Component { +class Constituent extends React.Component { constructor(props) { super(props); } @@ -19,127 +21,94 @@ class MYNAMEHERE extends React.Component { // A container for the graph return ( <> -

+

Consistuent example for mxGraph

{ this.el = el; }} style={{ - + position: 'relative', + overflow: 'hidden', + width: '321px', + height: '241px', + background: 'url("editors/images/grid.gif")', + cursor: 'default', }} /> ); }; - componentDidMount = () => { + componentDidMount() { + class MyCustomGraphHandler extends mxGraphHandler { + /** + * Redirects start drag to parent. + */ + getInitialCellForEvent(me) { + let cell = super.getInitialCellForEvent(me); + if (this.graph.isPart(cell)) { + cell = this.graph.getModel().getParent(cell); + } + return cell; + } + } - }; + // Disables the built-in context menu + mxEvent.disableContextMenu(this.el); + + class MyCustomGraph extends mxGraph { + foldingEnabled = false; + + recursiveResize = true; + + isPart(cell) { + // Helper method to mark parts with constituent=1 in the style + return this.getCurrentCellStyle(cell).constituent == '1'; + } + + selectCellForEvent(cell, evt) { + // Redirects selection to parent + if (this.isPart(cell)) { + cell = this.model.getParent(cell); + } + super.selectCellForEvent(cell, evt); + } + + createGraphHandler() { + return new MyCustomGraphHandler(this); + } + } + + // Creates the graph inside the given container + const graph = new MyCustomGraph(this.el); + + // Enables rubberband selection + new mxRubberband(graph); + + // Gets the default parent for inserting new cells. This + // is normally the first child of the root (ie. layer 0). + const parent = graph.getDefaultParent(); + + // Adds cells to the model in a single step + graph.getModel().beginUpdate(); + try { + const v1 = graph.insertVertex(parent, null, '', 20, 20, 120, 70); + const v2 = graph.insertVertex( + v1, + null, + 'Constituent', + 20, + 20, + 80, + 30, + 'constituent=1;' + ); + } finally { + // Updates the display + graph.getModel().endUpdate(); + } + } } -export default MYNAMEHERE; - - - - - Consistuent example for mxGraph - - - - - - - - - - - - - - - -
-
- - +export default Constituent; diff --git a/src/pages/ContextIcons.js b/src/pages/ContextIcons.js index ba6935031..3ade25331 100644 --- a/src/pages/ContextIcons.js +++ b/src/pages/ContextIcons.js @@ -1,16 +1,19 @@ - +/** + * Copyright (c) 2006-2013, JGraph Ltd + * + * Context icons example for mxGraph. This example demonstrates adding + * icons to selected vertices to carry out special operations. + */ import React from 'react'; import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import mxVertexHandler from '../mxgraph/handler/mxVertexHandler'; +import mxUtils from '../mxgraph/util/mxUtils'; +import mxClient from '../mxgraph/mxClient'; -class MYNAMEHERE extends React.Component { +class ContextIcons extends React.Component { constructor(props) { super(props); } @@ -19,14 +22,17 @@ class MYNAMEHERE extends React.Component { // A container for the graph return ( <> -

- +

Context icons example for mxGraph

{ this.el = el; }} style={{ - + overflow: 'hidden', + width: '321px', + height: '241px', + background: "url('editors/images/grid.gif')", + cursor: 'default', }} /> @@ -34,229 +40,197 @@ class MYNAMEHERE extends React.Component { }; componentDidMount = () => { + // Defines a subclass for mxVertexHandler that adds a set of clickable + // icons to every selected vertex. + function mxVertexToolHandler(state) { + mxVertexHandler.apply(this, arguments); + } + mxVertexToolHandler.prototype = new mxVertexHandler(); + mxVertexToolHandler.prototype.constructor = mxVertexToolHandler; + + mxVertexToolHandler.prototype.domNode = null; + + mxVertexToolHandler.prototype.init = function() { + mxVertexHandler.prototype.init.apply(this, arguments); + + // In this example we force the use of DIVs for images in IE. This + // handles transparency in PNG images properly in IE and fixes the + // problem that IE routes all mouse events for a gesture via the + // initial IMG node, which means the target vertices + this.domNode = document.createElement('div'); + this.domNode.style.position = 'absolute'; + this.domNode.style.whiteSpace = 'nowrap'; + + // Workaround for event redirection via image tag in quirks and IE8 + function createImage(src) { + return mxUtils.createImage(src); + } + + // Delete + let img = createImage('images/delete2.png'); + img.setAttribute('title', 'Delete'); + img.style.cursor = 'pointer'; + img.style.width = '16px'; + img.style.height = '16px'; + mxEvent.addGestureListeners( + img, + mxUtils.bind(this, function(evt) { + // Disables dragging the image + mxEvent.consume(evt); + }) + ); + mxEvent.addListener( + img, + 'click', + mxUtils.bind(this, function(evt) { + this.graph.removeCells([this.state.cell]); + mxEvent.consume(evt); + }) + ); + this.domNode.appendChild(img); + + // Size + img = createImage('images/fit_to_size.png'); + img.setAttribute('title', 'Resize'); + img.style.cursor = 'se-resize'; + img.style.width = '16px'; + img.style.height = '16px'; + mxEvent.addGestureListeners( + img, + mxUtils.bind(this, function(evt) { + this.start(mxEvent.getClientX(evt), mxEvent.getClientY(evt), 7); + this.graph.isMouseDown = true; + this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt); + mxEvent.consume(evt); + }) + ); + this.domNode.appendChild(img); + + // Move + img = createImage('images/plus.png'); + img.setAttribute('title', 'Move'); + img.style.cursor = 'move'; + img.style.width = '16px'; + img.style.height = '16px'; + mxEvent.addGestureListeners( + img, + mxUtils.bind(this, function(evt) { + this.graph.graphHandler.start( + this.state.cell, + mxEvent.getClientX(evt), + mxEvent.getClientY(evt) + ); + this.graph.graphHandler.cellWasClicked = true; + this.graph.isMouseDown = true; + this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt); + mxEvent.consume(evt); + }) + ); + this.domNode.appendChild(img); + + // Connect + img = createImage('images/check.png'); + img.setAttribute('title', 'Connect'); + img.style.cursor = 'pointer'; + img.style.width = '16px'; + img.style.height = '16px'; + mxEvent.addGestureListeners( + img, + mxUtils.bind(this, function(evt) { + const pt = mxUtils.convertPoint( + this.graph.container, + mxEvent.getClientX(evt), + mxEvent.getClientY(evt) + ); + this.graph.connectionHandler.start(this.state, pt.x, pt.y); + this.graph.isMouseDown = true; + this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt); + mxEvent.consume(evt); + }) + ); + this.domNode.appendChild(img); + + this.graph.container.appendChild(this.domNode); + this.redrawTools(); + }; + + mxVertexToolHandler.prototype.redraw = function() { + mxVertexHandler.prototype.redraw.apply(this); + this.redrawTools(); + }; + + mxVertexToolHandler.prototype.redrawTools = function() { + if (this.state != null && this.domNode != null) { + const dy = 4; + this.domNode.style.left = `${this.state.x + this.state.width - 56}px`; + this.domNode.style.top = `${this.state.y + this.state.height + dy}px`; + } + }; + + mxVertexToolHandler.prototype.destroy = function(sender, me) { + mxVertexHandler.prototype.destroy.apply(this, arguments); + + if (this.domNode != null) { + this.domNode.parentNode.removeChild(this.domNode); + this.domNode = null; + } + }; + + // Program starts here. Creates a sample graph in the + // DOM node with the specified ID. This function is invoked + // from the onLoad event handler of the document (see below). + function main(container) { + // Checks if the browser is supported + if (!mxClient.isBrowserSupported()) { + // Displays an error message if the browser is not supported. + mxUtils.error('Browser is not supported!', 200, false); + } else { + // Creates the graph inside the given container + const graph = new mxGraph(container); + graph.setConnectable(true); + graph.connectionHandler.createTarget = true; + + graph.createHandler = function(state) { + if (state != null && this.model.isVertex(state.cell)) { + return new mxVertexToolHandler(state); + } + + return mxGraph.prototype.createHandler.apply(this, arguments); + }; + + // Uncomment the following if you want the container + // to fit the size of the graph + // graph.setResizeContainer(true); + + // Enables rubberband selection + new mxRubberband(graph); + + // Gets the default parent for inserting new cells. This + // is normally the first child of the root (ie. layer 0). + const parent = graph.getDefaultParent(); + + // Adds cells to the model in a single step + graph.getModel().beginUpdate(); + try { + const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 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; - - - - - Context icons example for mxGraph - - - - - - - - - - - - - - - -
-
- - +export default ContextIcons; diff --git a/src/pages/Control.js b/src/pages/Control.js index 73c39f43c..9ea90c65a 100644 --- a/src/pages/Control.js +++ b/src/pages/Control.js @@ -1,16 +1,21 @@ - +/** + * Copyright (c) 2006-2013, JGraph Ltd + * + * Control example for mxGraph. This example demonstrates adding + * controls to specific cells in a graph. + */ 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 mxRectangle from '../mxgraph/util/mxRectangle'; +import mxCellRenderer from '../mxgraph/view/mxCellRenderer'; +import mxImageShape from '../mxgraph/shape/mxImageShape'; +import mxImage from '../mxgraph/util/mxImage'; -class MYNAMEHERE extends React.Component { +class Control extends React.Component { constructor(props) { super(props); } @@ -19,14 +24,22 @@ class MYNAMEHERE extends React.Component { // A container for the graph return ( <> -

- +

Control example for mxGraph

{ this.el = el; }} style={{ - + overflow: 'hidden', + width: '621px', + height: '441px', + background: "url('editors/images/grid.gif')", + cursor: 'default', + }} + /> +
{ + this.el2 = el; }} /> @@ -34,181 +47,142 @@ class MYNAMEHERE extends React.Component { }; componentDidMount = () => { + // Creates the graph inside the given container + const graph = new mxGraph(this.el); + graph.setPanning(true); + // Specifies the URL and size of the new control + const deleteImage = new mxImage( + 'editors/images/overlays/forbidden.png', + 16, + 16 + ); + + // Overridden to add an additional control to the state at creation time + const mxCellRendererCreateControl = mxCellRenderer.prototype.createControl; + mxCellRenderer.prototype.createControl = function(state) { + mxCellRendererCreateControl.apply(this, arguments); + + const { graph } = state.view; + + if (graph.getModel().isVertex(state.cell)) { + if (state.deleteControl == null) { + const b = new mxRectangle( + 0, + 0, + deleteImage.width, + deleteImage.height + ); + state.deleteControl = new mxImageShape(b, deleteImage.src); + state.deleteControl.dialect = graph.dialect; + state.deleteControl.preserveImageAspect = false; + + this.initControl(state, state.deleteControl, false, function(evt) { + if (graph.isEnabled()) { + graph.removeCells([state.cell]); + mxEvent.consume(evt); + } + }); + } + } else if (state.deleteControl != null) { + state.deleteControl.destroy(); + state.deleteControl = null; + } + }; + + // Helper function to compute the bounds of the control + const getDeleteControlBounds = function(state) { + if (state.deleteControl != null) { + const oldScale = state.deleteControl.scale; + const w = state.deleteControl.bounds.width / oldScale; + const h = state.deleteControl.bounds.height / oldScale; + const s = state.view.scale; + + return state.view.graph.getModel().isEdge(state.cell) + ? new mxRectangle( + state.x + state.width / 2 - (w / 2) * s, + state.y + state.height / 2 - (h / 2) * s, + w * s, + h * s + ) + : new mxRectangle( + state.x + state.width - w * s, + state.y, + w * s, + h * s + ); + } + + return null; + }; + + // Overridden to update the scale and bounds of the control + const mxCellRendererRedrawControl = mxCellRenderer.prototype.redrawControl; + mxCellRenderer.prototype.redrawControl = function(state) { + mxCellRendererRedrawControl.apply(this, arguments); + + if (state.deleteControl != null) { + const bounds = getDeleteControlBounds(state); + const s = state.view.scale; + + if ( + state.deleteControl.scale !== s || + !state.deleteControl.bounds.equals(bounds) + ) { + state.deleteControl.bounds = bounds; + state.deleteControl.scale = s; + state.deleteControl.redraw(); + } + } + }; + + // Overridden to remove the control if the state is destroyed + const mxCellRendererDestroy = mxCellRenderer.prototype.destroy; + mxCellRenderer.prototype.destroy = function(state) { + mxCellRendererDestroy.apply(this, arguments); + + if (state.deleteControl != null) { + state.deleteControl.destroy(); + state.deleteControl = null; + } + }; + + // Uncomment the following if you want the container + // to fit the size of the graph + // graph.setResizeContainer(true); + + // Enables rubberband selection + new mxRubberband(graph); + + // Gets the default parent for inserting new cells. This + // is normally the first child of the root (ie. layer 0). + const parent = graph.getDefaultParent(); + + // Adds cells to the model in a single step + graph.getModel().beginUpdate(); + try { + const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 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(); + } + + graph.centerZoom = false; + + this.el2.appendChild( + mxUtils.button('Zoom In', function() { + graph.zoomIn(); + }) + ); + + this.el2.appendChild( + mxUtils.button('Zoom Out', function() { + graph.zoomOut(); + }) + ); }; } -export default MYNAMEHERE; - - - - - Control example for mxGraph - - - - - - - - - - - - - - - -
-
- - +export default Control; diff --git a/src/pages/DragSource.html b/src/pages/DragSource.html deleted file mode 100644 index 47f92178f..000000000 --- a/src/pages/DragSource.html +++ /dev/null @@ -1,232 +0,0 @@ - - -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 ( - <> -

- -
{ - this.el = el; - }} - style={{ - - }} - /> - - ); - }; - - componentDidMount = () => { - - }; -} - -export default MYNAMEHERE; - - - - - Dragsource example for mxGraph - - - - - - - - - - - - - - - diff --git a/src/pages/DragSource.js b/src/pages/DragSource.js new file mode 100644 index 000000000..20cbb3a7b --- /dev/null +++ b/src/pages/DragSource.js @@ -0,0 +1,196 @@ +/** + * Copyright (c) 2006-2013, JGraph Ltd + * + * Dragsource example for mxGraph. This example demonstrates using + * one drag source for multiple graphs and changing the drag icon. + */ + +import React from 'react'; +import mxEvent from '../mxgraph/util/mxEvent'; +import mxGraph from '../mxgraph/view/mxGraph'; +import mxRubberband from '../mxgraph/handler/mxRubberband'; +import mxCell from '../mxgraph/model/mxCell'; +import mxGeometry from '../mxgraph/model/mxGeometry'; +import mxUtils from '../mxgraph/util/mxUtils'; +import mxDragSource from '../mxgraph/util/mxDragSource'; +import mxGraphHandler from "../mxgraph/handler/mxGraphHandler"; +import mxGuide from "../mxgraph/util/mxGuide"; +import mxEdgeHandler from "../mxgraph/handler/mxEdgeHandler"; + +class DragSource extends React.Component { + constructor(props) { + super(props); + } + + render = () => { + // A container for the graph + return ( + <> +

Dragsource example for mxGraph

+ +
{ + this.el = el; + }} + style={{}} + /> + + ); + }; + + componentDidMount = () => { + // Enables guides + mxGraphHandler.prototype.guidesEnabled = true; + + // Alt disables guides + mxGuide.prototype.isEnabledForEvent = function(evt) { + return !mxEvent.isAltDown(evt); + }; + + // Enables snapping waypoints to terminals + mxEdgeHandler.prototype.snapToTerminals = true; + + const graphs = []; + + // Creates the graph inside the given container + for (let i = 0; i < 2; i++) { + const container = document.createElement('div'); + container.style.overflow = 'hidden'; + container.style.position = 'relative'; + container.style.width = '321px'; + container.style.height = '241px'; + container.style.background = "url('editors/images/grid.gif')"; + container.style.cursor = 'default'; + + this.el.appendChild(container); + + var graph = new mxGraph(container); + graph.gridSize = 30; + + // Uncomment the following if you want the container + // to fit the size of the graph + // graph.setResizeContainer(true); + + // Enables rubberband selection + new mxRubberband(graph); + + // Gets the default parent for inserting new cells. This + // is normally the first child of the root (ie. layer 0). + const parent = graph.getDefaultParent(); + + // Adds cells to the model in a single step + graph.getModel().beginUpdate(); + try { + const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 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(); + } + + graphs.push(graph); + } + + // Returns the graph under the mouse + const graphF = function(evt) { + const x = mxEvent.getClientX(evt); + const y = mxEvent.getClientY(evt); + const elt = document.elementFromPoint(x, y); + + for (let i = 0; i < graphs.length; i++) { + if (mxUtils.isAncestorNode(graphs[i].container, elt)) { + return graphs[i]; + } + } + + return null; + }; + + // Inserts a cell at the given location + const funct = function(graph, evt, target, x, y) { + const cell = new mxCell('Test', new mxGeometry(0, 0, 120, 40)); + cell.vertex = true; + const cells = graph.importCells([cell], x, y, target); + + if (cells != null && cells.length > 0) { + graph.scrollCellToVisible(cells[0]); + graph.setSelectionCells(cells); + } + }; + + // Creates a DOM node that acts as the drag source + const img = mxUtils.createImage('images/icons48/gear.png'); + img.style.width = '48px'; + img.style.height = '48px'; + document.body.appendChild(img); + + // Creates the element that is being for the actual preview. + const dragElt = document.createElement('div'); + dragElt.style.border = 'dashed black 1px'; + dragElt.style.width = '120px'; + dragElt.style.height = '40px'; + + // Drag source is configured to use dragElt for preview and as drag icon + // if scalePreview (last) argument is true. Dx and dy are null to force + // the use of the defaults. Note that dx and dy are only used for the + // drag icon but not for the preview. + const ds = mxUtils.makeDraggable( + img, + graphF, + funct, + dragElt, + null, + null, + graph.autoscroll, + true + ); + + // Redirects feature to global switch. Note that this feature should only be used + // if the the x and y arguments are used in funct to insert the cell. + ds.isGuidesEnabled = function() { + return graph.graphHandler.guidesEnabled; + }; + + // Restores original drag icon while outside of graph + ds.createDragElement = mxDragSource.prototype.createDragElement; + }; + + // NOTE: To enable cross-document DnD (eg. between frames), + // the following methods need to be overridden: + /* mxDragSourceMouseUp = mxDragSource.prototype.mouseUp; +mxDragSource.prototype.mouseUp = function(evt) +{ + let doc = this.element.ownerDocument; + + if (doc != document) + { + let mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup'; + + if (this.mouseUpHandler != null) + { + mxEvent.removeListener(doc, mu, this.mouseUpHandler); + } + } + + mxDragSourceMouseUp.apply(this, arguments); +}; */ + + /* mxDragSourceMouseDown = mxDragSource.prototype.mouseDown; +mxDragSource.prototype.mouseDown = function(evt) +{ + if (this.enabled && !mxEvent.isConsumed(evt)) + { + mxDragSourceMouseDown.apply(this, arguments); + let doc = this.element.ownerDocument; + + if (doc != document) + { + let mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup'; + mxEvent.addListener(doc, mu, this.mouseUpHandler); + } + } +}; */ +} + +export default DragSource; diff --git a/src/pages/dynamicloading.html b/src/pages/DynamicLoading.js similarity index 92% rename from src/pages/dynamicloading.html rename to src/pages/DynamicLoading.js index 368b6ec4e..a6ed89149 100644 --- a/src/pages/dynamicloading.html +++ b/src/pages/DynamicLoading.js @@ -4,6 +4,43 @@ Dynamic loading example for mxGraph. This example demonstrates loading graph model data dynamically to limit the number of cells in the model. --> + +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 ( + <> +

+ +
{ + this.el = el; + }} + style={{ + + }} + /> + + ); + }; + + componentDidMount = () => { + + }; +} + +export default MYNAMEHERE; + + Dynamic loading example for mxGraph diff --git a/src/pages/dynamicstyle.html b/src/pages/DynamicStyle.js similarity index 86% rename from src/pages/dynamicstyle.html rename to src/pages/DynamicStyle.js index b6712626b..1bc23888b 100644 --- a/src/pages/dynamicstyle.html +++ b/src/pages/DynamicStyle.js @@ -4,6 +4,43 @@ Dynamic Style example for mxGraph. This example demonstrates changing the style of a cell dynamically by overriding mxGraphModel.getStyle. --> + +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 ( + <> +

+ +
{ + this.el = el; + }} + style={{ + + }} + /> + + ); + }; + + componentDidMount = () => { + + }; +} + +export default MYNAMEHERE; + + Dynamic Style example for mxGraph diff --git a/src/pages/dynamictoolbar.html b/src/pages/DynamicToolbar.js similarity index 89% rename from src/pages/dynamictoolbar.html rename to src/pages/DynamicToolbar.js index f7b5d2983..7701319d7 100644 --- a/src/pages/dynamictoolbar.html +++ b/src/pages/DynamicToolbar.js @@ -4,6 +4,43 @@ Dynamic toolbar example for mxGraph. This example demonstrates changing the state of the toolbar at runtime. --> + +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 ( + <> +

+ +
{ + this.el = el; + }} + style={{ + + }} + /> + + ); + }; + + componentDidMount = () => { + + }; +} + +export default MYNAMEHERE; + + Toolbar example for mxGraph diff --git a/src/pages/edgetolerance.html b/src/pages/EdgeTolerance.js similarity index 87% rename from src/pages/edgetolerance.html rename to src/pages/EdgeTolerance.js index 19d24e230..244971af6 100644 --- a/src/pages/edgetolerance.html +++ b/src/pages/EdgeTolerance.js @@ -4,6 +4,43 @@ Edge tolerance example for mxGraph. This example demonstrates increasing the tolerance for hit detection on edges. --> + +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 ( + <> +

+ +
{ + this.el = el; + }} + style={{ + + }} + /> + + ); + }; + + componentDidMount = () => { + + }; +} + +export default MYNAMEHERE; + + Edge tolerance example for mxGraph diff --git a/src/pages/editing.html b/src/pages/Editing.js similarity index 89% rename from src/pages/editing.html rename to src/pages/Editing.js index ef71bd6f3..bca437495 100644 --- a/src/pages/editing.html +++ b/src/pages/Editing.js @@ -6,6 +6,43 @@ a specific field of the user object. Wrapping and DOM nodes as labels are also demonstrated here. --> + +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 ( + <> +

+ +
{ + this.el = el; + }} + style={{ + + }} + /> + + ); + }; + + componentDidMount = () => { + + }; +} + +export default MYNAMEHERE; + + Editing example for mxGraph diff --git a/src/pages/events.html b/src/pages/Events.js similarity index 90% rename from src/pages/events.html rename to src/pages/Events.js index 1ee1f30b7..5187c8515 100644 --- a/src/pages/events.html +++ b/src/pages/Events.js @@ -9,6 +9,43 @@ default stylesheet, and handle the doubleclick on the adjustment point. See also: overlays.html for click event handling. --> + +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 ( + <> +

+ +
{ + this.el = el; + }} + style={{ + + }} + /> + + ); + }; + + componentDidMount = () => { + + }; +} + +export default MYNAMEHERE; + + Events example for mxGraph diff --git a/src/pages/extendcanvas.html b/src/pages/ExtendCanvas.js similarity index 93% rename from src/pages/extendcanvas.html rename to src/pages/ExtendCanvas.js index 91609911c..e1d9ac029 100644 --- a/src/pages/extendcanvas.html +++ b/src/pages/ExtendCanvas.js @@ -4,6 +4,43 @@ Extend canvas example for mxGraph. This example demonstrates implementing an infinite canvas with scrollbars. --> + +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 ( + <> +

+ +
{ + this.el = el; + }} + style={{ + + }} + /> + + ); + }; + + componentDidMount = () => { + + }; +} + +export default MYNAMEHERE; + + Extend canvas example for mxGraph diff --git a/src/pages/fileio.html b/src/pages/FileIO.js similarity index 91% rename from src/pages/fileio.html rename to src/pages/FileIO.js index ef7995f8e..92bfde505 100644 --- a/src/pages/fileio.html +++ b/src/pages/FileIO.js @@ -5,6 +5,42 @@ XML file, writing a custom parser, applying an automatic layout and defining a 2-way edge. --> + +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 ( + <> +

+ +
{ + this.el = el; + }} + style={{ + + }} + /> + + ); + }; + + componentDidMount = () => { + + }; +} + +export default MYNAMEHERE; + File I/O example for mxGraph diff --git a/src/pages/fixedicon.html b/src/pages/FixedIcon.js similarity index 83% rename from src/pages/fixedicon.html rename to src/pages/FixedIcon.js index 096fded50..d99071bf4 100644 --- a/src/pages/fixedicon.html +++ b/src/pages/FixedIcon.js @@ -4,6 +4,42 @@ FixedIcon example for mxGraph. This example demonstrates customizing the icon position in the mxLabel shape. --> + +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 ( + <> +

+ +
{ + this.el = el; + }} + style={{ + + }} + /> + + ); + }; + + componentDidMount = () => { + + }; +} + +export default MYNAMEHERE; + Fixed icon example for mxGraph diff --git a/src/pages/fixedpoints.html b/src/pages/FixedPoints.js similarity index 93% rename from src/pages/fixedpoints.html rename to src/pages/FixedPoints.js index dbdf41e46..834d85a5d 100644 --- a/src/pages/fixedpoints.html +++ b/src/pages/FixedPoints.js @@ -4,6 +4,42 @@ Fixed points example for mxGraph. This example demonstrates using fixed connection points for connecting edges to vertices. --> + +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 ( + <> +

+ +
{ + this.el = el; + }} + style={{ + + }} + /> + + ); + }; + + componentDidMount = () => { + + }; +} + +export default MYNAMEHERE; + Fixed points example for mxGraph diff --git a/src/pages/folding.html b/src/pages/Folding.js similarity index 90% rename from src/pages/folding.html rename to src/pages/Folding.js index 77a5b8260..8469405cb 100644 --- a/src/pages/folding.html +++ b/src/pages/Folding.js @@ -4,6 +4,42 @@ Folding example for mxGraph. This example demonstrates using a layout to implement a nested group structure. --> + +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 ( + <> +

+ +
{ + this.el = el; + }} + style={{ + + }} + /> + + ); + }; + + componentDidMount = () => { + + }; +} + +export default MYNAMEHERE; + Folding example for mxGraph diff --git a/src/pages/graphlayout.html b/src/pages/GraphLayout.js similarity index 91% rename from src/pages/graphlayout.html rename to src/pages/GraphLayout.js index d820a42df..ccc5d7689 100644 --- a/src/pages/graphlayout.html +++ b/src/pages/GraphLayout.js @@ -5,6 +5,42 @@ automatic graph layouts and listening to changes of the graph size to keep the container size in sync. --> + +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 ( + <> +

+ +
{ + this.el = el; + }} + style={{ + + }} + /> + + ); + }; + + componentDidMount = () => { + + }; +} + +export default MYNAMEHERE; + Graphlayout example for mxGraph diff --git a/src/pages/index.js b/src/pages/index.js index 5c812da82..4b3db1d40 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -7,16 +7,30 @@ import AutoLayout from "./AutoLayout"; import Animation from "./Animation"; import Boundary from "./Boundary"; import Clipboard from "./Clipboard"; +import DragSource from "./DragSource"; +import Control from "./Control"; +import ContextIcons from "./ContextIcons"; +import Collapse from "./Collapse"; +import Constituent from "./Constituent"; export default function Home() { return ( - <> +
- + + + + + + +
); }