Global Styles

Use viewer.styles.setGlobalAppearance(...) to set default appearance values for new annotations, drawings, and measurements created after the command is sent.

Global style commands are available after the viewer is mounted and Canvas is ready.

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

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

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

Call the style setup payload programmatically:

• setGlobalAppearance(...) returns void. Canvas does not define a result event for this command, so treat it as a fire-and-forget default update.

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

Supported global appearance properties:

• strokeColor: Line or outline color hex string.
• fillColor: Shape interior color hex string.
• textColor: Text or label color hex string.
• lineWidth: Line thickness (1 to 10).
• lineStyle: Line pattern (0 solid, 1 dashed, 2 dotted).
• transparency: Transparency scale (0 opaque to 100 fully transparent).

type GlobalAppearanceOptions = {
  strokeColor?: string;
  fillColor?: string;
  textColor?: string;
  lineWidth?: number;
  lineStyle?: number;
  transparency?: number;
};

Set global defaults before enabling the tool that creates the new markup:

viewer.styles.setGlobalAppearance({
  strokeColor: "#E11D48",
  fillColor: "#FFE4E6",
  textColor: "#111827",
  lineWidth: 3
});

await viewer.tools.set({
  action: "TEXT",
  enabled: true
});

Complete integration code setup for Vanilla HTML/JS environments:

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

<div>
  <button type="button" id="set-global">Set Defaults</button>
  <button type="button" id="text-tool">Text</button>
</div>

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

Broker message mapping for global appearance updates:

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