intro/tools.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>


<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->


<meta itemprop="name" content="Tools" />
<meta property="og:title" content="Tools" />
<meta name="twitter:title" content="Tools" />


<meta property="og:image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />

<meta property="og:url" content="https://gojs.net/latest/intro/tools.html" />
<meta property="twitter:url" content="https://gojs.net/latest/intro/tools.html" />

<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />

    <title>
      Tools | GoJS
    </title>
    <link rel="stylesheet" href="../assets/css/prism.css"/>
  </head>
  <script>
    window.diagrams = [];
    window.goCode = function (pre, w, h, parentid, animation) {
      window
        .diagrams
        .push([pre, w, h, parentid, animation]);
    }
  </script>
  <body>
    <nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
  <div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
    <a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
       href="../">
      GoJS
    </a>
    <div class="relative">
      <button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
        <svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <div id="topnavList" class="hidden md:block">
        <div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
                    md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
          <a href="../learn/">Learn</a>
          <a href="../samples/">Samples</a>
          <a href="../intro/">Intro</a>
          <a href="../api/">API</a>
          <a href="../download.html">Download</a>
          <a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
          <a id="tc" href="https://nwoods.com/contact.html"
            target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
          <a id="tb" href="https://nwoods.com/sales/index.html"
            target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
        </div>
      </div>
    </div>
  </div>
</nav>
<script>
  window.addEventListener("DOMContentLoaded", function () {
    // topnav
    var topButton = document.getElementById("topnavButton");
    var topnavList = document.getElementById("topnavList");
    if (topButton && topnavList) {
      topButton.addEventListener("click", function (e) {
        topnavList
          .classList
          .toggle("hidden");
        e.stopPropagation();
      });
      document.addEventListener("click", function (e) {
        // if the clicked element isn't the list, close the list
        if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
          topButton.click();
        }
      });

      // set active <a> element
      var url = window
        .location
        .href
        .toLowerCase();
      var aTags = topnavList.getElementsByTagName('a');
      for (var i = 0; i < aTags.length; i++) {
        var lowerhref = aTags[i]
          .href
          .toLowerCase();
        if (url.startsWith(lowerhref)) {
          aTags[i]
            .classList
            .add('active');
          break;
        }
      }
    }
  });
</script>
    <div class="sticky top-0 left-0 z-10 px-2 w-full bg-white border-b border-b-gray-200 md:hidden">
  <button id="sidenavButton" class="flex p-2 text-gray-900 bg-inherit shadow-none items-center text-sm font-semibold hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
    <svg class="h-7 w-7 block mr-2" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
      <path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <span>Menu</span>
  </button>
</div>
<script>
  window.addEventListener("DOMContentLoaded", function () {
    // sidenav
    var sideButton = document.getElementById("sidenavButton");
    var sidenav = document.getElementById("sidenav");
    if (sideButton && sidenav) {
      sideButton.addEventListener("click", function (e) {
        sidenav
          .classList
          .toggle("hidden");
        e.stopPropagation();
      });
      document.addEventListener("click", function (e) {
        // if the clicked element isn't the list, close the list
        if (!sidenav.classList.contains("hidden") && !e.target.closest("#sidenavList")) {
          sideButton.click();
        }
      });
    }
  });
</script>
    
    <div class="flex flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
      
      <aside id="sidenav"
  class="hidden fixed top-0 left-0 z-10 w-full bg-black/10 min-h-screen max-h-screen overflow-x-hidden overflow-y-auto flex-shrink-0
         md:block md:sticky md:w-52 md:min-h-0 md:bg-inherit md:border-r md:border-r-gray-200 md:overscroll-auto">
  <nav id="sidenavList" class="flex flex-col bg-white w-52 min-h-screen pl-2 pt-4 pb-24 md:w-full md:min-h-0">
    
  <a href="index.html">Basics</a>
  <a href="buildingObjects.html">Building Parts</a>
  <a href="usingModels.html">Using Models</a>
  <a href="dataBinding.html">Data Binding</a>
  <a href="react.html">GoJS with React</a>
  <a href="svelte.html">GoJS with Svelte</a>
  <a href="angular.html">GoJS with Angular</a>
  <a href="textBlocks.html">TextBlocks</a>
  <a href="shapes.html">Shapes</a>
  <a href="pictures.html">Pictures</a>
  <a href="panels.html">Panels</a>
  <a href="tablePanels.html">Table Panels</a>
  <a href="brush.html">Brushes</a>
  <a href="sizing.html">Sizing Objects</a>
  <a href="itemArrays.html">Item Arrays</a>
  <a href="changedEvents.html">Changed Events</a>
  <a href="transactions.html">Transactions</a>
  <a href="viewport.html">Coordinates</a>
  <a href="initialView.html">Initial View</a>
  <a href="collections.html">Collections</a>
  <a href="links.html">Links</a>
  <a href="linkLabels.html">Link Labels</a>
  <a href="connectionPoints.html">Link Points</a>
  <a href="ports.html">Ports</a>
  <a href="nodes.html">Nodes</a>
  <a href="typings.html">Typings</a>
  <a href="debugging.html">Debugging</a>
  <a href="layouts.html">Layouts</a>
  <a href="trees.html">Trees</a>
  <a href="subtrees.html">SubTrees</a>
  <a href="groups.html">Groups</a>
  <a href="subgraphs.html">SubGraphs</a>
  <a href="sizedGroups.html">Sized Groups</a>
  <a href="selection.html">Selection</a>
  <a href="highlighting.html">Highlighting</a>
  <a href="theming.html">Theming</a>
  <a href="routers.html">Routers</a>
  <a href="animation.html">Animation</a>
  <a href="toolTips.html">ToolTips</a>
  <a href="contextmenus.html">Context Menus</a>
  <a href="events.html">Diagram Events</a>
  <a href="tools.html">Tools</a>
  <a href="commands.html">Commands</a>
  <a href="permissions.html">Permissions</a>
  <a href="validation.html">Validation</a>
  <a href="HTMLInteraction.html">HTML Interaction</a>
  <a href="layers.html">Layers &amp; Z-ordering</a>
  <a href="palette.html">Palette</a>
  <a href="overview.html">Overview</a>
  <a href="replacingDeleting.html">Replacing and Deleting</a>
  <a href="buttons.html">Buttons</a>
  <a href="templateMaps.html">Template Maps</a>
  <a href="legends.html">Legends and Titles</a>
  <a href="extensions.html">Extensions</a>
  <a href="geometry.html">Geometry Strings</a>
  <a href="grids.html">Grid Patterns</a>
  <a href="graduatedPanels.html">Graduated Panels</a>
  <a href="SVGcontext.html">Rendering to SVG</a>
  <a href="makingSVG.html">Snapshot to SVG</a>
  <a href="makingImages.html">Diagram Images</a>
  <a href="printing.html">Printing</a>
  <a href="serverSideImages.html">Server-side Images</a>
  <a href="nodeScript.html">GoJS in Node.js</a>
  <a href="testing.html">Testing</a>
  <a href="performance.html">Performance</a>
  <a href="platforms.html">Platforms</a>
  <a href="deployment.html">Deployment</a>

  </nav>
</aside>
<script>
  var navList = document.getElementById('sidenavList');
  if (navList !== null) {
    var url = window.location.href;
    var lindex = url.lastIndexOf('/');
    url = url
      .slice(lindex + 1)
      .toLowerCase();
    var aTags = navList.getElementsByTagName('a');
    var currentindex = -1;
    for (var i = 0; i < aTags.length; i++) {
      var lowerhref = aTags[i]
        .href
        .toLowerCase();
      if (lowerhref.indexOf('/' + url) !== -1) {
        currentindex = i;
        aTags[i]
          .classList
          .add('active');
        break;
      }
    }
  }
</script>
      
      <div class="px-4 pb-16 w-full overflow-hidden prose">
        
<h1>Tools</h1>
<p>
  <a>Tool</a>s handle all of the input events.
  There are many kinds of predefined Tool classes that implement all of the common operations that users do.
</p>
<p>
  For flexibility and simplicity, all input events are canonicalized as <a>InputEvent</a>s and
  redirected by the diagram to go to the <a>Diagram.currentTool</a>.
  By default the Diagram.currentTool is an instance of <a>ToolManager</a> held as the <a>Diagram.toolManager</a>.
  The ToolManager implements support for all mode-less tools.
  The ToolManager is responsible for finding another tool that is ready to run and then making it the new current tool.
  This causes the new tool to process all of the input events (mouse, keyboard, and touch) until the tool decides
  that it is finished, at which time the diagram's current tool reverts back to the <a>Diagram.defaultTool</a>,
  which is normally the ToolManager, again.
</p>
<p>
  Although the terminology includes the word "mouse", often that refers to both mouse events and touch events.
</p>
<p>
  See samples that make use of <a>Tool</a>s in the <a href="../samples/index.html#tools">samples index</a>.
</p>

<h2 id="PredefinedTools">Predefined Tools</h2>
<p>
  Each <a>Diagram</a> has an instance of most of the tool classes, all managed by the diagram's <a>ToolManager</a>.
  If you want to change the interactive behavior, in many common cases you may be able to do so by setting properties
  on the <a>Diagram</a>, on your <a>Part</a>s, or on individual <a>GraphObject</a>s.
  But more generally you may need to modify one or more of the tools, which are accessible as properties of the <a>Diagram.toolManager</a>.
</p>

<p>
  Some tools want to run when a mouse-down occurs. These tools include:
</p>
<ul>
  <li><a>ToolManager.actionTool</a>, an <a>ActionTool</a>, for allowing "buttons" and other <a>GraphObject</a>s to grab events from the regular tools</li>
  <li><a>ToolManager.relinkingTool</a>, a <a>RelinkingTool</a>, for reconnecting an existing <a>Link</a></li>
  <li><a>ToolManager.linkReshapingTool</a>, a <a>LinkReshapingTool</a>, for changing the route of a <a>Link</a></li>
  <li><a>ToolManager.resizingTool</a>, a <a>ResizingTool</a>, for changing the <a>GraphObject.desiredSize</a> of a <a>Part</a> or an object within a <a>Part</a></li>
  <li><a>ToolManager.rotatingTool</a>, a <a>RotatingTool</a>, for changing the <a>GraphObject.angle</a> of a <a>Part</a> or an object within a <a>Part</a></li>
</ul>

<p>
  Some tools want to run when a mouse-move occurs after a mouse-down. These tools include:
</p>
<ul>
  <li><a>ToolManager.linkingTool</a>, a <a>LinkingTool</a>, for drawing a new <a>Link</a></li>
  <li><a>ToolManager.draggingTool</a>, a <a>DraggingTool</a>, for moving or copying selected <a>Part</a>s</li>
  <li><a>ToolManager.dragSelectingTool</a>, a <a>DragSelectingTool</a>, for rubber-band selection of some <a>Part</a>s within a rectangular area</li>
  <li><a>ToolManager.panningTool</a>, a <a>PanningTool</a>, for panning/scrolling the diagram</li>
</ul>

<p>
  Some tools only want to run upon a mouse-up event after a mouse-down. These tools include:
</p>
<ul>
  <li><a>ToolManager.contextMenuTool</a>, a <a>ContextMenuTool</a>, for showing a context menu for a <a>GraphObject</a></li>
  <li><a>ToolManager.textEditingTool</a>, a <a>TextEditingTool</a>, for in-place editing of <a>TextBlock</a>s in selected <a>Part</a>s</li>
  <li><a>ToolManager.clickCreatingTool</a>, a <a>ClickCreatingTool</a>, for inserting a new <a>Part</a> when the user clicked</li>
  <li><a>ToolManager.clickSelectingTool</a>, a <a>ClickSelectingTool</a>, for selecting or de-selecting a <a>Part</a></li>
</ul>

<p>
  To change the behavior of a tool, you may be able to set properties on the tool, on the <a>Diagram</a>,
  on a particular <a>Part</a>, or on a particular <a>GraphObject</a>.
</p>
<ul>
  <li>
    For example, to disable the rubber-band selection tool (<a>DragSelectingTool</a>),
    set <code>diagram.toolManager.dragSelectingTool.isEnabled = false;</code>.
  </li>
  <li>
    You can change the appearance of a selected Part (actually its selection Adornment) by setting <a>Part.selectionAdornmentTemplate</a>.
    (See <a href="selection.html">Selection</a> for more discussion.)
  </li>
  <li>
    You can enable users to draw new links interactively (<a>LinkingTool</a>) by setting <a>GraphObject.fromLinkable</a> and
    <a>GraphObject.toLinkable</a> on the port objects of your nodes.
  </li>
  <li>
    You can disable the movement of a Part (<a>DraggingTool</a>), including Nodes and Groups, by setting <a>Part.movable</a> to false.
  </li>
  <li>
    You can limit the movement of a Part by setting <a>Part.minLocation</a> and/or <a>Part.maxLocation</a>.
    For more general limitations, set <a>Part.dragComputation</a> to a function that computes the desired new location.
  </li>
  <li>
    You can disable resizing any part (<a>ResizingTool</a>) by setting <a>Diagram.allowResize</a> to false.
  </li>
  <li>
    Tooltips, implemented by the <a>ToolManager</a>, are discussed in <a href="toolTips.html">ToolTips</a>.
  </li>
  <li>
    Context menus, implemented by the <a>ContextMenuTool</a>, are discussed in <a href="contextMenus.html">Context Menus</a>.
  </li>
</ul>
<p>
  More detail is available in the section about <a href="permissions.html">Permissions</a>.
</p>
<p>
  Some commonly set properties include:
</p>
<ul>
  <li>
    Enable inserting parts via double-clicking by the <a>ClickCreatingTool</a> by setting
    <a>ClickCreatingTool.archetypeNodeData</a> to a node data object.
  </li>
  <li>
    Control what parts become selected by <a>DragSelectingTool</a> by setting <a>DragSelectingTool.isPartialInclusion</a>.
  </li>
  <li>
    Customize the link data that is copied when a new link is drawn by <a>LinkingTool</a> by setting
    <a>LinkingTool.archetypeLinkData</a>.
  </li>
  <li>
    Limit how parts are resized by the <a>ResizingTool</a> by setting <a>ResizingTool.cellSize</a>,
    <a>ResizingTool.maxSize</a>, or <a>ResizingTool.minSize</a>.
  </li>
  <li>
    Limit how parts are rotated by the <a>RotatingTool</a> by setting <a>RotatingTool.snapAngleEpsilon</a>
    or <a>RotatingTool.snapAngleMultiple</a>.
  </li>
</ul>
<p>
  Remember that all of the individual tools are available via the <a>Diagram.toolManager</a>.
  For example, to enable the <a>ClickCreatingTool</a>:
</p>
<pre class="lang-js"><code>
  myDiagram.toolManager.clickCreatingTool.archetypeNodeData =
    { key: "Node", text: "some description", color: "green" };
</code></pre>
<p>
  You can also set tool properties when using the constructor or <a>GraphObject.make</a> to define your <a>Diagram</a>:
</p>
<pre class="lang-js"><code>
  const diagram =
    new go.Diagram("myDiagramDiv",
      {
        allowCopy: false,
        "grid.visible": true,
        "grid.gridCellSize": new go.Size(30, 20),
        "clickCreatingTool.archetypeNodeData":  // a node data JavaScript object
          { key: "Node", text: "some description", color: "green" },
        "dragSelectingTool.box":  // an unbound Part
          new go.Part({ layerName: "Tool" })
            .add(
              new go.Shape({ name: "SHAPE", fill: null, stroke: "blue", strokeWidth: 3 })
            ),
        "draggingTool.isGridSnapEnabled": true,
        "linkReshapingTool.handleArchetype":  // a GraphObject that is copied for each handle
          new go.Shape({ width: 10, height: 10, fill: "yellow" }),
        "resizingTool.isGridSnapEnabled": true,
        "rotatingTool.snapAngleMultiple": 90,
        "rotatingTool.snapAngleEpsilon": 45
      }
    );
</code></pre>
<p>
  At this time the syntax for setting properties on predefined subobjects only works for the <a>Diagram</a> constructor.
</p>

<h2 id="ToolLifecycle">The Tool Lifecycle</h2>
<p>
  While each prebuilt tool in GoJS is used for a different purpose, all Tools are guaranteed to share some functions and properties.
  All tools share a general "lifecycle" -- that is, the order in which these common functions are called.
  One can think of this cycle as "starting" when the ToolManager is alerted of some input event and begins searching
  through the pertinent list of tools (i.e., if the mouse-down event is registered, ToolManager starts searching its
  <a>ToolManager.mouseDownTools</a> list).
  Below is a diagram representing the general lifecycle of a tool.
</p>

<pre class="lang-js" id="toolLifecycle" style="display: none"><code>
  diagram.nodeTemplate =
    new go.Node("Auto", { locationSpot: go.Spot.Center })
      .bindTwoWay("location", "loc", go.Point.parse, go.Point.stringify)
      .add(
        new go.Shape("RoundedRectangle", { fill: "lightgreen", stroke: "lightgray" })
          .bind("fill", "color"),
        new go.TextBlock({
            margin: 8,
            wrap: go.Wrap.Fit,
            width: 170,
            font: "bold 10pt sans-serif",
            textAlign: "center"
          })
          .bind("text")
      );

  diagram.linkTemplate =
    new go.Link()
      .bind("curve")
      .add(
        new go.Shape(),
        new go.Shape({ toArrow: "OpenTriangle", fill: null }),   // the arrowhead
        new go.TextBlock({ margin: 1, segmentOffset: new go.Point(0,0) })
          .bind("text")
          .bind("segmentOffset")
          .bind("segmentOrientation")
      );

  diagram.model =
    new go.GraphLinksModel(
      {
        nodeDataArray:
        [
          { key: 1, text: "ToolManager receives mouse event and searches a tool list such as mouseDownTools", loc: "50 0" },
          { key: 2, text: "tool.canStart()", loc: "50 100", color: "lightyellow" },
          { key: 3, text: "toolManager.currentTool = the chosen tool", loc: "50 200" },
          { key: 4, text: "tool.doStart()", loc: "50 275", color: "lightyellow" },
          { key: 5, text: "tool.doActivate()", loc: "50 350", color: "lightyellow" },
          { key: 6, text: "isActive === true", loc: "50 425" },
          { key: 7, text: "tool.doMouseDown() or\ntool.doMouseMove() or\ntool.doMouseUp() or\ntool.doMouseWheel() or\ntool.doKeyDown() or\ntool.doKeyUp()",
            loc: "-200 500", color: "lightyellow" },
          { key: 8, text: "tool.doCancel()", loc: "250 500", color: "lightyellow" },
          { key: 9, text: "tool.stopTool()", loc: "50 575", color: "lightyellow" },
          { key: 10, text: "toolManager.currentTool = toolManager.defaultTool", loc: "50 650" },
          { key: 11, text: "tool.doDeactivate()", loc: "50 725", color: "lightyellow" },
          { key: 12, text: "tool.doStop()", loc: "50 800", color: "lightyellow" }
        ],
        linkDataArray:
        [
          { from: 1, to: 2, text: "on each tool call", segmentOffset: new go.Point(0,-50) },
          { from: 2, to: 3, text: "if it returns true", segmentOffset: new go.Point(0,-50) },
          { from: 3, to: 4 },
          { from: 4, to: 5 },
          { from: 5, to: 6 },
          { from: 6, to: 7, text: "Receives input", curve: go.Curve.Bezier, segmentOrientation: go.Orientation.Opposite, segmentOffset: new go.Point(0,10) },
          { from: 7, to: 6, text: "Input continues", curve: go.Curve.Bezier, segmentOrientation: go.Orientation.Along, segmentOffset: new go.Point(0,10) },
          { from: 7, to: 9, text: "Input stops tool", segmentOrientation: go.Orientation.Along, segmentOffset: new go.Point(0,10) },
          { from: 6, to: 8, text: "User cancels tool", segmentOrientation: go.Orientation.Along, segmentOffset: new go.Point(0,-10)},
          { from: 8, to: 9 },
          { from: 9, to: 10 },
          { from: 10, to: 11 },
          { from: 11, to: 12 },
        ]
      }
      );
</code></pre>
<script>
  goCode('toolLifecycle', 700, 900);
</script>
<p>
  For more information on how these specific functions work, see the <a>Tool</a> documentation.
</p>

<h2 id="ToolsAndAdornments">Tools and Adornments</h2>
<p>
  <a>Adornment</a>s are used for more than indicating that a <a>Part</a> is selected.
  Each <a>Tool</a> that is in the <a>ToolManager.mouseDownTools</a> list (in other words, any mode-less tool that is started
  with a mouse-down or finger-down event) gets the opportunity to add its own Adornments for its own purposes when a Part is selected.
</p>

<h3 id="ResizingTool">ResizingTool</h3>
<p>
  When a <a>Part</a> is resizable, the <a>ResizingTool</a> adds an <a>Adornment</a> containing eight resize handles,
  four at the corners and four at the middles of the sides.
</p>
<p>
  If you want to let the user resize the whole node, just set <a>Part.resizable</a> to true.
  In this case resizing will set the Node's <a>GraphObject.desiredSize</a>.
</p>
<pre class="lang-js" id="resizing"><code>
  diagram.add(
    new go.Node("Auto", { resizable: true })
      .add(
        new go.Shape("RoundedRectangle", { fill: "orange" }),
        new go.TextBlock("Hello!", { margin: 5 })
      ));
  diagram.commandHandler.selectAll();
</code></pre>
<script>
  goCode('resizing', 600, 100);
</script>

<p>
  If you want the user to resize a particular object within the node, you need to name that object and assign <a>Part.resizeObjectName</a>.
  Resizing will set the <a>Part.resizeObject</a>'s <a>GraphObject.desiredSize</a>, in this case the Shape's desiredSize.
</p>
<pre class="lang-js" id="resizingObject"><code>
  diagram.add(
    new go.Node("Vertical", {
        resizable: true, resizeObjectName: "SHAPE",  // resize the Shape, not the Node
        selectionObjectName: "SHAPE"
      })
      .add(
        new go.Shape("RoundedRectangle", {
            name: "SHAPE",
            fill: "orange",
            width: 50, height: 30
          }),
        new go.TextBlock("Hello!", { margin: 3 })
      ));
  diagram.commandHandler.selectAll();
</code></pre>
<script>
  goCode('resizingObject', 600, 100);
</script>

<p>
  You can limit the minimum and maximum size for the resized object by setting <a>GraphObject.maxSize</a> and <a>GraphObject.minSize</a>.
  Note that these GraphObject properties are set on the <a>Part.resizeObject</a>, not on the <a>Part</a> itself.
</p>
<pre class="lang-js" id="resizingMaxMin"><code>
  diagram.add(
    new go.Node("Vertical", {
        resizable: true, resizeObjectName: "SHAPE",
        selectionObjectName: "SHAPE"
      })
      .add(
        new go.Shape("RoundedRectangle", {
            name: "SHAPE",
            fill: "orange",
            width: 50, height: 30,
            // limit size by setting or binding maxSize and/or minSize
            maxSize: new go.Size(100, 40), minSize: new go.Size(20, 20)
          }),
        new go.TextBlock("Hello!", { margin: 3 })
      ));
  diagram.commandHandler.selectAll();
</code></pre>
<script>
  goCode('resizingMaxMin', 600, 100);
</script>

<p>
  You can also cause resizing to be multiples of a given size by setting <a>Part.resizeCellSize</a>.
</p>
<pre class="lang-js" id="resizingCellSize"><code>
  diagram.add(
    new go.Node("Vertical", {
        resizable: true, resizeObjectName: "SHAPE",
        resizeCellSize: new go.Size(10, 10),  // new size will be multiples of resizeCellSize
        selectionObjectName: "SHAPE"
      })
      .add(
        new go.Shape("RoundedRectangle", {
            name: "SHAPE",
            fill: "orange",
            width: 50, height: 30,
            maxSize: new go.Size(100, 40), minSize: new go.Size(20, 20)
          }),
        new go.TextBlock("Hello!", { margin: 3 })
      ));
  diagram.commandHandler.selectAll();
</code></pre>
<script>
  goCode('resizingCellSize', 600, 100);
</script>

<p>
  When an object is resizable, it is commonplace to try to remember the new size by updating the model data,
  so that it can be saved and loaded later.
  This can be accomplished with a TwoWay <a>Binding</a> on the <a>GraphObject.desiredSize</a> property.
  But note that the binding needs to be on the actual GraphObject that is resized, not on the whole Node.
  In this case, because the <a>Part.resizeObjectName</a> is referring to a Shape, that means the binding needs to be on the Shape.
</p>
<pre class="lang-js" id="resizingObjectBinding"><code>
  diagram.add(
    new go.Node("Vertical", {
        resizable: true, resizeObjectName: "SHAPE",
        selectionObjectName: "SHAPE"
      })
      .add(
        new go.Shape("RoundedRectangle", {
            name: "SHAPE",
            fill: "orange",
            width: 50, height: 30
          })
          // TwoWay Binding of the desiredSize
          .bindTwoWay("desiredSize", "size", go.Size.parse, go.Size.stringify),
        new go.TextBlock("Hello!", { margin: 3 })
      ));
  diagram.commandHandler.selectAll();
</code></pre>
<script>
  goCode('resizingObjectBinding', 600, 100);
</script>

<p>
  You can customize all eight standard resize handles by setting <a>ResizingTool.archetypeHandle</a>.
  For example, to change all of the handles to be slightly larger yellow circles:
</p>
<pre class="lang-js" id="resizingArchetype"><code>
  diagram.toolManager.resizingTool.handleArchetype =
    new go.Shape("Circle", {
      width: 10, height: 10, fill: "yellow", cursor: "pointer"
    });

  diagram.add(
    new go.Node("Vertical", {
        resizable: true, resizeObjectName: "SHAPE",
        selectionAdorned: false  // don't show selection Adornment, a rectangle
      })
      .add(
        new go.Shape("RoundedRectangle", {
            name: "SHAPE",
            fill: "gray",
            width: 50, height: 30,
            maxSize: new go.Size(100, 40), minSize: new go.Size(20, 20)
          }),
        new go.TextBlock("Hello!", { margin: 3 })
      ));
  diagram.commandHandler.selectAll();
</code></pre>
<script>
  goCode('resizingArchetype', 600, 100);
</script>
<p>
  Note that the ResizingTool will automatically set each resize handle's <a>GraphObject.cursor</a> appropriately.
  Note also that because <a>Part.selectionAdorned</a> is false, there is no blue rectangle default selection adornment.
</p>

<p>
  You can customize the resize handles by setting <a>Part.resizeAdornmentTemplate</a>.
  For example, to allow the user to only change the width of a Shape in a Node, the <a>Adornment</a> should have only
  two resize handles: one at the left and one at the right.
  The Adornment is implemented as a Spot Panel that surrounds a <a>Placeholder</a>, representing the adorned Shape,
  with two rectangular blue Shapes, each representing a handle.
  There is also a TextBlock placed above the adorned shape showing the shape's current width.
</p>
<pre class="lang-js" id="resizingTemplate"><code>
  diagram.add(
    new go.Node("Vertical", {
        resizable: true, resizeObjectName: "SHAPE",
        resizeAdornmentTemplate:  // specify what resize handles there are and how they look
          new go.Adornment("Spot")
            .add(
              new go.Placeholder(),  // takes size and position of adorned object
              new go.Shape("Circle", { // left resize handle
                  alignment: go.Spot.Left, cursor: "col-resize",
                  desiredSize: new go.Size(9, 9),
                  fill: "lightblue", stroke: "dodgerblue"
                }),
              new go.Shape("Circle", {  // right resize handle
                  alignment: go.Spot.Right, cursor: "col-resize",
                  desiredSize: new go.Size(9, 9),
                  fill: "lightblue", stroke: "dodgerblue"
                }),
              new go.TextBlock({ // show the width as text
                  alignment: go.Spot.Top, alignmentFocus: new go.Spot(0.5, 1, 0, -2),
                  stroke: "dodgerblue"
                })
                .bindObject("text", "adornedObject",
                            shp => shp.naturalBounds.width.toFixed(0))
            ),
        selectionAdorned: false  // don't show selection Adornment, a rectangle
      })
      .add(
        new go.Shape("RoundedRectangle", {
            name: "SHAPE",
            fill: "orange",
            width: 50, height: 30,
            maxSize: new go.Size(200, 40), minSize: new go.Size(20, 20)
          }),
        new go.TextBlock("Hello!", { margin: 3 })
      ));
  diagram.commandHandler.selectAll();
</code></pre>
<script>
  goCode('resizingTemplate', 600, 100);
</script>
<p>
  There are examples custom resizing tools defined in the samples and extensions directories:
  <a href="../samples/FloorPlanEditor.html">Resize Multiple Tool (in Floor Plan Editor)</a>,
  <a href="../samples/swimLanes.html">Lane Resizing Tool (in Swim Lanes)</a>, and
  <a href="../samples/swimLanesVertical.html">Lane Resizing Tool (in Swim Lanes Vertical)</a>.
</p>

<h3 id="RotatingTool">RotatingTool</h3>
<p>
  When a <a>Part</a> is rotatable, the <a>RotatingTool</a> adds an <a>Adornment</a> containing one rotate handle a
  short distance from the object at the object's angle.
  Since the default <a>GraphObject.angle</a> is zero, the rotate handle typically starts to the right of the object.
</p>
<p>
  If you want to let the user rotate the whole node, just set <a>Part.rotatable</a> to true.
  Rotating will set the Node's <a>GraphObject.angle</a>.
</p>
<pre class="lang-js" id="rotating"><code>
  diagram.add(
    new go.Node("Auto", { rotatable: true, locationSpot: go.Spot.Center })
      .add(
        new go.Shape("RoundedRectangle", { fill: "orange" }),
        new go.TextBlock("Hello!", { margin: 5 })
      ));
  diagram.commandHandler.selectAll();
</code></pre>
<script>
  goCode('rotating', 600, 150);
</script>

<p>
  If you want the user to rotate a particular object within the node, you need to name that object and assign <a>Part.rotateObjectName</a>.
  Rotating will set the <a>Part.rotateObject</a>'s <a>GraphObject.angle</a>, in this case the Shape's angle.
</p>
<pre class="lang-js" id="rotatingObject"><code>
  diagram.add(
    new go.Node("Vertical", {
        rotatable: true, rotateObjectName: "SHAPE",  // rotate the Shape, not the Node
        locationSpot: go.Spot.Center, locationObjectName: "SHAPE",
        selectionObjectName: "SHAPE"
      })
      .add(
        new go.Shape("RoundedRectangle", {
            name: "SHAPE", fill: "orange",
            width: 50, height: 30
          }),
        new go.TextBlock("Hello!", { margin: 3 })
      ));
  diagram.commandHandler.selectAll();
</code></pre>
<script>
  goCode('rotatingObject', 600, 150);
</script>

<p>
  When an object is rotatable, it is commonplace to try to remember the new angle by updating the model data,
  so that it can be saved and loaded later.
  This can be accomplished with a TwoWay <a>Binding</a> on the <a>GraphObject.angle</a> property.
  But note that the binding needs to be on the actual GraphObject that is rotated, not on the whole Node.
  In this case, because the <a>Part.rotateObjectName</a> is referring to a Shape, that means the binding needs to be on the Shape.
</p>
<pre class="lang-js" id="rotatingObjectBinding"><code>
  diagram.add(
    new go.Node("Vertical", {
        rotatable: true, rotateObjectName: "SHAPE",
        locationSpot: go.Spot.Center, locationObjectName: "SHAPE",
        selectionObjectName: "SHAPE"
      })
      .add(
        new go.Shape("RoundedRectangle", {
            name: "SHAPE", fill: "orange",
            width: 50, height: 30
          })
          .bindTwoWay("angle"),  // TwoWay Binding of angle
        new go.TextBlock("Hello!", { margin: 3 })
      ));
  diagram.commandHandler.selectAll();
</code></pre>
<script>
  goCode('rotatingObjectBinding', 600, 150);
</script>

<p>
  Another common customization is to position the rotate handle above the object when it is not rotated,
  i.e. when its <a>GraphObject.angle</a> is zero.
  This is accomplished by setting <a>RotatingTool.handleAngle</a> to 270.
</p>
<pre class="lang-js" id="rotatingToolAngle"><code>
  diagram.add(
    new go.Node("Auto", { rotatable: true, locationSpot: go.Spot.Center })
      .bindTwoWay("angle")  // TwoWay Binding of Node.angle
      .add(
        new go.Shape("RoundedRectangle", { fill: "orange" }),
        new go.TextBlock("Hello!", { margin: 5 })
      ));
  diagram.toolManager.rotatingTool.handleAngle = 270;
  diagram.commandHandler.selectAll();
</code></pre>
<script>
  goCode('rotatingToolAngle', 600, 150);
</script>

<p>
  You can customize the rotate handle by setting <a>Part.rotateAdornmentTemplate</a>.
</p>
<pre class="lang-js" id="rotatingTemplate"><code>
  diagram.add(
    new go.Node("Vertical", {
        rotatable: true, rotateObjectName: "SHAPE",
        locationSpot: go.Spot.Center, locationObjectName: "SHAPE",
        rotateAdornmentTemplate:  // specify appearance of rotation handle
          new go.Adornment({ locationSpot: go.Spot.Center })
            .add(
              new go.Shape("BpmnActivityLoop", {
                  width: 12, height: 12, cursor: "pointer",
                  background: "transparent", stroke: "dodgerblue", strokeWidth: 2
                })
            ),
        selectionObjectName: "SHAPE"
      })
      .add(
        new go.Shape("RoundedRectangle", {
          name: "SHAPE", fill: "orange",
          width: 50, height: 30
        }),
        new go.TextBlock("Hello!", { margin: 3 })
      ));
  diagram.commandHandler.selectAll();
</code></pre>
<script>
  goCode('rotatingTemplate', 600, 150);
</script>
<p>
  There are example custom rotating tools defined in the samples and extensions directories:
  <a href="../samples/FloorPlanEditor.html">Rotate Multiple Tool (in Floor Plan Editor)</a> and
  <a href="../samples/seatingChart.html">Horizontal Text Rotating Tool (in Seating Chart)</a>.
</p>

<h3 id="RelinkingTool">RelinkingTool</h3>
<p>
  When a <a>Link</a> is <a>Link.relinkableFrom</a> and/or <a>Link.relinkableTo</a>, the <a>RelinkingTool</a> adds one or
  two <a>Adornment</a>s, a diamond at each relinkable end of a selected link.
  The user can drag a relinking handle to reconnect that end of the link to another port.
</p>
<p>
  The <a>RelinkingTool</a> will automatically update the relationships between the nodes/ports, both in the diagram and in the model.
  No <a>Binding</a>s are needed for such model updates.
</p>
<pre class="lang-js" id="relinking"><code>
  diagram.nodeTemplate =
    new go.Node("Auto")
      .add(
        new go.Shape("Rectangle", {
            fill: "lightgray",
            portId: "", fromLinkable: true, toLinkable: true
          }),
        new go.TextBlock({ margin: 5 })
          .bind("text")
      );

  diagram.linkTemplate =
    new go.Link({ relinkableFrom: true, relinkableTo: true })
      .add(
        new go.Shape(),
        new go.Shape({ toArrow: "Standard" })
      );

  const nodeDataArray = [
    { key: 1, text: "Alpha" },
    { key: 2, text: "Beta" },
    { key: 3, text: "Gamma" },
    { key: 4, text: "Delta" }
  ];
  const linkDataArray = [
    { from: 1, to: 4 }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

  diagram.select(diagram.findLinkForData(linkDataArray[0]));
</code></pre>
<script>
  goCode('relinking', 600, 150);
</script>
<p>
  The relinking handles can be customized by setting <a>RelinkingTool.fromHandleArchetype</a> and <a>RelinkingTool.toHandleArchetype</a>.
  At the current time they cannot be customized by setting a property on the Link.
</p>
<p>
  You can limit which pairs of ports between which the user may draw new links or reconnect existing links.
  This topic is covered by <a href="validation.html">Link Validation</a>.
</p>

<h3 id="LinkReshapingTool">LinkReshapingTool</h3>
<p>
  When a <a>Link</a> is <a>Part.reshapable</a>, the <a>LinkReshapingTool</a> adds an <a>Adornment</a> with several reshape
  handles at the interior points of a selected link's route.
  When the user drags a reshape handle, the route of the Link, held by <a>Link.points</a>, is modified.
</p>
<p>
  When a link is reshapable, it is commonplace to try to remember the new route by updating the link data in the <a>GraphLinksModel</a>,
  so that it can be saved and loaded later.
  This can be accomplished with a TwoWay <a>Binding</a> on the <a>Link.points</a> property.
  If one also uses the property name "points" on the link data, <a>Model.toJson</a> will automatically convert
  the <a>List</a> of <a>Point</a>s into an Array of numbers and vice-versa.
</p>
<pre class="lang-js" id="linkReshaping"><code>
  diagram.nodeTemplate =
    new go.Node("Auto")
      .bind("location", "loc", go.Point.parse)
      .add(
        new go.Shape("Rectangle", { fill: "lightgray" }),
        new go.TextBlock({ margin: 5 })
          .bind("text")
      );

  diagram.linkTemplate =
    new go.Link({ reshapable: true, routing: go.Routing.Orthogonal })
      .bindTwoWay("points")  // TwoWay Binding of Link.points
      .add(
        new go.Shape(),
        new go.Shape({ toArrow: "Standard" })
      );

  diagram.model = new go.GraphLinksModel([
    { key: 1, text: "Alpha", loc: "0 0" },
    { key: 2, text: "Beta", loc: "200 50" }
  ], [
    { from: 1, to: 2 }
  ]);

  diagram.select(diagram.findLinkForData(diagram.model.linkDataArray[0]));
</code></pre>
<script>
  goCode('linkReshaping', 600, 150);
</script>
<p>
  The reshape handles are small blue squares.
  The reshape handles can be customized by setting <a>LinkReshapingTool.handleArchetype</a>.
  At the current time they cannot be customized by setting a property on the Link.
</p>
<p>
  By setting <a>Link.resegmentable</a> to true, users can add or remove segments from links.
  The resegmenting handles are even smaller blue diamonds at the middle of each segment.
  When the user drags a resegmenting handle, a new segment is inserted into the link's route.
  For orthogonal links, two new segments are introduced in order to maintain orthogonality.
  When the user reshapes the link so that adjacent segments are co-linear (or nearly so), the segment(s) are removed from the route.
</p>
<pre class="lang-js" id="linkResegmenting"><code>
  diagram.nodeTemplate =
    new go.Node("Auto")
      .bind("location", "loc", go.Point.parse)
      .add(
        new go.Shape("Rectangle", { fill: "lightgray" }),
        new go.TextBlock({ margin: 5 })
          .bind("text")
      );

  diagram.linkTemplate =
    new go.Link({
        reshapable: true, resegmentable: true,
        routing: go.Routing.Orthogonal
      })
      .bindTwoWay("points")  // TwoWay Binding of Link.points
      .add(
        new go.Shape(),
        new go.Shape({ toArrow: "Standard" })
      );

  diagram.model = new go.GraphLinksModel([
    { key: 1, text: "Alpha", loc: "0 0" },
    { key: 2, text: "Beta", loc: "200 50" }
  ], [
    { from: 1, to: 2 }
  ]);

  diagram.select(diagram.findLinkForData(diagram.model.linkDataArray[0]));
</code></pre>
<script>
  goCode('linkResegmenting', 600, 150);
</script>
<p>
  The resegmenting handles can be customized by setting <a>LinkReshapingTool.midHandleArchetype</a>.
  At the current time they cannot be customized by setting a property on the Link.
  Also at the current time resegmenting is not supported on Bezier-curved links.
</p>
<p>
  If you want your users to be able to reshape Shape geometries that are not Link paths, there is the
  <a href="../extensions/GeometryReshapingTool.js">Geometry Reshaping Tool</a> used by the
  <a href="../samples/PolygonDrawing.html">Polygon Drawing</a> and
  <a href="../samples/FreehandDrawing.html">Freehand Drawing</a> samples in the extensions directory.
  It is defined in a separate JS file that you can load into your app.
</p>

<h2 id="ToolsAndToolParts">Tools and Tool Parts</h2>
<p>
  Some tools make use of special <a>Part</a>s that they add to the "Tool" <a>Layer</a> as feedback during the tool's operation.
</p>

<h3 id="DragSelectingTool">DragSelectingTool</h3>
<p>
  The <a>DragSelectingTool</a> uses the <a>DragSelectingTool.box</a> to show the area in which it will select Parts.
  Normally this is a simple magenta rectangular shape, which you can customize.
  For example here is a drag-selecting box that is in the shape of a blue-outlined cloud.
</p>
<pre class="lang-js" id="dragSelecting"><code>
  diagram.nodeTemplate =
    new go.Node("Auto")
      .bind("location", "loc", go.Point.parse)
      .add(
        new go.Shape("Rectangle", { fill: "lightgray" }),
        new go.TextBlock({ margin: 5 })
          .bind("text")
      );

  diagram.toolManager.dragSelectingTool.isPartialInclusion = true;
  diagram.toolManager.dragSelectingTool.box =
    new go.Part({ layerName: "Tool" })
      .add(
        new go.Shape("Cloud", {
            name: "SHAPE",
            fill: null, stroke: "dodgerblue", strokeWidth: 2
          })
      );

  diagram.model = new go.GraphLinksModel([
    { key: 1, text: "Alpha", loc: "0 0" },
    { key: 2, text: "Beta", loc: "200 50" }
  ], [
    { from: 1, to: 2 }
  ]);
</code></pre>
<script>
  goCode('dragSelecting', 600, 200);
</script>
<p>
  Note that the <a>DragSelectingTool</a> expects that the object in the "box" to be resized is named "SHAPE".
  The object should be rectangular too, or else the user might be misled by the area in which parts will be selected.
  Finally note also that the box is not an Adornment because it does not "adorn" any Part.
  It is just an unbound Part that is used temporarily by the DragSelectingTool.
</p>
<p>
  There are examples of in-the-background-dragging tools defined in the extensions directory:
  <a href="../samples/RealtimeDragSelecting.html">Realtime Drag Selecting Tool</a>,
  <a href="../samples/DragCreating.html">Drag Creating Tool</a>, and
  <a href="../samples/DragZooming.html">Drag Zooming Tool</a>.
  Each is defined in a separate JS file that you can load into your app.
</p>

<h3 id="LinkingToolAndRelinkingTool">LinkingTool and RelinkingTool</h3>
<p>
  The linking tools, <a>LinkingTool</a> and <a>RelinkingTool</a>, inherit from a base class, <a>LinkingBaseTool</a>,
  that uses several Parts: a temporary Link and temporary "to" and "from" Nodes.
</p>
<p>
  To customize the appearance and behavior of the temporary Link that is shown during a linking operation,
  you need to modify or replace the <a>LinkingBaseTool.temporaryLink</a>.
  The default temporary link is a blue line with a standard arrowhead.
  The originating port and the potential target port are shown by the <a>LinkingBaseTool.temporaryFromNode</a>
  and <a>LinkingBaseTool.temporaryToNode</a>.
  The default temporary ports are magenta rectangles.
</p>
<pre class="lang-js" id="linkingTools"><code>
  diagram.nodeTemplate =
    new go.Node("Spot")
      .bind("location", "loc", go.Point.parse)
      .add(
        new go.Shape("RoundedRectangle", {
            width: 100, height: 40, fill: "lightyellow",
            portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"
          }),
        new go.TextBlock()
          .bind("text")
      );

  diagram.toolManager.linkingTool.temporaryLink =
    new go.Link({ layerName: "Tool" })
      .add(
        new go.Shape({ stroke: "red", strokeWidth: 2, strokeDashArray: [4, 2] })
      );

  const tempfromnode =
    new go.Node({ layerName: "Tool" })
      .add(
        new go.Shape("RoundedRectangle", {
            stroke: "chartreuse", strokeWidth: 3, fill: null,
            portId: "", width: 1, height: 1
          })
      );
  diagram.toolManager.linkingTool.temporaryFromNode = tempfromnode;
  diagram.toolManager.linkingTool.temporaryFromPort = tempfromnode.port;

  const temptonode =
    new go.Node({ layerName: "Tool" })
      .add(
        new go.Shape("RoundedRectangle", {
            stroke: "cyan", strokeWidth: 3, fill: null,
            portId: "", width: 1, height: 1
          })
      );
  diagram.toolManager.linkingTool.temporaryToNode = temptonode;
  diagram.toolManager.linkingTool.temporaryToPort = temptonode.port;

  diagram.model = new go.GraphLinksModel([
    { text: "Alpha", loc: "0 0" },
    { text: "Beta", loc: "200 50" },
    { text: "Gamma", loc: "400 0" }
  ]);  // start off with no links
</code></pre>
<script>
  goCode('linkingTools', 600, 150);
</script>
<p>
  Try drawing a link from one node to the other.
  You will notice that the nodes (actually the ports) are highlighted by the temporary nodes in chartreuse and cyan.
  The temporary link is a dashed red line without an arrowhead.
</p>
<p>
  If your app also supports relinking you will probably want to do the same customizations on the <a>RelinkingTool</a>.
</p>
<p>
  There are examples of linking tools defined in the samples and extensions directories:
  <a href="../samples/PolylineLinking.html">Polyline Linking Tool</a>,
  <a href="../samples/sequenceDiagram.html">Messaging Tool (in Sequence Diagram)</a>, and
  <a href="../samples/sequenceDiagram.html">Custom Linking Tool (in Grafcet Diagram)</a>
</p>

<h2 id="CustomTools">Custom Tools</h2>
<p>
  The GoJS samples and extensions demonstrate a number of custom tools, including:
</p>
<ul>
  <li><a href="../samples/ColumnResizing.html">Column Resizing Tool and Row Resizing Tool</a></li>
  <li><a href="../samples/CurvedLinkReshaping.html">Curved Link Reshaping Tool</a></li>
  <li><a href="../samples/DragCreating.html">Drag Creating Tool</a></li>
  <li><a href="../samples/DragZooming.html">Drag Zooming Tool</a></li>
  <li><a href="../samples/FreehandDrawing.html">Freehand Drawing Tool</a></li>
  <li>
    <a href="../samples/GeometryReshaping.html">Geometry Reshaping Tool</a> also used by the <a href="../samples/PolygonDrawing.html">Polygon Drawing</a>, and
    the <a href="../samples/FreehandDrawing.html">Freehand Drawing</a> samples
  </li>
  <li><a href="../samples/GuidedDragging.html">Guided Dragging Tool</a></li>
  <li><a href="../samples/LinkLabelDragging.html">Link Label Dragging Tool</a></li>
  <li><a href="../samples/LinkLabelOnPathDragging.html">Link Label On Path Dragging Tool</a></li>
  <li><a href="../samples/LinkShifting.html">Link Shifting Tool</a></li>
  <li><a href="../samples/NodeLabelDragging.html">Node Label Dragging Tool</a></li>
  <li><a href="../samples/NonRealtimeDragging.html">Non-Realtime Dragging Tool</a></li>
  <li><a href="../samples/OrthogonalLinkReshaping.html">Orthogonal Link Reshaping Tool</a></li>
  <li><a href="../samples/OverviewResizing.html">Overview Resizing Tool</a></li>
  <li><a href="../samples/PolygonDrawing.html">Polygon Drawing Tool</a></li>
  <li><a href="../samples/PolylineLinking.html">Polyline Linking Tool</a></li>
  <li><a href="../samples/PortShifting.html">Port Shifting Tool</a></li>
  <li><a href="../samples/RealtimeDragSelecting.html">Realtime Drag Selecting Tool</a></li>
  <li><a href="../samples/Rescaling.html">Rescaling Tool</a></li>
  <li><a href="../samples/ResizeMultiple.html">Resize Multiple Tool</a></li>
  <li><a href="../samples/RotateMultiple.html">Rotate Multiple Tool</a></li>
  <li><a href="../samples/SectorReshaping.html">Sector Reshaping Tool</a></li>
  <li><a href="../samples/SnapLinkReshaping.html">Snap Link Reshaping Tool</a></li>
  <li><a href="../samples/SpotRotating.html">Spot Rotating Tool</a></li>
  <li><a href="../samples/dragDropFields.html">Field Dragging Tool</a></li>
  <li><a href="../samples/swimLanes.html">Lane Resizing Tool (in Swim Lanes)</a></li>
  <li><a href="../samples/swimLanesVertical.html">Lane Resizing Tool (in Swim Lanes Vertical)</a></li>
</ul>

      </div>
    </div>
    <footer class="bg-white text-gray-900 border-t border-t-gray-200">
  <div class="w-full max-w-screen-lg mx-auto px-4 py-6">
    
    <p id="version" class="text-xs text-gray-900 m-0"></p>
    <div class="text-sm px-0 mb-4 grid grid-cols-2 sm:grid-cols-3 gap-y-10">
      <div>
        <h2 class="text-base font-semibold text-nwoods-primary">GoJS</h2>
        <ul class="list-none space-y-4 md:space-y-1 px-0">
          <li>
            <a href="../samples/index.html">Samples</a>
          </li>
          <li>
            <a href="../learn/index.html">Learn</a>
          </li>
          <li>
            <a href="../intro/index.html">Intro</a>
          </li>
          <li>
            <a href="../api/index.html">API</a>
          </li>
          <li>
            <a href="../changelog.html">Changelog</a>
          </li>
          <li>
            <a href="https://github.com/NorthwoodsSoftware/GoJS" target="_blank" rel="noopener">GitHub</a>
          </li>
        </ul>
      </div>
      <div>
        <h2 class="text-base font-semibold text-nwoods-primary">Support</h2>
        <ul class="list-none space-y-4 md:space-y-1 px-0">
          <li>
            <a href="https://nwoods.com/contact.html"
              target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
          </li>
          <li>
            <a href="https://forum.nwoods.com/c/gojs" target="_blank" rel="noopener">Forum</a>
          </li>
          <li>
            <a href="https://nwoods.com/app/activate.aspx?sku=gojs" target="_blank" rel="noopener">Activate</a>
          </li>
          <li>
            <a href="https://nwoods.com/sales/index.html"
              target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
          </li>
          
        </ul>
      </div>
      <div>
        <h2 class="text-base font-semibold text-nwoods-primary">Company</h2>
        <ul class="list-none space-y-4 md:space-y-1 px-0">
          <li>
            <a target="_blank" href="https://nwoods.com" target="_blank" rel="noopener">Northwoods</a>
          </li>
          <li>
            <a target="_blank" href="https://nwoods.com/about.html" target="_blank" rel="noopener">About Us</a>
          </li>
          <li>
            <a target="_blank" href="https://nwoods.com/contact.html" target="_blank" rel="noopener">Contact Us</a>
          </li>
          <li>
            <a target="_blank" href="https://nwoods.com/consulting.html" target="_blank" rel="noopener">Consulting</a>
          </li>
          <li>
            <a target="_blank" href="https://twitter.com/northwoodsgo" target="_blank" rel="noopener">Twitter</a>
          </li>
        </ul>
      </div>
    </div>
    <p class="text-sm text-gray-900 md:mb-6">
      Copyright 1998-2025 <a href="https://nwoods.com">Northwoods Software</a>
    </p>
  </div>
</footer>
  </body>
  
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script>

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'G-S5QK8VSK84');
  var getOutboundLink = function (url, label) {
    gtag('event', 'click', {
      'event_category': 'outbound',
      'event_label': label,
      'transport_type': 'beacon'
    });
  }
  const params = new URL(document.location).searchParams
  let a = params.get('a');
  if (a) localStorage.setItem('a', a);
  a = localStorage.getItem('a');
  if (a) {
    const links = [...document.body.getElementsByTagName("a")].filter((l) => l.href.includes('nwoods.com'));
    for (const l of links) {
      const url = new URL(l.href);
      url.searchParams.set('a', a);
      l.href = url;
    }
  }

</script>
  <script src="../assets/js/prism.js"></script>
  <script src="../release/go.js"></script>
  
    <script src="../extensions/Figures.js"></script>
  
  <script src="../assets/js/goDoc.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      if (window.go)
        document
          .getElementById('version')
          .textContent = "GoJS version " + go.version;
      if (window.goDoc)
        window.goDoc();
      var d = window.diagrams;
      for (var i = 0; i < d.length; i++) {
        var dargs = d[i];
        goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
      }
      if (window.extra)
        window.extra();
      }
    );
  </script>
</html>