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}