diff --git a/CHANGELOG.md b/CHANGELOG.md index 2a154c2db9..903dd64143 100644 --- a/CHANGELOG.md +++ b/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; diff --git a/docs/api/Graph.en.md b/docs/api/Graph.en.md index f0aaf0cd8a..a778d17868 100644 --- a/docs/api/Graph.en.md +++ b/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** diff --git a/docs/api/Graph.zh.md b/docs/api/Graph.zh.md index 6f6097f177..39b0b84b9f 100644 --- a/docs/api/Graph.zh.md +++ b/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); ``` diff --git a/package.json b/package.json index 5a1ae46d9f..54b1c58191 100644 --- a/package.json +++ b/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" diff --git a/src/global.ts b/src/global.ts index ecc8f62ac1..73f58d4c0a 100644 --- a/src/global.ts +++ b/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', diff --git a/src/item/item.ts b/src/item/item.ts index 9e786598f3..f4fb4001e0 100644 --- a/src/item/item.ts +++ b/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]; } diff --git a/tests/unit/graph/graph-spec.ts b/tests/unit/graph/graph-spec.ts index 6e12a0e0db..b25f344ca3 100644 --- a/tests/unit/graph/graph-spec.ts +++ b/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' }); diff --git a/tests/unit/state/update-element-states-spec.ts b/tests/unit/state/update-element-states-spec.ts index 24f6cdc5d7..27f8c18044 100644 --- a/tests/unit/state/update-element-states-spec.ts +++ b/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,