{
this.el = el;
@@ -29,7 +29,6 @@ class Perimeter extends React.Component {
style={{
overflow: 'hidden',
position: 'relative',
- width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
diff --git a/src/pages/Permissions.js b/src/pages/Permissions.js
index 94a49876a..b75fbe543 100644
--- a/src/pages/Permissions.js
+++ b/src/pages/Permissions.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- Hello, World! example for mxGraph. This example demonstrates creating
+ Hello, World!. This example demonstrates creating
permissions to define the available operations a the graph.
*/
@@ -35,13 +35,18 @@ class Permissions extends React.Component {
// A container for the graph
return (
<>
-
{
this.el = el;
}}
- style={{}}
+ style={{
+ position: 'relative',
+ overflow: 'hidden',
+ height: '300px',
+ //background: "url('editors/images/grid.gif')",
+ }}
/>
);
diff --git a/src/pages/PortRefs.js b/src/pages/PortRefs.js
index 7f2043cda..7e25f6165 100644
--- a/src/pages/PortRefs.js
+++ b/src/pages/PortRefs.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- Portsrefs example for mxGraph. This example demonstrates referencing
+ Portsrefs. This example demonstrates referencing
connection points by ID. The main difference to the implementation
where the connection point is stored in the connecting edge is that
changes to the original port will be reflected in all existing
@@ -39,7 +39,6 @@ class PortRefs extends React.Component {
style={{
overflow: 'hidden',
position: 'relative',
- width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
diff --git a/src/pages/Ports.js b/src/pages/Ports.js
index 3186e41bd..856eb54bd 100644
--- a/src/pages/Ports.js
+++ b/src/pages/Ports.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- Ports example for mxGraph. This example demonstrates implementing
+ Ports. This example demonstrates implementing
ports as child vertices with relative positions and drag and drop
as well as the use of images and HTML in cells.
*/
@@ -11,7 +11,7 @@ import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
-class MYNAMEHERE extends React.Component {
+class Ports extends React.Component {
constructor(props) {
super(props);
}
@@ -39,7 +39,7 @@ class MYNAMEHERE extends React.Component {
};
}
-export default MYNAMEHERE;
+export default Ports;
diff --git a/src/pages/RadialTreeLayout.js b/src/pages/RadialTreeLayout.js
index 305052109..766e083cc 100644
--- a/src/pages/RadialTreeLayout.js
+++ b/src/pages/RadialTreeLayout.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2014, JGraph Ltd
- Hierarchical Layout example for mxGraph. This example demonstrates the
+ Hierarchical Layout. This example demonstrates the
use of the hierarchical and organic layouts. Note that the hierarchical
layout requires another script tag in the head of the page.
*/
@@ -22,7 +22,7 @@ class RadialTreeLayout extends React.Component {
// A container for the graph
return (
<>
-
Hierarchical Layout example for mxGraph
+
Hierarchical Layout
{
this.el = el;
@@ -31,7 +31,6 @@ class RadialTreeLayout extends React.Component {
position: 'relative',
overflow: 'auto',
height: '800px',
- width: '1000px',
borderTop: 'gray 1px solid',
}}
/>
diff --git a/src/pages/Resources.js b/src/pages/Resources.js
index edd23d8a3..2991df0cc 100644
--- a/src/pages/Resources.js
+++ b/src/pages/Resources.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2018, JGraph Ltd
- Resources example for mxGraph. This example demonstrates disabling the Synchronous
+ Resources. This example demonstrates disabling the Synchronous
XMLHttpRequest on main thread warning.
*/
@@ -20,7 +20,7 @@ class Resources extends React.Component {
// A container for the graph
return (
<>
-
Resources example for mxGraph
+
Resources
{
@@ -29,7 +29,6 @@ class Resources extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
- width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
diff --git a/src/pages/Schema.js b/src/pages/Schema.js
index 0ea3be700..b1c59b344 100644
--- a/src/pages/Schema.js
+++ b/src/pages/Schema.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- Schema example for mxGraph. This example demonstrates implementing
+ Schema. This example demonstrates implementing
a SQL schema editor.
*/
diff --git a/src/pages/Scrollbars.js b/src/pages/Scrollbars.js
index 835a93921..c525e2be8 100644
--- a/src/pages/Scrollbars.js
+++ b/src/pages/Scrollbars.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2015, JGraph Ltd
- Scrollbars example for mxGraph. This example demonstrates using
+ Scrollbars. This example demonstrates using
a scrollable table with different sections in a cell label.
*/
@@ -19,7 +19,7 @@ class MYNAMEHERE extends React.Component {
// A container for the graph
return (
<>
-
Scrollbars example for mxGraph
+
Scrollbars
{
diff --git a/src/pages/SecondLabel.js b/src/pages/SecondLabel.js
index 111d62baa..dcbab5832 100644
--- a/src/pages/SecondLabel.js
+++ b/src/pages/SecondLabel.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- Second label example for mxGraph. This example demonstrates how to
+ Second label. This example demonstrates how to
add another string label to vertices.
*/
@@ -23,7 +23,7 @@ class SecondLabel extends React.Component {
// A container for the graph
return (
<>
-
Second label example for mxGraph
+
Second label
{
@@ -32,11 +32,15 @@ class SecondLabel extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
- width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
}}
/>
+
{
+ this.el2 = el;
+ }}
+ />
);
}
@@ -221,21 +225,19 @@ class SecondLabel extends React.Component {
}
// Adds a button to execute the layout
- document.body.insertBefore(
+ this.el2.appendChild(
mxUtils.button('Toggle Child Vertices', function(evt) {
relativeChildVerticesVisible = !relativeChildVerticesVisible;
graph.refresh();
- }),
- document.body.firstChild
+ })
);
// Adds a button to execute the layout
- document.body.insertBefore(
+ this.el2.appendChild(
mxUtils.button('Toggle IDs', function(evt) {
secondLabelVisible = !secondLabelVisible;
graph.refresh();
- }),
- document.body.firstChild
+ })
);
}
}
diff --git a/src/pages/ServerView.js b/src/pages/ServerView.js
index e8d9cddce..74e300351 100644
--- a/src/pages/ServerView.js
+++ b/src/pages/ServerView.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- Server-View example for mxGraph. This example demonstrates using
+ Server-View. This example demonstrates using
a server-side image of the graph as the diagram in the client. This
may be used to improve drawing-speed in older browser and on devices
with slower processors.
diff --git a/src/pages/Shape.js b/src/pages/Shape.js
index bea4f83c4..f54a8478f 100644
--- a/src/pages/Shape.js
+++ b/src/pages/Shape.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- Shape example for mxGraph. This example demonstrates how to
+ Shape. This example demonstrates how to
implement and use a custom shape.
*/
@@ -20,7 +20,7 @@ class Shape extends React.Component {
// A container for the graph
return (
<>
-
Shape example for mxGraph
+
Shape
{
@@ -28,7 +28,6 @@ class Shape extends React.Component {
}}
style={{
overflow: 'hidden',
- width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
}}
diff --git a/src/pages/ShowRegion.js b/src/pages/ShowRegion.js
index 71acb87af..d84eb1879 100644
--- a/src/pages/ShowRegion.js
+++ b/src/pages/ShowRegion.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- Showregion example for mxGraph. This example demonstrates using a custom
+ Showregion. This example demonstrates using a custom
rubberband handler to show the selected region in a new window.
*/
@@ -9,6 +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 mxConstants from "../mxgraph/util/mxConstants";
+import mxPopupMenu from "../mxgraph/util/mxPopupMenu";
+import mxRectangle from "../mxgraph/util/mxRectangle";
+import mxUtils from "../mxgraph/util/mxUtils";
class MYNAMEHERE extends React.Component {
constructor(props) {
@@ -19,7 +23,7 @@ class MYNAMEHERE extends React.Component {
// A container for the graph
return (
<>
-
Showregion example for mxGraph
+
Showregion
{
@@ -90,7 +94,7 @@ export default MYNAMEHERE;
else
{
// Disables built-in context menu
- mxEvent.disableContextMenu(document.body);
+ mxEvent.disableContextMenu(this.el);
// Changes some default colors
mxConstants.HANDLE_FILLCOLOR = '#99ccff';
diff --git a/src/pages/Stencils.js b/src/pages/Stencils.js
index c22ae8779..d107c57fd 100644
--- a/src/pages/Stencils.js
+++ b/src/pages/Stencils.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- Stencils example for mxGraph. This example demonstrates using
+ Stencils. This example demonstrates using
an XML file to define new stencils to be used as shapes. See
docs/stencils.xsd for the XML schema file.
*/
@@ -31,7 +31,7 @@ class Stencils extends React.Component {
// A container for the graph
return (
<>
-
Stencils example for mxGraph
+
Stencils
{
this.el = el;
@@ -39,7 +39,6 @@ class Stencils extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
- width: '601px',
height: '401px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
diff --git a/src/pages/Stylesheet.js b/src/pages/Stylesheet.js
index 68bd3456c..f0d9715c3 100644
--- a/src/pages/Stylesheet.js
+++ b/src/pages/Stylesheet.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- Stylesheet example for mxGraph. This example demonstrates using
+ Stylesheet. This example demonstrates using
a custom stylesheet and control points in edges, as well as
overriding the getLabel and getTooltip function to return
dynamic information, and making a supercall in JavaScript.
@@ -22,7 +22,7 @@ class Stylesheet extends React.Component {
// A container for the graph
return (
<>
-
Stylesheet example for mxGraph
+
Stylesheet
{
this.el = el;
@@ -30,7 +30,6 @@ class Stylesheet extends React.Component {
style={{
overflow: 'hidden',
position: 'relative',
- width: '621px',
height: '311px',
cursor: 'default',
}}
diff --git a/src/pages/SwimLanes.js b/src/pages/SwimLanes.js
index b43ea992c..9d247d425 100644
--- a/src/pages/SwimLanes.js
+++ b/src/pages/SwimLanes.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- Swimlanes example for mxGraph. This example demonstrates using
+ Swimlanes. This example demonstrates using
swimlanes for pools and lanes and adding cells and edges between
them. This also demonstrates using the stack layout as an
automatic layout.
@@ -33,8 +33,7 @@ class SwimLanes extends React.Component {
// A container for the graph
return (
<>
-
Swimlanes example for mxGraph
-
+
Swimlanes
{
this.el = el;
@@ -42,7 +41,6 @@ class SwimLanes extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
- width: '600px',
height: '400px',
border: 'gray dotted 1px',
cursor: 'default',
diff --git a/src/pages/Template.js b/src/pages/Template.js
index d96bcdbe5..2f4b11e6c 100644
--- a/src/pages/Template.js
+++ b/src/pages/Template.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- Template example for mxGraph. This is used as a template HTML file by the
+ Template. This is used as a template HTML file by the
backends to demonstrate the deployment of the client with a graph embedded
in the page as XML data (see graph variable in the onload-handler).
@@ -31,7 +31,6 @@ class Template extends React.Component {
style={{
overflow: 'hidden',
position: 'relative',
- width: '321px',
height: '241px',
background: "url('/mxgraph/javascript/examples/editors/images/grid.gif')",
cursor: 'default'
diff --git a/src/pages/Thread.js b/src/pages/Thread.js
index 916cafd2c..cb0dcd75a 100644
--- a/src/pages/Thread.js
+++ b/src/pages/Thread.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- Thread example for mxGraph. This example demonstrates setting
+ Thread. This example demonstrates setting
overlays in mxGraph from within a timed function.
*/
@@ -17,14 +17,13 @@ class Thread extends React.Component {
// A container for the graph
return (
<>
-
Thread example for mxGraph
+
Thread
{
this.el = el;
}}
style={{
overflow: 'hidden',
- width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
}}
diff --git a/src/pages/Toolbar.js b/src/pages/Toolbar.js
index dc6614f6f..534dd4b51 100644
--- a/src/pages/Toolbar.js
+++ b/src/pages/Toolbar.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- Toolbar example for mxGraph. This example demonstrates using
+ Toolbar. This example demonstrates using
existing cells as templates for creating new cells.
*/
@@ -27,7 +27,7 @@ class Toolbar extends React.Component {
// A container for the graph
return (
<>
-
Toolbar example for mxGraph
+
Toolbar
{
@@ -36,12 +36,16 @@ class Toolbar extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
- width: '600px',
height: '400px',
border: 'gray dotted 1px',
cursor: 'default',
}}
/>
+
{
+ this.el2 = el;
+ }}
+ />
);
}
@@ -160,11 +164,7 @@ class Toolbar extends React.Component {
}
);
- button.style.position = 'absolute';
- button.style.left = '2px';
- button.style.top = '2px';
-
- document.body.appendChild(button);
+ this.el2.appendChild(button);
}
addToolbarItem(graph, toolbar, prototype, image) {
diff --git a/src/pages/Touch.js b/src/pages/Touch.js
index 871d81eea..8a4ce36f2 100644
--- a/src/pages/Touch.js
+++ b/src/pages/Touch.js
@@ -2,7 +2,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- Touch example for mxGraph. This example demonstrates handling of touch,
+ Touch. This example demonstrates handling of touch,
mouse and pointer events.
*/
@@ -20,7 +20,7 @@ class MYNAMEHERE extends React.Component {
// A container for the graph
return (
<>
-
Touch example for mxGraph
+
Touch
{
diff --git a/src/pages/Tree.js b/src/pages/Tree.js
index 3e2d64521..ed1273216 100644
--- a/src/pages/Tree.js
+++ b/src/pages/Tree.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
- * Tree example for mxGraph. This example demonstrates folding
+ * Tree. This example demonstrates folding
* of subtrees in a acyclic graph (tree).
*/
@@ -30,7 +30,7 @@ class Tree extends React.Component {
// A container for the graph
return (
<>
-
Tree example for mxGraph
+
Tree
{
@@ -39,7 +39,6 @@ class Tree extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
- width: '500px',
height: '400px',
background: "url('editors/images/grid.gif')",
cursor: 'default'
diff --git a/src/pages/UIConfig.js b/src/pages/UIConfig.js
index 53b6bb1c0..3187b8fe4 100644
--- a/src/pages/UIConfig.js
+++ b/src/pages/UIConfig.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- UIConfig example for mxGraph. This example demonstrates using a config
+ UIConfig. This example demonstrates using a config
file to configure the toolbar and popup menu in mxEditor.
*/
diff --git a/src/pages/UserObject.js b/src/pages/UserObject.js
index 6206551f3..3d3c31950 100644
--- a/src/pages/UserObject.js
+++ b/src/pages/UserObject.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
- User object example for mxGraph. This example demonstrates using
+ User object. This example demonstrates using
XML objects as values for cells.
*/
@@ -26,7 +26,7 @@ class UserObject extends React.Component {
// A container for the graph
return (
<>
-
User object example for mxGraph
+
User object
+
+
{this.el2 = el;}}
+ />
);
}
@@ -179,7 +182,7 @@ class UserObject extends React.Component {
new mxRubberband(graph);
// Adds an option to view the XML of the graph
- document.body.appendChild(
+ this.el2.appendChild(
mxUtils.button('View XML', function() {
const encoder = new mxCodec();
const node = encoder.encode(graph.getModel());
diff --git a/src/pages/Validation.js b/src/pages/Validation.js
index 88bb7fae6..a03143b9e 100644
--- a/src/pages/Validation.js
+++ b/src/pages/Validation.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
- * Validation example for mxGraph. This example demonstrates using
+ * Validation. This example demonstrates using
* multiplicities for automatically validating a graph.
*/
@@ -23,7 +23,7 @@ class Validation extends React.Component {
// A container for the graph
return (
<>
-
Validation example for mxGraph
+
Validation
{
@@ -32,7 +32,6 @@ class Validation extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
- width: '321px',
height: '281px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
diff --git a/src/pages/Visibility.js b/src/pages/Visibility.js
index 886ccf349..bd677409c 100644
--- a/src/pages/Visibility.js
+++ b/src/pages/Visibility.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
- * Visible example for mxGraph. This example demonstrates using
+ * Visible. This example demonstrates using
* various solutions for hiding and showing cells.
*/
@@ -19,7 +19,7 @@ class Visibility extends React.Component {
// A container for the graph
return (
<>
-
Visibility example for mxGraph
+
Visibility
{
this.el = el;
@@ -27,12 +27,16 @@ class Visibility extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
- width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
+
{
+ this.el2 = el;
+ }}
+ />
);
}
@@ -79,19 +83,19 @@ class Visibility extends React.Component {
}
// Dynamic conditions (requires refresh)
- document.body.appendChild(
+ this.el2.appendChild(
mxUtils.button('Cond 1', function() {
showOne = !showOne;
graph.refresh();
})
);
- document.body.appendChild(
+ this.el2.appendChild(
mxUtils.button('Cond 2', function() {
showTwo = !showTwo;
graph.refresh();
})
);
- document.body.appendChild(
+ this.el2.appendChild(
mxUtils.button('Cond 3', function() {
showThree = !showThree;
graph.refresh();
@@ -99,7 +103,7 @@ class Visibility extends React.Component {
);
// Explicit show/hide
- document.body.appendChild(
+ this.el2.appendChild(
mxUtils.button('Toggle cell', function() {
graph.toggleCells(!graph.getModel().isVisible(v1), [v1], true);
})
@@ -108,7 +112,7 @@ class Visibility extends React.Component {
// Explicit remove/add
let removed = null;
- document.body.appendChild(
+ this.el2.appendChild(
mxUtils.button('Add/remove cell', function() {
if (removed != null) {
graph.addCells(removed);
diff --git a/src/pages/Windows.js b/src/pages/Windows.js
index 3835d6664..d5cc1d685 100644
--- a/src/pages/Windows.js
+++ b/src/pages/Windows.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
- * Windows example for mxGraph. This example demonstrates using
+ * Windows. This example demonstrates using
* the mxWindow class for displaying windows.
*/
@@ -23,7 +23,7 @@ class Windows extends React.Component {
// A container for the graph
return (
<>
-
Windows example for mxGraph
+
Windows
{
this.el = el;
@@ -31,7 +31,6 @@ class Windows extends React.Component {
style={{
overflow: 'auto',
position: 'relative',
- width: '500px',
height: '500px',
background: 'lightyellow',
cursor: 'default',
diff --git a/src/pages/Wrapping.js b/src/pages/Wrapping.js
index c5611ab6f..1bc3d251e 100644
--- a/src/pages/Wrapping.js
+++ b/src/pages/Wrapping.js
@@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
- * Wrapping example for mxGraph. This example demonstrates using HTML markup and
+ * Wrapping. This example demonstrates using HTML markup and
* word-wrapping in vertex and edge labels.
*/
@@ -17,7 +17,7 @@ class Wrapping extends React.Component {
// A container for the graph
return (
<>
-
Wrapping example for mxGraph
+
Wrapping
{
@@ -26,7 +26,6 @@ class Wrapping extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
- width: '341px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',