refactor(initD3): pass initial transform

src/container/GraphView/index.tsx

@@ -132,7 +132,7 @@ const GraphView = ({
   onPaneContextMenu,
 }: GraphViewProps) => {
   const isInitialised = useRef<boolean>(false);
-  const d3Initialised = useStoreState((state) => state.d3Initialised);
+  const d3Zoom = useStoreState((state) => state.d3Zoom);
   const setOnConnect = useStoreActions((actions) => actions.setOnConnect);
   const setOnConnectStart = useStoreActions((actions) => actions.setOnConnectStart);
   const setOnConnectStop = useStoreActions((actions) => actions.setOnConnectStop);
@@ -152,7 +152,7 @@ const GraphView = ({
   useElementUpdater(elements);
 
   useEffect(() => {
-    if (!isInitialised.current && d3Initialised) {
+    if (!isInitialised.current && d3Zoom) {
       if (onLoad) {
         onLoad({
           fitView: (params = { padding: 0.1 }) => fitView(params),
@@ -169,7 +169,7 @@ const GraphView = ({
 
       isInitialised.current = true;
     }
-  }, [d3Initialised, onLoad]);
+  }, [d3Zoom, onLoad]);
 
   useEffect(() => {
     if (onConnect) {

src/container/ZoomPane/index.tsx

@@ -67,7 +67,6 @@ const ZoomPane = ({
 
   useEffect(() => {
     if (zoomPane.current) {
-      // initD3: action((state, { zoomPane, defaultPosition, defaultZoom, translateExtent }) => {
       const state = store.getState();
       const currentTranslateExtent = typeof translateExtent !== 'undefined' ? translateExtent : state.translateExtent;
       const d3ZoomInstance = zoom().scaleExtent([state.minZoom, state.maxZoom]).translateExtent(currentTranslateExtent);
@@ -76,18 +75,16 @@ const ZoomPane = ({
       const clampedX = clamp(defaultPosition[0], currentTranslateExtent[0][0], currentTranslateExtent[1][0]);
       const clampedY = clamp(defaultPosition[1], currentTranslateExtent[0][1], currentTranslateExtent[1][1]);
       const clampedZoom = clamp(defaultZoom, state.minZoom, state.maxZoom);
-
       const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom);
-      // selection.property('__zoom', updatedTransform);
-
-      const zoomHandler = selection.on('wheel.zoom');
 
       d3ZoomInstance.transform(selection, updatedTransform);
 
       initD3Zoom({
         d3Zoom: d3ZoomInstance,
         d3Selection: selection,
-        d3ZoomHandler: zoomHandler,
+        d3ZoomHandler: selection.on('wheel.zoom'),
+        // we need to pass transform because zoom handler is not registered when we set the initial transform
+        transform: [clampedX, clampedY, clampedZoom],
       });
     }
   }, []);