sgojs

<!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="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/css/main.css"> <script async src="../assets/js/search.js" id="search-script"></script> </head> <body> <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 font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"> <h1 class="mb-0 p-1">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" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">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" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li> </ul> </div> </div> <hr class="border-b border-gray-600 opacity-50 my-0 py-0" /> </nav> <div class="tsd 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-index="../assets/js/search.json" 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 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.1.47<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div> <div> <h1>Class ResizingTool</h1> </div> </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">ResizingTool</span> <ul class="tsd-hierarchy"> <li> <a href="OverviewResizingTool.html" class="tsd-signature-type" data-tsd-kind="Class">OverviewResizingTool</a> </li> <li> <a href="ResizeMultipleTool.html" class="tsd-signature-type" data-tsd-kind="Class">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> 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="language-js"><span style="color: #D4D4D4"> </span><span style="color: #569CD6">var</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">node</span><span style="color: #D4D4D4"> = ...;</span> <span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">myDiagram</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">select</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">node</span><span style="color: #D4D4D4">);</span> <span style="color: #D4D4D4"> </span><span style="color: #569CD6">var</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">adorn</span><span style="color: #D4D4D4"> = </span><span style="color: #9CDCFE">node</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">findAdornment</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">"Resizing"</span><span style="color: #D4D4D4">);</span> <span style="color: #D4D4D4"> </span><span style="color: #569CD6">var</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">tool</span><span style="color: #D4D4D4"> = </span><span style="color: #9CDCFE">myDiagram</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">toolManager</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">resizingTool</span><span style="color: #D4D4D4">;</span> <span style="color: #D4D4D4"> </span><span style="color: #6A9955">// specify which resize handle of the "Resizing" Adornment of the selected node</span> <span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">tool</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">handle</span><span style="color: #D4D4D4"> = </span><span style="color: #9CDCFE">adorn</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">elt</span><span style="color: #D4D4D4">(...);</span> <span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">myDiagram</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">currentTool</span><span style="color: #D4D4D4"> = </span><span style="color: #9CDCFE">tool</span><span style="color: #D4D4D4">; </span><span style="color: #6A9955">// starts the ResizingTool</span> <span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">tool</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">doActivate</span><span style="color: #D4D4D4">(); </span><span style="color: #6A9955">// 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 tsd-is-overwrite"><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#dragsMembers" class="tsd-kind-icon">drags<wbr>Members</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 tsd-is-overwrite"><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 tsd-is-overwrite"><a href="ResizingTool.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="ResizingTool.html#doCancel" class="tsd-kind-icon">do<wbr>Cancel</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="ResizingTool.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="ResizingTool.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="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 tsd-is-overwrite"><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 tsd-is-overwrite"> <a name="constructor" class="tsd-anchor"></a> <h3> constructor </h3> <ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"> <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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">GraphObject</a> </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" data-tsd-kind="Class">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="dragsMembers" class="tsd-anchor"></a> <h3> drags<wbr>Members <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> moves the member Parts of a Group that has no <a href="Group.html#placeholder">Group.placeholder</a>. By default this property is true. Setting this property does not raise any events.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>2.1.26</p> </dd> </dl> </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" data-tsd-kind="Class">GraphObject</a> </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" data-tsd-kind="Class">GraphObject</a> </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="language-js"><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">myDiagram</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">toolManager</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">resizingTool</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">handleArchetype</span><span style="color: #D4D4D4"> =</span> <span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Shape</span><span style="color: #D4D4D4">, </span><span style="color: #CE9178">"Circle"</span><span style="color: #D4D4D4">,</span> <span style="color: #D4D4D4"> { </span><span style="color: #9CDCFE">width:</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">10</span><span style="color: #D4D4D4">, </span><span style="color: #9CDCFE">height:</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">10</span><span style="color: #D4D4D4">, </span><span style="color: #9CDCFE">fill:</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">"yellow"</span><span style="color: #D4D4D4"> });</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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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 tsd-is-overwrite"> <a name="canStart" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagOverride">Override</span> <span class="tsd-flag ts-flagVirtual">Virtual</span> can<wbr>Start </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 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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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="language-js"><span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Diagram</span><span style="color: #D4D4D4">, . . .,</span> <span style="color: #D4D4D4"> {</span> <span style="color: #D4D4D4"> </span><span style="color: #CE9178">"resizingTool.computeReshape"</span><span style="color: #9CDCFE">:</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">function</span><span style="color: #D4D4D4">() { </span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">false</span><span style="color: #D4D4D4">; },</span> <span style="color: #D4D4D4"> . . . })</span> </code></pre> <p>Or when overriding the method dynamically:</p> <pre><code class="language-js"><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">myDiagram</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">toolManager</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">resizingTool</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">computeReshape</span><span style="color: #D4D4D4"> = </span><span style="color: #569CD6">function</span><span style="color: #D4D4D4">() { </span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">false</span><span style="color: #D4D4D4">; }</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" data-tsd-kind="Class">Point</a>, spot<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type" data-tsd-kind="Class">Spot</a>, min<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type" data-tsd-kind="Class">Size</a>, max<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type" data-tsd-kind="Class">Size</a>, cell<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">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 tsd-is-overwrite"> <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 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>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 tsd-is-overwrite"> <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 tsd-is-overwrite"> <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 tsd-is-overwrite"> <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 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>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 tsd-is-overwrite"> <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 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>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 tsd-is-overwrite"> <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 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="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 res