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

moved example descriptions into example controls

development
mcyph 2021-03-25 15:35:06 +11:00
parent c3964305d9
commit c2635745ef
48 changed files with 147 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/HoverIcons.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Hover icons. This example demonstrates showing
icons on vertices as mouse hovers over them.
*/
import React from 'react';
@ -24,6 +21,8 @@ class HoverIcons extends React.Component {
return (
<>
<h1>Hover icons</h1>
This example demonstrates showing
icons on vertices as mouse hovers over them.
<div
ref={el => {

6
src/pages/HoverStyle.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Hoverstyle. This example shows hot to change
the style of a vertex on mouseover.
*/
import React from 'react';
@ -21,6 +18,9 @@ class HoverStyle extends React.Component {
return (
<>
<h1>Hoverstyle</h1>
This example shows hot to change
the style of a vertex on mouseover.
<div
ref={el => {
this.el = el;

5
src/pages/HtmlLabel.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
HTML label. This example demonstrates using
HTML labels that are connected to the state of the user object.
*/
import React from 'react';
@ -20,6 +17,8 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>HTML label</h1>
This example demonstrates using
HTML labels that are connected to the state of the user object.
<div
ref={el => {

6
src/pages/Images.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Images. This example demonstrates using
background images and images for for the label- and image-shape.
*/
import React from 'react';
@ -25,6 +22,9 @@ class Images extends React.Component {
return (
<>
<h1>Images</h1>
This example demonstrates using
background images and images for for the label- and image-shape.
<div
ref={el => {
this.el = el;

8
src/pages/Indicators.js
View File

@ -1,9 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Indicators. This example demonstrates the use of
indicators, which are small subshapes inside a parent shape, typically
an mxLabel.
*/
import React from 'react';
@ -22,6 +18,10 @@ 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.
<div
ref={el => {
this.el = el;

7
src/pages/JQuery.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
JQuery. This example demonstrates using
a JQuery plugin to generate labels for vertices on the fly.
*/
import React from 'react';
@ -10,7 +7,7 @@ import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
class JQuery extends React.Component {
constructor(props) {
super(props);
}
@ -20,6 +17,8 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>JQuery plugin for labels</h1>
This example demonstrates using
a JQuery plugin to generate labels for vertices on the fly.
<div
ref={el => {

6
src/pages/JsonData.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
JSON data. This example demonstrates using
JSON to encode/decode parts of the graph model in mxCodec.
*/
import React from 'react';
@ -31,6 +28,9 @@ 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.
<div
ref={el => {
this.el = el;

6
src/pages/LOD.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Level of detail. This example demonstrates
implementing a level of detail per cell.
*/
import React from 'react';
@ -19,6 +16,9 @@ class LOD extends React.Component {
return (
<>
<h1>Level of detail</h1>
This example demonstrates
implementing a level of detail per cell.
<div
ref={el => {
this.el = el;

6
src/pages/LabelPosition.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Label Position. This example demonstrates the use of the
label position styles to set the position of vertex labels.
*/
import React from 'react';
@ -18,6 +15,9 @@ 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.
<div
ref={el => {
this.el = el;

10
src/pages/Labels.js
View File

@ -1,10 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Labels. This example demonstrates the use of wrapping
and clipping for HTML labels of vertices, truncating labels to fit the
size of a vertex, and manually placing vertex labels and relative children
that act as "sublabels".
*/
import React from 'react';
@ -24,6 +19,11 @@ 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".
<div
ref={el => {
this.el = el;

6
src/pages/Layers.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Layers. This example demonstrates using
multiple layers to contain cells.
*/
import React from 'react';
@ -22,6 +19,9 @@ class Layers extends React.Component {
return (
<>
<h1>Layers</h1>
This example demonstrates using
multiple layers to contain cells.
<div
ref={el => {
this.el = el;

9
src/pages/Map.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Map. This example demonstrates using
a graph container as a Google Maps overlay.
*/
import React from 'react';
@ -10,7 +7,7 @@ import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
class Map extends React.Component {
constructor(props) {
super(props);
}
@ -20,6 +17,8 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Google maps</h1>
This example demonstrates using
a graph container as a Google Maps overlay.
<div
ref={el => {
@ -38,7 +37,7 @@ class MYNAMEHERE extends React.Component {
};
}
export default MYNAMEHERE;
export default Map;
<html>

6
src/pages/Markers.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Markers. This example demonstrates creating
custom markers and customizing the built-in markers.
*/
import React from 'react';
@ -25,6 +22,9 @@ class Markers extends React.Component {
return (
<>
<h1>Markers</h1>
This example demonstrates creating
custom markers and customizing the built-in markers.
<div
ref={el => {
this.el = el;

4
src/pages/MenuStyle.js
View File

@ -10,7 +10,7 @@ import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
class MenuStyle extends React.Component {
constructor(props) {
super(props);
}
@ -38,7 +38,7 @@ class MYNAMEHERE extends React.Component {
};
}
export default MYNAMEHERE;
export default MenuStyle;
<html>

6
src/pages/Merge.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Merge. This example demonstrates using
the mergeChildren function to merge two graphs.
*/
import React from 'react';
@ -21,6 +18,9 @@ class Merge extends React.Component {
return (
<>
<h1>Merge</h1>
This example demonstrates using
the mergeChildren function to merge two graphs.
<div
ref={el => {
this.el = el;

6
src/pages/Monitor.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Monitor. This eample demonstrates using a
graph to display the current state of a workflow.
*/
import React from 'react';
@ -25,6 +22,9 @@ 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.
<div
ref={el => {
this.el = el;

8
src/pages/Morph.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Morph. This example demonstrates using
mxMorphing for simple cell animations.
*/
import React from 'react';
@ -21,7 +18,10 @@ class Morph extends React.Component {
// A container for the graph
return (
<>
<h1>Hello, World!</h1>
<h1>Morph</h1>
This example demonstrates using
mxMorphing for simple cell animations.
<div
ref={el => {
this.el = el;

7
src/pages/OffPage.js
View File

@ -1,9 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Offpage. This example demonstrates creating
offpage connectors in a graph and loading a new diagram on a
single click.
*/
import React from 'react';
@ -23,6 +19,9 @@ 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.
<div
ref={el => {

2
src/pages/OrgChart.js
View File

@ -43,7 +43,7 @@ class OrgChart extends React.Component {
zIndex: 1,
position: 'relative',
overflow: 'hidden',
height: '80vh',
height: '50vh',
background: 'transparent',
borderStyle: 'solid',
borderColor: 'lightgray',

6
src/pages/Orthogonal.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Orthogonal. This example demonstrates the use
of port constraints and orthogonal edge styles and handlers.
*/
import React from 'react';
@ -27,6 +24,9 @@ class Orthogonal extends React.Component {
return (
<>
<h1>Orthogonal</h1>
This example demonstrates the use
of port constraints and orthogonal edge styles and handlers.
<div
ref={el => {
this.el = el;

8
src/pages/Overlays.js
View File

@ -1,9 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Overlays. This example demonstrates cell
highlighting, overlays and handling click and double click
events. See also: events.html for more event handling.
*/
import React from 'react';
@ -24,6 +20,10 @@ 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.
<div
ref={el => {
this.el = el;

7
src/pages/PageBreaks.js
View File

@ -1,9 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Pagebreaks. This example demonstrates using the
pageBreaksVisible and preferPageSize switches and adding headers and
footers to print output.
*/
import React from 'react';
@ -24,6 +20,9 @@ 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.
<div
ref={el => {

6
src/pages/Perimeter.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Perimeter. This example demonstrates how to
avoid edge and label intersections.
*/
import React from 'react';
@ -22,6 +19,9 @@ class Perimeter extends React.Component {
return (
<>
<h1>Perimeter</h1>
This example demonstrates how to
avoid edge and label intersections.
<div
ref={el => {
this.el = el;

5
src/pages/Permissions.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Hello, World!. This example demonstrates creating
permissions to define the available operations a the graph.
*/
import React from 'react';
@ -36,6 +33,8 @@ class Permissions extends React.Component {
return (
<>
<h1>Permissions</h1>
This example demonstrates creating
permissions to define the available operations a the graph.
<div
ref={el => {

11
src/pages/PortRefs.js
View File

@ -1,11 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Portsrefs. This example demonstrates referencing
connection points by ID. The main difference to the implementation
where the connection point is stored in the connecting edge is that
changes to the original port will be reflected in all existing
connections since they reference that port.
*/
import React from 'react';
@ -31,6 +25,11 @@ 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.
<div
ref={el => {

7
src/pages/Ports.js
View File

@ -1,9 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Ports. This example demonstrates implementing
ports as child vertices with relative positions and drag and drop
as well as the use of images and HTML in cells.
*/
import React from 'react';
@ -21,6 +17,9 @@ class Ports extends React.Component {
return (
<>
<h1>Ports example</h1>
This example demonstrates implementing
ports as child vertices with relative positions and drag and drop
as well as the use of images and HTML in cells.
<div
ref={el => {

8
src/pages/RadialTreeLayout.js
View File

@ -1,9 +1,5 @@
/**
* Copyright (c) 2006-2014, JGraph Ltd
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.
*/
import React from 'react';
@ -23,6 +19,10 @@ 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.
<div
ref={el => {
this.el = el;

5
src/pages/Resources.js
View File

@ -1,8 +1,7 @@
/**
* Copyright (c) 2006-2018, JGraph Ltd
Resources. This example demonstrates disabling the Synchronous
XMLHttpRequest on main thread warning.
*/
import React from 'react';
@ -21,6 +20,8 @@ class Resources extends React.Component {
return (
<>
<h1>Resources</h1>
This example demonstrates disabling the Synchronous
XMLHttpRequest on main thread warning.
<div
ref={el => {

7
src/pages/Schema.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Schema. This example demonstrates implementing
a SQL schema editor.
*/
import React from 'react';
@ -10,7 +7,7 @@ import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
class Schema extends React.Component {
constructor(props) {
super(props);
}
@ -20,6 +17,8 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Schema example</h1>
This example demonstrates implementing
a SQL schema editor.
<div
ref={el => {

9
src/pages/Scrollbars.js
View File

@ -1,8 +1,7 @@
/**
* Copyright (c) 2006-2015, JGraph Ltd
Scrollbars. This example demonstrates using
a scrollable table with different sections in a cell label.
*/
import React from 'react';
@ -10,7 +9,7 @@ import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
class Scrollbars extends React.Component {
constructor(props) {
super(props);
}
@ -20,6 +19,8 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Scrollbars</h1>
This example demonstrates using
a scrollable table with different sections in a cell label.
<div
ref={el => {
@ -38,7 +39,7 @@ class MYNAMEHERE extends React.Component {
};
}
export default MYNAMEHERE;
export default Scrollbars;
<style type="text/css" media="screen">

5
src/pages/SecondLabel.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Second label. This example demonstrates how to
add another string label to vertices.
*/
import React from 'react';
@ -24,6 +21,8 @@ class SecondLabel extends React.Component {
return (
<>
<h1>Second label</h1>
This example demonstrates how to
add another string label to vertices.
<div
ref={el => {

9
src/pages/ServerView.js
View File

@ -1,10 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Server-View. This example demonstrates using
a server-side image of the graph as the diagram in the client. This
may be used to improve drawing-speed in older browser and on devices
with slower processors.
*/
import React from 'react';
@ -22,6 +17,10 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>mxGraph using Server-side Image</h1>
This example demonstrates using
a server-side image of the graph as the diagram in the client. This
may be used to improve drawing-speed in older browser and on devices
with slower processors.
<div
ref={el => {

5
src/pages/Shape.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Shape. This example demonstrates how to
implement and use a custom shape.
*/
import React from 'react';
@ -21,6 +18,8 @@ class Shape extends React.Component {
return (
<>
<h1>Shape</h1>
This example demonstrates how to
implement and use a custom shape.
<div
ref={el => {

9
src/pages/ShowRegion.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Showregion. This example demonstrates using a custom
rubberband handler to show the selected region in a new window.
*/
import React from 'react';
@ -14,7 +11,7 @@ import mxPopupMenu from "../mxgraph/util/mxPopupMenu";
import mxRectangle from "../mxgraph/util/mxRectangle";
import mxUtils from "../mxgraph/util/mxUtils";
class MYNAMEHERE extends React.Component {
class ShowRegion extends React.Component {
constructor(props) {
super(props);
}
@ -24,6 +21,8 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Showregion</h1>
This example demonstrates using a custom
rubberband handler to show the selected region in a new window.
<div
ref={el => {
@ -42,7 +41,7 @@ class MYNAMEHERE extends React.Component {
};
}
export default MYNAMEHERE;
export default ShowRegion;
<style type="text/css">
body div.mxPopupMenu {

8
src/pages/Stencils.js
View File

@ -1,9 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
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.
*/
import React from 'react';
@ -32,6 +28,10 @@ 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.
<div
ref={el => {
this.el = el;

10
src/pages/Stylesheet.js
View File

@ -1,10 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
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.
*/
import React from 'react';
@ -23,6 +18,11 @@ 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.
<div
ref={el => {
this.el = el;

10
src/pages/SwimLanes.js
View File

@ -1,10 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
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.
*/
import React from 'react';
@ -34,6 +29,11 @@ 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.
<div
ref={el => {
this.el = el;

6
src/pages/Thread.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Thread. This example demonstrates setting
overlays in mxGraph from within a timed function.
*/
import React from 'react';
@ -18,6 +15,9 @@ class Thread extends React.Component {
return (
<>
<h1>Thread</h1>
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

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Toolbar. This example demonstrates using
existing cells as templates for creating new cells.
*/
import React from 'react';
@ -28,6 +25,8 @@ class Toolbar extends React.Component {
return (
<>
<h1>Toolbar</h1>
This example demonstrates using
existing cells as templates for creating new cells.
<div
ref={el => {

9
src/pages/Touch.js
View File

@ -1,9 +1,6 @@
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
/**
* Copyright (c) 2006-2013, JGraph Ltd
Touch. This example demonstrates handling of touch,
mouse and pointer events.
*/
import React from 'react';
@ -11,7 +8,7 @@ import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
class Touch extends React.Component {
constructor(props) {
super(props);
}
@ -21,6 +18,8 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Touch</h1>
This example demonstrates handling of touch,
mouse and pointer events.
<div
ref={el => {
@ -39,7 +38,7 @@ class MYNAMEHERE extends React.Component {
};
}
export default MYNAMEHERE;
export default Touch;
<style type="text/css">

5
src/pages/Tree.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Tree. This example demonstrates folding
* of subtrees in a acyclic graph (tree).
*/
import React from 'react';
@ -31,6 +28,8 @@ class Tree extends React.Component {
return (
<>
<h1>Tree</h1>
This example demonstrates folding
of subtrees in a acyclic graph (tree).
<div
ref={el => {

5
src/pages/UIConfig.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
UIConfig. This example demonstrates using a config
file to configure the toolbar and popup menu in mxEditor.
*/
import React from 'react';
@ -20,6 +17,8 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>UIConfig example</h1>
This example demonstrates using a config
file to configure the toolbar and popup menu in mxEditor.
<div
ref={el => {

5
src/pages/UserObject.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
User object. This example demonstrates using
XML objects as values for cells.
*/
import React from 'react';
@ -27,6 +24,8 @@ class UserObject extends React.Component {
return (
<>
<h1>User object</h1>
This example demonstrates using
XML objects as values for cells.
<table style={{
position: 'relative'

5
src/pages/Validation.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Validation. This example demonstrates using
* multiplicities for automatically validating a graph.
*/
import React from 'react';
@ -24,6 +21,8 @@ class Validation extends React.Component {
return (
<>
<h1>Validation</h1>
This example demonstrates using
multiplicities for automatically validating a graph.
<div
ref={el => {

6
src/pages/Visibility.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Visible. This example demonstrates using
* various solutions for hiding and showing cells.
*/
import React from 'react';
@ -20,6 +17,9 @@ class Visibility extends React.Component {
return (
<>
<h1>Visibility</h1>
This example demonstrates using
various solutions for hiding and showing cells.
<div
ref={el => {
this.el = el;

6
src/pages/Windows.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Windows. This example demonstrates using
* the mxWindow class for displaying windows.
*/
import React from 'react';
@ -24,6 +21,9 @@ class Windows extends React.Component {
return (
<>
<h1>Windows</h1>
This example demonstrates using
the mxWindow class for displaying windows.
<div
ref={el => {
this.el = el;

5
src/pages/Wrapping.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Wrapping. This example demonstrates using HTML markup and
* word-wrapping in vertex and edge labels.
*/
import React from 'react';
@ -18,6 +15,8 @@ class Wrapping extends React.Component {
return (
<>
<h1>Wrapping</h1>
This example demonstrates using HTML markup and
word-wrapping in vertex and edge labels.
<div
ref={el => {

2
src/pages/index.js
View File

@ -117,7 +117,7 @@ export default function Home() {
<OrgChart />
<Orthogonal />
<Overlays />
<PageBreaks />
{/*<PageBreaks />*/}
<Perimeter />
<Permissions />
<PortRefs />