gojs

<!doctype html> <html class="default no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ClickSelectingTool | GoJS API</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../../assets/css/bootstrap.min.css"> <link rel="stylesheet" href="../assets/css/main.css"> </head> <body> <header>  <nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top"> <div class="container-fluid"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#navbar"> <a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="../../index.html">Home</a></li> <li><a href="../../learn/index.html">Learn</a></li> <li><a href="../../samples/index.html">Samples</a></li> <li><a href="../../intro/index.html">Intro</a></li> <li><a href="../../api/index.html" target="api">API</a></li> <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li> <li><a href="../../download.html">Download</a></li> <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li> <li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li> <li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li> <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li> </ul> </div> </div> </nav> <div class="tsd-page-header"> <div class="tsd-page-toolbar"> <div class="container-fluid plr15"> <div class="table-wrap"> <div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" data-base=".."> <div class="field"> <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label> <input id="tsd-search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> <a href="../index.html" class="title">GoJS API</a> </div> <div class="table-cell" id="tsd-widgets"> <div id="tsd-filter"> <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a> <div class="tsd-filter-group"> <div class="tsd-select" id="tsd-filter-visibility"> <span class="tsd-select-label">All</span> <ul class="tsd-select-list"> <li data-value="public">Public</li> <li data-value="protected">Public/Protected</li> <li data-value="private" class="selected">All</li> </ul> </div> </div> </div> <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a> </div> </div> </div> </div> <div class="tsd-page-title"> <div class="container-fluid plr15"> <div class="top-copyright">  <b>GoJS</b>® Diagramming Components<br/>version 2.1.18<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div> <div> <h1>Class ClickSelectingTool</h1> </div> </div> </div> </div> </header> <div class="container-fluid container-main plr15"> <div class="row"> <div class="col-8 col-content"> <section class="tsd-panel tsd-hierarchy"> <h3>Hierarchy</h3> <ul class="tsd-hierarchy"> <li> <a href="Tool.html" class="tsd-signature-type">Tool</a> <ul class="tsd-hierarchy"> <li> <span class="target">ClickSelectingTool</span> </li> </ul> </li> </ul> </section> <section class="tsd-panel tsd-comment"> <div class="tsd-comment tsd-typography"> <p>The ClickSelectingTool selects and deselects <a href="Part.html">Part</a>s when there is a click. It does this by calling <a href="Tool.html#standardMouseSelect">Tool.standardMouseSelect</a>. It is also responsible for handling and dispatching click events on <a href="GraphObject.html">GraphObject</a>s by calling <a href="Tool.html#standardMouseClick">Tool.standardMouseClick</a>.</p> <p>Note that this tool avoids raising click events on objects that are in temporary layers. This is to prevent parts such as selection adornments from interfering with clicking on selected nodes or links. (Adornments are in the "Adornment" <a href="Layer.html">Layer</a>, which <a href="Layer.html#isTemporary">Layer.isTemporary</a>.) However this means that if you add a <a href="GraphObject.html#click">GraphObject.click</a> event handler on a GraphObject in an Adornment, it will not be called. You can get it to be called by setting <a href="GraphObject.html#isActionable">GraphObject.isActionable</a> to true on that object in the adornment.</p> <p>This tool is a standard mouse-up tool, the <a href="ToolManager.html#clickSelectingTool">ToolManager.clickSelectingTool</a>.</p> <p>This tool does not utilize any <a href="Adornment.html">Adornment</a>s or tool handles. This tool does not modify the model or conduct any transaction.</p> <p>An example customization of this tool is shown in the <a href="../../extensions/TreeMap.html">Tree Map</a> sample, where the <a href="Tool.html#standardMouseSelect">Tool.standardMouseSelect</a> method is overridden to permit the user to cycle through the chain of containing groups, changing the selection on each click to the next containing group.</p> <p>If you want to programmatically select a Part, you can set <a href="Part.html#isSelected">Part.isSelected</a> or call <a href="Diagram.html#select">Diagram.select</a>. If you want to know which Part is at a particular point, you can call <a href="Diagram.html#findPartAt">Diagram.findPartAt</a>.</p> </div> </section> <section class="tsd-panel-group tsd-index-group"> <h2>Index</h2> <section class="tsd-panel tsd-index-panel"> <div class="tsd-index-content"> <section class="tsd-index-section "> <h3>Constructors</h3> <ul class="tsd-index-list"> <li class="tsd-kind-constructor tsd-parent-kind-class"><a href="ClickSelectingTool.html#constructor" class="tsd-kind-icon">constructor</a></li> </ul> </section> <section class="tsd-index-section "> <h3>Methods</h3> <ul class="tsd-index-list"> <li class="tsd-kind-method tsd-parent-kind-class"><a href="ClickSelectingTool.html#canStart" class="tsd-kind-icon">can<wbr>Start</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="ClickSelectingTool.html#doMouseUp" class="tsd-kind-icon">do<wbr>Mouse<wbr>Up</a></li> </ul> </section> </div> </section> </section> <section class="tsd-panel-group tsd-member-group "> <h2>Constructors</h2> <section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class"> <a name="constructor" class="tsd-anchor"></a> <h3> constructor </h3> <ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">new <wbr>Click<wbr>Selecting<wbr>Tool<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="ClickSelectingTool.html" class="tsd-signature-type">ClickSelectingTool</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#clickSelectingTool">ToolManager.clickSelectingTool</a>.</p> <p>The <a href="Tool.html#name">Tool.name</a> of this tool is "ClickSelecting".</p> </div> <h4 class="tsd-returns-title">Returns <a href="ClickSelectingTool.html" class="tsd-signature-type">ClickSelectingTool</a></h4> </li> </ul> </section> </section> <section class="tsd-panel-group tsd-member-group "> <h2>Methods</h2> <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"> <a name="canStart" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagVirtual">Virtual</span> <span class="tsd-flag ts-flagOverride">Override</span> can<wbr>Start </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">can<wbr>Start<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>This tool can run whenever a click occurs.</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="doMouseUp" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagOverride">Override</span> do<wbr>Mouse<wbr>Up </h3> <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">do<wbr>Mouse<wbr>Up<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Upon a click, this calls <a href="Tool.html#standardMouseSelect">Tool.standardMouseSelect</a> to change the <a href="Diagram.html#selection">Diagram.selection</a> collection, then calls <a href="Tool.html#standardMouseClick">Tool.standardMouseClick</a> to perform the normal click behaviors, and then stops this tool.</p> </div> <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4> </li> </ul> </section> </section> </div> <div class="col-4 col-menu menu-sticky-wrap menu-highlight"> <nav class="tsd-navigation primary"> <ul> <li class="globals "> <a href="../index.html"><em>GoJS <wbr>Class <wbr>Index</em></a> </li> </ul> </nav> <nav class="tsd-navigation secondary menu-sticky"> <ul class="before-current"> </ul> <ul class="current"> <li class="current tsd-kind-class"> <a href="ClickSelectingTool.html" class="tsd-kind-icon">Click<wbr>Selecting<wbr>Tool</a> <ul> <li class=" tsd-kind-constructor tsd-parent-kind-class"> <a href="ClickSelectingTool.html#constructor" class="tsd-kind-icon">constructor</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="ClickSelectingTool.html#canStart" class="tsd-kind-icon">can<wbr>Start</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class"> <a href="ClickSelectingTool.html#doMouseUp" class="tsd-kind-icon">do<wbr>Mouse<wbr>Up</a> </li> </ul> </li> </ul> <ul class="after-current"> </ul> </nav> </div> </div> </div> <div class="container-fluid bottom-copyright plr15"> Copyright © 1998-2020 by Northwoods Software Corporation. </div> <div class="overlay"></div> <script src="../assets/js/main.js"></script> <script src="../../assets/js/api.js"></script> <script src="../../assets/js/bootstrap.min.js"></script> <script>if (location.protocol == 'file:') document.write('<script src="../assets/js/search.js"><' + '/script>');</script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-1506307-5', 'auto'); ga('send', 'pageview'); </script> </body> </html>