Skip to content

Label text style support lineOverflow and ellipsis #15404

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

Closed
susiwen8 wants to merge 2 commits into from
Closed

Label text style support lineOverflow and ellipsis #15404

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
134fd5f
Feat: label support lineOverflow and ellipsis
susiwen8 Jul 21, 2021
c2f2bbc
Fix(title): title should have lineOverflow
susiwen8 Jul 21, 2021
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
4 changes: 2 additions & 2 deletions src/chart/treemap/TreemapSeries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ interface BreadcrumbItemStyleOption extends ItemStyleOption {
}

interface TreemapSeriesLabelOption extends SeriesLabelOption {
ellipsis?: boolean
ellipsis?: string
formatter?: string | ((params: CallbackDataParams) => string)
}

Expand Down Expand Up @@ -306,7 +306,7 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
upperLabel: {
show: true,
position: [0, '50%'],
ellipsis: true,
ellipsis: '...',
verticalAlign: 'middle'
}
},
Expand Down
6 changes: 4 additions & 2 deletions src/component/title/install.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,8 @@ class TitleView extends ComponentView {
const textEl = new graphic.Text({
style: createTextStyle(textStyleModel, {
text: titleModel.get('text'),
fill: textStyleModel.getTextColor()
fill: textStyleModel.getTextColor(),
lineOverflow: textStyleModel.get('lineOverflow')
}, {disableBox: true}),
z2: 10
});
Expand All @@ -171,7 +172,8 @@ class TitleView extends ComponentView {
text: subText,
fill: subtextStyleModel.getTextColor(),
y: textRect.height + titleModel.get('itemGap'),
verticalAlign: 'top'
verticalAlign: 'top',
lineOverflow: textStyleModel.get('lineOverflow')
}, {disableBox: true}),
z2: 10
});
Expand Down
2 changes: 1 addition & 1 deletion src/label/labelStyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -462,7 +462,7 @@ const TEXT_PROPS_WITH_GLOBAL = [
'textShadowColor', 'textShadowBlur', 'textShadowOffsetX', 'textShadowOffsetY'
] as const;
const TEXT_PROPS_SELF = [
'align', 'lineHeight', 'width', 'height', 'tag', 'verticalAlign'
'align', 'lineHeight', 'width', 'height', 'tag', 'verticalAlign', 'lineOverflow', 'ellipsis'
] as const;
const TEXT_PROPS_BOX = [
'padding', 'borderWidth', 'borderRadius', 'borderDashOffset',
Expand Down
2 changes: 2 additions & 0 deletions src/util/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1109,6 +1109,8 @@ export interface LabelOption extends TextCommonOption {
// formatter?: string | ((params: CallbackDataParams) => string)

rich?: Dictionary<TextCommonOption>
lineOverflow?: 'truncate'
Copy link
Contributor

@Ovilia Ovilia Jul 26, 2021

Choose a reason for hiding this comment

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

I'm not sure if the default value should be 'truncate' since the document takes 'none' for default values. @pissang

Copy link
Member

@plainheart plainheart Jul 26, 2021

Choose a reason for hiding this comment

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

Just take this line of code, it's not to specify the default value but to define the type of lineOverflow.

ellipsis?: string
}

export interface SeriesLabelOption extends LabelOption {
Expand Down