Fix/tag padding

common/changes/@visactor/vrender-components/fix-tag-padding_2024-01-09-12-17.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "fix: `measureTextSize` needs to take into account the fonts configured on the stage theme",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

common/changes/@visactor/vrender-core/fix-tag-padding_2024-01-09-12-17.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-core",
+      "comment": "fix: supply the `getTheme()` api for `IStage`",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-core"
+}

packages/vrender-components/src/axis/line.ts

@@ -532,7 +532,7 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
     const axisLineWidth = line && line.visible ? line.style.lineWidth ?? 1 : 0;
     const tickLength = tick && tick.visible ? tick.length ?? 4 : 0;
     if (title && title.visible && typeof title.text === 'string') {
-      titleHeight = measureTextSize(title.text, title.textStyle).height;
+      titleHeight = measureTextSize(title.text, title.textStyle, this.stage?.getTheme().text.fontFamily).height;
       const padding = normalizePadding(title.padding);
       titleSpacing = title.space + padding[0] + padding[2];
     }

packages/vrender-components/src/indicator/indicator.ts

@@ -193,7 +193,8 @@ export class Indicator extends AbstractComponent<Required<IndicatorAttributes>>
     }
     const originWidth = measureTextSize(
       (indicatorItemSpec.style?.text ?? '') as string | number | number[] | string[],
-      (indicatorItemSpec.style ?? {}) as Partial<ITextGraphicAttribute>
+      (indicatorItemSpec.style ?? {}) as Partial<ITextGraphicAttribute>,
+      this.stage?.getTheme().text.fontFamily
     ).width;
     if (originWidth > 0) {
       const ratio = (limit * (indicatorItemSpec.fitPercent ?? 0.5)) / originWidth;

packages/vrender-components/src/pager/pager.ts

@@ -102,11 +102,15 @@ export class Pager extends AbstractComponent<Required<PagerAttributes>> {
     container.add(preHandler);
 
     // 获取文本的最大长度，如果不固定的话随着文本的变化整体会发生抖动
-    const { width: maxTextWidth, height: maxTextHeight } = measureTextSize(`${total}/${total}`, {
-      textAlign: 'center',
-      textBaseline: 'middle',
-      ...textStyle
-    });
+    const { width: maxTextWidth, height: maxTextHeight } = measureTextSize(
+      `${total}/${total}`,
+      {
+        textAlign: 'center',
+        textBaseline: 'middle',
+        ...textStyle
+      },
+      this.stage?.getTheme().text.fontFamily
+    );
 
     const handlerSizeX = isNumber(handlerSize) ? handlerSize : handlerSize[0];
     const handlerSizeY = isNumber(handlerSize) ? handlerSize : handlerSize[1];

packages/vrender-components/src/tag/tag.ts

@@ -182,7 +182,7 @@ export class Tag extends AbstractComponent<Required<TagAttributes>> {
       }
 
       // 因为文本可能发生旋转，所以需要使用 measureTextSize 方法
-      const textBounds = measureTextSize(textAttrs.text as string, textStyle);
+      const textBounds = measureTextSize(textAttrs.text as string, textStyle, this.stage?.getTheme().text.fontFamily);
       const textWidth = textBounds.width;
       const textHeight = textBounds.height;
       tagWidth += textWidth;

packages/vrender-components/src/util/text.ts

@@ -26,13 +26,17 @@ export const initTextMeasure = (
 };
 
 // FIXME: 和上一个方法统一，使用 TextMeasure 类
-export function measureTextSize(text: string | number | string[] | number[], textSpec: Partial<ITextGraphicAttribute>) {
+export function measureTextSize(
+  text: string | number | string[] | number[],
+  textSpec: Partial<ITextGraphicAttribute>,
+  fontFamily: string = DEFAULT_TEXT_FONT_FAMILY
+) {
   if (!text) {
     return { width: 0, height: 0 };
   }
   const bounds = getTextBounds({
     text,
-    fontFamily: textSpec.fontFamily,
+    fontFamily: textSpec.fontFamily ?? fontFamily,
     fontSize: textSpec.fontSize || 12,
     fontWeight: textSpec.fontWeight as any,
     textAlign: textSpec.textAlign ?? 'center',

packages/vrender-core/src/interface/stage.ts

@@ -1,9 +1,7 @@
 import type { INode } from './node-tree';
 import type { ILayer, LayerMode } from './layer';
-import type { IGraphic } from './graphic';
-import type { IGroup } from './graphic/group';
 import type { IColor } from './color';
-import type { IAABBBounds, IBounds, IBoundsLike, IMatrix, IPointLike } from '@visactor/vutils';
+import type { IAABBBounds, IBounds, IBoundsLike, IMatrix } from '@visactor/vutils';
 import type { ICamera } from './camera';
 import type { vec3 } from './matrix';
 import type { IDirectionLight } from './light';
@@ -14,6 +12,7 @@ import type { IPickerService, PickResult } from './picker';
 import type { IPluginService } from './plugin';
 import type { IWindow } from './window';
 import type { ILayerService } from './core';
+import type { IFullThemeSpec } from './graphic/theme';
 
 export type IExportType = 'canvas' | 'imageData';
 
@@ -209,6 +208,8 @@ export interface IStage extends INode {
   setStage: (stage?: IStage) => void;
 
   setCursor: (mode?: string) => void;
+
+  getTheme: () => IFullThemeSpec;
 }
 
 export declare function combineStage(srages: IStage[], params: { canvas: string | HTMLCanvasElement }): IStage;