Fix/type of text

common/changes/@visactor/vchart/fix-type-of-text_2025-02-12-07-55.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: fix the type definition of text mark\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "[email protected]"
+}

docs/assets/option/en/component/label.md

@@ -367,8 +367,42 @@ const layout = (attribute, text, getRelatedGraphic) => {
 Custom label avoidance function. Supported since version `1.3.0`.
 
 When `customOverlapFunc` is configured, and if `customLayoutFunc` is not also configured, it will initially perform a layout based on position and offset before entering the custom avoidance logic. The configured overlap prevention logic (`overlap`) will not take effect.
+The type definition of the function is as follows, where the last parameter `labelComponent` is supported since version `1.13.5`, and it returns the label component instance.
 
-The function callback parameter is: `(label: Text[], getRelatedGraphic: (data: LabelItem) => IGraphic) => Text[]`
+```ts
+(
+  /**
+   * The graphic node corresponding to the label, which may be a text graphic or a rich text graphic, generated according to the configuration.
+   */
+  label: (IText | IRichText)[],
+  /**
+   * Get the graphic associated with the data corresponding to the label, suitable for scenarios such as displaying bar labels, scatter labels, etc.
+   */
+  getRelatedGraphic: (data: LabelItem) => IGraphic,
+  /**
+   * Get the point coordinates associated with the data corresponding to the label, suitable for scenarios such as displaying labels corresponding to line chart elements, area chart elements, etc.
+   */
+  getRelatedPoint: ((data: LabelItem) => IPointLike) | null | undefined,
+  /**
+   * Label component instance
+   */
+  labelComponent: IGroup
+  ) => (IText | IRichText)[];
+```
+
+#${prefix} onAfterOverlapping(function)
+Callback function after overlap calculation is completed. Supported since version `1.3.5`.
+
+The type definition of the function is as follows, with parameters defined the same as `customOverlapFunc`:
+
+```ts
+(
+    label: (IText | IRichText)[],
+    getRelatedGraphic: (data: LabelItem) => IGraphic,
+    getRelatedPoint: ((data: LabelItem) => IPointLike) | null | undefined,
+    labelComponent: IGroup
+  ) => (IText | IRichText)[];
+```
 
 {{ /if }}
 

docs/assets/option/zh/component/label.md

@@ -367,7 +367,42 @@ const layout = (attribute, text, getRelatedGraphic) => {
 
 当配置了 customOverlapFunc 后，若未配置`customLayoutFunc`，会根据 position 和 offset 进行初始布局后，进入自定义躲避逻辑。同时配置的防重叠逻辑(overlap)不生效。
 
-函数回调参数为：`(label: Text[], getRelatedGraphic: (data: LabelItem) => IGraphic) => Text[];`
+函数的类型定义如下，其中最后一个参数`labelComponent` 是从`1.13.5`版本开始支持，返回的是标签组件实例
+
+```ts
+(
+    /**
+     * 标签对应的图形节点，可能是文本图形，也可能是富文本图形，根据配置生成
+     */
+    label: (IText | IRichText)[],
+    /**
+     * 获取标签对应的数据获取关联的图形，适用于展示柱子标签、散点标签等场景
+     */
+    getRelatedGraphic: (data: LabelItem) => IGraphic,
+    /**
+     * 获取标签对应的数据获取关联的点坐标，适用于展示线图元、面积图元对应标签的场景
+     */
+    getRelatedPoint: ((data: LabelItem) => IPointLike) | null | undefined,
+    /**
+     * 标签组件实例
+     */
+    labelComponent: IGroup
+  ) => (IText | IRichText)[];
+```
+
+#${prefix} onAfterOverlapping(function)
+防重叠计算完成后的回调函数。自`1.3.5`版本开始支持。
+
+函数的类型定义如下，参数定义同`customOverlapFunc`:
+
+```ts
+(
+    label: (IText | IRichText)[],
+    getRelatedGraphic: (data: LabelItem) => IGraphic,
+    getRelatedPoint: ((data: LabelItem) => IPointLike) | null | undefined,
+    labelComponent: IGroup
+  ) => (IText | IRichText)[];
+```
 
 {{ /if }}
 

packages/vchart/src/component/label/interface.ts

@@ -82,6 +82,11 @@ export interface ILabelSpec extends IComponentSpec, ILabelAnimationSpec {
    * @since 1.3.0
    */
   customOverlapFunc?: BaseLabelAttrs['customOverlapFunc'];
+  /**
+   * 防重叠计算完成后的回调函数
+   * @since 1.13.5
+   */
+  onAfterOverlapping?: BaseLabelAttrs['onAfterOverlapping'];
   /**
    * 标签布局
    */

packages/vchart/src/core/index.ts

@@ -36,4 +36,14 @@ export * from '../typings/tooltip';
 export * from '../theme/index';
 
 // vrender
-export { vglobal } from '@visactor/vrender-core';
+export {
+  vglobal,
+  createGroup,
+  createRichText,
+  createText,
+  createArc,
+  createArea,
+  createRect,
+  createLine,
+  createSymbol
+} from '@visactor/vrender-core';

packages/vchart/src/series/pictogram/pictogram.ts

@@ -201,10 +201,10 @@ export class PictogramSeries<T extends IPictogramSeriesSpec = IPictogramSeriesSp
     this.setMarkStyle(
       this._labelMark,
       {
-        visible: d => !!this._validElement(d as SVGParsedElementExtend),
-        x: d => this.dataToPosition(d, true)?.x,
-        y: d => this.dataToPosition(d, true)?.y,
-        text: d => d[this.nameField],
+        visible: (d: Datum) => !!this._validElement(d as SVGParsedElementExtend),
+        x: (d: Datum) => this.dataToPosition(d, true)?.x,
+        y: (d: Datum) => this.dataToPosition(d, true)?.y,
+        text: (d: Datum) => d[this.nameField],
         textAlign: 'center',
         textBaseline: 'middle'
       },

packages/vchart/src/series/sunburst/sunburst.ts

@@ -288,7 +288,7 @@ export class SunburstSeries extends PolarSeries<any> {
     this.setMarkStyle(
       this._labelMark,
       {
-        visible: d => {
+        visible: (d: Datum) => {
           // 自动隐藏密集标签逻辑.
           const labelAutoVisible = this._labelAutoVisible;
 
@@ -300,11 +300,11 @@ export class SunburstSeries extends PolarSeries<any> {
           }
           return this._spec.label.visible;
         },
-        x: d => d.label?.x + (isValid(this._offsetX) ? this._offsetX : 0),
-        y: d => d.label?.y + (isValid(this._offsetY) ? this._offsetY : 0),
-        textBaseline: d => d.label?.textBaseline,
-        textAlign: d => d.label?.textAlign,
-        angle: d => d.label?.angle ?? 0,
+        x: (d: Datum) => d.label?.x + (isValid(this._offsetX) ? this._offsetX : 0),
+        y: (d: Datum) => d.label?.y + (isValid(this._offsetY) ? this._offsetY : 0),
+        textBaseline: (d: Datum) => d.label?.textBaseline,
+        textAlign: (d: Datum) => d.label?.textAlign,
+        angle: (d: Datum) => d.label?.angle ?? 0,
         fontSize: 10,
         text: (d: Datum) => d.name
       },

packages/vchart/src/typings/visual.ts

@@ -417,11 +417,11 @@ export interface ITextMarkSpec extends IFillMarkSpec {
    */
   fontSize?: number | ITokenKey;
   /**
-   * 文字对齐方式
+   * 文字水平方向的对齐方式
    */
   textAlign?: TextAlign;
   /**
-   * 文字居中方式
+   * 文字竖直方向的对齐方式
    */
   textBaseline?: TextBaseLine;
   /**
@@ -433,7 +433,7 @@ export interface ITextMarkSpec extends IFillMarkSpec {
    */
   fontWeight?: FontWeight;
   /**
-   * 字体样式
+   * 字体样式，是否为斜体等
    */
   fontStyle?: FontStyle;
   /**
@@ -457,6 +457,14 @@ export interface ITextMarkSpec extends IFillMarkSpec {
    * 下划线
    */
   underline?: boolean;
+  /**
+   * 下划线的虚线样式
+   */
+  underlineDash?: number[];
+  /**
+   * 下划线的虚线偏移量
+   */
+  underlineOffset?: number;
   /**
    * 中划线
    */
@@ -475,6 +483,22 @@ export interface ITextMarkSpec extends IFillMarkSpec {
    * @default 'horizontal'
    */
   direction?: 'horizontal' | 'vertical';
+  /*
+   * 单词断行
+   */
+  wordBreak?: 'break-word' | 'break-all' | 'keep-all';
+  /**
+   * 高度限制控制显示内容及省略号
+   */
+  heightLimit?: number;
+  /**
+   * 按照行数限制显示内容及省略号
+   */
+  lineClamp?: number;
+  /**
+   * 设置如何处理空白字符
+   */
+  whiteSpace?: 'normal' | 'no-wrap';
 }
 
 export type IRichTextMarkSpec = IRichTextAttribute &