fix: getStateStyle & clearItemStates

CHANGELOG.md

@@ -1,4 +1,9 @@
 # ChangeLog
+#### 3.4.2
+- feat: zoom-canvas behavior support hiding non-keyshape elements when scaling canvas;
+- refactor: when sceond params is null, clearItemStates will clear all states of the item;
+- fix: (changeData bug)[https://github.com/antvis/G6/issues/1323];
+
 #### 3.4.1
 - feat: force layout clone original data model to allow the customized properties;
 - fix: BehaviorOptions type error;

docs/api/Graph.en.md

@@ -645,7 +645,7 @@ Clear the states of the item. This function could clear multiple states in the s
 | Name   | Type            | Required | Description                         |
 | ------ | --------------- | -------- | ----------------------------------- |
 | item   | String / Object | true     | The id or the instance of the item. |
-| states | String / Array  | null     | false                               | It can be a single state value, an array, or null. When it is null, this operation will clear the **first** state of the item. |
+| states | String / Array  | null     | false                               | It can be a single state value, an array, or null. When it is null, this operation will clear all state of the item. |
 
 **Usage**
 

docs/api/Graph.zh.md

@@ -628,24 +628,27 @@ graph.hideItem(item);
 graph.hideItem('nodeId');
 ```
 
-### setItemState(item, state, enabled)
+### setItemState(item, state, value)
 
 设置元素状态。
+支持单个状态多值的情况，详情参考 [G6 状态管理最佳实践](https://g6.antv.vision/zh/docs/manual/middle/states/state-new)。
 
 该方法在执行过程中会触发 `beforitemstatechange`，`afteritemstatechange` 事件。
 
 **参数**
 
 | 名称    | 类型            | 是否必选 | 描述                                                 |
-| ------- | --------------- | -------- | ---------------------------------------------------- |
-| item    | String / Object | true     | 元素 ID 或元素实例                                   |
+| ------- | --------------- | -------- | ----------- |
+| item    | String / Item | true     | 元素 ID 或元素实例 |
 | state   | String          | true     | 状态值，支持自定义，如 selected、hover、actived 等。 |
-| enabled | Boolean         | true     | 是否启用状态                                         |
+| value | Boolean / String   | true     | 是否启用状态 |
 
 **用法**
 
 ```javascript
 graph.setItemState('node1', 'selected', true);
+
+graph.setItemState('node1', 'body', 'health');
 ```
 
 ### clearItemStates(item, states)
@@ -657,7 +660,7 @@ graph.setItemState('node1', 'selected', true);
 | 名称   | 类型            | 是否必选 | 描述               |
 | ------ | --------------- | -------- | ------------------ |
 | item   | String / Object | true     | 元素 ID 或元素实例 |
-| states | String / Array  | null     | false              | 取值可以是单个状态值，也可以是状态值数组或 `null`，当为 `null` 时，清除该元素的**第一个**状态。 |
+| states | String / Array  | null     | false              | 取值可以是单个状态值，也可以是状态值数组 |
 
 **用法**
 
@@ -668,7 +671,7 @@ graph.clearItemStates(node, 'a');
 // 清除多个状态
 graph.clearItemStates(node, ['a', 'b']);
 
-// 清除所有状态
+// 清除所有
 graph.clearItemStates(node);
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "3.4.1",
+  "version": "3.4.2",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -50,7 +50,7 @@
     "site:deploy": "npm run site:build && gh-pages -d public",
     "start": "npm run site:develop",
     "test": "jest",
-    "test-live": "DEBUG_MODE=1 jest --watch  ./tests/unit/behavior/zoom-spec.ts",
+    "test-live": "DEBUG_MODE=1 jest --watch  ./tests/unit/state/update-element-states-spec.ts",
     "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
     "watch": "father build -w",
     "cdn": "antv-bin upload -n @antv/g6"

src/global.ts

@@ -1,5 +1,5 @@
 export default {
-  version: '3.4.1',
+  version: '3.4.2',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

src/item/item.ts

@@ -376,9 +376,9 @@ export default class ItemBase implements IItemBase {
     const model: ModelConfig = self.get('model');
     const shape = model.shape || model.type;
     if (!states) {
-      console.warn(`clearItemStates 参数为空，则不清除任何状态`)
-      return;
+      states = originStates
     }
+
     if (isString(states)) {
       states = [states];
     }

tests/unit/graph/graph-spec.ts

@@ -1158,9 +1158,9 @@ describe('mapper fn', () => {
     graph.setItemState(node, 'custom', true);
     expect(keyShape.attr('green'));
 
+    // clear all states of  the item
     graph.clearItemStates(node);
-    // green
-    expect(keyShape.attr('fill')).toEqual('green');
+    expect(keyShape.attr('fill')).toEqual('#666');
 
     const edge = graph.addItem('edge', { id: 'edge2', source: 'node', target: 'node2Mapped' });
 

tests/unit/state/update-element-states-spec.ts

@@ -54,6 +54,64 @@ G6.registerNode('self-node', {
 
 describe('update', () => {
 
+  it('without second params, clear all states', () => {
+    const graph = new G6.Graph({
+      container: div,
+      width: 500,
+      height: 500,
+      nodeStateStyles: {
+        hover: {
+          opacity: 0.3
+        },
+        'body:health': {
+          fill: 'red'
+        }
+      },
+      defaultNode: {
+        size: 25,
+        style: {
+          fill: 'steelblue',
+          opacity: 1
+        }
+      },
+    });
+    const data = {
+      nodes: [
+        {
+          id: 'node1',
+          x: 100,
+          y: 100,
+        },
+        {
+          id: 'node2',
+          x: 200,
+          y: 100,
+        },
+      ],
+    };
+    graph.data(data);
+    graph.render();
+
+    const item = graph.findById('node1')
+    graph.setItemState(item, 'hover', true)
+    expect(item.hasState('hover')).toBe(true)
+
+    const keyShape = item.getKeyShape()
+    expect(keyShape.attr('fill')).toEqual('steelblue')
+
+    graph.setItemState(item, 'body', 'health')
+    
+    expect(item.getStates().length).toBe(2)
+    expect(item.hasState('body:health')).toBe(true)
+    expect(item.getKeyShape().attr('fill')).toEqual('red')
+
+    graph.clearItemStates(item)
+    expect(item.hasState('hover')).toBe(false)
+    expect(item.hasState('body:health')).toBe(false)
+    expect(item.getStates().length).toBe(0)
+
+    graph.destroy()
+  })
   it('setItemState, then updateItem', () => {
     const graph = new G6.Graph({
       container: div,