From 2e15fd72ee5d4076704b0cb63f6ce65e55be7e3f Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 28 Nov 2023 14:30:26 +0100
Subject: [PATCH] fix(react) added internal edge components, to make id,
 source, handle optional on exported edges

---
 .../react/src/components/Edges/BezierEdge.tsx |   6 +-
 .../components/Edges/BezierEdgeInternal.tsx   |  59 +++++++++
 .../src/components/Edges/SimpleBezierEdge.tsx |   6 +-
 .../Edges/SimpleBezierEdgeInternal.tsx        | 124 ++++++++++++++++++
 .../src/components/Edges/SmoothStepEdge.tsx   |   6 +-
 .../Edges/SmoothStepEdgeInternal.tsx          |  60 +++++++++
 .../react/src/components/Edges/StepEdge.tsx   |   3 +-
 .../src/components/Edges/StepEdgeInternal.tsx |  15 +++
 .../src/components/Edges/StraightEdge.tsx     |   6 +-
 .../components/Edges/StraightEdgeInternal.tsx |  48 +++++++
 .../react/src/components/Edges/internal.ts    |   5 +
 .../react/src/container/EdgeRenderer/utils.ts |   2 +-
 .../react/src/container/ReactFlow/index.tsx   |   2 +-
 13 files changed, 331 insertions(+), 11 deletions(-)
 create mode 100644 packages/react/src/components/Edges/BezierEdgeInternal.tsx
 create mode 100644 packages/react/src/components/Edges/SimpleBezierEdgeInternal.tsx
 create mode 100644 packages/react/src/components/Edges/SmoothStepEdgeInternal.tsx
 create mode 100644 packages/react/src/components/Edges/StepEdgeInternal.tsx
 create mode 100644 packages/react/src/components/Edges/StraightEdgeInternal.tsx
 create mode 100644 packages/react/src/components/Edges/internal.ts

diff --git a/packages/react/src/components/Edges/BezierEdge.tsx b/packages/react/src/components/Edges/BezierEdge.tsx
index 8f446393..9187131c 100644
--- a/packages/react/src/components/Edges/BezierEdge.tsx
+++ b/packages/react/src/components/Edges/BezierEdge.tsx
@@ -1,11 +1,12 @@
 import { memo } from 'react';
-import { Position, getBezierPath } from '@xyflow/system';
+import { type Optional, Position, getBezierPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { BezierEdgeProps } from '../../types';
 
 const BezierEdge = memo(
   ({
+    id,
     sourceX,
     sourceY,
     targetX,
@@ -23,7 +24,7 @@ const BezierEdge = memo(
     markerStart,
     pathOptions,
     interactionWidth,
-  }: BezierEdgeProps) => {
+  }: Optional<BezierEdgeProps, 'id' | 'source' | 'target'>) => {
     const [path, labelX, labelY] = getBezierPath({
       sourceX,
       sourceY,
@@ -36,6 +37,7 @@ const BezierEdge = memo(
 
     return (
       <BaseEdge
+        id={id}
         path={path}
         labelX={labelX}
         labelY={labelY}
diff --git a/packages/react/src/components/Edges/BezierEdgeInternal.tsx b/packages/react/src/components/Edges/BezierEdgeInternal.tsx
new file mode 100644
index 00000000..8f446393
--- /dev/null
+++ b/packages/react/src/components/Edges/BezierEdgeInternal.tsx
@@ -0,0 +1,59 @@
+import { memo } from 'react';
+import { Position, getBezierPath } from '@xyflow/system';
+
+import BaseEdge from './BaseEdge';
+import type { BezierEdgeProps } from '../../types';
+
+const BezierEdge = memo(
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition = Position.Bottom,
+    targetPosition = Position.Top,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+    pathOptions,
+    interactionWidth,
+  }: BezierEdgeProps) => {
+    const [path, labelX, labelY] = getBezierPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+      curvature: pathOptions?.curvature,
+    });
+
+    return (
+      <BaseEdge
+        path={path}
+        labelX={labelX}
+        labelY={labelY}
+        label={label}
+        labelStyle={labelStyle}
+        labelShowBg={labelShowBg}
+        labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
+        style={style}
+        markerEnd={markerEnd}
+        markerStart={markerStart}
+        interactionWidth={interactionWidth}
+      />
+    );
+  }
+);
+
+BezierEdge.displayName = 'BezierEdge';
+
+export default BezierEdge;
diff --git a/packages/react/src/components/Edges/SimpleBezierEdge.tsx b/packages/react/src/components/Edges/SimpleBezierEdge.tsx
index d9fa50c4..1132e216 100644
--- a/packages/react/src/components/Edges/SimpleBezierEdge.tsx
+++ b/packages/react/src/components/Edges/SimpleBezierEdge.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { Position, getBezierEdgeCenter } from '@xyflow/system';
+import { type Optional, Position, getBezierEdgeCenter } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { EdgeProps } from '../../types';
@@ -73,6 +73,7 @@ export function getSimpleBezierPath({
 
 const SimpleBezierEdge = memo(
   ({
+    id,
     sourceX,
     sourceY,
     targetX,
@@ -89,7 +90,7 @@ const SimpleBezierEdge = memo(
     markerEnd,
     markerStart,
     interactionWidth,
-  }: EdgeProps) => {
+  }: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
     const [path, labelX, labelY] = getSimpleBezierPath({
       sourceX,
       sourceY,
@@ -101,6 +102,7 @@ const SimpleBezierEdge = memo(
 
     return (
       <BaseEdge
+        id={id}
         path={path}
         labelX={labelX}
         labelY={labelY}
diff --git a/packages/react/src/components/Edges/SimpleBezierEdgeInternal.tsx b/packages/react/src/components/Edges/SimpleBezierEdgeInternal.tsx
new file mode 100644
index 00000000..d9fa50c4
--- /dev/null
+++ b/packages/react/src/components/Edges/SimpleBezierEdgeInternal.tsx
@@ -0,0 +1,124 @@
+import { memo } from 'react';
+import { Position, getBezierEdgeCenter } from '@xyflow/system';
+
+import BaseEdge from './BaseEdge';
+import type { EdgeProps } from '../../types';
+
+export interface GetSimpleBezierPathParams {
+  sourceX: number;
+  sourceY: number;
+  sourcePosition?: Position;
+  targetX: number;
+  targetY: number;
+  targetPosition?: Position;
+}
+
+interface GetControlParams {
+  pos: Position;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number] {
+  if (pos === Position.Left || pos === Position.Right) {
+    return [0.5 * (x1 + x2), y1];
+  }
+
+  return [x1, 0.5 * (y1 + y2)];
+}
+
+export function getSimpleBezierPath({
+  sourceX,
+  sourceY,
+  sourcePosition = Position.Bottom,
+  targetX,
+  targetY,
+  targetPosition = Position.Top,
+}: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] {
+  const [sourceControlX, sourceControlY] = getControl({
+    pos: sourcePosition,
+    x1: sourceX,
+    y1: sourceY,
+    x2: targetX,
+    y2: targetY,
+  });
+  const [targetControlX, targetControlY] = getControl({
+    pos: targetPosition,
+    x1: targetX,
+    y1: targetY,
+    x2: sourceX,
+    y2: sourceY,
+  });
+  const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourceControlX,
+    sourceControlY,
+    targetControlX,
+    targetControlY,
+  });
+
+  return [
+    `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
+    labelX,
+    labelY,
+    offsetX,
+    offsetY,
+  ];
+}
+
+const SimpleBezierEdge = memo(
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition = Position.Bottom,
+    targetPosition = Position.Top,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+    interactionWidth,
+  }: EdgeProps) => {
+    const [path, labelX, labelY] = getSimpleBezierPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+    });
+
+    return (
+      <BaseEdge
+        path={path}
+        labelX={labelX}
+        labelY={labelY}
+        label={label}
+        labelStyle={labelStyle}
+        labelShowBg={labelShowBg}
+        labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
+        style={style}
+        markerEnd={markerEnd}
+        markerStart={markerStart}
+        interactionWidth={interactionWidth}
+      />
+    );
+  }
+);
+
+SimpleBezierEdge.displayName = 'SimpleBezierEdge';
+
+export default SimpleBezierEdge;
diff --git a/packages/react/src/components/Edges/SmoothStepEdge.tsx b/packages/react/src/components/Edges/SmoothStepEdge.tsx
index be635a4e..a6965ca7 100644
--- a/packages/react/src/components/Edges/SmoothStepEdge.tsx
+++ b/packages/react/src/components/Edges/SmoothStepEdge.tsx
@@ -1,11 +1,12 @@
 import { memo } from 'react';
-import { Position, getSmoothStepPath } from '@xyflow/system';
+import { type Optional, Position, getSmoothStepPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { SmoothStepEdgeProps } from '../../types';
 
 const SmoothStepEdge = memo(
   ({
+    id,
     sourceX,
     sourceY,
     targetX,
@@ -23,7 +24,7 @@ const SmoothStepEdge = memo(
     markerStart,
     pathOptions,
     interactionWidth,
-  }: SmoothStepEdgeProps) => {
+  }: Optional<SmoothStepEdgeProps, 'id' | 'source' | 'target'>) => {
     const [path, labelX, labelY] = getSmoothStepPath({
       sourceX,
       sourceY,
@@ -37,6 +38,7 @@ const SmoothStepEdge = memo(
 
     return (
       <BaseEdge
+        id={id}
         path={path}
         labelX={labelX}
         labelY={labelY}
diff --git a/packages/react/src/components/Edges/SmoothStepEdgeInternal.tsx b/packages/react/src/components/Edges/SmoothStepEdgeInternal.tsx
new file mode 100644
index 00000000..be635a4e
--- /dev/null
+++ b/packages/react/src/components/Edges/SmoothStepEdgeInternal.tsx
@@ -0,0 +1,60 @@
+import { memo } from 'react';
+import { Position, getSmoothStepPath } from '@xyflow/system';
+
+import BaseEdge from './BaseEdge';
+import type { SmoothStepEdgeProps } from '../../types';
+
+const SmoothStepEdge = memo(
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    sourcePosition = Position.Bottom,
+    targetPosition = Position.Top,
+    markerEnd,
+    markerStart,
+    pathOptions,
+    interactionWidth,
+  }: SmoothStepEdgeProps) => {
+    const [path, labelX, labelY] = getSmoothStepPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+      borderRadius: pathOptions?.borderRadius,
+      offset: pathOptions?.offset,
+    });
+
+    return (
+      <BaseEdge
+        path={path}
+        labelX={labelX}
+        labelY={labelY}
+        label={label}
+        labelStyle={labelStyle}
+        labelShowBg={labelShowBg}
+        labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
+        style={style}
+        markerEnd={markerEnd}
+        markerStart={markerStart}
+        interactionWidth={interactionWidth}
+      />
+    );
+  }
+);
+
+SmoothStepEdge.displayName = 'SmoothStepEdge';
+
+export default SmoothStepEdge;
diff --git a/packages/react/src/components/Edges/StepEdge.tsx b/packages/react/src/components/Edges/StepEdge.tsx
index df2646a7..8edd819a 100644
--- a/packages/react/src/components/Edges/StepEdge.tsx
+++ b/packages/react/src/components/Edges/StepEdge.tsx
@@ -1,9 +1,10 @@
 import { memo, useMemo } from 'react';
+import { Optional } from '@xyflow/system';
 
 import SmoothStepEdge from './SmoothStepEdge';
 import type { SmoothStepEdgeProps } from '../../types';
 
-const StepEdge = memo((props: SmoothStepEdgeProps) => (
+const StepEdge = memo((props: Optional<SmoothStepEdgeProps, 'id' | 'source' | 'target'>) => (
   <SmoothStepEdge
     {...props}
     pathOptions={useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset])}
diff --git a/packages/react/src/components/Edges/StepEdgeInternal.tsx b/packages/react/src/components/Edges/StepEdgeInternal.tsx
new file mode 100644
index 00000000..2772424d
--- /dev/null
+++ b/packages/react/src/components/Edges/StepEdgeInternal.tsx
@@ -0,0 +1,15 @@
+import { memo, useMemo } from 'react';
+
+import SmoothStepEdgeInternal from './SmoothStepEdgeInternal';
+import type { SmoothStepEdgeProps } from '../../types';
+
+const StepEdge = memo((props: SmoothStepEdgeProps) => (
+  <SmoothStepEdgeInternal
+    {...props}
+    pathOptions={useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset])}
+  />
+));
+
+StepEdge.displayName = 'StepEdge';
+
+export default StepEdge;
diff --git a/packages/react/src/components/Edges/StraightEdge.tsx b/packages/react/src/components/Edges/StraightEdge.tsx
index 06f4a161..094eb7f9 100644
--- a/packages/react/src/components/Edges/StraightEdge.tsx
+++ b/packages/react/src/components/Edges/StraightEdge.tsx
@@ -1,11 +1,12 @@
 import { memo } from 'react';
-import { getStraightPath } from '@xyflow/system';
+import { type Optional, getStraightPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { EdgeProps } from '../../types';
 
 const StraightEdge = memo(
   ({
+    id,
     sourceX,
     sourceY,
     targetX,
@@ -20,11 +21,12 @@ const StraightEdge = memo(
     markerEnd,
     markerStart,
     interactionWidth,
-  }: EdgeProps) => {
+  }: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
     const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
 
     return (
       <BaseEdge
+        id={id}
         path={path}
         labelX={labelX}
         labelY={labelY}
diff --git a/packages/react/src/components/Edges/StraightEdgeInternal.tsx b/packages/react/src/components/Edges/StraightEdgeInternal.tsx
new file mode 100644
index 00000000..06f4a161
--- /dev/null
+++ b/packages/react/src/components/Edges/StraightEdgeInternal.tsx
@@ -0,0 +1,48 @@
+import { memo } from 'react';
+import { getStraightPath } from '@xyflow/system';
+
+import BaseEdge from './BaseEdge';
+import type { EdgeProps } from '../../types';
+
+const StraightEdge = memo(
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+    interactionWidth,
+  }: EdgeProps) => {
+    const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
+
+    return (
+      <BaseEdge
+        path={path}
+        labelX={labelX}
+        labelY={labelY}
+        label={label}
+        labelStyle={labelStyle}
+        labelShowBg={labelShowBg}
+        labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
+        style={style}
+        markerEnd={markerEnd}
+        markerStart={markerStart}
+        interactionWidth={interactionWidth}
+      />
+    );
+  }
+);
+
+StraightEdge.displayName = 'StraightEdge';
+
+export default StraightEdge;
diff --git a/packages/react/src/components/Edges/internal.ts b/packages/react/src/components/Edges/internal.ts
new file mode 100644
index 00000000..11b86932
--- /dev/null
+++ b/packages/react/src/components/Edges/internal.ts
@@ -0,0 +1,5 @@
+export { default as SimpleBezierEdge } from './SimpleBezierEdgeInternal';
+export { default as SmoothStepEdge } from './SmoothStepEdgeInternal';
+export { default as StepEdge } from './StepEdgeInternal';
+export { default as StraightEdge } from './StraightEdgeInternal';
+export { default as BezierEdge } from './BezierEdgeInternal';
diff --git a/packages/react/src/container/EdgeRenderer/utils.ts b/packages/react/src/container/EdgeRenderer/utils.ts
index 0e8f39d3..03e0dba3 100644
--- a/packages/react/src/container/EdgeRenderer/utils.ts
+++ b/packages/react/src/container/EdgeRenderer/utils.ts
@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react';
 
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges/internal';
 import wrapEdge from '../../components/Edges/wrapEdge';
 import type { EdgeProps, EdgeTypes, EdgeTypesWrapped } from '../../types';
 
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index 1b3dc796..d780046e 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -12,7 +12,7 @@ import {
 } from '@xyflow/system';
 
 import Attribution from '../../components/Attribution';
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges/internal';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';