refactor(types): use same structure for nodes and edges

packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx

@@ -5,20 +5,20 @@ import { EdgeAnchor } from '../Edges/EdgeAnchor';
 import type { EdgeWrapperProps, Edge } from '../../types/edges';
 import { useStoreApi } from '../../hooks/useStore';
 
-type EdgeUpdateAnchorsProps = {
-  edge: Edge;
+type EdgeUpdateAnchorsProps<EdgeType extends Edge = Edge> = {
+  edge: EdgeType;
   isUpdatable: boolean | 'source' | 'target';
   edgeUpdaterRadius: EdgeWrapperProps['edgeUpdaterRadius'];
   sourceHandleId: Edge['sourceHandle'];
   targetHandleId: Edge['targetHandle'];
-  onEdgeUpdate: EdgeWrapperProps['onEdgeUpdate'];
-  onEdgeUpdateStart: EdgeWrapperProps['onEdgeUpdateStart'];
-  onEdgeUpdateEnd: EdgeWrapperProps['onEdgeUpdateEnd'];
+  onEdgeUpdate: EdgeWrapperProps<EdgeType>['onEdgeUpdate'];
+  onEdgeUpdateStart: EdgeWrapperProps<EdgeType>['onEdgeUpdateStart'];
+  onEdgeUpdateEnd: EdgeWrapperProps<EdgeType>['onEdgeUpdateEnd'];
   setUpdateHover: (hover: boolean) => void;
   setUpdating: (updating: boolean) => void;
 } & EdgePosition;
 
-export function EdgeUpdateAnchors({
+export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
   isUpdatable,
   edgeUpdaterRadius,
   edge,
@@ -35,7 +35,7 @@ export function EdgeUpdateAnchors({
   onEdgeUpdateEnd,
   setUpdating,
   setUpdateHover,
-}: EdgeUpdateAnchorsProps) {
+}: EdgeUpdateAnchorsProps<EdgeType>) {
   const store = useStoreApi();
 
   const handleEdgeUpdater = (event: React.MouseEvent<SVGGElement, MouseEvent>, isSourceHandle: boolean) => {

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

@@ -13,9 +13,9 @@ import { useStoreApi, useStore } from '../../hooks/useStore';
 import { ARIA_EDGE_DESC_KEY } from '../A11yDescriptions';
 import { builtinEdgeTypes, nullPosition } from './utils';
 import { EdgeUpdateAnchors } from './EdgeUpdateAnchors';
-import type { EdgeWrapperProps } from '../../types';
+import type { Edge, EdgeWrapperProps } from '../../types';
 
-export function EdgeWrapper({
+export function EdgeWrapper<EdgeType extends Edge = Edge>({
   id,
   edgesFocusable,
   edgesUpdatable,
@@ -34,8 +34,8 @@ export function EdgeWrapper({
   edgeTypes,
   noPanClassName,
   onError,
-}: EdgeWrapperProps): JSX.Element | null {
-  let edge = useStore((s) => s.edgeLookup.get(id)!);
+}: EdgeWrapperProps<EdgeType>): JSX.Element | null {
+  let edge = useStore((s) => s.edgeLookup.get(id)!) as EdgeType;
   const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
   edge = defaultEdgeOptions ? { ...defaultEdgeOptions, ...edge } : edge;
 
@@ -236,7 +236,7 @@ export function EdgeWrapper({
           />
         )}
         {isUpdatable && (
-          <EdgeUpdateAnchors
+          <EdgeUpdateAnchors<EdgeType>
             edge={edge}
             isUpdatable={isUpdatable}
             edgeUpdaterRadius={edgeUpdaterRadius}

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

@@ -68,7 +68,10 @@ const reactFlowFieldsToTrack = [
 ] as const;
 
 type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number];
-type StoreUpdaterProps<NodeType extends Node = Node> = Pick<ReactFlowProps<NodeType>, ReactFlowFieldsToTrack> & {
+type StoreUpdaterProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Pick<
+  ReactFlowProps<NodeType, EdgeType>,
+  ReactFlowFieldsToTrack
+> & {
   rfId: string;
 };
 
@@ -86,7 +89,9 @@ const selector = (s: ReactFlowState) => ({
   reset: s.reset,
 });
 
-export function StoreUpdater<NodeType extends Node = Node>(props: StoreUpdaterProps<NodeType>) {
+export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
+  props: StoreUpdaterProps<NodeType, EdgeType>
+) {
   const {
     setNodes,
     setEdges,
@@ -108,7 +113,7 @@ export function StoreUpdater<NodeType extends Node = Node>(props: StoreUpdaterPr
     };
   }, []);
 
-  const previousFields = useRef<Partial<StoreUpdaterProps<NodeType>>>({
+  const previousFields = useRef<Partial<StoreUpdaterProps<NodeType, EdgeType>>>({
     // these are values that are also passed directly to other components
     // than the StoreUpdater. We can reduce the number of setStore calls
     // by setting the same values here as prev fields.