feat: force2 from graphin-force; feat: preset for layout; feat: tweak… (#3853)

* feat: force2 from graphin-force; feat: preset for layout; feat: tweak incremental layout init for force like layouts;

* chore: update tests

* chore: upgrade version num

* chore: onLayoutEnd with nodes param

Author: Yanyan-Wang

CHANGELOG.md

@@ -1,5 +1,11 @@
 # ChangeLog
 
+#### 4.7.0-beta
+
+- feat: force2 from graphin-force;
+- feat: preset for layout;
+- feat: tweak incremental layout init for force like layouts;
+
 #### 4.6.18
 
 - feat: updateLayout from no pipes to pipes, closes: #3726;

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-core",
-  "version": "0.6.17",
+  "version": "0.7.0-beta.2",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",

packages/core/src/global.ts

@@ -64,7 +64,7 @@ const colorSet = {
 };
 
 export default {
-  version: '0.6.17',
+  version: '0.7.0-beta.1',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

packages/core/src/graph/controller/layout.ts

@@ -86,25 +86,30 @@ export default abstract class LayoutController {
 
   // 更换布局
   public changeLayout(cfg) {
-    this.layoutCfg = cfg;
-    this.layoutType = cfg.type || this.layoutType;
+    const { disableTriggerLayout, ...otherCfgs } = cfg;
+    this.layoutCfg = otherCfgs;
+    this.layoutType = otherCfgs.type || this.layoutType;
 
-    this.destoryLayoutMethods();
+    // 不触发重新布局，仅更新参数
+    if (disableTriggerLayout) return;
     this.layout();
   }
 
   // 更换数据
   public changeData(success) {
-    this.destoryLayoutMethods();
     this.layout(success);
   }
 
-  public destoryLayoutMethods() {
+  public destoryLayoutMethods(): string[] {
     const { layoutMethods } = this;
+    const destroyedLayoutTypes = [];
     layoutMethods?.forEach((layoutMethod) => {
+      const layoutType = layoutMethod.getType?.();
+      if (layoutType) destroyedLayoutTypes.push(layoutType);
       layoutMethod.destroy();
     });
     this.layoutMethods = [];
+    return destroyedLayoutTypes;
   }
 
   // 销毁布局，不能使用 this.destroy，因为 controller 还需要被使用，只是把布局算法销毁
@@ -292,6 +297,8 @@ export default abstract class LayoutController {
     }
   }
 
+  public abstract initWithPreset(): boolean;
+
   // 初始化节点到 center 附近
   public initPositions(center, nodes): boolean {
     const { graph } = this;
@@ -301,6 +308,10 @@ export default abstract class LayoutController {
     const nodeLength = nodes ? nodes.length : 0;
     if (!nodeLength) return;
 
+    const hasPreset = this.initWithPreset();
+
+    if (hasPreset) return false;
+
     const width = graph.get('width') * 0.85;
     const height = graph.get('height') * 0.85;
     const horiNum = Math.ceil(Math.sqrt(nodeLength) * (width / height));

packages/core/src/graph/controller/view.ts

@@ -2,7 +2,7 @@ import { AbstractCanvas, BBox } from '@antv/g-base';
 import { Point, IGroup } from '@antv/g-base';
 import { isNumber, isString } from '@antv/util';
 import { Item, Matrix, Padding, GraphAnimateConfig, IEdge, FitViewRules } from '../../types';
-import { formatPadding } from '../../util/base';
+import { formatPadding, isNaN } from '../../util/base';
 import { applyMatrix, invertMatrix, lerpArray } from '../../util/math';
 import { IAbstractGraph } from '../../interface/graph';
 import { transform } from '@antv/matrix-util/lib/ext';
@@ -55,6 +55,7 @@ export default class ViewController {
     // Translate
     const vx = bbox.x + viewCenter.x - groupCenter.x - bbox.minX;
     const vy = bbox.y + viewCenter.y - groupCenter.y - bbox.minY;
+    if (isNaN(vx) || isNaN(vy)) return;
     const translatedMatrix = transform(matrix, [['t', vx, vy]]);
 
     // Zoom
@@ -79,10 +80,13 @@ export default class ViewController {
     const animationConfig = getAnimateCfgWithCallback({
       animateCfg,
       callback: () => {
+        group.setMatrix(zoomedMatrix);
         graph.emit('viewportchange', { action: 'translate', matrix: translatedMatrix });
         graph.emit('viewportchange', { action: 'zoom', matrix: zoomedMatrix });
       }
     });
+    group.stopAnimate();
+    group.setMatrix(startMatrix);
     group.animate((ratio: number) => {
       return { matrix: lerpArray(startMatrix, zoomedMatrix, ratio) };
     }, animationConfig);
@@ -118,7 +122,10 @@ export default class ViewController {
     if (animate) {
       this.animatedFitView(group, startMatrix, animateCfg, bbox, viewCenter, groupCenter, ratio);
     } else {
-      graph.translate(viewCenter.x - groupCenter.x, viewCenter.y - groupCenter.y);
+      const dx = viewCenter.x - groupCenter.x;
+      const dy = viewCenter.y - groupCenter.y;
+      if (isNaN(dx) || isNaN(dy)) return;
+      graph.translate(dx, dy);
 
       if (!graph.zoom(ratio, viewCenter)) {
         console.warn('zoom failed, ratio out of range, ratio: %f', ratio);

packages/core/src/graph/graph.ts

@@ -2439,7 +2439,7 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
    * 若 cfg 含有 type 字段或为 String 类型，且与现有布局方法不同，则更换布局
    * 若 cfg 不包括 type ，则保持原有布局方法，仅更新布局配置项
    */
-  public updateLayout(cfg: any, align?: 'center' | 'begin', alignPoint?: IPoint, stack: boolean = true): void {
+  public updateLayout(cfg: any = {}, align?: 'center' | 'begin', alignPoint?: IPoint, stack: boolean = true): void {
     const layoutController = this.get('layoutController');
 
     if (isString(cfg)) {
@@ -2458,7 +2458,7 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
       // translate to point coordinate system
       toPoint = this.getPointByCanvas(toPoint.x, toPoint.y);
 
-      const forceTypes = ['force', 'gForce', 'fruchterman'];
+      const forceTypes = ['force', 'gForce', 'fruchterman', 'force2'];
 
       // if it is force layout, only center takes effect, and assign center force
       if (forceTypes.includes(cfg.type) || (!cfg.type && forceTypes.includes(layoutController?.layoutType))) {

packages/element/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-element",
-  "version": "0.6.17",
+  "version": "0.7.0-beta.2",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@antv/g-base": "^0.5.1",
-    "@antv/g6-core": "0.6.17",
+    "@antv/g6-core": "0.7.0-beta.2",
     "@antv/util": "~2.0.5"
   },
   "devDependencies": {

packages/g6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "4.6.17",
+  "version": "4.7.0-beta.2",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@antv/g6-pc": "0.6.17"
+    "@antv/g6-pc": "0.7.0-beta.2"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",

packages/g6/src/index.ts

@@ -1,7 +1,7 @@
 import G6 from '@antv/g6-pc';
 
-G6.version = '4.6.17';
+G6.version = '4.7.0-beta.2';
 
 export * from '@antv/g6-pc';
 export default G6;
-export const version = '4.6.17';
+export const version = '4.7.0-beta.2';

packages/pc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-pc",
-  "version": "0.6.17",
+  "version": "0.7.0-beta.2",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -75,11 +75,11 @@
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-math": "^0.1.1",
     "@antv/g-svg": "^0.5.1",
-    "@antv/g6-core": "0.6.17",
-    "@antv/g6-element": "0.6.17",
-    "@antv/g6-plugin": "0.6.17",
+    "@antv/g6-core": "0.7.0-beta.2",
+    "@antv/g6-element": "0.7.0-beta.2",
+    "@antv/g6-plugin": "0.7.0-beta.2",
     "@antv/hierarchy": "^0.6.7",
-    "@antv/layout": "^0.2.5",
+    "@antv/layout": "^0.3.0-beta.1",
     "@antv/matrix-util": "^3.1.0-beta.3",
     "@antv/path-util": "^2.0.3",
     "@antv/util": "~2.0.5",