节点连线高亮

src/views/workflow/chart/index.vue

@@ -105,7 +105,7 @@
 <script setup lang="ts">
 import {createVNode, getCurrentInstance, nextTick, onMounted, reactive, ref, render, watch} from "vue";
 import {Graph, Path, Shape} from '@antv/x6'
-import {getNodeDefault, lineStyle} from "@/views/workflow/config";
+import {getNodeDefault, lineActiveStyle, lineStyle} from "@/views/workflow/config";
 import nodeAdd from './node-add.vue'
 import {register} from "@antv/x6-vue-shape";
 import WorkflowNode from "./node-index.vue";
@@ -365,6 +365,32 @@ const initWatch = () => {
       state.isPort = false
     }, 100)
   })
+  state.graph.on('node:mouseenter', ({ e, node, view }) => {
+    const connectEdges = state.graph.getConnectedEdges(node.id)
+    connectEdges.forEach(edge => {
+      edge.attr(lineActiveStyle)
+    })
+  })
+  state.graph.on('node:mouseleave', ({ e, node, view }) => {
+    const connectEdges = state.graph.getConnectedEdges(node.id)
+    connectEdges.forEach(edge => {
+      edge.attr(lineStyle)
+    })
+  })
+  state.graph.on('edge:mouseenter', ({ e, edge, view }) => {
+    edge.attr(lineActiveStyle)
+    const connectNodes = state.graph.getNeighbors(edge)
+    connectNodes.forEach(node => {
+      node.attr('active', true)
+    })
+  })
+  state.graph.on('edge:mouseleave', ({ e, edge, view }) => {
+    edge.attr(lineStyle)
+    const connectNodes = state.graph.getNeighbors(edge)
+    connectNodes.forEach(node => {
+      node.attr('active', false)
+    })
+  })
   state.graph.on('scale', ({ sx, sy, ox, oy }) => {
     state.zoom = sx
   })

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="node" ref="ref_node" :class="{active: state.node?.id === WorkflowStore.panel.node?.id}" @mouseenter="onMouseenter" @mouseleave="onMouseleave">
+  <div class="node" ref="ref_node" :class="{active: state.node?.id === WorkflowStore.panel.node?.id || state.active}">
     <div class="node-title">
       {{ state.nodeData?.title }}
       <div class="node-sub" v-if="state.nodeData?.subTitle">{{ state.nodeData.subTitle }}</div>
@@ -38,23 +38,17 @@ const props = defineProps({})
 const {proxy}: any = getCurrentInstance()
 const state: any = reactive({
   node: null,
-  nodeData: {}
+  nodeData: {},
+  active: false
 })
 const ref_node = ref()
-const onMouseenter = () => {
-  const connectEdges = WorkflowStore.graph.getConnectedEdges(state.node.id)
-  connectEdges.forEach(edge => {
-    edge.attr(lineActiveStyle)
-  })
-}
-const onMouseleave = () => {
-  const connectEdges = WorkflowStore.graph.getConnectedEdges(state.node.id)
-  connectEdges.forEach(edge => {
-    edge.attr(lineStyle)
-  })
-}
 onMounted(() => {
   state.node = getNode()
+  state.node.on('change:attrs', ({options}) => {
+    if (options.propertyPath === 'attrs/active') {
+      state.active = options.propertyValue
+    }
+  })
   state.nodeData = state.node.data.workflowData
   nextTick(() => {
     state.node.size(ref_node.value.clientWidth, ref_node.value.clientHeight)

src/views/workflow/handle.ts

@@ -19,7 +19,10 @@ export const handleNode = (no) => {
       workflowData: {
         ...no.data,
         id: no.id
-      }
+      },
+    },
+    attrs: {
+      active: false
     },
     shape: 'workflow-node',
     portMarkup: [Markup.getForeignObjectMarkup()],