gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
187 lines (175 loc) • 9.6 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 tree-structured diagram annotated with balloon comments, automatically laid out."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
<title>Comments</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 src="../extensions/BalloonLink.js"></script>
<script id="code">
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;
myDiagram =
new go.Diagram("myDiagramDiv", // create a Diagram for the DIV HTML element
{
layout: $(go.TreeLayout,
{
angle: 90,
setsPortSpot: false,
setsChildPortSpot: false,
arrangement: go.TreeLayout.ArrangementHorizontal
}),
"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": 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(p => {
if (p instanceof go.Node) {
var node = p;
node.findNodesConnected().each(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",
{ fill: "white" },
new go.Binding("fill", "color")),
$("TextBlock",
{ margin: 6 },
new go.Binding("text"))
);
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 = new go.GraphLinksModel(
{
nodeDataArray: [
{ key: 1, text: "Alpha", color: "orange" },
{ key: 2, text: "Beta", color: "lightgreen" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" },
{ key: -1, text: "comment\nabout Alpha", category: "Comment" },
{ key: -2, text: "comment\nabout Beta", category: "Comment" },
{ key: -3, text: "comment\nabout Gamma", category: "Comment" }
],
linkDataArray: [
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 1, to: 4 },
{ from: -1, to: 1, category: "Comment" },
{ from: -2, to: 2, category: "Comment" },
{ from: -3, to: 3, category: "Comment" }
]
});
// show the model in JSON format
document.getElementById("savedModel").textContent = myDiagram.model.toJson();
}
window.addEventListener('DOMContentLoaded', init);
</script>
<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>
</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>