Managing a single undo/redo stack for a machine and spawned actors.

[dustinknopoff]

I've got a project with undoable/redoable events in it's main machine and also spawned actor machines. I'm having issues where the spawned actor machines when undoing an event, add back the event in to the undostack. I've tried adding a undoable toggle to the payload but it gets unwieldy very quickly.

Has anyone else run in to something like this or have advice for how to handle this?

[mattpocock]

@dustinknopoff Do you have a codesandbox you could show us so we get a clearer idea of what you're running into?

[davidkpiano]

Here's a great example that somebody else made: https://codesandbox.io/s/xstate-undo-redo-i3eiu

In short, you maintain the undo/redo stack in context.

[dustinknopoff]

Right! I've been basing my attempts at implementing this off of that and this article

The way I've implemented the actors, the parent machine has no insight in to the effects of an event passed to an actor. That is if I send an event SET_X, {x: 24} , In the actor, one of the actions is to sendParent({ type: COMMIT, { object: { shape: {x: 24, y...}}}) And the parent machine blanket applies the payload to it's context. It also sends s sendParent({type: "ADD_UNDO", ...}) which tells the parent to add the passed event to it's context's undo stack

This means that when an actor receives an event it has no idea whether to send the event to add to the undo stack and the neither does the parent.

So obviously there's something missing. I was hoping someone had run in to a similar problem before and new a alternate strategy.

[davidkpiano]

Can you share your code?

[dustinknopoff]

I've been trying to distill this in to a code sandbox but it's been very difficult to show. So here's the relevant parts:

Parent Machine Events

                ADD_UNDO_REDO: {
                  actions: ["addUndoRedo"],
                },
                UNDO: {
                  actions: ["undo"],
                  cond: (ctx: FlowMachineContext, _: FlowEvents) =>
                    ctx.undoStack.length > 0,
                },
                UNDO_CLEANUP: {
                  actions: ["undoCleanup"],
                  cond: (ctx: FlowMachineContext, _: FlowEvents) =>
                    ctx.undoStack.length > 0,
                },
                REDO: {
                  actions: "redo",
                  cond: (ctx: FlowMachineContext, _: FlowEvents) =>
                    ctx.redoStack.length > 0,
                },
                REDO_CLEANUP: {
                  actions: ["redoCleanup"],
                  cond: (ctx: FlowMachineContext, _: FlowEvents) =>
                    ctx.redoStack.length > 0,
                },
                OVERRIDE_SCREEN_PREVIEW: { actions: "overrideScreenPreview" },
                MARK_ALL_INACTIVE: { actions: "markAllInactive" },
                CHANGE_TITLE: {
                  actions: [addToStack, "changeTitle"],
                },
                REORDER_SCREENS: { actions: [addToStack, "reorderScreens"] },
                REORDER_MMOS: { actions: [addToStack, "reorderMmos"] },
                DELEGATE: {
                  actions: ["delegate"],
                },
                DELETE: { actions: [addToStack, "deleteObject"] },
                COMMIT: { actions: "commit" },
                ADD_MMO: { actions: [addToStack, "addMmo"] },

Context

export interface MachineContext {
  index: number;
  flow: Flow;
  undoStack: {
    undo: UndoEvents;
    redo: UndoEvents;
    id: string;
    kind: EventKind;
  }[];
  redoStack: {
    undo: UndoEvents;
    redo: UndoEvents;
    id: string;
    kind: EventKind;
  }[];
  drafts: {
    obj: DraftObjects;
    screen: number;
    ref?: Actor<any, AnyEventObject>;
  }[];
  currentObject: FlowObjects | null;
  loading: string[];
  sendAction?: {
    undo: UndoEvents;
    redo: UndoEvents;
    id: string;
    kind: EventKind;
  };
  publishConfig: {
    count: number;
    asDraft: boolean;
    forceToView: boolean;
  };
  hasUndoed: boolean;
}

An actor event handling

    SET_POSITION: {
            actions: [commitToParent, addToStack, "setPosition"],
            cond: isValidPos,
          },

//...
/**
 * Sends to parent 'flow' machine an event to be added to it's context's undo stack
 */
const addToStack = sendParent((ctx: MediaMachineContext, _: ChildEvents) => ({
  type: "ADD_UNDO_REDO",
  actions: ctx.sendAction,
})) as any;

/**
 * Sends to parent 'flow' machine an action to be committed to it's context's flow machine
 */
const commitToParent = sendParent(
  (ctx: MediaMachineContext, _: ChildEvents) => ({
    type: "COMMIT",
    mmo: ctx.mmo,
    id: ctx.mmo.id,
    shouldDraft: false,
  })
) as any;

Relevant actions

/**
 * Adds an undo event to the stack
 */
export const addUndoRedo = assign<FlowMachineContext, FlowEvents>({
  undoStack: (ctx: FlowMachineContext, event: FlowEvents) => {
    return event.type === "ADD_UNDO_REDO"
      ? ctx.undoStack.concat([event.actions])
      : ctx.undoStack;
  },
});

export const undo = pure<FlowMachineContext, FlowEvents>(
  (ctx: FlowMachineContext, event: FlowEvents) => {
    let undoStack = ctx.undoStack;
    if (event.type === "UNDO") {
      // See `cond` in machine that will not call side effect if undoStack is empty
      let payload = undoStack[undoStack.length - 1];
      console.debug(payload, send);
      switch (payload.kind) {
        case EventKind.Mmo:
          return [
            { type: "SET_CURRENT_OBJECT", id: payload.id },
            {
              type: "DELEGATE",
              payload: payload.undo,
              id: payload.id,
            },
            { type: "UNDO_CLEANUP" },
          ].map((r) => send(r));
        default:
          return send(payload.undo);
      }
    }
  }
);

export const undoCleanup = assign<FlowMachineContext, FlowEvents>({
  // If we undo, our redo stack is invalidated
  redoStack: (ctx: FlowMachineContext) => {
    let { undoStack } = ctx;
    return [undoStack[undoStack.length - 1]];
  },
  undoStack: (ctx: FlowMachineContext, event: FlowEvents) => {
    let undoStack = ctx.undoStack;
    if (event.type === "UNDO") {
      console.debug("FIRING CLEANUP");
      // See `cond` in machine that will not call side effect if undoStack is empty
      undoStack.pop()!;
    }
    return undoStack;
  },
});

Here's an example of the undoStack after a single event that can be undone is fired:

[
  {
    "undo": {
      "type": "SET_POSITION",
      "x": 154,
      "y": 140
    },
    "redo": {
      "type": "SET_POSITION",
      "x": 154.28235294117647,
      "y": 24.422450526180153
    },
    "id": "D606866B-81B7-4338-8FE5-B291BB7C8EF0",
    "kind": 1
  }
]

After firing undo:

[
  {
    "undo": {
      "type": "SET_POSITION",
      "x": 154,
      "y": 140
    },
    "redo": {
      "type": "SET_POSITION",
      "x": 154.28235294117647,
      "y": 24.422450526180153
    },
    "id": "D606866B-81B7-4338-8FE5-B291BB7C8EF0",
    "kind": 1
  },
  {
    "undo": {
      "type": "SET_POSITION",
      "x": 154.28235294117647,
      "y": 24.422450526180153
    },
    "redo": {
      "type": "SET_POSITION",
      "x": 154,
      "y": 140
    },
    "id": "D606866B-81B7-4338-8FE5-B291BB7C8EF0",
    "kind": 1
  }
]

[dustinknopoff]

What I ended up doing was make another state undo_redo which handles all of the same events except for the event for adding to the undo/redo stack. That event, (which I've called ADD_UNDO_REDO) just has a target of the previous state and no actions.