refactor(edges): pass original source and target ids, cleanup #476

src/components/Edges/BezierEdge.tsx

@@ -3,7 +3,7 @@ import React, { memo } from 'react';
 import EdgeText from './EdgeText';
 
 import { getMarkerEnd, getCenter } from './utils';
-import { EdgeBezierProps, Position } from '../../types';
+import { EdgeProps, Position } from '../../types';
 
 interface GetBezierPathParams {
   sourceX: number;
@@ -55,7 +55,7 @@ export default memo(
     style,
     arrowHeadType,
     markerEndId,
-  }: EdgeBezierProps) => {
+  }: EdgeProps) => {
     const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY });
     const path = getBezierPath({
       sourceX,

src/components/Edges/wrapEdge.tsx

@@ -1,86 +1,80 @@
-import React, { memo, ComponentType, CSSProperties } from 'react';
+import React, { memo, useMemo, ComponentType, CSSProperties, useCallback } from 'react';
 import cc from 'classcat';
 
 import { useStoreActions } from '../../store/hooks';
-import { ElementId, Edge, EdgeCompProps } from '../../types';
+import { Edge, EdgeProps, WrapEdgeProps } from '../../types';
 
-interface EdgeWrapperProps {
+export default (EdgeComponent: ComponentType<EdgeProps>) => {
-  id: ElementId;
-  source: ElementId;
-  target: ElementId;
-  type: any;
-  label?: string;
-  labelStyle?: CSSProperties;
-  labelShowBg?: boolean;
-  labelBgStyle?: CSSProperties;
-  labelBgPadding?: [number, number];
-  labelBgBorderRadius?: number;
-  className?: string;
-  onClick?: (event: React.MouseEvent, edge: Edge) => void;
-  animated?: boolean;
-  selected: boolean;
-  elementsSelectable: boolean;
-  isHidden?: boolean;
-  data?: any;
-}
-
-export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
   const EdgeWrapper = ({
     id,
-    source,
+    className,
-    target,
     type,
-    animated,
+    data,
-    selected,
     onClick,
-    elementsSelectable,
+    selected,
+    animated,
     label,
     labelStyle,
     labelShowBg,
     labelBgStyle,
     labelBgPadding,
     labelBgBorderRadius,
-    className,
+    style,
+    arrowHeadType,
+    source,
+    target,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    elementsSelectable,
+    markerEndId,
     isHidden,
-    data,
+  }: WrapEdgeProps) => {
-    ...rest
-  }: EdgeWrapperProps) => {
     const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
 
+    const edgeClasses = cc(['react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated }]);
+
+    const edgeGroupStyle: CSSProperties = useMemo(
+      () => ({
+        pointerEvents: elementsSelectable || onClick ? 'all' : 'none',
+      }),
+      [elementsSelectable, onClick]
+    );
+
+    const onEdgeClick = useCallback(
+      (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
+        if (elementsSelectable) {
+          setSelectedElements({ id, source, target });
+        }
+
+        if (onClick) {
+          const edgeElement: Edge = { id, source, target, type };
+
+          if (typeof data !== 'undefined') {
+            edgeElement.data = data;
+          }
+
+          onClick(event, edgeElement);
+        }
+      },
+      [elementsSelectable, id, source, target, type, data, onClick]
+    );
+
     if (isHidden) {
       return null;
     }
 
-    const edgeClasses = cc(['react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated }]);
-    const edgeGroupStyle: CSSProperties = {
-      pointerEvents: elementsSelectable || onClick ? 'all' : 'none',
-    };
-    const onEdgeClick = (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
-      if (elementsSelectable) {
-        setSelectedElements({ id, source, target });
-      }
-
-      if (onClick) {
-        const edgeElement: Edge = { id, source, target, type };
-
-        if (typeof data !== 'undefined') {
-          edgeElement.data = data;
-        }
-
-        onClick(event, edgeElement);
-      }
-    };
-
     return (
       <g className={edgeClasses} onClick={onEdgeClick} style={edgeGroupStyle}>
         <EdgeComponent
           id={id}
           source={source}
           target={target}
-          type={type}
-          animated={animated}
           selected={selected}
-          onClick={onClick}
+          animated={animated}
           label={label}
           labelStyle={labelStyle}
           labelShowBg={labelShowBg}
@@ -88,7 +82,15 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
           labelBgPadding={labelBgPadding}
           labelBgBorderRadius={labelBgBorderRadius}
           data={data}
-          {...rest}
+          style={style}
+          arrowHeadType={arrowHeadType}
+          sourceX={sourceX}
+          sourceY={sourceY}
+          targetX={targetX}
+          targetY={targetY}
+          sourcePosition={sourcePosition}
+          targetPosition={targetPosition}
+          markerEndId={markerEndId}
         />
       </g>
     );

src/container/EdgeRenderer/index.tsx

@@ -175,8 +175,8 @@ function renderEdge(
       labelBgBorderRadius={edge.labelBgBorderRadius}
       style={edge.style}
       arrowHeadType={edge.arrowHeadType}
-      source={sourceId}
+      source={edge.source}
-      target={targetId}
+      target={edge.target}
       sourceHandleId={sourceHandleId}
       targetHandleId={targetHandleId}
       sourceX={sourceX}

src/container/EdgeRenderer/utils.ts

@@ -3,21 +3,21 @@ import { ComponentType } from 'react';
 import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
 import wrapEdge from '../../components/Edges/wrapEdge';
 
-import { EdgeTypesType, EdgeCompProps } from '../../types';
+import { EdgeTypesType, EdgeProps } from '../../types';
 
 export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType {
   const standardTypes: EdgeTypesType = {
-    default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<EdgeCompProps>),
+    default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<EdgeProps>),
-    straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeCompProps>),
+    straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeProps>),
-    step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType<EdgeCompProps>),
+    step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType<EdgeProps>),
-    smoothstep: wrapEdge((edgeTypes.step || SmoothStepEdge) as ComponentType<EdgeCompProps>),
+    smoothstep: wrapEdge((edgeTypes.step || SmoothStepEdge) as ComponentType<EdgeProps>),
   };
 
   const wrappedTypes = {} as EdgeTypesType;
   const specialTypes: EdgeTypesType = Object.keys(edgeTypes)
     .filter((k) => !['default', 'bezier'].includes(k))
     .reduce((res, key) => {
-      res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType<EdgeCompProps>);
+      res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType<EdgeProps>);
 
       return res;
     }, wrappedTypes);

src/types/index.ts

@@ -89,12 +89,48 @@ export interface SelectionRect extends Rect {
   draw: boolean;
 }
 
-export interface EdgeProps {
+export interface WrapEdgeProps {
   id: ElementId;
+  className?: string;
+  type: string;
+  data?: any;
+  onClick?: (event: React.MouseEvent, edge: Edge) => void;
+  selected: boolean;
+  animated?: boolean;
+  label?: string;
+  labelStyle?: CSSProperties;
+  labelShowBg?: boolean;
+  labelBgStyle?: CSSProperties;
+  labelBgPadding?: [number, number];
+  labelBgBorderRadius?: number;
+  style?: CSSProperties;
+  arrowHeadType?: ArrowHeadType;
+  source: ElementId;
+  target: ElementId;
+  sourceHandleId?: string;
   sourceX: number;
   sourceY: number;
   targetX: number;
   targetY: number;
+  sourcePosition: Position;
+  targetPosition: Position;
+  elementsSelectable?: boolean;
+  markerEndId?: string;
+  isHidden?: boolean;
+}
+
+export interface EdgeProps {
+  id: ElementId;
+  source: ElementId;
+  target: ElementId;
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+  selected?: boolean;
+  animated?: boolean;
+  sourcePosition: Position;
+  targetPosition: Position;
   label?: string;
   labelStyle?: CSSProperties;
   labelShowBg?: boolean;
@@ -106,14 +142,19 @@ export interface EdgeProps {
   markerEndId?: string;
   data?: any;
 }
-
+export interface EdgeSmoothStepProps extends EdgeProps {
-export interface EdgeBezierProps extends EdgeProps {
+  borderRadius?: number;
-  sourcePosition: Position;
-  targetPosition: Position;
 }
 
-export interface EdgeSmoothStepProps extends EdgeBezierProps {
+export interface EdgeTextProps {
-  borderRadius?: number;
+  x: number;
+  y: number;
+  label?: string;
+  labelStyle?: CSSProperties;
+  labelShowBg?: boolean;
+  labelBgStyle?: CSSProperties;
+  labelBgPadding?: [number, number];
+  labelBgBorderRadius?: number;
 }
 
 export interface NodeProps {
@@ -237,34 +278,6 @@ export interface HandleProps {
   className?: string;
 }
 
-export interface EdgeCompProps {
-  id: ElementId;
-  source: ElementId;
-  target: ElementId;
-  type: any;
-  label?: string;
-  labelStyle?: CSSProperties;
-  labelShowBg?: boolean;
-  labelBgStyle?: CSSProperties;
-  labelBgPadding?: [number, number];
-  labelBgBorderRadius?: number;
-  onClick?: (event: ReactMouseEvent, edge: Edge) => void;
-  animated?: boolean;
-  selected?: boolean;
-  data?: any;
-}
-
-export interface EdgeTextProps {
-  x: number;
-  y: number;
-  label?: string;
-  labelStyle?: CSSProperties;
-  labelShowBg?: boolean;
-  labelBgStyle?: CSSProperties;
-  labelBgPadding?: [number, number];
-  labelBgBorderRadius?: number;
-}
-
 export type NodePosUpdate = {
   id: ElementId;
   pos: XYPosition;