From 422c92be172a21a7f325b72b3ecebc475304da02 Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Fri, 21 Jun 2024 18:00:58 +0800
Subject: [PATCH] =?UTF-8?q?=20feat:=20=E8=87=AA=E5=AE=9A=E4=B9=89edge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/workflow/common/CustomLine.vue |  5 ++
 ui/src/workflow/common/edge.ts        | 85 ++++++++++++++++++++++++++-
 2 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 ui/src/workflow/common/CustomLine.vue

diff --git a/ui/src/workflow/common/CustomLine.vue b/ui/src/workflow/common/CustomLine.vue
new file mode 100644
index 000000000..44e5ae1f0
--- /dev/null
+++ b/ui/src/workflow/common/CustomLine.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="custom-edge">x</div>
+</template>
+
+<style lang="scss"></style>
diff --git a/ui/src/workflow/common/edge.ts b/ui/src/workflow/common/edge.ts
index dd38bc703..8e5bbba28 100644
--- a/ui/src/workflow/common/edge.ts
+++ b/ui/src/workflow/common/edge.ts
@@ -1,6 +1,86 @@
-import { BezierEdge, BezierEdgeModel } from '@logicflow/core'
+import { BezierEdge, BezierEdgeModel, h } from '@logicflow/core'
+import { createApp, h as vh } from 'vue'
 
-class CustomEdge2 extends BezierEdge {}
+import CustomLine from './CustomLine.vue'
+
+const DEFAULT_WIDTH = 48
+const DEFAULT_HEIGHT = 32
+class CustomEdge2 extends BezierEdge {
+  isMounted
+  constructor() {
+    super()
+    this.isMounted = false
+  }
+  getEdge() {
+    const { model } = this.props
+    const id = model.id
+    const { customWidth = DEFAULT_WIDTH, customHeight = DEFAULT_HEIGHT } = model.getProperties()
+    const { startPoint, endPoint, path, isAnimation, arrowConfig } = model
+    const animationStyle = model.getEdgeAnimationStyle()
+    const {
+      strokeDasharray,
+      stroke,
+      strokeDashoffset,
+      animationName,
+      animationDuration,
+      animationIterationCount,
+      animationTimingFunction,
+      animationDirection
+    } = animationStyle
+    const positionData = {
+      x: (startPoint.x + endPoint.x - customWidth) / 2,
+      y: (startPoint.y + endPoint.y - customHeight) / 2,
+      width: customWidth,
+      height: customHeight
+    }
+    const style = model.getEdgeStyle()
+    const wrapperStyle = {
+      width: customWidth,
+      height: customHeight
+    }
+    const app = createApp({
+      render: () => vh(CustomLine, {})
+    })
+    setTimeout(() => {
+      const s = document.getElementById(id)
+      if (s && !this.isMounted) {
+        app.mount(s)
+        this.isMounted = true
+      }
+    }, 0)
+
+    delete style.stroke
+    return h('g', {}, [
+      h('style', { type: 'text/css' }, '.lf-edge{stroke:#afafaf}.lf-edge:hover{stroke: #3370FF;}'),
+      h('path', {
+        d: path,
+        ...style,
+        ...arrowConfig,
+        ...(isAnimation
+          ? {
+              strokeDasharray,
+              stroke,
+              style: {
+                strokeDashoffset,
+                animationName,
+                animationDuration,
+                animationIterationCount,
+                animationTimingFunction,
+                animationDirection
+              }
+            }
+          : {})
+      }),
+      h('foreignObject', { ...positionData, style: { overflow: 'visible' } }, [
+        h('div', {
+          id,
+          style: wrapperStyle,
+          className: 'lf-custom-edge-wrapper'
+        })
+      ])
+    ])
+  }
+}
 
 class CustomEdgeModel2 extends BezierEdgeModel {
   getArrowStyle() {
@@ -12,7 +92,6 @@ class CustomEdgeModel2 extends BezierEdgeModel {
 
   getEdgeStyle() {
     const style = super.getEdgeStyle()
-
     // svg属性
     style.strokeWidth = 2
     style.stroke = '#BBBFC4'