Efficient updates for translating objects in 2d canvas app

1

I’m working on a 2d canvas app and am having trouble with blowing up my document size when trying to translate sets of objects.

I’ve been looking at this post: Handling slow mergeUpdates on server - #3 by dmonad but I’m not sure how to solve this issue when operating on groups of objects. Is there a way to ask Yjs to discard or merge transactions? I know the UndoManager can do this, but can the Yjs document do this as well?

Here’s a rough outline of my setup:

type sceneNode = Y.Map<{
  slug: string,
  material: Y.Map<Material>,
  transform: number[]
}>

...

const sceneNodes = Y.Doc.getArray("sceneNodes")

...

window.onMouseMove(( event ) => {

    const selectedNodes = getSelectedSceneNodes();

    if (!selectedNodes.length) return;

    const doc = this.app.yDoc;

    doc.transact(() => {
      selectedNodes.forEach((sceneNode) => {

        const original = sceneNode.get("transform");
        
        const newTransform = getTransform( original, event );

        sceneNode.set("transform", transform);
      });
    });
})

Thanks in advance!

2

Creating #selectedNodes number of updates for every mouse event (tens to hundreds a second depending on the OS and browser) is quite excessive, don’t you think? Yjs is a CRDT and can only compact operations; it must not fully delete operations from history. So maybe you limit the number of changes to ~1 per second and use transitions to animate…

1 Like
3

Ok @dmonad - thanks :pray:. After typing the question I kind of figured “don’t create the transactions” would be the answer.