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

examples/react/src/examples/Undirectional/index.tsx

@@ -183,7 +183,7 @@ const getId = () => `${id++}`;
 const UpdateNodeInternalsFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const { project } = useReactFlow();
+  const { screenToFlowPosition } = useReactFlow();
 
   const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
   const onEdgeUpdate = useCallback(
@@ -196,12 +196,12 @@ const UpdateNodeInternalsFlow = () => {
       setNodes((nds) =>
         nds.concat({
           id: getId(),
-          position: project({ x: evt.clientX, y: evt.clientY - 40 }),
+          position: screenToFlowPosition({ x: evt.clientX, y: evt.clientY }),
           type: 'custom',
           data: null,
         })
       ),
-    [project, setNodes]
+    [screenToFlowPosition, setNodes]
   );
 
   return (

examples/react/src/examples/UseReactFlow/index.tsx

@@ -57,7 +57,7 @@ const UseZoomPanHelperFlow = () => {
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
   const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
   const {
-    project,
+    screenToFlowPosition,
     setCenter,
     zoomIn,
     zoomOut,
@@ -72,9 +72,9 @@ const UseZoomPanHelperFlow = () => {
 
   const onPaneClick = useCallback(
     (evt: MouseEvent) => {
-      const projectedPosition = project({
+      const projectedPosition = screenToFlowPosition({
         x: evt.clientX,
-        y: evt.clientY - 40,
+        y: evt.clientY,
       });
 
       setNodes((nds) =>
@@ -87,7 +87,7 @@ const UseZoomPanHelperFlow = () => {
         })
       );
     },
-    [project, setNodes]
+    [screenToFlowPosition, setNodes]
   );
 
   const onNodeClick = useCallback(

examples/react/src/examples/UseUpdateNodeInternals/index.tsx

@@ -36,20 +36,20 @@ const UpdateNodeInternalsFlow = () => {
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
   const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
 
-  const { project } = useReactFlow();
+  const { screenToFlowPosition } = useReactFlow();
 
   const onPaneClick = useCallback(
     (evt: MouseEvent) =>
       setNodes((nds) =>
         nds.concat({
           id: getId(),
-          position: project({ x: evt.clientX, y: evt.clientY - 40 }),
+          position: screenToFlowPosition({ x: evt.clientX, y: evt.clientY }),
           data: { label: 'new node' },
           targetPosition: Position.Left,
           sourcePosition: Position.Right,
         })
       ),
-    [project, setNodes]
+    [screenToFlowPosition, setNodes]
   );
 
   return (

examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte

@@ -69,10 +69,10 @@
 			return null;
 		}
 
-		const type = event.dataTransfer.getData('application/svelteflow');
+		const type = event.dataTransfer.getData('application/svelteflow') || 'default';
-		const position = svelteFlow.project({
+		const position = svelteFlow.screenToFlowPosition({
 			x: event.clientX,
-			y: event.clientY - 40
+			y: event.clientY
 		});
 		const newNode: Node = {
 			id: `${Math.random()}`,
@@ -81,7 +81,7 @@
 			data: { label: `${type} node` }
 		};
 
-		svelteFlow.nodes.update((nds) => nds.concat(newNode));
+		nodes.update((nds) => nds.concat(newNode));
 	};
 
 	$: {

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(
+        panZoom?.setViewport(viewport, { duration: options?.duration });
-          {
-            x,
-            y,
-            zoom,
-          },
-          { duration: options?.duration }
-        );
       },
-      project: (position: XYPosition) => {
+      screenToFlowPosition: (position: XYPosition) => {
-        const { transform, snapToGrid, snapGrid } = store.getState();
-        return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
-      },
-      screenToFlowCoordinate: (position: XYPosition) => {
         const { transform, snapToGrid, snapGrid, domNode } = store.getState();
-        if (domNode) {
-          const { x: domX, y: domY } = domNode.getBoundingClientRect();
 
-          const correctedPosition = {
+        if (!domNode) {
-            x: position.x - domX,
+          return position;
-            y: position.y - domY,
-          };
-
-          return pointToRendererPoint(correctedPosition, transform, snapToGrid, snapGrid || [1, 1]);
         }
 
-        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);
+        if (!domNode) {
-
+          return position;
-          return {
-            x: rendererPosition.x + domX,
-            y: rendererPosition.y + domY,
-          };
         }
 
-        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,
+  getViewportForBounds,
-  getRectOfNodes,
+  getNodesBounds,
 } from '@xyflow/system';

packages/react/src/store/initialState.ts

@@ -2,8 +2,8 @@ import {
   infiniteExtent,
   ConnectionMode,
   updateNodes,
-  getRectOfNodes,
+  getNodesBounds,
-  getTransformForBounds,
+  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]);
+    const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
-    transform = getTransformForBounds(bounds, width, height, 0.5, 2, 0.1);
+    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;
+  screenToFlowPosition: (position: XYPosition) => XYPosition;
-  screenToFlowCoordinate: Project;
+  flowToScreenPosition: (position: XYPosition) => XYPosition;
-  flowToScreenCoordinate: Project;
   viewportInitialized: boolean;
 };

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getRectOfNodes } from '@xyflow/system';
+  import { getNodesBounds } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import { Selection } from '$lib/components/Selection';
@@ -9,13 +9,13 @@
   const { selectionRectMode, nodes } = store;
 
   $: selectedNodes = $nodes.filter((n) => n.selected);
-  $: rect = getRectOfNodes(selectedNodes);
+  $: bounds = getNodesBounds(selectedNodes);
 </script>
 
 {#if selectedNodes && $selectionRectMode === 'nodes'}
   <div
     class="selection-wrapper nopan"
-    style="width: {rect.width}px; height: {rect.height}px; transform: translate({rect.x}px, {rect.y}px)"
+    style="width: {bounds.width}px; height: {bounds.height}px; transform: translate({bounds.x}px, {bounds.y}px)"
     use:drag={{ disabled: false, store }}
   >
     <Selection width="100%" height="100%" x={0} y={0} />

packages/svelte/src/lib/hooks/useSvelteFlow.ts

@@ -13,7 +13,7 @@ import {
   type XYPosition,
   type ZoomInOut,
   type Rect,
-  getTransformForBounds,
+  getViewportForBounds,
   getElementsToRemove,
   rendererPointToPoint
 } from '@xyflow/system';
@@ -45,8 +45,8 @@ export function useSvelteFlow(): {
     nodesToRemove?: (Node | { id: Node['id'] })[],
     edgesToRemove?: (Edge | { id: Edge['id'] })[]
   ) => { deletedNodes: Node[]; deletedEdges: Edge[] };
-  screenToFlowCoordinate: (position: XYPosition) => XYPosition;
+  screenToFlowPosition: (position: XYPosition) => XYPosition;
-  flowToScreenCoordinate: (position: XYPosition) => XYPosition;
+  flowToScreenPosition: (position: XYPosition) => XYPosition;
   viewport: Writable<Viewport>;
   getConnectedEdges: (id: string | (Node | { id: Node['id'] })[]) => Edge[];
   getIncomers: (node: string | Node | { id: Node['id'] }) => Node[];
@@ -118,7 +118,7 @@ export function useSvelteFlow(): {
     },
     fitView,
     fitBounds: (bounds: Rect, options?: FitBoundsOptions) => {
-      const [x, y, zoom] = getTransformForBounds(
+      const viewport = getViewportForBounds(
         bounds,
         get(width),
         get(height),
@@ -127,14 +127,7 @@ export function useSvelteFlow(): {
         options?.padding ?? 0.1
       );
 
-      get(panZoom)?.setViewport(
+      get(panZoom)?.setViewport(viewport, { duration: options?.duration });
-        {
-          x,
-          y,
-          zoom
-        },
-        { duration: options?.duration }
-      );
     },
     getIntersectingNodes: (
       nodeOrRect: Node | { id: Node['id'] } | Rect,
@@ -201,45 +194,43 @@ export function useSvelteFlow(): {
         deletedEdges: matchingEdges
       };
     },
-    screenToFlowCoordinate: (position: XYPosition) => {
+    screenToFlowPosition: (position: XYPosition) => {
       const _domNode = get(domNode);
 
-      if (_domNode) {
+      if (!_domNode) {
-        const _snapGrid = get(snapGrid);
+        return position;
-        const { x, y, zoom } = get(viewport);
-        const { x: domX, y: domY } = _domNode.getBoundingClientRect();
-
-        const correctedPosition = {
-          x: position.x - domX,
-          y: position.y - domY
-        };
-
-        return pointToRendererPoint(
-          correctedPosition,
-          [x, y, zoom],
-          _snapGrid !== null,
-          _snapGrid || [1, 1]
-        );
       }
 
-      return { x: 0, y: 0 };
+      const _snapGrid = get(snapGrid);
+      const { x, y, zoom } = get(viewport);
+      const { x: domX, y: domY } = _domNode.getBoundingClientRect();
+      const correctedPosition = {
+        x: position.x - domX,
+        y: position.y - domY
+      };
+
+      return pointToRendererPoint(
+        correctedPosition,
+        [x, y, zoom],
+        _snapGrid !== null,
+        _snapGrid || [1, 1]
+      );
     },
-    flowToScreenCoordinate: (position: XYPosition) => {
+    flowToScreenPosition: (position: XYPosition) => {
       const _domNode = get(domNode);
 
-      if (_domNode) {
+      if (!_domNode) {
-        const { x, y, zoom } = get(viewport);
+        return position;
-        const { x: domX, y: domY } = _domNode.getBoundingClientRect();
-
-        const rendererPosition = rendererPointToPoint(position, [x, y, zoom]);
-
-        return {
-          x: rendererPosition.x + domX,
-          y: rendererPosition.y + domY
-        };
       }
 
-      return { x: 0, y: 0 };
+      const { x, y, zoom } = get(viewport);
+      const { x: domX, y: domY } = _domNode.getBoundingClientRect();
+      const rendererPosition = rendererPointToPoint(position, [x, y, zoom]);
+
+      return {
+        x: rendererPosition.x + domX,
+        y: rendererPosition.y + domY
+      };
     },
     getConnectedEdges: (node) => {
       const nodeIds = new Set();

packages/svelte/src/lib/index.ts

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

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
   import cc from 'classcat';
-  import { getBoundsOfRects, getNodePositionWithOrigin, getRectOfNodes } from '@xyflow/system';
+  import { getBoundsOfRects, getNodePositionWithOrigin, getNodesBounds } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import { Panel } from '$lib/container/Panel';
@@ -64,7 +64,7 @@
     width: $containerWidth / $viewport.zoom,
     height: $containerHeight / $viewport.zoom
   };
-  $: boundingRect = $nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes), viewBB) : viewBB;
+  $: boundingRect = $nodes.length > 0 ? getBoundsOfRects(getNodesBounds($nodes), viewBB) : viewBB;
   $: elementWidth = width ?? defaultWidth;
   $: elementHeight = height ?? defaultHeight;
   $: scaledWidth = boundingRect.width / elementWidth;

packages/svelte/src/lib/store/initial-store.ts

@@ -16,8 +16,8 @@ import {
   devWarn,
   type Viewport,
   updateNodes,
-  getRectOfNodes,
+  getNodesBounds,
-  getTransformForBounds
+  getViewportForBounds
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -69,9 +69,8 @@ export const getInitialStore = ({
       width: node.size?.width,
       height: node.size?.height
     }));
-    const bounds = getRectOfNodes(nodesWithDimensions, [0, 0]);
+    const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
-    const transform = getTransformForBounds(bounds, width, height, 0.5, 2, 0.1);
+    viewport = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
-    viewport = { x: transform[0], y: transform[1], zoom: transform[2] };
   }
 
   return {

packages/system/src/utils/general.ts

@@ -8,6 +8,7 @@ import type {
   NodeOrigin,
   SnapGrid,
   Transform,
+  Viewport,
 } from '../types';
 import { getNodePositionWithOrigin } from './graph';
 
@@ -154,14 +155,14 @@ export const rendererPointToPoint = ({ x, y }: XYPosition, [tx, ty, tScale]: Tra
   };
 };
 
-export const getTransformForBounds = (
+export const getViewportForBounds = (
   bounds: Rect,
   width: number,
   height: number,
   minZoom: number,
   maxZoom: number,
   padding: number
-): Transform => {
+): Viewport => {
   const xZoom = width / (bounds.width * (1 + padding));
   const yZoom = height / (bounds.height * (1 + padding));
   const zoom = Math.min(xZoom, yZoom);
@@ -171,7 +172,7 @@ export const getTransformForBounds = (
   const x = width / 2 - boundsCenterX * clampedZoom;
   const y = height / 2 - boundsCenterY * clampedZoom;
 
-  return [x, y, clampedZoom];
+  return { x, y, zoom: clampedZoom };
 };
 
 export const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0;

packages/system/src/utils/graph.ts

@@ -8,7 +8,7 @@ import {
   rectToBox,
   nodeToRect,
   pointToRendererPoint,
-  getTransformForBounds,
+  getViewportForBounds,
 } from './general';
 import {
   type Connection,
@@ -105,7 +105,7 @@ export const getNodePositionWithOrigin = (
   };
 };
 
-export const getRectOfNodes = (nodes: NodeBase[], nodeOrigin: NodeOrigin = [0, 0]): Rect => {
+export const getNodesBounds = (nodes: NodeBase[], nodeOrigin: NodeOrigin = [0, 0]): Rect => {
   if (nodes.length === 0) {
     return { x: 0, y: 0, width: 0, height: 0 };
   }
@@ -195,9 +195,9 @@ export function fitView<Params extends FitViewParamsBase<NodeBase>, Options exte
   });
 
   if (filteredNodes.length > 0) {
-    const bounds = getRectOfNodes(filteredNodes, nodeOrigin);
+    const bounds = getNodesBounds(filteredNodes, nodeOrigin);
 
-    const [x, y, zoom] = getTransformForBounds(
+    const viewport = getViewportForBounds(
       bounds,
       width,
       height,
@@ -206,7 +206,7 @@ export function fitView<Params extends FitViewParamsBase<NodeBase>, Options exte
       options?.padding ?? 0.1
     );
 
-    panZoom.setViewport({ x, y, zoom }, { duration: options?.duration });
+    panZoom.setViewport(viewport, { duration: options?.duration });
 
     return true;
   }

packages/system/src/xydrag/XYDrag.ts

@@ -7,7 +7,7 @@ import {
   getPointerPosition,
   calcNextPosition,
   snapPosition,
-  getRectOfNodes,
+  getNodesBounds,
   rectToBox,
 } from '../utils';
 import { getDragItems, getEventHandlerParams, hasSelector, wrapSelectionDragFunc } from './utils';
@@ -119,7 +119,7 @@ export function XYDrag({
       let nodesBox: Box = { x: 0, y: 0, x2: 0, y2: 0 };
 
       if (dragItems.length > 1 && nodeExtent) {
-        const rect = getRectOfNodes(dragItems as unknown as NodeBase[], nodeOrigin);
+        const rect = getNodesBounds(dragItems as unknown as NodeBase[], nodeOrigin);
         nodesBox = rectToBox(rect);
       }