create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
174 lines (171 loc) • 41.2 kB
HTML
<html class="default" lang="en"><head><meta charSet="utf-8"/><link rel="stylesheet" href="../../assets/css/style.css"/><link rel="preconnect" href="https://rsms.me/"/><link rel="stylesheet" href="https://rsms.me/inter/inter.css"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>DragSelectingTool | GoJS API</title><meta name="description" content="Documentation for GoJS API"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><link rel="stylesheet" href="../assets/custom.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script type="text/javascript">// formerly in api.js
var hash = null;
function changeHash() {
var panels = document.getElementsByClassName("tsd-panel");
for (let i = 0; i < panels.length; i++) {
var p = panels[i];
p.classList.remove("targeted");
}
hash = window.location.hash.slice(1);
if (hash) {
var elt = document.getElementById(hash);
if (elt) elt.parentNode.classList.add("targeted");
}
}
document.addEventListener("DOMContentLoaded", changeHash);
window.addEventListener("hashchange", changeHash);</script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header><nav id="navTop" class="w-full h-[var(--topnav-h)] z-30 bg-[var(--color-background-secondary)] border-b border-b-[var(--color-accent)]"><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="../../index.html">GoJS</a><div class="relative"><button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-[var(--color-text)] 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"></path></svg></button><div id="topnavList" class="hidden md:block"><div class="absolute right-0 z-30 flex flex-col items-end rounded border border-[var(--color-accent)] p-4 pl-12 shadow bg-[var(--color-background-secondary)] text-[var(--color-text)] 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/index.html">Learn</a><a href="../../samples/index.html">Samples</a><a href="../../intro/index.html">Intro</a><a class="active" href="../../api/index.html">API</a><a href="../../download.html">Download</a><a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a><a href="https://nwoods.com/contact.html" target="_blank" rel="noopener" id="contactBtn">Contact</a><a href="https://nwoods.com/sales/index.html" target="_blank" rel="noopener" id="buyBtn">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
// done via active tag below, always API
}
});</script><div class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><div id="tsd-search-help"><code class="!text-lg">/</code> to search</div><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">GoJS API</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><div class="flex w-full max-w-screen-xl mx-auto px-2 items-center justify-between"><div><ul class="tsd-breadcrumb"><li><a href="../index.html">GoJS API</a></li><li><a href="DragSelectingTool.html">DragSelectingTool</a></li></ul><h1 class="flex items-center">Class DragSelectingTool</h1></div><div class="text-xs"><b>GoJS</b>® Diagramming Components<br/>version 3.1.0<br/>by <a href="https://nwoods.com/">Northwoods Software®</a></div></div></div><section class="tsd-panel tsd-hierarchy"><h4>Hierarchy (<a class="link" href="../hierarchy.html#DragSelectingTool">view full</a>)</h4><ul class="tsd-hierarchy"><li><a href="Tool.html" class="tsd-signature-type tsd-kind-class">Tool</a><ul class="tsd-hierarchy"><li><span class="target">DragSelectingTool</span><ul class="tsd-hierarchy"><li><a href="RealtimeDragSelectingTool.html" class="tsd-signature-type tsd-kind-class">RealtimeDragSelectingTool</a></li></ul></li></ul></li></ul></section><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>The DragSelectingTool lets the user select multiple parts within a rectangular area drawn by the user.
There is a temporary part, the <a href="DragSelectingTool.html#box" class="tsd-kind-accessor">box</a>,
that shows the current area encompassed between the mouse-down
point and the current mouse point.
The default drag selection box is a magenta rectangle.
You can change the <a href="DragSelectingTool.html#box" class="tsd-kind-accessor">box</a> to customize its appearance -- see its documentation for an example.</p>
<p>This tool is a standard mouse-move tool, the <a href="ToolManager.html#dragSelectingTool" class="tsd-kind-accessor">ToolManager.dragSelectingTool</a>.
However this cannot start running unless there has been a motionless delay
after the mouse-down event of at least <a href="DragSelectingTool.html#delay" class="tsd-kind-accessor">delay</a> milliseconds.</p>
<p>This tool does not utilize any <a href="Adornment.html" class="tsd-kind-class">Adornment</a>s or tool handles,
but it does temporarily add the <a href="DragSelectingTool.html#box" class="tsd-kind-accessor">box</a> part to the diagram.
This tool does not modify the model or conduct any transaction.</p>
<p>Selection occurs on a mouse-up when it calls <a href="DragSelectingTool.html#selectInRect" class="tsd-kind-method">selectInRect</a>
with the value of <a href="DragSelectingTool.html#computeBoxBounds" class="tsd-kind-method">computeBoxBounds</a>.
Selectable parts are selected when their bounds fall entirely within the rectangle,
unless <a href="DragSelectingTool.html#isPartialInclusion" class="tsd-kind-accessor">isPartialInclusion</a> is set to true.</p>
<p class="boxread">
For customizing the DragSelectingTool, see <a href="../../intro/tools.html#DragSelectingTool">Introduction to the DragSelectingTool</a>.
<p>If you implement your own drag-in-the-background-to-do-something tool, you may need to disable
this tool or insert your new tool in the <a href="ToolManager.html#mouseMoveTools" class="tsd-kind-accessor">ToolManager.mouseMoveTools</a> list before this tool,
in order for your tool to run. There are examples of such tools defined in the extensions directory:
<a href="../../extensions/RealtimeDragSelecting.html">Realtime Drag Selecting Tool</a>,
<a href="../../extensions/DragCreating.html">Drag Creating Tool</a>, and
<a href="../../extensions/DragZooming.html">Drag Zooming Tool</a>.</p>
<p>If you want to programmatically select some Parts in a rectangular area,
you can call <a href="DragSelectingTool.html#selectInRect" class="tsd-kind-method">selectInRect</a>.</p>
</div></section><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="true" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Constructors</h3><div class="tsd-index-list"><a href="DragSelectingTool.html#constructor" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Accessors</h3><div class="tsd-index-list"><a href="DragSelectingTool.html#box" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>box</span></a>
<a href="DragSelectingTool.html#delay" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>delay</span></a>
<a href="DragSelectingTool.html#isPartialInclusion" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>is<wbr/>Partial<wbr/>Inclusion</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="DragSelectingTool.html#canStart" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>can<wbr/>Start</span></a>
<a href="DragSelectingTool.html#computeBoxBounds" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>compute<wbr/>Box<wbr/>Bounds</span></a>
<a href="DragSelectingTool.html#doActivate" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>do<wbr/>Activate</span></a>
<a href="DragSelectingTool.html#doDeactivate" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>do<wbr/>Deactivate</span></a>
<a href="DragSelectingTool.html#doMouseMove" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>do<wbr/>Mouse<wbr/>Move</span></a>
<a href="DragSelectingTool.html#doMouseUp" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>do<wbr/>Mouse<wbr/>Up</span></a>
<a href="DragSelectingTool.html#selectInRect" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>select<wbr/>In<wbr/>Rect</span></a>
</div></section></div></details></section></section><section class="tsd-panel-group tsd-index-group tsd-is-inherited"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-index-accordion"><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Inherited Index</h5></summary><div class="tsd-accordion-details"><div class="tsd-index-content"><section class="tsd-index-section"><h3 class="tsd-index-heading">Accessors</h3><div class="tsd-index-list"><a href="Tool.html#diagram" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Tool.diagram</span></a>
<a href="Tool.html#isActive" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Tool.is<wbr/>Active</span></a>
<a href="Tool.html#isEnabled" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Tool.is<wbr/>Enabled</span></a>
<a href="Tool.html#name" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Tool.name</span></a>
<a href="Tool.html#transactionResult" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Tool.transaction<wbr/>Result</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="Tool.html#canStartMultiTouch" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.can<wbr/>Start<wbr/>Multi<wbr/>Touch</span></a>
<a href="Tool.html#cancelWaitAfter" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.cancel<wbr/>Wait<wbr/>After</span></a>
<a href="Tool.html#doCancel" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.do<wbr/>Cancel</span></a>
<a href="Tool.html#doKeyDown" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.do<wbr/>Key<wbr/>Down</span></a>
<a href="Tool.html#doKeyUp" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.do<wbr/>Key<wbr/>Up</span></a>
<a href="Tool.html#doMouseDown" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.do<wbr/>Mouse<wbr/>Down</span></a>
<a href="Tool.html#doMouseWheel" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.do<wbr/>Mouse<wbr/>Wheel</span></a>
<a href="Tool.html#doStart" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.do<wbr/>Start</span></a>
<a href="Tool.html#doStop" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.do<wbr/>Stop</span></a>
<a href="Tool.html#doWaitAfter" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.do<wbr/>Wait<wbr/>After</span></a>
<a href="Tool.html#findToolHandleAt" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.find<wbr/>Tool<wbr/>Handle<wbr/>At</span></a>
<a href="Tool.html#isBeyondDragSize" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.is<wbr/>Beyond<wbr/>Drag<wbr/>Size</span></a>
<a href="Tool.html#standardMouseClick" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.standard<wbr/>Mouse<wbr/>Click</span></a>
<a href="Tool.html#standardMouseOver" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.standard<wbr/>Mouse<wbr/>Over</span></a>
<a href="Tool.html#standardMouseSelect" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.standard<wbr/>Mouse<wbr/>Select</span></a>
<a href="Tool.html#standardMouseWheel" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.standard<wbr/>Mouse<wbr/>Wheel</span></a>
<a href="Tool.html#standardPinchZoomMove" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.standard<wbr/>Pinch<wbr/>Zoom<wbr/>Move</span></a>
<a href="Tool.html#standardPinchZoomStart" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.standard<wbr/>Pinch<wbr/>Zoom<wbr/>Start</span></a>
<a href="Tool.html#standardWaitAfter" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.standard<wbr/>Wait<wbr/>After</span></a>
<a href="Tool.html#startTransaction" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.start<wbr/>Transaction</span></a>
<a href="Tool.html#stopTool" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.stop<wbr/>Tool</span></a>
<a href="Tool.html#stopTransaction" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.stop<wbr/>Transaction</span></a>
<a href="Tool.html#updateAdornments" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Tool.update<wbr/>Adornments</span></a>
</div></section></div></div></details></section></section><section class="tsd-panel-group tsd-member-group"><h2>Constructors</h2><section class="tsd-panel tsd-member"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>constructor</span><a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="constructor.new_DragSelectingTool" class="tsd-anchor"></a><span class="tsd-kind-constructor-signature">new <wbr/>Drag<wbr/>Selecting<wbr/>Tool</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">init</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="DragSelectingTool.html" class="tsd-signature-type tsd-kind-class">DragSelectingTool</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="DragSelectingTool.html" class="tsd-signature-type tsd-kind-class">DragSelectingTool</a><a href="#constructor.new_DragSelectingTool" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>You do not normally need to create an instance of this tool
because one already exists as the <a href="ToolManager.html#dragSelectingTool" class="tsd-kind-accessor">ToolManager.dragSelectingTool</a>, which you can modify.</p>
<p>The <a href="Tool.html#name" class="tsd-kind-accessor">Tool.name</a> of this tool is "DragSelecting".</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">init</span>: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="DragSelectingTool.html" class="tsd-signature-type tsd-kind-class">DragSelectingTool</a><span class="tsd-signature-symbol">></span></h5></li></ul></div><h4 class="tsd-returns-title">Returns <a href="DragSelectingTool.html" class="tsd-signature-type tsd-kind-class">DragSelectingTool</a></h4></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Accessors</h2><section class="tsd-panel tsd-member"><a id="box" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>box</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type tsd-kind-class">Part</a></div><a href="#box" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the <a href="Part.html" class="tsd-kind-class">Part</a> used as the "rubber-band selection box"
that is stretched to follow the mouse, as feedback for what area will
be passed to <a href="DragSelectingTool.html#selectInRect" class="tsd-kind-method">selectInRect</a> upon a mouse-up.</p>
<p>Initially this is a <a href="Part.html" class="tsd-kind-class">Part</a> containing only a simple magenta rectangular <a href="Shape.html" class="tsd-kind-class">Shape</a>.
The object to be resized during dragging should be named "SHAPE".
Setting this property does not raise any events.</p>
<p>Here is an example of changing the selection box to be a thicker bright green rectangle:</p>
<pre><code class="language-js"><span class="hl-4">myDiagram</span><span class="hl-2">.</span><span class="hl-4">toolManager</span><span class="hl-2">.</span><span class="hl-4">dragSelectingTool</span><span class="hl-2">.</span><span class="hl-4">box</span><span class="hl-2"> =</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Part</span><span class="hl-2">({ </span><span class="hl-4">layerName:</span><span class="hl-2"> </span><span class="hl-6">"Tool"</span><span class="hl-2">, </span><span class="hl-4">selectable:</span><span class="hl-2"> </span><span class="hl-1">false</span><span class="hl-2"> })</span><br/><span class="hl-2"> .</span><span class="hl-5">add</span><span class="hl-2">(</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Shape</span><span class="hl-2">({</span><br/><span class="hl-2"> </span><span class="hl-4">name:</span><span class="hl-2"> </span><span class="hl-6">"SHAPE"</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">fill:</span><span class="hl-2"> </span><span class="hl-1">null</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">stroke:</span><span class="hl-2"> </span><span class="hl-6">"chartreuse"</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">strokeWidth:</span><span class="hl-2"> </span><span class="hl-7">3</span><br/><span class="hl-2"> })</span><br/><span class="hl-2"> );</span>
</code><button>Copy</button></pre>
<p>Note that the Part should be put into a <a href="Layer.html" class="tsd-kind-class">Layer</a> that <a href="Layer.html#isTemporary" class="tsd-kind-accessor">Layer.isTemporary</a>.</p>
<p>Modifying this property while this tool <a href="Tool.html#isActive" class="tsd-kind-accessor">Tool.isActive</a> might have no effect.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="delay" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>delay</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#delay" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the time in milliseconds for which the mouse must be stationary
before this tool can be started.
The default value is 175 milliseconds.
Setting this property does not raise any events.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="isPartialInclusion" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>is<wbr/>Partial<wbr/>Inclusion</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></div><a href="#isPartialInclusion" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets whether a selectable <a href="Part.html" class="tsd-kind-class">Part</a> may be only partly
or must be completely enclosed by the rectangle given to <a href="DragSelectingTool.html#selectInRect" class="tsd-kind-method">selectInRect</a>.
The default value is false: parts must be completely inside the rectangle.
Setting this property does not raise any events.</p>
</div></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Methods</h2><section class="tsd-panel tsd-member"><a id="canStart" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagVirtual">Virtual</code><code class="tsd-tag ts-flagOverride">Override</code><span>can<wbr/>Start</span><a href="#canStart" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="canStart.canStart-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">can<wbr/>Start</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#canStart.canStart-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>This tool can run when the diagram allows selection,
there has been delay of at least <a href="DragSelectingTool.html#delay" class="tsd-kind-accessor">delay</a> milliseconds
after the mouse-down before a mouse-move,
there has been a mouse-drag far enough away not to be a click,
and there is no selectable part at the mouse-down point.</p>
<p>The delay required to start this tool enables both this tool and
the <a href="ToolManager.html#panningTool" class="tsd-kind-accessor">ToolManager.panningTool</a> to co-exist as mode-less mouse-move tools.</p>
<p>This method may be overridden.
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</p>
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="computeBoxBounds" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagVirtual">Virtual</code><span>compute<wbr/>Box<wbr/>Bounds</span><a href="#computeBoxBounds" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="computeBoxBounds.computeBoxBounds-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">compute<wbr/>Box<wbr/>Bounds</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type tsd-kind-class">Rect</a><a href="#computeBoxBounds.computeBoxBounds-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>This just returns a <a href="Rect.html" class="tsd-kind-class">Rect</a> stretching from the mouse-down point to the current mouse point.</p>
<p>This method may be overridden.
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</p>
</div><h4 class="tsd-returns-title">Returns <a href="Rect.html" class="tsd-signature-type tsd-kind-class">Rect</a></h4><p>a <a href="Rect.html" class="tsd-kind-class">Rect</a> in document coordinates.</p>
</li></ul></section><section class="tsd-panel tsd-member"><a id="doActivate" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOverride">Override</code><span>do<wbr/>Activate</span><a href="#doActivate" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="doActivate.doActivate-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">do<wbr/>Activate</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#doActivate.doActivate-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Capture the mouse and show the <a href="DragSelectingTool.html#box" class="tsd-kind-accessor">box</a>.</p>
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="doDeactivate" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOverride">Override</code><span>do<wbr/>Deactivate</span><a href="#doDeactivate" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="doDeactivate.doDeactivate-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">do<wbr/>Deactivate</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#doDeactivate.doDeactivate-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Release the mouse and remove any <a href="DragSelectingTool.html#box" class="tsd-kind-accessor">box</a>.</p>
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="doMouseMove" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOverride">Override</code><span>do<wbr/>Mouse<wbr/>Move</span><a href="#doMouseMove" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="doMouseMove.doMouseMove-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">do<wbr/>Mouse<wbr/>Move</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#doMouseMove.doMouseMove-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Update the <a href="DragSelectingTool.html#box" class="tsd-kind-accessor">box</a>'s position and size according to the value
of <a href="DragSelectingTool.html#computeBoxBounds" class="tsd-kind-method">computeBoxBounds</a>.</p>
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="doMouseUp" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOverride">Override</code><span>do<wbr/>Mouse<wbr/>Up</span><a href="#doMouseUp" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="doMouseUp.doMouseUp-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">do<wbr/>Mouse<wbr/>Up</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#doMouseUp.doMouseUp-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Call <a href="DragSelectingTool.html#selectInRect" class="tsd-kind-method">selectInRect</a> with the value of a call to <a href="DragSelectingTool.html#computeBoxBounds" class="tsd-kind-method">computeBoxBounds</a>.</p>
<p>This method changes the cursor to "wait" and
raises the "ChangingSelection" <a href="DiagramEvent.html" class="tsd-kind-class">DiagramEvent</a> before calling <a href="DragSelectingTool.html#selectInRect" class="tsd-kind-method">selectInRect</a>,
and raises the "ChangedSelection" DiagramEvent afterward.</p>
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="selectInRect" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagVirtual">Virtual</code><span>select<wbr/>In<wbr/>Rect</span><a href="#selectInRect" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="selectInRect.selectInRect-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">select<wbr/>In<wbr/>Rect</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">r</span><span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type tsd-kind-class">Rect</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#selectInRect.selectInRect-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>This method is called to select some parts within the area of a given rectangle.</p>
<p>The normal behavior is to set the diagram's selection collection to only those parts
in the given rectangle according to the <a href="DragSelectingTool.html#isPartialInclusion" class="tsd-kind-accessor">isPartialInclusion</a> policy.
However, if the Shift key modifier is used, no parts are deselected --
this adds to the selection the parts in the rectangle not already selected.
If the Control key (Command on Mac) modifier is used, this toggles the selectedness of the parts in the rectangle.
If the Control key (Command on Mac) and Shift key modifiers are both used, this deselects the parts in the rectangle.</p>
<p>This method may be overridden.
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">r</span>: <a href="Rect.html" class="tsd-signature-type tsd-kind-class">Rect</a></h5><div class="tsd-comment tsd-typography"><p>a rectangular bounds in document coordinates.</p>
</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section></section></div><div class="col-sidebar"><div class="page-menu"><details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><ul><li><a href="#constructor"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a></li><li><a href="#box"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>box</span></a></li><li><a href="#delay"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>delay</span></a></li><li><a href="#isPartialInclusion"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>is<wbr/>Partial<wbr/>Inclusion</span></a></li><li><a href="#canStart"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>can<wbr/>Start</span></a></li><li><a href="#computeBoxBounds"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>compute<wbr/>Box<wbr/>Bounds</span></a></li><li><a href="#doActivate"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>do<wbr/>Activate</span></a></li><li><a href="#doDeactivate"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>do<wbr/>Deactivate</span></a></li><li><a href="#doMouseMove"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>do<wbr/>Mouse<wbr/>Move</span></a></li><li><a href="#doMouseUp"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>do<wbr/>Mouse<wbr/>Up</span></a></li><li><a href="#selectInRect"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>select<wbr/>In<wbr/>Rect</span></a></li></ul></div></details><div class="tsd-navigation settings"><div class="tsd-theme-toggle"><h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">System</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../index.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>GoJS API</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><div class="tsd w-full max-w-screen-xl mx-auto px-2"><div class="bottom-copyright">Copyright © 1998-2025 by Northwoods Software Corporation.</div></div><div class="overlay"></div><script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-S5QK8VSK84');
var getOutboundLink = function(url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
document.getElementById("contactBtn").addEventListener("click", function() {
getOutboundLink('https://nwoods.com/contact.html', 'contact');
});
document.getElementById("buyBtn").addEventListener("click", function() {
getOutboundLink('https://nwoods.com/sales/index.html', 'buy');
});</script></body></html>