多平台架构

relation-graph 将与框架无关的 TypeScript 核心，与各平台渲染和响应式适配层分离。React、Vue 2、Vue 3、Svelte 和 HTML 共享数据语义、布局、配置、事件和实例 API，同时使用各平台原生的 UI 模型。

架构

graph TB
  Core[RelationGraphCore 与模型继承链]
  Data[数据提供者与公开只读视图]
  Layouts[Tree / Center / Circle / Force / Fixed / Folder]
  Rendering[Render plan 与 commit 协议]

  Vue2[Vue 2 适配层]
  Vue3[Vue 3 适配层]
  React[React 适配层]
  Svelte[Svelte 适配层]
  HTML[HTML DOM/SVG/Canvas 运行时]

  Core --> Data
  Core --> Layouts
  Core --> Rendering
  Rendering --> Vue2
  Rendering --> Vue3
  Rendering --> React
  Rendering --> Svelte
  Rendering --> HTML

核心负责图数据、索引、交互状态、布局算法、坐标转换、性能策略和 API 行为；平台代码负责挂载并展示已经提交的状态。

发行包

平台	包名	源码	构建输出
Vue 2	`@relation-graph/vue2`	`packages/platforms/vue2`	`lib/vue2`
Vue 3	`@relation-graph/vue`	`packages/platforms/vue3`	`lib/vue3`
React	`@relation-graph/react`	`packages/platforms/react`	`lib/react`
Svelte	`@relation-graph/svelte`	`packages/platforms/svelte`	`lib/svelte`
HTML	`@relation-graph/html`	`packages/platforms/html`	`lib/html`

HTML 运行时是独立平台实现，不由 Svelte 编译生成，也不使用 Shadow DOM。旧自定义元素发行版已经退出构建与发布矩阵。

共享契约

所有平台消费同一套公共契约：

RGOptions 与布局配置。
RGJsonData、JsonNode、JsonLine、FakeLine 与运行时只读对象。
RGListeners 以及取消/坐标返回语义。
RelationGraphInstance 的数据、布局、视图、编辑、分析和导出 API。
相同的性能模式、空间裁剪、EasyView 与 MiniView 数据链路。

因此同一个示例可以在不同平台保持一致行为，只有 UI 语法不同。

框架适配层

框架包使用各自原生渲染与状态机制：

平台	集成模型
Vue 3	Vue 组件、Provider、Composition API hooks、响应式快照
Vue 2	Vue 组件、Provider、兼容 mixin 的响应式状态
React	Context Provider、hooks、React render function/slot
Svelte	Context Provider、store、Svelte slot

框架插槽可以用原生组件自定义节点、连线、画布层和视图内容。

HTML 运行时

HTML 包把核心直接连接到浏览器原语：

graph LR
  Config[RGHtmlConfig] --> Factory[createRelationGraph]
  Factory --> Core[RelationGraphCore]
  Core --> Plan[Render plan / commits]
  Plan --> DOM[Keyed 节点 DOM]
  Plan --> SVG[连线 SVG]
  Plan --> Canvas[EasyView / MiniView Canvas]
  Factory --> Extensions[Renderer / Layer / Plugin / UI]

HTML 集成方式包括：

createRelationGraph() 负责挂载和 ready。
DOM/SVG renderer 自定义节点、连线、文字和展开按钮。
background、canvas-behind、canvas-above、view 四个扩展层。
工具栏、MiniView、编辑控制器与业务行为插件。
状态域订阅和冒泡的 rg:* 镜像事件。
可选、显式注册的单一 light-DOM 元素。

参见在 HTML 中使用和 HTML 自定义渲染。

事件桥接

核心通过事件处理链派发具名事件。框架适配层把它们转换成框架 props/emits；HTML 通过 config.events 接收同一事件，并为外围 UI 发布只读 DOM 镜像。

取消行为是同步核心契约，只能由核心 listener 返回值决定；DOM 镜像事件不能改变已经完成的决策。

状态发布

核心每次 commit 发布一个内部一致的 render snapshot，各平台将其投影到自己的更新机制：

Vue 和 Svelte 更新响应式 store。
React 更新 Context 状态。
HTML 更新 keyed DOM/SVG，并发布 options、viewport、selection、editing、renderPlan 订阅。

公开查询 API 返回只读视图。所有平台都必须通过 update API 修改图数据。

构建与发布

build-all.sh 构建 Vue 2、Vue 3、React、Svelte 和 HTML，然后刷新共享声明与文档。HTML 输出 ESM、UMD、CommonJS、CSS 和类型声明。发布脚本正式发布 @relation-graph/html，普通包名保持禁用。

每个正式包都要通过共享核心契约与平台运行时测试。