gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
204 lines (186 loc) • 9.72 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="Show the visual elements of a simple diagram as a tree diagram -- each Node is data bound to an element of the other Diagram."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
<title>GoJS Visual Tree</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">
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
myDiagram =
new go.Diagram("myDiagramDiv",
{
"undoManager.isEnabled": true
});
// define the "sample" Node template
myDiagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location").makeTwoWay(),
$(go.Shape, "RoundedRectangle", // define the node's outer shape
{ fill: "white", strokeWidth: 0 },
new go.Binding("fill", "color")),
$(go.TextBlock, // define the node's text
{ margin: 5 },
new go.Binding("text", "key"))
);
myDiagram.linkTemplate =
$(go.Link, go.Link.Bezier,
$(go.Shape, { strokeWidth: 1.5 }),
$(go.Shape, { toArrow: "Standard" })
);
myDiagram.model = new go.GraphLinksModel([
{ key: "Alpha", color: "lightblue", location: new go.Point(0, 0) },
{ key: "Beta", color: "pink", location: new go.Point(60, 80) }
], [
{ from: "Alpha", to: "Beta" },
{ from: "Beta", to: "Alpha" }
]);
// Now we can initialize a Diagram that looks at the visual tree that constitutes the Diagram above.
myVisualTree =
new go.Diagram("myVisualTree",
{
initialContentAlignment: go.Spot.Left,
initialAutoScale: go.Diagram.Uniform,
isReadOnly: true, // do not allow users to modify or select in this view
allowSelect: false,
layout: $(go.TreeLayout, { nodeSpacing: 5 }) // automatically laid out as a tree
});
myVisualTree.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "darkkhaki", stroke: null }), // assume a dark background
$(go.TextBlock,
{
font: "bold 13px Helvetica, bold Arial, sans-serif",
stroke: "black",
margin: 3
},
// bind the text to the Diagram/Layer/Part/GraphObject converted to a string
new go.Binding("text", "", x => {
// if the node represents a link, be sure to include the "to/from" data for that link
if (x instanceof go.Link) {
var s = "Link#" + x.data.__gohashid;
s += "(" + x.data.from + " to " + x.data.to + ")";
return s;
}
else return x.toString();
}))
);
myVisualTree.linkTemplate =
$(go.Link,
$(go.Shape, { stroke: "darkkhaki", strokeWidth: 2 })
);
drawVisualTree();
}
function drawVisualTree() {
var visualNodeDataArray = [];
// recursively walk the visual tree, collecting objects as we go
function traverseVisualTree(obj, parent) {
obj.vtkey = visualNodeDataArray.length;
visualNodeDataArray.push(obj);
if (parent) {
obj.parentKey = parent.vtkey;
}
if (obj instanceof go.Diagram) {
var lit = obj.layers;
while (lit.next()) traverseVisualTree(lit.value, obj);
} else if (obj instanceof go.Layer) {
var pit = obj.parts;
while (pit.next()) traverseVisualTree(pit.value, obj);
} else if (obj instanceof go.Panel) {
var eit = obj.elements;
while (eit.next()) traverseVisualTree(eit.value, obj);
}
}
traverseVisualTree(myDiagram, null);
myVisualTree.model =
go.GraphObject.make(go.TreeModel,
{
nodeKeyProperty: "vtkey",
nodeParentKeyProperty: "parentKey",
nodeDataArray: visualNodeDataArray
});
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<b>myDiagram</b>, the diagram being inspected:<br />
<div id="myDiagramDiv" style="border: 1px solid black; width: 300px; height: 200px"></div>
<br />
<button onclick="drawVisualTree()">Draw Visual Tree</button>
<br />
<br />
<b>myVisualTree</b>, showing the Layers, Nodes and Links that are in <b>myDiagram</b> above:<br />
<div id="myVisualTree" style="border: 1px solid black; background:#1F4963; width: 100%; height: 300px"></div>
<p>
This sample shows the actual visual tree of a running Diagram.
The Diagram that we inspect is named "myDiagramDiv" and initially contains two simple Nodes and two Links.
The Diagram below it is named "myVisualTree" and shows the visual tree of "myDiagramDiv".
</p>
<p>
You can also try selecting, copying, and deleting parts in <b>myDiagram</b>
and then click on "Draw Visual Tree" again to see how the visual tree in <b>myDiagram</b> changes.
</p>
<p>
The <b>traverseVisualTree</b> function is what walks the visual tree of "myDiagramDiv"
and constructs the corresponding Nodes and Links used in "myVisualTree".
The text for each Node in "myVisualTree" is data-bound to the actual Diagram/Layer/Part/GraphObject object.
That object is converted to a text string by using the <b>toString</b> method.
</p>
<p>See also the <a href="visualTreeGrouping.html">Visual Tree Using Groups</a> sample,
to show the same visual tree using nested groups. For more uses of the <a>TreeLayout</a>,
see the <a href="DOMTree.html">DOM Tree</a> and <a href="classHierarchy.html">Class Hierarchy Tree</a> samples.</p>
</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>