feat: animate configuration for combo, true by default.

CHANGELOG.md

@@ -2,7 +2,8 @@
 
 #### 3.5.12
 - fix: node:click is triggered twice while clicking a node;
-- fix: update combo edge when drag node out of it problem.
+- fix: update combo edge when drag node out of it problem;
+- feat: animate configuration for combo, true by default.
 
 #### 3.5.11
 - feat: graph.priorityState api;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "3.5.11",
+  "version": "3.5.12",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",

src/behavior/activate-relations.ts

@@ -1,4 +1,5 @@
 import { G6Event, IG6GraphEvent } from '../types';
+import { INode } from '../interface/item';
 
 export default {
   getDefaultCfg(): object {
@@ -25,16 +26,21 @@ export default {
     };
   },
   setAllItemStates(e: IG6GraphEvent) {
-    const { item } = e;
-    const graph = this.get('graph');
-    this.set('item', item);
+    const item: INode = e.item as INode;
+    const graph = this.graph;
+    this.item = item;
     if (!this.shouldUpdate(e.item, { event: e, action: 'activate' })) {
       return;
     }
     const self = this;
-    const activeState = this.get('activeState');
-    const inactiveState = this.get('inactiveState');
-    graph.getNodes().forEach(node => {
+    const activeState = this.activeState;
+    const inactiveState = this.inactiveState;
+    const nodes = graph.getNodes();
+    const edges = graph.getEdges();
+    const nodeLength = nodes.length;
+    const edgeLength = edges.length;
+    for (let i = 0; i < nodeLength; i++) {
+      const node = nodes[i];
       const hasSelected = node.hasState('selected');
       if (self.resetSelected) {
         if (hasSelected) {
@@ -45,38 +51,47 @@ export default {
       if (inactiveState) {
         graph.setItemState(node, inactiveState, true);
       }
-    });
-    graph.getEdges().forEach(edge => {
+    }
+
+    for (let i = 0; i < edgeLength; i++) {
+      const edge = edges[i];
       graph.setItemState(edge, activeState, false);
       if (inactiveState) {
         graph.setItemState(edge, inactiveState, true);
       }
-    });
+    }
+
     if (inactiveState) {
       graph.setItemState(item, inactiveState, false);
     }
     graph.setItemState(item, activeState, true);
-    graph.getEdges().forEach(edge => {
-      if (edge.getSource() === item) {
-        const target = edge.getTarget();
-        if (inactiveState) {
-          graph.setItemState(target, inactiveState, false);
-        }
-        graph.setItemState(target, activeState, true);
-        graph.setItemState(edge, inactiveState, false);
-        graph.setItemState(edge, activeState, true);
-        edge.toFront();
-      } else if (edge.getTarget() === item) {
-        const source = edge.getSource();
-        if (inactiveState) {
-          graph.setItemState(source, inactiveState, false);
-        }
-        graph.setItemState(source, activeState, true);
-        graph.setItemState(edge, inactiveState, false);
-        graph.setItemState(edge, activeState, true);
-        edge.toFront();
+
+    const outEdges = item.getOutEdges();
+    const inEdges = item.getInEdges();
+    const outLegnth = outEdges.length;
+    const inLegnth = inEdges.length;
+    for (let i = 0; i < outLegnth; i++) {
+      const edge = outEdges[i];
+      const target = edge.getTarget();
+      if (inactiveState) {
+        graph.setItemState(target, inactiveState, false);
       }
-    });
+      graph.setItemState(target, activeState, true);
+      graph.setItemState(edge, inactiveState, false);
+      graph.setItemState(edge, activeState, true);
+      edge.toFront();
+    }
+    for (let i = 0; i < inLegnth; i++) {
+      const edge = inEdges[i];
+      const source = edge.getSource();
+      if (inactiveState) {
+        graph.setItemState(source, inactiveState, false);
+      }
+      graph.setItemState(source, activeState, true);
+      graph.setItemState(edge, inactiveState, false);
+      graph.setItemState(edge, activeState, true);
+      edge.toFront();
+    }
     graph.emit('afteractivaterelations', { item: e.item, action: 'activate' });
   },
   clearActiveState(e: any) {
@@ -86,17 +101,24 @@ export default {
       return;
     }
 
-    const activeState = this.get('activeState');
-    const inactiveState = this.get('inactiveState');
+    const activeState = this.activeState;
+    const inactiveState = this.inactiveState;
 
     const autoPaint = graph.get('autoPaint');
     graph.setAutoPaint(false);
-    graph.getNodes().forEach(node => {
+    const nodes = graph.getNodes();
+    const edges = graph.getEdges();
+    const nodeLength = nodes.length;
+    const edgeLength = edges.length;
+
+    for (let i = 0; i < nodeLength; i++) {
+      const node = nodes[i];
       graph.clearItemStates(node, [activeState, inactiveState]);
-    });
-    graph.getEdges().forEach(edge => {
+    }
+    for (let i = 0; i < edgeLength; i++) {
+      const edge = edges[i];
       graph.clearItemStates(edge, [activeState, inactiveState, 'deactivate']);
-    });
+    }
     graph.paint();
     graph.setAutoPaint(autoPaint);
     graph.emit('afteractivaterelations', {
@@ -106,20 +128,28 @@ export default {
   },
   clearAllItemStates(e: any) {
     const self = this;
-    const graph = self.get('graph');
+    const graph = self.graph;
     if (!self.shouldUpdate(e.item, { event: e, action: 'deactivate' })) {
       return;
     }
 
-    const activeState = this.get('activeState');
-    const inactiveState = this.get('inactiveState');
+    const activeState = this.activeState;
+    const inactiveState = this.inactiveState;
 
-    graph.getNodes().forEach(node => {
+    const nodes = graph.getNodes();
+    const edges = graph.getEdges();
+    const nodeLength = nodes.length;
+    const edgeLength = edges.length;
+
+    for (let i = 0; i < nodeLength; i++) {
+      const node = nodes[i];
       graph.clearItemStates(node, [activeState, inactiveState]);
-    });
-    graph.getEdges().forEach(edge => {
+    }
+    for (let i = 0; i < edgeLength; i++) {
+      const edge = edges[i];
       graph.clearItemStates(edge, [activeState, inactiveState, 'deactivate']);
-    });
+    }
+
     graph.emit('afteractivaterelations', {
       item: e.item || self.get('item'),
       action: 'deactivate',

src/behavior/drag-canvas.ts

@@ -74,7 +74,11 @@ export default {
 
     if (this.enableOptimize) {
       // 开始拖动时关闭局部渲染
-      this.graph.get('canvas').set('localRefresh', false)
+
+      const localRefresh: boolean = this.graph.get('canvas').get('localRefresh');
+      this.oriLocalRefresh = localRefresh;
+
+      this.graph.get('canvas').set('localRefresh', false);
 
       // 拖动 canvas 过程中隐藏所有的边及label
       const graph: IGraph = this.graph
@@ -153,7 +157,8 @@ export default {
 
       setTimeout(() => {
         // 拖动结束后开启局部渲染
-        graph.get('canvas').set('localRefresh', true)
+        const localRefresh = this.oriLocalRefresh === undefined ? true : this.oriLocalRefresh;
+        graph.get('canvas').set('localRefresh', localRefresh)
       }, 16)
     }
 

src/global.ts

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

src/shape/combo.ts

@@ -123,7 +123,7 @@ const singleCombo: ShapeOptions = {
   },
   updateShape(cfg: NodeConfig, item: Item, keyShapeStyle: ShapeStyle) {
     const keyShape = item.get('keyShape');
-    const animate = this.options.animate;
+    const { animate } = cfg.animate === undefined ? this.options.animate : cfg.animate;
     if (animate && keyShape.animate) {
       keyShape.animate(keyShapeStyle, {
         duration: 200,

src/shape/shapeBase.ts

@@ -310,8 +310,6 @@ export const shapeBase: ShapeOptions = {
         const style = styles[key];
         if (isPlainObject(style)) {
           const subShape = group.find((element) => element.get('name') === key);
-
-
           if (subShape) {
             subShape.attr(style);
           }
@@ -354,9 +352,9 @@ export const shapeBase: ShapeOptions = {
             filtetDisableStatesStyle[p] = subShapeStyles;
           }
         } else {
-          // 从图元素现有的样式中删除本次要取消的 states 中存在的属性值
-          const keptAttrs = ['x', 'y', 'cx', 'cy'];
-          if (keyShapeStyles[p] && !(keptAttrs.indexOf(p) > -1)) {
+          // 从图元素现有的样式中删除本次要取消的 states 中存在的属性值。使用对象检索更快
+          const keptAttrs = { 'x': 1, 'y': 1, 'cx': 1, 'cy': 1 };
+          if (keyShapeStyles[p] && !keptAttrs[p]) {
             delete keyShapeStyles[p];
           }
         }
@@ -433,7 +431,7 @@ export const shapeBase: ShapeOptions = {
       : stateStyles && stateStyles[name];
 
     if (type === 'combo') {
-      return mix({}, modelStateStyle);
+      return clone(modelStateStyle);
     }
     return mix({}, style, modelStateStyle);
   },

stories/Combo/component/drag-node-out.tsx

@@ -49,6 +49,7 @@ const DragNodeOut = () => {
                 groupByTypes: false,
                 defaultCombo: {
                     type: 'circle',
+                    animate: false,
                     style: {
                         lineWidth: 1,
                     },