gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
159 lines (148 loc) • 8.38 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="When focussing on a node, scroll with animation to it and show a magnified image of it shrinking in place."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
<title>Drawing Attention to a Node</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;
myDiagram =
new go.Diagram("myDiagramDiv",
{
// allow some empty space to appear when scrolled to the edge of the document
scrollMargin: 200,
// the layout does not really matter for this sample
layout: $(go.GridLayout, { wrappingWidth: 4000 }),
"InitialLayoutCompleted": e => {
// wait until initial layout and initial animation are finished,
// then select the node and scroll to it with its own animation
var node = null; // you might choose a particular node in your app
setTimeout(() => focusOnNode(node),
e.diagram.animationManager.duration);
}
});
// the templates do not really matter for this sample
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ width: 120, height: 60 },
$(go.Shape,
new go.Binding("fill")),
$(go.TextBlock,
new go.Binding("text"))
);
// create enough nodes so that only part of the document will fit in the viewport
var arr = [];
for (var i = 0; i < 1000; i++) {
var color = go.Brush.randomColor();
arr.push({ text: color, fill: color });
}
myDiagram.model = new go.GraphLinksModel(arr);
}
function focusOnNode(node) { // node is optional
// If no node is given, choose a node at random, and select it.
if (!node) {
var arr = myDiagram.model.nodeDataArray;
var data = arr[Math.floor(Math.random() * arr.length)];
node = myDiagram.findNodeForData(data);
}
if (!node) return;
myDiagram.select(node);
// Set up an Animation that shows the node significantly larger than normal
// and then scales it back down to normal.
// This intentionally does not operate on the selected node itself,
// but on a temporary copy of it, so that the node and the model are unaffected.
var focus1 = node.copy();
focus1.layerName = "Tool";
focus1.isInDocumentBounds = false;
focus1.locationSpot = go.Spot.Center;
focus1.location = node.actualBounds.center;
// Figure out how large to scale it initially; assume maximum is one third of the viewport size
var w = Math.max(node.actualBounds.width, 1);
var h = Math.max(node.actualBounds.height, 1);
var viewscale = Math.max(myDiagram.viewportBounds.width/w, myDiagram.viewportBounds.height/h) / 3;
// Now create the Animation showing the temporary node scaled initially at VIEWSCALE
var anim = new go.Animation();
anim.addTemporaryPart(focus1, myDiagram);
anim.add(focus1, "scale", viewscale, 1.0); // and animating down to scale 1.0
// This animation occurs concurrently with the scrolling animation.
anim.duration = myDiagram.animationManager.duration + 1000;
anim.start();
// Meanwhile, make sure that the node is in the viewport, so the user can see it
myDiagram.commandHandler.scrollToPart(node);
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<p>
Click on this button to select a node at random, scroll to it, and animate a copy of it -- all to
draw attention to it.<br/>
<button onclick="focusOnNode()">Focus on random Node</button>
</p>
<p>
This calls <a>CommandHandler.scrollToPart</a>, which conducts an animation to scroll
the viewport to where the node is. Note that if the node is close to the edge of the document,
the viewport cannot be scrolled so that the node is nearer to the center of the viewport unless you
increase the <a>Diagram.scrollMargin</a>.
</p>
<p>
This also creates an <a>Animation</a> that operates on a temporary copy of the selected node,
making it appear much larger but animating the scale so that it appears to shrink to be
the selected node where it is in the diagram.
</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>