gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
123 lines (120 loc) • 37.7 kB
HTML
<html class="default"><head><meta charSet="utf-8"/><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/css/style.css"/><link rel="stylesheet" href="../assets/style-tsd.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"><div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2"><div class="md:pl-4"><a class="text-white hover:text-white no-underline hover:no-underline\n font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"><h1 class="my-0 p-1 leading-none">GoJS</h1></a></div><button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"><svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"><path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path><path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button><div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"><ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"><li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" id="contactBtn">Contact</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" id="buyBtn">Buy</a></li></ul></div></div><hr class="border-b border-gray-600 opacity-50 my-0 py-0"/></nav><div class="tsd-page-header"><div class="tsd-page-toolbar"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></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"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited"/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div></div><div class="tsd-page-title"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="top-copyright"><b>GoJS</b>® Diagramming Components<br/>version 2.3.8<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a></div><div><h1>Class DragSelectingTool </h1></div></div></div></header><div class="tsd w-full max-w-screen-xl mx-auto pb-4"><div class="row px-2 w-full"><div class="col-8 col-content"><section class="tsd-panel tsd-hierarchy"><h3>Hierarchy</h3><ul class="tsd-hierarchy"><li><a href="Tool.html" class="tsd-signature-type" data-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" data-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">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">box</a> to customize its appearance -- see its documentation for an example.</p>
<div><p>This tool is a standard mouse-move tool, the <a href="ToolManager.html#dragSelectingTool">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">delay</a> milliseconds.</p>
<p>This tool does not utilize any <a href="Adornment.html">Adornment</a>s or tool handles,
but it does temporarily add the <a href="DragSelectingTool.html#box">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">selectInRect</a>
with the value of <a href="DragSelectingTool.html#computeBoxBounds">computeBoxBounds</a>.
Selectable parts are selected when their bounds fall entirely within the rectangle,
unless <a href="DragSelectingTool.html#isPartialInclusion">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">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">selectInRect</a>.</p>
</div></div></section><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Constructors</h3><ul class="tsd-index-list"><li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><a href="DragSelectingTool.html#constructor" class="tsd-kind-icon">constructor</a></li></ul></section><section class="tsd-index-section "><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="DragSelectingTool.html#box" class="tsd-kind-icon">box</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="DragSelectingTool.html#delay" class="tsd-kind-icon">delay</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="DragSelectingTool.html#isPartialInclusion" class="tsd-kind-icon">is<wbr/>Partial<wbr/>Inclusion</a></li></ul></section><section class="tsd-index-section "><h3>Methods</h3><ul class="tsd-index-list"><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="DragSelectingTool.html#canStart" class="tsd-kind-icon">can<wbr/>Start</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="DragSelectingTool.html#computeBoxBounds" class="tsd-kind-icon">compute<wbr/>Box<wbr/>Bounds</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="DragSelectingTool.html#doActivate" class="tsd-kind-icon">do<wbr/>Activate</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="DragSelectingTool.html#doDeactivate" class="tsd-kind-icon">do<wbr/>Deactivate</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="DragSelectingTool.html#doMouseMove" class="tsd-kind-icon">do<wbr/>Mouse<wbr/>Move</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="DragSelectingTool.html#doMouseUp" class="tsd-kind-icon">do<wbr/>Mouse<wbr/>Up</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="DragSelectingTool.html#selectInRect" class="tsd-kind-icon">select<wbr/>In<wbr/>Rect</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-index-group tsd-is-inherited"><h2>Inherited Members</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section undefined"><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Tool.html#diagram" class="tsd-kind-icon">Tool.diagram</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Tool.html#isActive" class="tsd-kind-icon">Tool.is<wbr/>Active</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Tool.html#isEnabled" class="tsd-kind-icon">Tool.is<wbr/>Enabled</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Tool.html#name" class="tsd-kind-icon">Tool.name</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Tool.html#transactionResult" class="tsd-kind-icon">Tool.transaction<wbr/>Result</a></li></ul></section><section class="tsd-index-section undefined"><h3>Methods</h3><ul class="tsd-index-list"><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#canStartMultiTouch" class="tsd-kind-icon">Tool.can<wbr/>Start<wbr/>Multi<wbr/>Touch</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#cancelWaitAfter" class="tsd-kind-icon">Tool.cancel<wbr/>Wait<wbr/>After</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#doCancel" class="tsd-kind-icon">Tool.do<wbr/>Cancel</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#doKeyDown" class="tsd-kind-icon">Tool.do<wbr/>Key<wbr/>Down</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#doKeyUp" class="tsd-kind-icon">Tool.do<wbr/>Key<wbr/>Up</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#doMouseDown" class="tsd-kind-icon">Tool.do<wbr/>Mouse<wbr/>Down</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#doMouseWheel" class="tsd-kind-icon">Tool.do<wbr/>Mouse<wbr/>Wheel</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#doStart" class="tsd-kind-icon">Tool.do<wbr/>Start</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#doStop" class="tsd-kind-icon">Tool.do<wbr/>Stop</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#doWaitAfter" class="tsd-kind-icon">Tool.do<wbr/>Wait<wbr/>After</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#findToolHandleAt" class="tsd-kind-icon">Tool.find<wbr/>Tool<wbr/>Handle<wbr/>At</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#isBeyondDragSize" class="tsd-kind-icon">Tool.is<wbr/>Beyond<wbr/>Drag<wbr/>Size</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Tool.html#standardMouseClick" class="tsd-kind-icon">Tool.standard<wbr/>Mouse<wbr/>Click</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#standardMouseOver" class="tsd-kind-icon">Tool.standard<wbr/>Mouse<wbr/>Over</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#standardMouseSelect" class="tsd-kind-icon">Tool.standard<wbr/>Mouse<wbr/>Select</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#standardMouseWheel" class="tsd-kind-icon">Tool.standard<wbr/>Mouse<wbr/>Wheel</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#standardPinchZoomMove" class="tsd-kind-icon">Tool.standard<wbr/>Pinch<wbr/>Zoom<wbr/>Move</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#standardPinchZoomStart" class="tsd-kind-icon">Tool.standard<wbr/>Pinch<wbr/>Zoom<wbr/>Start</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#standardWaitAfter" class="tsd-kind-icon">Tool.standard<wbr/>Wait<wbr/>After</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#startTransaction" class="tsd-kind-icon">Tool.start<wbr/>Transaction</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#stopTool" class="tsd-kind-icon">Tool.stop<wbr/>Tool</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#stopTransaction" class="tsd-kind-icon">Tool.stop<wbr/>Transaction</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Tool.html#updateAdornments" class="tsd-kind-icon">Tool.update<wbr/>Adornments</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Constructors</h2><section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> constructor<a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><li class="tsd-signature tsd-kind-icon">new <wbr/>Drag<wbr/>Selecting<wbr/>Tool<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" data-tsd-kind="Class">DragSelectingTool</a></li></ul><ul class="tsd-descriptions"><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">ToolManager.dragSelectingTool</a>, which you can modify.</p>
<div><p>The <a href="Tool.html#name">Tool.name</a> of this tool is "DragSelecting".</p>
</div></div><h4 class="tsd-returns-title">Returns <a href="DragSelectingTool.html" class="tsd-signature-type" data-tsd-kind="Class">DragSelectingTool</a></h4></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Properties</h2><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="box" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> box<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a><a href="#box" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the <a href="Part.html">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">selectInRect</a> upon a mouse-up.</p>
<div><p>Initially this is a <a href="Part.html">Part</a> containing only a simple magenta rectangular <a href="Shape.html">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-2"> </span><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-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Part</span><span class="hl-2">,</span><br/><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">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">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><span class="hl-4">fill:</span><span class="hl-2"> </span><span class="hl-1">null</span><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><span class="hl-4">strokeWidth:</span><span class="hl-2"> </span><span class="hl-7">3</span><span class="hl-2"> }));</span>
</code></pre>
<p>Note that the Part should be put into a <a href="Layer.html">Layer</a> that <a href="Layer.html#isTemporary">Layer.isTemporary</a>.</p>
<p>Modifying this property while this tool <a href="Tool.html#isActive">Tool.isActive</a> might have no effect.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="delay" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> delay<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#delay" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><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 tsd-kind-accessor tsd-parent-kind-class"><a id="isPartialInclusion" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> is<wbr/>Partial<wbr/>Inclusion<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#isPartialInclusion" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets whether a selectable <a href="Part.html">Part</a> may be only partly
or must be completely enclosed by the rectangle given to <a href="DragSelectingTool.html#selectInRect">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 tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a id="canStart" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOverride">Override</span> <span class="tsd-flag ts-flagVirtual">Virtual</span> can<wbr/>Start<a href="#canStart" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><li class="tsd-signature tsd-kind-icon">can<wbr/>Start<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></li></ul><ul class="tsd-descriptions"><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">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>
<div><p>The delay required to start this tool enables both this tool and
the <a href="ToolManager.html#panningTool">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></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="computeBoxBounds" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagVirtual">Virtual</span> compute<wbr/>Box<wbr/>Bounds<a href="#computeBoxBounds" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">compute<wbr/>Box<wbr/>Bounds<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" data-tsd-kind="Class">Rect</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>This just returns a <a href="Rect.html">Rect</a> stretching from the mouse-down point to the current mouse point.</p>
<div><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><h4 class="tsd-returns-title">Returns <a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a></h4><div><p>a <a href="Rect.html">Rect</a> in document coordinates.</p>
</div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a id="doActivate" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOverride">Override</span> do<wbr/>Activate<a href="#doActivate" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><li class="tsd-signature tsd-kind-icon">do<wbr/>Activate<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></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Capture the mouse and show the <a href="DragSelectingTool.html#box">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 tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a id="doDeactivate" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOverride">Override</span> do<wbr/>Deactivate<a href="#doDeactivate" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><li class="tsd-signature tsd-kind-icon">do<wbr/>Deactivate<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></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Release the mouse and remove any <a href="DragSelectingTool.html#box">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 tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a id="doMouseMove" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOverride">Override</span> do<wbr/>Mouse<wbr/>Move<a href="#doMouseMove" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><li class="tsd-signature tsd-kind-icon">do<wbr/>Mouse<wbr/>Move<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></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Update the <a href="DragSelectingTool.html#box">box</a>'s position and size according to the value
of <a href="DragSelectingTool.html#computeBoxBounds">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 tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a id="doMouseUp" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOverride">Override</span> do<wbr/>Mouse<wbr/>Up<a href="#doMouseUp" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><li class="tsd-signature tsd-kind-icon">do<wbr/>Mouse<wbr/>Up<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></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Call <a href="DragSelectingTool.html#selectInRect">selectInRect</a> with the value of a call to <a href="DragSelectingTool.html#computeBoxBounds">computeBoxBounds</a>.</p>
<div><p>This method changes the cursor to "wait" and
raises the "ChangingSelection" <a href="DiagramEvent.html">DiagramEvent</a> before calling <a href="DragSelectingTool.html#selectInRect">selectInRect</a>,
and raises the "ChangedSelection" DiagramEvent afterward.</p>
</div></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="selectInRect" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagVirtual">Virtual</span> select<wbr/>In<wbr/>Rect<a href="#selectInRect" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">select<wbr/>In<wbr/>Rect<span class="tsd-signature-symbol">(</span>r<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><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>
<div><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">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><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>r: <a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a></h5><div class="tsd-comment tsd-typography">
<p>a rectangular bounds in document coordinates.</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../index.html">GoJS Class Index</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="current tsd-kind-class"><a href="DragSelectingTool.html" class="tsd-kind-icon">Drag<wbr/>Selecting<wbr/>Tool</a><ul><li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><a href="DragSelectingTool.html#constructor" class="tsd-kind-icon">constructor</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="DragSelectingTool.html#box" class="tsd-kind-icon">box</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="DragSelectingTool.html#delay" class="tsd-kind-icon">delay</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="DragSelectingTool.html#isPartialInclusion" class="tsd-kind-icon">is<wbr/>Partial<wbr/>Inclusion</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="DragSelectingTool.html#canStart" class="tsd-kind-icon">can<wbr/>Start</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="DragSelectingTool.html#computeBoxBounds" class="tsd-kind-icon">compute<wbr/>Box<wbr/>Bounds</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="DragSelectingTool.html#doActivate" class="tsd-kind-icon">do<wbr/>Activate</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="DragSelectingTool.html#doDeactivate" class="tsd-kind-icon">do<wbr/>Deactivate</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="DragSelectingTool.html#doMouseMove" class="tsd-kind-icon">do<wbr/>Mouse<wbr/>Move</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="DragSelectingTool.html#doMouseUp" class="tsd-kind-icon">do<wbr/>Mouse<wbr/>Up</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="DragSelectingTool.html#selectInRect" class="tsd-kind-icon">select<wbr/>In<wbr/>Rect</a></li></ul></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-2022 by Northwoods Software Corporation.</div></div><footer class=""><div class="tsd w-full max-w-screen-xl mx-auto px-2"><h2>Settings</h2><p class="mb-4">Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="overlay"></div><script src="../assets/main.js"></script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
this.classList.toggle("active");
topnavList.classList.toggle("hidden");
document.getElementById("topnavOpen").classList.toggle("hidden");
document.getElementById("topnavClosed").classList.toggle("hidden");
});
document.getElementById("contactBtn").addEventListener("click", function() {
getOutboundLink('https://www.nwoods.com/contact.html', 'contact');
});
document.getElementById("buyBtn").addEventListener("click", function() {
getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');
});
</script></body></html>