|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>Flowchart</title>
|
|
|
|
|
|
<meta name="description" content="Interactive flowchart diagram implemented by GoJS in JavaScript for HTML." />
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
|
|
|
|
|
|
|
|
|
|
|
|
<script src="../samples/assets/require.js"></script>
|
|
|
|
|
|
<script src="../assets/js/goSamples.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- requires minimal.js, built from minimal.ts -->
|
|
|
|
|
|
<script>
|
|
|
|
|
|
function init() {
|
|
|
|
|
|
require(["flowchart"], function(app) {
|
|
|
|
|
|
app.init();
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body onload="init()">
|
|
|
|
|
|
<div id="sample">
|
|
|
|
|
|
<div style="width: 100%; display: flex; justify-content: space-between">
|
|
|
|
|
|
<div id="myPaletteDiv" style="width: 100px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div>
|
|
|
|
|
|
<div id="myDiagramDiv" style="flex-grow: 1; height: 750px; border: solid 1px black"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
The FlowChart sample demonstrates several key features of GoJS,
|
|
|
|
|
|
namely <a href="../intro/palette.html">Palette</a>s,
|
|
|
|
|
|
<a href="../intro/links.html">Linkable nodes</a>, Drag/Drop behavior,
|
|
|
|
|
|
<a href="../intro/textBlocks.html">Text Editing</a>, and the use of
|
|
|
|
|
|
<a href="../intro/templateMaps.html">Node Template Maps</a> in Diagrams.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Mouse-over a Node to view its ports.
|
|
|
|
|
|
Drag from these ports to create new Links.
|
|
|
|
|
|
Selecting Links allows you to re-shape and re-link them.
|
|
|
|
|
|
Selecting a Node and then clicking its TextBlock will allow
|
|
|
|
|
|
you to edit text (except on the Start and End Nodes).
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<button id="SaveButton">Save</button>
|
|
|
|
|
|
<button id="LoadButton">Load</button>
|
|
|
|
|
|
Diagram Model saved in JSON format:
|
|
|
|
|
|
<textarea id="mySavedModel" style="width:100%;height:300px">
|
|
|
|
|
|
{ "class": "go.GraphLinksModel",
|
|
|
|
|
|
"linkFromPortIdProperty": "fromPort",
|
|
|
|
|
|
"linkToPortIdProperty": "toPort",
|
|
|
|
|
|
"nodeDataArray": [
|
|
|
|
|
|
{"category":"Comment", "loc":"360 -10", "text":"Kookie Brittle", "key":-13},
|
|
|
|
|
|
{"key":-1, "category":"Start", "loc":"175 0", "text":"Start"},
|
|
|
|
|
|
{"key":0, "loc":"0 77", "text":"Preheat oven to 375 F"},
|
|
|
|
|
|
{"key":1, "loc":"175 100", "text":"In a bowl, blend: 1 cup margarine, 1.5 teaspoon vanilla, 1 teaspoon salt"},
|
|
|
|
|
|
{"key":2, "loc":"175 190", "text":"Gradually beat in 1 cup sugar and 2 cups sifted flour"},
|
|
|
|
|
|
{"key":3, "loc":"175 270", "text":"Mix in 6 oz (1 cup) Nestle's Semi-Sweet Chocolate Morsels"},
|
|
|
|
|
|
{"key":4, "loc":"175 370", "text":"Press evenly into ungreased 15x10x1 pan"},
|
|
|
|
|
|
{"key":5, "loc":"352 85", "text":"Finely chop 1/2 cup of your choice of nuts"},
|
|
|
|
|
|
{"key":6, "loc":"175 440", "text":"Sprinkle nuts on top"},
|
|
|
|
|
|
{"key":7, "loc":"175 500", "text":"Bake for 25 minutes and let cool"},
|
|
|
|
|
|
{"key":8, "loc":"175 570", "text":"Cut into rectangular grid"},
|
|
|
|
|
|
{"key":-2, "category":"End", "loc":"175 640", "text":"Enjoy!"}
|
|
|
|
|
|
],
|
|
|
|
|
|
"linkDataArray": [
|
|
|
|
|
|
{"from":1, "to":2, "fromPort":"B", "toPort":"T"},
|
|
|
|
|
|
{"from":2, "to":3, "fromPort":"B", "toPort":"T"},
|
|
|
|
|
|
{"from":3, "to":4, "fromPort":"B", "toPort":"T"},
|
|
|
|
|
|
{"from":4, "to":6, "fromPort":"B", "toPort":"T"},
|
|
|
|
|
|
{"from":6, "to":7, "fromPort":"B", "toPort":"T"},
|
|
|
|
|
|
{"from":7, "to":8, "fromPort":"B", "toPort":"T"},
|
|
|
|
|
|
{"from":8, "to":-2, "fromPort":"B", "toPort":"T"},
|
|
|
|
|
|
{"from":-1, "to":0, "fromPort":"B", "toPort":"T"},
|
|
|
|
|
|
{"from":-1, "to":1, "fromPort":"B", "toPort":"T"},
|
|
|
|
|
|
{"from":-1, "to":5, "fromPort":"B", "toPort":"T"},
|
|
|
|
|
|
{"from":5, "to":4, "fromPort":"B", "toPort":"T"},
|
|
|
|
|
|
{"from":0, "to":4, "fromPort":"B", "toPort":"T"}
|
|
|
|
|
|
]}
|
|
|
|
|
|
</textarea>
|
|
|
|
|
|
<button id="SVGButton">Print Diagram Using SVG</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
