/*!
 * Copyright (c) 2026 Vertex Software LLC. All rights reserved.
 */
import { h, Host, } from "@stencil/core";
import { Point } from "@vertexvis/geometry";
import { stampTemplateWithId } from "../../lib/templates";
import { ArrowMarkup, CircleMarkup, FreeformMarkup, } from "../../lib/types/markup";
import { isVertexViewerArrowMarkup, } from "../viewer-markup-arrow/utils";
import { isVertexViewerCircleMarkup } from "../viewer-markup-circle/utils";
import { isVertexViewerFreeformMarkup } from "../viewer-markup-freeform/utils";
export class ViewerMarkup {
    constructor() {
        /**
         * The type of markup to perform.
         */
        this.tool = 'arrow';
        /**
         * If `true`, disables adding or editing of markup through user
         * interaction.
         */
        this.disabled = false;
        /**
         * Indicates if new markup should be automatically selected.
         */
        this.selectNew = false;
        /**
         * The style of the starting anchor. This defaults to none.
         */
        this.startLineAnchorStyle = 'none';
        /**
         * The style of the ending anchor. This defaults to 'arrow-triangle.'
         */
        this.endLineAnchorStyle = 'arrow-triangle';
        /**
         * Defines the behavior of the provided markup when the originating viewport is smaller
         * than the current viewport, or is scaled to a size smaller than the current viewport
         * using the `scale` property.
         *
         * Options:
         * - `x-only`: Markup will be centered horizontally, but not vertically.
         * - `y-only`: Markup will be centered vertically, but not horizontally.
         * - `both`: Markup will be centered both horizontally and vertically.
         * - `none`: Markup will not be centered (default).
         */
        this.centeringBehavior = 'none';
        /**
         * The scale to render this markup at. This value is used to scale the element's bounds
         * along with any `offset` to determine the final computed coordinates.
         *
         * When provided, all computed coordinates will be scaled by this amount.
         */
        this.scale = 1;
        this.handleSlotChange = () => {
            this.updatePropsOnMarkupTool();
            this.updatePropsOnMarkups();
        };
        this.handlePointerMove = (event) => {
            if (this.pointerDownPosition != null &&
                Point.distance(this.pointerDownPosition, Point.create(event.clientX, event.clientY)) > 2) {
                this.toSelectMarkupId = undefined;
            }
        };
        this.handlePointerUp = async (event) => {
            if (!this.disabled) {
                const el = event.target;
                const markups = await this.getMarkupElements();
                const markup = markups.find((m) => m === el);
                if ((markup === null || markup === void 0 ? void 0 : markup.id) != null &&
                    markup.id !== '' &&
                    markup.id === this.toSelectMarkupId) {
                    this.selectedMarkupId = el.id;
                }
                else if (this.pointerDownPosition != null &&
                    Point.distance(this.pointerDownPosition, Point.create(event.clientX, event.clientY)) <= 2) {
                    this.selectedMarkupId = undefined;
                }
                this.toSelectMarkupId = undefined;
                this.pointerDownPosition = undefined;
            }
            window.removeEventListener('pointerup', this.handlePointerUp);
            window.removeEventListener('pointermove', this.handlePointerMove);
        };
    }
    disconnectedCallback() {
        window.removeEventListener('pointerup', this.handlePointerUp);
        window.removeEventListener('pointermove', this.handlePointerMove);
    }
    /**
     * Adds a new markup as a child to this component. A new markup
     * component will be created from the template specified by
     * `arrow-template-id`, `circle-template-id`, or if undefined
     * a default element will be created.
     *
     * @param markup The markup to add.
     * @returns The markup element that was created.
     * @see {@link arrowTemplateId}
     * @see {@link circleTemplateId}
     */
    async addMarkup(markup) {
        if (markup instanceof ArrowMarkup) {
            const { start, end, id } = markup;
            const el = this.createArrowMarkupElement();
            this.appendMarkupElement(el);
            el.id = id;
            el.start = start;
            el.end = end;
            el.startLineAnchorStyle = this.startLineAnchorStyle;
            el.endLineAnchorStyle = this.endLineAnchorStyle;
            return el;
        }
        else if (markup instanceof CircleMarkup) {
            const { bounds, id } = markup;
            const el = this.createCircleMarkupElement();
            this.appendMarkupElement(el);
            el.id = id;
            el.bounds = bounds;
            return el;
        }
        else if (markup instanceof FreeformMarkup) {
            const { bounds, points, id } = markup;
            const el = this.createFreeformMarkupElement();
            this.appendMarkupElement(el);
            el.id = id;
            el.points = points;
            el.bounds = bounds;
            return el;
        }
        else {
            throw new Error(`Cannot add markup. Unknown type '${markup}'.`);
        }
    }
    /**
     * Removes a markup with the given ID, and returns the HTML element
     * associated to the markup. Returns `undefined` if no markup is
     * found.
     *
     * @param id The ID of the markup to remove.
     * @returns The markup element, or undefined.
     */
    async removeMarkup(id) {
        const markup = await this.getMarkupElement(id);
        if (markup != null) {
            markup.remove();
            this.markupRemoved.emit(markup);
        }
        return markup;
    }
    /**
     * Returns a list of markup elements that are children of this component.
     *
     * @returns A list of all markups.
     * @see {@link getMarkupElement}
     */
    async getMarkupElements() {
        return Array.from(this.hostEl.children).filter((e) => isVertexViewerArrowMarkup(e) ||
            isVertexViewerCircleMarkup(e) ||
            isVertexViewerFreeformMarkup(e));
    }
    /**
     * Returns the markup element associated to the given ID.
     *
     * @param id The ID of the markup element to return.
     * @returns A markup element, or `undefined`.
     * @see {@link getMarkupElements}
     */
    async getMarkupElement(id) {
        const markup = await this.getMarkupElements();
        return markup.find((el) => el.id === id);
    }
    /**
     * @ignore
     */
    async handleSelectedMarkupIdChanged() {
        const markup = await this.getMarkupElements();
        markup.forEach((m) => {
            if (m.id === this.selectedMarkupId) {
                m.mode = 'edit';
                this.markupSelectionChanged.emit(m);
            }
            else {
                m.mode = '';
            }
        });
        if (this.selectedMarkupId == null) {
            this.markupSelectionChanged.emit(undefined);
        }
    }
    /**
     * @ignore
     */
    handlePropertyChanged() {
        this.updatePropsOnMarkupTool();
    }
    /**
     * @ignore
     */
    async handleViewerChanged(newViewer) {
        this.updatePropsOnMarkupTool();
        this.updatePropsOnMarkups();
    }
    /**
     * @ignore
     */
    handleDisabledChanged() {
        this.updatePropsOnMarkupTool();
    }
    /**
     * @ignore
     */
    async handleStartLineAnchorStyleChanged() {
        this.updatePropsOnMarkupTool();
        // If a piece of arrow markup is currently selected, then update its anchor style
        const selectedArrow = await this.getSelectedArrowMarkup();
        if (selectedArrow != null) {
            selectedArrow.startLineAnchorStyle = this.startLineAnchorStyle;
            this.markupChanged.emit(selectedArrow);
        }
    }
    /**
     * @ignore
     */
    async handleEndLineAnchorStyleChanged() {
        this.updatePropsOnMarkupTool();
        // If a piece of arrow markup is currently selected, then update its anchor style
        const selectedArrow = await this.getSelectedArrowMarkup();
        if (selectedArrow != null) {
            selectedArrow.endLineAnchorStyle = this.endLineAnchorStyle;
            this.markupChanged.emit(selectedArrow);
        }
    }
    /**
     * @ignore
     */
    async handleMarkupEnd(event) {
        var _a;
        const e = event;
        const el = await this.addMarkup(e.detail);
        await new Promise((resolve) => {
            const handleRender = () => {
                el.removeEventListener('viewRendered', handleRender);
                resolve();
            };
            el.addEventListener('viewRendered', handleRender);
        });
        if (this.selectNew) {
            this.selectedMarkupId = e.detail.id;
        }
        (_a = this.getMarkupTool()) === null || _a === void 0 ? void 0 : _a.reset();
    }
    /**
     * @ignore
     */
    async handleMarkupUpdated(event) {
        const e = event;
        // Do not emit the markupChanged event if the markup was just created
        if (!e.detail.newlyCreatedMarkup) {
            this.markupChanged.emit(e.detail.markup);
        }
    }
    /**
     * @ignore
     */
    async handleMarkupPointerDown(event) {
        if (!this.disabled) {
            const el = event.target;
            const markups = await this.getMarkupElements();
            const markup = markups.find((m) => m === el);
            if ((markup === null || markup === void 0 ? void 0 : markup.id) != null && (markup === null || markup === void 0 ? void 0 : markup.id) !== '') {
                this.toSelectMarkupId = el.id;
            }
            this.pointerDownPosition = Point.create(event.clientX, event.clientY);
            window.addEventListener('pointermove', this.handlePointerMove);
            window.addEventListener('pointerup', this.handlePointerUp);
        }
    }
    /**
     * @ignore
     */
    componentDidLoad() {
        this.updatePropsOnMarkupTool();
    }
    /**
     * @ignore
     */
    render() {
        return (h(Host, { key: 'a5620363230dcc56e335b0864eacf94ba8d8232c' }, h("slot", { key: '7fa77e410c679b183304f117e8c8e0a36a3ea14d', onSlotchange: this.handleSlotChange })));
    }
    appendMarkupElement(el) {
        this.updatePropsOnMarkup(el);
        this.hostEl.appendChild(el);
        this.markupAdded.emit(el);
        return el;
    }
    createArrowMarkupElement() {
        if (this.arrowTemplateId != null) {
            const element = stampTemplateWithId(window.document.body, this.arrowTemplateId, isVertexViewerArrowMarkup, () => console.warn(`Arrow template with ID ${this.arrowTemplateId} not found. Using default arrow element.`), () => console.warn(`Arrow template does not contain a vertex-viewer-markup-arrow. Using default arrow element.`));
            if (element != null) {
                return element;
            }
        }
        return document.createElement('vertex-viewer-markup-arrow');
    }
    createCircleMarkupElement() {
        if (this.circleTemplateId != null) {
            const element = stampTemplateWithId(window.document.body, this.circleTemplateId, isVertexViewerCircleMarkup, () => console.warn(`Circle template with ID ${this.circleTemplateId} not found. Using default circle element.`), () => console.warn(`Circle template does not contain a vertex-viewer-markup-circle. Using default circle element.`));
            if (element != null) {
                return element;
            }
        }
        return document.createElement('vertex-viewer-markup-circle');
    }
    createFreeformMarkupElement() {
        if (this.freeformTemplateId != null) {
            const element = stampTemplateWithId(window.document.body, this.freeformTemplateId, isVertexViewerFreeformMarkup, () => console.warn(`Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`), () => console.warn(`Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`));
            if (element != null) {
                return element;
            }
        }
        return document.createElement('vertex-viewer-markup-freeform');
    }
    async updatePropsOnMarkups() {
        const markup = await this.getMarkupElements();
        markup.forEach((m) => this.updatePropsOnMarkup(m));
    }
    updatePropsOnMarkup(element) {
        element.viewer = this.viewer;
        element.originatingViewport = this.originatingViewport;
        element.centeringBehavior = this.centeringBehavior;
        element.offset = this.offset;
        element.scale = this.scale;
        element.classList.add('viewer-markup__markup');
    }
    updatePropsOnMarkupTool() {
        const tool = this.getMarkupTool();
        if (tool != null) {
            tool.disabled = this.disabled;
            tool.arrowTemplateId = this.arrowTemplateId;
            tool.circleTemplateId = this.circleTemplateId;
            tool.freeformTemplateId = this.freeformTemplateId;
            tool.tool = this.tool;
            tool.viewer = this.viewer;
            tool.startLineAnchorStyle = this.startLineAnchorStyle;
            tool.endLineAnchorStyle = this.endLineAnchorStyle;
            tool.originatingViewport = this.originatingViewport;
            tool.centeringBehavior = this.centeringBehavior;
            tool.offset = this.offset;
            tool.scale = this.scale;
        }
    }
    getMarkupTool() {
        return this.hostEl.querySelector('vertex-viewer-markup-tool');
    }
    async getSelectedArrowMarkup() {
        if (this.selectedMarkupId != null) {
            const selected = await this.getMarkupElement(this.selectedMarkupId);
            return isVertexViewerArrowMarkup(selected) ? selected : undefined;
        }
    }
    static get is() { return "vertex-viewer-markup"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["viewer-markup.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["viewer-markup.css"]
        };
    }
    static get properties() {
        return {
            "arrowTemplateId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "An HTML template that describes the HTML to use for new arrow\nmarkup. It's expected that the template contains a\n`<vertex-viewer-markup-arrow>`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "arrow-template-id"
            },
            "circleTemplateId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "An HTML template that describes the HTML to use for new circle\nmarkup. It's expected that the template contains a\n`<vertex-viewer-markup-circle>`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "circle-template-id"
            },
            "freeformTemplateId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "An HTML template that describes the HTML to use for new freeform\nmarkup. It's expected that the template contains a\n`<vertex-viewer-markup-freeform>`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "freeform-template-id"
            },
            "tool": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ViewerMarkupToolType",
                    "resolved": "\"arrow\" | \"circle\" | \"freeform\"",
                    "references": {
                        "ViewerMarkupToolType": {
                            "location": "import",
                            "path": "../viewer-markup-tool/viewer-markup-tool",
                            "id": "src/components/viewer-markup-tool/viewer-markup-tool.tsx::ViewerMarkupToolType",
                            "referenceLocation": "ViewerMarkupToolType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The type of markup to perform."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tool",
                "defaultValue": "'arrow'"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, disables adding or editing of markup through user\ninteraction."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "viewer": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "HTMLVertexViewerElement",
                    "resolved": "HTMLVertexViewerElement | undefined",
                    "references": {
                        "HTMLVertexViewerElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerElement"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The viewer to connect to markup. If nested within a <vertex-viewer>,\nthis property will be populated automatically."
                },
                "getter": false,
                "setter": false
            },
            "selectedMarkupId": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The ID of the markup that is selected."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "selected-markup-id"
            },
            "selectNew": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Indicates if new markup should be automatically selected."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "select-new",
                "defaultValue": "false"
            },
            "startLineAnchorStyle": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "LineAnchorStyle",
                    "resolved": "\"arrow-line\" | \"arrow-triangle\" | \"dot\" | \"hash\" | \"none\"",
                    "references": {
                        "LineAnchorStyle": {
                            "location": "import",
                            "path": "../viewer-markup-arrow/utils",
                            "id": "src/components/viewer-markup-arrow/utils.ts::LineAnchorStyle",
                            "referenceLocation": "LineAnchorStyle"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The style of the starting anchor. This defaults to none."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "start-line-anchor-style",
                "defaultValue": "'none'"
            },
            "endLineAnchorStyle": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "LineAnchorStyle",
                    "resolved": "\"arrow-line\" | \"arrow-triangle\" | \"dot\" | \"hash\" | \"none\"",
                    "references": {
                        "LineAnchorStyle": {
                            "location": "import",
                            "path": "../viewer-markup-arrow/utils",
                            "id": "src/components/viewer-markup-arrow/utils.ts::LineAnchorStyle",
                            "referenceLocation": "LineAnchorStyle"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The style of the ending anchor. This defaults to 'arrow-triangle.'"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "end-line-anchor-style",
                "defaultValue": "'arrow-triangle'"
            },
            "originatingViewport": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Dimensions.Dimensions",
                    "resolved": "Dimensions | undefined",
                    "references": {
                        "Dimensions": {
                            "location": "import",
                            "path": "@vertexvis/geometry",
                            "id": "../geometry/dist/index.d.ts::\"/home/runner/work/vertex-web-sdk/vertex-web-sdk/packages/geometry/dist/dimensions\"",
                            "referenceLocation": "Dimensions"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The original viewport dimensions where this markup was created. This value is used\nto determine where the markup should be rendered relative to the current viewport,\nenabling some markup to appear \"off-screen\".\n\nWhen provided, all NDC values will be considered relative to this viewport."
                },
                "getter": false,
                "setter": false
            },
            "centeringBehavior": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "MarkupCenteringBehavior",
                    "resolved": "\"both\" | \"none\" | \"x-only\" | \"y-only\"",
                    "references": {
                        "MarkupCenteringBehavior": {
                            "location": "import",
                            "path": "../../lib/types/markup",
                            "id": "src/lib/types/markup.ts::MarkupCenteringBehavior",
                            "referenceLocation": "MarkupCenteringBehavior"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the behavior of the provided markup when the originating viewport is smaller\nthan the current viewport, or is scaled to a size smaller than the current viewport\nusing the `scale` property.\n\nOptions:\n- `x-only`: Markup will be centered horizontally, but not vertically.\n- `y-only`: Markup will be centered vertically, but not horizontally.\n- `both`: Markup will be centered both horizontally and vertically.\n- `none`: Markup will not be centered (default)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "centering-behavior",
                "defaultValue": "'none'"
            },
            "offset": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Point.Point",
                    "resolved": "Point | undefined",
                    "references": {
                        "Point": {
                            "location": "import",
                            "path": "@vertexvis/geometry",
                            "id": "../geometry/dist/index.d.ts::\"/home/runner/work/vertex-web-sdk/vertex-web-sdk/packages/geometry/dist/point\"",
                            "referenceLocation": "Point"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The current offset of the visible viewport. This value is used to determine where\nmarkup should be rendered relative to the current viewport, enabling some markup to appear \"off-screen\".\n\nWhen provided, all computed coordinates will be offset by this amount."
                },
                "getter": false,
                "setter": false
            },
            "scale": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The scale to render this markup at. This value is used to scale the element's bounds\nalong with any `offset` to determine the final computed coordinates.\n\nWhen provided, all computed coordinates will be scaled by this amount."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "scale",
                "defaultValue": "1"
            }
        };
    }
    static get states() {
        return {
            "toSelectMarkupId": {},
            "pointerDownPosition": {}
        };
    }
    static get events() {
        return [{
                "method": "markupAdded",
                "name": "markupAdded",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Dispatched when a new markup is added, either through user interaction\nor programmatically."
                },
                "complexType": {
                    "original": "| HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement",
                    "resolved": "HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement",
                    "references": {
                        "HTMLVertexViewerMarkupArrowElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupArrowElement"
                        },
                        "HTMLVertexViewerMarkupCircleElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupCircleElement"
                        },
                        "HTMLVertexViewerMarkupFreeformElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupFreeformElement"
                        }
                    }
                }
            }, {
                "method": "markupChanged",
                "name": "markupChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Dispatched when an existing piece of markup is changed, either through user interaction\nor programmatically."
                },
                "complexType": {
                    "original": "| HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement",
                    "resolved": "HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement",
                    "references": {
                        "HTMLVertexViewerMarkupArrowElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupArrowElement"
                        },
                        "HTMLVertexViewerMarkupCircleElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupCircleElement"
                        },
                        "HTMLVertexViewerMarkupFreeformElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupFreeformElement"
                        }
                    }
                }
            }, {
                "method": "markupRemoved",
                "name": "markupRemoved",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Dispatched when a markup is removed, either through user\ninteraction or programmatically."
                },
                "complexType": {
                    "original": "| HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement",
                    "resolved": "HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement",
                    "references": {
                        "HTMLVertexViewerMarkupArrowElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupArrowElement"
                        },
                        "HTMLVertexViewerMarkupCircleElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupCircleElement"
                        },
                        "HTMLVertexViewerMarkupFreeformElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupFreeformElement"
                        }
                    }
                }
            }, {
                "method": "markupSelectionChanged",
                "name": "markupSelectionChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Dispatched when markup selection changes. Will either be the\nselected element or `undefined` indicating that selection\nwas cleared."
                },
                "complexType": {
                    "original": "| HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n    | undefined",
                    "resolved": "HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement | undefined",
                    "references": {
                        "HTMLVertexViewerMarkupArrowElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupArrowElement"
                        },
                        "HTMLVertexViewerMarkupCircleElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupCircleElement"
                        },
                        "HTMLVertexViewerMarkupFreeformElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupFreeformElement"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "addMarkup": {
                "complexType": {
                    "signature": "(markup: Markup) => Promise<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement>",
                    "parameters": [{
                            "name": "markup",
                            "type": "ArrowMarkup | CircleMarkup | FreeformMarkup",
                            "docs": "The markup to add."
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLVertexViewerMarkupArrowElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupArrowElement"
                        },
                        "HTMLVertexViewerMarkupCircleElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupCircleElement"
                        },
                        "HTMLVertexViewerMarkupFreeformElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupFreeformElement"
                        },
                        "Markup": {
                            "location": "import",
                            "path": "../../lib/types/markup",
                            "id": "src/lib/types/markup.ts::Markup",
                            "referenceLocation": "Markup"
                        }
                    },
                    "return": "Promise<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement>"
                },
                "docs": {
                    "text": "Adds a new markup as a child to this component. A new markup\ncomponent will be created from the template specified by\n`arrow-template-id`, `circle-template-id`, or if undefined\na default element will be created.",
                    "tags": [{
                            "name": "param",
                            "text": "markup The markup to add."
                        }, {
                            "name": "returns",
                            "text": "The markup element that was created."
                        }, {
                            "name": "see",
                            "text": "{@link arrowTemplateId}"
                        }, {
                            "name": "see",
                            "text": "{@link circleTemplateId}"
                        }]
                }
            },
            "removeMarkup": {
                "complexType": {
                    "signature": "(id: string) => Promise<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement | undefined>",
                    "parameters": [{
                            "name": "id",
                            "type": "string",
                            "docs": "The ID of the markup to remove."
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLVertexViewerMarkupArrowElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupArrowElement"
                        },
                        "HTMLVertexViewerMarkupCircleElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupCircleElement"
                        },
                        "HTMLVertexViewerMarkupFreeformElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupFreeformElement"
                        }
                    },
                    "return": "Promise<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement | undefined>"
                },
                "docs": {
                    "text": "Removes a markup with the given ID, and returns the HTML element\nassociated to the markup. Returns `undefined` if no markup is\nfound.",
                    "tags": [{
                            "name": "param",
                            "text": "id The ID of the markup to remove."
                        }, {
                            "name": "returns",
                            "text": "The markup element, or undefined."
                        }]
                }
            },
            "getMarkupElements": {
                "complexType": {
                    "signature": "() => Promise<Array<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement>>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLVertexViewerMarkupArrowElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupArrowElement"
                        },
                        "HTMLVertexViewerMarkupCircleElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupCircleElement"
                        },
                        "HTMLVertexViewerMarkupFreeformElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupFreeformElement"
                        },
                        "Array": {
                            "location": "global",
                            "id": "global::Array"
                        }
                    },
                    "return": "Promise<(HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement)[]>"
                },
                "docs": {
                    "text": "Returns a list of markup elements that are children of this component.",
                    "tags": [{
                            "name": "returns",
                            "text": "A list of all markups."
                        }, {
                            "name": "see",
                            "text": "{@link getMarkupElement}"
                        }]
                }
            },
            "getMarkupElement": {
                "complexType": {
                    "signature": "(id: string) => Promise<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement | undefined>",
                    "parameters": [{
                            "name": "id",
                            "type": "string",
                            "docs": "The ID of the markup element to return."
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLVertexViewerMarkupArrowElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupArrowElement"
                        },
                        "HTMLVertexViewerMarkupCircleElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupCircleElement"
                        },
                        "HTMLVertexViewerMarkupFreeformElement": {
                            "location": "global",
                            "id": "global::HTMLVertexViewerMarkupFreeformElement"
                        }
                    },
                    "return": "Promise<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement | undefined>"
                },
                "docs": {
                    "text": "Returns the markup element associated to the given ID.",
                    "tags": [{
                            "name": "param",
                            "text": "id The ID of the markup element to return."
                        }, {
                            "name": "returns",
                            "text": "A markup element, or `undefined`."
                        }, {
                            "name": "see",
                            "text": "{@link getMarkupElements}"
                        }]
                }
            }
        };
    }
    static get elementRef() { return "hostEl"; }
    static get watchers() {
        return [{
                "propName": "selectedMarkupId",
                "methodName": "handleSelectedMarkupIdChanged"
            }, {
                "propName": "arrowTemplateId",
                "methodName": "handlePropertyChanged"
            }, {
                "propName": "circleTemplateId",
                "methodName": "handlePropertyChanged"
            }, {
                "propName": "freeformTemplateId",
                "methodName": "handlePropertyChanged"
            }, {
                "propName": "tool",
                "methodName": "handlePropertyChanged"
            }, {
                "propName": "viewer",
                "methodName": "handleViewerChanged"
            }, {
                "propName": "originatingViewport",
                "methodName": "handleViewerChanged"
            }, {
                "propName": "centeringBehavior",
                "methodName": "handleViewerChanged"
            }, {
                "propName": "offset",
                "methodName": "handleViewerChanged"
            }, {
                "propName": "scale",
                "methodName": "handleViewerChanged"
            }, {
                "propName": "disabled",
                "methodName": "handleDisabledChanged"
            }, {
                "propName": "startLineAnchorStyle",
                "methodName": "handleStartLineAnchorStyleChanged"
            }, {
                "propName": "endLineAnchorStyle",
                "methodName": "handleEndLineAnchorStyleChanged"
            }];
    }
    static get listeners() {
        return [{
                "name": "markupEnd",
                "method": "handleMarkupEnd",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "interactionEnd",
                "method": "handleMarkupUpdated",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "pointerdown",
                "method": "handleMarkupPointerDown",
                "target": undefined,
                "capture": false,
                "passive": true
            }];
    }
}
//# sourceMappingURL=viewer-markup.js.map
