主题
@ggn/draw只认几何的绘制库
文档里没有坐标、几何里没有画法、场景里没有语义。每段都能单独用、单独测,主入口不碰 DOM。
这张图就是下面这段代码跑出来的——本站直接 import 源码,所以图是实时的,不是截图。
零警告:整条管线没有产生任何诊断
import {
parseDocument, resolveTheme, createRegistry, builtinRegistry,
layoutDocument, buildScene, renderToSvg,
} from "@ggn/draw";
const registry = createRegistry({ base: builtinRegistry }).registerEdge("link", linkSpec); // 画法:link 是注册进来的
const doc = parseDocument(json); // ① 文档:谁连谁,没有坐标
const theme = resolveTheme(); // ② 主题:调色板 + 排版量
const layout = layoutDocument(doc.value, { // ③ 几何:多大、放哪、线怎么绕
typography: theme.value.typography,
metrics: registry.metrics(),
});
const scene = buildScene(doc.value, layout.value, { registry, theme: theme.value }); // ④ 场景树
const svg = renderToSvg(scene.value); // ⑤ 输出一句话记住每段的产出:文档 → 调色板 / 排版量 → 绝对几何 → 场景树 → 介质。 每一段为什么单独存在,见五段管线。
| 判据 | 落地方式 | 违反形态 |
|---|---|---|
| 正交 | 一个导出只做一件事 | layout 读 registry 的 render;build 改 LayoutResult;host 认识 DrawDocument |
| 原子 | 每段输入输出都是值,失败统一 Result<T> | renderToSvg(document) 把四段混成一个动作 |
| 可组合 | DrawDocument → ResolvedTheme / LayoutResult → Scene → 介质 | 必须走全自动入口才拿得到中间结果 |