@vertexvis/viewer 0.12.0 → 0.13.0-canary.0

package/dist/custom-elements/index.js

@@ -35,15 +35,15 @@ function __extends(d, b) {
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 }
 
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
+var __assign$2 = function() {
+    __assign$2 = 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);
+    return __assign$2.apply(this, arguments);
 };
 
 function __rest(s, e) {
@@ -2680,7 +2680,7 @@ function defaults() {
         objects[_i] = arguments[_i];
     }
     var _a = __read(objects), a = _a[0], other = _a.slice(1);
-    var result = __assign({}, a);
+    var result = __assign$2({}, a);
     if (other.length === 0) {
         return result;
     }
@@ -2753,7 +2753,7 @@ function fromPairs(pairs) {
         return pairs.reduce(function (result, pair) {
             var _a;
             if (pair != null) {
-                return __assign(__assign({}, result), (_a = {}, _a[pair[0]] = pair[1], _a));
+                return __assign$2(__assign$2({}, result), (_a = {}, _a[pair[0]] = pair[1], _a));
             }
             else {
                 return result;
@@ -2845,7 +2845,7 @@ var isEqual$4 = function (a, b) {
 };
 var replacePath = function (path, uri) {
     var pathWithForwardSlash = path[0] === '/' ? path : "/".concat(path);
-    return __assign(__assign({}, uri), { path: pathWithForwardSlash });
+    return __assign$2(__assign$2({}, uri), { path: pathWithForwardSlash });
 };
 var pathAsArray = function (uri) {
     return uri.path != null ? sanitizePath(uri.path.split('/')) : [];
@@ -2862,7 +2862,7 @@ var addQueryString = function (query, uri) {
 var addQueryEntry = function (query, uri) {
     if (query[1] != null) {
         var newQuery = __spreadArray(__spreadArray([], __read(queryAsArray(uri)), false), [query], false);
-        return __assign(__assign({}, uri), { query: newQuery
+        return __assign$2(__assign$2({}, uri), { query: newQuery
                 .map(function (entry) { return entry.map(encodeURIComponent).join('='); })
                 .join('&') });
     }
@@ -2877,7 +2877,7 @@ var addQueryParams = function (params, uri) {
     return mapAsEntries(params).reduce(function (result, entry) { return addQueryEntry(entry, result); }, uri);
 };
 var replaceFragment = function (fragment, uri) {
-    return __assign(__assign({}, uri), { fragment: fragment });
+    return __assign$2(__assign$2({}, uri), { fragment: fragment });
 };
 /**
  * Return an array of name/value pairs representing the query string of a URI.
@@ -2914,7 +2914,7 @@ var queryAsMap = function (uri) {
     return queryAsArray(uri).reduce(function (map, _a) {
         var _b;
         var _c = __read(_a, 2), name = _c[0], value = _c[1];
-        return __assign(__assign({}, map), (_b = {}, _b[name] = value, _b));
+        return __assign$2(__assign$2({}, map), (_b = {}, _b[name] = value, _b));
     }, {});
 };
 var toString = function (uri) {
@@ -3156,7 +3156,7 @@ var EventDispatcher = /** @class */ (function () {
                                 controller.abort();
                                 resolve(event);
                             }
-                        }, __assign(__assign({}, opts), { abort: controller.signal }));
+                        }, __assign$2(__assign$2({}, opts), { abort: controller.signal }));
                     })];
             });
         });
@@ -3345,11 +3345,17 @@ CursorManager.NORMAL_PRIORITY = 10;
  * A constant representing the high priority cursors.
  */
 CursorManager.HIGH_PRIORITY = 20;
+// CSS SVG images need to be URL encoded: https://yoksel.github.io/url-encoder/
 const measurementCursor = {
   url: "data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 8h-19a.5.5 0 00-.5.5v6a.5.5 0 00.5.5h19a.5.5 0 00.5-.5v-6a.5.5 0 00-.5-.5zm-.5 6H3V9h3v2.5a.5.5 0 001 0V9h2v2.5a.5.5 0 001 0V9h2v2.5a.5.5 0 001 0V9h2v2.5a.5.5 0 001 0V9h2v2.5a.5.5 0 001 0V9h2z' stroke='%23fff' stroke-width='1.25' stroke-opacity='0.5' stroke-miterlimit='10' shape-rendering='crispEdges'/%3E%3Cpath d='M21.5 8h-19a.5.5 0 00-.5.5v6a.5.5 0 00.5.5h19a.5.5 0 00.5-.5v-6a.5.5 0 00-.5-.5zm-.5 6H3V9h3v2.5a.5.5 0 001 0V9h2v2.5a.5.5 0 001 0V9h2v2.5a.5.5 0 001 0V9h2v2.5a.5.5 0 001 0V9h2v2.5a.5.5 0 001 0V9h2z' shape-rendering='crispEdges'/%3E%3C/svg%3E",
   offsetX: -24,
   offsetY: -24,
 };
+const measurementWithArrowCursor = {
+  url: "data:image/svg+xml;utf8,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke:%23fff;stroke-miterlimit:10;stroke-width:2px;%7D.cls-2%7Bfill:%23fff;%7D.cls-2,.cls-3%7Bfill-rule:evenodd;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M27.46,21h-19a.5.5,0,0,0-.5.5v6a.5.5,0,0,0,.5.5h19a.5.5,0,0,0,.5-.5v-6A.5.5,0,0,0,27.46,21ZM27,27H9V22h3v2.5a.5.5,0,0,0,1,0V22h2v2.5a.5.5,0,0,0,1,0V22h2v2.5a.5.5,0,0,0,1,0V22h2v2.5a.5.5,0,0,0,1,0V22h2v2.5a.5.5,0,0,0,1,0V22h2Z'/%3E%3Cpath d='M27.46,21h-19a.5.5,0,0,0-.5.5v6a.5.5,0,0,0,.5.5h19a.5.5,0,0,0,.5-.5v-6A.5.5,0,0,0,27.46,21ZM27,27H9V22h3v2.5a.5.5,0,0,0,1,0V22h2v2.5a.5.5,0,0,0,1,0V22h2v2.5a.5.5,0,0,0,1,0V22h2v2.5a.5.5,0,0,0,1,0V22h2v2.5a.5.5,0,0,0,1,0V22h2Z'/%3E%3Cpath class='cls-2' d='M1,17V1L12.59,12.62H5.81l-.41.12Z'/%3E%3Cpath class='cls-2' d='M10.08,17.69l-3.6,1.53L1.8,8.14,5.48,6.58Z'/%3E%3Cpath class='cls-3' d='M8.75,17l-1.84.77-3.1-7.37,1.84-.78Z'/%3E%3Cpath class='cls-3' d='M2,3.41V14.6l3-2.87.43-.14h4.76Z'/%3E%3C/svg%3E",
+  offsetX: -30,
+  offsetY: -30,
+};
 
 var commonjsGlobal$1 = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -12443,7 +12449,8 @@ proto.vertexvis.protobuf.core.MeasurementOutcome.prototype.toObject = function(o
 proto.vertexvis.protobuf.core.MeasurementOutcome.toObject = function(includeInstance, msg) {
   var obj = {
     resultsList: googleProtobuf.Message.toObjectList(msg.getResultsList(),
-    proto.vertexvis.protobuf.core.MeasurementResult.toObject, includeInstance)
+    proto.vertexvis.protobuf.core.MeasurementResult.toObject, includeInstance),
+    isApproximate: googleProtobuf.Message.getFieldWithDefault(msg, 2, false)
   };
 
   if (includeInstance) {
@@ -12485,6 +12492,10 @@ proto.vertexvis.protobuf.core.MeasurementOutcome.deserializeBinaryFromReader = f
       reader.readMessage(value,proto.vertexvis.protobuf.core.MeasurementResult.deserializeBinaryFromReader);
       msg.addResults(value);
       break;
+    case 2:
+      var value = /** @type {boolean} */ (reader.readBool());
+      msg.setIsApproximate(value);
+      break;
     default:
       reader.skipField();
       break;
@@ -12522,6 +12533,13 @@ proto.vertexvis.protobuf.core.MeasurementOutcome.serializeBinaryToWriter = funct
       proto.vertexvis.protobuf.core.MeasurementResult.serializeBinaryToWriter
     );
   }
+  f = message.getIsApproximate();
+  if (f) {
+    writer.writeBool(
+      2,
+      f
+    );
+  }
 };
 
 
@@ -12556,6 +12574,23 @@ proto.vertexvis.protobuf.core.MeasurementOutcome.prototype.clearResultsList = fu
 };
 
 
+/**
+ * optional bool is_approximate = 2;
+ * Note that Boolean fields may be set to 0/1 when serialized from a Java server.
+ * You should avoid comparisons like {@code val === true/false} in those cases.
+ * @return {boolean}
+ */
+proto.vertexvis.protobuf.core.MeasurementOutcome.prototype.getIsApproximate = function() {
+  return /** @type {boolean} */ (googleProtobuf.Message.getFieldWithDefault(this, 2, false));
+};
+
+
+/** @param {boolean} value */
+proto.vertexvis.protobuf.core.MeasurementOutcome.prototype.setIsApproximate = function(value) {
+  googleProtobuf.Message.setProto3BooleanField(this, 2, value);
+};
+
+
 goog.object.extend(exports, proto.vertexvis.protobuf.core);
 });
 
@@ -15594,16 +15629,16 @@ function invert(matrix) {
 function lookAt(m, position, target, up) {
     var z = subtract(position, target);
     if (magnitudeSquared(z) === 0) {
-        z = __assign(__assign({}, z), { z: 1 });
+        z = __assign$2(__assign$2({}, z), { z: 1 });
     }
     z = normalize(z);
     var x = cross(up, z);
     if (magnitudeSquared(x) === 0) {
         if (Math.abs(up.z) === 1) {
-            z = __assign(__assign({}, z), { x: z.x + 0.0001 });
+            z = __assign$2(__assign$2({}, z), { x: z.x + 0.0001 });
         }
         else {
-            z = __assign(__assign({}, z), { z: z.z + 0.0001 });
+            z = __assign$2(__assign$2({}, z), { z: z.z + 0.0001 });
         }
         z = normalize(z);
         x = cross(up, z);
@@ -16889,7 +16924,7 @@ var matrix2 = /*#__PURE__*/Object.freeze({
  */
 function create$2$1(values) {
     if (values === void 0) { values = {}; }
-    return __assign({ normal: origin(), constant: 0 }, values);
+    return __assign$2({ normal: origin(), constant: 0 }, values);
 }
 /**
  * Creates a plane from a normal and an arbitrary point on a plane.
@@ -16967,7 +17002,7 @@ var plane = /*#__PURE__*/Object.freeze({
  */
 function create$1$2(value) {
     if (value === void 0) { value = {}; }
-    return __assign({ x: 0, y: 0, z: 0, w: 1 }, value);
+    return __assign$2({ x: 0, y: 0, z: 0, w: 1 }, value);
 }
 /**
  * Parses a JSON string representation of a `Quaternion`.
@@ -22685,6 +22720,7 @@ const vertexvis$1 = $root$1.vertexvis = (() => {
                  * @interface IMetadataFilterQuery
                  * @property {string|null} [valueFilter] MetadataFilterQuery valueFilter
                  * @property {Array.<string>|null} [keys] MetadataFilterQuery keys
+                 * @property {boolean|null} [exactMatch] MetadataFilterQuery exactMatch
                  */
 
                 /**
@@ -22719,6 +22755,14 @@ const vertexvis$1 = $root$1.vertexvis = (() => {
                  */
                 MetadataFilterQuery.prototype.keys = $util$1.emptyArray;
 
+                /**
+                 * MetadataFilterQuery exactMatch.
+                 * @member {boolean} exactMatch
+                 * @memberof vertexvis.protobuf.stream.MetadataFilterQuery
+                 * @instance
+                 */
+                MetadataFilterQuery.prototype.exactMatch = false;
+
                 /**
                  * Creates a new MetadataFilterQuery instance using the specified properties.
                  * @function create
@@ -22748,6 +22792,8 @@ const vertexvis$1 = $root$1.vertexvis = (() => {
                     if (message.keys != null && message.keys.length)
                         for (let i = 0; i < message.keys.length; ++i)
                             writer.uint32(/* id 3, wireType 2 =*/26).string(message.keys[i]);
+                    if (message.exactMatch != null && Object.hasOwnProperty.call(message, "exactMatch"))
+                        writer.uint32(/* id 4, wireType 0 =*/32).bool(message.exactMatch);
                     return writer;
                 };
 
@@ -22790,6 +22836,9 @@ const vertexvis$1 = $root$1.vertexvis = (() => {
                                 message.keys = [];
                             message.keys.push(reader.string());
                             break;
+                        case 4:
+                            message.exactMatch = reader.bool();
+                            break;
                         default:
                             reader.skipType(tag & 7);
                             break;
@@ -22835,6 +22884,9 @@ const vertexvis$1 = $root$1.vertexvis = (() => {
                             if (!$util$1.isString(message.keys[i]))
                                 return "keys: string[] expected";
                     }
+                    if (message.exactMatch != null && message.hasOwnProperty("exactMatch"))
+                        if (typeof message.exactMatch !== "boolean")
+                            return "exactMatch: boolean expected";
                     return null;
                 };
 
@@ -22859,6 +22911,8 @@ const vertexvis$1 = $root$1.vertexvis = (() => {
                         for (let i = 0; i < object.keys.length; ++i)
                             message.keys[i] = String(object.keys[i]);
                     }
+                    if (object.exactMatch != null)
+                        message.exactMatch = Boolean(object.exactMatch);
                     return message;
                 };
 
@@ -22877,8 +22931,10 @@ const vertexvis$1 = $root$1.vertexvis = (() => {
                     let object = {};
                     if (options.arrays || options.defaults)
                         object.keys = [];
-                    if (options.defaults)
+                    if (options.defaults) {
                         object.valueFilter = "";
+                        object.exactMatch = false;
+                    }
                     if (message.valueFilter != null && message.hasOwnProperty("valueFilter"))
                         object.valueFilter = message.valueFilter;
                     if (message.keys && message.keys.length) {
@@ -22886,6 +22942,8 @@ const vertexvis$1 = $root$1.vertexvis = (() => {
                         for (let j = 0; j < message.keys.length; ++j)
                             object.keys[j] = message.keys[j];
                     }
+                    if (message.exactMatch != null && message.hasOwnProperty("exactMatch"))
+                        object.exactMatch = message.exactMatch;
                     return object;
                 };
 
@@ -50626,7 +50684,7 @@ function defineParams() {
         definitions[_i] = arguments[_i];
     }
     return function (settings) {
-        return definitions.reduce(function (result, def) { return (__assign(__assign({}, result), def(settings))); }, {});
+        return definitions.reduce(function (result, def) { return (__assign$2(__assign$2({}, result), def(settings))); }, {});
     };
 }
 function defineBoolean(param, prop) {
@@ -52142,7 +52200,7 @@ var StreamApi = /** @class */ (function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        desc = __assign(__assign({}, descriptor), { url: appendSettingsToUrl(descriptor.url, settings) });
+                        desc = __assign$2(__assign$2({}, descriptor), { url: appendSettingsToUrl(descriptor.url, settings) });
                         return [4 /*yield*/, this.websocket.connect(desc)];
                     case 1:
                         _a.sent();
@@ -52473,7 +52531,7 @@ var StreamApi = /** @class */ (function () {
      * @param result A result to reply with.
      */
     StreamApi.prototype.replyResult = function (reqId, result) {
-        this.sendResponse(__assign({ requestId: { value: reqId } }, result));
+        this.sendResponse(__assign$2({ requestId: { value: reqId } }, result));
     };
     /**
      * Acknowledges a failed request by sending a reply back to the server.
@@ -52525,7 +52583,7 @@ var StreamApi = /** @class */ (function () {
         var sentAtTime = currentDateAsProtoTimestamp();
         if (withResponse) {
             var requestId_1 = uuid.create();
-            var request_1 = __assign(__assign({}, req), { requestId: { value: requestId_1 } });
+            var request_1 = __assign$2(__assign$2({}, req), { requestId: { value: requestId_1 } });
             return new Promise(function (resolve, reject) {
                 var subscription = _this.onResponse(function (msg) {
                     var _a;
@@ -53337,6 +53395,10 @@ var EntityType;
    * A value that represents the presence of geometry without BREP.
    */
   EntityType[EntityType["GENERIC_GEOMETRY"] = 96] = "GENERIC_GEOMETRY";
+  /**
+   * A value that represents the absence of geometry.
+   */
+  EntityType[EntityType["NO_GEOMETRY"] = 0] = "NO_GEOMETRY";
 })(EntityType || (EntityType = {}));
 
 /**
@@ -53363,11 +53425,17 @@ class FeatureMap {
    * @returns A new feature map.
    */
   static fromPng(png, imageAttr) {
-    if (png.data instanceof Uint8Array) {
-      return new FeatureMap(png.data, imageAttr);
+    if (!(png.data instanceof Uint8Array)) {
+      throw new Error('Cannot create FeatureMap. Expected decoded PNG to be a Uint8Array.');
+    }
+    else if (png.channels !== 4) {
+      throw new Error('Cannot create FeatureMap. Missing alpha channel.');
     }
     else {
-      throw new Error('Cannot create FeatureMap. Expected decoded PNG to be a Uint8Array.');
+      return new FeatureMap(png.data, Object.assign(Object.assign({}, imageAttr), { 
+        // TODO(dan): Need to change frame protos to include image attributes
+        // per image artifact.
+        imageRect: rectangle.fromPointAndDimensions(imageAttr.imageRect, png) }));
     }
   }
   /**
@@ -53398,6 +53466,9 @@ class FeatureMap {
     else if ((color === null || color === void 0 ? void 0 : color.a) === EntityType.PRECISE_SURFACE) {
       return EntityType.PRECISE_SURFACE;
     }
+    else {
+      return EntityType.NO_GEOMETRY;
+    }
   }
   getColor(point$1) {
     const { width, height } = this.imageAttr.imageRect;
@@ -53472,7 +53543,7 @@ class Frame {
     if (this.cachedDepthBuffer == null) {
       this.cachedDepthBuffer =
         this.depthBufferBytes != null
-          ? this.decodeDepthBuffer(this.depthBufferBytes)
+          ? this.decodeDepthBuffer(new Uint8Array(this.depthBufferBytes))
           : Promise.resolve(undefined);
     }
     return this.cachedDepthBuffer;
@@ -53485,7 +53556,7 @@ class Frame {
     if (this.cachedFeatureMap == null) {
       this.cachedFeatureMap =
         this.featureMapBytes != null
-          ? this.decodeFeatureMap(this.featureMapBytes)
+          ? this.decodeFeatureMap(new Uint8Array(this.featureMapBytes))
           : Promise.resolve(undefined);
     }
     return this.cachedFeatureMap;
@@ -53835,32 +53906,32 @@ class AreaUnits {
 AreaUnits.units = {
   millimeters: {
     name: 'Square Millimeters',
-    abbreviatedName: 'mm<span class=measurement-details-entry-label-superscript>2</span>',
+    abbreviatedName: 'mm²',
     converter: new MillimeterUnitConverter(),
   },
   centimeters: {
     name: 'Square Centimeters',
-    abbreviatedName: 'cm<span class=measurement-details-entry-label-superscript>2</span>',
+    abbreviatedName: 'cm²',
     converter: new CentimeterUnitConverter(2),
   },
   meters: {
     name: 'Square Meters',
-    abbreviatedName: 'm<span class=measurement-details-entry-label-superscript>2</span>',
+    abbreviatedName: 'm²',
     converter: new MeterUnitConverter(2),
   },
   inches: {
     name: 'Square Inches',
-    abbreviatedName: 'in<span class=measurement-details-entry-label-superscript>2</span>',
+    abbreviatedName: 'in²',
     converter: new InchesUnitConverter(2),
   },
   feet: {
     name: 'Square Feet',
-    abbreviatedName: 'ft<span class=measurement-details-entry-label-superscript>2</span>',
+    abbreviatedName: 'ft²',
     converter: new FeetUnitConverter(2),
   },
   yards: {
     name: 'Square Yards',
-    abbreviatedName: 'yd<span class=measurement-details-entry-label-superscript>2</span>',
+    abbreviatedName: 'yd²',
     converter: new YardUnitConverter(2),
   },
 };
@@ -54398,6 +54469,17 @@ class Viewport {
   transformVectorToViewport(ndc) {
     return point.create(ndc.x * this.center.x + this.center.x, -ndc.y * this.center.y + this.center.y);
   }
+  /**
+   * Transforms a world point to 2D point in viewport space.
+   *
+   * @param worldPt The world point to transform.
+   * @param projectionViewMatrix The projection matrix to transform a 3D point to 2D point.
+   * @returns A point in viewport space.
+   */
+  transformWorldToViewport(worldPt, projectionViewMatrix) {
+    const ndc = vector3.transformMatrix(worldPt, projectionViewMatrix);
+    return this.transformVectorToViewport(ndc);
+  }
   transformPointToViewport(pt, image) {
     const { x: scaleX, y: scaleY } = this.calculateFrameScale(image);
     return point.scale(pt, 1 * scaleX, 1 * scaleY);
@@ -54543,9 +54625,7 @@ function fromPbFrameScene(worldOrientation) {
   return mapper.defineMapper(mapper.read(fromPbFrameSceneAttributes, fromPbFrameCamera), ([sceneAttr, camera]) => new FrameScene(camera, sceneAttr.boundingBox, sceneAttr.crossSectioning, worldOrientation, sceneAttr.hasChanged));
 }
 function fromPbFrame(worldOrientation) {
-  return mapper.defineMapper(mapper.read(mapper.mapProp('frameCorrelationIds', (ids) => (ids != null ? ids : [])), mapper.requiredProp('sequenceNumber'), mapper.compose(fromPbFrameImageAttributes, mapper.getProp('frameDimensions')), fromPbFrameScene(worldOrientation), fromPbFrameImage, mapper.getProp('depthBuffer'), mapper.getProp('featureMap')), ([cIds, seq, fd, s, i, db, fm]) => {
-    return new Frame(cIds, seq, fd, i, s, (db === null || db === void 0 ? void 0 : db.value) || undefined, (fm === null || fm === void 0 ? void 0 : fm.value) || undefined);
-  });
+  return mapper.defineMapper(mapper.read(mapper.mapProp('frameCorrelationIds', (ids) => (ids != null ? ids : [])), mapper.requiredProp('sequenceNumber'), mapper.compose(fromPbFrameImageAttributes, mapper.getProp('frameDimensions')), fromPbFrameScene(worldOrientation), fromPbFrameImage, mapper.mapProp('depthBuffer', fromPbBytesValue), mapper.mapProp('featureMap', fromPbBytesValue)), ([cIds, seq, fd, s, i, db, fm]) => new Frame(cIds, seq, fd, i, s, db, fm));
 }
 function fromPbFrameOrThrow(worldOrientation) {
   return mapper.ifInvalidThrow(fromPbFrame(worldOrientation));
@@ -60040,6 +60120,7 @@ const vertexvis = $root.vertexvis = (() => {
                  * @interface IMetadataFilterQuery
                  * @property {string|null} [valueFilter] MetadataFilterQuery valueFilter
                  * @property {Array.<string>|null} [keys] MetadataFilterQuery keys
+                 * @property {boolean|null} [exactMatch] MetadataFilterQuery exactMatch
                  */
 
                 /**
@@ -60074,6 +60155,14 @@ const vertexvis = $root.vertexvis = (() => {
                  */
                 MetadataFilterQuery.prototype.keys = $util.emptyArray;
 
+                /**
+                 * MetadataFilterQuery exactMatch.
+                 * @member {boolean} exactMatch
+                 * @memberof vertexvis.protobuf.stream.MetadataFilterQuery
+                 * @instance
+                 */
+                MetadataFilterQuery.prototype.exactMatch = false;
+
                 /**
                  * Creates a new MetadataFilterQuery instance using the specified properties.
                  * @function create
@@ -60103,6 +60192,8 @@ const vertexvis = $root.vertexvis = (() => {
                     if (message.keys != null && message.keys.length)
                         for (let i = 0; i < message.keys.length; ++i)
                             writer.uint32(/* id 3, wireType 2 =*/26).string(message.keys[i]);
+                    if (message.exactMatch != null && Object.hasOwnProperty.call(message, "exactMatch"))
+                        writer.uint32(/* id 4, wireType 0 =*/32).bool(message.exactMatch);
                     return writer;
                 };
 
@@ -60145,6 +60236,9 @@ const vertexvis = $root.vertexvis = (() => {
                                 message.keys = [];
                             message.keys.push(reader.string());
                             break;
+                        case 4:
+                            message.exactMatch = reader.bool();
+                            break;
                         default:
                             reader.skipType(tag & 7);
                             break;
@@ -60190,6 +60284,9 @@ const vertexvis = $root.vertexvis = (() => {
                             if (!$util.isString(message.keys[i]))
                                 return "keys: string[] expected";
                     }
+                    if (message.exactMatch != null && message.hasOwnProperty("exactMatch"))
+                        if (typeof message.exactMatch !== "boolean")
+                            return "exactMatch: boolean expected";
                     return null;
                 };
 
@@ -60214,6 +60311,8 @@ const vertexvis = $root.vertexvis = (() => {
                         for (let i = 0; i < object.keys.length; ++i)
                             message.keys[i] = String(object.keys[i]);
                     }
+                    if (object.exactMatch != null)
+                        message.exactMatch = Boolean(object.exactMatch);
                     return message;
                 };
 
@@ -60232,8 +60331,10 @@ const vertexvis = $root.vertexvis = (() => {
                     let object = {};
                     if (options.arrays || options.defaults)
                         object.keys = [];
-                    if (options.defaults)
+                    if (options.defaults) {
                         object.valueFilter = "";
+                        object.exactMatch = false;
+                    }
                     if (message.valueFilter != null && message.hasOwnProperty("valueFilter"))
                         object.valueFilter = message.valueFilter;
                     if (message.keys && message.keys.length) {
@@ -60241,6 +60342,8 @@ const vertexvis = $root.vertexvis = (() => {
                         for (let j = 0; j < message.keys.length; ++j)
                             object.keys[j] = message.keys[j];
                     }
+                    if (message.exactMatch != null && message.hasOwnProperty("exactMatch"))
+                        object.exactMatch = message.exactMatch;
                     return object;
                 };
 
@@ -87998,11 +88101,11 @@ const mapPlanarAngle = mapper.defineMapper(mapper.read(mapper.getProp('angleInRa
   plane1,
   plane2,
 }));
-const mapMinimumDistance = mapper.defineMapper(mapper.read(mapper.getProp('distance'), mapper.mapRequiredProp('closestPoint1', fromPbVector3f), mapper.mapRequiredProp('closestPoint2', fromPbVector3f)), ([distance, closestPoint1, closestPoint2]) => ({
+const mapMinimumDistance = mapper.defineMapper(mapper.read(mapper.getProp('distance'), mapper.mapRequiredProp('closestPoint1', fromPbVector3f), mapper.mapRequiredProp('closestPoint2', fromPbVector3f)), ([distance, point1, point2]) => ({
   type: 'minimum-distance',
   distance,
-  closestPoint1,
-  closestPoint2,
+  point1,
+  point2,
 }));
 const mapSurfaceArea = mapper.defineMapper(mapper.read(mapper.getProp('area')), ([area]) => ({
   type: 'surface-area',
@@ -88013,7 +88116,7 @@ const mapPlanarAngleFromResult = mapper.mapProp('planarAngle', mapper.ifDefined(
 const mapMinimumDistanceFromResult = mapper.mapProp('minimumDistance', mapper.ifDefined(mapMinimumDistance));
 const mapSurfaceAreaFromResult = mapper.mapProp('totalSurfaceArea', mapper.ifDefined(mapSurfaceArea));
 const mapMeasurementResult = mapper.compose(mapper.pickFirst(mapPlanarDistanceFromResult, mapPlanarAngleFromResult, mapMinimumDistanceFromResult, mapSurfaceAreaFromResult), mapper.required('Result field'));
-const mapMeasureResponse = mapper.defineMapper(mapper.read(mapper.mapRequiredProp('outcome', mapper.mapRequiredProp('resultsList', mapper.mapArray(mapMeasurementResult)))), ([results]) => ({ results }));
+const mapMeasureResponse = mapper.defineMapper(mapper.read(mapper.mapRequiredProp('outcome', mapper.mapRequiredProp('resultsList', mapper.mapArray(mapMeasurementResult))), mapper.mapRequiredProp('outcome', mapper.getProp('isApproximate'))), ([results, isApproximate]) => ({ results, isApproximate }));
 const mapMeasureResponseOrThrow = mapper.ifInvalidThrow(mapMeasureResponse);
 
 /**
@@ -88026,7 +88129,7 @@ class MeasurementController {
     this.client = client;
     this.jwtProvider = jwtProvider;
     this.deviceId = deviceId;
-    this.results = Promise.resolve([]);
+    this.outcome = Promise.resolve(undefined);
   }
   /**
    * Registers an entity to measure and performs a measurement if this entity
@@ -88046,7 +88149,7 @@ class MeasurementController {
   clearEntities() {
     return this.performMeasurement(() => {
       this.model.clearEntities();
-      this.model.clearResults();
+      this.model.clearOutcome();
       return true;
     });
   }
@@ -88079,28 +88182,32 @@ class MeasurementController {
       this.measureAndUpdateModel(entities);
       this.highlightEntities(previous, entities);
     }
-    return this.results;
+    return this.outcome;
   }
   measureAndUpdateModel(entities) {
     if (entities.length > 0) {
-      this.results = this.measureEntities().then((outcome) => {
-        this.model.replaceResultsWithOutcome(outcome);
-        return this.model.getResults();
+      this.outcome = this.measureEntities(entities).then((outcome) => {
+        this.model.setOutcome(outcome);
+        return this.model.getOutcome();
       });
     }
     else {
-      this.results = Promise.resolve([]);
+      this.outcome = Promise.resolve(undefined);
     }
   }
-  async measureEntities() {
-    const entities = this.model.getEntities().map((e) => e.toProto());
-    const res = await requestUnary(async (handler) => {
-      const meta = await createMetadata(this.jwtProvider, this.deviceId);
-      const req = new scene_view_api_pb.MeasureRequest();
-      req.setEntitiesList(entities);
-      this.client.measure(req, meta, handler);
-    });
-    return mapMeasureResponseOrThrow(res.toObject());
+  async measureEntities(entities) {
+    if (entities.length > 0) {
+      const res = await requestUnary(async (handler) => {
+        const meta = await createMetadata(this.jwtProvider, this.deviceId);
+        const req = new scene_view_api_pb.MeasureRequest();
+        req.setEntitiesList(entities.map((e) => e.toProto()));
+        this.client.measure(req, meta, handler);
+      });
+      return mapMeasureResponseOrThrow(res.toObject());
+    }
+    else {
+      return undefined;
+    }
   }
   async highlightEntities(previous, entities) {
     await requestUnary(async (handler) => {
@@ -88153,6 +88260,7 @@ class MeasurementEntity {
     return entity;
   }
 }
+
 /**
  * A model representing the state of measurement.
  *
@@ -88167,8 +88275,8 @@ class MeasurementModel {
   constructor() {
     this.entities = new Set();
     this.results = new Set();
-    this.resultsChanged = new EventDispatcher();
     this.entitiesChanged = new EventDispatcher();
+    this.outcomeChanged = new EventDispatcher();
   }
   /**
    * Registers an entity to be measured with the model.
@@ -88186,24 +88294,6 @@ class MeasurementModel {
       return false;
     }
   }
-  /**
-   * Adds a measurement result to the model.
-   *
-   * Emits a _result changed_ event.
-   *
-   * @param result A result to add.
-   * @returns `true` if the result has been added.
-   */
-  addResult(result) {
-    if (!this.results.has(result)) {
-      this.results.add(result);
-      this.resultsChanged.emit(this.getResults());
-      return true;
-    }
-    else {
-      return false;
-    }
-  }
   /**
    * Clears all registered entities from the model.
    */
@@ -88211,23 +88301,23 @@ class MeasurementModel {
     this.entities.forEach((e) => this.removeEntity(e));
   }
   /**
-   * Clears all the measurement results from the model.
-   *
-   * Emits a _result changed_ event.
+   * Clears the outcome containing the results of a measurement.
    */
-  clearResults() {
-    this.results.forEach((r) => this.removeResult(r));
+  clearOutcome() {
+    this.setOutcome(undefined);
   }
   /**
-   * Replaces all the results in the model with the results from an outcome.
+   * Sets the outcome containing the results of a measurement.
    *
-   * Emits a _result changed_ event.
+   * Emits a _outcome changed_ event.
    *
-   * @param outcome The outcome that contains the new results.
+   * @param outcome The outcome containing results.
    */
-  replaceResultsWithOutcome(outcome) {
-    this.clearResults();
-    outcome.results.forEach((r) => this.addResult(r));
+  setOutcome(outcome) {
+    if (!objects.isEqual(this.outcome, outcome)) {
+      this.outcome = outcome;
+      this.outcomeChanged.emit(outcome);
+    }
   }
   /**
    * Returns all the entities registered with the model.
@@ -88235,6 +88325,12 @@ class MeasurementModel {
   getEntities() {
     return Array.from(this.entities);
   }
+  /**
+   * Returns the outcome that contains the results of a measurement.
+   */
+  getOutcome() {
+    return this.outcome;
+  }
   /**
    * Returns all the measurement results of the model.
    */
@@ -88257,23 +88353,6 @@ class MeasurementModel {
       return false;
     }
   }
-  /**
-   * Removes a measurement result from the model.
-   *
-   * Emits a _result changed_ event.
-   *
-   * @param result The result to remove.
-   */
-  removeResult(result) {
-    if (this.results.has(result)) {
-      this.results.delete(result);
-      this.resultsChanged.emit(this.getResults());
-      return true;
-    }
-    else {
-      return false;
-    }
-  }
   /**
    * Sets the set of entities to be measured with the model.
    *
@@ -88287,14 +88366,14 @@ class MeasurementModel {
     return true;
   }
   /**
-   * Registers an event listener that will be invoked when the model's
-   * measurement results change.
+   * Registers an event listener that will be invoked when the model's outcome
+   * changes.
    *
    * @param listener The listener to add.
    * @returns A disposable that can be used to remove the listener.
    */
-  onResultsChanged(listener) {
-    return this.resultsChanged.on(listener);
+  onOutcomeChanged(listener) {
+    return this.outcomeChanged.on(listener);
   }
   /**
    * Registers an event listener that will be invoked when the model's
@@ -88308,40 +88387,86 @@ class MeasurementModel {
   }
 }
 
-function summarizeResults(results) {
-  return results.reduce((summary, result) => {
-    switch (result.type) {
-      case 'minimum-distance':
-        return Object.assign(Object.assign({}, summary), summarizeMinDistanceResult(result));
-      case 'planar-angle':
-        return Object.assign(Object.assign({}, summary), summarizeFromPlanarAngleResult(result));
-      case 'planar-distance':
-        return Object.assign(Object.assign({}, summary), summarizePlanarDistanceResult(result));
-      case 'surface-area':
-        return Object.assign(Object.assign({}, summary), summarizeSurfaceAreaResult(result));
+class MeasurementOverlayManager {
+  constructor() {
+    this.overlays = new Map();
+    this.overlaysChanged = new EventDispatcher();
+  }
+  addLineFromResult(result) {
+    return this.addLine(result.point1, result.point2);
+  }
+  addLine(start, end) {
+    const id = uuid.create();
+    const overlay = {
+      type: 'line',
+      id: id,
+      start,
+      end,
+      dispose: () => this.remove(id),
+    };
+    this.addOverlay(overlay);
+    return overlay;
+  }
+  addDistanceVectorFromResult(result) {
+    return this.addDistanceVector(result.point1, result.point2);
+  }
+  addDistanceVector(start, end) {
+    const id = uuid.create();
+    const v = vector3.subtract(start, end);
+    const ze = vector3.add(start, vector3.create(0, 0, -v.z));
+    const z = { start, end: ze };
+    const ye = vector3.add(ze, vector3.create(0, -v.y, 0));
+    const y = { start: ze, end: ye };
+    const xe = vector3.add(ye, vector3.create(-v.x, 0, 0));
+    const x = { start: ye, end: xe };
+    const overlay = {
+      type: 'distance-vector',
+      id,
+      x,
+      y,
+      z,
+      dispose: () => this.remove(id),
+    };
+    this.addOverlay(overlay);
+    return overlay;
+  }
+  addOverlay(overlay) {
+    if (!this.overlays.has(overlay.id)) {
+      this.overlays.set(overlay.id, overlay);
+      this.overlaysChanged.emit(this.getOverlays());
     }
-  }, {});
-}
-function summarizeMinDistanceResult(result) {
-  const distanceVector = vector3.subtract(result.closestPoint1, result.closestPoint2);
-  return {
-    minDistance: result.distance,
-    distanceVector,
-  };
-}
-function summarizePlanarDistanceResult(result) {
-  return {
-    parallelDistance: result.distance,
-  };
-}
-function summarizeFromPlanarAngleResult(result) {
-  return {
-    angle: result.angle,
-  };
+  }
+  getOverlays() {
+    return Array.from(this.overlays.values());
+  }
+  remove(id) {
+    if (this.overlays.has(id)) {
+      this.overlays.delete(id);
+      this.overlaysChanged.emit(this.getOverlays());
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  onOverlaysChanged(listener) {
+    return this.overlaysChanged.on(listener);
+  }
 }
-function summarizeSurfaceAreaResult(result) {
+
+/**
+ * Constructs a new measurement result from the given points.
+ *
+ * @param point1 A starting point.
+ * @param point2 An ending point.
+ * @returns A new measurement result.
+ */
+function makeMinimumDistanceResult(point1, point2) {
   return {
-    area: result.area,
+    type: 'minimum-distance',
+    point1,
+    point2,
+    distance: vector3.distance(point1, point2),
   };
 }
 
@@ -97360,21 +97485,21 @@ let SceneTreeTableHeader = class extends HTMLElement$1 {
 /**
  * Lower case as a function.
  */
-function lowerCase(str) {
+function lowerCase$1(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];
+var DEFAULT_SPLIT_REGEXP$1 = [/([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;
+var DEFAULT_STRIP_REGEXP$1 = /[^A-Z0-9]+/gi;
 /**
  * Normalize the string into something other libraries can manipulate easier.
  */
-function noCase(input, options) {
+function noCase$1(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 _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP$1 : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP$1 : _b, _c = options.transform, transform = _c === void 0 ? lowerCase$1 : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
+    var result = replace$1(replace$1(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
     var start = 0;
     var end = result.length;
     // Trim the delimiter from around the output string.
@@ -97388,7 +97513,7 @@ function noCase(input, options) {
 /**
  * Replace `re` in the input string with the replacement value.
  */
-function replace(input, re, value) {
+function replace$1(input, re, value) {
     if (re instanceof RegExp)
         return input.replace(re, value);
     return re.reduce(function (input, re) { return input.replace(re, value); }, input);
@@ -97404,7 +97529,7 @@ function pascalCaseTransform(input, index) {
 }
 function pascalCase(input, options) {
     if (options === void 0) { options = {}; }
-    return noCase(input, __assign({ delimiter: "", transform: pascalCaseTransform }, options));
+    return noCase$1(input, __assign$2({ delimiter: "", transform: pascalCaseTransform }, options));
 }
 
 function camelCaseTransform(input, index) {
@@ -97414,7 +97539,7 @@ function camelCaseTransform(input, index) {
 }
 function camelCase(input, options) {
     if (options === void 0) { options = {}; }
-    return pascalCase(input, __assign({ transform: camelCaseTransform }, options));
+    return pascalCase(input, __assign$2({ transform: camelCaseTransform }, options));
 }
 
 const bindingRegEx = /{{(.+)}}/;
@@ -98373,8 +98498,9 @@ class FlyToPositionKeyInteraction {
  * the internal state of an interaction.
  */
 class InteractionApi {
-  constructor(stream, getConfig, getScene, getFrame, getViewport, tapEmitter, doubleTapEmitter, longPressEmitter, interactionStartedEmitter, interactionFinishedEmitter) {
+  constructor(stream, cursors, getConfig, getScene, getFrame, getViewport, tapEmitter, doubleTapEmitter, longPressEmitter, interactionStartedEmitter, interactionFinishedEmitter) {
     this.stream = stream;
+    this.cursors = cursors;
     this.getConfig = getConfig;
     this.getScene = getScene;
     this.getFrame = getFrame;
@@ -98389,6 +98515,53 @@ class InteractionApi {
     this.longPress = this.longPress.bind(this);
     this.emitTapEvent = this.emitTapEvent.bind(this);
   }
+  /**
+   * Displays a cursor over the viewer with the given priority. Cursors with
+   * higher priority will take precedence over cursors with lower priorities if
+   * there's more than a single cursor added.
+   *
+   * @param cursor The cursor to add.
+   * @param priority The priority of the cursor.
+   * @returns A `Disposable` that can be used to remove the cursor.
+   */
+  addCursor(cursor, priority) {
+    return this.cursors.add(cursor, priority);
+  }
+  /**
+   * Returns a 3D point in world space for the given 2D point in viewport space.
+   *
+   * @param point A point in 2D viewport space to transform.
+   * @returns A 3D point in world space.
+   */
+  async getWorldPointFromViewport(point) {
+    const viewport = this.getViewport();
+    const frame = this.getFrame();
+    if (frame == null) {
+      throw new Error('Cannot get world point. Frame is undefined.');
+    }
+    const depthBuffer = await frame.depthBuffer();
+    return depthBuffer != null
+      ? viewport.transformPointToWorldSpace(point, depthBuffer, 0.5)
+      : undefined;
+  }
+  /**
+   * Returns the entity at the given point in viewport space.
+   *
+   * @param point A point in viewport space.
+   * @returns The entity that was found.
+   */
+  async getEntityTypeAtPoint(point) {
+    var _a;
+    const viewport = this.getViewport();
+    const featureMap = await ((_a = this.getFrame()) === null || _a === void 0 ? void 0 : _a.featureMap());
+    if (featureMap != null) {
+      const framePt = viewport.transformPointToFrame(point, featureMap);
+      return featureMap.getEntityType(framePt);
+    }
+    else {
+      return EntityType.NO_GEOMETRY;
+    }
+  }
   /**
    * Generates a ray from the given point, in viewport coordinates.
    *
@@ -98549,8 +98722,8 @@ class InteractionApi {
     });
   }
   /**
-   * Performs a view all operation for the scene's bounding box, and requests a new image
-   * for the updated scene.
+   * Performs a view all operation for the scene's bounding box, and requests a
+   * new image for the updated scene.
    */
   async viewAll() {
     await this.getScene().camera().viewAll().render();
@@ -100800,7 +100973,7 @@ let Viewer = class extends HTMLElement$1 {
     if (this.stream == null) {
       throw new ComponentInitializationError('Cannot create interaction API. Component has not been initialized.');
     }
-    return new InteractionApi(this.stream, () => this.getResolvedConfig().interactions, () => this.createScene(), () => this.frame, () => this.viewport, this.tap, this.doubletap, this.longpress, this.interactionStarted, this.interactionFinished);
+    return new InteractionApi(this.stream, this.stateMap.cursorManager, () => this.getResolvedConfig().interactions, () => this.createScene(), () => this.frame, () => this.viewport, this.tap, this.doubletap, this.longpress, this.interactionStarted, this.interactionFinished);
   }
   handleCursorChanged() {
     window.requestAnimationFrame(() => {
@@ -101534,7 +101707,7 @@ let ViewerDomRenderer = class extends HTMLElement$1 {
   /**
    * @ignore
    */
-  componentWillRender() {
+  componentDidRender() {
     this.updateElements();
   }
   /**
@@ -103060,7 +103233,137 @@ let ViewerMarkupTool = class extends HTMLElement$1 {
   static get style() { return viewerMarkupToolCss; }
 };
 
-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}";
+/*! *****************************************************************************
+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));
+}
+
+function paramCase(input, options) {
+    if (options === void 0) { options = {}; }
+    return dotCase(input, __assign$1({ delimiter: "-" }, options));
+}
+
+const MeasurementDetailsEntry = (_a, children) => {
+  var { label } = _a, props = __rest(_a, ["label"]);
+  return (h("div", Object.assign({}, props, { class: "measurement-details-entry" }),
+    h("div", { class: 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 = vector3.subtract(result.point1, result.point2);
+  return (h(Fragment, null,
+    h(MeasurementDetailsEntry, { label: "Min Dist", onMouseEnter: () => onShowOverlay(overlays === null || overlays === void 0 ? void 0 : overlays.addLineFromResult(result)), onMouseLeave: onHideOverlay }, formatter(result.distance)),
+    h(MeasurementDetailsEntry, { label: "X", onMouseEnter: () => onShowOverlay(overlays === null || overlays === void 0 ? void 0 : overlays.addDistanceVectorFromResult(result)), onMouseLeave: onHideOverlay }, formatter(v.x)),
+    h(MeasurementDetailsEntry, { label: "Y", onMouseEnter: () => onShowOverlay(overlays === null || overlays === void 0 ? void 0 : overlays.addDistanceVectorFromResult(result)), onMouseLeave: onHideOverlay }, formatter(v.y)),
+    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 (h(MeasurementDetailsEntry, { label: "Angle" }, formatter(result.angle)));
+};
+const PlanarDistanceResultEntry = ({ result, formatter }) => {
+  return (h(MeasurementDetailsEntry, { label: "Parallel Dist" }, formatter(result.distance)));
+};
+const SurfaceAreaResultEntry = ({ result, formatter }) => {
+  return (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 extends HTMLElement$1 {
   constructor() {
@@ -103085,106 +103388,121 @@ let ViewerMeasurementDetails = class extends HTMLElement$1 {
      * The number of fraction digits to display.
      */
     this.fractionalDigits = 2;
-    /**
-     * The current `MeasurementResult` displayed.
-     *
-     * @readonly
-     */
     this.results = [];
+    this.isApproximate = false;
     this.distanceMeasurementUnits = new DistanceUnits(this.distanceUnits);
     this.angleMeasurementUnits = new AngleUnits(this.angleUnits);
     this.areaMeasurementUnits = new 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 = 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 DistanceUnits(this.distanceUnits);
     this.areaMeasurementUnits = new AreaUnits(this.distanceUnits);
   }
+  /**
+   * @internal
+   */
   handleAngleUnitsChanged() {
     this.angleMeasurementUnits = new 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 ? (h(Host, null, ((_a = this.visibleSummary) === null || _a === void 0 ? void 0 : _a.angle) != null && (h("div", { class: "measurement-details-entry" }, 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 && (h("div", { class: "measurement-details-entry" }, 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 && (h("div", { class: "measurement-details-entry" }, 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 && (h("div", { class: "measurement-details-entry" }, h("div", { class: "measurement-details-entry-label" }, "Area:"), 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 && (h("div", { class: "measurement-details-entry" }, 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 && (h("div", { class: "measurement-details-entry" }, 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 && (h("div", { class: "measurement-details-entry" }, h("div", { class: "measurement-details-entry-label z-label" }, "Z:"), this.formatDistance((_o = this.visibleSummary.distanceVector) === null || _o === void 0 ? void 0 : _o.z))))) : (h(Host, null));
+    return (h(Host, null, this.renderResult('planar-angle', (result) => (h(PlanarAngleResultEntry, { result: result, overlays: this.measurementOverlays, formatter: this.makeAngleFormatter(), onShowOverlay: this.handleShowOverlay, onHideOverlay: this.handleHideOverlay }))), this.renderResult('planar-distance', (result) => (h(PlanarDistanceResultEntry, { result: result, overlays: this.measurementOverlays, formatter: this.makeDistanceFormatter(), onShowOverlay: this.handleShowOverlay, onHideOverlay: this.handleHideOverlay }))), this.renderResult('surface-area', (result) => (h(SurfaceAreaResultEntry, { result: result, overlays: this.measurementOverlays, formatter: this.makeAreaFormatter(), onShowOverlay: this.handleShowOverlay, onHideOverlay: this.handleHideOverlay }))), this.renderResult('minimum-distance', (result) => (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"]
   }; }
   static get style() { return viewerMeasurementDetailsCss; }
 };
@@ -103547,21 +103865,10 @@ async function getHit(raycaster, pt) {
     return undefined;
 }
 function validMeasurement(start, end) {
-  return {
-    type: 'point-to-point',
-    start,
-    end,
-    distance: vector3.distance(start, end),
-    valid: true,
-  };
+  return { start, end, distance: vector3.distance(start, end), valid: true };
 }
 function invalidMeasurement(start, end) {
-  return {
-    type: 'point-to-point',
-    start,
-    end,
-    valid: false,
-  };
+  return { start, end, valid: false };
 }
 
 function translateWorldPtToViewport(pt, projectionViewMatrix, viewport) {
@@ -103656,6 +103963,11 @@ let ViewerMeasurementDistance = class extends HTMLElement$1 {
     this.__attachShadow();
     this.editBegin = createEvent(this, "editBegin", 7);
     this.editEnd = 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.
@@ -103700,6 +104012,7 @@ let ViewerMeasurementDistance = class extends HTMLElement$1 {
     this.stateMap = {};
     this.model = PointToPointInteractionModel.empty();
     this.controller = new PointToPointInteractionController(this.model);
+    this.overlays = new MeasurementOverlayManager();
     this.measurementUnits = new DistanceUnits(this.units);
     this.isUserInteractingWithModel = false;
     this.handleFrameDrawn = () => {
@@ -103858,13 +104171,13 @@ let ViewerMeasurementDistance = class extends HTMLElement$1 {
     const { startPt, endPt, labelPt, indicatorPt, hideStart, hideEnd } = positions;
     const distance = this.formatDistance(this.distance);
     if (this.mode === 'edit') {
-      return (h(Host, null, h("div", { class: "measurement" }, 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 (h(Host, null, this.showAxisReferenceLines && (h("vertex-viewer-measurement-overlays", { measurementOverlays: this.overlays, viewer: this.viewer })), h("div", { class: "measurement" }, 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 (h(Host, null, h("div", { class: "measurement" }, h(DistanceMeasurementRenderer, { startPt: startPt, endPt: endPt, centerPt: labelPt, indicatorPt: indicatorPt, distance: distance, hideStartAnchor: hideStart, hideEndAnchor: hideEnd, anchorLabelOffset: this.anchorLabelOffset, lineCapLength: this.lineCapLength }))));
+      return (h(Host, null, this.showAxisReferenceLines && (h("vertex-viewer-measurement-overlays", { measurementOverlays: this.overlays, viewer: this.viewer })), h("div", { class: "measurement" }, h(DistanceMeasurementRenderer, { startPt: startPt, endPt: endPt, centerPt: labelPt, indicatorPt: indicatorPt, distance: distance, hideStartAnchor: hideStart, hideEndAnchor: hideEnd, anchorLabelOffset: this.anchorLabelOffset, lineCapLength: this.lineCapLength }))));
     }
     else {
-      return (h(Host, null, h("div", { class: "measurement" }, 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 (h(Host, null, this.showAxisReferenceLines && (h("vertex-viewer-measurement-overlays", { measurementOverlays: this.overlays, viewer: this.viewer })), h("div", { class: "measurement" }, 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" }))));
     }
   }
   /**
@@ -103911,6 +104224,18 @@ let ViewerMeasurementDistance = class extends HTMLElement$1 {
     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;
@@ -104194,6 +104519,112 @@ function getPerpendicularLine(pt, angle, length) {
   return { start, end };
 }
 
+// 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 extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * 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"]
+  }; }
+  static get style() { return viewerMeasurementOverlaysCss; }
+};
+
 // package: vertexvis.protobuf.sceneview.v1
 // file: sceneview/protos/scene_view_api.proto
 
@@ -104293,59 +104724,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}";
@@ -104355,36 +104849,80 @@ let ViewerMeasurementPrecise = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
+    /**
+     * 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;
@@ -104402,24 +104940,23 @@ let ViewerMeasurementPrecise = class extends HTMLElement$1 {
     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"]
@@ -104627,6 +105164,17 @@ let ViewerMeasurements = class extends HTMLElement$1 {
      * 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
@@ -104695,9 +105243,23 @@ let ViewerMeasurements = class extends HTMLElement$1 {
    * @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;
+      }
     });
   }
   /**
@@ -104957,7 +105519,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 extends HTMLElement$1 {
   constructor() {
@@ -105107,12 +105669,13 @@ const VertexViewerMarkupArrow = /*@__PURE__*/proxyCustomElement(ViewerMarkupArro
 const VertexViewerMarkupCircle = /*@__PURE__*/proxyCustomElement(ViewerMarkupCircle, [1,"vertex-viewer-markup-circle",{"bounds":[1040],"boundsJson":[1,"bounds"],"mode":[513],"viewer":[16],"elementBounds":[32],"startPosition":[32],"editAnchor":[32],"resizeBounds":[32]}]);
 const VertexViewerMarkupFreeform = /*@__PURE__*/proxyCustomElement(ViewerMarkupFreeform, [1,"vertex-viewer-markup-freeform",{"points":[1040],"pointsJson":[1,"points"],"bounds":[1040],"boundsJson":[1,"bounds"],"mode":[513],"viewer":[16],"elementBounds":[32],"resizeStartPosition":[32],"editAnchor":[32],"resizeBounds":[32],"resizePoints":[32],"screenPoints":[32]}]);
 const VertexViewerMarkupTool = /*@__PURE__*/proxyCustomElement(ViewerMarkupTool, [1,"vertex-viewer-markup-tool",{"arrowTemplateId":[1,"arrow-template-id"],"circleTemplateId":[1,"circle-template-id"],"freeformTemplateId":[1,"freeform-template-id"],"tool":[1],"disabled":[4],"viewer":[16],"stateMap":[32]}]);
-const VertexViewerMeasurementDetails = /*@__PURE__*/proxyCustomElement(ViewerMeasurementDetails, [1,"vertex-viewer-measurement-details",{"measurementModel":[16],"distanceUnits":[1,"distance-units"],"angleUnits":[1,"angle-units"],"fractionalDigits":[2,"fractional-digits"],"distanceFormatter":[16],"angleFormatter":[16],"areaFormatter":[16],"hiddenDetails":[1040],"hiddenDetailsJson":[1,"hidden-details"],"results":[1040],"summary":[1040],"visibleSummary":[1040]}]);
-const VertexViewerMeasurementDistance = /*@__PURE__*/proxyCustomElement(ViewerMeasurementDistance, [1,"vertex-viewer-measurement-distance",{"start":[1040],"startJson":[1,"start"],"end":[1040],"endJson":[1,"end"],"distance":[1026],"snapDistance":[2,"snap-distance"],"units":[1],"fractionalDigits":[2,"fractional-digits"],"labelFormatter":[16],"anchorLabelOffset":[2,"anchor-label-offset"],"lineCapLength":[2,"line-cap-length"],"mode":[513],"interactingAnchor":[1537,"interacting-anchor"],"invalid":[1540],"camera":[16],"hitProvider":[16],"indicatorPt":[1040],"viewer":[16],"viewport":[32],"elementBounds":[32],"interactionCount":[32],"internalCamera":[32],"invalidateStateCounter":[32],"stateMap":[32]}]);
+const VertexViewerMeasurementDetails = /*@__PURE__*/proxyCustomElement(ViewerMeasurementDetails, [1,"vertex-viewer-measurement-details",{"measurementModel":[16],"measurementOverlays":[16],"distanceUnits":[1,"distance-units"],"angleUnits":[1,"angle-units"],"fractionalDigits":[2,"fractional-digits"],"distanceFormatter":[16],"angleFormatter":[16],"areaFormatter":[16],"resultTypes":[16],"results":[32],"isApproximate":[32],"overlay":[32],"distanceMeasurementUnits":[32],"angleMeasurementUnits":[32],"areaMeasurementUnits":[32]}]);
+const VertexViewerMeasurementDistance = /*@__PURE__*/proxyCustomElement(ViewerMeasurementDistance, [1,"vertex-viewer-measurement-distance",{"start":[1040],"startJson":[1,"start"],"end":[1040],"endJson":[1,"end"],"distance":[1026],"showAxisReferenceLines":[4,"show-axis-reference-lines"],"snapDistance":[2,"snap-distance"],"units":[1],"fractionalDigits":[2,"fractional-digits"],"labelFormatter":[16],"anchorLabelOffset":[2,"anchor-label-offset"],"lineCapLength":[2,"line-cap-length"],"mode":[513],"interactingAnchor":[1537,"interacting-anchor"],"invalid":[1540],"camera":[16],"hitProvider":[16],"indicatorPt":[1040],"viewer":[16],"viewport":[32],"elementBounds":[32],"interactionCount":[32],"internalCamera":[32],"invalidateStateCounter":[32],"stateMap":[32]}]);
 const VertexViewerMeasurementLine = /*@__PURE__*/proxyCustomElement(ViewerMeasurementLine, [1,"vertex-viewer-measurement-line",{"start":[16],"end":[16],"capLength":[2,"cap-length"],"pointerEvents":[1,"pointer-events"]}]);
-const VertexViewerMeasurementPrecise = /*@__PURE__*/proxyCustomElement(ViewerMeasurementPrecise, [1,"vertex-viewer-measurement-precise",{"measurementModel":[16],"measurementController":[1040],"viewer":[16],"configEnv":[1,"config-env"],"config":[16],"entities":[32]}]);
+const VertexViewerMeasurementOverlays = /*@__PURE__*/proxyCustomElement(ViewerMeasurementOverlays, [1,"vertex-viewer-measurement-overlays",{"measurementOverlays":[16],"camera":[1040],"viewer":[16],"overlays":[32]}]);
+const VertexViewerMeasurementPrecise = /*@__PURE__*/proxyCustomElement(ViewerMeasurementPrecise, [1,"vertex-viewer-measurement-precise",{"measurementModel":[16],"measurementOverlays":[16],"measurementController":[1040],"measurableEntityTypes":[16],"viewer":[16],"configEnv":[1,"config-env"],"config":[16],"overlays":[32]}]);
 const VertexViewerMeasurementTool = /*@__PURE__*/proxyCustomElement(ViewerMeasurementTool, [1,"vertex-viewer-measurement-tool",{"distanceTemplateId":[1,"distance-template-id"],"tool":[1],"units":[1],"fractionalDigits":[2,"fractional-digits"],"disabled":[4],"viewer":[16],"isMeasuring":[1540,"is-measuring"],"snapDistance":[2,"snap-distance"],"stateMap":[32]}]);
-const VertexViewerMeasurements = /*@__PURE__*/proxyCustomElement(ViewerMeasurements, [1,"vertex-viewer-measurements",{"distanceTemplateId":[1,"distance-template-id"],"tool":[1],"units":[1],"fractionalDigits":[2,"fractional-digits"],"disabled":[4],"viewer":[16],"selectedMeasurementId":[1025,"selected-measurement-id"],"snapDistance":[2,"snap-distance"]},[[0,"measureEnd","handleMeasureEnd"],[1,"pointerdown","handleMeasurementPointerDown"]]]);
+const VertexViewerMeasurements = /*@__PURE__*/proxyCustomElement(ViewerMeasurements, [1,"vertex-viewer-measurements",{"distanceTemplateId":[1,"distance-template-id"],"tool":[1],"units":[1],"fractionalDigits":[2,"fractional-digits"],"disabled":[4],"viewer":[16],"selectedMeasurementId":[1025,"selected-measurement-id"],"snapDistance":[2,"snap-distance"],"showAxisReferenceLines":[4,"show-axis-reference-lines"],"measurementModel":[16]},[[0,"measureEnd","handleMeasureEnd"],[1,"pointerdown","handleMeasurementPointerDown"]]]);
 const VertexViewerToolbar = /*@__PURE__*/proxyCustomElement(ViewerToolbar, [1,"vertex-viewer-toolbar",{"placement":[1],"direction":[1]}]);
 const VertexViewerToolbarGroup = /*@__PURE__*/proxyCustomElement(ViewerToolbarGroup, [1,"vertex-viewer-toolbar-group",{"direction":[1]}]);
 const VertexViewerViewCube = /*@__PURE__*/proxyCustomElement(ViewerViewCube, [1,"vertex-viewer-view-cube",{"xPositiveLabel":[1,"x-positive-label"],"xNegativeLabel":[1,"x-negative-label"],"yPositiveLabel":[1,"y-positive-label"],"yNegativeLabel":[1,"y-negative-label"],"zPositiveLabel":[1,"z-positive-label"],"zNegativeLabel":[1,"z-negative-label"],"standardViewsOff":[4,"standard-views-off"],"animationDuration":[2,"animation-duration"],"triadOff":[4,"triad-off"],"worldOrientation":[1040],"camera":[1040],"viewer":[16],"boxLength":[32],"triadPosition":[32]}]);
@@ -105144,6 +105707,7 @@ const defineCustomElements = (opts) => {
   VertexViewerMeasurementDetails,
   VertexViewerMeasurementDistance,
   VertexViewerMeasurementLine,
+  VertexViewerMeasurementOverlays,
   VertexViewerMeasurementPrecise,
   VertexViewerMeasurementTool,
   VertexViewerMeasurements,
@@ -105158,4 +105722,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { AngleUnits, AreaUnits, ArrowMarkup, CircleMarkup, colorMaterial as ColorMaterial, CursorManager, DistanceUnits, FreeformMarkup, loadableResource as LoadableResource, MeasurementController, MeasurementEntity, MeasurementModel, Frame as ReceivedFrame, FrameImage as ReceivedFrameImage, FrameScene as ReceivedFrameScene, FramePerspectiveCamera as ReceivedPerspectiveCamera, Scene, SynchronizedClock, VertexSceneTree, VertexSceneTreeSearch, VertexSceneTreeTableCell, VertexSceneTreeTableColumn, VertexSceneTreeTableHeader, VertexSceneTreeTableLayout, VertexSceneTreeTableResizeDivider, VertexSceneTreeToolbar, VertexSceneTreeToolbarGroup, VertexViewer, VertexViewerButton, VertexViewerDefaultToolbar, VertexViewerDomElement, VertexViewerDomGroup, VertexViewerDomRenderer, VertexViewerIcon, VertexViewerLayer, VertexViewerMarkup, VertexViewerMarkupArrow, VertexViewerMarkupCircle, VertexViewerMarkupFreeform, VertexViewerMarkupTool, VertexViewerMeasurementDetails, VertexViewerMeasurementDistance, VertexViewerMeasurementLine, VertexViewerMeasurementPrecise, VertexViewerMeasurementTool, VertexViewerMeasurements, VertexViewerToolbar, VertexViewerToolbarGroup, VertexViewerViewCube, Viewport, __awaiter as _, __generator as a, __spreadArray as b, createCommonjsModule as c, defineCustomElements, measurementCursor, summarizeResults };
+export { AngleUnits, AreaUnits, ArrowMarkup, CircleMarkup, colorMaterial as ColorMaterial, CursorManager, DistanceUnits, EntityType, FreeformMarkup, loadableResource as LoadableResource, MeasurementController, MeasurementEntity, MeasurementModel, MeasurementOverlayManager, Frame as ReceivedFrame, FrameImage as ReceivedFrameImage, FrameScene as ReceivedFrameScene, FramePerspectiveCamera as ReceivedPerspectiveCamera, Scene, SynchronizedClock, VertexSceneTree, VertexSceneTreeSearch, VertexSceneTreeTableCell, VertexSceneTreeTableColumn, VertexSceneTreeTableHeader, VertexSceneTreeTableLayout, VertexSceneTreeTableResizeDivider, VertexSceneTreeToolbar, VertexSceneTreeToolbarGroup, VertexViewer, VertexViewerButton, VertexViewerDefaultToolbar, VertexViewerDomElement, VertexViewerDomGroup, VertexViewerDomRenderer, VertexViewerIcon, VertexViewerLayer, VertexViewerMarkup, VertexViewerMarkupArrow, VertexViewerMarkupCircle, VertexViewerMarkupFreeform, VertexViewerMarkupTool, VertexViewerMeasurementDetails, VertexViewerMeasurementDistance, VertexViewerMeasurementLine, VertexViewerMeasurementOverlays, VertexViewerMeasurementPrecise, VertexViewerMeasurementTool, VertexViewerMeasurements, VertexViewerToolbar, VertexViewerToolbarGroup, VertexViewerViewCube, Viewport, __awaiter as _, __generator as a, __spreadArray as b, createCommonjsModule as c, defineCustomElements, makeMinimumDistanceResult, measurementCursor, measurementWithArrowCursor };