Merge pull request #2106 from VisActor/agent/fix-line-axis-obb-offset

fix(axis): align rotated text OBB offsets

Author: xuefei1313

packages/vrender-components/__tests__/electron/axis/line.test.ts

@@ -198,6 +198,50 @@ describe('Line Axis', () => {
     expect(labelWidth).toBeLessThan(40);
   });
 
+  it('hides a flushed rotated endpoint label that overlaps its predecessor', () => {
+    const axis = new LineAxis({
+      orient: 'left',
+      start: { x: 0, y: 0 },
+      end: { x: 0, y: 400 },
+      verticalFactor: 1,
+      items: [
+        [
+          { id: -200000000000, label: '-200000000000', rawValue: -200000000000, value: 1 },
+          { id: -100000000000, label: '-100000000000', rawValue: -100000000000, value: 0.8571428571428571 },
+          { id: 0, label: '0', rawValue: 0, value: 0.7142857142857143 },
+          { id: 100000000000, label: '100000000000', rawValue: 100000000000, value: 0.5714285714285714 },
+          { id: 200000000000, label: '200000000000', rawValue: 200000000000, value: 0.4285714285714286 },
+          { id: 300000000000, label: '300000000000', rawValue: 300000000000, value: 0.2857142857142857 },
+          { id: 400000000000, label: '400000000000', rawValue: 400000000000, value: 0.14285714285714285 },
+          { id: 500000000000, label: '500000000000', rawValue: 500000000000, value: 0 }
+        ]
+      ],
+      label: {
+        visible: true,
+        autoLimit: false,
+        autoHide: true,
+        autoHideMethod: 'greedy',
+        flush: true,
+        style: {
+          angle: Math.PI / 2,
+          textAlign: 'center',
+          textBaseline: 'top'
+        }
+      }
+    });
+
+    (axis as any).render();
+
+    const labels = axis.getElementsByName(AXIS_ELEMENT_NAME.label) as unknown as IText[];
+    const first = labels.find(label => label.attribute.text === '-200000000000');
+    const second = labels.find(label => label.attribute.text === '-100000000000');
+
+    expect(first).toBeDefined();
+    expect(second).toBeDefined();
+    expect(first.attribute.visible).toBe(true);
+    expect(second.attribute.visible).toBe(false);
+  });
+
   it('Line Axis with Title', () => {
     const scale = new LinearScale().domain([0, 100]).range([0, 1]).nice();
     const items = scale.ticks(10).map(tick => {

packages/vrender-core/src/graphic/text.ts

@@ -172,13 +172,15 @@ export class Text extends Graphic<ITextGraphicAttribute> implements IText {
     if (!this.obbText) {
       this.obbText = new Text({});
     }
-    this.obbText.setAttributes({ ...attribute, angle: 0 });
+    const { dx = 0, dy = 0 } = attribute;
+    this.obbText.setAttributes({ ...attribute, angle: 0, dx: 0, dy: 0 });
     const bounds1 = this.obbText.AABBBounds;
     const { x, y } = attribute;
     const boundsCenter = { x: (bounds1.x1 + bounds1.x2) / 2, y: (bounds1.y1 + bounds1.y2) / 2 };
     const center = rotatePoint(boundsCenter, angle, { x, y });
     this._OBBBounds.copy(bounds1);
-    this._OBBBounds.translate(center.x - boundsCenter.x, center.y - boundsCenter.y);
+    // dx/dy are applied as a world-space translation after the text rotation.
+    this._OBBBounds.translate(center.x - boundsCenter.x + dx, center.y - boundsCenter.y + dy);
     this._OBBBounds.angle = angle;
     return this._OBBBounds;
   }