update: Remove effect watcher from zoom pane

* Add zoom after initialization instead of applying it after every effect watcher call

src/container/ZoomPane/index.tsx

@@ -2,11 +2,12 @@ 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 { defineComponent, inject, PropType, ref, watchEffect } from 'vue';
+import { computed, defineComponent, inject, PropType, ref } from 'vue';
 import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
 import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
 import { templateRef, whenever } from '@vueuse/core';
+import { ZoomBehavior } from 'd3';
 
 interface ZoomPaneProps {
   selectionKeyPressed: boolean;
@@ -131,6 +132,8 @@ export default defineComponent({
           // we need to pass transform because zoom handler is not registered when we set the initial transform
           transform: [clampedX, clampedY, clampedZoom]
         });
+        applyZoomHandlers(d3ZoomInstance);
+        applyZoomFilter(d3ZoomInstance);
       }
     });
 
@@ -172,22 +175,8 @@ export default defineComponent({
       }
     });
 
-    watchEffect(() => {
-      if (store.d3Zoom) {
-        if (props.selectionKeyPressed) {
-          store.d3Zoom.on('zoom', null);
-        } else {
-          store.d3Zoom.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-            store.transform = [event.transform.x, event.transform.y, event.transform.k];
-            hooks.move.trigger(eventToFlowTransform(event.transform));
-          });
-        }
-      }
-    });
-
-    watchEffect(() => {
-      if (store.d3Zoom) {
-        store.d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+    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;
@@ -195,12 +184,8 @@ export default defineComponent({
           hooks.moveStart.trigger(flowTransform);
         }
       });
-      }
-    });
 
-    watchEffect(() => {
-      if (store.d3Zoom) {
-        store.d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+      d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
         if (viewChanged(prevTransform.value, event.transform)) {
           const flowTransform = eventToFlowTransform(event.transform);
           prevTransform.value = flowTransform;
@@ -208,12 +193,22 @@ export default defineComponent({
           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));
       });
 
-    watchEffect(() => {
-      if (store.d3Zoom) {
-        store.d3Zoom.filter((event: MouseEvent) => {
+      const selectionKeyPressed = computed(() => props.selectionKeyPressed);
+      whenever(selectionKeyPressed, () => {
+        if (selectionKeyPressed.value) {
+          d3Zoom.on('zoom', null);
+        }
+      });
+    };
+
+    const applyZoomFilter = (d3Zoom: ZoomBehavior<Element, unknown>) => {
+      d3Zoom.filter((event: MouseEvent) => {
         const zoomScroll = props.zoomOnScroll;
         const pinchZoom = props.zoomOnPinch && event.ctrlKey;
 
@@ -266,11 +261,10 @@ export default defineComponent({
         // default filter for d3-zoom
         return (!event.ctrlKey || event.type === 'wheel') && !event.button;
       });
-      }
-    });
+    };
 
     return () => (
-      <div class="revue-flow__renderer revue-flow__zoompane" ref="zoom-pane">
+      <div ref="zoom-pane" class="revue-flow__renderer revue-flow__zoompane">
         {slots.default ? slots.default() : ''}
       </div>
     );