fix(toolbox): fix icon emphasis status not keep when selected.

src/component/toolbox/ToolboxView.ts

@@ -143,8 +143,9 @@ class ToolboxView extends ComponentView {
                 const iconPaths = this.iconPaths;
                 option.iconStatus = option.iconStatus || {};
                 option.iconStatus[iconName] = status;
-                // FIXME
-                iconPaths[iconName] && iconPaths[iconName].trigger(status);
+                if (iconPaths[iconName]) {
+                    graphic[status === 'emphasis' ? 'enterEmphasis' : 'leaveEmphasis'](iconPaths[iconName]);
+                }
             };
 
             if (feature instanceof ToolboxFeature) {
@@ -240,31 +241,40 @@ class ToolboxView extends ComponentView {
                     }, tooltipModel.option);
                 }
 
-                graphic.enableHoverEmphasis(path);
-
-                if (toolboxModel.get('showTitle')) {
-                    (path as ExtendedPath).__title = titlesMap[iconName];
-                    (path as graphic.Path).on('mouseover', function () {
-                        // Should not reuse above hoverStyle, which might be modified.
-                        const hoverStyle = iconStyleEmphasisModel.getItemStyle();
-                        const defaultTextPosition = toolboxModel.get('orient') === 'vertical'
-                            ? (toolboxModel.get('right') == null ? 'right' as const : 'left' as const)
-                            : (toolboxModel.get('bottom') == null ? 'bottom' as const : 'top' as const);
-                        textContent.setStyle({
-                            fill: (iconStyleEmphasisModel.get('textFill')
-                                || hoverStyle.fill || hoverStyle.stroke || '#000') as string,
-                            backgroundColor: iconStyleEmphasisModel.get('textBackgroundColor')
-                        });
-                        path.setTextConfig({
-                            position: iconStyleEmphasisModel.get('textPosition') || defaultTextPosition
-                        });
-                        textContent.ignore = false;
-                    })
-                    .on('mouseout', function () {
-                        textContent.ignore = true;
+                // graphic.enableHoverEmphasis(path);
+
+                (path as ExtendedPath).__title = titlesMap[iconName];
+                (path as graphic.Path).on('mouseover', function () {
+                    // Should not reuse above hoverStyle, which might be modified.
+                    const hoverStyle = iconStyleEmphasisModel.getItemStyle();
+                    const defaultTextPosition = toolboxModel.get('orient') === 'vertical'
+                        ? (toolboxModel.get('right') == null ? 'right' as const : 'left' as const)
+                        : (toolboxModel.get('bottom') == null ? 'bottom' as const : 'top' as const);
+                    textContent.setStyle({
+                        fill: (iconStyleEmphasisModel.get('textFill')
+                            || hoverStyle.fill || hoverStyle.stroke || '#000') as string,
+                        backgroundColor: iconStyleEmphasisModel.get('textBackgroundColor')
                     });
-                }
-                path.trigger(featureModel.get(['iconStatus', iconName]) || 'normal');
+                    path.setTextConfig({
+                        position: iconStyleEmphasisModel.get('textPosition') || defaultTextPosition
+                    });
+                    textContent.ignore = !toolboxModel.get('showTitle');
+
+                    // Use enterEmphasis and leaveEmphasis provide by ec.
+                    // There are flags managed by the echarts.
+                    graphic.enterEmphasis(this);
+                })
+                .on('mouseout', function () {
+                    if (featureModel.get(['iconStatus', iconName]) !== 'emphasis') {
+                        graphic.leaveEmphasis(this);
+                    }
+                    textContent.hide();
+                });
+
+                graphic[
+                    featureModel.get(['iconStatus', iconName]) === 'emphasis'
+                    ? 'enterEmphasis' : 'leaveEmphasis'
+                ](path);
 
                 group.add(path);
                 (path as graphic.Path).on('click', zrUtil.bind(

src/echarts.ts

@@ -1668,10 +1668,10 @@ class ECharts extends Eventful {
         ): void {
             each(dirtyList || ecIns._componentsViews, function (componentView: ComponentView) {
                 const componentModel = componentView.__model;
-                componentView.render(componentModel, ecModel, api, payload);
-
                 clearStates(componentModel, componentView);
 
+                componentView.render(componentModel, ecModel, api, payload);
+
                 updateZ(componentModel, componentView);
                 updateHoverEmphasisHandler(componentView);