MarkupPlugin

Transparent drawing overlay with pen and eraser. Strokes are stored in image-space so they pan and zoom with a host image. Designed to layer on top of ImageViewerPlugin.

Usage

import { ViewerCore, ImageViewerPlugin, MarkupPlugin } from "@optellix/xviewr-sdk";

const container = document.getElementById("image-panel")!;

const imageViewer = new ImageViewerPlugin({
  container,
  onTransformChange: (t) => markup.syncTransform(t),
});

const markup = new MarkupPlugin({ container, tool: "pen", color: "#ff0000", thickness: 3 });

await viewer.loadPlugin(imageViewer);
await viewer.loadPlugin(markup);

markup.enable();

No service dependencies. The plugin creates a sibling <canvas> inside the same container with pointer-events: none until enable() is called.

Constructor

new MarkupPlugin(config: MarkupConfig)

MarkupConfig

Field	Type	Default	Description
container	HTMLElement	required	Host element. Same one used by the image viewer when overlaying.
tool	MarkupTool	"pen"	"pen" | "eraser".
thickness	number	3	Stroke thickness in screen pixels. Scaled to image-space internally.
color	string	"#ff0000"	Pen color (any CSS color).
maxHistory	number	20	Undo history depth.

type MarkupTool = "pen" | "eraser";

Public API

Method	Description
enable()	Enable pointer input on the overlay (pointer-events: auto).
disable()	Disable pointer input (passes through to layers below).
setTool(tool)	Switch between "pen" and "eraser".
setThickness(px)	Set stroke thickness in screen pixels (min 1).
setColor(color)	Set pen color.
syncTransform(transform)	Pass an ImageTransform from a host viewer so strokes track its pan/zoom.
clear()	Clear all strokes (pushes to undo history).
undo()	Restore previous strokes from history.
toDataURL(format?)	Export the overlay canvas (default "image/png").
getCanvas()	Returns the overlay <canvas> or null.

Events

The plugin does not emit events.

Example

const markup = viewer.pluginManager.getPlugin("markup") as MarkupPlugin;

markup.setTool("pen");
markup.setColor("#00aaff");
markup.setThickness(4);
markup.enable();

// Toggle to eraser
markup.setTool("eraser");

// Save the markup
const png = markup.toDataURL("image/png");

// Undo last stroke
markup.undo();