diff --git a/editor/css/editor.css b/editor/css/editor.css
index 4fe7246cec32694e3179f86c97f1eed531d71730..84740375679c5c4eee098c43119593749a502eed 100644
--- a/editor/css/editor.css
+++ b/editor/css/editor.css
@@ -63,11 +63,16 @@ div#ks-editor #toolbar-settings, div#ks-editor #toolbar-save {
float: right;
}
-div#ks-editor #boxSelect {
+div#ks-editor #box-select-layer {
+ position: relative;
+}
+
+div#ks-editor #box-select {
position: absolute;
z-index: 300000;
border-style: dotted;
border-color: #3e74cc;
+ border-width: 2px;
background-color: rgba(255, 255, 255, 0.5);
pointer-events: none;
}
diff --git a/editor/editor.php b/editor/editor.php
index b893ec251a9625da12134954d1b39fa702d48adc..88109321e1f6e2e6536dd76371a9c186ed2abd74 100644
--- a/editor/editor.php
+++ b/editor/editor.php
@@ -1,7 +1,7 @@
<div id="ks-editor">
<!--The id "ks-editor" indicates, that the javascript associated with this should automatically be executed-->
<h1>Interface</h1>
- <div id="box-select"><div id="2d-graph"></div></div>
+ <div id="box-select-layer"><div id="2d-graph"></div></div>
<section id="toolbar"></section>
<section id="tool-menu">
<div id="collect-menu" class="hidden">
diff --git a/editor/js/tools/collecttool.js b/editor/js/tools/collecttool.js
index 9fde474ff691107f4b45b5c0cc959d9593f17551..3ff246f445c790d4e70df0e681f76948f1d1d35c 100644
--- a/editor/js/tools/collecttool.js
+++ b/editor/js/tools/collecttool.js
@@ -3,6 +3,7 @@ import { graph, state, renderer } from "../editor";
import { CONTEXT } from "../state";
import { CollectMenu, COLLECTION_KEY } from "./menus/collectmenu";
import * as Graph from "../graph";
+import jquery from "jquery";
export default class CollectTool extends Tool {
constructor(key) {
@@ -10,119 +11,29 @@ export default class CollectTool extends Tool {
this.setupBoxSelect();
}
- setupBoxSelect() {
- document.addEventListener("load", () => {
- // Source: https://github.com/vasturiano/force-graph/issues/151#issuecomment-735850938
-
- // forceGraph element is the element provided to the Force Graph Library
- document
- .getElementById("ks-editor 2d-graph")
- .addEventListener("pointerdown", (e) => {
- if (e.shiftKey) {
- e.preventDefault();
- this.boxSelect = document.createElement("div");
- this.boxSelect.id = "boxSelect";
- 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.
- document
- .getElementById("ks-editor box-select")
- .appendChild(this.boxSelect);
- }
- });
-
- document
- .getElementById("ks-editor 2d-graph")
- .addEventListener("pointermove", (e) => {
- if (e.shiftKey && this.boxSelect) {
- 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";
- }
- } else if (this.boxSelect) {
- this.boxSelect.remove();
- }
- });
-
- document
- .getElementById("ks-editor 2d-graph")
- .addEventListener("pointerup", (e) => {
- if (e.shiftKey && this.boxSelect) {
- 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;
- }
- runBoxSelect(left, bottom, top, right);
- this.boxSelect.remove();
- } else if (this.boxSelect) {
- this.boxSelect.remove();
- }
- });
-
- const runBoxSelect = (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);
- };
+ 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);
}
onNodeClick(node) {
@@ -161,4 +72,103 @@ 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();
+ this.onBoxSelect(left, bottom, top, right);
+ }
}