From f294000e07900b83a6119cbc128bcc37a721ffcf Mon Sep 17 00:00:00 2001
From: Maximilian Giller <m.giller@tu-bs.de>
Date: Fri, 7 Jan 2022 16:06:45 +0100
Subject: [PATCH] Fixed edge cases, where select box would be stuck on not
disappear
---
editor/js/tools/deletetool.js | 44 +++++++++++++++++------------------
1 file changed, 22 insertions(+), 22 deletions(-)
diff --git a/editor/js/tools/deletetool.js b/editor/js/tools/deletetool.js
index 44cfdc3..885e141 100644
--- a/editor/js/tools/deletetool.js
+++ b/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;
}
--
GitLab