From 92a900fb0f44a045a63c58fb8f40229de3d130a8 Mon Sep 17 00:00:00 2001
From: jiangchu <jiangchu.wzy@antgroup.com>
Date: Tue, 19 Sep 2023 15:10:54 +0800
Subject: [PATCH] :sparkles: feat: edge border raduis type

---
 src/BasicEdge/index.tsx           | 28 ++++++++++++++++++++++++++++
 src/ProFlow/demos/ProFlowDemo.tsx | 23 +++++++++++++++++++++++
 src/ProFlow/helper.tsx            |  5 +++--
 src/ProFlow/index.tsx             | 10 +++++++++-
 4 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 src/BasicEdge/index.tsx

diff --git a/src/BasicEdge/index.tsx b/src/BasicEdge/index.tsx
new file mode 100644
index 0000000..8496a77
--- /dev/null
+++ b/src/BasicEdge/index.tsx
@@ -0,0 +1,28 @@
+import { BaseEdge, EdgeProps, getSmoothStepPath } from 'reactflow';
+
+export default function RadiusEdge({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+}: EdgeProps) {
+  const [edgePath] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: 50,
+  });
+
+  return (
+    <>
+      <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
+    </>
+  );
+}
diff --git a/src/ProFlow/demos/ProFlowDemo.tsx b/src/ProFlow/demos/ProFlowDemo.tsx
index 7543ed4..ed9e01a 100644
--- a/src/ProFlow/demos/ProFlowDemo.tsx
+++ b/src/ProFlow/demos/ProFlowDemo.tsx
@@ -29,6 +29,15 @@ const nodes: ProFlowNode[] = [
       describe: 'XXX_XXX_XXX_API',
     },
   },
+  {
+    id: 'b1',
+    select: NodeSelect.DANGER,
+    data: {
+      title: 'XXX_API',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+  },
   {
     id: 'a3',
     select: NodeSelect.WARNING,
@@ -115,6 +124,20 @@ const edges = [
     id: 'a1-a2',
     source: 'a1',
     target: 'a2',
+    type: 'smoothstep',
+    pathOptions: {
+      borderRadius: 20,
+    },
+  },
+  {
+    id: 'a1-b1',
+    source: 'a1',
+    target: 'b1',
+    type: 'smoothstep',
+    pathOptions: {
+      offset: 20,
+      borderRadius: 20,
+    },
   },
   {
     id: 'a2-a3',
diff --git a/src/ProFlow/helper.tsx b/src/ProFlow/helper.tsx
index dd8286e..8271ff6 100644
--- a/src/ProFlow/helper.tsx
+++ b/src/ProFlow/helper.tsx
@@ -106,14 +106,15 @@ function getEdgeClsFromNodeSelect(select: NodeSelect) {
   }
 }
 
-function getRenderEdge(node: NodeMapItem, targetNode: NodeMapItem): Edge {
+function getRenderEdge(node: NodeMapItem, targetNode: NodeMapItem) {
   const { id } = node;
   const { id: targetId, select = NodeSelect.DEFAULT } = targetNode;
+
   return {
     id: `${id}-${targetId}`,
     source: id!,
     target: targetId!,
-    type: 'smoothstep',
+    type: 'radiusEdge',
     className: getEdgeClsFromNodeSelect(select),
   };
 }
diff --git a/src/ProFlow/index.tsx b/src/ProFlow/index.tsx
index 6fe444c..6b69909 100644
--- a/src/ProFlow/index.tsx
+++ b/src/ProFlow/index.tsx
@@ -1,6 +1,7 @@
+import RadiusEdge from '@/BasicEdge';
 import ProFlowController from '@/ProFlowController';
 import React, { useMemo, type CSSProperties, type MouseEvent as ReactMouseEvent } from 'react';
-import ReactFlow, { Background, BackgroundVariant, Edge, Node } from 'reactflow';
+import ReactFlow, { Background, BackgroundVariant, Edge, Node, useEdgesState } from 'reactflow';
 import { ProFLowEdge, ProFlowNode } from './constants';
 import { convertMappingFrom, getRenderData } from './helper';
 import { useStyles } from './styles';
@@ -40,6 +41,10 @@ const ProFlow: React.FC<Partial<ProFlowProps>> = (props) => {
       };
     }
   }, [mapping]);
+  const [_edges] = useEdgesState(renderData.edges);
+
+  console.log(renderData.edges);
+  console.log(_edges);
 
   return (
     <ReactFlow
@@ -49,6 +54,9 @@ const ProFlow: React.FC<Partial<ProFlowProps>> = (props) => {
       onNodeClick={onNodeClick}
       nodes={renderData.nodes}
       edges={renderData.edges}
+      edgeTypes={{
+        radiusEdge: RadiusEdge,
+      }}
       panOnScroll
       fitView
       minZoom={MIN_ZOOM}