reafactor(react/svelte): rename some util functions #3528

packages/react/src/additional-components/MiniMap/MiniMap.tsx

@@ -3,7 +3,7 @@
 import { memo, useEffect, useRef, type MouseEvent, useCallback } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
-import { getRectOfNodes, getBoundsOfRects, XYMinimap, type Rect, type XYMinimapInstance } from '@xyflow/system';
+import { getNodesBounds, getBoundsOfRects, XYMinimap, type Rect, type XYMinimapInstance } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import Panel from '../../components/Panel';
@@ -25,7 +25,7 @@ const selector = (s: ReactFlowState) => {
 
   return {
     viewBB,
-    boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(s.nodes, s.nodeOrigin), viewBB) : viewBB,
+    boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getNodesBounds(s.nodes, s.nodeOrigin), viewBB) : viewBB,
     rfId: s.rfId,
     nodeOrigin: s.nodeOrigin,
     panZoom: s.panZoom,

packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx

@@ -1,7 +1,7 @@
 import { useCallback, CSSProperties } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
-import { getRectOfNodes, Transform, Rect, Position, internalsSymbol } from '@xyflow/system';
+import { getNodesBounds, Transform, Rect, Position, internalsSymbol } from '@xyflow/system';
 
 import { Node, ReactFlowState } from '../../types';
 import { useStore } from '../../hooks/useStore';
@@ -105,7 +105,7 @@ function NodeToolbar({
     return null;
   }
 
-  const nodeRect: Rect = getRectOfNodes(nodes, nodeOrigin);
+  const nodeRect: Rect = getNodesBounds(nodes, nodeOrigin);
   const zIndex: number = Math.max(...nodes.map((node) => (node[internalsSymbol]?.z || 1) + 1));
 
   const wrapperStyle: CSSProperties = {

packages/react/src/components/NodesSelection/index.tsx

@@ -6,7 +6,7 @@
 import { memo, useRef, useEffect, type MouseEvent, type KeyboardEvent } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
-import { getRectOfNodes } from '@xyflow/system';
+import { getNodesBounds } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import useDrag from '../../hooks/useDrag';
@@ -22,7 +22,7 @@ export type NodesSelectionProps = {
 
 const selector = (s: ReactFlowState) => {
   const selectedNodes = s.nodes.filter((n) => n.selected);
-  const { width, height, x, y } = getRectOfNodes(selectedNodes, s.nodeOrigin);
+  const { width, height, x, y } = getNodesBounds(selectedNodes, s.nodeOrigin);
 
   return {
     width,

packages/react/src/hooks/useViewportHelper.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import {
   pointToRendererPoint,
-  getTransformForBounds,
+  getViewportForBounds,
   fitView,
   type XYPosition,
   rendererPointToPoint,
@@ -76,50 +76,40 @@ const useViewportHelper = (): ViewportHelperFunctions => {
       },
       fitBounds: (bounds, options) => {
         const { width, height, minZoom, maxZoom, panZoom } = store.getState();
-        const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
+        const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
 
-        panZoom?.setViewport(
-          {
-            x,
-            y,
-            zoom,
-          },
-          { duration: options?.duration }
-        );
+        panZoom?.setViewport(viewport, { duration: options?.duration });
       },
-      project: (position: XYPosition) => {
-        const { transform, snapToGrid, snapGrid } = store.getState();
-        return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
-      },
-      screenToFlowCoordinate: (position: XYPosition) => {
+      screenToFlowPosition: (position: XYPosition) => {
         const { transform, snapToGrid, snapGrid, domNode } = store.getState();
-        if (domNode) {
-          const { x: domX, y: domY } = domNode.getBoundingClientRect();
 
-          const correctedPosition = {
-            x: position.x - domX,
-            y: position.y - domY,
-          };
-
-          return pointToRendererPoint(correctedPosition, transform, snapToGrid, snapGrid || [1, 1]);
+        if (!domNode) {
+          return position;
         }
 
-        return { x: 0, y: 0 };
+        const { x: domX, y: domY } = domNode.getBoundingClientRect();
+
+        const correctedPosition = {
+          x: position.x - domX,
+          y: position.y - domY,
+        };
+
+        return pointToRendererPoint(correctedPosition, transform, snapToGrid, snapGrid || [1, 1]);
       },
-      flowToScreenCoordinate: (position: XYPosition) => {
+      flowToScreenPosition: (position: XYPosition) => {
         const { transform, domNode } = store.getState();
-        if (domNode) {
-          const { x: domX, y: domY } = domNode.getBoundingClientRect();
 
-          const rendererPosition = rendererPointToPoint(position, transform);
-
-          return {
-            x: rendererPosition.x + domX,
-            y: rendererPosition.y + domY,
-          };
+        if (!domNode) {
+          return position;
         }
 
-        return { x: 0, y: 0 };
+        const { x: domX, y: domY } = domNode.getBoundingClientRect();
+        const rendererPosition = rendererPointToPoint(position, transform);
+
+        return {
+          x: rendererPosition.x + domX,
+          y: rendererPosition.y + domY,
+        };
       },
       viewportInitialized: panZoomInitialized,
     };

packages/react/src/index.ts

@@ -85,6 +85,6 @@ export {
   getSmoothStepPath,
   type GetStraightPathParams,
   getStraightPath,
-  getTransformForBounds,
-  getRectOfNodes,
+  getViewportForBounds,
+  getNodesBounds,
 } from '@xyflow/system';

packages/react/src/store/initialState.ts

@@ -2,8 +2,8 @@ import {
   infiniteExtent,
   ConnectionMode,
   updateNodes,
-  getRectOfNodes,
-  getTransformForBounds,
+  getNodesBounds,
+  getViewportForBounds,
   Transform,
 } from '@xyflow/system';
 
@@ -32,8 +32,9 @@ const getInitialState = ({
       width: node.size?.width,
       height: node.size?.height,
     }));
-    const bounds = getRectOfNodes(nodesWithDimensions, [0, 0]);
-    transform = getTransformForBounds(bounds, width, height, 0.5, 2, 0.1);
+    const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
+    const { x, y, z } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
+    transform = [x, y, z];
   }
 
   return {

packages/react/src/types/general.ts

@@ -11,7 +11,7 @@ import {
   GetViewport,
   SetCenter,
   FitBounds,
-  Project,
+  XYPosition,
 } from '@xyflow/system';
 
 import type { NodeChange, EdgeChange, Node, WrapNodeProps, Edge, EdgeProps, WrapEdgeProps, ReactFlowInstance } from '.';
@@ -54,8 +54,7 @@ export type ViewportHelperFunctions = {
   fitView: FitView;
   setCenter: SetCenter;
   fitBounds: FitBounds;
-  project: Project;
-  screenToFlowCoordinate: Project;
-  flowToScreenCoordinate: Project;
+  screenToFlowPosition: (position: XYPosition) => XYPosition;
+  flowToScreenPosition: (position: XYPosition) => XYPosition;
   viewportInitialized: boolean;
 };