Rasterex API/docs/components/measurement/save

Save

Persist measurement data to the database.

Overview

The save command triggers a request to the canvas to extract and send all active measurements and annotations to the host application for persistence.

After the save request runs, listen for saveAnnotationsComplete to confirm whether the save completed successfully.

Control flow

Saving measurements follows a request-completion pattern where the host sends saveAnnotations and listens for saveAnnotationsComplete.

Host Sends

1. Host Sends

The host application sends the saveAnnotations message to the canvas.

typescript
const iframe = document.querySelector('[data-viewer-iframe]') as HTMLIFrameElement;
iframe.contentWindow?.postMessage({
  type: 'saveAnnotations'
}, '*');
Canvas Emits

2. Canvas Emits Completion Event

The canvas emits `saveAnnotationsComplete` after the save flow finishes.

typescript
{
  type: 'saveAnnotationsComplete',
  payload: {
    success: true,
    requestId: 'save-001'
  }
}
Host Sends

3. Host Handles Completion

The host uses the completion event to show success or failure state and continue its workflow.

typescript
window.addEventListener('message', (event) => {
  if (event.data?.type !== 'saveAnnotationsComplete') return;

  const { success, requestId } = event.data.payload;
  console.log('saveAnnotationsComplete', { success, requestId });
});

Implementation

Manual Save

const iframe = document.querySelector('[data-viewer-iframe]');
iframe.contentWindow.postMessage({
  type: 'saveAnnotations'
}, '*');

Listen for saveAnnotationsComplete

window.addEventListener('message', (event) => {
  if (event.data?.type !== 'saveAnnotationsComplete') return;

  const { success, requestId } = event.data.payload;
  console.log('saveAnnotationsComplete', { success, requestId });
});

Auto-Save

You can enable auto-save to have the canvas automatically trigger persistence events when measurements are modified. By default, this is set to false.

Toggle Auto-Save

const iframe = document.querySelector('[data-viewer-iframe]');
iframe.contentWindow.postMessage({
  type: 'setAutoSave',
  payload: { enabled: true }
}, '*');

Additional Resources

Continue with related measurement workflows and API references.