refactor: revert TransformArray, update g version (#334)

* Revert "refactor: adapt g perf optimize (#333)" This reverts commit e0120be. * chore: update g version and snapshots * chore: update version
antvis · Oct 24, 2024 · 04f0c21 · 04f0c21
1 parent e0120be
commit 04f0c21
Show file tree

Hide file tree

Showing 29 changed files with 43 additions and 44 deletions.
diff --git a/__tests__/integration/components/axis/axis-animation-update-12.ts b/__tests__/integration/components/axis/axis-animation-update-12.ts
@@ -14,15 +14,15 @@ export const AxisAnimationUpdate12 = () => {
   const g1 = group.appendChild(
     new Group({
       style: {
-        transform: [['translate', 100, 100]],
+        transform: 'translate(100, 100)',
       },
     })
   );
 
   const g2 = group.appendChild(
     new Group({
       style: {
-        transform: [['translate', 50, 50]],
+        transform: 'translate(50, 50)',
       },
     })
   );

diff --git a/__tests__/integration/components/axis/axis-animation-update-13.ts b/__tests__/integration/components/axis/axis-animation-update-13.ts
@@ -13,15 +13,15 @@ export const AxisAnimationUpdate13 = () => {
   group.appendChild(
     new Group({
       style: {
-        transform: [['translate', 100, 100]],
+        transform: 'translate(100, 100)',
       },
     })
   );
 
   const g2 = group.appendChild(
     new Group({
       style: {
-        transform: [['translate', 50, 50]],
+        transform: 'translate(50, 50)',
       },
     })
   );

diff --git a/__tests__/integration/components/axis/axis-linear-custom-tick.ts b/__tests__/integration/components/axis/axis-linear-custom-tick.ts
@@ -19,7 +19,7 @@ export const AxisLinearCustomTick = () => {
         tickFormatter: (datum: any, index: number, data: any, [cx, cy]: any) => {
           if (index === 3)
             return new Rect({
-              style: { x: 0, y: 0, width: 20, height: 20, fill: 'green', transform: [['translate', -10, -10]] },
+              style: { x: 0, y: 0, width: 20, height: 20, fill: 'green', transform: 'translate(-10, -10)' },
             });
           return index % 5 === 0
             ? new Circle({ style: { cx: 0, cy: 0, r: index % 10 === 0 ? 10 : 5 } })

diff --git a/__tests__/integration/components/axis/axis-linear-label.ts b/__tests__/integration/components/axis/axis-linear-label.ts
@@ -43,14 +43,14 @@ export const AxisLinearLabel = () => {
         y: 0,
         width: 30,
         height: 30,
-        transform: [['translate', -15, -15]],
+        transform: 'translate(-15, -15)',
       },
     });
     const labelText = new Text({
       style: {
         text,
         textAlign: 'center',
-        transform: [['translate', 0, 30]],
+        transform: 'translate(0, 30)',
       },
     });
     labelGroup.appendChild(labelIcon);

diff --git a/__tests__/integration/components/axis/axis-linear-title-position.ts b/__tests__/integration/components/axis/axis-linear-title-position.ts
@@ -69,7 +69,7 @@ export const AxisLinearTitlePosition = () => {
   const g2 = group.appendChild(
     new Group({
       style: {
-        transform: [['translate', 60, 60]],
+        transform: 'translate(60, 60)',
       },
     })
   );

diff --git a/__tests__/integration/components/checkbox/checkbox1.ts b/__tests__/integration/components/checkbox/checkbox1.ts
@@ -7,7 +7,7 @@ export function Checkbox1() {
   group.appendChild(
     new Checkbox({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         labelText: 'Checkbox',
       },
     })
@@ -16,7 +16,7 @@ export function Checkbox1() {
   const ck = group.appendChild(
     new Checkbox({
       style: {
-        transform: [['translate', 10, 30]],
+        transform: 'translate(10, 30)',
         labelText: 'Checkbox',
         checked: true,
       },

diff --git a/__tests__/integration/components/indicator/indicator.ts b/__tests__/integration/components/indicator/indicator.ts
@@ -6,7 +6,7 @@ import { createGrid } from '../../utils/grid';
 export const IndicatorDemo = () => {
   const group = new Group({
     style: {
-      transform: [['translate', 30, 30]],
+      transform: 'translate(30, 30)',
     },
   });
 

diff --git a/__tests__/integration/components/legend/category-item-5.ts b/__tests__/integration/components/legend/category-item-5.ts
@@ -26,7 +26,7 @@ export const CategoryItem5 = () => {
               width: 10,
               height: 10,
               transformOrigin: 'center',
-              transform: [['rotate', 45]],
+              transform: 'rotate(45)',
             },
           }),
       },

diff --git a/__tests__/integration/components/legend/category-item-marker-1.ts b/__tests__/integration/components/legend/category-item-marker-1.ts
@@ -28,7 +28,7 @@ export const CategoryItemMarker1 = () => {
                     width: 10,
                     height: 10,
                     transformOrigin: 'center',
-                    transform: [['rotate', 45]],
+                    transform: 'rotate(45)',
                   },
                 })
             : () =>

diff --git a/__tests__/integration/components/legend/category-position-2.ts b/__tests__/integration/components/legend/category-position-2.ts
@@ -8,7 +8,7 @@ export const CategoryPosition2 = () => {
   const g = group.appendChild(
     new Group({
       style: {
-        transform: [['translate', 50, 50]],
+        transform: 'translate(50, 50)',
       },
     })
   );

diff --git a/__tests__/integration/components/marker/marker-1.ts b/__tests__/integration/components/marker/marker-1.ts
@@ -16,7 +16,7 @@ export const Marker1 = () => {
           y,
           // transform: `translate(${x}, ${y}) rotate(45deg) translate(${-x}, ${-y})`,
           // transformOrigin: `0 0`,
-          transform: [['rotate', 45]],
+          transform: 'rotate(45deg)',
           transformOrigin: `${x} ${y}`,
           symbol: marker,
           size: 16,

diff --git a/__tests__/integration/components/sparkline/sparkline-10.ts b/__tests__/integration/components/sparkline/sparkline-10.ts
@@ -7,7 +7,7 @@ export const Sparkline10 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'column',
         width: 300,
         height: 50,

diff --git a/__tests__/integration/components/sparkline/sparkline-11.ts b/__tests__/integration/components/sparkline/sparkline-11.ts
@@ -7,7 +7,7 @@ export const Sparkline11 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'column',
         width: 300,
         height: 50,

diff --git a/__tests__/integration/components/sparkline/sparkline-12.ts b/__tests__/integration/components/sparkline/sparkline-12.ts
@@ -7,7 +7,7 @@ export const Sparkline12 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'column',
         width: 300,
         height: 50,

diff --git a/__tests__/integration/components/sparkline/sparkline-2.ts b/__tests__/integration/components/sparkline/sparkline-2.ts
@@ -7,7 +7,7 @@ export const Sparkline2 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,

diff --git a/__tests__/integration/components/sparkline/sparkline-3.ts b/__tests__/integration/components/sparkline/sparkline-3.ts
@@ -7,7 +7,7 @@ export const Sparkline3 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,

diff --git a/__tests__/integration/components/sparkline/sparkline-4.ts b/__tests__/integration/components/sparkline/sparkline-4.ts
@@ -7,7 +7,7 @@ export const Sparkline4 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,

diff --git a/__tests__/integration/components/sparkline/sparkline-5.ts b/__tests__/integration/components/sparkline/sparkline-5.ts
@@ -7,7 +7,7 @@ export const Sparkline5 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,

diff --git a/__tests__/integration/components/sparkline/sparkline-6.ts b/__tests__/integration/components/sparkline/sparkline-6.ts
@@ -7,7 +7,7 @@ export const Sparkline6 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,

diff --git a/__tests__/integration/components/sparkline/sparkline-7.ts b/__tests__/integration/components/sparkline/sparkline-7.ts
@@ -7,7 +7,7 @@ export const Sparkline7 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,

diff --git a/__tests__/integration/components/sparkline/sparkline-8.ts b/__tests__/integration/components/sparkline/sparkline-8.ts
@@ -7,7 +7,7 @@ export const Sparkline8 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'column',
         width: 300,
         height: 50,

diff --git a/__tests__/integration/components/sparkline/sparkline-9.ts b/__tests__/integration/components/sparkline/sparkline-9.ts
@@ -7,7 +7,7 @@ export const Sparkline9 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'column',
         width: 300,
         height: 50,

diff --git a/__tests__/integration/components/sparkline/sparkline-scale-line.ts b/__tests__/integration/components/sparkline/sparkline-scale-line.ts
@@ -3,7 +3,7 @@ import { it } from '../../utils';
 import { Sparkline } from '../../../../src/ui/sparkline';
 
 export const SparklineScaleLine = it((group) => {
-  const shape1 = { transform: [['translate', 10, 10]], width: 300, height: 50 };
+  const shape1 = { transform: 'translate(10, 10)', width: 300, height: 50 };
   group.appendChild(
     new Rect({
       style: {
@@ -33,7 +33,7 @@ export const SparklineScaleLine = it((group) => {
     })
   );
 
-  const shape2 = { transform: [['translate', 10, 70]], width: 300, height: 50 };
+  const shape2 = { transform: 'translate(10, 70)', width: 300, height: 50 };
 
   group.appendChild(
     new Rect({

diff --git a/__tests__/integration/components/switch/switch-1.ts b/__tests__/integration/components/switch/switch-1.ts
@@ -15,7 +15,7 @@ export const Switch1 = () => {
   group.appendChild(
     new Switch({
       style: {
-        transform: [['translateY', 40]],
+        transform: 'translateY(40)',
         checked: true,
       },
     })
@@ -24,7 +24,7 @@ export const Switch1 = () => {
   const sw = group.appendChild(
     new Switch({
       style: {
-        transform: [['translateY', 80]],
+        transform: 'translateY(80)',
         checked: false,
       },
     })

diff --git a/__tests__/integration/components/tag/tag-1.ts b/__tests__/integration/components/tag/tag-1.ts
@@ -7,7 +7,7 @@ export const Tag1 = () => {
   group.appendChild(
     new Tag({
       style: {
-        transform: [['translate', 100, 100]],
+        transform: 'translate(100, 100)',
         text: 'G2',
       },
     })
@@ -16,7 +16,7 @@ export const Tag1 = () => {
   group.appendChild(
     new Tag({
       style: {
-        transform: [['translate', 200, 100]],
+        transform: 'translate(200, 100)',
         text: 'G6',
         backgroundFill: '#DBF1B7',
         labelFill: 'red',
@@ -32,7 +32,7 @@ export const Tag1 = () => {
   const tag = group.appendChild(
     new Tag({
       style: {
-        transform: [['translate', 300, 100]],
+        transform: 'translate(300, 100)',
         text: 'L7',
         radius: 6,
         padding: [6, 24],

diff --git a/__tests__/integration/components/title/title.ts b/__tests__/integration/components/title/title.ts
@@ -54,7 +54,7 @@ export const TitleDemo = () => {
     {
       text: 'left top start',
       position: 'left-top',
-      transform: [['rotate', 90]],
+      transform: 'rotate(90)',
       textAlign: 'start',
       textBaseline: 'bottom',
     }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/component",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Visualization components for AntV, based on G.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -44,16 +44,16 @@
     "component"
   ],
   "dependencies": {
-    "@antv/g": "^6.1.1",
+    "@antv/g": "^6.1.2",
     "@antv/scale": "^0.4.3",
     "@antv/util": "^3.3.5",
     "svg-path-parser": "^1.1.0"
   },
   "devDependencies": {
-    "@antv/g-canvas": "^2.0.17",
-    "@antv/g-plugin-control": "^2.0.12",
-    "@antv/g-svg": "^2.0.14",
-    "@antv/g-webgl": "^2.0.21",
+    "@antv/g-canvas": "^2.0.18",
+    "@antv/g-plugin-control": "^2.0.13",
+    "@antv/g-svg": "^2.0.15",
+    "@antv/g-webgl": "^2.0.22",
     "@babel/plugin-proposal-decorators": "^7.20.5",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",

diff --git a/src/ui/poptip/constant.ts b/src/ui/poptip/constant.ts
@@ -73,7 +73,7 @@ export const POPTIP_STYLE = {
   [`.${CLASS_NAME.ARROW}`]: {
     width: '4px',
     height: '4px',
-    transform: [['rotate', 45]],
+    transform: 'rotate(45deg)',
     'background-color': 'rgba(0, 0, 0)',
     position: 'absolute',
     'z-index': -1,

diff --git a/src/ui/slider/index.ts b/src/ui/slider/index.ts
@@ -389,9 +389,8 @@ export class Slider extends Component<SliderStyleProps> {
   private inferTextStyle(handleType: HandleType): Record<string, any> {
     const { orientation } = this.attributes;
     if (orientation === 'horizontal') return {};
-    if (handleType === 'start')
-      return { transformOrigin: 'left center', transform: [['rotate', 90]], textAlign: 'start' };
-    if (handleType === 'end') return { transformOrigin: 'right center', transform: [['rotate', 90]], textAlign: 'end' };
+    if (handleType === 'start') return { transformOrigin: 'left center', transform: 'rotate(90)', textAlign: 'start' };
+    if (handleType === 'end') return { transformOrigin: 'right center', transform: 'rotate(90)', textAlign: 'end' };
     return {};
   }