Merge pull request #3794 from xyflow/refactor/util-function-types

Refactor/util function types

packages/react/CHANGELOG.md

@@ -7,6 +7,7 @@
 - pass Node/Edge types to changes thanks @FelipeEmos
 - use position instead of positionAbsolute for `getNodesBounds`
 - add second option param to `screenToFlowPosition` for configuring if `snapToGrid` should be used
+- infer types for `getIncomers`, `getOutgoers`, `updateEdge`, `addEdge` and `getConnectedEdges` thanks @joeyballentine
 
 ## 12.0.0-next.6
 

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

@@ -12,6 +12,7 @@ import {
   XYHandle,
   getHostForElement,
   isMouseEvent,
+  addEdge,
   type HandleProps,
   type Connection,
   type HandleType,
@@ -19,7 +20,6 @@ import {
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
-import { addEdge } from '../../utils/';
 import { type ReactFlowState } from '../../types';
 
 export type HandleComponentProps = HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>;

packages/react/src/hooks/useNodesEdgesState.ts

@@ -12,9 +12,12 @@ import type { Node, NodeChange, Edge, EdgeChange } from '../types';
  */
 export function useNodesState<NodeType extends Node = Node>(
   initialNodes: NodeType[]
-): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, (changes: NodeChange[]) => void] {
+): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, (changes: NodeChange<NodeType>[]) => void] {
   const [nodes, setNodes] = useState(initialNodes);
-  const onNodesChange = useCallback((changes: NodeChange[]) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
+  const onNodesChange = useCallback(
+    (changes: NodeChange<NodeType>[]) => setNodes((nds) => applyNodeChanges(changes, nds)),
+    []
+  );
 
   return [nodes, setNodes, onNodesChange];
 }
@@ -28,9 +31,12 @@ export function useNodesState<NodeType extends Node = Node>(
  */
 export function useEdgesState<EdgeType extends Edge = Edge>(
   initialEdges: EdgeType[]
-): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, (changes: EdgeChange[]) => void] {
+): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, (changes: EdgeChange<EdgeType>[]) => void] {
   const [edges, setEdges] = useState(initialEdges);
-  const onEdgesChange = useCallback((changes: EdgeChange[]) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange<EdgeType>[]) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+    []
+  );
 
   return [edges, setEdges, onEdgesChange];
 }

packages/react/src/index.ts

@@ -29,7 +29,7 @@ export { useConnection } from './hooks/useConnection';
 export { useNodeId } from './contexts/NodeIdContext';
 
 export { applyNodeChanges, applyEdgeChanges, handleParentExpand } from './utils/changes';
-export { isNode, isEdge, getIncomers, getOutgoers, addEdge, updateEdge, getConnectedEdges } from './utils/general';
+export { isNode, isEdge } from './utils/general';
 
 export * from './additional-components';
 
@@ -102,5 +102,10 @@ export {
   getStraightPath,
   getViewportForBounds,
   getNodesBounds,
+  getIncomers,
+  getOutgoers,
+  addEdge,
+  updateEdge,
+  getConnectedEdges,
   internalsSymbol,
 } from '@xyflow/system';

packages/react/src/types/instance.ts

@@ -45,9 +45,6 @@ export namespace Instance {
     area: Rect,
     partially?: boolean
   ) => boolean;
-  export type getConnectedEdges = (id: string | (Node | { id: Node['id'] })[]) => Edge[];
-  export type getIncomers = (node: string | Node | { id: Node['id'] }) => Node[];
-  export type getOutgoers = (node: string | Node | { id: Node['id'] }) => Node[];
 
   export type UpdateNode<NodeType extends Node = Node> = (
     id: string,

packages/react/src/utils/changes.ts

@@ -267,7 +267,7 @@ export function getElementsDiffChanges({
   lookup,
 }: {
   items: Node[] | undefined;
-  lookup: NodeLookup;
+  lookup: NodeLookup<Node>;
 }): NodeChange[];
 export function getElementsDiffChanges({
   items,

packages/react/src/utils/general.ts

@@ -1,12 +1,4 @@
-import {
-  isNodeBase,
-  isEdgeBase,
-  addEdgeBase,
-  getOutgoersBase,
-  getIncomersBase,
-  updateEdgeBase,
-  getConnectedEdgesBase,
-} from '@xyflow/system';
+import { isNodeBase, isEdgeBase } from '@xyflow/system';
 
 import type { Edge, Node } from '../types';
 
@@ -17,7 +9,8 @@ import type { Edge, Node } from '../types';
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Node
  */
-export const isNode = isNodeBase<Node>;
+export const isNode = <NodeType extends Node = Node>(element: unknown): element is NodeType =>
+  isNodeBase<NodeType>(element);
 
 /**
  * Test whether an object is useable as an Edge
@@ -26,52 +19,5 @@ export const isNode = isNodeBase<Node>;
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Edge
  */
-export const isEdge = isEdgeBase<Edge>;
-
-/**
- * Pass in a node, and get connected nodes where edge.source === node.id
- * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the source is the given node
- */
-export const getOutgoers = getOutgoersBase<Node, Edge>;
-
-/**
- * Pass in a node, and get connected nodes where edge.target === node.id
- * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the target is the given node
- */
-export const getIncomers = getIncomersBase<Node, Edge>;
-
-/**
- * This util is a convenience function to add a new Edge to an array of edges
- * @remarks It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
- * @public
- * @param edgeParams - Either an Edge or a Connection you want to add
- * @param edges -  The array of all current edges
- * @returns A new array of edges with the new edge added
- */
-export const addEdge = addEdgeBase<Edge>;
-
-/**
- * A handy utility to update an existing Edge with new properties
- * @param oldEdge - The edge you want to update
- * @param newConnection - The new connection you want to update the edge with
- * @param edges - The array of all current edges
- * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
- * @returns the updated edges array
- */
-export const updateEdge = updateEdgeBase<Edge>;
-
-/**
- * Get all connecting edges for a given set of nodes
- * @param nodes - Nodes you want to get the connected edges for
- * @param edges - All edges
- * @returns Array of edges that connect any of the given nodes with each other
- */
-export const getConnectedEdges = getConnectedEdgesBase<Node, Edge>;
+export const isEdge = <EdgeType extends Edge = Edge>(element: unknown): element is EdgeType =>
+  isEdgeBase<EdgeType>(element);

packages/svelte/CHANGELOG.md

@@ -5,6 +5,9 @@
 ## Minor changes
 
 - add second option param to `screenToFlowPosition` for configuring if `snapToGrid` should be used
+- add slot to `Controls`
+- cleanup `ControlButton` types
+- infer types for `getIncomers`, `getOutgoers`, `updateEdge`, `addEdge` and `getConnectedEdges` thanks @joeyballentine
 
 ## 0.0.33
 

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -30,10 +30,14 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  import { SelectionMode, getEventPosition, getNodesInside } from '@xyflow/system';
+  import {
+    SelectionMode,
+    getEventPosition,
+    getNodesInside,
+    getConnectedEdges
+  } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
-  import { getConnectedEdges } from '$lib/utils';
   import type { Node, Edge } from '$lib/types';
   import type { PaneProps } from './types';
 

packages/svelte/src/lib/index.ts

@@ -112,5 +112,10 @@ export {
   getStraightPath,
   getViewportForBounds,
   getNodesBounds,
+  getIncomers,
+  getOutgoers,
+  getConnectedEdges,
+  addEdge,
+  updateEdge,
   internalsSymbol
 } from '@xyflow/system';

packages/svelte/src/lib/store/index.ts

@@ -7,6 +7,7 @@ import {
   getElementsToRemove,
   panBy as panBySystem,
   updateNodeDimensions as updateNodeDimensionsSystem,
+  addEdge as addEdgeUtil,
   type UpdateNodePositions,
   type NodeDimensionUpdate,
   type ViewportHelperFunctionOptions,
@@ -19,7 +20,6 @@ import {
   errorMessages
 } from '@xyflow/system';
 
-import { addEdge as addEdgeUtil } from '$lib/utils';
 import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions, ConnectionData } from '$lib/types';
 import { initialEdgeTypes, initialNodeTypes, getInitialStore } from './initial-store';
 import type { SvelteFlowStore } from './types';

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

@@ -99,7 +99,7 @@ export const getInitialStore = ({
   return {
     flowId: writable<string | null>(null),
     nodes: createNodesStore(nextNodes, nodeLookup),
-    nodeLookup: readable<NodeLookup>(nodeLookup),
+    nodeLookup: readable<NodeLookup<Node>>(nodeLookup),
     edgeLookup: readable<EdgeLookup>(edgeLookup),
     visibleNodes: readable<Node[]>([]),
     edges: createEdgesStore(edges, connectionLookup, edgeLookup),

packages/svelte/src/lib/utils/index.ts

@@ -1,12 +1,4 @@
-import {
-  isNodeBase,
-  isEdgeBase,
-  addEdgeBase,
-  getOutgoersBase,
-  getIncomersBase,
-  updateEdgeBase,
-  getConnectedEdgesBase
-} from '@xyflow/system';
+import { isNodeBase, isEdgeBase } from '@xyflow/system';
 
 import type { Edge, Node } from '$lib/types';
 
@@ -17,7 +9,8 @@ import type { Edge, Node } from '$lib/types';
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Node
  */
-export const isNode = isNodeBase<Node>;
+export const isNode = <NodeType extends Node = Node>(element: unknown): element is NodeType =>
+  isNodeBase<NodeType>(element);
 
 /**
  * Test whether an object is useable as an Edge
@@ -26,52 +19,5 @@ export const isNode = isNodeBase<Node>;
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Edge
  */
-export const isEdge = isEdgeBase<Edge>;
-
-/**
- * Pass in a node, and get connected nodes where edge.source === node.id
- * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the source is the given node
- */
-export const getOutgoers = getOutgoersBase<Node, Edge>;
-
-/**
- * Pass in a node, and get connected nodes where edge.target === node.id
- * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the target is the given node
- */
-export const getIncomers = getIncomersBase<Node, Edge>;
-
-/**
- * This util is a convenience function to add a new Edge to an array of edges
- * @remarks It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
- * @public
- * @param edgeParams - Either an Edge or a Connection you want to add
- * @param edges -  The array of all current edges
- * @returns A new array of edges with the new edge added
- */
-export const addEdge = addEdgeBase<Edge>;
-
-/**
- * A handy utility to update an existing Edge with new properties
- * @param oldEdge - The edge you want to update
- * @param newConnection - The new connection you want to update the edge with
- * @param edges - The array of all current edges
- * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
- * @returns the updated edges array
- */
-export const updateEdge = updateEdgeBase<Edge>;
-
-/**
- * Get all connecting edges for a given set of nodes
- * @param nodes - Nodes you want to get the connected edges for
- * @param edges - All edges
- * @returns Array of edges that connect any of the given nodes with each other
- */
-export const getConnectedEdges = getConnectedEdgesBase<Node, Edge>;
+export const isEdge = <EdgeType extends Edge = Edge>(element: unknown): element is EdgeType =>
+  isEdgeBase<EdgeType>(element);

packages/system/src/utils/edges/general.ts

@@ -98,7 +98,7 @@ const connectionExists = (edge: EdgeBase, edges: EdgeBase[]) => {
  * @param edges -  The array of all current edges
  * @returns A new array of edges with the new edge added
  */
-export const addEdgeBase = <EdgeType extends EdgeBase>(
+export const addEdge = <EdgeType extends EdgeBase>(
   edgeParams: EdgeType | Connection,
   edges: EdgeType[]
 ): EdgeType[] => {
@@ -145,7 +145,7 @@ export type UpdateEdgeOptions = {
  * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
  * @returns the updated edges array
  */
-export const updateEdgeBase = <EdgeType extends EdgeBase>(
+export const updateEdge = <EdgeType extends EdgeBase>(
   oldEdge: EdgeType,
   newConnection: Connection,
   edges: EdgeType[],

packages/system/src/utils/graph.ts

@@ -54,7 +54,7 @@ export const isNodeBase = <NodeType extends NodeBase = NodeBase>(element: any):
  * @param edges - The array of all edges
  * @returns An array of nodes that are connected over eges where the source is the given node
  */
-export const getOutgoersBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
+export const getOutgoers = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
   node: NodeType | { id: string },
   nodes: NodeType[],
   edges: EdgeType[]
@@ -81,7 +81,7 @@ export const getOutgoersBase = <NodeType extends NodeBase = NodeBase, EdgeType e
  * @param edges - The array of all edges
  * @returns An array of nodes that are connected over eges where the target is the given node
  */
-export const getIncomersBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
+export const getIncomers = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
   node: NodeType | { id: string },
   nodes: NodeType[],
   edges: EdgeType[]
@@ -212,7 +212,7 @@ export const getNodesInside = <NodeType extends NodeBase>(
  * @param edges - All edges
  * @returns Array of edges that connect any of the given nodes with each other
  */
-export const getConnectedEdgesBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
+export const getConnectedEdges = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
   nodes: NodeType[],
   edges: EdgeType[]
 ): EdgeType[] => {
@@ -370,7 +370,7 @@ export async function getElementsToRemove<NodeType extends NodeBase = NodeBase,
 
   const edgeIds = edgesToRemove.map((edge) => edge.id);
   const deletableEdges = edges.filter((edge) => edge.deletable !== false);
-  const connectedEdges = getConnectedEdgesBase(matchingNodes, deletableEdges);
+  const connectedEdges = getConnectedEdges(matchingNodes, deletableEdges);
   const matchingEdges: EdgeType[] = connectedEdges;
 
   for (const edge of deletableEdges) {