@vertexvis/viewer 0.13.2-canary.9 → 0.14.0

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

@@ -0,0 +1,318 @@
+/**!
+ * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
+ */
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a9fb8318.js';
+import { P as PinModel, a as PinController } from './model-f679c493.js';
+import { p as point } from './bundle.esm-ce2c7ad3.js';
+import { b as uuid } from './browser.esm-1ddb69c9.js';
+import { t as translatePointToRelative } from './utils-c714e2f7.js';
+import { l as labelPinCursor, p as pinCursor } from './cursors-98b7d89d.js';
+import { g as getMouseClientPosition } from './dom-5b164305.js';
+import { E as ElementRectObserver } from './elementRectObserver-39cf7b95.js';
+import { E as EntityType } from './entities-ce81dd7f.js';
+import { g as getMarkupBoundingClientRect } from './dom-be140992.js';
+import './utils-f11bd6f7.js';
+
+class PinsInteractionHandler {
+  constructor(controller) {
+    this.rectObserver = new ElementRectObserver();
+    this.droppableSurfaces = [
+      EntityType.PRECISE_SURFACE,
+      EntityType.IMPRECISE_SURFACE,
+      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 = 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 = point.distance(point.create(pointerDown.clientX, pointerUp.clientY), point.create(pointerUp.clientX, pointerUp.clientY));
+        if (distanceBetweenStartAndEndPoint <= 2 && pointerDown.buttons !== 2) {
+          if (this.controller.getToolMode() === 'edit') {
+            const pt = 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 = 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 : 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 pinCursor;
+      case 'pin-label':
+        return labelPinCursor;
+    }
+  }
+  addCursor(cursor) {
+    this.clearCursor();
+    this.cursor = this.ifInitialized(({ api }) => api.addCursor(cursor));
+  }
+  async isDroppableSurface(event) {
+    var _a;
+    const pt = 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) {
+    registerInstance(this, hostRef);
+    /**
+     * The model that contains the entities and outcomes from performing pin annotations
+     */
+    this.pinModel = new 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 (h(Host, null, h("vertex-viewer-dom-renderer", { viewer: this.viewer, drawMode: "2d" }, this.pins.map((pin) => {
+      return (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 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 = getMarkupBoundingClientRect(this.hostEl);
+    this.elementBounds = rect;
+  }
+  get hostEl() { return getElement(this); }
+  static get watchers() { return {
+    "mode": ["watchModeChange"],
+    "tool": ["watchTypeChange"],
+    "viewer": ["handleViewerChanged"]
+  }; }
+};
+ViewerPinTool.style = viewerPinToolCss;
+
+export { ViewerPinTool as vertex_viewer_pin_tool };