create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
287 lines (245 loc) • 11.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="Customize the pinch-zooming action of GoJS." />
<meta itemprop="description" content="Customize the pinch-zooming action of GoJS." />
<meta property="og:description" content="Customize the pinch-zooming action of GoJS." />
<meta name="twitter:description" content="Customize the pinch-zooming action of GoJS." />
<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="Resizing via Pinch Zooming" />
<meta property="og:title" content="Resizing via Pinch Zooming" />
<meta name="twitter:title" content="Resizing via Pinch Zooming" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/minimal.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/minimal.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/minimal.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/pinchResizing.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/pinchResizing.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Resizing via Pinch Zooming | 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">
// Override normal pinch zoom to zoom the selected node instead of the Diagram.
class PinchResizingTool extends go.ToolManager {
constructor(init) {
super();
this._originalScale = 1;
this._startDistance = 0; // how far apart the touches are at the start
this._isPinching = false;
if (init) Object.assign(this, init);
}
// Initiates pinch-zooming on multi-touch devices.
standardPinchZoomStart() {
const diagram = this.diagram;
if (diagram === null) return;
const e = diagram.lastInput;
const first = e.getMultiTouchViewPoint(0, new go.Point());
const second = e.getMultiTouchViewPoint(1, new go.Point());
if (!first.isReal() || !second.isReal()) {
return;
}
// event.isMultiTouch
// call doCancel to stop the rest of typical toolManager.domousedown/domousemove behavior
this.doCancel();
const node = diagram.selection.first();
if (node === null) return;
this._originalScale = node.scale;
this._startDistance = Math.sqrt(first.distanceSquaredPoint(second));
e.bubbles = false;
e.handled = true;
this._isPinching = true;
myDiagram.startTransaction('zoom node');
}
// Continues pinch-zooming (started by {@link #standardPinchZoomStart} on multi-touch devices.
standardPinchZoomMove() {
const diagram = this.diagram;
if (diagram === null) return;
const e = diagram.lastInput;
const first = e.getMultiTouchViewPoint(0, new go.Point());
const second = e.getMultiTouchViewPoint(1, new go.Point());
if (!first.isReal() || !second.isReal()) {
return;
}
// event.isMultiTouch
// call doCancel to stop the rest of typical toolManager.domousedown/domousemove behavior
this.doCancel();
var dist = Math.sqrt(first.distanceSquaredPoint(second));
var scale = dist / this._startDistance;
var node = diagram.selection.first();
if (node instanceof go.Node) node.scale = this._originalScale * scale;
e.bubbles = false;
e.handled = true;
}
doMouseUp() {
if (this._isPinching) {
myDiagram.commitTransaction('zoom node');
this._isPinching = false;
}
super.doMouseUp();
}
}
// end of PinchResizingTool
function init() {
myDiagram = new go.Diagram('myDiagramDiv', {
toolManager: new PinchResizingTool(),
'undoManager.isEnabled': true // enable undo & redo
});
// define a simple Node template
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')
);
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 }
]
);
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<!-- The DIV for the Diagram needs an explicit size or else we won't see anything.
This also adds a border to help see the edges of the viewport. -->
<div id="myDiagramDiv" style="border: solid 1px black; width: 400px; height: 400px"></div>
<p>
This sample gives an example of customizing
<a>Tool.standardPinchZoomStart</a> and <a>Tool.standardPinchZoomMove</a>. Select a node and pinch zoom to see the action modify the scale of the Node
instead of the scale of 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>Tools</h4>
<p>
<a href="../api/symbols/Tool.html" target="api">Tool</a>s handle all input events, such as mouse and keyboard interactions, in a Diagram.
There are many kinds of predefined Tool classes that implement all of the common operations that users do.
</p>
<p>
For flexibility and simplicity, all input events are canonicalized as <a href="../api/symbols/InputEvent.html" target="api">InputEvent</a>s and
redirected by the diagram to go to the <a href="../api/symbols/Diagram.html#currentTool" target="api">Diagram.currentTool</a>.
By default the Diagram.currentTool is an instance of <a href="../api/symbols/ToolManager.html" target="api">ToolManager</a> held as the <a href="../api/symbols/Diagram.html#toolManager" target="api">Diagram.toolManager</a>.
The ToolManager implements support for all mode-less tools.
The ToolManager is responsible for finding another tool that is ready to run and then making it the new current tool.
This causes the new tool to process all of the input events (mouse, keyboard, and touch) until the tool decides that it is finished,
at which time the diagram's current tool reverts back to the <a href="../api/symbols/Diagram.html#defaultTool" target="api">Diagram.defaultTool</a>, which is normally the ToolManager, again.
</p>
<p>
More information can be found in the <a href="../intro/tools.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#tools">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>