Merge pull request #3791 from FelipeEmos/fix/improve-typesafety-node-edges-changes

fix: typesafety of Node and Edge changes

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-2023 webkid GmbH
+Copyright (c) 2019-2024 webkid GmbH
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

packages/react/src/types/changes.ts

@@ -44,13 +44,13 @@ export type NodeReplaceChange<NodeType extends Node = Node> = {
  * Union type of all possible node changes.
  * @public
  */
-export type NodeChange =
+export type NodeChange<NodeType extends Node = Node> =
   | NodeDimensionChange
   | NodePositionChange
   | NodeSelectionChange
   | NodeRemoveChange
-  | NodeAddChange
-  | NodeReplaceChange;
+  | NodeAddChange<NodeType>
+  | NodeReplaceChange<NodeType>;
 
 export type EdgeSelectionChange = NodeSelectionChange;
 export type EdgeRemoveChange = NodeRemoveChange;
@@ -64,4 +64,9 @@ export type EdgeReplaceChange<EdgeType extends Edge = Edge> = {
   item: EdgeType;
   type: 'replace';
 };
-export type EdgeChange = EdgeSelectionChange | EdgeRemoveChange | EdgeAddChange | EdgeReplaceChange;
+
+export type EdgeChange<EdgeType extends Edge = Edge> =
+  | EdgeSelectionChange
+  | EdgeRemoveChange
+  | EdgeAddChange<EdgeType>
+  | EdgeReplaceChange<EdgeType>;

packages/react/src/types/general.ts

@@ -16,8 +16,8 @@ import {
 import type { NodeChange, EdgeChange, Node, Edge, ReactFlowInstance, EdgeProps } from '.';
 import { ComponentType } from 'react';
 
-export type OnNodesChange = (changes: NodeChange[]) => void;
-export type OnEdgesChange = (changes: EdgeChange[]) => void;
+export type OnNodesChange<NodeType extends Node = Node> = (changes: NodeChange<NodeType>[]) => void;
+export type OnEdgesChange<EdgeType extends Edge = Edge> = (changes: EdgeChange<EdgeType>[]) => void;
 
 export type OnNodesDelete = (nodes: Node[]) => void;
 export type OnEdgesDelete = (edges: Edge[]) => void;

packages/react/src/utils/changes.ts

@@ -188,7 +188,10 @@ function applyChange(change: any, element: any, elements: any[] = []): any {
       <ReactFLow nodes={nodes} edges={edges} onNodesChange={onNodesChange} />
     );
  */
-export function applyNodeChanges<NodeType extends Node = Node>(changes: NodeChange[], nodes: NodeType[]): NodeType[] {
+export function applyNodeChanges<NodeType extends Node = Node>(
+  changes: NodeChange<NodeType>[],
+  nodes: NodeType[]
+): NodeType[] {
   return applyChanges(changes, nodes) as NodeType[];
 }
 
@@ -212,7 +215,10 @@ export function applyNodeChanges<NodeType extends Node = Node>(changes: NodeChan
       <ReactFlow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
     );
  */
-export function applyEdgeChanges<EdgeType extends Edge = Edge>(changes: EdgeChange[], edges: EdgeType[]): EdgeType[] {
+export function applyEdgeChanges<EdgeType extends Edge = Edge>(
+  changes: EdgeChange<EdgeType>[],
+  edges: EdgeType[]
+): EdgeType[] {
   return applyChanges(changes, edges) as EdgeType[];
 }