核心架构
本页对应英文版 Core Architecture，用于说明 relation-graph 的核心设计原则：通过渐进增强的类继承体系、统一的数据提供者、平台适配层和事件系统，把图渲染与图编辑能力稳定地组织起来。
架构总览
- 核心图实例以
RelationGraphCore为中心。 - 底层通过一系列按能力分层的类进行线性继承，逐步叠加视图、数据、配置、渲染、交互、编辑等能力。
- 平台层并不复制业务逻辑，而是围绕核心实例做适配。
渐进增强式继承模式
- relation-graph 不是把所有逻辑塞进一个巨型类。
- 它通过“一个层级负责一类能力”的方式组织代码。
- 这样既有利于拆分关注点，也让调试、扩展和平台接入更清晰。
核心组件
RelationGraphCore 实例
- 负责统筹数据、布局、视图变换、事件、编辑与 API。
- 对上提供统一的实例方法，对下协调各个内部子系统。
RGDataProvider 系统
- 所有节点、连线、映射关系与提交记录，都统一交给数据提供者处理。
- 数据提供者是运行时数据的单一事实来源。
数据流架构
- 用户输入 JSON 数据。
- 系统将其转换为运行时对象。
- 提交系统负责追踪新增、更新、删除和状态变化。
- 各平台依据响应式机制刷新 UI。
Commit 提交机制
- 数据修改不会直接散落到所有组件中。
- 系统通过提交记录集中描述变化，再驱动刷新和后续计算。
- 这让批量更新、去抖动、性能模式和复杂编辑流程更易维护。
平台抽象层
- 平台层主要负责初始化、响应式桥接、上下文注入和组件装配。
- Vue、React、Svelte 与 Web Components 的差异被隔离在适配层。
- 因此，核心 API、布局能力与数据模型基本不因框架而改变。
类型系统
- 通过统一的类型定义约束节点、连线、连接点、布局配置和事件结构。
- 输入类型和运行时类型被显式区分，减少平台间的语义偏差。
事件系统
- 用户操作经过标准化后进入统一事件管线。
- 默认监听器、自定义处理器和平台事件桥共同参与处理。
- 这保证了点击、拖拽、缩放、编辑等行为的一致性。
关键设计模式
1. 继承式能力分层
- 每一层只承担有限职责，整体却形成完整图系统。
2. 核心 + 适配器模式
- 核心逻辑稳定，平台只负责适配。
3. Data Provider 作为单一事实来源
- 避免多个组件各自持有不一致的数据副本。
4. 观察者模式
- 通过 DOM 观察器与数据更新机制保持视图同步。
5. 工厂模式
- 布局器等可替换能力通过工厂统一创建。