feat：缩放画布时支持隐藏除keyShape外的元素

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);
 ```
 

docs/manual/introduction.en.md

@@ -114,9 +114,11 @@ Some implementations combined with front-end libraries from the third party:
 
 ## G6 Communication Group
 
-Users are welcome to join the **G6 Communication Group** (It is a DingTalk group). We are also welcome the github issues.
+Users are welcome to join the **G6 Communication Group** or **G6 Communication Group-2** (It is a DingTalk group). We are also welcome the github issues.
 
-<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*dsXsSpgynmUAAAAAAAAAAABkARQnAQ' width=400>
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*hzfaSrAj0jkAAAAAAAAAAABkARQnAQ' width=400>
+
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*7uu-T7kp6uUAAAAAAAAAAABkARQnAQ' width=400>
 
 ## How to Contribute
 

docs/manual/introduction.zh.md

@@ -54,6 +54,7 @@ G6 作为一款专业的图可视化引擎，具有以下特性：
 - [G6 核心概念](/zh/docs/manual/middle/graph)
 - [G6 高级指引](/zh/docs/manual/advanced/keyconcept/shape-and-properties)
 - [API](/zh/docs/api/Graph)
+- [G6 Blog](https://www.yuque.com/antv/g6-blog)
 
 ## 快速上手
 
@@ -106,13 +107,20 @@ graph.render();
 
 - <a href='https://github.com/guozhaolong/wfd' target='_blank'>基于 G6 和 React 的可视化流程编辑器 - Workflow Designer</a>；
 - <a href='https://github.com/caoyu48/vue-g6-editor' target='_blank'>基于 G6 和 Vue 的可视化编辑器</a>[]()；
-- <a href='https://github.com/OXOYO/X-Flowchart-Vue' target='_blank'>基于 G6 和 Vue 的可视化图形编辑器 - A visual graph editor based on G6 and Vue</a>。
+- <a href='https://github.com/OXOYO/X-Flowchart-Vue' target='_blank'>基于 G6 和 Vue 的可视化图形编辑器 - A visual graph editor based on G6 and Vue</a>；
+- <a href='https://github.com/lusess123/web-pdm' target='_blank'>基于 G6 和 React 实现的 ER 图编辑器</a>；
 
 ## G6 图可视化交流群
 
-欢迎各界 G6 使用者、图可视化爱好者加入 **G6 图可视化交流群**（钉钉群，使用钉钉扫一扫加入）讨论与交流。
+欢迎各界 G6 使用者、图可视化爱好者加入 **G6 图可视化交流群** 及 **G6 图可视化交流二群**（钉钉群，使用钉钉扫一扫加入）讨论与交流。
 
-<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*dsXsSpgynmUAAAAAAAAAAABkARQnAQ' width=400>
+> **G6 图可视化交流群** 已满员，该群会不定期移除不活跃的成员。
+
+> 由于值班同学的时间和精力有限，**G6 图可视化交流二群** 中的问题我们会不定期回复。欢迎对 G6 感兴趣的同学加入到答疑中来，非常感谢！
+
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*hzfaSrAj0jkAAAAAAAAAAABkARQnAQ' width=400>
+
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*7uu-T7kp6uUAAAAAAAAAAABkARQnAQ' width=400>
 
 ## 如何贡献
 

docs/manual/middle/states/defaultBehavior.zh.md

@@ -50,7 +50,11 @@ const graph = new G6.Graph({
 
 - 含义：缩放画布；
 - `type: 'zoom-canvas'`；
-- `sensitivity`：缩放灵敏度，支持 1-10 的数值，默认灵敏度为 5。
+- `sensitivity`：缩放灵敏度，支持 1-10 的数值，默认灵敏度为 5；
+- `minZoom`：最小缩放比例；
+- `maxZoom`：最大缩放比例；
+- `enableOptimize`：是否开启性能优化，默认为 false，设置为 true 开启，开启后缩放比例小于 optimizeZoom 时自动隐藏非 keyShape；
+- `optimizeZoom`：当 enableOptimize 为 true 时起作用，默认值为 0.7，表示当缩放到哪个比例时开始隐藏非 keyShape。
 
 **提示：若要限定缩放尺寸，请在 graph 上设置  `minZoom`  和  `maxZoom`。**
 

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/layout/dagre-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"

site/locale.json

@@ -8,6 +8,7 @@
   "更新": "Update",
   "感谢信赖": "WE ARE TRUSTED BY",
   "专注关系，完备基建": "Dedicated & Complete",
+  "G6·图可视化知多少": "G6 Graph Visualization Blog",
   "G6 是一个专注于关系数据的、完备的图可视化引擎": "G6 is a complete graph visualization engine, which focuses on relational data",
   "领域深钻，顶尖方案": "Top Solution",
   "扎根实际具体业务场景、结合业界领先成果，沉淀顶尖解决方案": "According to practical bussiness scenarios, we found out the top solutions",

site/pages/index.zh.tsx

@@ -121,10 +121,26 @@ const IndexPage = () => {
     },
   ];
 
+  const insNotifications = [
+    {
+      type: t('推荐'),
+      title: t('欢迎进入 2020 可视化智能研发时代'),
+      date: '2020.01.08',
+      link: 'https://www.yuque.com/antv/blog/ygdubv',
+    },
+    {
+      type: t('推荐'),
+      title: t('G6·图可视化知多少'),
+      date: '2020.03.23',
+      link: 'https://www.yuque.com/antv/g6-blog',
+    },
+  ];
+
   return (
     <>
       <SEO title={t('G6 图可视化引擎')} titleSuffix="AntV" lang={i18n.language} />
       <Banner
+        notifications={insNotifications}
         coverImage={coverImage}
         title={t('G6 图可视化引擎')}
         description={t(

src/behavior/zoom-canvas.ts

@@ -6,8 +6,10 @@ export default {
   getDefaultCfg(): object {
     return {
       sensitivity: 2,
-      minZoom: 0.1,
+      minZoom: 0.2,
       maxZoom: 10,
+      enableOptimize: false,
+      optimizeZoom: 0.7
     };
   },
   getEvents(): { [key in G6Event]?: string } {
@@ -35,6 +37,58 @@ export default {
     if (zoom > this.get('maxZoom') || zoom < this.get('minZoom')) {
       return;
     }
+
+    const enableOptimize = this.get('enableOptimize')
+    if(enableOptimize) {
+      const optimizeZoom = this.get('optimizeZoom')
+
+      const currentZoom = graph.getZoom()
+      console.log(currentZoom)
+      if(currentZoom < optimizeZoom) {
+        const nodes = graph.getNodes()
+        const edges = graph.getEdges()
+        nodes.map(node => {
+          if(!node.destroyed) {
+            const children = node.getContainer().get('children')
+            children.map(shape => {
+              if(!shape.destoryed && !shape.get('isKeyShape')) {
+                shape.hide()
+              }
+            })
+          }
+        })
+
+        edges.map(edge => {
+          const children = edge.getContainer().get('children')
+          children.map(shape => {
+            if(!shape.get('isKeyShape')) {
+              shape.hide()
+            }
+          })
+        })
+      } else {
+        const nodes = graph.getNodes()
+        const edges = graph.getEdges()
+        nodes.map(node => {
+          const children = node.getContainer().get('children')
+          children.map(shape => {
+            if(!shape.get('visible')) {
+              shape.show()
+            }
+          })
+        })
+
+        edges.map(edge => {
+          const children = edge.getContainer().get('children')
+          children.map(shape => {
+            if(!shape.get('visible')) {
+              shape.show()
+            }
+          })
+        })
+      }
+    }
+
     graph.zoom(ratio, { x: point.x, y: point.y });
     graph.emit('wheelzoom', e);
   },

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/interface/graph.ts

@@ -27,6 +27,8 @@ export interface IModeOption {
   enableDelegate?: boolean;
   maxZoom?: number;
   minZoom?: number;
+  enableOptimize?: boolean;
+  optimizeZoom?: number;
   multiple?: boolean;
   selectedState?: string;
   includeEdges?: boolean;

src/item/item.ts

@@ -83,6 +83,7 @@ export default class ItemBase implements IItemBase {
 
     if (!id) {
       id = uniqueId(this.get('type'));
+      this.get('model').id = id
     }
 
     this.set('id', id);
@@ -375,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];
     }

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
           })
         }
       }