gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
391 lines (362 loc) • 17 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Flow Builder</title>
<meta name="description" content="An editor of flow diagrams that supports deletion by dropping onto a particular node and relinking by dragging a link." />
<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
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
allowCopy: false,
layout:
$(go.LayeredDigraphLayout,
{
setsPortSpots: false, // Links already know their fromSpot and toSpot
columnSpacing: 5,
isInitial: false,
isOngoing: false
}),
validCycle: go.Diagram.CycleNotDirected,
"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 graygrad = $(go.Brush, "Linear",
{ 0: "white", 0.1: "whitesmoke", 0.9: "whitesmoke", 1: "lightgray" });
myDiagram.nodeTemplate = // the default node template
$(go.Node, "Spot",
{ selectionAdorned: false, textEditable: true, locationObjectName: "BODY" },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// the main body consists of a Rectangle surrounding the text
$(go.Panel, "Auto",
{ name: "BODY" },
$(go.Shape, "Rectangle",
{ fill: graygrad, stroke: "gray", minSize: new go.Size(120, 21) },
new go.Binding("fill", "isSelected", function(s) { return s ? "dodgerblue" : graygrad; }).ofObject()),
$(go.TextBlock,
{
stroke: "black", font: "12px sans-serif", editable: true,
margin: new go.Margin(3, 3 + 11, 3, 3 + 4), alignment: go.Spot.Left
},
new go.Binding("text").makeTwoWay())
),
// output port
$(go.Panel, "Auto",
{ alignment: go.Spot.Right, portId: "from", fromLinkable: true, cursor: "pointer", click: addNodeAndLink },
$(go.Shape, "Circle",
{ width: 22, height: 22, fill: "white", stroke: "dodgerblue", strokeWidth: 3 }),
$(go.Shape, "PlusLine",
{ width: 11, height: 11, fill: null, stroke: "dodgerblue", strokeWidth: 3 })
),
// input port
$(go.Panel, "Auto",
{ alignment: go.Spot.Left, portId: "to", toLinkable: true },
$(go.Shape, "Circle",
{ width: 8, height: 8, fill: "white", stroke: "gray" }),
$(go.Shape, "Circle",
{ width: 4, height: 4, fill: "dodgerblue", stroke: null })
)
);
myDiagram.nodeTemplate.contextMenu =
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Rename"),
{ click: function(e, obj) { e.diagram.commandHandler.editTextBlock(); } },
new go.Binding("visible", "", function(o) { return o.diagram && o.diagram.commandHandler.canEditTextBlock(); }).ofObject()),
// add one for Editing...
$("ContextMenuButton",
$(go.TextBlock, "Delete"),
{ click: function(e, obj) { e.diagram.commandHandler.deleteSelection(); } },
new go.Binding("visible", "", function(o) { return o.diagram && o.diagram.commandHandler.canDeleteSelection(); }).ofObject())
);
myDiagram.nodeTemplateMap.add("Loading",
$(go.Node, "Spot",
{ selectionAdorned: false, textEditable: true, locationObjectName: "BODY" },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// the main body consists of a Rectangle surrounding the text
$(go.Panel, "Auto",
{ name: "BODY" },
$(go.Shape, "Rectangle",
{ fill: graygrad, stroke: "gray", minSize: new go.Size(120, 21) },
new go.Binding("fill", "isSelected", function(s) { return s ? "dodgerblue" : graygrad; }).ofObject()),
$(go.TextBlock,
{
stroke: "black", font: "12px sans-serif", editable: true,
margin: new go.Margin(3, 3 + 11, 3, 3 + 4), alignment: go.Spot.Left
},
new go.Binding("text", "text"))
),
// output port
$(go.Panel, "Auto",
{ alignment: go.Spot.Right, portId: "from", fromLinkable: true, click: addNodeAndLink },
$(go.Shape, "Circle",
{ width: 22, height: 22, fill: "white", stroke: "dodgerblue", strokeWidth: 3 }),
$(go.Shape, "PlusLine",
{ width: 11, height: 11, fill: null, stroke: "dodgerblue", strokeWidth: 3 })
)
));
myDiagram.nodeTemplateMap.add("End",
$(go.Node, "Spot",
{ selectionAdorned: false, textEditable: true, locationObjectName: "BODY" },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// the main body consists of a Rectangle surrounding the text
$(go.Panel, "Auto",
{ name: "BODY" },
$(go.Shape, "Rectangle",
{ fill: graygrad, stroke: "gray", minSize: new go.Size(120, 21) },
new go.Binding("fill", "isSelected", function(s) { return s ? "dodgerblue" : graygrad; }).ofObject()),
$(go.TextBlock,
{
stroke: "black", font: "12px sans-serif", editable: true,
margin: new go.Margin(3, 3 + 11, 3, 3 + 4), alignment: go.Spot.Left
},
new go.Binding("text", "text"))
),
// input port
$(go.Panel, "Auto",
{ alignment: go.Spot.Left, portId: "to", toLinkable: true },
$(go.Shape, "Circle",
{ width: 8, height: 8, fill: "white", stroke: "gray" }),
$(go.Shape, "Circle",
{ width: 4, height: 4, fill: "dodgerblue", stroke: null })
)
));
// dropping a node on this special node will cause the selection to be deleted;
// linking or relinking to this special node will cause the link to be deleted
myDiagram.nodeTemplateMap.add("Recycle",
$(go.Node, "Auto",
{
portId: "to", toLinkable: true, deletable: false,
layerName: "Background", locationSpot: go.Spot.Center
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{ dragComputation: function(node, pt, gridpt) { return pt; } },
{ mouseDrop: function(e, obj) { myDiagram.commandHandler.deleteSelection(); } },
$(go.Shape,
{ fill: "lightgray", stroke: "gray" }),
$(go.TextBlock, "Drop Here\nTo Delete",
{ margin: 5, textAlign: "center" })
));
// this is a click event handler that adds a node and a link to the diagram,
// connecting with the node on which the click occurred
function addNodeAndLink(e, obj) {
var fromNode = obj.part;
var diagram = fromNode.diagram;
diagram.startTransaction("Add State");
// get the node data for which the user clicked the button
var fromData = fromNode.data;
// create a new "State" data object, positioned off to the right of the fromNode
var p = fromNode.location.copy();
p.x += diagram.toolManager.draggingTool.gridSnapCellSize.width;
var toData = {
text: "new",
loc: go.Point.stringify(p)
};
// 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 = {
from: model.getKeyForNodeData(fromData),
to: 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);
// snap the new node to a valid location
newnode.location = diagram.toolManager.draggingTool.computeMove(newnode, p);
// then account for any overlap
shiftNodesToEmptySpaces();
diagram.commitTransaction("Add State");
}
// Highlight ports when they are targets for linking or relinking.
var OldTarget = null; // remember the last highlit port
function highlight(port) {
if (OldTarget !== port) {
lowlight(); // remove highlight from any old port
OldTarget = port;
port.scale = 1.3; // highlight by enlarging
}
}
function lowlight() { // remove any highlight
if (OldTarget) {
OldTarget.scale = 1.0;
OldTarget = null;
}
}
// Connecting a link with the Recycle node removes the link
myDiagram.addDiagramListener("LinkDrawn", function(e) {
var link = e.subject;
if (link.toNode.category === "Recycle") myDiagram.remove(link);
lowlight();
});
myDiagram.addDiagramListener("LinkRelinked", function(e) {
var link = e.subject;
if (link.toNode.category === "Recycle") myDiagram.remove(link);
lowlight();
});
myDiagram.linkTemplate =
$(go.Link,
{ selectionAdorned: false, fromPortId: "from", toPortId: "to", relinkableTo: true },
$(go.Shape,
{ stroke: "gray", strokeWidth: 2 },
{
mouseEnter: function(e, obj) { obj.strokeWidth = 5; obj.stroke = "dodgerblue"; },
mouseLeave: function(e, obj) { obj.strokeWidth = 2; obj.stroke = "gray"; }
})
);
function commonLinkingToolInit(tool) {
// the temporary link drawn during a link drawing operation (LinkingTool) is thick and blue
tool.temporaryLink =
$(go.Link, { layerName: "Tool" },
$(go.Shape, { stroke: "dodgerblue", strokeWidth: 5 }));
// change the standard proposed ports feedback from blue rectangles to transparent circles
tool.temporaryFromPort.figure = "Circle";
tool.temporaryFromPort.stroke = null;
tool.temporaryFromPort.strokeWidth = 0;
tool.temporaryToPort.figure = "Circle";
tool.temporaryToPort.stroke = null;
tool.temporaryToPort.strokeWidth = 0;
// provide customized visual feedback as ports are targeted or not
tool.portTargeted = function(realnode, realport, tempnode, tempport, toend) {
if (realport === null) { // no valid port nearby
lowlight();
} else if (toend) {
highlight(realport);
}
};
}
var ltool = myDiagram.toolManager.linkingTool;
commonLinkingToolInit(ltool);
// do not allow links to be drawn starting at the "to" port
ltool.direction = go.LinkingTool.ForwardsOnly;
var rtool = myDiagram.toolManager.relinkingTool;
commonLinkingToolInit(rtool);
// change the standard relink handle to be a shape that takes the shape of the link
rtool.toHandleArchetype =
$(go.Shape,
{ isPanelMain: true, fill: null, stroke: "dodgerblue", strokeWidth: 5 });
// use a special DraggingTool to cause the dragging of a Link to start relinking it
myDiagram.toolManager.draggingTool = new DragLinkingTool();
// detect when dropped onto an occupied cell
myDiagram.addDiagramListener("SelectionMoved", shiftNodesToEmptySpaces);
function shiftNodesToEmptySpaces() {
myDiagram.selection.each(function(node) {
if (!(node instanceof go.Node)) return;
// look for Parts overlapping the node
while (true) {
var exist = myDiagram.findObjectsIn(node.actualBounds,
// only consider Parts
function(obj) { return obj.part; },
// ignore Links and the dropped node itself
function(part) { return part instanceof go.Node && part !== node; },
// check for any overlap, not complete containment
true).first();
if (exist === null) break;
// try shifting down beyond the existing node to see if there's empty space
node.position = new go.Point(node.actualBounds.x, exist.actualBounds.bottom + 10);
}
});
}
// prevent nodes from being dragged to the left of where the layout placed them
myDiagram.addDiagramListener("LayoutCompleted", function(e) {
myDiagram.nodes.each(function(node) {
if (node.category === "Recycle") return;
node.minLocation = new go.Point(node.location.x, -Infinity);
});
});
load(); // load initial diagram from the mySavedModel textarea
}
function save() {
document.getElementById("mySavedModel").value = myDiagram.model.toJson();
myDiagram.isModified = false;
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
// if any nodes don't have a real location, explicitly do a layout
if (myDiagram.nodes.any(function(n) { return !n.location.isReal(); })) layout();
}
function layout() {
myDiagram.layoutDiagram(true);
}
// Define a custom tool that changes a drag operation on a Link to a relinking operation,
// but that operates like a normal DraggingTool otherwise.
function DragLinkingTool() {
go.DraggingTool.call(this);
this.isGridSnapEnabled = true;
this.isGridSnapRealtime = false;
this.gridSnapCellSize = new go.Size(182, 1);
this.gridSnapOrigin = new go.Point(5.5, 0);
}
go.Diagram.inherit(DragLinkingTool, go.DraggingTool);
// Handle dragging a link specially -- by starting the RelinkingTool on that Link
DragLinkingTool.prototype.doActivate = function() {
var diagram = this.diagram;
if (diagram === null) return;
this.standardMouseSelect();
var main = this.currentPart; // this is set by the standardMouseSelect
if (main instanceof go.Link) { // maybe start relinking instead of dragging
var relinkingtool = diagram.toolManager.relinkingTool;
// tell the RelinkingTool to work on this Link, not what is under the mouse
relinkingtool.originalLink = main;
// start the RelinkingTool
diagram.currentTool = relinkingtool;
// can activate it right now, because it already has the originalLink to reconnect
relinkingtool.doActivate();
relinkingtool.doMouseMove();
} else {
go.DraggingTool.prototype.doActivate.call(this);
}
};
// end DragLinkingTool
</script>
</head>
<body onload="init()">
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:500px"></div>
<button id="SaveButton" onclick="save()">Save</button>
<button onclick="load()">Load</button>
<button onclick="layout()">Do Layout</button>
<br />
<textarea id="mySavedModel" style="width:100%;height:300px">
{ "class": "go.GraphLinksModel",
"nodeDataArray": [
{ "key":1, "text":"Loading Screen", "category":"Loading" },
{ "key":2, "text":"Beginning" },
{ "key":3, "text":"Segment 1" },
{ "key":4, "text":"Segment 2" },
{ "key":5, "text":"Segment 3"},
{ "key":6, "text":"End Screen", "category":"End" },
{ "key":-2, "category": "Recycle" }
],
"linkDataArray": [
{ "from":1, "to":2 },
{ "from":2, "to":3 },
{ "from":2, "to":5 },
{ "from":3, "to":4 },
{ "from":4, "to":6 }
]
}
</textarea>
</div>
</body>
</html>