Merge branch 'xyflow' into svelte-flow-get-intersecting-nodes

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

@@ -0,0 +1,11 @@
+import { useStore } from '$lib/store';
+
+export function useNodes() {
+  const { nodes } = useStore();
+  return nodes;
+}
+
+export function useEdges() {
+  const { edges } = useStore();
+  return edges;
+}

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

@@ -4,18 +4,20 @@ import {
   isRectObject,
   nodeToRect,
   pointToRendererPoint,
-  type Project,
-  type Rect,
+  type FitBoundsOptions,
   type SetCenterOptions,
   type Viewport,
   type ViewportHelperFunctionOptions,
   type XYPosition,
-  type ZoomInOut
+  type ZoomInOut,
+  type Rect,
+  getTransformForBounds,
+  getElementsToRemove,
+  rendererPointToPoint
 } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
-import type { FitViewOptions, Node } from '$lib/types';
-import type { SvelteFlowStore } from '$lib/store/types';
+import type { Edge, FitViewOptions, Node } from '$lib/types';
 
 export function useSvelteFlow(): {
   zoomIn: ZoomInOut;
@@ -27,19 +29,23 @@ export function useSvelteFlow(): {
   getViewport: () => Viewport;
   fitView: (options?: FitViewOptions) => void;
   getIntersectingNodes: (
-    nodeOrRect: (Partial<Node<any>> & { id: Node['id'] }) | Rect,
+    nodeOrRect: (Partial<Node> & { id: Node['id'] }) | Rect,
     partially?: boolean,
     nodesToIntersect?: Node[]
   ) => Node[];
   isNodeIntersecting: (
-    nodeOrRect: (Partial<Node<any>> & { id: Node['id'] }) | Rect,
+    nodeOrRect: (Partial<Node> & { id: Node['id'] }) | Rect,
     area: Rect,
     partially?: boolean
   ) => boolean;
-  project: Project;
+  fitBounds: (bounds: Rect, options?: FitBoundsOptions) => void;
+  deleteElements: (
+    nodesToRemove?: Partial<Node> & { id: string }[],
+    edgesToRemove?: Partial<Edge> & { id: string }[]
+  ) => { deletedNodes: Node[]; deletedEdges: Edge[] };
+  screenToFlowCoordinate: (position: XYPosition) => XYPosition;
+  flowToScreenCoordinate: (position: XYPosition) => XYPosition;
   viewport: Writable<Viewport>;
-  nodes: SvelteFlowStore['nodes'];
-  edges: SvelteFlowStore['edges'];
 } {
   const {
     zoomIn,
@@ -49,20 +55,22 @@ export function useSvelteFlow(): {
     viewport,
     width,
     height,
+    minZoom,
     maxZoom,
     panZoom,
     nodes,
-    edges
+    edges,
+    domNode
   } = useStore();
 
   const getNodeRect = (
-    nodeOrRect: (Partial<Node<any>> & { id: Node['id'] }) | Rect
-  ): [Rect | null, Node<any> | null | undefined, boolean] => {
+    nodeOrRect: (Partial<Node> & { id: Node['id'] }) | Rect
+  ): [Rect | null, Node | null | undefined, boolean] => {
     const isRect = isRectObject(nodeOrRect);
     const node = isRect ? null : get(nodes).find((n) => n.id === nodeOrRect.id);
 
     if (!isRect && !node) {
-      [null, null, isRect];
+      return [null, null, isRect];
     }
 
     const nodeRect = isRect ? nodeOrRect : nodeToRect(node!);
@@ -107,19 +115,43 @@ export function useSvelteFlow(): {
       );
     },
     fitView,
+    fitBounds: (bounds: Rect, options?: FitBoundsOptions) => {
+      const _width = get(width);
+      const _height = get(height);
+      const _maxZoom = get(maxZoom);
+      const _minZoom = get(minZoom);
+
+      const [x, y, zoom] = getTransformForBounds(
+        bounds,
+        _width,
+        _height,
+        _minZoom,
+        _maxZoom,
+        options?.padding ?? 0.1
+      );
+
+      get(panZoom)?.setViewport(
+        {
+          x,
+          y,
+          zoom
+        },
+        { duration: options?.duration }
+      );
+    },
     getIntersectingNodes: (
-      nodeOrRect: (Partial<Node<any>> & { id: Node['id'] }) | Rect,
+      nodeOrRect: (Partial<Node> & { id: Node['id'] }) | Rect,
       partially = true,
       nodesToIntersect?: Node[]
     ) => {
       const [nodeRect, node, isRect] = getNodeRect(nodeOrRect);
 
-      if (!nodeRect) {
+      if (!nodeRect || !node) {
         return [];
       }
 
       return (nodesToIntersect || get(nodes)).filter((n) => {
-        if (!isRect && (n.id === node!.id || !n.positionAbsolute)) {
+        if (!isRect && (n.id === node.id || !n.positionAbsolute)) {
           return false;
         }
 
@@ -131,7 +163,7 @@ export function useSvelteFlow(): {
       });
     },
     isNodeIntersecting: (
-      nodeOrRect: (Partial<Node<any>> & { id: Node['id'] }) | Rect,
+      nodeOrRect: (Partial<Node> & { id: Node['id'] }) | Rect,
       area: Rect,
       partially = true
     ) => {
@@ -146,14 +178,70 @@ export function useSvelteFlow(): {
 
       return partiallyVisible || overlappingArea >= nodeOrRect.width! * nodeOrRect.height!;
     },
-    project: (position: XYPosition) => {
-      const _snapGrid = get(snapGrid);
-      const { x, y, zoom } = get(viewport);
+    deleteElements: (
+      nodesToRemove: Partial<Node> & { id: string }[] = [],
+      edgesToRemove: Partial<Edge> & { id: string }[] = []
+    ) => {
+      const _nodes = get(nodes);
+      const _edges = get(edges);
+      const { matchingNodes, matchingEdges } = getElementsToRemove<Node, Edge>({
+        nodesToRemove,
+        edgesToRemove,
+        nodes: _nodes,
+        edges: _edges
+      });
 
-      return pointToRendererPoint(position, [x, y, zoom], _snapGrid !== null, _snapGrid || [1, 1]);
+      if (matchingNodes) {
+        nodes.set(_nodes.filter((node) => !matchingNodes.some(({ id }) => id === node.id)));
+      }
+
+      if (matchingEdges) {
+        edges.set(_edges.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id)));
+      }
+
+      return {
+        deletedNodes: matchingNodes,
+        deletedEdges: matchingEdges
+      };
+    },
+    screenToFlowCoordinate: (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]
+        );
+      }
+
+      return { x: 0, y: 0 };
+    },
+    flowToScreenCoordinate: (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
+        };
+      }
+
+      return { x: 0, y: 0 };
     },
-    nodes,
-    edges,
     viewport: viewport
   };
 }