refactor(controls): dont import store but use actions

src/hooks/useD3Zoom.ts

@@ -1,5 +1,5 @@
 import { useEffect, MutableRefObject } from 'react';
-import { zoom, zoomIdentity } from 'd3-zoom';
+import { zoom } from 'd3-zoom';
 import { select, event } from 'd3-selection';
 
 import { useStoreState, useStoreActions } from '../store/hooks';
@@ -11,8 +11,6 @@ interface UseD3ZoomParams {
 }
 
 export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): void => {
-  const transform = useStoreState((s) => s.transform);
-  const d3Selection = useStoreState((s) => s.d3Selection);
   const d3Zoom = useStoreState((s) => s.d3Zoom);
 
   const initD3 = useStoreActions((actions) => actions.initD3);
@@ -35,7 +33,7 @@ export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): voi
       d3Zoom.on('zoom', null);
     } else {
       d3Zoom.on('zoom', () => {
-        if (event.sourceEvent && event.sourceEvent.target !== zoomPane.current) {
+        if (!event.sourceEvent || (event.sourceEvent && event.sourceEvent.target !== zoomPane.current)) {
           return;
         }
 
@@ -45,12 +43,6 @@ export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): voi
           onMove();
         }
       });
-
-      if (d3Selection && d3Zoom) {
-        // we need to restore the graph transform otherwise d3 zoom transform and graph transform are not synced
-        const graphTransform = zoomIdentity.translate(transform[0], transform[1]).scale(transform[2]);
-        d3Selection.call(d3Zoom.transform, graphTransform);
-      }
     }
 
     return () => {