主题
边注册
边类型也不是库内置的语义。type 通过注册表映射到一个 EdgeSpec,由它决定线怎么画、 要不要标签,以及两端是否带 marker。
一条边能拿到什么
| 输入 | 用途 |
|---|---|
ctx.route | 布局已经算好的起点、折点和终点 |
ctx.style | 当前边已经解析好的样式 |
ctx.props | 边自己的附加参数 |
ctx.label | 文档里的边标签 |
ctx.labelPlacement | 布局算好的标签矩形与折行结果 |
ctx.marker(type) | 查找注册表里的端点装饰 |
ctx.out | 写线和箭头 |
ctx.labelOut | 写标签,层级在节点之上 |
边拿不到文档,也不负责决定路由。折点来自 Router,边只把 route 变成场景零件。
一个最小边
ts
import {
createRegistry,
defineEdge,
polylineD,
} from "@ggn/draw";
const link = defineEdge({
markers: { end: "open-arrow" },
render(ctx) {
ctx.out.node({
kind: "path",
key: ctx.out.key(""),
d: polylineD(ctx.route),
style: { ...ctx.style, fill: "none" },
});
},
});
const registry = createRegistry().with({
edges: { link },
});createRegistry() 默认带内置 marker;open-arrow 可以直接使用。
线和 marker 是两层
EdgeSpec.render 负责线本身;markers 只声明两端要哪一种装饰,构建场景时由库按路由方向 放到端点上。不要在 render 里再画一遍箭头,否则会和 marker 重叠。
标签默认自动布局
EdgeSpec.labels 缺省为 "auto"。measure 阶段量标签,route 阶段给出 LabelPlacement,build 统一绘制,因此边作者不会因为忘记画标签而丢内容。
只有需要自己控制排版时才写 labels: "manual",再用 ctx.labelOut 输出文字。 从 v1 迁移的自定义边可以暂时标成 manual,避免自动标签与旧画法重复。
常见误解
- 没有内置边类型:实线、虚线、箭头组合都由使用方注册。
- marker 不等于线型:实线也可以带箭头,虚线也可以不带。
- 边不能重算路由:要换折线路径,换
Router。 - 标签不在节点层:
ctx.labelOut才能让标签盖在节点上面。 - auto / manual 只能选一个:标成 manual 后,库不会再自动补标签。
完整示例见复合图元与连线,底层签名见 registry API。