Skip to content

GitMate 1.12.0

Choose a tag to compare

@alanhaskey alanhaskey released this 20 Oct 13:24
· 4 commits to main since this release

提交图(左侧的树)重画。两个具体缺陷,都不是"审美"问题:

一、上下接不上

每一行是一个 只有 24px 高的 SVG,而这一行还有 4px 上下内边距 + 1px 下边框。线条画到 SVG 边缘就停了 —— 两行之间固定留一条 9px 的缝。

现在穿过某行的泳道一律画到行外(从 -5 到 29),盖住这一行自己的内边距和边框,下一行再从 -5 接上。相邻两行因此是重叠的,而不是相接的。

二、多分支时是悬空竖线

某个提交新开出的父分支(merge 的第二父),原来只画了一条从行中到行底的竖线,和节点之间没有任何连接 —— 看起来就是断的。

现在:

情况 画法
泳道穿过此行 竖直,画到行外
此行新开出的父分支 从节点出发画曲线(branch)
泳道在此结束 从行首曲线收进节点(merge)

顺带:线条分层次

原来是所有线一样灰一样粗 —— 多分支就是一片栅栏。现在同一色相三档:

  • 本提交自己的线最重(border-l2,1.8px)
  • 分支 / 汇聚曲线次之(label-secondary 62%)
  • 只是路过的泳道最轻(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 的行对象当成了段数组。