选中样式究极版

src/views/workflow/chart/context-menu-tool.vue

@@ -38,11 +38,12 @@ const onDel = () => {
 @use "@/views/workflow/instance/component/style";
 .context-menu-tool {
   min-width: 100px;
-  padding: 10px;
+  padding: 6px 10px;
   background-color: #ffffff;
   border: style.$borderStyle;
-  border-radius: 10px;
+  border-radius: 6px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  font-size: 13px;
   .del {
     color: red;
   }

src/views/workflow/chart/index.vue

@@ -297,7 +297,11 @@ const initChart = () => {
         const id = v4()
         return new Shape.Edge({
           id,
-          attrs: lineStyle,
+          attrs: {
+            select: false,
+            hover: false,
+            line: lineStyle,
+          },
           zIndex: -1,
           tools: [
             {
@@ -352,43 +356,79 @@ const initEdges = () => {
   }
 }
 const initWatch = () => {
-  state.graph.on('node:click', ({ e, x, y, node, view, port }) => {
+  state.graph.on('blank:click', () => {
+    state.graph.getCells().forEach(v => {
+      v.attr('select', false)
+      if (v.shape === 'edge') {
+        setEdgeStyle(v)
+      }
+    })
+  })
+  state.graph.on('cell:click', () => {
+    state.graph.getCells().forEach(v => {
+      v.attr('select', false)
+      if (v.shape === 'edge') {
+        setEdgeStyle(v)
+      }
+    })
+  })
+  state.graph.on('node:click', ({node}) => {
     setTimeout(() => {
       if (!state.isPort) {
         WorkflowStore.nodePanel(node)
+        // state.graph.getCells().forEach(v => v.attr('select', false))
+        node.attr('select', true)
+        const connectEdges = state.graph.getConnectedEdges(node.id)
+        connectEdges.forEach(edge => {
+          edge.attr('select', true)
+          setEdgeStyle(edge)
+        })
       }
     }, 50)
   })
-  state.graph.on('node:port:click', ({ e, x, y, node, view, port }) => {
+  state.graph.on('edge:click', ({edge}) => {
+    edge.attr('select', true)
+    const connectNodes = state.graph.getNeighbors(edge)
+    connectNodes.forEach(node => {
+      node.attr('select', true)
+    })
+  })
+  state.graph.on('node:port:click', () => {
     state.isPort = true;
     setTimeout(() => {
       state.isPort = false
     }, 100)
   })
-  state.graph.on('node:mouseenter', ({ e, node, view }) => {
+  state.graph.on('node:mouseenter', ({node}) => {
+    node.attr('hover', true)
     const connectEdges = state.graph.getConnectedEdges(node.id)
     connectEdges.forEach(edge => {
-      edge.attr(lineActiveStyle)
+      edge.attr('hover', true)
+      setEdgeStyle(edge)
     })
   })
-  state.graph.on('node:mouseleave', ({ e, node, view }) => {
+  state.graph.on('node:mouseleave', ({node}) => {
+    node.attr('hover', false)
     const connectEdges = state.graph.getConnectedEdges(node.id)
     connectEdges.forEach(edge => {
-      edge.attr(lineStyle)
+      edge.attr('hover', false)
+      setEdgeStyle(edge)
     })
   })
-  state.graph.on('edge:mouseenter', ({ e, edge, view }) => {
-    edge.attr(lineActiveStyle)
+  state.graph.on('edge:mouseenter', ({edge}) => {
+    edge.attr('hover', true)
+    setEdgeStyle(edge)
     const connectNodes = state.graph.getNeighbors(edge)
     connectNodes.forEach(node => {
-      node.attr('active', true)
+      node.attr('hover', true)
     })
   })
-  state.graph.on('edge:mouseleave', ({ e, edge, view }) => {
-    edge.attr(lineStyle)
+  state.graph.on('edge:mouseleave', ({edge}) => {
+    edge.attr('hover', false)
+    setEdgeStyle(edge)
     const connectNodes = state.graph.getNeighbors(edge)
     connectNodes.forEach(node => {
-      node.attr('active', false)
+      node.attr('hover', false)
     })
   })
   state.graph.on('scale', ({ sx, sy, ox, oy }) => {
@@ -433,6 +473,7 @@ const initPlug = () => {
     }),
   )
 }
+const setEdgeStyle = (edge) => edge.attr('line', edge.getAttrByPath('hover') || edge.getAttrByPath('select') ? lineActiveStyle : lineStyle)
 const graphZoom = (z) => {
   if (z) {
     state.graph.zoomTo(z)

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

@@ -5,7 +5,13 @@
     </div>
   </template>
   <template v-else>
-    <ElPopover placement="right" trigger="click">
+    <ElPopover
+      placement="right"
+      trigger="click"
+      :popper-style="{
+        padding: 0,
+        minWidth: 0,
+      }">
       <template #reference>
         <div class="port">
           <ElTooltip
@@ -105,6 +111,9 @@ const onAddNode = (type) => {
   }
 }
 .node-add {
-  width: 100px;
+  min-width: 100px;
+  padding: 6px 10px;
+  background-color: #ffffff;
+  font-size: 13px;
 }
 </style>

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 || state.active}">
+  <div class="node" ref="ref_node" :class="{active: state.active, panel: WorkflowStore.panel.node?.id === state.node?.id}">
     <div class="node-title">
       {{ state.nodeData?.title }}
       <div class="node-sub" v-if="state.nodeData?.subTitle">{{ state.nodeData.subTitle }}</div>
@@ -44,10 +44,8 @@ const state: any = reactive({
 const ref_node = ref()
 onMounted(() => {
   state.node = getNode()
-  state.node.on('change:attrs', ({options}) => {
-    if (options.propertyPath === 'attrs/active') {
-      state.active = options.propertyValue
-    }
+  state.node.on('change:attrs', () => {
+    state.active = state.node.getAttrByPath('hover') || state.node.getAttrByPath('select')
   })
   state.nodeData = state.node.data.workflowData
   nextTick(() => {
@@ -68,8 +66,12 @@ onMounted(() => {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   border-width: 4px;
   border-color: transparent;
-  &:hover, &.active {
-    border-color: var(--czr-main-color);
+  &.active {
+    border-color: rgba(var(--czr-main-color-rgb), 0.5);
+    cursor: pointer;
+  }
+  &.panel {
+    border-color: rgba(var(--czr-main-color-rgb), 1);
     cursor: pointer;
   }
   .node-title {

src/views/workflow/config.ts

@@ -6,18 +6,14 @@ import ifElseNodeDefault from "@/views/workflow/instance/if-else/default";
 import testNodeDefault from "@/views/workflow/instance/test/default";
 
 export const lineStyle = {
-  line: {
-    stroke: '#bcbcbc',
-    strokeWidth: 1,
-    targetMarker: null
-  },
+  stroke: '#bcbcbc',
+  strokeWidth: 1,
+  targetMarker: null
 }
 export const lineActiveStyle = {
-  line: {
-    stroke: 'var(--czr-main-color)',
-    strokeWidth: 2,
-    targetMarker: null
-  },
+  stroke: 'rgba(var(--czr-main-color-rgb), 0.5)',
+  strokeWidth: 2,
+  targetMarker: null
 }
 
 export const portStyle = {

src/views/workflow/handle.ts

@@ -22,7 +22,8 @@ export const handleNode = (no) => {
       },
     },
     attrs: {
-      active: false
+      select: false,
+      hover: false,
     },
     shape: 'workflow-node',
     portMarkup: [Markup.getForeignObjectMarkup()],
@@ -106,7 +107,11 @@ export const handleEdge = (ed) => {
       }
     },
     shape: 'edge',
-    attrs: lineStyle,
+    attrs: {
+      select: false,
+      hover: false,
+      line: lineStyle,
+    },
     zIndex: -1,
     // router: {
     //   name: 'manhattan',