@vertexvis/viewer 0.13.2-canary.9 → 0.14.0

package/dist/cjs/vertex-viewer-markup.cjs.entry.js

@@ -5,12 +5,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
-const bundle_esm = require('./bundle.esm-618a5fe9.js');
+const index = require('./index-4138aa2c.js');
+const bundle_esm = require('./bundle.esm-22b6f2d6.js');
 const templates = require('./templates-e57b3741.js');
-const markup = require('./markup-7f7de5f2.js');
-const utils = require('./utils-6397efca.js');
-require('./browser.esm-075810bf.js');
+const markup = require('./markup-f7e61d16.js');
+const utils = require('./utils-b157b0af.js');
+require('./browser.esm-0bcdc581.js');
 
 const viewerMarkupCss = ":host{display:block;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}";
 

package/dist/cjs/vertex-viewer-measurement-details.cjs.entry.js

@@ -5,12 +5,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
-const streamAttributes = require('./streamAttributes-81eb52f2.js');
-const bundle_esm = require('./bundle.esm-618a5fe9.js');
-const index$1 = require('./index-3bc6bac0.js');
-require('./browser.esm-075810bf.js');
-require('./_commonjsHelpers-537d719a.js');
+const index = require('./index-4138aa2c.js');
+const streamAttributes = require('./streamAttributes-c343bdc8.js');
+require('./entities-9eb7e608.js');
+const bundle_esm = require('./bundle.esm-22b6f2d6.js');
+const index$1 = require('./index-b9d13137.js');
+require('./browser.esm-0bcdc581.js');
+require('./_commonjsHelpers-dcc4cf71.js');
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -127,7 +128,7 @@ const MeasurementDetailsEntry = (_a, children) => {
 const MinimumDistanceResultEntry = ({ result, formatter, overlays, onShowOverlay, onHideOverlay }) => {
   const v = bundle_esm.vector3.subtract(result.point1, result.point2);
   return (index.h(index.Fragment, null,
-    index.h(MeasurementDetailsEntry, { label: "Min Dist", onMouseEnter: () => onShowOverlay(overlays === null || overlays === void 0 ? void 0 : overlays.addLineFromResult(result)), onMouseLeave: onHideOverlay }, formatter(result.distance)),
+    index.h(MeasurementDetailsEntry, { label: "Dist", onMouseEnter: () => onShowOverlay(overlays === null || overlays === void 0 ? void 0 : overlays.addLineFromResult(result)), onMouseLeave: onHideOverlay }, formatter(result.distance)),
     index.h(MeasurementDetailsEntry, { label: "X", onMouseEnter: () => onShowOverlay(overlays === null || overlays === void 0 ? void 0 : overlays.addDistanceVectorFromResult(result)), onMouseLeave: onHideOverlay }, formatter(v.x)),
     index.h(MeasurementDetailsEntry, { label: "Y", onMouseEnter: () => onShowOverlay(overlays === null || overlays === void 0 ? void 0 : overlays.addDistanceVectorFromResult(result)), onMouseLeave: onHideOverlay }, formatter(v.y)),
     index.h(MeasurementDetailsEntry, { label: "Z", onMouseEnter: () => onShowOverlay(overlays === null || overlays === void 0 ? void 0 : overlays.addDistanceVectorFromResult(result)), onMouseLeave: onHideOverlay }, formatter(v.z))));

package/dist/cjs/vertex-viewer-measurement-distance.cjs.entry.js

@@ -5,22 +5,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
-const bundle_esm = require('./bundle.esm-618a5fe9.js');
+const index = require('./index-4138aa2c.js');
+const bundle_esm = require('./bundle.esm-22b6f2d6.js');
 const constants = require('./constants-be2deb55.js');
-const cursors = require('./cursors-d71f6a74.js');
-const dom = require('./dom-57ef84e9.js');
-require('./mapper-80ee2957.js');
-require('./grpc-web-client.umd-60a79aae.js');
-const streamAttributes = require('./streamAttributes-81eb52f2.js');
-const model = require('./model-55abd9ab.js');
-const overlays = require('./overlays-68e8eff2.js');
-const results = require('./results-e9496869.js');
-const viewport = require('./viewport-54b1389d.js');
-const browser_esm = require('./browser.esm-075810bf.js');
-const utils = require('./utils-463cd52e.js');
-const index$1 = require('./index-3bc6bac0.js');
-require('./_commonjsHelpers-537d719a.js');
+const cursors = require('./cursors-f5d3c9a6.js');
+const dom = require('./dom-8d90bfaf.js');
+require('./mapper-08bbab48.js');
+require('./grpc-web-client.umd-2af20c1b.js');
+const streamAttributes = require('./streamAttributes-c343bdc8.js');
+const model = require('./model-5ca87867.js');
+const overlays = require('./overlays-b0ba69fd.js');
+const results = require('./results-178e89a3.js');
+require('./entities-9eb7e608.js');
+const viewport = require('./viewport-5ca619f7.js');
+const browser_esm = require('./browser.esm-0bcdc581.js');
+const utils = require('./utils-c74b8bf0.js');
+const index$1 = require('./index-b9d13137.js');
+require('./_commonjsHelpers-dcc4cf71.js');
 
 function getMeasurementBoundingClientRect(el) {
   return el.getBoundingClientRect();

package/dist/cjs/vertex-viewer-measurement-line_2.cjs.entry.js

@@ -5,15 +5,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
-const bundle_esm = require('./bundle.esm-618a5fe9.js');
-require('./mapper-80ee2957.js');
-require('./grpc-web-client.umd-60a79aae.js');
-require('./streamAttributes-81eb52f2.js');
-const overlays = require('./overlays-68e8eff2.js');
-const utils = require('./utils-463cd52e.js');
-require('./_commonjsHelpers-537d719a.js');
-require('./browser.esm-075810bf.js');
+const index = require('./index-4138aa2c.js');
+const bundle_esm = require('./bundle.esm-22b6f2d6.js');
+require('./mapper-08bbab48.js');
+require('./grpc-web-client.umd-2af20c1b.js');
+require('./streamAttributes-c343bdc8.js');
+const overlays = require('./overlays-b0ba69fd.js');
+const utils = require('./utils-c74b8bf0.js');
+require('./_commonjsHelpers-dcc4cf71.js');
+require('./browser.esm-0bcdc581.js');
+require('./entities-9eb7e608.js');
 
 const viewerMeasurementLineCss = ":host{display:block;--viewer-measurement-line-stroke:var(--white);--viewer-measurement-line-stroke-opacity:0.75;--viewer-measurement-line-stroke-width:1.25px;--viewer-measurement-line-fill:var(--neutral-900);--viewer-measurement-line-fill-width:2px;--viewer-measurement-line-start-cap-visibility:initial;--viewer-measurement-line-end-cap-visibility:initial}svg{width:100%;height:100%}.line-stroke{stroke-width:calc(\n    var(--viewer-measurement-line-fill-width) +\n      var(--viewer-measurement-line-stroke-width)\n  );stroke:var(--viewer-measurement-line-stroke);opacity:var(--viewer-measurement-line-stroke-opacity)}.line-fill{stroke-width:var(--viewer-measurement-line-fill-width);stroke:var(--viewer-measurement-line-fill)}.start-cap{visibility:var(--viewer-measurement-line-start-cap-visibility)}.end-cap{visibility:var(--viewer-measurement-line-end-cap-visibility)}";
 

package/dist/cjs/vertex-viewer-measurement-precise.cjs.entry.js

@@ -5,19 +5,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
-const mapper = require('./mapper-80ee2957.js');
-const grpcWebClient_umd = require('./grpc-web-client.umd-60a79aae.js');
-const config = require('./config-fb124bac.js');
-const entities = require('./entities-90f1347a.js');
-const streamAttributes = require('./streamAttributes-81eb52f2.js');
-const model = require('./model-55abd9ab.js');
-const overlays = require('./overlays-68e8eff2.js');
-const bundle_esm = require('./bundle.esm-618a5fe9.js');
-const cursors = require('./cursors-d71f6a74.js');
-const dom = require('./dom-57ef84e9.js');
-require('./_commonjsHelpers-537d719a.js');
-require('./browser.esm-075810bf.js');
+const index = require('./index-4138aa2c.js');
+const mapper = require('./mapper-08bbab48.js');
+const grpcWebClient_umd = require('./grpc-web-client.umd-2af20c1b.js');
+const config = require('./config-c63caa4f.js');
+const entities = require('./entities-e71231d8.js');
+require('./streamAttributes-c343bdc8.js');
+const model = require('./model-5ca87867.js');
+const overlays = require('./overlays-b0ba69fd.js');
+const bundle_esm = require('./bundle.esm-22b6f2d6.js');
+const cursors = require('./cursors-f5d3c9a6.js');
+const dom = require('./dom-8d90bfaf.js');
+const elementRectObserver = require('./elementRectObserver-9b28f182.js');
+const entities$1 = require('./entities-9eb7e608.js');
+require('./_commonjsHelpers-dcc4cf71.js');
+require('./browser.esm-0bcdc581.js');
 
 // package: vertexvis.protobuf.sceneview.v1
 // file: sceneview/protos/scene_view_api.proto
@@ -118,28 +120,9 @@ SceneViewAPIClient.prototype.measure = function measure(requestMessage, metadata
 
 var SceneViewAPIClient_1 = SceneViewAPIClient;
 
-class ElementRectObserver {
-  constructor() {
-    this.observer = new ResizeObserver(() => this.measure());
-  }
-  observe(element) {
-    this.element = element;
-    this.observer.observe(element);
-    this.measure();
-  }
-  disconnect() {
-    this.element = undefined;
-    this.observer.disconnect();
-  }
-  measure() {
-    var _a;
-    this.rect = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-  }
-}
-
 class MeasurementInteractionHandler {
   constructor(controller, measurableEntityTypes) {
-    this.rectObserver = new ElementRectObserver();
+    this.rectObserver = new elementRectObserver.ElementRectObserver();
     this.handlePointerMove = async (event) => {
       if (await this.isMeasurableEntityUnderPointer(event)) {
         this.clearCursor();
@@ -258,8 +241,8 @@ let ViewerMeasurementPrecise = class {
      * on other types of entities.
      */
     this.measurableEntityTypes = [
-      streamAttributes.EntityType.PRECISE_SURFACE,
-      streamAttributes.EntityType.IMPRECISE_SURFACE,
+      entities$1.EntityType.PRECISE_SURFACE,
+      entities$1.EntityType.IMPRECISE_SURFACE,
     ];
     /**
      * The environment that will be used to request measurement results.

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

@@ -5,15 +5,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
+const index = require('./index-4138aa2c.js');
 const constants = require('./constants-be2deb55.js');
 const templates = require('./templates-e57b3741.js');
-require('./streamAttributes-81eb52f2.js');
-const measurement = require('./measurement-f1ae9248.js');
-const utils = require('./utils-463cd52e.js');
-require('./bundle.esm-618a5fe9.js');
-require('./browser.esm-075810bf.js');
-require('./_commonjsHelpers-537d719a.js');
+require('./streamAttributes-c343bdc8.js');
+require('./entities-9eb7e608.js');
+const measurement = require('./measurement-3367e9b7.js');
+const utils = require('./utils-c74b8bf0.js');
+require('./bundle.esm-22b6f2d6.js');
+require('./browser.esm-0bcdc581.js');
+require('./_commonjsHelpers-dcc4cf71.js');
 
 const viewerMeasurementToolCss = ":host{position:absolute;top:0;bottom:0;left:0;right:0}";
 

package/dist/cjs/vertex-viewer-measurements.cjs.entry.js

@@ -5,19 +5,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e100709a.js');
+const index = require('./index-4138aa2c.js');
 const constants = require('./constants-be2deb55.js');
-require('./mapper-80ee2957.js');
-require('./grpc-web-client.umd-60a79aae.js');
-require('./streamAttributes-81eb52f2.js');
-const model = require('./model-55abd9ab.js');
-const results = require('./results-e9496869.js');
+require('./mapper-08bbab48.js');
+require('./grpc-web-client.umd-2af20c1b.js');
+require('./streamAttributes-c343bdc8.js');
+const model = require('./model-5ca87867.js');
+const results = require('./results-178e89a3.js');
 const templates = require('./templates-e57b3741.js');
-const measurement = require('./measurement-f1ae9248.js');
-const utils = require('./utils-463cd52e.js');
-require('./_commonjsHelpers-537d719a.js');
-require('./browser.esm-075810bf.js');
-require('./bundle.esm-618a5fe9.js');
+require('./entities-9eb7e608.js');
+const measurement = require('./measurement-3367e9b7.js');
+const utils = require('./utils-c74b8bf0.js');
+require('./_commonjsHelpers-dcc4cf71.js');
+require('./browser.esm-0bcdc581.js');
+require('./bundle.esm-22b6f2d6.js');
 
 const viewerMeasurementsCss = ":host{display:block;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}::slotted(.viewer-measurements__measurement[mode='']){cursor:pointer}::slotted(.viewer-measurements__measurement[mode='edit']){z-index:1}::slotted(.viewer-measurements__measurement[interacting-anchor='start']),::slotted(.viewer-measurements__measurement[interacting-anchor='end']),::slotted(vertex-viewer-measurement-tool[is-measuring]){z-index:2}";
 

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

@@ -0,0 +1,167 @@
+/**!
+ * 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');
+require('./cursors-f5d3c9a6.js');
+require('./mapper-08bbab48.js');
+require('./grpc-web-client.umd-2af20c1b.js');
+require('./streamAttributes-c343bdc8.js');
+require('./entities-9eb7e608.js');
+const viewport = require('./viewport-5ca619f7.js');
+const model = require('./model-a9cfd037.js');
+const utils = require('./utils-78928e4e.js');
+const index$1 = require('./index-b9d13137.js');
+require('./browser.esm-0bcdc581.js');
+require('./_commonjsHelpers-dcc4cf71.js');
+require('./utils-b157b0af.js');
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const PinRenderer = ({ pin, selected, }) => {
+  return (index.h(index.Fragment, null,
+    model.isTextPin(pin) && (index.h("div", { id: "pin-anchor", class: index$1.classnames('pin-anchor', { selected: selected }) })),
+    model.isDefaultPin(pin) && (index.h("vertex-viewer-icon", { name: "pin-fill", size: "lg", class: index$1.classnames('pin', {
+        'pin-selected': selected,
+      }) }))));
+};
+
+function getClosestCenterToPoint(boxPoint, pointToMeasure, dimensions) {
+  const topPoint = {
+    x: boxPoint.x + dimensions.width / 2,
+    y: boxPoint.y,
+  };
+  const bottomPoint = {
+    x: boxPoint.x + dimensions.width / 2,
+    y: boxPoint.y + dimensions.height,
+  };
+  const rightPoint = {
+    x: boxPoint.x + dimensions.width,
+    y: boxPoint.y + dimensions.height / 2,
+  };
+  const leftPoint = {
+    x: boxPoint.x,
+    y: boxPoint.y + dimensions.height / 2,
+  };
+  const candidates = [topPoint, bottomPoint, leftPoint, rightPoint];
+  const distances = candidates.map((candidate) => bundle_esm.point.distance(candidate, pointToMeasure));
+  const candidateIndex = distances.indexOf(Math.min(...distances));
+  return candidates[candidateIndex];
+}
+
+const viewerPinGroupCss = ":host{--viewer-annotations-pin-dot-color:var(--blue-600);--viewer-annotations-pin-color:var(--blue-700);--viewer-annotations-pin-font-size:0.75rem;--viewer-annotations-pin-selected-stroke:var(--white);--viewer-annotations-pin-selected-border:2px solid var(--white);--viewer-annotations-pin-label-border:2px solid var(--black);--viewer-annotations-pin-selected-stroke:var(--white);font-size:var(--viewer-annotations-pin-font-size);position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;pointer-events:none}.pin-anchor{position:absolute;border-radius:50%;transform:translate(-50%, -50%);display:block;width:9px;height:9px;box-sizing:border-box;border:var(--viewer-annotations-pin-label-border);background:var(--viewer-annotations-pin-dot-color);pointer-events:auto;cursor:pointer}.selected{width:13px;height:13px;border:var(--viewer-annotations-pin-selected-border)}.pin{color:var(--viewer-annotations-pin-color);cursor:pointer}.pin-selected{stroke-width:1;stroke:var(--viewer-annotations-pin-selected-stroke)}";
+
+let ViewerPinGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The local matrix of this element.
+     */
+    this.matrix = bundle_esm.matrix4.makeIdentity();
+    /**
+     * Projection view matrix used for computing the position of the pin line
+     */
+    this.projectionViewMatrix = bundle_esm.matrix4.makeIdentity();
+    /**
+     * The model that contains the entities and outcomes from performing pin operations
+     */
+    this.pinModel = new model.PinModel();
+    /**
+     * Whether or not the pin is "selected"
+     */
+    this.selected = false;
+    this.invalidateStateCounter = 0;
+    this.leafNodesRendered = false;
+    this.handleAnchorPointerDown = (event) => {
+      var _a, _b;
+      if (this.elementBounds != null &&
+        ((_a = this.pinController) === null || _a === void 0 ? void 0 : _a.getToolMode()) === 'edit' &&
+        this.pin != null) {
+        (_b = this.pinController) === null || _b === void 0 ? void 0 : _b.setDraggable({
+          id: this.pin.id,
+        });
+      }
+    };
+  }
+  componentDidLoad() {
+    this.setLabelObserver();
+    if (this.pinController == null) {
+      this.pinController = new model.PinController(this.pinModel);
+    }
+    this.leafNodesRendered = true;
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.labelEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('labelChanged', this.invalidateState);
+    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+  }
+  render() {
+    var _a;
+    if (this.pin == null) {
+      throw new Error('Unable to draw pin');
+    }
+    const computed = this.computePinPoints(this.pin);
+    const { pinPoint, labelPoint } = computed;
+    return (index.h(index.Fragment, null, index.h("vertex-viewer-dom-element", { "data-testid": `drawn-pin-${this.pin.id}`, position: this.pin.worldPosition, onPointerDown: (e) => {
+        var _a, _b;
+        if (e.buttons !== 2) {
+          e.stopPropagation();
+        }
+        (_a = this.pinController) === null || _a === void 0 ? void 0 : _a.setSelectedPinId((_b = this.pin) === null || _b === void 0 ? void 0 : _b.id);
+        this.handleAnchorPointerDown(e);
+      } }, this.leafNodesRendered && (index.h(PinRenderer, { pin: this.pin, selected: this.selected }))), model.isTextPin(this.pin) && (index.h(index.Fragment, null, index.h("vertex-viewer-pin-label-line", { id: `pin-label-line-${(_a = this.pin) === null || _a === void 0 ? void 0 : _a.id}`, pinPoint: pinPoint, labelPoint: labelPoint }), index.h("vertex-viewer-pin-label", { pin: this.pin, ref: (el) => {
+        this.labelEl = el;
+      }, elementBounds: this.elementBounds, pinController: this.pinController })))));
+  }
+  invalidateState() {
+    this.invalidateStateCounter = this.invalidateStateCounter + 1;
+  }
+  setLabelObserver() {
+    var _a;
+    const label = (_a = this.labelEl) === null || _a === void 0 ? void 0 : _a.addEventListener('labelChanged', this.invalidateState);
+    if (label != null) {
+      this.resizeObserver = new ResizeObserver(() => this.invalidateState());
+      this.resizeObserver.observe(label);
+    }
+  }
+  computePinPoints(pin) {
+    if (this.elementBounds != null && this.pin != null) {
+      return model.isTextPin(this.pin) && this.pin.label.point != null
+        ? this.computeTextPinPoints(this.pin, this.elementBounds)
+        : this.computeDefaultPinPoints(this.pin, this.elementBounds);
+    }
+    return {
+      pinPoint: pin.worldPosition,
+    };
+  }
+  computeDefaultPinPoints(pin, elementBounds) {
+    return {
+      pinPoint: this.getFromWorldPosition(pin.worldPosition, this.projectionViewMatrix, elementBounds),
+    };
+  }
+  computeTextPinPoints(pin, elementBounds) {
+    var _a, _b;
+    const { pinPoint } = this.computeDefaultPinPoints(pin, elementBounds);
+    const screenPosition = utils.translatePointToScreen(pin.label.point, elementBounds);
+    const label = (_a = this.labelEl) === null || _a === void 0 ? void 0 : _a.querySelector(`#pin-label-${(_b = this.pin) === null || _b === void 0 ? void 0 : _b.id}`);
+    const labelWidth = (label === null || label === void 0 ? void 0 : label.clientWidth) || 0;
+    const labelHeight = (label === null || label === void 0 ? void 0 : label.clientHeight) || 0;
+    return {
+      pinPoint,
+      labelPoint: getClosestCenterToPoint(screenPosition, pinPoint, {
+        width: labelWidth,
+        height: labelHeight,
+      }),
+    };
+  }
+  getFromWorldPosition(pt, projectionViewMatrix, dimensions) {
+    const ndcPt = bundle_esm.vector3.transformMatrix(pt, projectionViewMatrix);
+    return viewport.Viewport.fromDimensions(dimensions).transformVectorToViewport(ndcPt);
+  }
+};
+ViewerPinGroup.style = viewerPinGroupCss;
+
+exports.vertex_viewer_pin_group = ViewerPinGroup;