create-gojs-kit

<!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"/> <meta name="description" content="This customized DragSelectingTool selects and deselects parts continuously while the user is dragging a box, rather than when the tool finishes." /> <meta itemprop="description" content="This customized DragSelectingTool selects and deselects parts continuously while the user is dragging a box, rather than when the tool finishes." /> <meta property="og:description" content="This customized DragSelectingTool selects and deselects parts continuously while the user is dragging a box, rather than when the tool finishes." /> <meta name="twitter:description" content="This customized DragSelectingTool selects and deselects parts continuously while the user is dragging a box, rather than when the tool finishes." /> <link rel="preconnect" href="https://rsms.me/"> <link rel="stylesheet" href="../assets/css/style.css">  <meta itemprop="name" content="Realtime Selection During Background Dragging" /> <meta property="og:title" content="Realtime Selection During Background Dragging" /> <meta name="twitter:title" content="Realtime Selection During Background Dragging" /> <meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/realtimedragselecting.png" /> <meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/realtimedragselecting.png" /> <meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/realtimedragselecting.png" /> <meta property="og:url" content="https://gojs.net/latest/samples/RealtimeDragSelecting.html" /> <meta property="twitter:url" content="https://gojs.net/latest/samples/RealtimeDragSelecting.html" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="og:type" content="website" /> <meta property="twitter:domain" content="gojs.net" /> <title> Realtime Selection During Background Dragging | GoJS Diagramming Library </title> </head> <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 (lowerhref.endsWith('.html')) lowerhref = lowerhref.slice(0, -5); if (url.startsWith(lowerhref)) { aTags[i] .classList .add('active'); break; } } } }); </script> <div class="flex flex-col prose"> <div class="w-full max-w-screen-xl mx-auto">   <script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script> <link rel="stylesheet" href="../assets/css/prism.css"/> <script src="../assets/js/prism.js"></script> <div id="allSampleContent" class="p-4 w-full"> <script src="../extensions/RealtimeDragSelectingTool.js"></script> <script id="code"> function init() { myDiagram = new go.Diagram('myDiagramDiv', { initialDocumentSpot: go.Spot.Center, initialViewportSpot: go.Spot.Center, // replace the standard DragSelectingTool with one that selects while dragging, // and also only requires overlapping bounds with the dragged box to be selected dragSelectingTool: new RealtimeDragSelectingTool({ isPartialInclusion: true, delay: 50, // replace the magenta box with a red one box: new go.Part({ layerName: 'Tool', selectable: false }) .add( new go.Shape({ name: 'SHAPE', fill: 'rgba(255,0,0,0.1)', stroke: 'red', strokeWidth: 2 }) ) }), // Define the template for Nodes, just some text inside a colored rectangle nodeTemplate: new go.Node('Spot', { width: 70, height: 20 }) .add( new go.Shape('Rectangle') .bind('fill', 'c'), new go.TextBlock({ margin: 2 }) .bind('text', 'c') ), // Define the template for Links, just a simple line linkTemplate: new go.Link() .add( new go.Shape({ stroke: 'black' }) ), layout: new go.TreeLayout() }); myDiagram.model = loadTree(); } function loadTree() { // create some tree data var total = 49; var treedata = []; for (var i = 0; i < total; i++) { // these property names are also specified when creating the TreeModel var d = { key: i, // this node data's key c: go.Brush.randomColor(), // the node's color parent: i > 0 ? Math.floor((Math.random() * i) / 2) : undefined // the random parent's key }; treedata.push(d); } return new go.TreeModel(treedata); } window.addEventListener('DOMContentLoaded', init); </script> <div id="sample"> <div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 100%; height: 600px"></div> <p> This sample demonstrates the RealtimeDragSelectingTool, which replaces the standard <a>DragSelectingTool</a>. Press in the background, wait briefly, and then drag to start selecting Nodes or Links that intersect with the box. You can press or release Control (Command on Mac) or Shift while dragging to see how the selection changes. </p> <p> Load it in your own app by including <a href="../extensions/RealtimeDragSelectingTool.js">RealtimeDragSelectingTool.js</a>. Initialize your Diagram by setting <a>ToolManager.dragSelectingTool</a> to a new instance of this tool. For example: </p> <pre class="lang-js"><code> myDiagram.toolManager.dragSelectingTool = new RealtimeDragSelectingTool(); </code></pre> or <pre class="lang-js"><code> new go.Diagram({ . . ., "toolManager.dragSelectingTool": new RealtimeDragSelectingTool({ isPartialInclusion: true }), . . . }) </code></pre> </div> </div>   </div> <div id="allTagDescriptions" class="p-4 w-full max-w-screen-xl mx-auto"> <hr/> <h3 class="text-xl">GoJS Features in this sample</h3>  <h4>Collections</h4> <p> <b>GoJS</b> provides its own collection classes: <a href="../api/symbols/List.html" target="api">List</a>, <a href="../api/symbols/Set.html" target="api">Set</a>, and <a href="../api/symbols/Map.html" target="api">Map</a>. You can iterate over a collection by using an <a href="../api/symbols/Iterator.html" target="api">Iterator</a>. More information can be found in the <a href="../intro/collections.html">GoJS Intro</a>. </p> <p> <a href="../samples/index.html#collections">Related samples</a> </p> <hr>  <h4>Tree Layout</h4> <p> This predefined layout is used for placing Nodes of a tree-structured graph in layers (rows or columns). For discussion and examples of the most commonly used properties of the <a href="../api/symbols/TreeLayout.html">TreeLayout</a>, see the <a href="../intro/trees.html">Trees</a> page in the Introduction. More information can be found in the <a href="../intro/layouts.html#TreeLayout">GoJS Intro</a>. </p> <p> <a href="../samples/index.html#treelayout">Related samples</a> </p> <hr>  <h4>Tools</h4> <p> <a href="../api/symbols/Tool.html" target="api">Tool</a>s handle all input events, such as mouse and keyboard interactions, in a Diagram. 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 href="../api/symbols/InputEvent.html" target="api">InputEvent</a>s and redirected by the diagram to go to the <a href="../api/symbols/Diagram.html#currentTool" target="api">Diagram.currentTool</a>. By default the Diagram.currentTool is an instance of <a href="../api/symbols/ToolManager.html" target="api">ToolManager</a> held as the <a href="../api/symbols/Diagram.html#toolManager" target="api">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 href="../api/symbols/Diagram.html#defaultTool" target="api">Diagram.defaultTool</a>, which is normally the ToolManager, again. </p> <p> More information can be found in the <a href="../intro/tools.html">GoJS Intro</a>. </p> <p> <a href="../samples/index.html#tools">Related samples</a> </p> <hr>  <h4>GoJS Extensions</h4> <p> <b>GoJS</b> can be extended in a variety of ways. The most common way to change the standard behavior is to set properties on the <a href="../api/symbols/GraphObject.html" target="api">GraphObject</a>, <a href="../api/symbols/Diagram.html" target="api">Diagram</a>, <a href="../api/symbols/CommandHandler.html" target="api">CommandHandler</a>, <a href="../api/symbols/Tool.html" target="api">Tool</a>, or <a href="../api/symbols/Layout.html" target="api">Layout</a>. But when the desired property does not exist, you might need to override methods of CommandHandler, Tool, Layout, Link, or Node. Methods that you can override are documented in the API reference. Various features of GoJS can be overriden, either by replacing a method on an instance (a feature of JavaScript) or by defining a subclass. You should not modify the prototypes of any of the <b>GoJS</b> classes. </p> <p> In addition to our samples, <b>GoJS</b> provides an <strong><a href="../samples/#extensions">extensions gallery</a></strong>, showcasing the creation of custom tools and layouts. Those classes and samples are written in TypeScript, available at <code>../extensionsJSM/</code>, as ECMAScript/JavaScript modules -- these use the <code>../release/go-module.js</code> library. We recommend that you copy the files that you need into your project, so that you can adjust how they refer to the GoJS library that you choose and so that you can include them into your own building and packaging procedures. </p> <p> More information can be found in the <a href="../intro/extensions.html">GoJS Intro</a>. </p> <p> <a href="../samples/index.html#extensions">Related samples</a> </p> <hr> </div> </div> </body>  <script src="../assets/js/goSamples.js"></script> </html>