低代码开发 —— 撤销与重做实现方案

2023-11-12 00:02:05

撤销重做功能实现方案

1. 设计思想：

撤销重做的目的和原理： 撤销重做，是为了在操作失败的情况下提供便捷可靠的方案，让操作者安全地撤销或重做此前执行的错误操作，直至恢复到期望状态，从而保障操作可靠性。撤销重做可分为撤销（Undo）与重做（Redo）两部分，撤销是将当前的画布状态恢复到上一个状态，重做则是将当前的画布状态恢复到下一个状态，两个操作互为逆向操作，可以完美衔接，实现复杂操作的一步步撤销与重做。

设计思路： 撤销重做功能的实现的关键在于对场景操作进行记录和还原，我们可以使用栈来记录操作历史，每次执行一个操作就将操作信息压入栈中，撤销时则将栈顶的操作弹出并还原，重做时则将栈顶的操作弹出并重新执行。

2. 实现流程：

1）操作记录：

在设计器中，我们需要对场景操作进行记录，以便在撤销时可以恢复到上一个状态。我们可以使用一个栈来记录操作历史，每次执行一个操作就将操作信息压入栈中。操作信息可以包括操作类型、操作对象、操作属性等信息。

2）撤销操作：

当用户点击撤销按钮时，我们将从栈顶弹出一个操作信息，并根据操作信息还原画布状态。还原操作需要根据操作类型和操作对象来进行，例如，如果操作类型是添加组件，则需要将组件从画布中删除；如果操作类型是修改组件属性，则需要将组件属性恢复到修改前的值。

3）重做操作：

当用户点击重做按钮时，我们将从栈顶弹出一个操作信息，并根据操作信息重新执行该操作。重新执行操作需要根据操作类型和操作对象来进行，例如，如果操作类型是添加组件，则需要将组件添加到画布中；如果操作类型是修改组件属性，则需要将组件属性修改为修改后的值。

3. 实现细节：

1）记录操作信息时，我们需要考虑操作的原子性和可逆性，一个原子操作对应一个栈顶信息。在操作设计器时，一些组件可能包含了多个可操作的选项，如边框颜色、圆角、边框样式等，如只记录了整个组件的操作，则在撤销操作时，没法撤销到预期的状态。因此，在进行操作记录时，我们要将组件涉及的各个属性都进行记录，以保证记录操作的原子性。

2）撤销操作是通过栈的先进后出的特性实现的，但为了避免常规场景下需多层撤销才能恢复到期望状态的操作，可以通过对用户的输入进行分析，对重复类型操作进行识别，在重复类型的操作执行时，不必入栈，相反应替换栈顶操作。该方案保证了撤销操作的可用性和用户习惯的一致性。

3）重做操作与撤销操作相对应，同样也是通过栈的特性实现的，需要注意的是，当重做操作执行后，应将栈顶操作移除，以防止重做操作重复执行。