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="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 leading-none">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.56<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div> <div> <h1>Class ClickSelectingTool</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">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 tsd-is-overwrite"><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 tsd-is-overwrite"><a href="ClickSelectingTool.html#canStart" class="tsd-kind-icon">can<wbr>Start</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><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 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>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" data-tsd-kind="Class">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" data-tsd-kind="Class">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 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 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 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>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=" "> <a href="../index.html">GoJS <wbr>Class <wbr>Index</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 tsd-is-overwrite"> <a href="ClickSelectingTool.html#constructor" class="tsd-kind-icon">constructor</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"> <a href="ClickSelectingTool.html#canStart" class="tsd-kind-icon">can<wbr>Start</a> </li> <li class=" tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"> <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="tsd w-full max-w-screen-xl mx-auto px-2"> <div class="bottom-copyright">Copyright © 1998-2021 by Northwoods Software Corporation.</div> </div> <div class="overlay"></div> <script src="../assets/js/main.js"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-1506307-5'); var getOutboundLink = function(url, label) { gtag('event', 'click', { 'event_category': 'outbound', 'event_label': label, 'transport_type': 'beacon' }); } // topnav var topButton = document.getElementById("topnavButton"); var topnavList = document.getElementById("topnavList"); topButton.addEventListener("click", function() { this.classList.toggle("active"); topnavList.classList.toggle("hidden"); document.getElementById("topnavOpen").classList.toggle("hidden"); document.getElementById("topnavClosed").classList.toggle("hidden"); }); </script> </body> </html>