refactor(label-layout): 布局函数参数移除 region 属性，直接传入 coordinate 坐标系

src/chart/view.ts

@@ -1637,16 +1637,6 @@ export class View extends Base {
     // geometry 的 paint 阶段
     this.geometries.map((geometry: Geometry) => {
       geometry.coordinate = this.getCoordinate();
-      geometry.canvasRegion = {
-        x: this.viewBBox.x,
-        y: this.viewBBox.y,
-        minX: this.viewBBox.minX,
-        minY: this.viewBBox.minY,
-        maxX: this.viewBBox.maxX,
-        maxY: this.viewBBox.maxY,
-        width: this.viewBBox.width,
-        height: this.viewBBox.height,
-      };
       if (!doAnimation) {
         // 如果 view 不执行动画，那么 view 下所有的 geometry 都不执行动画
         geometry.animate(false);

src/component/labels.ts

@@ -1,6 +1,6 @@
 import { deepMix, each, get, isArray } from '@antv/util';
 
-import { BBox, IGroup, IShape } from '../dependents';
+import { Coordinate, IGroup, IShape } from '../dependents';
 import { LabelItem } from '../geometry/label/interface';
 import { AnimateOption, GeometryLabelLayoutCfg } from '../interface';
 
@@ -30,7 +30,7 @@ export default class Labels {
   /** 动画配置 */
   public animate: AnimateOption | false;
   /** label 绘制的区域 */
-  public region: BBox;
+  public coordinate: Coordinate;
 
   /** 存储当前 shape 的映射表，键值为 shape id */
   public shapesMap: Record<string, IGroup> = {};
@@ -225,7 +225,7 @@ export default class Labels {
             geometryShapes.push(shapes[id]);
           });
 
-          layoutFn(items, labelShapes, geometryShapes, this.region, layout.cfg);
+          layoutFn(items, labelShapes, geometryShapes, this.coordinate, layout.cfg);
         }
       });
     }

src/geometry/base.ts

@@ -155,8 +155,6 @@ export default class Geometry extends Base {
   public scales: Record<string, Scale>;
   /** scale 定义，需要外部传入。 */
   public scaleDefs: Record<string, ScaleOption>;
-  /** 画布区域，用于 label 布局。 */
-  public canvasRegion: BBox;
 
   // 内部产生的属性
   /** Attribute map  */

src/geometry/label/base.ts

@@ -292,7 +292,7 @@ export default class GeometryLabel {
 
   // 获取 labels 组件
   private getLabelsRenderer() {
-    const { labelsContainer, labelOption, canvasRegion, animateOption } = this.geometry;
+    const { labelsContainer, labelOption, animateOption } = this.geometry;
     const coordinate = this.geometry.coordinate;
 
     let labelsRenderer = this.labelsRenderer;
@@ -305,7 +305,7 @@ export default class GeometryLabel {
       });
       this.labelsRenderer = labelsRenderer;
     }
-    labelsRenderer.region = canvasRegion;
+    labelsRenderer.coordinate = this.getCoordinate();
     // 设置动画配置，如果 geometry 的动画关闭了，那么 label 的动画也会关闭
     labelsRenderer.animate = animateOption ? getDefaultAnimateCfg('label', coordinate) : false;
 

src/geometry/label/index.ts

@@ -1,4 +1,4 @@
-import { BBox, IGroup, IShape } from '../../dependents';
+import { Coordinate, IGroup, IShape } from '../../dependents';
 import { LooseObject } from '../../interface';
 import { GeometryLabelConstructor } from './base';
 import { LabelItem } from './interface';
@@ -8,10 +8,10 @@ import { LabelItem } from './interface';
  * @param items 存储每个 label 的详细信息
  * @param labels 所有的 labels 图形实例
  * @param shapes 所有 label 对应的图形元素实例
- * @param region 画布区域
+ * @param coodinate 所在坐标系
  * @param cfg 用于存储各个布局函数开放给用户的配置数据
  */
-type GeometryLabelsLayoutFn = (items: LabelItem[], labels: IGroup[], shapes: IShape[] | IGroup[], region: BBox, cfg?: LooseObject) => void;
+type GeometryLabelsLayoutFn = (items: LabelItem[], labels: IGroup[], shapes: IShape[] | IGroup[], coodinate: Coordinate, cfg?: LooseObject) => void;
 
 const GEOMETRY_LABELS_MAP: Record<string, GeometryLabelConstructor> = {};
 const GEOMETRY_LABELS_LAYOUT_MAP: Record<string, GeometryLabelsLayoutFn>  = {};

src/geometry/label/layout/distribute.ts

@@ -1,6 +1,6 @@
-import { isObject, each, get } from '@antv/util';
+import { each, get, isObject } from '@antv/util';
 
-import { BBox, IGroup, IShape  } from '../../../dependents';
+import { Coordinate, IGroup, IShape  } from '../../../dependents';
 import { LabelItem } from '../interface';
 
 import { polarToCartesian } from '../../../util/graphics';
@@ -107,9 +107,8 @@ function antiCollision(labelShapes, labels, lineHeight, plotRange, center, isRig
   });
 }
 
-export function distribute(items: LabelItem[], labels: IGroup[], shapes: IShape[] | IGroup[], region: BBox) {
+export function distribute(items: LabelItem[], labels: IGroup[], shapes: IShape[] | IGroup[], coordinate: Coordinate) {
   const offset = items[0] ? items[0].offset : 0;
-  const coordinate = labels[0].get('coordinate');
   // @ts-ignore
   const radius = coordinate.getRadius();
   const center = coordinate.getCenter();

src/geometry/label/layout/limit-in-canvas.ts

@@ -1,5 +1,5 @@
 import { each } from '@antv/util';
-import { BBox, IGroup, IShape } from '../../../dependents';
+import { Coordinate, IGroup, IShape } from '../../../dependents';
 import { translate } from '../../../util/transform';
 import { LabelItem } from '../interface';
 
@@ -9,9 +9,11 @@ import { LabelItem } from '../interface';
  * @param labels
  * @param cfg
  */
-export function limitInCanvas(items: LabelItem[], labels: IGroup[], shapes: IShape[] | IGroup[], region: BBox) {
+export function limitInCanvas(items: LabelItem[], labels: IGroup[], shapes: IShape[] | IGroup[], coordinate: Coordinate) {
   each(labels, (label: IGroup) => {
-    const { minX: regionMinX, minY: regionMinY, maxX: regionMaxX, maxY: regionMaxY } = region;
+    const { start: regionMinX, end: regionMaxX } = coordinate.x;
+    const { start: regionMaxY, end: regionMinY } = coordinate.y;
+
     const { minX, minY, maxX, maxY, x, y, width, height } = label.getCanvasBBox();
 
     let finalX = x;

src/geometry/label/layout/limit-in-shape.ts

@@ -1,12 +1,12 @@
 import { each } from '@antv/util';
-import { BBox, IGroup, IShape } from '../../../dependents';
+import { Coordinate, IGroup, IShape } from '../../../dependents';
 import { LabelItem } from '../interface';
 
 /**
  * @ignore
  * 根据图形元素以及 label 的 bbox 进行调整，如果 label 超出了 shape 的 bbox 则不展示
  */
-export function limitInShape(items: LabelItem[], labels: IGroup[], shapes: IShape[] | IGroup[], region: BBox) {
+export function limitInShape(items: LabelItem[], labels: IGroup[], shapes: IShape[] | IGroup[], coordinate: Coordinate) {
   each(labels, (label, index) => {
     const labelBBox = label.getCanvasBBox(); // 文本有可能发生旋转
     const shapeBBox = shapes[index].getBBox();

src/geometry/label/layout/overlap.ts

@@ -1,5 +1,5 @@
 import { each } from '@antv/util';
-import { BBox, IGroup, IShape } from '../../../dependents';
+import { BBox, Coordinate, IGroup, IShape } from '../../../dependents';
 import { LabelItem } from '../interface';
 
 const MAX_TIMES = 100;
@@ -212,7 +212,7 @@ function adjustLabelPosition(label: IShape, x: number, y: number, index: number)
  * 不同于 'overlap' 类型的布局，该布局不会对 label 的位置进行偏移调整。
  * @param labels 参与布局调整的 label 数组集合
  */
-export function fixedOverlap(items: LabelItem[], labels: IGroup[], shapes: IShape[] | IGroup[], region: BBox) {
+export function fixedOverlap(items: LabelItem[], labels: IGroup[], shapes: IShape[] | IGroup[], coordinate: Coordinate) {
   const greedy = new Greedy();
   each(labels, (label: IGroup) => {
     const labelShape = label.find((shape) => shape.get('type') === 'text') as IShape;
@@ -228,7 +228,7 @@ export function fixedOverlap(items: LabelItem[], labels: IGroup[], shapes: IShap
  * label 防遮挡布局：为了防止 label 之间相互覆盖同时保证尽可能多 的 label 展示，通过尝试将 label 向**四周偏移**来剔除放不下的 label
  * @param labels 参与布局调整的 label 数组集合
  */
-export function overlap(items: LabelItem[], labels: IGroup[], shapes: IShape[] | IGroup[], region: BBox) {
+export function overlap(items: LabelItem[], labels: IGroup[], shapes: IShape[] | IGroup[], coordinate: Coordinate) {
   const greedy = new Greedy();
   each(labels, (label: IGroup) => {
     const labelShape = label.find((shape) => shape.get('type') === 'text') as IShape;

tests/unit/geometry/label/layout/limit-in-canvas-spec.ts

@@ -1,6 +1,9 @@
+import { getCoordinate } from '@antv/coord';
 import { limitInCanvas } from '../../../../../src/geometry/label/layout/limit-in-canvas';
 import { createCanvas, createDiv, removeDom } from '../../../../util/dom';
 
+const CartesianCoordinate = getCoordinate('rect');
+
 describe('GeometryLabel layout', () => {
   const div = createDiv();
   const canvas = createCanvas({
@@ -9,6 +12,11 @@ describe('GeometryLabel layout', () => {
     height: 100,
   });
 
+  const coord = new CartesianCoordinate({
+    start: { x: 0, y: 100 },
+    end: { x: 100, y: 0 },
+  });
+
   it('limitInCanvas', () => {
     // mock
     const text1 = canvas.addShape({
@@ -75,21 +83,10 @@ describe('GeometryLabel layout', () => {
       }
     });
 
-    const region = {
-      x: 0,
-      y: 0,
-      minX: 0,
-      minY: 0,
-      maxX: 100,
-      maxY: 100,
-      width: 100,
-      height: 100,
-    };
-
     expect(canvas.getCanvasBBox().minX).toBeLessThan(0);
 
     // @ts-ignore
-    limitInCanvas([], canvas.getChildren(), [], region);
+    limitInCanvas([], canvas.getChildren(), [], coord);
     canvas.draw();
     expect(canvas.getChildren().length).toBe(7);
     expect(canvas.getCanvasBBox().minX).toBe(0);