Annotation Styles

Use viewer.styles.getAnnotationProperties(...) and viewer.styles.setAnnotationProperties(...) to inspect and update the style of an existing annotation by GUID.

Annotation style commands are available after the viewer is mounted, Canvas is ready, and a document is open.

import { createViewer } from "@rasterex/viewer";

const viewer = createViewer({
  container: "#viewer"
});

await viewer.mount();
await viewer.ready();

await viewer.documents.open({
  url: "https://files.example.com/floor-plan.pdf",
  displayName: "Floor Plan.pdf"
});

Listen for selection change events to capture annotation GUIDs:

let selectedGuid: string | null = null;

const unsubscribe = viewer.annotations.on("selected", (event) => {
  selectedGuid = event.guid ?? null;
});

Query the current active properties style configurations of a selected annotation:

• getAnnotationProperties(...) sends getAnnotationProperties and waits for annotationProperties with matching guid values. Avoid overlapping reads for identical GUID references.

const result = await viewer.styles.getAnnotationProperties({
  guid: "550e8400-e29b-41d4-a716-446655440000",
  timeoutMs: 10000
});

if (result.success && result.props) {
  console.log("Stroke color:", result.props.strokeColor);
}

Update properties using the target annotation GUID:

• setAnnotationProperties(...) returns void. Update calls run asynchronously as one-way commands.

viewer.styles.setAnnotationProperties({
  guid: "550e8400-e29b-41d4-a716-446655440000",
  props: {
    strokeColor: "#38BDF8",
    lineWidth: 4,
    transparency: 30
  }
});

Configuration properties structure schema model:

• strokeColor: Outlines color hex string.
• fillColor: Fill color hex string.
• textColor: Label labels typography color hex.
• lineWidth: Size rating (1 to 10).
• lineStyle: Layout shape style representation indices (0 solid, 1 dashed, 2 dotted).
• transparency: Transparency percentage scale (0 opaque to 100 transparent).
• locked: Lock option state representation boolean value.
• countType: Shape layout marker indices (0 circle, 1 square, 2 triangle, 3 diamond).

type AnnotationProperties = {
  strokeColor?: string;
  fillColor?: string;
  textColor?: string;
  lineWidth?: number;
  lineStyle?: number;
  transparency?: number;
  locked?: boolean;
  text?: string;
  countType?: number;
  arrowType?: number;
  measureType?: number;
};

Complete integration code setup for Vanilla HTML/JS environments:

<div id="viewer" style="height: 640px"></div>

<div>
  <button type="button" id="text-tool">Text</button>
  <button type="button" id="read-selected">Read Selected Style</button>
  <button type="button" id="update-selected">Update Selected Style</button>
</div>

<p id="status"></p>

Broker message mapping for annotation style properties:

• viewer.styles.getAnnotationProperties(...) maps to getAnnotationProperties.
• viewer.styles.setAnnotationProperties(...) maps to setAnnotationProperties.