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

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;
-  flowToScreenCoordinate: (position: XYPosition) => XYPosition;
+  screenToFlowPosition: (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(
-        {
-          x,
-          y,
-          zoom
-        },
-        { duration: options?.duration }
-      );
+      get(panZoom)?.setViewport(viewport, { 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) {
-        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]
-        );
+      if (!_domNode) {
+        return position;
       }
 
-      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) {
-        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
-        };
+      if (!_domNode) {
+        return position;
       }
 
-      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,
-  getRectOfNodes
+  getViewportForBounds,
+  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,
-  getTransformForBounds
+  getNodesBounds,
+  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 transform = getTransformForBounds(bounds, width, height, 0.5, 2, 0.1);
-    viewport = { x: transform[0], y: transform[1], zoom: transform[2] };
+    const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
+    viewport = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
   }
 
   return {