refactor: adapt g optimization

2024-11-29 18:28:19 +08:00 · 2024-10-24 14:31:18 +08:00 · 2024-10-24 14:31:18 +08:00 · 72024181bf
commit 72024181bf
parent 80c1bca893
36 changed files with 153 additions and 104 deletions
--- a/package.json
+++ b/package.json
@ -30,8 +30,8 @@
    ]
  },
  "devDependencies": {
-    "@antv/g-canvas": "^2.0.12",
-    "@antv/g-plugin-rough-canvas-renderer": "^2.0.13",
+    "@antv/g-canvas": "^2.0.18",
+    "@antv/g-plugin-rough-canvas-renderer": "^2.0.18",
    "@babel/core": "^7.25.2",
    "@babel/plugin-transform-typescript": "^7.25.2",
    "@changesets/cli": "^2.27.8",
--- a/packages/cli/template-extension/package.json
+++ b/packages/cli/template-extension/package.json
@ -35,9 +35,9 @@
    "@antv/g6": "^5.0.0"
  },
  "devDependencies": {
-    "@antv/g": "^6.0.13",
-    "@antv/g-canvas": "^2.0.4",
-    "@antv/g-svg": "^2.0.5",
+    "@antv/g": "^6.1.2",
+    "@antv/g-canvas": "^2.0.18",
+    "@antv/g-svg": "^2.0.15",
    "@commitlint/config-conventional": "^19.2.2",
    "@rollup/plugin-commonjs": "^25.0.7",
    "@rollup/plugin-node-resolve": "^15.2.3",
@ -71,7 +71,7 @@
    "xmlserializer": "^0.6.1"
  },
  "peerDependencies": {
-    "@antv/g": "^6.0.13",
-    "@antv/g-canvas": "^2.0.4"
+    "@antv/g": "^6.1.2",
+    "@antv/g-canvas": "^2.0.18"
  }
 }
--- a/packages/g6-extension-3d/package.json
+++ b/packages/g6-extension-3d/package.json
@ -34,22 +34,22 @@
  },
  "dependencies": {
    "@antv/g-device-api": "^1.6.12",
-    "@antv/g-plugin-3d": "^2.0.14",
-    "@antv/g-plugin-device-renderer": "^2.0.14",
-    "@antv/g-plugin-dragndrop": "^2.0.9",
-    "@antv/g-webgl": "^2.0.16",
+    "@antv/g-plugin-3d": "^2.0.20",
+    "@antv/g-plugin-device-renderer": "^2.1.2",
+    "@antv/g-plugin-dragndrop": "^2.0.13",
+    "@antv/g-webgl": "^2.0.22",
    "@antv/layout": "^1.2.14-beta.7",
    "@antv/util": "^3.3.8"
  },
  "devDependencies": {
-    "@antv/g": "^6.0.13",
-    "@antv/g-canvas": "^2.0.12",
+    "@antv/g": "^6.1.2",
+    "@antv/g-canvas": "^2.0.18",
    "@antv/g6": "workspace:*"
  },
  "peerDependencies": {
-    "@antv/g": "^6.0.13",
-    "@antv/g-canvas": "^2.0.4",
-    "@antv/g6": "^5.0.26"
+    "@antv/g": "^6.1.2",
+    "@antv/g-canvas": "^2.0.18",
+    "@antv/g6": "^workspace:*"
  },
  "publishConfig": {
    "access": "public",
--- a/packages/g6-extension-react/package.json
+++ b/packages/g6-extension-react/package.json
@ -35,8 +35,8 @@
    "type-check": "tsc --noEmit -p tsconfig.test.json"
  },
  "dependencies": {
-    "@antv/g": "^6.0.13",
-    "@antv/g-svg": "^2.0.11",
+    "@antv/g": "^6.1.2",
+    "@antv/g-svg": "^2.0.15",
    "@antv/react-g": "^2.0.14"
  },
  "devDependencies": {
@ -51,7 +51,7 @@
    "styled-components": "^6.1.13"
  },
  "peerDependencies": {
-    "@antv/g6": "^5.0.26",
+    "@antv/g6": "^workspace:*",
    "react": ">=16.8",
    "react-dom": ">=16.8"
  },
--- a/packages/g6/tests/bugs/element-port-rotate.spec.ts
+++ b/packages/g6/tests/bugs/element-port-rotate.spec.ts
@ -17,7 +17,7 @@ describe('element port rotate', () => {
            { key: 'port-2', placement: 'left' },
            { key: 'port-3', placement: [0, 0.85] },
          ],
-          transform: 'rotate(45deg)',
+          transform: [['rotate', 45]],
        },
      },
    });
--- a/packages/g6/tests/demos/case-fund-flow.ts
+++ b/packages/g6/tests/demos/case-fund-flow.ts
@ -107,7 +107,7 @@ export const caseFundFlow: TestCase = async (context) => {
        fontFamily: 'iconfont',
        fontSize: 16,
        text: '\ue62d',
-        transform: this.data.variableUp ? '' : 'rotate(180deg)',
+        transform: this.data.variableUp ? [] : [['rotate', 180]],
      };
    }

--- a/packages/g6/tests/demos/case-mindmap.ts
+++ b/packages/g6/tests/demos/case-mindmap.ts
@ -124,7 +124,7 @@ export const caseMindmap: TestCase = async (context) => {
        fontSize: 8,
        text: '\ue6e4',
        textAlign: 'center',
-        transform: direction === 'left' ? 'rotate(90deg)' : 'rotate(-90deg)',
+        transform: direction === 'left' ? [['rotate', 90]] : [['rotate', -90]],
        visibility: showIcon ? 'visible' : 'hidden',
        x: direction === 'left' ? -6 : width + 6,
        y: height,
--- a/packages/g6/tests/demos/case-org-chart.ts
+++ b/packages/g6/tests/demos/case-org-chart.ts
@ -37,14 +37,14 @@ export const caseOrgChart: TestCase = async (context) => {
              fontSize: 20,
              fontWeight: 600,
              textAlign: 'center',
-              transform: 'translate(0,0)',
+              transform: [['translate', 0, 0]],
            }
          : {
              fill: '#2078B4',
              fontSize: 14,
              fontWeight: 400,
              textAlign: 'left',
-              transform: 'translate(-65, -15)',
+              transform: [['translate', -65, -15]],
            };
      return { text, ...labelStyle } as LabelStyleProps;
    }
@ -65,7 +65,7 @@ export const caseOrgChart: TestCase = async (context) => {
        textTransform: 'uppercase',
        fill: '#343f4a',
        textAlign: 'left',
-        transform: 'translate(-65, 0)',
+        transform: [['translate', -65, 0]],
      };
    }

@ -80,7 +80,7 @@ export const caseOrgChart: TestCase = async (context) => {
        text: this.data.status,
        fontSize: 8,
        textAlign: 'left',
-        transform: 'translate(40, -16)',
+        transform: [['translate', 40, -16]],
        padding: [0, 4],
        fill: '#fff',
        backgroundFill: statusColors[this.data.status as string],
@ -99,7 +99,7 @@ export const caseOrgChart: TestCase = async (context) => {
        fontSize: 8,
        fontWeight: 300,
        textAlign: 'left',
-        transform: 'translate(-65, 20)',
+        transform: [['translate', -65, 20]],
      };
    }

--- a/packages/g6/tests/demos/element-edge-custom-arrow.ts
+++ b/packages/g6/tests/demos/element-edge-custom-arrow.ts
@ -29,7 +29,7 @@ export const elementEdgeCustomArrow: TestCase = async (context) => {
        style: {
          endArrowSrc: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
          endArrowSize: 28,
-          endArrowTransform: 'rotate(90deg)',
+          endArrowTransform: [['rotate', 90]],
          endArrowX: -14,
          endArrowY: -14,
        },
--- a/packages/g6/tests/demos/layout-compact-box-top-to-bottom.ts
+++ b/packages/g6/tests/demos/layout-compact-box-top-to-bottom.ts
@ -12,7 +12,7 @@ export const layoutCompactBoxLeftAlign: TestCase = async (context) => {
        labelText: (data) => data.id,
        labelPlacement: 'right',
        labelMaxWidth: 200,
-        transform: 'rotate(90deg)',
+        transform: [['rotate', 90]],
        size: 26,
        fill: '#EFF4FF',
        lineWidth: 1,
--- a/packages/g6/tests/demos/layout-dendrogram-tb.ts
+++ b/packages/g6/tests/demos/layout-dendrogram-tb.ts
@ -15,7 +15,7 @@ export const layoutDendrogramTb: TestCase = async (context) => {
          labelText: model.id,
          labelTextAlign: 'start',
          labelTextBaseline: hasChildren ? 'middle' : 'bottom',
-          transform: hasChildren ? '' : 'rotate(90)',
+          transform: hasChildren ? [] : [['rotate', 90]],
          ports: [{ placement: 'bottom' }, { placement: 'top' }],
        };
      },
--- a/packages/g6/tests/unit/utils/edge.spec.ts
+++ b/packages/g6/tests/unit/utils/edge.spec.ts
@ -52,30 +52,35 @@ describe('edge', () => {

      const labelPlacement = getLabelPositionStyle(line, 'center', false, 0, 0);
      expect(labelPlacement.textAlign).toEqual('center');
-      expect(labelPlacement.transform).toEqual('translate(50, 100)');
+      expect(labelPlacement.transform).toEqual([['translate', 50, 100]]);

      const labelPosition2 = getLabelPositionStyle(line, 'center', true, 5, 5);
      expect(labelPosition2.textAlign).toEqual('center');
-      expect(labelPosition2.transform).toEqual('translate(55, 105)');
+      expect(labelPosition2.transform).toEqual([['translate', 55, 105]]);

      const labelPosition3 = getLabelPositionStyle(line, 'start', true, 5, 5);
      expect(labelPosition3.textAlign).toEqual('left');
-      expect(labelPosition3.transform).toEqual('translate(5, 105)');
+      expect(labelPosition3.transform).toEqual([['translate', 5, 105]]);

      const labelPosition4 = getLabelPositionStyle(line, 'end', true, 5, 5);
      expect(labelPosition4.textAlign).toEqual('right');
-      expect(labelPosition4.transform).toEqual('translate(104, 105)');
+      expect(labelPosition4.transform).toEqual([['translate', 104, 105]]);

      const labelPosition5 = getLabelPositionStyle(line, 0.5, true, 5, 5);
      expect(labelPosition5.textAlign).toEqual('center');
-      expect(labelPosition5.transform).toEqual('translate(55, 105)');
+      expect(labelPosition5.transform).toEqual([['translate', 55, 105]]);

      //  with rotation angle below Math.PI
      const labelPosition6 = getLabelPositionStyle(line1, 'center', true, 5, 5);
      expect(labelPosition6.textAlign).toEqual('center');
-      expect(labelPosition6.transform).toEqual(
-        `translate(${50 + 5 * Math.cos(Math.PI / 4) - 5 * Math.sin(Math.PI / 4)}, ${150 + 5 * Math.sin(Math.PI / 4) + 5 * Math.cos(Math.PI / 4)}) rotate(45deg)`,
-      );
+      expect(labelPosition6.transform).toEqual([
+        [
+          'translate',
+          50 + 5 * Math.cos(Math.PI / 4) - 5 * Math.sin(Math.PI / 4),
+          150 + 5 * Math.sin(Math.PI / 4) + 5 * Math.cos(Math.PI / 4),
+        ],
+        ['rotate', 45],
+      ]);

      const labelPosition7 = getLabelPositionStyle(line1, 'start', true, 5, 5);
      expect(labelPosition7.textAlign).toEqual('left');
@ -86,9 +91,14 @@ describe('edge', () => {
      // with rotation angle over Math.PI
      const labelPosition9 = getLabelPositionStyle(line2, 'center', true, 5, 5);
      expect(labelPosition9.textAlign).toEqual('center');
-      expect(labelPosition9.transform).toEqual(
-        `translate(${50 + 5 * Math.cos(-Math.PI / 4) - 5 * Math.sin(-Math.PI / 4)}, ${150 + 5 * Math.sin(-Math.PI / 4) + 5 * Math.cos(-Math.PI / 4)}) rotate(-45deg)`,
-      );
+      expect(labelPosition9.transform).toEqual([
+        [
+          'translate',
+          50 + 5 * Math.cos(-Math.PI / 4) - 5 * Math.sin(-Math.PI / 4),
+          150 + 5 * Math.sin(-Math.PI / 4) + 5 * Math.cos(-Math.PI / 4),
+        ],
+        ['rotate', -45],
+      ]);
    });
  });

@ -100,7 +110,7 @@ describe('edge', () => {
    };
    expect(getBadgePositionStyle(shapeMap, 'prefix', 'center', 10, 0)).toEqual({
      textAlign: 'center',
-      transform: 'translate(50, 0)',
+      transform: [['translate', 50, 0]],
    });
  });

--- a/packages/g6/tests/unit/utils/element.spec.ts
+++ b/packages/g6/tests/unit/utils/element.spec.ts
@ -171,45 +171,45 @@ describe('element', () => {

  it('getTextStyleByPlacement', () => {
    expect(getTextStyleByPlacement(bbox, 'left')).toEqual({
-      transform: 'translate(100, 150)',
+      transform: [['translate', 100, 150]],
      textAlign: 'right',
      textBaseline: 'middle',
    });
    expect(getTextStyleByPlacement(bbox, 'right')).toEqual({
-      transform: 'translate(200, 150)',
+      transform: [['translate', 200, 150]],
      textAlign: 'left',
      textBaseline: 'middle',
    });
    expect(getTextStyleByPlacement(bbox, 'top')).toEqual({
-      transform: 'translate(150, 100)',
+      transform: [['translate', 150, 100]],
      textAlign: 'center',
      textBaseline: 'bottom',
    });
    expect(getTextStyleByPlacement(bbox, 'bottom')).toEqual({
-      transform: 'translate(150, 200)',
+      transform: [['translate', 150, 200]],
      textAlign: 'center',
      textBaseline: 'top',
    });

    expect(getTextStyleByPlacement(bbox, 'left-top')).toEqual({
-      transform: 'translate(100, 100)',
+      transform: [['translate', 100, 100]],
      textAlign: 'right',
      textBaseline: 'bottom',
    });
    expect(getTextStyleByPlacement(bbox, 'right-bottom')).toEqual({
-      transform: 'translate(200, 200)',
+      transform: [['translate', 200, 200]],
      textAlign: 'left',
      textBaseline: 'top',
    });

    expect(getTextStyleByPlacement(bbox, 'center')).toEqual({
-      transform: 'translate(150, 150)',
+      transform: [['translate', 150, 150]],
      textAlign: 'center',
      textBaseline: 'middle',
    });

    expect(getTextStyleByPlacement(bbox)).toEqual({
-      transform: 'translate(150, 200)',
+      transform: [['translate', 150, 200]],
      textAlign: 'center',
      textBaseline: 'top',
    });
--- a/packages/g6/tests/unit/utils/polygon.spec.ts
+++ b/packages/g6/tests/unit/utils/polygon.spec.ts
@ -1,4 +1,5 @@
 import { getPolygonTextStyleByPlacement } from '@/src/utils/polygon';
+import type { TransformArray } from '@antv/g';
 import { AABB, Path } from '@antv/g';
 import type { PathArray } from '@antv/util';

@ -15,29 +16,29 @@ describe('polygon', () => {
    expect(getPolygonTextStyleByPlacement(bounds, 'top', 0, 0, false, EMPTY_PATH, false)).toEqual({
      textAlign: 'center',
      textBaseline: 'bottom',
-      transform: 'translate(50, 0)',
+      transform: [['translate', 50, 0]],
    });
    expect(getPolygonTextStyleByPlacement(bounds, 'left', 0, 0, false, EMPTY_PATH, false)).toEqual({
      textAlign: 'right',
      textBaseline: 'middle',
-      transform: 'translate(0, 50)',
+      transform: [['translate', 0, 50]],
    });
    expect(getPolygonTextStyleByPlacement(bounds, 'right', 0, 0, false, EMPTY_PATH, false)).toEqual({
      textAlign: 'left',
      textBaseline: 'middle',
-      transform: 'translate(100, 50)',
+      transform: [['translate', 100, 50]],
    });
    expect(getPolygonTextStyleByPlacement(bounds, 'bottom', 0, 0, false, EMPTY_PATH, false)).toEqual({
      textAlign: 'center',
      textBaseline: 'top',
-      transform: 'translate(50, 100)',
+      transform: [['translate', 50, 100]],
    });

    // with offset
    expect(getPolygonTextStyleByPlacement(bounds, 'top', 10, 10, false, EMPTY_PATH, false)).toEqual({
      textAlign: 'center',
      textBaseline: 'bottom',
-      transform: 'translate(60, 10)',
+      transform: [['translate', 60, 10]],
    });

    // closeToHull and autoRotate
@ -48,7 +49,7 @@ describe('polygon', () => {
    expect(getPolygonTextStyleByPlacement(bounds, 'top', 0, 0, true, circle, true)).toEqual({
      textAlign: 'center',
      textBaseline: 'bottom',
-      transform: 'translate(50, 0)',
+      transform: [['translate', 50, 0]],
    });

    const d: PathArray = [
@ -62,21 +63,21 @@ describe('polygon', () => {
    const labelStyle1 = getPolygonTextStyleByPlacement(shape.getRenderBounds(), 'top', 0, 0, true, d, true);
    expect(labelStyle1.textAlign).toBe('center');
    expect(labelStyle1.textBaseline).toBe('bottom');
-    expect(labelStyle1.transform).toContain('rotate');
+    expect((labelStyle1.transform as TransformArray).some((t) => t[0] === 'rotate')).toBe(true);

    const labelStyle2 = getPolygonTextStyleByPlacement(shape.getRenderBounds(), 'right', 0, 0, true, d, true);
    expect(labelStyle2.textAlign).toBe('center');
    expect(labelStyle2.textBaseline).toBe('top');
-    expect(labelStyle2.transform).toContain('rotate');
+    expect((labelStyle2.transform as TransformArray).some((t) => t[0] === 'rotate')).toBe(true);

    const labelStyle3 = getPolygonTextStyleByPlacement(shape.getRenderBounds(), 'bottom', 0, 0, true, d, true);
    expect(labelStyle3.textAlign).toBe('center');
    expect(labelStyle3.textBaseline).toBe('top');
-    expect(labelStyle3.transform).toContain('rotate');
+    expect((labelStyle3.transform as TransformArray).some((t) => t[0] === 'rotate')).toBe(true);

    const labelStyle4 = getPolygonTextStyleByPlacement(shape.getRenderBounds(), 'left', 0, 0, true, d, true);
    expect(labelStyle4.textAlign).toBe('center');
    expect(labelStyle4.textBaseline).toBe('top');
-    expect(labelStyle4.transform).toContain('rotate');
+    expect((labelStyle4.transform as TransformArray).some((t) => t[0] === 'rotate')).toBe(true);
  });
 });
--- a/packages/g6/tests/unit/utils/style.spec.ts
+++ b/packages/g6/tests/unit/utils/style.spec.ts
@ -53,7 +53,7 @@ describe('style', () => {
      x: 100,
      y: 100,
      class: 'node',
-      transform: 'translate(100, 100)',
+      transform: [['translate', 100, 100]],
      zIndex: 100,
      fill: 'pink',
    };
--- a/packages/g6/package.json
+++ b/packages/g6/package.json
@ -58,11 +58,11 @@
  },
  "dependencies": {
    "@antv/algorithm": "^0.1.26",
-    "@antv/component": "^2.0.4",
+    "@antv/component": "^2.1.0",
    "@antv/event-emitter": "^0.1.3",
-    "@antv/g": "^6.0.13",
-    "@antv/g-canvas": "^2.0.12",
-    "@antv/g-plugin-dragndrop": "^2.0.9",
+    "@antv/g": "^6.1.2",
+    "@antv/g-canvas": "^2.0.18",
+    "@antv/g-plugin-dragndrop": "^2.0.13",
    "@antv/graphlib": "^2.0.3",
    "@antv/hierarchy": "^0.6.13",
    "@antv/layout": "^1.2.14-beta.8",
@ -71,8 +71,8 @@
    "hull.js": "^1.0.6"
  },
  "devDependencies": {
-    "@antv/g-svg": "^2.0.11",
-    "@antv/g-webgl": "^2.0.16",
+    "@antv/g-svg": "^2.0.15",
+    "@antv/g-webgl": "^2.0.22",
    "@antv/layout-gpu": "^1.1.7",
    "@antv/layout-wasm": "^1.4.2",
    "@types/hull.js": "^1.0.4",
@ -88,7 +88,7 @@
  "limit-size": [
    {
      "gzip": true,
-      "limit": "310 Kb",
+      "limit": "320 Kb",
      "path": "dist/g6.min.js"
    },
    {
--- a/packages/g6/src/animations/executor.ts
+++ b/packages/g6/src/animations/executor.ts
@ -66,6 +66,7 @@ export const executor: AnimationExecutor = (element, keyframes, options) => {
      if (keyframes.some((keyframe) => Object.keys(keyframe).some((attr) => ['x', 'y', 'z'].includes(attr)))) {
        const { x = 0, y = 0, z = 0, transform = '' } = shape.attributes || {};
        keyframes.forEach((keyframe) => {
+          // @ts-expect-error ignore type error
          keyframe.transform = replaceTranslateInTransform(
            (keyframe.x as number) || (x as number),
            (keyframe.y as number) || (y as number),
--- a/packages/g6/src/elements/combos/base-combo.ts
+++ b/packages/g6/src/elements/combos/base-combo.ts
@ -226,7 +226,7 @@ export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStylePr
    const { zIndex = this.getComboZIndex(attributes) } = attributes;
    const [x, y] = this.getComboPosition(attributes);
    // x/y will be used to calculate position later.
-    return { x, y, transform: `translate(${x}, ${y})`, zIndex };
+    return { x, y, transform: [['translate', x, y]], zIndex };
  }

  protected updateComboPosition(attributes: Required<S>) {
--- a/packages/g6/src/elements/nodes/base-node.ts
+++ b/packages/g6/src/elements/nodes/base-node.ts
@ -323,7 +323,7 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
        portsShapeStyle[key] = false;
      } else {
        const [x, y] = this.getPortXY(attributes, option);
-        portsShapeStyle[key] = { transform: `translate(${x}, ${y})`, ...mergedStyle };
+        portsShapeStyle[key] = { transform: [['translate', x, y]], ...mergedStyle };
      }
    });
    return portsShapeStyle;
--- a/packages/g6/src/elements/shapes/base-shape.ts
+++ b/packages/g6/src/elements/shapes/base-shape.ts
@ -188,7 +188,7 @@ export abstract class BaseShape<StyleProps extends BaseShapeStyleProps> extends
      const { x: _x = 0, y: _y = 0, z: _z = 0 } = this.attributes as Record<string, any>;
      keyframes.forEach((keyframe) => {
        const { x = _x, y = _y, z = _z } = keyframe;
-        Object.assign(keyframe, { transform: replaceTranslateInTransform(+x, +y, +z) });
+        Object.assign(keyframe, { transform: z ? [['translate3d', x, y, z]] : [['translate', x, y]] });
      });
    }

--- a/packages/g6/src/preset.ts
+++ b/packages/g6/src/preset.ts
@ -1,5 +1,3 @@
-import { runtime } from '@antv/g';
 import { registerBuiltInExtensions } from './registry/build-in';

-runtime.enableCSSParsing = false;
 registerBuiltInExtensions();
--- a/packages/g6/src/runtime/element.ts
+++ b/packages/g6/src/runtime/element.ts
@ -134,6 +134,9 @@ export class ElementController {
  private computeElementDefaultStyle(elementType: ElementType, context: StyleIterationContext) {
    const { options } = this.context;
    const defaultStyle = options[elementType]?.style || {};
+    if ('transform' in defaultStyle && Array.isArray(defaultStyle.transform)) {
+      defaultStyle.transform = [...defaultStyle.transform];
+    }
    this.defaultStyle[idOf(context.datum)] = computeElementCallbackStyle(defaultStyle as any, context);
  }

@ -387,7 +390,6 @@ export class ElementController {
      const targetZIndex = this.getElementZIndex(context.target!);
      if (!style.zIndex || style.zIndex < targetZIndex) style.zIndex = targetZIndex + (style.zIndex ?? 0);
    }
-
    const element = this.container.appendChild(
      new Ctor({
        id,
--- a/packages/g6/src/transforms/place-radial-labels.ts
+++ b/packages/g6/src/transforms/place-radial-labels.ts
@ -1,3 +1,4 @@
+import type { TransformArray } from '@antv/g';
 import { rad2deg } from '@antv/g';
 import type { RuntimeContext } from '../runtime/types';
 import type { NodeData } from '../spec';
@ -56,8 +57,10 @@ export class PlaceRadialLabels extends BaseTransform<PlaceRadialLabelsOptions> {
      const nodeHalfWidth = parseSize(graph.getElementRenderStyle(idOf(datum)).size)[0] / 2;
      const offset = (isLeaf ? 1 : -1) * (nodeHalfWidth + this.options.offset);

-      const translate = `translate(${offset * Math.cos(radian)},${offset * Math.sin(radian)})`;
-      const rotate = `rotate(${isLeft ? rad2deg(radian) + 180 : rad2deg(radian)}deg)`;
+      const labelTransform: TransformArray = [
+        ['translate', offset * Math.cos(radian), offset * Math.sin(radian)],
+        ['rotate', isLeft ? rad2deg(radian) + 180 : rad2deg(radian)],
+      ];

      model.updateNodeData([
        {
@ -65,7 +68,7 @@ export class PlaceRadialLabels extends BaseTransform<PlaceRadialLabelsOptions> {
          style: {
            labelTextAlign: isLeft === isLeaf ? 'right' : 'left',
            labelTextBaseline: 'middle',
-            labelTransform: `${translate} ${rotate}`,
+            labelTransform,
          },
        },
      ]);
--- a/packages/g6/src/utils/edge.ts
+++ b/packages/g6/src/utils/edge.ts
@ -1,4 +1,4 @@
-import type { AABB, DisplayObject } from '@antv/g';
+import type { AABB, DisplayObject, TransformArray } from '@antv/g';
 import type { PathArray } from '@antv/util';
 import { isEqual, isNumber } from '@antv/util';
 import type { EdgeData } from '../spec';
@ -57,7 +57,7 @@ export function getLabelPositionStyle(

  if (isHorizontal(point, pointOffset) || !autoRotate) {
    const [x, y] = getXYByPlacement(key, ratio, offsetX, offsetY);
-    return { transform: `translate(${x}, ${y})`, textAlign };
+    return { transform: [['translate', x, y]], textAlign };
  }

  let angle = Math.atan2(pointOffset[1] - point[1], pointOffset[0] - point[0]);
@ -70,7 +70,10 @@ export function getLabelPositionStyle(
  }

  const [x, y] = getXYByPlacement(key, ratio, offsetX, offsetY, angle);
-  const transform = `translate(${x}, ${y}) rotate(${(angle / Math.PI) * 180}deg)`;
+  const transform: TransformArray = [
+    ['translate', x, y],
+    ['rotate', (angle / Math.PI) * 180],
+  ];

  return {
    textAlign,
--- a/packages/g6/src/utils/element.ts
+++ b/packages/g6/src/utils/element.ts
@ -301,7 +301,7 @@ export function getTextStyleByPlacement(
  }

  return {
-    transform: `translate(${x + offsetX}, ${y + offsetY})`,
+    transform: [['translate', x + offsetX, y + offsetY]],
    textBaseline,
    textAlign,
  };
--- a/packages/g6/src/utils/polygon.ts
+++ b/packages/g6/src/utils/polygon.ts
@ -32,7 +32,7 @@ export function getPolygonTextStyleByPlacement(
  const style: Partial<TextStyleProps> = {
    textAlign: placement === 'left' ? 'right' : placement === 'right' ? 'left' : 'center',
    textBaseline: placement === 'top' ? 'bottom' : placement === 'bottom' ? 'top' : 'middle',
-    transform: `translate(${x + offsetX}, ${y + offsetY})`,
+    transform: [['translate', x + offsetX, y + offsetY]],
  };
  if (placement === 'center' || !closeToContour) return style;

@ -51,10 +51,10 @@ export function getPolygonTextStyleByPlacement(
  const line = findNearestLine([x, y], lines);
  const intersection = findNearestPointOnLine([x, y], line);
  if (intersection && line) {
-    style.transform = `translate(${intersection[0] + offsetX}, ${intersection[1] + offsetY})`;
+    style.transform = [['translate', intersection[0] + offsetX, intersection[1] + offsetY]];
    if (autoRotate) {
      const angle = Math.atan((line[0][1] - line[1][1]) / (line[0][0] - line[1][0]));
-      style.transform += `rotate(${(angle / Math.PI) * 180}deg)`;
+      style.transform.push(['rotate', (angle / Math.PI) * 180]);
      style.textAlign = 'center';
      if (placement === 'right' || placement === 'left') {
        if (angle > 0) {
--- a/packages/g6/src/utils/transform.ts
+++ b/packages/g6/src/utils/transform.ts
@ -1,3 +1,5 @@
+import type { TransformArray } from '@antv/g';
+
 /**
 * <zh/> 从 transform 字符串中替换 translate 部分
 *
@ -8,7 +10,30 @@
 * @param transform - <zh/> transform 字符串 | <en/> transform string
 * @returns <zh/> 替换后的 transform 字符串 | <en/> replaced transform string
 */
-export function replaceTranslateInTransform(x: number, y: number, z: number, transform?: string) {
+export function replaceTranslateInTransform(
+  x: number,
+  y: number,
+  z: number,
+  transform: string | TransformArray,
+): string | TransformArray {
+  if (Array.isArray(transform)) {
+    let hasTranslate = false;
+    const newTransform: TransformArray = transform.map((t) => {
+      if (t[0] === 'translate') {
+        hasTranslate = true;
+        return ['translate', x, y];
+      } else if (t[0] === 'translate3d') {
+        hasTranslate = true;
+        return ['translate3d', x, y, z];
+      }
+      return t;
+    });
+    if (!hasTranslate) {
+      newTransform.splice(0, 0, z === 0 ? ['translate', x, y] : ['translate3d', x, y, z]);
+    }
+    return newTransform;
+  }
+
  const removedTranslate = transform ? transform.replace(/translate(3d)?\([^)]*\)/g, '') : '';
  if (z === 0) {
    return `translate(${x}, ${y})${removedTranslate}`;
--- a/packages/site/examples/element/custom-edge/demo/custom-arrow.js
+++ b/packages/site/examples/element/custom-edge/demo/custom-arrow.js
@ -28,7 +28,7 @@ const data = {
      style: {
        endArrowSrc: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
        endArrowSize: 28,
-        endArrowTransform: 'rotate(90deg)',
+        endArrowTransform: [['rotate', 90]],
      },
    },
  ],
--- a/packages/site/examples/element/custom-node/demo/g2-activity-chart.js
+++ b/packages/site/examples/element/custom-node/demo/g2-activity-chart.js
@ -59,7 +59,7 @@ class ActivityChart extends Circle {
          {
            type: 'image',
            encode: { x: 'name', y: 0, src: (d) => d.icon, size: 6 },
-            style: { transform: 'translateX(6)' },
+            style: { transform: [['translateX', 6]] },
          },
        ],
      },
--- a/packages/site/examples/layout/compact-box/demo/vertical.js
+++ b/packages/site/examples/layout/compact-box/demo/vertical.js
@ -18,22 +18,25 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
      data: treeToGraphData(data),
      behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand'],
      node: {
-        style: d => {
+        style: (d) => {
          const style = {
            labelText: d.id,
            labelPlacement: 'right',
            labelOffsetX: 2,
            labelBackground: true,
            ports: [{ placement: 'top' }, { placement: 'bottom' }],
-          }
+          };
          if (isLeafNode(d)) {
            Object.assign(style, {
-              labelTransform: 'rotate(90deg) translate(18px)',
+              labelTransform: [
+                ['rotate', 90],
+                ['translate', 18],
+              ],
              labelBaseline: 'center',
              labelTextAlign: 'left',
-            })
+            });
          }
-          return style
+          return style;
        },
        animation: {
          enter: false,
--- a/packages/site/examples/layout/custom/demo/arc.js
+++ b/packages/site/examples/layout/custom/demo/arc.js
@ -64,7 +64,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/70cde3be-22e8-4291-98f1-4d5
          labelText: (d) => d.name,
          labelTextAlign: 'start',
          labelTextBaseline: 'middle',
-          labelTransform: 'rotate(90)',
+          labelTransform: [['rotate', 90]],
        },
      },
      edge: {
--- a/packages/site/examples/layout/dendrogram/demo/vertical.js
+++ b/packages/site/examples/layout/dendrogram/demo/vertical.js
@ -28,7 +28,10 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
          };
          if (isLeafNode(d)) {
            Object.assign(style, {
-              labelTransform: 'rotate(90deg) translate(18px)',
+              labelTransform: [
+                ['rotate', 90],
+                ['translate', 18],
+              ],
              labelBaseline: 'center',
              labelTextAlign: 'left',
            });
--- a/packages/site/examples/scene-case/default/demo/fund-flow.js
+++ b/packages/site/examples/scene-case/default/demo/fund-flow.js
@ -108,7 +108,7 @@ class TreeNode extends Rect {
      fontFamily: 'iconfont',
      fontSize: 16,
      text: '\ue62d',
-      transform: this.data.variableUp ? '' : 'rotate(180deg)',
+      transform: this.data.variableUp ? [] : [['rotate', 180]],
    };
  }

--- a/packages/site/examples/scene-case/default/demo/mindmap.js
+++ b/packages/site/examples/scene-case/default/demo/mindmap.js
@ -107,7 +107,7 @@ class MindmapNode extends BaseNode {
      fontSize: 8,
      text: '\ue6e4',
      textAlign: 'center',
-      transform: direction === 'left' ? 'rotate(90deg)' : 'rotate(-90deg)',
+      transform: direction === 'left' ? [['rotate', 90]] : [['rotate', -90]],
      visibility: showIcon ? 'visible' : 'hidden',
      x: direction === 'left' ? -6 : width + 6,
      y: height,
--- a/packages/site/examples/scene-case/default/demo/organization-chart.js
+++ b/packages/site/examples/scene-case/default/demo/organization-chart.js
@ -29,14 +29,14 @@ class ChartNode extends Rect {
            fontSize: 20,
            fontWeight: 600,
            textAlign: 'center',
-            transform: 'translate(0,0)',
+            transform: [['translate', 0, 0]],
          }
        : {
            fill: '#2078B4',
            fontSize: 14,
            fontWeight: 400,
            textAlign: 'left',
-            transform: 'translate(-65, -15)',
+            transform: [['translate', -65, -15]],
          };
    return { text, ...labelStyle };
  }
@ -57,7 +57,7 @@ class ChartNode extends Rect {
      textTransform: 'uppercase',
      fill: '#343f4a',
      textAlign: 'left',
-      transform: 'translate(-65, 0)',
+      transform: [['translate', -65, 0]],
    };
  }

@ -72,7 +72,7 @@ class ChartNode extends Rect {
      text: this.data.status,
      fontSize: 8,
      textAlign: 'left',
-      transform: 'translate(40, -16)',
+      transform: [['translate', 40, -16]],
      padding: [0, 4],
      fill: '#fff',
      backgroundFill: statusColors[this.data.status],
@ -91,7 +91,7 @@ class ChartNode extends Rect {
      fontSize: 8,
      fontWeight: 300,
      textAlign: 'left',
-      transform: 'translate(-65, 20)',
+      transform: [['translate', -65, 20]],
    };
  }

--- a/packages/site/package.json
+++ b/packages/site/package.json
@ -41,9 +41,9 @@
    "@ant-design/icons": "^5.5.1",
    "@antv/algorithm": "^0.1.26",
    "@antv/dumi-theme-antv": "^0.5.2",
-    "@antv/g": "^6.0.14",
-    "@antv/g-svg": "^2.0.12",
-    "@antv/g-webgl": "^2.0.19",
+    "@antv/g": "^6.1.2",
+    "@antv/g-svg": "^2.0.15",
+    "@antv/g-webgl": "^2.0.22",
    "@antv/g2": "^5.2.7",
    "@antv/g6": "workspace:*",
    "@antv/g6-extension-3d": "workspace:*",