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

View File

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