| 1 | <!DOCTYPE html>
|
| 2 | <html>
|
| 3 | <head>
|
| 4 | <title>Flowchart</title>
|
| 5 |
|
| 6 | <meta name="description" content="Interactive flowchart diagram implemented by GoJS in JavaScript for HTML." />
|
| 7 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
| 8 |
|
| 9 | <script src="../samples/assets/require.js"></script>
|
| 10 | <script src="../assets/js/goSamples.js"></script>
|
| 11 |
|
| 12 |
|
| 13 | <script>
|
| 14 | function init() {
|
| 15 | require(["flowchart"], function(app) {
|
| 16 | app.init();
|
| 17 | });
|
| 18 | }
|
| 19 | </script>
|
| 20 | </head>
|
| 21 | <body onload="init()">
|
| 22 | <div id="sample">
|
| 23 | <div style="width: 100%; display: flex; justify-content: space-between">
|
| 24 | <div id="myPaletteDiv" style="width: 100px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div>
|
| 25 | <div id="myDiagramDiv" style="flex-grow: 1; height: 750px; border: solid 1px black"></div>
|
| 26 | </div>
|
| 27 | <p>
|
| 28 | The FlowChart sample demonstrates several key features of GoJS,
|
| 29 | namely <a href="../intro/palette.html">Palette</a>s,
|
| 30 | <a href="../intro/links.html">Linkable nodes</a>, Drag/Drop behavior,
|
| 31 | <a href="../intro/textBlocks.html">Text Editing</a>, and the use of
|
| 32 | <a href="../intro/templateMaps.html">Node Template Maps</a> in Diagrams.
|
| 33 | </p>
|
| 34 | <p>
|
| 35 | Mouse-over a Node to view its ports.
|
| 36 | Drag from these ports to create new Links.
|
| 37 | Selecting Links allows you to re-shape and re-link them.
|
| 38 | Selecting a Node and then clicking its TextBlock will allow
|
| 39 | you to edit text (except on the Start and End Nodes).
|
| 40 | </p>
|
| 41 | <button id="SaveButton">Save</button>
|
| 42 | <button id="LoadButton">Load</button>
|
| 43 | Diagram Model saved in JSON format:
|
| 44 | <textarea id="mySavedModel" style="width:100%;height:300px">
|
| 45 | { "class": "go.GraphLinksModel",
|
| 46 | "linkFromPortIdProperty": "fromPort",
|
| 47 | "linkToPortIdProperty": "toPort",
|
| 48 | "nodeDataArray": [
|
| 49 | {"category":"Comment", "loc":"360 -10", "text":"Kookie Brittle", "key":-13},
|
| 50 | {"key":-1, "category":"Start", "loc":"175 0", "text":"Start"},
|
| 51 | {"key":0, "loc":"0 77", "text":"Preheat oven to 375 F"},
|
| 52 | {"key":1, "loc":"175 100", "text":"In a bowl, blend: 1 cup margarine, 1.5 teaspoon vanilla, 1 teaspoon salt"},
|
| 53 | {"key":2, "loc":"175 190", "text":"Gradually beat in 1 cup sugar and 2 cups sifted flour"},
|
| 54 | {"key":3, "loc":"175 270", "text":"Mix in 6 oz (1 cup) Nestle's Semi-Sweet Chocolate Morsels"},
|
| 55 | {"key":4, "loc":"175 370", "text":"Press evenly into ungreased 15x10x1 pan"},
|
| 56 | {"key":5, "loc":"352 85", "text":"Finely chop 1/2 cup of your choice of nuts"},
|
| 57 | {"key":6, "loc":"175 440", "text":"Sprinkle nuts on top"},
|
| 58 | {"key":7, "loc":"175 500", "text":"Bake for 25 minutes and let cool"},
|
| 59 | {"key":8, "loc":"175 570", "text":"Cut into rectangular grid"},
|
| 60 | {"key":-2, "category":"End", "loc":"175 640", "text":"Enjoy!"}
|
| 61 | ],
|
| 62 | "linkDataArray": [
|
| 63 | {"from":1, "to":2, "fromPort":"B", "toPort":"T"},
|
| 64 | {"from":2, "to":3, "fromPort":"B", "toPort":"T"},
|
| 65 | {"from":3, "to":4, "fromPort":"B", "toPort":"T"},
|
| 66 | {"from":4, "to":6, "fromPort":"B", "toPort":"T"},
|
| 67 | {"from":6, "to":7, "fromPort":"B", "toPort":"T"},
|
| 68 | {"from":7, "to":8, "fromPort":"B", "toPort":"T"},
|
| 69 | {"from":8, "to":-2, "fromPort":"B", "toPort":"T"},
|
| 70 | {"from":-1, "to":0, "fromPort":"B", "toPort":"T"},
|
| 71 | {"from":-1, "to":1, "fromPort":"B", "toPort":"T"},
|
| 72 | {"from":-1, "to":5, "fromPort":"B", "toPort":"T"},
|
| 73 | {"from":5, "to":4, "fromPort":"B", "toPort":"T"},
|
| 74 | {"from":0, "to":4, "fromPort":"B", "toPort":"T"}
|
| 75 | ]}
|
| 76 | </textarea>
|
| 77 | <button id="SVGButton">Print Diagram Using SVG</button>
|
| 78 | </div>
|
| 79 | </body>
|
| 80 | </html>
|