Fixed edge cases, where select box would be stuck on not disappear

editor/js/tools/deletetool.js

@@ -4,10 +4,14 @@ import * as Graph from "../graph";
 import jquery from "jquery";
 import ToolMenu from "./menus/toolmenu";
 
+const BOX_SELECT_LAYER_ID = "#box-select-layer";
+const BOX_SELECT_ID_WH = "box-select";
+const SELECT_BOX_SELECTOR = BOX_SELECT_LAYER_ID + " #" + BOX_SELECT_ID_WH;
+
 /**
  * Only one instance of this should exist, since box-delete has to work on a global scale.
  */
- var deleteToolInstance = undefined; // Used for box delete
+var deleteToolInstance = undefined; // Used for box delete
 export default class DeleteTool extends Tool {
     constructor(key) {
         super("Delete", "delete", key, new ToolMenu());
@@ -43,8 +47,10 @@ export default class DeleteTool extends Tool {
         // Ask for confirmation to delete
         var nodeNames = selectedNodes.map((n) => n[Graph.NODE_LABEL]);
         //! Problem: If browser is not actually showing the alerts, it always returns false!
-        var shouldDelete = confirm("Do you wanna delete all these nodes:\n\n" + nodeNames.join("\n"))
-        
+        var shouldDelete = confirm(
+            "Do you wanna delete all these nodes:\n\n" + nodeNames.join("\n")
+        );
+
         // Delete if confirmed
         if (shouldDelete) {
             var nodeIds = selectedNodes.map((n) => n[Graph.NODE_ID]);
@@ -54,7 +60,7 @@ export default class DeleteTool extends Tool {
 
     onNodeClick(node) {
         graph.deleteNode(node[Graph.NODE_ID]);
-        
+
         if (state.selectedItem == node) {
             state.setSelectedItem(undefined);
         }
@@ -65,7 +71,7 @@ export default class DeleteTool extends Tool {
             link[Graph.LINK_SOURCE][Graph.NODE_ID],
             link[Graph.LINK_TARGET][Graph.NODE_ID]
         );
-        
+
         if (state.selectedItem == link) {
             state.setSelectedItem(undefined);
         }
@@ -76,24 +82,18 @@ export default class DeleteTool extends Tool {
             // Source: https://github.com/vasturiano/force-graph/issues/151#issuecomment-735850938
 
             // forceGraph element is the element provided to the Force Graph Library
-            jquery("#2d-graph").on(
-                "pointerdown",
-                this.boxSelectOnPointerDown
-            );
-            jquery("#2d-graph").on(
-                "pointermove",
-                this.boxSelectOnPointerMove
-            );
-            jquery("#2d-graph").on(
-                "pointerup",
-                this.boxSelectOnPointerUp
-            );
+            jquery("#2d-graph").on("pointerdown", this.boxSelectOnPointerDown);
+            jquery("#2d-graph").on("pointermove", this.boxSelectOnPointerMove);
+            jquery("#2d-graph").on("pointerup", this.boxSelectOnPointerUp);
         });
     }
 
     boxSelectOnPointerDown(e) {
         // Only do anything if delete tool is also active
-        if (deleteToolInstance === undefined || deleteToolInstance.isActive == false) {
+        if (
+            deleteToolInstance === undefined ||
+            deleteToolInstance.isActive == false
+        ) {
             return;
         }
 
@@ -103,7 +103,7 @@ export default class DeleteTool extends Tool {
 
         e.preventDefault();
         this.boxSelect = document.createElement("div");
-        this.boxSelect.id = "box-select";
+        this.boxSelect.id = BOX_SELECT_ID_WH;
         this.boxSelect.style.left = e.offsetX.toString() + "px";
         this.boxSelect.style.top = e.offsetY.toString() + "px";
         this.boxSelectStart = {
@@ -111,7 +111,7 @@ export default class DeleteTool extends Tool {
             y: e.offsetY,
         };
         // app element is the element just above the forceGraph element.
-        jquery("#box-select-layer").append(this.boxSelect);
+        jquery(BOX_SELECT_LAYER_ID).append(this.boxSelect);
     }
 
     boxSelectOnPointerMove(e) {
@@ -120,7 +120,7 @@ export default class DeleteTool extends Tool {
         }
 
         if (!e.shiftKey) {
-            this.boxSelect.remove();
+            jquery(SELECT_BOX_SELECTOR).remove();
             return;
         }
 
@@ -151,7 +151,7 @@ export default class DeleteTool extends Tool {
         }
 
         if (!e.shiftKey) {
-            this.boxSelect.remove();
+            jquery(SELECT_BOX_SELECTOR).remove();
             return;
         }