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

started integrating more examples into the next.js app

development
mcyph 2021-03-25 11:21:31 +11:00
parent 8afd272fbd
commit dad45f61dd
20 changed files with 1669 additions and 1819 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/mxgraph/layout/mxCompactTreeLayout.js
View File

@ -7,6 +7,10 @@
import mxDictionary from '../util/mxDictionary'; import mxDictionary from '../util/mxDictionary';
import mxPoint from '../util/mxPoint'; import mxPoint from '../util/mxPoint';
import mxGraphLayout from './mxGraphLayout'; import mxGraphLayout from './mxGraphLayout';
import mxCellPath from "../model/mxCellPath";
import mxRectangle from "../util/mxRectangle";
import mxUtils from "../util/mxUtils";
import WeightedCellSorter from "./WeightedCellSorter";
class mxCompactTreeLayout extends mxGraphLayout { class mxCompactTreeLayout extends mxGraphLayout {
/** /**

2
src/mxgraph/shape/mxRhombus.js
View File

@ -5,6 +5,8 @@
*/ */
import mxShape from './mxShape'; import mxShape from './mxShape';
import mxPoint from '../util/mxPoint'; import mxPoint from '../util/mxPoint';
import mxUtils from "../util/mxUtils";
import mxConstants from "../util/mxConstants";
class mxRhombus extends mxShape { class mxRhombus extends mxShape {
/** /**

3
src/mxgraph/util/mxWindow.js
View File

@ -9,6 +9,9 @@ import mxEventObject from './mxEventObject';
import mxEventSource from './mxEventSource'; import mxEventSource from './mxEventSource';
import mxUtils from './mxUtils'; import mxUtils from './mxUtils';
import mxEvent from './mxEvent'; import mxEvent from './mxEvent';
import mxClient from "../mxClient";
import mxConstants from "./mxConstants";
class mxWindow extends mxEventSource { class mxWindow extends mxEventSource {
/** /**

1
src/mxgraph/view/mxPerimeter.js
View File

@ -6,6 +6,7 @@
import mxUtils from '../util/mxUtils'; import mxUtils from '../util/mxUtils';
import mxPoint from '../util/mxPoint'; import mxPoint from '../util/mxPoint';
import mxConstants from "../util/mxConstants";
const mxPerimeter = { const mxPerimeter = {
/** /**

6
src/mxgraph/view/mxSwimlaneManager.js
View File

@ -4,6 +4,12 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
*/ */
import mxEventSource from "../util/mxEventSource";
import mxUtils from "../util/mxUtils";
import mxEvent from "../util/mxEvent";
import mxConstants from "../util/mxConstants";
import mxRectangle from "../util/mxRectangle";
class mxSwimlaneManager extends mxEventSource { class mxSwimlaneManager extends mxEventSource {
/** /**
* Variable: graph * Variable: graph

2
src/pages/DragSource.js
View File

@ -123,7 +123,7 @@ class DragSource extends React.Component {
const img = mxUtils.createImage('images/icons48/gear.png'); const img = mxUtils.createImage('images/icons48/gear.png');
img.style.width = '48px'; img.style.width = '48px';
img.style.height = '48px'; img.style.height = '48px';
document.body.appendChild(img); this.el.appendChild(img);
// Creates the element that is being for the actual preview. // Creates the element that is being for the actual preview.
const dragElt = document.createElement('div'); const dragElt = document.createElement('div');

115
src/pages/Perimeter.js
View File

@ -9,8 +9,10 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent'; import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxUtils from "../mxgraph/util/mxUtils";
import mxGraphView from "../mxgraph/view/mxGraphView";
class MYNAMEHERE extends React.Component { class Perimeter extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -20,56 +22,45 @@ class MYNAMEHERE extends React.Component {
return ( return (
<> <>
<h1>Perimeter example for mxGraph</h1> <h1>Perimeter example for mxGraph</h1>
<div <div
ref={el => { ref={el => {
this.el = el; this.el = el;
}} }}
style={{ style={{
overflow: 'hidden',
position: 'relative',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}} }}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Redirects the perimeter to the label bounds if intersection // Redirects the perimeter to the label bounds if intersection
// between edge and label is found // between edge and label is found
mxGraphViewGetPerimeterPoint = mxGraphView.prototype.getPerimeterPoint; const mxGraphViewGetPerimeterPoint =
mxGraphView.prototype.getPerimeterPoint = function(terminal, next, orthogonal, border) mxGraphView.prototype.getPerimeterPoint;
{ mxGraphView.prototype.getPerimeterPoint = function(
terminal,
next,
orthogonal,
border
) {
let point = mxGraphViewGetPerimeterPoint.apply(this, arguments); let point = mxGraphViewGetPerimeterPoint.apply(this, arguments);
if (point != null) if (point != null) {
{ const perimeter = this.getPerimeterFunction(terminal);
let perimeter = this.getPerimeterFunction(terminal);
if (terminal.text != null && terminal.text.boundingBox != null) if (terminal.text != null && terminal.text.boundingBox != null) {
{
// Adds a small border to the label bounds // Adds a small border to the label bounds
let b = terminal.text.boundingBox.clone(); const b = terminal.text.boundingBox.clone();
b.grow(3) b.grow(3);
if (mxUtils.rectangleIntersectsSegment(b, point, next)) if (mxUtils.rectangleIntersectsSegment(b, point, next)) {
{
point = perimeter(b, terminal, next, orthogonal); point = perimeter(b, terminal, next, orthogonal);
} }
} }
@ -79,7 +70,7 @@ export default MYNAMEHERE;
}; };
// Creates the graph inside the given container // Creates the graph inside the given container
let graph = new mxGraph(container); const graph = new mxGraph(this.el);
graph.setVertexLabelsMovable(true); graph.setVertexLabelsMovable(true);
graph.setConnectable(true); graph.setConnectable(true);
@ -92,34 +83,48 @@ export default MYNAMEHERE;
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
// Adds cells to the model in a single step // Adds cells to the model in a single step
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{ const v1 = graph.insertVertex(
var v1 = graph.insertVertex(parent, null, 'Label', 20, 20, 80, 30, 'verticalLabelPosition=bottom'); parent,
var v2 = graph.insertVertex(parent, null, 'Label', 200, 20, 80, 30, 'verticalLabelPosition=bottom'); null,
var v3 = graph.insertVertex(parent, null, 'Label', 20, 150, 80, 30, 'verticalLabelPosition=bottom'); 'Label',
20,
20,
80,
30,
'verticalLabelPosition=bottom'
);
const v2 = graph.insertVertex(
parent,
null,
'Label',
200,
20,
80,
30,
'verticalLabelPosition=bottom'
);
const v3 = graph.insertVertex(
parent,
null,
'Label',
20,
150,
80,
30,
'verticalLabelPosition=bottom'
);
var e1 = graph.insertEdge(parent, null, '', v1, v2); var e1 = graph.insertEdge(parent, null, '', v1, v2);
var e1 = graph.insertEdge(parent, null, '', v1, v3); var e1 = graph.insertEdge(parent, null, '', v1, v3);
} } finally {
finally
{
// Updates the display // Updates the display
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
} }
}; }
</script>
</head>
<!-- Page passes the container for the graph to the program --> export default Perimeter;
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;position:relative;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>

241
src/pages/Permissions.js
View File

@ -6,11 +6,27 @@
*/ */
import React from 'react'; import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';
import mxKeyHandler from '../mxgraph/handler/mxKeyHandler';
import mxImage from '../mxgraph/util/mxImage';
import mxUtils from '../mxgraph/util/mxUtils';
class MYNAMEHERE extends React.Component { function Permission(locked, createEdges, editEdges, editVertices, cloneCells) {
this.locked = locked != null ? locked : false;
this.createEdges = createEdges != null ? createEdges : true;
this.editEdges = editEdges != null ? editEdges : true;
this.editVertices = editVertices != null ? editVertices : true;
this.cloneCells = cloneCells != null ? cloneCells : true;
}
Permission.prototype.apply = function(graph) {
graph.setConnectable(this.createEdges);
graph.setCellsLocked(this.locked);
};
class Permissions extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -25,38 +41,23 @@ class MYNAMEHERE extends React.Component {
ref={el => { ref={el => {
this.el = el; this.el = el;
}} }}
style={{ style={{}}
}}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
function main()
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Defines an icon for creating new connections in the connection handler. // Defines an icon for creating new connections in the connection handler.
// This will automatically disable the highlighting of the source vertex. // This will automatically disable the highlighting of the source vertex.
mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16); mxConnectionHandler.prototype.connectImage = new mxImage(
'images/connector.gif',
16,
16
);
// Creates the div for the graph // Creates the div for the graph
let container = document.createElement('div'); const container = document.createElement('div');
container.style.position = 'absolute'; container.style.position = 'absolute';
container.style.overflow = 'hidden'; container.style.overflow = 'hidden';
container.style.left = '00px'; container.style.left = '00px';
@ -65,24 +66,22 @@ export default MYNAMEHERE;
container.style.bottom = '0px'; container.style.bottom = '0px';
container.style.background = 'url("editors/images/grid.gif")'; container.style.background = 'url("editors/images/grid.gif")';
document.body.appendChild(container); this.el.appendChild(container);
// Creates the graph inside the given container // Creates the graph inside the given container
let graph = new mxGraph(container); const graph = new mxGraph(container);
// Enable tooltips, disables mutligraphs, enable loops // Enable tooltips, disables mutligraphs, enable loops
graph.setMultigraph(false); graph.setMultigraph(false);
graph.setAllowLoops(true); graph.setAllowLoops(true);
// Enables rubberband selection and key handling // Enables rubberband selection and key handling
let rubberband = new mxRubberband(graph); const rubberband = new mxRubberband(graph);
let keyHandler = new mxKeyHandler(graph); const keyHandler = new mxKeyHandler(graph);
// Assigns the delete key // Assigns the delete key
keyHandler.bindKey(46, function(evt) keyHandler.bindKey(46, function(evt) {
{ if (graph.isEnabled()) {
if (graph.isEnabled())
{
graph.removeCells(); graph.removeCells();
} }
}); });
@ -91,8 +90,7 @@ export default MYNAMEHERE;
// aka "private" variable // aka "private" variable
let currentPermission = null; let currentPermission = null;
let apply = function(permission) const apply = function(permission) {
{
graph.clearSelection(); graph.clearSelection();
permission.apply(graph); permission.apply(graph);
graph.setEnabled(true); graph.setEnabled(true);
@ -106,49 +104,42 @@ export default MYNAMEHERE;
apply(new Permission()); apply(new Permission());
let button = mxUtils.button('Allow All', function(evt) let button = mxUtils.button('Allow All', function(evt) {
{
apply(new Permission()); apply(new Permission());
}); });
document.body.appendChild(button); this.el.appendChild(button);
let button = mxUtils.button('Connect Only', function(evt) button = mxUtils.button('Connect Only', function(evt) {
{
apply(new Permission(false, true, false, false, true)); apply(new Permission(false, true, false, false, true));
}); });
document.body.appendChild(button); this.el.appendChild(button);
let button = mxUtils.button('Edges Only', function(evt) button = mxUtils.button('Edges Only', function(evt) {
{
apply(new Permission(false, false, true, false, false)); apply(new Permission(false, false, true, false, false));
}); });
document.body.appendChild(button); this.el.appendChild(button);
let button = mxUtils.button('Vertices Only', function(evt) button = mxUtils.button('Vertices Only', function(evt) {
{
apply(new Permission(false, false, false, true, false)); apply(new Permission(false, false, false, true, false));
}); });
document.body.appendChild(button); this.el.appendChild(button);
let button = mxUtils.button('Select Only', function(evt) button = mxUtils.button('Select Only', function(evt) {
{
apply(new Permission(false, false, false, false, false)); apply(new Permission(false, false, false, false, false));
}); });
document.body.appendChild(button); this.el.appendChild(button);
let button = mxUtils.button('Locked', function(evt) button = mxUtils.button('Locked', function(evt) {
{
apply(new Permission(true, false)); apply(new Permission(true, false));
}); });
document.body.appendChild(button); this.el.appendChild(button);
let button = mxUtils.button('Disabled', function(evt) button = mxUtils.button('Disabled', function(evt) {
{
graph.clearSelection(); graph.clearSelection();
graph.setEnabled(false); graph.setEnabled(false);
graph.setTooltips(false); graph.setTooltips(false);
}); });
document.body.appendChild(button); this.el.appendChild(button);
// Extends hook functions to use permission object. This could // Extends hook functions to use permission object. This could
// be done by assigning the respective switches (eg. // be done by assigning the respective switches (eg.
@ -157,114 +148,90 @@ export default MYNAMEHERE;
// dynamic conditions to be used in the functions. See the // dynamic conditions to be used in the functions. See the
// specification for more functions to extend (eg. // specification for more functions to extend (eg.
// isSelectable). // isSelectable).
let oldDisconnectable = graph.isCellDisconnectable; const oldDisconnectable = graph.isCellDisconnectable;
graph.isCellDisconnectable = function(cell, terminal, source) graph.isCellDisconnectable = function(cell, terminal, source) {
{ return (
return oldDisconnectable.apply(this, arguments) && oldDisconnectable.apply(this, arguments) && currentPermission.editEdges
currentPermission.editEdges; );
}; };
let oldTerminalPointMovable = graph.isTerminalPointMovable; const oldTerminalPointMovable = graph.isTerminalPointMovable;
graph.isTerminalPointMovable = function(cell) graph.isTerminalPointMovable = function(cell) {
{ return (
return oldTerminalPointMovable.apply(this, arguments) && oldTerminalPointMovable.apply(this, arguments) &&
currentPermission.editEdges; currentPermission.editEdges
);
}; };
let oldBendable = graph.isCellBendable; const oldBendable = graph.isCellBendable;
graph.isCellBendable = function(cell) graph.isCellBendable = function(cell) {
{ return oldBendable.apply(this, arguments) && currentPermission.editEdges;
return oldBendable.apply(this, arguments) &&
currentPermission.editEdges;
}; };
let oldLabelMovable = graph.isLabelMovable; const oldLabelMovable = graph.isLabelMovable;
graph.isLabelMovable = function(cell) graph.isLabelMovable = function(cell) {
{ return (
return oldLabelMovable.apply(this, arguments) && oldLabelMovable.apply(this, arguments) && currentPermission.editEdges
currentPermission.editEdges; );
}; };
let oldMovable = graph.isCellMovable; const oldMovable = graph.isCellMovable;
graph.isCellMovable = function(cell) graph.isCellMovable = function(cell) {
{ return (
return oldMovable.apply(this, arguments) && oldMovable.apply(this, arguments) && currentPermission.editVertices
currentPermission.editVertices; );
}; };
let oldResizable = graph.isCellResizable; const oldResizable = graph.isCellResizable;
graph.isCellResizable = function(cell) graph.isCellResizable = function(cell) {
{ return (
return oldResizable.apply(this, arguments) && oldResizable.apply(this, arguments) && currentPermission.editVertices
currentPermission.editVertices; );
}; };
let oldEditable = graph.isCellEditable; const oldEditable = graph.isCellEditable;
graph.isCellEditable = function(cell) graph.isCellEditable = function(cell) {
{ return (
return oldEditable.apply(this, arguments) && (oldEditable.apply(this, arguments) &&
(this.getModel().isVertex(cell) && this.getModel().isVertex(cell) &&
currentPermission.editVertices) || currentPermission.editVertices) ||
(this.getModel().isEdge(cell) && (this.getModel().isEdge(cell) && currentPermission.editEdges)
currentPermission.editEdges); );
}; };
let oldDeletable = graph.isCellDeletable; const oldDeletable = graph.isCellDeletable;
graph.isCellDeletable = function(cell) graph.isCellDeletable = function(cell) {
{ return (
return oldDeletable.apply(this, arguments) && (oldDeletable.apply(this, arguments) &&
(this.getModel().isVertex(cell) && this.getModel().isVertex(cell) &&
currentPermission.editVertices) || currentPermission.editVertices) ||
(this.getModel().isEdge(cell) && (this.getModel().isEdge(cell) && currentPermission.editEdges)
currentPermission.editEdges); );
}; };
let oldCloneable = graph.isCellCloneable; const oldCloneable = graph.isCellCloneable;
graph.isCellCloneable = function(cell) graph.isCellCloneable = function(cell) {
{ return (
return oldCloneable.apply(this, arguments) && oldCloneable.apply(this, arguments) && currentPermission.cloneCells
currentPermission.cloneCells; );
}; };
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
// Adds cells to the model in a single step // Adds cells to the model in a single step
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{ const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30); const v2 = graph.insertVertex(parent, null, 'Hello,', 200, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'Hello,', 200, 20, 80, 30); const v3 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var v3 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30); const e1 = graph.insertEdge(parent, null, 'Connection', v1, v3);
var e1 = graph.insertEdge(parent, null, 'Connection', v1, v3); } finally {
}
finally
{
// Updates the display // Updates the display
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
} }
}; }
function Permission(locked, createEdges, editEdges, editVertices, cloneCells) export default Permissions;
{
this.locked = (locked != null) ? locked : false;
this.createEdges = (createEdges != null) ? createEdges : true;
this.editEdges = (editEdges != null) ? editEdges : true;;
this.editVertices = (editVertices != null) ? editVertices : true;;
this.cloneCells = (cloneCells != null) ? cloneCells : true;;
};
Permission.prototype.apply = function(graph)
{
graph.setConnectable(this.createEdges);
graph.setCellsLocked(this.locked);
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main();">
</body>
</html>

252
src/pages/PortRefs.js
View File

@ -12,8 +12,16 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent'; import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxConstraintHandler from '../mxgraph/handler/mxConstraintHandler';
import mxImage from '../mxgraph/util/mxImage';
import mxShape from '../mxgraph/shape/mxShape';
import mxTriangle from '../mxgraph/shape/mxTriangle';
import mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';
import mxConnectionConstraint from '../mxgraph/view/mxConnectionConstraint';
import mxPoint from '../mxgraph/util/mxPoint';
import mxConstants from '../mxgraph/util/mxConstants';
class MYNAMEHERE extends React.Component { class PortRefs extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -29,27 +37,27 @@ class MYNAMEHERE extends React.Component {
this.el = el; this.el = el;
}} }}
style={{ style={{
overflow: 'hidden',
position: 'relative',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}} }}
/> />
</> </>
); );
};
componentDidMount() {
};
} }
export default MYNAMEHERE; componentDidMount() {
function main(container)
{
// Replaces the port image // Replaces the port image
mxConstraintHandler.prototype.pointImage = new mxImage('images/dot.gif', 10, 10); mxConstraintHandler.prototype.pointImage = new mxImage(
'images/dot.gif',
10,
10
);
let graph = new mxGraph(container); const graph = new mxGraph(this.el);
graph.setConnectable(true); graph.setConnectable(true);
// Disables automatic handling of ports. This disables the reset of the // Disables automatic handling of ports. This disables the reset of the
@ -62,86 +70,90 @@ export default MYNAMEHERE;
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
// Ports are equal for all shapes... // Ports are equal for all shapes...
let ports = new Array(); const ports = new Array();
// NOTE: Constraint is used later for orthogonal edge routing (currently ignored) // NOTE: Constraint is used later for orthogonal edge routing (currently ignored)
ports['w'] = {x: 0, y: 0.5, perimeter: true, constraint: 'west'}; ports.w = { x: 0, y: 0.5, perimeter: true, constraint: 'west' };
ports['e'] = {x: 1, y: 0.5, perimeter: true, constraint: 'east'}; ports.e = { x: 1, y: 0.5, perimeter: true, constraint: 'east' };
ports['n'] = {x: 0.5, y: 0, perimeter: true, constraint: 'north'}; ports.n = { x: 0.5, y: 0, perimeter: true, constraint: 'north' };
ports['s'] = {x: 0.5, y: 1, perimeter: true, constraint: 'south'}; ports.s = { x: 0.5, y: 1, perimeter: true, constraint: 'south' };
ports['nw'] = {x: 0, y: 0, perimeter: true, constraint: 'north west'}; ports.nw = { x: 0, y: 0, perimeter: true, constraint: 'north west' };
ports['ne'] = {x: 1, y: 0, perimeter: true, constraint: 'north east'}; ports.ne = { x: 1, y: 0, perimeter: true, constraint: 'north east' };
ports['sw'] = {x: 0, y: 1, perimeter: true, constraint: 'south west'}; ports.sw = { x: 0, y: 1, perimeter: true, constraint: 'south west' };
ports['se'] = {x: 1, y: 1, perimeter: true, constraint: 'south east'}; ports.se = { x: 1, y: 1, perimeter: true, constraint: 'south east' };
// ... except for triangles // ... except for triangles
var ports2 = new Array(); const ports2 = new Array();
// NOTE: Constraint is used later for orthogonal edge routing (currently ignored) // NOTE: Constraint is used later for orthogonal edge routing (currently ignored)
ports2['in1'] = {x: 0, y: 0, perimeter: true, constraint: 'west'}; ports2.in1 = { x: 0, y: 0, perimeter: true, constraint: 'west' };
ports2['in2'] = {x: 0, y: 0.25, perimeter: true, constraint: 'west'}; ports2.in2 = { x: 0, y: 0.25, perimeter: true, constraint: 'west' };
ports2['in3'] = {x: 0, y: 0.5, perimeter: true, constraint: 'west'}; ports2.in3 = { x: 0, y: 0.5, perimeter: true, constraint: 'west' };
ports2['in4'] = {x: 0, y: 0.75, perimeter: true, constraint: 'west'}; ports2.in4 = { x: 0, y: 0.75, perimeter: true, constraint: 'west' };
ports2['in5'] = {x: 0, y: 1, perimeter: true, constraint: 'west'}; ports2.in5 = { x: 0, y: 1, perimeter: true, constraint: 'west' };
ports2['out1'] = {x: 0.5, y: 0, perimeter: true, constraint: 'north east'}; ports2.out1 = {
ports2['out2'] = {x: 1, y: 0.5, perimeter: true, constraint: 'east'}; x: 0.5,
ports2['out3'] = {x: 0.5, y: 1, perimeter: true, constraint: 'south east'}; y: 0,
perimeter: true,
constraint: 'north east',
};
ports2.out2 = { x: 1, y: 0.5, perimeter: true, constraint: 'east' };
ports2.out3 = {
x: 0.5,
y: 1,
perimeter: true,
constraint: 'south east',
};
// Extends shapes classes to return their ports // Extends shapes classes to return their ports
mxShape.prototype.getPorts = function() mxShape.prototype.getPorts = function() {
{
return ports; return ports;
}; };
mxTriangle.prototype.getPorts = function() mxTriangle.prototype.getPorts = function() {
{
return ports2; return ports2;
}; };
// Disables floating connections (only connections via ports allowed) // Disables floating connections (only connections via ports allowed)
graph.connectionHandler.isConnectableCell = function(cell) graph.connectionHandler.isConnectableCell = function(cell) {
{
return false; return false;
}; };
mxEdgeHandler.prototype.isConnectableCell = function(cell) mxEdgeHandler.prototype.isConnectableCell = function(cell) {
{
return graph.connectionHandler.isConnectableCell(cell); return graph.connectionHandler.isConnectableCell(cell);
}; };
// Disables existing port functionality // Disables existing port functionality
graph.view.getTerminalPort = function(state, terminal, source) graph.view.getTerminalPort = function(state, terminal, source) {
{
return terminal; return terminal;
}; };
// Returns all possible ports for a given terminal // Returns all possible ports for a given terminal
graph.getAllConnectionConstraints = function(terminal, source) graph.getAllConnectionConstraints = function(terminal, source) {
{ if (
if (terminal != null && terminal.shape != null && terminal != null &&
terminal.shape.stencil != null) terminal.shape != null &&
{ terminal.shape.stencil != null
) {
// for stencils with existing constraints... // for stencils with existing constraints...
if (terminal.shape.stencil != null) if (terminal.shape.stencil != null) {
{
return terminal.shape.stencil.constraints; return terminal.shape.stencil.constraints;
} }
} } else if (terminal != null && this.model.isVertex(terminal.cell)) {
else if (terminal != null && this.model.isVertex(terminal.cell)) if (terminal.shape != null) {
{ const ports = terminal.shape.getPorts();
if (terminal.shape != null) const cstrs = new Array();
{
let ports = terminal.shape.getPorts();
let cstrs = new Array();
for (var id in ports) for (const id in ports) {
{ const port = ports[id];
let port = ports[id];
let cstr = new mxConnectionConstraint(new mxPoint(port.x, port.y), port.perimeter); const cstr = new mxConnectionConstraint(
new mxPoint(port.x, port.y),
port.perimeter
);
cstr.id = id; cstr.id = id;
cstrs.push(cstr); cstrs.push(cstr);
} }
@ -154,32 +166,34 @@ export default MYNAMEHERE;
}; };
// Sets the port for the given connection // Sets the port for the given connection
graph.setConnectionConstraint = function(edge, terminal, source, constraint) graph.setConnectionConstraint = function(
{ edge,
if (constraint != null) terminal,
{ source,
let key = (source) ? mxConstants.STYLE_SOURCE_PORT : mxConstants.STYLE_TARGET_PORT; constraint
) {
if (constraint != null) {
const key = source
? mxConstants.STYLE_SOURCE_PORT
: mxConstants.STYLE_TARGET_PORT;
if (constraint == null || constraint.id == null) if (constraint == null || constraint.id == null) {
{
this.setCellStyles(key, null, [edge]); this.setCellStyles(key, null, [edge]);
} } else if (constraint.id != null) {
else if (constraint.id != null)
{
this.setCellStyles(key, constraint.id, [edge]); this.setCellStyles(key, constraint.id, [edge]);
} }
} }
}; };
// Returns the port for the given connection // Returns the port for the given connection
graph.getConnectionConstraint = function(edge, terminal, source) graph.getConnectionConstraint = function(edge, terminal, source) {
{ const key = source
let key = (source) ? mxConstants.STYLE_SOURCE_PORT : mxConstants.STYLE_TARGET_PORT; ? mxConstants.STYLE_SOURCE_PORT
let id = edge.style[key]; : mxConstants.STYLE_TARGET_PORT;
const id = edge.style[key];
if (id != null) if (id != null) {
{ const c = new mxConnectionConstraint(null, null);
let c = new mxConnectionConstraint(null, null);
c.id = id; c.id = id;
return c; return c;
@ -189,16 +203,16 @@ export default MYNAMEHERE;
}; };
// Returns the actual point for a port by redirecting the constraint to the port // Returns the actual point for a port by redirecting the constraint to the port
graphGetConnectionPoint = graph.getConnectionPoint; const graphGetConnectionPoint = graph.getConnectionPoint;
graph.getConnectionPoint = function(vertex, constraint) graph.getConnectionPoint = function(vertex, constraint) {
{ if (constraint.id != null && vertex != null && vertex.shape != null) {
if (constraint.id != null && vertex != null && vertex.shape != null) const port = vertex.shape.getPorts()[constraint.id];
{
let port = vertex.shape.getPorts()[constraint.id];
if (port != null) if (port != null) {
{ constraint = new mxConnectionConstraint(
constraint = new mxConnectionConstraint(new mxPoint(port.x, port.y), port.perimeter); new mxPoint(port.x, port.y),
port.perimeter
);
} }
} }
@ -207,18 +221,45 @@ export default MYNAMEHERE;
// Adds cells to the model in a single step // Adds cells to the model in a single step
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{ const v1 = graph.insertVertex(parent, null, 'A', 20, 20, 100, 40);
var v1 = graph.insertVertex(parent, null, 'A', 20, 20, 100, 40); const v2 = graph.insertVertex(
var v2 = graph.insertVertex(parent, null, 'B', 80, 100, 100, 100, parent,
'shape=ellipse;perimeter=ellipsePerimeter'); null,
var v3 = graph.insertVertex(parent, null, 'C', 190, 30, 100, 60, 'B',
'shape=triangle;perimeter=trianglePerimeter;direction=south'); 80,
var e1 = graph.insertEdge(parent, null, '', v1, v2, 'sourcePort=s;targetPort=nw'); 100,
var e2 = graph.insertEdge(parent, null, '', v1, v3, 'sourcePort=e;targetPort=out3'); 100,
} 100,
finally 'shape=ellipse;perimeter=ellipsePerimeter'
{ );
const v3 = graph.insertVertex(
parent,
null,
'C',
190,
30,
100,
60,
'shape=triangle;perimeter=trianglePerimeter;direction=south'
);
const e1 = graph.insertEdge(
parent,
null,
'',
v1,
v2,
'sourcePort=s;targetPort=nw'
);
const e2 = graph.insertEdge(
parent,
null,
'',
v1,
v3,
'sourcePort=e;targetPort=out3'
);
} finally {
// Updates the display // Updates the display
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
@ -250,12 +291,7 @@ export default MYNAMEHERE;
return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge)); return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
}; };
*/ */
}; }
</script> }
</head>
<body onload="main(document.getElementById('graphContainer'))"> export default PortRefs;
<div id="graphContainer"
style="overflow:hidden;position:relative;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>

115
src/pages/RadialTreeLayout.js
View File

@ -7,11 +7,13 @@
*/ */
import React from 'react'; import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxPerimeter from '../mxgraph/view/mxPerimeter';
import mxConstants from '../mxgraph/util/mxConstants';
import mxRadialTreeLayout from '../mxgraph/layout/mxRadialTreeLayout';
class MYNAMEHERE extends React.Component { class RadialTreeLayout extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -21,39 +23,25 @@ class MYNAMEHERE extends React.Component {
return ( return (
<> <>
<h1>Hierarchical Layout example for mxGraph</h1> <h1>Hierarchical Layout example for mxGraph</h1>
<div <div
ref={el => { ref={el => {
this.el = el; this.el = el;
}} }}
style={{ style={{
position: 'relative',
overflow: 'auto',
height: '800px',
width: '1000px',
borderTop: 'gray 1px solid',
}} }}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
function main(container)
{
// Checks if browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is
// not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Creates the graph inside the given container // Creates the graph inside the given container
let graph = new mxGraph(container); const graph = new mxGraph(this.el);
// Adds rubberband selection // Adds rubberband selection
new mxRubberband(graph); new mxRubberband(graph);
@ -71,43 +59,41 @@ export default MYNAMEHERE;
// Creates a layout algorithm to be used // Creates a layout algorithm to be used
// with the graph // with the graph
let layout = new mxRadialTreeLayout(graph); const layout = new mxRadialTreeLayout(graph);
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
// Load cells and layouts the graph // Load cells and layouts the graph
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{ const v1 = graph.insertVertex(parent, null, '1', 500, 500, 80, 30);
var v1 = graph.insertVertex(parent, null, '1', 500, 500, 80, 30); const v2 = graph.insertVertex(parent, null, '2.1', 0, 0, 80, 30);
var v2 = graph.insertVertex(parent, null, '2.1', 0, 0, 80, 30); const v3 = graph.insertVertex(parent, null, '2.2', 0, 0, 80, 30);
var v3 = graph.insertVertex(parent, null, '2.2', 0, 0, 80, 30); const v4 = graph.insertVertex(parent, null, '3.1', 0, 0, 80, 30);
var v4 = graph.insertVertex(parent, null, '3.1', 0, 0, 80, 30); const v4_1 = graph.insertVertex(parent, null, '3.2', 0, 0, 80, 30);
var v4_1 = graph.insertVertex(parent, null, '3.2', 0, 0, 80, 30); const v4_2 = graph.insertVertex(parent, null, '3.3', 0, 0, 80, 30);
var v4_2 = graph.insertVertex(parent, null, '3.3', 0, 0, 80, 30); const v4_3 = graph.insertVertex(parent, null, '3.6', 0, 0, 80, 30);
var v4_3 = graph.insertVertex(parent, null, '3.6', 0, 0, 80, 30); const v4_4 = graph.insertVertex(parent, null, '3.7', 0, 0, 80, 30);
var v4_4 = graph.insertVertex(parent, null, '3.7', 0, 0, 80, 30); const v5 = graph.insertVertex(parent, null, '3.4', 0, 0, 80, 30);
var v5 = graph.insertVertex(parent, null, '3.4', 0, 0, 80, 30); const v6 = graph.insertVertex(parent, null, '2.3', 0, 0, 80, 30);
var v6 = graph.insertVertex(parent, null, '2.3', 0, 0, 80, 30); const v7 = graph.insertVertex(parent, null, '4.1', 0, 0, 80, 30);
var v7 = graph.insertVertex(parent, null, '4.1', 0, 0, 80, 30); const v7_1 = graph.insertVertex(parent, null, '4.2', 0, 0, 80, 30);
var v7_1 = graph.insertVertex(parent, null, '4.2', 0, 0, 80, 30); const v7_2 = graph.insertVertex(parent, null, '4.3', 0, 0, 80, 30);
var v7_2 = graph.insertVertex(parent, null, '4.3', 0, 0, 80, 30); const v7_3 = graph.insertVertex(parent, null, '4.4', 0, 0, 80, 30);
var v7_3 = graph.insertVertex(parent, null, '4.4', 0, 0, 80, 30); const v7_4 = graph.insertVertex(parent, null, '4.5', 0, 0, 80, 30);
var v7_4 = graph.insertVertex(parent, null, '4.5', 0, 0, 80, 30); const v7_5 = graph.insertVertex(parent, null, '4.6', 0, 0, 80, 30);
var v7_5 = graph.insertVertex(parent, null, '4.6', 0, 0, 80, 30); const v7_6 = graph.insertVertex(parent, null, '4.7', 0, 0, 80, 30);
var v7_6 = graph.insertVertex(parent, null, '4.7', 0, 0, 80, 30);
const e1 = graph.insertEdge(parent, null, '', v1, v2);
var e1 = graph.insertEdge(parent, null, '', v1, v2); const e2 = graph.insertEdge(parent, null, '', v1, v3);
var e2 = graph.insertEdge(parent, null, '', v1, v3); const e3 = graph.insertEdge(parent, null, '', v3, v4);
var e3 = graph.insertEdge(parent, null, '', v3, v4); const e3_1 = graph.insertEdge(parent, null, '', v3, v4_1);
var e3_1 = graph.insertEdge(parent, null, '', v3, v4_1); const e3_2 = graph.insertEdge(parent, null, '', v3, v4_2);
var e3_2 = graph.insertEdge(parent, null, '', v3, v4_2); const e3_3 = graph.insertEdge(parent, null, '', v3, v4_3);
var e3_3 = graph.insertEdge(parent, null, '', v3, v4_3); const e3_4 = graph.insertEdge(parent, null, '', v3, v4_4);
var e3_4 = graph.insertEdge(parent, null, '', v3, v4_4); const e4 = graph.insertEdge(parent, null, '', v2, v5);
var e4 = graph.insertEdge(parent, null, '', v2, v5); const e5 = graph.insertEdge(parent, null, '', v1, v6);
var e5 = graph.insertEdge(parent, null, '', v1, v6); const e6 = graph.insertEdge(parent, null, '', v4_3, v7);
var e6 = graph.insertEdge(parent, null, '', v4_3, v7);
var e6_1 = graph.insertEdge(parent, null, '', v4_4, v7_4); var e6_1 = graph.insertEdge(parent, null, '', v4_4, v7_4);
var e6_2 = graph.insertEdge(parent, null, '', v4_4, v7_5); var e6_2 = graph.insertEdge(parent, null, '', v4_4, v7_5);
var e6_3 = graph.insertEdge(parent, null, '', v4_4, v7_6); var e6_3 = graph.insertEdge(parent, null, '', v4_4, v7_6);
@ -117,24 +103,11 @@ export default MYNAMEHERE;
// Executes the layout // Executes the layout
layout.execute(parent); layout.execute(parent);
} } finally {
finally
{
// Updates the display // Updates the display
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
} }
}; }
</script>
</head>
<!-- Page passes the container for the graph to the program --> export default RadialTreeLayout;
<body onload="main(document.getElementById('graphContainer'))" style="margin:4px;">
<!-- Creates a container for the graph with a grid wallpaper. Make sure to define the position
and overflow attributes! See comments on the adding of the size-listener on line 54 ff! -->
<div id="graphContainer"
style="position:absolute;overflow:auto;top:36px;bottom:0px;left:0px;right:0px;border-top:gray 1px solid;">
</div>
</body>
</html>

66
src/pages/Resources.js
View File

@ -9,8 +9,9 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent'; import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxClient from '../mxgraph/mxClient';
class MYNAMEHERE extends React.Component { class Resources extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -26,74 +27,49 @@ class MYNAMEHERE extends React.Component {
this.el = el; this.el = el;
}} }}
style={{ style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}} }}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Async indirection to load resources asynchronously (see above) // Async indirection to load resources asynchronously (see above)
// Alternatively you can remove the line that sets mxLoadResources // Alternatively you can remove the line that sets mxLoadResources
// anove and change the code to not use this callback. // anove and change the code to not use this callback.
mxClient.loadResources(function()
{ mxClient.loadResources(() => {
// Disables the built-in context menu // Disables the built-in context menu
mxEvent.disableContextMenu(container); mxEvent.disableContextMenu(this.el);
// Creates the graph inside the given container // Creates the graph inside the given container
let graph = new mxGraph(container); const graph = new mxGraph(this.el);
// Enables rubberband selection // Enables rubberband selection
new mxRubberband(graph); new mxRubberband(graph);
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
// Adds cells to the model in a single step // Adds cells to the model in a single step
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{ const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30); const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30); const e1 = graph.insertEdge(parent, null, '', v1, v2);
var e1 = graph.insertEdge(parent, null, '', v1, v2); } finally {
}
finally
{
// Updates the display // Updates the display
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
}); });
} }
}; }
</script>
</head>
<!-- Page passes the container for the graph to the program --> export default Resources;
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>

215
src/pages/SecondLabel.js
View File

@ -6,11 +6,15 @@
*/ */
import React from 'react'; import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxUtils from '../mxgraph/util/mxUtils';
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";
class MYNAMEHERE extends React.Component { class SecondLabel extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -26,34 +30,37 @@ class MYNAMEHERE extends React.Component {
this.el = el; this.el = el;
}} }}
style={{ style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
}} }}
/> />
</> </>
); );
};
componentDidMount() {
};
} }
export default MYNAMEHERE; componentDidMount() {
// Simple solution to add additional text to the rectangle shape definition: // Simple solution to add additional text to the rectangle shape definition:
(function() (function() {
{ const mxRectangleShapeIsHtmlAllowed =
let mxRectangleShapeIsHtmlAllowed = mxRectangleShape.prototype.isHtmlAllowed; mxRectangleShape.prototype.isHtmlAllowed;
mxRectangleShape.prototype.isHtmlAllowed = function() mxRectangleShape.prototype.isHtmlAllowed = function() {
{ return (
return mxRectangleShapeIsHtmlAllowed.apply(this, arguments) && this.state == null; mxRectangleShapeIsHtmlAllowed.apply(this, arguments) &&
this.state == null
);
}; };
mxRectangleShapePaintForeground = mxRectangleShape.prototype.paintForeground; const mxRectangleShapePaintForeground =
mxRectangleShape.prototype.paintForeground = function(c, x, y, w, h) mxRectangleShape.prototype.paintForeground;
{ mxRectangleShape.prototype.paintForeground = function(c, x, y, w, h) {
if (this.state != null && this.state.cell.geometry != null && !this.state.cell.geometry.relative) if (
{ this.state != null &&
this.state.cell.geometry != null &&
!this.state.cell.geometry.relative
) {
c.setFontColor('#a0a0a0'); c.setFontColor('#a0a0a0');
c.text(x + 2, y, 0, 0, this.state.cell.id, 'left', 'top'); c.text(x + 2, y, 0, 0, this.state.cell.id, 'left', 'top');
} }
@ -62,37 +69,21 @@ export default MYNAMEHERE;
}; };
})(); })();
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Creates the graph inside the given container // Creates the graph inside the given container
let graph = new mxGraph(container); const graph = new mxGraph(this.el);
// Disables the folding icon // Disables the folding icon
graph.isCellFoldable = function(cell) graph.isCellFoldable = function(cell) {
{
return false; return false;
} };
let secondLabelVisible = true; let secondLabelVisible = true;
// Hook for returning shape number for a given cell // Hook for returning shape number for a given cell
graph.getSecondLabel = function(cell) graph.getSecondLabel = function(cell) {
{ if (!this.model.isEdge(cell)) {
if (!this.model.isEdge(cell))
{
// Possible to return any string here // Possible to return any string here
return 'The ID of this cell is ' + cell.id; return `The ID of this cell is ${cell.id}`;
} }
return null; return null;
@ -101,27 +92,39 @@ export default MYNAMEHERE;
let relativeChildVerticesVisible = true; let relativeChildVerticesVisible = true;
// Overrides method to hide relative child vertices // Overrides method to hide relative child vertices
graph.isCellVisible = function(cell) graph.isCellVisible = function(cell) {
{ return (
return !this.model.isVertex(cell) || cell.geometry == null || !this.model.isVertex(cell) ||
cell.geometry == null ||
!cell.geometry.relative || !cell.geometry.relative ||
cell.geometry.relative == relativeChildVerticesVisible; cell.geometry.relative == relativeChildVerticesVisible
);
}; };
// Creates the shape for the shape number and puts it into the draw pane // Creates the shape for the shape number and puts it into the draw pane
let redrawShape = graph.cellRenderer.redrawShape; const { redrawShape } = graph.cellRenderer;
graph.cellRenderer.redrawShape = function(state, force, rendering) graph.cellRenderer.redrawShape = function(state, force, rendering) {
{ const result = redrawShape.apply(this, arguments);
let result = redrawShape.apply(this, arguments);
if (result && secondLabelVisible && state.cell.geometry != null && !state.cell.geometry.relative) if (
{ result &&
let secondLabel = graph.getSecondLabel(state.cell); secondLabelVisible &&
state.cell.geometry != null &&
!state.cell.geometry.relative
) {
const secondLabel = graph.getSecondLabel(state.cell);
if (secondLabel != null && state.shape != null && state.secondLabel == null) if (
{ secondLabel != null &&
state.secondLabel = new mxText(secondLabel, new mxRectangle(), state.shape != null &&
mxConstants.ALIGN_LEFT, mxConstants.ALIGN_BOTTOM); state.secondLabel == null
) {
state.secondLabel = new mxText(
secondLabel,
new mxRectangle(),
mxConstants.ALIGN_LEFT,
mxConstants.ALIGN_BOTTOM
);
// Styles the label // Styles the label
state.secondLabel.color = 'black'; state.secondLabel.color = 'black';
@ -138,10 +141,14 @@ export default MYNAMEHERE;
} }
} }
if (state.secondLabel != null) if (state.secondLabel != null) {
{ const scale = graph.getView().getScale();
let scale = graph.getView().getScale(); const bounds = new mxRectangle(
let bounds = new mxRectangle(state.x + state.width - 8 * scale, state.y + 8 * scale, 35, 0); state.x + state.width - 8 * scale,
state.y + 8 * scale,
35,
0
);
state.secondLabel.state = state; state.secondLabel.state = state;
state.secondLabel.value = graph.getSecondLabel(state.cell); state.secondLabel.value = graph.getSecondLabel(state.cell);
state.secondLabel.scale = scale; state.secondLabel.scale = scale;
@ -153,80 +160,84 @@ export default MYNAMEHERE;
}; };
// Destroys the shape number // Destroys the shape number
let destroy = graph.cellRenderer.destroy; const { destroy } = graph.cellRenderer;
graph.cellRenderer.destroy = function(state) graph.cellRenderer.destroy = function(state) {
{
destroy.apply(this, arguments); destroy.apply(this, arguments);
if (state.secondLabel != null) if (state.secondLabel != null) {
{
state.secondLabel.destroy(); state.secondLabel.destroy();
state.secondLabel = null; state.secondLabel = null;
} }
}; };
graph.cellRenderer.getShapesForState = function(state) graph.cellRenderer.getShapesForState = function(state) {
{
return [state.shape, state.text, state.secondLabel, state.control]; return [state.shape, state.text, state.secondLabel, state.control];
}; };
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
// Adds cells to the model in a single step // Adds cells to the model in a single step
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{ const v1 = graph.insertVertex(parent, null, 'Hello,', 30, 40, 80, 30);
var v1 = graph.insertVertex(parent, null, 'Hello,', 30, 40, 80, 30);
// Alternative solution of creating a second label by creating a realtive child vertex // Alternative solution of creating a second label by creating a realtive child vertex
// with size (0, 0). This will not be selectable and only the label colors can be used // with size (0, 0). This will not be selectable and only the label colors can be used
// for coloring as the actual shape will have zero size. // for coloring as the actual shape will have zero size.
var v11 = graph.insertVertex(v1, null, 'World', 1, 1, 0, 0, 'align=left;verticalAlign=top;labelBackgroundColor=red;labelBorderColor=black', true); const v11 = graph.insertVertex(
v1,
null,
'World',
1,
1,
0,
0,
'align=left;verticalAlign=top;labelBackgroundColor=red;labelBorderColor=black',
true
);
v11.geometry.offset = new mxPoint(-8, -8); v11.geometry.offset = new mxPoint(-8, -8);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30); const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
// Another alternative solution of creating a second label as a relative child vertex // Another alternative solution of creating a second label as a relative child vertex
// but this time with an automatic size so that the cell is actually selectable and // but this time with an automatic size so that the cell is actually selectable and
// the background is painted as a shape. // the background is painted as a shape.
var v21 = graph.insertVertex(v2, null, 'World', 1, 1, 0, 0, 'align=left;verticalAlign=top;fillColor=red;rounded=1;spacingLeft=4;spacingRight=4', true); const v21 = graph.insertVertex(
v2,
null,
'World',
1,
1,
0,
0,
'align=left;verticalAlign=top;fillColor=red;rounded=1;spacingLeft=4;spacingRight=4',
true
);
v21.geometry.offset = new mxPoint(-8, -8); v21.geometry.offset = new mxPoint(-8, -8);
graph.updateCellSize(v21); graph.updateCellSize(v21);
var e1 = graph.insertEdge(parent, null, '', v1, v2); const e1 = graph.insertEdge(parent, null, '', v1, v2);
} } finally {
finally
{
// Updates the display // Updates the display
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
// Adds a button to execute the layout // Adds a button to execute the layout
document.body.insertBefore(mxUtils.button('Toggle Child Vertices', document.body.insertBefore(
function(evt) mxUtils.button('Toggle Child Vertices', function(evt) {
{
relativeChildVerticesVisible = !relativeChildVerticesVisible; relativeChildVerticesVisible = !relativeChildVerticesVisible;
graph.refresh(); graph.refresh();
} }),
), document.body.firstChild); document.body.firstChild
);
// Adds a button to execute the layout // Adds a button to execute the layout
document.body.insertBefore(mxUtils.button('Toggle IDs', document.body.insertBefore(
function(evt) mxUtils.button('Toggle IDs', function(evt) {
{
secondLabelVisible = !secondLabelVisible; secondLabelVisible = !secondLabelVisible;
graph.refresh(); graph.refresh();
}),
document.body.firstChild
);
} }
), document.body.firstChild);
} }
};
</script>
</head>
<!-- Page passes the container for the graph to the program --> export default SecondLabel;
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif')">
</div>
</body>
</html>

103
src/pages/Shape.js
View File

@ -6,11 +6,12 @@
*/ */
import React from 'react'; import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxConstants from '../mxgraph/util/mxConstants';
import mxCylinder from '../mxgraph/shape/mxCylinder';
import mxCellRenderer from "../mxgraph/view/mxCellRenderer";
class MYNAMEHERE extends React.Component { class Shape extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -26,22 +27,17 @@ class MYNAMEHERE extends React.Component {
this.el = el; this.el = el;
}} }}
style={{ style={{
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
}} }}
/> />
</> </>
); );
};
componentDidMount() {
};
} }
export default MYNAMEHERE; componentDidMount() {
/* /*
The example shape is a "3D box" that looks like this: The example shape is a "3D box" that looks like this:
____ ____
@ -52,21 +48,15 @@ export default MYNAMEHERE;
The code below defines the shape. The BoxShape function The code below defines the shape. The BoxShape function
it the constructor which creates a new object instance. it the constructor which creates a new object instance.
*/
function BoxShape()
{
mxCylinder.call(this);
};
/*
The next lines use an mxCylinder instance to augment the The next lines use an mxCylinder instance to augment the
prototype of the shape ("inheritance") and reset the prototype of the shape ("inheritance") and reset the
constructor to the topmost function of the c'tor chain. constructor to the topmost function of the c'tor chain.
*/ */
mxUtils.extend(BoxShape, mxCylinder);
class BoxShape extends mxCylinder {
// Defines the extrusion of the box as a "static class variable" // Defines the extrusion of the box as a "static class variable"
BoxShape.prototype.extrude = 10; extrude = 10;
/* /*
Next, the mxCylinder's redrawPath method is "overridden". Next, the mxCylinder's redrawPath method is "overridden".
@ -85,21 +75,17 @@ export default MYNAMEHERE;
| / | /
|____/ |____/
*/ */
BoxShape.prototype.redrawPath = function(path, x, y, w, h, isForeground) redrawPath(path, x, y, w, h, isForeground) {
{ const dy = this.extrude * this.scale;
let dy = this.extrude * this.scale; const dx = this.extrude * this.scale;
let dx = this.extrude * this.scale;
if (isForeground) if (isForeground) {
{
path.moveTo(0, dy); path.moveTo(0, dy);
path.lineTo(w - dx, dy); path.lineTo(w - dx, dy);
path.lineTo(w, 0); path.lineTo(w, 0);
path.moveTo(w - dx, dy); path.moveTo(w - dx, dy);
path.lineTo(w - dx, h); path.lineTo(w - dx, h);
} } else {
else
{
path.moveTo(0, dy); path.moveTo(0, dy);
path.lineTo(dx, 0); path.lineTo(dx, 0);
path.lineTo(w, 0); path.lineTo(w, 0);
@ -110,37 +96,19 @@ export default MYNAMEHERE;
path.lineTo(dx, 0); path.lineTo(dx, 0);
path.close(); path.close();
} }
};
mxCellRenderer.registerShape('box', BoxShape);
</script>
<!-- Example code -->
<script type="text/javascript">
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main(container)
{
// Checks if browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is
// not supported.
mxUtils.error('Browser is not supported!', 200, false);
} }
else }
{ mxCellRenderer.registerShape('box', BoxShape);
// Creates the graph inside the DOM node. // Creates the graph inside the DOM node.
let graph = new mxGraph(container); const graph = new mxGraph(this.el);
// Disables basic selection and cell handling // Disables basic selection and cell handling
graph.setEnabled(false); graph.setEnabled(false);
// Changes the default style for vertices "in-place" // Changes the default style for vertices "in-place"
// to use the custom shape. // to use the custom shape.
let style = graph.getStylesheet().getDefaultVertexStyle(); const style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'box'; style[mxConstants.STYLE_SHAPE] = 'box';
// Adds a spacing for the label that matches the // Adds a spacing for the label that matches the
@ -154,32 +122,19 @@ export default MYNAMEHERE;
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
// Adds cells to the model in a single step // Adds cells to the model in a single step
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{ const v1 = graph.insertVertex(parent, null, 'Custom', 20, 20, 80, 60);
var v1 = graph.insertVertex(parent, null, 'Custom', 20, 20, 80, 60); const v2 = graph.insertVertex(parent, null, 'Shape', 200, 150, 80, 60);
var v2 = graph.insertVertex(parent, null, 'Shape', 200, 150, 80, 60); const e1 = graph.insertEdge(parent, null, '', v1, v2);
var e1 = graph.insertEdge(parent, null, '', v1, v2); } finally {
}
finally
{
// Updates the display // Updates the display
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
} }
}; }
</script>
</head>
<!-- Page passes the container for the graph to the program --> export default Shape;
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif')">
</div>
</body>
</html>

111
src/pages/StandardsMode.js
View File

@ -1,111 +0,0 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Standardsmode example for mxGraph. This example demonstrates using a DOCTYPE with
mxGraph. (The first line is required for this to use VML in all IE versions.)
To use the DOCTYPE and SVG in IE9, replace the content attribute of the first line
with IE=5,IE=9.
To use IE7 standards mode in IE 7,8 and 9, replace IE=5 with IE=7.
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
constructor(props) {
super(props);
}
render() {
// A container for the graph
return (
<>
<h1>Standardsmode example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
}}
/>
</>
);
};
componentDidMount() {
};
}
export default MYNAMEHERE;
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Creates the graph inside the given container
let graph = new mxGraph(container);
// Uncomment the following if you want the container
// to fit the size of the graph
//graph.setResizeContainer(true);
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
// Prints the rendering mode and display dialect (VML or SVG) in use
// CSS1Compat means standard
mxLog.show();
let mode = (document.compatMode == 'CSS1Compat') ? 'standards' : 'quirks';
let disp = (mxClient.IS_SVG) ? 'svg' : 'vml';
mxLog.debug(mode + ' ' + disp);
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;position:relative;">
</div>
<br>
See also:<br>
<a href="ie9svg.html">IE9SVG</a><br>
<a href="../../docs/known-issues.html#Doctypes">docs/known-issues.html#Doctypes</a><br>
<a href="../../docs/known-issues.html#IE9">docs/known-issues.html#IE9</a>
</body>
</html>

365
src/pages/Stencils.js
View File

@ -10,8 +10,19 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent'; import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; 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";
class MYNAMEHERE extends React.Component { class Stencils extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -21,37 +32,36 @@ class MYNAMEHERE extends React.Component {
return ( return (
<> <>
<h1>Stencils example for mxGraph</h1> <h1>Stencils example for mxGraph</h1>
<div <div
ref={el => { ref={el => {
this.el = el; this.el = el;
}} }}
style={{ style={{
position: 'relative',
overflow: 'hidden',
width: '601px',
height: '401px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
<div
ref={el => {
this.el2 = el;
}}
style={{
position: 'relative',
overflow: 'hidden',
width: '601px',
height: '150px',
cursor: 'default',
}} }}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Sets the global shadow color // Sets the global shadow color
mxConstants.SHADOWCOLOR = '#C0C0C0'; mxConstants.SHADOWCOLOR = '#C0C0C0';
mxConstants.SHADOW_OPACITY = 0.5; mxConstants.SHADOW_OPACITY = 0.5;
@ -71,19 +81,15 @@ export default MYNAMEHERE;
mxVertexHandler.prototype.rotationEnabled = true; mxVertexHandler.prototype.rotationEnabled = true;
// Uses the shape for resize previews // Uses the shape for resize previews
mxVertexHandler.prototype.createSelectionShape = function(bounds) mxVertexHandler.prototype.createSelectionShape = function(bounds) {
{ const key = this.state.style[mxConstants.STYLE_SHAPE];
let key = this.state.style[mxConstants.STYLE_SHAPE]; const stencil = mxStencilRegistry.getStencil(key);
let stencil = mxStencilRegistry.getStencil(key);
let shape = null; let shape = null;
if (stencil != null) if (stencil != null) {
{
shape = new mxShape(stencil); shape = new mxShape(stencil);
shape.apply(this.state); shape.apply(this.state);
} } else {
else
{
shape = new this.state.shape.constructor(); shape = new this.state.shape.constructor();
} }
@ -99,13 +105,9 @@ export default MYNAMEHERE;
// Defines a custom stencil via the canvas API as defined here: // Defines a custom stencil via the canvas API as defined here:
// http://jgraph.github.io/mxgraph/docs/js-api/files/util/mxXmlCanvas2D-js.html // http://jgraph.github.io/mxgraph/docs/js-api/files/util/mxXmlCanvas2D-js.html
function CustomShape()
{ class CustomShape extends mxShape {
mxShape.call(this); paintBackground(c, x, y, w, h) {
};
mxUtils.extend(CustomShape, mxShape);
CustomShape.prototype.paintBackground = function(c, x, y, w, h)
{
c.translate(x, y); c.translate(x, y);
// Head // Head
@ -114,7 +116,7 @@ export default MYNAMEHERE;
c.begin(); c.begin();
c.moveTo(w / 2, h / 4); c.moveTo(w / 2, h / 4);
c.lineTo(w / 2, 2 * h / 3); c.lineTo(w / 2, (2 * h) / 3);
// Arms // Arms
c.moveTo(w / 2, h / 3); c.moveTo(w / 2, h / 3);
@ -123,45 +125,45 @@ export default MYNAMEHERE;
c.lineTo(w, h / 3); c.lineTo(w, h / 3);
// Legs // Legs
c.moveTo(w / 2, 2 * h / 3); c.moveTo(w / 2, (2 * h) / 3);
c.lineTo(0, h); c.lineTo(0, h);
c.moveTo(w / 2, 2 * h / 3); c.moveTo(w / 2, (2 * h) / 3);
c.lineTo(w, h); c.lineTo(w, h);
c.end(); c.end();
c.stroke(); c.stroke();
}; }
}
// Replaces existing actor shape // Replaces existing actor shape
mxCellRenderer.registerShape('customShape', CustomShape); mxCellRenderer.registerShape('customShape', CustomShape);
// Loads the stencils into the registry // Loads the stencils into the registry
let req = mxUtils.load('stencils.xml'); const req = mxUtils.load('stencils.xml');
let root = req.getDocumentElement(); const root = req.getDocumentElement();
let shape = root.firstChild; let shape = root.firstChild;
while (shape != null) while (shape != null) {
{ if (shape.nodeType === mxConstants.NODETYPE_ELEMENT) {
if (shape.nodeType == mxConstants.NODETYPE_ELEMENT) mxStencilRegistry.addStencil(
{ shape.getAttribute('name'),
mxStencilRegistry.addStencil(shape.getAttribute('name'), new mxStencil(shape)); new mxStencil(shape)
);
} }
shape = shape.nextSibling; shape = shape.nextSibling;
} }
mxEvent.disableContextMenu(container); mxEvent.disableContextMenu(this.el);
// Creates the graph inside the given container // Creates the graph inside the given container
let graph = new mxGraph(container); const graph = new mxGraph(this.el);
graph.setConnectable(true); graph.setConnectable(true);
graph.setTooltips(true); graph.setTooltips(true);
graph.setPanning(true); graph.setPanning(true);
graph.getTooltipForCell = function(cell) graph.getTooltipForCell = function(cell) {
{ if (cell != null) {
if (cell != null)
{
return cell.style; return cell.style;
} }
@ -181,172 +183,221 @@ export default MYNAMEHERE;
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
// Adds cells to the model in a single step // Adds cells to the model in a single step
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{ const v1 = graph.insertVertex(
var v1 = graph.insertVertex(parent, null, 'A1', 20, 20, 40, 80, 'shape=and'); parent,
var v2 = graph.insertVertex(parent, null, 'A2', 20, 220, 40, 80, 'shape=and'); null,
var v3 = graph.insertVertex(parent, null, 'X1', 160, 110, 80, 80, 'shape=xor'); 'A1',
var e1 = graph.insertEdge(parent, null, '', v1, v3); 20,
20,
40,
80,
'shape=and'
);
const v2 = graph.insertVertex(
parent,
null,
'A2',
20,
220,
40,
80,
'shape=and'
);
const v3 = graph.insertVertex(
parent,
null,
'X1',
160,
110,
80,
80,
'shape=xor'
);
const e1 = graph.insertEdge(parent, null, '', v1, v3);
e1.geometry.points = [new mxPoint(90, 60), new mxPoint(90, 130)]; e1.geometry.points = [new mxPoint(90, 60), new mxPoint(90, 130)];
var e2 = graph.insertEdge(parent, null, '', v2, v3); const e2 = graph.insertEdge(parent, null, '', v2, v3);
e2.geometry.points = [new mxPoint(90, 260), new mxPoint(90, 170)]; e2.geometry.points = [new mxPoint(90, 260), new mxPoint(90, 170)];
var v4 = graph.insertVertex(parent, null, 'A3', 520, 20, 40, 80, 'shape=customShape;flipH=1'); const v4 = graph.insertVertex(
var v5 = graph.insertVertex(parent, null, 'A4', 520, 220, 40, 80, 'shape=and;flipH=1'); parent,
var v6 = graph.insertVertex(parent, null, 'X2', 340, 110, 80, 80, 'shape=xor;flipH=1'); null,
var e3 = graph.insertEdge(parent, null, '', v4, v6); 'A3',
520,
20,
40,
80,
'shape=customShape;flipH=1'
);
const v5 = graph.insertVertex(
parent,
null,
'A4',
520,
220,
40,
80,
'shape=and;flipH=1'
);
const v6 = graph.insertVertex(
parent,
null,
'X2',
340,
110,
80,
80,
'shape=xor;flipH=1'
);
const e3 = graph.insertEdge(parent, null, '', v4, v6);
e3.geometry.points = [new mxPoint(490, 60), new mxPoint(130, 130)]; e3.geometry.points = [new mxPoint(490, 60), new mxPoint(130, 130)];
var e4 = graph.insertEdge(parent, null, '', v5, v6); const e4 = graph.insertEdge(parent, null, '', v5, v6);
e4.geometry.points = [new mxPoint(490, 260), new mxPoint(130, 170)]; e4.geometry.points = [new mxPoint(490, 260), new mxPoint(130, 170)];
var v7 = graph.insertVertex(parent, null, 'O1', 250, 260, 80, 60, 'shape=or;direction=south'); const v7 = graph.insertVertex(
var e5 = graph.insertEdge(parent, null, '', v6, v7); parent,
null,
'O1',
250,
260,
80,
60,
'shape=or;direction=south'
);
const e5 = graph.insertEdge(parent, null, '', v6, v7);
e5.geometry.points = [new mxPoint(310, 150)]; e5.geometry.points = [new mxPoint(310, 150)];
var e6 = graph.insertEdge(parent, null, '', v3, v7); const e6 = graph.insertEdge(parent, null, '', v3, v7);
e6.geometry.points = [new mxPoint(270, 150)]; e6.geometry.points = [new mxPoint(270, 150)];
var e7 = graph.insertEdge(parent, null, '', v7, v5); const e7 = graph.insertEdge(parent, null, '', v7, v5);
e7.geometry.points = [new mxPoint(290, 370)]; e7.geometry.points = [new mxPoint(290, 370)];
} } finally {
finally
{
// Updates the display // Updates the display
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
document.body.appendChild(mxUtils.button('FlipH', function() this.el2.appendChild(
{ mxUtils.button('FlipH', function() {
graph.toggleCellStyles(mxConstants.STYLE_FLIPH); graph.toggleCellStyles(mxConstants.STYLE_FLIPH);
})); })
);
document.body.appendChild(mxUtils.button('FlipV', function() this.el2.appendChild(
{ mxUtils.button('FlipV', function() {
graph.toggleCellStyles(mxConstants.STYLE_FLIPV); graph.toggleCellStyles(mxConstants.STYLE_FLIPV);
})); })
);
document.body.appendChild(document.createTextNode('\u00a0')); this.el2.appendChild(document.createTextNode('\u00a0'));
document.body.appendChild(document.createTextNode('\u00a0')); this.el2.appendChild(document.createTextNode('\u00a0'));
document.body.appendChild(document.createTextNode('\u00a0')); this.el2.appendChild(document.createTextNode('\u00a0'));
document.body.appendChild(document.createTextNode('\u00a0')); this.el2.appendChild(document.createTextNode('\u00a0'));
document.body.appendChild(mxUtils.button('Rotate', function() this.el2.appendChild(
{ mxUtils.button('Rotate', function() {
let cell = graph.getSelectionCell(); const cell = graph.getSelectionCell();
if (cell != null) if (cell != null) {
{
let geo = graph.getCellGeometry(cell); let geo = graph.getCellGeometry(cell);
if (geo != null) if (geo != null) {
{
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{
// Rotates the size and position in the geometry // Rotates the size and position in the geometry
geo = geo.clone(); geo = geo.clone();
geo.x += geo.width / 2 - geo.height / 2; geo.x += geo.width / 2 - geo.height / 2;
geo.y += geo.height / 2 - geo.width / 2; geo.y += geo.height / 2 - geo.width / 2;
let tmp = geo.width; const tmp = geo.width;
geo.width = geo.height; geo.width = geo.height;
geo.height = tmp; geo.height = tmp;
graph.getModel().setGeometry(cell, geo); graph.getModel().setGeometry(cell, geo);
// Reads the current direction and advances by 90 degrees // Reads the current direction and advances by 90 degrees
let state = graph.view.getState(cell); const state = graph.view.getState(cell);
if (state != null) if (state != null) {
{ let dir =
let dir = state.style[mxConstants.STYLE_DIRECTION] || 'east'/*default*/; state.style[mxConstants.STYLE_DIRECTION] ||
'east'; /* default */
if (dir == 'east') if (dir === 'east') {
{
dir = 'south'; dir = 'south';
} } else if (dir === 'south') {
else if (dir == 'south')
{
dir = 'west'; dir = 'west';
} } else if (dir === 'west') {
else if (dir == 'west')
{
dir = 'north'; dir = 'north';
} } else if (dir === 'north') {
else if (dir == 'north')
{
dir = 'east'; dir = 'east';
} }
graph.setCellStyles(mxConstants.STYLE_DIRECTION, dir, [cell]); graph.setCellStyles(mxConstants.STYLE_DIRECTION, dir, [cell]);
} }
} } finally {
finally
{
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
} }
} }
})); })
);
document.body.appendChild(document.createTextNode('\u00a0')); this.el2.appendChild(document.createTextNode('\u00a0'));
document.body.appendChild(document.createTextNode('\u00a0')); this.el2.appendChild(document.createTextNode('\u00a0'));
document.body.appendChild(document.createTextNode('\u00a0')); this.el2.appendChild(document.createTextNode('\u00a0'));
document.body.appendChild(document.createTextNode('\u00a0')); this.el2.appendChild(document.createTextNode('\u00a0'));
document.body.appendChild(mxUtils.button('And', function() this.el2.appendChild(
{ mxUtils.button('And', function() {
graph.setCellStyles(mxConstants.STYLE_SHAPE, 'and'); graph.setCellStyles(mxConstants.STYLE_SHAPE, 'and');
})); })
document.body.appendChild(mxUtils.button('Or', function() );
{ this.el2.appendChild(
mxUtils.button('Or', function() {
graph.setCellStyles(mxConstants.STYLE_SHAPE, 'or'); graph.setCellStyles(mxConstants.STYLE_SHAPE, 'or');
})); })
document.body.appendChild(mxUtils.button('Xor', function() );
{ this.el2.appendChild(
mxUtils.button('Xor', function() {
graph.setCellStyles(mxConstants.STYLE_SHAPE, 'xor'); graph.setCellStyles(mxConstants.STYLE_SHAPE, 'xor');
})); })
);
document.body.appendChild(document.createTextNode('\u00a0')); this.el2.appendChild(document.createTextNode('\u00a0'));
document.body.appendChild(document.createTextNode('\u00a0')); this.el2.appendChild(document.createTextNode('\u00a0'));
document.body.appendChild(document.createTextNode('\u00a0')); this.el2.appendChild(document.createTextNode('\u00a0'));
document.body.appendChild(document.createTextNode('\u00a0')); this.el2.appendChild(document.createTextNode('\u00a0'));
document.body.appendChild(mxUtils.button('Style', function() this.el2.appendChild(
{ mxUtils.button('Style', function() {
let cell = graph.getSelectionCell(); const cell = graph.getSelectionCell();
if (cell != null) if (cell != null) {
{ const style = mxUtils.prompt(
let style = mxUtils.prompt('Style', graph.getModel().getStyle(cell)); 'Style',
graph.getModel().getStyle(cell)
);
if (style != null) if (style != null) {
{
graph.getModel().setStyle(cell, style); graph.getModel().setStyle(cell, style);
} }
} }
})); })
);
document.body.appendChild(mxUtils.button('+', function() this.el2.appendChild(
{ mxUtils.button('+', function() {
graph.zoomIn(); graph.zoomIn();
})); })
document.body.appendChild(mxUtils.button('-', function() );
{ this.el2.appendChild(
mxUtils.button('-', function() {
graph.zoomOut(); graph.zoomOut();
})); })
);
}
} }
};
</script>
</head>
<!-- Page passes the container for the graph to the program --> export default Stencils;
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="position:relative;overflow:hidden;width:601px;height:401px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>

151
src/pages/Stylesheet.js
View File

@ -8,11 +8,12 @@
*/ */
import React from 'react'; import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxConstants from '../mxgraph/util/mxConstants';
import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
import mxPerimeter from "../mxgraph/view/mxPerimeter";
class MYNAMEHERE extends React.Component { class Stylesheet extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -22,78 +23,53 @@ class MYNAMEHERE extends React.Component {
return ( return (
<> <>
<h1>Stylesheet example for mxGraph</h1> <h1>Stylesheet example for mxGraph</h1>
<div <div
ref={el => { ref={el => {
this.el = el; this.el = el;
}} }}
style={{ style={{
overflow: 'hidden',
position: 'relative',
width: '621px',
height: '311px',
cursor: 'default',
}} }}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
function main(container)
{
// Checks if browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is
// not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Creates the graph inside the DOM node. // Creates the graph inside the DOM node.
let graph = new mxGraph(container); const graph = new mxGraph(this.el);
// Disables basic selection and cell handling // Disables basic selection and cell handling
graph.setEnabled(false); graph.setEnabled(false);
// Returns a special label for edges. Note: This does // Returns a special label for edges. Note: This does
// a supercall to use the default implementation. // a supercall to use the default implementation.
graph.getLabel = function(cell) graph.getLabel = function(cell) {
{ const label = mxGraph.prototype.getLabel.apply(this, arguments);
let label = mxGraph.prototype.getLabel.apply(this, arguments);
if (this.getModel().isEdge(cell)) if (this.getModel().isEdge(cell)) {
{ return `Transfer ${label}`;
return 'Transfer '+label;
} }
else
{
return label; return label;
}
}; };
// Installs a custom global tooltip // Installs a custom global tooltip
graph.setTooltips(true); graph.setTooltips(true);
graph.getTooltip = function(state) graph.getTooltip = function(state) {
{ const { cell } = state;
let cell = state.cell; const model = this.getModel();
let model = this.getModel();
if (model.isEdge(cell)) if (model.isEdge(cell)) {
{ const source = this.getLabel(model.getTerminal(cell, true));
let source = this.getLabel(model.getTerminal(cell, true)); const target = this.getLabel(model.getTerminal(cell, false));
let target = this.getLabel(model.getTerminal(cell, false));
return source+' -> '+target; return `${source} -> ${target}`;
} }
else
{
return this.getLabel(cell); return this.getLabel(cell);
}
}; };
// Creates the default style for vertices // Creates the default style for vertices
@ -124,44 +100,71 @@ export default MYNAMEHERE;
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
// Adds cells to the model in a single step // Adds cells to the model in a single step
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{ const v1 = graph.insertVertex(
var v1 = graph.insertVertex(parent, null, 'Interval 1', 20, 20, 180, 30); parent,
var v2 = graph.insertVertex(parent, null, 'Interval 2', 140, 80, 280, 30); null,
var v3 = graph.insertVertex(parent, null, 'Interval 3', 200, 140, 360, 30); 'Interval 1',
var v4 = graph.insertVertex(parent, null, 'Interval 4', 480, 200, 120, 30); 20,
var v5 = graph.insertVertex(parent, null, 'Interval 5', 60, 260, 400, 30); 20,
var e1 = graph.insertEdge(parent, null, '1', v1, v2); 180,
30
);
const v2 = graph.insertVertex(
parent,
null,
'Interval 2',
140,
80,
280,
30
);
const v3 = graph.insertVertex(
parent,
null,
'Interval 3',
200,
140,
360,
30
);
const v4 = graph.insertVertex(
parent,
null,
'Interval 4',
480,
200,
120,
30
);
const v5 = graph.insertVertex(
parent,
null,
'Interval 5',
60,
260,
400,
30
);
const e1 = graph.insertEdge(parent, null, '1', v1, v2);
e1.getGeometry().points = [{ x: 160, y: 60 }]; e1.getGeometry().points = [{ x: 160, y: 60 }];
var e2 = graph.insertEdge(parent, null, '2', v1, v5); const e2 = graph.insertEdge(parent, null, '2', v1, v5);
e2.getGeometry().points = [{ x: 80, y: 60 }]; e2.getGeometry().points = [{ x: 80, y: 60 }];
var e3 = graph.insertEdge(parent, null, '3', v2, v3); const e3 = graph.insertEdge(parent, null, '3', v2, v3);
e3.getGeometry().points = [{ x: 280, y: 120 }]; e3.getGeometry().points = [{ x: 280, y: 120 }];
var e4 = graph.insertEdge(parent, null, '4', v3, v4); const e4 = graph.insertEdge(parent, null, '4', v3, v4);
e4.getGeometry().points = [{ x: 500, y: 180 }]; e4.getGeometry().points = [{ x: 500, y: 180 }];
var e5 = graph.insertEdge(parent, null, '5', v3, v5); const e5 = graph.insertEdge(parent, null, '5', v3, v5);
e5.getGeometry().points = [{ x: 380, y: 180 }]; e5.getGeometry().points = [{ x: 380, y: 180 }];
} } finally {
finally
{
// Updates the display // Updates the display
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
} }
}; }
</script>
</head>
<!-- Page passes the container for the graph to the program --> export default Stylesheet;
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;position:relative;width:621px;height:311px;cursor:default;">
</div>
</body>
</html>

46
src/pages/Template.js
View File

@ -9,11 +9,12 @@
*/ */
import React from 'react'; import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxUtils from "../mxgraph/util/mxUtils";
import mxCodec from "../mxgraph/io/mxCodec";
class MYNAMEHERE extends React.Component { class Template extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -23,13 +24,17 @@ class MYNAMEHERE extends React.Component {
return ( return (
<> <>
<h1>Hello, World!</h1> <h1>Hello, World!</h1>
<div <div
ref={el => { ref={el => {
this.el = el; this.el = el;
}} }}
style={{ style={{
overflow: 'hidden',
position: 'relative',
width: '321px',
height: '241px',
background: "url('/mxgraph/javascript/examples/editors/images/grid.gif')",
cursor: 'default'
}} }}
/> />
</> </>
@ -37,25 +42,8 @@ class MYNAMEHERE extends React.Component {
}; };
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
function main(container, xml)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Creates the graph inside the given container // Creates the graph inside the given container
let graph = new mxGraph(container); let graph = new mxGraph(this.el);
// Adds rubberband selection to the graph // Adds rubberband selection to the graph
new mxRubberband(graph); new mxRubberband(graph);
@ -63,16 +51,10 @@ export default MYNAMEHERE;
let doc = mxUtils.parseXml(xml); let doc = mxUtils.parseXml(xml);
let codec = new mxCodec(doc); let codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel()); codec.decode(doc.documentElement, graph.getModel());
}
}; };
</script> }
</head>
export default Template;
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'), '%graph%');">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer" style="overflow:hidden;position:relative;width:321px;height:241px;background:url('/mxgraph/javascript/examples/editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>

71
src/pages/Thread.js
View File

@ -6,11 +6,9 @@
*/ */
import React from 'react'; import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component { class Thread extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -20,75 +18,54 @@ class MYNAMEHERE extends React.Component {
return ( return (
<> <>
<h1>Thread example for mxGraph</h1> <h1>Thread example for mxGraph</h1>
<div <div
ref={el => { ref={el => {
this.el = el; this.el = el;
}} }}
style={{ style={{
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
}} }}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
function main(container)
{
// Checks if browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is
// not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Creates the graph inside the given container // Creates the graph inside the given container
let graph = new mxGraph(container); const graph = new mxGraph(this.el);
// Disables basic selection and cell handling // Disables basic selection and cell handling
graph.setEnabled(false); graph.setEnabled(false);
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
var v1, v2, e1; let v1;
let v2;
let e1;
// Adds cells to the model in a single step // Adds cells to the model in a single step
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try {
{
v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30); v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30); v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
e1 = graph.insertEdge(parent, null, '', v1, v2); e1 = graph.insertEdge(parent, null, '', v1, v2);
} } finally {
finally
{
// Updates the display // Updates the display
graph.getModel().endUpdate(); graph.getModel().endUpdate();
} }
// Function to switch the overlay every 5 secs // Function to switch the overlay every 5 secs
let f = function() const f = () => {
{ const overlays = graph.getCellOverlays(v1);
let overlays = graph.getCellOverlays(v1);
if (overlays == null) if (overlays == null) {
{
graph.removeCellOverlays(v2); graph.removeCellOverlays(v2);
graph.setCellWarning(v1, 'Tooltip'); graph.setCellWarning(v1, 'Tooltip');
} } else {
else
{
graph.removeCellOverlays(v1); graph.removeCellOverlays(v1);
graph.setCellWarning(v2, 'Tooltip'); graph.setCellWarning(v2, 'Tooltip');
} }
@ -97,16 +74,6 @@ export default MYNAMEHERE;
window.setInterval(f, 1000); window.setInterval(f, 1000);
f(); f();
} }
}; }
</script>
</head>
<!-- Page passes the container for the graph to the program --> export default Thread;
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif')">
</div>
</body>
</html>

143
src/pages/Toolbar.js
View File

@ -6,11 +6,19 @@
*/ */
import React from 'react'; import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph'; import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband'; import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxUtils from '../mxgraph/util/mxUtils';
import mxDragSource from '../mxgraph/util/mxDragSource';
import mxGraphModel from '../mxgraph/model/mxGraphModel';
import mxToolbar from '../mxgraph/util/mxToolbar';
import mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';
import mxImage from '../mxgraph/util/mxImage';
import mxGeometry from '../mxgraph/model/mxGeometry';
import mxCell from '../mxgraph/model/mxCell';
import mxKeyHandler from '../mxgraph/handler/mxKeyHandler';
class MYNAMEHERE extends React.Component { class Toolbar extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -26,38 +34,29 @@ class MYNAMEHERE extends React.Component {
this.el = el; this.el = el;
}} }}
style={{ style={{
position: 'relative',
overflow: 'hidden',
width: '600px',
height: '400px',
border: 'gray dotted 1px',
cursor: 'default',
}} }}
/> />
</> </>
); );
}; }
componentDidMount() { componentDidMount() {
};
}
export default MYNAMEHERE;
function main()
{
// Defines an icon for creating new connections in the connection handler. // Defines an icon for creating new connections in the connection handler.
// This will automatically disable the highlighting of the source vertex. // This will automatically disable the highlighting of the source vertex.
mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16); mxConnectionHandler.prototype.connectImage = new mxImage(
'images/connector.gif',
16,
16
);
// Checks if browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is
// not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Creates the div for the toolbar // Creates the div for the toolbar
let tbContainer = document.createElement('div'); const tbContainer = document.createElement('div');
tbContainer.style.position = 'absolute'; tbContainer.style.position = 'absolute';
tbContainer.style.overflow = 'hidden'; tbContainer.style.overflow = 'hidden';
tbContainer.style.padding = '2px'; tbContainer.style.padding = '2px';
@ -66,14 +65,14 @@ export default MYNAMEHERE;
tbContainer.style.width = '24px'; tbContainer.style.width = '24px';
tbContainer.style.bottom = '0px'; tbContainer.style.bottom = '0px';
document.body.appendChild(tbContainer); this.el.appendChild(tbContainer);
// Creates new toolbar without event processing // Creates new toolbar without event processing
let toolbar = new mxToolbar(tbContainer); const toolbar = new mxToolbar(tbContainer);
toolbar.enabled = false toolbar.enabled = false;
// Creates the div for the graph // Creates the div for the graph
container = document.createElement('div'); const container = document.createElement('div');
container.style.position = 'absolute'; container.style.position = 'absolute';
container.style.overflow = 'hidden'; container.style.overflow = 'hidden';
container.style.left = '24px'; container.style.left = '24px';
@ -82,24 +81,20 @@ export default MYNAMEHERE;
container.style.bottom = '0px'; container.style.bottom = '0px';
container.style.background = 'url("editors/images/grid.gif")'; container.style.background = 'url("editors/images/grid.gif")';
document.body.appendChild(container); this.el.appendChild(container);
// Creates the model and the graph inside the container // Creates the model and the graph inside the container
// using the fastest rendering available on the browser // using the fastest rendering available on the browser
let model = new mxGraphModel(); const model = new mxGraphModel();
let graph = new mxGraph(container, model); const graph = new mxGraph(container, model);
graph.dropEnabled = true; graph.dropEnabled = true;
// Matches DnD inside the graph // Matches DnD inside the graph
mxDragSource.prototype.getDropTarget = function(graph, x, y) mxDragSource.prototype.getDropTarget = function(graph, x, y) {
{
let cell = graph.getCellAt(x, y); let cell = graph.getCellAt(x, y);
if (!graph.isValidDropTarget(cell)) {
if (!graph.isValidDropTarget(cell))
{
cell = null; cell = null;
} }
return cell; return cell;
}; };
@ -108,18 +103,22 @@ export default MYNAMEHERE;
graph.setMultigraph(false); graph.setMultigraph(false);
// Stops editing on enter or escape keypress // Stops editing on enter or escape keypress
let keyHandler = new mxKeyHandler(graph); const keyHandler = new mxKeyHandler(graph);
let rubberband = new mxRubberband(graph); const rubberband = new mxRubberband(graph);
let addVertex = function(icon, w, h, style) const addVertex = (icon, w, h, style) => {
{ const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
let vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
vertex.setVertex(true); vertex.setVertex(true);
addToolbarItem(graph, toolbar, vertex, icon); this.addToolbarItem(graph, toolbar, vertex, icon);
}; };
addVertex('editors/images/swimlane.gif', 120, 160, 'shape=swimlane;startSize=20;'); addVertex(
'editors/images/swimlane.gif',
120,
160,
'shape=swimlane;startSize=20;'
);
addVertex('editors/images/rectangle.gif', 100, 40, ''); addVertex('editors/images/rectangle.gif', 100, 40, '');
addVertex('editors/images/rounded.gif', 100, 40, 'shape=rounded'); addVertex('editors/images/rounded.gif', 100, 40, 'shape=rounded');
addVertex('editors/images/ellipse.gif', 40, 40, 'shape=ellipse'); addVertex('editors/images/ellipse.gif', 40, 40, 'shape=ellipse');
@ -129,33 +128,37 @@ export default MYNAMEHERE;
addVertex('editors/images/actor.gif', 30, 40, 'shape=actor'); addVertex('editors/images/actor.gif', 30, 40, 'shape=actor');
toolbar.addLine(); toolbar.addLine();
let button = mxUtils.button('Create toolbar entry from selection', function(evt) const button = mxUtils.button(
{ 'Create toolbar entry from selection',
if (!graph.isSelectionEmpty()) evt => {
{ if (!graph.isSelectionEmpty()) {
// Creates a copy of the selection array to preserve its state // Creates a copy of the selection array to preserve its state
let cells = graph.getSelectionCells(); const cells = graph.getSelectionCells();
let bounds = graph.getView().getBounds(cells); const bounds = graph.getView().getBounds(cells);
// Function that is executed when the image is dropped on // Function that is executed when the image is dropped on
// the graph. The cell argument points to the cell under // the graph. The cell argument points to the cell under
// the mousepointer if there is one. // the mousepointer if there is one.
let funct = function(graph, evt, cell) const funct = (graph, evt, cell) => {
{
graph.stopEditing(false); graph.stopEditing(false);
let pt = graph.getPointForEvent(evt); const pt = graph.getPointForEvent(evt);
let dx = pt.x - bounds.x; const dx = pt.x - bounds.x;
let dy = pt.y - bounds.y; const dy = pt.y - bounds.y;
graph.setSelectionCells(graph.importCells(cells, dx, dy, cell)); graph.setSelectionCells(graph.importCells(cells, dx, dy, cell));
} };
// Creates the image which is used as the drag icon (preview) // Creates the image which is used as the drag icon (preview)
let img = toolbar.addMode(null, 'editors/images/outline.gif', funct); const img = toolbar.addMode(
null,
'editors/images/outline.gif',
funct
);
mxUtils.makeDraggable(img, graph, funct); mxUtils.makeDraggable(img, graph, funct);
} }
}); }
);
button.style.position = 'absolute'; button.style.position = 'absolute';
button.style.left = '2px'; button.style.left = '2px';
@ -163,34 +166,26 @@ export default MYNAMEHERE;
document.body.appendChild(button); document.body.appendChild(button);
} }
}
function addToolbarItem(graph, toolbar, prototype, image) addToolbarItem(graph, toolbar, prototype, image) {
{
// Function that is executed when the image is dropped on // Function that is executed when the image is dropped on
// the graph. The cell argument points to the cell under // the graph. The cell argument points to the cell under
// the mousepointer if there is one. // the mousepointer if there is one.
let funct = function(graph, evt, cell) const funct = (graph, evt, cell) => {
{
graph.stopEditing(false); graph.stopEditing(false);
let pt = graph.getPointForEvent(evt); const pt = graph.getPointForEvent(evt);
let vertex = graph.getModel().cloneCell(prototype); const vertex = graph.getModel().cloneCell(prototype);
vertex.geometry.x = pt.x; vertex.geometry.x = pt.x;
vertex.geometry.y = pt.y; vertex.geometry.y = pt.y;
graph.setSelectionCells(graph.importCells([vertex], 0, 0, cell)); graph.setSelectionCells(graph.importCells([vertex], 0, 0, cell));
} };
// Creates the image which is used as the drag icon (preview) // Creates the image which is used as the drag icon (preview)
let img = toolbar.addMode(null, image, funct); const img = toolbar.addMode(null, image, funct);
mxUtils.makeDraggable(img, graph, funct); mxUtils.makeDraggable(img, graph, funct);
} }
}
</script> export default Toolbar;
</head>
<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
<body onload="main();">
</body>
</html>

28
src/pages/index.js
View File

@ -22,9 +22,21 @@ import Tree from "./Tree";
import Validation from "./Validation"; import Validation from "./Validation";
import SwimLanes from "./SwimLanes"; import SwimLanes from "./SwimLanes";
import Wrapping from "./Wrapping"; import Wrapping from "./Wrapping";
import Windows from "./Windows"; //import Windows from "./Windows";
import Visibility from "./Visibility"; import Visibility from "./Visibility";
import UserObject from "./UserObject"; import UserObject from "./UserObject";
import Toolbar from "./Toolbar";
import Thread from "./Thread";
//import Template from "./Template";
import Stylesheet from "./Stylesheet";
import Stencils from "./Stencils";
import SecondLabel from "./SecondLabel";
import Shape from "./Shape";
import Resources from "./Resources";
import RadialTreeLayout from "./RadialTreeLayout";
import PortRefs from "./PortRefs";
import Permissions from "./Permissions";
import Perimeter from "./Perimeter";
export default function Home() { export default function Home() {
return ( return (
@ -53,13 +65,25 @@ export default function Home() {
<EdgeTolerance /> <EdgeTolerance />
<Editing /> <Editing />
<Perimeter />
<Permissions />
<PortRefs />
<RadialTreeLayout />
<Resources />
<SecondLabel />
<Shape />
{/*<Stencils />*/}
<Stylesheet />
<SwimLanes /> <SwimLanes />
{/*<Template />*/}
<Thread />
<Toolbar />
<Tree /> <Tree />
<UserObject /> <UserObject />
<Validation /> <Validation />
<Visibility /> <Visibility />
<Windows /> {/*<Windows />*/}
<Wrapping /> <Wrapping />
</div> </div>
); );