From 380038e09ab44b274034afbb27a9944d81744663 Mon Sep 17 00:00:00 2001
From: Maximilian Giller <m.giller@tu-bs.de>
Date: Thu, 6 Jan 2022 14:42:03 +0100
Subject: [PATCH] Moved box-select from collect to delete tool
---
editor/js/tools/collecttool.js | 137 +--------------------------------
editor/js/tools/deletetool.js | 132 ++++++++++++++++++++++++++++++-
2 files changed, 132 insertions(+), 137 deletions(-)
diff --git a/editor/js/tools/collecttool.js b/editor/js/tools/collecttool.js
index 55a6b4c..ffd3f71 100644
--- a/editor/js/tools/collecttool.js
+++ b/editor/js/tools/collecttool.js
@@ -1,47 +1,11 @@
import Tool from "./tool";
-import { graph, state, renderer } from "../editor";
+import { state } from "../editor";
import { CONTEXT } from "../state";
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);
- 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);
- }
- });
-
- // 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) {
@@ -80,103 +44,4 @@ export default class CollectTool extends Tool {
this.menu.value(COLLECTION_KEY, []);
}
}
-
- setupBoxSelect() {
- window.addEventListener("load", () => {
- // 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
- );
- });
- }
-
- boxSelectOnPointerDown(e) {
- if (!e.shiftKey) {
- return;
- }
-
- e.preventDefault();
- this.boxSelect = document.createElement("div");
- this.boxSelect.id = "box-select";
- this.boxSelect.style.left = e.offsetX.toString() + "px";
- this.boxSelect.style.top = e.offsetY.toString() + "px";
- this.boxSelectStart = {
- x: e.offsetX,
- y: e.offsetY,
- };
- // app element is the element just above the forceGraph element.
- jquery("#box-select-layer").append(this.boxSelect);
- }
-
- boxSelectOnPointerMove(e) {
- if (!this.boxSelect) {
- return;
- }
-
- if (!e.shiftKey) {
- this.boxSelect.remove();
- return;
- }
-
- e.preventDefault();
- if (e.offsetX < this.boxSelectStart.x) {
- this.boxSelect.style.left = e.offsetX.toString() + "px";
- this.boxSelect.style.width =
- (this.boxSelectStart.x - e.offsetX).toString() + "px";
- } else {
- this.boxSelect.style.left = this.boxSelectStart.x.toString() + "px";
- this.boxSelect.style.width =
- (e.offsetX - this.boxSelectStart.x).toString() + "px";
- }
- if (e.offsetY < this.boxSelectStart.y) {
- this.boxSelect.style.top = e.offsetY.toString() + "px";
- this.boxSelect.style.height =
- (this.boxSelectStart.y - e.offsetY).toString() + "px";
- } else {
- this.boxSelect.style.top = this.boxSelectStart.y.toString() + "px";
- this.boxSelect.style.height =
- (e.offsetY - this.boxSelectStart.y).toString() + "px";
- }
- }
-
- boxSelectOnPointerUp(e) {
- if (!this.boxSelect) {
- return;
- }
-
- if (!e.shiftKey) {
- this.boxSelect.remove();
- return;
- }
-
- e.preventDefault();
- let left, bottom, top, right;
- if (e.offsetX < this.boxSelectStart.x) {
- left = e.offsetX;
- right = this.boxSelectStart.x;
- } else {
- left = this.boxSelectStart.x;
- right = e.offsetX;
- }
- if (e.offsetY < this.boxSelectStart.y) {
- top = e.offsetY;
- bottom = this.boxSelectStart.y;
- } else {
- top = this.boxSelectStart.y;
- bottom = e.offsetY;
- }
- this.boxSelect.remove();
- collectToolInstance.onBoxSelect(left, bottom, top, right);
- }
}
diff --git a/editor/js/tools/deletetool.js b/editor/js/tools/deletetool.js
index 5a8acf6..01e316d 100644
--- a/editor/js/tools/deletetool.js
+++ b/editor/js/tools/deletetool.js
@@ -1,10 +1,41 @@
import Tool from "./tool";
-import { graph, state } from "../editor";
+import { graph, state, renderer } from "../editor";
import * as Graph from "../graph";
+import jquery from "jquery";
+/**
+ * Only one instance of this should exist, since box-delete has to work on a global scale.
+ */
+ var deleteToolInstance = undefined; // Used for box delete
export default class DeleteTool extends Tool {
constructor(key) {
super("Delete", "delete", key);
+ this.setupBoxSelect();
+
+ if (deleteToolInstance === undefined) {
+ deleteToolInstance = this;
+ }
+ }
+
+ onBoxSelect(left, bottom, top, right) {
+ // Filter out selected nodes
+ const hitNodes = [];
+ const tl = renderer.screen2GraphCoords(left, top);
+ const br = renderer.screen2GraphCoords(right, bottom);
+ 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);
+ }
+ });
+
+ // Delete selected items after confirmation
+ console.log("DELETE");
+ console.log(hitNodes);
}
onNodeClick(node) {
@@ -25,4 +56,103 @@ export default class DeleteTool extends Tool {
state.setSelectedItem(undefined);
}
}
+
+ setupBoxSelect() {
+ window.addEventListener("load", () => {
+ // 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
+ );
+ });
+ }
+
+ boxSelectOnPointerDown(e) {
+ if (!e.shiftKey) {
+ return;
+ }
+
+ e.preventDefault();
+ this.boxSelect = document.createElement("div");
+ this.boxSelect.id = "box-select";
+ this.boxSelect.style.left = e.offsetX.toString() + "px";
+ this.boxSelect.style.top = e.offsetY.toString() + "px";
+ this.boxSelectStart = {
+ x: e.offsetX,
+ y: e.offsetY,
+ };
+ // app element is the element just above the forceGraph element.
+ jquery("#box-select-layer").append(this.boxSelect);
+ }
+
+ boxSelectOnPointerMove(e) {
+ if (!this.boxSelect) {
+ return;
+ }
+
+ if (!e.shiftKey) {
+ this.boxSelect.remove();
+ return;
+ }
+
+ e.preventDefault();
+ if (e.offsetX < this.boxSelectStart.x) {
+ this.boxSelect.style.left = e.offsetX.toString() + "px";
+ this.boxSelect.style.width =
+ (this.boxSelectStart.x - e.offsetX).toString() + "px";
+ } else {
+ this.boxSelect.style.left = this.boxSelectStart.x.toString() + "px";
+ this.boxSelect.style.width =
+ (e.offsetX - this.boxSelectStart.x).toString() + "px";
+ }
+ if (e.offsetY < this.boxSelectStart.y) {
+ this.boxSelect.style.top = e.offsetY.toString() + "px";
+ this.boxSelect.style.height =
+ (this.boxSelectStart.y - e.offsetY).toString() + "px";
+ } else {
+ this.boxSelect.style.top = this.boxSelectStart.y.toString() + "px";
+ this.boxSelect.style.height =
+ (e.offsetY - this.boxSelectStart.y).toString() + "px";
+ }
+ }
+
+ boxSelectOnPointerUp(e) {
+ if (!this.boxSelect) {
+ return;
+ }
+
+ if (!e.shiftKey) {
+ this.boxSelect.remove();
+ return;
+ }
+
+ e.preventDefault();
+ let left, bottom, top, right;
+ if (e.offsetX < this.boxSelectStart.x) {
+ left = e.offsetX;
+ right = this.boxSelectStart.x;
+ } else {
+ left = this.boxSelectStart.x;
+ right = e.offsetX;
+ }
+ if (e.offsetY < this.boxSelectStart.y) {
+ top = e.offsetY;
+ bottom = this.boxSelectStart.y;
+ } else {
+ top = this.boxSelectStart.y;
+ bottom = e.offsetY;
+ }
+ this.boxSelect.remove();
+ deleteToolInstance.onBoxSelect(left, bottom, top, right);
+ }
}
--
GitLab