refactor(util-functions): cleanup types so that node/edge types get infered

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/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 {
+import { isNodeBase, isEdgeBase } from '@xyflow/system';
-  isNodeBase,
-  isEdgeBase,
-  addEdgeBase,
-  getOutgoersBase,
-  getIncomersBase,
-  updateEdgeBase,
-  getConnectedEdgesBase,
-} 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>;
+export const isEdge = <EdgeType extends Edge = Edge>(element: unknown): element is EdgeType =>
-
+  isEdgeBase<EdgeType>(element);
-/**
- * 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>;

packages/svelte/CHANGELOG.md

@@ -5,6 +5,8 @@
 ## Minor changes
 
 - add second option param to `screenToFlowPosition` for configuring if `snapToGrid` should be used
+- add slot to `Controls`
+- cleanup `ControlButton` types
 
 ## 0.0.33
 

packages/svelte/src/lib/index.ts

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

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 {
+import { isNodeBase, isEdgeBase } from '@xyflow/system';
-  isNodeBase,
-  isEdgeBase,
-  addEdgeBase,
-  getOutgoersBase,
-  getIncomersBase,
-  updateEdgeBase,
-  getConnectedEdgesBase
-} 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>;
+export const isEdge = <EdgeType extends Edge = Edge>(element: unknown): element is EdgeType =>
-
+  isEdgeBase<EdgeType>(element);
-/**
- * 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>;

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) {