@vertexvis/viewer 0.18.2-testing.0 → 0.18.2-testing.1

package/dist/components/vertex-viewer-markup.js

@@ -1,362 +0,0 @@
-/*!
- * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
- */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { p as point } from './bundle.esm.js';
-import { s as stampTemplateWithId } from './templates.js';
-import { A as ArrowMarkup, C as CircleMarkup, F as FreeformMarkup } from './markup.js';
-import { i as isVertexViewerArrowMarkup, a as isVertexViewerCircleMarkup, b as isVertexViewerFreeformMarkup } from './interactions.js';
-import { d as defineCustomElement$4 } from './viewer-markup-arrow.js';
-import { d as defineCustomElement$3 } from './viewer-markup-circle.js';
-import { d as defineCustomElement$2 } from './viewer-markup-freeform.js';
-
-const viewerMarkupCss = ":host{display:block;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}";
-
-const ViewerMarkup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.markupAdded = createEvent(this, "markupAdded", 7);
-    this.markupRemoved = createEvent(this, "markupRemoved", 7);
-    this.markupSelectionChanged = createEvent(this, "markupSelectionChanged", 7);
-    /**
-     * 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;
-    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 ViewerMarkups.arrowTemplateId}
-   * @see {@link ViewerMarkups.circleTemplateId}
-   */
-  async addMarkup(markup) {
-    if (markup instanceof ArrowMarkup) {
-      const { start, end, id } = markup;
-      const el = this.createArrowMarkupElement();
-      el.id = id;
-      el.start = start;
-      el.end = end;
-      return this.appendMarkupElement(el);
-    }
-    else if (markup instanceof CircleMarkup) {
-      const { bounds, id } = markup;
-      const el = this.createCircleMarkupElement();
-      el.id = id;
-      el.bounds = bounds;
-      return this.appendMarkupElement(el);
-    }
-    else if (markup instanceof FreeformMarkup) {
-      const { bounds, points, id } = markup;
-      const el = this.createFreeformMarkupElement();
-      el.id = id;
-      el.points = points;
-      el.bounds = bounds;
-      return this.appendMarkupElement(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 ViewerMarkup.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 ViewerMarkup.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
-   */
-  handleToolChanged() {
-    this.updatePropsOnMarkupTool();
-  }
-  /**
-   * @ignore
-   */
-  handleArrowTemplateIdChanged() {
-    this.updatePropsOnMarkupTool();
-  }
-  /**
-   * @ignore
-   */
-  handleCircleTemplateIdChanged() {
-    this.updatePropsOnMarkupTool();
-  }
-  /**
-   * @ignore
-   */
-  handleFreeformTemplateIdChanged() {
-    this.updatePropsOnMarkupTool();
-  }
-  /**
-   * @ignore
-   */
-  async handleViewerChanged(newViewer) {
-    this.updatePropsOnMarkupTool();
-    this.updatePropsOnMarkups();
-  }
-  /**
-   * @ignore
-   */
-  handleDisabledChanged() {
-    this.updatePropsOnMarkupTool();
-  }
-  /**
-   * @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 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, null, h("slot", null)));
-  }
-  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.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;
-    }
-  }
-  getMarkupTool() {
-    return this.hostEl.querySelector('vertex-viewer-markup-tool');
-  }
-  get hostEl() { return this; }
-  static get watchers() { return {
-    "selectedMarkupId": ["handleSelectedMarkupIdChanged"],
-    "tool": ["handleToolChanged"],
-    "arrowTemplateId": ["handleArrowTemplateIdChanged"],
-    "circleTemplateId": ["handleCircleTemplateIdChanged"],
-    "freeformTemplateId": ["handleFreeformTemplateIdChanged"],
-    "viewer": ["handleViewerChanged"],
-    "disabled": ["handleDisabledChanged"]
-  }; }
-  static get style() { return viewerMarkupCss; }
-}, [1, "vertex-viewer-markup", {
-    "arrowTemplateId": [1, "arrow-template-id"],
-    "circleTemplateId": [1, "circle-template-id"],
-    "freeformTemplateId": [1, "freeform-template-id"],
-    "tool": [1],
-    "disabled": [4],
-    "viewer": [16],
-    "selectedMarkupId": [1025, "selected-markup-id"],
-    "selectNew": [4, "select-new"],
-    "toSelectMarkupId": [32],
-    "pointerDownPosition": [32],
-    "addMarkup": [64],
-    "removeMarkup": [64],
-    "getMarkupElements": [64],
-    "getMarkupElement": [64]
-  }, [[0, "markupEnd", "handleMarkupEnd"], [1, "pointerdown", "handleMarkupPointerDown"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-viewer-markup", "vertex-viewer-markup-arrow", "vertex-viewer-markup-circle", "vertex-viewer-markup-freeform"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-viewer-markup":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ViewerMarkup);
-      }
-      break;
-    case "vertex-viewer-markup-arrow":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "vertex-viewer-markup-circle":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "vertex-viewer-markup-freeform":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const VertexViewerMarkup = ViewerMarkup;
-const defineCustomElement = defineCustomElement$1;
-
-export { VertexViewerMarkup, defineCustomElement };
-
-//# sourceMappingURL=vertex-viewer-markup.js.map

package/dist/components/vertex-viewer-markup.js.map

@@ -1 +0,0 @@
-{"file":"vertex-viewer-markup.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,0FAA0F;;MCgCrG,YAAY;EALzB;;;;;;;;;;IAkCS,SAAI,GAAyB,OAAO,CAAC;;;;;IAOrC,aAAQ,GAAG,KAAK,CAAC;;;;IAmBjB,cAAS,GAAG,KAAK,CAAC;IAkTjB,sBAAiB,GAAG,CAAC,KAAmB;MAC9C,IACE,IAAI,CAAC,mBAAmB,IAAI,IAAI;QAChCA,KAAK,CAAC,QAAQ,CACZ,IAAI,CAAC,mBAAmB,EACxBA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAC3C,GAAG,CAAC,EACL;QACA,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;OACnC;KACF,CAAC;IAEM,oBAAe,GAAG,OAAO,KAAmB;MAClD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,MAAM,EAAE,GAAG,KAAK,CAAC,MAAiB,CAAC;QACnC,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC/C,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;QAC7C,IACE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,EAAE,KAAI,IAAI;UAClB,MAAM,CAAC,EAAE,KAAK,EAAE;UAChB,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,gBAAgB,EACnC;UACA,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EAAE,CAAC;SAC/B;aAAM,IACL,IAAI,CAAC,mBAAmB,IAAI,IAAI;UAChCA,KAAK,CAAC,QAAQ,CACZ,IAAI,CAAC,mBAAmB,EACxBA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAC3C,IAAI,CAAC,EACN;UACA,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;SACnC;QACD,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;QAClC,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;OACtC;MAED,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;MAC9D,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;KACnE,CAAC;GAuHH;EAjaW,oBAAoB;IAC5B,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAC9D,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;GACnE;;;;;;;;;;;;EAcM,MAAM,SAAS,CACpB,MAAc;IAMd,IAAI,MAAM,YAAY,WAAW,EAAE;MACjC,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC;MAElC,MAAM,EAAE,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;MAC3C,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;MACX,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC;MACjB,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC;MAEb,OAAO,IAAI,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC;KACrC;SAAM,IAAI,MAAM,YAAY,YAAY,EAAE;MACzC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC;MAE9B,MAAM,EAAE,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAC;MAC5C,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;MACX,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC;MAEnB,OAAO,IAAI,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC;KACrC;SAAM,IAAI,MAAM,YAAY,cAAc,EAAE;MAC3C,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC;MAEtC,MAAM,EAAE,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;MAC9C,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;MACX,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC;MACnB,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC;MAEnB,OAAO,IAAI,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC;KACrC;SAAM;MACL,MAAM,IAAI,KAAK,CAAC,oCAAoC,MAAM,IAAI,CAAC,CAAC;KACjE;GACF;;;;;;;;;EAWM,MAAM,YAAY,CACvB,EAAU;IAOV,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;IAE/C,IAAI,MAAM,IAAI,IAAI,EAAE;MAClB,MAAM,CAAC,MAAM,EAAE,CAAC;MAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACjC;IAED,OAAO,MAAM,CAAC;GACf;;;;;;;EASM,MAAM,iBAAiB;IAO5B,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAC5C,CAAC,CAAC,KACA,yBAAyB,CAAC,CAAC,CAAC;MAC5B,0BAA0B,CAAC,CAAC,CAAC;MAC7B,4BAA4B,CAAC,CAAC,CAAC,CAKlC,CAAC;GACH;;;;;;;;EAUM,MAAM,gBAAgB,CAC3B,EAAU;IAOV,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC9C,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GAC1C;;;;EAMS,MAAM,6BAA6B;IAC3C,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC9C,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;MACf,IAAI,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,gBAAgB,EAAE;QAClC,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC;QAChB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;OACrC;WAAM;QACL,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC;OACb;KACF,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,EAAE;MACjC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAC7C;GACF;;;;EAMS,iBAAiB;IACzB,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAChC;;;;EAMS,4BAA4B;IACpC,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAChC;;;;EAMS,6BAA6B;IACrC,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAChC;;;;EAMS,+BAA+B;IACvC,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAChC;;;;EAMS,MAAM,mBAAmB,CACjC,SAA8C;IAE9C,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAC/B,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;;;;EAMS,qBAAqB;IAC7B,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAChC;;;;EAMS,MAAM,eAAe,CAAC,KAA0B;;IACxD,MAAM,CAAC,GAAG,KAA4B,CAAC;IACvC,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAE1C,MAAM,IAAI,OAAO,CAAO,CAAC,OAAO;MAC9B,MAAM,YAAY,GAAG;QACnB,EAAE,CAAC,mBAAmB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;QACrD,OAAO,EAAE,CAAC;OACX,CAAC;MAEF,EAAE,CAAC,gBAAgB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;KACnD,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC;KACrC;IAED,MAAA,IAAI,CAAC,aAAa,EAAE,0CAAE,KAAK,EAAE,CAAC;GAC/B;;;;EAMS,MAAM,uBAAuB,CAAC,KAAmB;IACzD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,EAAE,GAAG,KAAK,CAAC,MAAiB,CAAC;MACnC,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;MAC/C,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;MAC7C,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,EAAE,KAAI,IAAI,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,EAAE,MAAK,EAAE,EAAE;QAC3C,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EAAE,CAAC;OAC/B;MACD,IAAI,CAAC,mBAAmB,GAAGA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;MAEtE,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;MAC/D,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC5D;GACF;;;;EAKS,gBAAgB;IACxB,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAChC;;;;EAKS,MAAM;IACd,QACE,EAAC,IAAI,QACH,eAAQ,CACH,EACP;GACH;EA0CO,mBAAmB,CACzB,EAGyC;IAKzC,IAAI,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC;IAC7B,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAE1B,OAAO,EAAE,CAAC;GACX;EAEO,wBAAwB;IAC9B,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,EAAE;MAChC,MAAM,OAAO,GAAG,mBAAmB,CACjC,MAAM,CAAC,QAAQ,CAAC,IAAI,EACpB,IAAI,CAAC,eAAe,EACpB,yBAAyB,EACzB,MACE,OAAO,CAAC,IAAI,CACV,0BAA0B,IAAI,CAAC,eAAe,0CAA0C,CACzF,EACH,MACE,OAAO,CAAC,IAAI,CACV,4FAA4F,CAC7F,CACJ,CAAC;MAEF,IAAI,OAAO,IAAI,IAAI,EAAE;QACnB,OAAO,OAAO,CAAC;OAChB;KACF;IAED,OAAO,QAAQ,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;GAC7D;EAEO,yBAAyB;IAC/B,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,EAAE;MACjC,MAAM,OAAO,GAAG,mBAAmB,CACjC,MAAM,CAAC,QAAQ,CAAC,IAAI,EACpB,IAAI,CAAC,gBAAgB,EACrB,0BAA0B,EAC1B,MACE,OAAO,CAAC,IAAI,CACV,2BAA2B,IAAI,CAAC,gBAAgB,2CAA2C,CAC5F,EACH,MACE,OAAO,CAAC,IAAI,CACV,+FAA+F,CAChG,CACJ,CAAC;MAEF,IAAI,OAAO,IAAI,IAAI,EAAE;QACnB,OAAO,OAAO,CAAC;OAChB;KACF;IAED,OAAO,QAAQ,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;GAC9D;EAEO,2BAA2B;IACjC,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,EAAE;MACnC,MAAM,OAAO,GAAG,mBAAmB,CACjC,MAAM,CAAC,QAAQ,CAAC,IAAI,EACpB,IAAI,CAAC,kBAAkB,EACvB,4BAA4B,EAC5B,MACE,OAAO,CAAC,IAAI,CACV,6BAA6B,IAAI,CAAC,kBAAkB,6CAA6C,CAClG,EACH,MACE,OAAO,CAAC,IAAI,CACV,qGAAqG,CACtG,CACJ,CAAC;MAEF,IAAI,OAAO,IAAI,IAAI,EAAE;QACnB,OAAO,OAAO,CAAC;OAChB;KACF;IAED,OAAO,QAAQ,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAC;GAChE;EAEO,MAAM,oBAAoB;IAChC,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC9C,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;GACpD;EAEO,mBAAmB,CACzB,OAA2C;IAE3C,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;IAC7B,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;GAChD;EAEO,uBAAuB;IAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IAClC,IAAI,IAAI,IAAI,IAAI,EAAE;MAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;MAC9B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;MAC5C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC;MAC9C,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC;MAClD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;MACtB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;KAC3B;GACF;EAEO,aAAa;IACnB,OAAO,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,2BAA2B,CAE/C,CAAC;GACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Point"],"sources":["./src/components/viewer-markup/viewer-markup.css?tag=vertex-viewer-markup&encapsulation=shadow","./src/components/viewer-markup/viewer-markup.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { Point } from '@vertexvis/geometry';\n\nimport { stampTemplateWithId } from '../../lib/templates';\nimport {\n  ArrowMarkup,\n  CircleMarkup,\n  FreeformMarkup,\n  Markup,\n} from '../../lib/types/markup';\nimport { isVertexViewerArrowMarkup } from '../viewer-markup-arrow/utils';\nimport { isVertexViewerCircleMarkup } from '../viewer-markup-circle/utils';\nimport { isVertexViewerFreeformMarkup } from '../viewer-markup-freeform/utils';\nimport { ViewerMarkupToolType } from '../viewer-markup-tool/viewer-markup-tool';\n\n@Component({\n  tag: 'vertex-viewer-markup',\n  styleUrl: 'viewer-markup.css',\n  shadow: true,\n})\nexport class ViewerMarkup {\n  /**\n   * An HTML template that describes the HTML to use for new arrow\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-arrow>`.\n   */\n  @Prop()\n  public arrowTemplateId?: string;\n\n  /**\n   * An HTML template that describes the HTML to use for new circle\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-circle>`.\n   */\n  @Prop()\n  public circleTemplateId?: string;\n\n  /**\n   * An HTML template that describes the HTML to use for new freeform\n   * markup. It's expected that the template contains a\n   * `<vertex-viewer-markup-freeform>`.\n   */\n  @Prop()\n  public freeformTemplateId?: string;\n\n  /**\n   * The type of markup to perform.\n   */\n  @Prop()\n  public tool: ViewerMarkupToolType = 'arrow';\n\n  /**\n   * If `true`, disables adding or editing of markup through user\n   * interaction.\n   */\n  @Prop()\n  public disabled = false;\n\n  /**\n   * The viewer to connect to markup. If nested within a <vertex-viewer>,\n   * this property will be populated automatically.\n   */\n  @Prop()\n  public viewer?: HTMLVertexViewerElement;\n\n  /**\n   * The ID of the markup that is selected.\n   */\n  @Prop({ mutable: true })\n  public selectedMarkupId?: string;\n\n  /**\n   * Indicates if new markup should be automatically selected.\n   */\n  @Prop()\n  public selectNew = false;\n\n  /**\n   * Dispatched when a new markup is added, either through user interaction\n   * or programmatically.\n   */\n  @Event()\n  public markupAdded!: EventEmitter<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n  >;\n\n  /**\n   * Dispatched when a markup is removed, either through user\n   * interaction or programmatically.\n   */\n  @Event()\n  public markupRemoved!: EventEmitter<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n  >;\n\n  /**\n   * Dispatched when markup selection changes. Will either be the\n   * selected element or `undefined` indicating that selection\n   * was cleared.\n   */\n  @Event()\n  public markupSelectionChanged!: EventEmitter<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n    | undefined\n  >;\n\n  @Element()\n  private hostEl!: HTMLElement;\n\n  @State()\n  private toSelectMarkupId?: string;\n\n  @State()\n  private pointerDownPosition?: Point.Point;\n\n  protected disconnectedCallback(): void {\n    window.removeEventListener('pointerup', this.handlePointerUp);\n    window.removeEventListener('pointermove', this.handlePointerMove);\n  }\n\n  /**\n   * Adds a new markup as a child to this component. A new markup\n   * component will be created from the template specified by\n   * `arrow-template-id`, `circle-template-id`, or if undefined\n   * a default element will be created.\n   *\n   * @param markup The markup to add.\n   * @returns The markup element that was created.\n   * @see {@link ViewerMarkups.arrowTemplateId}\n   * @see {@link ViewerMarkups.circleTemplateId}\n   */\n  @Method()\n  public async addMarkup(\n    markup: Markup\n  ): Promise<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n  > {\n    if (markup instanceof ArrowMarkup) {\n      const { start, end, id } = markup;\n\n      const el = this.createArrowMarkupElement();\n      el.id = id;\n      el.start = start;\n      el.end = end;\n\n      return this.appendMarkupElement(el);\n    } else if (markup instanceof CircleMarkup) {\n      const { bounds, id } = markup;\n\n      const el = this.createCircleMarkupElement();\n      el.id = id;\n      el.bounds = bounds;\n\n      return this.appendMarkupElement(el);\n    } else if (markup instanceof FreeformMarkup) {\n      const { bounds, points, id } = markup;\n\n      const el = this.createFreeformMarkupElement();\n      el.id = id;\n      el.points = points;\n      el.bounds = bounds;\n\n      return this.appendMarkupElement(el);\n    } else {\n      throw new Error(`Cannot add markup. Unknown type '${markup}'.`);\n    }\n  }\n\n  /**\n   * Removes a markup with the given ID, and returns the HTML element\n   * associated to the markup. Returns `undefined` if no markup is\n   * found.\n   *\n   * @param id The ID of the markup to remove.\n   * @returns The markup element, or undefined.\n   */\n  @Method()\n  public async removeMarkup(\n    id: string\n  ): Promise<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n    | undefined\n  > {\n    const markup = await this.getMarkupElement(id);\n\n    if (markup != null) {\n      markup.remove();\n      this.markupRemoved.emit(markup);\n    }\n\n    return markup;\n  }\n\n  /**\n   * Returns a list of markup elements that are children of this component.\n   *\n   * @returns A list of all markups.\n   * @see {@link ViewerMarkup.getMarkupElement}\n   */\n  @Method()\n  public async getMarkupElements(): Promise<\n    Array<\n      | HTMLVertexViewerMarkupArrowElement\n      | HTMLVertexViewerMarkupCircleElement\n      | HTMLVertexViewerMarkupFreeformElement\n    >\n  > {\n    return Array.from(this.hostEl.children).filter(\n      (e) =>\n        isVertexViewerArrowMarkup(e) ||\n        isVertexViewerCircleMarkup(e) ||\n        isVertexViewerFreeformMarkup(e)\n    ) as Array<\n      | HTMLVertexViewerMarkupArrowElement\n      | HTMLVertexViewerMarkupCircleElement\n      | HTMLVertexViewerMarkupFreeformElement\n    >;\n  }\n\n  /**\n   * Returns the markup element associated to the given ID.\n   *\n   * @param id The ID of the markup element to return.\n   * @returns A markup element, or `undefined`.\n   * @see {@link ViewerMarkup.getMarkupElements}\n   */\n  @Method()\n  public async getMarkupElement(\n    id: string\n  ): Promise<\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupFreeformElement\n    | undefined\n  > {\n    const markup = await this.getMarkupElements();\n    return markup.find((el) => el.id === id);\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('selectedMarkupId')\n  protected async handleSelectedMarkupIdChanged(): Promise<void> {\n    const markup = await this.getMarkupElements();\n    markup.forEach((m) => {\n      if (m.id === this.selectedMarkupId) {\n        m.mode = 'edit';\n        this.markupSelectionChanged.emit(m);\n      } else {\n        m.mode = '';\n      }\n    });\n\n    if (this.selectedMarkupId == null) {\n      this.markupSelectionChanged.emit(undefined);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('tool')\n  protected handleToolChanged(): void {\n    this.updatePropsOnMarkupTool();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('arrowTemplateId')\n  protected handleArrowTemplateIdChanged(): void {\n    this.updatePropsOnMarkupTool();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('circleTemplateId')\n  protected handleCircleTemplateIdChanged(): void {\n    this.updatePropsOnMarkupTool();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('freeformTemplateId')\n  protected handleFreeformTemplateIdChanged(): void {\n    this.updatePropsOnMarkupTool();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('viewer')\n  protected async handleViewerChanged(\n    newViewer: HTMLVertexViewerElement | undefined\n  ): Promise<void> {\n    this.updatePropsOnMarkupTool();\n    this.updatePropsOnMarkups();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('disabled')\n  protected handleDisabledChanged(): void {\n    this.updatePropsOnMarkupTool();\n  }\n\n  /**\n   * @ignore\n   */\n  @Listen('markupEnd')\n  protected async handleMarkupEnd(event: CustomEvent<Markup>): Promise<void> {\n    const e = event as CustomEvent<Markup>;\n    const el = await this.addMarkup(e.detail);\n\n    await new Promise<void>((resolve) => {\n      const handleRender = (): void => {\n        el.removeEventListener('viewRendered', handleRender);\n        resolve();\n      };\n\n      el.addEventListener('viewRendered', handleRender);\n    });\n\n    if (this.selectNew) {\n      this.selectedMarkupId = e.detail.id;\n    }\n\n    this.getMarkupTool()?.reset();\n  }\n\n  /**\n   * @ignore\n   */\n  @Listen('pointerdown')\n  protected async handleMarkupPointerDown(event: PointerEvent): Promise<void> {\n    if (!this.disabled) {\n      const el = event.target as Element;\n      const markups = await this.getMarkupElements();\n      const markup = markups.find((m) => m === el);\n      if (markup?.id != null && markup?.id !== '') {\n        this.toSelectMarkupId = el.id;\n      }\n      this.pointerDownPosition = Point.create(event.clientX, event.clientY);\n\n      window.addEventListener('pointermove', this.handlePointerMove);\n      window.addEventListener('pointerup', this.handlePointerUp);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  protected componentDidLoad(): void {\n    this.updatePropsOnMarkupTool();\n  }\n\n  /**\n   * @ignore\n   */\n  protected render(): h.JSX.IntrinsicElements {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n\n  private handlePointerMove = (event: PointerEvent): void => {\n    if (\n      this.pointerDownPosition != null &&\n      Point.distance(\n        this.pointerDownPosition,\n        Point.create(event.clientX, event.clientY)\n      ) > 2\n    ) {\n      this.toSelectMarkupId = undefined;\n    }\n  };\n\n  private handlePointerUp = async (event: PointerEvent): Promise<void> => {\n    if (!this.disabled) {\n      const el = event.target as Element;\n      const markups = await this.getMarkupElements();\n      const markup = markups.find((m) => m === el);\n      if (\n        markup?.id != null &&\n        markup.id !== '' &&\n        markup.id === this.toSelectMarkupId\n      ) {\n        this.selectedMarkupId = el.id;\n      } else if (\n        this.pointerDownPosition != null &&\n        Point.distance(\n          this.pointerDownPosition,\n          Point.create(event.clientX, event.clientY)\n        ) <= 2\n      ) {\n        this.selectedMarkupId = undefined;\n      }\n      this.toSelectMarkupId = undefined;\n      this.pointerDownPosition = undefined;\n    }\n\n    window.removeEventListener('pointerup', this.handlePointerUp);\n    window.removeEventListener('pointermove', this.handlePointerMove);\n  };\n\n  private appendMarkupElement(\n    el:\n      | HTMLVertexViewerMarkupCircleElement\n      | HTMLVertexViewerMarkupArrowElement\n      | HTMLVertexViewerMarkupFreeformElement\n  ):\n    | HTMLVertexViewerMarkupCircleElement\n    | HTMLVertexViewerMarkupArrowElement\n    | HTMLVertexViewerMarkupFreeformElement {\n    this.updatePropsOnMarkup(el);\n    this.hostEl.appendChild(el);\n    this.markupAdded.emit(el);\n\n    return el;\n  }\n\n  private createArrowMarkupElement(): HTMLVertexViewerMarkupArrowElement {\n    if (this.arrowTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.arrowTemplateId,\n        isVertexViewerArrowMarkup,\n        () =>\n          console.warn(\n            `Arrow template with ID ${this.arrowTemplateId} not found. Using default arrow element.`\n          ),\n        () =>\n          console.warn(\n            `Arrow template does not contain a vertex-viewer-markup-arrow. Using default arrow element.`\n          )\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-arrow');\n  }\n\n  private createCircleMarkupElement(): HTMLVertexViewerMarkupCircleElement {\n    if (this.circleTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.circleTemplateId,\n        isVertexViewerCircleMarkup,\n        () =>\n          console.warn(\n            `Circle template with ID ${this.circleTemplateId} not found. Using default circle element.`\n          ),\n        () =>\n          console.warn(\n            `Circle template does not contain a vertex-viewer-markup-circle. Using default circle element.`\n          )\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-circle');\n  }\n\n  private createFreeformMarkupElement(): HTMLVertexViewerMarkupFreeformElement {\n    if (this.freeformTemplateId != null) {\n      const element = stampTemplateWithId(\n        window.document.body,\n        this.freeformTemplateId,\n        isVertexViewerFreeformMarkup,\n        () =>\n          console.warn(\n            `Freeform template with ID ${this.freeformTemplateId} not found. Using default freeform element.`\n          ),\n        () =>\n          console.warn(\n            `Freeform template does not contain a vertex-viewer-markup-freeform. Using default freeform element.`\n          )\n      );\n\n      if (element != null) {\n        return element;\n      }\n    }\n\n    return document.createElement('vertex-viewer-markup-freeform');\n  }\n\n  private async updatePropsOnMarkups(): Promise<void> {\n    const markup = await this.getMarkupElements();\n    markup.forEach((m) => this.updatePropsOnMarkup(m));\n  }\n\n  private updatePropsOnMarkup(\n    element: HTMLVertexViewerMarkupArrowElement\n  ): void {\n    element.viewer = this.viewer;\n    element.classList.add('viewer-markup__markup');\n  }\n\n  private updatePropsOnMarkupTool(): void {\n    const tool = this.getMarkupTool();\n    if (tool != null) {\n      tool.disabled = this.disabled;\n      tool.arrowTemplateId = this.arrowTemplateId;\n      tool.circleTemplateId = this.circleTemplateId;\n      tool.freeformTemplateId = this.freeformTemplateId;\n      tool.tool = this.tool;\n      tool.viewer = this.viewer;\n    }\n  }\n\n  private getMarkupTool(): HTMLVertexViewerMarkupToolElement | undefined {\n    return this.hostEl.querySelector('vertex-viewer-markup-tool') as\n      | HTMLVertexViewerMarkupToolElement\n      | undefined;\n  }\n}\n"],"version":3}

package/dist/components/vertex-viewer-measurement-details.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/regl-shape";
-
-interface VertexViewerMeasurementDetails extends Components.VertexViewerMeasurementDetails, HTMLElement {}
-export const VertexViewerMeasurementDetails: {
-  prototype: VertexViewerMeasurementDetails;
-  new (): VertexViewerMeasurementDetails;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;