fix: layout with fitView after pipes refactor

CHANGELOG.md

@@ -1,9 +1,15 @@
 # ChangeLog
 
+#### 4.2.3
+
+- fix: layout with fitView;
+
 #### 4.2.2
+
 - feat: pipe layouts for subgraphs;
 
 #### 4.2.1
+
 - fix: circle combo edge linking position problem;
 - fix: drag minimap viewport with forbidden icon in chrome on windows;
 - fix: show node without node position problem;
@@ -16,14 +22,17 @@
 - feat: tooltip with trigger configuration, supports mouseenter and click;
 
 #### 4.2.0
+
 - fix: combo edge link position problem;
 - fix: activate-relations with combo and combo edges problem;
 - feat: support config TimeBar handler, background, foreground, tick label, tick line style;
 
 #### 4.1.16
+
 - fix: webworker in dist;
 
 #### 4.1.15
+
 - fix: cubic-x problem, closes: #2698;
 
 #### 4.1.14

packages/core/package.json

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

packages/core/src/global.ts

@@ -64,7 +64,7 @@ const colorSet = {
 };
 
 export default {
-  version: '0.2.2',
+  version: '0.2.3',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

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

@@ -168,7 +168,7 @@ export default abstract class LayoutController {
 
       // 每个布局方法都需要注册
       layoutCfg.onLayoutEnd = () => {
-        graph.emit('afterSublayout', { type: layoutType });
+        graph.emit('aftersublayout', { type: layoutType });
         reslove();
       }
 
@@ -178,7 +178,7 @@ export default abstract class LayoutController {
         layoutMethod.forceSimulation.stop();
       }
 
-      graph.emit('beforeSublayout', { type: layoutType });
+      graph.emit('beforesublayout', { type: layoutType });
       layoutMethod.execute();
       if (layoutMethod.isCustomLayout && layoutCfg.onLayoutEnd) layoutCfg.onLayoutEnd();
     });

packages/element/package.json

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

packages/g6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@antv/g6-pc": "0.2.2"
+    "@antv/g6-pc": "0.2.3"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",

packages/g6/src/index.ts

@@ -1,7 +1,7 @@
 import G6 from '@antv/g6-pc';
 
-G6.version = '4.2.2';
+G6.version = '4.2.3';
 
 export * from '@antv/g6-pc';
 export default G6;
-export const version = '4.2.2';
+export const version = '4.2.3';

packages/pc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-pc",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -74,9 +74,9 @@
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-math": "^0.1.1",
     "@antv/g-svg": "^0.5.1",
-    "@antv/g6-core": "0.2.2",
-    "@antv/g6-plugin": "0.2.2",
-    "@antv/g6-element": "0.2.2",
+    "@antv/g6-core": "0.2.3",
+    "@antv/g6-plugin": "0.2.3",
+    "@antv/g6-element": "0.2.3",
     "@antv/algorithm": "^0.1.5",
     "@antv/hierarchy": "^0.6.7",
     "@antv/layout": "^0.1.11",

packages/pc/src/global.ts

@@ -7,7 +7,7 @@ const textColor = 'rgb(0, 0, 0)';
 const colorSet = getColorsWithSubjectColor(subjectColor, backColor);
 
 export default {
-  version: '0.2.2',
+  version: '0.2.3',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

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

@@ -106,14 +106,14 @@ export default class LayoutController extends AbstractLayout {
     }
   }
 
-  private execLayoutMethod(layoutCfg, order, success?: () => void): Promise<void> {
+  private execLayoutMethod(layoutCfg, order): Promise<void> {
     return new Promise((reslove, reject) => {
       const { graph } = this;
       let layoutType = layoutCfg.type;
 
       // 每个布局方法都需要注册
       layoutCfg.onLayoutEnd = () => {
-        graph.emit('afterSublayout', { type: layoutType });
+        graph.emit('aftersublayout', { type: layoutType });
         reslove();
       }
 
@@ -169,12 +169,9 @@ export default class LayoutController extends AbstractLayout {
       layoutMethod.init(layoutData);
       // 若存在节点没有位置信息，且没有设置 layout，在 initPositions 中 random 给出了所有节点的位置，不需要再次执行 random 布局
       // 所有节点都有位置信息，且指定了 layout，则执行布局（代表不是第一次进行布局）
-      graph.emit('beforeSublayout', { type: layoutType });
+      graph.emit('beforesublayout', { type: layoutType });
       layoutMethod.execute();
       if (layoutMethod.isCustomLayout && layoutCfg.onLayoutEnd) layoutCfg.onLayoutEnd();
-      // 在执行 execute 后立即执行 success，且在 timeBar 中有 throttle，可以防止 timeBar 监听 afterrender 进行 changeData 后 layout，从而死循环
-      // 对于 force 一类布局完成后的 fitView 需要用户自己在 onLayoutEnd 中配置
-      if (success) success();
       this.layoutMethods.push(layoutMethod);
     });
   }
@@ -186,14 +183,14 @@ export default class LayoutController extends AbstractLayout {
 
       // 每个布局方法都需要注册
       layoutCfg.onLayoutEnd = () => {
-        graph.emit('afterSublayout', { type: layoutType });
+        graph.emit('aftersublayout', { type: layoutType });
         reslove();
       }
 
       const layoutData = this.filterLayoutData(this.data, layoutCfg);
       layoutMethod.init(layoutData);
       layoutMethod.updateCfg(layoutCfg);
-      graph.emit('beforeSublayout', { type: layoutType });
+      graph.emit('beforesublayout', { type: layoutType });
       layoutMethod.execute();
       if (layoutMethod.isCustomLayout && layoutCfg.onLayoutEnd) layoutCfg.onLayoutEnd();
     });
@@ -285,16 +282,19 @@ export default class LayoutController extends AbstractLayout {
 
     let start = Promise.resolve();
     if (layoutCfg.type) {
-      start = start.then(() => this.execLayoutMethod(layoutCfg, 0, success));
+      start = start.then(() => this.execLayoutMethod(layoutCfg, 0));
     } else if (layoutCfg.pipes) {
       layoutCfg.pipes.forEach((cfg, index) => {
-        start = start.then(() => this.execLayoutMethod(cfg, index, success));
+        start = start.then(() => this.execLayoutMethod(cfg, index));
       });
     }
 
     // 最后统一在外部调用onAllLayoutEnd
     start.then(() => {
       if (layoutCfg.onAllLayoutEnd) layoutCfg.onAllLayoutEnd();
+      // 在执行 execute 后立即执行 success，且在 timeBar 中有 throttle，可以防止 timeBar 监听 afterrender 进行 changeData 后 layout，从而死循环
+      // 对于 force 一类布局完成后的 fitView 需要用户自己在 onLayoutEnd 中配置
+      if (success) success();
     }).catch((error) => {
       console.warn('graph layout failed,', error);
     });

packages/plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-plugin",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "G6 Plugin",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
     "@antv/g-base": "^0.5.1",
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-svg": "^0.5.2",
-    "@antv/g6-core": "0.2.2",
+    "@antv/g6-core": "0.2.3",
     "@antv/matrix-util": "^3.0.4",
     "@antv/scale": "^0.3.4",
     "@antv/util": "^2.0.9",

packages/site/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/g6-site",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "G6 sites deployed on gh-pages",
   "keywords": [
     "antv",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@antv/chart-node-g6": "^0.0.3",
     "@antv/util": "^2.0.9",
-    "@antv/g6": "4.2.2",
+    "@antv/g6": "",
     "@antv/gatsby-theme-antv": "1.1.1",
     "gatsby": "^2.24.40",
     "gh-pages": "^2.1.1",