fix: spelling error for nodeselectChange, closes: #3736; fix: update … (

#3748) * fix: spelling error for nodeselectChange, closes: #3736; fix: update node icon from show false to show true; feat: combo supports collapsedSubstituteIcon showing after collapsed; feat: remove animations while first rendering with (collapsed)combos; * chore: refine * chore: gitleaks pin to v1-6-0 * fix: afterrender should be emitted when the layout is not configured; * fix: update combo edge at the same time onDrag (#3734) * docs: docs refine (#3733) * implement more efficient way of dragging combo * clean up * reslove conflicts Co-authored-by: Yanyan Wang <[email protected]> * fix: [tooltip plugin] wrap className in quotes when createDom to support multi classname (#3747) * docs: docs refine (#3733) * fix: [tooltip plugin] wrap className in quotes when createDom Co-authored-by: Yanyan Wang <[email protected]> * perf: spelling error in drag-combo * fix: relayout while collapse-expand-combo * refactor: 将 toolbar plugin 的默认操作函数抽离 (#3718) * refactor: refactor plugin toolBar Change-Id: I7862749924f7a100d93a1e380524aea3ee96cc3d * docs: update doc Change-Id: Ifbb32ea0f0f0791994eb4cb88f4bd3af9b29d587 * refactor: remote { Change-Id: I20bea2426bb077fe51ec1309aca8545b65a5d0a5 * chore: update CHANGELOG * chore: update version nums * fix: collapsed combo with error size Co-authored-by: femiabdul <[email protected]> Co-authored-by: bjym <[email protected]> Co-authored-by: 忽如寄 <[email protected]>
antvis · Jun 23, 2022 · 778720c · 778720c
1 parent c3d43d0
commit 778720c
Show file tree

Hide file tree

Showing 35 changed files with 358 additions and 110 deletions.
diff --git a/.github/workflows/gitleaks.yml b/.github/workflows/gitleaks.yml
@@ -14,4 +14,4 @@ jobs:
       with:
         args: -O .gitleaks.toml https://raw.githubusercontent.com/ycjcl868/gitleaks/master/.gitleaks.toml
     - name: gitleaks-action
-      uses: zricethezav/gitleaks-action@master
+      uses: zricethezav/gitleaks-action@v1.6.0
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # ChangeLog
 
+#### 4.6.8
+
+- fix: spelling error for 'nodeselectChange', closes: #3736;
+- fix: update node icon from show false to show true;
+- fix: afterrender should be emitted when the layout is not configured;
+- perf: update related edges while drag-combo;
+- feat: combo supports collapsedSubstituteIcon showing after collapsed;
+- feat: remove animations while first rendering with (collapsed)combos;
+- refactor: toolbar plugin functions;
+
 #### 4.6.6
 
 - fix: destroyLayout error, closes: #3727;

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-core",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "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
@@ -5,7 +5,7 @@
 import { IGroup, IShape } from '@antv/g-base';
 import { isArray, isNil, clone } from '@antv/util';
 import { ILabelConfig, ShapeOptions } from '../interface/shape';
-import { Item, LabelStyle, NodeConfig, ModelConfig, ShapeStyle } from '../types';
+import { Item, LabelStyle, ComboConfig, ModelConfig, ShapeStyle } from '../types';
 import Global from '../global';
 import Shape from './shape';
 import { shapeBase } from './shapeBase';
@@ -43,6 +43,10 @@ const singleCombo: ShapeOptions = {
     stateStyles: {
       ...Global.comboStateStyles,
     },
+    collapsedSubstituteIcon: {
+      show: false,
+      img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*RsnHRqLfJn4AAAAAAAAAAAAAARQnAQ'
+    }
   },
   /**
    * 获取 Combo 宽高
@@ -65,7 +69,7 @@ const singleCombo: ShapeOptions = {
     return size;
   },
   // 私有方法，不希望扩展的 Combo 复写这个方法
-  getLabelStyleByPosition(cfg: NodeConfig, labelCfg: ILabelConfig): LabelStyle {
+  getLabelStyleByPosition(cfg: ComboConfig, labelCfg: ILabelConfig): LabelStyle {
     const labelPosition = labelCfg.position || this.labelPosition;
     const { style: cfgStyle } = cfg;
     let padding: number | number[] = cfg.padding || this.options.padding;
@@ -130,7 +134,7 @@ const singleCombo: ShapeOptions = {
     style.text = cfg.label;
     return style;
   },
-  drawShape(cfg: NodeConfig, group: IGroup): IShape {
+  drawShape(cfg: ComboConfig, group: IGroup): IShape {
     const { shapeType } = this; // || this.type，都已经加了 shapeType
     const style = this.getShapeStyle!(cfg);
     const shape = group.addShape(shapeType, {
@@ -140,18 +144,59 @@ const singleCombo: ShapeOptions = {
     });
     return shape;
   },
-  updateShape(cfg: NodeConfig, item: Item, keyShapeStyle: ShapeStyle) {
+  updateCollapsedIcon(cfg: ComboConfig, item: Item, keyShapeStyle: ShapeStyle) {
+    const { collapsed, collapsedSubstituteIcon = {} } = cfg;
+    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');
+    const iconShapeExist = collapsedIconShape && !collapsedIconShape.destroyed;
+    if (collapsed && show) {
+      if (iconShapeExist) {
+        collapsedIconShape.show();
+      } else {
+        const sizeAttr = {
+          width: width || keyShapeStyle.r * 2 || keyShapeStyle.width,
+          height: height || keyShapeStyle.r * 2 || keyShapeStyle.height,
+        }
+        group.addShape('image', {
+          attrs: {
+            img,
+            x: -sizeAttr.width / 2,
+            y: -sizeAttr.height / 2,
+            ...sizeAttr
+          },
+          name: 'combo-collapsed-substitute-icon',
+          draggable: true
+        });
+      }
+    } else if (iconShapeExist) {
+      collapsedIconShape.hide();
+    }
+  },
+  updateShape(cfg: ComboConfig, item: Item, keyShapeStyle: ShapeStyle) {
     const keyShape = item.get('keyShape');
-    const animate = cfg.animate === undefined ? this.options.animate : cfg.animate;
+    const itemAnimate = item.get('animate');
+    const animate = itemAnimate && (cfg.animate === undefined ? this.options.animate : cfg.animate);
     if (animate && keyShape.animate) {
+      // 更新到展开状态，先将 collapsedIcon 隐藏。否则在动画完成后再出现 collapsedIcon
+      if (!cfg.collapsed) {
+        this.updateCollapsedIcon(cfg, item, keyShapeStyle);
+      }
       keyShape.animate(keyShapeStyle, {
         duration: 200,
         easing: 'easeLinear',
+        callback: () => {
+          if (cfg.collapsed) {
+            this.updateCollapsedIcon(cfg, item, keyShapeStyle);
+          }
+        }
       });
     } else {
       keyShape.attr({
         ...keyShapeStyle,
       });
+      this.updateCollapsedIcon(cfg, item, keyShapeStyle);
     }
 
     (this as any).updateLabel(cfg, item);

diff --git a/packages/core/src/element/combos/circle.ts b/packages/core/src/element/combos/circle.ts
@@ -30,6 +30,10 @@ Shape.registerCombo(
       stateStyles: {
         ...Global.comboStateStyles,
       },
+      collapsedSubstituteIcon: {
+        show: false,
+        img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*RsnHRqLfJn4AAAAAAAAAAAAAARQnAQ'
+      }
     },
     shapeType: 'circle',
     // 文本位置

diff --git a/packages/core/src/element/combos/rect.ts b/packages/core/src/element/combos/rect.ts
@@ -35,6 +35,10 @@ Shape.registerCombo(
       stateStyles: {
         ...Global.comboStateStyles,
       },
+      collapsedSubstituteIcon: {
+        show: false,
+        img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*RsnHRqLfJn4AAAAAAAAAAAAAARQnAQ'
+      }
     },
     shapeType: 'rect',
     labelPosition: 'top',
@@ -217,22 +221,6 @@ Shape.registerCombo(
 
       (this as any).updateShape(cfg, item, style, false);
     },
-    updateShape(cfg: ComboConfig, item: Item, keyShapeStyle: object) {
-      const keyShape = item.get('keyShape');
-      const animate = cfg.animate === undefined ? this.options.animate : cfg.animate;
-      if (animate && keyShape.animate) {
-        keyShape.animate(keyShapeStyle, {
-          duration: 200,
-          easing: 'easeLinear',
-        });
-      } else {
-        keyShape.attr({
-          ...keyShapeStyle,
-        });
-      }
-
-      (this as any).updateLabel(cfg, item);
-    },
   },
   'single-combo',
 );
diff --git a/packages/core/src/element/node.ts b/packages/core/src/element/node.ts
@@ -316,6 +316,7 @@ const singleNode: ShapeOptions = {
       } else {
         // 若传入了 show: false 则删除原先的 icon
         iconShape.remove();
+        delete group['shapeMap'][`${this.type}-icon`];
       }
     } else if (show) {
       // 如果原先不存在 icon，但传入了 show: true，则新增 icon

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

diff --git a/packages/core/src/graph/controller/item.ts b/packages/core/src/graph/controller/item.ts
@@ -171,6 +171,7 @@ export default class ItemController {
       item = new Combo({
         model,
         styles,
+        animate: false,
         bbox: model.collapsed ? getComboBBox([], graph) : comboBBox,
         group: comboGroup,
       });
@@ -182,16 +183,6 @@ export default class ItemController {
         (item as ICombo).addChild(childItem);
         child.depth = (comboModel.depth as number) + 2;
       });
-
-      // collapse the combo if the collapsed is true in the model
-      if (model.collapsed) {
-        setTimeout(() => {
-          if (!item.destroyed) {
-            graph.collapseCombo(item as ICombo, false);
-            graph.updateCombo(item as ICombo);
-          }
-        }, 0);
-      }
     }
 
     if (item) {
@@ -311,7 +302,7 @@ export default class ItemController {
         const comboAnimate =
           model.animate === undefined || cfg.animate === undefined
             ? shapeFactory[shapeType]?.options?.animate
-            : model.animate || cfg.animate;
+            : (model.animate || cfg.animate);
         if (comboAnimate) {
           setTimeout(() => {
             if (!item || (item as ICombo).destroyed) return;

diff --git a/packages/core/src/graph/controller/layout.ts b/packages/core/src/graph/controller/layout.ts
@@ -88,9 +88,9 @@ export default abstract class LayoutController {
   }
 
   // 更换数据
-  public changeData() {
+  public changeData(success) {
     this.destoryLayoutMethods();
-    this.layout();
+    this.layout(success);
   }
 
   public destoryLayoutMethods() {

diff --git a/packages/core/src/graph/graph.ts b/packages/core/src/graph/graph.ts
@@ -1126,6 +1126,16 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
         item = itemController.addItem(type, model) as ICombo;
       }
       this.set('comboTrees', comboTrees);
+
+      if (model.collapsed) {
+        setTimeout(() => {
+          if (item && !item.destroyed) {
+            this.collapseCombo(item as ICombo, false);
+            this.updateCombo(item as ICombo);
+          }
+        }, 0);
+      }
+
     } else if (type === 'node' && isString(model.comboId) && comboTrees) {
       const parentCombo = this.findById(model.comboId as string);
       if (parentCombo && parentCombo.getType && parentCombo.getType() !== 'combo') {
@@ -1484,6 +1494,7 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
       self.add('edge', edge, false, false);
     });
 
+
     const animate = self.get('animate');
     if (self.get('fitView') || self.get('fitCenter')) {
       self.set('animate', false);
@@ -1495,18 +1506,21 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
       layoutController.layout(success);
       if (this.destroyed) return;
     } else {
-      if (self.get('fitView')) {
-        self.fitView();
-      }
-      if (self.get('fitCenter')) {
-        self.fitCenter();
-      }
-
-      self.emit('afterrender');
-      self.set('animate', animate);
+      success();
     }
     // 将在 onLayoutEnd 中被调用
     function success() {
+      // 自底向上将 collapsed 的 combo 合起
+      (self.get('comboTrees') || []).forEach(ctree => {
+        traverseTreeUp<ComboTree>(ctree, child => {
+          const item = self.findById(child.id);
+          if (item.getType() === 'combo' && child.collapsed) {
+            self.collapseCombo(child.id, false);
+            self.updateCombo(item as ICombo);
+          }
+          return true;
+        });
+      });
       // fitView 与 fitCenter 共存时，fitView 优先，fitCenter 不再执行
       if (self.get('fitView')) {
         self.fitView();
@@ -1518,6 +1532,11 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
       if (self.get('fitView') || self.get('fitCenter')) {
         self.set('animate', animate);
       }
+      setTimeout(() => {
+        self.getCombos()?.forEach(combo => {
+          combo.set('animate', true)
+        })
+      }, 0);
     }
 
     if (!this.get('groupByTypes')) {
@@ -1682,15 +1701,33 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
       }
     });
 
+    // 自底向上将 collapsed 的 combo 合起
+    (this.get('comboTrees') || []).forEach(ctree => {
+      traverseTreeUp<ComboTree>(ctree, child => {
+        const item = this.findById(child.id);
+        if (item.getType() === 'combo' && child.collapsed) {
+          this.collapseCombo(child.id, false);
+        }
+        return true;
+      });
+    });
+
     this.set({ nodes: items.nodes, edges: items.edges });
 
     const layoutController = this.get('layoutController');
     if (layoutController) {
-      layoutController.changeData();
+      layoutController.changeData(() => {
+        setTimeout(() => {
+          self.getCombos()?.forEach(combo => {
+            combo.set('animate', true)
+          })
+        }, 0);
+      });
 
       if (self.get('animate') && !layoutController.getLayoutType()) {
         // 如果没有指定布局
         self.positionsAnimate();
+        self.getCombos()?.forEach(combo => combo.set('animate', true))
       } else {
         self.autoPaint();
       }
@@ -2325,9 +2362,7 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
     if (combos && combos.length !== 0) {
       if (referComboModel) {
         updateItems(combos);
-        setTimeout(() => {
-          self.updateCombos();
-        }, 0);
+        self.updateCombos();
       } else {
         self.updateCombos();
       }
@@ -2500,7 +2535,7 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
       layoutController.layout();
       return;
     }
-    if (layoutController.layoutMethod) {
+    if (layoutController.layoutMethods?.length) {
       layoutController.relayout(true);
     } else {
       layoutController.layout();

diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts
@@ -152,7 +152,7 @@ export type GraphTimingEvents =
   | 'aftercollapseexpandcombo'
   | 'graphstatechange'
   | 'afteractivaterelations'
-  | 'nodeselectChange'
+  | 'nodeselectchange'
   | 'itemcollapsed'
   | 'tooltipchange'
   | 'wheelzoom'
@@ -713,6 +713,12 @@ export interface ComboConfig extends ModelConfig {
     offsetX: number;
     offsetY: number;
   }>;
+  collapsedSubstituteIcon?: Partial<{
+    show: boolean;
+    img: string;
+    width: number;
+    height: number;
+  }>;
 }
 
 export interface EdgeConfig extends ModelConfig {

diff --git a/packages/core/tests/unit/shape/combo-collapsed-pos-spec.ts b/packages/core/tests/unit/shape/combo-collapsed-pos-spec.ts
@@ -131,8 +131,11 @@ describe('simple data', () => {
         y: (newNodePoses[0].y + newNodePoses[1].y) / 2,
       },
       {
-        x: (newNodePoses[2].x + newNodePoses[3].x) / 2,
-        y: (newNodePoses[2].y + newNodePoses[3].y) / 2,
+        // x: (newNodePoses[2].x + newNodePoses[3].x) / 2,
+        // y: (newNodePoses[2].y + newNodePoses[3].y) / 2,
+        // 该 combo 是 collapsed，因此不受节点位置影响
+        x: 400,
+        y: 400
       }
     ]