Skip to content

feat(layers): support per-object text max width #9747

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat(layers): support per-object text max width #9747

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/api-reference/layers/geojson-layer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,6 +448,7 @@ The following props are forwarded to a `TextLayer` if `pointType` is `'text'`.
| `textFontWeight` | `'normal'` | [fontWeight](./text-layer.md#fontweight) |
| `textLineHeight` | `1` | [lineHeight](./text-layer.md#lineheight) |
| `textMaxWidth` | `-1` | [maxWidth](./text-layer.md#maxwidth) |
| `getTextMaxWidth` | `-1` | [getMaxWidth](./text-layer.md#getmaxwidth) |
| `textWordBreak` | `'break-word'` | [wordBreak](./text-layer.md#wordbreak) |
| `textBackground` | `false` | [background](./text-layer.md#background) |
| `textBackgroundPadding` | `[0, 0]` | [backgroundPadding](./text-layer.md#backgroundpadding) |
Expand Down
8 changes: 8 additions & 0 deletions docs/api-reference/layers/text-layer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,6 +273,8 @@ Available options are `break-all` and `break-word`. A valid `maxWidth` has to be

A unitless number that will be multiplied with the current text size to set the width limit of a string. If specified, when the text is longer than the width limit, it will be wrapped into multiple lines using the strategy of `wordBreak`.

Use the `getMaxWidth` accessor to supply this value per object.

For example, `maxWidth: 10.0` used with `getSize: 12` is roughly the equivalent of `max-width: 120px` in CSS.

#### `outlineWidth` (number, optional) {#outlinewidth}
Expand Down Expand Up @@ -312,6 +314,12 @@ The font size of each text label, in units specified by `sizeUnits` (default pix
* If a number is provided, it is used as the size for all objects.
* If a function is provided, it is called on each object to retrieve its size.

#### `getMaxWidth` ([Accessor<number>](../../developer-guide/using-layers.md#accessors), optional) {#getmaxwidth}

* Default: `-1`

Method called to retrieve the width limit of each text label. The value uses the same unit as `maxWidth`. A negative value disables the limit for the object.


#### `getColor` ([Accessor&lt;Color&gt;](../../developer-guide/using-layers.md#accessors), optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square") {#getcolor}

Expand Down
1 change: 1 addition & 0 deletions modules/layers/src/geojson-layer/sub-layer-map.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ export const POINT_LAYER = {
textFontWeight: 'fontWeight',
textLineHeight: 'lineHeight',
textMaxWidth: 'maxWidth',
getTextMaxWidth: 'getMaxWidth',
textOutlineColor: 'outlineColor',
textOutlineWidth: 'outlineWidth',
textWordBreak: 'wordBreak',
Expand Down
28 changes: 25 additions & 3 deletions modules/layers/src/text-layer/text-layer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,11 @@ type _TextLayerProps<DataT> = {
* @default -1
*/
maxWidth?: number;
/**
* Per-object width limit accessor. Returns the same unit as `maxWidth`.
* @default -1
*/
getMaxWidth?: Accessor<DataT, number>;
/**
* Label text accessor
*/
Expand Down Expand Up @@ -214,6 +219,7 @@ const defaultProps: DefaultProps<TextLayerProps> = {
// auto wrapping options
wordBreak: 'break-word',
maxWidth: {type: 'number', value: -1},
getMaxWidth: {type: 'accessor', value: -1},

getText: {type: 'accessor', value: (x: any) => x.text},
getPosition: {type: 'accessor', value: (x: any) => x.position},
Expand Down Expand Up @@ -274,7 +280,10 @@ export default class TextLayer<DataT = any, ExtraPropsT extends {} = {}> extends
fontChanged ||
props.lineHeight !== oldProps.lineHeight ||
props.wordBreak !== oldProps.wordBreak ||
props.maxWidth !== oldProps.maxWidth;
props.maxWidth !== oldProps.maxWidth ||
props.getMaxWidth !== oldProps.getMaxWidth ||
(changeFlags.updateTriggersChanged &&
(changeFlags.updateTriggersChanged.all || changeFlags.updateTriggersChanged.getMaxWidth));

if (styleChanged) {
this.setState({
Expand Down Expand Up @@ -387,14 +396,25 @@ export default class TextLayer<DataT = any, ExtraPropsT extends {} = {}> extends
const {fontAtlasManager} = this.state;
const iconMapping = fontAtlasManager.mapping!;
const getText = this.state.getText!;
const {wordBreak, lineHeight, maxWidth} = this.props;
const {wordBreak, lineHeight, maxWidth, getMaxWidth} = this.props;

let objectMaxWidth = maxWidth;
const maxWidthAccessor = getMaxWidth;
if (typeof maxWidthAccessor === 'function') {
const value = maxWidthAccessor(object, objectInfo);
if (Number.isFinite(value) && value >= 0) {
objectMaxWidth = value;
}
} else if (Number.isFinite(maxWidthAccessor) && maxWidthAccessor >= 0) {
objectMaxWidth = maxWidthAccessor;
Copy link

Copilot AI Aug 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The variable maxWidthAccessor is unnecessary since getMaxWidth is already descriptive. Consider using getMaxWidth directly in the conditional checks below to reduce code complexity.

Suggested change
objectMaxWidth = maxWidthAccessor;
if (typeof getMaxWidth === 'function') {
const value = getMaxWidth(object, objectInfo);
if (Number.isFinite(value) && value >= 0) {
objectMaxWidth = value;
}
} else if (Number.isFinite(getMaxWidth) && getMaxWidth >= 0) {
objectMaxWidth = getMaxWidth;

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Aug 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] This condition handles the case where getMaxWidth is a number rather than a function, but this seems inconsistent with the accessor pattern used elsewhere in the codebase. Consider if this number fallback is necessary or if it should always be treated as an accessor function.

Suggested change
objectMaxWidth = maxWidthAccessor;

Copilot uses AI. Check for mistakes.
}

const paragraph = getText(object, objectInfo) || '';
return transformParagraph(
paragraph,
lineHeight,
wordBreak,
maxWidth * fontAtlasManager.props.fontSize,
objectMaxWidth * fontAtlasManager.props.fontSize,
iconMapping
);
}
Expand Down Expand Up @@ -549,6 +569,7 @@ export default class TextLayer<DataT = any, ExtraPropsT extends {} = {}> extends
getText: updateTriggers.getText,
getTextAnchor: updateTriggers.getTextAnchor,
getAlignmentBaseline: updateTriggers.getAlignmentBaseline,
getMaxWidth: updateTriggers.getMaxWidth,
styleVersion
}
}
Expand Down Expand Up @@ -609,6 +630,7 @@ export default class TextLayer<DataT = any, ExtraPropsT extends {} = {}> extends
getIconOffsets: {
getTextAnchor: updateTriggers.getTextAnchor,
getAlignmentBaseline: updateTriggers.getAlignmentBaseline,
getMaxWidth: updateTriggers.getMaxWidth,
styleVersion
}
}
Expand Down
Loading