Repository navigation
GitMate 1.12.0
提交图(左侧的树)重画。两个具体缺陷,都不是"审美"问题:
一、上下接不上
每一行是一个 只有 24px 高的 SVG,而这一行还有 4px 上下内边距 + 1px 下边框。线条画到 SVG 边缘就停了 —— 两行之间固定留一条 9px 的缝。
现在穿过某行的泳道一律画到行外(从 -5 到 29),盖住这一行自己的内边距和边框,下一行再从 -5 接上。相邻两行因此是重叠的,而不是相接的。
二、多分支时是悬空竖线
某个提交新开出的父分支(merge 的第二父),原来只画了一条从行中到行底的竖线,和节点之间没有任何连接 —— 看起来就是断的。
现在:
| 情况 | 画法 |
|---|---|
| 泳道穿过此行 | 竖直,画到行外 |
| 此行新开出的父分支 | 从节点出发画曲线(branch) |
| 泳道在此结束 | 从行首曲线收进节点(merge) |
顺带:线条分层次
原来是所有线一样灰一样粗 —— 多分支就是一片栅栏。现在同一色相三档:
- 本提交自己的线最重(
border-l2,1.8px) - 分支 / 汇聚曲线次之(
label-secondary62%) - 只是路过的泳道最轻(38%,1.3px)
全部用已发布的主题 token 调制,不引入新颜色。
架构:几何搬到 Host
新增纯函数 graphSegments(row),history 端点把每行的 {kind, lane, from, to, d} 随数据下发,面板只负责画。
这样"相邻行是否接上"就从只能靠看变成了可以断言的数字。
验证
node test/smoke.mjs # 616 项断言新增 13 项。核心是一条属性断言:遍历每对相邻行,凡是在两行都出现的泳道,上一行必须画到 ROW_HEIGHT+pad、下一行必须从 -pad 起。
还包括:真仓库里做出一次 merge,断言历史里确实有 branch 段、且每条泳道都接得上。把 pad 改回 0,四条断言立刻报错。
顺带修了测试自己的两处问题:fixture 里 merge 的参数写成了 source(应为 branch),merge 静默失败而我从未断言它成功;以及断言辅助函数把 history 的行对象当成了段数组。