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

[noodleslove]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Add select.iconStyle to toolbox and its features, so that the icons that are toggled on can be styled separately from the hovered ones.

Fixed issues

• Add selected state style for toolbox magicType buttons #21672: Add selected state style for toolbox magicType buttons

Details

Before: What was the problem?

Toolbox icons only have two styles, iconStyle and emphasis.iconStyle. The icons that are toggled on, such as the current type of magicType, are displayed by keeping them in the emphasis state. So they always look the same as the hovered icons and can not be styled separately.

After: How does it behave after the fixing?

select.iconStyle can be specified on toolbox and on each feature. The feature one overrides the toolbox one.

toolbox: {
    iconStyle: { borderColor: '#333' },
    emphasis: { iconStyle: { borderColor: 'orange' } },
    // For all of the features.
    select: { iconStyle: { borderColor: 'green' } },
    feature: {
        magicType: {
            type: ['line', 'bar', 'stack'],
            // Only for magicType.
            select: { iconStyle: { borderColor: 'red' } }
        },
        dataZoom: {},
        brush: {}
    }
}

The icons that are toggled on are in the select state instead of the emphasis state:

Feature	Icons
magicType	line, bar, stack
dataZoom	zoom
brush	rect, polygon, lineX, lineY, keep

When a selected icon is hovered, the emphasis style is applied on top of the select style, the same as series.

Backward compatibility

• No default value is added for select.iconStyle. If it is not specified on either the feature or the toolbox, emphasis.iconStyle is used. So the existing charts are displayed the same as before, including the ones that customized emphasis.iconStyle.
• iconStatus: { xxx: 'emphasis' } specified in the option still works, and is cleared when another icon in the same group is clicked.

Document Info

One of the following should be checked.

• This PR doesn't relate to document changes
• The document should be updated later
• The document changes have been made in apache/echarts-doc#xxx

Misc

Security Checking

• This PR uses security-sensitive Web APIs.

ZRender Changes

• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

• test/toolbox-select-iconStyle.html
• test/ut/spec/component/toolbox/iconStatus.test.ts

Merging options

• Please squash the commits into a single one when merging.

Other information

Some decisions that I would like to be reviewed:

1. back of dataZoom and clear of brush still use the emphasis state. They are not toggles. The highlight indicates that they are available, so the select style does not seem to fit them. This is narrower than what I described in the issue.
2. The values in iconStatus of the icons toggled on become 'select' instead of 'emphasis'. iconStatus is not documented, but this is visible in the result of getOption().
3. Selecting an icon by default on the initial render is not included, which is also asked in the issue. iconStatus: { bar: 'select' } can be used for that currently. Whether magicType should infer it from the series can be discussed separately.

A known issue that is not related to this PR: the icon clear of brush is not updated until the next full update. For example, it stays highlighted after clicked. It can be reproduced on master, and is tracked in #21771.

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Please DO NOT commit the files in dist, i18n, and ssr/client/dist folders in a non-release pull request. These folders are for release use only.

Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the PR: awaiting doc label.