Using UndoManager as a volatile state

[Guy-Michael]

I'm trying to implement undo\redo support in an open source project I'm attempting to contribute to. As a beginner I'm struggling and would love some assistance.
The project has a diagram editor where you can add and move parts around, connecting them. This diagram is parsed into a JSON file which the user can edit.

if the UndoManager instance is included in .model, the entire undo\redo history gets included in the parsed JSON file. This clutters the file making it unusable for the user. I'd like to keep track of the history without it being part of the actual model, but I can't find how to do that properly.

What I've tried:
turning the instance into a volatile state:
.volatile((self) => ({ history: types.optional(UndoManager, {}), }))
This does not work, it produces an uninitialized reference, compared to the one made with .model:

as per this thread: #1232
I've tried calling .create() to create a so called "real" value, but it threw an exception:
Error: UndoManager should be created as part of a tree, or with "targetStore" in it's environment

Another option is to record the changes into a different tree, as stated in the docs, but I could not figure out how to do that and how it would work.

I'd love some assistance as I have no idea how to proceed. Thank you!

[EmilTholin]

Hi @Guy-Rahamim!

Like you noticed the history returned from the volatile block is not an initialized model, you have to create it yourself.

Example

import { observer } from "mobx-react-lite";
import { types } from "mobx-state-tree";
import { UndoManager } from "mst-middlewares";

const Person = types
  .model({
    name: types.string,
    age: types.number
  })
  .volatile((self) => ({
    undoManager: UndoManager.create({}, { targetStore: self })
  }))
  .views((self) => ({
    get canUndo() {
      return self.undoManager.canUndo;
    },
    get canRedo() {
      return self.undoManager.canRedo;
    }
  }))
  .actions((self) => {
    return {
      setName(name) {
        self.name = name;
      },
      setAge(age) {
        self.age = age;
      },
      undo() {
        self.undoManager.undo();
      },
      redo() {
        self.undoManager.redo();
      }
    };
  });

const person = Person.create({ name: "John Doe", age: 30 });

export default observer(function App() {
  return (
    <div>
      <button onClick={person.undo} disabled={!person.canUndo}>
        {"<"}
      </button>
      <input
        value={person.name}
        onChange={(e) => person.setName(e.target.value)}
      />
      <input
        value={person.age}
        type="number"
        step="1"
        min="0"
        onChange={(e) => person.setAge(Number(e.target.value))}
      />
      <button onClick={person.redo} disabled={!person.canRedo}>
        {">"}
      </button>
    </div>
  );
});

[Guy-Michael]

Thank you very much for your reply!
Running the example you provided me with insight on the matter :)
I had used an uninitialized instance, and tried to initialize it in the wrong way.
Unfortunately, it seems that using the UndoManager in this fashion won't work for our case either way because the diagram is parsed into a JSON file and the simulation assembles itself from that. So anything that does not exist of the JSON file won't apply to the simulation, and that includes history.

But that of course is a very specific case and your answer more than helped.