markgojs

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>GoJS® PanningTool Class</title> <script src="../../assets/js/jquery.min.js"></script> <script src="../../assets/js/bootstrap.min.js"></script> <script src="../../assets/js/highlight.js"></script> <script src="../../assets/js/api.js"></script> <script src="../../assets/js/fuse.min.js"></script> <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >  <link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/> <link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>  <link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" /> </head> <body>  <nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top"> <div class="container-fluid"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#navbar"> <a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="../../index.html">Home</a></li> <li><a href="../../learn/index.html">Learn</a></li> <li><a href="../../samples/index.html">Samples</a></li> <li><a href="../../intro/index.html">Intro</a></li> <li><a href="../../api/index.html">API</a></li> <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li> <li><a href="../../download.html">Download</a></li> <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li> <li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li> <li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li> <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li> </ul> </div> </div> </nav> <div class="container-fluid">  <div id="navindex" class="col-md-2">   <div class="sidebar-nav"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Diagram Classes</span> </div> </div> <div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li> <li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li> <li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li> <li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li> <li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li> <li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li> <li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li> <li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li> <li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li> <li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li> <li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li> <li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li> <li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li> <li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li> <li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li> <li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li> <li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li> <li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li> <li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li> <li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Geometry Classes</span> </div> </div> <div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li> <li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li> <li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li> <li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li> <li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li> <li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li> <li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li> <li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li> <li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Model Classes</span> </div> </div> <div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li> <li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li> <li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li> <li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li> <li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li> <li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li> <li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Layout Classes</span> </div> </div> <div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li> <li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li> <li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li> <li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li> <li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li> <li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li> <li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Tool Classes</span> </div> </div> <div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li> <li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li> <li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li> <li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li> <li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li> <li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li> <li><a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li> <li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li> <li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li> <li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li> <li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li> <li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li> <li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li> <li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li> <li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li> <li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li> <li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Collection Classes</span> </div> </div> <div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li> <li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li> <li><a href="../symbols/List.html" class="linkConstructor">List</a></li> <li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li> <li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li> </ul> </div> </div> </div>   </div> <div id="contentBody" class="col-md-10"> <div class="searchsumm"> <div class="table-wrap"> <div class="table-cell" id="apisearch" data-base="../"> <div class="title">Search API</div> <div class="field"> <label for="search-field" class="search-icon"></label> <input id="search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> </div> <div class="table-cell" id="apisumm"> <input type="checkbox" id="showsumms" /> <label class="apisumms" for="showsumms">Show Summaries</label> </div> </div> </div>  <div id="header" class="fineprint"> <b>GoJS</b>® Diagramming Components<br/>version 1.8.36 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div>  <h2 class="classTitle"> Class PanningTool </h2>  <p class="classsummary"> <span class="extends"> Extends <a href="../symbols/Tool.html" class="linkConstructor">Tool</a>.</span> The PanningTool supports manual panning, where the user can shift the <a href="../symbols/Diagram.html#position" class="linkProperty">Diagram.position</a> by dragging the mouse. <p> This tool is a standard mouse-move tool, the <a href="../symbols/ToolManager.html#panningTool" class="linkProperty">ToolManager.panningTool</a>. Although the <a href="../symbols/ToolManager.html#dragSelectingTool" class="linkProperty">ToolManager.dragSelectingTool</a> takes precedence over this tool, the <a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a> only starts if there is a delay after a mouse-down event. If it does not start, then this PanningTool gets a chance to start. <p> This tool does not utilize any <a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles. This tool does not modify the model or conduct any transaction. </p>  <h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class PanningTool."> <thead> <tr> <th scope="col" class="name">Name</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr> <td class="name" > <div class="name"> PanningTool() </div> </td> <td class="description"> <div class="description"> <p><p>You do not normally need to create an instance of this tool because one already exists as the <a href="../symbols/ToolManager.html#panningTool" class="linkProperty">ToolManager.panningTool</a>.<span class="nodetails" id="xconPanningTool"><a class="morelink" onclick="hst('conPanningTool')">More...</a></span> <span class="details" id="conPanningTool"> </span><div class="details" id="dconPanningTool"><p> The <a href="../symbols/Tool.html#name" class="linkProperty">Tool.name</a> of this tool is "Panning".</div> </div> </td> </tr> </tbody> </table> </div>  <h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class PanningTool."> <thead> <tr> <th scope="col" class="name">Name, Value Type</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr id="bubbles" > <td class="name"> <div class="name"> bubbles </div> <div class="attributes"> <span class="light">{boolean}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets whether panning actions will allow events to bubble <strong>instead</strong> of panning in the diagram.<span class="nodetails" id="xpropbubbles"><a class="morelink" onclick="hst('propbubbles')">More...</a></span> <span class="details" id="propbubbles"> </span><div class="details" id="dpropbubbles"><p> Set this to true to allow mobile devices to scroll the page with panning gestures on the diagram. Otherwise, the panning events will be captured and used to pan inside of the diagram. <p> The default value is false.</div> </div> </td> </tr> <tr id="originalPosition" > <td class="name"> <div class="name"> originalPosition </div> <div class="attributes"> <span class="light">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span> <span class="since" title="since">1.1</span> </div> </td> <td class="description"> <div class="description">  <p>This read-only property returns the <a href="../symbols/Point.html" class="linkConstructor">Point</a> that was the original value of <a href="../symbols/Diagram.html#position" class="linkProperty">Diagram.position</a> when the panning operation started. </div> </td> </tr> </tbody> </table> </div> <dl class="inheritsList"> <dt>Properties borrowed from class <a href="../symbols/Tool.html" class="linkConstructor">Tool</a>: </dt><dd><a href="../symbols/Tool.html#diagram" class="linkProperty">diagram</a>, <a href="../symbols/Tool.html#isActive" class="linkProperty">isActive</a>, <a href="../symbols/Tool.html#isEnabled" class="linkProperty">isEnabled</a>, <a href="../symbols/Tool.html#name" class="linkProperty">name</a>, <a href="../symbols/Tool.html#transactionResult" class="linkProperty">transactionResult</a></dd> </dl>  <h2 class="summaryCaption">Method <span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the methods documented in the class PanningTool."> <thead> <tr> <th scope="col" class="name">Name, Return Type</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr id="canStart"> <td class="name"> <div class="name"> canStart() </div> <div class="attributes"> <span class="light">{boolean}</span> </div> </td> <td class="description"> <div class="description"> <p><p>This tool can run when the diagram allows scrolling and the mouse has been dragged with the left button far enough away from the mouse-down point to avoid being a click.<span class="nodetails" id="xmethcanStart"><a class="morelink" onclick="hst('methcanStart')">More...</a></span> <span class="details" id="methcanStart"> </span><div class="details" id="dmethcanStart"><p> This method may be overridden.</div> <dl class="detailList"> <dt class="heading">Returns:</dt> <dt><span class="light fixedFont">{boolean}</span> </dt> </dl> </div> </td> </tr> <tr id="doActivate"> <td class="name"> <div class="name"> doActivate() </div> <div class="attributes"> </div> </td> <td class="description"> <div class="description"> <p><p>Capture the mouse, change the diagram cursor, and remember the <a href="../symbols/Diagram.html#position" class="linkProperty">Diagram.position</a>. </div> </td> </tr> <tr id="doCancel"> <td class="name"> <div class="name"> doCancel() </div> <div class="attributes"> </div> </td> <td class="description"> <div class="description"> <p><p>Restore the <a href="../symbols/Diagram.html#position" class="linkProperty">Diagram.position</a> to what it was when this tool activated. </div> </td> </tr> <tr id="doDeactivate"> <td class="name"> <div class="name"> doDeactivate() </div> <div class="attributes"> </div> </td> <td class="description"> <div class="description"> <p><p>Release the mouse and restore the default diagram cursor. </div> </td> </tr> <tr id="doMouseMove"> <td class="name"> <div class="name"> doMouseMove() </div> <div class="attributes"> </div> </td> <td class="description"> <div class="description"> <p><p>Modify the <a href="../symbols/Diagram.html#position" class="linkProperty">Diagram.position</a> according to how much the mouse has moved. </div> </td> </tr> <tr id="doMouseUp"> <td class="name"> <div class="name"> doMouseUp() </div> <div class="attributes"> </div> </td> <td class="description"> <div class="description"> <p><p>Modify the <a href="../symbols/Diagram.html#position" class="linkProperty">Diagram.position</a> according to how much the mouse has moved. </div> </td> </tr> </tbody> </table> </div> <dl class="inheritsList"> <dt>Methods borrowed from class <a href="../symbols/Tool.html" class="linkConstructor">Tool</a>: </dt><dd><a href="../symbols/Tool.html#cancelWaitAfter" class="linkMethod">cancelWaitAfter</a>, <a href="../symbols/Tool.html#canStartMultiTouch" class="linkMethod">canStartMultiTouch</a>, <a href="../symbols/Tool.html#doKeyDown" class="linkMethod">doKeyDown</a>, <a href="../symbols/Tool.html#doKeyUp" class="linkMethod">doKeyUp</a>, <a href="../symbols/Tool.html#doMouseDown" class="linkMethod">doMouseDown</a>, <a href="../symbols/Tool.html#doMouseWheel" class="linkMethod">doMouseWheel</a>, <a href="../symbols/Tool.html#doStart" class="linkMethod">doStart</a>, <a href="../symbols/Tool.html#doStop" class="linkMethod">doStop</a>, <a href="../symbols/Tool.html#doWaitAfter" class="linkMethod">doWaitAfter</a>, <a href="../symbols/Tool.html#findToolHandleAt" class="linkMethod">findToolHandleAt</a>, <a href="../symbols/Tool.html#isBeyondDragSize" class="linkMethod">isBeyondDragSize</a>, <a href="../symbols/Tool.html#standardMouseClick" class="linkMethod">standardMouseClick</a>, <a href="../symbols/Tool.html#standardMouseOver" class="linkMethod">standardMouseOver</a>, <a href="../symbols/Tool.html#standardMouseSelect" class="linkMethod">standardMouseSelect</a>, <a href="../symbols/Tool.html#standardMouseWheel" class="linkMethod">standardMouseWheel</a>, <a href="../symbols/Tool.html#standardPinchZoomMove" class="linkMethod">standardPinchZoomMove</a>, <a href="../symbols/Tool.html#standardPinchZoomStart" class="linkMethod">standardPinchZoomStart</a>, <a href="../symbols/Tool.html#standardWaitAfter" class="linkMethod">standardWaitAfter</a>, <a href="../symbols/Tool.html#startTransaction" class="linkMethod">startTransaction</a>, <a href="../symbols/Tool.html#stopTool" class="linkMethod">stopTool</a>, <a href="../symbols/Tool.html#stopTransaction" class="linkMethod">stopTransaction</a>, <a href="../symbols/Tool.html#updateAdornments" class="linkMethod">updateAdornments</a></dd> </dl>    </div>  </div>   <div id="footer" class="fineprint" style="clear:both"> Copyright © 1998-2019 by <a href="https://www.nwoods.com/">Northwoods Software Corporation.</a> </div> </body> </html>