fix: image node with state changing, closes: #2923;

CHANGELOG.md

@@ -3,6 +3,7 @@
 #### 4.3.3
 
 - fix: uncombo with id, closes: #2924;
+- fix: image node with state changing, closes: #2923;
 
 #### 4.3.2
 

packages/core/src/item/item.ts

@@ -384,7 +384,7 @@ export default class ItemBase implements IItemBase {
 
       each(currentShape.attr(), (val, key) => {
         // 修改 img 通过 updateItem 实现
-        if (key !== 'img') {
+        if (key !== 'img' || isString(val)) {
           styles[key] = val;
         }
       });

packages/core/tests/unit/state/image-state-spec.ts

@@ -0,0 +1,42 @@
+import Graph from '../implement-graph';
+
+const div = document.createElement('div');
+div.id = 'global-spec';
+document.body.appendChild(div);
+
+describe('graph node states', () => {
+  const data = {
+    nodes: [{ id: 'node1', x: 100, y: 100 }]
+  };
+
+  it('image state changes', () => {
+    const graph = new Graph({
+      container: div,
+      width: 500,
+      height: 500,
+      fitCenter: true,
+      defaultNode: {
+        type: 'image',
+        img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*eD7nT6tmYgAAAAAAAAAAAABkARQnAQ',
+        size: 24,
+        labelCfg: {
+          position: 'bottom',
+          style: {  fill: '#e80a0a', fontSize: 10,}
+        },
+      }
+      nodeStateStyles: {
+        hover: {
+          img: 'https://gw.alipayobjects.com/zos/bmw-prod/5d015065-8505-4e7a-baec-976f81e3c41d.svg',
+        }
+      },
+    });
+    graph.data(data);
+    graph.render();
+
+    const node = graph.getNodes()[0]
+    graph.setItemState(node, 'hover', true)
+    expect(node.getKeyShape().attr('img')).toBe('https://gw.alipayobjects.com/zos/bmw-prod/5d015065-8505-4e7a-baec-976f81e3c41d.svg')
+    graph.setItemState(node, 'hover', false)
+    expect(node.getKeyShape().attr('img')).toBe('https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*eD7nT6tmYgAAAAAAAAAAAABkARQnAQ')
+  });
+});