feat: updateLayout from no pipes to pipes, closes: #3726; fix: relayout with pipes; (#3840)

Author: Yanyan-Wang

CHANGELOG.md

@@ -1,5 +1,10 @@
 # ChangeLog
 
+#### 4.6.18
+
+- feat: updateLayout from no pipes to pipes, closes: #3726;
+- fix: relayout with pipes;
+
 #### 4.6.17
 
 - fix: legend changeData problem, closes: #3561;

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

@@ -50,11 +50,17 @@ export default abstract class LayoutController {
 
   protected isLayoutTypeSame(cfg): boolean {
     const current = this.getLayoutCfgType(cfg);
-    // already has pipes
-    if (Array.isArray(this.layoutType)) {
-      return this.layoutType.every((type, index) => type === current[index]);
+    const preHasPipies = Array.isArray(this.layoutType);
+    const currentHasPipes = Array.isArray(current);
+    // already has pipes, and the new one is pipes
+    if (preHasPipies && currentHasPipes) {
+      return (this.layoutType as string[]).every((type, index) => type === current[index]);
     }
-
+    // only one of the pre and current is pipes
+    if (Array.isArray(current) || Array.isArray(this.layoutType)) {
+      return false;
+    }
+    // both of the pre and current are not pipes
     return cfg?.type === this.layoutType;
   }
 
@@ -171,28 +177,7 @@ export default abstract class LayoutController {
     } as GraphData;
   }
 
-  protected reLayoutMethod(layoutMethod, layoutCfg): Promise<void> {
-    return new Promise((reslove, reject) => {
-      const { graph } = this;
-      const layoutType = layoutCfg?.type;
-
-      // 每个布局方法都需要注册
-      layoutCfg.onLayoutEnd = () => {
-        graph.emit('aftersublayout', { type: layoutType });
-        reslove();
-      };
-
-      layoutMethod.init(this.data);
-      if (layoutType === 'force') {
-        layoutMethod.ticking = false;
-        layoutMethod.forceSimulation.stop();
-      }
-
-      graph.emit('beforesublayout', { type: layoutType });
-      layoutMethod.execute();
-      if (layoutMethod.isCustomLayout && layoutCfg.onLayoutEnd) layoutCfg.onLayoutEnd();
-    });
-  }
+  protected abstract execLayoutMethod(layoutCfg, order): Promise<void>;
 
   // 重新布局
   public relayout(reloadData?: boolean) {
@@ -213,7 +198,7 @@ export default abstract class LayoutController {
     layoutMethods?.forEach((layoutMethod: any, index: number) => {
       const currentCfg = layoutCfg[index] || layoutCfg;
       start = start.then(() => {
-        const relayoutPromise = this.reLayoutMethod(layoutMethod, currentCfg);
+        const relayoutPromise = this.execLayoutMethod(layoutMethod, currentCfg);
         if (index === layoutMethods.length - 1) {
           layoutCfg.onAllLayoutEnd?.();
         }

packages/core/src/graph/graph.ts

@@ -2484,10 +2484,11 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
     const oriLayoutCfg = { ...this.get('layout') };
     const layoutCfg: any = {};
     Object.assign(layoutCfg, oriLayoutCfg, cfg);
+    if (cfg.pipes && !cfg.type) delete layoutCfg.type;
+    else if (!cfg.pipes && layoutCfg.type) delete layoutCfg.pipes;
     this.set('layout', layoutCfg);
 
     if (!layoutController) return;
-
     if (
       layoutController.isLayoutTypeSame(layoutCfg) &&
       layoutCfg.gpuEnabled === oriLayoutCfg.gpuEnabled

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

@@ -106,7 +106,7 @@ export default class LayoutController extends AbstractLayout {
     }
   }
 
-  private execLayoutMethod(layoutCfg, order): Promise<void> {
+  protected execLayoutMethod(layoutCfg, order): Promise<void> {
     return new Promise(async (reslove, reject) => {
       const { graph } = this;
       if (!graph || graph.get('destroyed')) return;

packages/site/docs/manual/middle/elements/nodes/jsx-node.en.md

@@ -79,6 +79,19 @@ G6.registerNode(
 Using JSX-like syntax to customize a complicated node.
 
 ```javascript
+// Propose the data for a node as following:
+const data = {
+  nodes: [
+    {
+      id: 'node1',
+      type: 'xml-card', // the custom node's type name
+      metric: 'CPU usage',
+      cpuUsage: 80
+    },
+  ]
+}
+
+// def for the drawing of the percentage bar
 const percentageBar = ({ width, used, height = 12 }) => `
   <rect style={{
     marginLeft: 10,
@@ -98,6 +111,7 @@ const percentageBar = ({ width, used, height = 12 }) => `
   </rect>
 `;
 
+// def for the drawing of the jsx node
 const textXML = (cfg) => `
 <group>
   <rect style={{
@@ -112,7 +126,7 @@ const textXML = (cfg) => `
 		radius: [0, 0, 6, 6] }} 
 		keyshape="true" 
 		cursor="move">
-    <text style={{marginLeft: 10 ,fill: "red"}}>${FULL}</text>
+    <text style={{marginLeft: 10 ,fill: 'red'}}>${FULL}</text>
     <text style={{ marginTop: 5, marginLeft: 10, fill: '#333'}}>${cfg.metric}: </text>
     <text style={{
       marginTop: 1,
@@ -125,6 +139,7 @@ const textXML = (cfg) => `
 </group>
 `;
 
+// register the custom node to G6
 G6.registerNode('test', {
   jsx: textXML,
 });

packages/site/docs/manual/middle/elements/nodes/jsx-node.zh.md

@@ -79,6 +79,19 @@ G6.registerNode(
 我们再来看一个稍微复杂的案例。
 
 ```javascript
+// 假设一个节点数据如下：
+const data = {
+  nodes: [
+    {
+      id: 'node1',
+      type: 'xml-card', // 使用自定义的节点名称
+      metric: 'CPU usage',
+      cpuUsage: 80
+    },
+  ]
+}
+
+// 定义进度条的绘制方式
 const percentageBar = ({ width, used, height = 12 }) => `
   <rect style={{
     marginLeft: 10,
@@ -98,6 +111,7 @@ const percentageBar = ({ width, used, height = 12 }) => `
   </rect>
 `;
 
+// 定义节点的 jsx 绘制方式
 const textXML = (cfg) => `
 <group>
   <rect style={{
@@ -112,7 +126,7 @@ const textXML = (cfg) => `
 		radius: [0, 0, 6, 6] }} 
 		keyshape="true" 
 		cursor="move">
-    <text style={{marginLeft: 10 ,fill: "red"}}>${FULL}</text>
+    <text style={{marginLeft: 10 ,fill: 'red'}}>'FULL'</text>
     <text style={{ marginTop: 5, marginLeft: 10, fill: '#333'}}>${cfg.metric}: </text>
     <text style={{
       marginTop: 1,
@@ -125,7 +139,8 @@ const textXML = (cfg) => `
 </group>
 `;
 
-G6.registerNode('test', {
+// 注册节点
+G6.registerNode('xml-card', {
   jsx: textXML,
 });
 ```