gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
139 lines (130 loc) • 6.21 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Comments</title>
<meta name="description" content="A tree-structured diagram annotated with balloon comments, automatically laid out." />
<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="../extensions/Figures.js"></script>
<script src="../extensions/BalloonLink.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;
myDiagram =
$(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
{
layout: $(go.TreeLayout,
{
angle: 90,
setsPortSpot: false,
setsChildPortSpot: false
}),
"undoManager.isEnabled": true,
// When a Node is deleted by the user, also delete all of its Comment Nodes.
// When a Comment Link is deleted, also delete the corresponding Comment Node.
"SelectionDeleting": function(e) {
var parts = e.subject; // the collection of Parts to be deleted, the Diagram.selection
// iterate over a copy of this collection,
// because we may add to the collection by selecting more Parts
parts.copy().each(function(p) {
if (p instanceof go.Node) {
var node = p;
node.findNodesConnected().each(function(n) {
// remove every Comment Node that is connected with this node
if (n.category === "Comment") {
n.isSelected = true; // include in normal deletion process
}
});
} else if (p instanceof go.Link && p.category === "Comment") {
var comlink = p; // a "Comment" Link
var comnode = comlink.fromNode;
// remove the Comment Node that is associated with this Comment Link,
if (comnode.category === "Comment") {
comnode.isSelected = true; // include in normal deletion process
}
}
});
}
});
myDiagram.nodeTemplate =
$("Node", "Auto",
$("Shape", "CreateRequest",
{ fill: "white" },
new go.Binding("fill", "color")),
$("TextBlock",
{ margin: 4 },
new go.Binding("text", "key"))
);
myDiagram.linkTemplate =
$("Link",
$("Shape",
{ strokeWidth: 1.5 }),
$("Shape",
{ toArrow: "Standard", stroke: null })
);
myDiagram.nodeTemplateMap.add("Comment",
$(go.Node, // this needs to act as a rectangular shape for BalloonLink,
{ background: "transparent" }, // which can be accomplished by setting the background.
$(go.TextBlock,
{ stroke: "brown", margin: 3 },
new go.Binding("text"))
));
myDiagram.linkTemplateMap.add("Comment",
// if the BalloonLink class has been loaded from the Extensions directory, use it
$((typeof BalloonLink === "function" ? BalloonLink : go.Link),
$(go.Shape, // the Shape.geometry will be computed to surround the comment node and
// point all the way to the commented node
{ stroke: "brown", strokeWidth: 1, fill: "lightyellow" })
));
myDiagram.model =
$(go.GraphLinksModel,
{
nodeDataArray: [
{ key: "Alpha", color: "orange" },
{ key: "Beta", color: "lightgreen" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" },
{ key: "A comment", text: "comment\nabout Alpha", category: "Comment" },
{ key: "B comment", text: "comment\nabout Beta", category: "Comment" },
{ key: "G comment", text: "comment about Gamma", category: "Comment" }
],
linkDataArray: [
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Alpha", to: "Delta" },
{ from: "A comment", to: "Alpha", category: "Comment" },
{ from: "B comment", to: "Beta", category: "Comment" },
{ from: "G comment", to: "Gamma", category: "Comment" }
]
});
// show the model in JSON format
document.getElementById("savedModel").textContent = myDiagram.model.toJson();
}
</script>
</head>
<body onload="init()">
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px;"></div>
<p>
<b>GoJS</b> supports the notion of "Comment"s.
A "Comment" is a node that is linked with another node but is positioned by some layouts to go along with that other node,
rather than be laid out like a regular node and link.
</p>
<p>
In this sample there are three "Comment" nodes, connected with regular nodes by three "Comment" links.
Node and link data are marked as "Comment"s by specifying "Comment" as the category.
But the "Comment" nodes and links have a different default template, and thus a different appearance, than regular nodes and links.
You can specify your own templates for "Comment" nodes and "Comment" links.
The "Comment" link template defined here uses the <code>BalloonLink</code> class defined in <a href="../extensions/BalloonLink.js">BalloonLink.js</a> in the Extensions directory.
</p>
<div style="display: inline">
Initial Diagram.model saved in JSON format:<br />
<pre id="savedModel"></pre>
</div>
</div>
</body>
</html>