Skip to content

边注册 ​

边类型也不是库内置的语义。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。

MIT License