noodleslove commented on issue #21672:
URL: https://github.com/apache/echarts/issues/21672#issuecomment-5879384504
I'd like to work on this. Before opening a PR, I wanted to check whether
this API shape looks acceptable.
### Current behavior
Toolbox icons have two style buckets, `iconStyle` (normal) and
`emphasis.iconStyle` (hover). There is no third one for "currently active".
When a magicType button is clicked, `setIconStatus(type, 'emphasis')` puts the
icon into the hover state and `mouseout` keeps it there (`ToolboxView.ts`), so
the active icon always uses the hover style. The same mechanism marks the
active buttons of the `dataZoom` feature (`zoom`, `back`) and the `brush`
feature (the active brush type, `keep`, `clear`), so any change should cover
all three, not just magicType.
### Proposal: `select.iconStyle`
ECharts already has a `select` display state with `enterSelect` /
`leaveSelect` helpers, and `iconStatus` is already typed as `DisplayState`. So
the smallest consistent addition is a `select` bucket next to `emphasis`,
available at toolbox level and per feature:
```js
toolbox: {
feature: {
magicType: {
type: ['line', 'bar'],
iconStyle: { borderColor: '#333333' }, // inactive
emphasis: { iconStyle: { borderColor: '#0FBF98' } }, // hover,
unchanged
select: { iconStyle: { borderColor: '#0FBF98' } } // active type,
new
}
}
}
```
Implementation sketch:
- `ToolboxModel.ts` / `featureManager.ts`: add `select?: { iconStyle?: ...
}` to the option types.
- `ToolboxView.ts`: create a `select` state on each icon from
`select.iconStyle`; make `setIconStatus` map `'select'` to `enterSelect` /
`leaveSelect`; on `mouseout` leave `emphasis` without touching `select`.
Hovering an active icon layers `emphasis` on top of `select`, the same as
series items.
- `MagicType.ts`, `DataZoom.ts`, `Brush.ts`: mark active icons with
`'select'` instead of `'emphasis'`.
- Docs in `apache/echarts-doc` (en + zh), an HTML case under `test/`, and a
unit test.
**Backward compatibility:** when `select.iconStyle` is not specified, fall
back to `emphasis.iconStyle`. Existing charts, including ones that customized
`emphasis.iconStyle` expecting it to color the active button, render exactly as
today. Only users who set `select` see a difference.
### Two smaller points
- The per-type form from the issue, `iconStyle: { line: {...}, bar: {...}
}`, would collide with the existing `iconStyle` shape, whose keys are style
properties (`color`, `borderColor`, ...). So this proposal uses the second form
instead.
- Preselecting a type at init is a separate question. Nothing is active
until the first click today, though the undocumented `iconStatus` option (e.g.
`iconStatus: { bar: 'emphasis' }`) already does this. I'd keep it out of this
change; it could be documented separately or inferred from the series later.
If this direction is acceptable I'm happy to open the PR.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
