fix: 修复直接使用attr修改文本属性的问题

src/shape/shapeBase.ts

@@ -324,17 +324,17 @@ export const shapeBase: ShapeOptions = {
       const originstyles = {}
       deepMix(originstyles, originStyle, filtetDisableStatesStyle, enableStatesStyle)
 
-      for(const key in originstyles) {
-        const style = originstyles[key]
+      for(const originKey in originstyles) {
+        const style = originstyles[originKey]
         if(isPlainObject(style)) {
-          const subShape = group.find(element => element.get('name') === key)
+          const subShape = group.find(element => element.get('name') === originKey)
           if(subShape) {
             subShape.attr(style)
           }
         } else {
           // 非纯对象，则认为是设置到 keyShape 上面的
           shape.attr({
-            [key]: style
+            [originKey]: style
           })
         }
       }

stories/Issues/attrs/index.tsx

@@ -0,0 +1,195 @@
+
+import React, { useRef, useEffect } from "react";
+import G6 from '../../../src';
+// import "./styles.css";
+
+// G6.Global.nodeStateStyle.selected = {
+//   stroke: "#d9d9d9",
+//   fill: "#5394ef"
+// };
+
+G6.registerNode(
+  "sql",
+  {
+    drawShape(cfg, group) {
+      const rect = group.addShape("rect", {
+        attrs: {
+          x: -75,
+          y: -25,
+          width: 168,
+          height: 36,
+          stroke: "#b4afaf", //'#303747',
+          fill: "#b4afaf", //'#303747',
+          lineWidth: 3,
+          radius: [5, 0, 0, 5]
+        },
+        name: "rect-shape"
+      });
+      if (cfg.name) {
+        group.addShape("text", {
+          attrs: {
+            text: cfg.name,
+            x: 0,
+            y: 0,
+            fill: "white",
+            fontSize: 14,
+            textAlign: "center",
+            //textBaseline: 'middle',
+            fontWeight: "bold"
+          },
+          name: "text-shape"
+        });
+      }
+      group.addShape("rect", {
+        attrs: {
+          x: 90,
+          y: -25,
+          width: 36,
+          height: 36,
+          stroke: "#0296EA", //'#303747',
+          fill: "#0296EA", //'#303747',
+          lineWidth: 3,
+          radius: [0, 5, 5, 0]
+        },
+        name: "rect-shape-icon"
+      });
+      group.addShape("rect", {
+        attrs: {
+          x: 98,
+          y: -18,
+          height: 20,
+          width: 20,
+          stroke: "white", //'#303747',
+          fill: "#0296EA", //'#303747',
+          radius: 2
+        },
+        name: "node-state-icon"
+      });
+      group.addShape("text", {
+        attrs: {
+          text: cfg.stateIcon,
+          x: 108,
+          y: 0,
+          fill: "white",
+          fontSize: 14,
+          textAlign: "center",
+          fontWeight: "bold"
+        },
+        name: "icon-text-shape"
+      });
+      return rect;
+    }
+  },
+  "single-node"
+);
+
+export default () => {
+  const graphContainer = useRef(null);
+  let graph = null
+
+  // 图初始化
+  useEffect(() => {
+    if (!graph) {
+      graph = new G6.Graph({
+        container: graphContainer.current,
+        width: 500,
+        height: 500,
+        renderer: "svg",
+        layout: {
+          type: "dagre",
+          nodesepFunc: d => {
+            if (d.id === "3") {
+              return 70;
+            }
+            return 70;
+          },
+          ranksep: 30
+        },
+        defaultNode: {
+          type: "sql",
+          anchorPoints: [[0.5, 0], [0.5, 1]],
+          stateIcon: "+" // 节点中表示状态的icon配置
+        },
+      
+        defaultEdge: {
+          type: "cubic-vertical",
+          style: {
+            radius: 20,
+            offset: 45,
+            endArrow: true,
+            lineWidth: 2,
+            stroke: "#C2C8D5"
+          }
+        },
+        modes: {
+          default: ["drag-canvas", "zoom-canvas", "click-select"]
+        },
+        fitView: true
+      });
+    }
+    
+
+    const data = {
+      nodes: [
+        {
+          id: "2",
+          dataType: "alps",
+          name: "alps_file2",
+          conf: [
+            {
+              label: "conf",
+              value: "pai_graph.conf"
+            },
+            {
+              label: "dot",
+              value: "pai_graph.dot"
+            },
+            {
+              label: "init",
+              value: "init.rc"
+            }
+          ]
+        }
+      ]
+    };
+
+    graph.data(data);
+    graph.render();
+    
+    graph.on('node:click', evt => {
+      let node = evt.item;
+      var child = node.get('group').find(function(item) {
+        return item.get("name") === "icon-text-shape"; //找到图标节点
+      });
+      if(child.attr('text') === '+') {
+        graph.updateItem(node, {
+          style: {
+            'icon-text-shape': {
+              text: '-'
+            }
+          }
+        })
+      } else {
+        graph.updateItem(node, {
+          style: {
+            'icon-text-shape': {
+              text: '+'
+            }
+          }
+        })
+      }
+
+      
+
+
+      console.log('update text', child.attr('text'))
+    })
+  }, []);
+
+
+  return (
+    <div>
+      <div ref={graphContainer} className={"graph-container"} />
+    </div>
+  );
+};

stories/Issues/issues.stories.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import DragCanvas from './component/drag-canvas';
 import DagreArrow from './component/dagre-arrow';
 import ChageData from './changeData'
+import ChangeAttr from './attrs'
 
 export default { title: 'Issues' };
 
@@ -16,3 +17,6 @@ storiesOf('Issues', module)
 .add('change data', () => (
   <ChageData />
 ))
+.add('change attr', () => (
+  <ChangeAttr />
+))