diff --git a/packages/vue-flow/src/container/Viewport/Viewport.vue b/packages/vue-flow/src/container/Viewport/Viewport.vue index 8f3a51aa..a0b88b2f 100644 --- a/packages/vue-flow/src/container/Viewport/Viewport.vue +++ b/packages/vue-flow/src/container/Viewport/Viewport.vue @@ -35,6 +35,8 @@ const { const viewportEl = templateRef('viewport', null) +let isZoomingOrPanning = $ref(false) + const viewChanged = (prevTransform: ViewpaneTransform, eventTransform: ZoomTransform): boolean => (prevTransform.x !== eventTransform.x && !isNaN(eventTransform.x)) || (prevTransform.y !== eventTransform.y && !isNaN(eventTransform.y)) || @@ -94,9 +96,9 @@ onMounted(() => { }) const selectionKeyPressed = useKeyPress($$(selectionKeyCode), (keyPress) => { - if (keyPress) { + if (keyPress && !isZoomingOrPanning) { d3Zoom.on('zoom', null) - } else { + } else if (!keyPress) { d3Zoom.on('zoom', (event: D3ZoomEvent) => { setState({ viewport: { x: event.transform.x, y: event.transform.y, zoom: event.transform.k } }) const flowTransform = eventToFlowTransform(event.transform) @@ -108,12 +110,16 @@ onMounted(() => { const zoomKeyPressed = useKeyPress($$(zoomActivationKeyCode)) d3Zoom.on('start', (event: D3ZoomEvent) => { + isZoomingOrPanning = true + const flowTransform = eventToFlowTransform(event.transform) transform = flowTransform emits.moveStart({ event, flowTransform }) }) d3Zoom.on('end', (event: D3ZoomEvent) => { + isZoomingOrPanning = false + if (viewChanged(transform, event.transform)) { const flowTransform = eventToFlowTransform(event.transform) transform = flowTransform