架构概述
大约 7 分钟
架构概述
本章详细介绍 WebCAD 的整体架构设计，帮助你深入理解系统的工作原理。
系统架构图
分层架构说明
用户界面层 (UI Layer)
用户界面层负责所有的用户交互和界面展示。
| 组件 | 职责 | 主要功能 |
|---|---|---|
| MainView | 主视图容器 | 整合所有UI组件，管理布局 |
| RibbonBar | 功能区菜单 | 命令按钮、工具分组 |
| CommandLine | 命令行 | 命令输入、提示信息、历史记录 |
| SidePalettes | 侧边面板 | 可折叠的功能面板容器 |
| PropertiesPanel | 属性面板 | 显示和编辑选中实体的属性 |
| LayerPanel | 图层面板 | 图层列表、图层操作 |
核心层 (Core Layer)
核心层是系统的中枢，协调各模块的工作。
| 组件 | 职责 | 关键API |
|---|---|---|
| Engine | 全局入口 | addEntities(), getPoint(), currentDoc |
| CadDocument | 文档模型 | layers, blocks, save(), load() |
| Editor | 编辑控制 | 输入处理、状态管理 |
| UndoManager | 撤销管理 | undo(), redo(), added_undoMark() |
| CoordinateSystem | 坐标系统 | WcsToUcs(), UcsToWcs(), WcsToDcs() |
实体层 (Entity Layer)
实体层定义了所有图形对象的数据结构和行为。
系统层 (System Layer)
系统层提供各种系统级功能。
| 组件 | 职责 | 说明 |
|---|---|---|
| CommandRegistry | 命令管理 | 注册、查找、执行命令 |
| PluginManager | 插件管理 | 加载、激活、卸载插件 |
| CadEventManager | 事件管理 | 事件订阅、发布、取消 |
| EntityReactorManager | 反应器管理 | 实体关联更新 |
| SelectionManager | 选择管理 | 实体选择、选择集操作 |
渲染层 (Rendering Layer)
渲染层负责将实体数据转换为可视图形。
| 组件 | 职责 | 说明 |
|---|---|---|
| CanvasController | 画布控制 | 视图变换、缩放平移 |
| EntityRenderer | 实体渲染 | 将实体转换为图形 |
| CadGraphics | 图形绘制 | 底层绘图API |
| BucketManager | 分桶管理 | 大数据量优化渲染 |
数据层 (Data Layer)
数据层管理文档的各类数据集合。
| 集合 | 说明 | 主要操作 |
|---|---|---|
| Layers | 图层集合 | add(), get(), remove(), has() |
| Blocks | 块定义集合 | add(), get(), remove() |
| TextStyles | 文字样式 | 字体、高度、宽度因子 |
| LineTypes | 线型定义 | 虚线模式、比例 |
核心模块详解
Engine 模块
Engine 是整个系统的核心入口，提供静态方法访问所有功能：
// Engine 核心功能分类
class Engine {
// === 文档访问 ===
static get currentDoc(): CadDocument; // 当前文档
static get pcanvas(): CanvasController; // 画布控制器
static get undoManager(): UndoManager; // 撤销管理器
static get eventManager(): CadEventManager; // 事件管理器
// === 系统变量 ===
static CECOLOR: number; // 当前绘图颜色
static CLAYER: string; // 当前图层
static CELTSCALE: number; // 当前线型比例
static OSMODE: number; // 对象捕捉模式
static ORTHOMODE: boolean; // 正交模式
// === 实体操作 ===
static addEntities(entities): void;
static eraseEntities(entities): void;
// === 用户输入 ===
static getPoint(options): Promise<InputResult>;
static getSelections(options): Promise<InputResult>;
static getReal(options): Promise<InputResult>;
static getInteger(options): Promise<InputResult>;
// === 视图操作 ===
static zoomExtents(): void;
static zoomToEntities(entities): void;
static regen(): void;
}CadDocument 模块
CadDocument 代表一个 CAD 文档：
class CadDocument {
// === 基本属性 ===
name: string; // 文档名称
filePath: string; // 文件路径
isModified: boolean; // 是否已修改
// === 数据集合 ===
layers: Layers; // 图层集合
blocks: Blocks; // 块集合
layouts: Layouts; // 布局集合
textStyles: TextStyles; // 文字样式
dimStyles: DimStyles; // 标注样式
lineTypes: LineTypes; // 线型定义
// === 方法 ===
save(): Promise<void>;
load(path: string): Promise<void>;
newDocument(): void;
}命令执行流程
事件流程
事件类型
WebCAD 事件采用 -ing（操作前，可取消）和 -ed（操作后）命名规范：
| 事件类别 | Before 事件 (-ing) | After 事件 (-ed) |
|---|---|---|
| 文档 | DocumentOpening | DocumentOpened |
| 实体添加 | EntityAdding | EntityAdded |
| 实体删除 | EntityErasing | EntityErased |
| 实体修改 | - | EntityModified |
| 命令 | CommandStarting | CommandEnded |
| 选择 | - | SelectionChanged |
| 图层 | LayerAdding | LayerAdded |
插件生命周期
生命周期钩子
interface Plugin {
// 插件清单
manifest: PluginManifest;
// 生命周期钩子
onLoad?(context: PluginContext): Promise<void>;
onActivate?(context: PluginContext): Promise<void>;
onDeactivate?(context: PluginContext): Promise<void>;
onUnload?(context: PluginContext): Promise<void>;
}反应器系统
反应器系统用于实现实体间的关联更新，典型应用是关联标注。
反应器事件
| 事件 | 触发时机 | 用途 |
|---|---|---|
Modified | 所有者被修改 | 更新依赖实体 |
Erased | 所有者被删除 | 清理依赖关系或删除依赖 |
Copied | 所有者被复制 | 处理依赖关系复制 |
Transformed | 所有者被变换 | 同步变换依赖实体 |
坐标系统
坐标转换
// 坐标转换示例
const wcsPoint = new Point2D(100, 100);
// WCS -> UCS（用于用户界面显示）
const ucsPoint = Engine.trans.WcsToUcs(wcsPoint);
// WCS -> DCS（用于屏幕绘制）
const dcsPoint = Engine.trans.WcsToDcs(wcsPoint);
// 鼠标坐标转 WCS
const mousePoint = new Point2D(event.clientX, event.clientY);
const worldPoint = Engine.canvasToWcs(mousePoint);渲染流程
渲染优化策略
| 策略 | 说明 | 效果 |
|---|---|---|
| 视口裁剪 | 只渲染视口内的实体 | 减少绑定顶点数 |
| 分桶渲染 | 将实体按区域分组 | 提高缓存命中率 |
| 细节层次 | 缩小时简化显示 | 减少顶点数量 |
| 增量更新 | 只更新变化的实体 | 减少重绘范围 |
| 批量绘制 | 合并相同样式的绘制 | 减少状态切换 |