create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
251 lines (219 loc) • 11.3 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." />
<meta itemprop="description" content="When focussing on a node, scroll with animation to it and show a magnified image of it shrinking in place." />
<meta property="og:description" content="When focussing on a node, scroll with animation to it and show a magnified image of it shrinking in place." />
<meta name="twitter:description" content="When focussing on a node, scroll with animation to it and show a magnified image of it shrinking in place." />
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<meta itemprop="name" content="Animated Scrolling and Zooming Attention to Node" />
<meta property="og:title" content="Animated Scrolling and Zooming Attention to Node" />
<meta name="twitter:title" content="Animated Scrolling and Zooming Attention to Node" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/animatedfocus.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/animatedfocus.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/animatedfocus.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/animatedFocus.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/animatedFocus.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Animated Scrolling and Zooming Attention to Node | GoJS Diagramming Library
</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
<div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
<a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
href="../">
GoJS
</a>
<div class="relative">
<button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div id="topnavList" class="hidden md:block">
<div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
<a href="../learn/">Learn</a>
<a href="../samples/">Samples</a>
<a href="../intro/">Intro</a>
<a href="../api/">API</a>
<a href="../download.html">Download</a>
<a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
<a id="tc" href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
<a id="tb" href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</div>
</div>
</div>
</div>
</nav>
<script>
window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
var url = window
.location
.href
.toLowerCase();
var aTags = topnavList.getElementsByTagName('a');
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.endsWith('.html'))
lowerhref = lowerhref.slice(0, -5);
if (url.startsWith(lowerhref)) {
aTags[i]
.classList
.add('active');
break;
}
}
}
});
</script>
<div class="flex flex-col prose">
<div class="w-full max-w-screen-xl mx-auto">
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script>
<div id="allSampleContent" class="p-4 w-full">
<script id="code">
function init() {
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: new 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 =
new go.Node('Auto', { width: 120, height: 60 })
.add(
new go.Shape()
.bind('fill'),
new go.TextBlock()
.bind('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>
<div id="allTagDescriptions" class="p-4 w-full max-w-screen-xl mx-auto">
<hr/>
<h3 class="text-xl">GoJS Features in this sample</h3>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Animation</h4>
<p>
<b>GoJS</b> offers several built-in animations, enabled by default, as well as the ability to create arbitrary animations.
</p>
<p>
The <a href="../api/symbols/Diagram.html#animationManager" target="api">Diagram.animationManager</a> handles animations within a <a href="../api/symbols/Diagram.html" target="api">Diagram</a>.
The <a href="../api/symbols/AnimationManager.html" target="api">AnimationManager</a> automatically sets up and dispatches default animations, and has properties to customize and disable them.
Custom animations are possible by creating instances of <a href="../api/symbols/Animation.html" target="api">Animation</a> or <a href="../api/symbols/AnimationTrigger.html" target="api">AnimationTrigger</a>.
More information can be found in the <a href="../intro/animation.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#animation">Related samples</a>
</p>
<hr>
</div>
</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>