关系图画布缩放
灵感：能力工具箱 panzoom-view（panzoom 缩放平移客户关系大图）。
> 小四原创：大图/SVG 容器 → panzoom(el) → 滚轮缩放、拖拽平移。
> 卸载 dispose()。
何时使用
- 客户关系网络大图浏览
- Demo 组织架构/连线大图
- 超出视口的示意图查看
硬约束
- 依赖：
panzoom。 - 挂在可变换的内容节点上，外层建议
overflow: hidden。 - 卸载必须
dispose()。 - 实现要点注释标 小四原创。
- 不做节点编辑、不做力导向布局（见 vis-network 等）。
推荐实现
import panzoom, { type PanZoom } from 'panzoom'
// 小四原创：关系图画布缩放平移
export function mountRelationPanzoom(
el: HTMLElement,
opts?: { minZoom?: number; maxZoom?: number },
): { destroy: () => void; reset: () => void; instance: PanZoom } {
const pz = panzoom(el, {
minZoom: opts?.minZoom ?? 0.4,
maxZoom: opts?.maxZoom ?? 3,
bounds: true,
boundsPadding: 0.1,
})
return {
instance: pz,
reset: () => {
pz.moveTo(0, 0)
pz.zoomAbs(0, 0, 1)
},
destroy: () => pz.dispose(),
}
}
Agent 步骤
npm i panzoom。- 关系图内容包一层，外层裁剪；挂载 panzoom。
onBeforeUnmount调destroy。- 自测：滚轮缩放、拖拽平移；卸载无残留。
不要做
- 挂在 window/body 导致整页乱飞。
- 忘记 dispose。
附加
- README.md · reference.md · templates/usage.md
