Merge pull request #19170 from apache/fix/toolbox/font

fix(toolbox): fix toolbox text can't apply the specified or global font style
apache · Oct 4, 2023 · 4a3d090 · 4a3d090
2 parents d08664f + 0508353
commit 4a3d090
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 22 deletions.
diff --git a/src/component/toolbox/ToolboxView.ts b/src/component/toolbox/ToolboxView.ts
@@ -39,6 +39,7 @@ import {
 import { getUID } from '../../util/component';
 import Displayable from 'zrender/src/graphic/Displayable';
 import ZRText from 'zrender/src/graphic/Text';
+import { getFont } from '../../label/labelStyle';
 
 type IconPath = ToolboxFeatureModel['iconPaths'][string];
 
@@ -217,13 +218,20 @@ class ToolboxView extends ComponentView {
                 pathEmphasisState.style = iconStyleEmphasisModel.getItemStyle();
 
                 // Text position calculation
+                // TODO: extract `textStyle` from `iconStyle` and use `createTextStyle`
                 const textContent = new ZRText({
                     style: {
                         text: titlesMap[iconName],
                         align: iconStyleEmphasisModel.get('textAlign'),
                         borderRadius: iconStyleEmphasisModel.get('textBorderRadius'),
                         padding: iconStyleEmphasisModel.get('textPadding'),
-                        fill: null
+                        fill: null,
+                        font: getFont({
+                            fontStyle: iconStyleEmphasisModel.get('textFontStyle'),
+                            fontFamily: iconStyleEmphasisModel.get('textFontFamily'),
+                            fontSize: iconStyleEmphasisModel.get('textFontSize'),
+                            fontWeight: iconStyleEmphasisModel.get('textFontWeight')
+                        }, ecModel)
                     },
                     ignore: true
                 });

diff --git a/src/component/toolbox/featureManager.ts b/src/component/toolbox/featureManager.ts
@@ -33,6 +33,10 @@ type IconStyle = ItemStyleOption & {
     textAlign?: LabelOption['align']
     textBorderRadius?: LabelOption['borderRadius']
     textPadding?: LabelOption['padding']
+    textFontFamily?: LabelOption['fontFamily']
+    textFontSize?: LabelOption['fontSize']
+    textFontWeight?: LabelOption['fontWeight']
+    textFontStyle?: LabelOption['fontStyle']
 };
 export interface ToolboxFeatureOption {
 

diff --git a/test/toolbox-textStyle.html b/test/toolbox-textStyle.html