V5 feat/cubic edge,cubic horizon edge,cubic vertical edge

packages/g6/jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-  runner: 'jest-electron/runner',
-  testEnvironment: 'jest-electron/environment',
+  runner: '@kayahr/jest-electron-runner',
+  testEnvironment: '@kayahr/jest-electron-runner/environment',
   preset: 'ts-jest',
   collectCoverage: false,
   collectCoverageFrom: [
@@ -12,13 +12,14 @@ module.exports = {
   moduleDirectories: ['node_modules', 'src'],
   moduleFileExtensions: ['js', 'ts', 'json'],
   moduleNameMapper: {
-    '@g6/types': '<rootDir>/types',
+    '@g6/types': '<rootDir>/src/types',
     '@g6/(.*)': '<rootDir>/src/$1',
-    '^d3-(.*)$': `d3-$1/dist/d3-$1`,
+    '^d3-(.*)$': '<rootDir>/../../node_modules/d3-$1/dist/d3-$1.min.js',
   },
   globals: {
     'ts-jest': {
       diagnostics: false,
     },
   },
+  testTimeout: 450000,
 };

packages/g6/package.json

@@ -48,7 +48,7 @@
     "fix": "eslint ./src ./tests --fix && prettier ./src ./tests --write ",
     "test": "jest",
     "size": "limit-size",
-    "test-live": "DEBUG_MODE=1 jest --watch  ./tests/unit/show-animate-spec.ts",
+    "test-live": "DEBUG_MODE=1 jest --watch  ./tests/unit/edge-spec.ts",
     "test-behavior": "DEBUG_MODE=1 jest --watch ./tests/unit/item-3d-spec.ts"
   },
   "lint-staged": {
@@ -86,29 +86,28 @@
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "@umijs/fabric": "^2.0.0",
-    "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
     "eslint": "^7.22.0",
     "eslint-plugin-import": "^2.22.1",
     "father": "^2.29.1",
-    "jest": "^26.0.1",
-    "jest-electron": "^0.1.7",
+    "jest": "^28.1.3",
+    "@kayahr/jest-electron-runner": "^5.1.1",
     "jest-extended": "^0.11.2",
     "limit-size": "^0.1.4",
     "lint-staged": "^10.5.4",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.0",
-    "rollup": "^2.39.0",
+    "rollup": "^2.79.1",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-polyfill-node": "^0.8.0",
     "rollup-plugin-typescript": "^1.0.1",
-    "rollup-plugin-uglify": "^6.0.4",
+    "@rollup/plugin-terser": "^0.4.3",
     "rollup-plugin-visualizer": "^5.6.0",
     "stats.js": "^0.17.0",
-    "ts-jest": "^24.1.0",
-    "typedoc": "^0.23.24",
-    "typescript": "^4.6.3",
+    "ts-jest": "^28.0.8",
+    "typedoc": "^0.24.0",
+    "typescript": "^4.9.5",
     "vite": "^4.2.2"
   },
   "limit-size": [

packages/g6/rollup.config.js

@@ -1,4 +1,4 @@
-import { uglify } from 'rollup-plugin-uglify';
+import terser from '@rollup/plugin-terser';
 import resolve from 'rollup-plugin-node-resolve';
 import typescript from 'rollup-plugin-typescript';
 import commonjs from '@rollup/plugin-commonjs';
@@ -21,7 +21,7 @@ module.exports = [
       resolve(),
       commonjs(),
       typescript(),
-      uglify(),
+      terser(),
       ...(isBundleVis ? [visualizer()] : []),
     ],
   },

packages/g6/src/stdlib/index.ts

@@ -24,6 +24,9 @@ import RotateCanvas3D from './behavior/rotate-canvas-3d';
 import TrackCanvas3D from './behavior/track-canvas-3d';
 import OrbitCanvas3D from './behavior/orbit-canvas-3d';
 import { HoverActivate } from './behavior/hover-activate';
+import { CubicEdge } from './item/edge/cubic';
+import { CubicHorizonEdge } from './item/edge/cubic-horizon';
+import { CubicVerticalEdge } from './item/edge/cubic-vertical';
 
 const stdLib = {
   transforms: {
@@ -62,6 +65,9 @@ const stdLib = {
   },
   edges: {
     'line-edge': LineEdge,
+    'cubic-edge': CubicEdge,
+    'cubic-horizon-edge': CubicHorizonEdge,
+    'cubic-vertical-edge': CubicVerticalEdge
   },
   combos: {},
 };

packages/g6/src/stdlib/item/edge/base.ts

@@ -379,7 +379,7 @@ export abstract class BaseEdge {
     }
 
     if (labelShapeProps) {
-      const referShape = labelBackgroundShape || labelShape;
+      const referShape = labelBackgroundShape|| labelShape;
       const referBounds =
         this.boundsCache.labelBackgroundShapeGeometry ||
         this.boundsCache.labelShapeGeometry ||

packages/g6/src/stdlib/item/edge/cubic-horizon.ts

@@ -0,0 +1,112 @@
+import { DisplayObject, Line } from '@antv/g';
+import { EdgeDisplayModel } from 'types';
+import { Point } from 'types/common';
+import { EdgeModelData, EdgeShapeMap } from 'types/edge';
+import { State } from 'types/item';
+import { BaseEdge } from './base'
+import { IPoint } from '@antv/g6';
+import { vec2 } from '@antv/matrix-util';
+import { CubicEdge } from './cubic';
+import { off } from 'process';
+
+export class CubicHorizonEdge extends CubicEdge {
+
+  public type = 'cubic-horizon-edge';
+
+  public defaultStyles = {
+    keyShape: {
+      x1: 0,
+      y1: 0,
+      z1: 0,
+      x2: 0,
+      y2: 0,
+      z2: 0,
+      isBillboard: true,
+    },
+  };
+  constructor(props) {
+    super(props);
+    // suggest to merge default styles like this to avoid style value missing
+    // this.defaultStyles = mergeStyles([this.baseDefaultStyles, this.defaultStyles]);
+  }
+
+  /**
+   * calculate the control points by curvePosition|controlPoints|curveOffset
+   * @param startPoint: source point position of edge
+   * @param endPoint target point position of edge
+   * @param percent the proportion of control points' in the segment, Range 0 to 1
+   * @param controlPoints the control point position 
+   * @param offset the curveOffset
+   * @returns control points 
+   */
+  protected getControlPoints: (startPoint: Point,
+    endPoint: Point,
+    percent: number,
+    controlPoints: number[],
+    offset: number
+  ) => [Point, Point] = (
+      startPoint: Point,
+      endPoint: Point,
+      percent = 0.5,
+      controlPoints,
+      offset = 20,
+  ) => {
+
+    if ((startPoint.x - endPoint.x) * (startPoint.y - endPoint.y ) < 0) {
+      offset = -offset 
+    }
+
+    const controlPoint1: IPoint = this.getControlPoint(startPoint, endPoint, percent, offset) 
+    const controlPoint2: IPoint = this.getControlPoint(startPoint, endPoint, percent, -offset) 
+
+    return [controlPoint1, controlPoint2]
+  }
+
+  /**
+ * 根据起始点、相对位置、偏移量计算控制点
+ * @param  {IPoint} startPoint 起始点，包含 x,y
+ * @param  {IPoint} endPoint  结束点, 包含 x,y
+ * @param  {Number} percent   相对位置,范围 0-1
+ * @param  {Number} offset    偏移量
+ * @return {IPoint} 控制点，包含 x,y
+ */
+  protected getControlPoint: (
+    startPoint: IPoint,
+    endPoint: IPoint,
+    percent: number,
+    offset: number,
+  ) => IPoint = 
+  (startPoint: IPoint,
+    endPoint: IPoint,
+    percent = 0,
+    offset = 0,
+    ) => {
+
+    const point: IPoint = {
+      x: (1 - percent) * startPoint.x + percent * endPoint.x,
+      y: 0,
+    };
+
+    let tangent: vec2 = [0, 0];
+    vec2.normalize(tangent, [endPoint.x - startPoint.x, endPoint.y - startPoint.y]);
+
+    if (!tangent || (!tangent[0] && !tangent[1])) {
+      tangent = [0, 0];
+    }
+    const perpendicular = [-tangent[1] * offset, tangent[0] * offset]; // 垂直向量
+
+    point.x += perpendicular[0];
+    point.y += perpendicular[1];
+
+    if(Math.abs(point.x - startPoint.x) < Math.abs(point.x - endPoint.x)) {
+      point.y += startPoint.y 
+    }else {
+      point.y += endPoint.y 
+    }
+
+    return point;
+  };
+
+
+
+}

packages/g6/src/stdlib/item/edge/cubic-vertical.ts

@@ -0,0 +1,108 @@
+import { DisplayObject, Line } from '@antv/g';
+import { EdgeDisplayModel } from 'types';
+import { Point } from 'types/common';
+import { EdgeModelData, EdgeShapeMap } from 'types/edge';
+import { State } from 'types/item';
+import { BaseEdge } from './base'
+import { IPoint } from '@antv/g6';
+import { vec2 } from '@antv/matrix-util';
+import { CubicEdge } from './cubic';
+
+export class CubicVerticalEdge extends CubicEdge {
+
+  public type = 'cubic-vertical-edge';
+
+  public defaultStyles = {
+    keyShape: {
+      x1: 0,
+      y1: 0,
+      z1: 0,
+      x2: 0,
+      y2: 0,
+      z2: 0,
+      isBillboard: true,
+    },
+  };
+  constructor(props) {
+    super(props);
+    // suggest to merge default styles like this to avoid style value missing
+    // this.defaultStyles = mergeStyles([this.baseDefaultStyles, this.defaultStyles]);
+  }
+
+  /**
+   * calculate the control points by curvePosition|controlPoints|curveOffset
+   * @param startPoint: source point position of edge
+   * @param endPoint target point position of edge
+   * @param percent the proportion of control points' in the segment, Range 0 to 1
+   * @param controlPoints the control point position 
+   * @param offset the curveOffset
+   * @returns control points 
+   */
+  protected getControlPoints: (startPoint: Point,
+    endPoint: Point,
+    percent: number,
+    controlPoints: number[],
+    offset: number
+  ) => [Point, Point] = (
+      startPoint: Point,
+      endPoint: Point,
+      percent = 0.5,
+      controlPoints,
+      offset = 20,
+  ) => {
+
+    if ((startPoint.x - endPoint.x) * (startPoint.y - endPoint.y ) > 0) {
+      offset = -offset 
+    }
+
+    const controlPoint1: IPoint = this.getControlPoint(startPoint, endPoint, percent, offset) 
+    const controlPoint2: IPoint = this.getControlPoint(startPoint, endPoint, percent, -offset) 
+
+    return [controlPoint1, controlPoint2]
+  }
+
+  /**
+ * 根据起始点、相对位置、偏移量计算控制点
+ * @param  {IPoint} startPoint 起始点，包含 x,y
+ * @param  {IPoint} endPoint  结束点, 包含 x,y
+ * @param  {Number} percent   相对位置,范围 0-1
+ * @param  {Number} offset    偏移量
+ * @return {IPoint} 控制点，包含 x,y
+ */
+  protected getControlPoint: (
+    startPoint: IPoint,
+    endPoint: IPoint,
+    percent: number,
+    offset: number,
+  ) => IPoint = 
+  (startPoint: IPoint,
+    endPoint: IPoint,
+    percent = 0,
+    offset = 0,
+    ) => {
+
+    const point: IPoint = {
+      x: 0,
+      y: (1 - percent) * startPoint.y + percent * endPoint.y,
+    };
+
+    let tangent: vec2 = [0, 0];
+    vec2.normalize(tangent, [endPoint.x - startPoint.x, endPoint.y - startPoint.y]);
+
+    if (!tangent || (!tangent[0] && !tangent[1])) {
+      tangent = [0, 0];
+    }
+    const perpendicular = [-tangent[1] * offset, tangent[0] * offset]; // 垂直向量
+
+    point.x += perpendicular[0];
+    point.y += perpendicular[1];
+
+    if(Math.abs(point.y - startPoint.y) < Math.abs(point.y - endPoint.y)) {
+      point.x += startPoint.x
+    }else {
+      point.x += endPoint.x 
+    }
+
+    return point;
+  };
+}