gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
380 lines (342 loc) • 15.2 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Page Flow</title>
<meta name="description" content="A workflow diagram showing navigation between web pages, with an editable list of comments and to-dos." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<script src="../release/go.js"></script>
<script src="../assets/js/goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
<script id="code">
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates
var yellowgrad = $(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" });
var greengrad = $(go.Brush, "Linear", { 0: "#98FB98", 1: "#9ACD32" });
var bluegrad = $(go.Brush, "Linear", { 0: "#B0E0E6", 1: "#87CEEB" });
var redgrad = $(go.Brush, "Linear", { 0: "#C45245", 1: "#871E1B" });
var whitegrad = $(go.Brush, "Linear", { 0: "#F0F8FF", 1: "#E6E6FA" });
var bigfont = "bold 13pt Helvetica, Arial, sans-serif";
var smallfont = "bold 11pt Helvetica, Arial, sans-serif";
// Common text styling
function textStyle() {
return {
margin: 6,
wrap: go.TextBlock.WrapFit,
textAlign: "center",
editable: true,
font: bigfont
}
}
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
// have mouse wheel events zoom in and out instead of scroll up and down
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
initialAutoScale: go.Diagram.Uniform,
"linkingTool.direction": go.LinkingTool.ForwardsOnly,
layout: $(go.LayeredDigraphLayout, { isInitial: false, isOngoing: false, layerSpacing: 50 }),
"undoManager.isEnabled": true
});
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener("Modified", function(e) {
var button = document.getElementById("SaveButton");
if (button) button.disabled = !myDiagram.isModified;
var idx = document.title.indexOf("*");
if (myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.substr(0, idx);
}
});
var defaultAdornment =
$(go.Adornment, "Spot",
$(go.Panel, "Auto",
$(go.Shape, { fill: null, stroke: "dodgerblue", strokeWidth: 4 }),
$(go.Placeholder)),
// the button to create a "next" node, at the top-right corner
$("Button",
{
alignment: go.Spot.TopRight,
click: addNodeAndLink
}, // this function is defined below
new go.Binding("visible", "", function(a) { return !a.diagram.isReadOnly; }).ofObject(),
$(go.Shape, "PlusLine", { desiredSize: new go.Size(6, 6) })
)
);
// define the Node template
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ selectionAdornmentTemplate: defaultAdornment },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// define the node's outer shape, which will surround the TextBlock
$(go.Shape, "Rectangle",
{
fill: yellowgrad, stroke: "black",
portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer",
toEndSegmentLength: 50, fromEndSegmentLength: 40
}),
$(go.TextBlock, "Page",
{
margin: 6,
font: bigfont,
editable: true
},
new go.Binding("text", "text").makeTwoWay()));
myDiagram.nodeTemplateMap.add("Source",
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "RoundedRectangle",
{
fill: bluegrad,
portId: "", fromLinkable: true, cursor: "pointer", fromEndSegmentLength: 40
}),
$(go.TextBlock, "Source", textStyle(),
new go.Binding("text", "text").makeTwoWay())
));
myDiagram.nodeTemplateMap.add("DesiredEvent",
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "RoundedRectangle",
{ fill: greengrad, portId: "", toLinkable: true, toEndSegmentLength: 50 }),
$(go.TextBlock, "Success!", textStyle(),
new go.Binding("text", "text").makeTwoWay())
));
// Undesired events have a special adornment that allows adding additional "reasons"
var UndesiredEventAdornment =
$(go.Adornment, "Spot",
$(go.Panel, "Auto",
$(go.Shape, { fill: null, stroke: "dodgerblue", strokeWidth: 4 }),
$(go.Placeholder)),
// the button to create a "next" node, at the top-right corner
$("Button",
{
alignment: go.Spot.BottomRight,
click: addReason
}, // this function is defined below
new go.Binding("visible", "", function(a) { return !a.diagram.isReadOnly; }).ofObject(),
$(go.Shape, "TriangleDown", { desiredSize: new go.Size(10, 10) })
)
);
var reasonTemplate = $(go.Panel, "Horizontal",
$(go.TextBlock, "Reason",
{
margin: new go.Margin(4, 0, 0, 0),
maxSize: new go.Size(200, NaN),
wrap: go.TextBlock.WrapFit,
stroke: "whitesmoke",
editable: true,
font: smallfont
},
new go.Binding("text", "text").makeTwoWay())
);
myDiagram.nodeTemplateMap.add("UndesiredEvent",
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{ selectionAdornmentTemplate: UndesiredEventAdornment },
$(go.Shape, "RoundedRectangle",
{ fill: redgrad, portId: "", toLinkable: true, toEndSegmentLength: 50 }),
$(go.Panel, "Vertical", { defaultAlignment: go.Spot.TopLeft },
$(go.TextBlock, "Drop", textStyle(),
{
stroke: "whitesmoke",
minSize: new go.Size(80, NaN)
},
new go.Binding("text", "text").makeTwoWay()),
$(go.Panel, "Vertical",
{
defaultAlignment: go.Spot.TopLeft,
itemTemplate: reasonTemplate
},
new go.Binding("itemArray", "reasonsList").makeTwoWay()
)
)
));
myDiagram.nodeTemplateMap.add("Comment",
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "Rectangle",
{ portId: "", fill: whitegrad, fromLinkable: true }),
$(go.TextBlock, "A comment",
{
margin: 9,
maxSize: new go.Size(200, NaN),
wrap: go.TextBlock.WrapFit,
editable: true,
font: smallfont
},
new go.Binding("text", "text").makeTwoWay())
// no ports, because no links are allowed to connect with a comment
));
// clicking the button on an UndesiredEvent node inserts a new text object into the panel
function addReason(e, obj) {
var adorn = obj.part;
if (adorn === null) return;
e.handled = true;
var arr = adorn.adornedPart.data.reasonsList;
myDiagram.startTransaction("add reason");
myDiagram.model.addArrayItem(arr, {});
myDiagram.commitTransaction("add reason");
}
// clicking the button of a default node inserts a new node to the right of the selected node,
// and adds a link to that new node
function addNodeAndLink(e, obj) {
var adorn = obj.part;
if (adorn === null) return;
e.handled = true;
var diagram = adorn.diagram;
diagram.startTransaction("Add State");
// get the node data for which the user clicked the button
var fromNode = adorn.adornedPart;
var fromData = fromNode.data;
// create a new "State" data object, positioned off to the right of the adorned Node
var toData = { text: "new" };
var p = fromNode.location;
toData.loc = p.x + 200 + " " + p.y; // the "loc" property is a string, not a Point object
// add the new node data to the model
var model = diagram.model;
model.addNodeData(toData);
// create a link data from the old node data to the new node data
var linkdata = {};
linkdata[model.linkFromKeyProperty] = model.getKeyForNodeData(fromData);
linkdata[model.linkToKeyProperty] = model.getKeyForNodeData(toData);
// and add the link data to the model
model.addLinkData(linkdata);
// select the new Node
var newnode = diagram.findNodeForData(toData);
diagram.select(newnode);
diagram.commitTransaction("Add State");
}
// replace the default Link template in the linkTemplateMap
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
new go.Binding("points").makeTwoWay(),
{ curve: go.Link.Bezier, toShortLength: 15 },
new go.Binding("curviness", "curviness"),
$(go.Shape, // the link shape
{ stroke: "#2F4F4F", strokeWidth: 2.5 }),
$(go.Shape, // the arrowhead
{ toArrow: "kite", fill: "#2F4F4F", stroke: null, scale: 2 })
);
myDiagram.linkTemplateMap.add("Comment",
$(go.Link, { selectable: false },
$(go.Shape, { strokeWidth: 2, stroke: "darkgreen" })));
var palette =
$(go.Palette, "myPaletteDiv", // create a new Palette in the HTML DIV element
{
// share the template map with the Palette
nodeTemplateMap: myDiagram.nodeTemplateMap,
autoScale: go.Diagram.Uniform // everything always fits in viewport
});
palette.model.nodeDataArray = [
{ category: "Source" },
{}, // default node
{ category: "DesiredEvent" },
{ category: "UndesiredEvent", reasonsList: [{}] },
{ category: "Comment" }
];
// read in the JSON-format data from the "mySavedModel" element
load();
layout();
}
function layout() {
myDiagram.layoutDiagram(true);
}
// Show the diagram's model in JSON format
function save() {
document.getElementById("mySavedModel").value = myDiagram.model.toJson();
myDiagram.isModified = false;
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
}
</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: 480px; border: solid 1px black"></div>
</div>
<p>
This workflow diagram uses the <a>LayeredDigraphLayout</a> to display some data about the flow of a fictional web site.
You can add to the Diagram by dragging Nodes from the <a>Palette</a> and by buttons that
appear when clicking on the Page (yellow) and Drop (red) Nodes.
</p>
<p>
All nodes in this sample have editable text.
To activate the <a>TextEditingTool</a>, click on a node to select it and click on its text once selected.
</p>
<p>
Several Link relationships are defined.
Hovering over the sides of many nodes changes the mouse cursor to a pointer.
Clicking and dragging in these areas creates a new link with the <a>LinkingTool</a>.
The node definitions contain several rules, for instance you cannot drag links to Source (blue) Nodes,
only from them, and you cannot have multiple links between the same two nodes, among others.
</p>
<p>
Most of the source code for this sample is in defining pleasing Node templates.
Much of the functionality seen is done with built-in GoJS components.
This is by no means an exhaustive sample, so be sure to check out the other samples to the left,
or take a look at the <a href="../intro/">Introductory Documents</a> for
a more structured tutorial on different GoJS concepts.
</p>
<button id="SaveButton" onclick="save()">Save</button>
<button onclick="load()">Load</button>
<button onclick="layout()">Layout</button>
Diagram Model saved in JSON format:
<br />
<textarea id="mySavedModel" style="width:100%;height:300px">
{ "class": "go.GraphLinksModel",
"copiesArrays": true,
"copiesArrayObjects": true,
"nodeDataArray": [
{ "key": -1, "category": "Source", "text": "Search" },
{ "key": -2, "category": "Source", "text": "Referral" },
{ "key": -3, "category": "Source", "text": "Advertising" },
{ "key": 0, "text": "Homepage" },
{ "key": 1, "text": "Products" },
{ "key": 2, "text": "Buy" },
{ "key": 3, "text": "Samples" },
{ "key": 5, "text": "Documentation" },
{ "key": 6, "text": "Download" },
{ "key": 100, "category": "DesiredEvent", "text": "Ordered!" },
{ "key": 101, "category": "DesiredEvent", "text": "Downloaded!" },
{ "key": 200, "category": "UndesiredEvent",
"reasonsList": [
{"text":"Needs redesign?"},
{"text":"Wrong Product?"} ]},
{ "key": 201, "category": "UndesiredEvent",
"reasonsList": [
{"text":"Need better samples?"},
{"text":"Bad landing page for Advertising?"} ]},
{ "key": 202, "category": "UndesiredEvent",
"reasonsList": [
{"text":"Reconsider Pricing?"},
{"text":"Confusing Cart?"} ]},
{ "category": "Comment", "text": "Add notes with general comments for the next team meeting" }
],
"linkDataArray": [
{ "from": -1, "to": 0 },
{ "from": -2, "to": 0 },
{ "from": -2, "to": 3 },
{ "from": -3, "to": 3 },
{ "from": 0, "to": 1 },
{ "from": 1, "to": 2 },
{ "from": 1, "to": 3 },
{ "from": 0, "to": 5 },
{ "from": 5, "to": 3 },
{ "from": 3, "to": 2 },
{ "from": 3, "to": 6 },
{ "from": 2, "to": 100 },
{ "from": 6, "to": 101 },
{ "from": 0, "to": 200 },
{ "from": 3, "to": 201 },
{ "from": 2, "to": 202 }
]
}
</textarea>
</div>
</body>
</html>