Documenso签名板撤销功能异常分析与解决方案

问题概述

在Documenso项目的Web应用中，用户反馈签名板的撤销功能存在异常行为。当用户在设置页面尝试修改签名时，点击撤销按钮会清除整个画布内容，而不是仅撤销最近的操作。

技术背景

签名板功能通常基于HTML5 Canvas实现，需要维护一个操作历史栈来支持撤销功能。每次用户在画布上进行绘制操作（如签名笔画）时，应该将该操作记录到历史栈中。当用户点击撤销时，应该从栈顶弹出最近的操作并恢复前一个状态。

问题分析

通过测试重现，我们确认了以下现象：

1. 在正常绘制情况下，撤销功能有时会完全清空画布
2. 当绘制超出画布范围时，撤销按钮甚至不会显示
3. 撤销逻辑没有正确区分部分撤销和完全重置

核心问题可能出在：

• 历史状态管理不完善，没有正确维护操作序列
• 撤销逻辑错误地将整个画布清空而非恢复前一个状态
• 范围条件处理不足，导致异常行为

解决方案建议

1. 重构历史状态管理：

   • 实现一个操作历史栈，记录每个绘制操作
   • 每次绘制完成后，将当前画布状态快照存入历史栈
   • 撤销时从栈中恢复前一个状态

2. 改进撤销逻辑：

   • 确保撤销操作只影响最近一次绘制
   • 添加范围检查，防止操作超出画布范围
   • 维护最小历史记录，确保至少保留初始空白状态

3. 增强用户体验：

   • 在画布范围添加视觉提示
   • 优化撤销按钮的显示逻辑
   • 添加操作反馈，让用户明确知道撤销了什么

实现细节

正确的实现应该包含以下关键代码结构：

class SignaturePad {
  constructor() {
    this.historyStack = []; // 操作历史栈
    this.currentState = null; // 当前状态
  }

  // 记录操作
  recordAction() {
    const state = this.canvas.toDataURL();
    this.historyStack.push(state);
    this.currentState = state;
  }

  // 撤销操作
  undo() {
    if (this.historyStack.length > 1) {
      this.historyStack.pop(); // 移除当前状态
      this.currentState = this.historyStack[this.historyStack.length - 1];
      this.restoreState(this.currentState);
    } else {
      this.clear(); // 只剩初始状态时清空画布
    }
  }
}

测试建议

修复后应进行以下测试：

1. 连续多次绘制后撤销，验证是否逐步回退
2. 绘制超出范围时的行为验证
3. 极端情况测试（如快速连续操作）
4. 不同浏览器兼容性测试

总结

签名板的撤销功能是用户体验的重要组成部分。通过完善状态管理和操作历史追踪，可以解决当前的问题，同时提升整体交互质量。开发者在实现类似画布操作功能时，应该特别注意状态管理和范围条件的处理。