Message API/docs/components/measurement/extraction

Data Extraction

Bulk extract all measurement and annotation data from the viewer.

Overview

While events like `annotationCreated` are useful for real-time updates, you sometimes need to extract the entire state of the canvas—for example, during a final export or a summary report.

The `getAnnotationData` API allows the host to request a normalized list of all active measurements and annotations currently present in the viewer.

  • Bulk Extraction: Retrieves all measurements in a single request.
  • Filtering: Scope results by type or category (e.g., only "measurement").
  • Correlation: Use Request IDs to synchronize async responses.

Quick Examples

Request all data and listen for the asynchronous response.

Request all data

// Send request from Host to Canvas
iframeEl.contentWindow.postMessage({
  type: 'getAnnotationData',
  payload: { filter: 'all' }
}, '*');

Listen for items

window.addEventListener('message', (event) => {
  if (event.data.type === 'getAnnotationData') {
    const { items } = event.data.payload;
    console.log(`Extracted ${items.length} items`);
  }
});

Control flow

Data extraction is a request-response cycle initiated by the host application.

Host Sends

1. Host Requests Data

The host sends a getAnnotationData message to the canvas.

typescript
{
  type: 'getAnnotationData',
  payload: { 
    filter: 'all', 
    requestId: 'export-job-001' 
  }
}
Canvas Emits

2. Viewer Compiles Data

The viewer gathers all active markups, measurements, and counts.

typescript
Canvas Emits

3. Viewer Returns Result

The compiled list is broadcast back to the host window.

typescript
{
  type: 'getAnnotationData',
  payload: {
    requestId: 'export-job-001',
    filter: 'all',
    items: [
       { 
         guid: 'D981187C-8192-46E3-B64C-F8F6B70B6073', 
         data: { 
           DimText: '137.96 mm',
           FileName: 'C:\\Rasterex\\RxView360Server\\bin\\cache\\rx_3c_54c226f0\\version 42.pdf',
           FillColor: 'rgba(255,0,0,1)',
           ID: 1,
           LineColor: 'rgba(165,42,42,1)',
           LineWidth: 0.07818840740727304,
           Locked: false,
           Rect: { x: 199.6, y: 177.1, w: 230.3, h: 152.8 },
           Status: 'none',
           Subtype: 0,
           TextColor: 'rgba(165,42,42,1)',
           TimeStamp: 1770125135915,
           Tool: 'Dimension Line',
           Transparency: 100,
           Type: 7,
           UniqueID: 'D981187C-8192-46E3-B64C-F8F6B70B6073',
           ViewName: 'Page 1'
         } 
       }
    ],
    count: 7
  }
}

Data Structure

The response payload returns an array of items, each containing the measurement metadata.

interface GetAnnotationDataResponse {
  items: GetAnnotationDataItem[];
  count?: number;
  filter?: string;
  requestId?: string;
}

interface GetAnnotationDataItem {
  guid: string;
  isMeasure?: boolean;      // True if this is a calculation tool
  markupnumber?: number;   // Index in the viewer's list
  type?: number;           // Tool type ID
  timestamp?: number;      // Creation timestamp
  data: {
    DimText?: string;      // Formatted measurement text
    Tool?: string;         // Tool name (e.g., "Dimension Line")
    ViewName?: string;     // Page/View name
    UniqueID?: string;     // Internal unique ID
    TimeStamp?: number;    // UTC timestamp
    [key: string]: any;    // Other properties (LineColor, Rect, etc.)
  };
}
Data Structure

Additional Resources

Coordinate your extraction workflows with persistence and selection APIs.