在Web应用程序中实现撤消

Question

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

所以,这是我的问题(我认为维基的好候选人):

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

谢谢大家.

Answer 1

您需要具有用于创建和删除对象的功能.然后将这些函数传递给撤消管理器.请参阅我的javascript undo manager的演示文件: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];

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

再举一个例子，如果您想要对学生进行添加和删除操作不可撤销，您可以执行以下操作：

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

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