refactor(props): merge defaultPosition and defaultZoom to defaultViewport #2313

examples/nextjs/pages/Edges/index.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import React, { MouseEvent, useCallback } from 'react';
 import ReactFlow, {
   addEdge,
   Connection,
@@ -18,8 +18,6 @@ import MiniMap from '@react-flow/minimap';
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';
 
-const onInit = (reactFlowInstance: ReactFlowInstance) =>
-  reactFlowInstance.fitView();
 const onNodeDragStop = (_: MouseEvent, node: Node) =>
   console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
@@ -183,11 +181,19 @@ const edgeTypes: EdgeTypes = {
   custom2: CustomEdge2,
 };
 
+const defaultViewport = {
+  x: 200,
+  y: 200,
+  zoom: 0.8,
+};
+
 const EdgesFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Connection | Edge) =>
+  const onConnect = useCallback(
-    setEdges((eds) => addEdge(params, eds));
+    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
+    []
+  );
 
   return (
     <ReactFlow
@@ -198,7 +204,6 @@ const EdgesFlow = () => {
       onNodeClick={onNodeClick}
       onConnect={onConnect}
       onNodeDragStop={onNodeDragStop}
-      onInit={onInit}
       snapToGrid={true}
       edgeTypes={edgeTypes}
       onEdgeClick={onEdgeClick}
@@ -206,6 +211,7 @@ const EdgesFlow = () => {
       onEdgeMouseEnter={onEdgeMouseEnter}
       onEdgeMouseMove={onEdgeMouseMove}
       onEdgeMouseLeave={onEdgeMouseLeave}
+      defaultViewport={defaultViewport}
     >
       <MiniMap />
       <Controls />

packages/core/src/container/FlowRenderer/index.tsx

@@ -51,8 +51,7 @@ const FlowRenderer = ({
   panOnScrollMode,
   zoomOnDoubleClick,
   panOnDrag,
-  defaultPosition,
+  defaultViewport,
-  defaultZoom,
   preventScrolling,
   onSelectionContextMenu,
   noWheelClassName,
@@ -87,8 +86,7 @@ const FlowRenderer = ({
       panOnScrollMode={panOnScrollMode}
       zoomOnDoubleClick={zoomOnDoubleClick}
       panOnDrag={panOnDrag}
-      defaultPosition={defaultPosition}
+      defaultViewport={defaultViewport}
-      defaultZoom={defaultZoom}
       zoomActivationKeyCode={zoomActivationKeyCode}
       preventScrolling={preventScrolling}
       noWheelClassName={noWheelClassName}

packages/core/src/container/GraphView/index.tsx

@@ -3,9 +3,9 @@ import React, { memo } from 'react';
 import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
-import Viewport from '../Viewport';
+import ViewportWrapper from '../Viewport';
 import useOnInitHandler from '../../hooks/useOnInitHandler';
-import { NodeTypesWrapped, EdgeTypesWrapped, ConnectionLineType, KeyCode, ReactFlowProps } from '../../types';
+import { NodeTypesWrapped, EdgeTypesWrapped, ConnectionLineType, KeyCode, ReactFlowProps, Viewport } from '../../types';
 
 export interface GraphViewProps
   extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> {
@@ -16,13 +16,12 @@ export interface GraphViewProps
   multiSelectionKeyCode: KeyCode | null;
   connectionLineType: ConnectionLineType;
   onlyRenderVisibleElements: boolean;
-  defaultZoom: number;
-  defaultPosition: [number, number];
   defaultMarkerColor: string;
   selectNodesOnDrag: boolean;
   noDragClassName: string;
   noWheelClassName: string;
   noPanClassName: string;
+  defaultViewport: Viewport;
 }
 
 const GraphView = ({
@@ -52,8 +51,7 @@ const GraphView = ({
   onlyRenderVisibleElements,
   elementsSelectable,
   selectNodesOnDrag,
-  defaultZoom,
+  defaultViewport,
-  defaultPosition,
   preventScrolling,
   defaultMarkerColor,
   zoomOnScroll,
@@ -108,15 +106,14 @@ const GraphView = ({
       panOnScrollSpeed={panOnScrollSpeed}
       panOnScrollMode={panOnScrollMode}
       panOnDrag={panOnDrag}
-      defaultPosition={defaultPosition}
+      defaultViewport={defaultViewport}
-      defaultZoom={defaultZoom}
       onSelectionContextMenu={onSelectionContextMenu}
       preventScrolling={preventScrolling}
       noDragClassName={noDragClassName}
       noWheelClassName={noWheelClassName}
       noPanClassName={noPanClassName}
     >
-      <Viewport>
+      <ViewportWrapper>
         <EdgeRenderer
           edgeTypes={edgeTypes}
           onEdgeClick={onEdgeClick}
@@ -152,7 +149,7 @@ const GraphView = ({
           noPanClassName={noPanClassName}
           noDragClassName={noDragClassName}
         />
-      </Viewport>
+      </ViewportWrapper>
     </FlowRenderer>
   );
 };

packages/core/src/container/ReactFlow/index.tsx

@@ -22,6 +22,7 @@ import {
   PanOnScrollMode,
   ReactFlowProps,
   ReactFlowRefType,
+  Viewport,
 } from '../../types';
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 import GraphView from '../GraphView';
@@ -44,7 +45,7 @@ const defaultEdgeTypes: EdgeTypes = {
 };
 
 const initSnapGrid: [number, number] = [15, 15];
-const initDefaultPosition: [number, number] = [0, 0];
+const initDefaultViewport: Viewport = { x: 0, y: 0, zoom: 1 };
 
 const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
   (
@@ -102,8 +103,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       elementsSelectable,
       minZoom,
       maxZoom,
-      defaultZoom = 1,
+      defaultViewport = initDefaultViewport,
-      defaultPosition = initDefaultPosition,
       translateExtent,
       preventScrolling = true,
       nodeExtent,
@@ -177,8 +177,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             zoomActivationKeyCode={zoomActivationKeyCode}
             onlyRenderVisibleElements={onlyRenderVisibleElements}
             selectNodesOnDrag={selectNodesOnDrag}
-            defaultZoom={defaultZoom}
+            defaultViewport={defaultViewport}
-            defaultPosition={defaultPosition}
             preventScrolling={preventScrolling}
             zoomOnScroll={zoomOnScroll}
             zoomOnPinch={zoomOnPinch}

packages/core/src/container/ZoomPane/index.tsx

@@ -45,8 +45,7 @@ const ZoomPane = ({
   selectionKeyPressed,
   elementsSelectable,
   panOnDrag = true,
-  defaultPosition = [0, 0],
+  defaultViewport,
-  defaultZoom = 1,
   zoomActivationKeyCode,
   preventScrolling = true,
   children,
@@ -68,9 +67,9 @@ const ZoomPane = ({
       const d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent);
       const selection = select(zoomPane.current as Element).call(d3ZoomInstance);
 
-      const clampedX = clamp(defaultPosition[0], translateExtent[0][0], translateExtent[1][0]);
+      const clampedX = clamp(defaultViewport.x, translateExtent[0][0], translateExtent[1][0]);
-      const clampedY = clamp(defaultPosition[1], translateExtent[0][1], translateExtent[1][1]);
+      const clampedY = clamp(defaultViewport.y, translateExtent[0][1], translateExtent[1][1]);
-      const clampedZoom = clamp(defaultZoom, minZoom, maxZoom);
+      const clampedZoom = clamp(defaultViewport.zoom, minZoom, maxZoom);
       const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom);
 
       d3ZoomInstance.transform(selection, updatedTransform);

packages/core/src/types/component-props.ts

@@ -32,6 +32,7 @@ import {
   NodeDragHandler,
   NodeMouseHandler,
   SelectionDragHandler,
+  Viewport,
 } from '.';
 import { HandleType } from './handles';
 
@@ -98,8 +99,7 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   panOnDrag?: boolean;
   minZoom?: number;
   maxZoom?: number;
-  defaultZoom?: number;
+  defaultViewport?: Viewport;
-  defaultPosition?: [number, number];
   translateExtent?: CoordinateExtent;
   preventScrolling?: boolean;
   nodeExtent?: CoordinateExtent;