create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
297 lines (254 loc) • 12 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="Infinite scrolling and custom limits on Diagram position and scale." />
<meta itemprop="description" content="Infinite scrolling and custom limits on Diagram position and scale." />
<meta property="og:description" content="Infinite scrolling and custom limits on Diagram position and scale." />
<meta name="twitter:description" content="Infinite scrolling and custom limits on Diagram position and scale." />
<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="Diagram Scroll Modes" />
<meta property="og:title" content="Diagram Scroll Modes" />
<meta name="twitter:title" content="Diagram Scroll Modes" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/scrollmodes.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/scrollmodes.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/scrollmodes.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/scrollModes.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/scrollModes.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Diagram Scroll Modes | 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>
<link rel="stylesheet" href="../assets/css/prism.css"/>
<script src="../assets/js/prism.js"></script>
<div id="allSampleContent" class="p-4 w-full">
<script id="code">
function init() {
myDiagram = new go.Diagram('myDiagramDiv', {
minScale: 0.25, // so that the contents and the grid cannot appear too small
grid:
new go.Panel('Grid')
.add(
new go.Shape('LineH', { stroke: 'gray', strokeWidth: .5 }),
new go.Shape('LineH', { stroke: 'darkslategray', strokeWidth: 1.5, interval: 10 }),
new go.Shape('LineV', { stroke: 'gray', strokeWidth: .5 }),
new go.Shape('LineV', { stroke: 'darkslategray', strokeWidth: 1.5, interval: 10 })
),
'draggingTool.isGridSnapEnabled': true,
'undoManager.isEnabled': true // enable undo & redo
});
myDiagram.nodeTemplate =
new go.Node('Auto') // the Shape will go around the TextBlock
.add(
new go.Shape('RoundedRectangle', { strokeWidth: 0 })
// Shape.fill is bound to Node.data.color
.bind('fill', 'color'),
new go.TextBlock({ margin: 8 }) // some room around the text
// TextBlock.text is bound to Node.data.text
.bind('text')
);
// create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: 'Alpha', color: 'lightblue' },
{ key: 2, text: 'Beta', color: 'orange' },
{ key: 3, text: 'Gamma', color: 'lightgreen' },
{ key: 4, text: 'Delta', color: 'pink' }
],
[
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 2, to: 2 },
{ from: 3, to: 4 },
{ from: 4, to: 1 }
]);
function positionfunc(diagram, pos) {
var size = diagram.grid.gridCellSize;
return new go.Point(
Math.round(pos.x / size.width) * size.width,
Math.round(pos.y / size.height) * size.height);
}
function scalefunc(diagram, scale) {
var oldscale = diagram.scale;
if (scale > oldscale) {
return oldscale + 0.25;
} else if (scale < oldscale) {
return oldscale - 0.25;
}
return oldscale;
}
var infscroll = document.getElementById('infscroll');
infscroll.addEventListener('change', e => {
myDiagram.startTransaction('change scroll mode');
myDiagram.scrollMode = infscroll.checked ? go.ScrollMode.Infinite : go.ScrollMode.Document;
myDiagram.commitTransaction('change scroll mode');
});
var poscomp = document.getElementById('poscomp');
poscomp.addEventListener('change', e => {
myDiagram.startTransaction('change position computation');
myDiagram.positionComputation = poscomp.checked ? positionfunc : null;
myDiagram.commitTransaction('change position computation');
});
var scalecomp = document.getElementById('scalecomp');
scalecomp.addEventListener('change', e => {
myDiagram.startTransaction('change scale computation');
myDiagram.scaleComputation = scalecomp.checked ? scalefunc : null;
myDiagram.commitTransaction('change scale computation');
});
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px;margin-bottom: 1rem;"></div>
<p>
This sample demonstrates the scrolling and scaling options that have been
available since <strong style="display: inline-block;">GoJS 1.5</strong>.
Enable and disable the options and interact with the <a>Diagram</a> to see
how they work.
</p>
<p>
<label><input id="infscroll" type="checkbox" />Enable Infinite Scrolling, setting <a>Diagram.scrollMode</a></label>
<pre class="lang-js"><code>
myDiagram.scrollMode = checked ? go.ScrollMode.Infinite : go.ScrollMode.Document;
</code></pre>
</p>
<p>
<label><input id="poscomp" type="checkbox" />Enable <a>Diagram.positionComputation</a> function</label>
<pre class="lang-js"><code>
function positionfunc(diagram, pos) {
var size = diagram.grid.gridCellSize;
return new go.Point(
Math.round(pos.x / size.width) * size.width,
Math.round(pos.y / size.height) * size.height);
}
</code></pre>
</p>
<p>
<label><input id="scalecomp" type="checkbox" />Enable <a>Diagram.scaleComputation</a> function</label>
<pre class="lang-js"><code>
function scalefunc(diagram, scale) {
var oldscale = diagram.scale;
if (scale > oldscale) {
return oldscale + 0.25;
} else if (scale < oldscale) {
return oldscale - 0.25;
}
return oldscale;
}
</code></pre>
</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>Grid Patterns</h4>
<p>
<b>GoJS</b> provides functionality to display a grid of lines drawn at regular intervals.
Grid Panels can also force dragged parts to be aligned on grid points, and resize parts to be multiples of the grid cell size.
</p>
<p>
Grids are implemented using a type of <a href="../api/symbols/Panel.html" target="api">Panel</a>, <a href="../api/symbols/PanelLayout.html#Grid" target="api">Panel.Grid</a>.
Grid Panels, like most other types of Panels, can be used within <a href="../api/symbols/Node.html" target="api">Node</a>s or any other kind of <a href="../api/symbols/Part.html" target="api">Part</a>.
However when they are used as the <a href="../api/symbols/Diagram.html#grid" target="api">Diagram.grid</a>, they are effectively infinite in extent.
</p>
<p>
More information can be found in the <a href="../intro/grids.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#grid">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>