From 37b311851cf101eada540cc1afa5736a8a7d31d7 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 25 Jul 2022 16:03:42 +0200 Subject: [PATCH] refactor(props): merge defaultPosition and defaultZoom to defaultViewport #2313 --- examples/nextjs/pages/Edges/index.tsx | 18 ++++++++++++------ .../core/src/container/FlowRenderer/index.tsx | 6 ++---- .../core/src/container/GraphView/index.tsx | 17 +++++++---------- .../core/src/container/ReactFlow/index.tsx | 9 ++++----- packages/core/src/container/ZoomPane/index.tsx | 9 ++++----- packages/core/src/types/component-props.ts | 4 ++-- 6 files changed, 31 insertions(+), 32 deletions(-) diff --git a/examples/nextjs/pages/Edges/index.tsx b/examples/nextjs/pages/Edges/index.tsx index e1420b47..c07d61c4 100644 --- a/examples/nextjs/pages/Edges/index.tsx +++ b/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) => - setEdges((eds) => addEdge(params, eds)); + const onConnect = useCallback( + (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), + [] + ); return ( { 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} > diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index b9e7dd72..95988dc9 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -51,8 +51,7 @@ const FlowRenderer = ({ panOnScrollMode, zoomOnDoubleClick, panOnDrag, - defaultPosition, - defaultZoom, + defaultViewport, preventScrolling, onSelectionContextMenu, noWheelClassName, @@ -87,8 +86,7 @@ const FlowRenderer = ({ panOnScrollMode={panOnScrollMode} zoomOnDoubleClick={zoomOnDoubleClick} panOnDrag={panOnDrag} - defaultPosition={defaultPosition} - defaultZoom={defaultZoom} + defaultViewport={defaultViewport} zoomActivationKeyCode={zoomActivationKeyCode} preventScrolling={preventScrolling} noWheelClassName={noWheelClassName} diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx index 54f00f06..7792097d 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/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 { @@ -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, - defaultPosition, + defaultViewport, preventScrolling, defaultMarkerColor, zoomOnScroll, @@ -108,15 +106,14 @@ const GraphView = ({ panOnScrollSpeed={panOnScrollSpeed} panOnScrollMode={panOnScrollMode} panOnDrag={panOnDrag} - defaultPosition={defaultPosition} - defaultZoom={defaultZoom} + defaultViewport={defaultViewport} onSelectionContextMenu={onSelectionContextMenu} preventScrolling={preventScrolling} noDragClassName={noDragClassName} noWheelClassName={noWheelClassName} noPanClassName={noPanClassName} > - + - + ); }; diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index 65ad86f0..100712ed 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/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( ( @@ -102,8 +103,7 @@ const ReactFlow = forwardRef( elementsSelectable, minZoom, maxZoom, - defaultZoom = 1, - defaultPosition = initDefaultPosition, + defaultViewport = initDefaultViewport, translateExtent, preventScrolling = true, nodeExtent, @@ -177,8 +177,7 @@ const ReactFlow = forwardRef( zoomActivationKeyCode={zoomActivationKeyCode} onlyRenderVisibleElements={onlyRenderVisibleElements} selectNodesOnDrag={selectNodesOnDrag} - defaultZoom={defaultZoom} - defaultPosition={defaultPosition} + defaultViewport={defaultViewport} preventScrolling={preventScrolling} zoomOnScroll={zoomOnScroll} zoomOnPinch={zoomOnPinch} diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index 9c6075d9..b9fb3536 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -45,8 +45,7 @@ const ZoomPane = ({ selectionKeyPressed, elementsSelectable, panOnDrag = true, - defaultPosition = [0, 0], - defaultZoom = 1, + defaultViewport, 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 clampedY = clamp(defaultPosition[1], translateExtent[0][1], translateExtent[1][1]); - const clampedZoom = clamp(defaultZoom, minZoom, maxZoom); + const clampedX = clamp(defaultViewport.x, translateExtent[0][0], translateExtent[1][0]); + const clampedY = clamp(defaultViewport.y, translateExtent[0][1], translateExtent[1][1]); + const clampedZoom = clamp(defaultViewport.zoom, minZoom, maxZoom); const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom); d3ZoomInstance.transform(selection, updatedTransform); diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index b213c78e..c6110bee 100644 --- a/packages/core/src/types/component-props.ts +++ b/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 { panOnDrag?: boolean; minZoom?: number; maxZoom?: number; - defaultZoom?: number; - defaultPosition?: [number, number]; + defaultViewport?: Viewport; translateExtent?: CoordinateExtent; preventScrolling?: boolean; nodeExtent?: CoordinateExtent;