jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: single-click opens editor on rFunds flow nodes 

Previously only double-click opened the editor/modal. Now single click
(without dragging) opens the side editor panel. Double-click still
opens rich modals for outcome/source nodes. Added drag threshold (5px)
so clicks don't accidentally start dragging.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-02 21:10:31 -08:00
parent b6ddd4a833
commit 20ef1e9ec4
1 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
modules/rfunds/components/folk-funds-app.ts
View File

@ -699,6 +699,9 @@ class FolkFundsApp extends HTMLElement {
}); });
// Global pointer move/up (for both panning and node drag) // Global pointer move/up (for both panning and node drag)
let nodeDragStarted = false;
const DRAG_THRESHOLD = 5;
this._boundPointerMove = (e: PointerEvent) => { this._boundPointerMove = (e: PointerEvent) => {
if (this.wiringActive && this.wiringDragging) { if (this.wiringActive && this.wiringDragging) {
this.wiringPointerX = e.clientX; this.wiringPointerX = e.clientX;
@ -713,8 +716,16 @@ class FolkFundsApp extends HTMLElement {
return; return;
} }
if (this.draggingNodeId) { if (this.draggingNodeId) {
const dx = (e.clientX - this.dragStartX) / this.canvasZoom; const rawDx = e.clientX - this.dragStartX;
const dy = (e.clientY - this.dragStartY) / this.canvasZoom; const rawDy = e.clientY - this.dragStartY;
// Only start visual drag after exceeding threshold
if (!nodeDragStarted) {
if (Math.abs(rawDx) < DRAG_THRESHOLD && Math.abs(rawDy) < DRAG_THRESHOLD) return;
nodeDragStarted = true;
svg.classList.add("dragging");
}
const dx = rawDx / this.canvasZoom;
const dy = rawDy / this.canvasZoom;
const node = this.nodes.find((n) => n.id === this.draggingNodeId); const node = this.nodes.find((n) => n.id === this.draggingNodeId);
if (node) { if (node) {
node.position.x = this.dragNodeStartX + dx; node.position.x = this.dragNodeStartX + dx;
@ -744,8 +755,16 @@ class FolkFundsApp extends HTMLElement {
svg.classList.remove("panning"); svg.classList.remove("panning");
} }
if (this.draggingNodeId) { if (this.draggingNodeId) {
const clickedNodeId = this.draggingNodeId;
const wasDragged = nodeDragStarted;
this.draggingNodeId = null; this.draggingNodeId = null;
nodeDragStarted = false;
svg.classList.remove("dragging"); svg.classList.remove("dragging");
// If it was a click (no drag), open the editor
if (!wasDragged) {
this.openEditor(clickedNodeId);
}
} }
}; };
svg.addEventListener("pointermove", this._boundPointerMove); svg.addEventListener("pointermove", this._boundPointerMove);
@ -803,13 +822,13 @@ class FolkFundsApp extends HTMLElement {
this.selectedNodeId = nodeId; this.selectedNodeId = nodeId;
this.updateSelectionHighlight(); this.updateSelectionHighlight();
// Start drag // Prepare drag (but don't start until threshold exceeded)
nodeDragStarted = false;
this.draggingNodeId = nodeId; this.draggingNodeId = nodeId;
this.dragStartX = e.clientX; this.dragStartX = e.clientX;
this.dragStartY = e.clientY; this.dragStartY = e.clientY;
this.dragNodeStartX = node.position.x; this.dragNodeStartX = node.position.x;
this.dragNodeStartY = node.position.y; this.dragNodeStartY = node.position.y;
svg.classList.add("dragging");
svg.setPointerCapture(e.pointerId); svg.setPointerCapture(e.pointerId);
}); });