实施撤消

Question

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

所以，这是我的问题（我认为是 wiki 的良好候选者）：

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

Answer 1

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

演示代码显示画布，但代码是不可知的。

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

我自己在一个网络应用程序中使用了它，该应用程序带有撤消和重做按钮，然后是保存按钮。

Answer 2

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

(function() {
    
    //current state would probably come from the server, hard coded here for example
    var currentState = JSON.stringify({
        firstName: 'Paul',
        lastName: 'Tyng',
        text: 'Text' 
    })
       , undoStack = [] //this represents all the previous states of the data in JSON format
        , performingUndo = false //flag indicating in the middle of an undo, to skip pushing to undoStack when resetting properties
        , viewModel = ko.mapping.fromJSON(currentState); //enriching of state with observables
        
    
    //this creates a dependent observable subscribed to all observables 
    //in the view (toJS is just a shorthand to traverse all the properties)
    //the dependent observable is then subscribed to for pushing state history
    ko.dependentObservable(function() {
        ko.toJS(viewModel); //subscribe to all properties    
    }, viewModel).subscribe(function() {
        if(!performingUndo) {
        undoStack.push(currentState);
        currentState = ko.mapping.toJSON(viewModel);
    }
    });
        
    //pops state history from undoStack, if its the first entry, just retrieve it
        window.undo = function() {
            performingUndo = true;
            if(undoStack.length > 1)
            {
                currentState = undoStack.pop();
                ko.mapping.fromJSON(currentState, {}, viewModel);
            }
            else {
                currentState = undoStack[0];
                ko.mapping.fromJSON(undoStack[0], {}, viewModel);
            }
            performingUndo = false;
    };
    
    ko.applyBindings(viewModel);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/1.2.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<div>
    <button data-bind="click: function() { undo(); }">Undo</button>
    <input data-bind="value: firstName" />
    <input data-bind="value: lastName" />
    <textarea data-bind="value: text"></textarea>
</div>

它使用 MVVM 模型，因此您的页面状态以 JavaScript 对象表示，并为其维护历史记录。

Answer 3

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

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

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

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

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

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