Working on clean box-select implementation

editor/js/tools/collecttool.js

@@ -5,16 +5,25 @@ import { CollectMenu, COLLECTION_KEY } from "./menus/collectmenu";
 import * as Graph from "../graph";
 import jquery from "jquery";
 
+/**
+ * Only one instance of this should exist, since box-select has to work on a global scale.
+ */
+var collectToolInstance = undefined; // Used for box select
 export default class CollectTool extends Tool {
     constructor(key) {
         super("Collect", "collect", key, new CollectMenu());
         this.setupBoxSelect();
+
+        if (collectToolInstance === undefined) {
+            collectToolInstance = this;
+        }
     }
 
     onBoxSelect(left, bottom, top, right) {
+        // Filter out selected nodes
+        const hitNodes = [];
         const tl = renderer.screen2GraphCoords(left, top);
         const br = renderer.screen2GraphCoords(right, bottom);
-        const hitNodes = [];
         graph.data[Graph.GRAPH_NODES].forEach((node) => {
             if (
                 tl.x < node.x &&
@@ -25,15 +34,14 @@ export default class CollectTool extends Tool {
                 hitNodes.push(node);
             }
         });
-        // run code to select your nodes here
-        // return selectGraphObjects(hitNodes);
-        console.log(hitNodes);
 
+        // Add to selected items
         if (state.itemsContext !== CONTEXT.node) {
             state.clearSelectedItems();
             state.itemsContext = CONTEXT.node;
         }
         state.addSelectedItems(hitNodes);
+        this.menu.value(COLLECTION_KEY, state.selectedItems);
     }
 
     onNodeClick(node) {
@@ -169,34 +177,6 @@ export default class CollectTool extends Tool {
             bottom = e.offsetY;
         }
         this.boxSelect.remove();
-        // this.onBoxSelect(left, bottom, top, right);
-
-        
-
-        const tl = renderer.screen2GraphCoords(left, top);
-        const br = renderer.screen2GraphCoords(right, bottom);
-        const hitNodes = [];
-        graph.data[Graph.GRAPH_NODES].forEach((node) => {
-            if (
-                tl.x < node.x &&
-                node.x < br.x &&
-                br.y > node.y &&
-                node.y > tl.y
-            ) {
-                hitNodes.push(node);
-            }
-        });
-        // run code to select your nodes here
-        // return selectGraphObjects(hitNodes);
-        console.log(hitNodes);
-
-        if (state.itemsContext !== CONTEXT.node) {
-            state.clearSelectedItems();
-            state.itemsContext = CONTEXT.node;
-        }
-        state.addSelectedItems(hitNodes);
-
-        // TODO Should be shown in menu
-        // this.menu.value(COLLECTION_KEY, state.selectedItems);
+        collectToolInstance.onBoxSelect(left, bottom, top, right);
     }
 }