Browse docs

OverviewInstallationCanvasAll ComponentsFilesPDFCADAnnotationMeasurementPlacementAPI Key ManagementSymbol ManagementCollaborationCompareBatch ExportNavigationAll CapabilitiesStyles
Message API/docs/capabilities/styles/annotation-styles

Annotation Styles

Get and set visual properties for specific annotations on the canvas.

Overview

While global styles set the default for new drawings, Annotation Styles allow you to inspect and modify existing elements on the canvas independently.

Each annotation (shape, text, measurement) has its own unique set of styles that can be retrieved and updated via the Host API.

  • Granular Control: Modify thickness, color, or transparency for a single item.
  • Dynamic Updates: Reflect changes immediately on the canvas without reloading.
  • Type-Specific: Access specialized properties like arrow types or count shapes.

Quick Examples

Request properties for a specific annotation and update its appearance.

Fetch properties

// Request properties for a GUID
iframeEl.contentWindow.postMessage({
  type: 'getAnnotationProperties',
  payload: { guid: '550e8400-e29b-... ' }
}, '*');

Update properties

// Apply new styles to a GUID
iframeEl.contentWindow.postMessage({
  type: 'setAnnotationProperties',
  payload: {
    guid: '550e8400-e29b-... ',
    props: {
      strokeColor: '#FF5733',
      lineWidth: 4,
      transparency: 50
    }
  }
}, '*');

Control flow

The interaction follows a standard request-response pattern for reading data, and a one-way command for updates.

Host Sends

1. Host Requests Props

The host pulls current styles for a selected annotation.

typescript
{
  type: 'getAnnotationProperties',
  payload: { guid: 'annot-123' }
}
Canvas Emits

2. Viewer Returns Data

The viewer responds with a snapshot of the current state.

typescript
{
  type: 'annotationProperties',
  payload: {
    guid: 'annot-123',
    success: true,
    props: { strokeColor: '#000000', lineWidth: 1, ... }
  }
}
Host Sends

3. Host Updates Props

The host sends new style values to be applied.

typescript
{
  type: 'setAnnotationProperties',
  payload: {
    guid: 'annot-123',
    props: { strokeColor: '#38BDF8', lineWidth: 3 }
  }
}

Data Structure

The `AnnotationProperties` interface is used for both retrieval and updates.

interface AnnotationProperties {
  strokeColor?: string;     // Line/Shape color
  fillColor?: string;       // Background color
  textColor?: string;       // Text/Label color
  lineWidth?: number;       // Thickness (1-10)
  lineStyle?: number;       // 0: Solid, 1: Dashed, 2: Dotted
  transparency?: number;    // Opacity (0-100)
  locked?: boolean;         // Prevent user modification
  
  // Specialized properties
  text?: string;            // Content for text annotations
  countType?: number;       // Shape ID for Count tools (0-3)
  arrowType?: number;       // Arrow head styles (0-2)
  measureType?: number;     // Calculation format
}
Data Structure

Count Tool Styles

0: Circle

Default circular marker.

1: Square

Solid block marker.

2: Triangle

Pointed indicator.

3: Diamond

Diamond indicator.

For Count annotations, the `countType` property determines the symbol used on the canvas. These can be set programmatically using IDs 0 through 3.

// Change a count marker to a Triangle
postMessage({
  type: 'setAnnotationProperties',
  payload: {
    guid: 'count-001',
    props: {
      countType: 2, // Triangle
      fillColor: '#FFCC00'
    }
  }
});
Count Tool Styles

Additional Resources

Explore related styling and selection APIs.