fix zoom behaviour while selection key is pressed

src/container/ZoomPane/index.tsx

@@ -55,7 +55,6 @@ const ZoomPane = ({
 
   const initD3 = useStoreActions((actions) => actions.initD3);
   const updateTransform = useStoreActions((actions) => actions.updateTransform);
-  const updateTransformDelta = useStoreActions((actions) => actions.updateTransformDelta);
 
   useResizeHandler(zoomPane);
 
@@ -83,16 +82,20 @@ const ZoomPane = ({
 
   useEffect(() => {
     if (d3Zoom) {
-      d3Zoom.on('zoom', (event: any) => {
-        updateTransform(event.transform);
+      if (selectionKeyPressed) {
+        d3Zoom.on('zoom', null);
+      } else {
+        d3Zoom.on('zoom', (event: any) => {
+          updateTransform(event.transform);
 
-        if (onMove) {
-          const flowTransform = eventToFlowTransform(event.transform);
-          onMove(flowTransform);
-        }
-      });
+          if (onMove) {
+            const flowTransform = eventToFlowTransform(event.transform);
+            onMove(flowTransform);
+          }
+        });
+      }
     }
-  }, [selectionKeyPressed, panOnScroll, d3Zoom, updateTransform, updateTransformDelta, onMove]);
+  }, [selectionKeyPressed, d3Zoom, updateTransform, onMove]);
 
   useEffect(() => {
     if (d3Zoom) {
@@ -137,7 +140,7 @@ const ZoomPane = ({
         }
 
         // during a selection we prevent all other interactions
-        if (elementsSelectable && selectionKeyPressed) {
+        if (selectionKeyPressed) {
           return false;
         }
 

src/store/index.ts

@@ -37,12 +37,6 @@ type TransformXYK = {
   k: number;
 };
 
-type TransformDeltas = {
-  x?: number;
-  y?: number;
-  k?: number;
-};
-
 type NodeDimensionUpdate = {
   id: ElementId;
   nodeElement: HTMLDivElement;
@@ -116,7 +110,6 @@ export interface StoreModel {
   setSelectedElements: Action<StoreModel, Elements | Node | Edge>;
 
   updateTransform: Action<StoreModel, TransformXYK>;
-  updateTransformDelta: Action<StoreModel, TransformDeltas>;
 
   setInitTransform: Action<StoreModel, TransformXYK>;
 
@@ -360,20 +353,6 @@ export const storeModel: StoreModel = {
     state.transform[2] = transform.k;
   }),
 
-  updateTransformDelta: action((state, deltas) => {
-    const { x = 0, y = 0, k = 0 } = deltas;
-
-    state.transform[0] += x;
-    state.transform[1] += y;
-    state.transform[2] += k;
-
-    if (state.d3Selection) {
-      const updatedTransform = zoomIdentity.translate(state.transform[0], state.transform[1]).scale(state.transform[2]);
-      // we need to sync the d3 zoom transform with the updated transform
-      state.d3Selection.property('__zoom', updatedTransform);
-    }
-  }),
-
   setInitTransform: action((state, transform) => {
     state.transform[0] = transform.x;
     state.transform[1] = transform.y;