core/deprecated-oc-search
6
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

last demo import - cleaned

Browse Source
This commit is contained in:
ycc
2023-08-26 22:04:56 +02:00
parent 0ab5dd5e38
commit f3c3c67e2c
884 changed files with 301494 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
static/mxgraph/examples/anchors.html Normal file
View File

@@ -0,0 +1,124 @@
<!--
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
var graph = new mxGraph(container);
graph.setConnectable(true);
// Enables connect preview for the default edge style
graph.connectionHandler.createEdgeState = function(me)
{
var 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).
var 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>

77
static/mxgraph/examples/animation.html Normal file
View File

@@ -0,0 +1,77 @@
<!--
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)
{
var graph = new mxGraph(container);
graph.setEnabled(false);
var parent = graph.getDefaultParent();
var 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
var 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>

198
static/mxgraph/examples/autolayout.html Normal file
View File

@@ -0,0 +1,198 @@
<!--
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);
var 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
var 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).
var parent = graph.getDefaultParent();
var addOverlay = function(cell)
{
// Creates a new overlay with an image and a tooltip
var 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();
var 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');
var state = eo.getProperty('state');
graph.popupMenuHandler.hideMenu();
graph.stopEditing(false);
var 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();
}
var layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
var 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
var morph = new mxMorphing(graph);
morph.addListener(mxEvent.DONE, mxUtils.bind(this, function()
{
graph.getModel().endUpdate();
if (post != null)
{
post();
}
}));
morph.startAnimation();
}
};
var 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>

220
static/mxgraph/examples/boundary.html Normal file
View File

@@ -0,0 +1,220 @@
<!--
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
var graph = new mxGraph(container);
// Sets the base style for all vertices
var 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)
{
var childCount = this.model.getChildCount(cell);
for (var i = 0; i < childCount; i++)
{
var child = this.model.getChildAt(cell, i);
var 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)
{
var model = graph.getModel();
var geo = model.getGeometry(state.cell);
if (geo != null && geo.relative && !model.isEdge(state.cell))
{
var parent = model.getParent(state.cell);
if (model.isVertex(parent))
{
var pstate = graph.view.getState(parent);
if (pstate != null)
{
var scale = graph.view.scale;
var x = state.x + dx;
var 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)
{
var rel = getRelativePosition(this.view.getState(cell), dx * graph.view.scale, dy * graph.view.scale);
if (rel != null)
{
var 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)
{
var point = mxUtils.convertPoint(this.graph.container, me.getX(), me.getY());
var 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)
{
var state = this.graph.view.getState(this.cells[0]);
var rel = getRelativePosition(state, delta.x, delta.y);
if (rel != null)
{
var 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).
var 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>

355
static/mxgraph/examples/clipboard.html Normal file
View File

@@ -0,0 +1,355 @@
<!--
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
var graph = new mxGraph(container);
// Public helper method for shared clipboard.
mxClipboard.cellsToString = function(cells)
{
var codec = new mxCodec();
var model = new mxGraphModel();
var parent = model.getChildAt(model.getRoot(), 0);
for (var 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
var textInput = document.createElement('textarea');
mxUtils.setOpacity(textInput, 0);
textInput.style.width = '1px';
textInput.style.height = '1px';
var restoreFocus = false;
var gs = graph.gridSize;
var lastPaste = null;
var dx = 0;
var 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
var 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 /* 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 /* 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
var copyCells = function(graph, cells)
{
if (cells.length > 0)
{
var clones = graph.cloneCells(cells);
// Checks for orphaned relative children and makes absolute
for (var i = 0; i < clones.length; i++)
{
var state = graph.view.getState(cells[i]);
if (state != null)
{
var 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
var importXml = function(xml, dx, dy)
{
dx = (dx != null) ? dx : 0;
dy = (dy != null) ? dy : 0;
var cells = []
try
{
var doc = mxUtils.parseXml(xml);
var node = doc.documentElement;
if (node != null)
{
var model = new mxGraphModel();
var codec = new mxCodec(node.ownerDocument);
codec.decode(node, model);
var childCount = model.getChildCount(model.getRoot());
var targetChildCount = graph.model.getChildCount(graph.model.getRoot());
// Merges existing layers and adds new layers
graph.model.beginUpdate();
try
{
for (var i = 0; i < childCount; i++)
{
var 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
var target = (childCount == 1) ? graph.getDefaultParent() : graph.model.getChildAt(graph.model.getRoot(), i);
if (!graph.isCellLocked(target))
{
var 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];
var 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
var pasteText = function(text)
{
var xml = mxUtils.trim(text);
var x = graph.container.scrollLeft / graph.view.scale - graph.view.translate.x;
var 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
var extractGraphModelFromEvent = function(evt)
{
var data = null;
if (evt != null)
{
var 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())
{
var 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).
var 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>

161
static/mxgraph/examples/codec.html Normal file
View File

@@ -0,0 +1,161 @@
<!--
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())
{
var divs = document.getElementsByTagName('*');
for (var i = 0; i < divs.length; i++)
{
if (divs[i].className.toString().indexOf('mxgraph') >= 0)
{
(function(container)
{
var xml = mxUtils.getTextContent(container);
var xmlDocument = mxUtils.parseXml(xml);
if (xmlDocument.documentElement != null && xmlDocument.documentElement.nodeName == 'mxGraphModel')
{
var decoder = new mxCodec(xmlDocument);
var node = xmlDocument.documentElement;
container.innerHTML = '';
var graph = new mxGraph(container);
graph.centerZoom = false;
graph.setTooltips(false);
graph.setEnabled(false);
// Changes the default style for edges "in-place"
var 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
var buttons = document.createElement('div');
buttons.style.position = 'absolute';
buttons.style.overflow = 'visible';
var bs = graph.getBorderSizes();
buttons.style.top = (container.offsetTop + bs.y) + 'px';
buttons.style.left = (container.offsetLeft + bs.x) + 'px';
var left = 0;
var bw = 16;
var bh = 16;
if (mxClient.IS_QUIRKS)
{
bw -= 1;
bh -= 1;
}
function addButton(label, funct)
{
var 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;">&lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell id="0"/&gt;&lt;mxCell id="1" parent="0"/&gt;&lt;mxCell id="2" vertex="1" parent="1" value="Interval 1"&gt;&lt;mxGeometry x="380" y="0" width="140" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="3" vertex="1" parent="1" value="Interval 2"&gt;&lt;mxGeometry x="200" y="80" width="380" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="4" vertex="1" parent="1" value="Interval 3"&gt;&lt;mxGeometry x="40" y="140" width="260" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="5" vertex="1" parent="1" value="Interval 4"&gt;&lt;mxGeometry x="120" y="200" width="240" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="6" vertex="1" parent="1" value="Interval 5"&gt;&lt;mxGeometry x="420" y="260" width="80" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="7" edge="1" source="2" target="3" parent="1" value="Transfer1"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="420" y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="8" edge="1" source="2" target="6" parent="1" value=""&gt;&lt;mxGeometry as="geometry" relative="1" y="-30"&gt;&lt;Array as="points"&gt;&lt;Object x="600" y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="9" edge="1" source="3" target="4" parent="1" value="Transfer3"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="260" y="120"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="10" edge="1" source="4" target="5" parent="1" value="Transfer4"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="200" y="180"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="11" edge="1" source="4" target="6" parent="1" value="Transfer5"&gt;&lt;mxGeometry as="geometry" relative="1" y="-10"&gt;&lt;Array as="points"&gt;&lt;Object x="460" y="155"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;</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;">&lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell id="0"/&gt;&lt;mxCell id="1" parent="0"/&gt;&lt;mxCell id="2" vertex="1" parent="1" value="Interval 1"&gt;&lt;mxGeometry x="380" y="0" width="140" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="3" vertex="1" parent="1" value="Interval 2"&gt;&lt;mxGeometry x="200" y="80" width="380" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="4" vertex="1" parent="1" value="Interval 3"&gt;&lt;mxGeometry x="40" y="140" width="260" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="5" vertex="1" parent="1" value="Interval 4"&gt;&lt;mxGeometry x="120" y="200" width="240" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="6" vertex="1" parent="1" value="Interval 5"&gt;&lt;mxGeometry x="420" y="260" width="80" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="7" edge="1" source="2" target="3" parent="1" value="Transfer1"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="420" y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="8" edge="1" source="2" target="6" parent="1" value=""&gt;&lt;mxGeometry as="geometry" relative="1" y="-30"&gt;&lt;Array as="points"&gt;&lt;Object x="600" y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="9" edge="1" source="3" target="4" parent="1" value="Transfer3"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="260" y="120"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="10" edge="1" source="4" target="5" parent="1" value="Transfer4"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="200" y="180"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="11" edge="1" source="4" target="6" parent="1" value="Transfer5"&gt;&lt;mxGeometry as="geometry" relative="1" y="-10"&gt;&lt;Array as="points"&gt;&lt;Object x="460" y="155"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;</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;">&lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell id="0"/&gt;&lt;mxCell id="1" parent="0"/&gt;&lt;mxCell id="2" vertex="1" parent="1" value="Interval 1"&gt;&lt;mxGeometry x="380" y="20" width="140" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="3" vertex="1" parent="1" value="Interval 2"&gt;&lt;mxGeometry x="200" y="80" width="380" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="4" vertex="1" parent="1" value="Interval 3"&gt;&lt;mxGeometry x="40" y="140" width="260" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="5" vertex="1" parent="1" value="Interval 4"&gt;&lt;mxGeometry x="120" y="200" width="240" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="6" vertex="1" parent="1" value="Interval 5"&gt;&lt;mxGeometry x="420" y="260" width="80" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="7" edge="1" source="2" target="3" parent="1" value="Transfer1"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="420" y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="8" edge="1" source="2" target="6" parent="1" value="Transfer2"&gt;&lt;mxGeometry as="geometry" relative="1" y="0"&gt;&lt;Array as="points"&gt;&lt;Object x="600" y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="9" edge="1" source="3" target="4" parent="1" value="Transfer3"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="260" y="120"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="10" edge="1" source="4" target="5" parent="1" value="Transfer4"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="200" y="180"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="11" edge="1" source="4" target="6" parent="1" value="Transfer5"&gt;&lt;mxGeometry as="geometry" relative="1" y="-10"&gt;&lt;Array as="points"&gt;&lt;Object x="460" y="155"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;</div>
This graph is embedded in the page.
<div class="mxgraph" style="position:relative;overflow:hidden;border:6px solid gray;">&lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell id="0"/&gt;&lt;mxCell id="1" parent="0"/&gt;&lt;mxCell id="2" vertex="1" parent="1" value="Interval 1"&gt;&lt;mxGeometry x="380" y="20" width="140" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="3" vertex="1" parent="1" value="Interval 2"&gt;&lt;mxGeometry x="200" y="80" width="380" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="4" vertex="1" parent="1" value="Interval 3"&gt;&lt;mxGeometry x="40" y="140" width="260" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="5" vertex="1" parent="1" value="Interval 4"&gt;&lt;mxGeometry x="120" y="200" width="240" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="6" vertex="1" parent="1" value="Interval 5"&gt;&lt;mxGeometry x="420" y="260" width="80" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="7" edge="1" source="2" target="3" parent="1" value="Transfer1"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="420" y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="8" edge="1" source="2" target="6" parent="1" value="Transfer2"&gt;&lt;mxGeometry as="geometry" relative="1" y="0"&gt;&lt;Array as="points"&gt;&lt;Object x="600" y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="9" edge="1" source="3" target="4" parent="1" value="Transfer3"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="260" y="120"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="10" edge="1" source="4" target="5" parent="1" value="Transfer4"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array as="points"&gt;&lt;Object x="200" y="180"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell id="11" edge="1" source="4" target="6" parent="1" value="Transfer5"&gt;&lt;mxGeometry as="geometry" relative="1" y="-10"&gt;&lt;Array as="points"&gt;&lt;Object x="460" y="155"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;</div>
This graph is embedded in the page.
<script type="text/javascript">
main();
</script>
</body>
</html>

73
static/mxgraph/examples/collapse.html Normal file
View File

@@ -0,0 +1,73 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Collapse example for mxGraph. This example demonstrates changing
the style of a cell based on its collapsed state.
-->
<html>
<head>
<title>Collapse 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)
{
var graph = new mxGraph(container);
var parent = graph.getDefaultParent();
// Extends mxGraphModel.getStyle to show an image when collapsed
var modelGetStyle = graph.model.getStyle;
graph.model.getStyle = function(cell)
{
if (cell != null)
{
var style = modelGetStyle.apply(this, arguments);
if (this.isCollapsed(cell))
{
style = style + ';shape=image;image=http://www.jgraph.com/images/mxgraph.gif;' +
'noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9';
}
return style;
}
return null;
};
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Container', 20, 20, 200, 200,
'shape=swimlane;startSize=20;');
v1.geometry.alternateBounds = new mxRectangle(0, 0, 110, 70);
var v11 = graph.insertVertex(v1, null, 'Hello,', 10, 40, 120, 80);
}
finally
{
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>

108
static/mxgraph/examples/constituent.html Normal file
View File

@@ -0,0 +1,108 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Consistuent example for mxGraph. This example demonstrates using
cells as parts of other cells.
-->
<html>
<head>
<title>Consistuent 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">
/**
* Redirects start drag to parent.
*/
var graphHandlerGetInitialCellForEvent = mxGraphHandler.prototype.getInitialCellForEvent;
mxGraphHandler.prototype.getInitialCellForEvent = function(me)
{
var cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);
if (this.graph.isPart(cell))
{
cell = this.graph.getModel().getParent(cell)
}
return cell;
};
// 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
var graph = new mxGraph(container);
graph.foldingEnabled = false;
graph.recursiveResize = true;
// Helper method to mark parts with constituent=1 in the style
graph.isPart = function(cell)
{
return this.getCurrentCellStyle(cell)['constituent'] == '1';
};
// Redirects selection to parent
graph.selectCellForEvent = function(cell)
{
if (this.isPart(cell))
{
cell = this.model.getParent(cell);
}
mxGraph.prototype.selectCellForEvent.apply(this, arguments);
};
// 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).
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, '', 20, 20, 120, 70);
var v2 = graph.insertVertex(v1, null, 'Constituent', 20, 20, 80, 30, 'constituent=1;');
}
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>

238
static/mxgraph/examples/contexticons.html Normal file
View File

@@ -0,0 +1,238 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Context icons example for mxGraph. This example demonstrates adding
icons to selected vertices to carry out special operations.
-->
<html>
<head>
<title>Context icons 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">
// Defines a subclass for mxVertexHandler that adds a set of clickable
// icons to every selected vertex.
function mxVertexToolHandler(state)
{
mxVertexHandler.apply(this, arguments);
};
mxVertexToolHandler.prototype = new mxVertexHandler();
mxVertexToolHandler.prototype.constructor = mxVertexToolHandler;
mxVertexToolHandler.prototype.domNode = null;
mxVertexToolHandler.prototype.init = function()
{
mxVertexHandler.prototype.init.apply(this, arguments);
// In this example we force the use of DIVs for images in IE. This
// handles transparency in PNG images properly in IE and fixes the
// problem that IE routes all mouse events for a gesture via the
// initial IMG node, which means the target vertices
this.domNode = document.createElement('div');
this.domNode.style.position = 'absolute';
this.domNode.style.whiteSpace = 'nowrap';
// Workaround for event redirection via image tag in quirks and IE8
function createImage(src)
{
if (mxClient.IS_IE && !mxClient.IS_SVG)
{
var img = document.createElement('div');
img.style.backgroundImage = 'url(' + src + ')';
img.style.backgroundPosition = 'center';
img.style.backgroundRepeat = 'no-repeat';
img.style.display = (mxClient.IS_QUIRKS) ? 'inline' : 'inline-block';
return img;
}
else
{
return mxUtils.createImage(src);
}
};
// Delete
var img = createImage('images/delete2.png');
img.setAttribute('title', 'Delete');
img.style.cursor = 'pointer';
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(img,
mxUtils.bind(this, function(evt)
{
// Disables dragging the image
mxEvent.consume(evt);
})
);
mxEvent.addListener(img, 'click',
mxUtils.bind(this, function(evt)
{
this.graph.removeCells([this.state.cell]);
mxEvent.consume(evt);
})
);
this.domNode.appendChild(img);
// Size
var img = createImage('images/fit_to_size.png');
img.setAttribute('title', 'Resize');
img.style.cursor = 'se-resize';
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(img,
mxUtils.bind(this, function(evt)
{
this.start(mxEvent.getClientX(evt), mxEvent.getClientY(evt), 7);
this.graph.isMouseDown = true;
this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
mxEvent.consume(evt);
})
);
this.domNode.appendChild(img);
// Move
var img = createImage('images/plus.png');
img.setAttribute('title', 'Move');
img.style.cursor = 'move';
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(img,
mxUtils.bind(this, function(evt)
{
this.graph.graphHandler.start(this.state.cell,
mxEvent.getClientX(evt), mxEvent.getClientY(evt));
this.graph.graphHandler.cellWasClicked = true;
this.graph.isMouseDown = true;
this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
mxEvent.consume(evt);
})
);
this.domNode.appendChild(img);
// Connect
var img = createImage('images/check.png');
img.setAttribute('title', 'Connect');
img.style.cursor = 'pointer';
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(img,
mxUtils.bind(this, function(evt)
{
var pt = mxUtils.convertPoint(this.graph.container,
mxEvent.getClientX(evt), mxEvent.getClientY(evt));
this.graph.connectionHandler.start(this.state, pt.x, pt.y);
this.graph.isMouseDown = true;
this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
mxEvent.consume(evt);
})
);
this.domNode.appendChild(img);
this.graph.container.appendChild(this.domNode);
this.redrawTools();
};
mxVertexToolHandler.prototype.redraw = function()
{
mxVertexHandler.prototype.redraw.apply(this);
this.redrawTools();
};
mxVertexToolHandler.prototype.redrawTools = function()
{
if (this.state != null && this.domNode != null)
{
var dy = (mxClient.IS_VML && document.compatMode == 'CSS1Compat') ? 20 : 4;
this.domNode.style.left = (this.state.x + this.state.width - 56) + 'px';
this.domNode.style.top = (this.state.y + this.state.height + dy) + 'px';
}
};
mxVertexToolHandler.prototype.destroy = function(sender, me)
{
mxVertexHandler.prototype.destroy.apply(this, arguments);
if (this.domNode != null)
{
this.domNode.parentNode.removeChild(this.domNode);
this.domNode = 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
{
// Creates the graph inside the given container
var graph = new mxGraph(container);
graph.setConnectable(true);
graph.connectionHandler.createTarget = true;
graph.createHandler = function(state)
{
if (state != null &&
this.model.isVertex(state.cell))
{
return new mxVertexToolHandler(state);
}
return mxGraph.prototype.createHandler.apply(this, arguments);
};
// Uncomment the following if you want the container
// to fit the size of the graph
//graph.setResizeContainer(true);
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var 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="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>

177
static/mxgraph/examples/control.html Normal file
View File

@@ -0,0 +1,177 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Control example for mxGraph. This example demonstrates adding
controls to specific cells in a graph.
-->
<html>
<head>
<title>Control 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
{
// Creates the graph inside the given container
var graph = new mxGraph(container);
graph.setPanning(true);
// Specifies the URL and size of the new control
var deleteImage = new mxImage('editors/images/overlays/forbidden.png', 16, 16);
// Overridden to add an additional control to the state at creation time
mxCellRendererCreateControl = mxCellRenderer.prototype.createControl;
mxCellRenderer.prototype.createControl = function(state)
{
mxCellRendererCreateControl.apply(this, arguments);
var graph = state.view.graph;
if (graph.getModel().isVertex(state.cell))
{
if (state.deleteControl == null)
{
var b = new mxRectangle(0, 0, deleteImage.width, deleteImage.height);
state.deleteControl = new mxImageShape(b, deleteImage.src);
state.deleteControl.dialect = graph.dialect;
state.deleteControl.preserveImageAspect = false;
this.initControl(state, state.deleteControl, false, function (evt)
{
if (graph.isEnabled())
{
graph.removeCells([state.cell]);
mxEvent.consume(evt);
}
});
}
}
else if (state.deleteControl != null)
{
state.deleteControl.destroy();
state.deleteControl = null;
}
};
// Helper function to compute the bounds of the control
var getDeleteControlBounds = function(state)
{
if (state.deleteControl != null)
{
var oldScale = state.deleteControl.scale;
var w = state.deleteControl.bounds.width / oldScale;
var h = state.deleteControl.bounds.height / oldScale;
var s = state.view.scale;
return (state.view.graph.getModel().isEdge(state.cell)) ?
new mxRectangle(state.x + state.width / 2 - w / 2 * s,
state.y + state.height / 2 - h / 2 * s, w * s, h * s)
: new mxRectangle(state.x + state.width - w * s,
state.y, w * s, h * s);
}
return null;
};
// Overridden to update the scale and bounds of the control
mxCellRendererRedrawControl = mxCellRenderer.prototype.redrawControl;
mxCellRenderer.prototype.redrawControl = function(state)
{
mxCellRendererRedrawControl.apply(this, arguments);
if (state.deleteControl != null)
{
var bounds = getDeleteControlBounds(state);
var s = state.view.scale;
if (state.deleteControl.scale != s || !state.deleteControl.bounds.equals(bounds))
{
state.deleteControl.bounds = bounds;
state.deleteControl.scale = s;
state.deleteControl.redraw();
}
}
};
// Overridden to remove the control if the state is destroyed
mxCellRendererDestroy = mxCellRenderer.prototype.destroy;
mxCellRenderer.prototype.destroy = function(state)
{
mxCellRendererDestroy.apply(this, arguments);
if (state.deleteControl != null)
{
state.deleteControl.destroy();
state.deleteControl = null;
}
};
// Uncomment the following if you want the container
// to fit the size of the graph
//graph.setResizeContainer(true);
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var 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();
}
graph.centerZoom = false;
document.body.appendChild(mxUtils.button('Zoom In', function()
{
graph.zoomIn();
}));
document.body.appendChild(mxUtils.button('Zoom Out', function()
{
graph.zoomOut();
}));
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;width:621px;height:441px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>

204
static/mxgraph/examples/dragsource.html Normal file
View File

@@ -0,0 +1,204 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Dragsource example for mxGraph. This example demonstrates using
one drag source for multiple graphs and changing the drag icon.
-->
<html>
<head>
<title>Dragsource 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()
{
// 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
{
// Enables guides
mxGraphHandler.prototype.guidesEnabled = true;
// Alt disables guides
mxGuide.prototype.isEnabledForEvent = function(evt)
{
return !mxEvent.isAltDown(evt);
};
// Enables snapping waypoints to terminals
mxEdgeHandler.prototype.snapToTerminals = true;
var graphs = [];
// Creates the graph inside the given container
for (var i = 0; i < 2; i++)
{
var container = document.createElement('div');
container.style.overflow = 'hidden';
container.style.position = 'relative';
container.style.width = '321px';
container.style.height = '241px';
container.style.background = 'url(\'editors/images/grid.gif\')';
container.style.cursor = 'default';
document.body.appendChild(container);
var graph = new mxGraph(container);
graph.gridSize = 30;
// Uncomment the following if you want the container
// to fit the size of the graph
//graph.setResizeContainer(true);
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var 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();
}
graphs.push(graph);
}
// Returns the graph under the mouse
var graphF = function(evt)
{
var x = mxEvent.getClientX(evt);
var y = mxEvent.getClientY(evt);
var elt = document.elementFromPoint(x, y);
for (var i = 0; i < graphs.length; i++)
{
if (mxUtils.isAncestorNode(graphs[i].container, elt))
{
return graphs[i];
}
}
return null;
};
// Inserts a cell at the given location
var funct = function(graph, evt, target, x, y)
{
var cell = new mxCell('Test', new mxGeometry(0, 0, 120, 40));
cell.vertex = true;
var cells = graph.importCells([cell], x, y, target);
if (cells != null && cells.length > 0)
{
graph.scrollCellToVisible(cells[0]);
graph.setSelectionCells(cells);
}
};
// Creates a DOM node that acts as the drag source
var img = mxUtils.createImage('images/icons48/gear.png');
img.style.width = '48px';
img.style.height = '48px';
document.body.appendChild(img);
// Disables built-in DnD in IE (this is needed for cross-frame DnD, see below)
if (mxClient.IS_IE)
{
mxEvent.addListener(img, 'dragstart', function(evt)
{
evt.returnValue = false;
});
}
// Creates the element that is being for the actual preview.
var dragElt = document.createElement('div');
dragElt.style.border = 'dashed black 1px';
dragElt.style.width = '120px';
dragElt.style.height = '40px';
// Drag source is configured to use dragElt for preview and as drag icon
// if scalePreview (last) argument is true. Dx and dy are null to force
// the use of the defaults. Note that dx and dy are only used for the
// drag icon but not for the preview.
var ds = mxUtils.makeDraggable(img, graphF, funct, dragElt, null, null, graph.autoscroll, true);
// Redirects feature to global switch. Note that this feature should only be used
// if the the x and y arguments are used in funct to insert the cell.
ds.isGuidesEnabled = function()
{
return graph.graphHandler.guidesEnabled;
};
// Restores original drag icon while outside of graph
ds.createDragElement = mxDragSource.prototype.createDragElement;
}
};
// NOTE: To enable cross-document DnD (eg. between frames),
// the following methods need to be overridden:
/*mxDragSourceMouseUp = mxDragSource.prototype.mouseUp;
mxDragSource.prototype.mouseUp = function(evt)
{
var doc = this.element.ownerDocument;
if (doc != document)
{
var mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup';
if (this.mouseUpHandler != null)
{
mxEvent.removeListener(doc, mu, this.mouseUpHandler);
}
}
mxDragSourceMouseUp.apply(this, arguments);
};*/
/*mxDragSourceMouseDown = mxDragSource.prototype.mouseDown;
mxDragSource.prototype.mouseDown = function(evt)
{
if (this.enabled && !mxEvent.isConsumed(evt))
{
mxDragSourceMouseDown.apply(this, arguments);
var doc = this.element.ownerDocument;
if (doc != document)
{
var mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup';
mxEvent.addListener(doc, mu, this.mouseUpHandler);
}
}
};*/
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main();">
</body>
</html>

178
static/mxgraph/examples/drop.html Normal file
View File

@@ -0,0 +1,178 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Drop example for mxGraph. This example demonstrates handling
native drag and drop of images (requires modern browser).
-->
<html>
<head>
<title>Drop 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
var fileSupport = window.File != null && window.FileReader != null && window.FileList != null;
if (!fileSupport || !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
var graph = new mxGraph(container);
// Enables rubberband selection
new mxRubberband(graph);
mxEvent.addListener(container, 'dragover', function(evt)
{
if (graph.isEnabled())
{
evt.stopPropagation();
evt.preventDefault();
}
});
mxEvent.addListener(container, 'drop', function(evt)
{
if (graph.isEnabled())
{
evt.stopPropagation();
evt.preventDefault();
// Gets drop location point for vertex
var pt = mxUtils.convertPoint(graph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt));
var tr = graph.view.translate;
var scale = graph.view.scale;
var x = pt.x / scale - tr.x;
var y = pt.y / scale - tr.y;
// Converts local images to data urls
var filesArray = event.dataTransfer.files;
for (var i = 0; i < filesArray.length; i++)
{
handleDrop(graph, filesArray[i], x + i * 10, y + i * 10);
}
}
});
}
};
// Handles each file as a separate insert for simplicity.
// Use barrier to handle multiple files as a single insert.
function handleDrop(graph, file, x, y)
{
if (file.type.substring(0, 5) == 'image')
{
var reader = new FileReader();
reader.onload = function(e)
{
// Gets size of image for vertex
var data = e.target.result;
// SVG needs special handling to add viewbox if missing and
// find initial size from SVG attributes (only for IE11)
if (file.type.substring(0, 9) == 'image/svg')
{
var comma = data.indexOf(',');
var svgText = atob(data.substring(comma + 1));
var root = mxUtils.parseXml(svgText);
// Parses SVG to find width and height
if (root != null)
{
var svgs = root.getElementsByTagName('svg');
if (svgs.length > 0)
{
var svgRoot = svgs[0];
var w = parseFloat(svgRoot.getAttribute('width'));
var h = parseFloat(svgRoot.getAttribute('height'));
// Check if viewBox attribute already exists
var vb = svgRoot.getAttribute('viewBox');
if (vb == null || vb.length == 0)
{
svgRoot.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
}
// Uses width and height from viewbox for
// missing width and height attributes
else if (isNaN(w) || isNaN(h))
{
var tokens = vb.split(' ');
if (tokens.length > 3)
{
w = parseFloat(tokens[2]);
h = parseFloat(tokens[3]);
}
}
w = Math.max(1, Math.round(w));
h = Math.max(1, Math.round(h));
data = 'data:image/svg+xml,' + btoa(mxUtils.getXml(svgs[0], '\n'));
graph.insertVertex(null, null, '', x, y, w, h, 'shape=image;image=' + data + ';');
}
}
}
else
{
var img = new Image();
img.onload = function()
{
var w = Math.max(1, img.width);
var h = Math.max(1, img.height);
// Converts format of data url to cell style value for use in vertex
var semi = data.indexOf(';');
if (semi > 0)
{
data = data.substring(0, semi) + data.substring(data.indexOf(',', semi + 1));
}
graph.insertVertex(null, null, '', x, y, w, h, 'shape=image;image=' + data + ';');
};
img.src = data;
}
};
reader.readAsDataURL(file);
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
Drag & drop your images below:<br>
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="position:relative;overflow:hidden;width:621px;height:441px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>

247
static/mxgraph/examples/dynamicloading.html Normal file
View File

@@ -0,0 +1,247 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Dynamic loading example for mxGraph. This example demonstrates loading
graph model data dynamically to limit the number of cells in the model.
-->
<html>
<head>
<title>Dynamic loading 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).
// Global variable to make sure each cell in a response has
// a unique ID throughout the complete life of the program,
// in a real-life setup each cell should have an external
// ID on the business object or else the cell ID should be
// globally unique for the lifetime of the graph model.
var requestId = 0;
function main(container)
{
// Checks if browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is
// not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Speedup the animation
mxText.prototype.enableBoundingBox = false;
// Creates the graph inside the given container
var graph = new mxGraph(container);
// Disables all built-in interactions
graph.setEnabled(false);
// Handles clicks on cells
graph.addListener(mxEvent.CLICK, function(sender, evt)
{
var cell = evt.getProperty('cell');
if (cell != null)
{
load(graph, cell);
}
});
// Changes the default vertex style in-place
var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
var cx = graph.container.clientWidth / 2;
var cy = graph.container.clientHeight / 2;
var cell = graph.insertVertex(parent, '0-0', '0-0', cx - 20, cy - 15, 60, 40);
// Animates the changes in the graph model
graph.getModel().addListener(mxEvent.CHANGE, function(sender, evt)
{
var changes = evt.getProperty('edit').changes;
mxEffects.animateChanges(graph, changes);
});
load(graph, cell);
}
};
// Loads the links for the given cell into the given graph
// by requesting the respective data in the server-side
// (implemented for this demo using the server-function)
function load(graph, cell)
{
if (graph.getModel().isVertex(cell))
{
var cx = graph.container.clientWidth / 2;
var cy = graph.container.clientHeight / 2;
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var xml = server(cell.id);
var doc = mxUtils.parseXml(xml);
var dec = new mxCodec(doc);
var model = dec.decode(doc.documentElement);
// Removes all cells which are not in the response
for (var key in graph.getModel().cells)
{
var tmp = graph.getModel().getCell(key);
if (tmp != cell &&
graph.getModel().isVertex(tmp))
{
graph.removeCells([tmp]);
}
}
// Merges the response model with the client model
graph.getModel().mergeChildren(model.getRoot().getChildAt(0), parent);
// Moves the given cell to the center
var geo = graph.getModel().getGeometry(cell);
if (geo != null)
{
geo = geo.clone();
geo.x = cx - geo.width / 2;
geo.y = cy - geo.height / 2;
graph.getModel().setGeometry(cell, geo);
}
// Creates a list of the new vertices, if there is more
// than the center vertex which might have existed
// previously, then this needs to be changed to analyze
// the target model before calling mergeChildren above
var vertices = [];
for (var key in graph.getModel().cells)
{
var tmp = graph.getModel().getCell(key);
if (tmp != cell && model.isVertex(tmp))
{
vertices.push(tmp);
// Changes the initial location "in-place"
// to get a nice animation effect from the
// center to the radius of the circle
var geo = model.getGeometry(tmp);
if (geo != null)
{
geo.x = cx - geo.width / 2;
geo.y = cy - geo.height / 2;
}
}
}
// Arranges the response in a circle
var cellCount = vertices.length;
var phi = 2 * Math.PI / cellCount;
var r = Math.min(graph.container.clientWidth / 4,
graph.container.clientHeight / 4);
for (var i = 0; i < cellCount; i++)
{
var geo = graph.getModel().getGeometry(vertices[i]);
if (geo != null)
{
geo = geo.clone();
geo.x += r * Math.sin(i * phi);
geo.y += r * Math.cos(i * phi);
graph.getModel().setGeometry(vertices[i], geo);
}
}
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
}
};
// Simulates the existence of a server that can crawl the
// big graph with a certain depth and create a graph model
// for the traversed cells, which is then sent to the client
function server(cellId)
{
// Increments the request ID as a prefix for the cell IDs
requestId++;
// Creates a local graph with no display
var graph = new mxGraph();
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v0 = graph.insertVertex(parent, cellId, 'Dummy', 0, 0, 60, 40);
var cellCount = parseInt(Math.random() * 16) + 4;
// Creates the random links and cells for the response
for (var i = 0; i < cellCount; i++)
{
var id = requestId + '-' + i;
var v = graph.insertVertex(parent, id, id, 0, 0, 60, 40);
var e = graph.insertEdge(parent, null, 'Link ' + i, v0, v);
}
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
var enc = new mxCodec();
var node = enc.encode(graph.getModel());
return mxUtils.getXml(node);
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))" style="overflow:hidden;">
<!-- Creates a container for the graph with a grid wallpaper. Make sure to define the position
and overflow attributes! See comments on the adding of the size-listener on line 54 ff! -->
<div id="graphContainer"
style="overflow:visible;position:absolute;width:100%;height:100%;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>

122
static/mxgraph/examples/dynamicstyle.html Normal file
View File

@@ -0,0 +1,122 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Dynamic Style example for mxGraph. This example demonstrates changing
the style of a cell dynamically by overriding mxGraphModel.getStyle.
-->
<html>
<head>
<title>Dynamic Style 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
{
// Creates the graph inside the given container
var graph = new mxGraph(container);
// Disables moving of edge labels in this examples
graph.edgeLabelsMovable = false;
// Enables rubberband selection
new mxRubberband(graph);
// Needs to set a flag to check for dynamic style changes,
// that is, changes to styles on cells where the style was
// not explicitely changed using mxStyleChange
graph.getView().updateStyle = true;
// Overrides mxGraphModel.getStyle to return a specific style
// for edges that reflects their target terminal (in this case
// the strokeColor will be equal to the target's fillColor).
var previous = graph.model.getStyle;
graph.model.getStyle = function(cell)
{
if (cell != null)
{
var style = previous.apply(this, arguments);
if (this.isEdge(cell))
{
var target = this.getTerminal(cell, false);
if (target != null)
{
var targetStyle = graph.getCurrentCellStyle(target);
var fill = mxUtils.getValue(targetStyle, mxConstants.STYLE_FILLCOLOR);
if (fill != null)
{
style += ';strokeColor='+fill;
}
}
}
else if (this.isVertex(cell))
{
var geometry = this.getGeometry(cell);
if (geometry != null &&
geometry.width > 80)
{
style += ';fillColor=green';
}
}
return style;
}
return null;
};
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var 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, 'fillColor=green');
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30, 'fillColor=blue');
var v3 = graph.insertVertex(parent, null, 'World!', 20, 150, 80, 30, 'fillColor=red');
var e1 = graph.insertEdge(parent, null, 'Connect', v1, v2, 'perimeterSpacing=4;strokeWidth=4;labelBackgroundColor=white;fontStyle=1');
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif')">
</div>
</body>
</html>

167
static/mxgraph/examples/dynamictoolbar.html Normal file
View File

@@ -0,0 +1,167 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Dynamic toolbar example for mxGraph. This example demonstrates changing the
state of the toolbar at runtime.
-->
<html>
<head>
<title>Toolbar 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()
{
// Checks if browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is
// not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Defines an icon for creating new connections in the connection handler.
// This will automatically disable the highlighting of the source vertex.
mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);
// Creates the div for the toolbar
var tbContainer = document.createElement('div');
tbContainer.style.position = 'absolute';
tbContainer.style.overflow = 'hidden';
tbContainer.style.padding = '2px';
tbContainer.style.left = '0px';
tbContainer.style.top = '0px';
tbContainer.style.width = '24px';
tbContainer.style.bottom = '0px';
document.body.appendChild(tbContainer);
// Creates new toolbar without event processing
var toolbar = new mxToolbar(tbContainer);
toolbar.enabled = false
// Creates the div for the graph
var container = document.createElement('div');
container.style.position = 'absolute';
container.style.overflow = 'hidden';
container.style.left = '24px';
container.style.top = '0px';
container.style.right = '0px';
container.style.bottom = '0px';
container.style.background = 'url("editors/images/grid.gif")';
document.body.appendChild(container);
// Workaround for Internet Explorer ignoring certain styles
if (mxClient.IS_QUIRKS)
{
document.body.style.overflow = 'hidden';
new mxDivResizer(tbContainer);
new mxDivResizer(container);
}
// Creates the model and the graph inside the container
// using the fastest rendering available on the browser
var model = new mxGraphModel();
var graph = new mxGraph(container, model);
// Enables new connections in the graph
graph.setConnectable(true);
graph.setMultigraph(false);
// Stops editing on enter or escape keypress
var keyHandler = new mxKeyHandler(graph);
var rubberband = new mxRubberband(graph);
var addVertex = function(icon, w, h, style)
{
var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
vertex.setVertex(true);
var img = addToolbarItem(graph, toolbar, vertex, icon);
img.enabled = true;
graph.getSelectionModel().addListener(mxEvent.CHANGE, function()
{
var tmp = graph.isSelectionEmpty();
mxUtils.setOpacity(img, (tmp) ? 100 : 20);
img.enabled = tmp;
});
};
addVertex('editors/images/rectangle.gif', 100, 40, '');
addVertex('editors/images/rounded.gif', 100, 40, 'shape=rounded');
addVertex('editors/images/ellipse.gif', 40, 40, 'shape=ellipse');
addVertex('editors/images/rhombus.gif', 40, 40, 'shape=rhombus');
addVertex('editors/images/triangle.gif', 40, 40, 'shape=triangle');
addVertex('editors/images/cylinder.gif', 40, 40, 'shape=cylinder');
addVertex('editors/images/actor.gif', 30, 40, 'shape=actor');
}
}
function addToolbarItem(graph, toolbar, prototype, image)
{
// Function that is executed when the image is dropped on
// the graph. The cell argument points to the cell under
// the mousepointer if there is one.
var funct = function(graph, evt, cell, x, y)
{
graph.stopEditing(false);
var vertex = graph.getModel().cloneCell(prototype);
vertex.geometry.x = x;
vertex.geometry.y = y;
graph.addCell(vertex);
graph.setSelectionCell(vertex);
}
// Creates the image which is used as the drag icon (preview)
var img = toolbar.addMode(null, image, function(evt, cell)
{
var pt = this.graph.getPointForEvent(evt);
funct(graph, evt, cell, pt.x, pt.y);
});
// Disables dragging if element is disabled. This is a workaround
// for wrong event order in IE. Following is a dummy listener that
// is invoked as the last listener in IE.
mxEvent.addListener(img, 'mousedown', function(evt)
{
// do nothing
});
// This listener is always called first before any other listener
// in all browsers.
mxEvent.addListener(img, 'mousedown', function(evt)
{
if (img.enabled == false)
{
mxEvent.consume(evt);
}
});
mxUtils.makeDraggable(img, graph, funct);
return img;
}
</script>
</head>
<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
<body onload="main();">
</body>
</html>

124
static/mxgraph/examples/edgetolerance.html Normal file
View File

@@ -0,0 +1,124 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Edge tolerance example for mxGraph. This example demonstrates increasing
the tolerance for hit detection on edges.
-->
<html>
<head>
<title>Edge tolerance 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
{
// Overrides the mouse event dispatching mechanism to update the
// cell which is associated with the event in case the native hit
// detection did not return anything.
var mxGraphFireMouseEvent = mxGraph.prototype.fireMouseEvent;
mxGraph.prototype.fireMouseEvent = function(evtName, me, sender)
{
// Checks if native hit detection did not return anything
if (me.getState() == null)
{
// Updates the graph coordinates in the event since we need
// them here. Storing them in the event means the overridden
// method doesn't have to do this again.
if (me.graphX == null || me.graphY == null)
{
var pt = mxUtils.convertPoint(this.container, me.getX(), me.getY());
me.graphX = pt.x;
me.graphY = pt.y;
}
var cell = this.getCellAt(me.graphX, me.graphY);
if (this.getModel().isEdge(cell))
{
me.state = this.view.getState(cell);
if (me.state != null && me.state.shape != null)
{
graph.container.style.cursor = me.state.shape.node.style.cursor;
}
}
}
if (me.state == null)
{
graph.container.style.cursor = 'default';
}
mxGraphFireMouseEvent.apply(this, arguments);
};
// Overrides double click handling to use the tolerance
var mxGraphDblClick = mxGraph.prototype.dblClick;
mxGraph.prototype.dblClick = function(evt, cell)
{
if (cell == null)
{
var pt = mxUtils.convertPoint(this.container,
mxEvent.getClientX(evt), mxEvent.getClientY(evt));
cell = this.getCellAt(pt.x, pt.y);
}
mxGraphDblClick.call(this, evt, cell);
};
// Creates the graph inside the given container
var graph = new mxGraph(container);
graph.setTolerance(20);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello,', 120, 120, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 400, 250, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2, 'edgeStyle=orthogonalEdgeStyle;');
var e2 = graph.insertEdge(parent, null, '', v2, v1, 'edgeStyle=orthogonalEdgeStyle;');
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;width:641px;height:481px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>

164
static/mxgraph/examples/editing.html Normal file
View File

@@ -0,0 +1,164 @@
<!--
Copyright (c) 2006-2013, JGraph Ltd
Editing example for mxGraph. This example demonstrates using the in-place
editor trigger to specify the editing value and write the new value into
a specific field of the user object. Wrapping and DOM nodes as labels are
also demonstrated here.
-->
<html>
<head>
<title>Editing 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
{
// Creates the graph inside the given container
var graph = new mxGraph(container);
graph.setHtmlLabels(true);
// Adds handling of return and escape keystrokes for editing
var keyHandler = new mxKeyHandler(graph);
// Helper method that returns the fieldname to be used for
// a mouse event
var getFieldnameForEvent = function(cell, evt)
{
if (evt != null)
{
// Finds the relative coordinates inside the cell
var point = mxUtils.convertPoint(graph.container,
mxEvent.getClientX(evt), mxEvent.getClientY(evt));
var state = graph.getView().getState(cell);
if (state != null)
{
point.x -= state.x;
point.y -= state.y;
// Returns second if mouse in second half of cell
if (point.y > state.height / 2)
{
return 'second';
}
}
}
return 'first';
};
// Returns a HTML representation of the cell where the
// upper half is the first value, lower half is second
// value
graph.getLabel = function(cell)
{
var table = document.createElement('table');
table.style.height = '100%';
table.style.width = '100%';
var body = document.createElement('tbody');
var tr1 = document.createElement('tr');
var td1 = document.createElement('td');
td1.style.textAlign = 'center';
td1.style.fontSize = '12px';
td1.style.color = '#774400';
mxUtils.write(td1, cell.value.first);
var tr2 = document.createElement('tr');
var td2 = document.createElement('td');
td2.style.textAlign = 'center';
td2.style.fontSize = '12px';
td2.style.color = '#774400';
mxUtils.write(td2, cell.value.second);
tr1.appendChild(td1);
tr2.appendChild(td2);
body.appendChild(tr1);
body.appendChild(tr2);
table.appendChild(body);
return table;
};
// Returns the editing value for the given cell and event
graph.getEditingValue = function(cell, evt)
{
evt.fieldname = getFieldnameForEvent(cell, evt);
return cell.value[evt.fieldname] || '';
};
// Sets the new value for the given cell and trigger
graph.labelChanged = function(cell, newValue, trigger)
{
var name = (trigger != null) ? trigger.fieldname : null;
if (name != null)
{
// Clones the user object for correct undo and puts
// the new value in the correct field.
var value = mxUtils.clone(cell.value);
value[name] = newValue;
newValue = value;
mxGraph.prototype.labelChanged.apply(this, arguments);
}
};
// Sample user objects with 2 fields
var value = new Object();
value.first = 'First value';
value.second = 'Second value';
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, value, 100, 60, 120, 80, 'overflow=fill;');
}
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'))">
<p>
Double-click the upper/lower half of the cell to edit different fields of the user object.
</p>
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;position:relative;width:321px;height:241px;background:url('editors/images/grid.gif')">
</div>
</body>
</html>

333
static/mxgraph/examples/editors/config/diagrameditor.xml Normal file
View File

@@ -0,0 +1,333 @@
<mxEditor defaultGroup="group" defaultEdge="connector">
<include name="config/editor-commons.xml"/>
<add as="onInit"><![CDATA[
function ()
{
onInit(this);
}
]]></add>
<ui>
<add as="graph" element="graph"/>
<add as="status" element="status"/>
<add as="toolbar" element="toolbar"/>
</ui>
<Array as="templates">
<add as="group">
<Group label="" href="">
<mxCell vertex="1" style="group" connectable="0"/>
</Group>
</add>
<add as="connector">
<Connector label="" href="">
<mxCell edge="1">
<mxGeometry as="geometry" relative="1"/>
</mxCell>
</Connector>
</add>
<add as="container">
<Container label="Container" href="">
<mxCell vertex="1" style="swimlane" connectable="0">
<mxGeometry as="geometry" width="200" height="200"/>
</mxCell>
</Container>
</add>
<add as="rectangle">
<Rect label="Rectangle" href="">
<mxCell vertex="1">
<mxGeometry as="geometry" width="80" height="40"/>
</mxCell>
</Rect>
</add>
<add as="text">
<Text label="Text Here" href="">
<mxCell vertex="1" style="text">
<mxGeometry as="geometry" width="80" height="20"/>
</mxCell>
</Text>
</add>
<add as="image">
<Image label="" href="">
<mxCell vertex="1" style="image">
<mxGeometry as="geometry" width="80" height="50"/>
</mxCell>
</Image>
</add>
<add as="rounded">
<Roundrect label="Rounded" href="">
<mxCell vertex="1" style="rounded">
<mxGeometry as="geometry" width="80" height="40"/>
</mxCell>
</Roundrect>
</add>
<add as="shape">
<Shape label="Shape" href="">
<mxCell vertex="1" style="ellipse">
<mxGeometry as="geometry" width="60" height="60"/>
</mxCell>
</Shape>
</add>
<add as="actor">
<Shape label="Shape" href="">
<mxCell vertex="1" style="actor">
<mxGeometry as="geometry" width="40" height="60"/>
</mxCell>
</Shape>
</add>
<add as="cloud">
<Shape label="Shape" href="">
<mxCell vertex="1" style="cloud">
<mxGeometry as="geometry" width="80" height="60"/>
</mxCell>
</Shape>
</add>
<add as="hline">
<Shape label="" href="">
<mxCell vertex="1" style="ellipse">
<mxGeometry as="geometry" width="60" height="10"/>
</mxCell>
</Shape>
</add>
</Array>
<mxGraph as="graph" alternateEdgeStyle="verticalConnector" allowLoops="1" dropEnabled="1">
<add as="isAutoSizeCell"><![CDATA[
function(cell)
{
return mxUtils.isNode(this.model.getValue(cell), 'text');
}
]]></add>
<add as="isSwimlane"><![CDATA[
function (cell)
{
return mxUtils.isNode(this.model.getValue(cell), 'container');
}
]]></add>
<add as="getTooltipForCell"><![CDATA[
function(cell)
{
var label = cell.getAttribute('label');
var style = cell.getStyle();
return ((label != null) ? ('<b>' + label +
'</b> (' + cell.getId() + ')<br>') : '') +
((style != null) ? ('<br>Style: ' + style + '<br>') : '') +
'Connections: ' + cell.getEdgeCount()+
'<br>Children: ' + cell.getChildCount();
}
]]></add>
<add as="convertValueToString"><![CDATA[
function(cell)
{
return cell.getAttribute('label');
}
]]></add>
<mxStylesheet as="stylesheet">
<add as="text">
<add as="shape" value="rectangle"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="12"/>
<add as="align" value="left"/>
<add as="verticalAlign" value="top"/>
<add as="shadow" value="0"/>
<add as="strokeColor" value="none"/>
<add as="fillColor" value="none"/>
<add as="gradientColor" value="none"/>
</add>
<add as="defaultVertex" extend="text">
<add as="shape" value="rectangle"/>
<add as="fontSize" value="11"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="middle"/>
<add as="shadow" value="1"/>
<add as="strokeColor" value="#C3D9FF"/>
<add as="fillColor" value="#C3D9FF"/>
<add as="gradientColor" value="white"/>
</add>
<add as="group">
<add as="shape" value="rectangle"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="middle"/>
<add as="strokeColor" value="gray"/>
<add as="dashed" value="1"/>
</add>
<add as="defaultEdge">
<add as="shape" value="connector"/>
<add as="fontSize" value="10"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="middle"/>
<add as="rounded" value="1"/>
<add as="labelBackgroundColor" value="white"/>
<add as="strokeColor" value="#36393D"/>
<add as="strokeWidth" value="1"/>
<add as="edgeStyle" value="elbowEdgeStyle"/>
<add as="endArrow" value="classic"/>
</add>
<add as="verticalConnector">
<add as="elbow" value="vertical"/>
</add>
<add as="straightConnector">
<add as="shape" value="connector"/>
<add as="endArrow" value="classic"/>
<add as="edgeStyle">null</add>
</add>
<add as="arrowConnector">
<add as="shape" value="arrow"/>
<add as="fillColor" value="#C3D9FF"/>
<add as="endSize" value="20"/>
<remove as="edgeStyle"/>
</add>
<add as="swimlane">
<add as="shape" value="swimlane"/>
<add as="shadow" value="0"/>
<add as="startSize" value="23"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="top"/>
<add as="strokeColor" value="#EEEEEE"/>
<add as="fillColor" value="#D4D4D4"/>
</add>
<add as="rounded">
<add as="rounded" value="1"/>
</add>
<add as="ellipse">
<add as="shape" value="ellipse"/>
<add as="perimeter" value="ellipsePerimeter"/>
<add as="strokeColor" value="#CDEB8B"/>
<add as="fillColor" value="#CDEB8B"/>
</add>
<add as="doubleEllipse" extend="ellipse">
<add as="shape" value="doubleEllipse"/>
</add>
<add as="rhombus">
<add as="shape" value="rhombus"/>
<add as="perimeter" value="rhombusPerimeter"/>
<add as="strokeColor" value="#FFCF8A"/>
<add as="fillColor" value="#FFCF8A"/>
</add>
<add as="triangle" extend="rhombus">
<add as="shape" value="triangle"/>
<add as="perimeter" value="trianglePerimeter"/>
<add as="align" value="left"/>
</add>
<add as="hexagon">
<add as="shape" value="hexagon"/>
</add>
<add as="actor">
<add as="shape" value="actor"/>
<add as="strokeColor" value="#FFC7C7"/>
<add as="fillColor" value="#FFC7C7"/>
</add>
<add as="cloud">
<add as="shape" value="cloud"/>
<add as="perimeter" value="ellipsePerimeter"/>
<add as="strokeColor" value="#CDEB8B"/>
<add as="fillColor" value="#CDEB8B"/>
</add>
<add as="cylinder">
<add as="shape" value="cylinder"/>
<add as="spacingTop" value="10"/>
<add as="strokeColor" value="#4096EE"/>
<add as="fillColor" value="#4096EE"/>
</add>
<add as="hline">
<add as="shape" value="line"/>
<add as="strokeWidth" value="3"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontColor" value="black"/>
<add as="fontSize" value="10"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="bottom"/>
<add as="strokeColor" value="#36393D"/>
</add>
<add as="image">
<add as="shape" value="image"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="middle"/>
<add as="image" value="images/draw/mxlogo.jpg"/>
</add>
</mxStylesheet>
<mxGraphModel as="model">
<add as="valueForCellChanged"><![CDATA[
function(cell, value)
{
var previous = null;
if (value == null || isNaN(value.nodeType))
{
previous = cell.value.getAttribute('label');
if (value == null)
{
cell.value.removeAttribute('label');
}
else
{
cell.setAttribute('label', value);
}
}
else
{
previous = cell.value;
cell.value = value;
}
return previous;
}
]]></add>
<root>
<Diagram label="My Diagram" href="http://www.jgraph.com/" id="0">
<mxCell/>
</Diagram>
<Layer label="Default Layer" id="1">
<mxCell parent="0"/>
</Layer>
</root>
</mxGraphModel>
</mxGraph>
<mxDefaultToolbar as="toolbar">
<add as="connect" mode="connect" icon="images/connect.gif"><![CDATA[
function (editor)
{
if (editor.defaultEdge != null)
{
editor.defaultEdge.style = null;
}
}
]]></add>
<add as="connect" mode="connect" icon="images/straight.gif"><![CDATA[
function (editor)
{
if (editor.defaultEdge != null)
{
editor.defaultEdge.style = 'straightConnector';
}
}
]]></add>
<add as="connect" mode="connect" icon="images/arrow.gif"><![CDATA[
function (editor)
{
if (editor.defaultEdge != null)
{
editor.defaultEdge.style = 'arrowConnector';
}
}
]]></add>
<br/><br/>
<add as="Text" template="text" icon="images/text.gif"/>
<add as="Container" template="container" icon="images/swimlane.gif"/>
<add as="Rectangle" template="rectangle" icon="images/rectangle.gif"/>
<add as="Rounded" template="rounded" icon="images/rounded.gif"/>
<add as="Ellipse" template="shape" style="ellipse" icon="images/ellipse.gif"/>
<add as="Double Ellipse" template="shape" style="doubleEllipse" icon="images/doubleellipse.gif"/>
<add as="Rhombus" template="shape" style="rhombus" icon="images/rhombus.gif"/>
<add as="Triangle" template="actor" style="triangle" icon="images/triangle.gif"/>
<add as="Hexagon" template="cloud" style="hexagon" icon="images/hexagon.gif"/>
<add as="Actor" template="actor" style="actor" icon="images/actor.gif"/>
<add as="Cylinder" template="shape" style="cylinder" icon="images/cylinder.gif"/>
<add as="Cloud" template="cloud" style="cloud" icon="images/cloud.gif"/>
<add as="Line" template="hline" style="hline" icon="images/hline.gif"/>
<add as="Image" template="image" icon="images/image.gif"/>
</mxDefaultToolbar>
</mxEditor>

267
static/mxgraph/examples/editors/config/editor-commons.xml Normal file
View File

@@ -0,0 +1,267 @@
<mxEditor>
<ui>
<resource basename="resources/app"/>
</ui>
<mxDefaultPopupMenu as="popupHandler">
<add as="cut" action="cut" icon="images/cut.gif"/>
<add as="copy" action="copy" icon="images/copy.gif"/>
<add as="paste" action="paste" icon="images/paste.gif"/>
<separator/>
<add as="delete" action="delete" icon="images/delete.gif" if="cell"/>
<separator/>
<add as="exitGroup" action="exitGroup" icon="images/up.gif" if="notRoot"/>
<add as="enterGroup" action="enterGroup" icon="images/down.gif" if="validRoot"/>
<separator/>
<add as="shape" if="cell">
<add as="group" action="group" icon="images/group.gif" if="ncells"/>
<add as="ungroup" action="ungroup" icon="images/ungroup.gif" if="cell"/>
<separator/>
<add as="removeFromParent" action="removeFromParent" if="cell"/>
<separator/>
<add as="collapse" action="collapse" icon="images/collapse.gif" if="expandable"/>
<add as="expand" action="expand" icon="images/expand.gif" if="collapsable"/>
<separator/>
<add as="toFront" action="toFront" icon="images/tofront.gif" if="cell"/>
<add as="toBack" action="toBack" icon="images/toback.gif" if="cell"/>
<separator/>
<add as="editStyle" action="editStyle" if="cell"/>
</add>
<add as="format" if="cell">
<add as="fillColor" action="fillColor" icon="images/fillcolor.gif" if="cell"/>
<add as="gradientColor" action="gradientColor" if="cell"/>
<add as="strokeColor" action="strokeColor" icon="images/linecolor.gif" if="cell"/>
<separator/>
<add as="toggleRounded" action="toggleRounded" if="cell"/>
<add as="toggleShadow" action="toggleShadow" if="cell"/>
</add>
<add as="font" if="cell">
<add as="fontColor" action="fontColor" icon="images/fontcolor.gif" if="cell"/>
<add as="fontFamily" action="fontFamily" if="cell"/>
<add as="fontSize" action="fontSize" if="cell"/>
<separator/>
<add as="bold" action="bold" icon="images/bold.gif" if="cell"/>
<add as="italic" action="italic" icon="images/italic.gif" if="cell"/>
</add>
<separator/>
<add as="properties" action="showProperties" icon="images/properties.gif"/>
<separator/>
<add as="openHref" action="openHref" icon="images/link.gif"/>
</mxDefaultPopupMenu>
<include name="config/keyhandler-commons.xml"/>
<Array as="actions">
<add as="open"><![CDATA[
function (editor)
{
editor.open(mxUtils.prompt('Enter filename', 'workflow.xml'));
}
]]></add>
<add as="openHref"><![CDATA[
function (editor, cell)
{
cell = cell || editor.graph.getSelectionCell();
if (cell == null)
{
cell = editor.graph.getCurrentRoot();
if (cell == null)
{
cell = editor.graph.getModel().getRoot();
}
}
if (cell != null)
{
var href = cell.getAttribute('href');
if (href != null && href.length > 0)
{
window.open(href);
}
else
{
mxUtils.alert('No URL defined. Showing properties...');
editor.execute('showProperties', cell);
}
}
}
]]></add>
<add as="editStyle"><![CDATA[
function (editor)
{
var cell = editor.graph.getSelectionCell();
if (cell != null)
{
var model = editor.graph.getModel();
var style = mxUtils.prompt(mxResources.get('enterStyle'), model.getStyle(cell) || '');
if (style != null)
{
model.setStyle(cell, style);
}
}
}
]]></add>
<add as="fillColor"><![CDATA[
function (editor)
{
var color = mxUtils.prompt(mxResources.get('enterColorname'), 'red');
if (color != null)
{
editor.graph.model.beginUpdate();
try
{
editor.graph.setCellStyles("strokeColor", color);
editor.graph.setCellStyles("fillColor", color);
}
finally
{
editor.graph.model.endUpdate();
}
}
}
]]></add>
<add as="gradientColor"><![CDATA[
function (editor)
{
var color = mxUtils.prompt(mxResources.get('enterColorname'), 'white');
if (color != null)
{
editor.graph.setCellStyles("gradientColor", color);
}
}
]]></add>
<add as="strokeColor"><![CDATA[
function (editor)
{
var color = mxUtils.prompt(mxResources.get('enterColorname'), 'red');
if (color != null)
{
editor.graph.setCellStyles("strokeColor", color);
}
}
]]></add>
<add as="fontColor"><![CDATA[
function (editor)
{
var color = mxUtils.prompt(mxResources.get('enterColorname'), 'red');
if (color != null)
{
editor.graph.setCellStyles("fontColor", color);
}
}
]]></add>
<add as="fontFamily"><![CDATA[
function (editor)
{
var family = mxUtils.prompt(mxResources.get('enterFontfamily'), 'Arial');
if (family != null && family.length > 0)
{
editor.graph.setCellStyles("fontFamily", family);
}
}
]]></add>
<add as="fontSize"><![CDATA[
function (editor)
{
var size = mxUtils.prompt(mxResources.get('enterFontsize'), '10');
if (size != null && size > 0 && size < 999)
{
editor.graph.setCellStyles("fontSize", size);
}
}
]]></add>
<add as="image"><![CDATA[
function (editor)
{
var image = mxUtils.prompt(mxResources.get('enterImageUrl'),
'examples/images/image.gif');
if (image != null)
{
editor.graph.setCellStyles("image", image);
}
}
]]></add>
<add as="opacity"><![CDATA[
function (editor)
{
var opacity = mxUtils.prompt(mxResources.get('enterOpacity'), '100');
if (opacity != null && opacity >= 0 && opacity <= 100)
{
editor.graph.setCellStyles("opacity", opacity);
}
}
]]></add>
<add as="straightConnector"><![CDATA[
function (editor)
{
editor.graph.setCellStyle("straightEdge");
}
]]></add>
<add as="elbowConnector"><![CDATA[
function (editor)
{
editor.graph.setCellStyle("");
}
]]></add>
<add as="arrowConnector"><![CDATA[
function (editor)
{
editor.graph.setCellStyle("arrowEdge");
}
]]></add>
<add as="toggleOrientation"><![CDATA[
function (editor, cell)
{
editor.graph.toggleCellStyles(mxConstants.STYLE_HORIZONTAL, true);
}
]]></add>
<add as="toggleRounded"><![CDATA[
function (editor)
{
editor.graph.toggleCellStyles(mxConstants.STYLE_ROUNDED);
}
]]></add>
<add as="toggleShadow"><![CDATA[
function (editor)
{
editor.graph.toggleCellStyles(mxConstants.STYLE_SHADOW);
}
]]></add>
<add as="horizontalTree"><![CDATA[
function (editor, cell)
{
cell = cell || editor.graph.getSelectionCell();
if (cell == null)
{
cell = editor.graph.getDefaultParent();
}
editor.treeLayout(cell, true);
}
]]></add>
<add as="verticalTree"><![CDATA[
function (editor, cell)
{
cell = cell || editor.graph.getSelectionCell();
if (cell == null)
{
cell = editor.graph.getDefaultParent();
}
editor.treeLayout(cell, false);
}
]]></add>
</Array>
</mxEditor>

27
static/mxgraph/examples/editors/config/keyhandler-commons.xml Normal file
View File

@@ -0,0 +1,27 @@
<mxEditor>
<mxDefaultKeyHandler as="keyHandler">
<add as="8" action="collapse"/>
<add as="13" action="expand"/>
<add as="33" action="exitGroup"/>
<add as="34" action="enterGroup"/>
<add as="35" action="refresh"/>
<add as="36" action="home"/>
<add as="37" action="selectPrevious"/>
<add as="38" action="selectParent"/>
<add as="40" action="selectChild"/>
<add as="39" action="selectNext"/>
<add as="46" action="delete"/>
<add as="65" control="1" action="selectAll"/>
<add as="90" control="1" action="undo"/>
<add as="89" control="1" action="redo"/>
<add as="88" control="1" action="cut"/>
<add as="67" control="1" action="copy"/>
<add as="86" control="1" action="paste"/>
<add as="71" control="1" action="group"/>
<add as="85" control="1" action="ungroup"/>
<add as="113" action="edit"/>
<add as="123" action="showProperties"/>
<add as="107" action="zoomIn"/>
<add as="109" action="zoomOut"/>
</mxDefaultKeyHandler>
</mxEditor>

16
static/mxgraph/examples/editors/config/keyhandler-minimal.xml Normal file
View File

@@ -0,0 +1,16 @@
<mxEditor>
<mxDefaultKeyHandler as="keyHandler">
<add as="35" action="refresh"/>
<add as="37" action="selectPrevious"/>
<add as="38" action="selectParent"/>
<add as="40" action="selectChild"/>
<add as="39" action="selectNext"/>
<add as="46" action="delete"/>
<add as="65" control="1" action="selectAll"/>
<add as="90" control="1" action="undo"/>
<add as="89" control="1" action="redo"/>
<add as="113" action="edit"/>
<add as="107" action="zoomIn"/>
<add as="109" action="zoomOut"/>
</mxDefaultKeyHandler>
</mxEditor>

36
static/mxgraph/examples/editors/config/layouteditor.xml Normal file
View File

@@ -0,0 +1,36 @@
<mxEditor layoutDiagram="1" layoutSwimlanes="1" maintainSwimlanes="1">
<include name="config/wfeditor-commons.xml"/>
<ui>
<add as="graph" element="graph"
style="left:70px;right:20px;top:20px;bottom:40px"/>
<add as="status" element="status"
style="height:20px;bottom:20px;left:20px;right:20px"/>
<add as="toolbar" x="10" y="20" width="54"/>
</ui>
<Array as="templates">
<add as="swimlane">
<Swimlane label="Swimlane" customAttribute="text value">
<mxCell vertex="1" style="swimlane;horizontal=1" connectable="0">
<mxGeometry as="geometry" width="190" height="400"/>
</mxCell>
</Swimlane>
</add>
</Array>
<mxGraph as="graph" swimlaneNesting="0">
<include name="config/wfgraph-commons.xml"/>
<mxStylesheet as="stylesheet">
<add as="defaultEdge">
<add as="shape" value="connector"/>
<add as="elbow" value="vertical"/>
<add as="fontSize" value="10"/>
<add as="strokeColor" value="black"/>
<add as="rounded" value="1"/>
<add as="edgeStyle" value="elbowEdgeStyle"/>
<add as="endArrow" value="classic"/>
</add>
</mxStylesheet>
</mxGraph>
<mxDefaultToolbar as="toolbar">
<include name="config/wftoolbar-commons.xml"/>
</mxDefaultToolbar>
</mxEditor>

333
static/mxgraph/examples/editors/config/processeditor.xml Normal file
View File

@@ -0,0 +1,333 @@
<mxEditor defaultGroup="group" defaultEdge="edge"
layoutDiagram="1" maintainSwimlanes="1"
swimlaneRequired="1" forcedInserting="1"
helpWindowImage="images/help.gif"
tasksWindowImage="images/tasks.gif">
<include name="config/editor-commons.xml"/>
<add as="onInit"><![CDATA[
function ()
{
// Disables removing cells from parents
this.graph.graphHandler.setRemoveCellsFromParent(false);
this.showTasks();
this.showHelp();
}
]]></add>
<ui>
<stylesheet name="css/process.css"/>
<add as="graph" element="graph"/>
<add as="status" element="status"/>
<add as="toolbar" element="toolbar"/>
</ui>
<Array as="cycleAttributeValues">
<add value="#83027F"/>
<add value="#66B922"/>
<add value="#808913"/>
<add value="#CF0056"/>
<add value="#4679B6"/>
</Array>
<Array as="templates">
<add as="group">
<Group label="" description="">
<mxCell vertex="1" style="group" connectable="0"/>
</Group>
</add>
<add as="edge">
<Edge label="" description="">
<mxCell edge="1">
<mxGeometry as="geometry" isRelative="1"/>
</mxCell>
</Edge>
</add>
<add as="swimlane">
<Swimlane label="Role" customAttribute="text value">
<mxCell vertex="1" style="swimlane" connectable="0">
<mxGeometry as="geometry" width="220" height="480"/>
</mxCell>
</Swimlane>
</add>
<add as="task">
<Task label="Task">
<mxCell vertex="1">
<mxGeometry as="geometry" width="80" height="30"/>
</mxCell>
</Task>
</add>
<add as="subprocess">
<Subprocess label="Subprocess">
<mxCell vertex="1" style="rounded">
<mxGeometry as="geometry" width="80" height="30"/>
</mxCell>
</Subprocess>
</add>
<add as="shape">
<Shape label="Element">
<mxCell vertex="1" style="ellipse">
<mxGeometry as="geometry" width="60" height="50"/>
</mxCell>
</Shape>
</add>
<add as="hline">
<Shape label="">
<mxCell vertex="1" style="ellipse">
<mxGeometry as="geometry" width="60" height="10"/>
</mxCell>
</Shape>
</add>
</Array>
<add as="createTasks"><![CDATA[
function (div)
{
var off = 30;
if (this.graph != null)
{
var layer = this.graph.getModel().getRoot().getChildAt(0);
if (layer == null || layer.getChildCount() == 0)
{
mxUtils.para(div, 'Examples:');
mxUtils.linkInvoke(div, 'Withdrawal', this, 'open',
'diagrams/withdrawal.xml', off);
mxUtils.br(div);
}
else
{
mxUtils.para(div, 'Clipboard:');
if (!this.graph.isSelectionEmpty())
{
mxUtils.linkAction(div, 'Copy to Clipboard', this, 'copy', off);
mxUtils.br(div);
}
mxUtils.linkAction(div, 'Paste from Clipboard', this, 'paste', off);
mxUtils.br(div);
if (!this.graph.isSelectionEmpty())
{
mxUtils.linkAction(div, 'Delete Selected Cells', this, 'delete', off);
mxUtils.br(div);
mxUtils.linkAction(div, 'Clear Selection', this, 'selectNone', off);
mxUtils.br(div);
}
else
{
mxUtils.linkAction(div, 'Select All Cells', this, 'selectAll', off);
mxUtils.br(div);
}
mxUtils.para(div, 'History:');
mxUtils.linkAction(div, 'Undo Last Change', this, 'undo', off);
mxUtils.br(div);
mxUtils.linkAction(div, 'Redo Last Change', this, 'redo', off);
mxUtils.br(div);
}
mxUtils.br(div);
}
}
]]></add>
<mxGraph as="graph" alternateEdgeStyle="verticalEdge"
swimlaneNesting="0" dropEnabled="1">
<add as="isAutoSizeCell"><![CDATA[
function(cell)
{
return this.isSwimlane(cell);
}
]]></add>
<add as="isValidRoot"><![CDATA[
function(cell)
{
return !this.isSwimlane(cell);
}
]]></add>
<add as="isCellFoldable"><![CDATA[
function(cell, collapse)
{
return !this.isSwimlane(cell) &&
cell.getChildCount() > 0;
}
]]></add>
<add as="isSwimlane">
function (cell)
{
return mxUtils.isNode(this.model.getValue(cell), 'swimlane');
}
</add>
<add as="isAllowOverlapParent">
function(cell)
{
return !this.isSwimlane(cell.parent);
}
</add>
<add as="getTooltipForCell"><![CDATA[
function(cell)
{
return '<b>'+cell.getAttribute('label')+
'</b> ('+cell.getId()+')'+
'<br>Style: '+cell.getStyle()+
'<br>Edges: '+cell.getEdgeCount()+
'<br>Children: '+cell.getChildCount();
}
]]></add>
<add as="convertValueToString"><![CDATA[
function(cell)
{
return cell.getAttribute('label');
}
]]></add>
<mxStylesheet as="stylesheet">
<add as="defaultVertex">
<add as="shape" value="rectangle"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontColor" value="black"/>
<add as="fontSize" value="10"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="middle"/>
<add as="fillColor" value="indicated"/>
<add as="indicatorColor" value="swimlane"/>
<add as="gradientColor" value="white"/>
</add>
<add as="group">
<add as="shape" value="rectangle"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="middle"/>
<add as="strokeColor" value="gray"/>
<add as="dashed" value="1"/>
</add>
<add as="defaultEdge">
<add as="shape" value="connector"/>
<add as="fontSize" value="10"/>
<add as="rounded" value="1"/>
<add as="strokeColor" value="gray"/>
<add as="edgeStyle" value="elbowEdgeStyle"/>
<add as="endArrow" value="classic"/>
</add>
<add as="verticalEdge">
<add as="elbow" value="vertical"/>
</add>
<add as="swimlane">
<add as="shape" value="swimlane"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="12"/>
<add as="startSize" value="36"/>
<add as="rounded" value="1"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="top"/>
<add as="spacingTop" value="8"/>
<add as="fontColor" value="white"/>
<add as="separatorColor" value="#c0c0c0"/>
</add>
<add as="rounded">
<add as="rounded" value="1"/>
</add>
<add as="ellipse">
<add as="shape" value="label"/>
<add as="indicatorShape" value="ellipse"/>
<add as="indicatorWidth" value="34"/>
<add as="indicatorHeight" value="34"/>
<add as="imageVerticalAlign" value="top"/>
<add as="imageAlign" value="center"/>
<add as="spacingTop" value="40"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="top"/>
<add as="indicatorColor" value="swimlane"/>
<add as="indicatorGradientColor" value="white"/>
<add as="fillColor" value="none"/>
<add as="gradientColor" value="none"/>
</add>
<add as="rhombus" extend="ellipse">
<add as="indicatorShape" value="rhombus"/>
</add>
<add as="actor" extend="ellipse">
<add as="indicatorShape" value="actor"/>
<add as="indicatorWidth" value="26"/>
</add>
<add as="cylinder" extend="actor">
<add as="indicatorShape" value="cylinder"/>
<add as="imageVerticalAlign" value="bottom"/>
<add as="indicatorHeight" value="30"/>
<add as="verticalAlign" value="top"/>
<add as="spacingTop" value="0"/>
</add>
<add as="hline">
<add as="shape" value="line"/>
<add as="strokeWidth" value="3"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontColor" value="black"/>
<add as="fontSize" value="10"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="bottom"/>
<add as="strokeColor" value="indicated"/>
</add>
</mxStylesheet>
<mxGraphModel as="model">
<add as="valueForCellChanged"><![CDATA[
function(cell, value)
{
var previous = null;
if (isNaN(value.nodeType))
{
previous = cell.getAttribute('label');
cell.setAttribute('label', value);
}
else
{
previous = cell.value;
cell.value = value;
}
return previous;
}
]]></add>
<root>
<Workflow label="MyWorkflow" id="0"/>
<Layer label="Default Layer">
<mxCell parent="0"/>
</Layer>
</root>
</mxGraphModel>
</mxGraph>
<mxDefaultToolbar as="toolbar">
<add as="Save" action="save" icon="images/save.gif"/>
<separator/>
<add as="Undo" action="undo" icon="images/undo.gif"/>
<add as="Redo" action="redo" icon="images/redo.gif"/>
<add as="Cut" action="cut" icon="images/cut.gif"/>
<add as="Copy" action="copy" icon="images/copy.gif"/>
<add as="Paste" action="paste" icon="images/paste.gif"/>
<add as="Delete" action="delete" icon="images/delete.gif"/>
<add as="Group" action="group" icon="images/group.gif"/>
<add as="Ungroup" action="ungroup" icon="images/ungroup.gif"/>
<separator/>
<add as="Select" mode="select" icon="images/select.gif"/>
<add as="Pan" mode="pan" icon="images/pan.gif"/>
<add as="Connect" mode="connect" icon="images/connect.gif"/>
<separator/>
<add as="Swimlane" template="swimlane" icon="images/swimlane.gif"/>
<add as="Task" template="task" icon="images/rectangle.gif"/>
<add as="Subprocess" template="subprocess" icon="images/rounded.gif"/>
<add as="Ellipse" template="shape" style="ellipse" icon="images/ellipse.gif"/>
<add as="Rhombus" template="shape" style="rhombus" icon="images/rhombus.gif"/>
<add as="Actor" template="shape" style="actor" icon="images/actor.gif"/>
<add as="Cylinder" template="shape" style="cylinder" icon="images/cylinder.gif"/>
<add as="Line" template="hline" style="hline" icon="images/hline.gif"/>
<separator/>
<add as="Fit" action="fit" icon="images/zoom.gif"/>
<add as="Zoom In" action="zoomIn" icon="images/zoomin.gif"/>
<add as="Zoom Out" action="zoomOut" icon="images/zoomout.gif"/>
<add as="Actual Size" action="actualSize" icon="images/zoomactual.gif"/>
<add as="Zoom" action="zoom" icon="images/zoom.gif"/>
<separator/>
<add as="outline" action="toggleOutline" icon="images/outline.gif"/>
<add as="Tasks" action="toggleTasks" icon="images/tasks.gif"/>
<add as="Help" action="toggleHelp" icon="images/help.gif"/>
<add as="Console" action="toggleConsole" icon="images/console.gif"/>
</mxDefaultToolbar>
</mxEditor>

184
static/mxgraph/examples/editors/config/wfeditor-commons.xml Normal file
View File

@@ -0,0 +1,184 @@
<mxEditor defaultGroup="group" defaultEdge="edge"
helpWindowImage="images/help.gif"
tasksWindowImage="images/tasks.gif"
forcedInserting="0"
swimlaneRequired="0">
<include name="config/editor-commons.xml"/>
<add as="onInit">
function ()
{
this.showTasks();
}
</add>
<Array as="cycleAttributeValues">
<add value="#83027F"/>
<add value="#66B922"/>
<add value="#808913"/>
<add value="#CF0056"/>
<add value="#4679B6"/>
</Array>
<Array as="templates">
<add as="group">
<Group label="" description="" href="">
<mxCell vertex="1" style="group" connectable="0"/>
</Group>
</add>
<add as="edge">
<Edge label="" description="">
<mxCell edge="1">
<mxGeometry as="geometry" relative="1"/>
</mxCell>
</Edge>
</add>
<add as="swimlane">
<Swimlane label="Swimlane" description="" href="">
<mxCell vertex="1" style="swimlane" connectable="0">
<mxGeometry as="geometry" width="300" height="160"/>
</mxCell>
</Swimlane>
</add>
<add as="task">
<Task label="Task" description="" href="">
<mxCell vertex="1">
<mxGeometry as="geometry" width="72" height="32"/>
</mxCell>
</Task>
</add>
<add as="subprocess">
<Subprocess label="Subprocess" description="" href="">
<mxCell vertex="1" style="rounded">
<mxGeometry as="geometry" width="72" height="32"/>
</mxCell>
</Subprocess>
</add>
<add as="shape">
<Shape label="" description="" href="">
<mxCell vertex="1" style="ellipse">
<mxGeometry as="geometry" width="32" height="32"/>
</mxCell>
</Shape>
</add>
<add as="symbol">
<Symbol label="Symbol" description="" href="">
<mxCell vertex="1" style="symbol;image=images/symbols/event.png">
<mxGeometry as="geometry" width="32" height="32"/>
</mxCell>
</Symbol>
</add>
</Array>
<add as="createTasks"><![CDATA[
function (div)
{
var off = 30;
if (this.graph != null)
{
var layer = this.graph.model.root.getChildAt(0);
mxUtils.para(div, mxResources.get('examples'));
mxUtils.linkInvoke(div, mxResources.get('newDiagram'), this,
'open', 'diagrams/empty.xml', off);
mxUtils.br(div);
mxUtils.linkInvoke(div, mxResources.get('swimlanes'), this,
'open', 'diagrams/swimlanes.xml', off);
mxUtils.br(div);
mxUtils.linkInvoke(div, mxResources.get('travelBooking'), this,
'open', 'diagrams/travel-booking.xml', off);
mxUtils.br(div);
if (!this.graph.isSelectionEmpty())
{
var cell = this.graph.getSelectionCell();
if (this.graph.getSelectionCount() == 1 &&
(this.graph.model.isVertex(cell) &&
cell.getEdgeCount() > 0) || this.graph.isSwimlane(cell))
{
mxUtils.para(div, 'Layout');
mxUtils.linkAction(div, mxResources.get('verticalTree'),
this, 'verticalTree', off);
mxUtils.br(div);
mxUtils.linkAction(div, mxResources.get('horizontalTree'),
this, 'horizontalTree', off);
mxUtils.br(div);
}
mxUtils.para(div, 'Format');
if (mxUtils.isNode(cell.value, 'Symbol'))
{
mxUtils.linkAction(div, mxResources.get('image'),
this, 'image', off);
mxUtils.br(div);
}
else
{
mxUtils.linkAction(div, mxResources.get('opacity'),
this, 'opacity', off);
mxUtils.br(div);
if (this.graph.model.isVertex(cell) ||
(cell.style != null &&
cell.style.indexOf("arrowEdge") >= 0))
{
mxUtils.linkAction(div, mxResources.get('gradientColor'),
this, 'gradientColor', off);
mxUtils.br(div);
}
if (this.graph.model.isEdge(cell))
{
mxUtils.linkAction(div, 'Straight Connector', this, 'straightConnector', off);
mxUtils.br(div);
mxUtils.linkAction(div, 'Elbow Connector', this, 'elbowConnector', off);
mxUtils.br(div);
mxUtils.linkAction(div, 'Arrow Connector', this, 'arrowConnector', off);
mxUtils.br(div);
}
}
mxUtils.linkAction(div, 'Rounded', this, 'toggleRounded', off);
mxUtils.br(div);
if (this.graph.isSwimlane(cell) || this.graph.model.isEdge(cell))
{
mxUtils.linkAction(div, 'Orientation', this, 'toggleOrientation', off);
mxUtils.br(div);
}
if (this.graph.getSelectionCount() > 1)
{
mxUtils.para(div, mxResources.get('align'));
mxUtils.linkAction(div, mxResources.get('left'),
this, 'alignCellsLeft', off);
mxUtils.br(div);
mxUtils.linkAction(div, mxResources.get('center'),
this, 'alignCellsCenter', off);
mxUtils.br(div);
mxUtils.linkAction(div, mxResources.get('right'),
this, 'alignCellsRight', off);
mxUtils.br(div);
mxUtils.linkAction(div, mxResources.get('top'),
this, 'alignCellsTop', off);
mxUtils.br(div);
mxUtils.linkAction(div, mxResources.get('middle'),
this, 'alignCellsMiddle', off);
mxUtils.br(div);
mxUtils.linkAction(div, mxResources.get('bottom'),
this, 'alignCellsBottom', off);
mxUtils.br(div);
}
mxUtils.para(div, mxResources.get('selection'));
mxUtils.linkAction(div, mxResources.get('clearSelection'),
this, 'selectNone', off);
mxUtils.br(div);
}
else if (layer.getChildCount() > 0)
{
mxUtils.para(div, mxResources.get('selection'));
mxUtils.linkAction(div, mxResources.get('selectAll'),
this, 'selectAll', off);
mxUtils.br(div);
}
mxUtils.br(div);
}
}
]]></add>
</mxEditor>

152
static/mxgraph/examples/editors/config/wfgraph-commons.xml Normal file
View File

@@ -0,0 +1,152 @@
<mxGraph alternateEdgeStyle="verticalEdge" dropEnabled="1">
<add as="isAutoSizeCell"><![CDATA[
function(cell)
{
return this.isSwimlane(cell);
}
]]></add>
<add as="isSwimlane"><![CDATA[
function (cell)
{
return mxUtils.isNode(this.model.getValue(cell), 'swimlane');
}
]]></add>
<add as="isAllowOverlapParent"><![CDATA[
function(cell)
{
return !this.isSwimlane(cell.parent);
}
]]></add>
<add as="getTooltipForCell"><![CDATA[
function(cell)
{
var href = cell.getAttribute('href');
href = (href != null && href.length > 0) ?
'<br>'+href : '';
var maxlen = 30;
var desc = cell.getAttribute('description');
if (desc == null || desc.length == 0)
{
desc = '';
}
else if (desc.length < maxlen)
{
desc = '<br>'+desc;
}
else
{
desc = '<br>'+desc.substring(0, maxlen)+'...';
}
return '<b>'+cell.getAttribute('label')+
'</b> ('+cell.getId()+')'+href+desc+
'<br>Edges: '+cell.getEdgeCount()+
'<br>Children: '+cell.getChildCount();
}
]]></add>
<add as="convertValueToString">
function(cell)
{
return cell.getAttribute('label');
}
</add>
<mxGraphModel as="model">
<add as="valueForCellChanged"><![CDATA[
function(cell, value)
{
var previous = null;
if (isNaN(value.nodeType))
{
previous = cell.getAttribute('label');
cell.setAttribute('label', value);
}
else
{
previous = cell.value;
cell.value = value;
}
return previous;
}
]]></add>
<root>
<Workflow label="MyWorkflow" description="" href="" id="0"/>
<Layer label="Default Layer">
<mxCell parent="0"/>
</Layer>
</root>
</mxGraphModel>
<mxStylesheet as="stylesheet">
<add as="defaultVertex">
<add as="shape" value="label"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="labelBackgroundColor" value="white"/>
<add as="fontSize" value="10"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="middle"/>
<add as="strokeColor" value="black"/>
</add>
<add as="defaultEdge">
<add as="shape" value="connector"/>
<add as="labelBackgroundColor" value="white"/>
<add as="rounded" value="1"/>
<add as="edgeStyle" value="elbowEdgeStyle"/>
<add as="endArrow" value="classic"/>
<add as="fontSize" value="10"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="middle"/>
<add as="strokeColor" value="black"/>
</add>
<add as="verticalEdge">
<add as="elbow" value="vertical"/>
</add>
<add as="straightEdge">
<add as="shape" value="connector"/>
<add as="endArrow" value="classic"/>
</add>
<add as="arrowEdge">
<add as="shape" value="arrow"/>
<add as="fillColor" value="red"/>
</add>
<add as="swimlane">
<add as="shape" value="swimlane"/>
<add as="fontSize" value="12"/>
<add as="startSize" value="23"/>
<add as="horizontal" value="0"/>
<add as="verticalAlign" value="top"/>
<add as="fontColor" value="white"/>
<add as="labelBackgroundColor" value="none"/>
</add>
<add as="group">
<add as="shape" value="rectangle"/>
<add as="rounded" value="1"/>
<add as="verticalAlign" value="top"/>
<add as="strokeColor" value="black"/>
<add as="dashed" value="1"/>
<add as="opacity" value="50"/>
</add>
<add as="rounded">
<add as="rounded" value="1"/>
</add>
<add as="ellipse">
<add as="shape" value="ellipse"/>
<add as="perimeter" value="ellipsePerimeter"/>
</add>
<add as="rhombus">
<add as="shape" value="rhombus"/>
<add as="perimeter" value="rhombusPerimeter"/>
</add>
<add as="actor">
<add as="shape" value="actor"/>
</add>
<add as="symbol">
<add as="shape" value="image"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="labelBackgroundColor" value="white"/>
<add as="fontSize" value="10"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="top"/>
<add as="verticalLabelPosition" value="bottom"/>
</add>
</mxStylesheet>
</mxGraph>

74
static/mxgraph/examples/editors/config/wftoolbar-commons.xml Normal file
View File

@@ -0,0 +1,74 @@
<mxDefaultToolbar>
<add as="save" action="save" icon="images/save.gif"/>
<add as="show" action="show" icon="images/preview.gif"/>
<add as="print" action="print" icon="images/print.gif"/>
<add as="exportImage" action="exportImage" icon="images/image.gif"/>
<br/><hr/>
<add as="select" mode="select" icon="images/select.gif"/>
<add as="pan" mode="pan" icon="images/pan.gif"/>
<add as="connect" mode="connect" icon="images/connect.gif"><![CDATA[
function (editor)
{
if (editor.defaultEdge != null)
{
editor.defaultEdge.style = null;
}
}
]]></add>
<add as="connect" mode="connect" icon="images/straight.gif"><![CDATA[
function (editor)
{
if (editor.defaultEdge != null)
{
editor.defaultEdge.style = 'straightEdge';
}
}
]]></add>
<br/><hr/>
<add as="undo" action="undo" icon="images/undo.gif"/>
<add as="redo" action="redo" icon="images/redo.gif"/>
<br/><hr/>
<add as="cut" action="cut" icon="images/cut.gif"/>
<add as="copy" action="copy" icon="images/copy.gif"/>
<add as="paste" action="paste" icon="images/paste.gif"/>
<add as="delete" action="delete" icon="images/delete.gif"/>
<br/><hr/>
<add as="group" action="group" icon="images/group.gif"/>
<add as="ungroup" action="ungroup" icon="images/ungroup.gif"/>
<br/><hr/>
<add as="Swimlane" template="swimlane" icon="images/swimlane.gif"/>
<add as="Task" template="task" icon="images/rectangle.gif"/>
<add as="Subprocess" template="subprocess" icon="images/rounded.gif"/>
<add as="Ellipse" template="shape" style="ellipse" icon="images/ellipse.gif"/>
<add as="Rhombus" template="shape" style="rhombus" icon="images/rhombus.gif"/>
<add as="Actor" template="shape" style="actor" icon="images/actor.gif"/>
<br/><hr/>
<add as="Event" template="symbol" style="symbol;image=images/symbols/event.png" icon="images/symbols/small_event.gif"/>
<add as="Event (Intermediate)" template="symbol" style="symbol;image=images/symbols/event_intermediate.png" icon="images/symbols/small_event_intermediate.gif"/>
<add as="Event (End)" template="symbol" style="symbol;image=images/symbols/event_end.png" icon="images/symbols/small_event_end.gif"/>
<add as="Timer" template="symbol" style="symbol;image=images/symbols/timer.png" icon="images/symbols/small_timer.gif"/>
<add as="Message" template="symbol" style="symbol;image=images/symbols/message.png" icon="images/symbols/small_message.gif"/>
<add as="Message (Intermediate)" template="symbol" style="symbol;image=images/symbols/message_intermediate.png" icon="images/symbols/small_message_intermediate.gif"/>
<add as="Message (End)" template="symbol" style="symbol;image=images/symbols/message_end.png" icon="images/symbols/small_message_end.gif"/>
<add as="Terminate" template="symbol" style="symbol;image=images/symbols/terminate.png" icon="images/symbols/small_terminate.gif"/>
<add as="Link" template="symbol" style="symbol;image=images/symbols/link.png" icon="images/symbols/small_link.gif"/>
<add as="Rule" template="symbol" style="symbol;image=images/symbols/rule.png" icon="images/symbols/small_rule.gif"/>
<add as="Multiple" template="symbol" style="symbol;image=images/symbols/multiple.png" icon="images/symbols/small_multiple.gif"/>
<add as="Error" template="symbol" style="symbol;image=images/symbols/error.png" icon="images/symbols/small_error.gif"/>
<add as="Cancel (End)" template="symbol" style="symbol;image=images/symbols/cancel_end.png" icon="images/symbols/small_cancel_end.gif"/>
<add as="Cancel (Intermediate)" template="symbol" style="symbol;image=images/symbols/cancel_intermediate.png" icon="images/symbols/small_cancel_intermediate.gif"/>
<add as="Fork" template="symbol" style="symbol;image=images/symbols/fork.png" icon="images/symbols/small_fork.gif"/>
<add as="Merge" template="symbol" style="symbol;image=images/symbols/merge.png" icon="images/symbols/small_merge.gif"/>
<add as="Inclusive" template="symbol" style="symbol;image=images/symbols/inclusive.png" icon="images/symbols/small_inclusive.gif"/>
<br/><hr/>
<add as="fit" action="fit" icon="images/zoom.gif"/>
<add as="zoomIn" action="zoomIn" icon="images/zoomin.gif"/>
<add as="zoomOut" action="zoomOut" icon="images/zoomout.gif"/>
<add as="actualSize" action="actualSize" icon="images/zoomactual.gif"/>
<add as="zoom" action="zoom" icon="images/zoom.gif"/>
<br/><hr/>
<add as="outline" action="toggleOutline" icon="images/outline.gif"/>
<add as="tasks" action="toggleTasks" icon="images/tasks.gif"/>
<add as="help" action="toggleHelp" icon="images/help.gif"/>
<add as="console" action="toggleConsole" icon="images/console.gif"/>
</mxDefaultToolbar>

16
static/mxgraph/examples/editors/config/workfloweditor.xml Normal file
View File

@@ -0,0 +1,16 @@
<mxEditor>
<include name="config/wfeditor-commons.xml"/>
<ui>
<add as="graph" element="graph"
style="left:70px;right:20px;top:20px;bottom:40px"/>
<add as="status" element="status"
style="height:20px;bottom:20px;left:20px;right:20px"/>
<add as="toolbar" x="16" y="20" width="50" style="padding:5px;padding-top:8px;padding-right:0px;"/>
</ui>
<mxGraph as="graph">
<include name="config/wfgraph-commons.xml"/>
</mxGraph>
<mxDefaultToolbar as="toolbar">
<include name="config/wftoolbar-commons.xml"/>
</mxDefaultToolbar>
</mxEditor>

3
static/mxgraph/examples/editors/css/process.css Normal file
View File

@@ -0,0 +1,3 @@
img.mxToolbarMode {
margin-right: 7px;
}

599
static/mxgraph/examples/editors/css/wordpress.css Normal file
View File

@@ -0,0 +1,599 @@
/* Begin Typography & Colors */
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: #d5d6d7 url('../images/draw/drawbgcolor.jpg');
color: #333;
text-align: center;
}
#page {
background-color: white;
border: 1px solid #959596;
text-align: left;
}
#header {
background: #73a0c5 url('../images/draw/drawheader.jpg') no-repeat bottom center;
}
#headerimg {
margin: 7px 9px 0;
height: 62px;
width: 740px;
}
#content {
font-size: 1.2em
}
.widecolumn .entry p {
font-size: 1.05em;
}
.narrowcolumn .entry, .widecolumn .entry {
line-height: 1.4em;
}
.widecolumn {
line-height: 1.6em;
}
.narrowcolumn .postmetadata {
text-align: center;
}
.alt {
background-color: #f8f8f8;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
pre {
background: #f8f8f8;
font-size: 12px;
padding: 8px;
}
#footer {
background: #eee url('../images/draw/drawfooter.jpg') no-repeat top;
border: none;
}
small {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.9em;
line-height: 1.5em;
}
h1, h2, h3 {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-weight: bold;
}
h1 {
font-size: 2em;
text-align: center;
}
#headerimg .description {
font-size: 1.2em;
text-align: center;
}
h2 {
font-size: 1.6em;
}
h2.pagetitle {
font-size: 1.6em;
}
#sidebar h2 {
font-family: 'Lucida Grande', Verdana, Sans-Serif;
font-size: 1.2em;
}
h3 {
font-size: 1.3em;
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
text-decoration: none;
color: white;
}
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
color: #333;
}
h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
text-decoration: none;
}
.entry p a:visited {
color: #b85b5a;
}
.commentlist li, #commentform input, #commentform textarea {
font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.commentlist li {
font-weight: bold;
}
.commentlist cite, .commentlist cite a {
font-weight: bold;
font-style: normal;
font-size: 1.1em;
}
.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
}
#commentform p {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.commentmetadata {
font-weight: normal;
}
#sidebar {
font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
color: #777;
}
code {
font: 1.1em 'Courier New', Courier, Fixed;
}
acronym, abbr, span.caps
{
font-size: 0.9em;
letter-spacing: .07em;
}
a, h2 a:hover, h3 a:hover {
color: #06c;
text-decoration: none;
}
a:hover {
color: #147;
text-decoration: underline;
}
#wp-calendar #prev a {
font-size: 9pt;
}
#wp-calendar a {
text-decoration: none;
}
#wp-calendar caption {
font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
text-align: center;
}
#wp-calendar th {
font-style: normal;
text-transform: capitalize;
}
/* End Typography & Colors */
/* Begin Structure */
body {
margin: 0 0 20px 0;
padding: 0;
}
#page {
background-color: white;
margin: 20px auto;
padding: 0;
width: 760px;
border: 1px solid #959596;
}
#header {
background-color: #73a0c5;
margin: 0 0 0 1px;
padding: 0;
height: 70px;
width: 758px;
}
#headerimg {
margin: 0;
height: 70px;
width: 100%;
}
.narrowcolumn {
float: left;
padding: 0 0 20px 45px;
margin: 0px 0 0;
width: 450px;
}
.widecolumn {
padding: 10px 0 20px 0;
margin: 5px 0 0 150px;
width: 450px;
}
.post {
margin: 0 0 40px;
/* text-align: justify; */
}
.widecolumn .post {
margin: 0;
}
.narrowcolumn .postmetadata {
padding-top: 5px;
}
.widecolumn .postmetadata {
margin: 30px 0;
}
.widecolumn .smallattachment {
text-align: center;
float: left;
width: 128px;
margin: 5px 5px 5px 0px;
}
.widecolumn .attachment {
text-align: center;
margin: 5px 0px;
}
.postmetadata {
clear: left;
}
#footer {
padding: 0;
margin: 0 auto;
width: 760px;
clear: both;
}
#footer p {
margin: 0;
padding: 20px 0;
text-align: center;
}
/* End Structure */
/* Begin Headers */
h1 {
padding-top: 30px;
margin: 0;
}
h2 {
margin: 30px 0 0;
}
h2.pagetitle {
margin-top: 30px;
text-align: center;
}
#sidebar h2 {
margin: 5px 0 0;
padding: 0;
}
h3 {
padding: 0;
margin: 30px 0 0;
}
h3.comments {
padding: 0;
margin: 40px auto 20px ;
}
/* End Headers */
/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}
/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left
}
/* End Images */
/* Begin Lists
Special stylized non-IE bullets
Do not work in Internet Explorer, which merely default to normal bullets. */
html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}
html>body .entry li {
margin: 7px 0 8px 10px;
}
.entry ul li:before, #sidebar ul ul li:before {
content: "\00BB \0020";
}
.entry ol {
padding: 0 0 0 35px;
margin: 0;
}
.entry ol li {
margin: 0;
padding: 0;
}
.postmetadata ul, .postmetadata li {
display: inline;
list-style-type: none;
list-style-image: none;
}
#sidebar ul, #sidebar ul ol {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style-type: none;
list-style-image: none;
margin-bottom: 15px;
}
#sidebar ul p, #sidebar ul select {
margin: 5px 0 8px;
}
#sidebar ul ul, #sidebar ul ol {
margin: 5px 0 0 10px;
}
#sidebar ul ul ul, #sidebar ul ol {
margin: 0 0 0 10px;
}
ol li, #sidebar ul ol li {
list-style: decimal outside;
}
#sidebar ul ul li, #sidebar ul ol li {
margin: 3px 0 0;
padding: 0;
}
/* End Entry Lists */
/* Begin Form Elements */
#searchform {
margin: 10px auto;
padding: 5px 3px;
text-align: center;
}
#sidebar #searchform #s {
width: 108px;
padding: 2px;
}
#sidebar #searchsubmit {
padding: 1px;
}
.entry form { /* This is mainly for password protected posts, makes them look better. */
text-align:center;
}
select {
width: 130px;
}
#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}
#commentform textarea {
width: 100%;
padding: 2px;
}
#commentform #submit {
margin: 0;
float: right;
}
/* End Form Elements */
/* Begin Comments*/
.alt {
margin: 0;
padding: 10px;
}
.commentlist {
padding: 0;
/* text-align: justify; */
}
.commentlist li {
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}
.commentlist p {
margin: 10px 5px 10px 0;
}
#commentform p {
margin: 5px 0;
}
.nocomments {
text-align: center;
margin: 0;
padding: 0;
}
.commentmetadata {
margin: 0;
display: block;
}
/* End Comments */
/* Begin Sidebar */
#sidebar
{
padding: 20px 0 10px 0;
margin-left: 545px;
width: 190px;
}
#sidebar form {
margin: 0;
}
/* End Sidebar */
/* Begin Calendar */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}
#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}
#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}
#wp-calendar a {
display: block;
}
#wp-calendar caption {
text-align: center;
width: 100%;
}
#wp-calendar td {
padding: 3px 0;
text-align: center;
}
#wp-calendar td.pad:hover { /* Doesn't work in IE */
background-color: #fff; }
/* End Calendar */
/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
cursor: help;
}
acronym, abbr {
border-bottom: 1px dashed #999;
}
blockquote {
margin: 15px 30px 0 10px;
padding-left: 20px;
border-left: 5px solid #ddd;
}
blockquote cite {
margin: 5px 0 0;
display: block;
}
.center {
text-align: center;
}
a img {
border: none;
}
.navigation {
display: block;
text-align: center;
margin-top: 10px;
margin-bottom: 60px;
}
/* End Various Tags & Classes*/

347
static/mxgraph/examples/editors/diagrameditor.html Normal file
View File

@@ -0,0 +1,347 @@
<html>
<head>
<title>mxDraw Example</title>
<link rel="stylesheet" href="css/wordpress.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
#page { background: url("images/draw/drawbg.jpg") repeat-y top; border: none; }
</style>
<script type="text/javascript">
var mxBasePath = '../../src';
var urlParams = (function(url)
{
var result = new Object();
var params = window.location.search.slice(1).split('&');
for (var i = 0; i < params.length; i++)
{
idx = params[i].indexOf('=');
if (idx > 0)
{
result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
}
}
return result;
})(window.location.href);
var mxLanguage = urlParams['lang'];
</script>
<script type="text/javascript" src="../../src/js/mxClient.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
// Program starts here. The document.onLoad executes the
// createEditor function with a given configuration.
// In the config file, the mxEditor.onInit method is
// overridden to invoke this global function as the
// last step in the editor constructor.
function onInit(editor)
{
// Enables rotation handle
mxVertexHandler.prototype.rotationEnabled = true;
// Enables guides
mxGraphHandler.prototype.guidesEnabled = true;
// Alt disables guides
mxGuide.prototype.isEnabledForEvent = function(evt)
{
return !mxEvent.isAltDown(evt);
};
// Enables snapping waypoints to terminals
mxEdgeHandler.prototype.snapToTerminals = true;
// Defines an icon for creating new connections in the connection handler.
// This will automatically disable the highlighting of the source vertex.
mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);
// Enables connections in the graph and disables
// reset of zoom and translate on root change
// (ie. switch between XML and graphical mode).
editor.graph.setConnectable(true);
// Clones the source if new connection has no target
editor.graph.connectionHandler.setCreateTarget(true);
// Updates the title if the root changes
var title = document.getElementById('title');
if (title != null)
{
var f = function(sender)
{
title.innerHTML = 'mxDraw - ' + sender.getTitle();
};
editor.addListener(mxEvent.ROOT, f);
f(editor);
}
// Changes the zoom on mouseWheel events
mxEvent.addMouseWheelListener(function (evt, up)
{
if (!mxEvent.isConsumed(evt))
{
if (up)
{
editor.execute('zoomIn');
}
else
{
editor.execute('zoomOut');
}
mxEvent.consume(evt);
}
});
// Defines a new action to switch between
// XML and graphical display
var textNode = document.getElementById('xml');
var graphNode = editor.graph.container;
var sourceInput = document.getElementById('source');
sourceInput.checked = false;
var funct = function(editor)
{
if (sourceInput.checked)
{
graphNode.style.display = 'none';
textNode.style.display = 'inline';
var enc = new mxCodec();
var node = enc.encode(editor.graph.getModel());
textNode.value = mxUtils.getPrettyXml(node);
textNode.originalValue = textNode.value;
textNode.focus();
}
else
{
graphNode.style.display = '';
if (textNode.value != textNode.originalValue)
{
var doc = mxUtils.parseXml(textNode.value);
var dec = new mxCodec(doc);
dec.decode(doc.documentElement, editor.graph.getModel());
}
textNode.originalValue = null;
// Makes sure nothing is selected in IE
if (mxClient.IS_IE)
{
mxUtils.clearSelection();
}
textNode.style.display = 'none';
// Moves the focus back to the graph
editor.graph.container.focus();
}
};
editor.addAction('switchView', funct);
// Defines a new action to switch between
// XML and graphical display
mxEvent.addListener(sourceInput, 'click', function()
{
editor.execute('switchView');
});
// Create select actions in page
var node = document.getElementById('mainActions');
var buttons = ['group', 'ungroup', 'cut', 'copy', 'paste', 'delete', 'undo', 'redo', 'print', 'show'];
// Only adds image and SVG export if backend is available
// NOTE: The old image export in mxEditor is not used, the urlImage is used for the new export.
if (editor.urlImage != null)
{
// Client-side code for image export
var exportImage = function(editor)
{
var graph = editor.graph;
var scale = graph.view.scale;
var bounds = graph.getGraphBounds();
// New image export
var xmlDoc = mxUtils.createXmlDocument();
var root = xmlDoc.createElement('output');
xmlDoc.appendChild(root);
// Renders graph. Offset will be multiplied with state's scale when painting state.
var xmlCanvas = new mxXmlCanvas2D(root);
xmlCanvas.translate(Math.floor(1 / scale - bounds.x), Math.floor(1 / scale - bounds.y));
xmlCanvas.scale(scale);
var imgExport = new mxImageExport();
imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas);
// Puts request data together
var w = Math.ceil(bounds.width * scale + 2);
var h = Math.ceil(bounds.height * scale + 2);
var xml = mxUtils.getXml(root);
// Requests image if request is valid
if (w > 0 && h > 0)
{
var name = 'export.png';
var format = 'png';
var bg = '&bg=#FFFFFF';
new mxXmlRequest(editor.urlImage, 'filename=' + name + '&format=' + format +
bg + '&w=' + w + '&h=' + h + '&xml=' + encodeURIComponent(xml)).
simulate(document, '_blank');
}
};
editor.addAction('exportImage', exportImage);
// Client-side code for SVG export
var exportSvg = function(editor)
{
var graph = editor.graph;
var scale = graph.view.scale;
var bounds = graph.getGraphBounds();
// Prepares SVG document that holds the output
var svgDoc = mxUtils.createXmlDocument();
var root = (svgDoc.createElementNS != null) ?
svgDoc.createElementNS(mxConstants.NS_SVG, 'svg') : svgDoc.createElement('svg');
if (root.style != null)
{
root.style.backgroundColor = '#FFFFFF';
}
else
{
root.setAttribute('style', 'background-color:#FFFFFF');
}
if (svgDoc.createElementNS == null)
{
root.setAttribute('xmlns', mxConstants.NS_SVG);
}
root.setAttribute('width', Math.ceil(bounds.width * scale + 2) + 'px');
root.setAttribute('height', Math.ceil(bounds.height * scale + 2) + 'px');
root.setAttribute('xmlns:xlink', mxConstants.NS_XLINK);
root.setAttribute('version', '1.1');
// Adds group for anti-aliasing via transform
var group = (svgDoc.createElementNS != null) ?
svgDoc.createElementNS(mxConstants.NS_SVG, 'g') : svgDoc.createElement('g');
group.setAttribute('transform', 'translate(0.5,0.5)');
root.appendChild(group);
svgDoc.appendChild(root);
// Renders graph. Offset will be multiplied with state's scale when painting state.
var svgCanvas = new mxSvgCanvas2D(group);
svgCanvas.translate(Math.floor(1 / scale - bounds.x), Math.floor(1 / scale - bounds.y));
svgCanvas.scale(scale);
var imgExport = new mxImageExport();
imgExport.drawState(graph.getView().getState(graph.model.root), svgCanvas);
var name = 'export.svg';
var xml = encodeURIComponent(mxUtils.getXml(root));
new mxXmlRequest(editor.urlEcho, 'filename=' + name + '&format=svg' + '&xml=' + xml).simulate(document, "_blank");
};
editor.addAction('exportSvg', exportSvg);
buttons.push('exportImage');
buttons.push('exportSvg');
};
for (var i = 0; i < buttons.length; i++)
{
var button = document.createElement('button');
mxUtils.write(button, mxResources.get(buttons[i]));
var factory = function(name)
{
return function()
{
editor.execute(name);
};
};
mxEvent.addListener(button, 'click', factory(buttons[i]));
node.appendChild(button);
}
// Create select actions in page
var node = document.getElementById('selectActions');
mxUtils.write(node, 'Select: ');
mxUtils.linkAction(node, 'All', editor, 'selectAll');
mxUtils.write(node, ', ');
mxUtils.linkAction(node, 'None', editor, 'selectNone');
mxUtils.write(node, ', ');
mxUtils.linkAction(node, 'Vertices', editor, 'selectVertices');
mxUtils.write(node, ', ');
mxUtils.linkAction(node, 'Edges', editor, 'selectEdges');
// Create select actions in page
var node = document.getElementById('zoomActions');
mxUtils.write(node, 'Zoom: ');
mxUtils.linkAction(node, 'In', editor, 'zoomIn');
mxUtils.write(node, ', ');
mxUtils.linkAction(node, 'Out', editor, 'zoomOut');
mxUtils.write(node, ', ');
mxUtils.linkAction(node, 'Actual', editor, 'actualSize');
mxUtils.write(node, ', ');
mxUtils.linkAction(node, 'Fit', editor, 'fit');
}
window.onbeforeunload = function() { return mxResources.get('changesLost'); };
</script>
</head>
<body onload="createEditor('config/diagrameditor.xml');">
<div id="page">
<div id="header">
<div id="headerimg" style="overflow:hidden;">
<h1 id="title">mxDraw</h1>
</div>
</div>
<div id="mainActions"
style="width:100%;padding-top:8px;padding-left:24px;padding-bottom:8px;">
</div>
<div id="selectActions" style="width:100%;padding-left:54px;padding-bottom:4px;">
</div>
<table border="0" width="730px">
<tr>
<td id="toolbar" style="width:16px;padding-left:20px;" valign="top">
<!-- Toolbar Here -->
</td>
<td valign="top" style="border-width:1px;border-style:solid;border-color:black;">
<div id="graph" tabindex="-1" style="position:relative;height:480px;width:684px;overflow:hidden;cursor:default;">
<!-- Graph Here -->
<center id="splash" style="padding-top:230px;">
<img src="images/loading.gif">
</center>
</div>
<textarea id="xml" style="height:480px;width:684px;display:none;border-style:none;"></textarea>
</td>
</tr>
</table>
<span style="float:right;padding-right:36px;">
<input id="source" type="checkbox"/>Source
</span>
<div id="zoomActions" style="width:100%;padding-left:54px;padding-top:4px;">
</div>
<div id="footer">
<p id="status">
<!-- Status Here -->Loading...
</p>
<br/>
</div>
</div>
</body>
</html>

8
static/mxgraph/examples/editors/diagrams/empty.xml Normal file
View File

@@ -0,0 +1,8 @@
<mxGraphModel>
<root>
<Workflow label="MyWorkflow" description="" id="0"/>
<Layer label="Default Layer" description="">
<mxCell parent="0"/>
</Layer>
</root>
</mxGraphModel>

119
static/mxgraph/examples/editors/diagrams/swimlanes.xml Normal file
View File

@@ -0,0 +1,119 @@
<mxGraphModel>
<root>
<Workflow label="Swimlanes" description="" href="" id="0">
<mxCell />
</Workflow>
<Layer label="Default Layer" description="" href="" id="1">
<mxCell parent="0" />
</Layer>
<Swimlane label="Customer Service&#xa;Representative"
customAttribute="text value" description="" href="" id="2">
<mxCell style="swimlane;fillColor=#83027F;startSize=38"
vertex="1" connectable="0" parent="1">
<mxGeometry x="20" y="20" width="620" height="160"
as="geometry" />
</mxCell>
</Swimlane>
<Subprocess label="Enter Order" description="" href="" id="5">
<mxCell style="rounded" vertex="1" parent="2">
<mxGeometry x="80" y="50" width="102" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Subprocess label="Communicate&#xa;Delay&#xa;To Customer" description="" href="" id="13">
<mxCell style="rounded" vertex="1" parent="2">
<mxGeometry x="230" y="50" width="102" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Swimlane label="Warehouse&#xa;Engineer"
customAttribute="text value" description="" href="" id="3">
<mxCell style="swimlane;fillColor=#66B922;startSize=38"
vertex="1" connectable="0" parent="1">
<mxGeometry x="20" y="180" width="620" height="160"
as="geometry" />
</mxCell>
</Swimlane>
<Subprocess label="Receive Order" description="" href="" id="9">
<mxCell style="rounded" vertex="1" parent="3">
<mxGeometry x="80" y="50" width="102" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Shape label="Check Inventory" description="" href="" id="11">
<mxCell style="rhombus" vertex="1" parent="3">
<mxGeometry x="240" y="50" width="92" height="50"
as="geometry" />
</mxCell>
</Shape>
<Edge description="" href="" id="12">
<mxCell edge="1" parent="3" source="9" target="11">
<mxGeometry as="geometry" />
</mxCell>
</Edge>
<Subprocess label="Ship Product&#xa;To Customer" description="" href="" id="15">
<mxCell style="rounded" vertex="1" parent="3">
<mxGeometry x="400" y="50" width="102" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Edge description="" href="" id="16">
<mxCell edge="1" parent="3" source="11" target="15">
<mxGeometry as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Swimlane label="Supplier&#xa;" customAttribute="text value"
id="4">
<mxCell style="swimlane;fillColor=#808913;startSize=38"
vertex="1" connectable="0" parent="1">
<mxGeometry x="20" y="340" width="620" height="160"
as="geometry" />
</mxCell>
</Swimlane>
<Subprocess label="Manufacture Product" description="" href="" id="19">
<mxCell style="rounded" vertex="1" parent="4">
<mxGeometry x="230" y="50" width="102" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Subprocess label="Ship Product&#xa;To Partner" description="" href="" id="23">
<mxCell style="rounded" vertex="1" parent="4">
<mxGeometry x="400" y="50" width="102" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Edge description="" href="" id="24">
<mxCell edge="1" target="23" parent="4" source="19">
<mxGeometry x="-20" y="-180" as="geometry">
<mxPoint x="332" y="75" as="sourcePoint" />
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Edge description="" href="" id="10">
<mxCell edge="1" parent="1" source="5" target="9">
<mxGeometry as="geometry" />
</mxCell>
</Edge>
<Edge label="no" description="" href="" id="14">
<mxCell edge="1" parent="1" source="11" target="13">
<mxGeometry as="geometry" />
</mxCell>
</Edge>
<Edge label="no" description="" href="" id="20">
<mxCell edge="1" target="19" parent="1" source="11">
<mxGeometry x="-20" y="-30" as="geometry">
<mxPoint x="286" y="200" as="sourcePoint" />
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Edge description="" href="" id="25">
<mxCell edge="1" parent="1" source="23" target="15">
<mxGeometry as="geometry" />
</mxCell>
</Edge>
</root>
</mxGraphModel>

226
static/mxgraph/examples/editors/diagrams/travel-booking.xml Normal file
View File

@@ -0,0 +1,226 @@
<mxGraphModel>
<root>
<Workflow label="Travel Booking" description="" href="" id="0">
<mxCell />
</Workflow>
<Layer label="Default Layer" description="" href="" id="1">
<mxCell parent="0" />
</Layer>
<Swimlane label="Travel Booking" customAttribute="text value"
id="2">
<mxCell style="swimlane;fillColor=#83027F" parent="1"
vertex="1" connectable="0">
<mxGeometry x="10" y="30" width="770" height="370"
as="geometry" />
</mxCell>
</Swimlane>
<Edge label="Check Again" description="" href="" id="3">
<mxCell style="verticalEdge" parent="2" source="14"
target="11" edge="1">
<mxGeometry x="0" y="0" as="geometry" relative="1">
<Array as="points">
<mxPoint x="440" y="30" />
</Array>
</mxGeometry>
</mxCell>
</Edge>
<Symbol label="Symbol" description="" href="" id="4">
<mxCell
style="symbol;image=images/symbols/message.png" parent="2"
vertex="1">
<mxGeometry x="40" y="150" width="32" height="32"
as="geometry" />
</mxCell>
</Symbol>
<Subprocess label="Check Credit&#xa;Card" description="" href="" id="5">
<mxCell style="rounded" parent="2" vertex="1">
<mxGeometry x="92" y="140" width="72" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Symbol label="Symbol" description="" href="" id="6">
<mxCell
style="symbol;image=images/symbols/error.png" parent="5"
vertex="1">
<mxGeometry x="8" y="34" width="32" height="32"
as="geometry" />
</mxCell>
</Symbol>
<Subprocess label="Handle&#xa;Fault" description="" href="" id="7">
<mxCell style="rounded" parent="2" vertex="1">
<mxGeometry x="162" y="280" width="72" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Subprocess label="Check Hotel&#xa;Reservation" description="" href="" id="8">
<mxCell style="rounded" parent="2" vertex="1">
<mxGeometry x="202" y="140" width="72" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Subprocess label="Check Flight&#xa;Reservation" description="" href="" id="9">
<mxCell style="rounded" parent="2" vertex="1">
<mxGeometry x="202" y="210" width="72" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Subprocess label="Data Map" description="" href="" id="10">
<mxCell style="rounded" parent="2" vertex="1">
<mxGeometry x="202" y="70" width="72" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Subprocess label="Check Car&#xa;Reservation" description="" href="" id="11">
<mxCell style="rounded" parent="2" vertex="1">
<mxGeometry x="302" y="70" width="72" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Symbol label="Symbol" description="" href="" id="12">
<mxCell
style="symbol;image=images/symbols/fork.png" parent="2"
vertex="1">
<mxGeometry x="550" y="140" width="52" height="50"
as="geometry" />
</mxCell>
</Symbol>
<Subprocess label="Evaluate&#xa;Reservation&#xa;Result" description="" href="" id="13">
<mxCell style="rounded" parent="2" vertex="1">
<mxGeometry x="402" y="70" width="72" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Shape label="" description="" href="" id="14">
<mxCell style="rhombus" parent="2" vertex="1">
<mxGeometry x="504" y="69" width="52" height="51"
as="geometry" />
</mxCell>
</Shape>
<Subprocess label="Confirmation" description="" href="" id="15">
<mxCell style="rounded" parent="2" vertex="1">
<mxGeometry x="622" y="140" width="72" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Symbol label="Reply" description="" href="" id="16">
<mxCell
style="symbol;image=images/symbols/message_end.png"
parent="2" vertex="1">
<mxGeometry x="260" y="290" width="32" height="32"
as="geometry" />
</mxCell>
</Symbol>
<Symbol label="Reply" description="" href="" id="17">
<mxCell
style="symbol;image=images/symbols/message_end.png"
parent="2" vertex="1">
<mxGeometry x="720" y="150" width="32" height="32"
as="geometry" />
</mxCell>
</Symbol>
<Edge description="" href="" id="18">
<mxCell parent="2" source="4" target="5" edge="1">
<mxGeometry x="0" y="0" as="geometry">
<mxPoint x="52" y="166" as="sourcePoint" />
</mxGeometry>
</mxCell>
</Edge>
<Edge description="" href="" id="19">
<mxCell parent="2" source="6" target="7" edge="1">
<mxGeometry x="0" y="0" as="geometry">
<Array as="points">
<mxPoint x="120" y="250" />
</Array>
</mxGeometry>
</mxCell>
</Edge>
<Edge description="" href="" id="20">
<mxCell parent="2" source="7" target="16" edge="1">
<mxGeometry x="0" y="0" as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Edge description="" href="" id="21">
<mxCell parent="2" source="5" target="8" edge="1">
<mxGeometry x="0" y="0" as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Edge description="" href="" id="22">
<mxCell parent="2" source="5" target="9" edge="1">
<mxGeometry x="0" y="0" as="geometry">
<mxPoint x="244" y="205" as="sourcePoint" />
</mxGeometry>
</mxCell>
</Edge>
<Edge description="" href="" id="23">
<mxCell parent="2" source="5" target="10" edge="1">
<mxGeometry x="0" y="0" as="geometry">
<mxPoint x="234" y="55" as="sourcePoint" />
</mxGeometry>
</mxCell>
</Edge>
<Edge description="" href="" id="24">
<mxCell parent="2" source="10" target="11" edge="1">
<mxGeometry x="0" y="0" as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Edge description="" href="" id="25">
<mxCell parent="2" source="12" target="15" edge="1">
<mxGeometry x="0" y="0" as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Edge description="" href="" id="26">
<mxCell parent="2" source="8" target="12" edge="1">
<mxGeometry x="0" y="0" as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Edge description="" href="" id="27">
<mxCell parent="2" source="11" target="13" edge="1">
<mxGeometry x="0" y="0" as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Edge description="" href="" id="28">
<mxCell parent="2" source="13" target="14" edge="1">
<mxGeometry x="0" y="0" as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Edge description="" href="" id="29">
<mxCell parent="2" source="9" target="12" edge="1">
<mxGeometry x="0" y="0" as="geometry">
<Array as="points">
<mxPoint x="570" y="200" />
</Array>
</mxGeometry>
</mxCell>
</Edge>
<Edge description="" href="" id="30">
<mxCell parent="2" source="14" target="12" edge="1">
<mxGeometry x="0" y="0" as="geometry">
<Array as="points">
<mxPoint x="570" y="130" />
</Array>
</mxGeometry>
</mxCell>
</Edge>
<Edge description="" href="" id="31">
<mxCell parent="2" source="15" target="17" edge="1">
<mxGeometry x="0" y="0" as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
</root>
</mxGraphModel>

286
static/mxgraph/examples/editors/diagrams/withdrawal.xml Normal file
View File

@@ -0,0 +1,286 @@
<mxGraphModel>
<root>
<Workflow label="Withdrawal" id="0">
<mxCell />
</Workflow>
<Layer label="Default Layer" id="1">
<mxCell parent="0" />
</Layer>
<Swimlane label="Customer" customAttribute="text value"
id="2">
<mxCell style="swimlane;fillColor=#66B922"
parent="1" connectable="0" vertex="1">
<mxGeometry x="20" y="20" width="220" height="900"
as="geometry" />
</mxCell>
</Swimlane>
<Shape label="Start" id="3">
<mxCell style="ellipse" parent="2" vertex="1">
<mxGeometry x="70" y="40" width="60" height="50"
as="geometry" />
</mxCell>
</Shape>
<Subprocess label="Insert Card" id="4">
<mxCell style="rounded" parent="2" vertex="1">
<mxGeometry x="50" y="110" width="100" height="30"
as="geometry" />
</mxCell>
</Subprocess>
<Edge id="5">
<mxCell parent="2" source="3" target="4" edge="1">
<mxGeometry as="geometry" />
</mxCell>
</Edge>
<Subprocess label="Enter PIN" id="6">
<mxCell style="rounded" parent="2" vertex="1">
<mxGeometry x="50" y="160" width="100" height="30"
as="geometry" />
</mxCell>
</Subprocess>
<Edge id="7">
<mxCell parent="2" source="4" target="6" edge="1">
<mxGeometry as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Subprocess label="Enter Amount" id="8">
<mxCell style="rounded" parent="2" vertex="1">
<mxGeometry x="50" y="260" width="100" height="30"
as="geometry" />
</mxCell>
</Subprocess>
<Shape label="" id="9">
<mxCell style="hline" parent="2" vertex="1">
<mxGeometry y="390" width="600" height="10"
as="geometry" />
</mxCell>
</Shape>
<Subprocess label="Take Money&#xa;from Slot" id="10">
<mxCell style="rounded" parent="2" vertex="1">
<mxGeometry x="40" y="430" width="100" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Edge id="11">
<mxCell parent="2" source="9" target="10" edge="1">
<mxGeometry as="geometry">
<Array as="points">
<mxPoint x="90" y="420" />
</Array>
</mxGeometry>
</mxCell>
</Edge>
<Subprocess label="Take Card" id="12">
<mxCell style="rounded" parent="2" vertex="1">
<mxGeometry x="40" y="790" width="100" height="30"
as="geometry" />
</mxCell>
</Subprocess>
<Shape label="End" id="13">
<mxCell style="ellipse" parent="2" vertex="1">
<mxGeometry x="60" y="850" width="60" height="50"
as="geometry" />
</mxCell>
</Shape>
<Edge id="14">
<mxCell parent="2" source="12" target="13" edge="1">
<mxGeometry as="geometry" />
</mxCell>
</Edge>
<Swimlane label="ATM Machine" customAttribute="text value"
id="15">
<mxCell style="swimlane;fillColor=#CF0056"
parent="1" connectable="0" vertex="1">
<mxGeometry x="240" y="20" width="200" height="900"
as="geometry" />
</mxCell>
</Swimlane>
<Shape label="" id="16">
<mxCell style="hline" parent="15" vertex="1">
<mxGeometry x="40" y="510" width="100" height="10"
as="geometry" />
</mxCell>
</Shape>
<Shape label="" id="17">
<mxCell style="rhombus" parent="15" vertex="1">
<mxGeometry x="70" y="550" width="40" height="40"
as="geometry" />
</mxCell>
</Shape>
<Edge id="18">
<mxCell parent="15" source="16" target="17" edge="1">
<mxGeometry as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Subprocess label="Show Balance" id="19">
<mxCell style="rounded" parent="15" vertex="1">
<mxGeometry x="40" y="610" width="100" height="30"
as="geometry" />
</mxCell>
</Subprocess>
<Edge id="20">
<mxCell parent="15" source="17" target="19" edge="1">
<mxGeometry y="10" as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Shape label="" id="21">
<mxCell style="rhombus" parent="15" vertex="1">
<mxGeometry x="70" y="660" width="40" height="40"
as="geometry" />
</mxCell>
</Shape>
<Edge id="22">
<mxCell parent="15" source="19" target="21" edge="1">
<mxGeometry as="geometry" />
</mxCell>
</Edge>
<Subprocess label="Eject Card" id="23">
<mxCell style="rounded" parent="15" vertex="1">
<mxGeometry x="40" y="730" width="100" height="30"
as="geometry" />
</mxCell>
</Subprocess>
<Edge id="24">
<mxCell parent="15" source="21" target="23" edge="1">
<mxGeometry as="geometry" />
</mxCell>
</Edge>
<Swimlane label="Bank" customAttribute="text value" id="25">
<mxCell style="swimlane;fillColor=#4679B6"
parent="1" connectable="0" vertex="1">
<mxGeometry x="440" y="20" width="210" height="900"
as="geometry" />
</mxCell>
</Swimlane>
<Shape label="" id="26">
<mxCell style="rhombus" parent="25" vertex="1">
<mxGeometry x="80" y="160" width="40" height="40"
as="geometry" />
</mxCell>
</Shape>
<Subprocess label="Check Account&#xa;Balance" id="27">
<mxCell style="rounded" parent="25" vertex="1">
<mxGeometry x="50" y="250" width="100" height="50"
as="geometry" />
</mxCell>
</Subprocess>
<Subprocess label="Authorize" id="28">
<mxCell style="rounded" parent="25" vertex="1">
<mxGeometry x="50" y="110" width="100" height="30"
as="geometry" />
</mxCell>
</Subprocess>
<Edge id="29">
<mxCell parent="25" source="28" target="26" edge="1">
<mxGeometry y="-50" as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Shape label="" id="30">
<mxCell style="rhombus" parent="25" vertex="1">
<mxGeometry x="80" y="330" width="40" height="40"
as="geometry" />
</mxCell>
</Shape>
<Edge id="31">
<mxCell parent="25" source="27" target="30" edge="1">
<mxGeometry as="geometry" />
</mxCell>
</Edge>
<Subprocess label="Debit Account" id="32">
<mxCell style="rounded" parent="25" vertex="1">
<mxGeometry x="50" y="440" width="100" height="30"
as="geometry" />
</mxCell>
</Subprocess>
<Edge id="33">
<mxCell parent="1" source="6" target="28" edge="1">
<mxGeometry as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Edge label="[Valid PIN]" id="34">
<mxCell style="verticalEdge" parent="1" source="26"
target="8" edge="1">
<mxGeometry as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Edge id="35">
<mxCell parent="1" source="8" target="27" edge="1">
<mxGeometry as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Edge label="[balance &gt;= amount]" id="36">
<mxCell parent="1" source="30" target="9" edge="1">
<mxGeometry as="geometry">
<Array as="points" />
</mxGeometry>
</mxCell>
</Edge>
<Edge id="37">
<mxCell parent="1" source="9" target="32" edge="1">
<mxGeometry as="geometry">
<Array as="points">
<mxPoint x="540" y="440" />
</Array>
</mxGeometry>
</mxCell>
</Edge>
<Edge id="38">
<mxCell parent="1" source="32" target="16" edge="1">
<mxGeometry as="geometry">
<Array as="points">
<mxPoint x="364" y="503" />
</Array>
</mxGeometry>
</mxCell>
</Edge>
<Edge id="39">
<mxCell parent="1" source="10" target="16" edge="1">
<mxGeometry as="geometry">
<Array as="points">
<mxPoint x="304" y="503" />
</Array>
</mxGeometry>
</mxCell>
</Edge>
<Edge label="" id="40">
<mxCell parent="1" source="30" target="17" edge="1">
<mxGeometry as="geometry">
<Array as="points">
<mxPoint x="654" y="463" />
</Array>
</mxGeometry>
</mxCell>
</Edge>
<Edge id="41">
<mxCell parent="1" source="26" target="21" edge="1">
<mxGeometry as="geometry">
<Array as="points">
<mxPoint x="664" y="453" />
</Array>
</mxGeometry>
</mxCell>
</Edge>
<Edge id="42">
<mxCell parent="1" source="23" target="12" edge="1">
<mxGeometry as="geometry">
<Array as="points">
<mxPoint x="110" y="783" />
</Array>
</mxGeometry>
</mxCell>
</Edge>
</root>
</mxGraphModel>

9
static/mxgraph/examples/editors/grapheditor.html Normal file
View File

@@ -0,0 +1,9 @@
<html>
<head>
<title>Deprecation Warning</title>
</head>
<body>
This example has been deprecated. A new implementation is available <a href="../grapheditor/www/index.html">here</a>.
A copy of the old example is <a href="archive/grapheditor/grapheditor.html">here</a>.
</body>
</html>

45
static/mxgraph/examples/editors/help/index-all.html Normal file
View File

@@ -0,0 +1,45 @@
<html>
<head>
<title>mxGraph Workflow Editor Help Index</title>
<style type="text/css" media="screen">
body {
font-family: Arial;
font-size: 8pt;
}
h1 {
font-family: Arial;
font-size: 13pt;
}
h2 {
font-family: Arial;
font-size: 12pt;
}
h3 {
font-family: Arial;
font-size: 10pt;
}
h4 {
font-family: Arial;
font-size: 9pt;
}
</style>
</head>
<body>
<h1>Help Index</h1>
<h1>Help Index</h1>
<hr>
<a href="index.html">Lorem Ipsum</a><br>
<a href="index.html">Lorem Ipsum</a><br>
<a href="index.html">Lorem Ipsum</a><br>
<br>
<a href="index.html">Lorem Ipsum</a><br>
<a href="index.html">Lorem Ipsum</a><br>
<a href="index.html">Lorem Ipsum</a><br>
<a href="index.html">Lorem Ipsum</a><br>
<br>
<a href="index.html">Lorem Ipsum</a><br>
<a href="index.html">Lorem Ipsum</a><br>
<a href="index.html">Lorem Ipsum</a><br>
<a href="index.html">Lorem Ipsum</a><br>
</body>
</html>

41
static/mxgraph/examples/editors/help/index.html Normal file
View File

@@ -0,0 +1,41 @@
<html>
<head>
<title>mxGraph Workflow Editor Help</title>
<style type="text/css" media="screen">
body {
font-family: Arial;
font-size: 8pt;
}
h1 {
font-family: Arial;
font-size: 13pt;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000000;
}
h2 {
font-family: Arial;
font-size: 12pt;
}
h3 {
font-family: Arial;
font-size: 10pt;
}
h4 {
font-family: Arial;
font-size: 9pt;
}
</style>
</head>
<body>
<h1>mxGraph Online Help</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
See <a href="index-all.html">Help Index</a>
</body>
</html>

BIN
static/mxgraph/examples/editors/images/actor.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 B

BIN
static/mxgraph/examples/editors/images/alignbottom.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 358 B

BIN
static/mxgraph/examples/editors/images/aligncenter.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 357 B

BIN
static/mxgraph/examples/editors/images/alignleft.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 373 B

BIN
static/mxgraph/examples/editors/images/alignmiddle.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 351 B

BIN
static/mxgraph/examples/editors/images/alignright.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 377 B

BIN
static/mxgraph/examples/editors/images/aligntop.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 358 B

BIN
static/mxgraph/examples/editors/images/arrow.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 469 B

BIN
static/mxgraph/examples/editors/images/bell.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
static/mxgraph/examples/editors/images/bg.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/mxgraph/examples/editors/images/block_end.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 B

BIN
static/mxgraph/examples/editors/images/block_start.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 B

BIN
static/mxgraph/examples/editors/images/bold.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 859 B

BIN
static/mxgraph/examples/editors/images/bottom.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 848 B

BIN
static/mxgraph/examples/editors/images/box.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
static/mxgraph/examples/editors/images/camera.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 B

BIN
static/mxgraph/examples/editors/images/center.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 B

BIN
static/mxgraph/examples/editors/images/classic_end.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 B

BIN
static/mxgraph/examples/editors/images/classic_start.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 B

BIN
static/mxgraph/examples/editors/images/cloud.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 220 B

BIN
static/mxgraph/examples/editors/images/cmp-bg.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 830 B

BIN
static/mxgraph/examples/editors/images/collapse.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 B

BIN
static/mxgraph/examples/editors/images/connect.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 860 B

BIN
static/mxgraph/examples/editors/images/connector.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 954 B

BIN
static/mxgraph/examples/editors/images/console.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 582 B

BIN
static/mxgraph/examples/editors/images/copy.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 615 B

BIN
static/mxgraph/examples/editors/images/cube_green.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
static/mxgraph/examples/editors/images/cut.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 540 B

BIN
static/mxgraph/examples/editors/images/cylinder.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 870 B

BIN
static/mxgraph/examples/editors/images/delete.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 538 B

BIN
static/mxgraph/examples/editors/images/diagram.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 294 B

BIN
static/mxgraph/examples/editors/images/diamond_end.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 B

BIN
static/mxgraph/examples/editors/images/diamond_start.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 B

BIN
static/mxgraph/examples/editors/images/doubleellipse.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 B

BIN
static/mxgraph/examples/editors/images/down.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 325 B

BIN
static/mxgraph/examples/editors/images/draw/drawbg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
static/mxgraph/examples/editors/images/draw/drawbgcolor.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 556 B

BIN
static/mxgraph/examples/editors/images/draw/drawfooter.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/mxgraph/examples/editors/images/draw/drawheader.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
static/mxgraph/examples/editors/images/draw/mxlogo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/mxgraph/examples/editors/images/dude3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
static/mxgraph/examples/editors/images/earth.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
static/mxgraph/examples/editors/images/ellipse.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 B

BIN
static/mxgraph/examples/editors/images/entity.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 B

BIN
static/mxgraph/examples/editors/images/expand.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 B

BIN
static/mxgraph/examples/editors/images/fillcolor.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 B

BIN
static/mxgraph/examples/editors/images/fit.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 B

BIN
static/mxgraph/examples/editors/images/font.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 580 B

BIN
static/mxgraph/examples/editors/images/fontcolor.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 B

BIN
static/mxgraph/examples/editors/images/gear.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 B

BIN
static/mxgraph/examples/editors/images/gear.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
static/mxgraph/examples/editors/images/grid.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 B

BIN
static/mxgraph/examples/editors/images/group.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 235 B

BIN
static/mxgraph/examples/editors/images/help.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 939 B

BIN
static/mxgraph/examples/editors/images/hexagon.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 855 B

BIN
static/mxgraph/examples/editors/images/hline.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 B

BIN
static/mxgraph/examples/editors/images/house.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1013 B

BIN
static/mxgraph/examples/editors/images/house.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
static/mxgraph/examples/editors/images/image.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 680 B

BIN
static/mxgraph/examples/editors/images/italic.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 B

BIN
static/mxgraph/examples/editors/images/left.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 B

BIN
static/mxgraph/examples/editors/images/linecolor.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 147 B

BIN
static/mxgraph/examples/editors/images/link.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 B

Some files were not shown because too many files have changed in this diff Show More