laoyang
218cdf74fc
家谱：修「线又错位」（我上一版的居中写法在库里不成立）+ 框宽收成头像宽 + 去掉悬停提示
用户 2026-10-03 反馈三条。**第一条是我上一版引入的回归，先说清楚**。
一、「画线又有点错位了」—— 上一版把居中从 transform 换成 `inset:0 + margin:auto`，
这一步在**这个库里不成立**：
含块是库的 `div.card`，它在 Cartesian 模式下只有 **1.8px 宽**
（宽度由内部一个空 div 撑出来，卡片是溢出绘制的）。
`inset:0` + `margin:auto` 的"居中"依赖"容器比元素宽" —— 容器只有 1.8px 时
auto 外边距分不出任何空间，卡片直接被摆在容器左上角、整体**右移 53.1px**。
实测（1600×1000、库缩放 0.9）：**每一张**卡的中心都偏在节点中心右边 53.1px
（是固定的布局偏差，不是随机抖动）→ 连线仍然画在节点上，于是全部错位。
正解：`left/top: 50%` + **半个自身尺寸的负外边距**
（`margin-left: calc(var(--kin-w) / -2)`）—— 位置完全由布局决定，
**不经过 transform**，所以库那条 `:hover { transform: … }` 也顶不掉它。
⚠️ 负外边距用 calc 与尺寸共用变量，不写死 -59/-66（迟早脱节）。
⚠️ 这条路上已经栽过两次，两种错写法都别再回去：
· `transform: translate(-50%,-50%)` → hover 时被库覆盖，卡片跳半张（53×58px）；
· `inset:0 + margin:auto` → 容器 1.8px 宽，卡片整体右移 53px、连线错位。
二、「外面那个框又变宽了；宽度和头像图片一致，下面显示名字就行了」：
卡片 118 → **98px**（= 96 头像 + 左右各 1px 边框），横向 padding 归零，
头像改 `width: 100%` 占满卡片内宽 —— 于是**边框刚好贴着头像**，
框里不再有多余的横向空白；头像下面就是名字（+ 与我的称呼）。
⚠️ 98×116 与 JS 的 `setCardDim` 必须同源（库按它算间距与连线落点），
所以两边都改用常量：CSS 的 `--kin-w/--kin-h` ↔ JS 的 `KIN_W/KIN_H`。
三、「鼠标放在名字上后显示了一行字：资料、以他为中心 —— 没必要，不要显示」：
那两行是我上一版加的悬停提示（`.kin-hint`），**整个删掉**（模板 + CSS）。
验证：
· 家谱可视化检查 29 → **34** 条全过，新增五条正是这次的守卫：
⑮ 每张卡正对节点中心（改坏时实测 dx=53.1）· ⑯ 框宽 = 头像宽（≤2px）
· ⑯b 尺寸不是退化的 0（防止"一起变 0"也算过）· ⑰ 无 .kin-hint
· ⑱ 头像下面是名字。
· 反向验证：把居中改回 `inset:0 + margin:auto` → ⑮ 立刻红（dx=44.1），
还原后复绿（断言不是永远绿的）。
· 连线端点独立核对：12 个端点里 9 个落在卡片附近，另 3 个是
**夫妻之间那段连接线**（画在两卡之间，本来就该在两卡之间）。
· e2e 773/0 · 第 5 轮专项 91/0 · 几何 428/0 · 移动端 684/0 · 交互 97/0。
· 部署脚本更新/新增静态断言：允许 transform 之外的居中方式但**禁止那两种错写法**
（transform 居中 / inset:0）、必须有 `margin-left: calc(var(--kin-w) / -2)`、
JS 与 CSS 的宽度必须一致、`kin-hint` 不许回来。
· 线上两个文件 md5 与本地一致；kin-hint=0、--kin-w: 98px 在位。
2026-10-03 17:49:10 +08:00
..
2026-10-03 17:49:10 +08:00
2026-09-29 23:48:45 +08:00
2026-10-03 15:01:38 +08:00
2026-10-02 20:09:28 +08:00
2026-09-30 00:49:53 +08:00
