From 0b51e1da2a8716ad01d51aa9c20514aa8379ff63 Mon Sep 17 00:00:00 2001 From: mcyph <20507948+mcyph@users.noreply.github.com> Date: Fri, 26 Mar 2021 12:45:54 +1100 Subject: [PATCH] cleanups and bugfixes --- src/pages/Animation.js | 7 ++-- src/pages/AutoLayout.js | 2 +- src/pages/Collapse.js | 72 ++++++++++++++++----------------- src/pages/Constituent.js | 43 +++++++++----------- src/pages/ContextIcons.js | 5 +-- src/pages/DragSource.js | 11 +++-- src/pages/Drop.js | 5 +-- src/pages/DynamicLoading.js | 5 +-- src/pages/DynamicStyle.js | 5 +-- src/pages/DynamicToolbar.js | 6 +-- src/pages/EdgeTolerance.js | 11 +++-- src/pages/Editing.js | 13 +++--- src/pages/Events.js | 14 +++---- src/pages/ExtendCanvas.js | 5 +-- src/pages/FileIO.js | 22 +++++----- src/pages/FixedIcon.js | 13 +++--- src/pages/FixedPoints.js | 5 +-- src/pages/Folding.js | 4 +- src/pages/Grid.js | 7 ++-- src/pages/Groups.js | 8 ++-- src/pages/Guides.js | 11 +++-- src/pages/Handles.js | 4 +- src/pages/HelloPort.js | 5 +-- src/pages/HelloWorld.js | 10 ++--- src/pages/HierarchicalLayout.js | 9 ++--- src/pages/HoverIcons.js | 9 ++--- src/pages/HoverStyle.js | 6 +-- src/pages/Images.js | 7 ++-- src/pages/Indicators.js | 6 +-- src/pages/JsonData.js | 5 +-- src/pages/LOD.js | 4 +- src/pages/LabelPosition.js | 5 +-- src/pages/Labels.js | 13 +++--- src/pages/Layers.js | 4 +- src/pages/Markers.js | 5 +-- src/pages/Merge.js | 9 ++--- src/pages/Monitor.js | 9 ++--- src/pages/Morph.js | 4 +- src/pages/OffPage.js | 10 ++--- src/pages/OrgChart.js | 31 +++++++------- src/pages/Orthogonal.js | 19 +++++---- src/pages/Overlays.js | 6 +-- src/pages/PageBreaks.js | 12 +++--- src/pages/Perimeter.js | 8 ++-- src/pages/Permissions.js | 7 ++-- src/pages/PortRefs.js | 10 ++--- src/pages/Previews.js | 16 ++++++-- src/pages/RadialTreeLayout.js | 7 ++-- src/pages/Resources.js | 5 +-- src/pages/SecondLabel.js | 6 +-- src/pages/Shape.js | 6 +-- src/pages/Stencils.js | 28 ++++++------- src/pages/Stylesheet.js | 10 ++--- src/pages/SwimLanes.js | 12 +++--- src/pages/Template.js | 22 +++++----- src/pages/Thread.js | 5 +-- src/pages/Toolbar.js | 5 +-- src/pages/Tree.js | 6 +-- src/pages/UserObject.js | 43 +++++++++++--------- src/pages/Validation.js | 5 +-- src/pages/Visibility.js | 5 +-- src/pages/Windows.js | 5 +-- src/pages/Wrapping.js | 5 +-- src/pages/_app.js | 2 +- 64 files changed, 307 insertions(+), 377 deletions(-) diff --git a/src/pages/Animation.js b/src/pages/Animation.js index 41f33c76e..d9f719fe3 100644 --- a/src/pages/Animation.js +++ b/src/pages/Animation.js @@ -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 ( <>

Animation

- 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.
{ this.el = el; diff --git a/src/pages/AutoLayout.js b/src/pages/AutoLayout.js index 9020a4b64..f9b912a17 100644 --- a/src/pages/AutoLayout.js +++ b/src/pages/AutoLayout.js @@ -70,7 +70,7 @@ class AutoLayout extends React.Component { ); }); } - }; + } } class MyCustomEdgeHandler extends mxEdgeHandler { diff --git a/src/pages/Collapse.js b/src/pages/Collapse.js index 96ee431a3..2a214e0fa 100644 --- a/src/pages/Collapse.js +++ b/src/pages/Collapse.js @@ -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 ( <>

Collapse

- 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.
{ this.el = el; @@ -37,44 +37,42 @@ class Collapse extends React.Component { }; componentDidMount = () => { - const graph = new mxGraph(this.el); + class MyCustomModel extends mxGraphModel { + getStyle(cell) { + // Extends mxGraphModel.getStyle to show an image when collapsed + if (cell != null) { + 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; + } + } + + const graph = new mxGraph(this.el, new MyCustomModel()); const parent = graph.getDefaultParent(); - // Extends mxGraphModel.getStyle to show an image when collapsed - const modelGetStyle = graph.model.getStyle; - graph.model.getStyle = function(cell) { - if (cell != null) { - let style = modelGetStyle.apply(this, arguments); - - if (this.isCollapsed(cell)) { - style = - `${style};shape=image;image=http://www.jgraph.com/images/mxgraph.gif;` + - `noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`; - } - - return style; - } - - return null; - }; - - graph.getModel().beginUpdate(); - try { - const v1 = graph.insertVertex( + graph.batchUpdate(() => { + const v1 = graph.insertVertex({ parent, - null, - 'Container', - 20, - 20, - 200, - 200, - 'shape=swimlane;startSize=20;' - ); + 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(v1, null, 'Hello,', 10, 40, 120, 80); - } finally { - graph.getModel().endUpdate(); - } + + const v11 = graph.insertVertex({ + parent: v1, + value: 'Hello,', + position: [10, 40], + size: [120, 80], + }); + }); }; } diff --git a/src/pages/Constituent.js b/src/pages/Constituent.js index e179b1056..a064dfb27 100644 --- a/src/pages/Constituent.js +++ b/src/pages/Constituent.js @@ -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 ( <>

Constituent

- This example demonstrates using - cells as parts of other cells. - + This example demonstrates using cells as parts of other cells.
{ 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;', + }); + }); } } diff --git a/src/pages/ContextIcons.js b/src/pages/ContextIcons.js index 77460946b..da8280275 100644 --- a/src/pages/ContextIcons.js +++ b/src/pages/ContextIcons.js @@ -21,9 +21,8 @@ class ContextIcons extends React.Component { return ( <>

Context icons

- 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.
{ this.el = el; diff --git a/src/pages/DragSource.js b/src/pages/DragSource.js index e04db595a..f3f655311 100644 --- a/src/pages/DragSource.js +++ b/src/pages/DragSource.js @@ -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 ( <>

Dragsource

- 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.
{ this.el = el; diff --git a/src/pages/Drop.js b/src/pages/Drop.js index fc5174d11..cbc383418 100644 --- a/src/pages/Drop.js +++ b/src/pages/Drop.js @@ -20,9 +20,8 @@ class Drop extends React.Component { return ( <>

Drop

- 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).
{ this.el = el; diff --git a/src/pages/DynamicLoading.js b/src/pages/DynamicLoading.js index e6f528115..01e5049a2 100644 --- a/src/pages/DynamicLoading.js +++ b/src/pages/DynamicLoading.js @@ -23,9 +23,8 @@ class DynamicLoading extends React.Component { return ( <>

Dynamic loading

- 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.
{ this.el = el; diff --git a/src/pages/DynamicStyle.js b/src/pages/DynamicStyle.js index 794d1798c..5b8bcbfd2 100644 --- a/src/pages/DynamicStyle.js +++ b/src/pages/DynamicStyle.js @@ -19,9 +19,8 @@ class DynamicStyle extends React.Component { return ( <>

Dynamic Style

- 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.
{ this.el = el; diff --git a/src/pages/DynamicToolbar.js b/src/pages/DynamicToolbar.js index cdabd7cec..df2ac2135 100644 --- a/src/pages/DynamicToolbar.js +++ b/src/pages/DynamicToolbar.js @@ -26,9 +26,7 @@ class DynamicToolbar extends React.Component { return ( <>

Toolbar

- This example demonstrates changing the state - of the toolbar at runtime. - + This example demonstrates changing the state of the toolbar at runtime.
{ 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', }} /> diff --git a/src/pages/EdgeTolerance.js b/src/pages/EdgeTolerance.js index ab283c3e2..f7fd6ada6 100644 --- a/src/pages/EdgeTolerance.js +++ b/src/pages/EdgeTolerance.js @@ -18,9 +18,8 @@ class EdgeTolerance extends React.Component { return ( <>

Edge tolerance

- This example demonstrates increasing - the tolerance for hit detection on edges. - + This example demonstrates increasing the tolerance for hit detection on + edges.
{ 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 diff --git a/src/pages/Editing.js b/src/pages/Editing.js index a30f9ce36..700b82591 100644 --- a/src/pages/Editing.js +++ b/src/pages/Editing.js @@ -19,11 +19,12 @@ class Editing extends React.Component { return ( <>

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.

- + 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. +
+
Double-click the upper/lower half of the cell to edit different fields of the user object.
); - }; + } componentDidMount() { class MyCustomGraph extends mxGraph { diff --git a/src/pages/Events.js b/src/pages/Events.js index 533a7d9d9..6a05b2e50 100644 --- a/src/pages/Events.js +++ b/src/pages/Events.js @@ -27,14 +27,12 @@ class Events extends React.Component { return ( <>

Events

- 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. -
{ this.el = el; @@ -43,7 +41,7 @@ class Events extends React.Component { /> ); - }; + } componentDidMount() { // Program starts here. Creates a sample graph in the dynamically diff --git a/src/pages/ExtendCanvas.js b/src/pages/ExtendCanvas.js index 1517d6479..2c0584f5b 100644 --- a/src/pages/ExtendCanvas.js +++ b/src/pages/ExtendCanvas.js @@ -21,9 +21,8 @@ class ExtendCanvas extends React.Component { return ( <>

Extend canvas

- This example demonstrates implementing - an infinite canvas with scrollbars. - + This example demonstrates implementing an infinite canvas with + scrollbars.
{ this.el = el; diff --git a/src/pages/FileIO.js b/src/pages/FileIO.js index a492dcff9..66b5bbe34 100644 --- a/src/pages/FileIO.js +++ b/src/pages/FileIO.js @@ -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 ( <>

File I/O

- 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.
{ this.el = el; diff --git a/src/pages/FixedIcon.js b/src/pages/FixedIcon.js index 58409428d..fe352c045 100644 --- a/src/pages/FixedIcon.js +++ b/src/pages/FixedIcon.js @@ -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 ( <>

Fixed icon

- This example demonstrates - customizing the icon position in the mxLabel shape. - + This example demonstrates customizing the icon position in the mxLabel + shape.
{ this.el = el; diff --git a/src/pages/FixedPoints.js b/src/pages/FixedPoints.js index a54074041..c0b97bb9c 100644 --- a/src/pages/FixedPoints.js +++ b/src/pages/FixedPoints.js @@ -24,9 +24,8 @@ class FixedPoints extends React.Component { return ( <>

Fixed points

- This example demonstrates using - fixed connection points for connecting edges to vertices. - + This example demonstrates using fixed connection points for connecting + edges to vertices.
{ this.el = el; diff --git a/src/pages/Folding.js b/src/pages/Folding.js index a314884d4..a9a3adf97 100644 --- a/src/pages/Folding.js +++ b/src/pages/Folding.js @@ -20,8 +20,8 @@ class Folding extends React.Component { return ( <>

Folding

- This example demonstrates using a layout to implement a nested group structure. - + This example demonstrates using a layout to implement a nested group + structure.
{ this.el = el; diff --git a/src/pages/Grid.js b/src/pages/Grid.js index 287bc7c88..b1f6e0a5d 100644 --- a/src/pages/Grid.js +++ b/src/pages/Grid.js @@ -22,9 +22,8 @@ class Grid extends React.Component { return ( <>

Grid

- This example demonstrates drawing - a grid dynamically using HTML 5 canvas. - + This example demonstrates drawing a grid dynamically using HTML 5 + canvas.
{ this.el = el; @@ -169,7 +168,7 @@ class Grid extends React.Component { ctx.stroke(); } } - } + }; } catch (e) { mxLog.show(); mxLog.debug('Using background image'); diff --git a/src/pages/Groups.js b/src/pages/Groups.js index b3cb9513f..d90a44399 100644 --- a/src/pages/Groups.js +++ b/src/pages/Groups.js @@ -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 ( <>

Hello, World!

- This example demonstrates using - cells as parts of other cells. - + This example demonstrates using cells as parts of other cells.
{ this.el = el; diff --git a/src/pages/Guides.js b/src/pages/Guides.js index 27bc49763..15178cd84 100644 --- a/src/pages/Guides.js +++ b/src/pages/Guides.js @@ -23,12 +23,11 @@ class Guides extends React.Component { return ( <>

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 - 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.
{ this.el = el; diff --git a/src/pages/Handles.js b/src/pages/Handles.js index 06ad518c4..fc1b91a7e 100644 --- a/src/pages/Handles.js +++ b/src/pages/Handles.js @@ -25,8 +25,8 @@ class Handles extends React.Component { return ( <>

Handles

- This example demonstrates using mxHandle to change custom styles interactively. - + This example demonstrates using mxHandle to change custom styles + interactively.
{ this.el = el; diff --git a/src/pages/HelloPort.js b/src/pages/HelloPort.js index f1be8db27..c23db7d0f 100644 --- a/src/pages/HelloPort.js +++ b/src/pages/HelloPort.js @@ -23,9 +23,8 @@ class HelloPort extends React.Component { return ( <>

Hello, World!

- 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.
{ this.el = el; diff --git a/src/pages/HelloWorld.js b/src/pages/HelloWorld.js index 14ad58b6f..4cdab7aa8 100644 --- a/src/pages/HelloWorld.js +++ b/src/pages/HelloWorld.js @@ -1,5 +1,5 @@ /* - * Copyright (c) 2006-2018, JGraph Ltd + * Copyright (c) 2006-2018, JGraph Ltd * Converted to ES9 syntax/React by David Morrissey 2021 */ @@ -18,9 +18,8 @@ class HelloWorld extends React.Component { return ( <>

Hello, World!

- 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.
{ 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 diff --git a/src/pages/HierarchicalLayout.js b/src/pages/HierarchicalLayout.js index 234bc051b..90b6fefae 100644 --- a/src/pages/HierarchicalLayout.js +++ b/src/pages/HierarchicalLayout.js @@ -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 ( <>

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. - + 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.el = el; diff --git a/src/pages/HoverIcons.js b/src/pages/HoverIcons.js index 7e5fc902d..8b51c85dd 100644 --- a/src/pages/HoverIcons.js +++ b/src/pages/HoverIcons.js @@ -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 ( <>

Hover icons

- This example demonstrates showing - icons on vertices as mouse hovers over them. - + This example demonstrates showing icons on vertices as mouse hovers over + them.
{ this.el = el; diff --git a/src/pages/HoverStyle.js b/src/pages/HoverStyle.js index cc651d36d..9fc28cd66 100644 --- a/src/pages/HoverStyle.js +++ b/src/pages/HoverStyle.js @@ -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 ( <>

Hoverstyle

- 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.
{ this.el = el; diff --git a/src/pages/Images.js b/src/pages/Images.js index 350942dc1..25114e8fc 100644 --- a/src/pages/Images.js +++ b/src/pages/Images.js @@ -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 ( <>

Images

- 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.
{ this.el = el; diff --git a/src/pages/Indicators.js b/src/pages/Indicators.js index c08bd7946..db51b2436 100644 --- a/src/pages/Indicators.js +++ b/src/pages/Indicators.js @@ -19,10 +19,8 @@ class Indicators extends React.Component { return ( <>

Indicators

- 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.
{ this.el = el; diff --git a/src/pages/JsonData.js b/src/pages/JsonData.js index 44b030a3c..da6945ef0 100644 --- a/src/pages/JsonData.js +++ b/src/pages/JsonData.js @@ -29,9 +29,8 @@ class JsonData extends React.Component { return ( <>

JSON data

- 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.
{ this.el = el; diff --git a/src/pages/LOD.js b/src/pages/LOD.js index b75cc4c77..75d51e5c1 100644 --- a/src/pages/LOD.js +++ b/src/pages/LOD.js @@ -17,9 +17,7 @@ class LOD extends React.Component { return ( <>

Level of detail

- This example demonstrates - implementing a level of detail per cell. - + This example demonstrates implementing a level of detail per cell.
{ this.el = el; diff --git a/src/pages/LabelPosition.js b/src/pages/LabelPosition.js index 093fc3d33..600ffa94a 100644 --- a/src/pages/LabelPosition.js +++ b/src/pages/LabelPosition.js @@ -16,9 +16,8 @@ class LabelPosition extends React.Component { return ( <>

Label Position

- 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.
{ this.el = el; diff --git a/src/pages/Labels.js b/src/pages/Labels.js index 4f7e76168..35f900f6c 100644 --- a/src/pages/Labels.js +++ b/src/pages/Labels.js @@ -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 ( <>

Hello, World!

- 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".
{ this.el = el; diff --git a/src/pages/Layers.js b/src/pages/Layers.js index 9b27629ed..d099b5609 100644 --- a/src/pages/Layers.js +++ b/src/pages/Layers.js @@ -20,9 +20,7 @@ class Layers extends React.Component { return ( <>

Layers

- This example demonstrates using - multiple layers to contain cells. - + This example demonstrates using multiple layers to contain cells.
{ this.el = el; diff --git a/src/pages/Markers.js b/src/pages/Markers.js index b20b8c52b..16cf276dc 100644 --- a/src/pages/Markers.js +++ b/src/pages/Markers.js @@ -23,9 +23,8 @@ class Markers extends React.Component { return ( <>

Markers

- This example demonstrates creating - custom markers and customizing the built-in markers. - + This example demonstrates creating custom markers and customizing the + built-in markers.
{ this.el = el; diff --git a/src/pages/Merge.js b/src/pages/Merge.js index 45302f1b8..24881bcbe 100644 --- a/src/pages/Merge.js +++ b/src/pages/Merge.js @@ -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 ( <>

Merge

- This example demonstrates using - the mergeChildren function to merge two graphs. - + This example demonstrates using the mergeChildren function to merge two + graphs.
{ this.el = el; diff --git a/src/pages/Monitor.js b/src/pages/Monitor.js index b2c228489..7d20af407 100644 --- a/src/pages/Monitor.js +++ b/src/pages/Monitor.js @@ -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 ( <>

mxGraph Workflow Monitor

- 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.
{ this.el = el; diff --git a/src/pages/Morph.js b/src/pages/Morph.js index 09e7db71c..9f85bbfa0 100644 --- a/src/pages/Morph.js +++ b/src/pages/Morph.js @@ -20,9 +20,7 @@ class Morph extends React.Component { return ( <>

Morph

- This example demonstrates using - mxMorphing for simple cell animations. - + This example demonstrates using mxMorphing for simple cell animations.
{ this.el = el; diff --git a/src/pages/OffPage.js b/src/pages/OffPage.js index b190b1290..09ad13823 100644 --- a/src/pages/OffPage.js +++ b/src/pages/OffPage.js @@ -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 ( <>

Offpage connector

- 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.
{ this.el = el; diff --git a/src/pages/OrgChart.js b/src/pages/OrgChart.js index f30ec85a4..18836bfb1 100644 --- a/src/pages/OrgChart.js +++ b/src/pages/OrgChart.js @@ -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', }} /> +
{ + 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(); diff --git a/src/pages/Orthogonal.js b/src/pages/Orthogonal.js index 0dbc4e814..32f80f732 100644 --- a/src/pages/Orthogonal.js +++ b/src/pages/Orthogonal.js @@ -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 ( <>

Orthogonal

- 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.
{ this.el = el; diff --git a/src/pages/Overlays.js b/src/pages/Overlays.js index 319ca16fb..c14008bb5 100644 --- a/src/pages/Overlays.js +++ b/src/pages/Overlays.js @@ -21,10 +21,8 @@ class Overlays extends React.Component { return ( <>

Overlays

- 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.
{ this.el = el; diff --git a/src/pages/PageBreaks.js b/src/pages/PageBreaks.js index 3602f57c5..0d6c6fb9f 100644 --- a/src/pages/PageBreaks.js +++ b/src/pages/PageBreaks.js @@ -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 ( <>

Pagebreaks

- 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.
{ this.el = el; diff --git a/src/pages/Perimeter.js b/src/pages/Perimeter.js index 77fffa787..61cc3ba52 100644 --- a/src/pages/Perimeter.js +++ b/src/pages/Perimeter.js @@ -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 ( <>

Perimeter

- This example demonstrates how to - avoid edge and label intersections. - + This example demonstrates how to avoid edge and label intersections.
{ this.el = el; diff --git a/src/pages/Permissions.js b/src/pages/Permissions.js index acfceb458..c891a893e 100644 --- a/src/pages/Permissions.js +++ b/src/pages/Permissions.js @@ -34,9 +34,8 @@ class Permissions extends React.Component { return ( <>

Permissions

- 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.
{ this.el = el; @@ -45,7 +44,7 @@ class Permissions extends React.Component { position: 'relative', overflow: 'hidden', height: '300px', - //background: "url('editors/images/grid.gif')", + // background: "url('editors/images/grid.gif')", }} /> diff --git a/src/pages/PortRefs.js b/src/pages/PortRefs.js index 29ef62b6d..dfaa86d08 100644 --- a/src/pages/PortRefs.js +++ b/src/pages/PortRefs.js @@ -26,12 +26,10 @@ class PortRefs extends React.Component { return ( <>

Port References Example

- 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.
{ this.el = el; diff --git a/src/pages/Previews.js b/src/pages/Previews.js index 7a82d5660..37608cbc0 100644 --- a/src/pages/Previews.js +++ b/src/pages/Previews.js @@ -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 -
- +
+
) : ( diff --git a/src/pages/RadialTreeLayout.js b/src/pages/RadialTreeLayout.js index d40c37d36..5d0b19917 100644 --- a/src/pages/RadialTreeLayout.js +++ b/src/pages/RadialTreeLayout.js @@ -20,10 +20,9 @@ class RadialTreeLayout extends React.Component { return ( <>

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. - + 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.el = el; diff --git a/src/pages/Resources.js b/src/pages/Resources.js index 20818f07a..10e6d13a7 100644 --- a/src/pages/Resources.js +++ b/src/pages/Resources.js @@ -20,9 +20,8 @@ class Resources extends React.Component { return ( <>

Resources

- This example demonstrates disabling the Synchronous - XMLHttpRequest on main thread warning. - + This example demonstrates disabling the Synchronous XMLHttpRequest on + main thread warning.
{ this.el = el; diff --git a/src/pages/SecondLabel.js b/src/pages/SecondLabel.js index b83b4b77a..f79a617e5 100644 --- a/src/pages/SecondLabel.js +++ b/src/pages/SecondLabel.js @@ -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 ( <>

Second label

- This example demonstrates how to - add another string label to vertices. - + This example demonstrates how to add another string label to vertices.
{ this.el = el; diff --git a/src/pages/Shape.js b/src/pages/Shape.js index 7295d5a2a..e086a4c5e 100644 --- a/src/pages/Shape.js +++ b/src/pages/Shape.js @@ -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 ( <>

Shape

- This example demonstrates how to - implement and use a custom shape. - + This example demonstrates how to implement and use a custom shape.
{ this.el = el; diff --git a/src/pages/Stencils.js b/src/pages/Stencils.js index 46775ccbc..6f85dcf03 100644 --- a/src/pages/Stencils.js +++ b/src/pages/Stencils.js @@ -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 ( <>

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. - + 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.el = el; diff --git a/src/pages/Stylesheet.js b/src/pages/Stylesheet.js index 910684ae3..93ba1dabc 100644 --- a/src/pages/Stylesheet.js +++ b/src/pages/Stylesheet.js @@ -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 ( <>

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. - + 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.el = el; diff --git a/src/pages/SwimLanes.js b/src/pages/SwimLanes.js index eea25db14..71f9853be 100644 --- a/src/pages/SwimLanes.js +++ b/src/pages/SwimLanes.js @@ -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 ( <>

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. - + 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.el = el; diff --git a/src/pages/Template.js b/src/pages/Template.js index 2f4b11e6c..05f6a793a 100644 --- a/src/pages/Template.js +++ b/src/pages/Template.js @@ -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; - - - diff --git a/src/pages/Thread.js b/src/pages/Thread.js index f9b11246d..7ee019df2 100644 --- a/src/pages/Thread.js +++ b/src/pages/Thread.js @@ -16,9 +16,8 @@ class Thread extends React.Component { return ( <>

Thread

- This example demonstrates setting - overlays in mxGraph from within a timed function. - + This example demonstrates setting overlays in mxGraph from within a + timed function.
{ this.el = el; diff --git a/src/pages/Toolbar.js b/src/pages/Toolbar.js index 0ad822ece..5c0c8c451 100644 --- a/src/pages/Toolbar.js +++ b/src/pages/Toolbar.js @@ -26,9 +26,8 @@ class Toolbar extends React.Component { return ( <>

Toolbar

- This example demonstrates using - existing cells as templates for creating new cells. - + This example demonstrates using existing cells as templates for creating + new cells.
{ this.el = el; diff --git a/src/pages/Tree.js b/src/pages/Tree.js index c12a793d9..df18c13f3 100644 --- a/src/pages/Tree.js +++ b/src/pages/Tree.js @@ -29,9 +29,7 @@ class Tree extends React.Component { return ( <>

Tree

- This example demonstrates folding - of subtrees in a acyclic graph (tree). - + This example demonstrates folding of subtrees in a acyclic graph (tree).
{ 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', }} /> diff --git a/src/pages/UserObject.js b/src/pages/UserObject.js index 3615fb328..d23a06379 100644 --- a/src/pages/UserObject.js +++ b/src/pages/UserObject.js @@ -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 ( <>

User object

- This example demonstrates using - XML objects as values for cells. - - + This example demonstrates using XML objects as values for cells. +
{this.el = el;}} + ref={el => { + this.el = el; + }} style={{ border: 'solid 1px black', overflow: 'hidden', height: '241px', - cursor: 'default' + cursor: 'default', }} />
{this.propertiesEl = el;}} + ref={el => { + this.propertiesEl = el; + }} style={{ border: 'solid 1px black', - padding: '10px' + padding: '10px', }} />
-
{this.el2 = el;}} + ref={el => { + this.el2 = el; + }} /> ); diff --git a/src/pages/Validation.js b/src/pages/Validation.js index 32fe6c868..c66d15d21 100644 --- a/src/pages/Validation.js +++ b/src/pages/Validation.js @@ -22,9 +22,8 @@ class Validation extends React.Component { return ( <>

Validation

- This example demonstrates using - multiplicities for automatically validating a graph. - + This example demonstrates using multiplicities for automatically + validating a graph.
{ this.el = el; diff --git a/src/pages/Visibility.js b/src/pages/Visibility.js index 47f104f72..ae6bb2250 100644 --- a/src/pages/Visibility.js +++ b/src/pages/Visibility.js @@ -18,9 +18,8 @@ class Visibility extends React.Component { return ( <>

Visibility

- This example demonstrates using - various solutions for hiding and showing cells. - + This example demonstrates using various solutions for hiding and showing + cells.
{ this.el = el; diff --git a/src/pages/Windows.js b/src/pages/Windows.js index 11195d8df..91633ef3d 100644 --- a/src/pages/Windows.js +++ b/src/pages/Windows.js @@ -22,9 +22,8 @@ class Windows extends React.Component { return ( <>

Windows

- This example demonstrates using - the mxWindow class for displaying windows. - + This example demonstrates using the mxWindow class for displaying + windows.
{ this.el = el; diff --git a/src/pages/Wrapping.js b/src/pages/Wrapping.js index a91ebf23e..1a94b770f 100644 --- a/src/pages/Wrapping.js +++ b/src/pages/Wrapping.js @@ -16,9 +16,8 @@ class Wrapping extends React.Component { return ( <>

Wrapping

- 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.
{ this.el = el; diff --git a/src/pages/_app.js b/src/pages/_app.js index 2198ca333..cb91fe907 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -1,6 +1,6 @@ import '../styles/globals.css'; import '../public/css/common.css'; -import "./Animation.css"; +import './Animation.css'; function MyApp({ Component, pageProps }) { return ;