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:20:16 +11:00
parent 5ccac7f32d
commit c3964305d9
32 changed files with 95 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/Anchors.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Anchors. This example demonstrates defining
* fixed connection points for all shapes.
*/
import React from 'react';
@ -99,6 +96,9 @@ class Anchors extends React.Component {
return (
<>
<h1>Anchors</h1>
This example demonstrates defining
fixed connection points for all shapes.
<div
ref={el => {
this.el = el;

5
src/pages/Animation.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2017, JGraph Ltd
*
* Animation. This example demonstrates using
* SVG animations on edges to visualize the flow in a pipe.
*/
import React from 'react';
@ -19,6 +16,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.
<div
ref={el => {

6
src/pages/AutoLayout.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Autolayout. This example demonstrates running
* and animating a layout algorithm after every change to a graph.
*/
import React from 'react';
@ -30,6 +27,9 @@ class AutoLayout extends React.Component {
return (
<>
<h1>Auto layout</h1>
This example demonstrates running
and animating a layout algorithm after every change to a graph.
<div
ref={el => {
this.el = el;

5
src/pages/Boundary.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Boundary. This example demonstrates
* implementing boundary events in BPMN diagrams.
*/
import React from 'react';
@ -24,6 +21,8 @@ class Boundary extends React.Component {
return (
<>
<h1>Boundary</h1>
This example demonstrates
implementing boundary events in BPMN diagrams.
<div
ref={el => {

5
src/pages/Clipboard.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Clipboard. This example demonstrates using the
* clipboard for providing cross-tab and cross-browser copy and paste.
*/
import React from 'react';
@ -25,6 +22,8 @@ class Clipboard extends React.Component {
return (
<>
<h1>Clipboard</h1>
This example demonstrates using the clipboard
for providing cross-tab and cross-browser copy and paste.
<div
ref={el => {

9
src/pages/Codec.js
View File

@ -1,9 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Codec. This example demonstrates dynamically
* creating a graph from XML and encoding the model into XML, as well
* as changing the default style for edges in-place.
*/
import React from 'react';
@ -14,7 +10,7 @@ import mxUtils from "../mxgraph/util/mxUtils";
import mxConstants from "../mxgraph/util/mxConstants";
import mxEdgeStyle from "../mxgraph/view/mxEdgeStyle";
class MYNAMEHERE extends React.Component {
class Codec extends React.Component {
constructor(props) {
super(props);
}
@ -24,6 +20,9 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Codec</h1>
This example demonstrates dynamically
creating a graph from XML and encoding the model into XML, as well
as changing the default style for edges in-place.
This graph is embedded in the page.
<div className="mxgraph" style="position:relative;overflow:auto;">&lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell

5
src/pages/Collapse.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Collapse. This example demonstrates changing
* the style of a cell based on its collapsed state.
*/
import React from 'react';
@ -19,6 +16,8 @@ class Collapse extends React.Component {
return (
<>
<h1>Collapse</h1>
This example demonstrates changing
the style of a cell based on its collapsed state.
<div
ref={el => {

8
src/pages/Constituent.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Consistuent. This example demonstrates using
* cells as parts of other cells.
*/
import React from 'react';
@ -10,7 +7,6 @@ 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 mxClient from "../mxgraph/mxClient";
class Constituent extends React.Component {
constructor(props) {
@ -21,7 +17,9 @@ class Constituent extends React.Component {
// A container for the graph
return (
<>
<h1>Consistuent</h1>
<h1>Constituent</h1>
This example demonstrates using
cells as parts of other cells.
<div
ref={el => {

6
src/pages/ContextIcons.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Context icons. This example demonstrates adding
* icons to selected vertices to carry out special operations.
*/
import React from 'react';
@ -23,6 +20,9 @@ class ContextIcons extends React.Component {
return (
<>
<h1>Context icons</h1>
This example demonstrates adding
icons to selected vertices to carry out special operations.
<div
ref={el => {
this.el = el;

6
src/pages/Control.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Control. This example demonstrates adding
* controls to specific cells in a graph.
*/
import React from 'react';
@ -25,6 +22,9 @@ class Control extends React.Component {
return (
<>
<h1>Control</h1>
This example demonstrates adding
controls to specific cells in a graph.
<div
ref={el => {
this.el = el;

5
src/pages/DragSource.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Dragsource. This example demonstrates using
* one drag source for multiple graphs and changing the drag icon.
*/
import React from 'react';
@ -27,6 +24,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.
<div
ref={el => {

5
src/pages/Drop.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Drop. This example demonstrates handling
* native drag and drop of images (requires modern browser).
*/
import React from 'react';
@ -22,6 +19,8 @@ class Drop extends React.Component {
return (
<>
<h1>Drop</h1>
This example demonstrates handling native drag and
drop of images (requires modern browser).
<div
ref={el => {

5
src/pages/DynamicLoading.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Dynamic loading. This example demonstrates loading
* graph model data dynamically to limit the number of cells in the model.
*/
import React from 'react';
@ -25,6 +22,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.
<div
ref={el => {

5
src/pages/DynamicStyle.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Dynamic Style. This example demonstrates changing
* the style of a cell dynamically by overriding mxGraphModel.getStyle.
*/
import React from 'react';
@ -21,6 +18,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.
<div
ref={el => {

5
src/pages/DynamicToolbar.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Dynamic toolbar. This example demonstrates changing the
* state of the toolbar at runtime.
*/
import React from 'react';
@ -28,6 +25,8 @@ class DynamicToolbar extends React.Component {
return (
<>
<h1>Toolbar</h1>
This example demonstrates changing the state
of the toolbar at runtime.
<div
ref={el => {

6
src/pages/EdgeTolerance.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Edge tolerance. This example demonstrates increasing
* the tolerance for hit detection on edges.
*/
import React from 'react';
@ -20,6 +17,9 @@ class EdgeTolerance extends React.Component {
return (
<>
<h1>Edge tolerance</h1>
This example demonstrates increasing
the tolerance for hit detection on edges.
<div
ref={el => {
this.el = el;

10
src/pages/Editing.js
View File

@ -1,10 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* 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.
*/
import React from 'react';
@ -23,6 +18,11 @@ 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/>
Double-click the upper/lower half of the cell to edit different fields
of the user object.
<div

15
src/pages/Events.js
View File

@ -1,13 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* 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.
*/
import React from 'react';
@ -34,6 +26,13 @@ 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
point. See also: overlays.html for click event handling.
<div
ref={el => {

5
src/pages/ExtendCanvas.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Extend canvas. This example demonstrates implementing
* an infinite canvas with scrollbars.
*/
import React from 'react';
@ -23,6 +20,8 @@ class ExtendCanvas extends React.Component {
return (
<>
<h1>Extend canvas</h1>
This example demonstrates implementing
an infinite canvas with scrollbars.
<div
ref={el => {

10
src/pages/FileIO.js
View File

@ -1,9 +1,5 @@
/**
*Copyright (c) 2006-2013, JGraph Ltd
*
* File I/O. This example demonstrates reading an
* XML file, writing a custom parser, applying an automatic layout and
* defining a 2-way edge.
* Copyright (c) 2006-2013, JGraph Ltd
*/
import React from 'react';
@ -28,6 +24,10 @@ 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.
<div
ref={el => {
this.el = el;

7
src/pages/FixedIcon.js
View File

@ -1,12 +1,8 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
FixedIcon. This example demonstrates
customizing the icon position in the mxLabel shape.
*/
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";
@ -24,6 +20,9 @@ class FixedIcon extends React.Component {
return (
<>
<h1>Fixed icon</h1>
This example demonstrates
customizing the icon position in the mxLabel shape.
<div
ref={el => {
this.el = el;

5
src/pages/FixedPoints.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Fixed points. This example demonstrates using
fixed connection points for connecting edges to vertices.
*/
import React from 'react';
@ -26,6 +23,8 @@ class FixedPoints extends React.Component {
return (
<>
<h1>Fixed points</h1>
This example demonstrates using
fixed connection points for connecting edges to vertices.
<div
ref={el => {

5
src/pages/Folding.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
* Folding. This example demonstrates
* using a layout to implement a nested group structure.
*/
import React from 'react';
@ -22,6 +19,8 @@ class Folding extends React.Component {
return (
<>
<h1>Folding</h1>
This example demonstrates using a layout to implement a nested group structure.
<div
ref={el => {
this.el = el;

11
src/pages/GraphLayout.js
View File

@ -1,9 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Graphlayout. This example demonstrates using
automatic graph layouts and listening to changes of the graph size
to keep the container size in sync.
*/
import React from 'react';
@ -13,7 +9,7 @@ import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxUtils from "../mxgraph/util/mxUtils";
import mxCircleLayout from "../mxgraph/layout/mxCircleLayout";
class MYNAMEHERE extends React.Component {
class GraphLayout extends React.Component {
constructor(props) {
super(props);
}
@ -23,6 +19,9 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Graphlayout</h1>
This example demonstrates using
automatic graph layouts and listening to changes of the graph size
to keep the container size in sync.
<div
ref={el => {
@ -41,7 +40,7 @@ class MYNAMEHERE extends React.Component {
};
}
export default MYNAMEHERE;
export default GraphLayout;
function main(container)
{

6
src/pages/Grid.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Grid. This example demonstrates drawing
a grid dynamically using HTML 5 canvas.
*/
import React from 'react';
@ -24,6 +21,9 @@ class Grid extends React.Component {
return (
<>
<h1>Grid</h1>
This example demonstrates drawing
a grid dynamically using HTML 5 canvas.
<div
ref={el => {
this.el = el;

6
src/pages/Groups.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Groups. This example demonstrates using
cells as parts of other cells.
*/
import React from 'react';
@ -21,6 +18,9 @@ class Groups extends React.Component {
return (
<>
<h1>Hello, World!</h1>
This example demonstrates using
cells as parts of other cells.
<div
ref={el => {
this.el = el;

12
src/pages/Guides.js
View File

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

4
src/pages/Handles.js
View File

@ -1,7 +1,5 @@
/**
* Copyright (c) 2006-2014, JGraph Ltd
Handles. This example demonstrates using mxHandle to change custom styles interactively.
*/
import React from 'react';
@ -26,6 +24,8 @@ class Handles extends React.Component {
return (
<>
<h1>Handles</h1>
This example demonstrates using mxHandle to change custom styles interactively.
<div
ref={el => {
this.el = el;

6
src/pages/HelloPort.js
View File

@ -1,8 +1,5 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Hello, World!. This example demonstrates using
the isPort hook for visually connecting to another cell.
*/
import React from 'react';
@ -25,6 +22,9 @@ class HelloPort extends React.Component {
return (
<>
<h1>Hello, World!</h1>
This example demonstrates using
the isPort hook for visually connecting to another cell.
<div
ref={el => {
this.el = el;

5
src/pages/HelloWorld.js
View File

@ -1,9 +1,6 @@
/*
* Copyright (c) 2006-2018, JGraph Ltd
* Converted to ES9 syntax/React by David Morrissey 2021
*
* Hello, World!. This example demonstrates using
* a DOM node to create a graph and adding vertices and edges.
*/
import React from 'react';
@ -21,6 +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.
<div
ref={el => {

8
src/pages/HierarchicalLayout.js
View File

@ -1,9 +1,5 @@
/**
* Copyright (c) 2006-2013, 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';
@ -26,6 +22,10 @@ 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.
<div
ref={el => {
this.el = el;

2
src/pages/index.js
View File

@ -69,7 +69,7 @@ export default function Home() {
return (
<div
style={{
width: '1000px',
width: '900px',
margin: '0 auto'
}}
>