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

cleanups and bugfixes

development
mcyph 2021-03-26 12:45:54 +11:00
parent 0319692cca
commit 0b51e1da2a
64 changed files with 307 additions and 377 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/Animation.js
View File

@ -5,7 +5,7 @@
import React from 'react';
import mxGraph from '../mxgraph/view/mxGraph';
import mxPoint from "../mxgraph/util/mxPoint";
import mxPoint from '../mxgraph/util/mxPoint';
class Animation extends React.Component {
constructor(props) {
@ -17,9 +17,8 @@ class Animation extends React.Component {
return (
<>
<h1>Animation</h1>
This example demonstrates using
SVG animations on edges to visualize the flow in a pipe.
This example demonstrates using SVG animations on edges to visualize the
flow in a pipe.
<div
ref={el => {
this.el = el;

2
src/pages/AutoLayout.js
View File

@ -70,7 +70,7 @@ class AutoLayout extends React.Component {
);
});
}
};
}
}
class MyCustomEdgeHandler extends mxEdgeHandler {

58
src/pages/Collapse.js
View File

@ -6,6 +6,7 @@
import React from 'react';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRectangle from '../mxgraph/util/mxRectangle';
import mxGraphModel from '../mxgraph/model/mxGraphModel';
class Collapse extends React.Component {
constructor(props) {
@ -17,9 +18,8 @@ class Collapse extends React.Component {
return (
<>
<h1>Collapse</h1>
This example demonstrates changing
the style of a cell based on its collapsed state.
This example demonstrates changing the style of a cell based on its
collapsed state.
<div
ref={el => {
this.el = el;
@ -37,44 +37,42 @@ class Collapse extends React.Component {
};
componentDidMount = () => {
const graph = new mxGraph(this.el);
const parent = graph.getDefaultParent();
class MyCustomModel extends mxGraphModel {
getStyle(cell) {
// Extends mxGraphModel.getStyle to show an image when collapsed
const modelGetStyle = graph.model.getStyle;
graph.model.getStyle = function(cell) {
if (cell != null) {
let style = modelGetStyle.apply(this, arguments);
let style = super.getStyle(cell);
if (this.isCollapsed(cell)) {
style =
`${style};shape=image;image=http://www.jgraph.com/images/mxgraph.gif;` +
`noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`;
}
return style;
}
return null;
};
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(
parent,
null,
'Container',
20,
20,
200,
200,
'shape=swimlane;startSize=20;'
);
v1.geometry.alternateBounds = new mxRectangle(0, 0, 110, 70);
const v11 = graph.insertVertex(v1, null, 'Hello,', 10, 40, 120, 80);
} finally {
graph.getModel().endUpdate();
}
}
const graph = new mxGraph(this.el, new MyCustomModel());
const parent = graph.getDefaultParent();
graph.batchUpdate(() => {
const v1 = graph.insertVertex({
parent,
value: 'Container',
position: [20, 20],
size: [200, 200],
style: 'shape=swimlane;startSize=20;',
});
v1.geometry.alternateBounds = new mxRectangle(0, 0, 110, 70);
const v11 = graph.insertVertex({
parent: v1,
value: 'Hello,',
position: [10, 40],
size: [120, 80],
});
});
};
}

43
src/pages/Constituent.js
View File

@ -7,7 +7,7 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxGraphHandler from "../mxgraph/handler/mxGraphHandler";
import mxGraphHandler from '../mxgraph/handler/mxGraphHandler';
class Constituent extends React.Component {
constructor(props) {
@ -19,9 +19,7 @@ class Constituent extends React.Component {
return (
<>
<h1>Constituent</h1>
This example demonstrates using
cells as parts of other cells.
This example demonstrates using cells as parts of other cells.
<div
ref={el => {
this.el = el;
@ -39,6 +37,9 @@ class Constituent extends React.Component {
};
componentDidMount() {
// Disables the built-in context menu
mxEvent.disableContextMenu(this.el);
class MyCustomGraphHandler extends mxGraphHandler {
/**
* Redirects start drag to parent.
@ -52,9 +53,6 @@ class Constituent extends React.Component {
}
}
// Disables the built-in context menu
mxEvent.disableContextMenu(this.el);
class MyCustomGraph extends mxGraph {
foldingEnabled = false;
@ -89,23 +87,20 @@ class Constituent extends React.Component {
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();
}
graph.batchUpdate(() => {
const v1 = graph.insertVertex({
parent,
position: [20, 20],
size: [120, 70],
});
const v2 = graph.insertVertex({
parent: v1,
value: 'Constituent',
position: [20, 20],
size: [80, 30],
style: 'constituent=1;',
});
});
}
}

5
src/pages/ContextIcons.js
View File

@ -21,9 +21,8 @@ class ContextIcons extends React.Component {
return (
<>
<h1>Context icons</h1>
This example demonstrates adding
icons to selected vertices to carry out special operations.
This example demonstrates adding icons to selected vertices to carry out
special operations.
<div
ref={el => {
this.el = el;

11
src/pages/DragSource.js
View File

@ -11,9 +11,9 @@ 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";
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) {
@ -25,9 +25,8 @@ class DragSource extends React.Component {
return (
<>
<h1>Dragsource</h1>
This example demonstrates using one drag source
for multiple graphs and changing the drag icon.
This example demonstrates using one drag source for multiple graphs and
changing the drag icon.
<div
ref={el => {
this.el = el;

5
src/pages/Drop.js
View File

@ -20,9 +20,8 @@ class Drop extends React.Component {
return (
<>
<h1>Drop</h1>
This example demonstrates handling native drag and
drop of images (requires modern browser).
This example demonstrates handling native drag and drop of images
(requires modern browser).
<div
ref={el => {
this.el = el;

5
src/pages/DynamicLoading.js
View File

@ -23,9 +23,8 @@ class DynamicLoading extends React.Component {
return (
<>
<h1>Dynamic loading</h1>
This example demonstrates loading graph model data
dynamically to limit the number of cells in the model.
This example demonstrates loading graph model data dynamically to limit
the number of cells in the model.
<div
ref={el => {
this.el = el;

5
src/pages/DynamicStyle.js
View File

@ -19,9 +19,8 @@ class DynamicStyle extends React.Component {
return (
<>
<h1>Dynamic Style</h1>
This example demonstrates changing the style of a cell
dynamically by overriding mxGraphModel.getStyle.
This example demonstrates changing the style of a cell dynamically by
overriding mxGraphModel.getStyle.
<div
ref={el => {
this.el = el;

6
src/pages/DynamicToolbar.js
View File

@ -26,9 +26,7 @@ class DynamicToolbar extends React.Component {
return (
<>
<h1>Toolbar</h1>
This example demonstrates changing the state
of the toolbar at runtime.
This example demonstrates changing the state of the toolbar at runtime.
<div
ref={el => {
this.el = el;
@ -37,7 +35,7 @@ class DynamicToolbar extends React.Component {
overflow: 'hidden',
height: '241px',
background: "url('editors/images/grid.gif')",
position: "relative"
position: 'relative',
}}
/>
</>

11
src/pages/EdgeTolerance.js
View File

@ -18,9 +18,8 @@ class EdgeTolerance extends React.Component {
return (
<>
<h1>Edge tolerance</h1>
This example demonstrates increasing
the tolerance for hit detection on edges.
This example demonstrates increasing the tolerance for hit detection on
edges.
<div
ref={el => {
this.el = el;
@ -37,7 +36,7 @@ class EdgeTolerance extends React.Component {
}
componentDidMount() {
let el = this.el;
const { el } = this;
class MyCustomGraph extends mxGraph {
fireMouseEvent(evtName, me, sender) {
@ -73,7 +72,7 @@ class EdgeTolerance extends React.Component {
}
super.fireMouseEvent(evtName, me, sender);
};
}
dblClick(evt, cell) {
// Overrides double click handling to use the tolerance
@ -87,7 +86,7 @@ class EdgeTolerance extends React.Component {
}
super.dblClick(evt, cell);
};
}
}
// Creates the graph inside the given container

13
src/pages/Editing.js
View File

@ -19,11 +19,12 @@ class Editing extends React.Component {
return (
<>
<h1>Editing</h1>
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.<br/><br/>
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.
<br />
<br />
Double-click the upper/lower half of the cell to edit different fields
of the user object.
<div
@ -39,7 +40,7 @@ class Editing extends React.Component {
/>
</>
);
};
}
componentDidMount() {
class MyCustomGraph extends mxGraph {

14
src/pages/Events.js
View File

@ -27,14 +27,12 @@ class Events extends React.Component {
return (
<>
<h1>Events</h1>
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
opacity. It also demonstrates how to use an edgestyle in the
default stylesheet, and handle the doubleclick on the adjustment
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 opacity. It also demonstrates how to use an edgestyle
in the default stylesheet, and handle the doubleclick on the adjustment
point. See also: overlays.html for click event handling.
<div
ref={el => {
this.el = el;
@ -43,7 +41,7 @@ class Events extends React.Component {
/>
</>
);
};
}
componentDidMount() {
// Program starts here. Creates a sample graph in the dynamically

5
src/pages/ExtendCanvas.js
View File

@ -21,9 +21,8 @@ class ExtendCanvas extends React.Component {
return (
<>
<h1>Extend canvas</h1>
This example demonstrates implementing
an infinite canvas with scrollbars.
This example demonstrates implementing an infinite canvas with
scrollbars.
<div
ref={el => {
this.el = el;

22
src/pages/FileIO.js
View File

@ -6,14 +6,14 @@
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxCellTracker from "../mxgraph/handler/mxCellTracker";
import mxConstants from "../mxgraph/util/mxConstants";
import mxUtils from "../mxgraph/util/mxUtils";
import mxFastOrganicLayout from "../mxgraph/layout/mxFastOrganicLayout";
import mxEventObject from "../mxgraph/util/mxEventObject";
import mxCodec from "../mxgraph/io/mxCodec";
import mxPerimeter from "../mxgraph/view/mxPerimeter";
import mxClient from "../mxgraph/mxClient";
import mxCellTracker from '../mxgraph/handler/mxCellTracker';
import mxConstants from '../mxgraph/util/mxConstants';
import mxUtils from '../mxgraph/util/mxUtils';
import mxFastOrganicLayout from '../mxgraph/layout/mxFastOrganicLayout';
import mxEventObject from '../mxgraph/util/mxEventObject';
import mxCodec from '../mxgraph/io/mxCodec';
import mxPerimeter from '../mxgraph/view/mxPerimeter';
import mxClient from '../mxgraph/mxClient';
class FileIO extends React.Component {
constructor(props) {
@ -25,10 +25,8 @@ class FileIO extends React.Component {
return (
<>
<h1>File I/O</h1>
This example demonstrates reading an
XML file, writing a custom parser, applying an automatic layout and
defining a 2-way edge.
This example demonstrates reading an XML file, writing a custom parser,
applying an automatic layout and defining a 2-way edge.
<div
ref={el => {
this.el = el;

13
src/pages/FixedIcon.js
View File

@ -6,10 +6,10 @@
import React from 'react';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxUtils from "../mxgraph/util/mxUtils";
import mxConstants from "../mxgraph/util/mxConstants";
import mxLabel from "../mxgraph/shape/mxLabel";
import mxRectangle from "../mxgraph/util/mxRectangle";
import mxUtils from '../mxgraph/util/mxUtils';
import mxConstants from '../mxgraph/util/mxConstants';
import mxLabel from '../mxgraph/shape/mxLabel';
import mxRectangle from '../mxgraph/util/mxRectangle';
class FixedIcon extends React.Component {
constructor(props) {
@ -21,9 +21,8 @@ class FixedIcon extends React.Component {
return (
<>
<h1>Fixed icon</h1>
This example demonstrates
customizing the icon position in the mxLabel shape.
This example demonstrates customizing the icon position in the mxLabel
shape.
<div
ref={el => {
this.el = el;

5
src/pages/FixedPoints.js
View File

@ -24,9 +24,8 @@ class FixedPoints extends React.Component {
return (
<>
<h1>Fixed points</h1>
This example demonstrates using
fixed connection points for connecting edges to vertices.
This example demonstrates using fixed connection points for connecting
edges to vertices.
<div
ref={el => {
this.el = el;

4
src/pages/Folding.js
View File

@ -20,8 +20,8 @@ class Folding extends React.Component {
return (
<>
<h1>Folding</h1>
This example demonstrates using a layout to implement a nested group structure.
This example demonstrates using a layout to implement a nested group
structure.
<div
ref={el => {
this.el = el;

7
src/pages/Grid.js
View File

@ -22,9 +22,8 @@ class Grid extends React.Component {
return (
<>
<h1>Grid</h1>
This example demonstrates drawing
a grid dynamically using HTML 5 canvas.
This example demonstrates drawing a grid dynamically using HTML 5
canvas.
<div
ref={el => {
this.el = el;
@ -169,7 +168,7 @@ class Grid extends React.Component {
ctx.stroke();
}
}
}
};
} catch (e) {
mxLog.show();
mxLog.debug('Using background image');

8
src/pages/Groups.js
View File

@ -6,8 +6,8 @@
import React from 'react';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxGraphHandler from "../mxgraph/handler/mxGraphHandler";
import mxPopupMenuHandler from "../mxgraph/handler/mxPopupMenuHandler";
import mxGraphHandler from '../mxgraph/handler/mxGraphHandler';
import mxPopupMenuHandler from '../mxgraph/handler/mxPopupMenuHandler';
class Groups extends React.Component {
constructor(props) {
@ -19,9 +19,7 @@ class Groups extends React.Component {
return (
<>
<h1>Hello, World!</h1>
This example demonstrates using
cells as parts of other cells.
This example demonstrates using cells as parts of other cells.
<div
ref={el => {
this.el = el;

11
src/pages/Guides.js
View File

@ -23,12 +23,11 @@ class Guides extends React.Component {
return (
<>
<h1>Guides</h1>
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
demonstrated here, as well as snapping waypoints to terminals.
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 demonstrated here, as well as snapping waypoints to
terminals.
<div
ref={el => {
this.el = el;

4
src/pages/Handles.js
View File

@ -25,8 +25,8 @@ class Handles extends React.Component {
return (
<>
<h1>Handles</h1>
This example demonstrates using mxHandle to change custom styles interactively.
This example demonstrates using mxHandle to change custom styles
interactively.
<div
ref={el => {
this.el = el;

5
src/pages/HelloPort.js
View File

@ -23,9 +23,8 @@ class HelloPort extends React.Component {
return (
<>
<h1>Hello, World!</h1>
This example demonstrates using
the isPort hook for visually connecting to another cell.
This example demonstrates using the isPort hook for visually connecting
to another cell.
<div
ref={el => {
this.el = el;

8
src/pages/HelloWorld.js
View File

@ -18,9 +18,8 @@ class HelloWorld extends React.Component {
return (
<>
<h1>Hello, World!</h1>
This example demonstrates using
a DOM node to create a graph and adding vertices and edges.
This example demonstrates using a DOM node to create a graph and adding
vertices and edges.
<div
ref={el => {
this.el = el;
@ -38,9 +37,6 @@ class HelloWorld extends React.Component {
};
componentDidMount = () => {
// FIXME!!
const mxBasePath = '../src';
// Create a sample graph in the DOM node with the specified ID.
mxEvent.disableContextMenu(this.el); // Disable the built-in context menu
const graph = new mxGraph(this.el); // Create the graph inside the given container

9
src/pages/HierarchicalLayout.js
View File

@ -11,7 +11,7 @@ import mxHierarchicalLayout from '../mxgraph/layout/hierarchical/mxHierarchicalL
import mxFastOrganicLayout from '../mxgraph/layout/mxFastOrganicLayout';
import mxConstants from '../mxgraph/util/mxConstants';
import mxPerimeter from '../mxgraph/view/mxPerimeter';
import mxUtils from "../mxgraph/util/mxUtils";
import mxUtils from '../mxgraph/util/mxUtils';
class HierarchicalLayout extends React.Component {
constructor(props) {
@ -23,10 +23,9 @@ class HierarchicalLayout extends React.Component {
return (
<>
<h1>Hierarchical Layout</h1>
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.
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.
<div
ref={el => {
this.el = el;

9
src/pages/HoverIcons.js
View File

@ -9,8 +9,8 @@ import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';
import mxUtils from '../mxgraph/util/mxUtils';
import mxRectangle from "../mxgraph/util/mxRectangle";
import mxImage from "../mxgraph/util/mxImage";
import mxRectangle from '../mxgraph/util/mxRectangle';
import mxImage from '../mxgraph/util/mxImage';
class HoverIcons extends React.Component {
constructor(props) {
@ -22,9 +22,8 @@ class HoverIcons extends React.Component {
return (
<>
<h1>Hover icons</h1>
This example demonstrates showing
icons on vertices as mouse hovers over them.
This example demonstrates showing icons on vertices as mouse hovers over
them.
<div
ref={el => {
this.el = el;

6
src/pages/HoverStyle.js
View File

@ -7,7 +7,7 @@ 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 mxConstants from '../mxgraph/util/mxConstants';
class HoverStyle extends React.Component {
constructor(props) {
@ -19,9 +19,7 @@ class HoverStyle extends React.Component {
return (
<>
<h1>Hoverstyle</h1>
This example shows hot to change
the style of a vertex on mouseover.
This example shows hot to change the style of a vertex on mouseover.
<div
ref={el => {
this.el = el;

7
src/pages/Images.js
View File

@ -11,7 +11,7 @@ import mxConstants from '../mxgraph/util/mxConstants';
import mxUtils from '../mxgraph/util/mxUtils';
import mxRectangle from '../mxgraph/util/mxRectangle';
import mxImage from '../mxgraph/util/mxImage';
import mxPerimeter from "../mxgraph/view/mxPerimeter";
import mxPerimeter from '../mxgraph/view/mxPerimeter';
class Images extends React.Component {
constructor(props) {
@ -23,9 +23,8 @@ class Images extends React.Component {
return (
<>
<h1>Images</h1>
This example demonstrates using
background images and images for for the label- and image-shape.
This example demonstrates using background images and images for for the
label- and image-shape.
<div
ref={el => {
this.el = el;

6
src/pages/Indicators.js
View File

@ -19,10 +19,8 @@ class Indicators extends React.Component {
return (
<>
<h1>Indicators</h1>
This example demonstrates the use of
indicators, which are small subshapes inside a parent shape, typically
an mxLabel.
This example demonstrates the use of indicators, which are small
subshapes inside a parent shape, typically an mxLabel.
<div
ref={el => {
this.el = el;

5
src/pages/JsonData.js
View File

@ -29,9 +29,8 @@ class JsonData extends React.Component {
return (
<>
<h1>JSON data</h1>
This example demonstrates using
JSON to encode/decode parts of the graph model in mxCodec.
This example demonstrates using JSON to encode/decode parts of the graph
model in mxCodec.
<div
ref={el => {
this.el = el;

4
src/pages/LOD.js
View File

@ -17,9 +17,7 @@ class LOD extends React.Component {
return (
<>
<h1>Level of detail</h1>
This example demonstrates
implementing a level of detail per cell.
This example demonstrates implementing a level of detail per cell.
<div
ref={el => {
this.el = el;

5
src/pages/LabelPosition.js
View File

@ -16,9 +16,8 @@ class LabelPosition extends React.Component {
return (
<>
<h1>Label Position</h1>
This example demonstrates the use of the
label position styles to set the position of vertex labels.
This example demonstrates the use of the label position styles to set
the position of vertex labels.
<div
ref={el => {
this.el = el;

13
src/pages/Labels.js
View File

@ -7,8 +7,8 @@ import React from 'react';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxKeyHandler from '../mxgraph/handler/mxKeyHandler';
import mxConstants from "../mxgraph/util/mxConstants";
import mxRectangle from "../mxgraph/util/mxRectangle";
import mxConstants from '../mxgraph/util/mxConstants';
import mxRectangle from '../mxgraph/util/mxRectangle';
class Labels extends React.Component {
constructor(props) {
@ -20,11 +20,10 @@ class Labels extends React.Component {
return (
<>
<h1>Hello, World!</h1>
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".
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".
<div
ref={el => {
this.el = el;

4
src/pages/Layers.js
View File

@ -20,9 +20,7 @@ class Layers extends React.Component {
return (
<>
<h1>Layers</h1>
This example demonstrates using
multiple layers to contain cells.
This example demonstrates using multiple layers to contain cells.
<div
ref={el => {
this.el = el;

5
src/pages/Markers.js
View File

@ -23,9 +23,8 @@ class Markers extends React.Component {
return (
<>
<h1>Markers</h1>
This example demonstrates creating
custom markers and customizing the built-in markers.
This example demonstrates creating custom markers and customizing the
built-in markers.
<div
ref={el => {
this.el = el;

9
src/pages/Merge.js
View File

@ -6,8 +6,8 @@
import React from 'react';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxConstants from "../mxgraph/util/mxConstants";
import mxPerimeter from "../mxgraph/view/mxPerimeter";
import mxConstants from '../mxgraph/util/mxConstants';
import mxPerimeter from '../mxgraph/view/mxPerimeter';
class Merge extends React.Component {
constructor(props) {
@ -19,9 +19,8 @@ class Merge extends React.Component {
return (
<>
<h1>Merge</h1>
This example demonstrates using
the mergeChildren function to merge two graphs.
This example demonstrates using the mergeChildren function to merge two
graphs.
<div
ref={el => {
this.el = el;

9
src/pages/Monitor.js
View File

@ -10,8 +10,8 @@ import mxConstants from '../mxgraph/util/mxConstants';
import mxCellOverlay from '../mxgraph/view/mxCellOverlay';
import mxUtils from '../mxgraph/util/mxUtils';
import mxCodec from '../mxgraph/io/mxCodec';
import mxPerimeter from "../mxgraph/view/mxPerimeter";
import mxEdgeStyle from "../mxgraph/view/mxEdgeStyle";
import mxPerimeter from '../mxgraph/view/mxPerimeter';
import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
class Monitor extends React.Component {
constructor(props) {
@ -23,9 +23,8 @@ class Monitor extends React.Component {
return (
<>
<h1>mxGraph Workflow Monitor</h1>
This example demonstrates using a
graph to display the current state of a workflow.
This example demonstrates using a graph to display the current state of
a workflow.
<div
ref={el => {
this.el = el;

4
src/pages/Morph.js
View File

@ -20,9 +20,7 @@ class Morph extends React.Component {
return (
<>
<h1>Morph</h1>
This example demonstrates using
mxMorphing for simple cell animations.
This example demonstrates using mxMorphing for simple cell animations.
<div
ref={el => {
this.el = el;

10
src/pages/OffPage.js
View File

@ -7,8 +7,8 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxCellTracker from "../mxgraph/handler/mxCellTracker";
import mxConstants from "../mxgraph/util/mxConstants";
import mxCellTracker from '../mxgraph/handler/mxCellTracker';
import mxConstants from '../mxgraph/util/mxConstants';
class OffPage extends React.Component {
constructor(props) {
@ -20,10 +20,8 @@ class OffPage extends React.Component {
return (
<>
<h1>Offpage connector</h1>
This example demonstrates creating
offpage connectors in a graph and loading a new diagram on a
single click.
This example demonstrates creating offpage connectors in a graph and
loading a new diagram on a single click.
<div
ref={el => {
this.el = el;

31
src/pages/OrgChart.js
View File

@ -15,15 +15,15 @@ import mxUtils from '../mxgraph/util/mxUtils';
import mxCellOverlay from '../mxgraph/view/mxCellOverlay';
import mxImage from '../mxgraph/util/mxImage';
import mxPoint from '../mxgraph/util/mxPoint';
import mxConstants from "../mxgraph/util/mxConstants";
import mxWindow from "../mxgraph/util/mxWindow";
import mxToolbar from "../mxgraph/util/mxToolbar";
import mxLayoutManager from "../mxgraph/view/mxLayoutManager";
import mxEdgeStyle from "../mxgraph/view/mxEdgeStyle";
import mxCompactTreeLayout from "../mxgraph/layout/mxCompactTreeLayout";
import mxKeyHandler from "../mxgraph/handler/mxKeyHandler";
import mxClient from "../mxgraph/mxClient";
import mxOutline from "../mxgraph/view/mxOutline";
import mxConstants from '../mxgraph/util/mxConstants';
import mxWindow from '../mxgraph/util/mxWindow';
import mxToolbar from '../mxgraph/util/mxToolbar';
import mxLayoutManager from '../mxgraph/view/mxLayoutManager';
import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
import mxCompactTreeLayout from '../mxgraph/layout/mxCompactTreeLayout';
import mxKeyHandler from '../mxgraph/handler/mxKeyHandler';
import mxClient from '../mxgraph/mxClient';
import mxOutline from '../mxgraph/view/mxOutline';
class OrgChart extends React.Component {
constructor(props) {
@ -49,6 +49,11 @@ class OrgChart extends React.Component {
borderColor: 'lightgray',
}}
/>
<div
ref={el => {
this.el2 = el;
}}
/>
</>
);
}
@ -238,7 +243,7 @@ class OrgChart extends React.Component {
const content = document.createElement('div');
content.style.padding = '4px';
this.el2.appendChild(content);
const tb = new mxToolbar(content);
tb.addItem('Zoom In', 'images/zoom_in32.png', function(evt) {
@ -268,12 +273,6 @@ class OrgChart extends React.Component {
}
});
let wnd = new mxWindow('Tools', content, 0, 0, 200, 66, false);
wnd.setMaximizable(false);
wnd.setScrollable(false);
wnd.setResizable(false);
wnd.setVisible(true);
// Function to create the entries in the popupmenu
function createPopupMenu(graph, menu, cell, evt) {
const model = graph.getModel();

19
src/pages/Orthogonal.js
View File

@ -7,13 +7,13 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxGraphHandler from "../mxgraph/handler/mxGraphHandler";
import mxGuide from "../mxgraph/util/mxGuide";
import mxEdgeHandler from "../mxgraph/handler/mxEdgeHandler";
import mxConnectionHandler from "../mxgraph/handler/mxConnectionHandler";
import mxGraphView from "../mxgraph/view/mxGraphView";
import mxPoint from "../mxgraph/util/mxPoint";
import mxCellState from "../mxgraph/view/mxCellState";
import mxGraphHandler from '../mxgraph/handler/mxGraphHandler';
import mxGuide from '../mxgraph/util/mxGuide';
import mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';
import mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';
import mxGraphView from '../mxgraph/view/mxGraphView';
import mxPoint from '../mxgraph/util/mxPoint';
import mxCellState from '../mxgraph/view/mxCellState';
class Orthogonal extends React.Component {
constructor(props) {
@ -25,9 +25,8 @@ class Orthogonal extends React.Component {
return (
<>
<h1>Orthogonal</h1>
This example demonstrates the use
of port constraints and orthogonal edge styles and handlers.
This example demonstrates the use of port constraints and orthogonal
edge styles and handlers.
<div
ref={el => {
this.el = el;

6
src/pages/Overlays.js
View File

@ -21,10 +21,8 @@ class Overlays extends React.Component {
return (
<>
<h1>Overlays</h1>
This example demonstrates cell
highlighting, overlays and handling click and double click
events. See also: events.html for more event handling.
This example demonstrates cell highlighting, overlays and handling click
and double click events. See also: events.html for more event handling.
<div
ref={el => {
this.el = el;

12
src/pages/PageBreaks.js
View File

@ -7,9 +7,9 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxUtils from "../mxgraph/util/mxUtils";
import mxConstants from "../mxgraph/util/mxConstants";
import mxPrintPreview from "../mxgraph/view/mxPrintPreview";
import mxUtils from '../mxgraph/util/mxUtils';
import mxConstants from '../mxgraph/util/mxConstants';
import mxPrintPreview from '../mxgraph/view/mxPrintPreview';
class PageBreaks extends React.Component {
constructor(props) {
@ -21,10 +21,8 @@ class PageBreaks extends React.Component {
return (
<>
<h1>Pagebreaks</h1>
This example demonstrates using the
pageBreaksVisible and preferPageSize switches and adding headers and
footers to print output.
This example demonstrates using the pageBreaksVisible and preferPageSize
switches and adding headers and footers to print output.
<div
ref={el => {
this.el = el;

8
src/pages/Perimeter.js
View File

@ -7,8 +7,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 mxGraphView from "../mxgraph/view/mxGraphView";
import mxUtils from '../mxgraph/util/mxUtils';
import mxGraphView from '../mxgraph/view/mxGraphView';
class Perimeter extends React.Component {
constructor(props) {
@ -20,9 +20,7 @@ class Perimeter extends React.Component {
return (
<>
<h1>Perimeter</h1>
This example demonstrates how to
avoid edge and label intersections.
This example demonstrates how to avoid edge and label intersections.
<div
ref={el => {
this.el = el;

5
src/pages/Permissions.js
View File

@ -34,9 +34,8 @@ class Permissions extends React.Component {
return (
<>
<h1>Permissions</h1>
This example demonstrates creating
permissions to define the available operations a the graph.
This example demonstrates creating permissions to define the available
operations a the graph.
<div
ref={el => {
this.el = el;

10
src/pages/PortRefs.js
View File

@ -26,12 +26,10 @@ class PortRefs extends React.Component {
return (
<>
<h1>Port References Example</h1>
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
connections since they reference that port.
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 connections since they reference that port.
<div
ref={el => {
this.el = el;

16
src/pages/Previews.js
View File

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState } from 'react';
import SourceCodeDisplay from './SourceCodeDisplay';
import examplesListing from './examplesListing.json';
@ -18,8 +18,18 @@ function Preview({ sourceKey, content }) {
>
hide source
</span>
<div style={{clear: "both", resize: "both", maxHeight: "50vh", overflow: "auto"}}>
<SourceCodeDisplay language="javascript" code={examplesListing[sourceKey]||''} />
<div
style={{
clear: 'both',
resize: 'both',
maxHeight: '50vh',
overflow: 'auto',
}}
>
<SourceCodeDisplay
language="javascript"
code={examplesListing[sourceKey] || ''}
/>
</div>
</div>
) : (

7
src/pages/RadialTreeLayout.js
View File

@ -20,10 +20,9 @@ class RadialTreeLayout extends React.Component {
return (
<>
<h1>Hierarchical Layout</h1>
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.
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.
<div
ref={el => {
this.el = el;

5
src/pages/Resources.js
View File

@ -20,9 +20,8 @@ class Resources extends React.Component {
return (
<>
<h1>Resources</h1>
This example demonstrates disabling the Synchronous
XMLHttpRequest on main thread warning.
This example demonstrates disabling the Synchronous XMLHttpRequest on
main thread warning.
<div
ref={el => {
this.el = el;

6
src/pages/SecondLabel.js
View File

@ -10,7 +10,7 @@ import mxPoint from '../mxgraph/util/mxPoint';
import mxRectangle from '../mxgraph/util/mxRectangle';
import mxConstants from '../mxgraph/util/mxConstants';
import mxRectangleShape from '../mxgraph/shape/mxRectangleShape';
import mxText from "../mxgraph/shape/mxText";
import mxText from '../mxgraph/shape/mxText';
class SecondLabel extends React.Component {
constructor(props) {
@ -22,9 +22,7 @@ class SecondLabel extends React.Component {
return (
<>
<h1>Second label</h1>
This example demonstrates how to
add another string label to vertices.
This example demonstrates how to add another string label to vertices.
<div
ref={el => {
this.el = el;

6
src/pages/Shape.js
View File

@ -7,7 +7,7 @@ import React from 'react';
import mxGraph from '../mxgraph/view/mxGraph';
import mxConstants from '../mxgraph/util/mxConstants';
import mxCylinder from '../mxgraph/shape/mxCylinder';
import mxCellRenderer from "../mxgraph/view/mxCellRenderer";
import mxCellRenderer from '../mxgraph/view/mxCellRenderer';
class Shape extends React.Component {
constructor(props) {
@ -19,9 +19,7 @@ class Shape extends React.Component {
return (
<>
<h1>Shape</h1>
This example demonstrates how to
implement and use a custom shape.
This example demonstrates how to implement and use a custom shape.
<div
ref={el => {
this.el = el;

28
src/pages/Stencils.js
View File

@ -7,17 +7,17 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxUtils from "../mxgraph/util/mxUtils";
import mxConstants from "../mxgraph/util/mxConstants";
import mxPoint from "../mxgraph/util/mxPoint";
import mxStencilRegistry from "../mxgraph/shape/mxStencilRegistry";
import mxCellRenderer from "../mxgraph/view/mxCellRenderer";
import mxShape from "../mxgraph/shape/mxShape";
import mxVertexHandler from "../mxgraph/handler/mxVertexHandler";
import mxCellHighlight from "../mxgraph/handler/mxCellHighlight";
import mxEdgeHandler from "../mxgraph/handler/mxEdgeHandler";
import mxConnectionHandler from "../mxgraph/handler/mxConnectionHandler";
import mxStencil from "../mxgraph/shape/mxStencil";
import mxUtils from '../mxgraph/util/mxUtils';
import mxConstants from '../mxgraph/util/mxConstants';
import mxPoint from '../mxgraph/util/mxPoint';
import mxStencilRegistry from '../mxgraph/shape/mxStencilRegistry';
import mxCellRenderer from '../mxgraph/view/mxCellRenderer';
import mxShape from '../mxgraph/shape/mxShape';
import mxVertexHandler from '../mxgraph/handler/mxVertexHandler';
import mxCellHighlight from '../mxgraph/handler/mxCellHighlight';
import mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';
import mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';
import mxStencil from '../mxgraph/shape/mxStencil';
class Stencils extends React.Component {
constructor(props) {
@ -29,10 +29,8 @@ class Stencils extends React.Component {
return (
<>
<h1>Stencils</h1>
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.
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.
<div
ref={el => {
this.el = el;

10
src/pages/Stylesheet.js
View File

@ -7,7 +7,7 @@ import React from 'react';
import mxGraph from '../mxgraph/view/mxGraph';
import mxConstants from '../mxgraph/util/mxConstants';
import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
import mxPerimeter from "../mxgraph/view/mxPerimeter";
import mxPerimeter from '../mxgraph/view/mxPerimeter';
class Stylesheet extends React.Component {
constructor(props) {
@ -19,11 +19,9 @@ class Stylesheet extends React.Component {
return (
<>
<h1>Stylesheet</h1>
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.
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.
<div
ref={el => {
this.el = el;

12
src/pages/SwimLanes.js
View File

@ -17,8 +17,8 @@ import mxUtils from '../mxgraph/util/mxUtils';
import mxEditor from '../mxgraph/editor/mxEditor';
import mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';
import mxImage from '../mxgraph/util/mxImage';
import mxLayoutManager from "../mxgraph/view/mxLayoutManager";
import mxEdgeStyle from "../mxgraph/view/mxEdgeStyle";
import mxLayoutManager from '../mxgraph/view/mxLayoutManager';
import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
class SwimLanes extends React.Component {
constructor(props) {
@ -30,11 +30,9 @@ class SwimLanes extends React.Component {
return (
<>
<h1>Swimlanes</h1>
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.
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.
<div
ref={el => {
this.el = el;

22
src/pages/Template.js
View File

@ -11,8 +11,8 @@
import React from 'react';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxUtils from "../mxgraph/util/mxUtils";
import mxCodec from "../mxgraph/io/mxCodec";
import mxUtils from '../mxgraph/util/mxUtils';
import mxCodec from '../mxgraph/io/mxCodec';
class Template extends React.Component {
constructor(props) {
@ -32,28 +32,26 @@ class Template extends React.Component {
overflow: 'hidden',
position: 'relative',
height: '241px',
background: "url('/mxgraph/javascript/examples/editors/images/grid.gif')",
cursor: 'default'
background:
"url('/mxgraph/javascript/examples/editors/images/grid.gif')",
cursor: 'default',
}}
/>
</>
);
};
}
componentDidMount() {
// Creates the graph inside the given container
let graph = new mxGraph(this.el);
const graph = new mxGraph(this.el);
// Adds rubberband selection to the graph
new mxRubberband(graph);
let doc = mxUtils.parseXml(xml);
let codec = new mxCodec(doc);
const doc = mxUtils.parseXml(xml);
const codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
};
}
}
export default Template;

5
src/pages/Thread.js
View File

@ -16,9 +16,8 @@ class Thread extends React.Component {
return (
<>
<h1>Thread</h1>
This example demonstrates setting
overlays in mxGraph from within a timed function.
This example demonstrates setting overlays in mxGraph from within a
timed function.
<div
ref={el => {
this.el = el;

5
src/pages/Toolbar.js
View File

@ -26,9 +26,8 @@ class Toolbar extends React.Component {
return (
<>
<h1>Toolbar</h1>
This example demonstrates using
existing cells as templates for creating new cells.
This example demonstrates using existing cells as templates for creating
new cells.
<div
ref={el => {
this.el = el;

6
src/pages/Tree.js
View File

@ -29,9 +29,7 @@ class Tree extends React.Component {
return (
<>
<h1>Tree</h1>
This example demonstrates folding
of subtrees in a acyclic graph (tree).
This example demonstrates folding of subtrees in a acyclic graph (tree).
<div
ref={el => {
this.el = el;
@ -41,7 +39,7 @@ class Tree extends React.Component {
overflow: 'hidden',
height: '400px',
background: "url('editors/images/grid.gif')",
cursor: 'default'
cursor: 'default',
}}
/>
</>

43
src/pages/UserObject.js
View File

@ -7,13 +7,13 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxUtils from "../mxgraph/util/mxUtils";
import mxConstants from "../mxgraph/util/mxConstants";
import mxForm from "../mxgraph/util/mxForm";
import mxCellAttributeChange from "../mxgraph/model/atomic_changes/mxCellAttributeChange";
import mxKeyHandler from "../mxgraph/handler/mxKeyHandler";
import mxRectangle from "../mxgraph/util/mxRectangle";
import mxEdgeStyle from "../mxgraph/view/mxEdgeStyle";
import mxUtils from '../mxgraph/util/mxUtils';
import mxConstants from '../mxgraph/util/mxConstants';
import mxForm from '../mxgraph/util/mxForm';
import mxCellAttributeChange from '../mxgraph/model/atomic_changes/mxCellAttributeChange';
import mxKeyHandler from '../mxgraph/handler/mxKeyHandler';
import mxRectangle from '../mxgraph/util/mxRectangle';
import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
class UserObject extends React.Component {
constructor(props) {
@ -25,38 +25,43 @@ class UserObject extends React.Component {
return (
<>
<h1>User object</h1>
This example demonstrates using
XML objects as values for cells.
<table style={{
position: 'relative'
}}>
This example demonstrates using XML objects as values for cells.
<table
style={{
position: 'relative',
}}
>
<tr>
<td>
<div
ref={el => {this.el = el;}}
ref={el => {
this.el = el;
}}
style={{
border: 'solid 1px black',
overflow: 'hidden',
height: '241px',
cursor: 'default'
cursor: 'default',
}}
/>
</td>
<td valign="top">
<div
ref={el => {this.propertiesEl = el;}}
ref={el => {
this.propertiesEl = el;
}}
style={{
border: 'solid 1px black',
padding: '10px'
padding: '10px',
}}
/>
</td>
</tr>
</table>
<div
ref={el => {this.el2 = el;}}
ref={el => {
this.el2 = el;
}}
/>
</>
);

5
src/pages/Validation.js
View File

@ -22,9 +22,8 @@ class Validation extends React.Component {
return (
<>
<h1>Validation</h1>
This example demonstrates using
multiplicities for automatically validating a graph.
This example demonstrates using multiplicities for automatically
validating a graph.
<div
ref={el => {
this.el = el;

5
src/pages/Visibility.js
View File

@ -18,9 +18,8 @@ class Visibility extends React.Component {
return (
<>
<h1>Visibility</h1>
This example demonstrates using
various solutions for hiding and showing cells.
This example demonstrates using various solutions for hiding and showing
cells.
<div
ref={el => {
this.el = el;

5
src/pages/Windows.js
View File

@ -22,9 +22,8 @@ class Windows extends React.Component {
return (
<>
<h1>Windows</h1>
This example demonstrates using
the mxWindow class for displaying windows.
This example demonstrates using the mxWindow class for displaying
windows.
<div
ref={el => {
this.el = el;

5
src/pages/Wrapping.js
View File

@ -16,9 +16,8 @@ class Wrapping extends React.Component {
return (
<>
<h1>Wrapping</h1>
This example demonstrates using HTML markup and
word-wrapping in vertex and edge labels.
This example demonstrates using HTML markup and word-wrapping in vertex
and edge labels.
<div
ref={el => {
this.el = el;

2
src/pages/_app.js
View File

@ -1,6 +1,6 @@
import '../styles/globals.css';
import '../public/css/common.css';
import "./Animation.css";
import './Animation.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;