last demo import - cleaned
333
static/mxgraph/examples/editors/config/diagrameditor.xml
Normal 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
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,3 @@
|
||||
img.mxToolbarMode {
|
||||
margin-right: 7px;
|
||||
}
|
||||
599
static/mxgraph/examples/editors/css/wordpress.css
Normal 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
@@ -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
@@ -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
@@ -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
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
Delay
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
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
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
" 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
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
@@ -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
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
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
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
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
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
Reservation
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
@@ -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
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
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 >= 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
@@ -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
@@ -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
@@ -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
|
After Width: | Height: | Size: 75 B |
BIN
static/mxgraph/examples/editors/images/alignbottom.gif
Normal file
|
After Width: | Height: | Size: 358 B |
BIN
static/mxgraph/examples/editors/images/aligncenter.gif
Normal file
|
After Width: | Height: | Size: 357 B |
BIN
static/mxgraph/examples/editors/images/alignleft.gif
Normal file
|
After Width: | Height: | Size: 373 B |
BIN
static/mxgraph/examples/editors/images/alignmiddle.gif
Normal file
|
After Width: | Height: | Size: 351 B |
BIN
static/mxgraph/examples/editors/images/alignright.gif
Normal file
|
After Width: | Height: | Size: 377 B |
BIN
static/mxgraph/examples/editors/images/aligntop.gif
Normal file
|
After Width: | Height: | Size: 358 B |
BIN
static/mxgraph/examples/editors/images/arrow.gif
Normal file
|
After Width: | Height: | Size: 469 B |
BIN
static/mxgraph/examples/editors/images/bell.png
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
BIN
static/mxgraph/examples/editors/images/bg.gif
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
static/mxgraph/examples/editors/images/block_end.gif
Normal file
|
After Width: | Height: | Size: 65 B |
BIN
static/mxgraph/examples/editors/images/block_start.gif
Normal file
|
After Width: | Height: | Size: 64 B |
BIN
static/mxgraph/examples/editors/images/bold.gif
Normal file
|
After Width: | Height: | Size: 859 B |
BIN
static/mxgraph/examples/editors/images/bottom.gif
Normal file
|
After Width: | Height: | Size: 848 B |
BIN
static/mxgraph/examples/editors/images/box.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
static/mxgraph/examples/editors/images/camera.gif
Normal file
|
After Width: | Height: | Size: 278 B |
BIN
static/mxgraph/examples/editors/images/center.gif
Normal file
|
After Width: | Height: | Size: 163 B |
BIN
static/mxgraph/examples/editors/images/classic_end.gif
Normal file
|
After Width: | Height: | Size: 80 B |
BIN
static/mxgraph/examples/editors/images/classic_start.gif
Normal file
|
After Width: | Height: | Size: 82 B |
BIN
static/mxgraph/examples/editors/images/cloud.gif
Normal file
|
After Width: | Height: | Size: 220 B |
BIN
static/mxgraph/examples/editors/images/cmp-bg.gif
Normal file
|
After Width: | Height: | Size: 830 B |
BIN
static/mxgraph/examples/editors/images/collapse.gif
Normal file
|
After Width: | Height: | Size: 195 B |
BIN
static/mxgraph/examples/editors/images/connect.gif
Normal file
|
After Width: | Height: | Size: 860 B |
BIN
static/mxgraph/examples/editors/images/connector.gif
Normal file
|
After Width: | Height: | Size: 954 B |
BIN
static/mxgraph/examples/editors/images/console.gif
Normal file
|
After Width: | Height: | Size: 582 B |
BIN
static/mxgraph/examples/editors/images/copy.gif
Normal file
|
After Width: | Height: | Size: 615 B |
BIN
static/mxgraph/examples/editors/images/cube_green.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
static/mxgraph/examples/editors/images/cut.gif
Normal file
|
After Width: | Height: | Size: 540 B |
BIN
static/mxgraph/examples/editors/images/cylinder.gif
Normal file
|
After Width: | Height: | Size: 870 B |
BIN
static/mxgraph/examples/editors/images/delete.gif
Normal file
|
After Width: | Height: | Size: 538 B |
BIN
static/mxgraph/examples/editors/images/diagram.gif
Normal file
|
After Width: | Height: | Size: 294 B |
BIN
static/mxgraph/examples/editors/images/diamond_end.gif
Normal file
|
After Width: | Height: | Size: 81 B |
BIN
static/mxgraph/examples/editors/images/diamond_start.gif
Normal file
|
After Width: | Height: | Size: 82 B |
BIN
static/mxgraph/examples/editors/images/doubleellipse.gif
Normal file
|
After Width: | Height: | Size: 88 B |
BIN
static/mxgraph/examples/editors/images/down.gif
Normal file
|
After Width: | Height: | Size: 325 B |
BIN
static/mxgraph/examples/editors/images/draw/drawbg.jpg
Normal file
|
After Width: | Height: | Size: 8.2 KiB |
BIN
static/mxgraph/examples/editors/images/draw/drawbgcolor.jpg
Normal file
|
After Width: | Height: | Size: 556 B |
BIN
static/mxgraph/examples/editors/images/draw/drawfooter.jpg
Normal file
|
After Width: | Height: | Size: 2.4 KiB |
BIN
static/mxgraph/examples/editors/images/draw/drawheader.jpg
Normal file
|
After Width: | Height: | Size: 5.2 KiB |
BIN
static/mxgraph/examples/editors/images/draw/mxlogo.jpg
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/mxgraph/examples/editors/images/dude3.png
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
static/mxgraph/examples/editors/images/earth.png
Normal file
|
After Width: | Height: | Size: 4.4 KiB |
BIN
static/mxgraph/examples/editors/images/ellipse.gif
Normal file
|
After Width: | Height: | Size: 121 B |
BIN
static/mxgraph/examples/editors/images/entity.gif
Normal file
|
After Width: | Height: | Size: 74 B |
BIN
static/mxgraph/examples/editors/images/expand.gif
Normal file
|
After Width: | Height: | Size: 190 B |
BIN
static/mxgraph/examples/editors/images/fillcolor.gif
Normal file
|
After Width: | Height: | Size: 127 B |
BIN
static/mxgraph/examples/editors/images/fit.gif
Normal file
|
After Width: | Height: | Size: 148 B |
BIN
static/mxgraph/examples/editors/images/font.gif
Normal file
|
After Width: | Height: | Size: 580 B |
BIN
static/mxgraph/examples/editors/images/fontcolor.gif
Normal file
|
After Width: | Height: | Size: 105 B |
BIN
static/mxgraph/examples/editors/images/gear.gif
Normal file
|
After Width: | Height: | Size: 280 B |
BIN
static/mxgraph/examples/editors/images/gear.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
static/mxgraph/examples/editors/images/grid.gif
Normal file
|
After Width: | Height: | Size: 58 B |
BIN
static/mxgraph/examples/editors/images/group.gif
Normal file
|
After Width: | Height: | Size: 235 B |
BIN
static/mxgraph/examples/editors/images/help.gif
Normal file
|
After Width: | Height: | Size: 939 B |
BIN
static/mxgraph/examples/editors/images/hexagon.gif
Normal file
|
After Width: | Height: | Size: 855 B |
BIN
static/mxgraph/examples/editors/images/hline.gif
Normal file
|
After Width: | Height: | Size: 64 B |
BIN
static/mxgraph/examples/editors/images/house.gif
Normal file
|
After Width: | Height: | Size: 1013 B |
BIN
static/mxgraph/examples/editors/images/house.png
Normal file
|
After Width: | Height: | Size: 2.9 KiB |
BIN
static/mxgraph/examples/editors/images/image.gif
Normal file
|
After Width: | Height: | Size: 680 B |
BIN
static/mxgraph/examples/editors/images/italic.gif
Normal file
|
After Width: | Height: | Size: 159 B |
BIN
static/mxgraph/examples/editors/images/left.gif
Normal file
|
After Width: | Height: | Size: 165 B |
BIN
static/mxgraph/examples/editors/images/linecolor.gif
Normal file
|
After Width: | Height: | Size: 147 B |
BIN
static/mxgraph/examples/editors/images/link.gif
Normal file
|
After Width: | Height: | Size: 88 B |
BIN
static/mxgraph/examples/editors/images/loading.gif
Normal file
|
After Width: | Height: | Size: 9.9 KiB |
BIN
static/mxgraph/examples/editors/images/middle.gif
Normal file
|
After Width: | Height: | Size: 848 B |
BIN
static/mxgraph/examples/editors/images/new.gif
Normal file
|
After Width: | Height: | Size: 613 B |
BIN
static/mxgraph/examples/editors/images/open.gif
Normal file
|
After Width: | Height: | Size: 1023 B |
BIN
static/mxgraph/examples/editors/images/open_end.gif
Normal file
|
After Width: | Height: | Size: 94 B |
BIN
static/mxgraph/examples/editors/images/open_start.gif
Normal file
|
After Width: | Height: | Size: 93 B |
BIN
static/mxgraph/examples/editors/images/outline.gif
Normal file
|
After Width: | Height: | Size: 342 B |
BIN
static/mxgraph/examples/editors/images/oval_end.gif
Normal file
|
After Width: | Height: | Size: 79 B |
BIN
static/mxgraph/examples/editors/images/oval_start.gif
Normal file
|
After Width: | Height: | Size: 78 B |
BIN
static/mxgraph/examples/editors/images/overlays/check.png
Normal file
|
After Width: | Height: | Size: 922 B |
BIN
static/mxgraph/examples/editors/images/overlays/error.png
Normal file
|
After Width: | Height: | Size: 892 B |
BIN
static/mxgraph/examples/editors/images/overlays/flash.png
Normal file
|
After Width: | Height: | Size: 803 B |
BIN
static/mxgraph/examples/editors/images/overlays/forbidden.png
Normal file
|
After Width: | Height: | Size: 875 B |
BIN
static/mxgraph/examples/editors/images/overlays/help.png
Normal file
|
After Width: | Height: | Size: 1013 B |
BIN
static/mxgraph/examples/editors/images/overlays/house.png
Normal file
|
After Width: | Height: | Size: 877 B |
BIN
static/mxgraph/examples/editors/images/overlays/information.png
Normal file
|
After Width: | Height: | Size: 893 B |
BIN
static/mxgraph/examples/editors/images/overlays/lightbulb_on.png
Normal file
|
After Width: | Height: | Size: 785 B |