@vertexvis/viewer 0.10.2-canary.7 → 0.11.0

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

@@ -2,15 +2,15 @@
  * Copyright (c) 2021 Vertex Software LLC. All rights reserved.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d7400a7.js';
-import { a as getElementBackgroundColor, g as getElementBoundingClientRect, p as parseConfig } from './utils-b857bd7c.js';
-import { v as vector3, i as angle, p as point, e as boundingBox, h as plane, r as ray, l as matrix2, f as dimensions } from './bundle.esm-590d2273.js';
+import { a as getElementBackgroundColor, g as getElementBoundingClientRect, p as parseConfig } from './utils-f8e0baf7.js';
+import { v as vector3, k as angle, p as point, h as plane, r as ray, e as boundingBox, l as matrix2, f as dimensions } from './bundle.esm-d891316f.js';
 import { c as classnames } from './index-455380d0.js';
-import { u as uri, E as EventDispatcher, o as objects, b as async } from './browser.esm-7dbdf78a.js';
-import { I as InvalidCredentialsError, t as toProtoDuration, b as ImageLoadError, p as protoToDate, d as StreamApi, W as WebSocketClientImpl, v as vertexvis, e as defaultSelectionMaterial, f as fromUrn, V as ViewerInitializationError, C as CustomError, g as WebsocketConnectionError, h as currentDateAsProtoTimestamp, a as SynchronizedClock, i as InteractionHandlerError, j as ComponentInitializationError, k as IllegalStateError, m as fromHex, S as Scene } from './scene-30ac6229.js';
-import { S as StencilBufferManager, m as mapWorldOrientationOrThrow, d as mapFrameOrThrow } from './orientation-c3e2af18.js';
-import { V as Viewport } from './viewport-8fea0743.js';
-import { g as getMouseClientPosition, c as cssCursor } from './dom-43682375.js';
-import { C as CursorManager } from './cursors-39294365.js';
+import { u as uri, E as EventDispatcher, o as objects, b as async } from './browser.esm-e4fb17dc.js';
+import { I as InvalidCredentialsError, t as toProtoDuration, b as ImageLoadError, p as protoToDate, d as StreamApi, W as WebSocketClientImpl, v as vertexvis, e as defaultSelectionMaterial, f as fromUrn, V as ViewerInitializationError, C as CustomError, g as WebsocketConnectionError, h as currentDateAsProtoTimestamp, a as SynchronizedClock, i as InteractionHandlerError, j as ComponentInitializationError, k as IllegalStateError, m as fromHex, S as Scene } from './scene-72760305.js';
+import { S as StencilBufferManager, m as mapWorldOrientationOrThrow, d as mapFrameOrThrow } from './orientation-bb34b652.js';
+import { V as Viewport } from './viewport-d6f5cd7b.js';
+import { g as getMouseClientPosition, c as cssCursor } from './dom-d0877f90.js';
+import { C as CursorManager } from './cursors-00835249.js';
 import './_commonjsHelpers-9943807e.js';
 
 function isPromise(obj) {
@@ -659,13 +659,18 @@ class InteractionApi {
     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
+        this.currentCamera != null && viewport != null && frame != null
           ? t({
             camera: this.currentCamera,
-            viewport: scene.viewport(),
+            viewport,
             scale: scene.scale(),
             boundingBox: scene.boundingBox(),
+            frame,
+            depthBuffer,
           })
           : undefined;
       await ((_a = this.currentCamera) === null || _a === void 0 ? void 0 : _a.render());
@@ -690,6 +695,52 @@ class InteractionApi {
       return camera;
     });
   }
+  /**
+   * 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, depthBuffer }) => {
+      // Capture the starting state of the pan.
+      if (this.panData == null) {
+        const startingCamera = camera.toFrameCamera();
+        const direction = startingCamera.direction;
+        const ray$1 = viewport.transformPointToRay(screenPt, frame.image, startingCamera);
+        const fallbackPlane = plane.fromNormalAndCoplanarPoint(direction, camera.lookAt);
+        const fallback = ray.intersectPlane(ray$1, fallbackPlane);
+        if (fallback == null) {
+          console.warn('Cannot determine fallback for pan. Ray does not intersect plane.');
+          return camera;
+        }
+        // Create a plane for the hit point that will be used to determine the
+        // delta of future mouse movements to the original hit point. Fallback
+        // to a plane placed at the look at point, in case there's no hit.
+        const hitPt = depthBuffer != null
+          ? this.getWorldPoint(screenPt, depthBuffer, fallback)
+          : fallback;
+        const hitPlane = plane.fromNormalAndCoplanarPoint(direction, hitPt);
+        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$1 = viewport.transformPointToRay(screenPt, frame.image, startingCamera);
+        const movePt = ray.intersectPlane(ray$1, hitPlane);
+        if (movePt != null) {
+          const delta = vector3.subtract(hitPt, movePt);
+          return camera.update(startingCamera).moveBy(delta);
+        }
+      }
+      return camera;
+    });
+  }
   /**
    * Performs a pan operation of the scene's camera, and requests a new image
    * for the updated scene.
@@ -697,7 +748,7 @@ class InteractionApi {
    * @param delta A position delta `{x, y}` in the 2D coordinate space of the
    *  viewer.
    */
-  async panCamera(delta) {
+  async panCameraByDelta(delta) {
     return this.transformCamera(({ camera, viewport }) => {
       const vv = camera.viewVector();
       const u = vector3.normalize(camera.up);
@@ -737,14 +788,12 @@ class InteractionApi {
     });
   }
   async rotateCameraAtPoint(delta, point) {
-    const frame = this.getFrame();
-    const depthBuffer = await (frame === null || frame === void 0 ? void 0 : frame.depthBuffer());
-    return this.transformCamera(({ camera, viewport, boundingBox: boundingBox$1 }) => {
+    return this.transformCamera(({ camera, viewport, boundingBox: boundingBox$1, depthBuffer }) => {
       if (this.worldRotationPoint == null) {
         const worldCenter = boundingBox.center(boundingBox$1);
         this.worldRotationPoint =
           depthBuffer != null
-            ? this.getWorldRotationPoint(point, depthBuffer, worldCenter)
+            ? this.getWorldPoint(point, depthBuffer, worldCenter)
             : camera.lookAt;
       }
       const upVector = vector3.normalize(camera.up);
@@ -762,8 +811,8 @@ class InteractionApi {
       const angle = Math.abs(epsilonX) + Math.abs(epsilonY);
       const updated = camera.rotateAroundAxisAtPoint(angle, this.worldRotationPoint, rotationAxis);
       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.
+        // 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: vector3.add(vector3.scale(camera.distanceToBoundingBoxCenter() /
           vector3.magnitude(updated.viewVector()), updated.viewVector()), updated.position),
       });
@@ -776,21 +825,49 @@ class InteractionApi {
    * @param delta The distance to zoom. Positive values zoom in and negative
    *  values zoom out.
    */
-  async zoomCamera(delta, ray$1) {
+  async zoomCamera(delta) {
     return this.transformCamera(({ camera, viewport }) => {
       const vv = camera.viewVector();
       const v = vector3.normalize(vv);
-      const vvPlane = plane.create({
-        normal: v,
-      });
-      const pt = ray$1 != null ? ray.intersectPlane(ray$1, vvPlane) : undefined;
-      const zv = pt != null ? vector3.subtract(pt, camera.position) : vv;
-      const direction = vector3.normalize(zv);
-      const distance = vector3.magnitude(zv);
+      const distance = vector3.magnitude(vv);
       const epsilon = (3 * distance * delta) / viewport.height;
-      const position = vector3.add(camera.position, vector3.scale(epsilon, direction));
-      const lookAt = plane.projectPoint(vvPlane, position);
-      return camera.update({ position, lookAt });
+      const position = vector3.add(camera.position, vector3.scale(epsilon, v));
+      const newCamera = camera.update({ position });
+      return newCamera;
+    });
+  }
+  async zoomCameraToPoint(point, delta) {
+    return this.transformCamera(({ camera, viewport, frame, depthBuffer }) => {
+      const cam = frame.scene.camera;
+      const dir = cam.direction;
+      const frameCam = camera.toFrameCamera();
+      const ray$1 = viewport.transformPointToRay(point, frame.image, frameCam);
+      if (this.zoomData == null) {
+        const fallbackPlane = plane.fromNormalAndCoplanarPoint(dir, cam.lookAt);
+        const fallbackPt = ray.intersectPlane(ray$1, 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 = plane.fromNormalAndCoplanarPoint(dir, hitPt);
+        this.zoomData = { hitPt, hitPlane };
+      }
+      if (this.zoomData != null) {
+        const { hitPt, hitPlane } = this.zoomData;
+        const distance = vector3.distance(camera.position, hitPt);
+        const epsilon = (6 * distance * delta) / viewport.height;
+        const position = ray.at(ray$1, epsilon);
+        const lookAt = plane.projectPoint(hitPlane, position);
+        const newCamera = camera.update({ position, lookAt });
+        const newDistance = vector3.distance(position, lookAt);
+        if (newDistance >= newCamera.near) {
+          return newCamera;
+        }
+      }
+      return camera;
     });
   }
   /**
@@ -800,6 +877,8 @@ class InteractionApi {
     if (this.isInteracting()) {
       this.currentCamera = undefined;
       this.worldRotationPoint = undefined;
+      this.panData = undefined;
+      this.zoomData = undefined;
       this.resetLastAngle();
       this.interactionFinishedEmitter.emit();
       await this.stream.endInteraction();
@@ -847,7 +926,7 @@ class InteractionApi {
   isCoarseInputDevice(isTouch) {
     return isTouch || window.matchMedia('(pointer: coarse)').matches;
   }
-  getWorldRotationPoint(point, depthBuffer, fallbackPoint) {
+  getWorldPoint(point, depthBuffer, fallbackPoint) {
     const viewport = this.getViewport();
     const framePt = viewport.transformPointToFrame(point, depthBuffer);
     const hasDepth = depthBuffer.isDepthAtFarPlane(framePt);
@@ -1009,7 +1088,9 @@ class BaseInteractionHandler {
     else if (event.buttons === 2) {
       this.draggingInteraction = this.panInteraction;
     }
-    if (this.draggingInteraction != null && this.interactionApi != null) {
+    if (this.draggingInteraction != null &&
+      this.interactionApi != null &&
+      this.element != null) {
       // Ensure any scroll wheel interactions have been ended prior to beginning
       // another interaction to prevent the interaction from being ended early.
       this.zoomInteraction.endDrag(event, this.interactionApi);
@@ -1043,12 +1124,11 @@ class BaseInteractionHandler {
       const delta = -this.wheelDeltaToPixels(event.deltaY, event.deltaMode) / 10;
       const rect = this.element.getBoundingClientRect();
       const point = getMouseClientPosition(event, rect);
-      const ray = this.interactionApi.getRayFromPoint(point);
       SCROLL_WHEEL_DELTA_PERCENTAGES.forEach((percentage, index) => {
         window.setTimeout(() => {
           if (this.interactionApi != null) {
             const zoomDelta = delta * percentage;
-            this.zoomInteraction.zoomOnRay(zoomDelta, ray, this.interactionApi);
+            this.zoomInteraction.zoomToPoint(point, zoomDelta, this.interactionApi);
           }
         }, index * 2);
       });
@@ -1181,32 +1261,34 @@ class ZoomInteraction extends MouseInteraction {
   }
   beginDrag(event, canvasPosition, api, element) {
     if (this.currentPosition == null) {
-      this.currentPosition = point.create(event.screenX, event.screenY);
-      const rect = element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
+      this.currentPosition = point.create(event.clientX, event.clientY);
+      const rect = element.getBoundingClientRect();
       const point$1 = getMouseClientPosition(event, rect);
-      this.startRay = api.getRayFromPoint(point$1);
+      this.startPt = point$1;
       api.beginInteraction();
     }
   }
   drag(event, api) {
     if (this.currentPosition != null) {
-      const position = point.create(event.screenX, event.screenY);
+      const position = point.create(event.clientX, event.clientY);
       const delta = point.subtract(position, this.currentPosition);
-      api.zoomCamera(delta.y, this.startRay);
-      this.currentPosition = position;
+      if (this.startPt != null) {
+        api.zoomCameraToPoint(this.startPt, delta.y);
+        this.currentPosition = position;
+      }
     }
   }
   endDrag(event, api) {
     super.endDrag(event, api);
     this.stopInteractionTimer();
     this.didTransformBegin = false;
-    this.startRay = undefined;
+    this.startPt = undefined;
   }
   zoom(delta, api) {
     this.operateWithTimer(api, () => api.zoomCamera(delta));
   }
-  zoomOnRay(delta, ray, api) {
-    this.operateWithTimer(api, () => api.zoomCamera(delta, ray));
+  zoomToPoint(pt, delta, api) {
+    this.operateWithTimer(api, () => api.zoomCameraToPoint(pt, delta));
   }
   beginInteraction(api) {
     this.didTransformBegin = true;
@@ -1245,17 +1327,17 @@ class PanInteraction extends MouseInteraction {
     super(...arguments);
     this.type = 'pan';
   }
-  beginDrag(event, canvasPosition, api) {
+  beginDrag(event, canvasPosition, api, element) {
     if (this.currentPosition == null) {
       this.currentPosition = point.create(event.screenX, event.screenY);
+      this.canvasRect = element.getBoundingClientRect();
       api.beginInteraction();
     }
   }
   drag(event, api) {
-    if (this.currentPosition != null) {
-      const position = point.create(event.screenX, event.screenY);
-      const delta = point.subtract(position, this.currentPosition);
-      api.panCamera(delta);
+    if (this.currentPosition != null && this.canvasRect != null) {
+      const position = getMouseClientPosition(event, this.canvasRect);
+      api.panCameraToScreenPoint(position);
       this.currentPosition = position;
     }
   }
@@ -1307,7 +1389,7 @@ class MultiTouchInteractionHandler {
       const angle$1 = angle.toDegrees(Math.atan2(matrix2.determinant(previousToCurrent), matrix2.dot(previousToCurrent)));
       (_a = this.interactionApi) === null || _a === void 0 ? void 0 : _a.beginInteraction();
       (_b = this.interactionApi) === null || _b === void 0 ? void 0 : _b.zoomCamera(zoom);
-      (_c = this.interactionApi) === null || _c === void 0 ? void 0 : _c.panCamera(delta);
+      (_c = this.interactionApi) === null || _c === void 0 ? void 0 : _c.panCameraByDelta(delta);
       (_d = this.interactionApi) === null || _d === void 0 ? void 0 : _d.twistCamera(angle$1);
     }
     this.currentPosition1 = point1;
@@ -2060,6 +2142,7 @@ const Viewer = class {
     this.tokenExpired = createEvent(this, "tokenExpired", 7);
     this.connectionChange = createEvent(this, "connectionChange", 7);
     this.sceneReady = createEvent(this, "sceneReady", 7);
+    this.sceneChanged = createEvent(this, "sceneChanged", 7);
     this.interactionStarted = createEvent(this, "interactionStarted", 7);
     this.interactionFinished = createEvent(this, "interactionFinished", 7);
     this.sessionidchange = createEvent(this, "sessionidchange", 7);
@@ -2461,6 +2544,12 @@ const Viewer = class {
       this.urn = undefined;
       this.stateMap.streamWorldOrientation = undefined;
     }
+    if (this.canvasElement != null) {
+      const context = this.canvasElement.getContext('2d');
+      if (context != null) {
+        context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
+      }
+    }
   }
   /**
    * Returns an object that is used to perform operations on the `Scene` that's
@@ -2523,7 +2612,8 @@ const Viewer = class {
         this.streamId = streamId.hex;
       }
       // Need to parse world orientation.
-      this.stateMap.streamWorldOrientation = mapWorldOrientationOrThrow(worldOrientation);
+      this.stateMap.streamWorldOrientation =
+        mapWorldOrientationOrThrow(worldOrientation);
       console.debug(`Stream connected [stream-id=${this.streamId}, scene-view-id=${this.sceneViewId}]`);
       await this.waitNextDrawnFrame(15 * 1000);
       this.sceneReady.emit();
@@ -2684,6 +2774,9 @@ const Viewer = class {
           viewport: Viewport.fromDimensions(this.getCanvasDimensions() || dimensions.create(0, 0)),
         };
         this.frameReceived.emit(this.frame);
+        if (this.frame.scene.hasChanged) {
+          this.sceneChanged.emit();
+        }
         const drawnFrame = await this.canvasRenderer(data);
         this.dispatchFrameDrawn(drawnFrame);
       }

package/dist/esm/viewer.js

@@ -66,5 +66,5 @@ const patchDynamicImport = (base, orgScriptElm) => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["vertex-viewer-default-toolbar",[[1,"vertex-viewer-default-toolbar",{"viewer":[16],"placement":[1],"direction":[1],"animationsDisabled":[4,"animations-disabled"],"animationMs":[2,"animation-ms"]}]]],["vertex-scene-tree",[[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],"metadataKeys":[16],"isComputingRowHeight":[32],"rows":[32],"totalRows":[32],"scrollTop":[32],"computedRowHeight":[32],"stateMap":[32],"connectionErrorDetails":[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",[[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-view-cube",[[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-markup",[[1,"vertex-viewer-markup",{"arrowTemplateId":[1,"arrow-template-id"],"circleTemplateId":[1,"circle-template-id"],"tool":[1],"disabled":[4],"viewer":[16],"selectedMarkupId":[1025,"selected-markup-id"],"addMarkup":[64],"removeMarkup":[64],"getMarkupElements":[64],"getMarkupElement":[64]},[[0,"markupEnd","handleMarkupEnd"],[0,"markupEditCancel","handleMarkupEditCancel"],[1,"pointerdown","handleMarkupPointerDown"]]]]],["vertex-viewer-markup-tool",[[1,"vertex-viewer-markup-tool",{"arrowTemplateId":[1,"arrow-template-id"],"circleTemplateId":[1,"circle-template-id"],"tool":[1],"disabled":[4],"viewer":[16],"stateMap":[32]}]]],["vertex-viewer-measurements",[[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"],"addMeasurement":[64],"removeMeasurement":[64],"getMeasurementElement":[64],"getMeasurementElements":[64]},[[0,"measureEnd","handleMeasureEnd"],[1,"pointerdown","handleMeasurementPointerDown"]]]]],["vertex-scene-tree-row",[[1,"vertex-scene-tree-row",{"node":[16],"tree":[16],"interactionsDisabled":[4,"interactions-disabled"],"recurseParentSelectionDisabled":[4,"recurse-parent-selection-disabled"]}]]],["vertex-scene-tree-toolbar-group",[[1,"vertex-scene-tree-toolbar-group"]]],["vertex-viewer",[[1,"vertex-viewer",{"src":[1],"clientId":[1,"client-id"],"sessionId":[1,"session-id"],"config":[1],"configEnv":[1,"config-env"],"resolvedConfig":[1040],"cameraControls":[4,"camera-controls"],"keyboardControls":[4,"keyboard-controls"],"rotateAroundTapPoint":[4,"rotate-around-tap-point"],"depthBuffers":[1,"depth-buffers"],"experimentalGhostingOpacity":[2,"experimental-ghosting-opacity"],"featureLines":[16],"selectionMaterial":[1,"selection-material"],"frame":[1040],"streamAttributes":[1040],"stream":[1040],"stencilBuffer":[1040],"dimensions":[32],"hostDimensions":[32],"errorMessage":[32],"cursor":[32],"stateMap":[32],"registerCommand":[64],"dispatchFrameDrawn":[64],"registerInteractionHandler":[64],"registerTapKeyInteraction":[64],"getInteractionTarget":[64],"addCursor":[64],"getInteractionHandlers":[64],"getBaseInteractionHandler":[64],"getJwt":[64],"load":[64],"unload":[64],"scene":[64],"isSceneReady":[64],"handleWebSocketClose":[64]},[[0,"tap","handleTapEvent"]]]]],["vertex-scene-tree-search_2",[[1,"vertex-scene-tree-search",{"debounce":[2],"disabled":[4],"placeholder":[1],"value":[1025],"focused":[32],"setFocus":[64]}],[1,"vertex-scene-tree-toolbar"]]],["vertex-viewer-button_3",[[1,"vertex-viewer-toolbar",{"placement":[1],"direction":[1]}],[1,"vertex-viewer-button"],[1,"vertex-viewer-toolbar-group",{"direction":[1]}]]],["vertex-viewer-dom-element_3",[[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",[[1,"vertex-viewer-icon",{"name":[1],"size":[1]}]]],["vertex-viewer-layer",[[1,"vertex-viewer-layer",{"stretchOff":[516,"stretch-off"]}]]],["vertex-viewer-markup-arrow_2",[[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]}]]],["vertex-viewer-measurement-distance_2",[[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],"depthBuffer":[16],"viewer":[16],"line":[32],"viewport":[32],"elementBounds":[32],"interactionCount":[32],"internalCamera":[32],"internalDepthBuffer":[32],"invalidateStateCounter":[32],"interactiveStartPoint":[32],"interactiveEndPoint":[32],"stateMap":[32],"computeElementMetrics":[64]}],[1,"vertex-viewer-measurement-line",{"start":[16],"end":[16],"capLength":[2,"cap-length"],"pointerEvents":[1,"pointer-events"]}]]]], options);
+  return bootstrapLazy([["vertex-viewer-default-toolbar",[[1,"vertex-viewer-default-toolbar",{"viewer":[16],"placement":[1],"direction":[1],"animationsDisabled":[4,"animations-disabled"],"animationMs":[2,"animation-ms"]}]]],["vertex-scene-tree",[[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],"metadataKeys":[16],"isComputingRowHeight":[32],"rows":[32],"totalRows":[32],"scrollTop":[32],"computedRowHeight":[32],"stateMap":[32],"connectionErrorDetails":[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-markup",[[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"],"addMarkup":[64],"removeMarkup":[64],"getMarkupElements":[64],"getMarkupElement":[64]},[[0,"markupEnd","handleMarkupEnd"],[0,"markupEditCancel","handleMarkupEditCancel"],[1,"pointerdown","handleMarkupPointerDown"]]]]],["vertex-viewer-markup-tool",[[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]}]]],["vertex-viewer-measurement-tool",[[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-view-cube",[[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-measurements",[[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"],"addMeasurement":[64],"removeMeasurement":[64],"getMeasurementElement":[64],"getMeasurementElements":[64]},[[0,"measureEnd","handleMeasureEnd"],[1,"pointerdown","handleMeasurementPointerDown"]]]]],["vertex-scene-tree-row",[[1,"vertex-scene-tree-row",{"node":[16],"tree":[16],"interactionsDisabled":[4,"interactions-disabled"],"recurseParentSelectionDisabled":[4,"recurse-parent-selection-disabled"]}]]],["vertex-scene-tree-toolbar-group",[[1,"vertex-scene-tree-toolbar-group"]]],["vertex-viewer",[[1,"vertex-viewer",{"src":[1],"clientId":[1,"client-id"],"sessionId":[1,"session-id"],"config":[1],"configEnv":[1,"config-env"],"resolvedConfig":[1040],"cameraControls":[4,"camera-controls"],"keyboardControls":[4,"keyboard-controls"],"rotateAroundTapPoint":[4,"rotate-around-tap-point"],"depthBuffers":[1,"depth-buffers"],"experimentalGhostingOpacity":[2,"experimental-ghosting-opacity"],"featureLines":[16],"selectionMaterial":[1,"selection-material"],"frame":[1040],"streamAttributes":[1040],"stream":[1040],"stencilBuffer":[1040],"dimensions":[32],"hostDimensions":[32],"errorMessage":[32],"cursor":[32],"stateMap":[32],"registerCommand":[64],"dispatchFrameDrawn":[64],"registerInteractionHandler":[64],"registerTapKeyInteraction":[64],"getInteractionTarget":[64],"addCursor":[64],"getInteractionHandlers":[64],"getBaseInteractionHandler":[64],"getJwt":[64],"load":[64],"unload":[64],"scene":[64],"isSceneReady":[64],"handleWebSocketClose":[64]},[[0,"tap","handleTapEvent"]]]]],["vertex-scene-tree-search_2",[[1,"vertex-scene-tree-search",{"debounce":[2],"disabled":[4],"placeholder":[1],"value":[1025],"focused":[32],"setFocus":[64]}],[1,"vertex-scene-tree-toolbar"]]],["vertex-viewer-button_3",[[1,"vertex-viewer-toolbar",{"placement":[1],"direction":[1]}],[1,"vertex-viewer-button"],[1,"vertex-viewer-toolbar-group",{"direction":[1]}]]],["vertex-viewer-dom-element_3",[[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",[[1,"vertex-viewer-icon",{"name":[1],"size":[1]}]]],["vertex-viewer-layer",[[1,"vertex-viewer-layer",{"stretchOff":[516,"stretch-off"]}]]],["vertex-viewer-measurement-distance_2",[[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],"depthBuffer":[16],"viewer":[16],"line":[32],"viewport":[32],"elementBounds":[32],"interactionCount":[32],"internalCamera":[32],"internalDepthBuffer":[32],"invalidateStateCounter":[32],"interactiveStartPoint":[32],"interactiveEndPoint":[32],"stateMap":[32],"computeElementMetrics":[64]}],[1,"vertex-viewer-measurement-line",{"start":[16],"end":[16],"capLength":[2,"cap-length"],"pointerEvents":[1,"pointer-events"]}]]],["vertex-viewer-markup-arrow_3",[[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]}]]]], options);
 });

package/dist/esm/{viewport-8fea0743.js → viewport-d6f5cd7b.js}

@@ -1,7 +1,7 @@
 /**!
  * Copyright (c) 2021 Vertex Software LLC. All rights reserved.
  */
-import { f as dimensions, v as vector3, h as plane, p as point, m as matrix4, i as angle, r as ray, g as rectangle } from './bundle.esm-590d2273.js';
+import { f as dimensions, v as vector3, h as plane, p as point, r as ray, g as rectangle } from './bundle.esm-d891316f.js';
 
 /**
  * A `Viewport` represents the drawing area in the viewer.
@@ -102,12 +102,36 @@ class Viewport {
    * @returns
    */
   transformPointToRay(pt, image, camera) {
-    const { position, lookAt, up, aspectRatio, fovY } = camera;
-    const framePt = this.transformPointToFrame(pt, image);
-    const m = matrix4.position(matrix4.makeLookAt(position, lookAt, up), matrix4.makeIdentity());
-    const normal = vector3.normalize(vector3.create((framePt.x / image.frameDimensions.width - 0.5) * aspectRatio, -(framePt.y / image.frameDimensions.height) + 0.5, -0.5 / Math.tan(angle.toRadians(fovY / 2.0))));
-    const direction = vector3.normalize(vector3.transformMatrix(normal, m));
-    return ray.create({ origin: position, direction });
+    const ndc = this.transformScreenPointToNdc(pt, image);
+    const origin = vector3.fromMatrixPosition(camera.worldMatrix);
+    const world = vector3.transformNdcToWorldSpace(vector3.create(ndc.x, ndc.y, 0.5), camera.worldMatrix, camera.projectionMatrixInverse);
+    const direction = vector3.normalize(vector3.subtract(world, origin));
+    return ray.create({ origin, direction });
+  }
+  /**
+   * Maps a screen point to normalized device coordinates (NDC). A screen point
+   * at 0,0 represents the top-left of the viewport.
+   *
+   * @param screenPt A screen point.
+   */
+  transformScreenPointToNdc(screenPt, image) {
+    const framePt = this.transformPointToFrame(screenPt, image);
+    return point.create((framePt.x / image.frameDimensions.width) * 2 - 1, -(framePt.y / image.frameDimensions.height) * 2 + 1);
+  }
+  /**
+   * Maps a point in screen space to a world point that is coplanar with the
+   * camera's near plane.
+   *
+   * @param screenPt The screen point to transform.
+   * @param image An image of frame.
+   * @param camera The camera used to map a 2D point to 3D point.
+   * @returns A point on the screen in world space.
+   */
+  transformPointToScreenWorld(screenPt, image, camera) {
+    const { direction, near } = camera;
+    const ray$1 = this.transformPointToRay(screenPt, image, camera);
+    const screen = plane.create({ normal: direction, constant: near });
+    return ray.intersectPlane(ray$1, screen);
   }
   /**
    * Computes a rectangle that is scaled correctly to be drawn within the

package/dist/types/components/viewer/viewer.d.ts

@@ -173,6 +173,10 @@ export declare class Viewer {
    * Emits an event when the scene is ready to be interacted with.
    */
   sceneReady: EventEmitter<void>;
+  /**
+   * Emits an event when a frame is received with a different scene attribute.
+   */
+  sceneChanged: EventEmitter<void>;
   /**
    * Emits an event when the user has started an interaction.
    */

package/dist/types/components/viewer-markup/utils.d.ts

@@ -22,6 +22,7 @@ export declare function toScreenScaleFactor(dimensions: Dimensions.Dimensions):
  */
 export declare function toRelativeScaleFactor(dimensions: Dimensions.Dimensions): number;
 export declare function translatePointToScreen(pt: Point.Point, canvasDimensions: Dimensions.Dimensions): Point.Point;
+export declare function translatePointToBounds(pt: Point.Point, rect: Rectangle.Rectangle, canvasDimensions: Dimensions.Dimensions): Point.Point;
 export declare function translateDimensionsToScreen(dimensions: Dimensions.Dimensions, canvasDimensions: Dimensions.Dimensions): Dimensions.Dimensions;
 /**
  * Translates a rectangle in relative units, to a rectangle in screen units.
@@ -34,3 +35,10 @@ export declare function translateRectToScreen(rect: Rectangle.Rectangle, canvasD
  * Translates a point in screen units, to a point in relative units.
  */
 export declare function translatePointToRelative(pt: Point.Point, canvasDimensions: Dimensions.Dimensions): Point.Point;
+/**
+ * Translates a set of points in relative `original` units to
+ * points in relative `bounds` units.
+ */
+export declare function translatePointsToBounds(points: Point.Point[], original: Rectangle.Rectangle, bounds: Rectangle.Rectangle): Point.Point[];
+export declare function createRectangle(initialPoint: Point.Point, currentPoint: Point.Point, maintainAspectRatio: boolean): Rectangle.Rectangle;
+export declare function transformRectangle(bounds: Rectangle.Rectangle, start: Point.Point, current: Point.Point, anchor: BoundingBox2dAnchorPosition, maintainAspectRatio?: boolean): Rectangle.Rectangle;

package/dist/types/components/viewer-markup/viewer-markup.d.ts

@@ -14,6 +14,12 @@ export declare class ViewerMarkup {
    * `<vertex-viewer-markup-circle>`.
    */
   circleTemplateId?: string;
+  /**
+   * An HTML template that describes the HTML to use for new freeform
+   * markup. It's expected that the template contains a
+   * `<vertex-viewer-markup-freeform>`.
+   */
+  freeformTemplateId?: string;
   /**
    * The type of markup to perform.
    */
@@ -36,12 +42,12 @@ export declare class ViewerMarkup {
    * Dispatched when a new markup is added, either through user interaction
    * or programmatically.
    */
-  markupAdded: EventEmitter<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement>;
+  markupAdded: EventEmitter<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement>;
   /**
    * Dispatched when a markup is removed, either through user
    * interaction or programmatically.
    */
-  markupRemoved: EventEmitter<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement>;
+  markupRemoved: EventEmitter<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement>;
   private hostEl;
   /**
    * Adds a new markup as a child to this component. A new markup
@@ -54,7 +60,7 @@ export declare class ViewerMarkup {
    * @see {@link ViewerMarkups.arrowTemplateId}
    * @see {@link ViewerMarkups.circleTemplateId}
    */
-  addMarkup(markup: Markup): Promise<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement>;
+  addMarkup(markup: Markup): Promise<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement>;
   /**
    * Removes a markup with the given ID, and returns the HTML element
    * associated to the markup. Returns `undefined` if no markup is
@@ -63,14 +69,14 @@ export declare class ViewerMarkup {
    * @param id The ID of the markup to remove.
    * @returns The markup element, or undefined.
    */
-  removeMarkup(id: string): Promise<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | undefined>;
+  removeMarkup(id: string): Promise<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement | undefined>;
   /**
    * Returns a list of markup elements that are children of this component.
    *
    * @returns A list of all markups.
    * @see {@link ViewerMarkup.getMarkupElement}
    */
-  getMarkupElements(): Promise<Array<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement>>;
+  getMarkupElements(): Promise<Array<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement>>;
   /**
    * Returns the markup element associated to the given ID.
    *
@@ -78,7 +84,7 @@ export declare class ViewerMarkup {
    * @returns A markup element, or `undefined`.
    * @see {@link ViewerMarkup.getMarkupElements}
    */
-  getMarkupElement(id: string): Promise<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | undefined>;
+  getMarkupElement(id: string): Promise<HTMLVertexViewerMarkupArrowElement | HTMLVertexViewerMarkupCircleElement | HTMLVertexViewerMarkupFreeformElement | undefined>;
   /**
    * @ignore
    */
@@ -126,6 +132,7 @@ export declare class ViewerMarkup {
   private appendMarkupElement;
   private createArrowMarkupElement;
   private createCircleMarkupElement;
+  private createFreeformMarkupElement;
   private updatePropsOnMarkups;
   private updatePropsOnMarkup;
   private updatePropsOnMarkupTool;

package/dist/types/components/viewer-markup-circle/utils.d.ts

@@ -1,6 +1,3 @@
-import { Point, Rectangle } from '@vertexvis/geometry';
-import { BoundingBox2dAnchorPosition } from '../viewer-markup/utils';
+import { Rectangle } from '@vertexvis/geometry';
 export declare function isVertexViewerCircleMarkup(el: unknown): el is HTMLVertexViewerMarkupCircleElement;
 export declare function parseBounds(value: string | Rectangle.Rectangle | undefined): Rectangle.Rectangle | undefined;
-export declare function createCircle(initialPoint: Point.Point, currentPoint: Point.Point, maintainAspectRatio: boolean): Rectangle.Rectangle;
-export declare function transformCircle(bounds: Rectangle.Rectangle, start: Point.Point, current: Point.Point, anchor: BoundingBox2dAnchorPosition, maintainAspectRatio?: boolean): Rectangle.Rectangle;

package/dist/types/components/viewer-markup-freeform.tsx/utils.d.ts

@@ -0,0 +1,3 @@
+import { Point } from '@vertexvis/geometry';
+export declare function parsePoints(value: string | Point.Point[] | undefined): Point.Point[] | undefined;
+export declare function isVertexViewerFreeformMarkup(el: unknown): el is HTMLVertexViewerMarkupFreeformElement;