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 mxPoint from '../util/mxPoint';
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 {
/**

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

@ -5,6 +5,8 @@
*/
import mxShape from './mxShape';
import mxPoint from '../util/mxPoint';
import mxUtils from "../util/mxUtils";
import mxConstants from "../util/mxConstants";
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 mxUtils from './mxUtils';
import mxEvent from './mxEvent';
import mxClient from "../mxClient";
import mxConstants from "./mxConstants";
class mxWindow extends mxEventSource {
/**

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

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

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

@ -4,6 +4,12 @@
* 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 {
/**
* 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');
img.style.width = '48px';
img.style.height = '48px';
document.body.appendChild(img);
this.el.appendChild(img);
// Creates the element that is being for the actual preview.
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 mxGraph from '../mxgraph/view/mxGraph';
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) {
super(props);
}
@ -20,56 +22,45 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Perimeter example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
position: 'relative',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
</>
);
};
}
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
// between edge and label is found
mxGraphViewGetPerimeterPoint = mxGraphView.prototype.getPerimeterPoint;
mxGraphView.prototype.getPerimeterPoint = function(terminal, next, orthogonal, border)
{
const mxGraphViewGetPerimeterPoint =
mxGraphView.prototype.getPerimeterPoint;
mxGraphView.prototype.getPerimeterPoint = function(
terminal,
next,
orthogonal,
border
) {
let point = mxGraphViewGetPerimeterPoint.apply(this, arguments);
if (point != null)
{
let perimeter = this.getPerimeterFunction(terminal);
if (point != null) {
const 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
let b = terminal.text.boundingBox.clone();
b.grow(3)
const b = terminal.text.boundingBox.clone();
b.grow(3);
if (mxUtils.rectangleIntersectsSegment(b, point, next))
{
if (mxUtils.rectangleIntersectsSegment(b, point, next)) {
point = perimeter(b, terminal, next, orthogonal);
}
}
@ -79,7 +70,7 @@ export default MYNAMEHERE;
};
// Creates the graph inside the given container
let graph = new mxGraph(container);
const graph = new mxGraph(this.el);
graph.setVertexLabelsMovable(true);
graph.setConnectable(true);
@ -92,34 +83,48 @@ export default MYNAMEHERE;
// Gets the default parent for inserting new cells. This
// 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
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Label', 20, 20, 80, 30, 'verticalLabelPosition=bottom');
var v2 = graph.insertVertex(parent, null, 'Label', 200, 20, 80, 30, 'verticalLabelPosition=bottom');
var v3 = graph.insertVertex(parent, null, 'Label', 20, 150, 80, 30, 'verticalLabelPosition=bottom');
try {
const v1 = graph.insertVertex(
parent,
null,
'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, v3);
}
finally
{
} finally {
// Updates the display
graph.getModel().endUpdate();
}
}
};
</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;position:relative;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>
export default Perimeter;

241
src/pages/Permissions.js
View File

@ -6,11 +6,27 @@
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
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) {
super(props);
}
@ -25,38 +41,23 @@ class MYNAMEHERE extends React.Component {
ref={el => {
this.el = el;
}}
style={{
}}
style={{}}
/>
</>
);
};
}
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.
// 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
let container = document.createElement('div');
const container = document.createElement('div');
container.style.position = 'absolute';
container.style.overflow = 'hidden';
container.style.left = '00px';
@ -65,24 +66,22 @@ export default MYNAMEHERE;
container.style.bottom = '0px';
container.style.background = 'url("editors/images/grid.gif")';
document.body.appendChild(container);
this.el.appendChild(container);
// Creates the graph inside the given container
let graph = new mxGraph(container);
const graph = new mxGraph(container);
// Enable tooltips, disables mutligraphs, enable loops
graph.setMultigraph(false);
graph.setAllowLoops(true);
// Enables rubberband selection and key handling
let rubberband = new mxRubberband(graph);
let keyHandler = new mxKeyHandler(graph);
const rubberband = new mxRubberband(graph);
const keyHandler = new mxKeyHandler(graph);
// Assigns the delete key
keyHandler.bindKey(46, function(evt)
{
if (graph.isEnabled())
{
keyHandler.bindKey(46, function(evt) {
if (graph.isEnabled()) {
graph.removeCells();
}
});
@ -91,8 +90,7 @@ export default MYNAMEHERE;
// aka "private" variable
let currentPermission = null;
let apply = function(permission)
{
const apply = function(permission) {
graph.clearSelection();
permission.apply(graph);
graph.setEnabled(true);
@ -106,49 +104,42 @@ export default MYNAMEHERE;
apply(new Permission());
let button = mxUtils.button('Allow All', function(evt)
{
let button = mxUtils.button('Allow All', function(evt) {
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));
});
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));
});
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));
});
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));
});
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));
});
document.body.appendChild(button);
this.el.appendChild(button);
let button = mxUtils.button('Disabled', function(evt)
{
button = mxUtils.button('Disabled', function(evt) {
graph.clearSelection();
graph.setEnabled(false);
graph.setTooltips(false);
});
document.body.appendChild(button);
this.el.appendChild(button);
// Extends hook functions to use permission object. This could
// 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
// specification for more functions to extend (eg.
// isSelectable).
let oldDisconnectable = graph.isCellDisconnectable;
graph.isCellDisconnectable = function(cell, terminal, source)
{
return oldDisconnectable.apply(this, arguments) &&
currentPermission.editEdges;
const oldDisconnectable = graph.isCellDisconnectable;
graph.isCellDisconnectable = function(cell, terminal, source) {
return (
oldDisconnectable.apply(this, arguments) && currentPermission.editEdges
);
};
let oldTerminalPointMovable = graph.isTerminalPointMovable;
graph.isTerminalPointMovable = function(cell)
{
return oldTerminalPointMovable.apply(this, arguments) &&
currentPermission.editEdges;
const oldTerminalPointMovable = graph.isTerminalPointMovable;
graph.isTerminalPointMovable = function(cell) {
return (
oldTerminalPointMovable.apply(this, arguments) &&
currentPermission.editEdges
);
};
let oldBendable = graph.isCellBendable;
graph.isCellBendable = function(cell)
{
return oldBendable.apply(this, arguments) &&
currentPermission.editEdges;
const oldBendable = graph.isCellBendable;
graph.isCellBendable = function(cell) {
return oldBendable.apply(this, arguments) && currentPermission.editEdges;
};
let oldLabelMovable = graph.isLabelMovable;
graph.isLabelMovable = function(cell)
{
return oldLabelMovable.apply(this, arguments) &&
currentPermission.editEdges;
const oldLabelMovable = graph.isLabelMovable;
graph.isLabelMovable = function(cell) {
return (
oldLabelMovable.apply(this, arguments) && currentPermission.editEdges
);
};
let oldMovable = graph.isCellMovable;
graph.isCellMovable = function(cell)
{
return oldMovable.apply(this, arguments) &&
currentPermission.editVertices;
const oldMovable = graph.isCellMovable;
graph.isCellMovable = function(cell) {
return (
oldMovable.apply(this, arguments) && currentPermission.editVertices
);
};
let oldResizable = graph.isCellResizable;
graph.isCellResizable = function(cell)
{
return oldResizable.apply(this, arguments) &&
currentPermission.editVertices;
const oldResizable = graph.isCellResizable;
graph.isCellResizable = function(cell) {
return (
oldResizable.apply(this, arguments) && currentPermission.editVertices
);
};
let oldEditable = graph.isCellEditable;
graph.isCellEditable = function(cell)
{
return oldEditable.apply(this, arguments) &&
(this.getModel().isVertex(cell) &&
const oldEditable = graph.isCellEditable;
graph.isCellEditable = function(cell) {
return (
(oldEditable.apply(this, arguments) &&
this.getModel().isVertex(cell) &&
currentPermission.editVertices) ||
(this.getModel().isEdge(cell) &&
currentPermission.editEdges);
(this.getModel().isEdge(cell) && currentPermission.editEdges)
);
};
let oldDeletable = graph.isCellDeletable;
graph.isCellDeletable = function(cell)
{
return oldDeletable.apply(this, arguments) &&
(this.getModel().isVertex(cell) &&
const oldDeletable = graph.isCellDeletable;
graph.isCellDeletable = function(cell) {
return (
(oldDeletable.apply(this, arguments) &&
this.getModel().isVertex(cell) &&
currentPermission.editVertices) ||
(this.getModel().isEdge(cell) &&
currentPermission.editEdges);
(this.getModel().isEdge(cell) && currentPermission.editEdges)
);
};
let oldCloneable = graph.isCellCloneable;
graph.isCellCloneable = function(cell)
{
return oldCloneable.apply(this, arguments) &&
currentPermission.cloneCells;
const oldCloneable = graph.isCellCloneable;
graph.isCellCloneable = function(cell) {
return (
oldCloneable.apply(this, arguments) && currentPermission.cloneCells
);
};
// Gets the default parent for inserting new cells. This
// 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
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'Hello,', 200, 20, 80, 30);
var v3 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var e1 = graph.insertEdge(parent, null, 'Connection', v1, v3);
}
finally
{
try {
const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
const v2 = graph.insertVertex(parent, null, 'Hello,', 200, 20, 80, 30);
const v3 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
const e1 = graph.insertEdge(parent, null, 'Connection', v1, v3);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
}
};
}
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);
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main();">
</body>
</html>
export default Permissions;

252
src/pages/PortRefs.js
View File

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

115
src/pages/RadialTreeLayout.js
View File

@ -7,11 +7,13 @@
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import 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) {
super(props);
}
@ -21,39 +23,25 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Hierarchical Layout example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
position: 'relative',
overflow: 'auto',
height: '800px',
width: '1000px',
borderTop: 'gray 1px solid',
}}
/>
</>
);
};
}
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
let graph = new mxGraph(container);
const graph = new mxGraph(this.el);
// Adds rubberband selection
new mxRubberband(graph);
@ -71,43 +59,41 @@ export default MYNAMEHERE;
// Creates a layout algorithm to be used
// 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
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, '1', 500, 500, 80, 30);
var v2 = graph.insertVertex(parent, null, '2.1', 0, 0, 80, 30);
var v3 = graph.insertVertex(parent, null, '2.2', 0, 0, 80, 30);
var v4 = graph.insertVertex(parent, null, '3.1', 0, 0, 80, 30);
var v4_1 = graph.insertVertex(parent, null, '3.2', 0, 0, 80, 30);
var v4_2 = graph.insertVertex(parent, null, '3.3', 0, 0, 80, 30);
var v4_3 = graph.insertVertex(parent, null, '3.6', 0, 0, 80, 30);
var v4_4 = graph.insertVertex(parent, null, '3.7', 0, 0, 80, 30);
var v5 = graph.insertVertex(parent, null, '3.4', 0, 0, 80, 30);
var v6 = graph.insertVertex(parent, null, '2.3', 0, 0, 80, 30);
var v7 = graph.insertVertex(parent, null, '4.1', 0, 0, 80, 30);
var v7_1 = graph.insertVertex(parent, null, '4.2', 0, 0, 80, 30);
var v7_2 = graph.insertVertex(parent, null, '4.3', 0, 0, 80, 30);
var v7_3 = graph.insertVertex(parent, null, '4.4', 0, 0, 80, 30);
var v7_4 = graph.insertVertex(parent, null, '4.5', 0, 0, 80, 30);
var v7_5 = graph.insertVertex(parent, null, '4.6', 0, 0, 80, 30);
var v7_6 = graph.insertVertex(parent, null, '4.7', 0, 0, 80, 30);
try {
const v1 = graph.insertVertex(parent, null, '1', 500, 500, 80, 30);
const v2 = graph.insertVertex(parent, null, '2.1', 0, 0, 80, 30);
const v3 = graph.insertVertex(parent, null, '2.2', 0, 0, 80, 30);
const v4 = graph.insertVertex(parent, null, '3.1', 0, 0, 80, 30);
const 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);
const 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);
const v5 = graph.insertVertex(parent, null, '3.4', 0, 0, 80, 30);
const v6 = graph.insertVertex(parent, null, '2.3', 0, 0, 80, 30);
const v7 = graph.insertVertex(parent, null, '4.1', 0, 0, 80, 30);
const 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);
const 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);
const 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 e1 = graph.insertEdge(parent, null, '', v1, v2);
var e2 = graph.insertEdge(parent, null, '', v1, v3);
var e3 = graph.insertEdge(parent, null, '', v3, v4);
var e3_1 = graph.insertEdge(parent, null, '', v3, v4_1);
var e3_2 = graph.insertEdge(parent, null, '', v3, v4_2);
var e3_3 = graph.insertEdge(parent, null, '', v3, v4_3);
var e3_4 = graph.insertEdge(parent, null, '', v3, v4_4);
var e4 = graph.insertEdge(parent, null, '', v2, v5);
var e5 = graph.insertEdge(parent, null, '', v1, v6);
var e6 = graph.insertEdge(parent, null, '', v4_3, v7);
const e1 = graph.insertEdge(parent, null, '', v1, v2);
const e2 = graph.insertEdge(parent, null, '', v1, v3);
const e3 = graph.insertEdge(parent, null, '', v3, v4);
const e3_1 = graph.insertEdge(parent, null, '', v3, v4_1);
const e3_2 = graph.insertEdge(parent, null, '', v3, v4_2);
const e3_3 = graph.insertEdge(parent, null, '', v3, v4_3);
const e3_4 = graph.insertEdge(parent, null, '', v3, v4_4);
const e4 = graph.insertEdge(parent, null, '', v2, v5);
const e5 = graph.insertEdge(parent, null, '', v1, v6);
const e6 = graph.insertEdge(parent, null, '', v4_3, v7);
var e6_1 = graph.insertEdge(parent, null, '', v4_4, v7_4);
var e6_2 = graph.insertEdge(parent, null, '', v4_4, v7_5);
var e6_3 = graph.insertEdge(parent, null, '', v4_4, v7_6);
@ -117,24 +103,11 @@ export default MYNAMEHERE;
// Executes the layout
layout.execute(parent);
}
finally
{
} finally {
// Updates the display
graph.getModel().endUpdate();
}
}
};
</script>
</head>
}
<!-- Page passes the container for the graph to the program -->
<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>
export default RadialTreeLayout;

66
src/pages/Resources.js
View File

@ -9,8 +9,9 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxClient from '../mxgraph/mxClient';
class MYNAMEHERE extends React.Component {
class Resources extends React.Component {
constructor(props) {
super(props);
}
@ -26,74 +27,49 @@ class MYNAMEHERE extends React.Component {
this.el = el;
}}
style={{
position: 'relative',
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
</>
);
};
}
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)
// Alternatively you can remove the line that sets mxLoadResources
// anove and change the code to not use this callback.
mxClient.loadResources(function()
{
mxClient.loadResources(() => {
// Disables the built-in context menu
mxEvent.disableContextMenu(container);
mxEvent.disableContextMenu(this.el);
// Creates the graph inside the given container
let graph = new mxGraph(container);
const graph = new mxGraph(this.el);
// 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();
const 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
{
try {
const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
const e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
});
}
};
</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="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>
export default Resources;

215
src/pages/SecondLabel.js
View File

@ -6,11 +6,15 @@
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxUtils from '../mxgraph/util/mxUtils';
import 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) {
super(props);
}
@ -26,34 +30,37 @@ class MYNAMEHERE extends React.Component {
this.el = el;
}}
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:
(function()
{
let mxRectangleShapeIsHtmlAllowed = mxRectangleShape.prototype.isHtmlAllowed;
mxRectangleShape.prototype.isHtmlAllowed = function()
{
return mxRectangleShapeIsHtmlAllowed.apply(this, arguments) && this.state == null;
(function() {
const mxRectangleShapeIsHtmlAllowed =
mxRectangleShape.prototype.isHtmlAllowed;
mxRectangleShape.prototype.isHtmlAllowed = function() {
return (
mxRectangleShapeIsHtmlAllowed.apply(this, arguments) &&
this.state == null
);
};
mxRectangleShapePaintForeground = 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)
{
const mxRectangleShapePaintForeground =
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
) {
c.setFontColor('#a0a0a0');
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
let graph = new mxGraph(container);
const graph = new mxGraph(this.el);
// Disables the folding icon
graph.isCellFoldable = function(cell)
{
graph.isCellFoldable = function(cell) {
return false;
}
};
let secondLabelVisible = true;
// Hook for returning shape number for a given cell
graph.getSecondLabel = function(cell)
{
if (!this.model.isEdge(cell))
{
graph.getSecondLabel = function(cell) {
if (!this.model.isEdge(cell)) {
// 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;
@ -101,27 +92,39 @@ export default MYNAMEHERE;
let relativeChildVerticesVisible = true;
// Overrides method to hide relative child vertices
graph.isCellVisible = function(cell)
{
return !this.model.isVertex(cell) || cell.geometry == null ||
graph.isCellVisible = function(cell) {
return (
!this.model.isVertex(cell) ||
cell.geometry == null ||
!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
let redrawShape = graph.cellRenderer.redrawShape;
graph.cellRenderer.redrawShape = function(state, force, rendering)
{
let result = redrawShape.apply(this, arguments);
const { redrawShape } = graph.cellRenderer;
graph.cellRenderer.redrawShape = function(state, force, rendering) {
const result = redrawShape.apply(this, arguments);
if (result && secondLabelVisible && state.cell.geometry != null && !state.cell.geometry.relative)
{
let secondLabel = graph.getSecondLabel(state.cell);
if (
result &&
secondLabelVisible &&
state.cell.geometry != null &&
!state.cell.geometry.relative
) {
const secondLabel = graph.getSecondLabel(state.cell);
if (secondLabel != null && state.shape != null && state.secondLabel == null)
{
state.secondLabel = new mxText(secondLabel, new mxRectangle(),
mxConstants.ALIGN_LEFT, mxConstants.ALIGN_BOTTOM);
if (
secondLabel != null &&
state.shape != null &&
state.secondLabel == null
) {
state.secondLabel = new mxText(
secondLabel,
new mxRectangle(),
mxConstants.ALIGN_LEFT,
mxConstants.ALIGN_BOTTOM
);
// Styles the label
state.secondLabel.color = 'black';
@ -138,10 +141,14 @@ export default MYNAMEHERE;
}
}
if (state.secondLabel != null)
{
let scale = graph.getView().getScale();
let bounds = new mxRectangle(state.x + state.width - 8 * scale, state.y + 8 * scale, 35, 0);
if (state.secondLabel != null) {
const scale = graph.getView().getScale();
const bounds = new mxRectangle(
state.x + state.width - 8 * scale,
state.y + 8 * scale,
35,
0
);
state.secondLabel.state = state;
state.secondLabel.value = graph.getSecondLabel(state.cell);
state.secondLabel.scale = scale;
@ -153,80 +160,84 @@ export default MYNAMEHERE;
};
// Destroys the shape number
let destroy = graph.cellRenderer.destroy;
graph.cellRenderer.destroy = function(state)
{
const { destroy } = graph.cellRenderer;
graph.cellRenderer.destroy = function(state) {
destroy.apply(this, arguments);
if (state.secondLabel != null)
{
if (state.secondLabel != null) {
state.secondLabel.destroy();
state.secondLabel = null;
}
};
graph.cellRenderer.getShapesForState = function(state)
{
graph.cellRenderer.getShapesForState = function(state) {
return [state.shape, state.text, state.secondLabel, state.control];
};
// Gets the default parent for inserting new cells. This
// 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
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello,', 30, 40, 80, 30);
try {
const v1 = graph.insertVertex(parent, null, 'Hello,', 30, 40, 80, 30);
// 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
// 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);
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
// but this time with an automatic size so that the cell is actually selectable and
// 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);
graph.updateCellSize(v21);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
const e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
// Adds a button to execute the layout
document.body.insertBefore(mxUtils.button('Toggle Child Vertices',
function(evt)
{
document.body.insertBefore(
mxUtils.button('Toggle Child Vertices', function(evt) {
relativeChildVerticesVisible = !relativeChildVerticesVisible;
graph.refresh();
}
), document.body.firstChild);
}),
document.body.firstChild
);
// Adds a button to execute the layout
document.body.insertBefore(mxUtils.button('Toggle IDs',
function(evt)
{
document.body.insertBefore(
mxUtils.button('Toggle IDs', function(evt) {
secondLabelVisible = !secondLabelVisible;
graph.refresh();
}),
document.body.firstChild
);
}
), document.body.firstChild);
}
};
</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="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif')">
</div>
</body>
</html>
export default SecondLabel;

103
src/pages/Shape.js
View File

@ -6,11 +6,12 @@
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxConstants from '../mxgraph/util/mxConstants';
import mxCylinder from '../mxgraph/shape/mxCylinder';
import mxCellRenderer from "../mxgraph/view/mxCellRenderer";
class MYNAMEHERE extends React.Component {
class Shape extends React.Component {
constructor(props) {
super(props);
}
@ -26,22 +27,17 @@ class MYNAMEHERE extends React.Component {
this.el = el;
}}
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:
____
@ -52,21 +48,15 @@ export default MYNAMEHERE;
The code below defines the shape. The BoxShape function
it the constructor which creates a new object instance.
*/
function BoxShape()
{
mxCylinder.call(this);
};
/*
The next lines use an mxCylinder instance to augment the
prototype of the shape ("inheritance") and reset the
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"
BoxShape.prototype.extrude = 10;
extrude = 10;
/*
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)
{
let dy = this.extrude * this.scale;
let dx = this.extrude * this.scale;
redrawPath(path, x, y, w, h, isForeground) {
const dy = this.extrude * this.scale;
const dx = this.extrude * this.scale;
if (isForeground)
{
if (isForeground) {
path.moveTo(0, dy);
path.lineTo(w - dx, dy);
path.lineTo(w, 0);
path.moveTo(w - dx, dy);
path.lineTo(w - dx, h);
}
else
{
} else {
path.moveTo(0, dy);
path.lineTo(dx, 0);
path.lineTo(w, 0);
@ -110,37 +96,19 @@ export default MYNAMEHERE;
path.lineTo(dx, 0);
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.
let graph = new mxGraph(container);
const graph = new mxGraph(this.el);
// Disables basic selection and cell handling
graph.setEnabled(false);
// Changes the default style for vertices "in-place"
// to use the custom shape.
let style = graph.getStylesheet().getDefaultVertexStyle();
const style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'box';
// 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
// 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
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Custom', 20, 20, 80, 60);
var v2 = graph.insertVertex(parent, null, 'Shape', 200, 150, 80, 60);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
try {
const v1 = graph.insertVertex(parent, null, 'Custom', 20, 20, 80, 60);
const v2 = graph.insertVertex(parent, null, 'Shape', 200, 150, 80, 60);
const e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
}
};
</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')">
</div>
</body>
</html>
export default Shape;

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

151
src/pages/Stylesheet.js
View File

@ -8,11 +8,12 @@
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxConstants from '../mxgraph/util/mxConstants';
import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
import mxPerimeter from "../mxgraph/view/mxPerimeter";
class MYNAMEHERE extends React.Component {
class Stylesheet extends React.Component {
constructor(props) {
super(props);
}
@ -22,78 +23,53 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Stylesheet example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
position: 'relative',
width: '621px',
height: '311px',
cursor: 'default',
}}
/>
</>
);
};
}
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.
let graph = new mxGraph(container);
const graph = new mxGraph(this.el);
// Disables basic selection and cell handling
graph.setEnabled(false);
// Returns a special label for edges. Note: This does
// a supercall to use the default implementation.
graph.getLabel = function(cell)
{
let label = mxGraph.prototype.getLabel.apply(this, arguments);
graph.getLabel = function(cell) {
const label = mxGraph.prototype.getLabel.apply(this, arguments);
if (this.getModel().isEdge(cell))
{
return 'Transfer '+label;
if (this.getModel().isEdge(cell)) {
return `Transfer ${label}`;
}
else
{
return label;
}
};
// Installs a custom global tooltip
graph.setTooltips(true);
graph.getTooltip = function(state)
{
let cell = state.cell;
let model = this.getModel();
graph.getTooltip = function(state) {
const { cell } = state;
const model = this.getModel();
if (model.isEdge(cell))
{
let source = this.getLabel(model.getTerminal(cell, true));
let target = this.getLabel(model.getTerminal(cell, false));
if (model.isEdge(cell)) {
const source = this.getLabel(model.getTerminal(cell, true));
const target = this.getLabel(model.getTerminal(cell, false));
return source+' -> '+target;
return `${source} -> ${target}`;
}
else
{
return this.getLabel(cell);
}
};
// Creates the default style for vertices
@ -124,44 +100,71 @@ export default MYNAMEHERE;
// Gets the default parent for inserting new cells. This
// 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
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Interval 1', 20, 20, 180, 30);
var v2 = graph.insertVertex(parent, null, 'Interval 2', 140, 80, 280, 30);
var v3 = graph.insertVertex(parent, null, 'Interval 3', 200, 140, 360, 30);
var v4 = graph.insertVertex(parent, null, 'Interval 4', 480, 200, 120, 30);
var v5 = graph.insertVertex(parent, null, 'Interval 5', 60, 260, 400, 30);
var e1 = graph.insertEdge(parent, null, '1', v1, v2);
try {
const v1 = graph.insertVertex(
parent,
null,
'Interval 1',
20,
20,
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 }];
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 }];
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 }];
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 }];
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 }];
}
finally
{
} finally {
// Updates the display
graph.getModel().endUpdate();
}
}
};
</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;position:relative;width:621px;height:311px;cursor:default;">
</div>
</body>
</html>
export default Stylesheet;

46
src/pages/Template.js
View File

@ -9,11 +9,12 @@
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxUtils from "../mxgraph/util/mxUtils";
import mxCodec from "../mxgraph/io/mxCodec";
class MYNAMEHERE extends React.Component {
class Template extends React.Component {
constructor(props) {
super(props);
}
@ -23,13 +24,17 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Hello, World!</h1>
<div
ref={el => {
this.el = el;
}}
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() {
};
}
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
let graph = new mxGraph(container);
let graph = new mxGraph(this.el);
// Adds rubberband selection to the graph
new mxRubberband(graph);
@ -63,16 +51,10 @@ export default MYNAMEHERE;
let doc = mxUtils.parseXml(xml);
let codec = new mxCodec(doc);
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 mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
class MYNAMEHERE extends React.Component {
class Thread extends React.Component {
constructor(props) {
super(props);
}
@ -20,75 +18,54 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Thread example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
}}
/>
</>
);
};
}
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
let graph = new mxGraph(container);
const graph = new mxGraph(this.el);
// Disables basic selection and cell handling
graph.setEnabled(false);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent();
var v1, v2, e1;
const parent = graph.getDefaultParent();
let v1;
let v2;
let e1;
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
try {
v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
} finally {
// Updates the display
graph.getModel().endUpdate();
}
// Function to switch the overlay every 5 secs
let f = function()
{
let overlays = graph.getCellOverlays(v1);
const f = () => {
const overlays = graph.getCellOverlays(v1);
if (overlays == null)
{
if (overlays == null) {
graph.removeCellOverlays(v2);
graph.setCellWarning(v1, 'Tooltip');
}
else
{
} else {
graph.removeCellOverlays(v1);
graph.setCellWarning(v2, 'Tooltip');
}
@ -97,16 +74,6 @@ export default MYNAMEHERE;
window.setInterval(f, 1000);
f();
}
};
</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')">
</div>
</body>
</html>
export default Thread;

143
src/pages/Toolbar.js
View File

@ -6,11 +6,19 @@
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxUtils from '../mxgraph/util/mxUtils';
import 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) {
super(props);
}
@ -26,38 +34,29 @@ class MYNAMEHERE extends React.Component {
this.el = el;
}}
style={{
position: 'relative',
overflow: 'hidden',
width: '600px',
height: '400px',
border: 'gray dotted 1px',
cursor: 'default',
}}
/>
</>
);
};
}
componentDidMount() {
};
}
export default MYNAMEHERE;
function main()
{
// Defines an icon for creating new connections in the connection handler.
// 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
let tbContainer = document.createElement('div');
const tbContainer = document.createElement('div');
tbContainer.style.position = 'absolute';
tbContainer.style.overflow = 'hidden';
tbContainer.style.padding = '2px';
@ -66,14 +65,14 @@ export default MYNAMEHERE;
tbContainer.style.width = '24px';
tbContainer.style.bottom = '0px';
document.body.appendChild(tbContainer);
this.el.appendChild(tbContainer);
// Creates new toolbar without event processing
let toolbar = new mxToolbar(tbContainer);
toolbar.enabled = false
const toolbar = new mxToolbar(tbContainer);
toolbar.enabled = false;
// Creates the div for the graph
container = document.createElement('div');
const container = document.createElement('div');
container.style.position = 'absolute';
container.style.overflow = 'hidden';
container.style.left = '24px';
@ -82,24 +81,20 @@ export default MYNAMEHERE;
container.style.bottom = '0px';
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
// using the fastest rendering available on the browser
let model = new mxGraphModel();
let graph = new mxGraph(container, model);
const model = new mxGraphModel();
const graph = new mxGraph(container, model);
graph.dropEnabled = true;
// 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);
if (!graph.isValidDropTarget(cell))
{
if (!graph.isValidDropTarget(cell)) {
cell = null;
}
return cell;
};
@ -108,18 +103,22 @@ export default MYNAMEHERE;
graph.setMultigraph(false);
// Stops editing on enter or escape keypress
let keyHandler = new mxKeyHandler(graph);
let rubberband = new mxRubberband(graph);
const keyHandler = new mxKeyHandler(graph);
const rubberband = new mxRubberband(graph);
let addVertex = function(icon, w, h, style)
{
let vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
const addVertex = (icon, w, h, style) => {
const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
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/rounded.gif', 100, 40, 'shape=rounded');
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');
toolbar.addLine();
let button = mxUtils.button('Create toolbar entry from selection', function(evt)
{
if (!graph.isSelectionEmpty())
{
const button = mxUtils.button(
'Create toolbar entry from selection',
evt => {
if (!graph.isSelectionEmpty()) {
// Creates a copy of the selection array to preserve its state
let cells = graph.getSelectionCells();
let bounds = graph.getView().getBounds(cells);
const cells = graph.getSelectionCells();
const bounds = graph.getView().getBounds(cells);
// Function that is executed when the image is dropped on
// the graph. The cell argument points to the cell under
// the mousepointer if there is one.
let funct = function(graph, evt, cell)
{
const funct = (graph, evt, cell) => {
graph.stopEditing(false);
let pt = graph.getPointForEvent(evt);
let dx = pt.x - bounds.x;
let dy = pt.y - bounds.y;
const pt = graph.getPointForEvent(evt);
const dx = pt.x - bounds.x;
const dy = pt.y - bounds.y;
graph.setSelectionCells(graph.importCells(cells, dx, dy, cell));
}
};
// 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);
}
});
}
);
button.style.position = 'absolute';
button.style.left = '2px';
@ -163,34 +166,26 @@ export default MYNAMEHERE;
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
// the graph. The cell argument points to the cell under
// the mousepointer if there is one.
let funct = function(graph, evt, cell)
{
const funct = (graph, evt, cell) => {
graph.stopEditing(false);
let pt = graph.getPointForEvent(evt);
let vertex = graph.getModel().cloneCell(prototype);
const pt = graph.getPointForEvent(evt);
const vertex = graph.getModel().cloneCell(prototype);
vertex.geometry.x = pt.x;
vertex.geometry.y = pt.y;
graph.setSelectionCells(graph.importCells([vertex], 0, 0, cell));
}
};
// 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);
}
}
</script>
</head>
<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
<body onload="main();">
</body>
</html>
export default Toolbar;

28
src/pages/index.js
View File

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