From 67b1c38c9b7f02e7ba56c1b6d4ead86febb02aa7 Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Tue, 25 Jun 2024 19:01:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20edge=E5=88=A0=E9=99=A4=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/workflow/common/CustomLine.vue |  2 +-
 ui/src/workflow/common/edge.ts        | 71 ++++++++++++++++-----------
 ui/src/workflow/common/shortcut.ts    | 13 ++++-
 3 files changed, 55 insertions(+), 31 deletions(-)

diff --git a/ui/src/workflow/common/CustomLine.vue b/ui/src/workflow/common/CustomLine.vue
index 6277e7608..3765d0169 100644
--- a/ui/src/workflow/common/CustomLine.vue
+++ b/ui/src/workflow/common/CustomLine.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="custom-edge cursor" v-show="props.model.isHovered" @click.stop>
+  <div class="custom-edge cursor" v-show="props.model.isHovered">
     <svg
       @click="deleteEdge"
       width="100%"
diff --git a/ui/src/workflow/common/edge.ts b/ui/src/workflow/common/edge.ts
index 69a73d18a..49d3c04e4 100644
--- a/ui/src/workflow/common/edge.ts
+++ b/ui/src/workflow/common/edge.ts
@@ -2,7 +2,15 @@ import { BezierEdge, BezierEdgeModel, h } from '@logicflow/core'
 import { createApp, h as vh } from 'vue'
 
 import CustomLine from './CustomLine.vue'
-
+function isMouseInElement(element: any, e: any) {
+  const rect = element.getBoundingClientRect()
+  return (
+    e.clientX >= rect.left &&
+    e.clientX <= rect.right &&
+    e.clientY >= rect.top &&
+    e.clientY <= rect.bottom
+  )
+}
 const DEFAULT_WIDTH = 32
 const DEFAULT_HEIGHT = 32
 class CustomEdge2 extends BezierEdge {
@@ -11,7 +19,17 @@ class CustomEdge2 extends BezierEdge {
   constructor() {
     super()
     this.isMounted = false
+    this.handleMouseUp = (e: any) => {
+      const element = e.target.parentNode.parentNode.querySelector('.lf-custom-edge-wrapper')
+      if (isMouseInElement(element, e)) {
+        this.props.model.graphModel.eventCenter.emit('delete_node', {
+          node: this.props.model,
+          confirm: false
+        })
+      }
+    }
   }
+
   getEdge() {
     const { model } = this.props
     const id = model.id
@@ -39,7 +57,7 @@ class CustomEdge2 extends BezierEdge {
       width: customWidth,
       height: customHeight
     }
-    console.log(this)
+
     const app = createApp({
       render: () => vh(CustomLine, { model: this.props.model })
     })
@@ -52,33 +70,28 @@ class CustomEdge2 extends BezierEdge {
     }, 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
-                }
+
+    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',
         {
@@ -95,7 +108,7 @@ class CustomEdge2 extends BezierEdge {
           })
         ]
       )
-    ]
+    ])
   }
 }
 
diff --git a/ui/src/workflow/common/shortcut.ts b/ui/src/workflow/common/shortcut.ts
index 1d3abe15d..e3515d435 100644
--- a/ui/src/workflow/common/shortcut.ts
+++ b/ui/src/workflow/common/shortcut.ts
@@ -80,12 +80,23 @@ export function initDefaultShortcut(lf: LogicFlow, graph: GraphModel) {
     }
     return false
   }
-  const delete_node = () => {
+  const delete_node = (params?: { node?: any; confirm?: boolean }) => {
     const defaultOptions: Object = {
       showCancelButton: true,
       confirmButtonText: '确定',
       cancelButtonText: '取消'
     }
+    if (params && params.node) {
+      if (params.confirm === true || params.confirm === undefined) {
+        ElMessageBox.confirm('确定删除该节点？', defaultOptions).then(() => {
+          lf.deleteEdge(params.node.id)
+        })
+      } else {
+        lf.deleteEdge(params.node.id)
+      }
+      return
+    }
+
     ElMessageBox.confirm('确定删除该节点？', defaultOptions).then(() => {
       if (!keyboardOptions?.enabled) return true
       if (graph.textEditElement) return true