Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
14 changes: 12 additions & 2 deletions src/label/labelStyle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -395,15 +395,25 @@ function setTextStyleCommon(
let richResult: TextStyleProps['rich'];
if (richItemNames) {
richResult = {};
const richInheritPlainLabelOptionName = 'richInheritPlainLabel' as const;
const richInheritPlainLabel = retrieve2(
textStyleModel.get(richInheritPlainLabelOptionName),
ecModel && ecModel.get(richInheritPlainLabelOptionName)
);
for (const name in richItemNames) {
if (richItemNames.hasOwnProperty(name)) {
// Cascade is supported in rich.
const richTextStyle = textStyleModel.getModel(['rich', name]);
const richTextStyle = textStyleModel.getModel(
['rich', name],
richInheritPlainLabel !== false ? textStyleModel : void 0
);
// In rich, never `disableBox`.
Copy link
Member

@100pah 100pah May 16, 2025

Choose a reason for hiding this comment

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

Just some thoughts:

Do we need to simplify it to only support richInheritPlainLabel on the global model?
(I'm not sure)

  • pros:
    • I guess the most common usage of richInheritPlainLabel is when users upgrade to echarts v6, and find that some text style is broken. They can simply set richInheritPlainLabel: false on the global option to revert it, without being bothered by debugging. But if they have decided to not to use richInheritPlainLabel: false and fix the broken style one by one, they can also just modify the text styles directly, but not necessarily set richInheritPlainLabel: false on some specific style option (such as, axisLable, series[i].label, ...).
      • If define richInheritPlainLabel on the global model, that can be declared in types.ts #ECUnitOption. On the contrary, if supporting richInheritPlainLabel every text style, it seems not easy to make a uniform TS declaration. The textStyleModel in this function has been declared as Model<any>, that makes textStyleModel.get('richInheritPlainLabel') return an any type, and pass TS check by chance, but not quite correct.
  • cons:
    • ecModel is not necessarily exist in this function, tho in most cases it exists. Is it appropriate to just ignore the cases that ecModel does not exist? I mean if (ecModel) { ecModel.get('richInheritPlainLabel') } else { /* just treat it as richInheritPlainLabel: true */ }.
    • Is it possible that it is hard to fix the style and have to rely on richInheritPlainLabel: false?

But since no ideal approach, it's also fine to use the current implementation.

Copy link
Member Author

Choose a reason for hiding this comment

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

For the sake of migration, I think supporting the global richInheritPlainLabel option makes sense, and the type is easy to define. But I hope to also support the richInheritPlainLabel option in label style, but keep it undocumented until it is required by developers.

Copy link
Member

@100pah 100pah Jun 5, 2025

Choose a reason for hiding this comment

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

I found that after this changing, test/pie-label-alignTo-adjust.html throws JS Error in zrender.

image

The root cause of that Error is related to zr incorrect impl (I'm fixing it.), but not caused by this PR.
However, this PR changes the inheritance behavior, causing the rich style to inherit width from the outermost label style, which trigger the bug code in zr.

Through this case, I realized that:

  • those props, width, height, padding, margin, tag, backgroundColor, borderColor, borderWidth, borderRadius, shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY (in TextStylePropsPart), are inappropriate to inherit.
  • If the default label style (static defaultOption = ...) has props (such as, align verticalAlign, and in GauseSeries), we change the inheritance behavior, that may cause a breaking change. Also need to consider that some default style is set in emphasis state. And users have to reset them in each rich style to correct the style - that might cause the config more complicated than no inheritance.

Thus should we only conservatively only allow inheritance in TEXT_PROPS_WITH_GLOBAL, i.e., 'fontStyle', 'fontWeight', 'fontSize', 'fontFamily', 'textShadowColor', 'textShadowBlur', 'textShadowOffsetX', 'textShadowOffsetY' - they are meant to be inheritable (has been inheritable from global option).

Moreover, I found that it's not a correct way to implements the inheritance by

                const richTextStyle = textStyleModel.getModel(
                    ['rich', name],
                    richInheritPlainLabel !== false ? textStyleModel : void 0
                );

See test/pie-dataView.html, that breaks the rich text in pie, because in that case the textStyleModel is the model of each item and the rich should be fetched from the original textStyleModel.parent.

Regarding impl, because in another branch I encountered this issue, I just try to fix that in this way:

#21016

// FIXME: consider `label: {formatter: '{a|xx}', color: 'blue', rich: {a: {}}}`,
// consider `label: {formatter: '{a|xx}', color: 'blue', rich: {a: {}}}`,
// the default color `'blue'` will not be adopted if no color declared in `rich`.
// That might confuses users. So probably we should put `textStyleModel` as the
// root ancestor of the `richTextStyle`. But that would be a break change.
// Since v6, the rich style inherits plain label by default
// but this behavior can be disabled by setting `richInheritPlainLabel` to `false`.
setTokenTextStyle(
richResult[name] = {}, richTextStyle, globalTextStyle, opt, isNotNormal, isAttached, false, true
);
Expand Down
119 changes: 119 additions & 0 deletions test/rich-inherit-plain-label.html

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion test/richText.html

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions test/runTest/actions/__meta__.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions test/runTest/actions/rich-inherit-plain-label.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.