feat(toolbox): support select.iconStyle for the icons toggled on. close #21672

src/component/toolbox/ToolboxModel.ts

@@ -75,6 +75,15 @@ export interface ToolboxOption extends
         iconStyle?: ItemStyleOption
     }
 
+    /**
+     * The style of the icons in `select` status, that is, the icons that are currently
+     * toggled on, such as the icon of the current type in `magicType`.
+     * If not specified, `emphasis.iconStyle` is used.
+     */
+    select?: {
+        iconStyle?: ItemStyleOption
+    }
+
     textStyle?: LabelOption
 
     tooltip?: CommonTooltipOption<ToolboxTooltipFormatterParams>

src/component/toolbox/ToolboxView.ts

@@ -19,7 +19,7 @@
 
 import * as textContain from 'zrender/src/contain/text';
 import * as graphic from '../../util/graphic';
-import { enterEmphasis, leaveEmphasis } from '../../util/states';
+import { enterEmphasis, leaveEmphasis, enterSelect, leaveSelect } from '../../util/states';
 import Model from '../../model/Model';
 import DataDiffer from '../../data/DataDiffer';
 import * as listComponentHelper from '../helper/listComponent';
@@ -169,7 +169,7 @@ class ToolboxView extends ComponentView {
                 option.iconStatus = option.iconStatus || {};
                 option.iconStatus[iconName] = status;
                 if (iconPaths[iconName]) {
-                    (status === 'emphasis' ? enterEmphasis : leaveEmphasis)(iconPaths[iconName]);
+                    applyIconStatus(iconPaths[iconName], status);
                 }
             };
 
@@ -185,6 +185,12 @@ class ToolboxView extends ComponentView {
         ) {
             const iconStyleModel = featureModel.getModel('iconStyle');
             const iconStyleEmphasisModel = featureModel.getModel(['emphasis', 'iconStyle']);
+            // `select.iconStyle` is optional. If it is not specified on either the feature or the toolbox,
+            // use `emphasis.iconStyle`. That keeps the backward compatibility, since the icons toggled on
+            // were previously displayed in emphasis state.
+            const iconStyleSelectModel = featureModel.get(['select', 'iconStyle']) != null
+                ? featureModel.getModel(['select', 'iconStyle'])
+                : iconStyleEmphasisModel;
 
             // If one feature has multiple icons, they are organized as
             // {
@@ -233,6 +239,9 @@ class ToolboxView extends ComponentView {
                 const pathEmphasisState = path.ensureState('emphasis');
                 pathEmphasisState.style = iconStyleEmphasisModel.getItemStyle();
 
+                const pathSelectState = path.ensureState('select');
+                pathSelectState.style = iconStyleSelectModel.getItemStyle();
+
                 // Text position calculation
                 // TODO: extract `textStyle` from `iconStyle` and use `createTextStyle`
                 const textContent = new ZRText({
@@ -297,7 +306,7 @@ class ToolboxView extends ComponentView {
                     }
                     textContent.hide();
                 });
-                (featureModel.get(['iconStatus', iconName]) === 'emphasis' ? enterEmphasis : leaveEmphasis)(path);
+                applyIconStatus(path, featureModel.get(['iconStatus', iconName]));
 
                 group.add(path);
                 (path as graphic.Path).on('click', bind(
@@ -396,6 +405,15 @@ class ToolboxView extends ComponentView {
 }
 
 
+/**
+ * `'select'` represents that the icon is toggled on. `'emphasis'` is also supported as a status,
+ * which was used for that purpose previously and can still be specified by users.
+ */
+function applyIconStatus(iconPath: IconPath, status: DisplayState | NullUndefined): void {
+    (status === 'emphasis' ? enterEmphasis : leaveEmphasis)(iconPath);
+    (status === 'select' ? enterSelect : leaveSelect)(iconPath);
+}
+
 function isUserFeatureName(featureName: string): boolean {
     return featureName.indexOf('my') === 0;
 }

src/component/toolbox/feature/Brush.ts

@@ -63,13 +63,12 @@ class BrushFeature extends ToolboxFeature<ToolboxBrushFeatureOption> {
         zrUtil.each(featureModel.get('type', true), function (type) {
             featureModel.setIconStatus(
                 type,
-                (
-                    type === 'keep'
-                    ? brushMode === 'multiple'
-                    : type === 'clear'
-                    ? isBrushed
-                    : type === brushType
-                ) ? 'emphasis' : 'normal'
+                type === 'clear'
+                    // The clear button is not a toggle. The emphasis indicates that it is available.
+                    ? (isBrushed ? 'emphasis' : 'normal')
+                    : (type === 'keep' ? brushMode === 'multiple' : type === brushType)
+                    ? 'select'
+                    : 'normal'
             );
         });
     }

src/component/toolbox/feature/DataZoom.ts

@@ -277,6 +277,7 @@ function updateBackBtnStatus(
     featureModel: ToolboxDataZoomFeatureModel,
     ecModel: GlobalModel
 ) {
+    // The back button is not a toggle. The emphasis indicates that it is available.
     featureModel.setIconStatus(
         'back',
         history.count(ecModel) > 1 ? 'emphasis' : 'normal'
@@ -299,7 +300,7 @@ function updateZoomBtnStatus(
 
     view._isZoomActive = zoomActive;
 
-    featureModel.setIconStatus('zoom', zoomActive ? 'emphasis' : 'normal');
+    featureModel.setIconStatus('zoom', zoomActive ? 'select' : 'normal');
 
     const brushTargetManager = new BrushTargetManager(
         makeAxisFinder(featureModel),

src/component/toolbox/feature/MagicType.ts

@@ -143,7 +143,7 @@ class MagicType extends ToolboxFeature<ToolboxMagicTypeFeatureOption> {
             }
         });
 
-        model.setIconStatus(type, 'emphasis');
+        model.setIconStatus(type, 'select');
 
         ecModel.eachComponent(
             {
@@ -166,7 +166,7 @@ class MagicType extends ToolboxFeature<ToolboxMagicTypeFeatureOption> {
                 tiled: model.option.title.stack
             }, model.option.title);
 
-            if (model.get(['iconStatus', type]) !== 'emphasis') {
+            if (model.get(['iconStatus', type]) !== 'select') {
                 currentType = 'tiled';
             }
         }
@@ -226,7 +226,7 @@ const seriesOptGenreator: Record<IconType, SeriesOptGenreator> = {
     'stack': function (seriesType, seriesId, seriesModel, model) {
         const isStack = seriesModel.get('stack') === INNER_STACK_KEYWORD;
         if (seriesType === 'line' || seriesType === 'bar') {
-            model.setIconStatus('stack', isStack ? 'normal' : 'emphasis');
+            model.setIconStatus('stack', isStack ? 'normal' : 'select');
             return zrUtil.merge({
                 id: seriesId,
                 stack: isStack ? '' : INNER_STACK_KEYWORD

src/component/toolbox/featureManager.ts

@@ -50,6 +50,14 @@ export interface ToolboxFeatureOption {
     emphasis?: {
         iconStyle?: IconStyle
     }
+    /**
+     * The style of the icons in `select` status, that is, the icons that are currently
+     * toggled on, such as the icon of the current type in `magicType`.
+     * If not specified, `emphasis.iconStyle` is used.
+     */
+    select?: {
+        iconStyle?: ItemStyleOption
+    }
 
     iconStatus?: Partial<Dictionary<DisplayState>>