Skip to content
Snippets Groups Projects
Commit 1a970d2a authored by Maximilian Giller's avatar Maximilian Giller :squid:
Browse files

Basic visual box select working

parent 017829bc
No related branches found
No related tags found
No related merge requests found
Pipeline #51844 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
editor/css/editor.css
+ 6
− 1
View file @ 1a970d2a
...@@ -63,11 +63,16 @@ div#ks-editor #toolbar-settings, div#ks-editor #toolbar-save { ...@@ -63,11 +63,16 @@ div#ks-editor #toolbar-settings, div#ks-editor #toolbar-save {
float: right; float: right;
} }
div#ks-editor #boxSelect { div#ks-editor #box-select-layer {
position: relative;
}
div#ks-editor #box-select {
position: absolute; position: absolute;
z-index: 300000; z-index: 300000;
border-style: dotted; border-style: dotted;
border-color: #3e74cc; border-color: #3e74cc;
border-width: 2px;
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
pointer-events: none; pointer-events: none;
} }
editor/editor.php
+ 1
− 1
View file @ 1a970d2a
<div id="ks-editor"> <div id="ks-editor">
<!--The id "ks-editor" indicates, that the javascript associated with this should automatically be executed--> <!--The id "ks-editor" indicates, that the javascript associated with this should automatically be executed-->
<h1>Interface</h1> <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="toolbar"></section>
<section id="tool-menu"> <section id="tool-menu">
<div id="collect-menu" class="hidden"> <div id="collect-menu" class="hidden">
......
editor/js/tools/collecttool.js
+ 122
− 112
View file @ 1a970d2a
...@@ -3,6 +3,7 @@ import { graph, state, renderer } from "../editor"; ...@@ -3,6 +3,7 @@ import { graph, state, renderer } from "../editor";
import { CONTEXT } from "../state"; import { CONTEXT } from "../state";
import { CollectMenu, COLLECTION_KEY } from "./menus/collectmenu"; import { CollectMenu, COLLECTION_KEY } from "./menus/collectmenu";
import * as Graph from "../graph"; import * as Graph from "../graph";
import jquery from "jquery";
export default class CollectTool extends Tool { export default class CollectTool extends Tool {
constructor(key) { constructor(key) {
...@@ -10,119 +11,29 @@ export default class CollectTool extends Tool { ...@@ -10,119 +11,29 @@ export default class CollectTool extends Tool {
this.setupBoxSelect(); this.setupBoxSelect();
} }
setupBoxSelect() { onBoxSelect(left, bottom, top, right) {
document.addEventListener("load", () => { const tl = renderer.screen2GraphCoords(left, top);
// Source: https://github.com/vasturiano/force-graph/issues/151#issuecomment-735850938 const br = renderer.screen2GraphCoords(right, bottom);
const hitNodes = [];
// forceGraph element is the element provided to the Force Graph Library graph.data[Graph.GRAPH_NODES].forEach((node) => {
document if (
.getElementById("ks-editor 2d-graph") tl.x < node.x &&
.addEventListener("pointerdown", (e) => { node.x < br.x &&
if (e.shiftKey) { br.y > node.y &&
e.preventDefault(); node.y > tl.y
this.boxSelect = document.createElement("div"); ) {
this.boxSelect.id = "boxSelect"; hitNodes.push(node);
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);
};
}); });
// 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) { onNodeClick(node) {
...@@ -161,4 +72,103 @@ export default class CollectTool extends Tool { ...@@ -161,4 +72,103 @@ export default class CollectTool extends Tool {
this.menu.value(COLLECTION_KEY, []); 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);
}
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment