feat(props): add defaultPosition prop #358

README.md

@@ -73,6 +73,7 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `minZoom`: default: `0.5`
 - `maxZoom`: default: `2`
 - `defaultZoom`: default: `1`
+- `defaultPosition`: default: `[0, 0]`
 - `snapToGrid`: default: `false`
 - `snapGrid`: [x, y] array - default: `[16, 16]`
 - `onlyRenderVisibleNodes`: default: `true`
@@ -88,7 +89,9 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `onNodeContextMenu(evt: MouseEvent, node: Node)`: node context menu
 - `onConnect({ source, target })`: called when user connects two nodes
 - `onLoad(reactFlowInstance)`: called after flow is initialized
-- `onMove()`: called when user pans or zooms
+- `onMove()`: called when user is panning or zooming
+- `onMoveStart()`: called when user starts panning or zooming
+- `onMoveEnd()`: called when user ends panning or zooming
 - `onSelectionChange(elements: Elements)`: called when user selects one or multiple elements
 
 #### Interaction

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;