@web-3d/graph

@web-3d/graph 提供渲染引擎无关的二维、三维图数据模型和插件式渲染框架，适合路网、管网及其他由节点和边组成的可编辑场景。

功能

• 管理节点、边、路径、子图以及图级业务数据。
• 使用 Signal 暴露位置、端点、方向、曲线和成员变化。
• 提供事务化变更集，合并一次业务操作内的增删改通知。
• 支持拆边、切边、溶解节点、断开节点和拓扑编辑计划。
• 支持路径解析、元素引用和激活元素集合。
• 通过 GraphRenderer 安装函数式或对象式渲染插件。
• 核心模型不依赖 Three.js、Cesium、DOM 或拾取实现。

安装

pnpm add @web-3d/graph @web-3d/math @web-3d/tools

快速开始

import { Direction, Graph, GraphRenderer } from '@web-3d/graph';

const graph = new Graph(3);
graph.addNode('start', [0, 0, 0]);
graph.addNode('end', [10, 0, 0]);
graph.addEdge('main', 'start', 'end', {
  direction: Direction.both,
  data: { category: 'main' },
});

const renderer = new GraphRenderer(graph, { scene });
renderer.install(renderPlugin, { color: '#4488ff' });

渲染上下文和插件选项由适配层自行定义，图模型不读取其中的引擎对象。

核心对象

| 对象 | 职责 | | --- | --- | | Graph | 图元素存储、拓扑操作、事务和变更事件 | | Node、Edge | 节点位置、边端点、方向、曲线和业务数据 | | Path | 有序边序列 | | Subgraph | 节点、边和路径的逻辑集合 | | GraphRenderer | 渲染插件安装、卸载和资源清理 | | RenderPlugin | 把图变化映射为具体引擎对象 |

设计边界

图模型只保存拓扑和业务数据。拾取、材质、几何体、场景节点与销毁策略由渲染插件负责；图编辑交互由 @web-3d/inter-draw 及对应引擎适配层负责。

开发

pnpm test
pnpm test:watch
pnpm typecheck
pnpm build
pnpm demo:graph-basic
pnpm apidoc

作者：郭斌勇 · 微信：keyanzhe · 邮箱：[email protected]