[Feature] Add blur/unselect state for selections
What problem does this feature solve?
Use case
I'd like to mute other marks when an individual or multiple marks are selected to visually distinguish selected & unselected marks more prominently. While there is a select customization state, there is no way to customize the unselected slices during selection.
Example Experience
https://github.com/user-attachments/assets/f7fe70c9-acb7-4a69-9b0b-f00134a301ae
Current Workaround
- dispatch select action to trigger the select state & styles
- after dispatching customize styles through accessing the graphics elements on the next tick (w/ requestAnimationFrame)
// first dispatch select
chart.dispatchAction({
type: 'select',
dataIndex: dataIndexes,
});
// then apply customizations to selected and unselected marks
requestAnimationFrame(() => {
const series = chart.getModel().getSeriesByIndex(0);
const data = series.getData();
data.eachItemGraphicEl((graphic, index) => {
graphic.setStyle({
opacity: dataIndexes.includes(index)
? HIGHLIGHT_OPACITY
: HIGHLIGHT_OPACITY_MUTED,
});
});
});
Initially I tried a combination of dispatching highlight & select to show the emphasis state for selected marks however as soon as I hovered over a different mark the selected mark would no longer be emphasized.
Open Questions
Is there a better way to do this without customizing on the renderer level?
If no, is there an API to know when a dispatched action has been applied internally? I have not found any and
listening for the last rendered or finished event after dispatching an action turned out to not be feasible as the render delay was to long. Directly applying style customizations after dispatching the action (without waiting for the next tick) expectedly led to render inconsistencies
What does the proposed API look like?
I can think of 2 ways to surface this:
- Apply blur styles on marks that are not selected when selection happens
- Introduce a new
unselectstate supporting anitemStyleconfiguration that would be applied to items that are not selected during selection
1 would be a breaking change so probably not feasible, 2 would be additive but expand the API surface