优化 label 类以及修复相关 BUG

examples/pie/basic/demo/pie-texture.ts

@@ -8,6 +8,7 @@ const data = [
 const chart = new Chart({
   container: 'container',
   autoFit: true,
+  height: 500,
 });
 
 chart.data(data);

src/chart/controller/annotation.ts

@@ -23,7 +23,7 @@ import { COMPONENT_TYPE, DIRECTION, LAYER, VIEW_LIFE_CIRCLE } from '../../consta
 
 import Geometry from '../../geometry/base';
 import Element from '../../geometry/element';
-import { getDistanceToCenter, getPointAngle } from '../../util/coordinate';
+import { getAngleByPoint, getDistanceToCenter } from '../../util/coordinate';
 import { omit } from '../../util/helper';
 import View from '../view';
 import { Controller } from './base';
@@ -528,8 +528,8 @@ export default class Annotation extends Controller<BaseOption[]> {
       const { start, end } = option as ArcOption;
       const sp = this.parsePosition(start);
       const ep = this.parsePosition(end);
-      const startAngle = getPointAngle(coordinate, sp);
-      let endAngle = getPointAngle(coordinate, ep);
+      const startAngle = getAngleByPoint(coordinate, sp);
+      let endAngle = getAngleByPoint(coordinate, ep);
       if (startAngle > endAngle) {
         endAngle = Math.PI * 2 + endAngle;
       }

src/chart/controller/tooltip.ts

@@ -2,7 +2,7 @@ import { deepMix, each, find, flatten, get, isArray, isEqual, isFunction, mix }
 import { Crosshair, HtmlTooltip, IGroup } from '../../dependents';
 import Geometry from '../../geometry/base';
 import { MappingDatum, Point, TooltipOption } from '../../interface';
-import { getDistanceToCenter, getPointAngle, isPointInCoordinate } from '../../util/coordinate';
+import { getAngleByPoint, getDistanceToCenter, isPointInCoordinate } from '../../util/coordinate';
 import { polarToCartesian } from '../../util/graphics';
 import { findDataByPoint, getTooltipItems } from '../../util/tooltip';
 import { Controller } from './base';
@@ -397,7 +397,7 @@ export default class Tooltip extends Controller<TooltipOption> {
       }
     } else {
       // 极坐标下 x 轴上的 crosshairs 表现为半径
-      const angle = getPointAngle(coordinate, point);
+      const angle = getAngleByPoint(coordinate, point);
       const center = coordinate.getCenter();
       // @ts-ignore
       const radius = coordinate.getRadius();

src/component/labels.ts

@@ -50,20 +50,28 @@ export default class Labels {
     this.shapesMap = {};
     const container = this.container;
     const offscreenGroup = this.createOffscreenGroup(); // 创建虚拟分组
-    // 在虚拟 group 中创建 shapes
+    // step 1: 在虚拟 group 中创建 shapes
     for (const item of items) {
       if (item) {
         this.renderLabel(item, offscreenGroup);
       }
     }
-    this.adjustLabels(shapes); // 调整 labels
+
+    // step 2: 根据布局，调整 labels
+    this.doLayout(items, shapes);
+
+    // step 3: 绘制 labelLine
+    this.renderLabelLine(items);
+
+    // step 4: 根据用户设置的偏移量调整 label
+    this.adjustLabel(items);
 
     // 进行添加、更新、销毁操作
     const lastShapesMap = this.lastShapesMap;
     const shapesMap = this.shapesMap;
     each(shapesMap, (shape, id) => {
       if (shape.destroyed) {
-        // label 在布局调整环节被删除了（adjustLabels）
+        // label 在布局调整环节被删除了（doLayout）
         delete shapesMap[id];
       } else {
         if (lastShapesMap[id]) {
@@ -167,7 +175,7 @@ export default class Labels {
     if ((content.isGroup && content.isGroup()) || (content.isShape && content.isShape()))  {
       // 如果 content 是 Group 或者 Shape，根据 textAlign 调整位置后，直接将其加入 labelGroup
       const { width, height } = content.getCanvasBBox();
-      const textAlign = cfg.textAlign || 'left';
+      const textAlign = get(cfg, 'textAlign', 'left');
 
       let x = cfg.x;
       const y = cfg.y - (height / 2);
@@ -187,6 +195,7 @@ export default class Labels {
           x: cfg.x,
           y: cfg.y,
           textAlign: cfg.textAlign,
+          textBaseline: get(cfg, 'textBaseline', 'middle'),
           text: cfg.content,
           ...cfg.style,
         },
@@ -197,12 +206,11 @@ export default class Labels {
     if (cfg.rotate) {
       rotate(labelShape, cfg.rotate);
     }
-    this.drawLabelLine(cfg, labelGroup);
     this.shapesMap[id] = labelGroup;
   }
 
   // 根据type对label布局
-  private adjustLabels(shapes) {
+  private doLayout(items: LabelItem[], shapes: Record<string, IShape | IGroup>) {
     if (this.layout) {
       const layouts = isArray(this.layout) ? this.layout : [this.layout];
       each(layouts, (layout: GeometryLabelLayoutCfg) => {
@@ -215,38 +223,47 @@ export default class Labels {
             geometryShapes.push(shapes[id]);
           });
 
-          layoutFn(labelShapes, geometryShapes, this.region, layout.cfg);
+          layoutFn(items, labelShapes, geometryShapes, this.region, layout.cfg);
         }
       });
     }
   }
 
-  private drawLabelLine(labelCfg: LabelItem, container: IGroup) {
-    if (!labelCfg.labelLine) {
-      // labelLine: null | false，关闭 label 对应的 labelLine
-      return;
-    }
-    const labelLineCfg = get(labelCfg, 'labelLine', {});
-    let path = labelLineCfg.path;
-    if (!path) {
-      const start = labelCfg.start;
-      path = [
-        ['M', start.x, start.y],
-        ['L', labelCfg.x, labelCfg.y],
-      ];
-    }
-    container.addShape('path', {
-      capture: false, // labelLine 默认不参与事件捕获
-      attrs: {
-        path,
-        stroke: labelCfg.color ? labelCfg.color : get(labelCfg, ['style', 'fill'], '#000'),
-        fill: null,
-        ...labelLineCfg.style,
-      },
-      id: labelCfg.id,
-      origin: labelCfg.mappingData,
-      data: labelCfg.data,
-      coordinate: labelCfg.coordinate,
+  private renderLabelLine(labelItems: LabelItem[]) {
+    each(labelItems, (labelItem) => {
+      if (!labelItem) {
+        return;
+      }
+      if (!labelItem.labelLine) {
+        // labelLine: null | false，关闭 label 对应的 labelLine
+        return;
+      }
+      const labelLineCfg = get(labelItem, 'labelLine', {});
+      const id = labelItem.id;
+      let path = labelLineCfg.path;
+      if (!path) {
+        const start = labelItem.start;
+        path = [
+          ['M', start.x, start.y],
+          ['L', labelItem.x, labelItem.y],
+        ];
+      }
+      const labelGroup = this.shapesMap[id];
+      if (!labelGroup.destroyed) {
+        labelGroup.addShape('path', {
+          capture: false, // labelLine 默认不参与事件捕获
+          attrs: {
+            path,
+            stroke: labelItem.color ? labelItem.color : get(labelItem, ['style', 'fill'], '#000'),
+            fill: null,
+            ...labelLineCfg.style,
+          },
+          id,
+          origin: labelItem.mappingData,
+          data: labelItem.data,
+          coordinate: labelItem.coordinate,
+        });
+      }
     });
   }
 
@@ -256,4 +273,24 @@ export default class Labels {
     const newGroup = new GroupClass({});
     return newGroup;
   }
+
+  private adjustLabel(items: LabelItem[]) {
+    each(items, (item) => {
+      if (item) {
+        const id = item.id;
+        const labelGroup = this.shapesMap[id];
+        if (!labelGroup.destroyed) {
+          const labelShape = labelGroup.find(ele => ele.get('type') === 'text');
+          if (labelShape) {
+            if (item.offsetX) {
+              labelShape.attr('x', labelShape.attr('x') + item.offsetX);
+            }
+            if (item.offsetY) {
+              labelShape.attr('y', labelShape.attr('y') + item.offsetY);
+            }
+          }
+        }
+      }
+    });
+  }
 }

src/geometry/base.ts

@@ -55,6 +55,7 @@ import { getShapeFactory } from './shape/base';
 import { group } from './util/group-data';
 import { isModelChange } from './util/is-model-change';
 import { parseFields } from './util/parse-fields';
+import GeometryLabel from './label/base';
 
 /** @ignore */
 interface AttributeInstanceCfg {
@@ -192,17 +193,17 @@ export default class Geometry extends Base {
   protected lastElementsMap: Record<string, Element> = {};
   /** 是否生成多个点来绘制图形。 */
   protected generatePoints: boolean = false;
-  /** 虚拟 Group，用于图形更新 */
-  protected offscreenGroup: IGroup;
   /** 存储发生图形属性映射前的数据 */
   protected beforeMappingData: Data[] = null;
   /** 存储每个 shape 的默认 size，用于 Interval、Schema 几何标记 */
   protected defaultSize: number;
 
   private adjusts: Record<string, Adjust> = {};
   private lastAttributeOption;
-  private labelsRenderer: Labels;
   private idFields: string[] = [];
+  private geometryLabel: GeometryLabel;
+  /** 虚拟 Group，用于图形更新 */
+  private offscreenGroup: IGroup;
 
   /**
    * 创建 Geometry 实例。
@@ -875,13 +876,13 @@ export default class Geometry extends Base {
    * @override
    */
   public clear() {
-    const { container, labelsRenderer } = this;
+    const { container, geometryLabel } = this;
     if (container) {
       container.clear();
     }
 
-    if (labelsRenderer) {
-      labelsRenderer.clear();
+    if (geometryLabel) {
+      geometryLabel.clear();
     }
 
     // 属性恢复至出厂状态
@@ -910,9 +911,9 @@ export default class Geometry extends Base {
       this.offscreenGroup = null;
     }
 
-    if (this.labelsRenderer) {
-      this.labelsRenderer.destroy();
-      this.labelsRenderer = null;
+    if (this.geometryLabel) {
+      this.geometryLabel.destroy();
+      this.geometryLabel = null;
     }
     super.destroy();
   }
@@ -1176,6 +1177,18 @@ export default class Geometry extends Base {
     return this.elements.map((element: Element) => element.shape);
   }
 
+  /**
+   * 获取虚拟 Group。
+   * @returns
+   */
+  public getOffscreenGroup() {
+    if (!this.offscreenGroup) {
+      const GroupCtor = this.container.getGroupBase(); // 获取分组的构造函数
+      this.offscreenGroup = new GroupCtor({});
+    }
+    return this.offscreenGroup;
+  }
+
   /**
    * 调整度量范围。主要针对发生层叠以及一些特殊需求的 Geometry，比如 Interval 下的柱状图 Y 轴默认从 0 开始。
    */
@@ -1318,34 +1331,25 @@ export default class Geometry extends Base {
     return elements;
   }
 
-  /**
-   * 获取虚拟 Group。
-   * @returns
-   */
-  protected getOffscreenGroup() {
-    if (!this.offscreenGroup) {
-      const GroupCtor = this.container.getGroupBase(); // 获取分组的构造函数
-      this.offscreenGroup = new GroupCtor({});
-    }
-    return this.offscreenGroup;
-  }
-
   /**
    * 获取渲染的 label 类型。
    */
   protected getLabelType(): string {
     const { labelOption, coordinate, type } = this;
     const coordinateType = coordinate.type;
-    let labelType = get(labelOption, ['cfg', 'type']) || 'base';
-    if (labelType === 'base') {
+    let labelType = get(labelOption, ['cfg', 'type']);
+    if (!labelType) {
+      // 用户未定义，则进行默认的逻辑
       if (coordinateType === 'polar') {
-        // 极坐标文本
+        // 极坐标下使用通用的极坐标文本
         labelType = 'polar';
       } else if (coordinateType === 'theta') {
-        // 饼图文本
+        // theta 坐标系下使用饼图文本
         labelType = 'pie';
       } else if (type === 'interval' || type === 'polygon') {
         labelType = 'interval';
+      } else {
+        labelType = 'base';
       }
     }
 
@@ -1803,40 +1807,19 @@ export default class Geometry extends Base {
   }
 
   private renderLabels(mappingArray: MappingDatum[], isUpdate: boolean = false) {
-    const { labelOption, animateOption, coordinate } = this;
-    const labelType = this.getLabelType();
-
-    const GeometryLabelsCtor = getGeometryLabel(labelType);
-    const geometryLabels = new GeometryLabelsCtor(this);
-    const labelItems = geometryLabels.getLabelItems(mappingArray);
-
-    let labelsRenderer = this.labelsRenderer;
-    if (!labelsRenderer) {
-      labelsRenderer = new Labels({
-        container: this.labelsContainer,
-        layout: get(labelOption, ['cfg', 'layout']),
-      });
-      this.labelsRenderer = labelsRenderer;
+    let geometryLabel = this.geometryLabel;
+
+    if (!geometryLabel) {
+      // 初次创建
+      const labelType = this.getLabelType();
+      const GeometryLabelsCtor = getGeometryLabel(labelType);
+      geometryLabel = new GeometryLabelsCtor(this);
+      this.geometryLabel = geometryLabel;
     }
-    labelsRenderer.region = this.canvasRegion;
-
-    const shapes = {};
-    each(this.elementsMap, (element: Element, id: string) => {
-      shapes[id] = element.shape;
-    });
-    // 因为有可能 shape 还在进行动画，导致 shape.getBBox() 获取到的值不是最终态，所以需要从 offscreenGroup 获取
-    each(this.offscreenGroup.getChildren(), (child) => {
-      const id = this.getElementId(child.get('origin').mappingData);
-      shapes[id] = child;
-    });
-
-    // 设置动画配置，如果 geometry 的动画关闭了，那么 label 的动画也会关闭
-    labelsRenderer.animate = animateOption ? getDefaultAnimateCfg('label', coordinate) : false;
-
-    // 渲染文本
-    labelsRenderer.render(labelItems, shapes, isUpdate);
+    geometryLabel.render(mappingArray, isUpdate);
 
-    const labelsMap = this.labelsRenderer.shapesMap;
+    // 将 label 同 element 进行关联
+    const labelsMap = geometryLabel.labelsRenderer.shapesMap;
     each(this.elementsMap, (element: Element, id) => {
       const labels = filterLabelsById(id, labelsMap); // element 实例同 label 进行绑定
       element.labelShape = labels;