在Web应用程序中实现撤消

Question

我正在创建一个地图编辑webapp，我们可以在其中创建和编辑折线，多边形等。我在网上找到关于撤消实现的信息时遇到了麻烦，我发现抱怨“我们需要撤消”和“这是我的使用闭包的命令模式“但我认为在那个和完整的撤销/重做界面之间有相当的道路。

所以，这是我的问题（我认为维基的好候选人）：

• 应该我管理堆栈，还是有办法将我的命令发送到浏览器的堆栈？ （以及如何处理本机命令，如本例中的textifield中的文本编辑）
• 当某些命令是浏览器本机时，我如何处理“命令压缩”（命令分组）
• 如何检测撤消（ctrl + z）按键？
• 如果我注册了一个keyup事件，我该如何决定是否阻止默认？
• 如果没有，我可以在某处注册一些不相关的处理程序吗？
• 用户不习惯在网上撤消，我如何“训练”他们在我的应用程序中进行探索/撤消？

谢谢大家。

Answer 1

您需要具有对象创建和删除功能。然后将这些函数传递给撤消管理器。请参阅我的javascript撤消管理器的演示文件：https://github.com/ArthurClemens/Javascript-Undo-Manager

演示代码显示了canvas，但代码是不可知的。

它不包含键绑定，但可以帮助您完成第一步。

我自己在Web应用程序中使用了这个按钮，用于撤消和重做，然后保存。

Answer 2

以下是使用Knockout JS的N级撤消示例：

http://jsfiddle.net/paultyng/TmvCs/22/

它使用MVVM模型，因此您的页面状态在javascript对象中表示，它保留了历史记录。

Answer 3

Cappuccino的自动撤销支持的工作方式是告诉撤消管理器哪些属性应该是可撤消的。例如，假装您正在管理学生的记录，您可能会执行以下操作：

[theUndoManager observeChangesForKeyPath:@"firstName" ofObject:theStudent];
[theUndoManager observeChangesForKeyPath:@"lastName" ofObject:theStudent];

现在无论在UI中如何更改学生姓名，点击撤消都会自动将其还原。 Cappuccino还会在同一个运行循环中自动处理合并更改，当撤销堆栈上有项目等时，将文档标记为“脏”（需要保存）（换句话说，上面应该是您需要做的所有支持撤销）。

另一个例子是，如果你想让学生的添加和删除无法撤销，你可以做以下事情：

[theUndoManager observeChangesForKeyPath:@"students" ofObject:theClass];

由于“学生”是该课程中的学生数组，因此将跟踪此数组中的添加和删除。