create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
290 lines (254 loc) • 12.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 variation of a monitoring diagram where the objects of interest maintain a constant size while the user zooms in and out on the map." />
<meta itemprop="description" content="A variation of a monitoring diagram where the objects of interest maintain a constant size while the user zooms in and out on the map." />
<meta property="og:description" content="A variation of a monitoring diagram where the objects of interest maintain a constant size while the user zooms in and out on the map." />
<meta name="twitter:description" content="A variation of a monitoring diagram where the objects of interest maintain a constant size while the user zooms in and out on the map." />
<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="Constant Size Nodes While Zooming in or out" />
<meta property="og:title" content="Constant Size Nodes While Zooming in or out" />
<meta name="twitter:title" content="Constant Size Nodes While Zooming in or out" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/kittenmonitor.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/kittenmonitor.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/kittenmonitor.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/constantSize.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/constantSize.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Constant Size Nodes While Zooming in or out | 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() {
const TIME_STEP = 2000;
myDiagram = new go.Diagram('myDiagramDiv', {
initialContentAlignment: go.Spot.TopLeft,
isReadOnly: true, // allow selection but not moving or copying or deleting
'toolManager.hoverDelay': 100, // how quickly tooltips are shown
'toolManager.mouseWheelBehavior': go.WheelMode.Zoom // mouse wheel zooms instead of scrolls
});
// the background image, a floor plan
myDiagram.add(
new go.Part({ // this Part is not bound to any model data
width: 840,
height: 570,
layerName: 'Background',
position: new go.Point(0, 0),
selectable: false,
pickable: false
})
.add(
new go.Picture('https://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg')
)
);
// the template for each kitten, for now just a colored circle
myDiagram.nodeTemplate =
new go.Node({
locationSpot: go.Spot.Center,
// this tooltip shows the name and picture of the kitten
toolTip:
go.GraphObject.build('ToolTip')
.add(
new go.Panel('Vertical')
.add(
new go.Picture()
.bind('source', 'src', s => 'images/' + s + '.png'),
new go.TextBlock({ margin: 3 })
.bind('text', 'key')
)
) // end Adornment
}) // at center of node
.bind('location', 'loc') // specified by data
.trigger('location', { duration: TIME_STEP, easing: go.Animation.EaseLinear })
.add(
new go.Shape('Circle', { width: 12, height: 12, stroke: null })
.bind('fill', 'color') // also specified by data
);
// pretend there are four kittens
myDiagram.model.nodeDataArray = [
{ key: 'Alonzo', src: '50x40', loc: new go.Point(220, 130), color: 'blue' },
{ key: 'Coricopat', src: '55x55', loc: new go.Point(420, 250), color: 'green' },
{ key: 'Garfield', src: '60x90', loc: new go.Point(640, 450), color: 'red' },
{ key: 'Demeter', src: '80x50', loc: new go.Point(140, 350), color: 'purple' }
];
// This code keeps all nodes at a constant size in the viewport,
// by adjusting for any scaling done by zooming in or out.
// This code ignores simple Parts;
// Links will automatically be rerouted as Nodes change size.
var origscale = NaN;
myDiagram.addDiagramListener('InitialLayoutCompleted', e => origscale = myDiagram.scale);
myDiagram.addDiagramListener('ViewportBoundsChanged', e => {
if (isNaN(origscale)) return;
var newscale = myDiagram.scale;
if (e.subject.scale === newscale) return; // optimization: don't scale Nodes when just scrolling/panning
myDiagram.skipsUndoManager = true;
myDiagram.startTransaction('scale Nodes');
myDiagram.nodes.each(node => {
node.scale = origscale / newscale;
});
myDiagram.commitTransaction('scale Nodes');
myDiagram.skipsUndoManager = false;
});
// simulate some real-time position monitoring, once every 2 seconds
function randomMovement() {
var model = myDiagram.model;
model.startTransaction('update locations');
var arr = model.nodeDataArray;
var picture = myDiagram.parts.first();
for (var i = 0; i < arr.length; i++) {
var data = arr[i];
var pt = data.loc;
var x = pt.x + 20 * Math.random() - 10;
var y = pt.y + 20 * Math.random() - 10;
// make sure the kittens stay inside the house
var b = picture.actualBounds;
if (x < b.x || x > b.right) x = pt.x;
if (y < b.y || y > b.bottom) y = pt.y;
model.setDataProperty(data, 'loc', new go.Point(x, y));
}
model.commitTransaction('update locations');
}
function loop() {
setTimeout(() => {
randomMovement();
loop();
}, TIME_STEP);
}
loop(); // start the simulation
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width: 100%; height: 600px"></div>
<p>
This diagram displays a monitored floor plan with several nodes
(representing kittens) to view in real-time. Every two seconds the <a>Part.location</a>
of the kittens is updated. The location has a linear <a>AnimationTrigger</a>
so that the motion appears smooth.
</p>
<p>The <a href="../intro/tooltips.html">Tooltip</a> for each kitten shows its name and photo.</p>
<p>
When you zoom in or out the effective size of each Node is kept constant by changing its
<a>GraphObject.scale</a>.
</p>
<p>
See <a href="./#monitoring">monitoring samples</a> for more samples like this.
</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>ToolTips</h4>
<p>
A tooltip is an <a href="../api/symbols/Adornment.html" target="api">Adornment</a> that is shown when the mouse hovers over an object that has its <a href="../api/symbols/GraphObject.html#toolTip" target="api">GraphObject.toolTip</a> set.
The tooltip part is bound to the same data as the part itself.
</p>
<p>
It is typical to implement a tooltip as a "ToolTip" Panel holding a <a href="../api/symbols/TextBlock.html" target="api">TextBlock</a> or a Panel of TextBlocks and other objects.
Each "ToolTip" is just an "Auto" Panel <a href="../api/symbols/Adornment.html" target="api">Adornment</a> that is shadowed, and where the border is a rectangular <a href="../api/symbols/Shape.html" target="api">Shape</a> with a light gray fill.
However you can implement the tooltip as any arbitrarily complicated Adornment.
</p>
<p>
More information can be found in the <a href="../intro/tooltips.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#tooltips">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
</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>