gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
803 lines • 53.8 kB
HTML
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ResizingTool | GoJS API</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<header>
<!-- 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" target="api">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="tsd-page-header">
<div class="tsd-page-toolbar">
<div class="container-fluid plr15">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" data-base="..">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-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>
<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>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container-fluid plr15">
<div class="top-copyright">
<!--<b>GoJS</b>® Diagramming Components<br/>version <br/>version 2.1.18 for TypeScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>-->
<b>GoJS</b>® Diagramming Components<br/>version 2.1.18<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
</div>
<div>
<h1>Class ResizingTool</h1>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid container-main plr15">
<div class="row">
<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">Tool</a>
<ul class="tsd-hierarchy">
<li>
<span class="target">ResizingTool</span>
<ul class="tsd-hierarchy">
<li>
<a href="OverviewResizingTool.html" class="tsd-signature-type">OverviewResizingTool</a>
</li>
<li>
<a href="ResizeMultipleTool.html" class="tsd-signature-type">ResizeMultipleTool</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<p>The ResizingTool is used to interactively change the size of a <a href="GraphObject.html">GraphObject</a>
in the selected <a href="Part.html">Part</a> or <a href="Node.html">Node</a> by setting its <a href="GraphObject.html#desiredSize">GraphObject.desiredSize</a> property.
You may want to save the size to the model by using a TwoWay <a href="Binding.html">Binding</a> on the "desiredSize" property
of the GraphObject that is named by <a href="Part.html#resizeObjectName">Part.resizeObjectName</a>.
This tool does not operate on <a href="Link.html">Link</a>s.</p>
<p>You can limit the permitted minimum and maximum dimensions by setting
<a href="ResizingTool.html#minSize">minSize</a> and <a href="ResizingTool.html#maxSize">maxSize</a>.
The resizing will also respect the <a href="GraphObject.html#minSize">GraphObject.minSize</a> and
<a href="GraphObject.html#maxSize">GraphObject.maxSize</a> properties.
Width or height values that are NaN do not constrain the resizing.
Override <a href="ResizingTool.html#computeMinSize">computeMinSize</a> and/or <a href="ResizingTool.html#computeMaxSize">computeMaxSize</a> to change this behavior.</p>
<p>You can also limit the width and/or height to be multiples of a particular size by
setting <a href="Part.html#resizeCellSize">Part.resizeCellSize</a>.
If either or both of these values are NaN, as they are by default,
it will get the values from this tool's <a href="ResizingTool.html#cellSize">cellSize</a>.
Finally it will consider the <a href="Diagram.html#grid">Diagram.grid</a>'s <a href="Panel.html#gridCellSize">Panel.gridCellSize</a>
if <a href="ResizingTool.html#isGridSnapEnabled">isGridSnapEnabled</a> is true.
Override <a href="ResizingTool.html#computeCellSize">computeCellSize</a> to change this behavior.</p>
<p>Pressing the Shift key or resizing a <a href="Shape.html">Shape</a> with a <a href="Shape.html#geometryStretch">Shape.geometryStretch</a> of
<a href="GraphObject.html#static-Uniform">GraphObject.Uniform</a> or <a href="GraphObject.html#static-UniformToFill">GraphObject.UniformToFill</a> will maintain the aspect ratio during the resize.
Override <a href="ResizingTool.html#computeReshape">computeReshape</a> to change this behavior.</p>
<p>This tool makes use of an <a href="Adornment.html">Adornment</a>, shown when the <a href="Part.html">Part</a> or <a href="Node.html">Node</a> is selected,
that includes some number of resize handles.
The resize handles are normally copies of <a href="ResizingTool.html#handleArchetype">ResizingTool.handleArchetype</a>,
unless you specify a custom resize Adornment by setting <a href="Part.html#resizeAdornmentTemplate">Part.resizeAdornmentTemplate</a>.
The resize Adornment is normally a "Spot" Panel with eight resize handles,
each with <a href="GraphObject.html#alignment">GraphObject.alignment</a> set to one of the eight standard <a href="Spot.html">Spot</a> values --
the four corners and the four side middles.
The <a href="GraphObject.html#alignment">GraphObject.alignment</a> is what identifies and distinguishes each of the handles and
the behavior when the user drags the handle.</p>
<p>This tool conducts a transaction while the tool is active.
A successful resizing will result in a "PartResized" <a href="DiagramEvent.html">DiagramEvent</a> and a "Resizing" transaction.</p>
<p class="boxread">
For a general discussion of the sizing of objects, see: <a href="../../intro/sizing.html">Introduction to the sizing of GraphObjects</a>.
For customizing the ResizingTool, see <a href="../../intro/tools.html#ResizingTool">Introduction to the ResizingTool</a>.
<p>If you want to programmatically start a user's resizing of the <a href="Part.html#resizeObject">Part.resizeObject</a> of an existing selected node,
you can set the <a href="ResizingTool.html#handle">handle</a> property to the specific resize handle and then start and activate the tool.</p>
<pre><code class="hljs js"> <span class="hljs-keyword">var</span> node = ...;
myDiagram.select(node);
<span class="hljs-keyword">var</span> adorn = node.findAdornment(<span class="hljs-string">"Resizing"</span>);
<span class="hljs-keyword">var</span> tool = myDiagram.toolManager.resizingTool;
<span class="hljs-comment">// specify which resize handle of the "Resizing" Adornment of the selected node</span>
tool.handle = adorn.elt(...);
myDiagram.currentTool = tool; <span class="hljs-comment">// starts the ResizingTool</span>
tool.doActivate(); <span class="hljs-comment">// activates the ResizingTool</span></code></pre>
</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"><a href="ResizingTool.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="ResizingTool.html#adornedObject" class="tsd-kind-icon">adorned<wbr>Object</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="ResizingTool.html#cellSize" class="tsd-kind-icon">cell<wbr>Size</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="ResizingTool.html#handle" class="tsd-kind-icon">handle</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="ResizingTool.html#handleArchetype" class="tsd-kind-icon">handle<wbr>Archetype</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="ResizingTool.html#isGridSnapEnabled" class="tsd-kind-icon">is<wbr>Grid<wbr>Snap<wbr>Enabled</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="ResizingTool.html#maxSize" class="tsd-kind-icon">max<wbr>Size</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="ResizingTool.html#minSize" class="tsd-kind-icon">min<wbr>Size</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="ResizingTool.html#originalDesiredSize" class="tsd-kind-icon">original<wbr>Desired<wbr>Size</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="ResizingTool.html#originalLocation" class="tsd-kind-icon">original<wbr>Location</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"><a href="ResizingTool.html#canStart" class="tsd-kind-icon">can<wbr>Start</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="ResizingTool.html#computeCellSize" class="tsd-kind-icon">compute<wbr>Cell<wbr>Size</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="ResizingTool.html#computeMaxSize" class="tsd-kind-icon">compute<wbr>Max<wbr>Size</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="ResizingTool.html#computeMinSize" class="tsd-kind-icon">compute<wbr>Min<wbr>Size</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="ResizingTool.html#computeReshape" class="tsd-kind-icon">compute<wbr>Reshape</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="ResizingTool.html#computeResize" class="tsd-kind-icon">compute<wbr>Resize</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="ResizingTool.html#doActivate" class="tsd-kind-icon">do<wbr>Activate</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="ResizingTool.html#doCancel" class="tsd-kind-icon">do<wbr>Cancel</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="ResizingTool.html#doDeactivate" class="tsd-kind-icon">do<wbr>Deactivate</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="ResizingTool.html#doMouseMove" class="tsd-kind-icon">do<wbr>Mouse<wbr>Move</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="ResizingTool.html#doMouseUp" class="tsd-kind-icon">do<wbr>Mouse<wbr>Up</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="ResizingTool.html#resize" class="tsd-kind-icon">resize</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="ResizingTool.html#updateAdornments" class="tsd-kind-icon">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">
<a name="constructor" class="tsd-anchor"></a>
<h3>
constructor
</h3>
<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">new <wbr>Resizing<wbr>Tool<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="ResizingTool.html" class="tsd-signature-type">ResizingTool</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#resizingTool">ToolManager.resizingTool</a>, which you can modify.</p>
<p>The <a href="Tool.html#name">Tool.name</a> of this tool is "Resizing".</p>
</div>
<h4 class="tsd-returns-title">Returns <a href="ResizingTool.html" class="tsd-signature-type">ResizingTool</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 name="adornedObject" class="tsd-anchor"></a>
<h3>
adorned<wbr>Object
<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets the <a href="GraphObject.html">GraphObject</a> that is being resized.
This may be the same object as the selected <a href="Part.html">Part</a> or it may be contained within that Part.</p>
<p>This property is also settable, but should only be set when overriding functions
in ResizingTool, and not during normal operation.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="cellSize" class="tsd-anchor"></a>
<h3>
cell<wbr>Size
<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type">Size</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the width and height multiples with which the user must resize.
The effective cell size is computed by first looking at the <a href="Adornment.html#adornedPart">Adornment.adornedPart</a>'s <a href="Part.html#resizeCellSize">Part.resizeCellSize</a>.
If either or both of its width and height are <code>NaN</code>, it will use this property, <code>cellSize</code>.
If either or both of this property's width and height are <code>NaN</code>, it will
consider the <a href="Diagram.html#grid">Diagram.grid</a>'s <a href="Panel.html#gridCellSize">Panel.gridCellSize</a>.</p>
<p>The default value is <code>go.Size(NaN, NaN)</code>.
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 name="handle" class="tsd-anchor"></a>
<h3>
handle
<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Returns the <a href="GraphObject.html">GraphObject</a> that is the tool handle being dragged by the user.
This will be contained by an <a href="Adornment.html">Adornment</a> whose category is "ResizingTool".
Its <a href="Adornment.html#adornedObject">Adornment.adornedObject</a> is the same as the <a href="ResizingTool.html#adornedObject">adornedObject</a>.
This is normally set by <a href="ResizingTool.html#doActivate">doActivate</a>, remembering the result of the call to <a href="Tool.html#findToolHandleAt">Tool.findToolHandleAt</a>.</p>
<p>This property is also settable, but should only be set either within an override of <a href="ResizingTool.html#doActivate">doActivate</a>
or prior to calling <a href="ResizingTool.html#doActivate">doActivate</a>.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="handleArchetype" class="tsd-anchor"></a>
<h3>
handle<wbr>Archetype
<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets a small GraphObject that is copied as a resizing handle for the selected part.
By default this is a <a href="Shape.html">Shape</a> that is a small blue rectangle.
Setting this property does not raise any events.</p>
<p>Here is an example of changing the default handle to be larger yellow circles:</p>
<pre><code class="hljs js"> myDiagram.toolManager.resizingTool.handleArchetype =
$(go.Shape, <span class="hljs-string">"Circle"</span>,
{ <span class="hljs-attr">width</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">fill</span>: <span class="hljs-string">"yellow"</span> });</code></pre>
<p>This property is ignored when a custom resizing Adornment is specified as the <a href="Part.html#resizeAdornmentTemplate">Part.resizeAdornmentTemplate</a>.
That property is normally null, in which case this tool will automatically construct Adornments
holding eight copies of this handle archetype, each with a <a href="GraphObject.html#alignment">GraphObject.alignment</a> being one of the
standard eight <a href="Spot.html">Spot</a>s.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="isGridSnapEnabled" class="tsd-anchor"></a>
<h3>
is<wbr>Grid<wbr>Snap<wbr>Enabled
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the <a href="ResizingTool.html">ResizingTool</a> snaps object sizes to the diagram's background grid during the resize.
By default this property is false.
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 name="maxSize" class="tsd-anchor"></a>
<h3>
max<wbr>Size
<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type">Size</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the maximum size to which the user can resize.
The effective maximum size is the minimum of this value and the <a href="GraphObject.html#maxSize">GraphObject.maxSize</a>,
independently in each direction.</p>
<p>The default value is <code>go.Size(9999, 9999)</code>.
Any new value must be of type Size; <code>NaN</code> width or height values are treated as Infinity.
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 name="minSize" class="tsd-anchor"></a>
<h3>
min<wbr>Size
<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type">Size</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the minimum size to which the user can resize.
The effective minimum size is the maximum of this value and the <a href="GraphObject.html#minSize">GraphObject.minSize</a>,
independently in each direction.</p>
<p>The default value is <code>go.Size(1, 1)</code>.
Any new value must be of type Size; <code>NaN</code> width or height values are treated as zero.
Setting this property does not raise any events.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="originalDesiredSize" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
original<wbr>Desired<wbr>Size
<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type">Size</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns the <a href="Size.html">Size</a> that was the original value of the <a href="GraphObject.html#desiredSize">GraphObject.desiredSize</a>
of the element that is being resized.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.1</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="originalLocation" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
original<wbr>Location
<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns the <a href="Point.html">Point</a> that was the original value of the <a href="Part.html#location">Part.location</a>
of the Part that is being resized.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.1</p>
</dd>
</dl>
</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">
<a name="canStart" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagVirtual">Virtual</span> <span class="tsd-flag ts-flagOverride">Override</span>
can<wbr>Start
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<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 may run when there is a mouse-down event on a resize handle,
the diagram is not read-only and it allows resizing,
the left mouse button is being used,
and this tool's adornment's resize handle is at 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 <span class="tsd-signature-type">boolean</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="computeCellSize" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagVirtual">Virtual</span>
compute<wbr>Cell<wbr>Size
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">compute<wbr>Cell<wbr>Size<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type">Size</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>The size should be a multiple of the value returned by this method.</p>
<p>This is called once when the tool is activated.</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="Size.html" class="tsd-signature-type">Size</a></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="computeMaxSize" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagVirtual">Virtual</span>
compute<wbr>Max<wbr>Size
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">compute<wbr>Max<wbr>Size<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type">Size</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>The effective maximum resizing size is the minimum of the <a href="ResizingTool.html#maxSize">maxSize</a> and the
<a href="ResizingTool.html#adornedObject">adornedObject</a>'s <a href="GraphObject.html#maxSize">GraphObject.maxSize</a>.</p>
<p>This is called once when the tool is activated.</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="Size.html" class="tsd-signature-type">Size</a></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="computeMinSize" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagVirtual">Virtual</span>
compute<wbr>Min<wbr>Size
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">compute<wbr>Min<wbr>Size<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type">Size</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>The effective minimum resizing size is the maximum of <a href="ResizingTool.html#minSize">minSize</a> and the
<a href="ResizingTool.html#adornedObject">adornedObject</a>'s <a href="GraphObject.html#minSize">GraphObject.minSize</a>.</p>
<p>This is called once when the tool is activated.</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="Size.html" class="tsd-signature-type">Size</a></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="computeReshape" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagVirtual">Virtual</span>
compute<wbr>Reshape
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">compute<wbr>Reshape<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>Decide whether to allow arbitrary reshaping or whether to keep the same aspect ratio of the object being resized.
If the <a href="ResizingTool.html#adornedObject">adornedObject</a> is a <a href="Shape.html">Shape</a>,
then if the <a href="Shape.html#geometryStretch">Shape.geometryStretch</a> is <a href="GraphObject.html#static-Uniform">GraphObject.Uniform</a>,
this method will return false to restrict reshaping to maintain the object's current ratio of height to width.
Also, if the user is holding down the Shift key, this method will return false.</p>
<p>This is called on each mouse-move and on mouse-up; the result is passed to the call to <a href="ResizingTool.html#resize">resize</a>.
This permits the user to change the behavior dynamically during resizing.</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>
<p>For example, to always keep the object's original aspect ratio, override this method to return false.
When calling <a href="GraphObject.html#static-make">GraphObject.make</a> to initialize a <a href="Diagram.html">Diagram</a>:</p>
<pre><code class="hljs js">$(go.Diagram, . . .,
{
<span class="hljs-string">"resizingTool.computeReshape"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; },
. . . })</code></pre>
<p>Or when overriding the method dynamically:</p>
<pre><code class="hljs js"> myDiagram.toolManager.resizingTool.computeReshape = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; }</code></pre>
<p>Your override might want to look at the <code>this.adornedObject.part.data</code> properties to decide whether to allow reshaping.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.7</p>
</dd>
</dl>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4>
<p>true to allow any aspect ratio; false to preserve the <a href="ResizingTool.html#adornedObject">adornedObject</a>'s height/width ratio</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="computeResize" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagVirtual">Virtual</span>
compute<wbr>Resize
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">compute<wbr>Resize<span class="tsd-signature-symbol">(</span>newPoint<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a>, spot<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type">Spot</a>, min<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type">Size</a>, max<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type">Size</a>, cell<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type">Size</a>, reshape<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type">Rect</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Given a <a href="Spot.html">Spot</a> in the original bounds of the object being resized and a new <a href="Point.html">Point</a>,
compute the new <a href="Rect.html">Rect</a>.</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-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>newPoint: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
<div class="tsd-comment tsd-typography">
<p>a Point in local coordinates.</p>
</div>
</li>
<li>
<h5>spot: <a href="Spot.html" class="tsd-signature-type">Spot</a></h5>
<div class="tsd-comment tsd-typography">
<p>the alignment spot of the handle being dragged.</p>
</div>
</li>
<li>
<h5>min: <a href="Size.html" class="tsd-signature-type">Size</a></h5>
<div class="tsd-comment tsd-typography">
<p>the result of the call to <a href="ResizingTool.html#computeMinSize">computeMinSize</a>.</p>
</div>
</li>
<li>
<h5>max: <a href="Size.html" class="tsd-signature-type">Size</a></h5>
<div class="tsd-comment tsd-typography">
<p>the result of the call to <a href="ResizingTool.html#computeMaxSize">computeMaxSize</a>.</p>
</div>
</li>
<li>
<h5>cell: <a href="Size.html" class="tsd-signature-type">Size</a></h5>
<div class="tsd-comment tsd-typography">
<p>the result of the call to <a href="ResizingTool.html#computeCellSize">computeCellSize</a>.</p>
</div>
</li>
<li>
<h5>reshape: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>true if the new size may change the aspect ratio from that of the natural bounds of the <a href="ResizingTool.html#adornedObject">adornedObject</a>.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="Rect.html" class="tsd-signature-type">Rect</a></h4>
<p>a Rectangle in the <a href="ResizingTool.html#adornedObject">adornedObject</a>'s local coordinates, not in document coordinates</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="doActivate" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagOverride">Override</span>
do<wbr>Activate
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<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>Find the <a href="ResizingTool.html#handle">handle</a>, remember the object's original bounds,
save the results of calling <a href="ResizingTool.html#computeMinSize">computeMinSize</a>, <a href="ResizingTool.html#computeMaxSize">computeMaxSize</a>, and <a href="ResizingTool.html#computeCellSize">computeCellSize</a>,
capture the mouse, and start a transaction.</p>
<p>Normally when this method is called the value of <a href="ResizingTool.html#handle">handle</a> will be null,
resulting in a call to <a href="Tool.html#findToolHandleAt">Tool.findToolHandleAt</a> to find a "Resizing" tool handle,
which is then remembered as the value of <a href="ResizingTool.html#handle">handle</a>.
If when this method is called the value of <a href="ResizingTool.html#handle">handle</a> is already set,
then there is no need to call <a href="Tool.html#findToolHandleAt">Tool.findToolHandleAt</a>,
because the programmer has already set up which resize handle they want the user to be resizing.</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">
<a name="doCancel" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagOverride">Override</span>
do<wbr>Cancel
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">do<wbr>Cancel<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>Restore the original size of the <a href="GraphObject.html">GraphObject</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">
<a name="doDeactivate" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagOverride">Override</span>
do<wbr>Deactivate
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<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>Stop the current transaction, forget the <a href="ResizingTool.html#handle">handle</a> and <a href="ResizingTool.html#adornedObject">adornedObject</a>, and release the mouse.</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">
<a name="doMouseMove" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagOverride">Override</span>
do<wbr>Mouse<wbr>Move
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<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>Call <a href="ResizingTool.html#resize">resize</a> with a new size determined by the current mouse point.
This determines the new bounds by calling <a href="ResizingTool.html#computeResize">computeResize</a>.</p>
<p>When this calls <a href="ResizingTool.html#computeResize">computeResize</a> it passes as the reshape argument the result of calling <a href="ResizingTool.html#computeReshape">computeReshape</a>.
The min, max, and cell arguments will be the saved results of <a href="ResizingTool.html#doActivate">doActivate</a>'s calls to <a href="ResizingTool.html#computeMinSize">computeMinSize</a>, <a href="ResizingTool.html#computeMaxSize">computeMaxSize</a>, and <a href="ResizingTool.html#computeCellSize">computeCellSize</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">
<a name="doMouseUp" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagOverride">Override</span>
do<wbr>Mouse<wbr>Up
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<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="ResizingTool.html#resize">resize</a> with the final bounds based on the most recent mouse point,
commit the transaction, and raise the "PartResized" <a href="DiagramEvent.html">DiagramEvent</a>.
This determines the new bounds by calling <a href="ResizingTool.html#computeResize">computeResize</a>.</p>
<p>When this calls <a href="ResizingTool.html#computeResize">computeResize</a> it passes as the reshape argument the result of calling <a href="ResizingTool.html#computeReshape">computeReshape</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">
<a name="resize" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagVirtual">Virtual</span>
resize
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">resize<span class="tsd-signature-symbol">(</span>newr<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type">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>Change the size of the selected part's <a href="Part.html#resizeObject">Part.resizeObject</a> to have the given bounds.
This modifies its <a href="GraphObject.html#desiredSize">GraphObject.desiredSize</a> and maybe its <a href="Part.html#location">Part.location</a>.</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-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>newr: <a href="Rect.html" class="tsd-signature-type">Rect</a></h5>
<div class="tsd-comment tsd-typography">
<p>a Rectangle in the <a href="ResizingTool.html#adornedObject">adornedObject</a>'s local coordinates, not 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 class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="updateAdornments" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagVirtual">Virtual</span> <span class="tsd-flag ts-flagOverride">Override</span>
update<wbr>Adornments
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">update<wbr>Adornments<span class="tsd-signature-symbol">(</span>part<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</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>Show an <a href="Adornment.html">Adornment</a> with the resize handles at points along the edge of the bounds of the
selected <a href="Part.html">Part</a>'s <a href="Part.html#resizeObject">Part.resizeObject</a>.</p>
<p>First this finds the object in the visual tree of the Part that should
get the resize adornment and that the user will be able to resize interactively.
It finds the object that has the <a href="Part.html#resizeObjectName">Part.resizeObjectName</a> property of the Part.
If the <a href="Part.html#resizeObjectName">Part.resizeObjectName</a> property is an empty string, as it is by default,
it uses the whole part.</p>
<p>It then builds the adornment, associating it with the chosen resize object.
If <a href="Part.html#resizeAdornmentTemplate">Part.resizeAdornmentTemplate</a> is non-null, it is copied.
Otherwise it constructs a new Adornment with a <a href="Placeholder.html">Placeholder</a> and eight copies of <a href="ResizingTool.html#handleArchetype">handleArchetype</a>,
four at the corners and four at the middle of each side.</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-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>part: <a href="Part.html" class="tsd-signature-type">Part</a></h5>
<div class="tsd-comment tsd-typography">
</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="globals ">
<a href="../index.html"><em>GoJS <wbr>Class <wbr>Index</em></a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
<ul class="current">
<li class="current tsd-kind-class">
<a href="ResizingTool.html" class="tsd-kind-icon">Resizing<wbr>Tool</a>
<ul>
<li class=" tsd-kind-constructor tsd-parent-kind-class">
<a href="ResizingTool.html#constructor" class="tsd-kind-icon">constructor</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="ResizingTool.html#adornedObject" class="tsd-kind-icon">adorned<wbr>Object</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="ResizingTool.html#cellSize" class="tsd-kind-icon">cell<wbr>Size</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="ResizingTool.html#handle" class="tsd-kind-icon">handle</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="ResizingTool.html#handleArchetype" class="tsd-kind-icon">handle<wbr>Archetype</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="ResizingTool.html#isGridSnapEnabled" class="tsd-kind-icon">is<wbr>Grid<wbr>Snap<wbr>Enabled</a>
</li>
<li class=" tsd-kind-access