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],
       });
     }
   }, []);

src/store/index.ts

@@ -44,6 +44,7 @@ type InitD3Zoom = {
   d3Zoom: ZoomBehavior<Element, unknown>;
   d3Selection: D3Selection<Element, unknown, null, undefined>;
   d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined;
+  transform: Transform;
 };
 export interface StoreModel {
   width: number;
@@ -59,7 +60,6 @@ export interface StoreModel {
   d3Zoom: ZoomBehavior<Element, unknown> | null;
   d3Selection: D3Selection<Element, unknown, null, undefined> | null;
   d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined;
-  d3Initialised: boolean;
   minZoom: number;
   maxZoom: number;
   translateExtent: TranslateExtent;
@@ -155,7 +155,6 @@ export const storeModel: StoreModel = {
 
   d3Zoom: null,
   d3Selection: null,
-  d3Initialised: false,
   d3ZoomHandler: undefined,
   minZoom: 0.5,
   maxZoom: 2,
@@ -388,11 +387,14 @@ export const storeModel: StoreModel = {
     state.height = size.height || 500;
   }),
 
-  initD3Zoom: action((state, { d3Zoom, d3Selection, d3ZoomHandler }) => {
+  initD3Zoom: action((state, { d3Zoom, d3Selection, d3ZoomHandler, transform }) => {
     state.d3Zoom = d3Zoom;
     state.d3Selection = d3Selection;
     state.d3ZoomHandler = d3ZoomHandler;
-    state.d3Initialised = true;
+
+    state.transform[0] = transform[0];
+    state.transform[1] = transform[1];
+    state.transform[2] = transform[2];
   }),
 
   setMinZoom: action((state, minZoom) => {