max/nodarium
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 6 Wiki Activity

feat: debounce box selection for performance

Browse Source
This commit is contained in:
max_richter
2026-05-07 21:10:52 +02:00
parent 7d788f7e19
commit 5fa9d36b34
1 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/lib/graph-interface/graph/mouse.events.ts
+26 -18
View File
@@ -9,6 +9,7 @@ import { EdgeInteractionManager } from './edge.events';
export class MouseEventManager { export class MouseEventManager {
edgeInteractionManager: EdgeInteractionManager; edgeInteractionManager: EdgeInteractionManager;
private pendingSelectionFrame = false;
constructor( constructor(
private graph: GraphManager, private graph: GraphManager,
@@ -282,24 +283,31 @@ export class MouseEventManager {
if (this.state.boxSelection) { if (this.state.boxSelection) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
const mouseD = this.state.projectScreenToWorld( if (!this.pendingSelectionFrame) {
this.state.mouseDown[0], this.pendingSelectionFrame = true;
this.state.mouseDown[1] requestAnimationFrame(() => {
); this.pendingSelectionFrame = false;
const x1 = Math.min(mouseD[0], this.state.mousePosition[0]); if (!this.state.mouseDown) return;
const x2 = Math.max(mouseD[0], this.state.mousePosition[0]); const mouseD = this.state.projectScreenToWorld(
const y1 = Math.min(mouseD[1], this.state.mousePosition[1]); this.state.mouseDown[0],
const y2 = Math.max(mouseD[1], this.state.mousePosition[1]); this.state.mouseDown[1]
for (const node of this.graph.nodes.values()) { );
if (!node?.state) continue; const x1 = Math.min(mouseD[0], this.state.mousePosition[0]);
const x = node.position[0]; const x2 = Math.max(mouseD[0], this.state.mousePosition[0]);
const y = node.position[1]; const y1 = Math.min(mouseD[1], this.state.mousePosition[1]);
const height = getNodeHeight(node.state.type!); const y2 = Math.max(mouseD[1], this.state.mousePosition[1]);
if (x > x1 - 20 && x < x2 && y > y1 - height && y < y2) { for (const node of this.graph.nodes.values()) {
this.state.selectedNodes?.add(node.id); if (!node?.state) continue;
} else { const x = node.position[0];
this.state.selectedNodes?.delete(node.id); const y = node.position[1];
} const height = getNodeHeight(node.state.type!);
if (x > x1 - 20 && x < x2 && y > y1 - height && y < y2) {
this.state.selectedNodes?.add(node.id);
} else {
this.state.selectedNodes?.delete(node.id);
}
}
});
} }
return; return;
} }