@vertexvis/viewer 0.13.1 → 0.13.2-canary.10

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

@@ -6,15 +6,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e100709a.js');
-const bundle_esm = require('./bundle.esm-dc0a8361.js');
-const streamAttributes = require('./streamAttributes-d6236448.js');
-const browser_esm = require('./browser.esm-31b03292.js');
+const bundle_esm = require('./bundle.esm-618a5fe9.js');
+const streamAttributes = require('./streamAttributes-81eb52f2.js');
+const browser_esm = require('./browser.esm-075810bf.js');
 const index$1 = require('./index-3bc6bac0.js');
-const config = require('./config-90ee43d5.js');
-const cursors = require('./cursors-ad2fd395.js');
-const dom = require('./dom-dd265f48.js');
-const scene = require('./scene-d420fd26.js');
-const viewport = require('./viewport-8c39089f.js');
+const config = require('./config-fb124bac.js');
+const cursors = require('./cursors-d71f6a74.js');
+const dom = require('./dom-57ef84e9.js');
+const scene = require('./scene-92728420.js');
+const viewport = require('./viewport-54b1389d.js');
 require('./_commonjsHelpers-537d719a.js');
 
 /**
@@ -273,52 +273,6 @@ class FlyToPartKeyInteraction {
   }
 }
 
-class FlyToPositionKeyInteraction {
-  constructor(stream, configProvider, imageScaleProvider, sceneProvider) {
-    this.stream = stream;
-    this.configProvider = configProvider;
-    this.imageScaleProvider = imageScaleProvider;
-    this.sceneProvider = sceneProvider;
-  }
-  predicate(e) {
-    return e.altKey && e.shiftKey;
-  }
-  async fn(e) {
-    var _a, _b;
-    const scale = this.imageScaleProvider();
-    const hitResult = await this.stream.hitItems({
-      point: bundle_esm.point.scale(e.position, (scale === null || scale === void 0 ? void 0 : scale.x) || 1, (scale === null || scale === void 0 ? void 0 : scale.y) || 1),
-    }, true);
-    if (((_a = hitResult.hitItems) === null || _a === void 0 ? void 0 : _a.hits) != null &&
-      hitResult.hitItems.hits.length > 0 &&
-      hitResult.hitItems.hits[0].hitPoint != null) {
-      const camera = this.sceneProvider().camera();
-      const hit = hitResult.hitItems.hits[0];
-      if (hit.hitPoint != null &&
-        hit.hitPoint.x != null &&
-        hit.hitPoint.y != null &&
-        hit.hitPoint.z != null) {
-        await this.stream.flyTo({
-          camera: camera
-            .update({
-            lookAt: bundle_esm.vector3.create(hit.hitPoint.x, hit.hitPoint.y, hit.hitPoint.z),
-          })
-            .toFrameCamera(),
-          animation: {
-            duration: streamAttributes.toProtoDuration(this.configProvider().animation.durationMs),
-          },
-        });
-      }
-      else {
-        console.debug(`No hit position found for fly to position [position={x: ${e.position.x}, y: ${e.position.y}}, hit-id={${(_b = hit.itemId) === null || _b === void 0 ? void 0 : _b.hex}}]`);
-      }
-    }
-    else {
-      console.debug(`No hit results found for fly to position [position={x: ${e.position.x}, y: ${e.position.y}}]`);
-    }
-  }
-}
-
 /**
  * The `InteractionApi` provides methods that API developers can use to modify
  * the internal state of an interaction.
@@ -526,27 +480,6 @@ class InteractionApi {
       return camera;
     });
   }
-  /**
-   * Performs a pan operation of the scene's camera, and requests a new image
-   * for the updated scene.
-   *
-   * @param delta A position delta `{x, y}` in the 2D coordinate space of the
-   *  viewer.
-   */
-  async panCameraByDelta(delta) {
-    return this.transformCamera(({ camera, viewport }) => {
-      const vv = camera.viewVector();
-      const u = bundle_esm.vector3.normalize(camera.up);
-      const v = bundle_esm.vector3.normalize(vv);
-      const d = bundle_esm.vector3.magnitude(vv) * Math.tan(camera.fovY);
-      const epsilonX = (delta.x * d) / viewport.width;
-      const epsilonY = (delta.y / viewport.width) * d;
-      const xvec = bundle_esm.vector3.cross(u, v);
-      const yvec = bundle_esm.vector3.cross(v, xvec);
-      const offset = bundle_esm.vector3.add(bundle_esm.vector3.scale(epsilonX, xvec), bundle_esm.vector3.scale(epsilonY, yvec));
-      return camera.moveBy(offset);
-    });
-  }
   /**
    * Performs a view all operation for the scene's bounding box, and requests a
    * new image for the updated scene.
@@ -605,8 +538,8 @@ class InteractionApi {
       return updated.update({
         // Scale the lookAt point to the same length as the distance to the
         // center of the bounding box to maintain zoom and pan behavior.
-        lookAt: bundle_esm.vector3.add(bundle_esm.vector3.scale(camera.distanceToBoundingBoxCenter() /
-          bundle_esm.vector3.magnitude(updated.viewVector()), updated.viewVector()), updated.position),
+        lookAt: bundle_esm.vector3.add(bundle_esm.vector3.scale(Math.abs(camera.signedDistanceToBoundingBoxCenter()) /
+          bundle_esm.vector3.magnitude(updated.viewVector), updated.viewVector), updated.position),
       });
     });
   }
@@ -619,7 +552,7 @@ class InteractionApi {
    */
   async zoomCamera(delta) {
     return this.transformCamera(({ camera, viewport }) => {
-      const vv = camera.viewVector();
+      const vv = camera.viewVector;
       const v = bundle_esm.vector3.normalize(vv);
       const distance = bundle_esm.vector3.magnitude(vv);
       const epsilon = (3 * distance * delta) / viewport.height;
@@ -740,6 +673,235 @@ class InteractionApi {
   }
 }
 
+class InteractionApiOrthographic extends InteractionApi {
+  constructor(stream, cursors, getConfig, getScene, getFrame, getViewport, tapEmitter, doubleTapEmitter, longPressEmitter, interactionStartedEmitter, interactionFinishedEmitter) {
+    super(stream, cursors, getConfig, getScene, getFrame, getViewport, tapEmitter, doubleTapEmitter, longPressEmitter, interactionStartedEmitter, interactionFinishedEmitter);
+  }
+  /**
+   * Performs a pan operation of the scene's camera, and requests a new image
+   * for the updated scene.
+   *
+   * @param delta A position delta `{x, y}` in the 2D coordinate space of the
+   *  viewer.
+   */
+  async panCameraByDelta(delta) {
+    return this.transformCamera(({ camera, viewport }) => {
+      const viewVector = camera.viewVector;
+      const normalizedUpVector = bundle_esm.vector3.normalize(camera.up);
+      const normalizedViewVector = bundle_esm.vector3.normalize(viewVector);
+      const d = bundle_esm.vector3.magnitude(viewVector) * Math.tan(camera.fovHeight);
+      const epsilonX = (delta.x * d) / viewport.width;
+      const epsilonY = (delta.y / viewport.width) * d;
+      const xvec = bundle_esm.vector3.cross(normalizedUpVector, normalizedViewVector);
+      const yvec = bundle_esm.vector3.cross(normalizedViewVector, xvec);
+      const offset = bundle_esm.vector3.add(bundle_esm.vector3.scale(epsilonX, xvec), bundle_esm.vector3.scale(epsilonY, yvec));
+      return camera.moveBy(offset);
+    });
+  }
+  /**
+   * Moves the camera's position and look at to the given screen coordinate.
+   *
+   * If the screen coordinate intersects with an object, the camera will track
+   * the hit point so the mouse position is always under the mouse.
+   *
+   * If the screen coordinate doesn't intersect with an object, then ???.
+   *
+   * @param screenPt A point in screen coordinates.
+   */
+  async panCameraToScreenPoint(screenPt) {
+    return this.transformCamera(({ camera, frame, viewport }) => {
+      // Capture the starting state of the pan.
+      if (this.panData == null) {
+        const startingCamera = camera.toFrameCamera();
+        const direction = startingCamera.direction;
+        const ray = viewport.transformPointToOrthographicRay(screenPt, frame.image, startingCamera);
+        const hitPlane = bundle_esm.plane.fromNormalAndCoplanarPoint(direction, camera.lookAt);
+        const hitPt = bundle_esm.ray.intersectPlane(ray, hitPlane);
+        if (hitPt == null) {
+          console.warn('Cannot determine fallback for pan. Ray does not intersect plane.');
+          return camera;
+        }
+        this.panData = { hitPt, hitPlane, startingCamera };
+      }
+      if (this.panData != null) {
+        const { hitPt, hitPlane, startingCamera } = this.panData;
+        // Use a ray that originates at the screen and intersects with the hit
+        // plane to determine the move distance.
+        const ray = viewport.transformPointToOrthographicRay(screenPt, frame.image, startingCamera);
+        const movePt = bundle_esm.ray.intersectPlane(ray, hitPlane);
+        if (movePt != null) {
+          const delta = bundle_esm.vector3.subtract(hitPt, movePt);
+          return camera.update({
+            lookAt: bundle_esm.vector3.add(startingCamera.lookAt, delta),
+          });
+        }
+      }
+      return camera;
+    });
+  }
+  async zoomCameraToPoint(point, delta) {
+    return this.transformCamera(({ camera, viewport, frame, depthBuffer }) => {
+      if (this.orthographicZoomData == null ||
+        bundle_esm.point.distance(point, this.orthographicZoomData.startingScreenPt) > 2) {
+        const frameCam = camera.toFrameCamera();
+        const dir = frameCam.direction;
+        const ray = viewport.transformPointToOrthographicRay(point, frame.image, frameCam);
+        const fallbackPlane = bundle_esm.plane.fromNormalAndCoplanarPoint(dir, frameCam.lookAt);
+        const fallbackPt = bundle_esm.ray.intersectPlane(ray, fallbackPlane);
+        if (fallbackPt == null) {
+          console.warn('Cannot determine fallback point for zoom. Ray does not intersect plane.');
+          return camera;
+        }
+        const hitPt = depthBuffer != null
+          ? this.getWorldPoint(point, depthBuffer, fallbackPt)
+          : fallbackPt;
+        const hitPlane = bundle_esm.plane.fromNormalAndCoplanarPoint(dir, hitPt);
+        this.orthographicZoomData = {
+          hitPt,
+          hitPlane,
+          startingScreenPt: point,
+        };
+      }
+      if (this.orthographicZoomData != null) {
+        const { hitPt, hitPlane } = this.orthographicZoomData;
+        const relativeDelta = 2 * (camera.fovHeight / viewport.height) * delta;
+        const fovHeight = Math.max(1, camera.fovHeight - relativeDelta);
+        const projectedLookAt = bundle_esm.plane.projectPoint(hitPlane, camera.lookAt);
+        const diff = bundle_esm.vector3.scale((camera.fovHeight - fovHeight) / camera.fovHeight, bundle_esm.vector3.subtract(hitPt, projectedLookAt));
+        return camera.update({
+          lookAt: bundle_esm.vector3.add(camera.lookAt, diff),
+          fovHeight: Math.max(1, camera.fovHeight - relativeDelta),
+        });
+      }
+      return camera;
+    });
+  }
+  getWorldPoint(point, depthBuffer, fallbackPoint) {
+    const viewport = this.getViewport();
+    const framePt = viewport.transformPointToFrame(point, depthBuffer);
+    const hasDepth = depthBuffer.hitTest(framePt);
+    return hasDepth
+      ? viewport.transformPointToOrthographicWorldSpace(point, depthBuffer)
+      : fallbackPoint;
+  }
+  async transformCamera(t) {
+    var _a;
+    if (this.isInteracting()) {
+      const scene = this.getScene();
+      const viewport = this.getViewport();
+      const frame = this.getFrame();
+      const depthBuffer = await (frame === null || frame === void 0 ? void 0 : frame.depthBuffer());
+      this.currentCamera =
+        this.currentCamera != null && viewport != null && frame != null
+          ? t({
+            camera: this.currentCamera,
+            viewport,
+            scale: scene.scale(),
+            boundingBox: scene.boundingBox(),
+            frame,
+            depthBuffer,
+          })
+          : undefined;
+      await ((_a = this.currentCamera) === null || _a === void 0 ? void 0 : _a.render());
+    }
+  }
+}
+
+class InteractionApiPerspective extends InteractionApi {
+  constructor(stream, cursors, getConfig, getScene, getFrame, getViewport, tapEmitter, doubleTapEmitter, longPressEmitter, interactionStartedEmitter, interactionFinishedEmitter) {
+    super(stream, cursors, getConfig, getScene, getFrame, getViewport, tapEmitter, doubleTapEmitter, longPressEmitter, interactionStartedEmitter, interactionFinishedEmitter);
+  }
+  /**
+   * Performs a pan operation of the scene's camera, and requests a new image
+   * for the updated scene.
+   *
+   * @param delta A position delta `{x, y}` in the 2D coordinate space of the
+   *  viewer.
+   */
+  async panCameraByDelta(delta) {
+    return this.transformCamera(({ camera, viewport }) => {
+      var _a;
+      const vv = camera.viewVector;
+      const u = bundle_esm.vector3.normalize(camera.up);
+      const v = bundle_esm.vector3.normalize(vv);
+      const d = bundle_esm.vector3.magnitude(vv) * Math.tan((_a = camera.fovY) !== null && _a !== void 0 ? _a : 45);
+      const epsilonX = (delta.x * d) / viewport.width;
+      const epsilonY = (delta.y / viewport.width) * d;
+      const xvec = bundle_esm.vector3.cross(u, v);
+      const yvec = bundle_esm.vector3.cross(v, xvec);
+      const offset = bundle_esm.vector3.add(bundle_esm.vector3.scale(epsilonX, xvec), bundle_esm.vector3.scale(epsilonY, yvec));
+      return camera.moveBy(offset);
+    });
+  }
+  async transformCamera(t) {
+    var _a;
+    if (this.isInteracting()) {
+      const scene = this.getScene();
+      const viewport = this.getViewport();
+      const frame = this.getFrame();
+      const depthBuffer = await (frame === null || frame === void 0 ? void 0 : frame.depthBuffer());
+      this.currentCamera =
+        this.currentCamera != null && viewport != null && frame != null
+          ? t({
+            camera: this.currentCamera,
+            viewport,
+            scale: scene.scale(),
+            boundingBox: scene.boundingBox(),
+            frame,
+            depthBuffer,
+          })
+          : undefined;
+      await ((_a = this.currentCamera) === null || _a === void 0 ? void 0 : _a.render());
+    }
+  }
+}
+
+class FlyToPositionKeyInteraction {
+  constructor(stream, configProvider, imageScaleProvider, sceneProvider) {
+    this.stream = stream;
+    this.configProvider = configProvider;
+    this.imageScaleProvider = imageScaleProvider;
+    this.sceneProvider = sceneProvider;
+  }
+  predicate(e) {
+    return e.altKey && e.shiftKey;
+  }
+  async fn(e) {
+    var _a, _b;
+    const scale = this.imageScaleProvider();
+    const hitResult = await this.stream.hitItems({
+      point: bundle_esm.point.scale(e.position, (scale === null || scale === void 0 ? void 0 : scale.x) || 1, (scale === null || scale === void 0 ? void 0 : scale.y) || 1),
+    }, true);
+    if (((_a = hitResult.hitItems) === null || _a === void 0 ? void 0 : _a.hits) != null &&
+      hitResult.hitItems.hits.length > 0 &&
+      hitResult.hitItems.hits[0].hitPoint != null) {
+      const camera = this.sceneProvider().camera();
+      const hit = hitResult.hitItems.hits[0];
+      if (hit.hitPoint != null &&
+        hit.hitPoint.x != null &&
+        hit.hitPoint.y != null &&
+        hit.hitPoint.z != null) {
+        await this.stream.flyTo({
+          camera: camera
+            .update({
+            lookAt: bundle_esm.vector3.create(hit.hitPoint.x, hit.hitPoint.y, hit.hitPoint.z),
+          })
+            .toFrameCamera(),
+          animation: {
+            duration: streamAttributes.toProtoDuration(this.configProvider().animation.durationMs),
+          },
+        });
+      }
+      else {
+        console.debug(`No hit position found for fly to position [position={x: ${e.position.x}, y: ${e.position.y}}, hit-id={${(_b = hit.itemId) === null || _b === void 0 ? void 0 : _b.hex}}]`);
+      }
+    }
+    else {
+      console.debug(`No hit results found for fly to position [position={x: ${e.position.x}, y: ${e.position.y}}]`);
+    }
+  }
+}
+
 const SCROLL_WHEEL_DELTA_PERCENTAGES = [0.2, 0.15, 0.25, 0.25, 0.15];
 const DEFAULT_FONT_SIZE = 16;
 const DEFAULT_LINE_HEIGHT = 1.2;
@@ -1221,7 +1383,8 @@ class MultiTouchInteractionHandler {
       (_b = this.interactionApi) === null || _b === void 0 ? void 0 : _b.zoomCamera(zoom);
       (_c = this.interactionApi) === null || _c === void 0 ? void 0 : _c.panCameraByDelta(delta);
       // Setting a minimum angle to prevent wobbling
-      if (Math.abs(angle) > 0.2) {
+      console.log(Math.abs(angle));
+      if (Math.abs(angle) > 0.5) {
         (_d = this.interactionApi) === null || _d === void 0 ? void 0 : _d.twistCamera(angle);
       }
     }
@@ -2272,6 +2435,11 @@ let Viewer = class {
      * the viewer. Enabled by default.
      */
     this.cameraControls = true;
+    /**
+     * The type of camera model to represent the scene with. Can be either
+     * `perspective` or `orthographic`, and defaults to `perspective`.
+     */
+    this.cameraType = 'perspective';
     /**
      * Enables or disables the default keyboard shortcut interactions provided by
      * the viewer. Enabled by default, requires `cameraControls` being enabled.
@@ -2561,6 +2729,11 @@ let Viewer = class {
       (_b = this.baseInteractionHandler) === null || _b === void 0 ? void 0 : _b.setPrimaryInteractionType('rotate');
     }
   }
+  handleCameraTypeChanged(updatedCameraType, previousCameraType) {
+    if (updatedCameraType !== previousCameraType) {
+      this.updateCameraType();
+    }
+  }
   /**
    * @ignore
    */
@@ -2807,7 +2980,9 @@ let Viewer = class {
       this.frame !== frame) {
       const canvas = this.canvasElement.getContext('2d');
       if (canvas != null) {
+        const previousFrame = this.frame;
         this.frame = frame;
+        this.updateInteractionApi(previousFrame);
         const data = {
           canvas,
           canvasDimensions,
@@ -2843,7 +3018,9 @@ let Viewer = class {
     if (this.stream == null) {
       throw new scene.ComponentInitializationError('Cannot create interaction API. Component has not been initialized.');
     }
-    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);
+    return this.frame == null || this.frame.scene.camera.isPerspective()
+      ? new InteractionApiPerspective(this.stream, this.stateMap.cursorManager, () => this.getResolvedConfig().interactions, () => this.createScene(), () => this.frame, () => this.viewport, this.tap, this.doubletap, this.longpress, this.interactionStarted, this.interactionFinished)
+      : new InteractionApiOrthographic(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(() => {
@@ -2903,6 +3080,35 @@ let Viewer = class {
     var _a;
     (_a = this.stream) === null || _a === void 0 ? void 0 : _a.update({ streamAttributes: this.getStreamAttributes() });
   }
+  updateInteractionApi(previousFrame) {
+    if (previousFrame != null && this.frame != null) {
+      const hasChangedFromPerspective = previousFrame.scene.camera.isPerspective() &&
+        this.frame.scene.camera.isOrthographic();
+      const hasChangedFromOrthographic = previousFrame.scene.camera.isOrthographic() &&
+        this.frame.scene.camera.isPerspective();
+      if (hasChangedFromPerspective || hasChangedFromOrthographic) {
+        this.interactionApi = this.createInteractionApi();
+        this.interactionHandlers.forEach((handler) => this.initializeInteractionHandler(handler));
+      }
+    }
+  }
+  updateCameraType() {
+    var _a, _b;
+    if (this.frame != null) {
+      if (this.cameraType === 'orthographic' &&
+        this.frame.scene.camera.isPerspective()) {
+        (_a = this.stream) === null || _a === void 0 ? void 0 : _a.replaceCamera({
+          camera: streamAttributes.toProtobuf(streamAttributes.toOrthographic(this.frame.scene.camera, this.frame.scene.boundingBox)),
+        });
+      }
+      else if (this.cameraType === 'perspective' &&
+        this.frame.scene.camera.isOrthographic()) {
+        (_b = this.stream) === null || _b === void 0 ? void 0 : _b.replaceCamera({
+          camera: streamAttributes.toProtobuf(streamAttributes.toPerspective(this.frame.scene.camera)),
+        });
+      }
+    }
+  }
   getDepthBufferStreamAttributesValue() {
     var _a;
     const depthBuffer = (_a = this.depthBuffers) !== null && _a !== void 0 ? _a : (this.rotateAroundTapPoint ? 'final' : undefined);
@@ -2943,6 +3149,7 @@ let Viewer = class {
   static get watchers() { return {
     "src": ["handleSrcChanged"],
     "rotateAroundTapPoint": ["handleRotateAboutTapPointChanged"],
+    "cameraType": ["handleCameraTypeChanged"],
     "depthBuffers": ["handleDepthBuffersChanged"],
     "experimentalGhostingOpacity": ["handleExperimentalGhostingOpacityChanged"],
     "featureLines": ["handleFeatureLinesChanged"],

package/dist/cjs/viewer.cjs.js

@@ -74,5 +74,5 @@ const patchDynamicImport = (base, orgScriptElm) => {
 
 patchBrowser().then(options => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["vertex-viewer-default-toolbar.cjs",[[1,"vertex-viewer-default-toolbar",{"viewer":[16],"placement":[1],"direction":[1],"animationsDisabled":[4,"animations-disabled"],"animationMs":[2,"animation-ms"]}]]],["vertex-scene-tree.cjs",[[1,"vertex-scene-tree",{"overScanCount":[2,"over-scan-count"],"viewerSelector":[1,"viewer-selector"],"viewer":[1040],"rowData":[16],"config":[16],"configEnv":[1,"config-env"],"controller":[1040],"filterOnMetadata":[1028,"filter-on-metadata"],"metadataKeys":[16],"rows":[32],"totalRows":[32],"stateMap":[32],"connectionErrorDetails":[32],"attemptingRetry":[32],"invalidateRows":[64],"scrollToIndex":[64],"scrollToItem":[64],"expandAll":[64],"collapseAll":[64],"expandItem":[64],"collapseItem":[64],"toggleExpandItem":[64],"toggleItemVisibility":[64],"hideItem":[64],"showItem":[64],"selectItem":[64],"deselectItem":[64],"getRowAtIndex":[64],"getRowForEvent":[64],"getRowAtClientY":[64],"filterItems":[64],"fetchMetadataKeys":[64]},[[0,"search","handleSearch"]]]]],["vertex-viewer-measurement-tool.cjs",[[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]}]]],["vertex-viewer-markup.cjs",[[1,"vertex-viewer-markup",{"arrowTemplateId":[1,"arrow-template-id"],"circleTemplateId":[1,"circle-template-id"],"freeformTemplateId":[1,"freeform-template-id"],"tool":[1],"disabled":[4],"viewer":[16],"selectedMarkupId":[1025,"selected-markup-id"],"selectNew":[4,"select-new"],"toSelectMarkupId":[32],"pointerDownPosition":[32],"addMarkup":[64],"removeMarkup":[64],"getMarkupElements":[64],"getMarkupElement":[64]},[[0,"markupEnd","handleMarkupEnd"],[1,"pointerdown","handleMarkupPointerDown"]]]]],["vertex-viewer-markup-tool.cjs",[[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],"reset":[64]}]]],["vertex-viewer-measurements.cjs",[[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],"addMeasurement":[64],"removeMeasurement":[64],"getMeasurementElement":[64],"getMeasurementElements":[64]},[[0,"measureEnd","handleMeasureEnd"],[1,"pointerdown","handleMeasurementPointerDown"]]]]],["vertex-viewer-view-cube.cjs",[[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]}]]],["vertex-viewer-measurement-precise.cjs",[[1,"vertex-viewer-measurement-precise",{"measurementModel":[16],"measurementOverlays":[16],"measurementController":[1040],"measurableEntityTypes":[16],"viewer":[16],"configEnv":[1,"config-env"],"config":[16],"overlays":[32]}]]],["vertex-scene-tree-table-cell.cjs",[[1,"vertex-scene-tree-table-cell",{"node":[16],"tree":[16],"value":[1],"placeholder":[1],"hoveredNodeId":[1,"hovered-node-id"],"expandToggle":[4,"expand-toggle"],"visibilityToggle":[4,"visibility-toggle"],"interactionsDisabled":[4,"interactions-disabled"],"recurseParentSelectionDisabled":[4,"recurse-parent-selection-disabled"]}]]],["vertex-scene-tree-table-column.cjs",[[1,"vertex-scene-tree-table-column",{"initialWidth":[2,"initial-width"],"minWidth":[2,"min-width"],"maxWidth":[2,"max-width"]}]]],["vertex-scene-tree-table-header.cjs",[[1,"vertex-scene-tree-table-header"]]],["vertex-scene-tree-table-resize-divider.cjs",[[1,"vertex-scene-tree-table-resize-divider",{"dragging":[32]}]]],["vertex-scene-tree-toolbar-group.cjs",[[1,"vertex-scene-tree-toolbar-group"]]],["vertex-viewer.cjs",[[1,"vertex-viewer",{"src":[1],"clientId":[1,"client-id"],"deviceId":[1,"device-id"],"config":[1],"configEnv":[1,"config-env"],"resolvedConfig":[1040],"cameraControls":[4,"camera-controls"],"keyboardControls":[4,"keyboard-controls"],"rotateAroundTapPoint":[4,"rotate-around-tap-point"],"token":[1025],"depthBuffers":[1,"depth-buffers"],"experimentalGhostingOpacity":[2,"experimental-ghosting-opacity"],"featureLines":[16],"featureHighlighting":[16],"featureMaps":[1,"feature-maps"],"selectionMaterial":[1,"selection-material"],"resizeDebounce":[2,"resize-debounce"],"frame":[1040],"stream":[1040],"stencilBuffer":[1040],"viewport":[1040],"dimensions":[32],"hostDimensions":[32],"errorMessage":[32],"cursor":[32],"stateMap":[32],"dispatchFrameDrawn":[64],"registerInteractionHandler":[64],"registerTapKeyInteraction":[64],"getInteractionTarget":[64],"addCursor":[64],"getInteractionHandlers":[64],"getBaseInteractionHandler":[64],"getJwt":[64],"load":[64],"unload":[64],"scene":[64],"isSceneReady":[64]},[[0,"tap","handleTapEvent"]]]]],["vertex-viewer-measurement-details.cjs",[[1,"vertex-viewer-measurement-details",{"measurementModel":[16],"measurementOverlays":[16],"measurementOutcome":[1040],"distanceUnits":[1,"distance-units"],"angleUnits":[1,"angle-units"],"fractionalDigits":[2,"fractional-digits"],"distanceFormatter":[16],"angleFormatter":[16],"areaFormatter":[16],"resultTypes":[16],"overlay":[32],"distanceMeasurementUnits":[32],"angleMeasurementUnits":[32],"areaMeasurementUnits":[32]}]]],["vertex-viewer-measurement-distance.cjs",[[1,"vertex-viewer-measurement-distance",{"start":[1040],"startJson":[1,"start-json"],"end":[1040],"endJson":[1,"end-json"],"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],"measurementModel":[16],"viewport":[32],"elementBounds":[32],"interactionCount":[32],"internalCamera":[32],"invalidateStateCounter":[32],"stateMap":[32],"measurementUnits":[32],"computeElementMetrics":[64]}]]],["vertex-scene-tree-search_3.cjs",[[1,"vertex-scene-tree-search",{"debounce":[2],"disabled":[4],"placeholder":[1],"value":[1025],"focused":[32],"setFocus":[64]}],[1,"vertex-scene-tree-table-layout",{"tree":[16],"controller":[16],"rows":[16],"totalRows":[2,"total-rows"],"rowHeight":[1026,"row-height"],"overScanCount":[2,"over-scan-count"],"rowData":[16],"layoutOffset":[1026,"layout-offset"],"scrollOffset":[1026,"scroll-offset"],"layoutHeight":[1026,"layout-height"],"layoutWidth":[1026,"layout-width"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"columnGridLayout":[32],"columnGridFixedLayout":[32],"hoveredNodeId":[32],"isComputingCellHeight":[32],"lastDividerPointerPosition":[32],"resizingColumnIndex":[32],"stateMap":[32],"scrollToPosition":[64]}],[1,"vertex-scene-tree-toolbar"]]],["vertex-viewer-button_3.cjs",[[1,"vertex-viewer-toolbar",{"placement":[1],"direction":[1]}],[1,"vertex-viewer-button"],[1,"vertex-viewer-toolbar-group",{"direction":[1]}]]],["vertex-viewer-dom-element_3.cjs",[[1,"vertex-viewer-dom-element",{"position":[1040],"positionJson":[1,"position"],"rotation":[1040],"rotationJson":[1,"rotation"],"quaternion":[1040],"quaternionJson":[1,"quaternion"],"scale":[1040],"scaleJson":[1,"scale"],"matrix":[1040],"occlusionOff":[4,"occlusion-off"],"occluded":[516],"billboardOff":[4,"billboard-off"],"interactionsOff":[516,"interactions-off"]}],[1,"vertex-viewer-dom-group",{"position":[1040],"positionJson":[1,"position"],"rotation":[1040],"rotationJson":[1,"rotation"],"quaternion":[1040],"quaternionJson":[1,"quaternion"],"scale":[1040],"scaleJson":[1,"scale"],"matrix":[1040]}],[1,"vertex-viewer-dom-renderer",{"drawMode":[1,"draw-mode"],"viewer":[16],"camera":[1040],"depthBuffer":[1040],"viewport":[32],"invalidateFrameCounter":[32]},[[0,"propertyChange","handlePropertyChange"]]]]],["vertex-viewer-icon.cjs",[[1,"vertex-viewer-icon",{"name":[1],"size":[1]}]]],["vertex-viewer-layer.cjs",[[1,"vertex-viewer-layer",{"stretchOff":[516,"stretch-off"]}]]],["vertex-viewer-markup-arrow_3.cjs",[[1,"vertex-viewer-markup-arrow",{"start":[1040],"startJson":[1,"start"],"end":[1040],"endJson":[1,"end"],"mode":[513],"viewer":[16],"elementBounds":[32],"editAnchor":[32],"dispose":[64]}],[1,"vertex-viewer-markup-circle",{"bounds":[1040],"boundsJson":[1,"bounds"],"mode":[513],"viewer":[16],"elementBounds":[32],"startPosition":[32],"editAnchor":[32],"resizeBounds":[32],"dispose":[64]}],[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],"dispose":[64]}]]],["vertex-viewer-measurement-line_2.cjs",[[1,"vertex-viewer-measurement-overlays",{"measurementOverlays":[16],"camera":[1040],"viewer":[16],"overlays":[32]}],[1,"vertex-viewer-measurement-line",{"start":[16],"end":[16],"capLength":[2,"cap-length"],"pointerEvents":[1,"pointer-events"]}]]]], options);
+  return index.bootstrapLazy([["vertex-viewer-default-toolbar.cjs",[[1,"vertex-viewer-default-toolbar",{"viewer":[16],"placement":[1],"direction":[1],"animationsDisabled":[4,"animations-disabled"],"animationMs":[2,"animation-ms"]}]]],["vertex-scene-tree.cjs",[[1,"vertex-scene-tree",{"overScanCount":[2,"over-scan-count"],"viewerSelector":[1,"viewer-selector"],"viewer":[1040],"rowData":[16],"config":[16],"configEnv":[1,"config-env"],"controller":[1040],"filterOnMetadata":[1028,"filter-on-metadata"],"metadataKeys":[16],"rows":[32],"totalRows":[32],"stateMap":[32],"connectionErrorDetails":[32],"attemptingRetry":[32],"invalidateRows":[64],"scrollToIndex":[64],"scrollToItem":[64],"expandAll":[64],"collapseAll":[64],"expandItem":[64],"collapseItem":[64],"toggleExpandItem":[64],"toggleItemVisibility":[64],"hideItem":[64],"showItem":[64],"selectItem":[64],"deselectItem":[64],"getRowAtIndex":[64],"getRowForEvent":[64],"getRowAtClientY":[64],"filterItems":[64],"fetchMetadataKeys":[64]},[[0,"search","handleSearch"]]]]],["vertex-viewer-measurement-tool.cjs",[[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]}]]],["vertex-viewer-markup.cjs",[[1,"vertex-viewer-markup",{"arrowTemplateId":[1,"arrow-template-id"],"circleTemplateId":[1,"circle-template-id"],"freeformTemplateId":[1,"freeform-template-id"],"tool":[1],"disabled":[4],"viewer":[16],"selectedMarkupId":[1025,"selected-markup-id"],"selectNew":[4,"select-new"],"toSelectMarkupId":[32],"pointerDownPosition":[32],"addMarkup":[64],"removeMarkup":[64],"getMarkupElements":[64],"getMarkupElement":[64]},[[0,"markupEnd","handleMarkupEnd"],[1,"pointerdown","handleMarkupPointerDown"]]]]],["vertex-viewer-markup-tool.cjs",[[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],"reset":[64]}]]],["vertex-viewer-measurements.cjs",[[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],"addMeasurement":[64],"removeMeasurement":[64],"getMeasurementElement":[64],"getMeasurementElements":[64]},[[0,"measureEnd","handleMeasureEnd"],[1,"pointerdown","handleMeasurementPointerDown"]]]]],["vertex-viewer-view-cube.cjs",[[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]}]]],["vertex-viewer-measurement-precise.cjs",[[1,"vertex-viewer-measurement-precise",{"measurementModel":[16],"measurementOverlays":[16],"measurementController":[1040],"measurableEntityTypes":[16],"viewer":[16],"configEnv":[1,"config-env"],"config":[16],"overlays":[32]}]]],["vertex-scene-tree-table-cell.cjs",[[1,"vertex-scene-tree-table-cell",{"node":[16],"tree":[16],"value":[1],"placeholder":[1],"hoveredNodeId":[1,"hovered-node-id"],"expandToggle":[4,"expand-toggle"],"visibilityToggle":[4,"visibility-toggle"],"interactionsDisabled":[4,"interactions-disabled"],"recurseParentSelectionDisabled":[4,"recurse-parent-selection-disabled"]}]]],["vertex-scene-tree-table-column.cjs",[[1,"vertex-scene-tree-table-column",{"initialWidth":[2,"initial-width"],"minWidth":[2,"min-width"],"maxWidth":[2,"max-width"]}]]],["vertex-scene-tree-table-header.cjs",[[1,"vertex-scene-tree-table-header"]]],["vertex-scene-tree-table-resize-divider.cjs",[[1,"vertex-scene-tree-table-resize-divider",{"dragging":[32]}]]],["vertex-scene-tree-toolbar-group.cjs",[[1,"vertex-scene-tree-toolbar-group"]]],["vertex-viewer.cjs",[[1,"vertex-viewer",{"src":[1],"clientId":[1,"client-id"],"deviceId":[1,"device-id"],"config":[1],"configEnv":[1,"config-env"],"resolvedConfig":[1040],"cameraControls":[4,"camera-controls"],"cameraType":[1,"camera-type"],"keyboardControls":[4,"keyboard-controls"],"rotateAroundTapPoint":[4,"rotate-around-tap-point"],"token":[1025],"depthBuffers":[1,"depth-buffers"],"experimentalGhostingOpacity":[2,"experimental-ghosting-opacity"],"featureLines":[16],"featureHighlighting":[16],"featureMaps":[1,"feature-maps"],"selectionMaterial":[1,"selection-material"],"resizeDebounce":[2,"resize-debounce"],"frame":[1040],"stream":[1040],"stencilBuffer":[1040],"viewport":[1040],"dimensions":[32],"hostDimensions":[32],"errorMessage":[32],"cursor":[32],"stateMap":[32],"dispatchFrameDrawn":[64],"registerInteractionHandler":[64],"registerTapKeyInteraction":[64],"getInteractionTarget":[64],"addCursor":[64],"getInteractionHandlers":[64],"getBaseInteractionHandler":[64],"getJwt":[64],"load":[64],"unload":[64],"scene":[64],"isSceneReady":[64]},[[0,"tap","handleTapEvent"]]]]],["vertex-viewer-measurement-details.cjs",[[1,"vertex-viewer-measurement-details",{"measurementModel":[16],"measurementOverlays":[16],"measurementOutcome":[1040],"distanceUnits":[1,"distance-units"],"angleUnits":[1,"angle-units"],"fractionalDigits":[2,"fractional-digits"],"distanceFormatter":[16],"angleFormatter":[16],"areaFormatter":[16],"resultTypes":[16],"overlay":[32],"distanceMeasurementUnits":[32],"angleMeasurementUnits":[32],"areaMeasurementUnits":[32]}]]],["vertex-viewer-measurement-distance.cjs",[[1,"vertex-viewer-measurement-distance",{"start":[1040],"startJson":[1,"start-json"],"end":[1040],"endJson":[1,"end-json"],"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],"measurementModel":[16],"viewport":[32],"elementBounds":[32],"interactionCount":[32],"internalCamera":[32],"invalidateStateCounter":[32],"stateMap":[32],"measurementUnits":[32],"computeElementMetrics":[64]}]]],["vertex-scene-tree-search_3.cjs",[[1,"vertex-scene-tree-search",{"debounce":[2],"disabled":[4],"placeholder":[1],"value":[1025],"focused":[32],"setFocus":[64]}],[1,"vertex-scene-tree-table-layout",{"tree":[16],"controller":[16],"rows":[16],"totalRows":[2,"total-rows"],"rowHeight":[1026,"row-height"],"overScanCount":[2,"over-scan-count"],"rowData":[16],"layoutOffset":[1026,"layout-offset"],"scrollOffset":[1026,"scroll-offset"],"layoutHeight":[1026,"layout-height"],"layoutWidth":[1026,"layout-width"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"columnGridLayout":[32],"columnGridFixedLayout":[32],"hoveredNodeId":[32],"isComputingCellHeight":[32],"lastDividerPointerPosition":[32],"resizingColumnIndex":[32],"stateMap":[32],"scrollToPosition":[64]}],[1,"vertex-scene-tree-toolbar"]]],["vertex-viewer-button_3.cjs",[[1,"vertex-viewer-toolbar",{"placement":[1],"direction":[1]}],[1,"vertex-viewer-button"],[1,"vertex-viewer-toolbar-group",{"direction":[1]}]]],["vertex-viewer-dom-element_3.cjs",[[1,"vertex-viewer-dom-element",{"position":[1040],"positionJson":[1,"position"],"rotation":[1040],"rotationJson":[1,"rotation"],"quaternion":[1040],"quaternionJson":[1,"quaternion"],"scale":[1040],"scaleJson":[1,"scale"],"matrix":[1040],"occlusionOff":[4,"occlusion-off"],"occluded":[516],"billboardOff":[4,"billboard-off"],"interactionsOff":[516,"interactions-off"]}],[1,"vertex-viewer-dom-group",{"position":[1040],"positionJson":[1,"position"],"rotation":[1040],"rotationJson":[1,"rotation"],"quaternion":[1040],"quaternionJson":[1,"quaternion"],"scale":[1040],"scaleJson":[1,"scale"],"matrix":[1040]}],[1,"vertex-viewer-dom-renderer",{"drawMode":[1,"draw-mode"],"viewer":[16],"camera":[1040],"depthBuffer":[1040],"viewport":[32],"invalidateFrameCounter":[32]},[[0,"propertyChange","handlePropertyChange"]]]]],["vertex-viewer-icon.cjs",[[1,"vertex-viewer-icon",{"name":[1],"size":[1]}]]],["vertex-viewer-layer.cjs",[[1,"vertex-viewer-layer",{"stretchOff":[516,"stretch-off"]}]]],["vertex-viewer-markup-arrow_3.cjs",[[1,"vertex-viewer-markup-arrow",{"start":[1040],"startJson":[1,"start"],"end":[1040],"endJson":[1,"end"],"mode":[513],"viewer":[16],"elementBounds":[32],"editAnchor":[32],"dispose":[64]}],[1,"vertex-viewer-markup-circle",{"bounds":[1040],"boundsJson":[1,"bounds"],"mode":[513],"viewer":[16],"elementBounds":[32],"startPosition":[32],"editAnchor":[32],"resizeBounds":[32],"dispose":[64]}],[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],"dispose":[64]}]]],["vertex-viewer-measurement-line_2.cjs",[[1,"vertex-viewer-measurement-overlays",{"measurementOverlays":[16],"camera":[1040],"viewer":[16],"overlays":[32]}],[1,"vertex-viewer-measurement-line",{"start":[16],"end":[16],"capLength":[2,"cap-length"],"pointerEvents":[1,"pointer-events"]}]]]], options);
 });

package/dist/cjs/{viewport-8c39089f.js → viewport-54b1389d.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const bundle_esm = require('./bundle.esm-dc0a8361.js');
+const bundle_esm = require('./bundle.esm-618a5fe9.js');
 
 /**
  * A `Viewport` represents the drawing area in the viewer.
@@ -75,7 +75,7 @@ class Viewport {
     return bundle_esm.point.scale(pt, 1 / scaleX, 1 / scaleY);
   }
   /**
-   * Transforms a point in viewport coordinates to a point in world space
+   * Transforms a point in viewport coordinates to a point in perspective world space
    * coordinates. This method expects a depth buffer in order to compute a value
    * for the Z axis.
    *
@@ -90,6 +90,21 @@ class Viewport {
     const ray = this.transformPointToRay(pt, depthBuffer, depthBuffer.camera);
     return depthBuffer.getWorldPoint(depthPt, ray, fallbackNormalizedDepth);
   }
+  /**
+   * Transforms a point in viewport coordinates to a point in orthographic world space
+   * coordinates. This method expects a depth buffer in order to compute a value
+   * for the Z axis.
+   *
+   * @param pt A point in viewport coordinates.
+   * @param depthBuffer A depth buffer for computing the Z axis.
+   * @param fallbackNormalizedDepth A fallback value if the depth is the max
+   *   depth value, or cannot be determined.
+   */
+  transformPointToOrthographicWorldSpace(pt, depthBuffer, fallbackNormalizedDepth) {
+    const depthPt = this.transformPointToFrame(pt, depthBuffer);
+    const ray = this.transformPointToOrthographicRay(pt, depthBuffer, depthBuffer.camera);
+    return depthBuffer.getOrthographicWorldPoint(depthPt, ray, fallbackNormalizedDepth);
+  }
   /**
    * Transforms a point in viewport coordinates to a ray. The returned ray will
    * have an origin that is at the position of the camera with a direction that
@@ -107,6 +122,23 @@ class Viewport {
     const direction = bundle_esm.vector3.normalize(bundle_esm.vector3.subtract(world, origin));
     return bundle_esm.ray.create({ origin, direction });
   }
+  /**
+   * Transforms a point in viewport coordinates to a ray. The returned ray will
+   * have an origin that is at the world point of viewport coordinate with a direction that
+   * is pointing into world space away from the camera.
+   *
+   * @param pt A point in viewport coordinates.
+   * @param image An image of a frame.
+   * @param camera A camera used to determine orientation of the scene.
+   */
+  transformPointToOrthographicRay(pt, image, camera) {
+    const ndc = this.transformScreenPointToNdc(pt, image);
+    const world = bundle_esm.vector3.transformNdcToWorldSpace(bundle_esm.vector3.create(ndc.x, ndc.y, 0.5), camera.worldMatrix, camera.projectionMatrixInverse);
+    return bundle_esm.ray.create({
+      origin: world,
+      direction: bundle_esm.vector3.normalize(camera.viewVector),
+    });
+  }
   /**
    * Maps a screen point to normalized device coordinates (NDC). A screen point
    * at 0,0 represents the top-left of the viewport.

package/dist/collection/components/scene-tree-table-cell/scene-tree-table-cell.css

@@ -89,11 +89,11 @@ button {
   display: flex;
   align-items: center;
   justify-content: center;
-  visibility: hidden;
   width: 24px;
   height: 24px;
 }
 
+:host(:not([is-hovered]):not([is-partial]):not([is-hidden])) .visibility-btn,
 :host([is-hidden]) .visibility-btn,
 :host([is-partial]) .visibility-btn,
 :host([is-hovered]) .visibility-btn {