{
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;
-
-
-
-
-
-
-
+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 (
<>
-
{
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 (
- <>
+
);
}