Use none to avoid hit detection of text fills #14992
Conversation
changelog/upgrade-notes.md
Outdated
| @@ -4,7 +4,7 @@ | |||
|
|
|||
| #### Hit detection with Text fill | |||
|
|
|||
| Hit detection of fill for Text styles is now consistent with that for Circle and RegularShape styles. Transparent `fill` and `backgroundFill` is detected, with no hit detection over unfilled shapes. To get the previous behavior in Text styles where a transparent fill may have been used to avoid the default fill specify `fill: null`. If using FlatStyle notation specify `'text-fill-color': null`. | |||
| Hit detection of fill for Text styles is now consistent with that for Circle and RegularShape styles. Transparent `fill` and `backgroundFill` is detected, with no hit detection over unfilled shapes. To get the previous behavior in Text styles where a transparent fill may have been used to avoid the default fill specify `fill: null`. If using FlatStyle notation specify `'text-fill-color': 'none'`. | |||
There was a problem hiding this comment.
These upgrade notes are not clear to me. Would it be true to say the following?
Previously, text labels with transparent fills were not hit detected. Now, you can control whether a transparent fill in a text label is hit detected or not.
To create a text style with a transparent fill that will be hit detected, use a fill with 'transparent' as the color.
// transparent fill, will be hit detected
const style = Style({
text: new Text({
fill: new Fill({
color: 'transparent',
}),
stroke: new Stroke({
color: 'red',
width: 2,
}),
}),
});Or, if using the flat literal style syntax:
// transparent fill, will be hit detected
const style = {
'text-fill-color': 'transparent',
'text-stroke-color': 'red',
'text-stroke-width': 2,
}By contrast, if you want a transparent fill that will not be hit detected, do the following:
// no fill, will not be hit detected
const style = Style({
text: new Text({
fill: null,
stroke: new Stroke({
color: 'red',
width: 2,
}),
}),
});Or, if using the flat literal style syntax:
// no fill, will not be hit detected
const style = {
'text-fill-color': 'none',
'text-stroke-color': 'red',
'text-stroke-width': 2,
}
There was a problem hiding this comment.
Yes, having this in the upgrade notes instead of what's currently there would make it much clearer.
|
📦 Preview the website for this branch here: https://deploy-preview-14992--ol-site.netlify.app/. |
| Hit detection of fill for Text styles is now consistent with that for Circle and RegularShape styles. Transparent `fill` and `backgroundFill` is detected, with no hit detection over unfilled shapes. To get the previous behavior in Text styles where a transparent fill may have been used to avoid the default fill specify `fill: null`. If using FlatStyle notation specify `'text-fill-color': null`. | ||
| Previously, text labels with transparent fills were not hit detected. Now, you can control whether a transparent fill in a text label is hit detected or not. | ||
|
|
||
| To create a text style with a transparent fill that will be hit detected, simply exclude the `fill` or use a fill with `'transparent'` as the color. |
There was a problem hiding this comment.
excluding the fill will default to #333, not transparent
Following up on #14943 (comment), this changes syntax for avoiding hit detection on text fills when using the flat literal syntax.
We're adding support for expressions in styles in #14780. Currently, the types supported by expressions do not include
nullorundefined. We may need to add support for this, but I'm going to avoid it until there is a compelling case.Instead of
'text-fill-color': null, this change makes it so'text-fill-color': 'none'will results in a text where the fill is not hit detected.