🐛 feat: add edge type (#100)

Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>
ant-design · Apr 8, 2024 · 7194d19 · 7194d19
1 parent d1f081d
commit 7194d19
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 18 deletions.
diff --git a/docs/guide/demos/customEdge/ButtonEdge.tsx b/docs/guide/demos/customEdge/ButtonEdge.tsx
@@ -6,17 +6,19 @@ const onEdgeClick = (evt, id) => {
   alert(` ${id}`);
 };
 
-export default function CustomEdge({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  style = {},
-  markerEnd,
-}: EdgeProps) {
+export default function CustomEdge(edge: EdgeProps) {
+  const {
+    id,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    style = {},
+    markerEnd,
+  } = edge;
+
   const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
     sourceY,
@@ -25,10 +27,16 @@ export default function CustomEdge({
     targetY,
     targetPosition,
   });
+
   const { styles } = useStyles();
   return (
     <>
-      <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
+      <BaseEdge
+        className={edge.data.className}
+        path={edgePath}
+        markerEnd={markerEnd}
+        style={style}
+      />
       <EdgeLabelRenderer>
         <div
           style={{

diff --git a/docs/guide/demos/customEdge/index.tsx b/docs/guide/demos/customEdge/index.tsx
@@ -2,7 +2,15 @@
  * compact: true
  * defaultShowCode: true
  */
-import { FlowView } from '@ant-design/pro-flow';
+import {
+  FlowPanel,
+  FlowView,
+  FlowViewProvider,
+  SelectType,
+  useFlowViewer,
+} from '@ant-design/pro-flow';
+import { Button } from 'antd';
+import { useMemo } from 'react';
 import ButtonEdge from './ButtonEdge';
 import useStyles from './btn.style';
 import { getEdges, nodes } from './data';
@@ -13,12 +21,48 @@ const edgeTypes = {
 
 function App() {
   const { styles } = useStyles();
+  const edges = useMemo(() => getEdges(styles.customEdge), []);
+  const { selectEdges } = useFlowViewer();
 
   return (
     <div className={styles.container}>
-      <FlowView nodes={nodes} edges={getEdges(styles.customEdge)} edgeTypes={edgeTypes} />
+      <FlowView nodes={nodes} edges={edges} edgeTypes={edgeTypes}>
+        <FlowPanel position={'top-center'}>
+          <div>
+            <Button
+              onClick={() => {
+                selectEdges(['e1', 'e2'], SelectType.DEFAULT);
+              }}
+            >
+              edge select is default
+            </Button>
+            <Button
+              onClick={() => {
+                selectEdges(['e1', 'e2'], SelectType.DANGER);
+              }}
+            >
+              edge select is danger
+            </Button>
+            <Button
+              onClick={() => {
+                selectEdges(['e1', 'e2'], SelectType.WARNING);
+              }}
+            >
+              edge select is warning
+            </Button>
+          </div>
+        </FlowPanel>
+      </FlowView>
     </div>
   );
 }
 
-export default App;
+function ProApp() {
+  return (
+    <FlowViewProvider>
+      <App />
+    </FlowViewProvider>
+  );
+}
+
+export default ProApp;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/pro-flow",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "description": "A React based Flow components",
   "keywords": [
     "flow",

diff --git a/src/FlowView/helper.tsx b/src/FlowView/helper.tsx
@@ -160,6 +160,8 @@ export function getRenderEdges(edges: FlowViewEdge[]) {
       id = `${source}-${target}`,
     } = edge;
 
+    const _className = getEdgeClsFromSelectType(select) + ' ' + className;
+
     return {
       ...edge,
       id,
@@ -168,10 +170,15 @@ export function getRenderEdges(edges: FlowViewEdge[]) {
       sourceHandle,
       targetHandle,
       type,
-      data,
       animated,
+      select,
       label,
-      className: getEdgeClsFromSelectType(select) + ' ' + className,
+      data: {
+        select,
+        className: _className,
+        ...data,
+      },
+      className: _className,
     };
   });
 }