perf: improve the performance of setItemState and active-relations; p…

…erf: keyShape is hiden when a combo is collapsed with collapsedSubstituIcon; fix: drag-node incorrectly stopped by right click; fix: timebar plugin destroy problem, closes: #3998; fix: controllerCfg does not take effect in timebar with tick type, closes: #3843; feat: timebar plugin supports config the default time type; feat: timebar with play and pause API; chore: use addItem and removeItem instead of changeData in timebar; (#4033)
antvis · Nov 8, 2022 · 3c73d17 · 3c73d17
1 parent d6d9a1f
commit 3c73d17
Show file tree

Hide file tree

Showing 30 changed files with 680 additions and 518 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # ChangeLog
 
+### 4.7.11
+
+- perf: improve the performance of setItemState and active-relations;
+- perf: keyShape is hiden when a combo is collapsed with collapsedSubstituIcon;
+- fix: drag-node incorrectly stopped by right click;
+- fix: timebar plugin destroy problem, closes: #3998;
+- fix: controllerCfg does not take effect in timebar with tick type, closes: #3843;
+- feat: timebar plugin supports config the default time type;
+- feat: timebar with play and pause API;
+- chore: use addItem and removeItem instead of changeData in timebar;
+
 ### 4.7.10
 
 - perf: force layout with animation calls graph refreshPositions instead positionsAnimate while refreshing;

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-core",
-  "version": "0.7.10",
+  "version": "0.7.11",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",

diff --git a/packages/core/src/element/combo.ts b/packages/core/src/element/combo.ts
@@ -149,8 +149,9 @@ const singleCombo: ShapeOptions = {
     const subsitututeIconConfig = Object.assign({}, this.options.collapsedSubstituteIcon, collapsedSubstituteIcon)
     const { show, img, width, height } = subsitututeIconConfig;
     const group = item.getContainer();
-    const collapsedIconShape = group.find(ele => ele.get('name') === 'combo-collapsed-substitute-icon');
+    let collapsedIconShape = group.find(ele => ele.get('name') === 'combo-collapsed-substitute-icon');
     const iconShapeExist = collapsedIconShape && !collapsedIconShape.destroyed;
+    const keyShape = item.get('keyShape');
     if (collapsed && show) {
       if (iconShapeExist) {
         collapsedIconShape.show();
@@ -159,7 +160,7 @@ const singleCombo: ShapeOptions = {
           width: width || keyShapeStyle.r * 2 || keyShapeStyle.width,
           height: height || keyShapeStyle.r * 2 || keyShapeStyle.height,
         }
-        group.addShape('image', {
+        collapsedIconShape = group.addShape('image', {
           attrs: {
             img,
             x: -sizeAttr.width / 2,
@@ -170,8 +171,10 @@ const singleCombo: ShapeOptions = {
           draggable: true
         });
       }
+      keyShape.hide();
     } else if (iconShapeExist) {
       collapsedIconShape.hide();
+      keyShape.show();
     }
   },
   updateShape(cfg: ComboConfig, item: Item, keyShapeStyle: ShapeStyle) {

diff --git a/packages/core/src/global.ts b/packages/core/src/global.ts
@@ -64,7 +64,7 @@ const colorSet = {
 };
 
 export default {
-  version: '0.7.10',
+  version: '0.7.11',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

diff --git a/packages/core/src/graph/controller/state.ts b/packages/core/src/graph/controller/state.ts
@@ -1,75 +1,17 @@
-import { each, isString } from '@antv/util';
-import { Item, States } from '../../types';
+import { isString } from '@antv/util';
+import { Item } from '../../types';
 import { IAbstractGraph } from '../../interface/graph';
-import { INode } from '../../interface/item';
-
-interface CachedStates {
-  enabled: States;
-  disabled: States;
-}
-
-let timer: any = null;
 
 export default class StateController {
   private graph: IAbstractGraph;
 
-  private cachedStates: CachedStates;
-
   public destroyed: boolean;
 
   constructor(graph: IAbstractGraph) {
     this.graph = graph;
-    /**
-     * this.cachedStates = {
-     *    enabled: {
-     *        hover: [Node]
-     *    },
-     *     disabled: {}
-     *  }
-     */
-    this.cachedStates = {
-      enabled: {},
-      disabled: {},
-    };
     this.destroyed = false;
   }
 
-  /**
-   * 检查 cache 的可用性
-   *
-   * @private
-   * @param {Item} item
-   * @param {string} state
-   * @param {object} cache
-   * @returns
-   * @memberof State
-   */
-  private static checkCache(item: Item, state: string, cache: { [key: string]: any }) {
-    if (!cache[state]) {
-      return;
-    }
-    const index = cache[state].indexOf(item);
-    if (index >= 0) {
-      cache[state].splice(index, 1);
-    }
-  }
-
-  /**
-   * 缓存 state
-   *
-   * @private
-   * @param {Item} item Item 实例
-   * @param {string} state 状态名称
-   * @param {object} states
-   * @memberof State
-   */
-  private static cacheState(item: Item, state: string, states: States) {
-    if (!states[state]) {
-      states[state] = [];
-    }
-    states[state].push(item as INode);
-  }
-
   /**
    * 更新 Item 的状态
    *
@@ -78,33 +20,15 @@ export default class StateController {
    * @param {boolean} enabled 状态是否可用
    * @memberof State
    */
-  public updateState(item: Item, state: string, enabled: boolean) {
-    const { checkCache, cacheState } = StateController;
-    if (item.destroyed) {
-      return;
-    }
-
-    const { cachedStates } = this;
-
-    const enabledStates = cachedStates.enabled;
-    const disabledStates = cachedStates.disabled;
-
-    if (enabled) {
-      checkCache(item, state, disabledStates);
-      cacheState(item, state, enabledStates);
-    } else {
-      checkCache(item, state, enabledStates);
-      cacheState(item, state, disabledStates);
-    }
-
-    if (timer) {
-      clearTimeout(timer);
-    }
-
-    timer = setTimeout(() => {
-      timer = null;
-      this.updateGraphStates();
-    }, 16);
+  public updateState(item: Item, state: string, enabled: string | boolean) {
+    const graphStates = this.graph.get('states');
+    let key = state;
+    if (isString(enabled)) key = `${state}:${enabled}`;
+    if (!graphStates[key]) graphStates[key] = [];
+    if (enabled) graphStates[key].push(item);
+    else graphStates[key] = graphStates[key].filter((itemInState) => itemInState !== item);
+    this.graph.set('states', graphStates);
+    this.graph.emit('graphstatechange', { states: graphStates });
   }
 
   /**
@@ -115,67 +39,22 @@ export default class StateController {
    * @param {boolean} enabled
    * @memberof State
    */
-  public updateStates(item: Item, states: string | string[], enabled: boolean) {
-    if (isString(states)) {
-      this.updateState(item, states, enabled);
-    } else {
-      states.forEach((state) => {
-        this.updateState(item, state, enabled);
-      });
-    }
-  }
-
-  /**
-   * 更新 states
-   *
-   * @memberof State
-   */
-  public updateGraphStates() {
-    const states = this.graph.get('states') as States;
-    const { cachedStates } = this;
-
-    each(cachedStates.disabled, (val, key) => {
-      if (states[key]) {
-        states[key] = states[key].filter((item) => val.indexOf(item) < 0 && !val.destroyed);
-      }
-    });
-
-    each(cachedStates.enabled, (val: INode[], key) => {
-      if (!states[key]) {
-        states[key] = val;
-      } else {
-        const map: { [key: string]: boolean } = {};
-        states[key].forEach((item) => {
-          if (!item.destroyed) {
-            map[item.get('id')] = true;
-          }
-        });
-        val.forEach((item: Item) => {
-          if (!item.destroyed) {
-            const id = item.get('id');
-            if (!map[id]) {
-              map[id] = true;
-              states[key].push(item as INode);
-            }
-          }
-        });
-      }
+  public updateStates(item: Item, states: string | string[], enabled: string | boolean) {
+    const graphStates = this.graph.get('states');
+    const stateNames = isString(states) ? [states] : states;
+    stateNames.forEach(stateName => {
+      let key = stateName;
+      if (!graphStates[key]) graphStates[key] = [];
+      if (isString(enabled)) key = `${stateName}:${enabled}`;
+      if (enabled) graphStates[key].push(item);
+      else graphStates[key] = graphStates[key].filter((itemInState) => itemInState !== item);
     });
-
+    this.graph.set('states', graphStates);
     this.graph.emit('graphstatechange', { states });
-    this.cachedStates = {
-      enabled: {},
-      disabled: {},
-    };
   }
 
   public destroy() {
     (this.graph as IAbstractGraph | null) = null;
-    (this.cachedStates as CachedStates | null) = null;
-    if (timer) {
-      clearTimeout(timer);
-    }
-    timer = null;
     this.destroyed = true;
   }
 }
diff --git a/packages/core/src/graph/graph.ts b/packages/core/src/graph/graph.ts
@@ -1418,12 +1418,7 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
     itemController.setItemState(item, state, value);
 
     const stateController: StateController = this.get('stateController');
-
-    if (isString(value)) {
-      stateController.updateState(item, `${state}:${value}`, true);
-    } else {
-      stateController.updateState(item, state, value);
-    }
+    stateController.updateState(item, state, value);
   }
 
   /**
@@ -1731,6 +1726,7 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
     setTimeout(() => {
       canvas.set('localRefresh', localRefresh);
     }, 16);
+    this.set('data', data);
     this.emit('afterchangedata');
     return this;
   }

diff --git a/packages/core/tests/unit/graph/controller/state-spec.ts b/packages/core/tests/unit/graph/controller/state-spec.ts
@@ -48,7 +48,7 @@ describe('graph state controller', () => {
     graph.setItemState('node2', 'selected', true);
     expect(itemCount).toBe(2);
     setTimeout(() => {
-      expect(graphCount).toBe(1);
+      expect(graphCount).toBe(2);
       done();
     }, 100);
   });

diff --git a/packages/element/package.json b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-element",
-  "version": "0.7.10",
+  "version": "0.7.11",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@antv/g-base": "^0.5.1",
-    "@antv/g6-core": "0.7.10",
+    "@antv/g6-core": "0.7.11",
     "@antv/util": "~2.0.5"
   },
   "devDependencies": {

diff --git a/packages/g6/package.json b/packages/g6/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "4.7.10",
+  "version": "4.7.11",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@antv/g6-pc": "0.7.10"
+    "@antv/g6-pc": "0.7.11"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",

diff --git a/packages/g6/src/index.ts b/packages/g6/src/index.ts
@@ -1,7 +1,7 @@
 import G6 from '@antv/g6-pc';
 
-G6.version = '4.7.10';
+G6.version = '4.7.11';
 
 export * from '@antv/g6-pc';
 export default G6;
-export const version = '4.7.10';
+export const version = '4.7.11';
diff --git a/packages/pc/package.json b/packages/pc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-pc",
-  "version": "0.7.10",
+  "version": "0.7.11",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -75,9 +75,9 @@
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-math": "^0.1.1",
     "@antv/g-svg": "^0.5.1",
-    "@antv/g6-core": "0.7.10",
-    "@antv/g6-element": "0.7.10",
-    "@antv/g6-plugin": "0.7.10",
+    "@antv/g6-core": "0.7.11",
+    "@antv/g6-element": "0.7.11",
+    "@antv/g6-plugin": "0.7.11",
     "@antv/hierarchy": "^0.6.7",
     "@antv/layout": "^0.3.0",
     "@antv/matrix-util": "^3.1.0-beta.3",