Excalidraw 项目中元素中心点计算的优化实践

在图形编辑工具 Excalidraw 的开发过程中，开发团队发现代码库中存在多处重复计算元素中心点的逻辑。这些重复代码不仅增加了维护成本，也容易导致不一致性问题。本文将详细介绍该问题的发现过程、解决方案以及实施细节。

问题背景

在 Excalidraw 这样的绘图应用中，经常需要计算各种图形元素的中心点坐标。原始代码中，开发人员直接在多个文件中重复使用相同的计算公式：x + width / 2, y + height / 2。这种重复代码存在几个明显问题：

1. 代码冗余：相同的计算逻辑散布在多个文件中
2. 维护困难：如果需要修改计算方式，需要修改多处代码
3. 可读性差：直接使用公式不如命名良好的函数直观

解决方案

开发团队决定通过创建一个统一的工具函数来解决这个问题。具体方案包括：

1. 在 packages/excalidraw/element/utils.ts 文件中新增 elementCenterPoint 函数
2. 该函数接收一个 ExcalidrawElement 类型参数
3. 返回一个 GlobalPoint 类型的中心点坐标
4. 重构所有使用原始计算公式的地方，改为调用这个新函数

实施细节

函数实现

新函数的核心实现非常简单：

export function elementCenterPoint(element: ExcalidrawElement): GlobalPoint {
    return {
        x: element.x + element.width / 2,
        y: element.y + element.height / 2
    };
}

这个实现虽然简单，但带来了几个好处：

1. 集中管理：所有中心点计算逻辑集中在一处
2. 类型安全：输入输出都有明确的类型定义
3. 易于扩展：未来如果需要调整计算方式，只需修改这一处

重构范围

重构工作涉及多个核心功能模块，包括但不限于：

1. 元素绑定：处理元素间的连接关系
2. 碰撞检测：判断元素间是否发生重叠
3. 元素裁剪：处理元素的裁剪操作
4. 距离计算：计算元素间的空间距离

这些模块都需要频繁使用元素中心点坐标，通过统一函数调用，显著提高了代码的一致性和可维护性。

技术考量

在实现这个优化时，开发团队考虑了以下几个技术要点：

1. 性能影响：新增函数调用是否会带来性能开销

   • 经评估，现代JavaScript引擎对小型函数调用优化得很好
   • 可读性和维护性提升的价值远大于微小的性能代价

2. 类型系统：确保TypeScript类型定义准确

   • 明确定义了输入参数和返回值的类型
   • 利用了项目现有的类型体系

3. 测试覆盖：确保重构不影响现有功能

   • 依赖项目的单元测试保障重构安全
   • 特别测试了边界情况（如零宽度/高度的元素）

最佳实践

通过这个案例，我们可以总结出一些适用于类似项目的代码优化实践：

1. 识别重复模式：定期审查代码，寻找重复出现的计算模式
2. 适时抽象：当相同逻辑出现3次以上时，考虑抽象为函数
3. 命名清晰：工具函数名称应准确描述其功能
4. 类型完善：充分利用类型系统提高代码可靠性
5. 渐进重构：可以分阶段逐步替换旧实现，降低风险

总结

Excalidraw 项目通过将重复的元素中心点计算逻辑抽象为统一函数，显著提高了代码质量。这种做法不仅减少了代码重复，还增强了代码的可读性和可维护性，为未来的功能扩展打下了良好基础。对于类似的图形编辑项目，这种集中管理核心计算逻辑的模式值得借鉴。