How to inspect changes made by a transaction?

1

Hi! I’m trying to implement undo, and I’m grateful that Yjs UndoManager gets me a lot of the way there. Thanks for that! But I think there’s some gaps in my knowledge, or perhaps in Yjs.

My web app has on-screen objects that can be dragged around. A drag should be undoable as a single operation, so I think I need to not capture all the intermediate states during a drag. Seems there’s 2 ways to do this - using an origin in transact(), or using captureTransaction(). My data is all in Y.Maps, so I think I can’t specify an origin. I’m trying to use captureTransaction() which takes a transaction and decides if it should be undoable.

I’ve looked at the Y.Transaction data structure, and looked at the code, but I still can’t detect what has changed. I need to be able to see what Y.Map keys the transaction changes, and access the previous and new values of those keys. Something like:

(yMap: Y.Map, key: string, oldValue: any, newValue: any) => {
  if (yMap === myDraggableObjectMap) {
    return !newValue.flags.DRAGGING;
  }
  return true;
}

Is there demo code which can do that? Fine with me if it only works for Y.Map.

2

Hi, welcome.

I don’t know anything about the UndoManager, but to answer your question, you can use yMap.observe to access the previous and new values of a transaction.

Check out Observing changes: Y.MapEvent in the link below:

1 Like