Skip to content

fix: prevent rich text labels from inheriting line dash styles - #4676

Open
biubiukam wants to merge 2 commits into
VisActor:developfrom
biubiukam:fix/issue-4595-richtext-line-dash
Open

fix: prevent rich text labels from inheriting line dash styles#4676
biubiukam wants to merge 2 commits into
VisActor:developfrom
biubiukam:fix/issue-4595-richtext-line-dash

Conversation

@biubiukam

@biubiukam biubiukam commented Aug 29, 2026

Copy link
Copy Markdown
Contributor

🤔 This is a ...

  • New feature
  • Bug fix
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Refactoring
  • Update dependency
  • Code style optimization
  • Test Case
  • Branch merge
  • Release
  • Site / documentation update
  • Demo update
  • Workflow
  • Other (about what?)

🔗 Related issue link

Fixes #4595

🔗 Related PR link

None.

🐞 Bugserver case id

N/A

💡 Background and solution

Rich text labels could inherit a dashed lineDash canvas state from the graphic rendered immediately before them, so a stroked label appeared dashed even when no dash pattern was configured for the text mark.

This change gives TextMark an explicit empty lineDash default. The text mark now clears any inherited dash pattern before rich text is rendered, while an explicitly configured dash pattern remains unchanged.

The regression coverage renders a real scatter chart with a dashed point followed by a stroked rich text label. It verifies the rich text graphic receives lineDash: [] and that the final setLineDash call before strokeText('label') resets the canvas state.

📝 Changelog

Language Changelog
🇺🇸 English Reset the default text mark dash pattern so rich text labels do not inherit line dash styles.
🇨🇳 Chinese 重置文本图元的默认虚线配置,避免富文本标签继承前一个图元的虚线样式。

☑️ Self-Check before Merge

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

🚀 Summary

Set an explicit empty dash pattern on text marks and add a rendering regression test so rich text label strokes do not inherit a preceding point's dash state.

🔍 Walkthrough

  • Add lineDash: [] to the default TextMark style.
  • Rename the text mark default-style test.
  • Add a real scatter rendering regression covering point dash state, rich text stroke rendering, and the reset call order.
  • Add the patch change record for issue [Bug] 富文本lineDash的配置不生效 #4595.

✅ Verification

npm test -- --runInBand __tests__/unit/mark/text.test.ts
2 tests passed

npm run compile
passed

The package-wide test run reached 400 passing tests; the existing __tests__/unit/extension/pictogram-size.test.ts suite remains blocked by unrelated @visactor/vchart type-resolution errors in vchart-extension.

@xuefei1313 xuefei1313 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🦞 Aime Bot Review

改动摘要

  • 仓库:VisActor/VChart
  • PR:#4676 fix: prevent rich text labels from inheriting line dash styles
  • 作者:@biubiukam
  • 创建时间:2026-08-29 08:53:42+08:00

代码观察

  • 变更规模:3 files, +13/-1
  • 变更文件(Top 12):
    • common/changes/@visactor/vchart/fix-issue-4595-richtext-line-dash_2026-08-28.json (added, +11/-0)
    • packages/vchart/__tests__/unit/mark/text.test.ts (modified, +1/-1)
    • packages/vchart/src/mark/text.ts (modified, +1/-0)

建议

  • 整体看起来结构清晰;建议自测覆盖关键渲染/交互路径,并在描述中补充变更动机与影响范围。

合并建议

建议在自测通过、并确认风险可控后合并 ✅。若这是行为修复/用户可见变更,建议补充 changelog/文档说明。

@xuefei1313

Copy link
Copy Markdown
Contributor

🦞 Aime Bot Review(补充点评)

根因确认

  • 顺着 [Bug] 富文本lineDash的配置不生效 #4595 看了下渲染链路:VRender 的描边逻辑里对 lineDash 是判空处理(if (lineDash) { context.setLineDash(lineDash) }),而 TextMark 默认样式中 lineDashundefined,富文本描边时不会下发 setLineDash,canvas 便会沿用上一个图元(如虚线气泡)的 dash 状态,导致标签描边被画成虚线。
  • 本 PR 把默认值改为 []:空数组是 truthy,会走到 setLineDash([]);而原生 canvas 的 setLineDash([]) 恰好表示重置为实线。因此既能清掉继承的虚线状态,又不影响用户显式配置的 lineDash,修复方向和落点都正确 👍

具体建议

  1. 目前测试只锁定了默认属性值(expect(lineDash).toEqual([])),建议补一个更贴近 issue 的渲染层回归用例:先渲染带 lineDash: [10, 10] 的 point/symbol,再渲染带 stroke 的富文本 label,断言描边前 context 收到的是 setLineDash([])(或加渲染快照)。这样能直接锁住 [Bug] 富文本lineDash的配置不生效 #4595 的场景,避免后续重构回退。
  2. text.test.ts 里的用例名是 'rule mark initial style'(看起来是早期从 rule mark 复制过来的命名),方便的话可以顺手改成 'text mark initial style',不阻塞合并。
  3. PR 目前还是 Draft 状态,CI 通过、自测完成后记得标记 Ready for review。

合并建议

改动小而聚焦,changeset(patch)与 changelog 齐全,单测也同步更新了。补上回归用例(或说明已手动验证 issue 复现场景)后建议合并 ✅。

请确认 @biubiukam 是否方便补充第 1 点的渲染层回归测试~

@biubiukam
biubiukam marked this pull request as ready for review August 31, 2026 13:54
@biubiukam

biubiukam commented Aug 31, 2026

Copy link
Copy Markdown
Contributor Author

已补充评审建议中的渲染层回归用例:真实渲染 scatter 图表,先绘制 lineDash 为 [10, 10] 的 point,再绘制带 stroke 的 rich text label;断言 rich text graphic 的默认 lineDash 为 [],并验证 label 的 strokeText 调用前最后一次 setLineDash 调用参数为 []。同时将默认样式测试名修正为 text mark initial style。聚焦测试与编译已通过。

@Issues-translate-bot

Copy link
Copy Markdown

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿


The rendering layer regression use case in the review suggestions has been supplemented: to truly render the scatter chart, first draw the point of , and then draw the rich text label with stroke; assert that the default of rich text graphic is , and verify that the last time before label is . At the same time, the default style test name is corrected to . Focus testing and compilation passed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] 富文本lineDash的配置不生效

3 participants