连接桩

src/views/workflow/chart/index.vue

@@ -12,6 +12,7 @@ import {Graph, Shape} from '@antv/x6'
 import {WorkflowFunc} from "@/views/workflow/types";
 import {lineStyle} from "@/views/workflow/config";
 import {ElTooltip} from "element-plus";
+import nodeAdd from './node-add.vue'
 
 const emits = defineEmits([])
 const props = defineProps({
@@ -19,7 +20,8 @@ const props = defineProps({
 })
 const {proxy}: any = getCurrentInstance()
 const state: any = reactive({
-  graph: null
+  graph: null,
+  isPort: false
 })
 const ref_chart = ref()
 const workflowFuncInject = inject('workflowFunc', {} as WorkflowFunc)
@@ -80,49 +82,46 @@ const initChart = () => {
       if (container) {
         const portName = '<div><div><span style="font-weight: bold">点击</span>添加节点</div><div><span style="font-weight: bold">拖拽</span>连接节点</div></div>'
         const dom = createVNode(
-          ElTooltip,
-          {
-            effect: "light",
-            content: portName,
-            placement: "top",
-            rawContent: true
-          },
-          [
-            createVNode("div", {
-              class: "createVNode",
-              style: {
-                border: '1px solid #8f8f8f',
-                backgroundColor: '#ffffff',
-                height: '100%',
-                width: '100%',
-                borderRadius: '50%',
-              }
-            }),
-          ]
+          nodeAdd,
+          // {
+          //   // effect: "light",
+          //   // content: portName,
+          //   // placement: "top",
+          //   // rawContent: true
+          // },
+          // // [
+          // //   createVNode("div", {
+          // //     class: "createVNode",
+          // //     style: {
+          // //       border: '1px solid #8f8f8f',
+          // //       backgroundColor: '#ffffff',
+          // //       height: '100%',
+          // //       width: '100%',
+          // //       borderRadius: '50%',
+          // //     }
+          // //   }),
+          // // ]
         );
         render(dom, container);
       }
-      // container.addEventListener('mouseenter', (e: MouseEvent) => {
-      //   const tooltip = document.querySelector('.x6-tooltip') as HTMLElement
-      //   const content = tooltip?.querySelector('.ant-tooltip-inner') as HTMLElement
-      //   if (content) {
-      //     content.innerText = text
-      //     tooltip.style.left = `${e.clientX - content.offsetWidth / 2}px`
-      //     tooltip.style.top = `${e.clientY - 50}px`
-      //   }
-      // })
-      // container.addEventListener('mouseleave', () => {
-      //   const tooltip = document.querySelector('.x6-tooltip') as HTMLElement
-      //   tooltip.style.left = '-1000px'
-      //   tooltip.style.top = '-1000px'
-      // })
     }
   })
   graph.fromJSON(props.data)
   graph.zoomToFit({ maxScale: 1 })
   graph.centerContent() // 居中显示
-  graph.on('node:click', ({ e, x, y, node, view }) => {
-    workflowFuncInject.nodeClick(node)
+  graph.on('node:click', ({ e, x, y, node, view, port }) => {
+    setTimeout(() => {
+      if (!state.isPort) {
+        console.log(node)
+        workflowFuncInject.nodeClick(node)
+      }
+    }, 50)
+  })
+  graph.on('node:port:click', ({ e, x, y, node, view, port }) => {
+    state.isPort = true;
+    setTimeout(() => {
+      state.isPort = false
+    }, 100)
   })
   state.graph = graph
 }

src/views/workflow/chart/node-add.vue

@@ -0,0 +1,34 @@
+<template>
+  <ElPopover placement="right" :width="400" trigger="click">
+    <template #reference>
+      <ElTooltip
+        placement="top"
+        content="123"
+        raw-content
+      >
+        <div class="port"/>
+      </ElTooltip>
+    </template>
+    <div> asdasdasdasdSdasdasdasdasdsdasd</div>
+  </ElPopover>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive, ref} from "vue";
+import { ElPopover, ElTooltip } from 'element-plus';
+
+const emits = defineEmits([])
+const props = defineProps({})
+const {proxy}: any = getCurrentInstance()
+const state: any = reactive({})
+</script>
+
+<style lang="scss" scoped>
+.port {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #8f8f8f;
+  background-color: #ffffff;
+  border-radius: 50%;
+}
+</style>