Message API/docs/components/measurement/delete

Delete

Remove specific measurements from the canvas.

Overview

To remove a specific measurement, send the delete command along with the unique identifier (GUID) of the annotation.

This GUID is typically obtained when the measurement is created or selected.

After the delete request runs, listen for `annotationDeleted` to confirm that the viewer completed the removal.

Control flow

Deletion is a host-driven action followed by a completion event from the viewer.

Host Sends

1. Host Sends

The host application sends the deleteAnnotation message with a specific GUID.

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

2. Viewer Emits annotationDeleted

The viewer removes the element, updates the canvas, and emits `annotationDeleted`.

typescript
{
  type: 'annotationDeleted',
  payload: {
    guid: '550e8400-e29b-41d4-a716-446655440000'
  }
}
Host Sends

3. Host Handles Completion

The host listens for the completion event and updates its own UI or state.

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

  const { guid } = event.data.payload;
  console.log('annotationDeleted', { guid });
});

Implementation

Delete by GUID

const iframe = document.querySelector('[data-viewer-iframe]');
iframe.contentWindow.postMessage({
  type: 'deleteAnnotation',
  payload: { uniqueId: '550e8400-e29b-41d4-a716-446655440000' }
}, '*');

Listen for annotationDeleted

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

  const { guid } = event.data.payload;
  console.log('annotationDeleted', { guid });
});

Additional Resources

Continue with related measurement workflows and API references.