perf: optimize process performance (#5792)

* perf: optimize data perf * feat(utils): add mergeOptions util * refactor(elements): use mergeOptions replace deepMix * perf(runtime): optimize element perf
antvis · May 31, 2024 · 59e8bcd · 59e8bcd
1 parent d7a138f
commit 59e8bcd
Show file tree

Hide file tree

Showing 24 changed files with 104 additions and 55 deletions.
diff --git a/packages/g6/__tests__/demos/element-node-triangle.ts b/packages/g6/__tests__/demos/element-node-triangle.ts
@@ -9,7 +9,7 @@ export const elementNodeTriangle: TestCase = async (context) => {
       type: 'triangle', // 👈🏻 Node shape type.
       style: {
         size: 40,
-        direction: (d: any) => (d.id === 'ports' ? 'left' : undefined),
+        direction: (d: any) => (d.id === 'ports' ? 'left' : 'up'),
         labelText: (d) => d.id!,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
         ports: (d) => (d.id === 'ports' ? [{ placement: 'left' }, { placement: 'top' }, { placement: 'bottom' }] : []),

diff --git a/packages/g6/__tests__/unit/utils/style.spec.ts b/packages/g6/__tests__/unit/utils/style.spec.ts
@@ -1,4 +1,4 @@
-import { computeElementCallbackStyle, zIndexOf } from '@/src/utils/style';
+import { computeElementCallbackStyle, mergeOptions, zIndexOf } from '@/src/utils/style';
 
 describe('style', () => {
   it('computeElementCallbackStyle', () => {
@@ -45,4 +45,13 @@ describe('style', () => {
     expect(zIndexOf({ id: 'node-1', style: { zIndex: 1 } })).toBe(1);
     expect(zIndexOf({ id: 'node-1', style: { zIndex: -1 } })).toBe(-1);
   });
+
+  it('mergeOptions', () => {
+    expect(
+      mergeOptions(
+        { style: { a: 1, b: [1, 2], c: { d: 1 } }, id: '1' },
+        { style: { a: 2, b: [2, 3], c: { f: 1 } }, id: '2' },
+      ),
+    ).toEqual({ style: { a: 2, b: [2, 3], c: { f: 1 } }, id: '2' });
+  });
 });
diff --git a/packages/g6/src/elements/combos/base-combo.ts b/packages/g6/src/elements/combos/base-combo.ts
@@ -1,5 +1,5 @@
 import { AABB, BaseStyleProps, DisplayObject, DisplayObjectConfig, Group } from '@antv/g';
-import { deepMix, isFunction } from '@antv/util';
+import { isFunction } from '@antv/util';
 import { COMBO_KEY } from '../../constants';
 import type {
   CollapsedMarkerStyleProps,
@@ -17,6 +17,7 @@ import { parsePadding } from '../../utils/padding';
 import { getXYByPlacement, positionOf } from '../../utils/position';
 import { subStyleProps } from '../../utils/prefix';
 import { parseSize } from '../../utils/size';
+import { mergeOptions } from '../../utils/style';
 import { add, divide } from '../../utils/vector';
 import type { BaseNodeStyleProps } from '../nodes';
 import { BaseNode } from '../nodes';
@@ -99,7 +100,7 @@ export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStylePr
     collapsedMarkerType: 'child-count',
   };
   constructor(options: DisplayObjectConfig<BaseComboStyleProps>) {
-    super(deepMix({}, { style: BaseCombo.defaultStyleProps }, options));
+    super(mergeOptions({ style: BaseCombo.defaultStyleProps }, options));
   }
 
   /**

diff --git a/packages/g6/src/elements/edges/base-edge.ts b/packages/g6/src/elements/edges/base-edge.ts
@@ -8,7 +8,7 @@ import type {
 } from '@antv/g';
 import { Image, Path } from '@antv/g';
 import type { PathArray } from '@antv/util';
-import { deepMix, isEmpty, isFunction } from '@antv/util';
+import { isEmpty, isFunction } from '@antv/util';
 import type {
   BaseElementStyleProps,
   EdgeArrowStyleProps,
@@ -26,6 +26,7 @@ import { getCubicLoopPath, getLabelPositionStyle } from '../../utils/edge';
 import { findPorts, getConnectionPoint, isSameNode } from '../../utils/element';
 import { omitStyleProps, subStyleProps } from '../../utils/prefix';
 import { parseSize } from '../../utils/size';
+import { mergeOptions } from '../../utils/style';
 import * as Symbol from '../../utils/symbol';
 import { getWordWrapWidthByEnds } from '../../utils/text';
 import { BaseElement } from '../base-element';
@@ -206,7 +207,7 @@ export abstract class BaseEdge extends BaseElement<BaseEdgeStyleProps> {
   };
 
   constructor(options: DisplayObjectConfig<BaseEdgeStyleProps>) {
-    super(deepMix({}, { style: BaseEdge.defaultStyleProps }, options));
+    super(mergeOptions({ style: BaseEdge.defaultStyleProps }, options));
   }
 
   protected get sourceNode() {

diff --git a/packages/g6/src/elements/edges/cubic-horizontal.ts b/packages/g6/src/elements/edges/cubic-horizontal.ts
@@ -1,6 +1,6 @@
 import type { DisplayObjectConfig } from '@antv/g';
-import { deepMix } from '@antv/util';
 import type { Point } from '../../types';
+import { mergeOptions } from '../../utils/style';
 import type { BaseEdgeStyleProps } from './base-edge';
 import { Cubic } from './cubic';
 
@@ -42,7 +42,7 @@ export class CubicHorizontal extends Cubic {
   };
 
   constructor(options: DisplayObjectConfig<CubicHorizontalStyleProps>) {
-    super(deepMix({}, { style: CubicHorizontal.defaultStyleProps }, options));
+    super(mergeOptions({ style: CubicHorizontal.defaultStyleProps }, options));
   }
 
   protected getControlPoints(

diff --git a/packages/g6/src/elements/edges/cubic-vertical.ts b/packages/g6/src/elements/edges/cubic-vertical.ts
@@ -1,6 +1,6 @@
 import type { DisplayObjectConfig } from '@antv/g';
-import { deepMix } from '@antv/util';
 import type { Point } from '../../types';
+import { mergeOptions } from '../../utils/style';
 import type { BaseEdgeStyleProps } from './base-edge';
 import { Cubic } from './cubic';
 
@@ -42,7 +42,7 @@ export class CubicVertical extends Cubic {
   };
 
   constructor(options: DisplayObjectConfig<CubicVerticalStyleProps>) {
-    super(deepMix({}, { style: CubicVertical.defaultStyleProps }, options));
+    super(mergeOptions({ style: CubicVertical.defaultStyleProps }, options));
   }
 
   protected getControlPoints(

diff --git a/packages/g6/src/elements/edges/cubic.ts b/packages/g6/src/elements/edges/cubic.ts
@@ -1,8 +1,8 @@
 import type { DisplayObjectConfig } from '@antv/g';
 import type { PathArray } from '@antv/util';
-import { deepMix } from '@antv/util';
 import type { Point } from '../../types';
 import { getCubicPath, getCurveControlPoint, parseCurveOffset, parseCurvePosition } from '../../utils/edge';
+import { mergeOptions } from '../../utils/style';
 import type { BaseEdgeStyleProps } from './base-edge';
 import { BaseEdge } from './base-edge';
 
@@ -48,7 +48,7 @@ export class Cubic extends BaseEdge {
   };
 
   constructor(options: DisplayObjectConfig<CubicStyleProps>) {
-    super(deepMix({}, { style: Cubic.defaultStyleProps }, options));
+    super(mergeOptions({ style: Cubic.defaultStyleProps }, options));
   }
 
   /**

diff --git a/packages/g6/src/elements/edges/line.ts b/packages/g6/src/elements/edges/line.ts
@@ -1,6 +1,6 @@
 import type { DisplayObjectConfig } from '@antv/g';
 import type { PathArray } from '@antv/util';
-import { deepMix } from '@antv/util';
+import { mergeOptions } from '../../utils/style';
 import type { BaseEdgeStyleProps } from './base-edge';
 import { BaseEdge } from './base-edge';
 
@@ -24,7 +24,7 @@ export class Line extends BaseEdge {
   static defaultStyleProps: Partial<LineStyleProps> = {};
 
   constructor(options: DisplayObjectConfig<LineStyleProps>) {
-    super(deepMix({}, { style: Line.defaultStyleProps }, options));
+    super(mergeOptions({ style: Line.defaultStyleProps }, options));
   }
 
   protected getKeyPath(attributes: ParsedLineStyleProps): PathArray {

diff --git a/packages/g6/src/elements/edges/polyline.ts b/packages/g6/src/elements/edges/polyline.ts
@@ -1,12 +1,12 @@
 import type { DisplayObjectConfig } from '@antv/g';
 import type { PathArray } from '@antv/util';
-import { deepMix } from '@antv/util';
 import type { LoopStyleProps, Padding, Point, Port } from '../../types';
 import { getBBoxHeight, getBBoxWidth, getNodeBBox } from '../../utils/bbox';
 import { getPolylineLoopPath, getPolylinePath } from '../../utils/edge';
 import { findPorts, getConnectionPoint, getPortPosition } from '../../utils/element';
 import { subStyleProps } from '../../utils/prefix';
 import { orth } from '../../utils/router/orth';
+import { mergeOptions } from '../../utils/style';
 import type { BaseEdgeStyleProps } from './base-edge';
 import { BaseEdge } from './base-edge';
 
@@ -70,7 +70,7 @@ export class Polyline extends BaseEdge {
   };
 
   constructor(options: DisplayObjectConfig<PolylineStyleProps>) {
-    super(deepMix({}, { style: Polyline.defaultStyleProps }, options));
+    super(mergeOptions({ style: Polyline.defaultStyleProps }, options));
   }
 
   protected getKeyPath(attributes: ParsedPolylineStyleProps): PathArray {

diff --git a/packages/g6/src/elements/edges/quadratic.ts b/packages/g6/src/elements/edges/quadratic.ts
@@ -1,8 +1,8 @@
 import type { DisplayObjectConfig } from '@antv/g';
 import type { PathArray } from '@antv/util';
-import { deepMix } from '@antv/util';
 import type { Point } from '../../types';
 import { getCurveControlPoint, getQuadraticPath } from '../../utils/edge';
+import { mergeOptions } from '../../utils/style';
 import type { BaseEdgeStyleProps } from './base-edge';
 import { BaseEdge } from './base-edge';
 
@@ -48,7 +48,7 @@ export class Quadratic extends BaseEdge {
   };
 
   constructor(options: DisplayObjectConfig<QuadraticStyleProps>) {
-    super(deepMix({}, { style: Quadratic.defaultStyleProps }, options));
+    super(mergeOptions({ style: Quadratic.defaultStyleProps }, options));
   }
 
   protected getKeyPath(attributes: ParsedQuadraticStyleProps): PathArray {

diff --git a/packages/g6/src/elements/nodes/base-node.ts b/packages/g6/src/elements/nodes/base-node.ts
@@ -1,6 +1,6 @@
 import type { BaseStyleProps, DisplayObject, DisplayObjectConfig, Group } from '@antv/g';
 import { Circle as GCircle } from '@antv/g';
-import { deepMix, isEmpty } from '@antv/util';
+import { isEmpty } from '@antv/util';
 import type { CategoricalPalette } from '../../palettes/types';
 import type { NodeData } from '../../spec';
 import type {
@@ -22,6 +22,7 @@ import { getRectIntersectPoint } from '../../utils/point';
 import { getXYByPlacement } from '../../utils/position';
 import { omitStyleProps, subObject, subStyleProps } from '../../utils/prefix';
 import { parseSize } from '../../utils/size';
+import { mergeOptions } from '../../utils/style';
 import { getWordWrapWidthByBox } from '../../utils/text';
 import { replaceTranslateInTransform } from '../../utils/transform';
 import { BaseElement } from '../base-element';
@@ -218,7 +219,7 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
   };
 
   constructor(options: DisplayObjectConfig<S>) {
-    super(deepMix({}, { style: BaseNode.defaultStyleProps }, options));
+    super(mergeOptions({ style: BaseNode.defaultStyleProps }, options));
   }
 
   protected getSize(attributes = this.attributes) {

diff --git a/packages/g6/src/elements/nodes/circle.ts b/packages/g6/src/elements/nodes/circle.ts
@@ -1,9 +1,9 @@
 import type { DisplayObjectConfig, CircleStyleProps as GCircleStyleProps, Group } from '@antv/g';
 import { Circle as GCircle } from '@antv/g';
-import { deepMix } from '@antv/util';
 import { ICON_SIZE_RATIO } from '../../constants/element';
 import type { Point } from '../../types';
 import { getEllipseIntersectPoint } from '../../utils/point';
+import { mergeOptions } from '../../utils/style';
 import type { IconStyleProps } from '../shapes';
 import type { BaseNodeStyleProps } from './base-node';
 import { BaseNode } from './base-node';
@@ -26,7 +26,7 @@ export class Circle extends BaseNode {
   };
 
   constructor(options: DisplayObjectConfig<CircleStyleProps>) {
-    super(deepMix({}, { style: Circle.defaultStyleProps }, options));
+    super(mergeOptions({ style: Circle.defaultStyleProps }, options));
   }
 
   protected drawKeyShape(attributes: Required<CircleStyleProps>, container: Group) {

diff --git a/packages/g6/src/elements/nodes/donut.ts b/packages/g6/src/elements/nodes/donut.ts
@@ -1,5 +1,5 @@
 import { Path } from '@antv/g';
-import { deepMix, isNumber, isString } from '@antv/util';
+import { isNumber, isString } from '@antv/util';
 import { getPaletteColors } from '../../utils/palette';
 import { subStyleProps } from '../../utils/prefix';
 import { parseSize } from '../../utils/size';
@@ -8,6 +8,7 @@ import { Circle } from './circle';
 import type { BaseStyleProps, DisplayObjectConfig, Group } from '@antv/g';
 import type { CategoricalPalette } from '../../palettes/types';
 import type { DonutRound, Prefix } from '../../types';
+import { mergeOptions } from '../../utils/style';
 import type { CircleStyleProps } from './circle';
 
 /**
@@ -51,7 +52,7 @@ export class Donut extends Circle {
   };
 
   constructor(options: DisplayObjectConfig<DonutStyleProps>) {
-    super(deepMix({}, { style: Donut.defaultStyleProps }, options));
+    super(mergeOptions({ style: Donut.defaultStyleProps }, options));
   }
 
   private parseOuterR() {

diff --git a/packages/g6/src/elements/nodes/ellipse.ts b/packages/g6/src/elements/nodes/ellipse.ts
@@ -1,9 +1,9 @@
 import type { DisplayObjectConfig, EllipseStyleProps as GEllipseStyleProps, Group } from '@antv/g';
 import { Ellipse as GEllipse } from '@antv/g';
-import { deepMix } from '@antv/util';
 import { ICON_SIZE_RATIO } from '../../constants/element';
 import type { Point } from '../../types';
 import { getEllipseIntersectPoint } from '../../utils/point';
+import { mergeOptions } from '../../utils/style';
 import type { IconStyleProps } from '../shapes';
 import type { BaseNodeStyleProps } from './base-node';
 import { BaseNode } from './base-node';
@@ -26,7 +26,7 @@ export class Ellipse extends BaseNode {
   };
 
   constructor(options: DisplayObjectConfig<EllipseStyleProps>) {
-    super(deepMix({}, { style: Ellipse.defaultStyleProps }, options));
+    super(mergeOptions({ style: Ellipse.defaultStyleProps }, options));
   }
 
   protected drawKeyShape(attributes: Required<EllipseStyleProps>, container: Group) {

diff --git a/packages/g6/src/elements/nodes/image.ts b/packages/g6/src/elements/nodes/image.ts
@@ -1,8 +1,8 @@
 import type { DisplayObjectConfig, RectStyleProps as GRectStyleProps, Group } from '@antv/g';
 import { Image as GImage, ImageStyleProps as GImageStyleProps, Rect as GRect } from '@antv/g';
-import { deepMix } from '@antv/util';
 import { ICON_SIZE_RATIO } from '../../constants/element';
 import { subStyleProps } from '../../utils/prefix';
+import { mergeOptions } from '../../utils/style';
 import { add } from '../../utils/vector';
 import type { IconStyleProps } from '../shapes';
 import type { BaseNodeStyleProps } from './base-node';
@@ -39,7 +39,7 @@ export class Image extends BaseNode<ImageStyleProps> {
   };
 
   constructor(options: DisplayObjectConfig<ImageStyleProps>) {
-    super(deepMix({}, { style: Image.defaultStyleProps }, options));
+    super(mergeOptions({ style: Image.defaultStyleProps }, options));
   }
 
   protected getKeyStyle(attributes: Required<ImageStyleProps>): GImageStyleProps {

diff --git a/packages/g6/src/elements/nodes/rect.ts b/packages/g6/src/elements/nodes/rect.ts
@@ -1,7 +1,7 @@
 import type { DisplayObjectConfig, RectStyleProps as GRectStyleProps, Group } from '@antv/g';
 import { Rect as GRect } from '@antv/g';
-import { deepMix } from '@antv/util';
 import { ICON_SIZE_RATIO } from '../../constants/element';
+import { mergeOptions } from '../../utils/style';
 import type { IconStyleProps } from '../shapes';
 import type { BaseNodeStyleProps } from './base-node';
 import { BaseNode } from './base-node';
@@ -25,7 +25,7 @@ export class Rect extends BaseNode<RectStyleProps> {
   };
 
   constructor(options: DisplayObjectConfig<RectStyleProps>) {
-    super(deepMix({}, { style: Rect.defaultStyleProps }, options));
+    super(mergeOptions({ style: Rect.defaultStyleProps }, options));
   }
 
   protected getKeyStyle(attributes: ParsedRectStyleProps): GRectStyleProps {

diff --git a/packages/g6/src/elements/nodes/triangle.ts b/packages/g6/src/elements/nodes/triangle.ts
@@ -1,10 +1,11 @@
 import type { DisplayObjectConfig } from '@antv/g';
-import { deepMix, isEmpty } from '@antv/util';
+import { isEmpty } from '@antv/util';
 import { ICON_SIZE_RATIO } from '../../constants/element';
 import type { NodePortStyleProps, Point, TriangleDirection, TrianglePortPlacement } from '../../types';
 import { getIncircleRadius, getTriangleCenter } from '../../utils/bbox';
 import { getPortXYByPlacement, getTrianglePoints, getTrianglePorts } from '../../utils/element';
 import { subStyleProps } from '../../utils/prefix';
+import { mergeOptions } from '../../utils/style';
 import type { PolygonStyleProps } from '../shapes';
 import { IconStyleProps } from '../shapes';
 import { Polygon } from '../shapes/polygon';
@@ -36,7 +37,7 @@ export class Triangle extends Polygon<TriangleStyleProps> {
   };
 
   constructor(options: DisplayObjectConfig<TriangleStyleProps>) {
-    super(deepMix({}, { style: Triangle.defaultStyleProps }, options));
+    super(mergeOptions({ style: Triangle.defaultStyleProps }, options));
   }
 
   protected getPoints(attributes: Required<TriangleStyleProps>): Point[] {

diff --git a/packages/g6/src/elements/shapes/badge.ts b/packages/g6/src/elements/shapes/badge.ts
@@ -1,5 +1,5 @@
 import type { DisplayObjectConfig, Group } from '@antv/g';
-import { deepMix } from '@antv/util';
+import { mergeOptions } from '../../utils/style';
 import { BaseShape } from './base-shape';
 import type { LabelStyleProps } from './label';
 import { Label } from './label';
@@ -18,7 +18,7 @@ export class Badge extends BaseShape<BadgeStyleProps> {
   };
 
   constructor(options: BadgeOptions) {
-    super(deepMix({}, { style: Badge.defaultStyleProps }, options));
+    super(mergeOptions({ style: Badge.defaultStyleProps }, options));
   }
 
   protected getBadgeStyle(attributes: ParsedBadgeStyleProps) {

diff --git a/packages/g6/src/elements/shapes/contour.ts b/packages/g6/src/elements/shapes/contour.ts
@@ -1,9 +1,9 @@
 import type { DisplayObjectConfig, Group, PathStyleProps } from '@antv/g';
 import { Path } from '@antv/g';
-import { deepMix } from '@antv/util';
 import type { CardinalPlacement, Prefix } from '../../types';
 import { getPolygonTextStyleByPlacement } from '../../utils/polygon';
 import { subStyleProps } from '../../utils/prefix';
+import { mergeOptions } from '../../utils/style';
 import { getWordWrapWidthByBox } from '../../utils/text';
 import type { LabelStyleProps } from '../shapes';
 import { BaseShape } from './base-shape';
@@ -76,7 +76,7 @@ export class Contour extends BaseShape<ContourStyleProps> {
   };
 
   constructor(options: ContourOptions) {
-    super(deepMix({}, { style: Contour.defaultStyleProps }, options));
+    super(mergeOptions({ style: Contour.defaultStyleProps }, options));
   }
 
   protected getLabelStyle(attributes: ParsedContourStyleProps): LabelStyleProps | false {

diff --git a/packages/g6/src/elements/shapes/label.ts b/packages/g6/src/elements/shapes/label.ts
@@ -1,9 +1,9 @@
 import { DisplayObjectConfig, Group, Rect, RectStyleProps, Text, TextStyleProps } from '@antv/g';
-import { deepMix } from '@antv/util';
 import type { Padding } from '../../types/padding';
 import type { Prefix } from '../../types/prefix';
 import { parsePadding } from '../../utils/padding';
 import { omitStyleProps, startsWith, subStyleProps } from '../../utils/prefix';
+import { mergeOptions } from '../../utils/style';
 import { BaseShape } from './base-shape';
 
 export interface LabelStyleProps extends TextStyleProps, Prefix<'background', RectStyleProps> {
@@ -39,7 +39,7 @@ export class Label extends BaseShape<LabelStyleProps> {
   };
 
   constructor(options: LabelOptions) {
-    super(deepMix({}, { style: Label.defaultStyleProps }, options));
+    super(mergeOptions({ style: Label.defaultStyleProps }, options));
   }
 
   protected isTextStyle(key: string) {