Question

我正在尝试使用RxJS复制this demo。该演示是一个小应用程序，用户控制机器人。机器人可以向前或向后移动，向左或向右旋转，以及拾取或放下物品。用户可以对命令进行排队（例如“前进”，“旋转”），并且当用户单击“执行”按钮时，将执行队列中的命令。用户还可以撤消已经执行的命令。

传统上，使用尚未执行的命令的队列来实现此应用程序非常容易。执行的命令被压入堆栈，每当按下撤销按钮时，顶部命令就会弹出并撤消。

我能够“收集”命令并通过执行以下操作来执行它们：

var id = 0;
var add = Rx.Observable.fromEvent($("#add"), 'click').map(function(){
  var ret = "Command_"+id;
  id++;
  return ret
})
var invoke = Rx.Observable.fromEvent($("#invoke"), 'click')
var invokes = add.buffer(invoke)

buffer（）方法将流转换为数组流。我可以订阅调用流并获取命令数组：

invokes.subscribe(function(command_array){...})

或者我可以创建一个Rx.Subject（），我只是逐个推送命令：

var invoked_commands = new Rx.Subject()
invokes.subscribe(function(command_array){
  for(var i=0; i < command_array.length; i++){
    invoked_commands.onNext(command_array[i])
  }
});

invoked_commands.subscribe(function(command){ ...});

说实话，我不知道哪种方法会更好，但我再一次不知道这对我来说是否过于相关。我一直在试图弄清楚如何实现撤消功能，但我完全不知道该怎么做。

在我看来，它必须是这样的（抱歉格式化）：

-c1 --- C2-C3 ---------＆GT;

----------------û--- U-＆GT; （“你”=点击撤消按钮）

---------------- C3 - C2＆GT; （获取从最新到最旧的命令，调用undo（）方法）

所以我的问题有两个：

我收集命令的方法是否合适？
如何实施撤消功能？

Answer 1

您必须继续维护撤消堆栈的状态。我认为你收集命令的方法是合理的。如果保留Subject，则可以通过再次订阅主题来将撤消功能与命令执行分离：

var undoQueue = [];
invoked_commands.subscribe(function (c) { undoQueue.unshift(c); });
Rx.Observable
    .fromEvent($("#undo"), "click")
    .map(function () { return undoQueue.pop(); })
    .filter(function (command) { return command !== undefined; })
    .subscribe(function (command) { /* undo command */ });

编辑：仅使用没有可变数组的Rx。这似乎不必要地令人费解，但是哦，它很有用。我们使用scan来维护撤消队列，并使用当前队列发出元组以及是否应该执行撤消命令。我们将执行的命令与撤消事件合并。执行命令添加到队列，撤消从队列中弹出的事件。

var undo = Rx.Observable
    .fromEvent($("#undo"), "click")
    .map(function () { return "undo"; });
invoked_commands
    .merge(undo)
    .scan({ undoCommand: undefined, q: [] }, function (acc, value) {
        if (value === "undo") {
            return { undoCommand: acc.q[0], q: acc.q.slice(1) };
        }

        return { undoCommand: undefined, q: [value].concat(acc.q) };
     })
     .pluck("undoCommand")
     .filter(function (c) { return c !== undefined })
     .subscribe(function (undoCommand) { ... });

Answer 2

我刚创造了类似的东西，虽然有点复杂。也许它有助于某人。

  // Observable for all keys
  const keypresses = Rx.Observable
    .fromEvent(document, 'keydown')

  // Undo key combination was pressed
  //  mapped to function that undoes the last accumulation of pressed keys
  const undoPressed = keypresses
    .filter(event => event.metaKey && event.key === 'z')
    .map(() => (acc) => acc.slice(0, isEmpty(last(acc)) && -2 || -1).concat([[]]))

  // a 'simple' key was pressed
  const inputChars = keypresses
    .filter(event => !event.altKey && !event.metaKey && !event.ctrlKey)
    .map(get('key'))
    .filter(key => key.length === 1)

  // the user input, respecting undo
  const input = inputChars
    .map((char) => (acc) =>
      acc.slice(0, -1).concat(
        acc.slice(-1).pop().concat(char)
      )
    ) // map input keys to functions that append them to the current list
    .merge(undoPressed)
    .merge(
      inputChars
        .auditTime(1000)
        .map(() => (acc) => isEmpty(last(acc)) && acc || acc.concat([[]]))
    ) // creates functions, that start a new accumulator 1 sec after the first key of a stroke was pressed
    .scan(
      (acc, f) => f(acc),
      [[]],
    ) // applies the merged functions to a list of accumulator strings
    .map(join('')) // join string
    .distinctUntilChanged() // ignore audit event, because it doesn't affect the current string

使用RxJS模拟命令队列和撤消堆栈

2 个答案: