开源白板工具 Excalidraw 架构解读
最新回答
幼儿园的小酷比
2022-12-29 17:36:42
Excalidraw 使用 Vite、React、TypeScript、Yarn 和 Husky 构建。原本的脚手架是 Create React App，但已不再维护。Vite 是当前流行的 React 脚手架，Excalidraw 选择替换以保持与社区同步。
React 被用于实现 UI 层，国外开发者偏好此框架。TypeScript 提供了类型注解，减少了类型错误，而 Yarn 则作为包管理器使用。Husky 库在本地 git commit 时执行校验，虽然 Excalidraw 已改用编译时校验。
架构设计中，模块耦合程度较高，核心逻辑集中在 App 类组件中，导致 App.tsx 文件行数达到8000+行。数据状态大多保存在组件的 state 属性中，编辑器内核与 UI 强绑定，不支持简单的 UI 层更换，如将 React UI 替换为 Vue。
Excalidraw 选择了 Canvas 2D 渲染方案，其优点是 API 封装友好，但性能较弱，不充分利用 GPU 并行计算能力。图形库使用 rough，一款基于 Canvas 2D 和 SVG 的手绘风格图形库。
工具逻辑混合写在鼠标事件响应函数中，没有实现工具管理类，维护性较差。图形树状态保存在 Scene 类中，包含组的概念，图形对象的 groupIds 表示元素所属组。渲染通过 renderStaticScene 方法实现，顺序递归图形树，没有使用脏矩形局部渲染。
图形拾取使用几何法，不同图形的渲染逻辑混写在一起。历史记录逻辑在 History 类中，维护两棵树以比较图形版本号，只在有变更时添加历史记录项。状态管理库 jotai 用于通知组件更新。
Excalidraw 通过剔除视口外的图形、缓存、缩放防抖和滚动事件节流优化渲染性能。国际化代码在 i18n.ts 文件中，使用 jotai 通知组件更新。代码条理有待优化，整体功能完善，但架构设计有改进空间。
本文解析 Excalidraw 的关键功能，提供图形编辑器架构设计的参考。了解 Excalidraw 的架构设计有助于深入学习图形编辑器的开发。
热门标签
