fix(draw-canvas): support label placement and offset #1465
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
总览这些更改主要涉及图表绘制画布中边缘和标签的位置和渲染逻辑的增强。通过引入新的接口、类型和处理函数，系统现在支持更灵活的边缘标签放置，包括开始、结束和中心位置，并允许通过偏移量精确控制标签的位置。 变更
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
Comments suppressed due to low confidence (1)
bricks/diagram/src/draw-canvas/EdgeComponent.tsx:68
- Ensure that the new behavior for calculating the path point based on the placement and offset is covered by tests.
const updateLabelPosition = useCallback(() => {
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1465 +/- ##
==========================================
+ Coverage 85.45% 85.47% +0.02%
==========================================
Files 525 526 +1
Lines 15677 15702 +25
Branches 2352 2354 +2
==========================================
+ Hits 13396 13421 +25
Misses 1829 1829
Partials 452 452
|
|
🚀 Deployed on https://docs-preview-1465--next-bricks.netlify.app |
weareoutman
force-pushed
the
steve/line-points-snap
branch
from
123992b to
f22b2e5
Compare
|
📐🤏 Size check result (d722d20...447ffbf): Load all bricks together
Critical changes: None. See full changes
Load bricks by each packageCritical changes: None. See full changes
Load by each brickCritical changes: None. See full changes
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
bricks/diagram/src/draw-canvas/EdgeComponent.tsx (1)
70-88: 在组件内部根据placement与offset动态计算标签位置的思路很直观。
请注意在大路径长度与极端偏移值场景下，点位获取是否正确，以及是否需要额外的边界检查。整体实现满足需求。bricks/diagram/docs/eo-draw-canvas.md (1)
578-579: 在默认连线配置中将placement和offset暴露为可配置项有利于统一管理。
可在后续文档中补充更多关于负值或大值偏移的示例。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
bricks/diagram/docs/eo-draw-canvas.md(2 hunks)bricks/diagram/src/diagram/interfaces.ts(1 hunks)bricks/diagram/src/diagram/processors/getRenderedLineLabels.ts(1 hunks)bricks/diagram/src/draw-canvas/EdgeComponent.tsx(1 hunks)
🔇 Additional comments (4)
bricks/diagram/src/diagram/processors/getRenderedLineLabels.ts (1)
49-49: 在偏移量计算中使用item.offset的回退值是非常实用的改进。
此更改允许在标签定位时灵活处理偏移量，对于支持自定义效果非常有帮助。bricks/diagram/src/diagram/interfaces.ts (2)
165-169: 文档注释对offset的作用做了详细说明，便于后续维护。
在 start 或 end 的情况下，使用此偏移量可以更好地控制标签位置。
176-176: 为TextOptions新增可选的offset属性进一步增强了文本定位的灵活性。
此设计与LineLabelConf配合时有一致的使用体验。bricks/diagram/docs/eo-draw-canvas.md (1)
489-491: 在示例中为连线标签添加placement与offset能直观展示其作用。
这能帮助使用者快速上手配置个性化的标签位置。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
bricks/diagram/src/draw-canvas/processors/getLabelMaskAndOffset.ts (2)
8-11: 函数定义逻辑看起来不错，但建议在注释中说明返回结果含义
返回值是[labelMask, labelOffset]，在大型团队协作中，维护者需要了解这两个值分别代表什么及其用途，以免后续产生误解。
25-42: switch 分支中重复片段可进行提炼
四个分支在计算偏移量的时候大体结构一致，可考虑使用辅助函数统一处理，减少重复代码并提高可维护性。bricks/diagram/src/draw-canvas/LineLabelComponent.tsx (2)
14-15: offset 属性建议在文档中说明何时为 null
如果外部未传入 offset，渲染逻辑默认使用[0, 0]，但在此处声明为可空，需要在文档或类型注释里明确 offset 为空的场景与使用方式。
34-34: 无需过度依赖布尔类型判定
const ready = !!(position && offset)的做法简洁，但当后续类型出现更多状态时，可能需要更加清晰的判定逻辑。此写法虽目前可行，但随着需求变化，需要评估可读性与可扩展性。bricks/diagram/src/draw-canvas/processors/getLabelMaskAndOffset.spec.ts (1)
92-112: “right” 方向测试思路清晰
同样，进一步考虑补充极端情况（例如：angle = 0或angle = Math.PI/2）的测试。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
bricks/diagram/docs/eo-draw-canvas.md(3 hunks)bricks/diagram/src/draw-canvas/EdgeComponent.tsx(6 hunks)bricks/diagram/src/draw-canvas/LineLabelComponent.tsx(3 hunks)bricks/diagram/src/draw-canvas/interfaces.ts(1 hunks)bricks/diagram/src/draw-canvas/processors/getLabelMaskAndOffset.spec.ts(1 hunks)bricks/diagram/src/draw-canvas/processors/getLabelMaskAndOffset.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- bricks/diagram/docs/eo-draw-canvas.md
- bricks/diagram/src/draw-canvas/EdgeComponent.tsx
🔇 Additional comments (6)
bricks/diagram/src/draw-canvas/processors/getLabelMaskAndOffset.ts (1)
15-18: 建议在计算中添加对负值或极端值的安全检查
当前仅使用padding=3并简单地从labelSize取值进行计算。当width或height异常时（如 0、负值或极大值），可能会影响布局并导致不可预料的问题。bricks/diagram/src/draw-canvas/LineLabelComponent.tsx (1)
37-39: 偏移量加算写法灵活，但需注意大角度或负数情况
x={ready ? position[0] + offset[0] : 0}和y={...}的加法逻辑对于简单offset是可行的，但如果出现较大或反向偏移，可能需要更复杂的对齐策略。建议在后续迭代中纳入测试用例。bricks/diagram/src/draw-canvas/processors/getLabelMaskAndOffset.spec.ts (3)
10-13: 空输入场景测试用例充分
对labelPosition或labelSize为 null 的处理已测试，确保了基础的健壮性。
20-40: 建议在边界值下增加更多断言
在 “top” 测试场景中，测试角度为Math.PI / 4时覆盖了 45°情形，但在极小或极大角度时也应测试，以降低潜在的计算异常风险。
70-90: “left” 方向计算测试覆盖性较好
测试期望值与实际值匹配度较高，看起来计算逻辑正确。bricks/diagram/src/draw-canvas/interfaces.ts (1)
396-402: 新增的PositionAndAngle类型定义简明
将方向、角度与额外偏移统一放置在同一元组中，能更好地表达标签定位；但应在团队内部明确约定使用顺序与语义，以避免混淆。
panzekun
approved these changes
Jan 6, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
依赖检查
组件之间的依赖声明，是微服务组件架构下的重要信息，请确保其正确性。
请勾选以下两组选项其中之一：
或者：
提交信息检查
Git 提交信息将决定包的版本发布及自动生成的 CHANGELOG，请检查工作内容与提交信息是否相符，并在以下每组选项中都依次确认。
破坏性变更：
feat作为提交类型。BREAKING CHANGE: 你的变更说明。新特性：
feat作为提交类型。问题修复：
fix作为提交类型。杂项工作：
即所有对下游使用者无任何影响、且没有必要显示在 CHANGELOG 中的改动，例如修改注释、测试用例、开发文档等：
chore,docs,test等作为提交类型。Summary by CodeRabbit
新功能
改进
测试
这些更改提升了图表绘制组件的灵活性和精确性，使用户能够更细致地控制边缘标签的外观和位置。