@vertexvis/viewer 0.12.0 → 0.13.0-canary.0

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

@@ -0,0 +1,165 @@
+/**!
+ * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
+ */
+import { r as registerInstance, h, F as Fragment, H as Host } from './index-10c1495a.js';
+import { p as point, i as angle } from './bundle.esm-d899b2d5.js';
+import './mapper-4b815e31.js';
+import './grpc-web-client.umd-5982b7b0.js';
+import './streamAttributes-d623bb60.js';
+import { M as MeasurementOverlayManager } from './overlays-dbe5d652.js';
+import './_commonjsHelpers-9943807e.js';
+import './browser.esm-59e914f6.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)}";
+
+let ViewerMeasurementLine = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * A point that specifies the starting point of the line.
+     */
+    this.start = point.create();
+    /**
+     * A point that specifies the ending point of the line.
+     */
+    this.end = point.create();
+    /**
+     * A length of the line cap. The line cap is a line at each end of a line.
+     */
+    this.capLength = 0;
+    /**
+     * The type of [SVG pointer
+     * events](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events)
+     * that the line should respond to.
+     */
+    this.pointerEvents = 'none';
+  }
+  /**
+   * @ignore
+   */
+  render() {
+    const angle$1 = angle.fromPoints(this.start, this.end);
+    const lineFillEndCaps = getEndCapPoints(this.start, this.end, angle$1, this.capLength);
+    const lineStrokeEndCaps = getEndCapPoints(this.start, this.end, angle$1, this.capLength + 1);
+    return (h("svg", null, h("g", { class: "line-stroke", "pointer-events": this.pointerEvents }, h("line", { class: "line", x1: this.start.x, y1: this.start.y, x2: this.end.x, y2: this.end.y }), h("line", { class: "start-cap", x1: lineStrokeEndCaps.startEndCap.start.x, y1: lineStrokeEndCaps.startEndCap.start.y, x2: lineStrokeEndCaps.startEndCap.end.x, y2: lineStrokeEndCaps.startEndCap.end.y }), h("line", { class: "end-cap", x1: lineStrokeEndCaps.endEndCap.start.x, y1: lineStrokeEndCaps.endEndCap.start.y, x2: lineStrokeEndCaps.endEndCap.end.x, y2: lineStrokeEndCaps.endEndCap.end.y })), h("g", { class: "line-fill", "pointer-events": this.pointerEvents }, h("line", { class: "line", x1: this.start.x, y1: this.start.y, x2: this.end.x, y2: this.end.y }), h("line", { class: "start-cap", x1: lineFillEndCaps.startEndCap.start.x, y1: lineFillEndCaps.startEndCap.start.y, x2: lineFillEndCaps.startEndCap.end.x, y2: lineFillEndCaps.startEndCap.end.y }), h("line", { class: "end-cap", x1: lineFillEndCaps.endEndCap.start.x, y1: lineFillEndCaps.endEndCap.start.y, x2: lineFillEndCaps.endEndCap.end.x, y2: lineFillEndCaps.endEndCap.end.y }))));
+  }
+};
+function getEndCapPoints(start, end, angle, length) {
+  return {
+    startEndCap: getPerpendicularLine(start, angle, length),
+    endEndCap: getPerpendicularLine(end, angle, length),
+  };
+}
+function getPerpendicularLine(pt, angle, length) {
+  const perpAngle = angle + Math.PI / 2;
+  const start = point.add(pt, point.polar(length / 2, perpAngle));
+  const end = point.add(pt, point.polar(length / 2, perpAngle + Math.PI));
+  return { start, end };
+}
+ViewerMeasurementLine.style = viewerMeasurementLineCss;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const MeasurementOverlayView = ({ overlay, viewport, camera }) => {
+  if (overlay.type === 'line') {
+    return (h(LineOverlayView, { overlay: overlay, viewport: viewport, camera: camera }));
+  }
+  else {
+    return (h(DistanceVectorOverlayView, { overlay: overlay, viewport: viewport, camera: camera }));
+  }
+};
+const LineOverlayView = ({ overlay: { start, end }, camera, viewport }) => {
+  const m = camera.projectionViewMatrix;
+  const sw = viewport.transformWorldToViewport(start, m);
+  const ew = viewport.transformWorldToViewport(end, m);
+  return (h("vertex-viewer-measurement-line", { class: "measurement-line", start: sw, end: ew }));
+};
+const DistanceVectorOverlayView = ({ overlay: { x, y, z }, camera, viewport }) => {
+  const m = camera.projectionViewMatrix;
+  const xs = viewport.transformWorldToViewport(x.start, m);
+  const xe = viewport.transformWorldToViewport(x.end, m);
+  const ys = viewport.transformWorldToViewport(y.start, m);
+  const ye = viewport.transformWorldToViewport(y.end, m);
+  const zs = viewport.transformWorldToViewport(z.start, m);
+  const ze = viewport.transformWorldToViewport(z.end, m);
+  return (h(Fragment, null,
+    h("vertex-viewer-measurement-line", { class: "measurement-line distance-vector-x", start: xs, end: xe }),
+    h("vertex-viewer-measurement-line", { class: "measurement-line distance-vector-y", start: ys, end: ye }),
+    h("vertex-viewer-measurement-line", { class: "measurement-line distance-vector-z", start: zs, end: ze })));
+};
+
+const viewerMeasurementOverlaysCss = ":host{display:block;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;--viewer-measurement-overlays-x-axis-color:var(--x-axis-color);--viewer-measurement-overlays-y-axis-color:var(--y-axis-color);--viewer-measurement-overlays-z-axis-color:var(--z-axis-color)}.measurement-line{position:absolute;width:100%;height:100%}.measurement-line.distance-vector-x{--viewer-measurement-line-fill:var(\n    --viewer-measurement-overlays-x-axis-color\n  )}.measurement-line.distance-vector-y{--viewer-measurement-line-fill:var(\n    --viewer-measurement-overlays-y-axis-color\n  )}.measurement-line.distance-vector-z{--viewer-measurement-line-fill:var(\n    --viewer-measurement-overlays-z-axis-color\n  )}";
+
+let ViewerMeasurementOverlays = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * The model that contains the overlays to present.
+     */
+    this.measurementOverlays = new MeasurementOverlayManager();
+    this.overlays = [];
+    this.updateCamera = () => {
+      var _a, _b;
+      this.camera = (_b = (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.frame) === null || _b === void 0 ? void 0 : _b.scene.camera;
+    };
+  }
+  /**
+   * @ignore
+   */
+  handleMeasurementOverlaysChanged() {
+    this.removeModelListeners();
+    this.addModelListeners();
+    this.updateOverlays();
+  }
+  /**
+   * @ignore
+   */
+  handleViewerChanged(newViewer, oldViewer) {
+    this.removeViewerListeners(oldViewer);
+    this.addViewerListeners();
+    this.updateCamera();
+  }
+  /**
+   * @ignore
+   */
+  componentWillLoad() {
+    this.addModelListeners();
+    this.addViewerListeners();
+    this.updateOverlays();
+    this.updateCamera();
+  }
+  addModelListeners() {
+    this.onOverlaysChangedListener = this.measurementOverlays.onOverlaysChanged(() => this.updateOverlays());
+  }
+  removeModelListeners() {
+    var _a;
+    (_a = this.onOverlaysChangedListener) === null || _a === void 0 ? void 0 : _a.dispose();
+    this.onOverlaysChangedListener = undefined;
+  }
+  addViewerListeners() {
+    var _a;
+    (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.addEventListener('frameReceived', this.updateCamera);
+  }
+  removeViewerListeners(viewer) {
+    viewer === null || viewer === void 0 ? void 0 : viewer.removeEventListener('frameReceived', this.updateCamera);
+  }
+  updateOverlays() {
+    this.overlays = this.measurementOverlays.getOverlays();
+  }
+  /**
+   * @ignore
+   */
+  render() {
+    return (h(Host, null, this.overlays.map((overlay) => {
+      if (this.camera != null && this.viewer != null) {
+        return (h(MeasurementOverlayView, { overlay: overlay, viewport: this.viewer.viewport, camera: this.camera }));
+      }
+    })));
+  }
+  static get watchers() { return {
+    "measurementOverlays": ["handleMeasurementOverlaysChanged"],
+    "viewer": ["handleViewerChanged"]
+  }; }
+};
+ViewerMeasurementOverlays.style = viewerMeasurementOverlaysCss;
+
+export { ViewerMeasurementLine as vertex_viewer_measurement_line, ViewerMeasurementOverlays as vertex_viewer_measurement_overlays };

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

@@ -1,17 +1,19 @@
 /**!
  * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
  */
-import { r as registerInstance, h, H as Host } from './index-f0053642.js';
-import { s as scene_view_api_pb, M as MeasurementEntity, a as MeasurementModel } from './model-f711a825.js';
+import { r as registerInstance, h, H as Host } from './index-10c1495a.js';
+import { s as scene_view_api_pb } from './mapper-4b815e31.js';
 import { g as grpcWebClient_umd } from './grpc-web-client.umd-5982b7b0.js';
-import { p as parseConfig } from './config-a200c227.js';
-import { M as MeasurementController } from './controller-a756cf9c.js';
-import { p as point } from './bundle.esm-8f14ac60.js';
-import './cursors-5157d29d.js';
-import './streamAttributes-7aa486b2.js';
-import { g as getMouseClientPosition } from './dom-2d6a1e1e.js';
-import './browser.esm-e6827921.js';
+import { p as parseConfig } from './config-604c644e.js';
+import { a as MeasurementEntity, M as MeasurementController } from './entities-759d97cd.js';
+import { E as EntityType } from './streamAttributes-d623bb60.js';
+import { M as MeasurementModel } from './model-e5a4f00f.js';
+import { M as MeasurementOverlayManager } from './overlays-dbe5d652.js';
+import { p as point } from './bundle.esm-d899b2d5.js';
+import { a as measurementWithArrowCursor } from './cursors-a7ec4adb.js';
+import { g as getMouseClientPosition } from './dom-780d25be.js';
 import './_commonjsHelpers-9943807e.js';
+import './browser.esm-59e914f6.js';
 
 // package: vertexvis.protobuf.sceneview.v1
 // file: sceneview/protos/scene_view_api.proto
@@ -112,59 +114,122 @@ SceneViewAPIClient.prototype.measure = function measure(requestMessage, metadata
 
 var SceneViewAPIClient_1 = SceneViewAPIClient;
 
-class PreciseMeasurementInteractionHandler {
-  constructor(controller) {
+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.handlePointerMove = async (event) => {
+      if (await this.isMeasurableEntityUnderPointer(event)) {
+        this.clearCursor();
+        this.addCursor(measurementWithArrowCursor);
+      }
+      else {
+        this.clearCursor();
+      }
+    };
     this.handlePointerDown = (event) => {
-      this.ifNoInteraction(event, () => {
-        this.ifInitialized(async ({ element, api }) => {
-          const pt = getMouseClientPosition(event, element.getBoundingClientRect());
-          const [hit] = await api.hitItems(pt);
-          if (hit != null) {
-            this.controller.addEntity(MeasurementEntity.fromHit(hit));
-          }
-          else {
-            this.controller.clearEntities();
-          }
-        });
+      this.ifNoInteraction(event, async () => {
+        if (await this.isMeasurableEntityUnderPointer(event)) {
+          this.measureEntityUnderPointer(event);
+        }
+        else {
+          this.controller.clearEntities();
+        }
       });
     };
     this.controller = controller;
+    this.measurableEntityTypes = measurableEntityTypes;
+  }
+  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);
   }
   dispose() {
+    var _a, _b, _c;
+    this.rectObserver.disconnect();
+    (_a = this.measurementInteraction) === null || _a === void 0 ? void 0 : _a.dispose();
+    this.clearCursor();
+    (_b = this.element) === null || _b === void 0 ? void 0 : _b.removeEventListener('pointermove', this.handlePointerMove);
+    (_c = this.element) === null || _c === void 0 ? void 0 : _c.removeEventListener('pointerdown', this.handlePointerDown);
+    this.element = undefined;
+    this.api = undefined;
+  }
+  addCursor(cursor) {
+    this.cursor = this.ifInitialized(({ api }) => api.addCursor(cursor));
+  }
+  clearCursor() {
     var _a;
-    (_a = this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener('pointerdown', this.handlePointerDown);
+    (_a = this.cursor) === null || _a === void 0 ? void 0 : _a.dispose();
+    this.cursor = undefined;
+  }
+  async isMeasurableEntityUnderPointer(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.measurableEntityTypes.includes(type);
+  }
+  measureEntityUnderPointer(event) {
+    this.ifInitialized(async ({ api }) => {
+      const pt = getMouseClientPosition(event, this.elementRect);
+      const [hit] = await api.hitItems(pt);
+      if (hit != null) {
+        this.controller.addEntity(MeasurementEntity.fromHit(hit));
+      }
+      else {
+        this.controller.clearEntities();
+      }
+    });
+  }
+  ifInitialized(f) {
+    if (this.element != null && this.api != null) {
+      return f({ element: this.element, api: this.api });
+    }
+    else {
+      throw new Error('Measurement interaction handler not initialized.');
+    }
   }
   ifNoInteraction(event, f) {
     const startPos = point.create(event.clientX, event.clientY);
     let didInteract = false;
-    function handleMouseMove(event) {
+    const handleMouseMove = (event) => {
       const pos = point.create(event.clientX, event.clientY);
       const dis = point.distance(startPos, pos);
       didInteract = dis > 2;
-    }
-    function handleMouseUp() {
+    };
+    const handleMouseUp = () => {
       window.removeEventListener('pointermove', handleMouseMove);
       window.removeEventListener('pointerup', handleMouseUp);
       if (!didInteract) {
         f();
       }
-    }
+    };
     window.addEventListener('pointermove', handleMouseMove);
     window.addEventListener('pointerup', handleMouseUp);
   }
-  ifInitialized(f) {
-    if (this.element != null && this.api != null) {
-      return f({ element: this.element, api: this.api });
-    }
-    else {
-      throw new Error('Measurement interaction handler not initialized');
-    }
-  }
 }
 
 const viewerMeasurementPreciseCss = ":host{display:block;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none}";
@@ -172,36 +237,80 @@ const viewerMeasurementPreciseCss = ":host{display:block;position:absolute;top:0
 let ViewerMeasurementPrecise = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /**
+     * The model that contains the entities and outcomes from performing precise
+     * measurements.
+     */
     this.measurementModel = new MeasurementModel();
+    /**
+     * The manager that is responsible for measurement overlays to present by this
+     * component.
+     */
+    this.measurementOverlays = new MeasurementOverlayManager();
+    /**
+     * @internal
+     *
+     * An internal property that can be used to opt-in to performing measurements
+     * on other types of entities.
+     */
+    this.measurableEntityTypes = [EntityType.PRECISE_SURFACE];
+    /**
+     * The environment that will be used to request measurement results.
+     */
     this.configEnv = 'platprod';
-    this.entities = [];
-    this.handleEntitiesChanged = () => {
-      this.updateEntities();
-    };
+    this.overlays = [];
   }
+  /**
+   * @ignore
+   */
   connectedCallback() {
     this.setupInteractionHandler();
   }
+  /**
+   * @ignore
+   */
   componentWillLoad() {
     this.setupController();
-    this.setupInteractionHandler();
     this.setupModelListeners();
+    this.setupInteractionHandler();
   }
+  /**
+   * @ignore
+   */
   disconnectedCallback() {
     this.clearInteractionHandler();
+    this.clearModelListeners();
+  }
+  /**
+   * @ignore
+   */
+  handleMeasurableEntityTypesChanged() {
+    this.setupInteractionHandler();
   }
+  /**
+   * @ignore
+   */
   handleMeasurementControllerChanged() {
     this.setupInteractionHandler();
   }
+  /**
+   * @ignore
+   */
   handleMeasurementModelChanged() {
     this.setupController();
     this.setupModelListeners();
   }
+  /**
+   * @ignore
+   */
   handleViewerChanged() {
     this.setupInteractionHandler();
   }
+  /**
+   * @ignore
+   */
   render() {
-    return h(Host, null);
+    return (h(Host, null, h("vertex-viewer-measurement-overlays", { viewer: this.viewer, measurementOverlays: this.measurementOverlays })));
   }
   setupController() {
     var _a;
@@ -219,24 +328,23 @@ let ViewerMeasurementPrecise = class {
     this.clearInteractionHandler();
     if (this.measurementController != null) {
       this.registeredInteractionHandler =
-        (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.registerInteractionHandler(new PreciseMeasurementInteractionHandler(this.measurementController));
+        (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.registerInteractionHandler(new MeasurementInteractionHandler(this.measurementController, this.measurableEntityTypes));
     }
   }
   clearModelListeners() {
-    var _a;
-    (_a = this.onEntitiesChangedDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-    this.onEntitiesChangedDisposable = undefined;
+    var _a, _b;
+    (_a = this.onEntitiesChangedHandler) === null || _a === void 0 ? void 0 : _a.dispose();
+    this.onEntitiesChangedHandler = undefined;
+    (_b = this.onOverlaysChangedHandler) === null || _b === void 0 ? void 0 : _b.dispose();
+    this.onOverlaysChangedHandler = undefined;
   }
   setupModelListeners() {
-    var _a;
-    this.clearModelListeners();
-    this.onEntitiesChangedDisposable = (_a = this.measurementModel) === null || _a === void 0 ? void 0 : _a.onEntitiesChanged(this.handleEntitiesChanged);
-  }
-  updateEntities() {
-    var _a, _b;
-    this.entities = (_b = (_a = this.measurementModel) === null || _a === void 0 ? void 0 : _a.getEntities()) !== null && _b !== void 0 ? _b : [];
+    this.onOverlaysChangedHandler = this.measurementOverlays.onOverlaysChanged((overlays) => {
+      this.overlays = overlays;
+    });
   }
   static get watchers() { return {
+    "measurableEntityTypes": ["handleMeasurableEntityTypesChanged"],
     "measurementController": ["handleMeasurementControllerChanged"],
     "measurementModel": ["handleMeasurementModelChanged"],
     "viewer": ["handleViewerChanged"]

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

@@ -1,13 +1,13 @@
 /**!
  * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f0053642.js';
-import { M as MEASUREMENT_SNAP_DISTANCE, i as isVertexViewerDistanceMeasurement } from './utils-8070900a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-10c1495a.js';
+import { M as MEASUREMENT_SNAP_DISTANCE, i as isVertexViewerDistanceMeasurement } from './utils-01e4f587.js';
 import { s as stampTemplateWithId } from './templates-022199c1.js';
-import './streamAttributes-7aa486b2.js';
-import { D as DistanceMeasurement } from './measurement-702d6b8c.js';
-import './bundle.esm-8f14ac60.js';
-import './browser.esm-e6827921.js';
+import './streamAttributes-d623bb60.js';
+import { D as DistanceMeasurement } from './measurement-12cdbf5c.js';
+import './bundle.esm-d899b2d5.js';
+import './browser.esm-59e914f6.js';
 import './_commonjsHelpers-9943807e.js';
 
 const viewerMeasurementToolCss = ":host{position:absolute;top:0;bottom:0;left:0;right:0}";

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

@@ -1,14 +1,18 @@
 /**!
  * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f0053642.js';
-import { M as MEASUREMENT_SNAP_DISTANCE, i as isVertexViewerDistanceMeasurement } from './utils-8070900a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-10c1495a.js';
+import { M as MEASUREMENT_SNAP_DISTANCE, i as isVertexViewerDistanceMeasurement } from './utils-01e4f587.js';
+import './mapper-4b815e31.js';
+import './grpc-web-client.umd-5982b7b0.js';
+import './streamAttributes-d623bb60.js';
+import { M as MeasurementModel } from './model-e5a4f00f.js';
+import { m as makeMinimumDistanceResult } from './results-994bdb50.js';
 import { s as stampTemplateWithId } from './templates-022199c1.js';
-import './streamAttributes-7aa486b2.js';
-import { D as DistanceMeasurement } from './measurement-702d6b8c.js';
-import './bundle.esm-8f14ac60.js';
-import './browser.esm-e6827921.js';
+import { D as DistanceMeasurement } from './measurement-12cdbf5c.js';
+import './bundle.esm-d899b2d5.js';
 import './_commonjsHelpers-9943807e.js';
+import './browser.esm-59e914f6.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}";
 
@@ -39,6 +43,17 @@ let ViewerMeasurements = class {
      * value of 0 disables snapping.
      */
     this.snapDistance = MEASUREMENT_SNAP_DISTANCE;
+    /**
+     * Enables the display of axis reference lines between the start and end
+     * point of selected measurements.
+     */
+    this.showAxisReferenceLines = false;
+    /**
+     * The measurement model that will be updated with the selected measurement.
+     * You can pass this to a <vertex-viewer-measurement-details> component to
+     * display measurement outcomes.
+     */
+    this.measurementModel = new MeasurementModel();
   }
   /**
    * Adds a new measurement as a child to this component. A new measurement
@@ -107,9 +122,23 @@ let ViewerMeasurements = class {
    * @ignore
    */
   async handleSelectedMeasurementIdChanged() {
+    this.measurementModel.clearOutcome();
     const measurements = await this.getMeasurementElements();
     measurements.forEach((m) => {
-      m.mode = m.id === this.selectedMeasurementId ? 'edit' : '';
+      if (m.id === this.selectedMeasurementId) {
+        m.mode = 'edit';
+        m.showAxisReferenceLines = this.showAxisReferenceLines;
+        if (m.start != null && m.end != null) {
+          this.measurementModel.setOutcome({
+            isApproximate: true,
+            results: [makeMinimumDistanceResult(m.start, m.end)],
+          });
+        }
+      }
+      else {
+        m.mode = '';
+        m.showAxisReferenceLines = false;
+      }
     });
   }
   /**

package/dist/esm/vertex-viewer-view-cube.entry.js

@@ -1,12 +1,12 @@
 /**!
  * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
  */
-import { h, F as Fragment, r as registerInstance, H as Host } from './index-f0053642.js';
-import { v as vector3, s as quaternion, t as euler } from './bundle.esm-8f14ac60.js';
-import { r as readDOM } from './stencil-7d04d41a.js';
-import { O as Orientation, c as FramePerspectiveCamera, w as StandardView } from './streamAttributes-7aa486b2.js';
+import { h, F as Fragment, r as registerInstance, H as Host } from './index-10c1495a.js';
+import { v as vector3, s as quaternion, t as euler } from './bundle.esm-d899b2d5.js';
+import { r as readDOM } from './stencil-9bf7fb9e.js';
+import { O as Orientation, c as FramePerspectiveCamera, w as StandardView } from './streamAttributes-d623bb60.js';
 import { c as classnames } from './index-455380d0.js';
-import './browser.esm-e6827921.js';
+import './browser.esm-59e914f6.js';
 import './_commonjsHelpers-9943807e.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -90,7 +90,7 @@ const ViewCubeShadow = ({ length, }) => {
     h("div", { class: "cube-shadow-face" })));
 };
 
-const viewerViewCubeCss = ":host{--viewer-view-cube-side-background:var(--white);--viewer-view-cube-side-background-hover:var(--blue-500);--viewer-view-cube-side-background-hover-opacity:0.25;--viewer-view-cube-side-border:1.5px solid var(--neutral-500);--viewer-view-cube-edge-length:12px;--viewer-view-cube-opacity:0.8;display:block;color:var(--neutral-700);width:80px;height:80px;margin:20px;position:relative;display:flex;align-items:center;justify-content:center;user-select:none}.renderer{position:unset;width:100%;height:100%;overflow:visible}.reference-point{width:5px;height:5px;border-radius:50%;background-color:black}.triad{pointer-events:none}.triad-axis{width:100%;height:1.5px;outline:1px solid transparent;transform:translateX(50%)}.triad-axis-x{background-color:#ea3324}.triad-axis-y{background-color:#4faf32}.triad-axis-z{background-color:#0000ff}.triad-label{font-family:Arial, Helvetica, sans-serif;font-size:0.6875rem}.triad-label-x{color:#ea3324}.triad-label-y{color:#4faf32}.triad-label-z{color:#0000ff}.cube{pointer-events:initial}.cube:hover .cube-side-face{opacity:1}.cube-side{backface-visibility:hidden;-webkit-backface-visibility:hidden}.cube-side-face{box-sizing:border-box;font-size:0.875rem;text-transform:uppercase;width:100%;height:100%;background-color:var(--viewer-view-cube-side-background);border:var(--viewer-view-cube-side-border);display:flex;align-items:center;justify-content:center;outline:1px solid transparent;opacity:var(--viewer-view-cube-opacity);transition:opacity 0.2s ease-in-out}.cube-side-face::before{content:'';position:absolute;left:calc(var(--viewer-view-cube-edge-length) - 4px);right:calc(var(--viewer-view-cube-edge-length) - 4px);top:calc(var(--viewer-view-cube-edge-length) - 4px);bottom:calc(var(--viewer-view-cube-edge-length) - 4px)}.cube-corner,.cube-edge{position:relative}.cube-corner-face,.cube-edge-face{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}.cube-edge-face.top{top:0;left:var(--viewer-view-cube-edge-length);right:var(--viewer-view-cube-edge-length);height:var(--viewer-view-cube-edge-length)}.cube-edge-face.bottom{bottom:0;left:var(--viewer-view-cube-edge-length);right:var(--viewer-view-cube-edge-length);height:var(--viewer-view-cube-edge-length)}.cube-edge-face.left{left:0;top:var(--viewer-view-cube-edge-length);bottom:var(--viewer-view-cube-edge-length);width:var(--viewer-view-cube-edge-length)}.cube-edge-face.right{right:0;top:var(--viewer-view-cube-edge-length);bottom:var(--viewer-view-cube-edge-length);width:var(--viewer-view-cube-edge-length)}.cube-corner-face{width:var(--viewer-view-cube-edge-length);height:var(--viewer-view-cube-edge-length)}.cube-corner-face.top-left{top:0;left:0}.cube-corner-face.top-right{top:0;right:0}.cube-corner-face.bottom-right{bottom:0;right:0}.cube-corner-face.bottom-left{bottom:0;left:0}.cube-shadow{backface-visibility:hidden;-webkit-backface-visibility:hidden}.cube-shadow-face{position:absolute;left:4px;right:4px;top:4px;bottom:4px;background-color:black;opacity:0.12;filter:blur(4px)}.cube-corner .cube-corner-face,.cube-edge .cube-edge-face,.cube-side .cube-side-face::before{background:var(--viewer-view-cube-side-background-hover);opacity:0}.cube-corner:hover .cube-corner-face,.cube-edge:hover .cube-edge-face,.cube-side:hover .cube-side-face::before{opacity:var(--viewer-view-cube-side-background-hover-opacity)}.cube-corner.disabled,.cube-edge.disabled,.cube-side.disabled{pointer-events:none}";
+const viewerViewCubeCss = ":host{--viewer-view-cube-side-background:var(--white);--viewer-view-cube-side-background-hover:var(--blue-500);--viewer-view-cube-side-background-hover-opacity:0.25;--viewer-view-cube-side-border:1.5px solid var(--neutral-500);--viewer-view-cube-edge-length:12px;--viewer-view-cube-opacity:0.8;--viewer-view-cube-triad-x-axis-color:var(--x-axis-color);--viewer-view-cube-triad-y-axis-color:var(--y-axis-color);--viewer-view-cube-triad-z-axis-color:var(--z-axis-color);display:block;color:var(--neutral-700);width:80px;height:80px;margin:20px;position:relative;display:flex;align-items:center;justify-content:center;user-select:none}.renderer{position:unset;width:100%;height:100%;overflow:visible}.reference-point{width:5px;height:5px;border-radius:50%;background-color:black}.triad{pointer-events:none}.triad-axis{width:100%;height:1.5px;outline:1px solid transparent;transform:translateX(50%)}.triad-axis-x{background-color:#ea3324}.triad-axis-y{background-color:#4faf32}.triad-axis-z{background-color:#0000ff}.triad-label{font-family:Arial, Helvetica, sans-serif;font-size:0.6875rem}.triad-label-x{color:var(--viewer-view-cube-triad-x-axis-color)}.triad-label-y{color:var(--viewer-view-cube-triad-y-axis-color)}.triad-label-z{color:var(--viewer-view-cube-triad-z-axis-color)}.cube{pointer-events:initial}.cube:hover .cube-side-face{opacity:1}.cube-side{backface-visibility:hidden;-webkit-backface-visibility:hidden}.cube-side-face{box-sizing:border-box;font-size:0.875rem;text-transform:uppercase;width:100%;height:100%;background-color:var(--viewer-view-cube-side-background);border:var(--viewer-view-cube-side-border);display:flex;align-items:center;justify-content:center;outline:1px solid transparent;opacity:var(--viewer-view-cube-opacity);transition:opacity 0.2s ease-in-out}.cube-side-face::before{content:'';position:absolute;left:calc(var(--viewer-view-cube-edge-length) - 4px);right:calc(var(--viewer-view-cube-edge-length) - 4px);top:calc(var(--viewer-view-cube-edge-length) - 4px);bottom:calc(var(--viewer-view-cube-edge-length) - 4px)}.cube-corner,.cube-edge{position:relative}.cube-corner-face,.cube-edge-face{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}.cube-edge-face.top{top:0;left:var(--viewer-view-cube-edge-length);right:var(--viewer-view-cube-edge-length);height:var(--viewer-view-cube-edge-length)}.cube-edge-face.bottom{bottom:0;left:var(--viewer-view-cube-edge-length);right:var(--viewer-view-cube-edge-length);height:var(--viewer-view-cube-edge-length)}.cube-edge-face.left{left:0;top:var(--viewer-view-cube-edge-length);bottom:var(--viewer-view-cube-edge-length);width:var(--viewer-view-cube-edge-length)}.cube-edge-face.right{right:0;top:var(--viewer-view-cube-edge-length);bottom:var(--viewer-view-cube-edge-length);width:var(--viewer-view-cube-edge-length)}.cube-corner-face{width:var(--viewer-view-cube-edge-length);height:var(--viewer-view-cube-edge-length)}.cube-corner-face.top-left{top:0;left:0}.cube-corner-face.top-right{top:0;right:0}.cube-corner-face.bottom-right{bottom:0;right:0}.cube-corner-face.bottom-left{bottom:0;left:0}.cube-shadow{backface-visibility:hidden;-webkit-backface-visibility:hidden}.cube-shadow-face{position:absolute;left:4px;right:4px;top:4px;bottom:4px;background-color:black;opacity:0.12;filter:blur(4px)}.cube-corner .cube-corner-face,.cube-edge .cube-edge-face,.cube-side .cube-side-face::before{background:var(--viewer-view-cube-side-background-hover);opacity:0}.cube-corner:hover .cube-corner-face,.cube-edge:hover .cube-edge-face,.cube-side:hover .cube-side-face::before{opacity:var(--viewer-view-cube-side-background-hover-opacity)}.cube-corner.disabled,.cube-edge.disabled,.cube-side.disabled{pointer-events:none}";
 
 let ViewerViewCube = class {
   constructor(hostRef) {