fix: restore node click/dblclick by limiting pointer capture to empty space
setPointerCapture on the SVG redirected click/dblclick events away from node <g> elements, breaking drill-down (double-click) and potentially click selection. Now only capture the pointer when clicking on empty SVG space, preserving normal event flow on nodes while keeping drag-to-pan. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -64,7 +64,11 @@ export function useZoomPan() {
|
|||||||
isPanning.current = true;
|
isPanning.current = true;
|
||||||
didPan.current = false;
|
didPan.current = false;
|
||||||
panStart.current = { x: e.clientX - state.translateX, y: e.clientY - state.translateY };
|
panStart.current = { x: e.clientX - state.translateX, y: e.clientY - state.translateY };
|
||||||
(e.currentTarget as SVGSVGElement).setPointerCapture(e.pointerId);
|
// Only capture pointer on empty space — capturing on nodes would
|
||||||
|
// redirect click/dblclick to the SVG, breaking node interactions
|
||||||
|
if (!(e.target as Element).closest('[data-node-id]')) {
|
||||||
|
(e.currentTarget as SVGSVGElement).setPointerCapture(e.pointerId);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
[state.translateX, state.translateY],
|
[state.translateX, state.translateY],
|
||||||
);
|
);
|
||||||
@@ -85,7 +89,10 @@ export function useZoomPan() {
|
|||||||
const onPointerUp = useCallback(
|
const onPointerUp = useCallback(
|
||||||
(e: React.PointerEvent<SVGSVGElement>) => {
|
(e: React.PointerEvent<SVGSVGElement>) => {
|
||||||
isPanning.current = false;
|
isPanning.current = false;
|
||||||
(e.currentTarget as SVGSVGElement).releasePointerCapture(e.pointerId);
|
const svg = e.currentTarget as SVGSVGElement;
|
||||||
|
if (svg.hasPointerCapture(e.pointerId)) {
|
||||||
|
svg.releasePointerCapture(e.pointerId);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
[],
|
[],
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user