@markerjs/markerjs3 3.0.0-beta.3 → 3.0.0-rc.1

package/markerjs3.d.ts

@@ -1,5 +1,5 @@
 /**
- * Describes point objects used internally
+ * Describes a point objects use internally
  */
 interface IPoint {
     /**
@@ -12,6 +12,32 @@ interface IPoint {
     y: number;
 }
 
+/**
+ * Describes a size
+ */
+interface ISize {
+    /**
+     * Width
+     */
+    width: number;
+    /**
+     * Height
+     */
+    height: number;
+}
+
+/**
+ * Represents a simplified version of the SVGMatrix.
+ */
+interface ITransformMatrix {
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    e: number;
+    f: number;
+}
+
 /**
  * Utility class to simplify SVG operations.
  */
@@ -132,7 +158,40 @@ declare class SvgHelper {
 }
 
 /**
- * Represents marker's state used to save and restore state continue annotation in the future.
+ * Manages commercial licenses.
+ * @ignore
+ */
+declare class Activator {
+    private static keys;
+    private static keyAddListeners;
+    /**
+     * Add a license key
+     * @param product product identifier.
+     * @param key license key sent to you after purchase.
+     */
+    static addKey(product: string, key: string): void;
+    /**
+     * Add a function to be called when license key is added.
+     * @param listener
+     */
+    static addKeyAddListener(listener: () => void): void;
+    /**
+     * Remove a function called when key is added.
+     * @param listener
+     */
+    static removeKeyAddListener(listener: () => void): void;
+    /**
+     * Returns true if the product is commercially licensed.
+     * @param product product identifier.
+     */
+    static isLicensed(product: string): boolean;
+}
+
+/**
+ * Represents marker's state used to save and restore state.
+ *
+ * The state can then be serialized and stored for future use like to continue
+ * annotation in the future, display it in a viewer or render as a static image.
  */
 interface MarkerBaseState {
     /**
@@ -143,38 +202,100 @@ interface MarkerBaseState {
      * Additional information about the marker.
      */
     notes?: string;
+    /**
+     * Marker's stroke (outline) color.
+     */
     strokeColor?: string;
+    /**
+     * Marker's stroke (outline) width.
+     */
     strokeWidth?: number;
+    /**
+     * Marker's stroke (outline) dash array.
+     */
     strokeDasharray?: string;
+    /**
+     * Marker's opacity.
+     */
     opacity?: number;
 }
 
+/**
+ * Represents the state of the annotation.
+ *
+ * The state is returned by {@link Editor!MarkerArea.getState | MarkerArea.getState()} and can be used to
+ * restore the annotation in {@link Editor!MarkerArea | MarkerArea}
+ * with {@link Editor!MarkerArea.restoreState | MarkerArea.restoreState()}
+ * or passed to {@link Viewer!MarkerView.show | MakerView.show()}
+ * or {@link Renderer!Renderer.rasterize | Renderer.rasterize()}.
+ */
 interface AnnotationState {
+    /**
+     * Version of the annotation state format.
+     *
+     * Equals to 3 for the current version.
+     */
     version?: number;
+    /**
+     * Width of the annotation.
+     */
     width: number;
+    /**
+     * Height of the annotation.
+     */
     height: number;
+    /**
+     * Array of marker states for markers in the annotation.
+     */
     markers: MarkerBaseState[];
 }
 
 /**
- * Describes a size
+ * Represents a stage in a marker's lifecycle.
+ *
+ * Most markers are created immediately after the user clicks on the canvas.
+ * However, some markers are only finished creating after additional interactions.
  */
-interface ISize {
-    width: number;
-    height: number;
-}
-
 type MarkerStage = 'creating' | 'normal';
+/**
+ * Base class for all markers.
+ *
+ * When creating custom marker types usually you will want to extend one of the derived classes.
+ * However, if you cannot find a suitable base class, you can and you should extend this class.
+ *
+ * @summary Base class for all markers.
+ * @group Markers
+ */
 declare class MarkerBase {
+    /**
+     * Marker type name.
+     *
+     * It's important to set this in each derived class. This value is used to identify marker types
+     * when restoring marker state and other scenarios.
+     */
     static typeName: string;
+    /**
+     * Returns marker type name for the object instance.
+     */
     get typeName(): string;
+    /**
+     * SVG container object holding the marker's visual.
+     *
+     * It is created and passed to the constructor by marker editor or viewer when creating the marker.
+     */
     protected _container: SVGGElement;
+    /**
+     * SVG container object holding the marker's visual.
+     */
     /**
      * SVG container object holding the marker's visual.
      */
     get container(): SVGGElement;
     /**
-     * Additional information about the marker
+     * Additional information about the marker.
+     *
+     * Generally, this isn't used for anything functional.
+     * However, in a derived type it could be used for storing arbitrary data with no need to create extra properties and state types.
      */
     notes?: string;
     /**
@@ -185,39 +306,120 @@ declare class MarkerBase {
      * Marker type title (display name) used for accessibility and other attributes.
      */
     static title: string;
+    /**
+     * Marker lifecycle stage.
+     *
+     * Most markers are created immediately after the user clicks on the canvas (`normal`).
+     * However, some markers are only finished creating after additional interactions (`creating`).
+     */
     stage: MarkerStage;
+    /**
+     * Stroke (outline) color of the marker.
+     */
     protected _strokeColor: string;
+    /**
+     * Stroke (outline) color of the marker.
+     *
+     * In a derived class override {@link applyStrokeColor} to apply the color to the marker's visual.
+     */
     get strokeColor(): string;
     set strokeColor(color: string);
+    /**
+     * Applies the stroke color to the marker's visual.
+     *
+     * Override this method in a derived class to apply the color to the marker's visual.
+     */
     protected applyStrokeColor(): void;
+    /**
+     * Fill color of the marker.
+     */
     protected _fillColor: string;
+    /**
+     * Fill color of the marker.
+     *
+     * In a derived class override {@link applyFillColor} to apply the color to the marker's visual.
+     */
     get fillColor(): string;
     set fillColor(color: string);
+    /**
+     * Applies the fill color to the marker's visual.
+     *
+     * Override this method in a derived class to apply the color to the marker's visual.
+     */
     protected applyFillColor(): void;
+    /**
+     * Stroke (outline) width of the marker.
+     */
     protected _strokeWidth: number;
+    /**
+     * Stroke (outline) width of the marker.
+     *
+     * In a derived class override {@link applyStrokeWidth} to apply the width to the marker's visual.
+     */
     get strokeWidth(): number;
     set strokeWidth(value: number);
+    /**
+     * Applies the stroke width to the marker's visual.
+     *
+     * Override this method in a derived class to apply the width to the marker's visual.
+     */
     protected applyStrokeWidth(): void;
+    /**
+     * Stroke (outline) dash array of the marker.
+     */
     protected _strokeDasharray: string;
+    /**
+     * Stroke (outline) dash array of the marker.
+     *
+     * In a derived class override {@link applyStrokeDasharray} to apply the dash array to the marker's visual.
+     */
     get strokeDasharray(): string;
     set strokeDasharray(value: string);
+    /**
+     * Applies the stroke dash array to the marker's visual.
+     *
+     * Override this method in a derived class to apply the dash array to the marker's visual.
+     */
     protected applyStrokeDasharray(): void;
+    /**
+     * Opacity of the marker.
+     */
     protected _opacity: number;
+    /**
+     * Opacity of the marker.
+     *
+     * In a derived class override {@link applyOpacity} to apply the opacity to the marker's visual.
+     */
     get opacity(): number;
     set opacity(value: number);
+    /**
+     * Applies the opacity to the marker's visual.
+     *
+     * Override this method in a derived class to apply the opacity to the marker's visual
+     */
     protected applyOpacity(): void;
+    /**
+     * Creates a new marker object.
+     *
+     * @param container - SVG container object holding the marker's visual.
+     */
     constructor(container: SVGGElement);
     /**
      * Returns true if passed SVG element belongs to the marker. False otherwise.
      *
      * @param el - target element.
+     * @returns true if the element belongs to the marker.
      */
     ownsTarget(el: EventTarget): boolean;
     /**
-     * Disposes the marker and clean's up.
+     * Disposes the marker and cleans up.
      */
     dispose(): void;
     protected addMarkerVisualToContainer(element: SVGElement): void;
+    /**
+     * When overridden in a derived class, represents a preliminary outline for markers that can be displayed before the marker is actually created.
+     * @returns SVG path string.
+     */
     getOutline(): string;
     /**
      * Returns current marker state that can be restored in the future.
@@ -230,7 +432,7 @@ declare class MarkerBase {
      */
     restoreState(state: MarkerBaseState): void;
     /**
-     * Scales marker. Used after the image resize.
+     * Scales marker. Used after resize.
      *
      * @param scaleX - horizontal scale
      * @param scaleY - vertical scale
@@ -246,18 +448,6 @@ declare class MarkerBase {
     getBBox(): DOMRect;
 }
 
-/**
- * Represents a simplified version of the SVGMatrix.
- */
-interface ITransformMatrix {
-    a: number;
-    b: number;
-    c: number;
-    d: number;
-    e: number;
-    f: number;
-}
-
 /**
  * Represents a state snapshot of a RectangularBoxMarkerBase.
  */
@@ -282,13 +472,26 @@ interface RectangularBoxMarkerBaseState extends MarkerBaseState {
      * Marker's rotation angle.
      */
     rotationAngle: number;
+    /**
+     * Visual transform matrix.
+     *
+     * Used to correctly position and rotate marker.
+     */
     visualTransformMatrix?: ITransformMatrix;
+    /**
+     * Container transform matrix.
+     *
+     * Used to correctly position and rotate marker.
+     */
     containerTransformMatrix?: ITransformMatrix;
 }
 
 /**
  * RectangularBoxMarkerBase is a base class for all marker's that conceptually fit into a rectangle
  * such as all rectangle markers, ellipse, text and callout markers.
+ *
+ * @summary Base class for all markers that conceptually fit into a rectangle.
+ * @group Markers
  */
 declare class RectangularBoxMarkerBase extends MarkerBase {
     /**
@@ -331,7 +534,14 @@ declare class RectangularBoxMarkerBase extends MarkerBase {
      * @param point - coordinates of the new top-left corner of the visual.
      */
     moveVisual(point: IPoint): void;
+    /**
+     * Adjusts marker's size.
+     */
     setSize(): void;
+    /**
+     * Rotates marker around the center.
+     * @param point - coordinates of the rotation point.
+     */
     rotate(point: IPoint): void;
     private applyRotation;
     /**
@@ -344,30 +554,19 @@ declare class RectangularBoxMarkerBase extends MarkerBase {
      * @param point - rotated point coordinates.
      */
     unrotatePoint(point: IPoint): IPoint;
-    /**
-     * Returns marker's outline path for use while creating, etc.
-     * @returns SVG path `d` attribute.
-     */
     getOutline(): string;
-    /**
-     * Returns marker's state.
-     */
     getState(): RectangularBoxMarkerBaseState;
-    /**
-     * Restores marker's state to the previously saved one.
-     * @param state - previously saved state.
-     */
     restoreState(state: MarkerBaseState): void;
-    /**
-     * Scales marker. Used after the image resize.
-     *
-     * @param scaleX - horizontal scale
-     * @param scaleY - vertical scale
-     */
     scale(scaleX: number, scaleY: number): void;
     getBBox(): DOMRect;
 }
 
+/**
+ * Shape outline marker is a base class for all markers that represent a shape outline.
+ *
+ * @summary Base class for shape outline (unfilled shape) markers.
+ * @group Markers
+ */
 declare class ShapeOutlineMarkerBase extends RectangularBoxMarkerBase {
     static title: string;
     protected applyStrokeColor(): void;
@@ -378,21 +577,17 @@ declare class ShapeOutlineMarkerBase extends RectangularBoxMarkerBase {
     ownsTarget(el: EventTarget): boolean;
     protected getPath(width?: number, height?: number): string;
     getOutline(): string;
-    createVisual(): void;
-    adjustVisual(): void;
-    setSize(): void;
     /**
-     * Restores previously saved marker state.
-     *
-     * @param state - previously saved state.
+     * Creates marker's visual.
      */
-    restoreState(state: MarkerBaseState): void;
+    createVisual(): void;
     /**
-     * Scales marker. Used after the image resize.
-     *
-     * @param scaleX - horizontal scale
-     * @param scaleY - vertical scale
+     * Adjusts marker's visual according to the current state
+     * (color, width, etc.).
      */
+    adjustVisual(): void;
+    setSize(): void;
+    restoreState(state: MarkerBaseState): void;
     scale(scaleX: number, scaleY: number): void;
 }
 
@@ -403,42 +598,50 @@ interface ShapeOutlineMarkerBaseState extends RectangularBoxMarkerBaseState {
 }
 
 /**
- * Represents shape's state.
+ * Represents filled shape's state.
  */
 interface ShapeMarkerBaseState extends ShapeOutlineMarkerBaseState {
+    /**
+     * Marker's fill color.
+     */
     fillColor: string;
 }
 
+/**
+ * Base class for filled shape markers.
+ *
+ * @summary Base class for filled shape markers.
+ * @group Markers
+ */
 declare abstract class ShapeMarkerBase extends ShapeOutlineMarkerBase {
     static title: string;
-    protected _fillColor: string;
-    protected applyFillColor(): void;
-    constructor(container: SVGGElement);
-    createVisual(): void;
     /**
-     * Returns current marker state that can be restored in the future.
+     * Marker's fill color.
      */
-    getState(): ShapeMarkerBaseState;
+    protected _fillColor: string;
     /**
-     * Restores previously saved marker state.
+     * Applies the fill color to the marker's visual.
      *
-     * @param state - previously saved state.
+     * If needed, override this method in a derived class to apply the color to the marker's visual.
      */
+    protected applyFillColor(): void;
+    constructor(container: SVGGElement);
+    createVisual(): void;
+    getState(): ShapeMarkerBaseState;
     restoreState(state: MarkerBaseState): void;
 }
 
+/**
+ * Frame marker represents unfilled rectangle shape.
+ *
+ * @summary Unfilled rectangle marker.
+ * @group Markers
+ */
 declare class FrameMarker extends ShapeOutlineMarkerBase {
-    /**
-     * String type name of the marker type.
-     */
     static typeName: string;
-    /**
-     * Marker type title (display name) used for accessibility and other attributes.
-     */
     static title: string;
     constructor(container: SVGGElement);
     protected getPath(width?: number, height?: number): string;
-    getState(): ShapeOutlineMarkerBaseState;
 }
 
 /**
@@ -463,6 +666,14 @@ interface LinearMarkerBaseState extends MarkerBaseState {
     y2: number;
 }
 
+/**
+ * Base class for line-like markers.
+ *
+ * Use one of the derived classes.
+ *
+ * @summary Base class for line-like markers.
+ * @group Markers
+ */
 declare class LinearMarkerBase extends MarkerBase {
     /**
      * x coordinate of the first end-point
@@ -484,91 +695,111 @@ declare class LinearMarkerBase extends MarkerBase {
      * Marker's main visual.
      */
     protected visual: SVGGraphicsElement | undefined;
+    /**
+     * Wider invisible visual to make it easier to select and manipulate the marker.
+     */
     protected selectorVisual: SVGGraphicsElement | undefined;
+    /**
+     * Visible visual of the marker.
+     */
     protected visibleVisual: SVGGraphicsElement | undefined;
     protected applyStrokeColor(): void;
     protected applyStrokeWidth(): void;
     protected applyStrokeDasharray(): void;
     protected applyOpacity(): void;
     constructor(container: SVGGElement);
+    ownsTarget(el: EventTarget): boolean;
     /**
-     * Returns true if passed SVG element belongs to the marker. False otherwise.
+     * The path representing the marker visual.
      *
-     * @param el - target element.
+     * When implemented in derived class should return SVG path for the marker.
+     *
+     * @returns SVG path for the marker.
      */
-    ownsTarget(el: EventTarget): boolean;
     protected getPath(): string;
-    createVisual(): void;
     /**
-     * When implemented adjusts marker visual after manipulation when needed.
+     * Creates marker's visual.
      */
-    adjustVisual(): void;
+    createVisual(): void;
     /**
-     * Returns marker's state.
+     * Adjusts marker visual after manipulation when needed.
      */
+    adjustVisual(): void;
     getState(): LinearMarkerBaseState;
-    /**
-     * Restores marker's state to the previously saved one.
-     * @param state - previously saved state.
-     */
     restoreState(state: MarkerBaseState): void;
-    /**
-     * Scales marker. Used after the image resize.
-     *
-     * @param scaleX - horizontal scale
-     * @param scaleY - vertical scale
-     */
     scale(scaleX: number, scaleY: number): void;
 }
 
+/**
+ * Line marker represents a simple straight line.
+ *
+ * @summary Line marker.
+ * @group Markers
+ */
 declare class LineMarker extends LinearMarkerBase {
     static typeName: string;
     static title: string;
     constructor(container: SVGGElement);
     protected getPath(): string;
-    /**
-     * Returns current marker state that can be restored in the future.
-     */
-    getState(): LinearMarkerBaseState;
 }
 
+/**
+ * Arrow type.
+ *
+ * Specifies whether the arrow should be drawn at the start, end, both ends or none.
+ */
 type ArrowType = 'both' | 'start' | 'end' | 'none';
+/**
+ * Represents the state of the arrow marker.
+ */
 interface ArrowMarkerState extends LinearMarkerBaseState {
     arrowType: ArrowType;
 }
 
+/**
+ * Arrow marker represents a line with arrow heads at the ends.
+ *
+ * @summary A line with arrow heads at the ends.
+ *
+ * @group Markers
+ */
 declare class ArrowMarker extends LineMarker {
     static typeName: string;
     static title: string;
     private _arrowType;
+    /**
+     * Type of the arrow.
+     *
+     * Specify whether the arrow should be drawn at the start, end, both ends or none.
+     */
     get arrowType(): ArrowType;
     set arrowType(value: ArrowType);
     constructor(container: SVGGElement);
     protected getPath(): string;
     protected applyStrokeWidth(): void;
-    /**
-     * Returns marker's state.
-     */
     getState(): ArrowMarkerState;
-    /**
-     * Restores marker's state to the previously saved one.
-     * @param state - previously saved state.
-     */
     restoreState(state: MarkerBaseState): void;
 }
 
+/**
+ * Represents a measurement marker.
+ *
+ * Measurement marker is a line with two vertical bars at the ends.
+ *
+ * @summary A line with two vertical bars at the ends.
+ * @group Markers
+ */
 declare class MeasurementMarker extends LineMarker {
     static typeName: string;
     static title: string;
     constructor(container: SVGGElement);
     protected getPath(): string;
     protected applyStrokeWidth(): void;
-    /**
-     * Returns marker's state.
-     */
-    getState(): LinearMarkerBaseState;
 }
 
+/**
+ * Represents polygon marker's state used to save and restore state.
+ */
 interface PolygonMarkerState extends MarkerBaseState {
     /**
      * Polygon points.
@@ -576,9 +807,18 @@ interface PolygonMarkerState extends MarkerBaseState {
     points: Array<IPoint>;
 }
 
+/**
+ * Polygon marker is a multi-point marker that represents a polygon.
+ *
+ * @summary Polygon marker.
+ * @group Markers
+ */
 declare class PolygonMarker extends MarkerBase {
     static typeName: string;
     static title: string;
+    /**
+     * Marker's points.
+     */
     points: IPoint[];
     /**
      * Marker's main visual.
@@ -592,85 +832,95 @@ declare class PolygonMarker extends MarkerBase {
     protected applyStrokeDasharray(): void;
     protected applyOpacity(): void;
     constructor(container: SVGGElement);
+    ownsTarget(el: EventTarget): boolean;
     /**
-     * Returns true if passed SVG element belongs to the marker. False otherwise.
+     * Returns SVG path string for the polygon.
      *
-     * @param el - target element.
+     * @returns Path string for the polygon.
      */
-    ownsTarget(el: EventTarget): boolean;
     protected getPath(): string;
+    /**
+     * Creates marker's main visual.
+     */
     createVisual(): void;
+    /**
+     * Creates selector visual.
+     *
+     * Selector visual is a transparent wider visual that allows easier selection of the marker.
+     */
     private createSelectorVisual;
     /**
-     * When implemented adjusts marker visual after manipulation when needed.
+     * Adjusts marker visual after manipulation when needed.
      */
     adjustVisual(): void;
     private adjustSelectorVisual;
     private addSelectorLine;
-    /**
-     * Returns marker's state.
-     */
     getState(): PolygonMarkerState;
-    /**
-     * Restores marker's state to the previously saved one.
-     * @param state - previously saved state.
-     */
     restoreState(state: MarkerBaseState): void;
-    /**
-     * Scales marker. Used after the image resize.
-     *
-     * @param scaleX - horizontal scale
-     * @param scaleY - vertical scale
-     */
     scale(scaleX: number, scaleY: number): void;
 }
 
+/**
+ * Represents the state of a freehand marker.
+ */
 interface FreehandMarkerState extends MarkerBaseState {
+    /**
+     * Points of the freehand line.
+     */
     points: Array<IPoint>;
 }
 
+/**
+ * Freehand marker represents a hand drawing.
+ *
+ * Unlike v2 in v3 freehand marker is represented by an SVG path element.
+ * This means that the line properties like stroke color, width, dasharray, etc.
+ * can be modified after drawing.
+ *
+ * @summary Freehand drawing marker.
+ * @group Markers
+ */
 declare class FreehandMarker extends MarkerBase {
     static typeName: string;
     static title: string;
+    /**
+     * Points of the freehand line.
+     */
     points: IPoint[];
     /**
      * Marker's main visual.
      */
     visual: SVGGraphicsElement | undefined;
+    /**
+     * Wider invisible visual to make it easier to select and manipulate the marker.
+     */
     protected selectorVisual: SVGGraphicsElement | undefined;
+    /**
+     * Visible visual of the marker.
+     */
     visibleVisual: SVGGraphicsElement | undefined;
     protected applyStrokeColor(): void;
     protected applyStrokeWidth(): void;
     protected applyStrokeDasharray(): void;
     protected applyOpacity(): void;
     constructor(container: SVGGElement);
+    ownsTarget(el: EventTarget): boolean;
     /**
-     * Returns true if passed SVG element belongs to the marker. False otherwise.
+     * Returns SVG path string representing the freehand line.
      *
-     * @param el - target element.
+     * @returns SVG path string representing the freehand line.
      */
-    ownsTarget(el: EventTarget): boolean;
     protected getPath(): string;
-    createVisual(): void;
     /**
-     * When implemented adjusts marker visual after manipulation when needed.
+     * Creates the visual elements comprising the marker's visual.
      */
-    adjustVisual(): void;
+    createVisual(): void;
     /**
-     * Returns marker's state.
+     * Adjusts marker visual after manipulation or with new points.
      */
+    adjustVisual(): void;
     getState(): FreehandMarkerState;
-    /**
-     * Restores marker's state to the previously saved one.
-     * @param state - previously saved state.
-     */
     restoreState(state: MarkerBaseState): void;
-    /**
-     * Scales marker. Used after the image resize.
-     *
-     * @param scaleX - horizontal scale
-     * @param scaleY - vertical scale
-     */
     scale(scaleX: number, scaleY: number): void;
 }
 
@@ -693,7 +943,7 @@ interface FontSize {
 }
 
 /**
- * TextBlock represents a block of text used across all text-based stencils and connector labels.
+ * TextBlock represents a block of text used across all text-based markers.
  */
 declare class TextBlock {
     /**
@@ -704,7 +954,7 @@ declare class TextBlock {
     onTextSizeChanged?: (textBlock: TextBlock) => void;
     private _text;
     /**
-     * Returns the text block's text
+     * Returns the text block's text.
      */
     get text(): string;
     /**
@@ -813,57 +1063,86 @@ declare class TextBlock {
     hideControlBox(): void;
 }
 
+/**
+ * Represents a state snapshot of a TextMarker.
+ */
 interface TextMarkerState extends RectangularBoxMarkerBaseState {
+    /**
+     * Text color.
+     */
     color: string;
+    /**
+     * Font family.
+     */
     fontFamily: string;
+    /**
+     * Font size.
+     */
     fontSize: FontSize;
+    /**
+     * Text content.
+     */
     text: string;
 }
 
+/**
+ * Text marker.
+ *
+ * Used to represent a text block as well a base class for other text-based markers.
+ *
+ * @summary Text marker.
+ * @group Markers
+ */
 declare class TextMarker extends RectangularBoxMarkerBase {
     static typeName: string;
     static title: string;
+    /**
+     * Default text for the marker type.
+     */
     protected static DEFAULT_TEXT: string;
+    /**
+     * Callback to be called when the text size changes.
+     */
     onSizeChanged?: (textMarker: TextMarker) => void;
     private _color;
     /**
-     * Returns stencil's text color.
+     * Returns markers's text color.
      */
     get color(): string;
     /**
-     * Sets the stencil's text color.
+     * Sets the markers's text color.
      */
     set color(value: string);
     private _fontFamily;
     /**
-     * Returns the stencil's font family.
+     * Returns the markers's font family.
      */
     get fontFamily(): string;
     /**
-     * Sets the stencil's font family.
+     * Sets the markers's font family.
      */
     set fontFamily(value: string);
     private _fontSize;
     /**
-     * Returns the stencil's font size.
+     * Returns the marker's font size.
      */
     get fontSize(): FontSize;
     /**
-     * Sets the stencil's font size.
+     * Sets the marker's font size.
      */
     set fontSize(value: FontSize);
     /**
-     * Returns the default text for the stencil type.
-     * @returns stencil type's default text.
+     * Returns the default text for the marker type.
+     * @returns marker type's default text.
      */
     protected getDefaultText(): string;
     private _text;
     /**
-     * Returns the stencil's text.
+     * Returns the marker's text.
      */
     get text(): string;
     /**
-     * Sets the stencil's text.
+     * Sets the marker's text.
      */
     set text(value: string);
     /**
@@ -879,14 +1158,26 @@ declare class TextMarker extends RectangularBoxMarkerBase {
      */
     textBlock: TextBlock;
     constructor(container: SVGGElement);
+    /**
+     * Creates marker's visual.
+     */
     createVisual(): void;
+    /**
+     * Adjusts marker's visual according to the current state.
+     */
     adjustVisual(): void;
     ownsTarget(el: EventTarget): boolean;
+    /**
+     * Sets the text bounding box.
+     */
     protected setTextBoundingBox(): void;
     /**
-     * Sets (adjusts) the stencil's size.
+     * Sets (adjusts) the marker's size.
      */
     setSize(): void;
+    /**
+     * Sets the marker's size based on the text size.
+     */
     protected setSizeFromTextSize(): void;
     private textSizeChanged;
     /**
@@ -904,54 +1195,77 @@ declare class TextMarker extends RectangularBoxMarkerBase {
      * @param fontSize font size
      */
     setFontSize(fontSize: FontSize): void;
+    /**
+     * Hides the marker's visual.
+     *
+     * Used when editing the text.
+     */
     hideVisual(): void;
-    showVisual(): void;
-    getState(): TextMarkerState;
     /**
-     * Restores previously saved marker state.
+     * Shows the marker's visual.
      *
-     * @param state - previously saved state.
+     * Eg. when done editing the text.
      */
+    showVisual(): void;
+    getState(): TextMarkerState;
     restoreState(state: MarkerBaseState): void;
     scale(scaleX: number, scaleY: number): void;
 }
 
+/**
+ * Cover marker is a filled rectangle marker.
+ *
+ * A typical use case is to cover some area of the image with a colored rectangle as a "redaction".
+ *
+ * @summary Filled rectangle marker.
+ * @group Markers
+ */
 declare class CoverMarker extends ShapeMarkerBase {
-    /**
-     * String type name of the marker type.
-     */
     static typeName: string;
-    /**
-     * Marker type title (display name) used for accessibility and other attributes.
-     */
     static title: string;
     constructor(container: SVGGElement);
     protected getPath(width?: number, height?: number): string;
-    getState(): ShapeMarkerBaseState;
 }
 
+/**
+ * Highlight marker is a semi-transparent rectangular marker.
+ *
+ * @summary Semi-transparent rectangular marker.
+ * @group Markers
+ */
 declare class HighlightMarker extends ShapeMarkerBase {
-    /**
-     * String type name of the marker type.
-     */
     static typeName: string;
-    /**
-     * Marker type title (display name) used for accessibility and other attributes.
-     */
     static title: string;
     constructor(container: SVGGElement);
     protected getPath(width?: number, height?: number): string;
-    getState(): ShapeMarkerBaseState;
 }
 
+/**
+ * Represents the state of a callout marker.
+ */
 interface CalloutMarkerState extends TextMarkerState {
+    /**
+     * Coordinates of the position of the tip of the callout.
+     */
     tipPosition: IPoint;
 }
 
+/**
+ * Callout marker is a text-based marker with a callout outline with a tip that can point to specific place
+ * on the underlying image or annotation.
+ *
+ * @summary Text-based marker with a callout outline with a tip that can point to specific place
+ * on the underlying image or annotation.
+ *
+ * @group Markers
+ */
 declare class CalloutMarker extends TextMarker {
     static typeName: string;
     static title: string;
     private _tipPosition;
+    /**
+     * Coordinates of the position of the tip of the callout.
+     */
     get tipPosition(): IPoint;
     set tipPosition(value: IPoint);
     private tipBase1Position;
@@ -963,6 +1277,11 @@ declare class CalloutMarker extends TextMarker {
     protected applyStrokeDasharray(): void;
     protected applyOpacity(): void;
     protected applyFillColor(): void;
+    /**
+     * Returns the SVG path string for the callout outline.
+     *
+     * @returns Path string for the callout outline.
+     */
     protected getPath(): string;
     private setTipPoints;
     createVisual(): void;
@@ -973,55 +1292,98 @@ declare class CalloutMarker extends TextMarker {
     scale(scaleX: number, scaleY: number): void;
 }
 
+/**
+ * Ellipse frame marker represents unfilled circle/ellipse shape.
+ *
+ * @summary Unfilled ellipse marker.
+ * @group Markers
+ */
 declare class EllipseFrameMarker extends ShapeOutlineMarkerBase {
-    /**
-     * String type name of the marker type.
-     */
     static typeName: string;
-    /**
-     * Marker type title (display name) used for accessibility and other attributes.
-     */
     static title: string;
     constructor(container: SVGGElement);
     protected getPath(width?: number, height?: number): string;
-    getState(): ShapeOutlineMarkerBaseState;
 }
 
+/**
+ * Ellipse marker is a filled ellipse marker.
+ *
+ * @summary Filled ellipse marker.
+ * @group Markers
+ */
 declare class EllipseMarker extends ShapeMarkerBase {
-    /**
-     * String type name of the marker type.
-     */
     static typeName: string;
-    /**
-     * Marker type title (display name) used for accessibility and other attributes.
-     */
     static title: string;
     constructor(container: SVGGElement);
     protected getPath(width?: number, height?: number): string;
-    getState(): ShapeMarkerBaseState;
 }
 
+/**
+ * The type of image (svg or bitmap).
+ *
+ * Used in {@link Core!ImageMarkerBase | ImageMarkerBase } and its descendants.
+ */
 type ImageType = 'svg' | 'bitmap';
 /**
  * Represents image marker's state.
  */
 interface ImageMarkerBaseState extends RectangularBoxMarkerBaseState {
+    /**
+     * Type of the image: SVG or bitmap.
+     */
     imageType?: ImageType;
+    /**
+     * SVG markup of the SVG image.
+     */
     svgString?: string;
+    /**
+     * Image source (URL or base64 encoded image).
+     */
     imageSrc?: string;
 }
 
+/**
+ * Base class for image markers.
+ *
+ * This class isn't meant to be used directly. Use one of the derived classes instead.
+ *
+ * @summary Image marker base class.
+ * @group Markers
+ */
 declare class ImageMarkerBase extends RectangularBoxMarkerBase {
     static title: string;
     /**
-     * Main SVG or image element of the stencil.
+     * Main SVG or image element of the marker.
      */
     protected SVGImage?: SVGSVGElement | SVGImageElement;
+    /**
+     * Type of the image: SVG or bitmap.
+     */
     protected imageType: ImageType;
+    /**
+     * For SVG images this holds the SVG markup of the image.
+     */
     protected _svgString?: string;
+    /**
+     * For SVG images this holds the SVG markup of the image.
+     */
     get svgString(): string | undefined;
     set svgString(value: string | undefined);
+    /**
+     * For bitmap images this holds the base64 encoded image.
+     */
     protected _imageSrc?: string;
+    /**
+     * For bitmap images this holds the base64 encoded image.
+     *
+     * @remarks
+     * Technically this could be any URL but due to browser security constraints
+     * an external image will almost certainly cause bitmap rendering of the image to fail.
+     *
+     * In cases you know you will never render the annotation as a static image,
+     * it should be safe to use external URLs. Otherwise, use base64 encoded images
+     * like 'data:image/png;base64,...'.
+     */
     get imageSrc(): string | undefined;
     set imageSrc(value: string | undefined);
     /**
@@ -1033,8 +1395,17 @@ declare class ImageMarkerBase extends RectangularBoxMarkerBase {
      */
     protected naturalHeight: number;
     constructor(container: SVGGElement);
+    /**
+     * Creates the image element based on the image type and source.
+     */
     protected createImage(): void;
+    /**
+     * Creates marker's visual, including its image element.
+     */
     createVisual(): void;
+    /**
+     * Adjusts the image size and position.
+     */
     adjustImage(): void;
     private isDescendant;
     ownsTarget(el: EventTarget): boolean;
@@ -1042,62 +1413,63 @@ declare class ImageMarkerBase extends RectangularBoxMarkerBase {
     getState(): ImageMarkerBaseState;
     protected applyStrokeColor(): void;
     restoreState(state: ImageMarkerBaseState): void;
-    /**
-     * Scales marker. Used after the image resize.
-     *
-     * @param scaleX - horizontal scale
-     * @param scaleY - vertical scale
-     */
     scale(scaleX: number, scaleY: number): void;
 }
 
 /**
  * Used to represent user-set images.
+ *
+ * Use this marker to display custom images at runtime.
+ * For example, you can use this type to represent emojis selected in an emoji picker.
+ *
+ * @summary Custom image marker.
+ * @group Markers
  */
 declare class CustomImageMarker extends ImageMarkerBase {
-    /**
-     * String type name of the marker type.
-     */
     static typeName: string;
-    /**
-     * Marker type title (display name) used for accessibility and other attributes.
-     */
     static title: string;
 }
 
 /**
  * Check mark marker.
+ *
+ * Represents a check mark image marker. Can be used to quickly mark something as correct, or
+ * similar use cases.
+ *
+ * @summary Check mark image marker.
+ * @group Markers
  */
 declare class CheckImageMarker extends ImageMarkerBase {
-    /**
-     * String type name of the marker type.
-     */
     static typeName: string;
-    /**
-     * Marker type title (display name) used for accessibility and other attributes.
-     */
     static title: string;
     constructor(container: SVGGElement);
 }
 
 /**
- * X mark marker.
+ * X mark image marker.
+ *
+ * @summary X (crossed) image marker.
+ * @group Markers
  */
 declare class XImageMarker extends ImageMarkerBase {
-    /**
-     * String type name of the marker type.
-     */
     static typeName: string;
-    /**
-     * Marker type title (display name) used for accessibility and other attributes.
-     */
     static title: string;
     constructor(container: SVGGElement);
 }
 
+/**
+ * Represents the state of a caption frame marker.
+ */
 interface CaptionFrameMarkerState extends TextMarkerState, ShapeMarkerBaseState {
 }
 
+/**
+ * Caption frame marker is a combination of a frame (rectangle) and a text caption that goes with it.
+ *
+ * @summary A combination of a frame (rectangle) and a text caption that goes with it.
+ *
+ * @group Markers
+ */
 declare class CaptionFrameMarker extends TextMarker {
     static typeName: string;
     static title: string;
@@ -1110,30 +1482,50 @@ declare class CaptionFrameMarker extends TextMarker {
     protected applyStrokeDasharray(): void;
     protected applyOpacity(): void;
     protected applyFillColor(): void;
+    /**
+     * Returns the SVG path strings for the frame and the caption background.
+     *
+     * @param width
+     * @param height
+     * @returns SVG path strings for the frame and the caption background.
+     */
     protected getPaths(width?: number, height?: number): {
         frame: string;
         caption: string;
     };
     createVisual(): void;
     adjustVisual(): void;
+    /**
+     * Adjusts text position inside the caption frame.
+     */
     protected adjustTextPosition(): void;
+    /**
+     * Adjusts frame visual according to the current marker properties.
+     */
     protected adjustFrameVisual(): void;
     ownsTarget(el: EventTarget): boolean;
     setSize(): void;
     protected setSizeFromTextSize(): void;
+    /**
+     * Hides the marker visual.
+     *
+     * Used by the editor to hide rendered marker while editing the text.
+     */
     hideVisual(): void;
-    showVisual(): void;
-    getState(): CaptionFrameMarkerState;
-    restoreState(state: MarkerBaseState): void;
     /**
-     * Scales marker. Used after the image resize.
+     * Shows the marker visual.
      *
-     * @param scaleX - horizontal scale
-     * @param scaleY - vertical scale
+     * Used by the editor to show rendered marker after editing the text.
      */
+    showVisual(): void;
+    getState(): CaptionFrameMarkerState;
+    restoreState(state: MarkerBaseState): void;
     scale(scaleX: number, scaleY: number): void;
 }
 
+/**
+ * Properties for marker editor.
+ */
 interface MarkerEditorProperties<TMarkerType extends MarkerBase = MarkerBase> {
     /**
      * SVG container for the marker and editor elements.
@@ -1157,19 +1549,56 @@ interface MarkerEditorProperties<TMarkerType extends MarkerBase = MarkerBase> {
  * Represents marker's state (status) in time.
  */
 type MarkerEditorState = 'new' | 'creating' | 'select' | 'move' | 'resize' | 'rotate' | 'edit';
+/**
+ * Marker creation style defines whether markers are created by drawing them or just dropping them on the canvas.
+ */
 type MarkerCreationStyle = 'draw' | 'drop';
+/**
+ * Base class for all marker editors.
+ *
+ * @typeParam TMarkerType - marker type the instance of the editor is for.
+ *
+ * @summary Base class for all marker editors.
+ * @group Editors
+ */
 declare class MarkerBaseEditor<TMarkerType extends MarkerBase = MarkerBase> {
+    /**
+     * Marker type constructor.
+     */
     protected _markerType: new (container: SVGGElement) => TMarkerType;
+    /**
+     * Marker creation style.
+     *
+     * Markers can either be created by drawing them or just dropping them on the canvas.
+     */
     protected _creationStyle: MarkerCreationStyle;
+    /**
+     * Marker creation style.
+     *
+     * Markers can either be created by drawing them or just dropping them on the canvas.
+     */
     get creationStyle(): MarkerCreationStyle;
     /**
      * Type guard for specific marker editor types.
+     *
+     * This allows to check if the editor is of a specific type which is useful for displaying type-specific UI.
+     *
+     * @typeParam T - specific marker editor type.
      * @param cls
      * @returns
      */
     is<T>(cls: new (...args: any[]) => T): this is T;
+    /**
+     * Marker instance.
+     */
     protected _marker: TMarkerType;
+    /**
+     * Returns the marker instance.
+     */
     get marker(): TMarkerType;
+    /**
+     * SVG container for the marker's and editor's visual elements.
+     */
     protected _container: SVGGElement;
     /**
      * Returns the SVG container for the marker's and editor's visual elements.
@@ -1219,32 +1648,73 @@ declare class MarkerBaseEditor<TMarkerType extends MarkerBase = MarkerBase> {
      * Returns true if the marker is currently selected
      */
     get isSelected(): boolean;
+    /**
+     * When set to true, a new marker of the same type is created immediately after the current one is finished.
+     */
     protected _continuousCreation: boolean;
+    /**
+     * When set to true, a new marker of the same type is created immediately after the current one is finished.
+     */
     get continuousCreation(): boolean;
     /**
-     * Sets rectangle's border stroke color.
+     * Sets marker's stroke (outline) color.
      * @param color - color as string
      */
     set strokeColor(color: string);
+    /**
+     * Gets marker's stroke (outline) color.
+     */
     get strokeColor(): string;
     /**
-     * Sets rectangle's border stroke (line) width.
-     * @param color - color as string
+     * Sets marker's stroke (outline) width.
+     * @param width - stroke width in pixels.
      */
     set strokeWidth(width: number);
+    /**
+     * Gets marker's stroke (outline) width.
+     */
     get strokeWidth(): number;
     /**
-     * Sets rectangle's border stroke dash array.
-     * @param color - color as string
+     * Sets marker's stroke (outline) dash array.
+     * @param dashes - dash array as string
      */
     set strokeDasharray(dashes: string);
+    /**
+     * Gets marker's stroke (outline) dash array.
+     */
     get strokeDasharray(): string;
+    /**
+     * Sets marker's fill color.
+     */
     set fillColor(color: string);
+    /**
+     * Gets marker's fill color.
+     */
     get fillColor(): string;
+    /**
+     * Sets marker's opacity.
+     */
     set opacity(value: number);
+    /**
+     * Gets marker's opacity.
+     */
     get opacity(): number;
+    /**
+     * Creates a new instance of marker editor.
+     *
+     * @param properties - marker editor properties.
+     */
     constructor(properties: MarkerEditorProperties<TMarkerType>);
+    /**
+     * Returns true if the marker or the editor owns supplied target element.
+     *
+     * @param el target element
+     * @returns
+     */
     ownsTarget(el: EventTarget | null): boolean;
+    /**
+     * Is this marker selected in a multi-selection?
+     */
     protected isMultiSelected: boolean;
     /**
      * Selects this marker and displays appropriate selected marker UI.
@@ -1284,13 +1754,27 @@ declare class MarkerBaseEditor<TMarkerType extends MarkerBase = MarkerBase> {
      * Disposes the marker and clean's up.
      */
     dispose(): void;
+    /**
+     * Adjusts marker's control box.
+     */
     protected adjustControlBox(): void;
+    /**
+     * Scales the marker and the editor.
+     *
+     * @param scaleX
+     * @param scaleY
+     */
     scale(scaleX: number, scaleY: number): void;
     /**
      * Called by a marker when its state could have changed.
      * Does a check if the state has indeed changed before firing the handler.
      */
     protected stateChanged(): void;
+    /**
+     * Returns marker's state that can be restored in the future.
+     *
+     * @returns
+     */
     getState(): MarkerBaseState;
     /**
      * Restores previously saved marker state.
@@ -1300,33 +1784,129 @@ declare class MarkerBaseEditor<TMarkerType extends MarkerBase = MarkerBase> {
     restoreState(state: MarkerBaseState): void;
 }
 
+/**
+ * Marker area custom event types.
+ */
 interface MarkerAreaEventMap {
     /**
      * Marker area initialized.
      */
     areainit: CustomEvent<MarkerAreaEventData>;
+    /**
+     * Marker area shown.
+     */
     areashow: CustomEvent<MarkerAreaEventData>;
+    /**
+     * Marker area state restored.
+     */
     arearestorestate: CustomEvent<MarkerAreaEventData>;
+    /**
+     * Marker area focused.
+     */
     areafocus: CustomEvent<MarkerAreaEventData>;
+    /**
+     * Marker area lost focus.
+     */
     areablur: CustomEvent<MarkerAreaEventData>;
+    /**
+     * Marker area state changed.
+     */
     areastatechange: CustomEvent<MarkerAreaEventData>;
+    /**
+     * Marker selected.
+     */
     markerselect: CustomEvent<MarkerEditorEventData>;
+    /**
+     * Marker deselected.
+     */
     markerdeselect: CustomEvent<MarkerEditorEventData>;
+    /**
+     * Marker creating.
+     */
     markercreating: CustomEvent<MarkerEditorEventData>;
+    /**
+     * Marker created.
+     */
     markercreate: CustomEvent<MarkerEditorEventData>;
+    /**
+     * Marker about to be deleted.
+     */
     markerbeforedelete: CustomEvent<MarkerEditorEventData>;
+    /**
+     * Marker deleted.
+     */
     markerdelete: CustomEvent<MarkerEditorEventData>;
+    /**
+     * Marker changed.
+     */
     markerchange: CustomEvent<MarkerEditorEventData>;
 }
+/**
+ * Marker area custom event data.
+ */
 interface MarkerAreaEventData {
     /**
      * {@link MarkerArea} instance.
      */
     markerArea: MarkerArea;
 }
+/**
+ * Marker editor custom event data.
+ */
 interface MarkerEditorEventData extends MarkerAreaEventData {
     markerEditor: MarkerBaseEditor;
 }
+/**
+ * @ignore
+ */
+type MarkerAreaMode = 'select' | 'create' | 'delete';
+/**
+ * Marker area web component is the main annotation editor component.
+ *
+ * @summary
+ * The main annotation editor component.
+ *
+ * @group Components
+ *
+ * @example
+ *
+ * Import `MarkerArea` from `@markerjs/markerjs3`:
+ *
+ * ```js
+ * import { MarkerArea } from '@markerjs/markerjs3';
+ * ```
+ *
+ * In the code below we assume that you have an `HTMLImageElement` as `targetImage`. It can be a reference to an image you already have on the page or you can simply create it with something like this:
+ *
+ * ```js
+ * const targetImg = document.createElement('img');
+ * targetImg.src = './sample.jpg';
+ * ```
+ *
+ * Now you just need to create an instance of `MarkerArea`, set its `targetImage` property and add it to the page:
+ *
+ * ```js
+ * const markerArea = new MarkerArea();
+ * markerArea.targetImage = targetImg;
+ * editorContainerDiv.appendChild(markerArea);
+ * ```
+ *
+ * To initiate creation of a marker you just call `createMarker()` and pass it the name (or type) of the marker you want to create. So, if you have a button with id `addFrameButton` you can make it create a new `FrameMarker` with something like this:
+ *
+ * ```js
+ * document.querySelector("#addButton")!.addEventListener("click", () => {
+ *   markerArea.createMarker("FrameMarker");
+ * });
+ * ```
+ *
+ * And whenever you want to save state (current annotation) you just call `getState()`:
+ *
+ * ```js
+ * document.querySelector("#saveStateButton")!.addEventListener("click", () => {
+ *   const state = markerArea.getState();
+ *   console.log(state);
+ * });
+ */
 declare class MarkerArea extends HTMLElement {
     private _contentContainer?;
     private _canvasContainer?;
@@ -1338,22 +1918,50 @@ declare class MarkerArea extends HTMLElement {
     private width;
     private height;
     private _targetWidth;
+    /**
+     * Returns the target image width.
+     */
     get targetWidth(): number;
+    /**
+     * Sets the target image width.
+     */
     set targetWidth(value: number);
     private _targetHeight;
+    /**
+     * Returns the target image height.
+     */
     get targetHeight(): number;
+    /**
+     * Sets the target image height.
+     */
     set targetHeight(value: number);
     private mode;
     private _logoUI?;
     private _isInitialized;
     private _currentMarkerEditor?;
+    /**
+     * Returns the currently active marker editor.
+     */
     get currentMarkerEditor(): MarkerBaseEditor | undefined;
     private _selectedMarkerEditors;
     private _newMarkerOutline;
+    private _targetImageLoaded;
     private _targetImage;
+    /**
+     * Returns the target image.
+     */
     get targetImage(): HTMLImageElement | undefined;
+    /**
+     * Sets the target image.
+     */
     set targetImage(value: HTMLImageElement | undefined);
+    /**
+     * The collection of available marker editor types.
+     */
     markerEditors: Map<typeof MarkerBase, typeof MarkerBaseEditor<MarkerBase>>;
+    /**
+     * The collection of marker editors in the annotation.
+     */
     editors: MarkerBaseEditor[];
     private _zoomLevel;
     /**
@@ -1376,15 +1984,47 @@ declare class MarkerArea extends HTMLElement {
     private setEditingTargetSize;
     private initOverlay;
     private addTargetImage;
+    /**
+     * Registers a marker type and its editor to be available in the marker area.
+     * @param markerType
+     * @param editorType
+     */
     registerMarkerType(markerType: typeof MarkerBase, editorType: typeof MarkerBaseEditor<MarkerBase>): void;
+    /**
+     * Creates a new marker of the specified type.
+     * @param markerType
+     * @returns
+     */
     createMarker(markerType: typeof MarkerBase | string): MarkerBaseEditor<MarkerBase> | undefined;
     private addNewMarker;
     private markerCreated;
     private markerStateChanged;
+    /**
+     * Deletes a marker represented by the specified editor.
+     * @param markerEditor
+     */
     deleteMarker(markerEditor: MarkerBaseEditor): void;
+    /**
+     * Deselects all markers.
+     */
     deleteSelectedMarkers(): void;
+    /**
+     * Sets the current editor and selects it.
+     *
+     * If `editor` is not supplied the current editor is unselected.
+     *
+     * @param editor
+     */
     setCurrentEditor(editor?: MarkerBaseEditor): void;
+    /**
+     * Selects the specified editor without setting it as the current editor.
+     * @param editor
+     */
     selectEditor(editor: MarkerBaseEditor): void;
+    /**
+     * Deselects the specified editor (or all editors if not specified).
+     * @param editor
+     */
     deselectEditor(editor?: MarkerBaseEditor): void;
     private touchPoints;
     private isDragging;
@@ -1410,8 +2050,20 @@ declare class MarkerArea extends HTMLElement {
     private detachEvents;
     private detachWindowEvents;
     private getMarkerTypeByName;
+    /**
+     * Switches the marker area to select mode and deselects all the selected markers.
+     */
     switchToSelectMode(): void;
+    /**
+     * Returns the annotation state.
+     * @returns
+     */
     getState(): AnnotationState;
+    private _stateToRestore;
+    /**
+     * Restores the annotation from the previously saved state.
+     * @param state
+     */
     restoreState(state: AnnotationState): void;
     private scaleMarkers;
     /**
@@ -1452,10 +2104,8 @@ declare class MarkerArea extends HTMLElement {
 }
 
 /**
- * Color type marks the kind of color property a color is referring to.
+ * Represents location of the manipulation grips.
  */
-type ColorType = 'text' | 'stroke' | 'fill' | 'background';
-
 type GripLocation = 'topleft' | 'topcenter' | 'topright' | 'leftcenter' | 'rightcenter' | 'bottomleft' | 'bottomcenter' | 'bottomright';
 /**
  * Represents a single resize-manipulation grip used in marker's manipulation controls.
@@ -1465,17 +2115,29 @@ declare class Grip {
      * Grip's visual element.
      */
     protected _visual?: SVGGraphicsElement;
+    /**
+     * Grip's visual element.
+     */
     get visual(): SVGGraphicsElement;
     /**
      * Grip's size (radius).
      */
     gripSize: number;
+    /**
+     * Grip's fill color.
+     */
     fillColor: string;
+    /**
+     * Grip's stroke color.
+     */
     strokeColor: string;
     /**
      * Creates a new grip.
      */
     constructor();
+    /**
+     * Creates grip's visual.
+     */
     protected createVisual(): void;
     /**
      * Returns true if passed SVG element belongs to the grip. False otherwise.
@@ -1485,13 +2147,25 @@ declare class Grip {
     ownsTarget(el: EventTarget): boolean;
 }
 
+/**
+ * Represents a resize grip.
+ */
 declare class ResizeGrip extends Grip {
 }
 
+/**
+ * Represents a rotation grip.
+ */
 declare class RotateGrip extends Grip {
     constructor();
 }
 
+/**
+ * Base editor for markers that can be represented by a rectangular area.
+ *
+ * @summary Base editor for markers that can be represented by a rectangular area.
+ * @group Editors
+ */
 declare class RectangularBoxMarkerBaseEditor<TMarkerType extends RectangularBoxMarkerBase = RectangularBoxMarkerBase> extends MarkerBaseEditor<TMarkerType> {
     /**
      * x coordinate of the top-left corner at the start of manipulation.
@@ -1529,65 +2203,65 @@ declare class RectangularBoxMarkerBaseEditor<TMarkerType extends RectangularBoxM
      * Container for the marker's editing controls.
      */
     protected controlBox: SVGGElement;
+    /**
+     * Container for the marker's manipulation grips.
+     */
     protected manipulationBox: SVGGElement;
     private readonly CB_DISTANCE;
     private controlRect?;
     private rotatorGripLine?;
     private controlGrips;
+    /**
+     * Array of disabled resize grips.
+     *
+     * Use this in derived classes to disable specific resize grips.
+     */
     protected disabledResizeGrips: GripLocation[];
     private rotatorGrip?;
+    /**
+     * Active grip during manipulation
+     */
     protected activeGrip?: Grip;
     private disableRotation;
     constructor(properties: MarkerEditorProperties<TMarkerType>);
-    /**
-     * Returns true if passed SVG element belongs to the marker. False otherwise.
-     *
-     * @param el - target element.
-     */
     ownsTarget(el: EventTarget): boolean;
-    /**
-     * Handles pointer (mouse, touch, stylus, etc.) down event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
-     */
     pointerDown(point: IPoint, target?: EventTarget): void;
-    protected _suppressMarkerCreateEvent: boolean;
     /**
-     * Handles pointer (mouse, touch, stylus, etc.) up event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
+     * When set to true marker created event will not be triggered.
      */
+    protected _suppressMarkerCreateEvent: boolean;
     pointerUp(point: IPoint): void;
-    /**
-     * Handles marker manipulation (move, resize, rotate, etc.).
-     *
-     * @param point - event coordinates.
-     */
     manipulate(point: IPoint): void;
-    /**
-     * Resizes the marker based on pointer coordinates and context.
-     * @param point - pointer coordinates.
-     */
     protected resize(point: IPoint): void;
     /**
      * Sets control box size and location.
      */
     protected setSize(): void;
+    select(multi?: boolean): void;
+    deselect(): void;
     /**
-     * Displays marker's controls.
+     * Creates control box for manipulation controls.
      */
-    select(multi?: boolean): void;
+    protected setupControlBox(): void;
     /**
-     * Hides marker's controls.
+     * Adjusts control box size and location.
      */
-    deselect(): void;
-    private setupControlBox;
     protected adjustControlBox(): void;
+    /**
+     * Adds control grips to control box.
+     */
     protected addControlGrips(): void;
     private createRotateGrip;
+    /**
+     * Updates manipulation grip layout.
+     */
     protected positionGrips(): void;
+    /**
+     * Positions specific grip.
+     * @param grip
+     * @param x
+     * @param y
+     */
     protected positionGrip(grip: SVGGraphicsElement | undefined, x: number, y: number): void;
     /**
      * Hides marker's editing controls.
@@ -1597,51 +2271,53 @@ declare class RectangularBoxMarkerBaseEditor<TMarkerType extends RectangularBoxM
      * Shows marker's editing controls.
      */
     protected showControlBox(): void;
-    protected adjustGripVisibility(): void;
     /**
-     * Scales marker. Used after the image resize.
-     *
-     * @param scaleX - horizontal scale
-     * @param scaleY - vertical scale
+     * Adjusts visibility of resize grips.
      */
+    protected adjustGripVisibility(): void;
     scale(scaleX: number, scaleY: number): void;
 }
 
+/**
+ * Editor for shape outline markers.
+ *
+ * @summary Shape outline (unfilled shape) marker editor.
+ * @group Editors
+ */
 declare class ShapeOutlineMarkerEditor<TMarkerType extends ShapeOutlineMarkerBase = ShapeOutlineMarkerBase> extends RectangularBoxMarkerBaseEditor<TMarkerType> {
     constructor(properties: MarkerEditorProperties<TMarkerType>);
-    /**
-     * Handles pointer (mouse, touch, stylus, etc.) down event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
-     */
     pointerDown(point: IPoint, target?: EventTarget): void;
-    /**
-     * Resizes the marker based on the pointer coordinates.
-     * @param point - current pointer coordinates.
-     */
     protected resize(point: IPoint): void;
-    /**
-     * Handles pointer (mouse, touch, stylus, etc.) up event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
-     */
     pointerUp(point: IPoint): void;
 }
 
+/**
+ * Editor for filled shape markers.
+ *
+ * @summary Filled shape marker editor.
+ * @group Editors
+ */
 declare class ShapeMarkerEditor<TMarkerType extends ShapeMarkerBase = ShapeMarkerBase> extends ShapeOutlineMarkerEditor<TMarkerType> {
 }
 
+/**
+ * Editor for linear markers.
+ *
+ * @summary Editor for line-like markers.
+ * @group Editors
+ */
 declare class LinearMarkerEditor<TMarkerType extends LinearMarkerBase = LinearMarkerBase> extends MarkerBaseEditor<TMarkerType> {
     /**
      * Default line length when marker is created with a simple click (without dragging).
      */
     protected defaultLength: number;
     /**
-     * Pointer coordinates at the start of move or resize.
+     * Pointer X coordinate at the start of move or resize.
      */
     protected manipulationStartX: number;
+    /**
+     * Pointer Y coordinate at the start of move or resize.
+     */
     protected manipulationStartY: number;
     private manipulationStartX1;
     private manipulationStartY1;
@@ -1651,6 +2327,9 @@ declare class LinearMarkerEditor<TMarkerType extends LinearMarkerBase = LinearMa
      * Container for control elements.
      */
     protected controlBox: SVGGElement;
+    /**
+     * Container for manipulation grips.
+     */
     protected manipulationBox: SVGGElement;
     /**
      * First manipulation grip
@@ -1665,36 +2344,10 @@ declare class LinearMarkerEditor<TMarkerType extends LinearMarkerBase = LinearMa
      */
     protected activeGrip?: ResizeGrip;
     constructor(properties: MarkerEditorProperties<TMarkerType>);
-    /**
-     * Returns true if passed SVG element belongs to the marker. False otherwise.
-     *
-     * @param el - target element.
-     */
     ownsTarget(el: EventTarget): boolean;
-    /**
-     * Handles pointer (mouse, touch, stylus, etc.) down event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
-     */
     pointerDown(point: IPoint, target?: EventTarget): void;
-    /**
-     * Handles pointer (mouse, touch, stylus, etc.) up event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
-     */
     pointerUp(point: IPoint): void;
-    /**
-     * Handles marker manipulation (move, resize, rotate, etc.).
-     *
-     * @param point - event coordinates.
-     */
     manipulate(point: IPoint): void;
-    /**
-     * Resizes the line marker.
-     * @param point - current manipulation coordinates.
-     */
     protected resize(point: IPoint): void;
     /**
      * Creates control box for manipulation controls.
@@ -1721,70 +2374,53 @@ declare class LinearMarkerEditor<TMarkerType extends LinearMarkerBase = LinearMa
      * @param y - new Y coordinate
      */
     protected positionGrip(grip: SVGGraphicsElement, x: number, y: number): void;
-    /**
-     * Displays marker's controls.
-     */
     select(multi?: boolean): void;
-    /**
-     * Hides marker's controls.
-     */
     deselect(): void;
 }
 
+/**
+ * Editor for polygon markers.
+ *
+ * @summary Polygon marker editor.
+ * @group Editors
+ */
 declare class PolygonMarkerEditor<TMarkerType extends PolygonMarker = PolygonMarker> extends MarkerBaseEditor<TMarkerType> {
     /**
      * Default line length when marker is created with a simple click (without dragging).
      */
     protected defaultLength: number;
     /**
-     * Pointer coordinates at the start of move or resize.
+     * Pointer X coordinate at the start of move or resize.
      */
     protected manipulationStartX: number;
+    /**
+     * Pointer Y coordinate at the start of move or resize.
+     */
     protected manipulationStartY: number;
     /**
      * Container for control elements.
      */
     protected controlBox: SVGGElement;
+    /**
+     * Container for manipulation grips.
+     */
     protected manipulationBox: SVGGElement;
+    /**
+     * Array of manipulation grips.
+     */
     protected grips: ResizeGrip[];
     /**
      * Active manipulation grip.
      */
     protected activeGrip?: ResizeGrip;
     constructor(properties: MarkerEditorProperties<TMarkerType>);
-    /**
-     * Returns true if passed SVG element belongs to the marker. False otherwise.
-     *
-     * @param el - target element.
-     */
     ownsTarget(el: EventTarget): boolean;
-    /**
-     * Handles pointer (mouse, touch, stylus, etc.) down event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
-     */
     pointerDown(point: IPoint, target?: EventTarget): void;
     private startCreation;
     private addNewPointWhileCreating;
     private finishCreation;
-    /**
-     * Handles pointer (mouse, touch, stylus, etc.) up event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
-     */
     pointerUp(point: IPoint): void;
-    /**
-     * Handles marker manipulation (move, resize, rotate, etc.).
-     *
-     * @param point - event coordinates.
-     */
     manipulate(point: IPoint): void;
-    /**
-     * Resizes the line marker.
-     * @param point - current manipulation coordinates.
-     */
     protected resize(point: IPoint): void;
     dblClick(point: IPoint, target?: EventTarget | undefined): void;
     /**
@@ -1812,21 +2448,24 @@ declare class PolygonMarkerEditor<TMarkerType extends PolygonMarker = PolygonMar
      * @param y - new Y coordinate
      */
     protected positionGrip(grip: SVGGraphicsElement, x: number, y: number): void;
-    /**
-     * Displays marker's controls.
-     */
     select(multi?: boolean): void;
-    /**
-     * Hides marker's controls.
-     */
     deselect(): void;
 }
 
+/**
+ * Editor for freehand markers.
+ *
+ * @summary Freehand marker editor.
+ * @group Editors
+ */
 declare class FreehandMarkerEditor<TMarkerType extends FreehandMarker = FreehandMarker> extends MarkerBaseEditor<TMarkerType> {
     /**
-     * Pointer coordinates at the start of move or resize.
+     * Pointer X coordinate at the start of move or resize.
      */
     protected manipulationStartX: number;
+    /**
+     * Pointer Y coordinate at the start of move or resize.
+     */
     protected manipulationStartY: number;
     /**
      * Container for control elements.
@@ -1834,47 +2473,19 @@ declare class FreehandMarkerEditor<TMarkerType extends FreehandMarker = Freehand
     protected controlBox: SVGGElement;
     private controlRect?;
     constructor(properties: MarkerEditorProperties<TMarkerType>);
-    /**
-     * Returns true if passed SVG element belongs to the marker. False otherwise.
-     *
-     * @param el - target element.
-     */
     ownsTarget(el: EventTarget): boolean;
-    /**
-     * Handles pointer (mouse, touch, stylus, etc.) down event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
-     */
     pointerDown(point: IPoint, target?: EventTarget): void;
     private startCreation;
     private addNewPointWhileCreating;
     private finishCreation;
-    /**
-     * Handles pointer (mouse, touch, stylus, etc.) up event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
-     */
     pointerUp(point: IPoint): void;
-    /**
-     * Handles marker manipulation (move, resize, rotate, etc.).
-     *
-     * @param point - event coordinates.
-     */
     manipulate(point: IPoint): void;
     /**
      * Creates control box for manipulation controls.
      */
     protected setupControlBox(): void;
     protected adjustControlBox(): void;
-    /**
-     * Displays marker's controls.
-     */
     select(): void;
-    /**
-     * Hides marker's controls.
-     */
     deselect(): void;
 }
 
@@ -1882,6 +2493,9 @@ declare class FreehandMarkerEditor<TMarkerType extends FreehandMarker = Freehand
  * Text changed event handler type.
  */
 type TextChangedHandler = (text: string) => void;
+/**
+ * Blur event handler type.
+ */
 type BlurHandler = () => void;
 /**
  * Represents a text block editor element.
@@ -1962,12 +2576,21 @@ declare class TextBlockEditor {
      */
     set textColor(value: string);
     private _bgColor;
+    /**
+     * Returns text block's background color.
+     */
     get bgColor(): string;
+    /**
+     * Sets text block's background color.
+     */
     set bgColor(value: string);
     /**
      * Text changed event handler.
      */
     onTextChanged?: TextChangedHandler;
+    /**
+     * Blur event handler.
+     */
     onBlur?: BlurHandler;
     /**
      * Creates a new text block editor instance.
@@ -1990,49 +2613,81 @@ declare class TextBlockEditor {
     blur(): void;
 }
 
+/**
+ * Editor for text markers.
+ *
+ * @summary Text marker editor.
+ * @group Editors
+ */
 declare class TextMarkerEditor<TMarkerType extends TextMarker = TextMarker> extends RectangularBoxMarkerBaseEditor<TMarkerType> {
+    /**
+     * Container for text block editor.
+     */
     protected textBlockEditorContainer: SVGForeignObjectElement;
+    /**
+     * Text block editor.
+     */
     protected textBlockEditor: TextBlockEditor;
+    /**
+     * Text color.
+     */
     set color(color: string);
+    /**
+     * Text color.
+     */
     get color(): string;
+    /**
+     * Sets text's font family.
+     */
     set fontFamily(font: string);
+    /**
+     * Returns text's font family.
+     */
     get fontFamily(): string;
+    /**
+     * Sets text's font size.
+     */
     set fontSize(size: FontSize);
+    /**
+     * Returns text's font size.
+     */
     get fontSize(): FontSize;
     constructor(properties: MarkerEditorProperties<TMarkerType>);
     private _pointerDownTime;
     private _pointerDownPoint;
-    /**
-     * Handles pointer (mouse, touch, stylus, etc.) down event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
-     */
     pointerDown(point: IPoint, target?: EventTarget): void;
     dblClick(point: IPoint, target?: EventTarget): void;
     protected setSize(): void;
-    /**
-     * Resizes the marker based on the pointer coordinates.
-     * @param point - current pointer coordinates.
-     */
     protected resize(point: IPoint): void;
-    /**
-     * Handles pointer (mouse, touch, stylus, etc.) up event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
-     */
     pointerUp(point: IPoint): void;
     private showEditor;
     private hideEditor;
     private markerSizeChanged;
 }
 
+/**
+ * Editor for arrow markers.
+ *
+ * @summary Arrow marker editor.
+ * @group Editors
+ */
 declare class ArrowMarkerEditor<TMarkerType extends ArrowMarker = ArrowMarker> extends LinearMarkerEditor<TMarkerType> {
+    /**
+     * Sets the arrow type.
+     */
     set arrowType(value: ArrowType);
+    /**
+     * Returns the arrow type.
+     */
     get arrowType(): ArrowType;
 }
 
+/**
+ * Editor for callout markers.
+ *
+ * @summary Callout marker editor.
+ * @group Editors
+ */
 declare class CalloutMarkerEditor<TMarkerType extends CalloutMarker = CalloutMarker> extends TextMarkerEditor<TMarkerType> {
     private tipGrip?;
     private manipulationStartTipPositionX;
@@ -2046,43 +2701,75 @@ declare class CalloutMarkerEditor<TMarkerType extends CalloutMarker = CalloutMar
     protected resize(point: IPoint): void;
 }
 
+/**
+ * Editor for image markers.
+ *
+ * @summary Image marker editor.
+ * @group Editors
+ */
 declare class ImageMarkerEditor<TMarkerType extends ImageMarkerBase = ImageMarkerBase> extends RectangularBoxMarkerBaseEditor<TMarkerType> {
     constructor(properties: MarkerEditorProperties<TMarkerType>);
-    /**
-     * Handles pointer (mouse, touch, stylus, etc.) down event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
-     */
     pointerDown(point: IPoint, target?: EventTarget): void;
-    /**
-     * Handles pointer (mouse, touch, stylus, etc.) up event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
-     */
     pointerUp(point: IPoint): void;
 }
 
+/**
+ * Editor for caption frame markers.
+ *
+ * @summary Caption frame marker editor.
+ * @group Editors
+ */
 declare class CaptionFrameMarkerEditor<TMarkerType extends CaptionFrameMarker = CaptionFrameMarker> extends TextMarkerEditor<TMarkerType> {
     constructor(properties: MarkerEditorProperties<TMarkerType>);
     protected setSize(): void;
 }
 
+/**
+ * Event map for {@link MarkerView}.
+ */
 interface MarkerViewEventMap {
     /**
      * Viewer initialized.
      */
     viewinit: CustomEvent<MarkerViewEventData>;
+    /**
+     * Viewer shown.
+     */
     viewshow: CustomEvent<MarkerViewEventData>;
+    /**
+     * Viewer state restored.
+     */
     viewrestorestate: CustomEvent<MarkerViewEventData>;
 }
+/**
+ * Event data for {@link MarkerView}.
+ */
 interface MarkerViewEventData {
     /**
      * {@link MarkerView} instance.
      */
     markerView: MarkerView;
 }
+/**
+ * MarkerView is the main annotation viewer web component.
+ *
+ * @summary
+ * The main annotation viewer web component.
+ *
+ * @group Components
+ *
+ * @example
+ * To show dynamic annotation overlays on top of the original image you use `MarkerView`.
+ * ```js
+ * import { MarkerView } from '@markerjs/markerjs3';
+ *
+ * const markerView = new MarkerView();
+ * markerView.targetImage = targetImg;
+ * viewerContainer.appendChild(markerView);
+ *
+ * markerView.show(savedState);
+ * ```
+ */
 declare class MarkerView extends HTMLElement {
     private _contentContainer?;
     private _canvasContainer?;
@@ -2092,15 +2779,40 @@ declare class MarkerView extends HTMLElement {
     private width;
     private height;
     private _targetWidth;
+    /**
+     * Returns the target image width.
+     */
     get targetWidth(): number;
+    /**
+     * Sets the target image width.
+     */
     set targetWidth(value: number);
     private _targetHeight;
+    /**
+     * Returns the target image height.
+     */
     get targetHeight(): number;
+    /**
+     * Sets the target image height.
+     */
     set targetHeight(value: number);
+    private _targetImageLoaded;
     private _targetImage;
+    /**
+     * Returns the target image.
+     */
     get targetImage(): HTMLImageElement | undefined;
+    /**
+     * Sets the target image.
+     */
     set targetImage(value: HTMLImageElement | undefined);
+    /**
+     * Marker types available for the viewer.
+     */
     markerTypes: Array<typeof MarkerBase>;
+    /**
+     * Collection of markers currently displayed on the viewer.
+     */
     markers: MarkerBase[];
     private _logoUI?;
     private _zoomLevel;
@@ -2127,7 +2839,16 @@ declare class MarkerView extends HTMLElement {
     private detachEvents;
     private detachWindowEvents;
     private getMarkerTypeByName;
+    /**
+     * Adds a new marker type to be available in the viewer.
+     * @param markerType
+     */
     registerMarkerType(markerType: typeof MarkerBase): void;
+    private _stateToRestore;
+    /**
+     * Loads and shows previously saved annotation state.
+     * @param state
+     */
     show(state: AnnotationState): void;
     private scaleMarkers;
     /**
@@ -2148,21 +2869,73 @@ declare class MarkerView extends HTMLElement {
     removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | EventListenerOptions | undefined): void;
 }
 
+/**
+ * @module Renderer
+ * @category API Reference
+ */
+
+/**
+ * Renderer is used to rasterize annotations.
+ *
+ * @example
+ * To render the annotation as a static image you use `Renderer`.
+ *
+ * ```js
+ * import { MarkerArea, Renderer } from '@markerjs/markerjs3';
+ * ```
+ *
+ * Just create an instance of it and pass the annotation state to the `rasterize()` method:
+ *
+ * ```js
+ * const renderer = new Renderer();
+ * renderer.targetImage = targetImg;
+ * const dataUrl = await renderer.rasterize(markerArea.getState());
+ *
+ * const img = document.createElement('img');
+ * img.src = dataUrl;
+ *
+ * someDiv.appendChild(img);
+ * ```
+ */
 declare class Renderer {
     private _mainCanvas?;
     private _editingTarget?;
     private _renderHelperContainer?;
     private _targetWidth;
+    /**
+     * Width of the target image.
+     */
     get targetWidth(): number;
+    /**
+     * Width of the target image.
+     */
     set targetWidth(value: number);
     private _targetHeight;
+    /**
+     * Height of the target image.
+     */
     get targetHeight(): number;
+    /**
+     * Height of the target image.
+     */
     set targetHeight(value: number);
     private _targetImageLoaded;
     private _targetImage;
+    /**
+     * Target image to render annotations on.
+     */
     get targetImage(): HTMLImageElement | undefined;
+    /**
+     * Target image to render annotations on.
+     */
     set targetImage(value: HTMLImageElement | undefined);
+    /**
+     * Marker types available for rendering.
+     */
     markerTypes: Array<typeof MarkerBase>;
+    /**
+     * Array of markers to render.
+     */
     markers: MarkerBase[];
     private _isInitialized;
     /**
@@ -2205,10 +2978,24 @@ declare class Renderer {
     private addTargetImage;
     private addNewMarker;
     private getMarkerTypeByName;
+    /**
+     * Adds a new marker type to the list of available marker types.
+     * @param markerType - Marker type to register.
+     */
     registerMarkerType(markerType: typeof MarkerBase): void;
+    /**
+     * Restores the annotation state.
+     * @param state - Annotation state to restore.
+     */
     restoreState(state: AnnotationState): void;
     private scaleMarkers;
+    /**
+     * Rasterizes the annotation.
+     * @param state - annotation state to render.
+     * @param targetCanvas - optional target canvas to render the annotation on.
+     * @returns
+     */
     rasterize(state: AnnotationState, targetCanvas?: HTMLCanvasElement): Promise<string>;
 }
 
-export { type AnnotationState, ArrowMarker, ArrowMarkerEditor, type ArrowMarkerState, type ArrowType, CalloutMarker, CalloutMarkerEditor, type CalloutMarkerState, CaptionFrameMarker, CaptionFrameMarkerEditor, type CaptionFrameMarkerState, CheckImageMarker, type ColorType, CoverMarker, CustomImageMarker, EllipseFrameMarker, EllipseMarker, type FontSize, FrameMarker, FreehandMarker, FreehandMarkerEditor, type FreehandMarkerState, Grip, HighlightMarker, type IPoint, ImageMarkerBase, type ImageMarkerBaseState, ImageMarkerEditor, type ImageType, LineMarker, LinearMarkerBase, type LinearMarkerBaseState, LinearMarkerEditor, MarkerArea, type MarkerAreaEventData, type MarkerAreaEventMap, MarkerBase, MarkerBaseEditor, type MarkerBaseState, type MarkerEditorProperties, type MarkerEditorState, MarkerView, type MarkerViewEventData, type MarkerViewEventMap, MeasurementMarker, PolygonMarker, PolygonMarkerEditor, type PolygonMarkerState, RectangularBoxMarkerBase, type RectangularBoxMarkerBaseState, Renderer, ResizeGrip, RotateGrip, ShapeMarkerBase, type ShapeMarkerBaseState, ShapeMarkerEditor, ShapeOutlineMarkerBase, type ShapeOutlineMarkerBaseState, ShapeOutlineMarkerEditor, SvgHelper, TextMarker, TextMarkerEditor, type TextMarkerState, XImageMarker };
+export { Activator, type AnnotationState, ArrowMarker, ArrowMarkerEditor, type ArrowMarkerState, type ArrowType, type BlurHandler, CalloutMarker, CalloutMarkerEditor, type CalloutMarkerState, CaptionFrameMarker, CaptionFrameMarkerEditor, type CaptionFrameMarkerState, CheckImageMarker, CoverMarker, CustomImageMarker, EllipseFrameMarker, EllipseMarker, type FontSize, FrameMarker, FreehandMarker, FreehandMarkerEditor, type FreehandMarkerState, Grip, type GripLocation, HighlightMarker, type IPoint, type ISize, type ITransformMatrix, ImageMarkerBase, type ImageMarkerBaseState, ImageMarkerEditor, type ImageType, LineMarker, LinearMarkerBase, type LinearMarkerBaseState, LinearMarkerEditor, MarkerArea, type MarkerAreaEventData, type MarkerAreaEventMap, type MarkerAreaMode, MarkerBase, MarkerBaseEditor, type MarkerBaseState, type MarkerCreationStyle, type MarkerEditorEventData, type MarkerEditorProperties, type MarkerEditorState, type MarkerStage, MarkerView, type MarkerViewEventData, type MarkerViewEventMap, MeasurementMarker, PolygonMarker, PolygonMarkerEditor, type PolygonMarkerState, RectangularBoxMarkerBase, type RectangularBoxMarkerBaseState, Renderer, ResizeGrip, RotateGrip, ShapeMarkerBase, type ShapeMarkerBaseState, ShapeMarkerEditor, ShapeOutlineMarkerBase, type ShapeOutlineMarkerBaseState, ShapeOutlineMarkerEditor, SvgHelper, TextBlock, TextBlockEditor, type TextChangedHandler, TextMarker, TextMarkerEditor, type TextMarkerState, XImageMarker };