update: Pass selection key code to zoom pane

* Use keypress handler in zoom pane instead of passing value as prop

src/container/FlowRenderer/index.tsx

@@ -126,7 +126,6 @@ export default defineComponent({
 
     return () => (
       <ZoomPane
-        selectionKeyPressed={keyPressed.value}
         elementsSelectable={props.elementsSelectable}
         zoomOnScroll={props.zoomOnScroll}
         zoomOnPinch={props.zoomOnPinch}
@@ -139,6 +138,7 @@ export default defineComponent({
         defaultZoom={props.defaultZoom}
         translateExtent={props.translateExtent}
         zoomActivationKeyCode={props.zoomActivationKeyCode}
+        selectionKeyCode={props.selectionKeyCode}
       >
         {slots.default ? slots.default() : ''}
         {keyPressed.value ? <UserSelection /> : ''}

src/container/ZoomPane/index.tsx

@@ -2,7 +2,7 @@ import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom';
 import { select, pointer } from 'd3-selection';
 import { clamp } from '../../utils';
 import { FlowTransform, TranslateExtent, PanOnScrollMode, KeyCode, RevueFlowStore } from '../../types';
-import { computed, defineComponent, inject, PropType, ref } from 'vue';
+import { computed, defineComponent, inject, onUpdated, PropType, ref } from 'vue';
 import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
 import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
@@ -23,6 +23,7 @@ interface ZoomPaneProps {
   defaultZoom?: number;
   translateExtent?: TranslateExtent;
   zoomActivationKeyCode?: KeyCode;
+  selectionKeyCode?: KeyCode;
 }
 
 export default defineComponent({
@@ -99,7 +100,6 @@ export default defineComponent({
     const hooks = inject<RevueFlowHooks>('hooks')!;
     const zoomPane = templateRef<HTMLDivElement>('zoom-pane', null);
     const prevTransform = ref<FlowTransform>({ x: 0, y: 0, zoom: 0 });
-    const zoomActivationKeyPressed = useKeyPress(props.zoomActivationKeyCode);
 
     const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
       prevTransform.x !== eventTransform.x || prevTransform.y !== eventTransform.y || prevTransform.zoom !== eventTransform.k;
@@ -110,6 +110,7 @@ export default defineComponent({
       zoom: eventTransform.k
     });
 
+    const init = () => {
       const { onReady } = useResizeHandler(zoomPane, store.updateSize);
       onReady(() => {
         if (props.defaultPosition && props.defaultZoom) {
@@ -137,6 +138,38 @@ export default defineComponent({
         }
       });
 
+      const applyZoomHandlers = (d3Zoom: ZoomBehavior<Element, unknown>) => {
+        d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+          if (viewChanged(prevTransform.value, event.transform)) {
+            const flowTransform = eventToFlowTransform(event.transform);
+            prevTransform.value = flowTransform;
+
+            hooks.moveStart.trigger(flowTransform);
+          }
+        });
+
+        d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+          if (viewChanged(prevTransform.value, event.transform)) {
+            const flowTransform = eventToFlowTransform(event.transform);
+            prevTransform.value = flowTransform;
+
+            hooks.moveEnd.trigger(flowTransform);
+          }
+        });
+
+        d3Zoom.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+          store.transform = [event.transform.x, event.transform.y, event.transform.k];
+          hooks.move.trigger(eventToFlowTransform(event.transform));
+        });
+
+        const selectionKeyPressed = computed(() => props.selectionKeyPressed);
+        whenever(selectionKeyPressed, () => {
+          if (selectionKeyPressed.value) {
+            d3Zoom.on('zoom', null);
+          }
+        });
+
+        const zoomActivationKeyPressed = useKeyPress(props.zoomActivationKeyCode);
         whenever(zoomActivationKeyPressed, () => {
           if (props.panOnScroll) {
             store.d3Selection
@@ -174,37 +207,6 @@ export default defineComponent({
             store.d3Selection?.on('wheel', null).on('wheel.zoom', store.d3ZoomHandler);
           }
         });
-
-    const applyZoomHandlers = (d3Zoom: ZoomBehavior<Element, unknown>) => {
-      d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-        if (viewChanged(prevTransform.value, event.transform)) {
-          const flowTransform = eventToFlowTransform(event.transform);
-          prevTransform.value = flowTransform;
-
-          hooks.moveStart.trigger(flowTransform);
-        }
-      });
-
-      d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-        if (viewChanged(prevTransform.value, event.transform)) {
-          const flowTransform = eventToFlowTransform(event.transform);
-          prevTransform.value = flowTransform;
-
-          hooks.moveEnd.trigger(flowTransform);
-        }
-      });
-
-      d3Zoom.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-        store.transform = [event.transform.x, event.transform.y, event.transform.k];
-        hooks.move.trigger(eventToFlowTransform(event.transform));
-      });
-
-      const selectionKeyPressed = computed(() => props.selectionKeyPressed);
-      whenever(selectionKeyPressed, () => {
-        if (selectionKeyPressed.value) {
-          d3Zoom.on('zoom', null);
-        }
-      });
       };
 
       const applyZoomFilter = (d3Zoom: ZoomBehavior<Element, unknown>) => {
@@ -262,6 +264,10 @@ export default defineComponent({
           return (!event.ctrlKey || event.type === 'wheel') && !event.button;
         });
       };
+    };
+
+    init();
+    onUpdated(() => init());
 
     return () => (
       <div ref="zoom-pane" class="revue-flow__renderer revue-flow__zoompane">