started integrating more examples into the next.js app
mcyph
parent
b71e09aa70
commit
1b60186ea0
|
|
@ -1,124 +0,0 @@
|
|||
<!--
|
||||
Copyright (c) 2006-2013, JGraph Ltd
|
||||
|
||||
Anchors example for mxGraph. This example demonstrates defining
|
||||
fixed connection points for all shapes.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Anchors example for mxGraph</title>
|
||||
|
||||
<!-- Sets the basepath for the library if not in same directory -->
|
||||
<script type="text/javascript">
|
||||
mxBasePath = '../src';
|
||||
</script>
|
||||
|
||||
<!-- Loads and initializes the library -->
|
||||
<script type="text/javascript" src="../src/js/mxClient.js"></script>
|
||||
|
||||
<!-- Example code -->
|
||||
<script type="text/javascript">
|
||||
|
||||
// Overridden to define per-shape connection points
|
||||
mxGraph.prototype.getAllConnectionConstraints = function(terminal, source)
|
||||
{
|
||||
if (terminal != null && terminal.shape != null)
|
||||
{
|
||||
if (terminal.shape.stencil != null)
|
||||
{
|
||||
if (terminal.shape.stencil.constraints != null)
|
||||
{
|
||||
return terminal.shape.stencil.constraints;
|
||||
}
|
||||
}
|
||||
else if (terminal.shape.constraints != null)
|
||||
{
|
||||
return terminal.shape.constraints;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
// Defines the default constraints for all shapes
|
||||
mxShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.25, 0), true),
|
||||
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
|
||||
new mxConnectionConstraint(new mxPoint(0.75, 0), true),
|
||||
new mxConnectionConstraint(new mxPoint(0, 0.25), true),
|
||||
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
|
||||
new mxConnectionConstraint(new mxPoint(0, 0.75), true),
|
||||
new mxConnectionConstraint(new mxPoint(1, 0.25), true),
|
||||
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
|
||||
new mxConnectionConstraint(new mxPoint(1, 0.75), true),
|
||||
new mxConnectionConstraint(new mxPoint(0.25, 1), true),
|
||||
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
|
||||
new mxConnectionConstraint(new mxPoint(0.75, 1), true)];
|
||||
|
||||
// Edges have no connection points
|
||||
mxPolyline.prototype.constraints = null;
|
||||
|
||||
// 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
|
||||
{
|
||||
// Disables the built-in context menu
|
||||
mxEvent.disableContextMenu(container);
|
||||
|
||||
// Creates the graph inside the given container
|
||||
let graph = new mxGraph(container);
|
||||
graph.setConnectable(true);
|
||||
|
||||
// Enables connect preview for the default edge style
|
||||
graph.connectionHandler.createEdgeState = function(me)
|
||||
{
|
||||
let edge = graph.createEdge(null, null, null, null, null);
|
||||
|
||||
return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
|
||||
};
|
||||
|
||||
// Specifies the default edge style
|
||||
graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';
|
||||
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
};
|
||||
</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>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<!--
|
||||
Copyright (c) 2006-2017, JGraph Ltd
|
||||
|
||||
Animation example for mxGraph. This example demonstrates using
|
||||
SVG animations on edges to visualize the flow in a pipe.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Animation example for mxGraph</title>
|
||||
|
||||
<!-- Sets the basepath for the library if not in same directory -->
|
||||
<script type="text/javascript">
|
||||
mxBasePath = '../src';
|
||||
</script>
|
||||
|
||||
<!-- Loads and initializes the library -->
|
||||
<script type="text/javascript" src="../src/js/mxClient.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
.flow {
|
||||
stroke-dasharray: 8;
|
||||
animation: dash 0.5s linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
@keyframes dash {
|
||||
to {
|
||||
stroke-dashoffset: -16;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Example code -->
|
||||
<script type="text/javascript">
|
||||
function main(container)
|
||||
{
|
||||
let graph = new mxGraph(container);
|
||||
graph.setEnabled(false);
|
||||
let parent = graph.getDefaultParent();
|
||||
|
||||
let vertexStyle = 'shape=cylinder;strokeWidth=2;fillColor=#ffffff;strokeColor=black;' +
|
||||
'gradientColor=#a0a0a0;fontColor=black;fontStyle=1;spacingTop=14;';
|
||||
|
||||
graph.getModel().beginUpdate();
|
||||
try
|
||||
{
|
||||
var v1 = graph.insertVertex(parent, null, 'Pump', 20, 20, 60, 60,vertexStyle);
|
||||
var v2 = graph.insertVertex(parent, null, 'Tank', 200, 150, 60, 60,vertexStyle);
|
||||
var e1 = graph.insertEdge(parent, null, '', v1, v2,
|
||||
'strokeWidth=3;endArrow=block;endSize=2;endFill=1;strokeColor=black;rounded=1;');
|
||||
e1.geometry.points = [new mxPoint(230, 50)];
|
||||
graph.orderCells(true, [e1]);
|
||||
}
|
||||
finally
|
||||
{
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
|
||||
// Adds animation to edge shape and makes "pipe" visible
|
||||
let state = graph.view.getState(e1);
|
||||
state.shape.node.getElementsByTagName('path')[0].removeAttribute('visibility');
|
||||
state.shape.node.getElementsByTagName('path')[0].setAttribute('stroke-width', '6');
|
||||
state.shape.node.getElementsByTagName('path')[0].setAttribute('stroke', 'lightGray');
|
||||
state.shape.node.getElementsByTagName('path')[1].setAttribute('class', 'flow');
|
||||
};
|
||||
</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>
|
||||
|
|
@ -1,198 +0,0 @@
|
|||
<!--
|
||||
Copyright (c) 2006-2013, JGraph Ltd
|
||||
|
||||
Autolayout example for mxGraph. This example demonstrates running
|
||||
and animating a layout algorithm after every change to a graph.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Auto layout example for mxGraph</title>
|
||||
|
||||
<!-- Sets the basepath for the library if not in same directory -->
|
||||
<script type="text/javascript">
|
||||
mxBasePath = '../src';
|
||||
</script>
|
||||
|
||||
<!-- Loads and initializes the library -->
|
||||
<script type="text/javascript" src="../src/js/mxClient.js"></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 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
|
||||
{
|
||||
mxEvent.disableContextMenu(container);
|
||||
|
||||
let mxCellRendererInstallCellOverlayListeners = mxCellRenderer.prototype.installCellOverlayListeners;
|
||||
mxCellRenderer.prototype.installCellOverlayListeners = function(state, overlay, shape)
|
||||
{
|
||||
mxCellRendererInstallCellOverlayListeners.apply(this, arguments);
|
||||
|
||||
mxEvent.addListener(shape.node, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', function (evt)
|
||||
{
|
||||
overlay.fireEvent(new mxEventObject('pointerdown', 'event', evt, 'state', state));
|
||||
});
|
||||
|
||||
if (!mxClient.IS_POINTER && mxClient.IS_TOUCH)
|
||||
{
|
||||
mxEvent.addListener(shape.node, 'touchstart', function (evt)
|
||||
{
|
||||
overlay.fireEvent(new mxEventObject('pointerdown', 'event', evt, 'state', state));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Creates the graph inside the given container
|
||||
let graph = new mxGraph(container);
|
||||
graph.setPanning(true);
|
||||
graph.panningHandler.useLeftButtonForPanning = true;
|
||||
graph.setAllowDanglingEdges(false);
|
||||
graph.connectionHandler.select = false;
|
||||
graph.view.setTranslate(20, 20);
|
||||
|
||||
// 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();
|
||||
|
||||
let addOverlay = function(cell)
|
||||
{
|
||||
// Creates a new overlay with an image and a tooltip
|
||||
let overlay = new mxCellOverlay(new mxImage('images/add.png', 24, 24), 'Add outgoing');
|
||||
overlay.cursor = 'hand';
|
||||
|
||||
// Installs a handler for clicks on the overlay
|
||||
overlay.addListener(mxEvent.CLICK, function(sender, evt2)
|
||||
{
|
||||
graph.clearSelection();
|
||||
let geo = graph.getCellGeometry(cell);
|
||||
|
||||
var v2;
|
||||
|
||||
executeLayout(function()
|
||||
{
|
||||
v2 = graph.insertVertex(parent, null, 'World!', geo.x, geo.y, 80, 30);
|
||||
addOverlay(v2);
|
||||
graph.view.refresh(v2);
|
||||
var e1 = graph.insertEdge(parent, null, '', cell, v2);
|
||||
}, function()
|
||||
{
|
||||
graph.scrollCellToVisible(v2);
|
||||
});
|
||||
});
|
||||
|
||||
// Special CMS event
|
||||
overlay.addListener('pointerdown', function(sender, eo)
|
||||
{
|
||||
var evt2 = eo.getProperty('event');
|
||||
let state = eo.getProperty('state');
|
||||
|
||||
graph.popupMenuHandler.hideMenu();
|
||||
graph.stopEditing(false);
|
||||
|
||||
let pt = mxUtils.convertPoint(graph.container,
|
||||
mxEvent.getClientX(evt2), mxEvent.getClientY(evt2));
|
||||
graph.connectionHandler.start(state, pt.x, pt.y);
|
||||
graph.isMouseDown = true;
|
||||
graph.isMouseTrigger = mxEvent.isMouseEvent(evt2);
|
||||
mxEvent.consume(evt2);
|
||||
});
|
||||
|
||||
// Sets the overlay for the cell in the graph
|
||||
graph.addCellOverlay(cell, overlay);
|
||||
}
|
||||
|
||||
// Adds cells to the model in a single step
|
||||
graph.getModel().beginUpdate();
|
||||
var v1;
|
||||
try
|
||||
{
|
||||
v1 = graph.insertVertex(parent, null, 'Hello,', 0, 0, 80, 30);
|
||||
addOverlay(v1);
|
||||
}
|
||||
finally
|
||||
{
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
|
||||
let layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
|
||||
|
||||
let executeLayout = function(change, post)
|
||||
{
|
||||
graph.getModel().beginUpdate();
|
||||
try
|
||||
{
|
||||
if (change != null)
|
||||
{
|
||||
change();
|
||||
}
|
||||
|
||||
layout.execute(graph.getDefaultParent(), v1);
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
throw e;
|
||||
}
|
||||
finally
|
||||
{
|
||||
// New API for animating graph layout results asynchronously
|
||||
let morph = new mxMorphing(graph);
|
||||
morph.addListener(mxEvent.DONE, mxUtils.bind(this, function()
|
||||
{
|
||||
graph.getModel().endUpdate();
|
||||
|
||||
if (post != null)
|
||||
{
|
||||
post();
|
||||
}
|
||||
}));
|
||||
|
||||
morph.startAnimation();
|
||||
}
|
||||
};
|
||||
|
||||
let edgeHandleConnect = mxEdgeHandler.prototype.connect;
|
||||
mxEdgeHandler.prototype.connect = function(edge, terminal, isSource, isClone, me)
|
||||
{
|
||||
edgeHandleConnect.apply(this, arguments);
|
||||
executeLayout();
|
||||
};
|
||||
|
||||
graph.resizeCell = function()
|
||||
{
|
||||
mxGraph.prototype.resizeCell.apply(this, arguments);
|
||||
|
||||
executeLayout();
|
||||
};
|
||||
|
||||
graph.connectionHandler.addListener(mxEvent.CONNECT, function()
|
||||
{
|
||||
executeLayout();
|
||||
});
|
||||
}
|
||||
};
|
||||
</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:821px;height:641px;background:url('editors/images/grid.gif');cursor:default;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,220 +0,0 @@
|
|||
<!--
|
||||
Copyright (c) 2006-2013, JGraph Ltd
|
||||
|
||||
Boundary example for mxGraph. This example demonstrates
|
||||
implementing boundary events in BPMN diagrams.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Boundary example for mxGraph</title>
|
||||
|
||||
<!-- Sets the basepath for the library if not in same directory -->
|
||||
<script type="text/javascript">
|
||||
mxBasePath = '../src';
|
||||
</script>
|
||||
|
||||
<!-- Loads and initializes the library -->
|
||||
<script type="text/javascript" src="../src/js/mxClient.js"></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 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
|
||||
{
|
||||
// Disables the built-in context menu
|
||||
mxEvent.disableContextMenu(container);
|
||||
|
||||
// Creates the graph inside the given container
|
||||
let graph = new mxGraph(container);
|
||||
|
||||
// Sets the base style for all vertices
|
||||
let style = graph.getStylesheet().getDefaultVertexStyle();
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#ffffff';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#000000';
|
||||
style[mxConstants.STYLE_STROKEWIDTH] = '2';
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
|
||||
style[mxConstants.STYLE_FONTSIZE] = '12';
|
||||
style[mxConstants.STYLE_FONTSTYLE] = 1;
|
||||
graph.getStylesheet().putDefaultVertexStyle(style);
|
||||
|
||||
// Removes folding icon for relative children
|
||||
graph.isCellFoldable = function(cell, collapse)
|
||||
{
|
||||
let childCount = this.model.getChildCount(cell);
|
||||
|
||||
for (let i = 0; i < childCount; i++)
|
||||
{
|
||||
let child = this.model.getChildAt(cell, i);
|
||||
let geo = this.getCellGeometry(child);
|
||||
|
||||
if (geo != null && geo.relative)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return childCount > 0;
|
||||
};
|
||||
|
||||
// Returns the relative position of the given child
|
||||
function getRelativePosition(state, dx, dy)
|
||||
{
|
||||
if (state != null)
|
||||
{
|
||||
let model = graph.getModel();
|
||||
let geo = model.getGeometry(state.cell);
|
||||
|
||||
if (geo != null && geo.relative && !model.isEdge(state.cell))
|
||||
{
|
||||
let parent = model.getParent(state.cell);
|
||||
|
||||
if (model.isVertex(parent))
|
||||
{
|
||||
let pstate = graph.view.getState(parent);
|
||||
|
||||
if (pstate != null)
|
||||
{
|
||||
let scale = graph.view.scale;
|
||||
let x = state.x + dx;
|
||||
let y = state.y + dy;
|
||||
|
||||
if (geo.offset != null)
|
||||
{
|
||||
x -= geo.offset.x * scale;
|
||||
y -= geo.offset.y * scale;
|
||||
}
|
||||
|
||||
x = (x - pstate.x) / pstate.width;
|
||||
y = (y - pstate.y) / pstate.height;
|
||||
|
||||
if (Math.abs(y - 0.5) <= Math.abs((x - 0.5) / 2))
|
||||
{
|
||||
x = (x > 0.5) ? 1 : 0;
|
||||
y = Math.min(1, Math.max(0, y));
|
||||
}
|
||||
else
|
||||
{
|
||||
x = Math.min(1, Math.max(0, x));
|
||||
y = (y > 0.5) ? 1 : 0;
|
||||
}
|
||||
|
||||
return new mxPoint(x, y);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
// Replaces translation for relative children
|
||||
graph.translateCell = function(cell, dx, dy)
|
||||
{
|
||||
let rel = getRelativePosition(this.view.getState(cell), dx * graph.view.scale, dy * graph.view.scale);
|
||||
|
||||
if (rel != null)
|
||||
{
|
||||
let geo = this.model.getGeometry(cell);
|
||||
|
||||
if (geo != null && geo.relative)
|
||||
{
|
||||
geo = geo.clone();
|
||||
geo.x = rel.x;
|
||||
geo.y = rel.y;
|
||||
|
||||
this.model.setGeometry(cell, geo);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
mxGraph.prototype.translateCell.apply(this, arguments);
|
||||
}
|
||||
};
|
||||
|
||||
// Replaces move preview for relative children
|
||||
graph.graphHandler.getDelta = function(me)
|
||||
{
|
||||
let point = mxUtils.convertPoint(this.graph.container, me.getX(), me.getY());
|
||||
let delta = new mxPoint(point.x - this.first.x, point.y - this.first.y);
|
||||
|
||||
if (this.cells != null && this.cells.length > 0 && this.cells[0] != null)
|
||||
{
|
||||
let state = this.graph.view.getState(this.cells[0]);
|
||||
let rel = getRelativePosition(state, delta.x, delta.y);
|
||||
|
||||
if (rel != null)
|
||||
{
|
||||
let pstate = this.graph.view.getState(this.graph.model.getParent(state.cell));
|
||||
|
||||
if (pstate != null)
|
||||
{
|
||||
delta = new mxPoint(pstate.x + pstate.width * rel.x - state.getCenterX(),
|
||||
pstate.y + pstate.height * rel.y - state.getCenterY());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return delta;
|
||||
};
|
||||
|
||||
// Relative children cannot be removed from parent
|
||||
graph.graphHandler.shouldRemoveCellsFromParent = function(parent, cells, evt)
|
||||
{
|
||||
return cells.length == 0 && !cells[0].geometry.relative && mxGraphHandler.prototype.shouldRemoveCellsFromParent.apply(this, arguments);
|
||||
};
|
||||
|
||||
// Enables moving of relative children
|
||||
graph.isCellLocked = function(cell)
|
||||
{
|
||||
return false;
|
||||
};
|
||||
|
||||
// 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, 'Process', 60, 60, 90, 40);
|
||||
var v2 = graph.insertVertex(v1, null, 'in', 0, 0.5, 20, 20, 'fontSize=9;shape=ellipse;resizable=0;');
|
||||
v2.geometry.offset = new mxPoint(-10, -10);
|
||||
v2.geometry.relative = true;
|
||||
var v3 = graph.insertVertex(v1, null, 'out', 1, 0.5, 20, 20, 'fontSize=9;shape=ellipse;resizable=0;');
|
||||
v3.geometry.offset = new mxPoint(-10, -10);
|
||||
v3.geometry.relative = true;
|
||||
}
|
||||
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>
|
||||
|
|
@ -1,356 +0,0 @@
|
|||
<!--
|
||||
Copyright (c) 2006-2013, JGraph Ltd
|
||||
|
||||
Clipboard example for mxGraph. This example demonstrates using the
|
||||
clipboard for providing cross-tab and cross-browser copy and paste.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Clipboard example for mxGraph</title>
|
||||
|
||||
<!-- Sets the basepath for the library if not in same directory -->
|
||||
<script type="text/javascript">
|
||||
mxBasePath = '../src';
|
||||
</script>
|
||||
|
||||
<!-- Loads and initializes the library -->
|
||||
<script type="text/javascript" src="../src/js/mxClient.js"></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 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
|
||||
{
|
||||
// Disables the built-in context menu
|
||||
mxEvent.disableContextMenu(container);
|
||||
|
||||
// Creates the graph inside the given container
|
||||
let graph = new mxGraph(container);
|
||||
|
||||
// Public helper method for shared clipboard.
|
||||
mxClipboard.cellsToString = function(cells)
|
||||
{
|
||||
let codec = new mxCodec();
|
||||
let model = new mxGraphModel();
|
||||
let parent = model.getChildAt(model.getRoot(), 0);
|
||||
|
||||
for (let i = 0; i < cells.length; i++)
|
||||
{
|
||||
model.add(parent, cells[i]);
|
||||
}
|
||||
|
||||
return mxUtils.getXml(codec.encode(model));
|
||||
};
|
||||
|
||||
// Focused but invisible textarea during control or meta key events
|
||||
let textInput = document.createElement('textarea');
|
||||
mxUtils.setOpacity(textInput, 0);
|
||||
textInput.style.width = '1px';
|
||||
textInput.style.height = '1px';
|
||||
let restoreFocus = false;
|
||||
let gs = graph.gridSize;
|
||||
let lastPaste = null;
|
||||
let dx = 0;
|
||||
let dy = 0;
|
||||
|
||||
// Workaround for no copy event in IE/FF if empty
|
||||
textInput.value = ' ';
|
||||
|
||||
// Shows a textare when control/cmd is pressed to handle native clipboard actions
|
||||
mxEvent.addListener(document, 'keydown', function(evt)
|
||||
{
|
||||
// No dialog visible
|
||||
let source = mxEvent.getSource(evt);
|
||||
|
||||
if (graph.isEnabled() && !graph.isMouseDown && !graph.isEditing() && source.nodeName != 'INPUT')
|
||||
{
|
||||
if (evt.keyCode == 224 /* FF */ || (!mxClient.IS_MAC && evt.keyCode == 17 /* Control */) ||
|
||||
(mxClient.IS_MAC && (evt.keyCode == 91 || evt.keyCode == 93) /* Left/Right Meta */))
|
||||
{
|
||||
// Cannot use parentNode for check in IE
|
||||
if (!restoreFocus)
|
||||
{
|
||||
// Avoid autoscroll but allow handling of events
|
||||
textInput.style.position = 'absolute';
|
||||
textInput.style.left = (graph.container.scrollLeft + 10) + 'px';
|
||||
textInput.style.top = (graph.container.scrollTop + 10) + 'px';
|
||||
graph.container.appendChild(textInput);
|
||||
|
||||
restoreFocus = true;
|
||||
textInput.focus();
|
||||
textInput.select();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Restores focus on graph container and removes text input from DOM
|
||||
mxEvent.addListener(document, 'keyup', function(evt)
|
||||
{
|
||||
if (restoreFocus && (evt.keyCode == 224 /* FF */ || evt.keyCode == 17 /* Control */ ||
|
||||
evt.keyCode == 91 || evt.keyCode == 93 /* Meta */))
|
||||
{
|
||||
restoreFocus = false;
|
||||
|
||||
if (!graph.isEditing())
|
||||
{
|
||||
graph.container.focus();
|
||||
}
|
||||
|
||||
textInput.parentNode.removeChild(textInput);
|
||||
}
|
||||
});
|
||||
|
||||
// Inserts the XML for the given cells into the text input for copy
|
||||
let copyCells = function(graph, cells)
|
||||
{
|
||||
if (cells.length > 0)
|
||||
{
|
||||
let clones = graph.cloneCells(cells);
|
||||
|
||||
// Checks for orphaned relative children and makes absolute
|
||||
for (let i = 0; i < clones.length; i++)
|
||||
{
|
||||
let state = graph.view.getState(cells[i]);
|
||||
|
||||
if (state != null)
|
||||
{
|
||||
let geo = graph.getCellGeometry(clones[i]);
|
||||
|
||||
if (geo != null && geo.relative)
|
||||
{
|
||||
geo.relative = false;
|
||||
geo.x = state.x / state.view.scale - state.view.translate.x;
|
||||
geo.y = state.y / state.view.scale - state.view.translate.y;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textInput.value = mxClipboard.cellsToString(clones);
|
||||
}
|
||||
|
||||
textInput.select();
|
||||
lastPaste = textInput.value;
|
||||
};
|
||||
|
||||
// Handles copy event by putting XML for current selection into text input
|
||||
mxEvent.addListener(textInput, 'copy', mxUtils.bind(this, function(evt)
|
||||
{
|
||||
if (graph.isEnabled() && !graph.isSelectionEmpty())
|
||||
{
|
||||
copyCells(graph, mxUtils.sortCells(graph.model.getTopmostCells(graph.getSelectionCells())));
|
||||
dx = 0;
|
||||
dy = 0;
|
||||
}
|
||||
}));
|
||||
|
||||
// Handles cut event by removing cells putting XML into text input
|
||||
mxEvent.addListener(textInput, 'cut', mxUtils.bind(this, function(evt)
|
||||
{
|
||||
if (graph.isEnabled() && !graph.isSelectionEmpty())
|
||||
{
|
||||
copyCells(graph, graph.removeCells());
|
||||
dx = -gs;
|
||||
dy = -gs;
|
||||
}
|
||||
}));
|
||||
|
||||
// Merges XML into existing graph and layers
|
||||
let importXml = function(xml, dx, dy)
|
||||
{
|
||||
dx = (dx != null) ? dx : 0;
|
||||
dy = (dy != null) ? dy : 0;
|
||||
let cells = []
|
||||
|
||||
try
|
||||
{
|
||||
let doc = mxUtils.parseXml(xml);
|
||||
let node = doc.documentElement;
|
||||
|
||||
if (node != null)
|
||||
{
|
||||
let model = new mxGraphModel();
|
||||
let codec = new mxCodec(node.ownerDocument);
|
||||
codec.decode(node, model);
|
||||
|
||||
let childCount = model.getChildCount(model.getRoot());
|
||||
let targetChildCount = graph.model.getChildCount(graph.model.getRoot());
|
||||
|
||||
// Merges existing layers and adds new layers
|
||||
graph.model.beginUpdate();
|
||||
try
|
||||
{
|
||||
for (let i = 0; i < childCount; i++)
|
||||
{
|
||||
let parent = model.getChildAt(model.getRoot(), i);
|
||||
|
||||
// Adds cells to existing layers if not locked
|
||||
if (targetChildCount > i)
|
||||
{
|
||||
// Inserts into active layer if only one layer is being pasted
|
||||
let target = (childCount == 1) ? graph.getDefaultParent() : graph.model.getChildAt(graph.model.getRoot(), i);
|
||||
|
||||
if (!graph.isCellLocked(target))
|
||||
{
|
||||
let children = model.getChildren(parent);
|
||||
cells = cells.concat(graph.importCells(children, dx, dy, target));
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
// Delta is non cascading, needs separate move for layers
|
||||
parent = graph.importCells([parent], 0, 0, graph.model.getRoot())[0];
|
||||
let children = graph.model.getChildren(parent);
|
||||
graph.moveCells(children, dx, dy);
|
||||
cells = cells.concat(children);
|
||||
}
|
||||
}
|
||||
}
|
||||
finally
|
||||
{
|
||||
graph.model.endUpdate();
|
||||
}
|
||||
}
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
alert(e);
|
||||
throw e;
|
||||
}
|
||||
|
||||
return cells;
|
||||
};
|
||||
|
||||
// Parses and inserts XML into graph
|
||||
let pasteText = function(text)
|
||||
{
|
||||
let xml = mxUtils.trim(text);
|
||||
let x = graph.container.scrollLeft / graph.view.scale - graph.view.translate.x;
|
||||
let y = graph.container.scrollTop / graph.view.scale - graph.view.translate.y;
|
||||
|
||||
if (xml.length > 0)
|
||||
{
|
||||
if (lastPaste != xml)
|
||||
{
|
||||
lastPaste = xml;
|
||||
dx = 0;
|
||||
dy = 0;
|
||||
}
|
||||
else
|
||||
{
|
||||
dx += gs;
|
||||
dy += gs;
|
||||
}
|
||||
|
||||
// Standard paste via control-v
|
||||
if (xml.substring(0, 14) == '<mxGraphModel>')
|
||||
{
|
||||
graph.setSelectionCells(importXml(xml, dx, dy));
|
||||
graph.scrollCellToVisible(graph.getSelectionCell());
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Cross-browser function to fetch text from paste events
|
||||
let extractGraphModelFromEvent = function(evt)
|
||||
{
|
||||
let data = null;
|
||||
|
||||
if (evt != null)
|
||||
{
|
||||
let provider = (evt.dataTransfer != null) ? evt.dataTransfer : evt.clipboardData;
|
||||
|
||||
if (provider != null)
|
||||
{
|
||||
if (document.documentMode == 10 || document.documentMode == 11)
|
||||
{
|
||||
data = provider.getData('Text');
|
||||
}
|
||||
else
|
||||
{
|
||||
data = (mxUtils.indexOf(provider.types, 'text/html') >= 0) ? provider.getData('text/html') : null;
|
||||
|
||||
if (mxUtils.indexOf(provider.types, 'text/plain' && (data == null || data.length == 0)))
|
||||
{
|
||||
data = provider.getData('text/plain');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
// Handles paste event by parsing and inserting XML
|
||||
mxEvent.addListener(textInput, 'paste', function(evt)
|
||||
{
|
||||
// Clears existing contents before paste - should not be needed
|
||||
// because all text is selected, but doesn't hurt since the
|
||||
// actual pasting of the new text is delayed in all cases.
|
||||
textInput.value = '';
|
||||
|
||||
if (graph.isEnabled())
|
||||
{
|
||||
let xml = extractGraphModelFromEvent(evt);
|
||||
|
||||
if (xml != null && xml.length > 0)
|
||||
{
|
||||
pasteText(xml);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Timeout for new value to appear
|
||||
window.setTimeout(mxUtils.bind(this, function()
|
||||
{
|
||||
pasteText(textInput.value);
|
||||
}), 0);
|
||||
}
|
||||
}
|
||||
|
||||
textInput.select();
|
||||
});
|
||||
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
};
|
||||
</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>
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
<!--
|
||||
Copyright (c) 2006-2013, JGraph Ltd
|
||||
|
||||
Codec example for mxGraph. This example demonstrates dynamically
|
||||
creating a graph from XML and encoding the model into XML, as well
|
||||
as changing the default style for edges in-place.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Codec example for mxGraph</title>
|
||||
|
||||
<!-- Sets the basepath for the library if not in same directory -->
|
||||
<script type="text/javascript">
|
||||
mxBasePath = '../src';
|
||||
</script>
|
||||
|
||||
<!-- Loads and initializes the library -->
|
||||
<script type="text/javascript" src="../src/js/mxClient.js"></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)
|
||||
{
|
||||
if (mxClient.isBrowserSupported())
|
||||
{
|
||||
let divs = document.getElementsByTagName('*');
|
||||
|
||||
for (let i = 0; i < divs.length; i++)
|
||||
{
|
||||
if (divs[i].className.toString().indexOf('mxgraph') >= 0)
|
||||
{
|
||||
(function(container)
|
||||
{
|
||||
let xml = mxUtils.getTextContent(container);
|
||||
let xmlDocument = mxUtils.parseXml(xml);
|
||||
|
||||
if (xmlDocument.documentElement != null && xmlDocument.documentElement.nodeName == 'mxGraphModel')
|
||||
{
|
||||
let decoder = new mxCodec(xmlDocument);
|
||||
let node = xmlDocument.documentElement;
|
||||
|
||||
container.innerHTML = '';
|
||||
|
||||
let graph = new mxGraph(container);
|
||||
graph.centerZoom = false;
|
||||
graph.setTooltips(false);
|
||||
graph.setEnabled(false);
|
||||
|
||||
// Changes the default style for edges "in-place"
|
||||
let style = graph.getStylesheet().getDefaultEdgeStyle();
|
||||
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
|
||||
|
||||
// Enables panning with left mouse button
|
||||
graph.panningHandler.useLeftButtonForPanning = true;
|
||||
graph.panningHandler.ignoreCell = true;
|
||||
graph.container.style.cursor = 'move';
|
||||
graph.setPanning(true);
|
||||
|
||||
if (divs[i].style.width == '' && divs[i].style.height == '')
|
||||
{
|
||||
graph.resizeContainer = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
// Adds border for fixed size boxes
|
||||
graph.border = 20;
|
||||
}
|
||||
|
||||
decoder.decode(node, graph.getModel());
|
||||
graph.resizeContainer = false;
|
||||
|
||||
// Adds zoom buttons in top, left corner
|
||||
let buttons = document.createElement('div');
|
||||
buttons.style.position = 'absolute';
|
||||
buttons.style.overflow = 'visible';
|
||||
|
||||
let bs = graph.getBorderSizes();
|
||||
buttons.style.top = (container.offsetTop + bs.y) + 'px';
|
||||
buttons.style.left = (container.offsetLeft + bs.x) + 'px';
|
||||
|
||||
let left = 0;
|
||||
let bw = 16;
|
||||
let bh = 16;
|
||||
|
||||
function addButton(label, funct)
|
||||
{
|
||||
let btn = document.createElement('div');
|
||||
mxUtils.write(btn, label);
|
||||
btn.style.position = 'absolute';
|
||||
btn.style.backgroundColor = 'transparent';
|
||||
btn.style.border = '1px solid gray';
|
||||
btn.style.textAlign = 'center';
|
||||
btn.style.fontSize = '10px';
|
||||
btn.style.cursor = 'hand';
|
||||
btn.style.width = bw + 'px';
|
||||
btn.style.height = bh + 'px';
|
||||
btn.style.left = left + 'px';
|
||||
btn.style.top = '0px';
|
||||
|
||||
mxEvent.addListener(btn, 'click', function(evt)
|
||||
{
|
||||
funct();
|
||||
mxEvent.consume(evt);
|
||||
});
|
||||
|
||||
left += bw;
|
||||
|
||||
buttons.appendChild(btn);
|
||||
};
|
||||
|
||||
addButton('+', function()
|
||||
{
|
||||
graph.zoomIn();
|
||||
});
|
||||
|
||||
addButton('-', function()
|
||||
{
|
||||
graph.zoomOut();
|
||||
});
|
||||
|
||||
if (container.nextSibling != null)
|
||||
{
|
||||
container.parentNode.insertBefore(buttons, container.nextSibling);
|
||||
}
|
||||
else
|
||||
{
|
||||
container.appendChild(buttons);
|
||||
}
|
||||
}
|
||||
})(divs[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Contains a graph description which will be converted. -->
|
||||
This graph is embedded in the page.
|
||||
<div class="mxgraph" style="position:relative;overflow:auto;"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" vertex="1" parent="1" value="Interval 1"><mxGeometry x="380" y="0" width="140" height="30" as="geometry"/></mxCell><mxCell id="3" vertex="1" parent="1" value="Interval 2"><mxGeometry x="200" y="80" width="380" height="30" as="geometry"/></mxCell><mxCell id="4" vertex="1" parent="1" value="Interval 3"><mxGeometry x="40" y="140" width="260" height="30" as="geometry"/></mxCell><mxCell id="5" vertex="1" parent="1" value="Interval 4"><mxGeometry x="120" y="200" width="240" height="30" as="geometry"/></mxCell><mxCell id="6" vertex="1" parent="1" value="Interval 5"><mxGeometry x="420" y="260" width="80" height="30" as="geometry"/></mxCell><mxCell id="7" edge="1" source="2" target="3" parent="1" value="Transfer1"><mxGeometry as="geometry"><Array as="points"><Object x="420" y="60"/></Array></mxGeometry></mxCell><mxCell id="8" edge="1" source="2" target="6" parent="1" value=""><mxGeometry as="geometry" relative="1" y="-30"><Array as="points"><Object x="600" y="60"/></Array></mxGeometry></mxCell><mxCell id="9" edge="1" source="3" target="4" parent="1" value="Transfer3"><mxGeometry as="geometry"><Array as="points"><Object x="260" y="120"/></Array></mxGeometry></mxCell><mxCell id="10" edge="1" source="4" target="5" parent="1" value="Transfer4"><mxGeometry as="geometry"><Array as="points"><Object x="200" y="180"/></Array></mxGeometry></mxCell><mxCell id="11" edge="1" source="4" target="6" parent="1" value="Transfer5"><mxGeometry as="geometry" relative="1" y="-10"><Array as="points"><Object x="460" y="155"/></Array></mxGeometry></mxCell></root></mxGraphModel></div>
|
||||
This graph is embedded in the page.
|
||||
<div class="mxgraph" style="position:relative;background:#eeeeee;border:1px solid gray;overflow:auto;width:400px;height:200px;"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" vertex="1" parent="1" value="Interval 1"><mxGeometry x="380" y="0" width="140" height="30" as="geometry"/></mxCell><mxCell id="3" vertex="1" parent="1" value="Interval 2"><mxGeometry x="200" y="80" width="380" height="30" as="geometry"/></mxCell><mxCell id="4" vertex="1" parent="1" value="Interval 3"><mxGeometry x="40" y="140" width="260" height="30" as="geometry"/></mxCell><mxCell id="5" vertex="1" parent="1" value="Interval 4"><mxGeometry x="120" y="200" width="240" height="30" as="geometry"/></mxCell><mxCell id="6" vertex="1" parent="1" value="Interval 5"><mxGeometry x="420" y="260" width="80" height="30" as="geometry"/></mxCell><mxCell id="7" edge="1" source="2" target="3" parent="1" value="Transfer1"><mxGeometry as="geometry"><Array as="points"><Object x="420" y="60"/></Array></mxGeometry></mxCell><mxCell id="8" edge="1" source="2" target="6" parent="1" value=""><mxGeometry as="geometry" relative="1" y="-30"><Array as="points"><Object x="600" y="60"/></Array></mxGeometry></mxCell><mxCell id="9" edge="1" source="3" target="4" parent="1" value="Transfer3"><mxGeometry as="geometry"><Array as="points"><Object x="260" y="120"/></Array></mxGeometry></mxCell><mxCell id="10" edge="1" source="4" target="5" parent="1" value="Transfer4"><mxGeometry as="geometry"><Array as="points"><Object x="200" y="180"/></Array></mxGeometry></mxCell><mxCell id="11" edge="1" source="4" target="6" parent="1" value="Transfer5"><mxGeometry as="geometry" relative="1" y="-10"><Array as="points"><Object x="460" y="155"/></Array></mxGeometry></mxCell></root></mxGraphModel></div>
|
||||
This graph is embedded in the page.
|
||||
<div class="mxgraph" style="position:relative;background:#eeeeee;border:6px solid gray;overflow:auto;width:400px;height:200px;"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" vertex="1" parent="1" value="Interval 1"><mxGeometry x="380" y="20" width="140" height="30" as="geometry"/></mxCell><mxCell id="3" vertex="1" parent="1" value="Interval 2"><mxGeometry x="200" y="80" width="380" height="30" as="geometry"/></mxCell><mxCell id="4" vertex="1" parent="1" value="Interval 3"><mxGeometry x="40" y="140" width="260" height="30" as="geometry"/></mxCell><mxCell id="5" vertex="1" parent="1" value="Interval 4"><mxGeometry x="120" y="200" width="240" height="30" as="geometry"/></mxCell><mxCell id="6" vertex="1" parent="1" value="Interval 5"><mxGeometry x="420" y="260" width="80" height="30" as="geometry"/></mxCell><mxCell id="7" edge="1" source="2" target="3" parent="1" value="Transfer1"><mxGeometry as="geometry"><Array as="points"><Object x="420" y="60"/></Array></mxGeometry></mxCell><mxCell id="8" edge="1" source="2" target="6" parent="1" value="Transfer2"><mxGeometry as="geometry" relative="1" y="0"><Array as="points"><Object x="600" y="60"/></Array></mxGeometry></mxCell><mxCell id="9" edge="1" source="3" target="4" parent="1" value="Transfer3"><mxGeometry as="geometry"><Array as="points"><Object x="260" y="120"/></Array></mxGeometry></mxCell><mxCell id="10" edge="1" source="4" target="5" parent="1" value="Transfer4"><mxGeometry as="geometry"><Array as="points"><Object x="200" y="180"/></Array></mxGeometry></mxCell><mxCell id="11" edge="1" source="4" target="6" parent="1" value="Transfer5"><mxGeometry as="geometry" relative="1" y="-10"><Array as="points"><Object x="460" y="155"/></Array></mxGeometry></mxCell></root></mxGraphModel></div>
|
||||
This graph is embedded in the page.
|
||||
<div class="mxgraph" style="position:relative;overflow:hidden;border:6px solid gray;"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" vertex="1" parent="1" value="Interval 1"><mxGeometry x="380" y="20" width="140" height="30" as="geometry"/></mxCell><mxCell id="3" vertex="1" parent="1" value="Interval 2"><mxGeometry x="200" y="80" width="380" height="30" as="geometry"/></mxCell><mxCell id="4" vertex="1" parent="1" value="Interval 3"><mxGeometry x="40" y="140" width="260" height="30" as="geometry"/></mxCell><mxCell id="5" vertex="1" parent="1" value="Interval 4"><mxGeometry x="120" y="200" width="240" height="30" as="geometry"/></mxCell><mxCell id="6" vertex="1" parent="1" value="Interval 5"><mxGeometry x="420" y="260" width="80" height="30" as="geometry"/></mxCell><mxCell id="7" edge="1" source="2" target="3" parent="1" value="Transfer1"><mxGeometry as="geometry"><Array as="points"><Object x="420" y="60"/></Array></mxGeometry></mxCell><mxCell id="8" edge="1" source="2" target="6" parent="1" value="Transfer2"><mxGeometry as="geometry" relative="1" y="0"><Array as="points"><Object x="600" y="60"/></Array></mxGeometry></mxCell><mxCell id="9" edge="1" source="3" target="4" parent="1" value="Transfer3"><mxGeometry as="geometry"><Array as="points"><Object x="260" y="120"/></Array></mxGeometry></mxCell><mxCell id="10" edge="1" source="4" target="5" parent="1" value="Transfer4"><mxGeometry as="geometry"><Array as="points"><Object x="200" y="180"/></Array></mxGeometry></mxCell><mxCell id="11" edge="1" source="4" target="6" parent="1" value="Transfer5"><mxGeometry as="geometry" relative="1" y="-10"><Array as="points"><Object x="460" y="155"/></Array></mxGeometry></mxCell></root></mxGraphModel></div>
|
||||
This graph is embedded in the page.
|
||||
<script type="text/javascript">
|
||||
main();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -6,6 +6,10 @@
|
|||
|
||||
import mxUtils from '../util/mxUtils';
|
||||
import mxCellPath from '../model/mxCellPath';
|
||||
import mxCodecRegistry from "./mxCodecRegistry";
|
||||
import mxConstants from "../util/mxConstants";
|
||||
import mxCell from "../model/mxCell";
|
||||
import mxLog from "../util/mxLog";
|
||||
|
||||
class mxCodec {
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -4,6 +4,13 @@
|
|||
* Updated to ES9 syntax by David Morrissey 2021
|
||||
*/
|
||||
|
||||
import mxUtils from "../util/mxUtils";
|
||||
import mxObjectIdentity from "../util/mxObjectIdentity";
|
||||
import mxLog from "../util/mxLog";
|
||||
import mxGeometry from "../model/mxGeometry";
|
||||
import mxPoint from "../util/mxPoint";
|
||||
import mxConstants from "../util/mxConstants";
|
||||
|
||||
class mxObjectCodec {
|
||||
/**
|
||||
* Variable: allowEval
|
||||
|
|
@ -602,7 +609,7 @@ class mxObjectCodec {
|
|||
if (this.isNumericAttribute(dec, attr, obj)) {
|
||||
value = parseFloat(value);
|
||||
|
||||
if (isNaN(value) || !isFinite(value)) {
|
||||
if (Number.isNaN(value) || !Number.isFinite(value)) {
|
||||
value = 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@
|
|||
*/
|
||||
|
||||
import mxDictionary from '../../../util/mxDictionary';
|
||||
import mxGraphHierarchyNode from "./mxGraphHierarchyNode";
|
||||
import mxGraphHierarchyEdge from "./mxGraphHierarchyEdge";
|
||||
import mxUtils from "../../../util/mxUtils";
|
||||
|
||||
class mxGraphHierarchyModel {
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@
|
|||
import mxConnectionConstraint from '../view/mxConnectionConstraint';
|
||||
import mxRectangle from '../util/mxRectangle';
|
||||
import mxShape from './mxShape';
|
||||
import mxResources from "../util/mxResources";
|
||||
import mxUtils from "../util/mxUtils";
|
||||
import mxConstants from "../util/mxConstants";
|
||||
import mxStencilRegistry from "./mxStencilRegistry";
|
||||
|
||||
class mxStencil extends mxShape {
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
*/
|
||||
import mxPoint from './mxPoint';
|
||||
import mxCellStatePreview from '../view/mxCellStatePreview';
|
||||
import mxAnimation from "./mxAnimation";
|
||||
|
||||
class mxMorphing extends mxAnimation {
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import mxCellState from './mxCellState';
|
|||
import mxUndoableEdit from '../util/mxUndoableEdit';
|
||||
import mxImageShape from '../shape/mxImageShape';
|
||||
import mxMouseEvent from '../util/mxMouseEvent';
|
||||
import mxStyleRegistry from "./mxStyleRegistry";
|
||||
|
||||
class mxGraphView extends mxEventSource {
|
||||
EMPTY_POINT = new mxPoint();
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
*/
|
||||
|
||||
import mxConstants from '../util/mxConstants';
|
||||
import mxEdgeStyle from "./mxEdgeStyle";
|
||||
import mxPerimeter from "./mxPerimeter";
|
||||
|
||||
const mxStyleRegistry = {
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
*/
|
||||
import mxConstants from '../util/mxConstants';
|
||||
import mxPerimeter from './mxPerimeter';
|
||||
import mxUtils from "../util/mxUtils";
|
||||
|
||||
class mxStylesheet {
|
||||
/**
|
||||
|
|
@ -218,7 +219,7 @@ class mxStylesheet {
|
|||
const key = tmp.substring(0, pos);
|
||||
const value = tmp.substring(pos + 1);
|
||||
|
||||
if (value == mxConstants.NONE) {
|
||||
if (value === mxConstants.NONE) {
|
||||
delete style[key];
|
||||
} else if (mxUtils.isNumeric(value)) {
|
||||
style[key] = parseFloat(value);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,120 @@
|
|||
/**
|
||||
* Copyright (c) 2006-2013, JGraph Ltd
|
||||
*
|
||||
* Anchors example for mxGraph. This example demonstrates defining
|
||||
* fixed connection points for all shapes.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import mxEvent from '../mxgraph/util/mxEvent';
|
||||
import mxGraph from '../mxgraph/view/mxGraph';
|
||||
import mxRubberband from '../mxgraph/handler/mxRubberband';
|
||||
import mxShape from '../mxgraph/shape/mxShape';
|
||||
import mxConnectionConstraint from '../mxgraph/view/mxConnectionConstraint';
|
||||
import mxPoint from '../mxgraph/util/mxPoint';
|
||||
import mxPolyline from '../mxgraph/shape/mxPolyline';
|
||||
import mxCellState from '../mxgraph/view/mxCellState';
|
||||
|
||||
class Anchors extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// Overridden to define per-shape connection points
|
||||
mxGraph.prototype.getAllConnectionConstraints = function(terminal, source) {
|
||||
if (terminal != null && terminal.shape != null) {
|
||||
if (terminal.shape.stencil != null) {
|
||||
if (terminal.shape.stencil.constraints != null) {
|
||||
return terminal.shape.stencil.constraints;
|
||||
}
|
||||
} else if (terminal.shape.constraints != null) {
|
||||
return terminal.shape.constraints;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// Defines the default constraints for all shapes
|
||||
mxShape.prototype.constraints = [
|
||||
new mxConnectionConstraint(new mxPoint(0.25, 0), true),
|
||||
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
|
||||
new mxConnectionConstraint(new mxPoint(0.75, 0), true),
|
||||
new mxConnectionConstraint(new mxPoint(0, 0.25), true),
|
||||
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
|
||||
new mxConnectionConstraint(new mxPoint(0, 0.75), true),
|
||||
new mxConnectionConstraint(new mxPoint(1, 0.25), true),
|
||||
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
|
||||
new mxConnectionConstraint(new mxPoint(1, 0.75), true),
|
||||
new mxConnectionConstraint(new mxPoint(0.25, 1), true),
|
||||
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
|
||||
new mxConnectionConstraint(new mxPoint(0.75, 1), true),
|
||||
];
|
||||
|
||||
// Edges have no connection points
|
||||
mxPolyline.prototype.constraints = null;
|
||||
|
||||
// Disables the built-in context menu
|
||||
mxEvent.disableContextMenu(this.el);
|
||||
|
||||
// Creates the graph inside the given this.el
|
||||
const graph = new mxGraph(this.el);
|
||||
graph.setConnectable(true);
|
||||
|
||||
// Enables connect preview for the default edge style
|
||||
graph.connectionHandler.createEdgeState = function(me) {
|
||||
const edge = graph.createEdge(null, null, null, null, null);
|
||||
return new mxCellState(
|
||||
this.graph.view,
|
||||
edge,
|
||||
this.graph.getCellStyle(edge)
|
||||
);
|
||||
};
|
||||
|
||||
// Specifies the default edge style
|
||||
graph.getStylesheet().getDefaultEdgeStyle().edgeStyle =
|
||||
'orthogonalEdgeStyle';
|
||||
|
||||
// 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).
|
||||
const parent = graph.getDefaultParent();
|
||||
|
||||
// Adds cells to the model in a single step
|
||||
graph.getModel().beginUpdate();
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
render = () => {
|
||||
// A container for the graph
|
||||
return (
|
||||
<>
|
||||
<h1>Anchors example for mxGraph</h1>
|
||||
<div
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
width: '321px',
|
||||
height: '241px',
|
||||
background: 'url("editors/images/grid.gif")',
|
||||
cursor: 'default',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default Anchors;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
.flow {
|
||||
stroke-dasharray: 8;
|
||||
animation: dash 0.5s linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
@keyframes dash {
|
||||
to {
|
||||
stroke-dashoffset: -16;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
/**
|
||||
* Copyright (c) 2006-2017, JGraph Ltd
|
||||
*
|
||||
* Animation example for mxGraph. This example demonstrates using
|
||||
* SVG animations on edges to visualize the flow in a pipe.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import mxGraph from '../mxgraph/view/mxGraph';
|
||||
import mxPoint from "../mxgraph/util/mxPoint";
|
||||
|
||||
class Animation extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render = () => {
|
||||
// A container for the graph
|
||||
return (
|
||||
<>
|
||||
<h1>Animation example for mxGraph</h1>
|
||||
|
||||
<div
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
width: '321px',
|
||||
height: '241px',
|
||||
background: 'url("editors/images/grid.gif")',
|
||||
cursor: 'default',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
const graph = new mxGraph(this.el);
|
||||
graph.setEnabled(false);
|
||||
const parent = graph.getDefaultParent();
|
||||
|
||||
const vertexStyle =
|
||||
'shape=cylinder;strokeWidth=2;fillColor=#ffffff;strokeColor=black;' +
|
||||
'gradientColor=#a0a0a0;fontColor=black;fontStyle=1;spacingTop=14;';
|
||||
|
||||
graph.getModel().beginUpdate();
|
||||
try {
|
||||
const v1 = graph.insertVertex(
|
||||
parent,
|
||||
null,
|
||||
'Pump',
|
||||
20,
|
||||
20,
|
||||
60,
|
||||
60,
|
||||
vertexStyle
|
||||
);
|
||||
const v2 = graph.insertVertex(
|
||||
parent,
|
||||
null,
|
||||
'Tank',
|
||||
200,
|
||||
150,
|
||||
60,
|
||||
60,
|
||||
vertexStyle
|
||||
);
|
||||
var e1 = graph.insertEdge(
|
||||
parent,
|
||||
null,
|
||||
'',
|
||||
v1,
|
||||
v2,
|
||||
'strokeWidth=3;endArrow=block;endSize=2;endFill=1;strokeColor=black;rounded=1;'
|
||||
);
|
||||
e1.geometry.points = [new mxPoint(230, 50)];
|
||||
graph.orderCells(true, [e1]);
|
||||
} finally {
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
|
||||
// Adds animation to edge shape and makes "pipe" visible
|
||||
const state = graph.view.getState(e1);
|
||||
state.shape.node
|
||||
.getElementsByTagName('path')[0]
|
||||
.removeAttribute('visibility');
|
||||
state.shape.node
|
||||
.getElementsByTagName('path')[0]
|
||||
.setAttribute('stroke-width', '6');
|
||||
state.shape.node
|
||||
.getElementsByTagName('path')[0]
|
||||
.setAttribute('stroke', 'lightGray');
|
||||
state.shape.node
|
||||
.getElementsByTagName('path')[1]
|
||||
.setAttribute('class', 'flow');
|
||||
};
|
||||
}
|
||||
|
||||
export default Animation;
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
/**
|
||||
* Copyright (c) 2006-2013, JGraph Ltd
|
||||
*
|
||||
* Autolayout example for mxGraph. This example demonstrates running
|
||||
* and animating a layout algorithm after every change to a graph.
|
||||
*/
|
||||
|
||||
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';
|
||||
import mxMorphing from '../mxgraph/util/mxMorphing';
|
||||
import mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';
|
||||
import mxHierarchicalLayout from '../mxgraph/layout/hierarchical/mxHierarchicalLayout';
|
||||
import mxConstants from '../mxgraph/util/mxConstants';
|
||||
import mxUtils from '../mxgraph/util/mxUtils';
|
||||
import mxCellOverlay from '../mxgraph/view/mxCellOverlay';
|
||||
import mxImage from '../mxgraph/util/mxImage';
|
||||
import mxEventObject from '../mxgraph/util/mxEventObject';
|
||||
import mxCellRenderer from '../mxgraph/view/mxCellRenderer';
|
||||
|
||||
class AutoLayout extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render = () => {
|
||||
// A this.el for the graph
|
||||
return (
|
||||
<>
|
||||
<h1>Auto layout example for mxGraph</h1>
|
||||
<div
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
width: '821px',
|
||||
height: '641px',
|
||||
background: 'url("editors/images/grid.gif")',
|
||||
cursor: 'default',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
mxEvent.disableContextMenu(this.el);
|
||||
|
||||
const mxCellRendererInstallCellOverlayListeners =
|
||||
mxCellRenderer.prototype.installCellOverlayListeners;
|
||||
mxCellRenderer.prototype.installCellOverlayListeners = function(
|
||||
state,
|
||||
overlay,
|
||||
shape
|
||||
) {
|
||||
mxCellRendererInstallCellOverlayListeners.apply(this, arguments);
|
||||
|
||||
mxEvent.addListener(
|
||||
shape.node,
|
||||
mxClient.IS_POINTER ? 'pointerdown' : 'mousedown',
|
||||
function(evt) {
|
||||
overlay.fireEvent(
|
||||
new mxEventObject('pointerdown', 'event', evt, 'state', state)
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
if (!mxClient.IS_POINTER && mxClient.IS_TOUCH) {
|
||||
mxEvent.addListener(shape.node, 'touchstart', function(evt) {
|
||||
overlay.fireEvent(
|
||||
new mxEventObject('pointerdown', 'event', evt, 'state', state)
|
||||
);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Creates the graph inside the given this.el
|
||||
const graph = new mxGraph(this.el);
|
||||
graph.setPanning(true);
|
||||
graph.panningHandler.useLeftButtonForPanning = true;
|
||||
graph.setAllowDanglingEdges(false);
|
||||
graph.connectionHandler.select = false;
|
||||
graph.view.setTranslate(20, 20);
|
||||
|
||||
// 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).
|
||||
const parent = graph.getDefaultParent();
|
||||
|
||||
const layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
|
||||
const executeLayout = function(change, post) {
|
||||
graph.getModel().beginUpdate();
|
||||
try {
|
||||
if (change != null) {
|
||||
change();
|
||||
}
|
||||
layout.execute(graph.getDefaultParent(), v1);
|
||||
} catch (e) {
|
||||
throw e;
|
||||
} finally {
|
||||
// New API for animating graph layout results asynchronously
|
||||
const morph = new mxMorphing(graph);
|
||||
morph.addListener(
|
||||
mxEvent.DONE,
|
||||
mxUtils.bind(this, function() {
|
||||
graph.getModel().endUpdate();
|
||||
if (post != null) {
|
||||
post();
|
||||
}
|
||||
})
|
||||
);
|
||||
morph.startAnimation();
|
||||
}
|
||||
};
|
||||
|
||||
const addOverlay = function(cell) {
|
||||
// Creates a new overlay with an image and a tooltip
|
||||
const overlay = new mxCellOverlay(
|
||||
new mxImage('images/add.png', 24, 24),
|
||||
'Add outgoing'
|
||||
);
|
||||
overlay.cursor = 'hand';
|
||||
|
||||
// Installs a handler for clicks on the overlay
|
||||
overlay.addListener(mxEvent.CLICK, function(sender, evt2) {
|
||||
graph.clearSelection();
|
||||
const geo = graph.getCellGeometry(cell);
|
||||
|
||||
let v2;
|
||||
|
||||
executeLayout(
|
||||
function() {
|
||||
v2 = graph.insertVertex(
|
||||
parent,
|
||||
null,
|
||||
'World!',
|
||||
geo.x,
|
||||
geo.y,
|
||||
80,
|
||||
30
|
||||
);
|
||||
addOverlay(v2);
|
||||
graph.view.refresh(v2);
|
||||
const e1 = graph.insertEdge(parent, null, '', cell, v2);
|
||||
},
|
||||
function() {
|
||||
graph.scrollCellToVisible(v2);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// Special CMS event
|
||||
overlay.addListener('pointerdown', function(sender, eo) {
|
||||
const evt2 = eo.getProperty('event');
|
||||
const state = eo.getProperty('state');
|
||||
|
||||
graph.popupMenuHandler.hideMenu();
|
||||
graph.stopEditing(false);
|
||||
|
||||
const pt = mxUtils.convertPoint(
|
||||
graph.this.el,
|
||||
mxEvent.getClientX(evt2),
|
||||
mxEvent.getClientY(evt2)
|
||||
);
|
||||
graph.connectionHandler.start(state, pt.x, pt.y);
|
||||
graph.isMouseDown = true;
|
||||
graph.isMouseTrigger = mxEvent.isMouseEvent(evt2);
|
||||
mxEvent.consume(evt2);
|
||||
});
|
||||
|
||||
// Sets the overlay for the cell in the graph
|
||||
graph.addCellOverlay(cell, overlay);
|
||||
};
|
||||
|
||||
// Adds cells to the model in a single step
|
||||
graph.getModel().beginUpdate();
|
||||
let v1;
|
||||
try {
|
||||
v1 = graph.insertVertex(parent, null, 'Hello,', 0, 0, 80, 30);
|
||||
addOverlay(v1);
|
||||
} finally {
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
|
||||
const edgeHandleConnect = mxEdgeHandler.prototype.connect;
|
||||
mxEdgeHandler.prototype.connect = function(
|
||||
edge,
|
||||
terminal,
|
||||
isSource,
|
||||
isClone,
|
||||
me
|
||||
) {
|
||||
edgeHandleConnect.apply(this, arguments);
|
||||
executeLayout();
|
||||
};
|
||||
|
||||
graph.resizeCell = function() {
|
||||
mxGraph.prototype.resizeCell.apply(this, arguments);
|
||||
executeLayout();
|
||||
};
|
||||
|
||||
graph.connectionHandler.addListener(mxEvent.CONNECT, function() {
|
||||
executeLayout();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export default AutoLayout;
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
/**
|
||||
* Copyright (c) 2006-2013, JGraph Ltd
|
||||
*
|
||||
* Boundary example for mxGraph. This example demonstrates
|
||||
* implementing boundary events in BPMN diagrams.
|
||||
*/
|
||||
|
||||
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 mxPoint from '../mxgraph/util/mxPoint';
|
||||
import mxGraphHandler from "../mxgraph/handler/mxGraphHandler";
|
||||
import mxUtils from "../mxgraph/util/mxUtils";
|
||||
|
||||
class Boundary extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render = () => {
|
||||
// A this.el for the graph
|
||||
return (
|
||||
<>
|
||||
<h1>Boundary example for mxGraph</h1>
|
||||
|
||||
<div
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
width: '821px',
|
||||
height: '641px',
|
||||
background: 'url("editors/images/grid.gif")',
|
||||
cursor: 'default'
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
// Disables the built-in context menu
|
||||
mxEvent.disableContextMenu(this.el);
|
||||
|
||||
// Creates the graph inside the given this.el
|
||||
const graph = new mxGraph(this.el);
|
||||
|
||||
// Sets the base style for all vertices
|
||||
const style = graph.getStylesheet().getDefaultVertexStyle();
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#ffffff';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#000000';
|
||||
style[mxConstants.STYLE_STROKEWIDTH] = '2';
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
|
||||
style[mxConstants.STYLE_FONTSIZE] = '12';
|
||||
style[mxConstants.STYLE_FONTSTYLE] = 1;
|
||||
graph.getStylesheet().putDefaultVertexStyle(style);
|
||||
|
||||
// Removes folding icon for relative children
|
||||
graph.isCellFoldable = function(cell, collapse) {
|
||||
const childCount = this.model.getChildCount(cell);
|
||||
|
||||
for (let i = 0; i < childCount; i++) {
|
||||
const child = this.model.getChildAt(cell, i);
|
||||
const geo = this.getCellGeometry(child);
|
||||
|
||||
if (geo != null && geo.relative) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return childCount > 0;
|
||||
};
|
||||
|
||||
// Returns the relative position of the given child
|
||||
function getRelativePosition(state, dx, dy) {
|
||||
if (state != null) {
|
||||
const model = graph.getModel();
|
||||
const geo = model.getGeometry(state.cell);
|
||||
|
||||
if (geo != null && geo.relative && !model.isEdge(state.cell)) {
|
||||
const parent = model.getParent(state.cell);
|
||||
|
||||
if (model.isVertex(parent)) {
|
||||
const pstate = graph.view.getState(parent);
|
||||
|
||||
if (pstate != null) {
|
||||
const { scale } = graph.view;
|
||||
let x = state.x + dx;
|
||||
let y = state.y + dy;
|
||||
|
||||
if (geo.offset != null) {
|
||||
x -= geo.offset.x * scale;
|
||||
y -= geo.offset.y * scale;
|
||||
}
|
||||
|
||||
x = (x - pstate.x) / pstate.width;
|
||||
y = (y - pstate.y) / pstate.height;
|
||||
|
||||
if (Math.abs(y - 0.5) <= Math.abs((x - 0.5) / 2)) {
|
||||
x = x > 0.5 ? 1 : 0;
|
||||
y = Math.min(1, Math.max(0, y));
|
||||
} else {
|
||||
x = Math.min(1, Math.max(0, x));
|
||||
y = y > 0.5 ? 1 : 0;
|
||||
}
|
||||
|
||||
return new mxPoint(x, y);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// Replaces translation for relative children
|
||||
graph.translateCell = function(cell, dx, dy) {
|
||||
const rel = getRelativePosition(
|
||||
this.view.getState(cell),
|
||||
dx * graph.view.scale,
|
||||
dy * graph.view.scale
|
||||
);
|
||||
|
||||
if (rel != null) {
|
||||
let geo = this.model.getGeometry(cell);
|
||||
|
||||
if (geo != null && geo.relative) {
|
||||
geo = geo.clone();
|
||||
geo.x = rel.x;
|
||||
geo.y = rel.y;
|
||||
|
||||
this.model.setGeometry(cell, geo);
|
||||
}
|
||||
} else {
|
||||
mxGraph.prototype.translateCell.apply(this, arguments);
|
||||
}
|
||||
};
|
||||
|
||||
// Replaces move preview for relative children
|
||||
graph.graphHandler.getDelta = function(me) {
|
||||
const point = mxUtils.convertPoint(
|
||||
this.graph.container,
|
||||
me.getX(),
|
||||
me.getY()
|
||||
);
|
||||
let delta = new mxPoint(point.x - this.first.x, point.y - this.first.y);
|
||||
|
||||
if (
|
||||
this.cells != null &&
|
||||
this.cells.length > 0 &&
|
||||
this.cells[0] != null
|
||||
) {
|
||||
const state = this.graph.view.getState(this.cells[0]);
|
||||
const rel = getRelativePosition(state, delta.x, delta.y);
|
||||
|
||||
if (rel != null) {
|
||||
const pstate = this.graph.view.getState(
|
||||
this.graph.model.getParent(state.cell)
|
||||
);
|
||||
|
||||
if (pstate != null) {
|
||||
delta = new mxPoint(
|
||||
pstate.x + pstate.width * rel.x - state.getCenterX(),
|
||||
pstate.y + pstate.height * rel.y - state.getCenterY()
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return delta;
|
||||
};
|
||||
|
||||
// Relative children cannot be removed from parent
|
||||
graph.graphHandler.shouldRemoveCellsFromParent = function(
|
||||
parent,
|
||||
cells,
|
||||
evt
|
||||
) {
|
||||
return (
|
||||
cells.length === 0 &&
|
||||
!cells[0].geometry.relative &&
|
||||
mxGraphHandler.prototype.shouldRemoveCellsFromParent.apply(
|
||||
this,
|
||||
arguments
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
// Enables moving of relative children
|
||||
graph.isCellLocked = function(cell) {
|
||||
return false;
|
||||
};
|
||||
|
||||
// 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).
|
||||
const parent = graph.getDefaultParent();
|
||||
|
||||
// Adds cells to the model in a single step
|
||||
graph.getModel().beginUpdate();
|
||||
try {
|
||||
const v1 = graph.insertVertex(parent, null, 'Process', 60, 60, 90, 40);
|
||||
const v2 = graph.insertVertex(
|
||||
v1,
|
||||
null,
|
||||
'in',
|
||||
0,
|
||||
0.5,
|
||||
20,
|
||||
20,
|
||||
'fontSize=9;shape=ellipse;resizable=0;'
|
||||
);
|
||||
v2.geometry.offset = new mxPoint(-10, -10);
|
||||
v2.geometry.relative = true;
|
||||
const v3 = graph.insertVertex(
|
||||
v1,
|
||||
null,
|
||||
'out',
|
||||
1,
|
||||
0.5,
|
||||
20,
|
||||
20,
|
||||
'fontSize=9;shape=ellipse;resizable=0;'
|
||||
);
|
||||
v3.geometry.offset = new mxPoint(-10, -10);
|
||||
v3.geometry.relative = true;
|
||||
} finally {
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default Boundary;
|
||||
|
|
@ -0,0 +1,359 @@
|
|||
/**
|
||||
* Copyright (c) 2006-2013, JGraph Ltd
|
||||
*
|
||||
* Clipboard example for mxGraph. This example demonstrates using the
|
||||
* clipboard for providing cross-tab and cross-browser copy and paste.
|
||||
*/
|
||||
|
||||
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 mxClipboard from '../mxgraph/util/mxClipboard';
|
||||
import mxClient from '../mxgraph/mxClient';
|
||||
import mxCodec from '../mxgraph/io/mxCodec';
|
||||
import mxGraphModel from '../mxgraph/model/mxGraphModel';
|
||||
|
||||
class Clipboard extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render = () => {
|
||||
// A this.el for the graph
|
||||
return (
|
||||
<>
|
||||
<h1>Clipboard example for mxGraph</h1>
|
||||
|
||||
<div
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
width: '321px',
|
||||
height: '241px',
|
||||
background: "url('editors/images/grid.gif')",
|
||||
cursor: 'default',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
// Disables the built-in context menu
|
||||
mxEvent.disableContextMenu(this.el);
|
||||
|
||||
// Creates the graph inside the given this.el
|
||||
const graph = new mxGraph(this.el);
|
||||
|
||||
// Public helper method for shared clipboard.
|
||||
mxClipboard.cellsToString = function(cells) {
|
||||
const codec = new mxCodec();
|
||||
const model = new mxGraphModel();
|
||||
const parent = model.getChildAt(model.getRoot(), 0);
|
||||
|
||||
for (let i = 0; i < cells.length; i++) {
|
||||
model.add(parent, cells[i]);
|
||||
}
|
||||
|
||||
return mxUtils.getXml(codec.encode(model));
|
||||
};
|
||||
|
||||
// Focused but invisible textarea during control or meta key events
|
||||
const textInput = document.createElement('textarea');
|
||||
mxUtils.setOpacity(textInput, 0);
|
||||
textInput.style.width = '1px';
|
||||
textInput.style.height = '1px';
|
||||
let restoreFocus = false;
|
||||
const gs = graph.gridSize;
|
||||
let lastPaste = null;
|
||||
let dx = 0;
|
||||
let dy = 0;
|
||||
|
||||
// Workaround for no copy event in IE/FF if empty
|
||||
textInput.value = ' ';
|
||||
|
||||
// Shows a textare when control/cmd is pressed to handle native clipboard actions
|
||||
mxEvent.addListener(document, 'keydown', function(evt) {
|
||||
// No dialog visible
|
||||
const source = mxEvent.getSource(evt);
|
||||
|
||||
if (
|
||||
graph.isEnabled() &&
|
||||
!graph.isMouseDown &&
|
||||
!graph.isEditing() &&
|
||||
source.nodeName !== 'INPUT'
|
||||
) {
|
||||
if (
|
||||
evt.keyCode === 224 /* FF */ ||
|
||||
(!mxClient.IS_MAC && evt.keyCode === 17) /* Control */ ||
|
||||
(mxClient.IS_MAC &&
|
||||
(evt.keyCode === 91 || evt.keyCode === 93)) /* Left/Right Meta */
|
||||
) {
|
||||
// Cannot use parentNode for check in IE
|
||||
if (!restoreFocus) {
|
||||
// Avoid autoscroll but allow handling of events
|
||||
textInput.style.position = 'absolute';
|
||||
textInput.style.left = `${graph.container.scrollLeft + 10}px`;
|
||||
textInput.style.top = `${graph.container.scrollTop + 10}px`;
|
||||
graph.container.appendChild(textInput);
|
||||
|
||||
restoreFocus = true;
|
||||
textInput.focus();
|
||||
textInput.select();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Restores focus on graph this.el and removes text input from DOM
|
||||
mxEvent.addListener(document, 'keyup', function(evt) {
|
||||
if (
|
||||
restoreFocus &&
|
||||
(evt.keyCode === 224 /* FF */ ||
|
||||
evt.keyCode === 17 /* Control */ ||
|
||||
evt.keyCode === 91 ||
|
||||
evt.keyCode === 93) /* Meta */
|
||||
) {
|
||||
restoreFocus = false;
|
||||
|
||||
if (!graph.isEditing()) {
|
||||
graph.container.focus();
|
||||
}
|
||||
|
||||
textInput.parentNode.removeChild(textInput);
|
||||
}
|
||||
});
|
||||
|
||||
// Inserts the XML for the given cells into the text input for copy
|
||||
const copyCells = function(graph, cells) {
|
||||
if (cells.length > 0) {
|
||||
const clones = graph.cloneCells(cells);
|
||||
|
||||
// Checks for orphaned relative children and makes absolute
|
||||
for (let i = 0; i < clones.length; i++) {
|
||||
const state = graph.view.getState(cells[i]);
|
||||
|
||||
if (state != null) {
|
||||
const geo = graph.getCellGeometry(clones[i]);
|
||||
|
||||
if (geo != null && geo.relative) {
|
||||
geo.relative = false;
|
||||
geo.x = state.x / state.view.scale - state.view.translate.x;
|
||||
geo.y = state.y / state.view.scale - state.view.translate.y;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textInput.value = mxClipboard.cellsToString(clones);
|
||||
}
|
||||
|
||||
textInput.select();
|
||||
lastPaste = textInput.value;
|
||||
};
|
||||
|
||||
// Handles copy event by putting XML for current selection into text input
|
||||
mxEvent.addListener(
|
||||
textInput,
|
||||
'copy',
|
||||
mxUtils.bind(this, function(evt) {
|
||||
if (graph.isEnabled() && !graph.isSelectionEmpty()) {
|
||||
copyCells(
|
||||
graph,
|
||||
mxUtils.sortCells(
|
||||
graph.model.getTopmostCells(graph.getSelectionCells())
|
||||
)
|
||||
);
|
||||
dx = 0;
|
||||
dy = 0;
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
// Handles cut event by removing cells putting XML into text input
|
||||
mxEvent.addListener(
|
||||
textInput,
|
||||
'cut',
|
||||
mxUtils.bind(this, function(evt) {
|
||||
if (graph.isEnabled() && !graph.isSelectionEmpty()) {
|
||||
copyCells(graph, graph.removeCells());
|
||||
dx = -gs;
|
||||
dy = -gs;
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
// Merges XML into existing graph and layers
|
||||
const importXml = function(xml, dx, dy) {
|
||||
dx = dx != null ? dx : 0;
|
||||
dy = dy != null ? dy : 0;
|
||||
let cells = [];
|
||||
|
||||
try {
|
||||
const doc = mxUtils.parseXml(xml);
|
||||
const node = doc.documentElement;
|
||||
|
||||
if (node != null) {
|
||||
const model = new mxGraphModel();
|
||||
const codec = new mxCodec(node.ownerDocument);
|
||||
codec.decode(node, model);
|
||||
|
||||
const childCount = model.getChildCount(model.getRoot());
|
||||
const targetChildCount = graph.model.getChildCount(
|
||||
graph.model.getRoot()
|
||||
);
|
||||
|
||||
// Merges existing layers and adds new layers
|
||||
graph.model.beginUpdate();
|
||||
try {
|
||||
for (let i = 0; i < childCount; i++) {
|
||||
let parent = model.getChildAt(model.getRoot(), i);
|
||||
|
||||
// Adds cells to existing layers if not locked
|
||||
if (targetChildCount > i) {
|
||||
// Inserts into active layer if only one layer is being pasted
|
||||
const target =
|
||||
childCount === 1
|
||||
? graph.getDefaultParent()
|
||||
: graph.model.getChildAt(graph.model.getRoot(), i);
|
||||
|
||||
if (!graph.isCellLocked(target)) {
|
||||
const children = model.getChildren(parent);
|
||||
cells = cells.concat(
|
||||
graph.importCells(children, dx, dy, target)
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// Delta is non cascading, needs separate move for layers
|
||||
parent = graph.importCells(
|
||||
[parent],
|
||||
0,
|
||||
0,
|
||||
graph.model.getRoot()
|
||||
)[0];
|
||||
const children = graph.model.getChildren(parent);
|
||||
graph.moveCells(children, dx, dy);
|
||||
cells = cells.concat(children);
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
graph.model.endUpdate();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
alert(e);
|
||||
throw e;
|
||||
}
|
||||
|
||||
return cells;
|
||||
};
|
||||
|
||||
// Parses and inserts XML into graph
|
||||
const pasteText = function(text) {
|
||||
const xml = mxUtils.trim(text);
|
||||
const x =
|
||||
graph.container.scrollLeft / graph.view.scale - graph.view.translate.x;
|
||||
const y =
|
||||
graph.container.scrollTop / graph.view.scale - graph.view.translate.y;
|
||||
|
||||
if (xml.length > 0) {
|
||||
if (lastPaste !== xml) {
|
||||
lastPaste = xml;
|
||||
dx = 0;
|
||||
dy = 0;
|
||||
} else {
|
||||
dx += gs;
|
||||
dy += gs;
|
||||
}
|
||||
|
||||
// Standard paste via control-v
|
||||
if (xml.substring(0, 14) === '<mxGraphModel>') {
|
||||
graph.setSelectionCells(importXml(xml, dx, dy));
|
||||
graph.scrollCellToVisible(graph.getSelectionCell());
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Cross-browser function to fetch text from paste events
|
||||
const extractGraphModelFromEvent = function(evt) {
|
||||
let data = null;
|
||||
|
||||
if (evt != null) {
|
||||
const provider =
|
||||
evt.dataTransfer != null ? evt.dataTransfer : evt.clipboardData;
|
||||
|
||||
if (provider != null) {
|
||||
if (document.documentMode === 10 || document.documentMode === 11) {
|
||||
data = provider.getData('Text');
|
||||
} else {
|
||||
data =
|
||||
mxUtils.indexOf(provider.types, 'text/html') >= 0
|
||||
? provider.getData('text/html')
|
||||
: null;
|
||||
|
||||
if (
|
||||
mxUtils.indexOf(
|
||||
provider.types,
|
||||
'text/plain' && (data == null || data.length === 0)
|
||||
)
|
||||
) {
|
||||
data = provider.getData('text/plain');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
// Handles paste event by parsing and inserting XML
|
||||
mxEvent.addListener(textInput, 'paste', function(evt) {
|
||||
// Clears existing contents before paste - should not be needed
|
||||
// because all text is selected, but doesn't hurt since the
|
||||
// actual pasting of the new text is delayed in all cases.
|
||||
textInput.value = '';
|
||||
|
||||
if (graph.isEnabled()) {
|
||||
const xml = extractGraphModelFromEvent(evt);
|
||||
|
||||
if (xml != null && xml.length > 0) {
|
||||
pasteText(xml);
|
||||
} else {
|
||||
// Timeout for new value to appear
|
||||
window.setTimeout(
|
||||
mxUtils.bind(this, function() {
|
||||
pasteText(textInput.value);
|
||||
}),
|
||||
0
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
textInput.select();
|
||||
});
|
||||
|
||||
// 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).
|
||||
const parent = graph.getDefaultParent();
|
||||
|
||||
// Adds cells to the model in a single step
|
||||
graph.getModel().beginUpdate();
|
||||
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();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default Clipboard;
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
/**
|
||||
* Copyright (c) 2006-2013, JGraph Ltd
|
||||
*
|
||||
* Codec example for mxGraph. This example demonstrates dynamically
|
||||
* creating a graph from XML and encoding the model into XML, as well
|
||||
* as changing the default style for edges in-place.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import mxEvent from '../mxgraph/util/mxEvent';
|
||||
import mxGraph from '../mxgraph/view/mxGraph';
|
||||
import mxCodec from "../mxgraph/io/mxCodec";
|
||||
import mxUtils from "../mxgraph/util/mxUtils";
|
||||
import mxConstants from "../mxgraph/util/mxConstants";
|
||||
import mxEdgeStyle from "../mxgraph/view/mxEdgeStyle";
|
||||
|
||||
class MYNAMEHERE extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render = () => {
|
||||
// Contains a graph description which will be converted
|
||||
return (
|
||||
<>
|
||||
<h1>Codec example for mxGraph</h1>
|
||||
|
||||
This graph is embedded in the page.
|
||||
<div className="mxgraph" style="position:relative;overflow:auto;"><mxGraphModel><root><mxCell
|
||||
id="0"/><mxCell id="1" parent="0"/><mxCell id="2" vertex="1" parent="1" value="Interval
|
||||
1"><mxGeometry x="380" y="0" width="140" height="30" as="geometry"/></mxCell><mxCell
|
||||
id="3" vertex="1" parent="1" value="Interval 2"><mxGeometry x="200" y="80" width="380" height="30"
|
||||
as="geometry"/></mxCell><mxCell id="4" vertex="1" parent="1" value="Interval
|
||||
3"><mxGeometry x="40" y="140" width="260" height="30" as="geometry"/></mxCell><mxCell
|
||||
id="5" vertex="1" parent="1" value="Interval 4"><mxGeometry x="120" y="200" width="240" height="30"
|
||||
as="geometry"/></mxCell><mxCell id="6" vertex="1" parent="1" value="Interval
|
||||
5"><mxGeometry x="420" y="260" width="80" height="30" as="geometry"/></mxCell><mxCell
|
||||
id="7" edge="1" source="2" target="3" parent="1" value="Transfer1"><mxGeometry
|
||||
as="geometry"><Array as="points"><Object x="420"
|
||||
y="60"/></Array></mxGeometry></mxCell><mxCell id="8" edge="1" source="2" target="6"
|
||||
parent="1" value=""><mxGeometry as="geometry" relative="1" y="-30"><Array
|
||||
as="points"><Object x="600" y="60"/></Array></mxGeometry></mxCell><mxCell
|
||||
id="9" edge="1" source="3" target="4" parent="1" value="Transfer3"><mxGeometry
|
||||
as="geometry"><Array as="points"><Object x="260"
|
||||
y="120"/></Array></mxGeometry></mxCell><mxCell id="10" edge="1" source="4"
|
||||
target="5" parent="1" value="Transfer4"><mxGeometry as="geometry"><Array
|
||||
as="points"><Object x="200" y="180"/></Array></mxGeometry></mxCell><mxCell
|
||||
id="11" edge="1" source="4" target="6" parent="1" value="Transfer5"><mxGeometry as="geometry"
|
||||
relative="1" y="-10"><Array as="points"><Object x="460"
|
||||
y="155"/></Array></mxGeometry></mxCell></root></mxGraphModel></div>
|
||||
This graph is embedded in the page.
|
||||
<div className="mxgraph"
|
||||
style="position:relative;background:#eeeeee;border:1px solid gray;overflow:auto;width:400px;height:200px;"><mxGraphModel><root><mxCell
|
||||
id="0"/><mxCell id="1" parent="0"/><mxCell id="2" vertex="1" parent="1" value="Interval
|
||||
1"><mxGeometry x="380" y="0" width="140" height="30" as="geometry"/></mxCell><mxCell
|
||||
id="3" vertex="1" parent="1" value="Interval 2"><mxGeometry x="200" y="80" width="380" height="30"
|
||||
as="geometry"/></mxCell><mxCell id="4" vertex="1" parent="1" value="Interval
|
||||
3"><mxGeometry x="40" y="140" width="260" height="30" as="geometry"/></mxCell><mxCell
|
||||
id="5" vertex="1" parent="1" value="Interval 4"><mxGeometry x="120" y="200" width="240" height="30"
|
||||
as="geometry"/></mxCell><mxCell id="6" vertex="1" parent="1" value="Interval
|
||||
5"><mxGeometry x="420" y="260" width="80" height="30" as="geometry"/></mxCell><mxCell
|
||||
id="7" edge="1" source="2" target="3" parent="1" value="Transfer1"><mxGeometry
|
||||
as="geometry"><Array as="points"><Object x="420"
|
||||
y="60"/></Array></mxGeometry></mxCell><mxCell id="8" edge="1" source="2" target="6"
|
||||
parent="1" value=""><mxGeometry as="geometry" relative="1" y="-30"><Array
|
||||
as="points"><Object x="600" y="60"/></Array></mxGeometry></mxCell><mxCell
|
||||
id="9" edge="1" source="3" target="4" parent="1" value="Transfer3"><mxGeometry
|
||||
as="geometry"><Array as="points"><Object x="260"
|
||||
y="120"/></Array></mxGeometry></mxCell><mxCell id="10" edge="1" source="4"
|
||||
target="5" parent="1" value="Transfer4"><mxGeometry as="geometry"><Array
|
||||
as="points"><Object x="200" y="180"/></Array></mxGeometry></mxCell><mxCell
|
||||
id="11" edge="1" source="4" target="6" parent="1" value="Transfer5"><mxGeometry as="geometry"
|
||||
relative="1" y="-10"><Array as="points"><Object x="460"
|
||||
y="155"/></Array></mxGeometry></mxCell></root></mxGraphModel></div>
|
||||
This graph is embedded in the page.
|
||||
<div className="mxgraph"
|
||||
style="position:relative;background:#eeeeee;border:6px solid gray;overflow:auto;width:400px;height:200px;"><mxGraphModel><root><mxCell
|
||||
id="0"/><mxCell id="1" parent="0"/><mxCell id="2" vertex="1" parent="1" value="Interval
|
||||
1"><mxGeometry x="380" y="20" width="140" height="30" as="geometry"/></mxCell><mxCell
|
||||
id="3" vertex="1" parent="1" value="Interval 2"><mxGeometry x="200" y="80" width="380" height="30"
|
||||
as="geometry"/></mxCell><mxCell id="4" vertex="1" parent="1" value="Interval
|
||||
3"><mxGeometry x="40" y="140" width="260" height="30" as="geometry"/></mxCell><mxCell
|
||||
id="5" vertex="1" parent="1" value="Interval 4"><mxGeometry x="120" y="200" width="240" height="30"
|
||||
as="geometry"/></mxCell><mxCell id="6" vertex="1" parent="1" value="Interval
|
||||
5"><mxGeometry x="420" y="260" width="80" height="30" as="geometry"/></mxCell><mxCell
|
||||
id="7" edge="1" source="2" target="3" parent="1" value="Transfer1"><mxGeometry
|
||||
as="geometry"><Array as="points"><Object x="420"
|
||||
y="60"/></Array></mxGeometry></mxCell><mxCell id="8" edge="1" source="2" target="6"
|
||||
parent="1" value="Transfer2"><mxGeometry as="geometry" relative="1" y="0"><Array
|
||||
as="points"><Object x="600" y="60"/></Array></mxGeometry></mxCell><mxCell
|
||||
id="9" edge="1" source="3" target="4" parent="1" value="Transfer3"><mxGeometry
|
||||
as="geometry"><Array as="points"><Object x="260"
|
||||
y="120"/></Array></mxGeometry></mxCell><mxCell id="10" edge="1" source="4"
|
||||
target="5" parent="1" value="Transfer4"><mxGeometry as="geometry"><Array
|
||||
as="points"><Object x="200" y="180"/></Array></mxGeometry></mxCell><mxCell
|
||||
id="11" edge="1" source="4" target="6" parent="1" value="Transfer5"><mxGeometry as="geometry"
|
||||
relative="1" y="-10"><Array as="points"><Object x="460"
|
||||
y="155"/></Array></mxGeometry></mxCell></root></mxGraphModel></div>
|
||||
This graph is embedded in the page.
|
||||
<div className="mxgraph"
|
||||
style="position:relative;overflow:hidden;border:6px solid gray;"><mxGraphModel><root><mxCell
|
||||
id="0"/><mxCell id="1" parent="0"/><mxCell id="2" vertex="1" parent="1" value="Interval
|
||||
1"><mxGeometry x="380" y="20" width="140" height="30" as="geometry"/></mxCell><mxCell
|
||||
id="3" vertex="1" parent="1" value="Interval 2"><mxGeometry x="200" y="80" width="380" height="30"
|
||||
as="geometry"/></mxCell><mxCell id="4" vertex="1" parent="1" value="Interval
|
||||
3"><mxGeometry x="40" y="140" width="260" height="30" as="geometry"/></mxCell><mxCell
|
||||
id="5" vertex="1" parent="1" value="Interval 4"><mxGeometry x="120" y="200" width="240" height="30"
|
||||
as="geometry"/></mxCell><mxCell id="6" vertex="1" parent="1" value="Interval
|
||||
5"><mxGeometry x="420" y="260" width="80" height="30" as="geometry"/></mxCell><mxCell
|
||||
id="7" edge="1" source="2" target="3" parent="1" value="Transfer1"><mxGeometry
|
||||
as="geometry"><Array as="points"><Object x="420"
|
||||
y="60"/></Array></mxGeometry></mxCell><mxCell id="8" edge="1" source="2" target="6"
|
||||
parent="1" value="Transfer2"><mxGeometry as="geometry" relative="1" y="0"><Array
|
||||
as="points"><Object x="600" y="60"/></Array></mxGeometry></mxCell><mxCell
|
||||
id="9" edge="1" source="3" target="4" parent="1" value="Transfer3"><mxGeometry
|
||||
as="geometry"><Array as="points"><Object x="260"
|
||||
y="120"/></Array></mxGeometry></mxCell><mxCell id="10" edge="1" source="4"
|
||||
target="5" parent="1" value="Transfer4"><mxGeometry as="geometry"><Array
|
||||
as="points"><Object x="200" y="180"/></Array></mxGeometry></mxCell><mxCell
|
||||
id="11" edge="1" source="4" target="6" parent="1" value="Transfer5"><mxGeometry as="geometry"
|
||||
relative="1" y="-10"><Array as="points"><Object x="460"
|
||||
y="155"/></Array></mxGeometry></mxCell></root></mxGraphModel></div>
|
||||
This graph is embedded in the page.
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
let divs = document.getElementsByTagName('*');
|
||||
|
||||
for (let i = 0; i < divs.length; i += 1) {
|
||||
if (divs[i].className.toString().indexOf('mxgraph') >= 0) {
|
||||
(function(container) {
|
||||
let xml = mxUtils.getTextContent(container);
|
||||
let xmlDocument = mxUtils.parseXml(xml);
|
||||
|
||||
if (xmlDocument.documentElement != null && xmlDocument.documentElement.nodeName === 'mxGraphModel') {
|
||||
let decoder = new mxCodec(xmlDocument);
|
||||
let node = xmlDocument.documentElement;
|
||||
|
||||
container.innerHTML = '';
|
||||
|
||||
let graph = new mxGraph(container);
|
||||
graph.centerZoom = false;
|
||||
graph.setTooltips(false);
|
||||
graph.setEnabled(false);
|
||||
|
||||
// Changes the default style for edges "in-place"
|
||||
let style = graph.getStylesheet().getDefaultEdgeStyle();
|
||||
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
|
||||
|
||||
// Enables panning with left mouse button
|
||||
graph.panningHandler.useLeftButtonForPanning = true;
|
||||
graph.panningHandler.ignoreCell = true;
|
||||
graph.container.style.cursor = 'move';
|
||||
graph.setPanning(true);
|
||||
|
||||
if (divs[i].style.width === '' && divs[i].style.height === '') {
|
||||
graph.resizeContainer = true;
|
||||
} else {
|
||||
// Adds border for fixed size boxes
|
||||
graph.border = 20;
|
||||
}
|
||||
|
||||
decoder.decode(node, graph.getModel());
|
||||
graph.resizeContainer = false;
|
||||
|
||||
// Adds zoom buttons in top, left corner
|
||||
let buttons = document.createElement('div');
|
||||
buttons.style.position = 'absolute';
|
||||
buttons.style.overflow = 'visible';
|
||||
|
||||
let bs = graph.getBorderSizes();
|
||||
buttons.style.top = (container.offsetTop + bs.y) + 'px';
|
||||
buttons.style.left = (container.offsetLeft + bs.x) + 'px';
|
||||
|
||||
let left = 0;
|
||||
let bw = 16;
|
||||
let bh = 16;
|
||||
|
||||
function addButton(label, funct) {
|
||||
let btn = document.createElement('div');
|
||||
mxUtils.write(btn, label);
|
||||
btn.style.position = 'absolute';
|
||||
btn.style.backgroundColor = 'transparent';
|
||||
btn.style.border = '1px solid gray';
|
||||
btn.style.textAlign = 'center';
|
||||
btn.style.fontSize = '10px';
|
||||
btn.style.cursor = 'hand';
|
||||
btn.style.width = bw + 'px';
|
||||
btn.style.height = bh + 'px';
|
||||
btn.style.left = left + 'px';
|
||||
btn.style.top = '0px';
|
||||
|
||||
mxEvent.addListener(btn, 'click', function(evt) {
|
||||
funct();
|
||||
mxEvent.consume(evt);
|
||||
});
|
||||
|
||||
left += bw;
|
||||
|
||||
buttons.appendChild(btn);
|
||||
}
|
||||
|
||||
addButton('+', function () {
|
||||
graph.zoomIn();
|
||||
});
|
||||
|
||||
addButton('-', function () {
|
||||
graph.zoomOut();
|
||||
});
|
||||
|
||||
if (container.nextSibling != null) {
|
||||
container.parentNode.insertBefore(buttons, container.nextSibling);
|
||||
} else {
|
||||
container.appendChild(buttons);
|
||||
}
|
||||
}
|
||||
})(divs[i]);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default MYNAMEHERE;
|
||||
|
|
@ -4,6 +4,43 @@
|
|||
Collapse example for mxGraph. This example demonstrates changing
|
||||
the style of a cell based on its collapsed state.
|
||||
-->
|
||||
|
||||
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></h1>
|
||||
|
||||
<div
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
export default MYNAMEHERE;
|
||||
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Collapse example for mxGraph</title>
|
||||
|
|
@ -4,6 +4,43 @@
|
|||
Consistuent example for mxGraph. This example demonstrates using
|
||||
cells as parts of other cells.
|
||||
-->
|
||||
|
||||
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></h1>
|
||||
|
||||
<div
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
export default MYNAMEHERE;
|
||||
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Consistuent example for mxGraph</title>
|
||||
|
|
@ -4,6 +4,43 @@
|
|||
Context icons example for mxGraph. This example demonstrates adding
|
||||
icons to selected vertices to carry out special operations.
|
||||
-->
|
||||
|
||||
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></h1>
|
||||
|
||||
<div
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
export default MYNAMEHERE;
|
||||
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Context icons example for mxGraph</title>
|
||||
|
|
@ -4,6 +4,43 @@
|
|||
Control example for mxGraph. This example demonstrates adding
|
||||
controls to specific cells in a graph.
|
||||
-->
|
||||
|
||||
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></h1>
|
||||
|
||||
<div
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
export default MYNAMEHERE;
|
||||
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Control example for mxGraph</title>
|
||||
|
|
@ -4,6 +4,43 @@
|
|||
Dragsource example for mxGraph. This example demonstrates using
|
||||
one drag source for multiple graphs and changing the drag icon.
|
||||
-->
|
||||
|
||||
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></h1>
|
||||
|
||||
<div
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
export default MYNAMEHERE;
|
||||
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Dragsource example for mxGraph</title>
|
||||
|
|
@ -4,6 +4,42 @@
|
|||
Drop example for mxGraph. This example demonstrates handling
|
||||
native drag and drop of images (requires modern browser).
|
||||
-->
|
||||
|
||||
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></h1>
|
||||
|
||||
<div
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
export default MYNAMEHERE;
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Drop example for mxGraph</title>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import '../styles/globals.css';
|
||||
import '../public/css/common.css';
|
||||
import "./Animation.css";
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />;
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 75 B After Width: | Height: | Size: 75 B |
|
Before Width: | Height: | Size: 358 B After Width: | Height: | Size: 358 B |
|
Before Width: | Height: | Size: 357 B After Width: | Height: | Size: 357 B |
|
Before Width: | Height: | Size: 373 B After Width: | Height: | Size: 373 B |
|
Before Width: | Height: | Size: 351 B After Width: | Height: | Size: 351 B |
|
Before Width: | Height: | Size: 377 B After Width: | Height: | Size: 377 B |
|
Before Width: | Height: | Size: 358 B After Width: | Height: | Size: 358 B |
|
Before Width: | Height: | Size: 469 B After Width: | Height: | Size: 469 B |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 65 B After Width: | Height: | Size: 65 B |
|
Before Width: | Height: | Size: 64 B After Width: | Height: | Size: 64 B |
|
Before Width: | Height: | Size: 859 B After Width: | Height: | Size: 859 B |
|
Before Width: | Height: | Size: 848 B After Width: | Height: | Size: 848 B |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 278 B After Width: | Height: | Size: 278 B |
|
Before Width: | Height: | Size: 163 B After Width: | Height: | Size: 163 B |
|
Before Width: | Height: | Size: 80 B After Width: | Height: | Size: 80 B |
|
Before Width: | Height: | Size: 82 B After Width: | Height: | Size: 82 B |
|
Before Width: | Height: | Size: 220 B After Width: | Height: | Size: 220 B |
|
Before Width: | Height: | Size: 830 B After Width: | Height: | Size: 830 B |
|
Before Width: | Height: | Size: 195 B After Width: | Height: | Size: 195 B |
|
Before Width: | Height: | Size: 860 B After Width: | Height: | Size: 860 B |
|
Before Width: | Height: | Size: 954 B After Width: | Height: | Size: 954 B |
|
Before Width: | Height: | Size: 582 B After Width: | Height: | Size: 582 B |
|
Before Width: | Height: | Size: 615 B After Width: | Height: | Size: 615 B |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 540 B After Width: | Height: | Size: 540 B |
|
Before Width: | Height: | Size: 870 B After Width: | Height: | Size: 870 B |
|
Before Width: | Height: | Size: 538 B After Width: | Height: | Size: 538 B |
|
Before Width: | Height: | Size: 294 B After Width: | Height: | Size: 294 B |
|
Before Width: | Height: | Size: 81 B After Width: | Height: | Size: 81 B |
|
Before Width: | Height: | Size: 82 B After Width: | Height: | Size: 82 B |
|
Before Width: | Height: | Size: 88 B After Width: | Height: | Size: 88 B |
|
Before Width: | Height: | Size: 325 B After Width: | Height: | Size: 325 B |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 556 B After Width: | Height: | Size: 556 B |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 121 B After Width: | Height: | Size: 121 B |
|
Before Width: | Height: | Size: 74 B After Width: | Height: | Size: 74 B |
|
Before Width: | Height: | Size: 190 B After Width: | Height: | Size: 190 B |
|
Before Width: | Height: | Size: 127 B After Width: | Height: | Size: 127 B |
|
Before Width: | Height: | Size: 148 B After Width: | Height: | Size: 148 B |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue