fix: custom layout warning and layout failed problem; (#3758)

* fix: custom layout warning and layout failed problem; fix: upgrade layout to fix DagreLayoutOptions type error; fix: upgrade layout to fix comboCombined with original node infomations problem; * chore: tests refine * Truncate node labels (#3690) * Added maxLength property to LabelStyle * Added unit test for label max length * Added truncateLabelByLength util function * Added safety checks for negative and non-number maxLength values * Moved maxLength prop to labelCfg * feat: maxLength for labelCfg; * chore: upgrade version nums Co-authored-by: Tony <[email protected]>
antvis · Jun 28, 2022 · 4512b10 · 4512b10
1 parent 778720c
commit 4512b10
Show file tree

Hide file tree

Showing 26 changed files with 598 additions and 43 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # ChangeLog
 
+#### 4.6.10
+
+- feat: maxLength for labelCfg;
+- fix: custom layout warning and layout failed problem;
+- fix: upgrade layout to fix DagreLayoutOptions type error;
+- fix: upgrade layout to fix comboCombined with original node infomations problem;
+
 #### 4.6.8
 
 - fix: spelling error for 'nodeselectChange', closes: #3736;

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-core",
-  "version": "0.6.8",
+  "version": "0.6.10",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",

diff --git a/packages/core/src/element/node.ts b/packages/core/src/element/node.ts
@@ -10,6 +10,7 @@ import { formatPadding } from '../util/base';
 import Global from '../global';
 import Shape from './shape';
 import { shapeBase } from './shapeBase';
+import { truncateLabelByLength } from '../util/graphic';
 
 const singleNode: ShapeOptions = {
   itemType: 'node',
@@ -48,11 +49,19 @@ const singleNode: ShapeOptions = {
   },
   // 私有方法，不希望扩展的节点复写这个方法
   getLabelStyleByPosition(cfg: NodeConfig, labelCfg: ILabelConfig): LabelStyle {
+    const labelMaxLength = labelCfg.maxLength;
+
+    let text = cfg!.label as string;
+
+    if (labelMaxLength) {
+      text = truncateLabelByLength(text, labelMaxLength);
+    }
+
     const labelPosition = labelCfg.position || this.labelPosition;
 
     // 默认的位置（最可能的情形），所以放在最上面
     if (labelPosition === 'center') {
-      return { x: 0, y: 0, text: cfg!.label as string, textBaseline: 'middle', textAlign: 'center' };
+      return { x: 0, y: 0, text, textBaseline: 'middle', textAlign: 'center' };
     }
 
     let { offset } = labelCfg;
@@ -98,7 +107,7 @@ const singleNode: ShapeOptions = {
         };
         break;
     }
-    style.text = cfg.label;
+    style.text = text;
     return style;
   },
   getLabelBgStyleByPosition(

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.8',
+  version: '0.6.10',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

diff --git a/packages/core/src/graph/controller/layout.ts b/packages/core/src/graph/controller/layout.ts
@@ -211,7 +211,7 @@ export default abstract class LayoutController {
 
     let start = Promise.resolve();
     layoutMethods?.forEach((layoutMethod: any, index: number) => {
-      const currentCfg = layoutCfg[index];
+      const currentCfg = layoutCfg[index] || layoutCfg;
       start = start.then(() => this.reLayoutMethod(layoutMethod, currentCfg));
     });
 

diff --git a/packages/core/src/interface/graph.ts b/packages/core/src/interface/graph.ts
@@ -21,6 +21,7 @@ import {
   IG6GraphEvent,
   IPoint,
   FitViewRules,
+  G6Event
 } from '../types';
 import { IEdge, INode, ICombo } from './item';
 import Hull from '../item/hull';
@@ -625,12 +626,12 @@ export interface IAbstractGraph extends EventEmitter {
   /**
    * 重新定义监听函数，复写参数类型
    */
-  on: <T = IG6GraphEvent>(eventName: string, callback: (e: T) => void, once?: boolean) => this;
+  on: <T = IG6GraphEvent>(eventName: G6Event, callback: (e: T) => void, once?: boolean) => this;
 
   /**
    * 移除指定的監聽函數
    */
-  off: <T = IG6GraphEvent>(eventName: string, callback: (e: T) => void, once?: boolean) => this;
+  off: <T = IG6GraphEvent>(eventName: G6Event, callback: (e: T) => void, once?: boolean) => this;
 
 
   /**

diff --git a/packages/core/src/interface/shape.ts b/packages/core/src/interface/shape.ts
@@ -8,6 +8,7 @@ export type ILabelConfig = Partial<{
   refY: number;
   autoRotate: boolean;
   style: LabelStyle;
+  maxLength?: number;
 }>;
 
 export type ShapeDefine = string | ((cfg: ModelConfig) => string);

diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts
@@ -185,7 +185,7 @@ export type MobileInteractionEventType = MobileInteractionEvent;
  * @example
  * https://g6.antv.vision/en/docs/api/Event#combo-interaction-event
  */
-export type G6Event = NodeEventType | EdgeEventType | ComboEventType | CanvasEventType | GraphTimingEventType | MobileInteractionEventType | CommonInteractionEvent | CommonInteractionEvent;
+export type G6Event = NodeEventType | EdgeEventType | ComboEventType | CanvasEventType | GraphTimingEventType | MobileInteractionEventType | CommonInteractionEvent | CommonInteractionEvent | (string & {});
 
 export interface IG6GraphEvent extends GraphEvent {
   item: Item | null;

diff --git a/packages/core/src/util/graphic.ts b/packages/core/src/util/graphic.ts
@@ -375,6 +375,13 @@ export const getTextSize = (text: string, fontSize: number) => {
   return [width, fontSize];
 };
 
+export const truncateLabelByLength = (text: string, length: number) => {
+  if (typeof length !== 'number' || length <= 0 || length >= text.length) {
+    return text;
+  }
+  return text.substring(0, length) + '...';
+}
+
 /**
  * construct the trees from combos data
  * @param array the combos array

diff --git a/packages/core/tests/unit/shape/combo-collapsed-pos-spec.ts b/packages/core/tests/unit/shape/combo-collapsed-pos-spec.ts
@@ -1,4 +1,4 @@
-import { clone, groupBy } from '@antv/util';
+import { clone, groupBy, isNumberEqual } from '@antv/util';
 import Graph from '../implement-graph';
 
 const div = document.createElement('div');
@@ -477,11 +477,11 @@ describe('hierarchy data 1: combo A has one child: an empty combo B', () => {
     comboB = graph.findById('B');
     comboBModel = comboB.getModel();
 
-    expect(comboBModel.x).toBe(100);
-    expect(comboBModel.y).toBe(200);
+    expect(isNumberEqual(comboBModel.x, 100, 1)).toBe(true);
+    expect(isNumberEqual(comboBModel.y, 200, 1)).toBe(true);
     // A has no position, follows the child
-    expect(comboAModel.x).toBe(100);
-    expect(comboAModel.y).toBe(200);
+    expect(isNumberEqual(comboAModel.x, 100, 1)).toBe(true);
+    expect(isNumberEqual(comboAModel.y, 200, 1)).toBe(true);
   });
   it('parent combo collapsed with pos, child combo with pos', (done) => {
     const testData = clone(data);

diff --git a/packages/core/tests/unit/shape/node-spec.ts b/packages/core/tests/unit/shape/node-spec.ts
@@ -247,6 +247,27 @@ describe('shape node test', () => {
       expect(shape.attr('lineWidth')).toBe(1);
     });
 
+    it('max label length', () => {
+      const mockLabel = 'This is a test label';
+      const group = canvas.addGroup();
+      factory.draw(
+        'simple-circle',
+        {
+          size: 20,
+          color: 'blue',
+          label: mockLabel,
+          labelCfg: {
+            maxLength: 5,
+          },
+        },
+        group,
+      );
+      canvas.draw();
+      const label = group.get('children')[1];
+
+      expect(label.attr('text')).toBe(mockLabel.substring(0, 5) + '...');
+    });
+
     it('clear', () => {
       canvas.destroy();
     });

diff --git a/packages/core/tests/unit/util/graphic-spec.ts b/packages/core/tests/unit/util/graphic-spec.ts
@@ -1,4 +1,4 @@
-import { traverseTree, traverseTreeUp, getTextSize } from '../../../src/util/graphic';
+import { traverseTree, traverseTreeUp, getTextSize, truncateLabelByLength } from '../../../src/util/graphic';
 
 interface TreeNode {
   id: string;
@@ -89,4 +89,22 @@ describe('graphic unit test', () => {
     result = getTextSize('体验技术', 14);
     expect(result).toEqual([56, 14]);
   });
+
+  it('truncateLabelByLength' ,() => {
+    const label = 'This is a test label';
+    let length = 5;
+
+    let result = truncateLabelByLength(label, length);
+    expect(result).toEqual(label.substring(0, 5) + '...');
+
+    length = 100;
+
+    result = truncateLabelByLength(label, length);
+    expect(result).toEqual(label);
+
+    length = -1;
+
+    result = truncateLabelByLength(label, length);
+    expect(result).toEqual(label);
+  });
 });
diff --git a/packages/element/package.json b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-element",
-  "version": "0.6.8",
+  "version": "0.6.10",
   "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.8",
+    "@antv/g6-core": "0.6.10",
     "@antv/util": "~2.0.5"
   },
   "devDependencies": {

diff --git a/packages/g6/package.json b/packages/g6/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "4.6.8",
+  "version": "4.6.10",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@antv/g6-pc": "0.6.8"
+    "@antv/g6-pc": "0.6.10"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",

diff --git a/packages/g6/src/index.ts b/packages/g6/src/index.ts
@@ -1,7 +1,7 @@
 import G6 from '@antv/g6-pc';
 
-G6.version = '4.6.8';
+G6.version = '4.6.10';
 
 export * from '@antv/g6-pc';
 export default G6;
-export const version = '4.6.8';
+export const version = '4.6.10';
diff --git a/packages/pc/package.json b/packages/pc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-pc",
-  "version": "0.6.8",
+  "version": "0.6.10",
   "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.8",
-    "@antv/g6-element": "0.6.8",
-    "@antv/g6-plugin": "0.6.8",
+    "@antv/g6-core": "0.6.10",
+    "@antv/g6-element": "0.6.10",
+    "@antv/g6-plugin": "0.6.10",
     "@antv/hierarchy": "^0.6.7",
-    "@antv/layout": "^0.2.1",
+    "@antv/layout": "^0.2.5",
     "@antv/matrix-util": "^3.1.0-beta.3",
     "@antv/path-util": "^2.0.3",
     "@antv/util": "~2.0.5",

diff --git a/packages/pc/src/global.ts b/packages/pc/src/global.ts
@@ -7,7 +7,7 @@ const textColor = 'rgb(0, 0, 0)';
 const colorSet = getColorsWithSubjectColor(subjectColor, backColor);
 
 export default {
-  version: '0.6.8',
+  version: '0.6.10',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

diff --git a/packages/pc/tests/unit/element/edge-label-back-spec.ts b/packages/pc/tests/unit/element/edge-label-back-spec.ts
@@ -136,12 +136,12 @@ describe('text background label', () => {
       }, 30);
     }, 100)
   });
-  it('text background with autoRotate false and clearItemStates', () => {
+  it('text background with autoRotate false and clearItemStates', (done) => {
     let edge = graph.getEdges()[0];
     let labelBgShape = edge.getContainer().get('children')[1];
     let { x, y } = labelBgShape.attr();
-    expect(labelBgShape.attr().x).toBe(176.85302734375);
-    expect(labelBgShape.attr().y).toBe(116);
+    expect(x).toBe(176.85302734375);
+    expect(y).toBe(116);
 
     graph.updateItem(graph.getNodes()[0], {
       x: graph.getNodes()[0].getModel().x + 100,
@@ -150,8 +150,11 @@ describe('text background label', () => {
     graph.clearItemStates(edge, ['active']);
 
     labelBgShape = edge.getContainer().get('children')[1];
-    const { x: newX, y: newY } = labelBgShape.attr();
-    expect(numberEqual(newX, 226, 2)).toBe(true);
-    expect(numberEqual(newY, 166, 2)).toBe(true);
+    setTimeout(() => {
+      const { x: newX, y: newY } = labelBgShape.attr();
+      expect(numberEqual(newX, 226, 2)).toBe(true);
+      expect(numberEqual(newY, 166, 2)).toBe(true);
+      done()
+    }, 16);
   });
 });
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-plugin",
-  "version": "0.6.8",
+  "version": "0.6.10",
   "description": "G6 Plugin",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,8 +22,8 @@
     "@antv/g-base": "^0.5.1",
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-svg": "^0.5.2",
-    "@antv/g6-core": "0.6.8",
-    "@antv/g6-element": "0.6.8",
+    "@antv/g6-core": "0.6.10",
+    "@antv/g6-element": "0.6.10",
     "@antv/matrix-util": "^3.1.0-beta.3",
     "@antv/scale": "^0.3.4",
     "@antv/util": "^2.0.9",

diff --git a/packages/site/examples/net/comboForce/API.en.md b/packages/site/examples/net/comboForce/API.en.md
@@ -2,4 +2,6 @@
 title: API
 ---
 
+`markdown:docs/api/graphLayout/comboCombined.en.md`
+
 `markdown:docs/api/graphLayout/comboForce.en.md`
diff --git a/packages/site/examples/net/comboForce/API.zh.md b/packages/site/examples/net/comboForce/API.zh.md
@@ -2,4 +2,6 @@
 title: API
 ---
 
+`markdown:docs/api/graphLayout/comboCombined.zh.md`
+
 `markdown:docs/api/graphLayout/comboForce.zh.md`