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

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,209 +238,924 @@ 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 {
+}
+
+/**
+ * Represents shape's state.
+ */
+interface ShapeMarkerBaseState extends ShapeOutlineMarkerBaseState {
+    fillColor: string;
+}
+
+declare abstract class ShapeMarkerBase extends ShapeOutlineMarkerBase {
+    static title: string;
+    protected _fillColor: string;
+    get fillColor(): string;
+    set fillColor(value: string);
+    constructor(container: SVGGElement);
+    createVisual(): void;
     /**
-     * Deselects this marker and hides selected marker UI.
+     * Returns current marker state that can be restored in the future.
      */
-    deselect(): void;
+    getState(): ShapeMarkerBaseState;
     /**
-     * Handles pointer (mouse, touch, stylus, etc.) down event.
+     * Restores previously saved marker state.
      *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
+     * @param state - previously saved state.
      */
-    pointerDown(point: IPoint, target?: EventTarget): void;
+    restoreState(state: MarkerBaseState): void;
+}
+
+declare class FrameMarker extends ShapeOutlineMarkerBase {
     /**
-     * Handles pointer (mouse, touch, stylus, etc.) double click event.
-     *
-     * @param point - event coordinates.
-     * @param target - direct event target element.
+     * String type name of the marker type.
      */
-    dblClick(point: IPoint, target?: EventTarget): void;
+    static typeName: string;
     /**
-     * Handles marker manipulation (move, resize, rotate, etc.).
-     *
-     * @param point - event coordinates.
+     * Marker type title (display name) used for accessibility and other attributes.
      */
-    manipulate(point: IPoint): 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.) up event.
-     *
-     * @param point - event coordinates.
+     * x coordinate for the first end-point.
      */
-    pointerUp(point: IPoint): void;
+    x1: number;
     /**
-     * Disposes the marker and clean's up.
+     * y coordinate for the first end-point.
      */
-    dispose(): void;
-    protected adjustControlBox(): void;
-    scale(scaleX: number, scaleY: number): void;
+    y1: number;
     /**
-     * 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 for the second end-point.
      */
-    protected stateChanged(): void;
-    getState(): MarkerBaseState;
+    x2: number;
     /**
-     * Restores previously saved marker state.
+     * y coordinate for the second end-point.
+     */
+    y2: number;
+}
+
+declare class LinearMarkerBase extends MarkerBase {
+    /**
+     * x coordinate of the first end-point
+     */
+    x1: number;
+    /**
+     * 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;
+    /**
+     * Scales marker. Used after the image resize.
+     *
+     * @param scaleX - horizontal scale
+     * @param scaleY - vertical scale
+     */
+    scale(scaleX: number, scaleY: number): void;
 }
 
-interface MarkerAreaEventMap {
+declare class LineMarker extends LinearMarkerBase {
+    static typeName: string;
+    static title: string;
+    constructor(container: SVGGElement);
+    protected getPath(): string;
     /**
-     * Marker area initialized.
+     * Returns current marker state that can be restored in the future.
      */
-    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>;
+    getState(): LinearMarkerBaseState;
 }
-interface MarkerAreaEventData {
+
+type ArrowType = 'both' | 'start' | 'end' | 'none';
+interface ArrowMarkerState extends LinearMarkerBaseState {
+    arrowType: ArrowType;
+}
+
+declare class ArrowMarker extends LineMarker {
+    static typeName: string;
+    static title: string;
+    private _arrowType;
+    get arrowType(): ArrowType;
+    set arrowType(value: ArrowType);
+    constructor(container: SVGGElement);
+    protected getPath(): string;
+    protected applyStrokeWidth(): void;
     /**
-     * {@link MarkerArea} instance.
+     * Returns marker's state.
      */
-    markerArea: MarkerArea;
+    getState(): ArrowMarkerState;
+    /**
+     * Restores marker's state to the previously saved one.
+     * @param state - previously saved state.
+     */
+    restoreState(state: MarkerBaseState): void;
 }
-interface MarkerEditorEventData extends MarkerAreaEventData {
-    markerEditor: MarkerBaseEditor;
+
+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;
 }
-declare class MarkerArea extends HTMLElement {
-    private _contentContainer?;
-    private _canvasContainer?;
-    private _overlayContainer;
+
+interface PolygonMarkerState extends MarkerBaseState {
+    /**
+     * Polygon points.
+     */
+    points: Array<IPoint>;
+}
+
+declare class PolygonMarker extends MarkerBase {
+    static typeName: string;
+    static title: string;
+    points: IPoint[];
+    /**
+     * Marker's main visual.
+     */
+    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);
+    /**
+     * 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;
+    adjustVisual(): 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;
+}
+
+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;
+}
+
+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;
+}
+
+interface CalloutMarkerState extends TextMarkerState {
+    tipPosition: IPoint;
+}
+
+declare class CalloutMarker extends TextMarker {
+    static typeName: string;
+    static title: string;
+    private _tipPosition;
+    get tipPosition(): IPoint;
+    set tipPosition(value: IPoint);
+    private tipBase1Position;
+    private tipBase2Position;
+    private _calloutVisual;
+    constructor(container: SVGGElement);
+    protected getPath(): string;
+    private setTipPoints;
+    createVisual(): void;
+    adjustVisual(): void;
+    ownsTarget(el: EventTarget): boolean;
+    getState(): CalloutMarkerState;
+    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;
+    protected isMultiSelected: boolean;
+    /**
+     * Selects this marker and displays appropriate selected marker UI.
+     */
+    select(multi?: boolean): 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?;
@@ -451,6 +1173,7 @@ declare class MarkerArea extends HTMLElement {
     private _isInitialized;
     private _currentMarkerEditor?;
     get currentMarkerEditor(): MarkerBaseEditor | undefined;
+    private _selectedMarkerEditors;
     private _newMarkerOutline;
     private _targetImage;
     get targetImage(): HTMLImageElement | undefined;
@@ -459,84 +1182,571 @@ declare class MarkerArea extends HTMLElement {
     editors: MarkerBaseEditor[];
     private _zoomLevel;
     /**
-     * Returns the current zoom level.
+     * Returns the current zoom level.
+     */
+    get zoomLevel(): number;
+    /**
+     * Sets the current zoom level.
+     */
+    set zoomLevel(value: number);
+    private prevPanPoint;
+    private panTo;
+    private undoRedoManager;
+    constructor();
+    private connectedCallback;
+    private disconnectedCallback;
+    private createLayout;
+    private addMainCanvas;
+    private setMainCanvasSize;
+    private setEditingTargetSize;
+    private initOverlay;
+    private addTargetImage;
+    createMarker(markerType: typeof MarkerBase | string): MarkerBaseEditor<MarkerBase> | undefined;
+    private addNewMarker;
+    private markerCreated;
+    private markerStateChanged;
+    deleteMarker(markerEditor: MarkerBaseEditor): void;
+    deleteSelectedMarkers(): void;
+    setCurrentEditor(editor?: MarkerBaseEditor): void;
+    selectEditor(editor: MarkerBaseEditor): void;
+    deselectEditor(editor?: MarkerBaseEditor): void;
+    private touchPoints;
+    private isDragging;
+    private isSelecting;
+    private _marqueeSelectOutline;
+    private _marqueeSelectRect;
+    private _manipulationStartX;
+    private _manipulationStartY;
+    private onCanvasPointerDown;
+    private onCanvasDblClick;
+    private onPointerMove;
+    private showOutline;
+    private hideOutline;
+    private onPointerUp;
+    private finishMarqueeSelection;
+    private onPointerOut;
+    private onKeyUp;
+    private attachEvents;
+    private attachWindowEvents;
+    private detachEvents;
+    private detachWindowEvents;
+    private getMarkerTypeByName;
+    switchToSelectMode(): void;
+    getState(): AnnotationState;
+    restoreState(state: AnnotationState): void;
+    private scaleMarkers;
+    /**
+     * 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;
+    protected manipulationBox: SVGGElement;
+    private readonly CB_DISTANCE;
+    private controlRect?;
+    private rotatorGripLine?;
+    private controlGrips;
+    protected disabledResizeGrips: GripLocation[];
+    private rotatorGrip?;
+    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.
+     */
+    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(multi?: boolean): void;
+    /**
+     * Hides marker's controls.
+     */
+    deselect(): void;
+    private setupControlBox;
+    protected adjustControlBox(): void;
+    protected addControlGrips(): void;
+    private createRotateGrip;
+    protected positionGrips(): void;
+    protected positionGrip(grip: SVGGraphicsElement | undefined, x: number, y: number): void;
+    /**
+     * 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.
+     *
+     * @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.
+     *
+     * @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;
+}
+
+declare class ShapeMarkerEditor<TMarkerType extends ShapeMarkerBase = ShapeMarkerBase> extends ShapeOutlineMarkerEditor<TMarkerType> {
+}
+
+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.
+     */
+    protected manipulationStartX: number;
+    protected manipulationStartY: number;
+    private manipulationStartX1;
+    private manipulationStartY1;
+    private manipulationStartX2;
+    private manipulationStartY2;
+    /**
+     * Container for control elements.
+     */
+    protected controlBox: SVGGElement;
+    protected manipulationBox: 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.
      */
-    get zoomLevel(): number;
+    ownsTarget(el: EventTarget): boolean;
     /**
-     * Sets the current zoom level.
+     * Handles pointer (mouse, touch, stylus, etc.) down event.
+     *
+     * @param point - event coordinates.
+     * @param target - direct event target element.
      */
-    set zoomLevel(value: number);
-    private prevPanPoint;
-    private panTo;
-    private undoRedoManager;
-    constructor();
-    private connectedCallback;
-    private disconnectedCallback;
-    private createLayout;
-    private addMainCanvas;
-    private setMainCanvasSize;
-    private setEditingTargetSize;
-    private initOverlay;
-    private addTargetImage;
-    createMarker(markerType: typeof MarkerBase | string): MarkerBaseEditor<MarkerBase> | undefined;
-    private addNewMarker;
-    private markerCreated;
-    private markerStateChanged;
-    setCurrentEditor(editor?: MarkerBaseEditor): void;
-    private touchPoints;
-    private isDragging;
-    private onCanvasPointerDown;
-    private onCanvasDblClick;
-    private onPointerMove;
-    private showOutline;
-    private hideOutline;
-    private onPointerUp;
-    private onPointerOut;
-    private onKeyUp;
-    private attachEvents;
-    private attachWindowEvents;
-    private detachEvents;
-    private detachWindowEvents;
-    private getMarkerTypeByName;
-    switchToSelectMode(): void;
-    getState(): AnnotationState;
-    restoreState(state: AnnotationState): void;
-    private scaleMarkers;
+    pointerDown(point: IPoint, target?: EventTarget): void;
     /**
-     * NOTE:
+     * Handles pointer (mouse, touch, stylus, etc.) up event.
      *
-     * before removing or modifying this method please consider supporting marker.js
-     * by visiting https://markerjs.com/buy for details
+     * @param point - event coordinates.
+     * @param target - direct event target element.
+     */
+    pointerUp(point: IPoint): void;
+    /**
+     * Handles marker manipulation (move, resize, rotate, etc.).
      *
-     * thank you!
+     * @param point - event coordinates.
      */
-    private toggleLogo;
-    private addLogo;
-    private removeLogo;
-    private positionLogo;
+    manipulate(point: IPoint): void;
     /**
-     * Returns true if undo operation can be performed (undo stack is not empty).
+     * Resizes the line marker.
+     * @param point - current manipulation coordinates.
      */
-    get isUndoPossible(): boolean;
+    protected resize(point: IPoint): void;
     /**
-     * Returns true if redo operation can be performed (redo stack is not empty).
+     * Creates control box for manipulation controls.
      */
-    get isRedoPossible(): boolean;
-    private addUndoStep;
+    protected setupControlBox(): void;
+    protected adjustControlBox(): void;
     /**
-     * Undo last action.
+     * Adds control grips to control box.
      */
-    undo(): void;
-    private undoStep;
+    protected addControlGrips(): void;
     /**
-     * Redo previously undone action.
+     * Creates manipulation grip.
+     * @returns - manipulation grip.
      */
-    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 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(multi?: boolean): 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 manipulationBox: 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(multi?: boolean): 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;
+}
+
+declare class ArrowMarkerEditor<TMarkerType extends ArrowMarker = ArrowMarker> extends LinearMarkerEditor<TMarkerType> {
+    set arrowType(value: ArrowType);
+    get arrowType(): ArrowType;
+}
+
+declare class CalloutMarkerEditor<TMarkerType extends CalloutMarker = CalloutMarker> extends TextMarkerEditor<TMarkerType> {
+    private tipGrip?;
+    private manipulationStartTipPositionX;
+    private manipulationStartTipPositionY;
+    constructor(properties: MarkerEditorProperties<TMarkerType>);
+    protected addControlGrips(): void;
+    private createTipGrip;
+    protected positionGrips(): void;
+    ownsTarget(el: EventTarget): boolean;
+    pointerDown(point: IPoint, target?: EventTarget): void;
+    protected resize(point: IPoint): void;
 }
 
 interface MarkerViewEventMap {
@@ -617,4 +1827,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, ArrowMarker, ArrowMarkerEditor, type ArrowMarkerState, type ArrowType, CalloutMarker, CalloutMarkerEditor, type CalloutMarkerState, type ColorType, CoverMarker, FrameMarker, FreehandMarker, FreehandMarkerEditor, type FreehandMarkerState, Grip, HighlightMarker, type IPoint, 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 };