155 lines
7.0 KiB
HTML
155 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>BPMN Editor</title>
|
|
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
|
|
<meta charset="UTF-8">
|
|
|
|
<link rel="stylesheet" href="../assets/css/jquery-ui.min.css" />
|
|
<script src="../assets/js/jquery.min.js"></script>
|
|
<script src="../assets/js/jquery-ui.min.js"></script>
|
|
|
|
<script src="../release/go.js"></script>
|
|
|
|
<script src="DrawCommandHandler.js"></script>
|
|
<link href="BPMN.css" rel="stylesheet" type="text/css" />
|
|
<script src="BPMNClasses.js"></script>
|
|
<script src="BPMN.js"></script>
|
|
</head>
|
|
<body onload="init()">
|
|
<div>
|
|
<div id="currentFile">(Unsaved File)</div>
|
|
<ul id="menuui">
|
|
<li><a href="#">File</a>
|
|
<ul>
|
|
<li><a href="#" onclick="newDocument()">New</a></li>
|
|
<li><a href="#" onclick="openDocument()">Open...</a></li>
|
|
<li><a href="#" onclick="saveDocument()">Save</a></li>
|
|
<li><a href="#" onclick="saveDocumentAs()">Save As...</a></li>
|
|
<li><a href="#" onclick="removeDocument()">Delete...</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#">Edit</a>
|
|
<ul>
|
|
<li><a href="#" onclick="myDiagram.commandHandler.undo()">Undo</a></li>
|
|
<li><a href="#" onclick="myDiagram.commandHandler.redo()">Redo</a></li>
|
|
<li><a href="#" onclick="myDiagram.commandHandler.cutSelection()">Cut</a></li>
|
|
<li><a href="#" onclick="myDiagram.commandHandler.copySelection()">Copy</a></li>
|
|
<li><a href="#" onclick="myDiagram.commandHandler.pasteSelection()">Paste</a></li>
|
|
<li><a href="#" onclick="myDiagram.commandHandler.deleteSelection()">Delete</a></li>
|
|
<li><a href="#" onclick="myDiagram.commandHandler.selectAll()">Select All</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#">Align</a>
|
|
<ul>
|
|
<li><a href="#" onclick="myDiagram.commandHandler.alignLeft()">Left Sides</a></li>
|
|
<li><a href="#" onclick="myDiagram.commandHandler.alignRight()">Right Sides</a></li>
|
|
<li><a href="#" onclick="myDiagram.commandHandler.alignTop()">Tops</a></li>
|
|
<li><a href="#" onclick="myDiagram.commandHandler.alignBottom()">Bottoms</a></li>
|
|
<li><a href="#" onclick="myDiagram.commandHandler.alignCenterX()">Center X</a></li>
|
|
<li><a href="#" onclick="myDiagram.commandHandler.alignCenterY()">Center Y</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#">Space</a>
|
|
<ul>
|
|
<li><a href="#" onclick="myDiagram.commandHandler.alignRow(askSpace())">In Row...</a></li>
|
|
<li><a href="#" onclick="myDiagram.commandHandler.alignColumn(askSpace())">In Column...</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#">Options</a>
|
|
<ul>
|
|
<li><a href="#">
|
|
<input id="grid" type="checkbox" name="options" value="grid" onclick="updateGridOption()">Grid</a></li>
|
|
<li><a href="#">
|
|
<input id="snap" type="checkbox" name="options" value="0" onclick="updateSnapOption()">Snapping</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<!--END menu bar -->
|
|
|
|
|
|
|
|
<!-- Styling for this portion is in BPMN.css -->
|
|
<div id="PaletteAndDiagram">
|
|
<div id="sideBar">
|
|
|
|
<span style="display: inline-block; vertical-align: top; padding: 5px; width:100%">
|
|
<div id="accordion">
|
|
<h4>Level 1 items</h4>
|
|
<div>
|
|
<div id="myPaletteLevel1" class="myPaletteDiv" ></div>
|
|
</div>
|
|
<h4>Level 2 items</h4>
|
|
<div>
|
|
<div id="myPaletteLevel2" class="myPaletteDiv"></div>
|
|
</div>
|
|
<h4>Other items</h4>
|
|
<div>
|
|
<div id="myPaletteLevel3" class="myPaletteDiv"></div>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<div class="handle">Overview:</div>
|
|
<div id="myOverviewDiv"></div>
|
|
</div>
|
|
<div id="myDiagramDiv"></div>
|
|
<div id="description">
|
|
<p>
|
|
This sample describes templates and relationships typically used in <a href="https://en.wikipedia.org/wiki/Business_Process_Model_and_Notation">Business Process Model and Notation (BPMN)</a>,
|
|
to be used as a starting point for developing BPMN or flow-like web applications.
|
|
</p>
|
|
<p>In addition to this HTML file, this sample uses the files:</p>
|
|
<ul>
|
|
<li><a href="BPMN.css">BPMN.css</a> for styling
|
|
<li><a href="BPMN.js">BPMN.js</a> for the Diagram logic
|
|
<li><a href="BPMNClasses.js">BPMNClasses.js</a> - Custom PoolLink and BPMNLinkingTool classes
|
|
<li><a href="DrawCommandHandler.js">DrawCommandHandler.js</a> - Custom CommandHandler class
|
|
</ul>
|
|
<span>
|
|
<div>
|
|
<p>Additional sample data files:</p>
|
|
<figure>
|
|
<img src="BPMNdata/BasicOrderProcess.png" onclick='loadJSON("BPMNdata/BasicOrderProcess.json")' title="Basic Order Process"></img>
|
|
<figcaption>Basic Order Process</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<img src="BPMNdata/OMG BPMN by Example Figure 5.1.png" onclick='loadJSON("BPMNdata/OMG BPMN by Example Figure 5.1.json")' title="OMG BPMN by Example Figure 5.1"></img>
|
|
<figcaption>OMG BPMN by Example Figure 5.1</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<img src="BPMNdata/OMG BPMN by Example Figure 5.2.png" onclick='loadJSON("BPMNdata/OMG BPMN by Example Figure 5.2.json")' title="OMG BPMN by Example Figure 5.2"></img>
|
|
<figcaption>OMG BPMN by Example Figure 5.2</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<img src="BPMNdata/OMG BPMN by Example Figure 5.3.png" onclick='loadJSON("BPMNdata/OMG BPMN by Example Figure 5.3.json")' title="OMG BPMN by Example Figure 5.3"></img>
|
|
<figcaption>OMG BPMN by Example Figure 5.3</figcaption>
|
|
</figure>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="openDocument" class="draggable">
|
|
<div id="openDraggableHandle" class="handle">Open File</div>
|
|
<div id="openText" class="elementText">Choose file to open...</div>
|
|
<select id="mySavedFiles" class="mySavedFiles"></select>
|
|
<br />
|
|
<button id="openBtn" class="elementBtn" type="button" onclick="loadFile()" style="margin-left: 70px">Open</button>
|
|
<button id="cancelBtn" class="elementBtn" type="button" onclick="closeElement('openDocument')">Cancel</button>
|
|
</div>
|
|
|
|
<div id="removeDocument" class="draggable">
|
|
<div id="removeDraggableHandle" class="handle">Delete File</div>
|
|
<div id="removeText" class="elementText">Choose file to remove...</div>
|
|
<select id="mySavedFiles2" class="mySavedFiles"></select>
|
|
<br />
|
|
<button id="removeBtn" class="elementBtn" type="button" onclick="removeFile()" style="margin-left: 70px">Remove</button>
|
|
<button id="cancelBtn2" class="elementBtn" type="button" onclick="closeElement('removeDocument')">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|