update 思维导图选中

src/components/MindMap.vue

@@ -127,13 +127,24 @@ export default {
             attrs: {
               x: this.nodeHeight / 2,
               y: this.nodeHeight / 2,
+              width: this.nodeWidth + NODE_ICON_MARGIN + this.expendCollapseIconR,
+              height: this.nodeHeight
+            },
+            name: 'rect-shape'
+          })
+
+          // 有边框和背景色的box
+          group.addShape('rect', {
+            attrs: {
+              x: 0,
+              y: 0,
               width: this.nodeWidth,
               height: this.nodeHeight,
               radius: this.nodeHeight / 2,
               fill: nodeStyle.bg,
               stroke: nodeStyle.stroke
             },
-            name: 'rect-shape'
+            name: 'rect-content'
           })
 
           // 文本的部分
@@ -151,23 +162,27 @@ export default {
               textAlign: 'center',
               textBaseline: 'middle',
               fill: nodeStyle.color
-            }
+            },
+            name: 'rect-text'
           })
+
+          // 处理展开收起图标
           const hasChildren = cfg.children && cfg.children.length > 0
           if (hasChildren) {
-            // 展开收起
             group.addShape('marker', {
               attrs: {
-                x: this.nodeWidth + NODE_ICON_MARGIN + this.expendCollapseIconR,
+                x: this.nodeWidth + NODE_ICON_MARGIN,
                 y: this.nodeHeight / 2,
                 r: this.expendCollapseIconR,
                 symbol: COLLAPSE_ICON,
                 stroke: '#666',
                 lineWidth: 2
               },
+              name: 'expend-collapse',
               className: 'collapse-icon'
             })
           }
+
           nodeContainer.attr({
             x: 0,
             y: 0,
@@ -175,6 +190,26 @@ export default {
             height: this.nodeHeight
           })
           return nodeContainer
+        },
+        setState (name, value, item) {
+          console.log(item)
+          const group = item.getContainer()
+          const nodeDom = group.get('children')
+          const nodeBox = nodeDom[1]
+          const nodeText = nodeDom[2]
+          if (name === 'selected') {
+            if (value) {
+              nodeBox.attr('fill', '#D52C26')
+              nodeBox.attr('stroke', '#D52C26')
+              nodeText.attr('fill', '#FFFFFF')
+            } else {
+              const nodeColorIndex = item._cfg.model.depth % NODE_COLOR.length
+              const nodeStyle = NODE_COLOR[nodeColorIndex]
+              nodeBox.attr('fill', nodeStyle.bg)
+              nodeBox.attr('stroke', nodeStyle.stroke)
+              nodeText.attr('fill', nodeStyle.color)
+            }
+          }
         }
       }, 'single-shape')
       this.graph = new G6.TreeGraph({
@@ -182,20 +217,7 @@ export default {
         width: document.getElementById(this.domId).clientWidth,
         height: document.getElementById(this.domId).clientHeight,
         modes: {
-          default: [{
-            type: 'collapse-expand',
-            onChange: function onChange (item, collapsed) {
-              const data = item.get('model')
-              const icon = item.get('group').findByClassName('collapse-icon')
-              if (collapsed) {
-                icon.attr('symbol', EXPAND_ICON)
-              } else {
-                icon.attr('symbol', COLLAPSE_ICON)
-              }
-              data.collapsed = collapsed
-              return true
-            }
-          }, 'drag-canvas', 'zoom-canvas']
+          default: ['drag-canvas', 'zoom-canvas']
         },
         defaultNode: {
           type: 'tree-node',
@@ -204,7 +226,12 @@ export default {
         defaultEdge: {
           type: 'cubic-horizontal',
           style: {
-            stroke: '#A3B1BF'
+            stroke: '#A3B1BF',
+            endArrow: {
+              path: G6.Arrow.circle(2),
+              d: 0,
+              fill: '#A3B1BF'
+            }
           }
         },
         layout: {
@@ -227,6 +254,28 @@ export default {
       this.graph.data(this.data)
       this.graph.render()
       this.graph.fitView()
+      // 展开收起事件
+      this.graph.on('expend-collapse:click', (event) => {
+        const { item } = event
+        item.getModel().collapsed = !item.getModel().collapsed
+        // this.graph.setItemState(item, 'collapsed', item.getModel().collapsed)
+        this.graph.refreshItem(item)
+        this.graph.layout()
+      })
+      // 点击选中
+      this.graph.on('rect-content:click', (event) => {
+        this.handleSelectedNode(event)
+      })
+      this.graph.on('rect-text:click', (event) => {
+        this.handleSelectedNode(event)
+      })
+    },
+    handleSelectedNode (event) {
+      const { item } = event
+      item.getModel().selected = !item.getModel().selected
+      this.graph.setItemState(item, 'selected', item.getModel().selected)
+      this.graph.refreshItem(item)
+      this.graph.layout()
     },
     searchNode (nodeId) {
       const item = this.graph.findById(nodeId)

src/views/businessSupport/standardizationActivity/StandardizationActivityPage.vue

@@ -16,8 +16,7 @@
                 :filter-option="false"
                 :not-found-content="null"
                 @search="handleSearch"
-                @change="handleChange"
-              >
+                @change="handleChange">
                 <a-select-option v-for="d in nodeNameList" :key="d.id">
                   {{ d.name }}
                 </a-select-option>