API Reference

Use viewer.styles to set default appearance for new markup and to inspect or update properties for an existing annotation by GUID.

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"
});

Apply default fallback settings for all subsequent annotations drawn on the canvas:

viewer.styles.setGlobalAppearance({
  strokeColor: "#FF0000",
  fillColor: "#FFCCCC",
  textColor: "#000000",
  lineWidth: 3,
  lineStyle: 0,
  transparency: 50
});

Inspect the style properties of a drawn markup:

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

if (result.success && result.props) {
  console.log(result.props.strokeColor);
}

Apply dynamic properties styling overrides directly to an annotation by GUID:

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

Supported configuration payloads and returned schemas:

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

type AnnotationPropertiesResult = {
  guid: string;
  success: boolean;
  props?: AnnotationProperties;
  error?: string;
  [key: string]: unknown;
};

SDK validates style configurations prior to Canvas transmission:

• guid parameter is required for annotation-specific functions.
• timeoutMs must be a valid number and defaults to 10000 if omitted.
• lineWidth must be between 1 and 10.
• transparency must be a percentage value from 0 to 100.
• Colors must follow standard hex formats or rgb(...) color configurations.

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="set-global">Set Red Defaults</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 mappings for styling methods:

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