markgojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
1,550 lines (508 loc) • 46.2 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GoJS® DragSelectingTool Class</title>
<script src="../../assets/js/jquery.min.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/highlight.js"></script>
<script src="../../assets/js/api.js"></script>
<script src="../../assets/js/fuse.min.js"></script>
<link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >
<!-- custom CSS after bootstrap -->
<link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>
<!--<link rel="stylesheet" href="../../assets/css/api.css" type="text/css" media="all" />-->
<link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />
</head>
<body>
<!-- non-fixed navbar -->
<nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#navbar">
<a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="../../index.html">Home</a></li>
<li><a href="../../learn/index.html">Learn</a></li>
<li><a href="../../samples/index.html">Samples</a></li>
<li><a href="../../intro/index.html">Intro</a></li>
<li><a href="../../api/index.html">API</a></li>
<li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
<li><a href="../../download.html">Download</a></li>
<li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
<li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li>
<li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li>
<li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<!-- ============================== classes index ============================ -->
<div id="navindex" class="col-md-2">
<!-- begin publish.classesIndex -->
<!-- <div><a href="../index.html">GoJS Class Index</a></div> -->
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Diagram Classes</span>
</div>
</div>
<div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
<li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
<li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
<li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
<li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
<li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
<li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li>
<li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
<li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li>
<li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li>
<li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li>
<li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li>
<li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li>
<li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li>
<li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li>
<li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li>
<li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
<li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
<li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li>
<li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Geometry Classes</span>
</div>
</div>
<div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li>
<li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
<li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li>
<li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
<li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
<li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li>
<li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li>
<li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li>
<li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Model Classes</span>
</div>
</div>
<div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li>
<li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
<li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
<li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li>
<li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
<li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
<li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Layout Classes</span>
</div>
</div>
<div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
<li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
<li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
<li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
<li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li>
<li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
<li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Tool Classes</span>
</div>
</div>
<div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
<li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
<li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
<li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
<li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
<li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
<li><a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li>
<li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
<li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
<li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
<li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
<li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
<li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
<li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
<li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
<li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li>
<li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Collection Classes</span>
</div>
</div>
<div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
<li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
<li><a href="../symbols/List.html" class="linkConstructor">List</a></li>
<li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li>
<li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li>
</ul>
</div>
</div>
</div> <!-- /class="sidebar-nav -->
<!-- end publish.classesIndex -->
</div>
<div id="contentBody" class="col-md-10">
<div class="searchsumm">
<div class="table-wrap">
<div class="table-cell" id="apisearch" data-base="../">
<div class="title">Search API</div>
<div class="field">
<label for="search-field" class="search-icon"></label>
<input id="search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
</div>
<div class="table-cell" id="apisumm">
<input type="checkbox" id="showsumms" />
<label class="apisumms" for="showsumms">Show Summaries</label>
</div>
</div>
</div>
<!-- ============================== header ================================= -->
<div id="header" class="fineprint">
<b>GoJS</b>® Diagramming Components<br/>version 1.8.36 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
</div>
<!-- ============================== class title ============================ -->
<h2 class="classTitle">
Class DragSelectingTool
</h2>
<!-- ============================== class summary ========================== -->
<p class="classsummary">
<span class="extends"> Extends
<a href="../symbols/Tool.html" class="linkConstructor">Tool</a>.</span>
The DragSelectingTool lets the user select multiple parts within a rectangular area drawn by the user.
There is a temporary part, the <a href="../symbols/DragSelectingTool.html#box" class="linkProperty">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="../symbols/DragSelectingTool.html#box" class="linkProperty">box</a> to customize its appearance -- see its documentation for an example.
<p>
This tool is a standard mouse-move tool, the <a href="../symbols/ToolManager.html#dragSelectingTool" class="linkProperty">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="../symbols/DragSelectingTool.html#delay" class="linkProperty">delay</a> milliseconds.
<p>
This tool does not utilize any <a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles,
but it does temporarily add the <a href="../symbols/DragSelectingTool.html#box" class="linkProperty">box</a> part to the diagram.
This tool does not modify the model or conduct any transaction.
<p>
Selection occurs on a mouse-up when it calls <a href="../symbols/DragSelectingTool.html#selectInRect" class="linkMethod">selectInRect</a>
with the value of <a href="../symbols/DragSelectingTool.html#computeBoxBounds" class="linkMethod">computeBoxBounds</a>.
Selectable parts are selected when their bounds fall entirely within the rectangle,
unless <a href="../symbols/DragSelectingTool.html#isPartialInclusion" class="linkProperty">isPartialInclusion</a> is set to true.
<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="../symbols/ToolManager.html#mouseMoveTools" class="linkProperty">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>
<!-- ============================== constructor summary ==================== -->
<h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
<div class="table-responsive">
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class DragSelectingTool.">
<thead>
<tr>
<th scope="col" class="name">Name</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name" >
<div class="name">
DragSelectingTool()
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>You do not normally need to create an instance of this tool
because one already exists as the <a href="../symbols/ToolManager.html#dragSelectingTool" class="linkProperty">ToolManager.dragSelectingTool</a>, which you can modify.<span class="nodetails" id="xconDragSelectingTool"><a class="morelink" onclick="hst('conDragSelectingTool')">More...</a></span> <span class="details" id="conDragSelectingTool">
</span><div class="details" id="dconDragSelectingTool"><p>
The <a href="../symbols/Tool.html#name" class="linkProperty">Tool.name</a> of this tool is "DragSelecting".</div>
</div>
</td>
</tr>
</tbody>
</table>
</div><!-- class="table-responsive">-->
<!-- ============================== properties summary ===================== -->
<h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
<div class="table-responsive">
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class DragSelectingTool.">
<thead>
<tr>
<th scope="col" class="name">Name, Value Type</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr id="box" >
<td class="name">
<div class="name">
box
</div>
<div class="attributes">
<span class="light">{<a href="../symbols/Part.html" class="linkConstructor">Part</a>}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the <a href="../symbols/Part.html" class="linkConstructor">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="../symbols/DragSelectingTool.html#selectInRect" class="linkMethod">selectInRect</a> upon a mouse-up.<span class="nodetails" id="xpropbox"><a class="morelink" onclick="hst('propbox')">More...</a></span> <span class="details" id="propbox">
</span><div class="details" id="dpropbox"><p>
Initially this is a <a href="../symbols/Part.html" class="linkConstructor">Part</a> containing only a simple magenta rectangular <a href="../symbols/Shape.html" class="linkConstructor">Shape</a>.
The object to be resized during dragging should be named "SHAPE".
Setting this property does not raise any events.
<p>
Here is an example of changing the selection box to be a thicker bright green rectangle:
<pre class="javascript">
myDiagram.toolManager.dragSelectingTool.box =
$(go.Part,
{ layerName: "Tool", selectable: false },
$(go.Shape,
{ name: "SHAPE", fill: null, stroke: "chartreuse", strokeWidth: 3 }));
</pre>
Note that the Part should be put into a <a href="../symbols/Layer.html" class="linkConstructor">Layer</a> that <a href="../symbols/Layer.html#isTemporary" class="linkProperty">Layer.isTemporary</a>.
<p>
Modifying this property while this tool <a href="../symbols/Tool.html#isActive" class="linkProperty">Tool.isActive</a> might have no effect.</div>
</div>
</td>
</tr>
<tr id="delay" >
<td class="name">
<div class="name">
delay
</div>
<div class="attributes">
<span class="light">{number}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the time in milliseconds for which the mouse must be stationary
before this tool can be started.<span class="nodetails" id="xpropdelay"><a class="morelink" onclick="hst('propdelay')">More...</a></span> <span class="details" id="propdelay">
The default value is 175 milliseconds.
Setting this property does not raise any events.</span>
</div>
</td>
</tr>
<tr id="isPartialInclusion" >
<td class="name">
<div class="name">
isPartialInclusion
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether a selectable <a href="../symbols/Part.html" class="linkConstructor">Part</a> may be only partly
or must be completely enclosed by the rectangle given to <a href="../symbols/DragSelectingTool.html#selectInRect" class="linkMethod">selectInRect</a>.<span class="nodetails" id="xpropisPartialInclusion"><a class="morelink" onclick="hst('propisPartialInclusion')">More...</a></span> <span class="details" id="propisPartialInclusion">
The default value is false: parts must be completely inside the rectangle.
Setting this property does not raise any events.</span>
</div>
</td>
</tr>
</tbody>
</table>
</div><!-- class="table-responsive">-->
<dl class="inheritsList">
<dt>Properties borrowed from class <a href="../symbols/Tool.html" class="linkConstructor">Tool</a>: </dt><dd><a href="../symbols/Tool.html#diagram" class="linkProperty">diagram</a>, <a href="../symbols/Tool.html#isActive" class="linkProperty">isActive</a>, <a href="../symbols/Tool.html#isEnabled" class="linkProperty">isEnabled</a>, <a href="../symbols/Tool.html#name" class="linkProperty">name</a>, <a href="../symbols/Tool.html#transactionResult" class="linkProperty">transactionResult</a></dd>
</dl>
<!-- ============================== methods summary ======================== -->
<h2 class="summaryCaption">Method <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
<div class="table-responsive">
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the methods documented in the class DragSelectingTool.">
<thead>
<tr>
<th scope="col" class="name">Name, Return Type</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr id="canStart">
<td class="name">
<div class="name">
canStart()
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>This tool can run when the diagram allows selection,
there has been delay of at least <a href="../symbols/DragSelectingTool.html#delay" class="linkProperty">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.<span class="nodetails" id="xmethcanStart"><a class="morelink" onclick="hst('methcanStart')">More...</a></span> <span class="details" id="methcanStart">
</span><div class="details" id="dmethcanStart"><p>
The delay required to start this tool enables both this tool and
the <a href="../symbols/ToolManager.html#panningTool" class="linkProperty">ToolManager.panningTool</a> to co-exist as mode-less mouse-move tools.
<p>
This method may be overridden.</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dt><span class="light fixedFont">{boolean}</span> </dt>
</dl>
</div>
</td>
</tr>
<tr id="computeBoxBounds">
<td class="name">
<div class="name">
computeBoxBounds()
</div>
<div class="attributes">
<span class="light">{<a href="../symbols/Rect.html" class="linkConstructor">Rect</a>}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>This just returns a <a href="../symbols/Rect.html" class="linkConstructor">Rect</a> stretching from the mouse-down point to the current mouse point.<span class="nodetails" id="xmethcomputeBoxBounds"><a class="morelink" onclick="hst('methcomputeBoxBounds')">More...</a></span> <span class="details" id="methcomputeBoxBounds">
</span><div class="details" id="dmethcomputeBoxBounds"><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.</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dt><span class="light fixedFont">{<a href="../symbols/Rect.html" class="linkConstructor">Rect</a>}</span> a <a href="../symbols/Rect.html" class="linkConstructor">Rect</a> in document coordinates.</dt>
</dl>
</div>
</td>
</tr>
<tr id="doActivate">
<td class="name">
<div class="name">
doActivate()
</div>
<div class="attributes">
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>Capture the mouse and show the <a href="../symbols/DragSelectingTool.html#box" class="linkProperty">box</a>.
</div>
</td>
</tr>
<tr id="doDeactivate">
<td class="name">
<div class="name">
doDeactivate()
</div>
<div class="attributes">
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>Release the mouse and remove any <a href="../symbols/DragSelectingTool.html#box" class="linkProperty">box</a>.
</div>
</td>
</tr>
<tr id="doMouseMove">
<td class="name">
<div class="name">
doMouseMove()
</div>
<div class="attributes">
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>Update the <a href="../symbols/DragSelectingTool.html#box" class="linkProperty">box</a>'s position and size according to the value
of <a href="../symbols/DragSelectingTool.html#computeBoxBounds" class="linkMethod">computeBoxBounds</a>.
</div>
</td>
</tr>
<tr id="doMouseUp">
<td class="name">
<div class="name">
doMouseUp()
</div>
<div class="attributes">
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>Call <a href="../symbols/DragSelectingTool.html#selectInRect" class="linkMethod">selectInRect</a> with the value of a call to <a href="../symbols/DragSelectingTool.html#computeBoxBounds" class="linkMethod">computeBoxBounds</a>.
</div>
</td>
</tr>
<tr id="selectInRect">
<td class="name">
<div class="name">
selectInRect(r)
</div>
<div class="attributes">
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>This method is called to select some parts within the area of a given rectangle.<span class="nodetails" id="xmethselectInRect"><a class="morelink" onclick="hst('methselectInRect')">More...</a></span> <span class="details" id="methselectInRect">
</span><div class="details" id="dmethselectInRect"><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="../symbols/DragSelectingTool.html#isPartialInclusion" class="linkProperty">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>
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.</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{<a href="../symbols/Rect.html" class="linkConstructor">Rect</a>}</span> <b>r</b>
</dt>
<dd>a rectangular bounds in document coordinates.</dd>
</dl>
</div>
</td>
</tr>
</tbody>
</table>
</div><!-- class="table-responsive">-->
<dl class="inheritsList">
<dt>Methods borrowed from class <a href="../symbols/Tool.html" class="linkConstructor">Tool</a>: </dt><dd><a href="../symbols/Tool.html#cancelWaitAfter" class="linkMethod">cancelWaitAfter</a>, <a href="../symbols/Tool.html#canStartMultiTouch" class="linkMethod">canStartMultiTouch</a>, <a href="../symbols/Tool.html#doCancel" class="linkMethod">doCancel</a>, <a href="../symbols/Tool.html#doKeyDown" class="linkMethod">doKeyDown</a>, <a href="../symbols/Tool.html#doKeyUp" class="linkMethod">doKeyUp</a>, <a href="../symbols/Tool.html#doMouseDown" class="linkMethod">doMouseDown</a>, <a href="../symbols/Tool.html#doMouseWheel" class="linkMethod">doMouseWheel</a>, <a href="../symbols/Tool.html#doStart" class="linkMethod">doStart</a>, <a href="../symbols/Tool.html#doStop" class="linkMethod">doStop</a>, <a href="../symbols/Tool.html#doWaitAfter" class="linkMethod">doWaitAfter</a>, <a href="../symbols/Tool.html#findToolHandleAt" class="linkMethod">findToolHandleAt</a>, <a href="../symbols/Tool.html#isBeyondDragSize" class="linkMethod">isBeyondDragSize</a>, <a href="../symbols/Tool.html#standardMouseClick" class="linkMethod">standardMouseClick</a>, <a href="../symbols/Tool.html#standardMouseOver" class="linkMethod">standardMouseOver</a>, <a href="../symbols/Tool.html#standardMouseSelect" class="linkMethod">standardMouseSelect</a>, <a href="../symbols/Tool.html#standardMouseWheel" class="linkMethod">standardMouseWheel</a>, <a href="../symbols/Tool.html#standardPinchZoomMove" class="linkMethod">standardPinchZoomMove</a>, <a href="../symbols/Tool.html#standardPinchZoomStart" class="linkMethod">standardPinchZoomStart</a>, <a href="../symbols/Tool.html#standardWaitAfter" class="linkMethod">standardWaitAfter</a>, <a href="../symbols/Tool.html#startTransaction" class="linkMethod">startTransaction</a>, <a href="../symbols/Tool.html#stopTool" class="linkMethod">stopTool</a>, <a href="../symbols/Tool.html#stopTransaction" class="linkMethod">stopTransaction</a>, <a href="../symbols/Tool.html#updateAdornments" class="linkMethod">updateAdornments</a></dd>
</dl>
<!-- ============================== events summary ======================== -->
<!-- ============================== fields summary ===================== -->
<!-- ============================== constructor details ==================== -->
</div> <!-- end contentBody -->
</div> <!-- end container-fluid -->
<!-- ============================== footer ================================= -->
<div id="footer" class="fineprint" style="clear:both">
Copyright © 1998-2019 by <a href="https://www.nwoods.com/">Northwoods Software Corporation.</a>
</div>
</body>
</html>