@markerjs/markerjs3 3.0.0-alpha.1 → 3.0.0-alpha.2

package/markerjs3.d.ts

@@ -149,6 +149,13 @@ interface MarkerBaseState {
     opacity?: number;
 }
 
+interface AnnotationState {
+    version?: number;
+    width: number;
+    height: number;
+    markers: MarkerBaseState[];
+}
+
 /**
  * Describes a size
  */
@@ -231,241 +238,828 @@ declare class MarkerBase {
     scale(scaleX: number, scaleY: number): void;
 }
 
-interface AnnotationState {
-    version?: number;
-    width: number;
-    height: number;
-    markers: MarkerBaseState[];
+/**
+ * Represents a simplified version of the SVGMatrix.
+ */
+interface ITransformMatrix {
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    e: number;
+    f: number;
 }
 
-interface MarkerEditorProperties<TMarkerType extends MarkerBase = MarkerBase> {
+/**
+ * Represents a state snapshot of a RectangularBoxMarkerBase.
+ */
+interface RectangularBoxMarkerBaseState extends MarkerBaseState {
     /**
-     * SVG container for the marker and editor elements.
+     * x coordinate of the top-left corner.
      */
-    container: SVGGElement;
+    left: number;
     /**
-     * HTML overlay container for editor's HTML elements (such as label text editor).
+     * y coordinate of the top-left corner.
      */
-    overlayContainer: HTMLDivElement;
+    top: number;
     /**
-     * Type of marker to create.
+     * Marker's width.
      */
-    markerType: new (container: SVGGElement) => TMarkerType;
+    width: number;
     /**
-     * Previously created marker to edit.
+     * Marker's height.
      */
-    marker?: TMarkerType;
+    height: number;
+    /**
+     * Marker's rotation angle.
+     */
+    rotationAngle: number;
+    visualTransformMatrix?: ITransformMatrix;
+    containerTransformMatrix?: ITransformMatrix;
 }
 
 /**
- * Represents marker's state (status) in time.
+ * 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.
  */
-type MarkerEditorState = 'new' | 'creating' | 'select' | 'move' | 'resize' | 'rotate' | 'edit';
-type MarkerCreationStyle = 'draw' | 'drop';
-declare class MarkerBaseEditor<TMarkerType extends MarkerBase = MarkerBase> {
-    protected _markerType: new (container: SVGGElement) => TMarkerType;
-    protected _creationStyle: MarkerCreationStyle;
-    get creationStyle(): MarkerCreationStyle;
+declare class RectangularBoxMarkerBase extends MarkerBase {
     /**
-     * Type guard for specific marker editor types.
-     * @param cls
-     * @returns
+     * x coordinate of the top-left corner.
      */
-    is<T>(cls: new (...args: any[]) => T): this is T;
-    protected _marker: TMarkerType;
-    get marker(): TMarkerType;
-    protected _container: SVGGElement;
+    left: number;
     /**
-     * Returns the SVG container for the marker's and editor's visual elements.
+     * y coordinate of the top-left corner.
      */
-    get container(): SVGGElement;
+    top: number;
     /**
-     * Overlay container for HTML elements like text editors, etc.
+     * Marker width.
      */
-    protected _overlayContainer: HTMLDivElement;
+    width: number;
     /**
-     * Overlay container for HTML elements like text editors, etc.
+     * Marker height.
      */
-    get overlayContainer(): HTMLDivElement;
+    height: number;
     /**
-     * Editor's state.
+     * Marker's rotation angle.
      */
-    protected _state: MarkerEditorState;
+    rotationAngle: number;
     /**
-     * Gets editor's state.
+     * x coordinate of the marker's center.
      */
-    get state(): MarkerEditorState;
+    get centerX(): number;
     /**
-     * Sets editor's state.
+     * y coordinate of the marker's center.
      */
-    set state(value: MarkerEditorState);
+    get centerY(): number;
+    private _visual?;
     /**
-     * SVG group holding editor's control box.
+     * Container for the marker's visual.
      */
-    protected _controlBox: SVGGElement;
+    protected get visual(): SVGGraphicsElement | undefined;
+    protected set visual(value: SVGGraphicsElement);
+    constructor(container: SVGGElement);
     /**
-     * Method called when marker creation is finished.
+     * Moves visual to the specified coordinates.
+     * @param point - coordinates of the new top-left corner of the visual.
      */
-    onMarkerCreated?: <T extends MarkerBaseEditor<MarkerBase>>(editor: T) => void;
+    moveVisual(point: IPoint): void;
+    setSize(): void;
+    rotate(point: IPoint): void;
+    private applyRotation;
     /**
-     * Method to call when marker state changes.
+     * Returns point coordinates based on the actual screen coordinates and marker's rotation.
+     * @param point - original pointer coordinates
      */
-    onStateChanged?: <T extends MarkerBaseEditor<MarkerBase>>(editor: T) => void;
+    rotatePoint(point: IPoint): IPoint;
     /**
-     * Marker's state when it is selected
+     * Returns original point coordinates based on coordinates with rotation applied.
+     * @param point - rotated point coordinates.
      */
-    protected manipulationStartState?: string;
+    unrotatePoint(point: IPoint): IPoint;
     /**
-     * Is this marker selected?
+     * Returns marker's outline path for use while creating, etc.
+     * @returns SVG path `d` attribute.
      */
-    protected _isSelected: boolean;
+    getOutline(): string;
     /**
-     * Returns true if the marker is currently selected
+     * Returns marker's state.
      */
-    get isSelected(): boolean;
-    protected _continuousCreation: boolean;
-    get continuousCreation(): boolean;
+    getState(): RectangularBoxMarkerBaseState;
     /**
-     * Sets rectangle's border stroke color.
-     * @param color - color as string
+     * Restores marker's state to the previously saved one.
+     * @param state - previously saved state.
      */
-    set strokeColor(color: string);
-    get strokeColor(): string;
+    restoreState(state: MarkerBaseState): void;
     /**
-     * Sets rectangle's border stroke (line) width.
-     * @param color - color as string
+     * Scales marker. Used after the image resize.
+     *
+     * @param scaleX - horizontal scale
+     * @param scaleY - vertical scale
      */
-    set strokeWidth(width: number);
-    get strokeWidth(): number;
+    scale(scaleX: number, scaleY: number): void;
+}
+
+declare class ShapeOutlineMarkerBase extends RectangularBoxMarkerBase {
+    static title: string;
+    protected applyStrokeColor(): void;
+    protected applyStrokeWidth(): void;
+    protected applyStrokeDasharray(): void;
+    protected applyOpacity(): void;
+    constructor(container: SVGGElement);
+    ownsTarget(el: EventTarget): boolean;
+    protected getPath(width?: number, height?: number): string;
+    getOutline(): string;
+    createVisual(): void;
+    adjustVisual(): void;
+    setSize(): void;
     /**
-     * Sets rectangle's border stroke dash array.
-     * @param color - color as string
+     * Restores previously saved marker state.
+     *
+     * @param state - previously saved state.
      */
-    set strokeDasharray(dashes: string);
-    get strokeDasharray(): string;
-    set fillColor(color: string);
-    get fillColor(): string;
-    set opacity(value: number);
-    get opacity(): number;
-    constructor(properties: MarkerEditorProperties<TMarkerType>);
-    ownsTarget(el: EventTarget | null): boolean;
+    restoreState(state: MarkerBaseState): void;
     /**
-     * Selects this marker and displays appropriate selected marker UI.
+     * Scales marker. Used after the image resize.
+     *
+     * @param scaleX - horizontal scale
+     * @param scaleY - vertical scale
      */
-    select(): void;
+    scale(scaleX: number, scaleY: number): void;
+}
+
+/**
+ * Represents outline shape's state.
+ */
+interface ShapeOutlineMarkerBaseState extends RectangularBoxMarkerBaseState {
+}
+
+declare class FrameMarker extends ShapeOutlineMarkerBase {
     /**
-     * Deselects this marker and hides selected marker UI.
+     * String type name of the marker type.
      */
-    deselect(): void;
+    static typeName: string;
     /**
-     * Handles pointer (mouse, touch, stylus, etc.) down event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
+     * Marker type title (display name) used for accessibility and other attributes.
      */
-    pointerDown(point: IPoint, target?: EventTarget): void;
+    static title: string;
+    constructor(container: SVGGElement);
+    protected getPath(width?: number, height?: number): string;
+    getState(): ShapeOutlineMarkerBaseState;
+}
+
+/**
+ * Represents base state for line-style markers.
+ */
+interface LinearMarkerBaseState extends MarkerBaseState {
     /**
-     * Handles pointer (mouse, touch, stylus, etc.) double click event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
+     * x coordinate for the first end-point.
      */
-    dblClick(point: IPoint, target?: EventTarget): void;
+    x1: number;
     /**
-     * Handles marker manipulation (move, resize, rotate, etc.).
-     *
-     * @param point - event coordinates.
+     * y coordinate for the first end-point.
      */
-    manipulate(point: IPoint): void;
+    y1: number;
     /**
-     * Handles pointer (mouse, touch, stylus, etc.) up event.
-     *
-     * @param point - event coordinates.
+     * x coordinate for the second end-point.
      */
-    pointerUp(point: IPoint): void;
+    x2: number;
     /**
-     * Disposes the marker and clean's up.
+     * y coordinate for the second end-point.
      */
-    dispose(): void;
-    protected adjustControlBox(): void;
-    scale(scaleX: number, scaleY: number): void;
+    y2: number;
+}
+
+declare class LinearMarkerBase extends MarkerBase {
     /**
-     * Called by a marker when its state could have changed.
-     * Does a check if the state has indeed changed before firing the handler.
+     * x coordinate of the first end-point
      */
-    protected stateChanged(): void;
-    getState(): MarkerBaseState;
+    x1: number;
     /**
-     * Restores previously saved marker state.
+     * y coordinate of the first end-point
+     */
+    y1: number;
+    /**
+     * x coordinate of the second end-point
+     */
+    x2: number;
+    /**
+     * y coordinate of the second end-point
+     */
+    y2: number;
+    /**
+     * Marker's main visual.
+     */
+    protected visual: SVGGraphicsElement | undefined;
+    protected selectorVisual: SVGGraphicsElement | undefined;
+    protected visibleVisual: SVGGraphicsElement | undefined;
+    protected applyStrokeColor(): void;
+    protected applyStrokeWidth(): void;
+    protected applyStrokeDasharray(): void;
+    protected applyOpacity(): void;
+    constructor(container: SVGGElement);
+    /**
+     * Returns true if passed SVG element belongs to the marker. False otherwise.
      *
+     * @param el - target element.
+     */
+    ownsTarget(el: EventTarget): boolean;
+    protected getPath(): string;
+    createVisual(): void;
+    /**
+     * When implemented adjusts marker visual after manipulation when needed.
+     */
+    adjustVisual(): void;
+    /**
+     * Returns marker's state.
+     */
+    getState(): LinearMarkerBaseState;
+    /**
+     * Restores marker's state to the previously saved one.
      * @param state - previously saved state.
      */
     restoreState(state: MarkerBaseState): void;
-}
-
-interface MarkerAreaEventMap {
     /**
-     * Marker area initialized.
+     * Scales marker. Used after the image resize.
+     *
+     * @param scaleX - horizontal scale
+     * @param scaleY - vertical scale
      */
-    areainit: CustomEvent<MarkerAreaEventData>;
-    areashow: CustomEvent<MarkerAreaEventData>;
-    arearestorestate: CustomEvent<MarkerAreaEventData>;
-    areafocus: CustomEvent<MarkerAreaEventData>;
-    areablur: CustomEvent<MarkerAreaEventData>;
-    areastatechange: CustomEvent<MarkerAreaEventData>;
-    markerselect: CustomEvent<MarkerEditorEventData>;
-    markerdeselect: CustomEvent<MarkerEditorEventData>;
-    markercreating: CustomEvent<MarkerEditorEventData>;
-    markercreate: CustomEvent<MarkerEditorEventData>;
-    markerbeforedelete: CustomEvent<MarkerEditorEventData>;
-    markerdelete: CustomEvent<MarkerEditorEventData>;
-    markerchange: CustomEvent<MarkerEditorEventData>;
+    scale(scaleX: number, scaleY: number): void;
 }
-interface MarkerAreaEventData {
+
+interface PolygonMarkerState extends MarkerBaseState {
     /**
-     * {@link MarkerArea} instance.
+     * Polygon points.
      */
-    markerArea: MarkerArea;
+    points: Array<IPoint>;
 }
-interface MarkerEditorEventData extends MarkerAreaEventData {
-    markerEditor: MarkerBaseEditor;
-}
-declare class MarkerArea extends HTMLElement {
-    private _contentContainer?;
-    private _canvasContainer?;
-    private _overlayContainer;
-    private _overlayContentContainer;
-    private _mainCanvas?;
-    private _groupLayer?;
-    private _editingTarget?;
-    private width;
-    private height;
-    private _targetWidth;
-    get targetWidth(): number;
-    set targetWidth(value: number);
-    private _targetHeight;
-    get targetHeight(): number;
-    set targetHeight(value: number);
-    private mode;
-    private _logoUI?;
-    private _isInitialized;
-    private _currentMarkerEditor?;
-    get currentMarkerEditor(): MarkerBaseEditor | undefined;
-    private _newMarkerOutline;
-    private _targetImage;
-    get targetImage(): HTMLImageElement | undefined;
-    set targetImage(value: HTMLImageElement | undefined);
-    markerEditors: Map<typeof MarkerBase, typeof MarkerBaseEditor<MarkerBase>>;
-    editors: MarkerBaseEditor[];
-    private _zoomLevel;
+
+declare class PolygonMarker extends MarkerBase {
+    static typeName: string;
+    static title: string;
+    points: IPoint[];
     /**
-     * Returns the current zoom level.
+     * Marker's main visual.
      */
-    get zoomLevel(): number;
+    visual: SVGGraphicsElement | undefined;
+    selectorVisual: SVGGElement | undefined;
+    selectorVisualLines: SVGLineElement[];
+    visibleVisual: SVGGraphicsElement | undefined;
+    protected applyStrokeColor(): void;
+    protected applyStrokeWidth(): void;
+    protected applyStrokeDasharray(): void;
+    protected applyOpacity(): void;
+    constructor(container: SVGGElement);
     /**
-     * Sets the current zoom level.
-     */
-    set zoomLevel(value: number);
+     * Returns true if passed SVG element belongs to the marker. False otherwise.
+     *
+     * @param el - target element.
+     */
+    ownsTarget(el: EventTarget): boolean;
+    protected getPath(): string;
+    createVisual(): void;
+    private createSelectorVisual;
+    /**
+     * When implemented 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;
+}
+
+interface FreehandMarkerState extends MarkerBaseState {
+    points: Array<IPoint>;
+}
+
+declare class FreehandMarker extends MarkerBase {
+    static typeName: string;
+    static title: string;
+    points: IPoint[];
+    /**
+     * Marker's main visual.
+     */
+    visual: SVGGraphicsElement | undefined;
+    protected selectorVisual: SVGGraphicsElement | undefined;
+    visibleVisual: SVGGraphicsElement | undefined;
+    protected applyStrokeColor(): void;
+    protected applyStrokeWidth(): void;
+    protected applyStrokeDasharray(): void;
+    protected applyOpacity(): void;
+    constructor(container: SVGGElement);
+    /**
+     * Returns true if passed SVG element belongs to the marker. False otherwise.
+     *
+     * @param el - target element.
+     */
+    ownsTarget(el: EventTarget): boolean;
+    protected getPath(): string;
+    createVisual(): void;
+    /**
+     * When implemented adjusts marker visual after manipulation when needed.
+     */
+    adjustVisual(): void;
+    /**
+     * Returns marker's state.
+     */
+    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;
+}
+
+/**
+ * Font size settings.
+ */
+interface FontSize {
+    /**
+     * Number of {@link units}.
+     */
+    value: number;
+    /**
+     * Units the {@link value} represents.
+     */
+    units: string;
+    /**
+     * Value increment/decrement step for controls cycling through the size values.
+     */
+    step: number;
+}
+
+/**
+ * TextBlock represents a block of text used across all text-based stencils and connector labels.
+ */
+declare class TextBlock {
+    /**
+     * Fired when text size changes.
+     *
+     * @group Events
+     */
+    onTextSizeChanged?: (textBlock: TextBlock) => void;
+    private _text;
+    /**
+     * Returns the text block's text
+     */
+    get text(): string;
+    /**
+     * Sets the text block's text.
+     */
+    set text(value: string);
+    /**
+     * Text block's horizontal offset from the automatically calculated position.
+     */
+    offsetX: number;
+    /**
+     * Text block's vertical offset from the automatically calculated position.
+     */
+    offsetY: number;
+    private _boundingBox;
+    /**
+     * Returns the bounding box where text should fit and/or be anchored.
+     */
+    get boundingBox(): DOMRect;
+    /**
+     * Sets the bounding box where text should fit and/or be anchored.
+     */
+    set boundingBox(value: DOMRect);
+    private _labelBackground;
+    /**
+     * Returns the background rectangle (behind the text).
+     */
+    get labelBackground(): SVGRectElement;
+    private _textElement;
+    /**
+     * Returns the text block's text element.
+     */
+    get textElement(): SVGTextElement;
+    private _color;
+    /**
+     * Sets the text color.
+     */
+    set color(value: string);
+    /**
+     * Returns the text color.
+     */
+    get color(): string;
+    private _fontFamily;
+    /**
+     * Returns the text's font family.
+     */
+    get fontFamily(): string;
+    /**
+     * Sets the text's font family.
+     */
+    set fontFamily(value: string);
+    private _fontSize;
+    /**
+     * Returns the text's font size.
+     */
+    get fontSize(): FontSize;
+    /**
+     * Sets the text's font size.
+     */
+    set fontSize(value: FontSize);
+    /**
+     * Creates a text block
+     * @param text initial text
+     */
+    constructor(text?: string);
+    /**
+     * Returns true if the text block contains the supplied element.
+     * @param el element to test.
+     * @returns true if the element belongs to the text block, false otherwise.
+     */
+    ownsTarget(el: EventTarget): boolean;
+    private setupTextElement;
+    private wrapText;
+    wordWrap: boolean;
+    private prevWrappedText;
+    /**
+     * Renders text within the text block according to its settings.
+     */
+    renderText(): void;
+    private applyFontStyles;
+    private _textSize?;
+    /**
+     * Returns the size of the rectangle containing the text block's text.
+     */
+    get textSize(): DOMRect | undefined;
+    /**
+     * Positions the text within the text block.
+     * @param textBlock
+     */
+    positionText(textBlock?: TextBlock): void;
+    /**
+     * Makes the text block content visible.
+     */
+    show(): void;
+    /**
+     * Hides the text block content.
+     */
+    hide(): void;
+    /**
+     * Shows the text block's dashed outline.
+     */
+    showControlBox(): void;
+    /**
+     * Hides the text block's dashed outline.
+     */
+    hideControlBox(): void;
+}
+
+interface TextMarkerState extends RectangularBoxMarkerBaseState {
+    color: string;
+    fontFamily: string;
+    fontSize: FontSize;
+    text: string;
+}
+
+declare class TextMarker extends RectangularBoxMarkerBase {
+    static typeName: string;
+    static title: string;
+    protected static DEFAULT_TEXT: string;
+    onSizeChanged?: (textMarker: TextMarker) => void;
+    private _color;
+    /**
+     * Returns stencil's text color.
+     */
+    get color(): string;
+    /**
+     * Sets the stencil's text color.
+     */
+    set color(value: string);
+    private _fontFamily;
+    /**
+     * Returns the stencil's font family.
+     */
+    get fontFamily(): string;
+    /**
+     * Sets the stencil's font family.
+     */
+    set fontFamily(value: string);
+    private _fontSize;
+    /**
+     * Returns the stencil's font size.
+     */
+    get fontSize(): FontSize;
+    /**
+     * Sets the stencil's font size.
+     */
+    set fontSize(value: FontSize);
+    /**
+     * Returns the default text for the stencil type.
+     * @returns stencil type's default text.
+     */
+    protected getDefaultText(): string;
+    private _text;
+    /**
+     * Returns the stencil's text.
+     */
+    get text(): string;
+    /**
+     * Sets the stencil's text.
+     */
+    set text(value: string);
+    /**
+     * Text padding from the bounding box.
+     */
+    protected padding: number;
+    /**
+     * Text's bounding box where text should fit and/or be anchored to.
+     */
+    textBoundingBox: DOMRect;
+    /**
+     * Text block handling the text rendering.
+     */
+    textBlock: TextBlock;
+    constructor(container: SVGGElement);
+    createVisual(): void;
+    ownsTarget(el: EventTarget): boolean;
+    protected setTextBoundingBox(): void;
+    /**
+     * Sets (adjusts) the stencil's size.
+     */
+    setSize(): void;
+    private textSizeChanged;
+    /**
+     * Sets the text color.
+     * @param color text color
+     */
+    setColor(color: string): void;
+    /**
+     * Sets the font family.
+     * @param font font family string
+     */
+    setFont(font: string): void;
+    /**
+     * Sets the font size.
+     * @param fontSize font size
+     */
+    setFontSize(fontSize: FontSize): void;
+    hideVisual(): void;
+    showVisual(): void;
+    getState(): TextMarkerState;
+    /**
+     * Restores previously saved marker state.
+     *
+     * @param state - previously saved state.
+     */
+    restoreState(state: MarkerBaseState): void;
+    scale(scaleX: number, scaleY: number): void;
+}
+
+interface MarkerEditorProperties<TMarkerType extends MarkerBase = MarkerBase> {
+    /**
+     * SVG container for the marker and editor elements.
+     */
+    container: SVGGElement;
+    /**
+     * HTML overlay container for editor's HTML elements (such as label text editor).
+     */
+    overlayContainer: HTMLDivElement;
+    /**
+     * Type of marker to create.
+     */
+    markerType: new (container: SVGGElement) => TMarkerType;
+    /**
+     * Previously created marker to edit.
+     */
+    marker?: TMarkerType;
+}
+
+/**
+ * Represents marker's state (status) in time.
+ */
+type MarkerEditorState = 'new' | 'creating' | 'select' | 'move' | 'resize' | 'rotate' | 'edit';
+type MarkerCreationStyle = 'draw' | 'drop';
+declare class MarkerBaseEditor<TMarkerType extends MarkerBase = MarkerBase> {
+    protected _markerType: new (container: SVGGElement) => TMarkerType;
+    protected _creationStyle: MarkerCreationStyle;
+    get creationStyle(): MarkerCreationStyle;
+    /**
+     * Type guard for specific marker editor types.
+     * @param cls
+     * @returns
+     */
+    is<T>(cls: new (...args: any[]) => T): this is T;
+    protected _marker: TMarkerType;
+    get marker(): TMarkerType;
+    protected _container: SVGGElement;
+    /**
+     * Returns the SVG container for the marker's and editor's visual elements.
+     */
+    get container(): SVGGElement;
+    /**
+     * Overlay container for HTML elements like text editors, etc.
+     */
+    protected _overlayContainer: HTMLDivElement;
+    /**
+     * Overlay container for HTML elements like text editors, etc.
+     */
+    get overlayContainer(): HTMLDivElement;
+    /**
+     * Editor's state.
+     */
+    protected _state: MarkerEditorState;
+    /**
+     * Gets editor's state.
+     */
+    get state(): MarkerEditorState;
+    /**
+     * Sets editor's state.
+     */
+    set state(value: MarkerEditorState);
+    /**
+     * SVG group holding editor's control box.
+     */
+    protected _controlBox: SVGGElement;
+    /**
+     * Method called when marker creation is finished.
+     */
+    onMarkerCreated?: <T extends MarkerBaseEditor<MarkerBase>>(editor: T) => void;
+    /**
+     * Method to call when marker state changes.
+     */
+    onStateChanged?: <T extends MarkerBaseEditor<MarkerBase>>(editor: T) => void;
+    /**
+     * Marker's state when it is selected
+     */
+    protected manipulationStartState?: string;
+    /**
+     * Is this marker selected?
+     */
+    protected _isSelected: boolean;
+    /**
+     * Returns true if the marker is currently selected
+     */
+    get isSelected(): boolean;
+    protected _continuousCreation: boolean;
+    get continuousCreation(): boolean;
+    /**
+     * Sets rectangle's border stroke color.
+     * @param color - color as string
+     */
+    set strokeColor(color: string);
+    get strokeColor(): string;
+    /**
+     * Sets rectangle's border stroke (line) width.
+     * @param color - color as string
+     */
+    set strokeWidth(width: number);
+    get strokeWidth(): number;
+    /**
+     * Sets rectangle's border stroke dash array.
+     * @param color - color as string
+     */
+    set strokeDasharray(dashes: string);
+    get strokeDasharray(): string;
+    set fillColor(color: string);
+    get fillColor(): string;
+    set opacity(value: number);
+    get opacity(): number;
+    constructor(properties: MarkerEditorProperties<TMarkerType>);
+    ownsTarget(el: EventTarget | null): boolean;
+    /**
+     * Selects this marker and displays appropriate selected marker UI.
+     */
+    select(): void;
+    /**
+     * Deselects this marker and hides selected marker UI.
+     */
+    deselect(): void;
+    /**
+     * 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.) double click event.
+     *
+     * @param point - event coordinates.
+     * @param target - direct event target element.
+     */
+    dblClick(point: IPoint, target?: EventTarget): void;
+    /**
+     * Handles marker manipulation (move, resize, rotate, etc.).
+     *
+     * @param point - event coordinates.
+     */
+    manipulate(point: IPoint): void;
+    /**
+     * Handles pointer (mouse, touch, stylus, etc.) up event.
+     *
+     * @param point - event coordinates.
+     */
+    pointerUp(point: IPoint): void;
+    /**
+     * Disposes the marker and clean's up.
+     */
+    dispose(): void;
+    protected adjustControlBox(): void;
+    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;
+    getState(): MarkerBaseState;
+    /**
+     * Restores previously saved marker state.
+     *
+     * @param state - previously saved state.
+     */
+    restoreState(state: MarkerBaseState): void;
+}
+
+interface MarkerAreaEventMap {
+    /**
+     * Marker area initialized.
+     */
+    areainit: CustomEvent<MarkerAreaEventData>;
+    areashow: CustomEvent<MarkerAreaEventData>;
+    arearestorestate: CustomEvent<MarkerAreaEventData>;
+    areafocus: CustomEvent<MarkerAreaEventData>;
+    areablur: CustomEvent<MarkerAreaEventData>;
+    areastatechange: CustomEvent<MarkerAreaEventData>;
+    markerselect: CustomEvent<MarkerEditorEventData>;
+    markerdeselect: CustomEvent<MarkerEditorEventData>;
+    markercreating: CustomEvent<MarkerEditorEventData>;
+    markercreate: CustomEvent<MarkerEditorEventData>;
+    markerbeforedelete: CustomEvent<MarkerEditorEventData>;
+    markerdelete: CustomEvent<MarkerEditorEventData>;
+    markerchange: CustomEvent<MarkerEditorEventData>;
+}
+interface MarkerAreaEventData {
+    /**
+     * {@link MarkerArea} instance.
+     */
+    markerArea: MarkerArea;
+}
+interface MarkerEditorEventData extends MarkerAreaEventData {
+    markerEditor: MarkerBaseEditor;
+}
+declare class MarkerArea extends HTMLElement {
+    private _contentContainer?;
+    private _canvasContainer?;
+    private _overlayContainer;
+    private _overlayContentContainer;
+    private _mainCanvas?;
+    private _groupLayer?;
+    private _editingTarget?;
+    private width;
+    private height;
+    private _targetWidth;
+    get targetWidth(): number;
+    set targetWidth(value: number);
+    private _targetHeight;
+    get targetHeight(): number;
+    set targetHeight(value: number);
+    private mode;
+    private _logoUI?;
+    private _isInitialized;
+    private _currentMarkerEditor?;
+    get currentMarkerEditor(): MarkerBaseEditor | undefined;
+    private _newMarkerOutline;
+    private _targetImage;
+    get targetImage(): HTMLImageElement | undefined;
+    set targetImage(value: HTMLImageElement | undefined);
+    markerEditors: Map<typeof MarkerBase, typeof MarkerBaseEditor<MarkerBase>>;
+    editors: MarkerBaseEditor[];
+    private _zoomLevel;
+    /**
+     * Returns the current zoom level.
+     */
+    get zoomLevel(): number;
+    /**
+     * Sets the current zoom level.
+     */
+    set zoomLevel(value: number);
     private prevPanPoint;
     private panTo;
     private undoRedoManager;
@@ -503,40 +1097,493 @@ declare class MarkerArea extends HTMLElement {
     restoreState(state: AnnotationState): void;
     private scaleMarkers;
     /**
-     * NOTE:
+     * NOTE:
+     *
+     * before removing or modifying this method please consider supporting marker.js
+     * by visiting https://markerjs.com/buy for details
+     *
+     * thank you!
+     */
+    private toggleLogo;
+    private addLogo;
+    private removeLogo;
+    private positionLogo;
+    /**
+     * Returns true if undo operation can be performed (undo stack is not empty).
+     */
+    get isUndoPossible(): boolean;
+    /**
+     * Returns true if redo operation can be performed (redo stack is not empty).
+     */
+    get isRedoPossible(): boolean;
+    private addUndoStep;
+    /**
+     * Undo last action.
+     */
+    undo(): void;
+    private undoStep;
+    /**
+     * Redo previously undone action.
+     */
+    redo(): void;
+    private redoStep;
+    addEventListener<T extends keyof MarkerAreaEventMap>(type: T, listener: (this: MarkerArea, ev: MarkerAreaEventMap[T]) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions | undefined): void;
+    removeEventListener<T extends keyof MarkerAreaEventMap>(type: T, listener: (this: MarkerArea, ev: MarkerAreaEventMap[T]) => void, options?: boolean | EventListenerOptions): void;
+    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | EventListenerOptions | undefined): void;
+}
+
+/**
+ * Color type marks the kind of color property a color is referring to.
+ */
+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.
+ */
+declare class Grip {
+    /**
+     * Grip's visual element.
+     */
+    protected _visual?: SVGGraphicsElement;
+    get visual(): SVGGraphicsElement;
+    /**
+     * Grip's size (radius).
+     */
+    gripSize: number;
+    fillColor: string;
+    strokeColor: string;
+    /**
+     * Creates a new grip.
+     */
+    constructor();
+    protected createVisual(): void;
+    /**
+     * Returns true if passed SVG element belongs to the grip. False otherwise.
+     *
+     * @param el - target element.
+     */
+    ownsTarget(el: EventTarget): boolean;
+}
+
+declare class ResizeGrip extends Grip {
+}
+
+declare class RotateGrip extends Grip {
+    constructor();
+}
+
+declare class RectangularBoxMarkerBaseEditor<TMarkerType extends RectangularBoxMarkerBase = RectangularBoxMarkerBase> extends MarkerBaseEditor<TMarkerType> {
+    /**
+     * x coordinate of the top-left corner at the start of manipulation.
+     */
+    protected manipulationStartLeft: number;
+    /**
+     * y coordinate of the top-left corner at the start of manipulation.
+     */
+    protected manipulationStartTop: number;
+    /**
+     * Width at the start of manipulation.
+     */
+    protected manipulationStartWidth: number;
+    /**
+     * Height at the start of manipulation.
+     */
+    protected manipulationStartHeight: number;
+    /**
+     * x coordinate of the pointer at the start of manipulation.
+     */
+    protected manipulationStartX: number;
+    /**
+     * y coordinate of the pointer at the start of manipulation.
+     */
+    protected manipulationStartY: number;
+    /**
+     * Pointer's horizontal distance from the top left corner.
+     */
+    protected offsetX: number;
+    /**
+     * Pointer's vertical distance from the top left corner.
+     */
+    protected offsetY: number;
+    /**
+     * Container for the marker's editing controls.
+     */
+    protected controlBox: SVGGElement;
+    private readonly CB_DISTANCE;
+    private controlRect?;
+    private rotatorGripLine?;
+    private controlGrips;
+    protected disabledResizeGrips: GripLocation[];
+    private rotatorGrip?;
+    private activeGrip?;
+    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.
+     */
+    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;
+    /**
+     * Displays marker's controls.
+     */
+    select(): void;
+    /**
+     * Hides marker's controls.
+     */
+    deselect(): void;
+    private setupControlBox;
+    protected adjustControlBox(): void;
+    private addControlGrips;
+    private createRotateGrip;
+    private positionGrips;
+    private positionGrip;
+    /**
+     * Hides marker's editing controls.
+     */
+    protected hideControlBox(): void;
+    /**
+     * Shows marker's editing controls.
+     */
+    protected showControlBox(): void;
+    protected adjustGripVisibility(): void;
+    /**
+     * Scales marker. Used after the image resize.
      *
-     * before removing or modifying this method please consider supporting marker.js
-     * by visiting https://markerjs.com/buy for details
+     * @param scaleX - horizontal scale
+     * @param scaleY - vertical scale
+     */
+    scale(scaleX: number, scaleY: number): void;
+}
+
+declare class ShapeOutlineMarkerEditor<TMarkerType extends ShapeOutlineMarkerBase = ShapeOutlineMarkerBase> extends RectangularBoxMarkerBaseEditor<TMarkerType> {
+    constructor(properties: MarkerEditorProperties<TMarkerType>);
+    /**
+     * Handles pointer (mouse, touch, stylus, etc.) down event.
      *
-     * thank you!
+     * @param point - event coordinates.
+     * @param target - direct event target element.
      */
-    private toggleLogo;
-    private addLogo;
-    private removeLogo;
-    private positionLogo;
+    pointerDown(point: IPoint, target?: EventTarget): void;
     /**
-     * Returns true if undo operation can be performed (undo stack is not empty).
+     * Resizes the marker based on the pointer coordinates.
+     * @param point - current pointer coordinates.
      */
-    get isUndoPossible(): boolean;
+    protected resize(point: IPoint): void;
     /**
-     * Returns true if redo operation can be performed (redo stack is not empty).
+     * Handles pointer (mouse, touch, stylus, etc.) up event.
+     *
+     * @param point - event coordinates.
+     * @param target - direct event target element.
      */
-    get isRedoPossible(): boolean;
-    private addUndoStep;
+    pointerUp(point: IPoint): void;
+}
+
+declare class LinearMarkerEditor<TMarkerType extends LinearMarkerBase = LinearMarkerBase> extends MarkerBaseEditor<TMarkerType> {
     /**
-     * Undo last action.
+     * Default line length when marker is created with a simple click (without dragging).
      */
-    undo(): void;
-    private undoStep;
+    protected defaultLength: number;
     /**
-     * Redo previously undone action.
+     * Pointer coordinates at the start of move or resize.
      */
-    redo(): void;
-    private redoStep;
-    addEventListener<T extends keyof MarkerAreaEventMap>(type: T, listener: (this: MarkerArea, ev: MarkerAreaEventMap[T]) => void, options?: boolean | AddEventListenerOptions): void;
-    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions | undefined): void;
-    removeEventListener<T extends keyof MarkerAreaEventMap>(type: T, listener: (this: MarkerArea, ev: MarkerAreaEventMap[T]) => void, options?: boolean | EventListenerOptions): void;
-    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | EventListenerOptions | undefined): void;
+    protected manipulationStartX: number;
+    protected manipulationStartY: number;
+    private manipulationStartX1;
+    private manipulationStartY1;
+    private manipulationStartX2;
+    private manipulationStartY2;
+    /**
+     * Container for control elements.
+     */
+    protected controlBox: SVGGElement;
+    /**
+     * First manipulation grip
+     */
+    protected grip1?: ResizeGrip;
+    /**
+     * Second manipulation grip.
+     */
+    protected grip2?: 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;
+    /**
+     * 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.
+     */
+    protected setupControlBox(): void;
+    protected adjustControlBox(): void;
+    /**
+     * Adds control grips to control box.
+     */
+    protected addControlGrips(): void;
+    /**
+     * Creates manipulation grip.
+     * @returns - manipulation grip.
+     */
+    protected createGrip(): ResizeGrip;
+    /**
+     * Updates manipulation grip layout.
+     */
+    protected positionGrips(): void;
+    /**
+     * Positions manipulation grip.
+     * @param grip - grip to position
+     * @param x - new X coordinate
+     * @param y - new Y coordinate
+     */
+    protected positionGrip(grip: SVGGraphicsElement, x: number, y: number): void;
+    /**
+     * Displays marker's controls.
+     */
+    select(): void;
+    /**
+     * Hides marker's controls.
+     */
+    deselect(): void;
+}
+
+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.
+     */
+    protected manipulationStartX: number;
+    protected manipulationStartY: number;
+    /**
+     * Container for control elements.
+     */
+    protected controlBox: SVGGElement;
+    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;
+    /**
+     * Creates control box for manipulation controls.
+     */
+    protected setupControlBox(): void;
+    protected adjustControlBox(): void;
+    /**
+     * Adds control grips to control box.
+     */
+    protected adjustControlGrips(): void;
+    /**
+     * Creates manipulation grip.
+     * @returns - manipulation grip.
+     */
+    protected createGrip(): ResizeGrip;
+    /**
+     * Updates manipulation grip layout.
+     */
+    protected positionGrips(): void;
+    /**
+     * Positions manipulation grip.
+     * @param grip - grip to position
+     * @param x - new X coordinate
+     * @param y - new Y coordinate
+     */
+    protected positionGrip(grip: SVGGraphicsElement, x: number, y: number): void;
+    /**
+     * Displays marker's controls.
+     */
+    select(): void;
+    /**
+     * Hides marker's controls.
+     */
+    deselect(): void;
+}
+
+declare class FreehandMarkerEditor<TMarkerType extends FreehandMarker = FreehandMarker> extends MarkerBaseEditor<TMarkerType> {
+    /**
+     * Pointer coordinates at the start of move or resize.
+     */
+    protected manipulationStartX: number;
+    protected manipulationStartY: number;
+    /**
+     * Container for control elements.
+     */
+    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;
+}
+
+declare class TextMarkerEditor<TMarkerType extends TextMarker = TextMarker> extends RectangularBoxMarkerBaseEditor<TMarkerType> {
+    private textBlockEditorContainer;
+    private textBlockEditor;
+    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;
 }
 
 interface MarkerViewEventMap {
@@ -617,4 +1664,65 @@ declare class MarkerView extends HTMLElement {
     removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | EventListenerOptions | undefined): void;
 }
 
-export { type IPoint, MarkerArea, type MarkerAreaEventData, type MarkerAreaEventMap, MarkerView, type MarkerViewEventData, type MarkerViewEventMap, SvgHelper };
+declare class Renderer {
+    private _mainCanvas?;
+    private _editingTarget?;
+    private _targetWidth;
+    get targetWidth(): number;
+    set targetWidth(value: number);
+    private _targetHeight;
+    get targetHeight(): number;
+    set targetHeight(value: number);
+    private _targetImageLoaded;
+    private _targetImage;
+    get targetImage(): HTMLImageElement | undefined;
+    set targetImage(value: HTMLImageElement | undefined);
+    markerTypes: Array<typeof MarkerBase>;
+    markers: MarkerBase[];
+    private _isInitialized;
+    /**
+     * Whether the image should be rendered at the original (natural) target image size.
+     */
+    naturalSize: boolean;
+    /**
+     * Rendered image type (`image/png`, `image/jpeg`, etc.).
+     */
+    imageType: string;
+    /**
+     * For formats that support it, specifies rendering quality.
+     *
+     * In the case of `image/jpeg` you can specify a value between 0 and 1 (lowest to highest quality).
+     *
+     * @type {number} - image rendering quality (0..1)
+     */
+    imageQuality?: number;
+    /**
+     * When set to true, only the marker layer without the original image will be rendered.
+     */
+    markersOnly: boolean;
+    /**
+     * When set and {@linkcode naturalSize} is `false` sets the width of the rendered image.
+     *
+     * Both `width` and `height` have to be set for this to take effect.
+     */
+    width?: number;
+    /**
+     * When set and {@linkcode naturalSize} is `false` sets the height of the rendered image.
+     *
+     * Both `width` and `height` have to be set for this to take effect.
+     */
+    height?: number;
+    constructor();
+    private init;
+    private addMainCanvas;
+    private setMainCanvasSize;
+    private setEditingTargetSize;
+    private addTargetImage;
+    private addNewMarker;
+    private getMarkerTypeByName;
+    restoreState(state: AnnotationState): void;
+    private scaleMarkers;
+    rasterize(state: AnnotationState, targetCanvas?: HTMLCanvasElement): Promise<string>;
+}
+
+export { type AnnotationState, type ColorType, FrameMarker, FreehandMarker, FreehandMarkerEditor, type FreehandMarkerState, Grip, type IPoint, LinearMarkerBase, type LinearMarkerBaseState, LinearMarkerEditor, MarkerArea, type MarkerAreaEventData, type MarkerAreaEventMap, MarkerBase, MarkerBaseEditor, type MarkerBaseState, type MarkerEditorProperties, type MarkerEditorState, MarkerView, type MarkerViewEventData, type MarkerViewEventMap, PolygonMarker, PolygonMarkerEditor, type PolygonMarkerState, RectangularBoxMarkerBase, type RectangularBoxMarkerBaseState, Renderer, ResizeGrip, RotateGrip, ShapeOutlineMarkerBase, type ShapeOutlineMarkerBaseState, ShapeOutlineMarkerEditor, SvgHelper, TextMarker, TextMarkerEditor, type TextMarkerState };