Browse Source

fix: resolve node click-to-select failures caused by d3-drag dead zone

Add nodeClickDistance={5} to match nodeDragThreshold, eliminating the
0-5px dead zone where d3-drag suppressed clicks but drags hadn't started.
Stop header pointerdown propagation to prevent pane deselection race.
Fix header drag threshold to use screen pixels for zoom-independent behavior.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
handoff-20260429-1057
shrimbly 4 months ago
parent
commit
cb47f60deb
  1. 1
      src/components/WorkflowCanvas.tsx
  2. 11
      src/components/nodes/FloatingNodeHeader.tsx

1
src/components/WorkflowCanvas.tsx

@ -1973,6 +1973,7 @@ export function WorkflowCanvas() {
}
selectNodesOnDrag={false}
nodeDragThreshold={5}
nodeClickDistance={5}
zoomOnScroll={false}
zoomOnPinch={!isModalOpen}
minZoom={0.1}

11
src/components/nodes/FloatingNodeHeader.tsx

@ -216,6 +216,7 @@ export function FloatingNodeHeader({
if (e.button !== 0) return;
e.preventDefault();
e.stopPropagation();
const startX = e.clientX;
const startY = e.clientY;
@ -243,15 +244,17 @@ export function FloatingNodeHeader({
isDraggingRef.current = false;
const handlePointerMove = (e: PointerEvent) => {
const { zoom } = getViewport();
const dx = (e.clientX - startX) / zoom;
const dy = (e.clientY - startY) / zoom;
const screenDx = e.clientX - startX;
const screenDy = e.clientY - startY;
if (Math.abs(dx) > 2 || Math.abs(dy) > 2) {
if (!isDraggingRef.current && (Math.abs(screenDx) > 5 || Math.abs(screenDy) > 5)) {
isDraggingRef.current = true;
}
if (isDraggingRef.current) {
const { zoom } = getViewport();
const dx = screenDx / zoom;
const dy = screenDy / zoom;
setNodes(nodes => nodes.map(n => {
const startPos = startPositions.get(n.id);
if (!startPos) return n;

Loading…
Cancel
Save