markgojs

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BPMN Editor</title>  <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>   <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>