@vertexvis/viewer 0.12.0 → 0.13.0-canary.0

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

@@ -5,16 +5,147 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cc65325e.js');
-const model = require('./model-18ef3363.js');
+const index = require('./index-e100709a.js');
+require('./mapper-f6e6cafe.js');
 require('./grpc-web-client.umd-60a79aae.js');
-const summary = require('./summary-7bbdb4c9.js');
-const streamAttributes = require('./streamAttributes-9d6226ac.js');
-require('./browser.esm-31b03292.js');
-require('./bundle.esm-dc0a8361.js');
+const streamAttributes = require('./streamAttributes-d6236448.js');
+const model = require('./model-4ec0c36e.js');
+const bundle_esm = require('./bundle.esm-dc0a8361.js');
+const index$1 = require('./index-3bc6bac0.js');
 require('./_commonjsHelpers-537d719a.js');
+require('./browser.esm-31b03292.js');
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign$1 = function() {
+    __assign$1 = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+/**
+ * Source: ftp://ftp.unicode.org/Public/UCD/latest/ucd/SpecialCasing.txt
+ */
+/**
+ * Lower case as a function.
+ */
+function lowerCase(str) {
+    return str.toLowerCase();
+}
+
+// Support camel case ("camelCase" -> "camel Case" and "CAMELCase" -> "CAMEL Case").
+var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
+// Remove all non-word characters.
+var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
+/**
+ * Normalize the string into something other libraries can manipulate easier.
+ */
+function noCase(input, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
+    var result = replace(replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
+    var start = 0;
+    var end = result.length;
+    // Trim the delimiter from around the output string.
+    while (result.charAt(start) === "\0")
+        start++;
+    while (result.charAt(end - 1) === "\0")
+        end--;
+    // Transform each token independently.
+    return result.slice(start, end).split("\0").map(transform).join(delimiter);
+}
+/**
+ * Replace `re` in the input string with the replacement value.
+ */
+function replace(input, re, value) {
+    if (re instanceof RegExp)
+        return input.replace(re, value);
+    return re.reduce(function (input, re) { return input.replace(re, value); }, input);
+}
+
+function dotCase(input, options) {
+    if (options === void 0) { options = {}; }
+    return noCase(input, __assign({ delimiter: "." }, options));
+}
 
-const viewerMeasurementDetailsCss = ":host{display:flex;flex-direction:column;--viewer-measurement-details-x-color:red;--viewer-measurement-details-y-color:var(--green-500);--viewer-measurement-details-z-color:blue}.measurement-details-entry{display:flex;align-items:center}.measurement-details-entry-label{user-select:none;padding-right:0.25rem}.measurement-details-entry-label.x-label{color:var(--viewer-measurement-details-x-color)}.measurement-details-entry-label.y-label{color:var(--viewer-measurement-details-y-color)}.measurement-details-entry-label.z-label{color:var(--viewer-measurement-details-z-color)}.measurement-details-entry-label-superscript{font-size:0.6rem;position:relative;bottom:0.3em;line-height:initial}";
+function paramCase(input, options) {
+    if (options === void 0) { options = {}; }
+    return dotCase(input, __assign$1({ delimiter: "-" }, options));
+}
+
+const MeasurementDetailsEntry = (_a, children) => {
+  var { label } = _a, props = bundle_esm.__rest(_a, ["label"]);
+  return (index.h("div", Object.assign({}, props, { class: "measurement-details-entry" }),
+    index.h("div", { class: index$1.classnames('measurement-details-entry-label', paramCase(label)) },
+      label,
+      ":"),
+    children));
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+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: "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))));
+};
+const PlanarAngleResultEntry = ({ result, formatter }) => {
+  return (index.h(MeasurementDetailsEntry, { label: "Angle" }, formatter(result.angle)));
+};
+const PlanarDistanceResultEntry = ({ result, formatter }) => {
+  return (index.h(MeasurementDetailsEntry, { label: "Parallel Dist" }, formatter(result.distance)));
+};
+const SurfaceAreaResultEntry = ({ result, formatter }) => {
+  return (index.h(MeasurementDetailsEntry, { label: "Area" }, formatter(result.area)));
+};
+
+const viewerMeasurementDetailsCss = ":host{display:flex;flex-direction:column;--viewer-measurement-details-x-color:red;--viewer-measurement-details-y-color:var(--green-500);--viewer-measurement-details-z-color:blue}.measurement-details-entry{display:flex;align-items:center}.measurement-details-entry-label{user-select:none;padding-right:0.25rem}.measurement-details-entry-label.x{color:var(--viewer-measurement-details-x-color)}.measurement-details-entry-label.y{color:var(--viewer-measurement-details-y-color)}.measurement-details-entry-label.z{color:var(--viewer-measurement-details-z-color)}";
 
 let ViewerMeasurementDetails = class {
   constructor(hostRef) {
@@ -37,106 +168,121 @@ let ViewerMeasurementDetails = class {
      * The number of fraction digits to display.
      */
     this.fractionalDigits = 2;
-    /**
-     * The current `MeasurementResult` displayed.
-     *
-     * @readonly
-     */
     this.results = [];
+    this.isApproximate = false;
     this.distanceMeasurementUnits = new streamAttributes.DistanceUnits(this.distanceUnits);
     this.angleMeasurementUnits = new streamAttributes.AngleUnits(this.angleUnits);
     this.areaMeasurementUnits = new streamAttributes.AreaUnits(this.distanceUnits);
-    this.handleResultsChange = (results) => {
-      this.results = results;
-      this.createSummary();
+    this.handleShowOverlay = (overlay) => {
+      this.overlay = overlay;
     };
-    this.formatDistance = (distance) => {
-      const realDistance = Math.abs(this.distanceMeasurementUnits.convertWorldValueToReal(distance));
-      if (this.distanceFormatter != null) {
-        return this.distanceFormatter(realDistance);
-      }
-      else {
-        const abbreviated = this.distanceMeasurementUnits.unit.abbreviatedName;
-        return realDistance == null
-          ? '---'
-          : `${realDistance.toFixed(this.fractionalDigits)} ${abbreviated}`;
-      }
-    };
-    this.formatAngle = (angleInRadians) => {
-      if (this.angleFormatter != null) {
-        return this.angleFormatter(angleInRadians);
-      }
-      else {
-        const value = this.angleMeasurementUnits
-          .convertTo(angleInRadians)
-          .toFixed(this.fractionalDigits);
-        return `${value} ${this.angleMeasurementUnits.unit.abbreviatedName}`;
-      }
-    };
-    this.formatArea = (area) => {
-      const realArea = this.areaMeasurementUnits.convertWorldValueToReal(area);
-      if (this.areaFormatter != null) {
-        return this.areaFormatter(area);
-      }
-      else {
-        const abbreviated = this.areaMeasurementUnits.unit.abbreviatedName;
-        return realArea == null
-          ? '---'
-          : `${realArea.toFixed(this.fractionalDigits)} ${abbreviated}`;
-      }
-    };
-    this.createSummary = () => {
+    this.handleHideOverlay = () => {
       var _a;
-      const baseSummary = summary.summarizeResults(this.results);
-      const hidden = (_a = this.hiddenDetails) !== null && _a !== void 0 ? _a : [];
-      this.summary = baseSummary;
-      this.visibleSummary = Object.keys(baseSummary)
-        .filter((k) => !hidden.includes(k))
-        .reduce((reducedSummary, key) => (Object.assign(Object.assign({}, reducedSummary), { [key]: baseSummary[key] })), {});
+      (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.dispose();
+    };
+    this.handleOutcomeChange = () => {
+      this.updateStateFromModel();
     };
   }
+  /**
+   * @internal
+   */
   connectedCallback() {
-    this.resultsChangeListener = this.measurementModel.onResultsChanged(this.handleResultsChange);
-  }
-  componentWillLoad() {
-    this.parseHiddenDetails();
-  }
-  componentWillUpdate() {
-    this.parseHiddenDetails();
+    this.onOutcomeChangedHandler = this.measurementModel.onOutcomeChanged(this.handleOutcomeChange);
+    this.updateStateFromModel();
   }
+  /**
+   * @internal
+   */
   disconnectedCallback() {
     var _a;
-    (_a = this.resultsChangeListener) === null || _a === void 0 ? void 0 : _a.dispose();
+    (_a = this.onOutcomeChangedHandler) === null || _a === void 0 ? void 0 : _a.dispose();
   }
+  /**
+   * @internal
+   */
   handleDistanceUnitsChanged() {
     this.distanceMeasurementUnits = new streamAttributes.DistanceUnits(this.distanceUnits);
     this.areaMeasurementUnits = new streamAttributes.AreaUnits(this.distanceUnits);
   }
+  /**
+   * @internal
+   */
   handleAngleUnitsChanged() {
     this.angleMeasurementUnits = new streamAttributes.AngleUnits(this.angleUnits);
   }
+  /**
+   * @internal
+   */
   handleMeasurementModelChanged() {
     var _a;
-    (_a = this.resultsChangeListener) === null || _a === void 0 ? void 0 : _a.dispose();
-    this.resultsChangeListener = this.measurementModel.onResultsChanged(this.handleResultsChange);
+    (_a = this.onOutcomeChangedHandler) === null || _a === void 0 ? void 0 : _a.dispose();
+    this.onOutcomeChangedHandler = this.measurementModel.onOutcomeChanged(this.handleOutcomeChange);
+    this.updateStateFromModel();
   }
-  handleHiddenDetailsChanged() {
-    this.createSummary();
+  /**
+   * @internal
+   */
+  handleResultTypesChanged() {
+    this.updateStateFromModel();
   }
+  /**
+   * @internal
+   */
   render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    return this.visibleSummary != null ? (index.h(index.Host, null, ((_a = this.visibleSummary) === null || _a === void 0 ? void 0 : _a.angle) != null && (index.h("div", { class: "measurement-details-entry" }, index.h("div", { class: "measurement-details-entry-label" }, "Angle:"), this.formatAngle(this.visibleSummary.angle))), ((_b = this.visibleSummary) === null || _b === void 0 ? void 0 : _b.parallelDistance) != null && (index.h("div", { class: "measurement-details-entry" }, index.h("div", { class: "measurement-details-entry-label" }, "Parallel Dist:"), this.formatDistance(this.visibleSummary.parallelDistance))), ((_c = this.visibleSummary) === null || _c === void 0 ? void 0 : _c.minDistance) != null && (index.h("div", { class: "measurement-details-entry" }, index.h("div", { class: "measurement-details-entry-label" }, "Min Dist:"), this.formatDistance(this.visibleSummary.minDistance))), ((_d = this.visibleSummary) === null || _d === void 0 ? void 0 : _d.area) != null && (index.h("div", { class: "measurement-details-entry" }, index.h("div", { class: "measurement-details-entry-label" }, "Area:"), index.h("div", { innerHTML: this.formatArea(this.visibleSummary.area) }))), ((_f = (_e = this.visibleSummary) === null || _e === void 0 ? void 0 : _e.distanceVector) === null || _f === void 0 ? void 0 : _f.x) != null && (index.h("div", { class: "measurement-details-entry" }, index.h("div", { class: "measurement-details-entry-label x-label" }, "X:"), this.formatDistance((_g = this.visibleSummary.distanceVector) === null || _g === void 0 ? void 0 : _g.x))), ((_j = (_h = this.visibleSummary) === null || _h === void 0 ? void 0 : _h.distanceVector) === null || _j === void 0 ? void 0 : _j.y) != null && (index.h("div", { class: "measurement-details-entry" }, index.h("div", { class: "measurement-details-entry-label y-label" }, "Y:"), this.formatDistance((_k = this.visibleSummary.distanceVector) === null || _k === void 0 ? void 0 : _k.y))), ((_m = (_l = this.visibleSummary) === null || _l === void 0 ? void 0 : _l.distanceVector) === null || _m === void 0 ? void 0 : _m.z) != null && (index.h("div", { class: "measurement-details-entry" }, index.h("div", { class: "measurement-details-entry-label z-label" }, "Z:"), this.formatDistance((_o = this.visibleSummary.distanceVector) === null || _o === void 0 ? void 0 : _o.z))))) : (index.h(index.Host, null));
+    return (index.h(index.Host, null, this.renderResult('planar-angle', (result) => (index.h(PlanarAngleResultEntry, { result: result, overlays: this.measurementOverlays, formatter: this.makeAngleFormatter(), onShowOverlay: this.handleShowOverlay, onHideOverlay: this.handleHideOverlay }))), this.renderResult('planar-distance', (result) => (index.h(PlanarDistanceResultEntry, { result: result, overlays: this.measurementOverlays, formatter: this.makeDistanceFormatter(), onShowOverlay: this.handleShowOverlay, onHideOverlay: this.handleHideOverlay }))), this.renderResult('surface-area', (result) => (index.h(SurfaceAreaResultEntry, { result: result, overlays: this.measurementOverlays, formatter: this.makeAreaFormatter(), onShowOverlay: this.handleShowOverlay, onHideOverlay: this.handleHideOverlay }))), this.renderResult('minimum-distance', (result) => (index.h(MinimumDistanceResultEntry, { result: result, overlays: this.measurementOverlays, formatter: this.makeDistanceFormatter(), onShowOverlay: this.handleShowOverlay, onHideOverlay: this.handleHideOverlay })))));
   }
-  parseHiddenDetails() {
-    if (this.hiddenDetailsJson != null) {
-      this.hiddenDetails = JSON.parse(this.hiddenDetailsJson);
+  updateStateFromModel() {
+    const isFilteredResultType = (result) => {
+      var _a, _b;
+      return (_b = (_a = this.resultTypes) === null || _a === void 0 ? void 0 : _a.includes(result.type)) !== null && _b !== void 0 ? _b : true;
+    };
+    const outcome = this.measurementModel.getOutcome();
+    if (outcome != null) {
+      this.results = outcome.results.filter(isFilteredResultType);
+      this.isApproximate = outcome.isApproximate;
     }
+    else {
+      this.results = [];
+      this.isApproximate = false;
+    }
+  }
+  renderResult(type, render) {
+    const result = this.getResultForType(type);
+    return result != null ? render(result) : undefined;
+  }
+  getResultForType(type) {
+    return this.results.find((result) => result.type === type);
+  }
+  makeDistanceFormatter() {
+    return this.makeFormatter((value) => this.distanceMeasurementUnits.convertWorldValueToReal(value), this.distanceMeasurementUnits.unit, this.distanceFormatter);
+  }
+  makeAngleFormatter() {
+    return this.makeFormatter((value) => this.angleMeasurementUnits.convertTo(value), this.angleMeasurementUnits.unit, this.angleFormatter);
+  }
+  makeAreaFormatter() {
+    return this.makeFormatter((value) => this.areaMeasurementUnits.convertWorldValueToReal(value), this.areaMeasurementUnits.unit, this.areaFormatter);
+  }
+  makeFormatter(convert, units, customFormatter) {
+    return (value) => {
+      const v = convert(value);
+      if (customFormatter != null) {
+        return customFormatter(v);
+      }
+      else {
+        return this.formatValue(v, units);
+      }
+    };
+  }
+  formatValue(value, unit) {
+    const val = value.toFixed(this.fractionalDigits);
+    return `${this.isApproximate ? '~' + val : val} ${unit.abbreviatedName}`;
   }
   static get watchers() { return {
     "distanceUnits": ["handleDistanceUnitsChanged"],
     "angleUnits": ["handleAngleUnitsChanged"],
     "measurementModel": ["handleMeasurementModelChanged"],
-    "hiddenDetails": ["handleHiddenDetailsChanged"]
+    "resultTypes": ["handleResultTypesChanged"]
   }; }
 };
 ViewerMeasurementDetails.style = viewerMeasurementDetailsCss;

package/dist/cjs/{vertex-viewer-measurement-distance_2.cjs.entry.js → vertex-viewer-measurement-distance.cjs.entry.js}

@@ -5,13 +5,16 @@
 
 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 utils = require('./utils-235cd490.js');
-const cursors = require('./cursors-399a9648.js');
+const cursors = require('./cursors-ad2fd395.js');
 const dom = require('./dom-dd265f48.js');
-const streamAttributes = require('./streamAttributes-9d6226ac.js');
-const viewport = require('./viewport-51aa05ab.js');
+require('./mapper-f6e6cafe.js');
+require('./grpc-web-client.umd-60a79aae.js');
+const streamAttributes = require('./streamAttributes-d6236448.js');
+const overlays = require('./overlays-8a582edf.js');
+const viewport = require('./viewport-8c39089f.js');
 const browser_esm = require('./browser.esm-31b03292.js');
 const index$1 = require('./index-3bc6bac0.js');
 require('./_commonjsHelpers-537d719a.js');
@@ -364,21 +367,10 @@ async function getHit(raycaster, pt) {
     return undefined;
 }
 function validMeasurement(start, end) {
-  return {
-    type: 'point-to-point',
-    start,
-    end,
-    distance: bundle_esm.vector3.distance(start, end),
-    valid: true,
-  };
+  return { start, end, distance: bundle_esm.vector3.distance(start, end), valid: true };
 }
 function invalidMeasurement(start, end) {
-  return {
-    type: 'point-to-point',
-    start,
-    end,
-    valid: false,
-  };
+  return { start, end, valid: false };
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -420,6 +412,11 @@ let ViewerMeasurementDistance = class {
     index.registerInstance(this, hostRef);
     this.editBegin = index.createEvent(this, "editBegin", 7);
     this.editEnd = index.createEvent(this, "editEnd", 7);
+    /**
+     * Enables the display of axis reference lines between the start and end
+     * point.
+     */
+    this.showAxisReferenceLines = false;
     /**
      * The distance, in pixels, between the mouse and nearest snappable edge. A
      * value of 0 disables snapping.
@@ -464,6 +461,7 @@ let ViewerMeasurementDistance = class {
     this.stateMap = {};
     this.model = PointToPointInteractionModel.empty();
     this.controller = new PointToPointInteractionController(this.model);
+    this.overlays = new overlays.MeasurementOverlayManager();
     this.measurementUnits = new streamAttributes.DistanceUnits(this.units);
     this.isUserInteractingWithModel = false;
     this.handleFrameDrawn = () => {
@@ -622,13 +620,13 @@ let ViewerMeasurementDistance = class {
     const { startPt, endPt, labelPt, indicatorPt, hideStart, hideEnd } = positions;
     const distance = this.formatDistance(this.distance);
     if (this.mode === 'edit') {
-      return (index.h(index.Host, null, index.h("div", { class: "measurement" }, index.h(DistanceMeasurementRenderer, { startPt: startPt, endPt: endPt, centerPt: labelPt, indicatorPt: indicatorPt, distance: distance, anchorLabelOffset: this.anchorLabelOffset, lineCapLength: this.lineCapLength, hideStartAnchor: hideStart, hideEndAnchor: hideEnd, onStartAnchorPointerDown: this.handleEditAnchor('start'), onEndAnchorPointerDown: this.handleEditAnchor('end') }))));
+      return (index.h(index.Host, null, this.showAxisReferenceLines && (index.h("vertex-viewer-measurement-overlays", { measurementOverlays: this.overlays, viewer: this.viewer })), index.h("div", { class: "measurement" }, index.h(DistanceMeasurementRenderer, { startPt: startPt, endPt: endPt, centerPt: labelPt, indicatorPt: indicatorPt, distance: distance, anchorLabelOffset: this.anchorLabelOffset, lineCapLength: this.lineCapLength, hideStartAnchor: hideStart, hideEndAnchor: hideEnd, onStartAnchorPointerDown: this.handleEditAnchor('start'), onEndAnchorPointerDown: this.handleEditAnchor('end') }))));
     }
     else if (this.mode === 'replace') {
-      return (index.h(index.Host, null, index.h("div", { class: "measurement" }, index.h(DistanceMeasurementRenderer, { startPt: startPt, endPt: endPt, centerPt: labelPt, indicatorPt: indicatorPt, distance: distance, hideStartAnchor: hideStart, hideEndAnchor: hideEnd, anchorLabelOffset: this.anchorLabelOffset, lineCapLength: this.lineCapLength }))));
+      return (index.h(index.Host, null, this.showAxisReferenceLines && (index.h("vertex-viewer-measurement-overlays", { measurementOverlays: this.overlays, viewer: this.viewer })), index.h("div", { class: "measurement" }, index.h(DistanceMeasurementRenderer, { startPt: startPt, endPt: endPt, centerPt: labelPt, indicatorPt: indicatorPt, distance: distance, hideStartAnchor: hideStart, hideEndAnchor: hideEnd, anchorLabelOffset: this.anchorLabelOffset, lineCapLength: this.lineCapLength }))));
     }
     else {
-      return (index.h(index.Host, null, index.h("div", { class: "measurement" }, index.h(DistanceMeasurementRenderer, { startPt: startPt, endPt: endPt, centerPt: labelPt, indicatorPt: this.indicatorPt, distance: distance, hideStartAnchor: hideStart, hideEndAnchor: hideEnd, anchorLabelOffset: this.anchorLabelOffset, lineCapLength: this.lineCapLength, linePointerEvents: "painted" }))));
+      return (index.h(index.Host, null, this.showAxisReferenceLines && (index.h("vertex-viewer-measurement-overlays", { measurementOverlays: this.overlays, viewer: this.viewer })), index.h("div", { class: "measurement" }, index.h(DistanceMeasurementRenderer, { startPt: startPt, endPt: endPt, centerPt: labelPt, indicatorPt: this.indicatorPt, distance: distance, hideStartAnchor: hideStart, hideEndAnchor: hideEnd, anchorLabelOffset: this.anchorLabelOffset, lineCapLength: this.lineCapLength, linePointerEvents: "painted" }))));
     }
   }
   /**
@@ -675,6 +673,18 @@ let ViewerMeasurementDistance = class {
     this.updateCamera();
     this.updateDepthBuffer();
     this.updateMeasurementPropsFromModel();
+    this.updateOverlays();
+  }
+  updateOverlays() {
+    var _a;
+    (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.dispose();
+    if (this.showAxisReferenceLines &&
+      this.interactionCount === 0 &&
+      !this.invalid &&
+      this.start != null &&
+      this.end != null) {
+      this.overlay = this.overlays.addDistanceVector(this.start, this.end);
+    }
   }
   async setCursor(cursor) {
     var _a, _b;
@@ -908,53 +918,4 @@ function parseVector3(value) {
 }
 ViewerMeasurementDistance.style = viewerMeasurementDistanceCss;
 
-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;
-
 exports.vertex_viewer_measurement_distance = ViewerMeasurementDistance;
-exports.vertex_viewer_measurement_line = ViewerMeasurementLine;