[Feat] Add autoHighlightBlending prop to Layer
@felixpalmer is already working on this.
Since Dec 11, 2024.
- Dominant language
- TypeScript
- Stars
- 14.6k
- Forks
- 2.3k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 42
Description
Target Use Case
Currently the picking module always blends the alpha of autohighlightColor with the alpha of the fragment. Layers with partial transparency thus end up with an ugly aliased outline, in particular this is obvious with IconLayer (but also ScatterplotLayer)
https://github.com/user-attachments/assets/ec01155c-de89-492c-a0b8-ea09f96a0b6c
Proposal
The luma picking module is enhanced with a new prop, blendHighlightAlpha. It defaults to 'normal' to maintain existing behavior, but when it is 'src' the fragment color is blended as before, but the alpha is unchanged.
The Layer class adds a new prop, autoHighlightBlending (also defaulting to 'normal'), with select layers (like IconLayer) changing the default to 'src'.
Why add a new prop?
The highlightColor prop supports both RGB & RGBA colors, so in theory we could only apply 'normal' blending when an RGBA highlightColor is used, and use 'src' with RGB.
However there is value in allowing the user to explicitly use the autoHighlightBlending prop to support different behaviors:
highlightColor |
autoHighlightBlending |
behavior |
|---|---|---|
[255, 0, 0, 255] |
'normal' |
Replace all pixels with red (current behavior) |
[255, 0, 0, 255] |
'src' |
Tint all pixels red, while preserving transparency |
[255, 255, 255, 128] |
'src' |
Lighten all pixels, while preserving transparency |
[0, 0, 0, 128] |
'src' |
Darken all pixels, while preserving transparency |
The prop is defined as a string constant in order to allow future expansion, for example 'multiply' could compute the output alpha as color.a * picking.highlightColor.a to allow for fading (not sure if this is useful).
Tint all pixels, while preserving transparency
https://github.com/user-attachments/assets/98cfb6ea-cf5c-4f33-9eee-ca3163e9a5f0
Lighten all pixels, while preserving transparency
https://github.com/user-attachments/assets/58ea0aa1-913d-4d94-b528-2c3478b8a0ad
Darken all pixels, while preserving transparency
https://github.com/user-attachments/assets/1728ee86-9102-4859-a2bf-c7421985ccf9
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.