Batch Updates and Render Suspension

Overview

Use updateObjectsBatch and suspendRender to apply many object updates without syncing every Konva node or drawing on each change. This is especially useful for server-side rendering and large auto-layout updates.

Access in the Editor

const editor = editorNode.getEditor()

Methods

updateObjectsBatch

updateObjectsBatch(updates: Array<{ id: string, updater: (object: AnyEditorObject) => void }>): void

• Applies each updater in order.
• Skips entries with missing ids or invalid updaters.
• Defers Konva sync and draws until the batch completes.

suspendRender

suspendRender<T>(callback?: () => T): T | (() => void)

• When a callback is provided, rendering is suspended for the duration of the callback.
• Without a callback, returns a resume() function you must call to flush updates.
• Nested suspensions are supported; rendering resumes when the outermost call completes.

Example

editor.suspendRender(() => {
  editor.updateObjectsBatch([
    {
      id: titleId,
      updater: (object) => {
        object.transform.x = 120
        object.transform.y = 64
      },
    },
    {
      id: imageId,
      updater: (object) => {
        object.opacity = 0.9
      },
    },
  ])
})

Notes

• updateObjectsBatch uses the same validation rules as updateObject: missing objects are ignored and updater errors are discarded.
• While suspended, Konva nodes are not synchronized. Always resume before exporting or taking a snapshot.
• Auto Layout uses batch updates internally, so large stacks benefit automatically.