@vertexvis/viewer 0.12.0 → 0.13.0-canary.0

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

@@ -0,0 +1,170 @@
+/**!
+ * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e100709a.js');
+const bundle_esm = require('./bundle.esm-dc0a8361.js');
+require('./mapper-f6e6cafe.js');
+require('./grpc-web-client.umd-60a79aae.js');
+require('./streamAttributes-d6236448.js');
+const overlays = require('./overlays-8a582edf.js');
+require('./_commonjsHelpers-537d719a.js');
+require('./browser.esm-31b03292.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) {
+    index.registerInstance(this, hostRef);
+    /**
+     * A point that specifies the starting point of the line.
+     */
+    this.start = bundle_esm.point.create();
+    /**
+     * A point that specifies the ending point of the line.
+     */
+    this.end = bundle_esm.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 = bundle_esm.angle.fromPoints(this.start, this.end);
+    const lineFillEndCaps = getEndCapPoints(this.start, this.end, angle, this.capLength);
+    const lineStrokeEndCaps = getEndCapPoints(this.start, this.end, angle, this.capLength + 1);
+    return (index.h("svg", null, index.h("g", { class: "line-stroke", "pointer-events": this.pointerEvents }, index.h("line", { class: "line", x1: this.start.x, y1: this.start.y, x2: this.end.x, y2: this.end.y }), index.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 }), index.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 })), index.h("g", { class: "line-fill", "pointer-events": this.pointerEvents }, index.h("line", { class: "line", x1: this.start.x, y1: this.start.y, x2: this.end.x, y2: this.end.y }), index.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 }), index.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 = bundle_esm.point.add(pt, bundle_esm.point.polar(length / 2, perpAngle));
+  const end = bundle_esm.point.add(pt, bundle_esm.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 (index.h(LineOverlayView, { overlay: overlay, viewport: viewport, camera: camera }));
+  }
+  else {
+    return (index.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 (index.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 (index.h(index.Fragment, null,
+    index.h("vertex-viewer-measurement-line", { class: "measurement-line distance-vector-x", start: xs, end: xe }),
+    index.h("vertex-viewer-measurement-line", { class: "measurement-line distance-vector-y", start: ys, end: ye }),
+    index.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) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The model that contains the overlays to present.
+     */
+    this.measurementOverlays = new overlays.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 (index.h(index.Host, null, this.overlays.map((overlay) => {
+      if (this.camera != null && this.viewer != null) {
+        return (index.h(MeasurementOverlayView, { overlay: overlay, viewport: this.viewer.viewport, camera: this.camera }));
+      }
+    })));
+  }
+  static get watchers() { return {
+    "measurementOverlays": ["handleMeasurementOverlaysChanged"],
+    "viewer": ["handleViewerChanged"]
+  }; }
+};
+ViewerMeasurementOverlays.style = viewerMeasurementOverlaysCss;
+
+exports.vertex_viewer_measurement_line = ViewerMeasurementLine;
+exports.vertex_viewer_measurement_overlays = ViewerMeasurementOverlays;

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

@@ -5,17 +5,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cc65325e.js');
-const model = require('./model-18ef3363.js');
+const index = require('./index-e100709a.js');
+const mapper = require('./mapper-f6e6cafe.js');
 const grpcWebClient_umd = require('./grpc-web-client.umd-60a79aae.js');
-const config = require('./config-acd7cea9.js');
-const controller = require('./controller-8cbcdd8d.js');
+const config = require('./config-90ee43d5.js');
+const entities = require('./entities-aa59890e.js');
+const streamAttributes = require('./streamAttributes-d6236448.js');
+const model = require('./model-4ec0c36e.js');
+const overlays = require('./overlays-8a582edf.js');
 const bundle_esm = require('./bundle.esm-dc0a8361.js');
-require('./cursors-399a9648.js');
-require('./streamAttributes-9d6226ac.js');
+const cursors = require('./cursors-ad2fd395.js');
 const dom = require('./dom-dd265f48.js');
-require('./browser.esm-31b03292.js');
 require('./_commonjsHelpers-537d719a.js');
+require('./browser.esm-31b03292.js');
 
 // package: vertexvis.protobuf.sceneview.v1
 // file: sceneview/protos/scene_view_api.proto
@@ -34,8 +36,8 @@ SceneViewAPI.UpdateModelEntities = {
   service: SceneViewAPI,
   requestStream: false,
   responseStream: false,
-  requestType: model.scene_view_api_pb.UpdateModelEntitiesRequest,
-  responseType: model.scene_view_api_pb.UpdateModelEntitiesResponse
+  requestType: mapper.scene_view_api_pb.UpdateModelEntitiesRequest,
+  responseType: mapper.scene_view_api_pb.UpdateModelEntitiesResponse
 };
 
 SceneViewAPI.Measure = {
@@ -43,8 +45,8 @@ SceneViewAPI.Measure = {
   service: SceneViewAPI,
   requestStream: false,
   responseStream: false,
-  requestType: model.scene_view_api_pb.MeasureRequest,
-  responseType: model.scene_view_api_pb.MeasureResponse
+  requestType: mapper.scene_view_api_pb.MeasureRequest,
+  responseType: mapper.scene_view_api_pb.MeasureResponse
 };
 
 function SceneViewAPIClient(serviceHost, options) {
@@ -116,59 +118,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(cursors.measurementWithArrowCursor);
+      }
+      else {
+        this.clearCursor();
+      }
+    };
     this.handlePointerDown = (event) => {
-      this.ifNoInteraction(event, () => {
-        this.ifInitialized(async ({ element, api }) => {
-          const pt = dom.getMouseClientPosition(event, element.getBoundingClientRect());
-          const [hit] = await api.hitItems(pt);
-          if (hit != null) {
-            this.controller.addEntity(model.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 = dom.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 = dom.getMouseClientPosition(event, this.elementRect);
+      const [hit] = await api.hitItems(pt);
+      if (hit != null) {
+        this.controller.addEntity(entities.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 = bundle_esm.point.create(event.clientX, event.clientY);
     let didInteract = false;
-    function handleMouseMove(event) {
+    const handleMouseMove = (event) => {
       const pos = bundle_esm.point.create(event.clientX, event.clientY);
       const dis = bundle_esm.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}";
@@ -176,42 +241,86 @@ const viewerMeasurementPreciseCss = ":host{display:block;position:absolute;top:0
 let ViewerMeasurementPrecise = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * The model that contains the entities and outcomes from performing precise
+     * measurements.
+     */
     this.measurementModel = new model.MeasurementModel();
+    /**
+     * The manager that is responsible for measurement overlays to present by this
+     * component.
+     */
+    this.measurementOverlays = new overlays.MeasurementOverlayManager();
+    /**
+     * @internal
+     *
+     * An internal property that can be used to opt-in to performing measurements
+     * on other types of entities.
+     */
+    this.measurableEntityTypes = [streamAttributes.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 index.h(index.Host, null);
+    return (index.h(index.Host, null, index.h("vertex-viewer-measurement-overlays", { viewer: this.viewer, measurementOverlays: this.measurementOverlays })));
   }
   setupController() {
     var _a;
     const config$1 = config.parseConfig(this.configEnv, this.config);
     const client = new SceneViewAPIClient_1(config$1.network.sceneViewHost);
-    this.measurementController = new controller.MeasurementController(this.measurementModel, client, () => { var _a; return (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.token; }, (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.deviceId);
+    this.measurementController = new entities.MeasurementController(this.measurementModel, client, () => { var _a; return (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.token; }, (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.deviceId);
   }
   clearInteractionHandler() {
     var _a;
@@ -223,24 +332,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/cjs/vertex-viewer-measurement-tool.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cc65325e.js');
+const index = require('./index-e100709a.js');
 const utils = require('./utils-235cd490.js');
 const templates = require('./templates-e57b3741.js');
-require('./streamAttributes-9d6226ac.js');
+require('./streamAttributes-d6236448.js');
 const measurement = require('./measurement-aba1e0e8.js');
 require('./bundle.esm-dc0a8361.js');
 require('./browser.esm-31b03292.js');

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

@@ -5,14 +5,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cc65325e.js');
+const index = require('./index-e100709a.js');
 const utils = require('./utils-235cd490.js');
+require('./mapper-f6e6cafe.js');
+require('./grpc-web-client.umd-60a79aae.js');
+require('./streamAttributes-d6236448.js');
+const model = require('./model-4ec0c36e.js');
+const results = require('./results-bc325974.js');
 const templates = require('./templates-e57b3741.js');
-require('./streamAttributes-9d6226ac.js');
 const measurement = require('./measurement-aba1e0e8.js');
 require('./bundle.esm-dc0a8361.js');
-require('./browser.esm-31b03292.js');
 require('./_commonjsHelpers-537d719a.js');
+require('./browser.esm-31b03292.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}";
 
@@ -43,6 +47,17 @@ let ViewerMeasurements = class {
      * value of 0 disables snapping.
      */
     this.snapDistance = utils.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 model.MeasurementModel();
   }
   /**
    * Adds a new measurement as a child to this component. A new measurement
@@ -111,9 +126,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: [results.makeMinimumDistanceResult(m.start, m.end)],
+          });
+        }
+      }
+      else {
+        m.mode = '';
+        m.showAxisReferenceLines = false;
+      }
     });
   }
   /**

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

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cc65325e.js');
+const index = require('./index-e100709a.js');
 const bundle_esm = require('./bundle.esm-dc0a8361.js');
-const stencil = require('./stencil-bd453a38.js');
-const streamAttributes = require('./streamAttributes-9d6226ac.js');
+const stencil = require('./stencil-a664cd10.js');
+const streamAttributes = require('./streamAttributes-d6236448.js');
 const index$1 = require('./index-3bc6bac0.js');
 require('./browser.esm-31b03292.js');
 require('./_commonjsHelpers-537d719a.js');
@@ -94,7 +94,7 @@ const ViewCubeShadow = ({ length, }) => {
     index.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) {