fix(label): support specified transform (close: #4881)

__tests__/plots/static/alphabet-interval-label-rotate.ts

@@ -0,0 +1,29 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalLabelRotate(): G2Spec {
+  return {
+    type: 'interval',
+    transform: [{ type: 'sortX', by: 'y', reverse: true }],
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+      transform: [{ type: 'slice', end: 5 }],
+    },
+    axis: { y: { labelFormatter: '.0%' } },
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'steelblue',
+    },
+    labels: [
+      {
+        text: 'letter',
+        style: {
+          transform: 'translateY(10) rotate(45)',
+          transformOrigin: 'center center',
+          fontSize: 30,
+        },
+      },
+    ],
+  };
+}

__tests__/plots/static/index.ts

@@ -196,3 +196,4 @@ export { gaugeCustomColor } from './gauge-custom-color';
 export { gaugeCustomShape } from './gauge-custom-shape';
 export { scoreByItemAreaRadarSize } from './score-by-item-area-radar-size';
 export { mockPointLogTicks } from './mock-point-log-ticks';
+export { alphabetIntervalLabelRotate } from './alphabet-interval-label-rotate';

src/shape/label/label.ts

@@ -46,7 +46,14 @@ function getDefaultStyle(
  */
 export const Label: SC<LabelOptions> = (options) => {
   return (points, value, coordinate, theme) => {
-    const { text, x, y, ...overrideStyle } = value;
+    const {
+      text,
+      x,
+      y,
+      transform: specifiedTS = '',
+      transformOrigin,
+      ...overrideStyle
+    } = value;
     const {
       rotate = 0,
       transform = '',
@@ -56,7 +63,11 @@ export const Label: SC<LabelOptions> = (options) => {
     return select(new Advance())
       .call(applyStyle, defaultStyle)
       .style('text', `${text}`)
-      .style('transform', `${transform}rotate(${+rotate})`)
+      .style(
+        'labelTransform',
+        `${transform} rotate(${+rotate}) ${specifiedTS}`.trim(),
+      )
+      .style('labelTransformOrigin', transformOrigin)
       .style('coordCenter', coordinate.getCenter())
       .call(applyStyle, overrideStyle)
       .node();

src/shape/text/advance.ts

@@ -40,6 +40,9 @@ type TextShapeStyleProps = Omit<TextStyleProps, 'text'> &
     connector?: boolean;
     startMarker?: boolean;
     endMarker?: boolean;
+    labelTransform?: string;
+    labelTransformOrigin?: string;
+    rotate?: number;
   };
 
 function getConnectorPoint(shape: GText | Rect) {
@@ -125,8 +128,9 @@ export const Advance = createElement((g) => {
     // Do not pass className
     class: className,
     transform,
-    // @ts-ignore
     rotate,
+    labelTransform,
+    labelTransformOrigin,
     x,
     y,
     x0 = x,
@@ -147,7 +151,12 @@ export const Advance = createElement((g) => {
   const shape1 = select(g)
     .maybeAppend('text', 'text')
     .style('zIndex', 0)
-    .call(applyStyle, { textBaseline: 'middle', ...rest })
+    .call(applyStyle, {
+      textBaseline: 'middle',
+      transform: labelTransform,
+      transformOrigin: labelTransformOrigin,
+      ...rest,
+    })
     .node();
 
   const shape2 = select(g)