diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index 8956bc0c..887124cb 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -80,10 +80,10 @@ const FlowRenderer = ({ }; const onContextMenu = (event: MouseEvent) => { - onPaneContextMenu?.(event); - if (panOnDrag === 'RightClick') { event.preventDefault(); + } else { + onPaneContextMenu?.(event); } }; const onWheel = onPaneScroll ? (event: WheelEvent) => onPaneScroll(event) : undefined; @@ -93,6 +93,7 @@ const FlowRenderer = ({ onMove={onMove} onMoveStart={onMoveStart} onMoveEnd={onMoveEnd} + onPaneContextMenu={onPaneContextMenu} elementsSelectable={elementsSelectable} zoomOnScroll={zoomOnScroll} zoomOnPinch={zoomOnPinch} diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index 76547725..5179f104 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -46,6 +46,7 @@ const ZoomPane = ({ onMove, onMoveStart, onMoveEnd, + onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, @@ -67,6 +68,7 @@ const ZoomPane = ({ const timerId = useRef>(); const store = useStoreApi(); const isZoomingOrPanning = useRef(false); + const hasMouseMoved = useRef(false); const zoomPane = useRef(null); const prevTransform = useRef({ x: 0, y: 0, zoom: 0 }); const { d3Zoom, d3Selection, d3ZoomHandler, userSelectionActive } = useStore(selector, shallow); @@ -171,10 +173,13 @@ const ZoomPane = ({ onViewportChange?.(flowTransform); onMove?.(event.sourceEvent as MouseEvent | TouchEvent, flowTransform); } + if (panOnDrag === 'RightClick' && onPaneContextMenu) { + hasMouseMoved.current = true; + } }); } } - }, [userSelectionActive, d3Zoom, onMove]); + }, [userSelectionActive, d3Zoom, onMove, panOnDrag, onPaneContextMenu]); useEffect(() => { if (d3Zoom) { @@ -224,9 +229,19 @@ const ZoomPane = ({ panOnScroll ? 150 : 0 ); } + + if ( + panOnDrag === 'RightClick' && + onPaneContextMenu && + !hasMouseMoved.current && + event.sourceEvent?.button === 2 + ) { + onPaneContextMenu(event.sourceEvent); + } + hasMouseMoved.current = false; }); } - }, [d3Zoom, onMoveEnd, panOnScroll]); + }, [d3Zoom, onMoveEnd, panOnScroll, panOnDrag, onPaneContextMenu]); useEffect(() => { if (d3Zoom) {