Measurement Created

The `annotationCreated` event is emitted by the viewer immediately after a user completes a measurement action on the canvas. This allows the host application to persist the data or update the local state without manual save requests.

• Automatic Trigger: Fires as soon as the last point of a measurement is placed.
• Raw Data: Contains full geometric and styling properties.
• Event Object: Includes a unique GUID for tracking.

Attach a message listener to the window to intercept measurement data.

window.addEventListener('message', (event) => {
  if (event.data.type === 'annotationCreated') {
    console.log('GUID:', event.data.payload.guid)
  }
});

window.addEventListener('message', (event) => {
  if (event.data.type === 'annotationCreated') {
    const { DimText } = event.data.payload.data;
    console.log('Measurement:', DimText);
  }
});

The creation of a measurement follows a specific sequence from user interaction to host notification.

// The viewer sends this message automatically
{
  type: 'annotationCreated',
  payload: {
    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'
    }
  }
}

window.addEventListener('message', (event) => {
  if (event.data.type === 'annotationCreated') {
    const { guid, data } = event.data.payload;
    console.log(`New measurement ${guid}: ${data.DimText}`);
  }
});

The `payload` object contains a unique identifier and the complete state of the newly created measurement.

// Example of the returned payload object
{
  guid: "D981187C-8192-46E3-B64C-F8F6B70B6073",
  data: {
    DimText: "137.96 mm",
    Tool: "Dimension Line",
    ViewName: "Page 1",
    FileName: "C:\\Rasterex\\RxView360Server\\bin\\cache\\rx_3c_54c226f0\\version 42.pdf",
    FillColor: "rgba(255,0,0,1)",
    LineColor: "rgba(165,42,42,1)",
    TextColor: "rgba(165,42,42,1)",
    LineWidth: 0.07818840740727304,
    Rect: { x: 199.6, y: 177.1, w: 230.3, h: 152.8 },
    TimeStamp: 1770125135915,
    UniqueID: "D981187C-8192-46E3-B64C-F8F6B70B6073",
    ID: 1,
    Type: 7,
    Subtype: 0,
    Status: "none",
    Locked: false,
    Transparency: 100
  }
}

A typical pattern is to auto-save or update a list of measurements when the creation event fires.

const iframe = document.querySelector('[data-viewer-iframe]');

window.addEventListener('message', (event) => {
  const { type, payload } = event.data;
  
  if (type === 'annotationCreated') {
    const { guid, data } = payload;
    console.log('Measurement created:', guid);
    
    // Example: send to your backend
    fetch('/api/measurements', {
      method: 'POST',
      body: JSON.stringify({ id: guid, metadata: data })
    });
  }
});

Continue with related measurement workflows and API references.

• Save: Save Measurements
• Selection: Select Measurement
• Delete: Delete Measurement
• Technical: API Reference