feat(props): add defaultPosition prop #358

src/container/GraphView/index.tsx

@@ -55,6 +55,7 @@ export interface GraphViewProps {
   minZoom: number;
   maxZoom: number;
   defaultZoom: number;
+  defaultPosition: [number, number];
   arrowHeadColor: string;
   markerEndId?: string;
   zoomOnScroll: boolean;
@@ -93,6 +94,7 @@ const GraphView = memo(
     minZoom,
     maxZoom,
     defaultZoom,
+    defaultPosition,
     arrowHeadColor,
     markerEndId,
     zoomOnScroll,
@@ -111,7 +113,7 @@ const GraphView = memo(
     const setNodesDraggable = useStoreActions((actions) => actions.setNodesDraggable);
     const setNodesConnectable = useStoreActions((actions) => actions.setNodesConnectable);
     const setElementsSelectable = useStoreActions((actions) => actions.setElementsSelectable);
-    const updateTransform = useStoreActions((actions) => actions.updateTransform);
+    const setInitTransform = useStoreActions((actions) => actions.setInitTransform);
     const setMinMaxZoom = useStoreActions((actions) => actions.setMinMaxZoom);
     const fitView = useStoreActions((actions) => actions.fitView);
     const zoom = useStoreActions((actions) => actions.zoom);
@@ -144,10 +146,6 @@ const GraphView = memo(
         setOnConnect(onConnect);
       }
 
-      if (defaultZoom !== 1) {
-        updateTransform({ x: 0, y: 0, k: defaultZoom });
-      }
-
       if (rendererNode.current) {
         resizeObserver = new ResizeObserver((entries) => {
           for (let _ of entries) {
@@ -187,6 +185,18 @@ const GraphView = memo(
           getElements,
         });
       }
+
+      if (d3Initialised) {
+        const initialTransform = {
+          x: defaultPosition[0],
+          y: defaultPosition[1],
+          k: defaultZoom,
+        };
+
+        if (initialTransform.x !== 0 || initialTransform.y !== 0 || initialTransform.k !== 1) {
+          setInitTransform(initialTransform);
+        }
+      }
     }, [d3Initialised, onLoad]);
 
     useEffect(() => {

src/container/ReactFlow/index.tsx

@@ -63,6 +63,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   minZoom: number;
   maxZoom: number;
   defaultZoom: number;
+  defaultPosition: [number, number];
   arrowHeadColor: string;
   markerEndId?: string;
   zoomOnScroll: boolean;
@@ -104,6 +105,7 @@ const ReactFlow = ({
   minZoom,
   maxZoom,
   defaultZoom,
+  defaultPosition,
   arrowHeadColor,
   markerEndId,
   zoomOnScroll,
@@ -147,6 +149,7 @@ const ReactFlow = ({
           minZoom={minZoom}
           maxZoom={maxZoom}
           defaultZoom={defaultZoom}
+          defaultPosition={defaultPosition}
           arrowHeadColor={arrowHeadColor}
           markerEndId={markerEndId}
           zoomOnScroll={zoomOnScroll}
@@ -186,6 +189,7 @@ ReactFlow.defaultProps = {
   minZoom: 0.5,
   maxZoom: 2,
   defaultZoom: 1,
+  defaultPosition: [0, 0],
   arrowHeadColor: '#bbb',
   zoomOnScroll: true,
   zoomOnDoubleClick: true,

src/store/index.ts

@@ -105,6 +105,8 @@ export interface StoreModel {
 
   updateTransform: Action<StoreModel, TransformXYK>;
 
+  setInitTransform: Action<StoreModel, TransformXYK>;
+
   updateSize: Action<StoreModel, Dimensions>;
 
   initD3: Action<StoreModel, Element>;
@@ -342,6 +344,18 @@ export const storeModel: StoreModel = {
     state.transform[2] = transform.k;
   }),
 
+  setInitTransform: action((state, transform) => {
+    state.transform[0] = transform.x;
+    state.transform[1] = transform.y;
+    state.transform[2] = transform.k;
+
+    if (state.d3Selection) {
+      const updatedTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.k);
+      // we need to sync the d3 zoom transform with the updated transform
+      state.d3Selection.property('__zoom', updatedTransform);
+    }
+  }),
+
   updateSize: action((state, size) => {
     state.width = size.width;
     state.height = size.height;