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

2024-01-15 17:32:30 +01:00
parent 4d8fc79d21
commit 1bc1ae855d
9 changed files with 30 additions and 127 deletions
--- a/packages/react/src/index.ts
+++ b/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';
--- a/packages/react/src/utils/changes.ts
+++ b/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,
--- a/packages/react/src/utils/general.ts
+++ b/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);
--- a/packages/svelte/CHANGELOG.md
+++ b/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

--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -112,5 +112,9 @@ export {
  getStraightPath,
  getViewportForBounds,
  getNodesBounds,
+  getIncomers,
+  getOutgoers,
+  getConnectedEdges,
+  addEdge,
  internalsSymbol
 } from '@xyflow/system';
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/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),
--- a/packages/svelte/src/lib/utils/index.ts
+++ b/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);
--- a/packages/system/src/utils/edges/general.ts
+++ b/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[],
--- a/packages/system/src/utils/graph.ts
+++ b/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) {