gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
523 lines (474 loc) • 21.8 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="A workflow diagram showing navigation between web pages, with an editable list of comments and to-dos."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
<title>Page Flow</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
<div class="md:pl-4">
<a class="text-white hover:text-white no-underline hover:no-underline
font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
<h1 class="my-0 p-1 ">GoJS</h1>
</a>
</div>
<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
</ul>
</div>
</div>
<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
<div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="../release/go.js"></script>
<div id="allSampleContent" class="p-4 w-full">
<script id="code">
var isDarkMode = false; // is accessed by html elements (button) so must be declared in script scope
function init() {
// Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
// For details, see https://gojs.net/latest/intro/buildingObjects.html
const $ = go.GraphObject.make; // for conciseness in defining templates
// colors are almost entirely defined up here to allow for easier theming
var yellow = "#FFB400"
var green = "#7FB800";
var blue = "#00A6ED";
var red = "#D73909";
var white = "#DCE9F9";
var blueShadow = "#407090";
var greenShadow = "#406050";
var yellowShadow = "#804040";
var redShadow = "#705020";
var whiteShadow = "#404050";
var selectColor = "dodgerBlue";
var undesiredEventTextColor = "whitesmoke";
var lineColor = "#0D2C54";
var commentLineColor = "darkgreen";
var darkModeBackgroundColor = "#06162a";
var lightModeBackgroundColor = "#FFFFFF";
var bigfont = "bold 13pt Helvetica, Arial, sans-serif";
var smallfont = "bold 11pt Helvetica, Arial, sans-serif";
// Common text styling
function textStyle() {
return {
margin: 10,
wrap: go.TextBlock.WrapFit,
textAlign: "center",
editable: true,
font: bigfont
}
}
myDiagram =
new 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: 100,
alignOption: go.LayeredDigraphLayout.AlignAll
}),
"undoManager.isEnabled": true,
});
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener("Modified", 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.slice(0, idx);
}
});
var defaultAdornment =
$(go.Adornment, "Spot",
$(go.Panel, "Auto",
$(go.Shape, { fill: null, stroke: selectColor, strokeWidth: 3 }),
$(go.Placeholder)),
// the button to create a "next" node, at the top-right corner
$("Button",
{
alignment: new go.Spot(1, 0, -5, 5),
click: addNodeAndLink
}, // this function is defined below
new go.Binding("visible", "", a => !a.diagram.isReadOnly).ofObject(),
$(go.Shape, "PlusLine", { desiredSize: new go.Size(6, 6) })
)
);
// define the Node template
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
selectionAdornmentTemplate: defaultAdornment,
isShadowed: true,
shadowBlur: 2,
shadowColor: yellowShadow,
shadowOffset: new go.Point(4, 6)
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "Rectangle",
{
fill: yellow, stroke: "rgba(0, 0, 0, 0)",
portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer",
toEndSegmentLength: 50, fromEndSegmentLength: 40
},
),
$(go.TextBlock, "Page",
{
margin: 10,
font: bigfont,
editable: true
},
new go.Binding("text", "text").makeTwoWay())
);
myDiagram.nodeTemplateMap.add("Source",
$(go.Node, "Auto",
{
isShadowed: true,
shadowBlur: 2,
shadowColor: blueShadow,
shadowOffset: new go.Point(4, 6)
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "RoundedRectangle",
{
name: "SHAPE",
fill: blue, stroke: "rgba(0, 0, 0, 0)",
portId: "", fromLinkable: true, cursor: "pointer", fromEndSegmentLength: 40
},
new go.Binding("fill", "color")),
$(go.TextBlock, "Source", textStyle(),
new go.Binding("text", "text").makeTwoWay())
));
myDiagram.nodeTemplateMap.add("DesiredEvent",
$(go.Node, "Auto",
{
isShadowed: true,
shadowBlur: 2,
shadowColor: greenShadow,
shadowOffset: new go.Point(4, 6)
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "RoundedRectangle",
{ fill: green, stroke: null, portId: "", toLinkable: true, toEndSegmentLength: 50 },
new go.Binding("fill", "color")),
$(go.TextBlock, "Success!", textStyle(),
new go.Binding("text", "text").makeTwoWay())
));
// Undesired events have special adornments that allows adding and removing additional "reasons"
var UndesiredEventAdornmentModify =
$(go.Adornment, "Spot",
$(go.Panel, "Auto",
$(go.Shape, { fill: null, stroke: selectColor, strokeWidth: 4 }),
$(go.Placeholder)),
// the button to create a new reason, at the bottom-left corner
$("Button",
{
alignment: new go.Spot(1, 1, -5, -5),
click: addReason
}, // this function is defined below
new go.Binding("visible", "", a => !a.diagram.isReadOnly).ofObject(),
$(go.Shape, "TriangleDown", { desiredSize: new go.Size(10, 10) })
),
//the button to remove the most recent reason, above the "create" button
$("Button",
{
alignment: new go.Spot(1, 1, -5, -22),
click: removeReason
}, //this function is also defined below
new go.Binding("visible", "", a => !a.diagram.isReadOnly).ofObject(),
$(go.Shape, "TriangleUp", { desiredSize: new go.Size(10, 10) })
)
);
var reasonTemplate = $(go.Panel, "Horizontal",
$(go.TextBlock, "•",
{
margin: 4,
stroke: undesiredEventTextColor,
font: smallfont
}),
$(go.TextBlock, "Reason",
{
margin: 4,
maxSize: new go.Size(200, NaN),
wrap: go.TextBlock.WrapFit,
stroke: undesiredEventTextColor,
editable: true,
font: smallfont
},
new go.Binding("text", "text").makeTwoWay())
);
myDiagram.nodeTemplateMap.add("UndesiredEvent",
$(go.Node, "Auto",
{
isShadowed: true,
shadowBlur: 2,
shadowColor: redShadow,
shadowOffset: new go.Point(4, 6)
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{ selectionAdornmentTemplate: UndesiredEventAdornmentModify },
$(go.Shape, "RoundedRectangle",
{ fill: red, stroke: null, portId: "", toLinkable: true, toEndSegmentLength: 50 }),
$(go.Panel, "Vertical", { defaultAlignment: go.Spot.Top },
$(go.TextBlock, "Drop", textStyle(),
{
stroke: undesiredEventTextColor,
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: white, stroke: null, fromLinkable: true }),
$(go.TextBlock, "A comment",
{
margin: 10,
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 add 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 remove button will remove the most recent text object added to the panel
function removeReason(e, obj) {
var adorn = obj.part;
if (adorn === null) return;
e.handled = true;
var arr = adorn.adornedPart.data.reasonsList;
myDiagram.startTransaction("remove reason");
myDiagram.model.removeArrayItem(arr, arr.length - 1);
myDiagram.commitTransaction("remove 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
{ curve: go.Link.Bezier,
toShortLength: 5,
fromSpot: go.Spot.Right,
toSpot: go.Spot.Left
},
$(go.Shape, // the link shape
{ stroke: lineColor, strokeWidth: 2.5 }),
$(go.Shape, // the arrowhead
{ toArrow: "Kite", fill: lineColor, stroke: lineColor, scale: 1.5 })
);
// comments will have different links
myDiagram.linkTemplateMap.add("Comment",
$(go.Link,
{
fromSpot: go.Spot.Center,
toSpot: go.Spot.Center
},
$(go.Shape, { strokeWidth: 1.5, stroke: "darkgreen" })
)
);
// when a new link is created, determine what template to use
myDiagram.addDiagramListener("LinkDrawn", e => {
var link = e.subject;
if(link.fromNode.category === "Comment") {
link.category = "Comment";
}
});
var palette =
new 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);
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div style="width: 100%; display: flex; justify-content: space-between; background-color: #FCFCFC">
<div id="myPaletteDiv" style="width: 100px; margin-right: 2px; background-color: whitesmoke; border: 1px solid black; position: relative;"><canvas tabindex="0" style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; touch-action: none; width: 99px; height: 479px;" width="148" height="718">This text is displayed if your browser does not support the Canvas HTML element.</canvas><div style="position: absolute; overflow: auto; width: 99px; height: 479px; z-index: 1;"><div style="position: absolute; width: 1px; height: 1px;"></div></div></div>
<div id="myDiagramDiv" style="flex-grow: 1; height: 480px; border: 1px solid black; position: relative;"><canvas tabindex="0" style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; touch-action: none; width: 953px; height: 479px;" width="1429" height="718">This text is displayed if your browser does not support the Canvas HTML element.</canvas><div style="position: absolute; overflow: auto; width: 953px; height: 479px; z-index: 1;"><div style="position: absolute; width: 1px; height: 1px;"></div></div></div>
</div>
<p>
This workflow diagram uses the <a href="../api/symbols/LayeredDigraphLayout.html" target="api">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 href="../api/symbols/Palette.html" target="api">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 href="../api/symbols/TextEditingTool.html" target="api">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 href="../api/symbols/LinkingTool.html" target="api">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()" disabled="">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?"} ]},
{ "key": 300, "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>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>