zcy
/
maxGraph
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adjusted width, titles and positioning of examples

development
mcyph 2021-03-25 14:59:23 +11:00
parent 59a87efb7a
commit 5ccac7f32d
79 changed files with 250 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/Anchors.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Anchors example for mxGraph. This example demonstrates defining
* Anchors. This example demonstrates defining
* fixed connection points for all shapes.
*/
@ -98,7 +98,7 @@ class Anchors extends React.Component {
// A container for the graph
return (
<>
<h1>Anchors example for mxGraph</h1>
<h1>Anchors</h1>
<div
ref={el => {
this.el = el;
@ -106,7 +106,6 @@ class Anchors extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: 'url("editors/images/grid.gif")',
cursor: 'default',

5
src/pages/Animation.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2017, JGraph Ltd
*
* Animation example for mxGraph. This example demonstrates using
* Animation. This example demonstrates using
* SVG animations on edges to visualize the flow in a pipe.
*/
@ -18,7 +18,7 @@ class Animation extends React.Component {
// A container for the graph
return (
<>
<h1>Animation example for mxGraph</h1>
<h1>Animation</h1>
<div
ref={el => {
@ -27,7 +27,6 @@ class Animation extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: 'url("editors/images/grid.gif")',
cursor: 'default',

5
src/pages/AutoLayout.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Autolayout example for mxGraph. This example demonstrates running
* Autolayout. This example demonstrates running
* and animating a layout algorithm after every change to a graph.
*/
@ -29,7 +29,7 @@ class AutoLayout extends React.Component {
// A this.el for the graph
return (
<>
<h1>Auto layout example for mxGraph</h1>
<h1>Auto layout</h1>
<div
ref={el => {
this.el = el;
@ -37,7 +37,6 @@ class AutoLayout extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '821px',
height: '641px',
background: 'url("editors/images/grid.gif")',
cursor: 'default',

5
src/pages/Boundary.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Boundary example for mxGraph. This example demonstrates
* Boundary. This example demonstrates
* implementing boundary events in BPMN diagrams.
*/
@ -23,7 +23,7 @@ class Boundary extends React.Component {
// A this.el for the graph
return (
<>
<h1>Boundary example for mxGraph</h1>
<h1>Boundary</h1>
<div
ref={el => {
@ -32,7 +32,6 @@ class Boundary extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: 'url("editors/images/grid.gif")',
cursor: 'default'

5
src/pages/Clipboard.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Clipboard example for mxGraph. This example demonstrates using the
* Clipboard. This example demonstrates using the
* clipboard for providing cross-tab and cross-browser copy and paste.
*/
@ -24,7 +24,7 @@ class Clipboard extends React.Component {
// A this.el for the graph
return (
<>
<h1>Clipboard example for mxGraph</h1>
<h1>Clipboard</h1>
<div
ref={el => {
@ -33,7 +33,6 @@ class Clipboard extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

4
src/pages/Codec.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Codec example for mxGraph. This example demonstrates dynamically
* Codec. This example demonstrates dynamically
* creating a graph from XML and encoding the model into XML, as well
* as changing the default style for edges in-place.
*/
@ -23,7 +23,7 @@ class MYNAMEHERE extends React.Component {
// Contains a graph description which will be converted
return (
<>
<h1>Codec example for mxGraph</h1>
<h1>Codec</h1>
This graph is embedded in the page.
<div className="mxgraph" style="position:relative;overflow:auto;">&lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell

5
src/pages/Collapse.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Collapse example for mxGraph. This example demonstrates changing
* Collapse. This example demonstrates changing
* the style of a cell based on its collapsed state.
*/
@ -18,7 +18,7 @@ class Collapse extends React.Component {
// A container for the graph
return (
<>
<h1>Collapse example for mxGraph</h1>
<h1>Collapse</h1>
<div
ref={el => {
@ -27,7 +27,6 @@ class Collapse extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

5
src/pages/Constituent.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Consistuent example for mxGraph. This example demonstrates using
* Consistuent. This example demonstrates using
* cells as parts of other cells.
*/
@ -21,7 +21,7 @@ class Constituent extends React.Component {
// A container for the graph
return (
<>
<h1>Consistuent example for mxGraph</h1>
<h1>Consistuent</h1>
<div
ref={el => {
@ -30,7 +30,6 @@ class Constituent extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: 'url("editors/images/grid.gif")',
cursor: 'default',

5
src/pages/ContextIcons.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Context icons example for mxGraph. This example demonstrates adding
* Context icons. This example demonstrates adding
* icons to selected vertices to carry out special operations.
*/
@ -22,14 +22,13 @@ class ContextIcons extends React.Component {
// A container for the graph
return (
<>
<h1>Context icons example for mxGraph</h1>
<h1>Context icons</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

5
src/pages/Control.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Control example for mxGraph. This example demonstrates adding
* Control. This example demonstrates adding
* controls to specific cells in a graph.
*/
@ -24,14 +24,13 @@ class Control extends React.Component {
// A container for the graph
return (
<>
<h1>Control example for mxGraph</h1>
<h1>Control</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
width: '621px',
height: '441px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

4
src/pages/DragSource.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Dragsource example for mxGraph. This example demonstrates using
* Dragsource. This example demonstrates using
* one drag source for multiple graphs and changing the drag icon.
*/
@ -26,7 +26,7 @@ class DragSource extends React.Component {
// A container for the graph
return (
<>
<h1>Dragsource example for mxGraph</h1>
<h1>Dragsource</h1>
<div
ref={el => {

5
src/pages/Drop.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Drop example for mxGraph. This example demonstrates handling
* Drop. This example demonstrates handling
* native drag and drop of images (requires modern browser).
*/
@ -21,7 +21,7 @@ class Drop extends React.Component {
// A this.el for the graph
return (
<>
<h1>Drop example for mxGraph</h1>
<h1>Drop</h1>
<div
ref={el => {
@ -30,7 +30,6 @@ class Drop extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '621px',
height: '441px',
background: `url('editors/images/grid.gif')`,
cursor: 'default',

5
src/pages/DynamicLoading.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Dynamic loading example for mxGraph. This example demonstrates loading
* Dynamic loading. This example demonstrates loading
* graph model data dynamically to limit the number of cells in the model.
*/
@ -24,7 +24,7 @@ class DynamicLoading extends React.Component {
// A container for the graph
return (
<>
<h1>Dynamic loading example for mxGraph</h1>
<h1>Dynamic loading</h1>
<div
ref={el => {
@ -33,7 +33,6 @@ class DynamicLoading extends React.Component {
style={{
overflow: 'visible',
position: 'absolute',
width: '100%',
height: '100%',
background: "url('editors/images/grid.gif')",
cursor: 'default',

5
src/pages/DynamicStyle.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Dynamic Style example for mxGraph. This example demonstrates changing
* Dynamic Style. This example demonstrates changing
* the style of a cell dynamically by overriding mxGraphModel.getStyle.
*/
@ -20,7 +20,7 @@ class DynamicStyle extends React.Component {
// A container for the graph
return (
<>
<h1>Dynamic Style example for mxGraph</h1>
<h1>Dynamic Style</h1>
<div
ref={el => {
@ -28,7 +28,6 @@ class DynamicStyle extends React.Component {
}}
style={{
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
}}

5
src/pages/DynamicToolbar.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Dynamic toolbar example for mxGraph. This example demonstrates changing the
* Dynamic toolbar. This example demonstrates changing the
* state of the toolbar at runtime.
*/
@ -27,7 +27,7 @@ class DynamicToolbar extends React.Component {
// A container for the graph
return (
<>
<h1>Toolbar example for mxGraph</h1>
<h1>Toolbar</h1>
<div
ref={el => {
@ -35,7 +35,6 @@ class DynamicToolbar extends React.Component {
}}
style={{
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
position: "relative"

5
src/pages/EdgeTolerance.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Edge tolerance example for mxGraph. This example demonstrates increasing
* Edge tolerance. This example demonstrates increasing
* the tolerance for hit detection on edges.
*/
@ -19,14 +19,13 @@ class EdgeTolerance extends React.Component {
// A container for the graph
return (
<>
<h1>Edge tolerance example for mxGraph</h1>
<h1>Edge tolerance</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
width: '641px',
height: '481px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

5
src/pages/Editing.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Editing example for mxGraph. This example demonstrates using the in-place
* Editing. This example demonstrates using the in-place
* editor trigger to specify the editing value and write the new value into
* a specific field of the user object. Wrapping and DOM nodes as labels are
* also demonstrated here.
@ -22,7 +22,7 @@ class Editing extends React.Component {
// A container for the graph
return (
<>
<h1>Editing example for mxGraph</h1>
<h1>Editing</h1>
Double-click the upper/lower half of the cell to edit different fields
of the user object.
<div
@ -32,7 +32,6 @@ class Editing extends React.Component {
style={{
overflow: 'hidden',
position: 'relative',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
}}

4
src/pages/Events.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Events example for mxGraph. This example demonstrates creating
* Events. This example demonstrates creating
* a graph container and using the mxDivResizer to update the size,
* interaction on the graph, including marquee selection, custom
* tooltips, context menu handling and changing the default menu
@ -33,7 +33,7 @@ class Events extends React.Component {
// A container for the graph
return (
<>
<h1>Events example for mxGraph</h1>
<h1>Events</h1>
<div
ref={el => {

5
src/pages/ExtendCanvas.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Extend canvas example for mxGraph. This example demonstrates implementing
* Extend canvas. This example demonstrates implementing
* an infinite canvas with scrollbars.
*/
@ -22,7 +22,7 @@ class ExtendCanvas extends React.Component {
// A container for the graph
return (
<>
<h1>Extend canvas example for mxGraph</h1>
<h1>Extend canvas</h1>
<div
ref={el => {
@ -31,7 +31,6 @@ class ExtendCanvas extends React.Component {
style={{
position: 'relative',
overflow: 'auto',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

18
src/pages/FileIO.js
View File

@ -1,7 +1,7 @@
/**
*Copyright (c) 2006-2013, JGraph Ltd
*
* File I/O example for mxGraph. This example demonstrates reading an
* File I/O. This example demonstrates reading an
* XML file, writing a custom parser, applying an automatic layout and
* defining a 2-way edge.
*/
@ -27,21 +27,23 @@ class FileIO extends React.Component {
// A container for the graph
return (
<>
<h1>File I/O example for mxGraph</h1>
<h1>File I/O</h1>
<div
ref={el => {
this.el = el;
}}
style={{
position: 'absolute',
position: 'relative',
overflow: 'auto',
top: '36px',
bottom: '0px',
left: '0px',
right: '0px',
height: '80vh',
borderTop: 'gray 1px solid',
}}
/>
<div
ref={el => {
this.el2 = el;
}}
/>
</>
);
};
@ -98,7 +100,7 @@ class FileIO extends React.Component {
layout.forceConstant = 140;
// Adds a button to execute the layout
document.body.appendChild(
this.el2.appendChild(
mxUtils.button('Arrange', function(evt) {
const parent = graph.getDefaultParent();
layout.execute(parent);

5
src/pages/FixedIcon.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
FixedIcon example for mxGraph. This example demonstrates
FixedIcon. This example demonstrates
customizing the icon position in the mxLabel shape.
*/
@ -23,7 +23,7 @@ class FixedIcon extends React.Component {
// A container for the graph
return (
<>
<h1>Fixed icon example for mxGraph</h1>
<h1>Fixed icon</h1>
<div
ref={el => {
this.el = el;
@ -31,7 +31,6 @@ class FixedIcon extends React.Component {
style={{
overflow: 'hidden',
position: 'relative',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

5
src/pages/FixedPoints.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Fixed points example for mxGraph. This example demonstrates using
Fixed points. This example demonstrates using
fixed connection points for connecting edges to vertices.
*/
@ -25,7 +25,7 @@ class FixedPoints extends React.Component {
// A container for the graph
return (
<>
<h1>Fixed points example for mxGraph</h1>
<h1>Fixed points</h1>
<div
ref={el => {
@ -34,7 +34,6 @@ class FixedPoints extends React.Component {
style={{
overflow: 'hidden',
position: 'relative',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

5
src/pages/Folding.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Folding example for mxGraph. This example demonstrates
* Folding. This example demonstrates
* using a layout to implement a nested group structure.
*/
@ -21,7 +21,7 @@ class Folding extends React.Component {
// A container for the graph
return (
<>
<h1>Folding example for mxGraph</h1>
<h1>Folding</h1>
<div
ref={el => {
this.el = el;
@ -29,7 +29,6 @@ class Folding extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

8
src/pages/GraphLayout.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Graphlayout example for mxGraph. This example demonstrates using
Graphlayout. This example demonstrates using
automatic graph layouts and listening to changes of the graph size
to keep the container size in sync.
*/
@ -10,6 +10,8 @@ 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 mxCircleLayout from "../mxgraph/layout/mxCircleLayout";
class MYNAMEHERE extends React.Component {
constructor(props) {
@ -20,7 +22,7 @@ class MYNAMEHERE extends React.Component {
// A container for the graph
return (
<>
<h1>Graphlayout example for mxGraph</h1>
<h1>Graphlayout</h1>
<div
ref={el => {
@ -94,7 +96,7 @@ export default MYNAMEHERE;
let animate = document.getElementById('animate');
// Adds a button to execute the layout
document.body.insertBefore(mxUtils.button('Circle Layout',
this.el2.insertBefore(mxUtils.button('Circle Layout',
function(evt)
{
graph.getModel().beginUpdate();

7
src/pages/Grid.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Grid example for mxGraph. This example demonstrates drawing
Grid. This example demonstrates drawing
a grid dynamically using HTML 5 canvas.
*/
@ -23,14 +23,13 @@ class Grid extends React.Component {
// A container for the graph
return (
<>
<h1>Grid example for mxGraph</h1>
<h1>Grid</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
width: '641px',
height: '481px',
cursor: 'default',
}}
@ -45,7 +44,7 @@ class Grid extends React.Component {
}
componentDidMount() {
mxEvent.disableContextMenu(document.body);
mxEvent.disableContextMenu(this.el);
// Creates the graph inside the given container
const graph = new mxGraph(this.el);

5
src/pages/Groups.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Groups example for mxGraph. This example demonstrates using
Groups. This example demonstrates using
cells as parts of other cells.
*/
@ -20,14 +20,13 @@ class Groups extends React.Component {
// A container for the graph
return (
<>
<h1>Hello, World! example for mxGraph</h1>
<h1>Hello, World!</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

5
src/pages/Guides.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Guides example for mxGraph. This example demonstrates the guides
Guides. This example demonstrates the guides
feature which aligns the current selection to the existing vertices
in the graph. This feature is in RFC state. Creating a grid using
a canvas and installing a key handler for cursor keys is also
@ -27,14 +27,13 @@ class Guides extends React.Component {
// A container for the graph
return (
<>
<h1>Guides example for mxGraph</h1>
<h1>Guides</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
width: '801px',
height: '601px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

14
src/pages/Handles.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2014, JGraph Ltd
Handles example for mxGraph. This example demonstrates using mxHandle to change custom styles interactively.
Handles. This example demonstrates using mxHandle to change custom styles interactively.
*/
import React from 'react';
@ -25,7 +25,7 @@ class Handles extends React.Component {
// A container for the graph
return (
<>
<h1>Handles example for mxGraph</h1>
<h1>Handles</h1>
<div
ref={el => {
this.el = el;
@ -33,12 +33,16 @@ class Handles extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '621px',
height: '441px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
<div
ref={el => {
this.el2 = el;
}}
/>
</>
);
}
@ -258,12 +262,12 @@ class Handles extends React.Component {
graph.getModel().endUpdate();
}
document.body.appendChild(
this.el2.appendChild(
mxUtils.button('+', function() {
graph.zoomIn();
})
);
document.body.appendChild(
this.el2.appendChild(
mxUtils.button('-', function() {
graph.zoomOut();
})

5
src/pages/HelloPort.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Hello, World! example for mxGraph. This example demonstrates using
Hello, World!. This example demonstrates using
the isPort hook for visually connecting to another cell.
*/
@ -24,14 +24,13 @@ class HelloPort extends React.Component {
// A container for the graph
return (
<>
<h1>Hello, World! example for mxGraph</h1>
<h1>Hello, World!</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

5
src/pages/HelloWorld.js
View File

@ -2,7 +2,7 @@
* Copyright (c) 2006-2018, JGraph Ltd
* Converted to ES9 syntax/React by David Morrissey 2021
*
* Hello, World! example for mxGraph. This example demonstrates using
* Hello, World!. This example demonstrates using
* a DOM node to create a graph and adding vertices and edges.
*/
@ -20,7 +20,7 @@ class HelloWorld extends React.Component {
// A container for the graph with a grid wallpaper
return (
<>
<h1>Hello, World! example for mxGraph</h1>
<h1>Hello, World!</h1>
<div
ref={el => {
@ -29,7 +29,6 @@ class HelloWorld extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

13
src/pages/HierarchicalLayout.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, 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.
*/
@ -25,7 +25,7 @@ class HierarchicalLayout extends React.Component {
// A container for the graph
return (
<>
<h1>Hierarchical Layout example for mxGraph</h1>
<h1>Hierarchical Layout</h1>
<div
ref={el => {
this.el = el;
@ -40,6 +40,11 @@ class HierarchicalLayout extends React.Component {
borderTop: 'gray 1px solid',
}}
/>
<div
ref={el => {
this.el2 = el;
}}
/>
</>
);
}
@ -76,7 +81,7 @@ class HierarchicalLayout extends React.Component {
mxEvent.addListener(button, 'click', function(evt) {
layout.execute(parent);
});
document.body.appendChild(button);
this.el2.appendChild(button);
// Adds a button to execute the layout
button = document.createElement('button');
@ -86,7 +91,7 @@ class HierarchicalLayout extends React.Component {
organic.execute(parent);
});
document.body.appendChild(button);
this.el2.appendChild(button);
// Load cells and layouts the graph
graph.getModel().beginUpdate();

5
src/pages/HoverIcons.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Hover icons example for mxGraph. This example demonstrates showing
Hover icons. This example demonstrates showing
icons on vertices as mouse hovers over them.
*/
@ -23,7 +23,7 @@ class HoverIcons extends React.Component {
// A container for the graph
return (
<>
<h1>Hover icons example for mxGraph</h1>
<h1>Hover icons</h1>
<div
ref={el => {
@ -31,7 +31,6 @@ class HoverIcons extends React.Component {
}}
style={{
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

5
src/pages/HoverStyle.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Hoverstyle example for mxGraph. This example shows hot to change
Hoverstyle. This example shows hot to change
the style of a vertex on mouseover.
*/
@ -20,7 +20,7 @@ class HoverStyle extends React.Component {
// A container for the graph
return (
<>
<h1>Hoverstyle example for mxGraph</h1>
<h1>Hoverstyle</h1>
<div
ref={el => {
this.el = el;
@ -28,7 +28,6 @@ class HoverStyle extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

4
src/pages/HtmlLabel.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
HTML label example for mxGraph. This example demonstrates using
HTML label. This example demonstrates using
HTML labels that are connected to the state of the user object.
*/
@ -19,7 +19,7 @@ class MYNAMEHERE extends React.Component {
// A container for the graph
return (
<>
<h1>HTML label example for mxGraph</h1>
<h1>HTML label</h1>
<div
ref={el => {

5
src/pages/Images.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Images example for mxGraph. This example demonstrates using
Images. This example demonstrates using
background images and images for for the label- and image-shape.
*/
@ -24,7 +24,7 @@ class Images extends React.Component {
// A container for the graph
return (
<>
<h1>Images example for mxGraph</h1>
<h1>Images</h1>
<div
ref={el => {
this.el = el;
@ -32,7 +32,6 @@ class Images extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '360px',
height: '200px',
cursor: 'default',
}}

4
src/pages/Indicators.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Indicators example for mxGraph. This example demonstrates the use of
Indicators. This example demonstrates the use of
indicators, which are small subshapes inside a parent shape, typically
an mxLabel.
*/
@ -21,7 +21,7 @@ class Indicators extends React.Component {
// A container for the graph
return (
<>
<h1>Indicators example for mxGraph</h1>
<h1>Indicators</h1>
<div
ref={el => {
this.el = el;

2
src/pages/JQuery.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
JQuery example for mxGraph. This example demonstrates using
JQuery. This example demonstrates using
a JQuery plugin to generate labels for vertices on the fly.
*/

5
src/pages/JsonData.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
JSON data example for mxGraph. This example demonstrates using
JSON data. This example demonstrates using
JSON to encode/decode parts of the graph model in mxCodec.
*/
@ -30,7 +30,7 @@ class JsonData extends React.Component {
// A container for the graph
return (
<>
<h1>JSON data example for mxGraph</h1>
<h1>JSON data</h1>
<div
ref={el => {
this.el = el;
@ -38,7 +38,6 @@ class JsonData extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

5
src/pages/LOD.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Level of detail example for mxGraph. This example demonstrates
Level of detail. This example demonstrates
implementing a level of detail per cell.
*/
@ -18,7 +18,7 @@ class LOD extends React.Component {
// A container for the graph
return (
<>
<h1>Level of detail example for mxGraph</h1>
<h1>Level of detail</h1>
<div
ref={el => {
this.el = el;
@ -26,7 +26,6 @@ class LOD extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '621px',
height: '441px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

4
src/pages/LabelPosition.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Label Position example for mxGraph. This example demonstrates the use of the
Label Position. This example demonstrates the use of the
label position styles to set the position of vertex labels.
*/
@ -17,7 +17,7 @@ class LabelPosition extends React.Component {
// A container for the graph
return (
<>
<h1>Label Position example for mxGraph</h1>
<h1>Label Position</h1>
<div
ref={el => {
this.el = el;

11
src/pages/Labels.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Labels example for mxGraph. This example demonstrates the use of wrapping
Labels. This example demonstrates the use of wrapping
and clipping for HTML labels of vertices, truncating labels to fit the
size of a vertex, and manually placing vertex labels and relative children
that act as "sublabels".
@ -23,18 +23,15 @@ class Labels extends React.Component {
// A container for the graph
return (
<>
<h1>Hello, World! example for mxGraph</h1>
<h1>Hello, World!</h1>
<div
ref={el => {
this.el = el;
}}
style={{
position: 'absolute',
top: '0px',
left: '0px',
position: 'relative',
overflow: 'hidden',
width: '100%',
height: '100%',
height: '300px',
background: "url('editors/images/grid.gif')",
}}
/>

14
src/pages/Layers.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Layers example for mxGraph. This example demonstrates using
Layers. This example demonstrates using
multiple layers to contain cells.
*/
@ -21,7 +21,7 @@ class Layers extends React.Component {
// A container for the graph
return (
<>
<h1>Layers example for mxGraph</h1>
<h1>Layers</h1>
<div
ref={el => {
this.el = el;
@ -29,11 +29,15 @@ class Layers extends React.Component {
style={{
overflow: 'hidden',
position: 'relative',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
}}
/>
<div
ref={el => {
this.el2 = el;
}}
/>
</>
);
}
@ -114,13 +118,13 @@ class Layers extends React.Component {
model.endUpdate();
}
document.body.appendChild(
this.el2.appendChild(
mxUtils.button('Layer 0', function() {
model.setVisible(layer0, !model.isVisible(layer0));
})
);
document.body.appendChild(
this.el2.appendChild(
mxUtils.button('Layer 1', function() {
model.setVisible(layer1, !model.isVisible(layer1));
})

4
src/pages/Map.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Map example for mxGraph. This example demonstrates using
Map. This example demonstrates using
a graph container as a Google Maps overlay.
*/
@ -19,7 +19,7 @@ class MYNAMEHERE extends React.Component {
// A container for the graph
return (
<>
<h1>Google maps example for mxGraph</h1>
<h1>Google maps</h1>
<div
ref={el => {

5
src/pages/Markers.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Markers example for mxGraph. This example demonstrates creating
Markers. This example demonstrates creating
custom markers and customizing the built-in markers.
*/
@ -24,7 +24,7 @@ class Markers extends React.Component {
// A container for the graph
return (
<>
<h1>Markers example for mxGraph</h1>
<h1>Markers</h1>
<div
ref={el => {
this.el = el;
@ -32,7 +32,6 @@ class Markers extends React.Component {
style={{
overflow: 'hidden',
position: 'relative',
width: '641px',
height: '381px',
border: '1px solid gray',
cursor: 'default',

4
src/pages/MenuStyle.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Menustyle example for mxGraph. This example demonstrates using
Menustyle. This example demonstrates using
CSS to style the mxPopupMenu.
*/
@ -19,7 +19,7 @@ class MYNAMEHERE extends React.Component {
// A container for the graph
return (
<>
<h1>Menustyle example for mxGraph</h1>
<h1>Menustyle</h1>
<div
ref={el => {

4
src/pages/Merge.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Merge example for mxGraph. This example demonstrates using
Merge. This example demonstrates using
the mergeChildren function to merge two graphs.
*/
@ -20,7 +20,7 @@ class Merge extends React.Component {
// A container for the graph
return (
<>
<h1>Merge example for mxGraph</h1>
<h1>Merge</h1>
<div
ref={el => {
this.el = el;

10
src/pages/Monitor.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Monitor example for mxGraph. This eample demonstrates using a
Monitor. This eample demonstrates using a
graph to display the current state of a workflow.
*/
@ -32,11 +32,15 @@ class Monitor extends React.Component {
style={{
overflow: 'hidden',
position: 'relative',
width: '861px',
height: '406px',
cursor: 'default',
}}
/>
<div
ref={el => {
this.el2 = el;
}}
/>
</>
);
}
@ -92,7 +96,7 @@ class Monitor extends React.Component {
codec.decode(doc.documentElement, graph.getModel());
// Creates a button to invoke the refresh function
document.body.appendChild(
this.el2.appendChild(
mxUtils.button('Update', function(evt) {
// XML is normally fetched from URL at server using mxUtils.get - this is a client-side
// string with randomized states to demonstrate the idea of the workflow monitor

12
src/pages/Morph.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Morph example for mxGraph. This example demonstrates using
Morph. This example demonstrates using
mxMorphing for simple cell animations.
*/
@ -21,7 +21,7 @@ class Morph extends React.Component {
// A container for the graph
return (
<>
<h1>Hello, World! example for mxGraph</h1>
<h1>Hello, World!</h1>
<div
ref={el => {
this.el = el;
@ -29,12 +29,16 @@ class Morph extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
<div
ref={el => {
this.el2 = el;
}}
/>
</>
);
}
@ -68,7 +72,7 @@ class Morph extends React.Component {
let mult = 1;
document.body.appendChild(
this.el2.appendChild(
mxUtils.button('Morph', function() {
graph.clearSelection();

4
src/pages/OffPage.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Offpage example for mxGraph. This example demonstrates creating
Offpage. This example demonstrates creating
offpage connectors in a graph and loading a new diagram on a
single click.
*/
@ -22,7 +22,7 @@ class OffPage extends React.Component {
// A container for the graph
return (
<>
<h1>Offpage connector example for mxGraph</h1>
<h1>Offpage connector</h1>
<div
ref={el => {

4
src/pages/OrgChart.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Orgchart example for mxGraph. This example demonstrates using
Orgchart. This example demonstrates using
automatic layouts, fit to page zoom and poster print (across
multiple pages).
*/
@ -34,7 +34,7 @@ class OrgChart extends React.Component {
// A container for the graph
return (
<>
<h1>Orgchart example for mxGraph</h1>
<h1>Orgchart</h1>
<div
ref={el => {
this.el = el;

5
src/pages/Orthogonal.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Orthogonal example for mxGraph. This example demonstrates the use
Orthogonal. This example demonstrates the use
of port constraints and orthogonal edge styles and handlers.
*/
@ -26,7 +26,7 @@ class Orthogonal extends React.Component {
// A container for the graph
return (
<>
<h1>Orthogonal example for mxGraph</h1>
<h1>Orthogonal</h1>
<div
ref={el => {
this.el = el;
@ -34,7 +34,6 @@ class Orthogonal extends React.Component {
style={{
overflow: 'hidden',
position: 'relative',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',

5
src/pages/Overlays.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Overlays example for mxGraph. This example demonstrates cell
Overlays. This example demonstrates cell
highlighting, overlays and handling click and double click
events. See also: events.html for more event handling.
*/
@ -23,7 +23,7 @@ class Overlays extends React.Component {
// A container for the graph
return (
<>
<h1>Overlays example for mxGraph</h1>
<h1>Overlays</h1>
<div
ref={el => {
this.el = el;
@ -31,7 +31,6 @@ class Overlays extends React.Component {
style={{
overflow: 'hidden',
position: 'relative',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
}}

20
src/pages/PageBreaks.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Pagebreaks example for mxGraph. This example demonstrates using the
Pagebreaks. This example demonstrates using the
pageBreaksVisible and preferPageSize switches and adding headers and
footers to print output.
*/
@ -23,7 +23,7 @@ class PageBreaks extends React.Component {
// A container for the graph
return (
<>
<h1>Pagebreaks example for mxGraph</h1>
<h1>Pagebreaks</h1>
<div
ref={el => {
@ -32,12 +32,16 @@ class PageBreaks extends React.Component {
style={{
overflow: 'hidden',
position: 'relative',
width: '641px',
height: '481px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
<div
ref={el => {
this.el2 = el;
}}
/>
</>
);
}
@ -90,26 +94,26 @@ class PageBreaks extends React.Component {
graph.getModel().endUpdate();
}
document.body.appendChild(
this.el2.appendChild(
mxUtils.button('Toggle Page Breaks', function(evt) {
graph.pageBreaksVisible = !graph.pageBreaksVisible;
graph.sizeDidChange();
})
);
document.body.appendChild(
this.el2.appendChild(
mxUtils.button('Zoom In', function(evt) {
graph.zoomIn();
})
);
document.body.appendChild(
this.el2.appendChild(
mxUtils.button('Zoom Out', function(evt) {
graph.zoomOut();
})
);
document.body.appendChild(
this.el2.appendChild(
mxUtils.button('Print', function(evt) {
// Matches actual printer paper size and avoids blank pages
const scale = 0.5;
@ -172,7 +176,7 @@ class PageBreaks extends React.Component {
})
);
document.body.appendChild(
this.el2.appendChild(
mxUtils.button('Reset View', function(evt) {
graph.view.scaleAndTranslate(0.15, 0, 0);
})

5
src/pages/Perimeter.js
View File

@ -1,7 +1,7 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Perimeter example for mxGraph. This example demonstrates how to
Perimeter. This example demonstrates how to
avoid edge and label intersections.
*/
@ -21,7 +21,7 @@ class Perimeter extends React.Component {
// A container for the graph
return (
<>
<h1>Perimeter example for mxGraph</h1>
<h1>Perimeter</h1>
<div
ref={el => {
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',

11
src/pages/Permissions.js
View File

@ -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 (
<>
<h1>Permissions example for mxGraph</h1>
<h1>Permissions</h1>
<div
ref={el => {
this.el = el;
}}
style={{}}
style={{
position: 'relative',
overflow: 'hidden',
height: '300px',
//background: "url('editors/images/grid.gif')",
}}
/>
</>
);

3
src/pages/PortRefs.js
View File

@ -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',

6
src/pages/Ports.js
View File

@ -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;

5
src/pages/RadialTreeLayout.js
View File

@ -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 (
<>
<h1>Hierarchical Layout example for mxGraph</h1>
<h1>Hierarchical Layout</h1>
<div
ref={el => {
this.el = el;
@ -31,7 +31,6 @@ class RadialTreeLayout extends React.Component {
position: 'relative',
overflow: 'auto',
height: '800px',
width: '1000px',
borderTop: 'gray 1px solid',
}}
/>

5
src/pages/Resources.js
View File

@ -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 (
<>
<h1>Resources example for mxGraph</h1>
<h1>Resources</h1>
<div
ref={el => {
@ -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',

2
src/pages/Schema.js
View File

@ -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.
*/

4
src/pages/Scrollbars.js
View File

@ -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 (
<>
<h1>Scrollbars example for mxGraph</h1>
<h1>Scrollbars</h1>
<div
ref={el => {

20
src/pages/SecondLabel.js
View File

@ -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 (
<>
<h1>Second label example for mxGraph</h1>
<h1>Second label</h1>
<div
ref={el => {
@ -32,11 +32,15 @@ class SecondLabel extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
}}
/>
<div
ref={el => {
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
})
);
}
}

2
src/pages/ServerView.js
View File

@ -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.

5
src/pages/Shape.js
View File

@ -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 (
<>
<h1>Shape example for mxGraph</h1>
<h1>Shape</h1>
<div
ref={el => {
@ -28,7 +28,6 @@ class Shape extends React.Component {
}}
style={{
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
}}

10
src/pages/ShowRegion.js
View File

@ -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 (
<>
<h1>Showregion example for mxGraph</h1>
<h1>Showregion</h1>
<div
ref={el => {
@ -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';

5
src/pages/Stencils.js
View File

@ -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 (
<>
<h1>Stencils example for mxGraph</h1>
<h1>Stencils</h1>
<div
ref={el => {
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',

5
src/pages/Stylesheet.js
View File

@ -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 (
<>
<h1>Stylesheet example for mxGraph</h1>
<h1>Stylesheet</h1>
<div
ref={el => {
this.el = el;
@ -30,7 +30,6 @@ class Stylesheet extends React.Component {
style={{
overflow: 'hidden',
position: 'relative',
width: '621px',
height: '311px',
cursor: 'default',
}}

6
src/pages/SwimLanes.js
View File

@ -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 (
<>
<h1>Swimlanes example for mxGraph</h1>
<h1>Swimlanes</h1>
<div
ref={el => {
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',

3
src/pages/Template.js
View File

@ -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'

5
src/pages/Thread.js
View File

@ -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 (
<>
<h1>Thread example for mxGraph</h1>
<h1>Thread</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
}}

16
src/pages/Toolbar.js
View File

@ -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 (
<>
<h1>Toolbar example for mxGraph</h1>
<h1>Toolbar</h1>
<div
ref={el => {
@ -36,12 +36,16 @@ class Toolbar extends React.Component {
style={{
position: 'relative',
overflow: 'hidden',
width: '600px',
height: '400px',
border: 'gray dotted 1px',
cursor: 'default',
}}
/>
<div
ref={el => {
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) {

4
src/pages/Touch.js
View File

@ -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 (
<>
<h1>Touch example for mxGraph</h1>
<h1>Touch</h1>
<div
ref={el => {

5
src/pages/Tree.js
View File

@ -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 (
<>
<h1>Tree example for mxGraph</h1>
<h1>Tree</h1>
<div
ref={el => {
@ -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'

2
src/pages/UIConfig.js
View File

@ -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.
*/

11
src/pages/UserObject.js
View File

@ -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 (
<>
<h1>User object example for mxGraph</h1>
<h1>User object</h1>
<table style={{
position: 'relative'
@ -38,7 +38,6 @@ class UserObject extends React.Component {
style={{
border: 'solid 1px black',
overflow: 'hidden',
width: '321px',
height: '241px',
cursor: 'default'
}}
@ -55,6 +54,10 @@ class UserObject extends React.Component {
</td>
</tr>
</table>
<div
ref={el => {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());

5
src/pages/Validation.js
View File

@ -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 (
<>
<h1>Validation example for mxGraph</h1>
<h1>Validation</h1>
<div
ref={el => {
@ -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',

20
src/pages/Visibility.js
View File

@ -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 (
<>
<h1>Visibility example for mxGraph</h1>
<h1>Visibility</h1>
<div
ref={el => {
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',
}}
/>
<div
ref={el => {
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);

5
src/pages/Windows.js
View File

@ -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 (
<>
<h1>Windows example for mxGraph</h1>
<h1>Windows</h1>
<div
ref={el => {
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',

5
src/pages/Wrapping.js
View File

@ -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 (
<>
<h1>Wrapping example for mxGraph</h1>
<h1>Wrapping</h1>
<div
ref={el => {
@ -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',