Skip to content

@ggn/draw只认几何的绘制库

文档里没有坐标、几何里没有画法、场景里没有语义。每段都能单独用、单独测,主入口不碰 DOM。

先看一张图 ​

这张图就是下面这段代码跑出来的——本站直接 import 源码,所以图是实时的,不是截图。

Live一份文档,一张图契约里只有「谁连谁」
订单服务 库存服务

零警告:整条管线没有产生任何诊断

ts
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 → 介质必须走全自动入口才拿得到中间结果

从这里开始 ​

  1. 快速开始:三种组合粒度,从一行到全套接管。
  2. 示例:八个实时渲染的例子——每个只多一样东西。
  3. 五段管线:每段为什么存在、边界画在哪(页面上有可交互的 Playground)。
  4. 节点注册:从 type 到 ShapeSpec,把自定义图元接进布局和场景。
  5. 容易误解的地方:注册表、measure/render 和增量更新里的边界。
  6. API 一览:公开面总表与逐模块签名。
  7. 设计:架构设计、组件图、端到端泳道图和 API 设计。

MIT License