@vertexvis/viewer 0.13.2-canary.9 → 0.14.0

package/dist/cjs/vertex-viewer-pin-label_2.cjs.entry.js

@@ -0,0 +1,276 @@
+/**!
+ * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4138aa2c.js');
+const bundle_esm = require('./bundle.esm-22b6f2d6.js');
+const index$1 = require('./index-b9d13137.js');
+const dom = require('./dom-8d90bfaf.js');
+const model = require('./model-a9cfd037.js');
+const stencil = require('./stencil-ef19638e.js');
+const utils = require('./utils-78928e4e.js');
+require('./_commonjsHelpers-dcc4cf71.js');
+require('./browser.esm-0bcdc581.js');
+require('./utils-b157b0af.js');
+
+function getComputedStyle(el) {
+  return window.getComputedStyle(el);
+}
+
+const viewerPinLabelCss = ":host{--viewer-annotations-pin-label-background-color:var(--blue-200);--viewer-annotations-pin-label-border-color:var(--blue-600);--viewer-annotations-pin-label-focused-border-color:var(--blue-700);--viewer-annotations-pin-label-color:var(--white);--viewer-annotations-pin-label-padding-y:0.375em;--viewer-annotations-pin-label-padding-x:0.5em;--viewer-annotations-pin-label-border-width:2px;--viewer-annotations-pin-label-border-style:solid;--viewer-annotations-pin-label-border-radius:0.25em;--viewer-annotations-pin-label-min-width:2rem;--viewer-annotations-pin-label-max-width:25rem;--viewer-annotations-pin-label-max-height:50rem;overflow:hidden;pointer-events:none}:host([mode='']) .pin-label{color:var(--viewer-annotations-pin-label-color);background:var(--viewer-annotations-pin-label-background-color)}.pin-label-text{font-family:Arial, Helvetica, sans-serif;font-size:0.875rem;line-height:1rem;word-break:break-word;white-space:pre-wrap}.pin-label-input-wrapper{display:flex;position:absolute;pointer-events:auto;box-sizing:border-box;min-width:var(--viewer-annotations-pin-label-min-width);max-width:var(--viewer-annotations-pin-label-max-width);max-height:var(--viewer-annotations-pin-label-max-height);background:var(--viewer-annotations-pin-label-background-color);border-width:var(--viewer-annotations-pin-label-border-width);border-style:var(--viewer-annotations-pin-label-border-style);border-color:var(--viewer-annotations-pin-label-border-color);border-radius:var(--viewer-annotations-pin-label-border-radius)}.pin-label-input-wrapper.focused{min-width:var(--viewer-annotations-pin-label-max-width);border-color:var(--viewer-annotations-pin-label-focused-border-color)}.pin-input-drag-target{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.pin-label-input{resize:none;position:relative;outline:none;border:none;word-break:break-word;padding:0 0 0 0;background-color:transparent;margin:var(--viewer-annotations-pin-label-padding-y) var(--viewer-annotations-pin-label-padding-x);width:var(--viewer-annotations-pin-label-min-width);flex-grow:1;overflow:hidden;max-width:calc(var(--viewer-annotations-pin-label-max-width) - calc(2 * var(--viewer-annotations-pin-label-padding-x)))}.pin-label-input.readonly{pointer-events:auto;color:black;cursor:pointer}.pin-label-hidden{position:absolute;visibility:hidden;pointer-events:none;width:auto;height:auto;box-sizing:border-box;border-width:var(--viewer-annotations-pin-label-border-width);border-style:var(--viewer-annotations-pin-label-border-style);border-color:var(--viewer-annotations-pin-label-border-color);margin:var(--viewer-annotations-pin-label-padding-y) 0;padding:0 var(--viewer-annotations-pin-label-padding-x);max-width:calc(var(--viewer-annotations-pin-label-max-width) - calc(2 * var(--viewer-annotations-pin-label-padding-x)))}";
+
+let VertexPinLabel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.labelChanged = index.createEvent(this, "labelChanged", 7);
+    this.labelFocused = index.createEvent(this, "labelFocused", 7);
+    this.labelBlurred = index.createEvent(this, "labelBlurred", 7);
+    this.focused = false;
+    this.textareaRows = 1;
+    this.computeContentSize = () => {
+      stencil.readDOM(() => {
+        if (this.contentEl != null) {
+          this.contentElBounds = this.contentEl.getBoundingClientRect();
+          const computedStyles = getComputedStyle(this.contentEl);
+          this.textareaRows = Math.max(1, Math.ceil((parseFloat(computedStyles.height) -
+            parseFloat(computedStyles.borderWidth) * 2) /
+            parseFloat(computedStyles.lineHeight)));
+        }
+      });
+    };
+    this.handleInputKeyDown = (event) => {
+      if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        this.submit();
+      }
+      else if (event.key === 'Enter') {
+        this.textareaRows += 1;
+      }
+    };
+    this.handlePointerDown = (event) => {
+      var _a;
+      if (!this.focused) {
+        if (this.elementBounds != null) {
+          this.relativePointerDownPosition = utils.translatePointToRelative(dom.getMouseClientPosition(event, this.elementBounds), this.elementBounds);
+          this.pinPointerDownPosition = (_a = this.pin) === null || _a === void 0 ? void 0 : _a.label.point;
+          window.addEventListener('pointermove', this.handlePointerMove);
+          window.addEventListener('pointerup', this.handlePointerUp);
+        }
+      }
+    };
+    this.handlePointerMove = (event) => {
+      var _a, _b;
+      if (this.elementBounds != null &&
+        this.relativePointerDownPosition &&
+        this.pinPointerDownPosition != null) {
+        const point = dom.getMouseClientPosition(event, this.elementBounds);
+        const relative = utils.translatePointToRelative(point, this.elementBounds);
+        const relativeDelta = bundle_esm.point.subtract(relative, this.relativePointerDownPosition);
+        const myUpdatedPin = this.pin != null
+          ? {
+            id: this.pin.id,
+            worldPosition: this.pin.worldPosition,
+            label: {
+              point: bundle_esm.point.add(this.pinPointerDownPosition, relativeDelta),
+              text: this.pin.label.text,
+            },
+            partId: (_a = this.pin) === null || _a === void 0 ? void 0 : _a.partId,
+          }
+          : undefined;
+        if (myUpdatedPin) {
+          (_b = this.pinController) === null || _b === void 0 ? void 0 : _b.updatePin(myUpdatedPin);
+          this.computeScreenPosition();
+        }
+      }
+    };
+    this.handlePointerUp = (event) => {
+      var _a, _b;
+      if (((_a = this.pinController) === null || _a === void 0 ? void 0 : _a.getToolMode()) === 'edit' &&
+        this.relativePointerDownPosition != null &&
+        this.elementBounds != null) {
+        const pointerDownScreen = utils.translatePointToScreen(this.relativePointerDownPosition, this.elementBounds);
+        const distanceBetweenStartAndEndPoint = bundle_esm.point.distance(pointerDownScreen, dom.getMouseClientPosition(event, this.elementBounds));
+        if (distanceBetweenStartAndEndPoint <= 2) {
+          this.focused = true;
+          this.labelFocused.emit((_b = this.pin) === null || _b === void 0 ? void 0 : _b.id);
+        }
+      }
+      this.relativePointerDownPosition = undefined;
+      this.pinPointerDownPosition = undefined;
+      window.removeEventListener('pointermove', this.handlePointerMove);
+      window.removeEventListener('pointerup', this.handlePointerUp);
+    };
+    this.handleTextBlur = () => {
+      this.submit();
+    };
+    this.handleTextInput = (event) => {
+      const input = event.target;
+      this.value = input.value;
+    };
+    this.value = this.getPinText();
+  }
+  /**
+   * Gives focus to the the component's internal text input.
+   */
+  async setFocus() {
+    var _a, _b, _c;
+    // HTMLInputElement.focus() doesn't exist in tests.
+    if (typeof ((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus) === 'function') {
+      if (this.focused) {
+        (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.focus();
+      }
+      else {
+        (_c = this.inputEl) === null || _c === void 0 ? void 0 : _c.blur();
+      }
+    }
+  }
+  watchFocusChange() {
+    var _a, _b;
+    this.labelChanged.emit();
+    if (this.focused) {
+      (_a = this.pinController) === null || _a === void 0 ? void 0 : _a.setSelectedPinId((_b = this.pin) === null || _b === void 0 ? void 0 : _b.id);
+    }
+  }
+  watchPinChange() {
+    this.value = this.getPinText();
+    this.computeScreenPosition();
+  }
+  watchElementBoundsChange() {
+    this.computeScreenPosition();
+  }
+  componentWillLoad() {
+    this.computeScreenPosition();
+  }
+  componentDidLoad() {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.labelChanged.emit();
+    });
+    this.contentResizeObserver = new ResizeObserver(this.computeContentSize);
+    if (this.hostEl != null) {
+      this.resizeObserver.observe(this.hostEl);
+    }
+    if (this.contentEl != null) {
+      this.contentResizeObserver.observe(this.contentEl);
+    }
+    if (this.pinController == null) {
+      this.pinController = new model.PinController(new model.PinModel());
+    }
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.contentResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+  }
+  componentDidRender() {
+    if (this.focused && this.inputEl != null) {
+      this.setFocus();
+    }
+  }
+  render() {
+    var _a, _b, _c, _d;
+    return (index.h(index.Host, null, index.h("div", { id: `pin-label-${(_a = this.pin) === null || _a === void 0 ? void 0 : _a.id}`, class: index$1.classnames('pin-label-input-wrapper', {
+        focused: this.focused,
+      }), onPointerDown: this.handlePointerDown, style: {
+        top: `${((_b = this.computedScreenPosition) === null || _b === void 0 ? void 0 : _b.y.toString()) || 0}px`,
+        left: `${((_c = this.computedScreenPosition) === null || _c === void 0 ? void 0 : _c.x.toString()) || 0}px`,
+        minWidth: this.computeMinWidth(),
+        maxWidth: this.computeMaxWidth(),
+        maxHeight: this.computeMaxHeight(),
+      } }, index.h("textarea", { id: `pin-label-input-${(_d = this.pin) === null || _d === void 0 ? void 0 : _d.id}`, class: index$1.classnames('pin-label-input', 'pin-label-text', {
+        ['readonly']: !this.focused,
+      }), disabled: !this.focused, ref: (ref) => (this.inputEl = ref), value: this.value, rows: this.textareaRows, onKeyDown: this.handleInputKeyDown, onInput: this.handleTextInput, onBlur: this.handleTextBlur }), !this.focused && (index.h("div", { class: "pin-input-drag-target", onPointerDown: this.handlePointerDown }))), index.h("div", { ref: (el) => (this.contentEl = el), class: index$1.classnames('pin-label-text', 'pin-label-hidden'), style: {
+        maxWidth: this.computeMaxWidth(),
+        maxHeight: this.computeMaxHeight(),
+      } }, this.hiddenContent())));
+  }
+  hiddenContent() {
+    // This corrects some inconsistencies in how a newline character
+    // is represented in a div. Leveraging `<br>`s results in a more
+    // consistent representation of the newlines in a textarea.
+    return this.value.includes('\n')
+      ? this.value
+        .split('\n')
+        .reduce((res, str) => [...res, str, index.h("br", null)], [])
+      : [this.value];
+  }
+  computeMinWidth() {
+    if (this.contentElBounds != null) {
+      const expected = `${this.contentElBounds.width + 16}px`;
+      return `min(${expected}, ${this.computeMaxWidth()})`;
+    }
+    else {
+      return `var(--viewer-annotations-pin-label-min-width)`;
+    }
+  }
+  computeMaxWidth() {
+    const expected = `var(--viewer-annotations-pin-label-max-width)`;
+    return `min(${expected}, ${this.computeRemainingWidth()})`;
+  }
+  computeMaxHeight() {
+    const expected = `var(--viewer-annotations-pin-label-max-height)`;
+    return `min(${expected}, ${this.computeRemainingHeight()})`;
+  }
+  computeRemainingWidth() {
+    var _a, _b;
+    return `calc(${((_a = this.elementBounds) === null || _a === void 0 ? void 0 : _a.width.toString()) || 0}px - ${((_b = this.computedScreenPosition) === null || _b === void 0 ? void 0 : _b.x.toString()) || 0}px)`;
+  }
+  computeRemainingHeight() {
+    var _a, _b;
+    return `calc(${((_a = this.elementBounds) === null || _a === void 0 ? void 0 : _a.height.toString()) || 0}px - ${((_b = this.computedScreenPosition) === null || _b === void 0 ? void 0 : _b.y.toString()) || 0}px)`;
+  }
+  getPinText() {
+    var _a;
+    if (((_a = this.pin) === null || _a === void 0 ? void 0 : _a.label.text) != null) {
+      this.value = this.pin.label.text;
+    }
+    else {
+      this.value = '';
+    }
+    return this.value;
+  }
+  computeScreenPosition() {
+    this.computedScreenPosition =
+      model.isTextPin(this.pin) &&
+        this.elementBounds != null &&
+        this.pin.label.point != null
+        ? utils.translatePointToScreen(this.pin.label.point, this.elementBounds)
+        : undefined;
+  }
+  submit() {
+    var _a, _b;
+    this.focused = false;
+    this.labelBlurred.emit((_a = this.pin) === null || _a === void 0 ? void 0 : _a.id);
+    if (this.pin != null) {
+      (_b = this.pinController) === null || _b === void 0 ? void 0 : _b.updatePin(Object.assign(Object.assign({}, this.pin), { label: {
+          point: this.pin.label.point,
+          text: this.value,
+        } }));
+    }
+  }
+  get hostEl() { return index.getElement(this); }
+  static get watchers() { return {
+    "focused": ["watchFocusChange"],
+    "pin": ["watchPinChange"],
+    "elementBounds": ["watchElementBoundsChange"]
+  }; }
+};
+VertexPinLabel.style = viewerPinLabelCss;
+
+const viewerPinLabelLineCss = ":host{--viewer-annotations-pin-label-line-color:var(--blue-600);--viewer-annotations-pin-label-line-width:1\n\n  overflow: hidden;pointer-events:none}.label-line{pointer-events:auto;stroke:var(--viewer-annotations-pin-label-line-color);stroke-width:var( --viewer-annotations-pin-label-line-width);cursor:default}.svg{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;pointer-events:none;height:100%;width:100%}";
+
+let VertexPinLabelLine = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    var _a, _b, _c, _d;
+    return (index.h(index.Host, null, index.h("svg", { class: "svg" }, index.h("line", { class: "label-line", x1: (_a = this.labelPoint) === null || _a === void 0 ? void 0 : _a.x, y1: (_b = this.labelPoint) === null || _b === void 0 ? void 0 : _b.y, x2: (_c = this.pinPoint) === null || _c === void 0 ? void 0 : _c.x, y2: (_d = this.pinPoint) === null || _d === void 0 ? void 0 : _d.y }))));
+  }
+};
+VertexPinLabelLine.style = viewerPinLabelLineCss;
+
+exports.vertex_viewer_pin_label = VertexPinLabel;
+exports.vertex_viewer_pin_label_line = VertexPinLabelLine;

package/dist/cjs/vertex-viewer-pin-tool.cjs.entry.js

@@ -0,0 +1,322 @@
+/**!
+ * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4138aa2c.js');
+const model = require('./model-a9cfd037.js');
+const bundle_esm = require('./bundle.esm-22b6f2d6.js');
+const browser_esm = require('./browser.esm-0bcdc581.js');
+const utils = require('./utils-78928e4e.js');
+const cursors = require('./cursors-f5d3c9a6.js');
+const dom = require('./dom-8d90bfaf.js');
+const elementRectObserver = require('./elementRectObserver-9b28f182.js');
+const entities = require('./entities-9eb7e608.js');
+const dom$1 = require('./dom-d1bbd67c.js');
+require('./utils-b157b0af.js');
+
+class PinsInteractionHandler {
+  constructor(controller) {
+    this.rectObserver = new elementRectObserver.ElementRectObserver();
+    this.droppableSurfaces = [
+      entities.EntityType.PRECISE_SURFACE,
+      entities.EntityType.IMPRECISE_SURFACE,
+      entities.EntityType.GENERIC_GEOMETRY,
+    ];
+    this.handlePointerMove = async (event) => {
+      const isDroppableSurface = await this.isDroppableSurface(event);
+      const draggable = this.controller.getDraggable();
+      if (draggable != null && isDroppableSurface) {
+        this.handleDrag(draggable, event);
+      }
+      if (this.controller.getDraggable() == null &&
+        this.controller.getToolMode() === 'edit' &&
+        isDroppableSurface) {
+        this.addCursor(this.getCusorType());
+      }
+      else {
+        this.clearCursor();
+      }
+    };
+    this.handleDrag = async (draggable, event) => {
+      const pt = dom.getMouseClientPosition(event, this.elementRect);
+      const worldPosition = await this.getWorldPositionForPoint(pt);
+      if (worldPosition != null) {
+        this.controller.updateDraggable(Object.assign(Object.assign({}, draggable), { lastPoint: pt }), worldPosition);
+      }
+    };
+    this.handlePointerDown = async (pointerDown) => {
+      const pointerUp = (pointerUp) => {
+        const distanceBetweenStartAndEndPoint = bundle_esm.point.distance(bundle_esm.point.create(pointerDown.clientX, pointerUp.clientY), bundle_esm.point.create(pointerUp.clientX, pointerUp.clientY));
+        if (distanceBetweenStartAndEndPoint <= 2 && pointerDown.buttons !== 2) {
+          if (this.controller.getToolMode() === 'edit') {
+            const pt = dom.getMouseClientPosition(pointerDown, this.elementRect);
+            this.handlePlacePin(pt);
+          }
+        }
+        dispose();
+      };
+      const dispose = () => {
+        window.removeEventListener('pointerup', pointerUp);
+      };
+      window.addEventListener('pointerup', pointerUp);
+      return {
+        dispose,
+      };
+    };
+    this.handlePointerUp = async () => {
+      const draggable = this.controller.getDraggable();
+      const lastPoint = draggable === null || draggable === void 0 ? void 0 : draggable.lastPoint;
+      this.controller.setDraggable(undefined);
+      if (lastPoint != null && draggable != null) {
+        this.ifInitialized(async ({ api }) => {
+          var _a, _b, _c, _d, _e, _f;
+          const [hit] = await api.hitItems(lastPoint);
+          if ((hit === null || hit === void 0 ? void 0 : hit.hitPoint) != null &&
+            ((_a = hit === null || hit === void 0 ? void 0 : hit.hitPoint) === null || _a === void 0 ? void 0 : _a.x) != null &&
+            ((_b = hit === null || hit === void 0 ? void 0 : hit.hitPoint) === null || _b === void 0 ? void 0 : _b.y) != null &&
+            ((_c = hit === null || hit === void 0 ? void 0 : hit.hitPoint) === null || _c === void 0 ? void 0 : _c.z) != null) {
+            this.controller.updateDraggable(Object.assign(Object.assign({}, draggable), { lastPoint }), {
+              x: (_d = hit === null || hit === void 0 ? void 0 : hit.hitPoint) === null || _d === void 0 ? void 0 : _d.x,
+              y: hit === null || hit === void 0 ? void 0 : hit.hitPoint.y,
+              z: hit === null || hit === void 0 ? void 0 : hit.hitPoint.z,
+            }, (_f = (_e = hit === null || hit === void 0 ? void 0 : hit.partId) === null || _e === void 0 ? void 0 : _e.hex) !== null && _f !== void 0 ? _f : undefined);
+          }
+        });
+      }
+    };
+    this.controller = controller;
+  }
+  get elementRect() {
+    return this.rectObserver.rect;
+  }
+  initialize(element, api) {
+    this.element = element;
+    this.api = api;
+    this.rectObserver.observe(element);
+    element.addEventListener('pointermove', this.handlePointerMove);
+    element.addEventListener('pointerdown', this.handlePointerDown);
+    window.addEventListener('pointerup', this.handlePointerUp);
+  }
+  dispose() {
+    var _a, _b;
+    this.rectObserver.disconnect();
+    (_a = this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener('pointermove', this.handlePointerMove);
+    (_b = this.element) === null || _b === void 0 ? void 0 : _b.removeEventListener('pointerdown', this.handlePointerDown);
+    window.removeEventListener('pointerup', this.handlePointerUp);
+    this.element = undefined;
+    this.api = undefined;
+  }
+  async getWorldPositionForPoint(pt) {
+    return this.ifInitialized(async ({ api }) => {
+      const vector3 = await api.getWorldPointFromViewport(pt);
+      return vector3;
+    });
+  }
+  async handlePlacePin(pt, existingPin) {
+    this.ifInitialized(async ({ api }) => {
+      var _a, _b, _c, _d, _e, _f;
+      const [hit] = await api.hitItems(pt);
+      if ((hit === null || hit === void 0 ? void 0 : hit.hitPoint) != null && this.elementRect != null) {
+        const relativePoint = utils.translatePointToRelative(Object.assign({}, pt), this.elementRect);
+        if ((hit === null || hit === void 0 ? void 0 : hit.hitPoint) != null &&
+          (hit === null || hit === void 0 ? void 0 : hit.hitPoint.x) != null &&
+          (hit === null || hit === void 0 ? void 0 : hit.hitPoint.y) != null &&
+          (hit === null || hit === void 0 ? void 0 : hit.hitPoint.z) != null) {
+          const pinId = existingPin != null ? existingPin.id : browser_esm.uuid.create();
+          switch (this.controller.getToolType()) {
+            case 'pin':
+              this.controller.setPin({
+                id: pinId,
+                worldPosition: {
+                  x: (_a = hit === null || hit === void 0 ? void 0 : hit.hitPoint) === null || _a === void 0 ? void 0 : _a.x,
+                  y: hit === null || hit === void 0 ? void 0 : hit.hitPoint.y,
+                  z: hit === null || hit === void 0 ? void 0 : hit.hitPoint.z,
+                },
+                partId: (_c = (_b = hit === null || hit === void 0 ? void 0 : hit.itemId) === null || _b === void 0 ? void 0 : _b.hex) !== null && _c !== void 0 ? _c : undefined,
+              });
+              break;
+            case 'pin-label':
+              this.controller.setPin({
+                id: pinId,
+                worldPosition: {
+                  x: (_d = hit === null || hit === void 0 ? void 0 : hit.hitPoint) === null || _d === void 0 ? void 0 : _d.x,
+                  y: hit === null || hit === void 0 ? void 0 : hit.hitPoint.y,
+                  z: hit === null || hit === void 0 ? void 0 : hit.hitPoint.z,
+                },
+                partId: (_f = (_e = hit === null || hit === void 0 ? void 0 : hit.itemId) === null || _e === void 0 ? void 0 : _e.hex) !== null && _f !== void 0 ? _f : undefined,
+                label: {
+                  point: relativePoint,
+                },
+              });
+              break;
+          }
+        }
+      }
+      else {
+        this.controller.setSelectedPinId();
+      }
+    });
+  }
+  getCusorType() {
+    switch (this.controller.getToolType()) {
+      case 'pin':
+        return cursors.pinCursor;
+      case 'pin-label':
+        return cursors.labelPinCursor;
+    }
+  }
+  addCursor(cursor) {
+    this.clearCursor();
+    this.cursor = this.ifInitialized(({ api }) => api.addCursor(cursor));
+  }
+  async isDroppableSurface(event) {
+    var _a;
+    const pt = dom.getMouseClientPosition(event, this.elementRect);
+    const type = await ((_a = this.api) === null || _a === void 0 ? void 0 : _a.getEntityTypeAtPoint(pt));
+    return type != null && this.droppableSurfaces.includes(type);
+  }
+  ifInitialized(f) {
+    if (this.element != null && this.api != null) {
+      return f({ element: this.element, api: this.api });
+    }
+    else {
+      throw new Error('Pins interaction handler not initialized.');
+    }
+  }
+  clearCursor() {
+    var _a;
+    (_a = this.cursor) === null || _a === void 0 ? void 0 : _a.dispose();
+    this.cursor = undefined;
+  }
+}
+
+const viewerPinToolCss = ":host{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;pointer-events:none}";
+
+let ViewerPinTool = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The model that contains the entities and outcomes from performing pin annotations
+     */
+    this.pinModel = new model.PinModel();
+    this.pins = [];
+    /**
+     * The type of pin.
+     *
+     * This property will automatically be set.
+     */
+    this.tool = 'pin';
+    /**
+     * The mode of the pin tool
+     */
+    this.mode = 'view';
+    this.handleSetProjectionMatrix = () => {
+      var _a, _b;
+      this.projectionViewMatrix =
+        (_b = (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.frame) === null || _b === void 0 ? void 0 : _b.scene.camera.projectionViewMatrix;
+    };
+  }
+  /**
+   * @ignore
+   */
+  watchModeChange() {
+    var _a;
+    (_a = this.pinController) === null || _a === void 0 ? void 0 : _a.setToolMode(this.mode);
+    this.setupInteractionHandler();
+  }
+  /**
+   * @ignore
+   */
+  watchTypeChange() {
+    var _a;
+    (_a = this.pinController) === null || _a === void 0 ? void 0 : _a.setToolType(this.tool);
+    this.setupInteractionHandler();
+  }
+  /**
+   * @ignore
+   */
+  connectedCallback() {
+    this.setupInteractionHandler();
+  }
+  /**
+   * @ignore
+   */
+  componentWillLoad() {
+    this.updateViewport();
+    this.setupController();
+    this.setupInteractionHandler();
+    this.pinModel.onEntitiesChanged((entities) => {
+      this.pins = entities;
+    });
+    this.pinModel.onSelectionChange((selectedId) => {
+      this.selectedPinId = selectedId;
+    });
+  }
+  componentDidLoad() {
+    this.resizeObserver = new ResizeObserver(() => this.updateViewport());
+    this.resizeObserver.observe(this.hostEl);
+  }
+  /**
+   * @ignore
+   */
+  disconnectedCallback() {
+    this.clearInteractionHandler();
+    this.clearModelListeners();
+  }
+  /**
+   * @ignore
+   */
+  handleViewerChanged(newViewer, oldViewer) {
+    this.setupInteractionHandler();
+    if (oldViewer != null) {
+      oldViewer.removeEventListener('frameDrawn', this.handleSetProjectionMatrix);
+    }
+    if (newViewer != null) {
+      newViewer.addEventListener('frameDrawn', this.handleSetProjectionMatrix);
+    }
+    this.handleSetProjectionMatrix();
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("vertex-viewer-dom-renderer", { viewer: this.viewer, drawMode: "2d" }, this.pins.map((pin) => {
+      return (index.h("vertex-viewer-pin-group", { id: `pin-group-${pin.id}`, "data-is-dom-group-element": true, pin: pin, elementBounds: this.elementBounds, pinModel: this.pinModel, pinController: this.pinController, projectionViewMatrix: this.projectionViewMatrix, selected: this.selectedPinId === pin.id }));
+    }))));
+  }
+  setupController() {
+    this.pinController = new model.PinController(this.pinModel, this.mode, this.tool);
+  }
+  clearInteractionHandler() {
+    var _a;
+    (_a = this.registeredInteractionHandler) === null || _a === void 0 ? void 0 : _a.then((handler) => handler.dispose());
+    this.registeredInteractionHandler = undefined;
+  }
+  setupInteractionHandler() {
+    var _a;
+    this.clearInteractionHandler();
+    if (this.pinController != null) {
+      this.registeredInteractionHandler =
+        (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.registerInteractionHandler(new PinsInteractionHandler(this.pinController));
+    }
+  }
+  clearModelListeners() {
+    var _a, _b;
+    (_a = this.onEntitiesChangedHandler) === null || _a === void 0 ? void 0 : _a.dispose();
+    this.onEntitiesChangedHandler = undefined;
+    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+  }
+  updateViewport() {
+    const rect = dom$1.getMarkupBoundingClientRect(this.hostEl);
+    this.elementBounds = rect;
+  }
+  get hostEl() { return index.getElement(this); }
+  static get watchers() { return {
+    "mode": ["watchModeChange"],
+    "tool": ["watchTypeChange"],
+    "viewer": ["handleViewerChanged"]
+  }; }
+};
+ViewerPinTool.style = viewerPinToolCss;
+
+exports.vertex_viewer_pin_tool = ViewerPinTool;