@vertexvis/viewer 0.18.2-testing.0 → 0.18.2-testing.1

package/dist/components/vertex-viewer.js

@@ -1,3543 +0,0 @@
-/*!
- * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
- */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { p as point, v as vector3, c as angle, f as plane, r as ray, b as boundingBox, h as matrix2, d as dimensions } from './bundle.esm.js';
-import { t as toProtoDuration, p as protoToDate, a as StreamApi, S as StreamRequestError, c as currentDateAsProtoTimestamp, W as WebSocketClientImpl } from './bundle.esm2.js';
-import { E as EventDispatcher, m as mapper, c as color, o as objects, u as uri, a as async, b as uuid } from './browser.esm.js';
-import { c as classnames } from './index2.js';
-import { p as parseConfig } from './config.js';
-import { C as CursorManager } from './cursors.js';
-import { g as getMouseClientPosition, c as cssCursor } from './dom.js';
-import { c as ImageLoadError, C as CustomError, W as WebsocketConnectionError, S as SceneRenderError, V as ViewerInitializationError, d as InteractionHandlerError, e as ComponentInitializationError } from './errors.js';
-import { k as fromPbStencilBufferOrThrow, l as decodePng, m as DepthBuffer, E as EntityType, t as toProtobuf, n as toPbStreamAttributes, o as toPbRGBi, p as fromPbFrameOrThrow, q as fromPbStartStreamResponseOrThrow, r as fromPbReconnectResponseOrThrow, s as fromPbSyncTimeResponseOrThrow, u as fromPbRefreshTokenResponseOrThrow, x as copySummaryIfInvalid, y as toOrthographic, z as toPerspective } from './streamAttributes.js';
-import { V as Viewport } from './viewport.js';
-import { f as fromUrn, a as SynchronizedClock, S as Scene } from './scene.js';
-
-/**
- * A value that represents if a pixel does not contain a stencil value.
- */
-const STENCIL_BUFFER_EMPTY_VALUE = 0;
-/**
- * A value that represents if a pixel contains a feature.
- */
-const STENCIL_BUFFER_FEATURE_VALUE = 255;
-/**
- * The `StencilBufferManager` manages the stencil buffer state for the viewer.
- * Stencil buffers are represented as images and contain additional information
- * related to the rendered frame. Examples of information contained within a
- * stencil buffer include: cross section and feature edge positions.
- *
- * This class contains methods for fetching a stencil buffer for the currently
- * rendered frame, as well as helpers that components can use to get an
- * up-to-date stencil buffer after any interactions are performed.
- */
-class StencilBufferManager {
-  /**
-   * Constructs a new stencil buffer manager.
-   *
-   * **Note:** This class is only intended to be constructed by a viewer.
-   *
-   * @param viewer The viewer for this manager.
-   */
-  constructor(viewer) {
-    this.viewer = viewer;
-    this.handleInteractionStarted = () => {
-      this.invalidateStencilBuffer();
-      this.pendingInteractionFinished = new Promise((resolve) => {
-        this.pendingInteractionFinishedResolver = resolve;
-      });
-    };
-    this.handleInteractionFinished = () => {
-      var _a;
-      (_a = this.pendingInteractionFinishedResolver) === null || _a === void 0 ? void 0 : _a.call(this);
-      this.pendingInteractionFinished = undefined;
-      this.pendingInteractionFinishedResolver = undefined;
-    };
-    this.invalidateStencilBuffer = () => {
-      this.pendingStencilBuffer = undefined;
-    };
-    viewer.addEventListener('interactionStarted', this.handleInteractionStarted);
-    viewer.addEventListener('interactionFinished', this.handleInteractionFinished);
-    viewer.addEventListener('frameReceived', () => {
-      this.invalidateStencilBuffer();
-    });
-  }
-  /**
-   * Fetches a stencil buffer for the last rendered frame. Returns `undefined`
-   * if the last frame does not have stencil information.
-   */
-  async fetch() {
-    var _a;
-    const isReady = await this.viewer.isSceneReady();
-    const scene = isReady ? await this.viewer.scene() : undefined;
-    const hasStencil = scene != null
-      ? scene.crossSectioning().current().sectionPlanes.length > 0 ||
-        this.viewer.featureLines != null
-      : false;
-    const camera = (_a = this.viewer.frame) === null || _a === void 0 ? void 0 : _a.scene.camera;
-    if (hasStencil && this.viewer.stream != null && camera != null) {
-      const res = await this.viewer.stream.getStencilBuffer({
-        includeDepthBuffer: true,
-      });
-      const { stencilBuffer: sBytes, depthBuffer: dBytes, imageAttributes, } = fromPbStencilBufferOrThrow(res);
-      const [stencilPng, depthPng] = await Promise.all([
-        decodePng(new Uint8Array(sBytes)),
-        decodePng(new Uint8Array(dBytes)),
-      ]);
-      return StencilBuffer.fromPng(stencilPng, imageAttributes, sBytes, DepthBuffer.fromPng(depthPng, camera, imageAttributes));
-    }
-    else
-      return undefined;
-  }
-  /**
-   * Returns a promise that resolves with the last generated stencil buffer, or
-   * fetches a new stencil buffer if the frame has changed since the last
-   * stencil buffer was fetched. Because the stencil buffer is cached by the
-   * manager, this method can be called multiple times without performing a
-   * network request.
-   *
-   * @see {@link StencilBufferManager.latestAfterInteraction} to wait for
-   * requesting a stencil buffer after an interaction has finished.
-   */
-  latest() {
-    if (this.pendingStencilBuffer == null) {
-      this.pendingStencilBuffer = this.fetch();
-    }
-    return this.pendingStencilBuffer;
-  }
-  /**
-   * Returns a promise that resolves with the latest stencil buffer, once any
-   * interaction is being performed. If no interaction is being performed, then
-   * the promise will resolve immediately with the latest stencil buffer.
-   *
-   * This method is useful for components to fetch the most up-to-date stencil
-   * buffer. Because the stencil buffer is cached by the manager, components can
-   * call this method multiple times without performing a network request.
-   *
-   * @see {@link StencilBufferManager.latest} - used internally by this method.
-   */
-  async latestAfterInteraction() {
-    await this.pendingInteractionFinished;
-    return this.latest();
-  }
-}
-/**
- * Represents a stencil buffer that is managed by `StencilBufferManager`.
- *
- * @see {@link StencilBufferManager} for fetching a stencil buffer.
- */
-class StencilBuffer {
-  /**
-   * Constructor.
-   *
-   * @param imageAttr The attributes of the stencil image.
-   * @param imageBytes The original bytes for the image of the stencil buffer.
-   * @param pixelBytes The PNG pixel data of the stencil buffer.
-   * @param imageChannels The number of color channels.
-   * @param depthBuffer The depth buffer associated with this stencil buffer.
-   */
-  constructor(imageAttr, imageBytes, pixelBytes, imageChannels, depthBuffer) {
-    this.imageAttr = imageAttr;
-    this.imageBytes = imageBytes;
-    this.pixelBytes = pixelBytes;
-    this.imageChannels = imageChannels;
-    this.depthBuffer = depthBuffer;
-  }
-  /**
-   * Constructs a new stencil buffer from a decoded PNG.
-   *
-   * @param png The decoded PNG.
-   * @param imageAttr The attributes of the stencil image.
-   * * @param imageBytes The original bytes for the image of the stencil buffer.
-   * @param depthBuffer The depth buffer associated with this stencil buffer.
-   */
-  static fromPng(png, imageAttr, imageBytes, depthBuffer) {
-    if (!(png.data instanceof Uint8Array)) {
-      throw new Error('Expected stencil PNG to have depth of 8-bit');
-    }
-    else if (png.channels !== 1) {
-      throw new Error('Expected stencil PNG to have 1 color channel');
-    }
-    else {
-      return new StencilBuffer(imageAttr, imageBytes, png.data, png.channels, depthBuffer);
-    }
-  }
-  /**
-   * Returns the color at the given frame position.
-   *
-   * @param pt A position within the frame.
-   * @returns A color at the given position, or `undefined` if the color matches
-   * the stencil buffer's empty color.
-   * @see {@link Viewport.transformPointToFrame} to convert a viewport position
-   * to frame position.
-   */
-  getValue(pt) {
-    const { width, height } = this.imageAttr.imageRect;
-    const offset = point.subtract(pt, this.imageAttr.imageRect);
-    const scale = 1 / this.imageAttr.imageScale;
-    const pixel = point.scale(offset, scale, scale);
-    if (pixel.x >= 0 && pixel.y >= 0 && pixel.x < width && pixel.y < height) {
-      const index = Math.floor(pixel.x) + Math.floor(pixel.y) * width;
-      const value = this.pixelBytes[index];
-      return value;
-    }
-    else
-      return 0;
-  }
-  /**
-   * Performs a hit test of the given point. Returns `true` if the point hits a
-   * pixel in the stencil.
-   *
-   * @param pt A point within the stencil's frame.
-   * @returns `true` if the point hits a pixel in the stencil, `false`
-   * otherwise.
-   */
-  hitTest(pt) {
-    return this.getValue(pt) !== STENCIL_BUFFER_EMPTY_VALUE;
-  }
-  /**
-   * Returns the colored pixel nearest to the given `pt`. This method is useful
-   * for performing snapping operations. An optional predicate can be provided
-   * to filter the pixels that are evaluated.
-   *
-   * @param pt A position within the frame.
-   * @param radius The radius around `pt` to evaluate.
-   * @param predicate An optional predicate. If unspecified, any non-black
-   * pixels are considered.
-   * @returns A point within radius that matches the given predicate.
-   * @see {@link Viewport.transformPointToFrame} to convert a viewport position
-   * to frame position.
-   */
-  snapToNearestPixel(pt, radius, predicate = () => true) {
-    const diameter = radius * 2;
-    const topLeft = point.create(pt.x - radius, pt.y - radius);
-    const pixels = [];
-    for (let i = 0; i < diameter * diameter; i++) {
-      const x = i % diameter;
-      const y = Math.floor(i / diameter);
-      const pixel = point.add(topLeft, { x, y });
-      if (point.distance(pixel, pt) <= radius) {
-        const value = this.getValue(pixel);
-        if (value === STENCIL_BUFFER_FEATURE_VALUE && predicate(value)) {
-          pixels.push(pixel);
-        }
-      }
-    }
-    const sorted = pixels.sort((a, b) => point.distance(a, pt) - point.distance(b, pt));
-    const closest = sorted[0];
-    return closest != null
-      ? point.create(Math.floor(closest.x) + 0.5, Math.floor(closest.y) + 0.5)
-      : pt;
-  }
-}
-
-function isPromise(obj) {
-  return (obj != null &&
-    obj['then'] instanceof Function &&
-    obj['catch'] instanceof Function &&
-    // NOTE: Should be removed if we do not target ES2018.
-    obj['finally'] instanceof Function);
-}
-
-class FlyToPartKeyInteraction {
-  constructor(stream, configProvider, imageScaleProvider) {
-    this.stream = stream;
-    this.configProvider = configProvider;
-    this.imageScaleProvider = imageScaleProvider;
-  }
-  predicate(e) {
-    return e.altKey && !e.shiftKey;
-  }
-  async fn(e) {
-    var _a;
-    const scale = this.imageScaleProvider();
-    const hitResult = await this.stream.hitItems({
-      point: 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) {
-      await this.stream.flyTo({
-        itemId: hitResult.hitItems.hits[0].itemId,
-        animation: {
-          duration: toProtoDuration(this.configProvider().animation.durationMs),
-        },
-      });
-    }
-    else {
-      console.debug(`No hit results found for fly to part [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.
- */
-class InteractionApi {
-  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;
-    this.getViewport = getViewport;
-    this.tapEmitter = tapEmitter;
-    this.doubleTapEmitter = doubleTapEmitter;
-    this.longPressEmitter = longPressEmitter;
-    this.interactionStartedEmitter = interactionStartedEmitter;
-    this.interactionFinishedEmitter = interactionFinishedEmitter;
-    this.tap = this.tap.bind(this);
-    this.doubleTap = this.doubleTap.bind(this);
-    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.
-   *
-   * @param point A point in viewport coordinates.
-   * @returns A ray representing the direction of the point in world
-   * coordinates.
-   */
-  getRayFromPoint(point) {
-    const viewport = this.getViewport();
-    const frame = this.getFrame();
-    if (frame != null) {
-      return viewport.transformPointToRay(point, frame.image, frame.scene.camera);
-    }
-    else
-      throw new Error('Cannot get camera. Frame is undefined.');
-  }
-  /**
-   * Emits a tap event with the provided position relative to the viewer
-   * canvas, along with the set of modifier keys held (if applicable).
-   *
-   * @param position An {x, y} coordinate marking the position of the tap.
-   * @param keyDetails A set of pressed keyboard keys that you want to include
-   *  in the tap event.
-   */
-  async tap(position, keyDetails = {}, buttons = 0) {
-    this.emitTapEvent(this.tapEmitter.emit, position, keyDetails, buttons);
-  }
-  async doubleTap(position, keyDetails = {}, buttons = 0) {
-    this.emitTapEvent(this.doubleTapEmitter.emit, position, keyDetails, buttons);
-  }
-  async longPress(position, keyDetails = {}, buttons = 0) {
-    this.emitTapEvent(this.longPressEmitter.emit, position, keyDetails, buttons);
-  }
-  /**
-   * Marks the start of an interaction. This method must be called before
-   * performing any additional interaction operations. Use `endInteraction()` to
-   * mark the end of an interaction.
-   */
-  async beginInteraction() {
-    if (!this.isInteracting()) {
-      this.interactionStartedEmitter.emit();
-      this.sceneLoadingPromise = this.getScene();
-      this.currentCamera = (await this.sceneLoadingPromise).camera();
-      this.sceneLoadingPromise = undefined;
-      await this.stream.beginInteraction();
-    }
-  }
-  /**
-   * Invokes a function to transform the scene's camera and request a new image
-   * for the updated scene.
-   *
-   * @param t A function to transform the camera. Function will be passed the
-   *  camera and scene viewport and is expected to return an updated camera.
-   */
-  async transformCamera(t) {
-    var _a;
-    if (this.isInteracting()) {
-      const scene = await 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());
-    }
-  }
-  async twistCamera(...args) {
-    return this.transformCamera(({ camera, viewport }) => {
-      const axis = vector3.normalize(vector3.subtract(camera.lookAt, camera.position));
-      if (args.length === 1 && typeof args[0] === 'number') {
-        const angleInRadians = angle.toRadians(-args[0]);
-        return camera.rotateAroundAxis(angleInRadians, axis);
-      }
-      else if (args.length === 1) {
-        const center = point.create(viewport.width / 2, viewport.height / 2);
-        const currentAngle = angle.toDegrees(angle.fromPoints(center, args[0]));
-        const angleDelta = this.lastAngle != null ? currentAngle - this.lastAngle : 0;
-        this.lastAngle = currentAngle;
-        const axis = vector3.normalize(vector3.subtract(camera.lookAt, camera.position));
-        const angleInRadians = angle.toRadians(-angleDelta);
-        return camera.rotateAroundAxis(angleInRadians, axis);
-      }
-      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 view all operation for the scene's bounding box, and requests a
-   * new image for the updated scene.
-   */
-  async viewAll() {
-    await (await this.getScene()).camera().viewAll().render();
-  }
-  /**
-   * Performs a rotate operation of the scene around the camera's look at point,
-   * 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 rotateCamera(delta) {
-    return this.transformCamera(({ camera, viewport }) => {
-      const upVector = vector3.normalize(camera.up);
-      const lookAt = vector3.normalize(vector3.subtract(camera.lookAt, camera.position));
-      const crossX = vector3.cross(upVector, lookAt);
-      const crossY = vector3.cross(lookAt, crossX);
-      const mouseToWorld = vector3.normalize({
-        x: delta.x * crossX.x + delta.y * crossY.x,
-        y: delta.x * crossX.y + delta.y * crossY.y,
-        z: delta.x * crossX.z + delta.y * crossY.z,
-      });
-      const rotationAxis = vector3.cross(mouseToWorld, lookAt);
-      const epsilonX = (3.0 * Math.PI * delta.x) / viewport.width;
-      const epsilonY = (3.0 * Math.PI * delta.y) / viewport.height;
-      const angle = Math.abs(epsilonX) + Math.abs(epsilonY);
-      return camera.rotateAroundAxis(angle, rotationAxis);
-    });
-  }
-  async rotateCameraAtPoint(delta, point) {
-    return this.transformCamera(({ camera, viewport, boundingBox: boundingBox$1, depthBuffer }) => {
-      if (this.worldRotationPoint == null) {
-        const worldCenter = boundingBox.center(boundingBox$1);
-        this.worldRotationPoint =
-          depthBuffer != null
-            ? this.getWorldPoint(point, depthBuffer, worldCenter)
-            : camera.lookAt;
-      }
-      const upVector = vector3.normalize(camera.up);
-      const vv = vector3.normalize(vector3.subtract(camera.lookAt, camera.position));
-      const crossX = vector3.cross(upVector, vv);
-      const crossY = vector3.cross(vv, crossX);
-      const mouseToWorld = vector3.normalize({
-        x: delta.x * crossX.x + delta.y * crossY.x,
-        y: delta.x * crossX.y + delta.y * crossY.y,
-        z: delta.x * crossX.z + delta.y * crossY.z,
-      });
-      const rotationAxis = vector3.cross(mouseToWorld, vv);
-      const epsilonX = (3.0 * Math.PI * delta.x) / viewport.width;
-      const epsilonY = (3.0 * Math.PI * delta.y) / viewport.height;
-      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.
-        lookAt: vector3.add(vector3.scale(Math.abs(camera.signedDistanceToBoundingBoxCenter()) /
-          vector3.magnitude(updated.viewVector), updated.viewVector), updated.position),
-      });
-    });
-  }
-  /**
-   * Performs a zoom operation of the scene's camera, and requests a new image
-   * for the updated scene.
-   *
-   * @param delta The distance to zoom. Positive values zoom in and negative
-   *  values zoom out.
-   */
-  async zoomCamera(delta) {
-    return this.transformCamera(({ camera, viewport }) => {
-      const vv = camera.viewVector;
-      const v = vector3.normalize(vv);
-      const distance = vector3.magnitude(vv);
-      const epsilon = (3 * distance * delta) / viewport.height;
-      const position = vector3.add(camera.position, vector3.scale(epsilon, v));
-      const newCamera = camera.update({ position });
-      return newCamera;
-    });
-  }
-  /**
-   * Performs a pivot operation of the scene's camera, updating the lookAt
-   * while maintaining the position, and requests a new image for the
-   * updated scene.
-   *
-   * @param degreesLocalX The angle to rotate the lookAt point around the local x-axis
-   * @param degreesLocalY The angle to rotate the lookAt point around the local y-axis
-   */
-  async pivotCamera(degreesLocalX, degreesLocalY) {
-    return this.transformCamera(({ camera }) => {
-      const { position, up, lookAt } = camera;
-      const normalizedUp = vector3.normalize(up);
-      const normalizedViewVector = vector3.normalize(camera.viewVector);
-      const xVector = vector3.cross(normalizedUp, normalizedViewVector);
-      const yVector = vector3.cross(normalizedViewVector, xVector);
-      const updatedLookAtX = vector3.rotateAboutAxis(angle.toRadians(degreesLocalX), lookAt, xVector, position);
-      const updatedLookAtY = vector3.rotateAboutAxis(angle.toRadians(degreesLocalY), updatedLookAtX, yVector, position);
-      return camera.update(Object.assign(Object.assign({}, camera), { lookAt: updatedLookAtY }));
-    });
-  }
-  /**
-   * Marks the end of an interaction.
-   */
-  async endInteraction() {
-    await this.sceneLoadingPromise;
-    if (this.isInteracting()) {
-      this.currentCamera = undefined;
-      this.worldRotationPoint = undefined;
-      this.panData = undefined;
-      this.zoomData = undefined;
-      this.resetLastAngle();
-      this.interactionFinishedEmitter.emit();
-      await this.stream.endInteraction();
-    }
-  }
-  /**
-   * resets the last recorded angle for a twist op
-   */
-  resetLastAngle() {
-    this.lastAngle = undefined;
-  }
-  /**
-   * Indicates if the API is in an interacting state.
-   */
-  isInteracting() {
-    return this.currentCamera != null;
-  }
-  /**
-   * Returns the pixel threshold that should be used to detect
-   * movement based on the type of pointer input being coarse or fine.
-   * This threshold is based on the configured `coarsePointerThreshold`
-   * or the `finePointerThreshold` respectively.
-   *
-   * @param isTouch - Whether the event is a touch or not, if false or
-   * undefined, a media query will be used to determine pointer type
-   * @returns The pixel threshold.
-   */
-  pixelThreshold(isTouch) {
-    const pixelThreshold = this.isCoarseInputDevice(isTouch)
-      ? this.getConfig().coarsePointerThreshold
-      : this.getConfig().finePointerThreshold;
-    return pixelThreshold * window.devicePixelRatio;
-  }
-  /**
-   * Performs a hit test at the given point and returns a list of hit results
-   * indicating any scene items that exist at the given point.
-   *
-   * @param pt A point, in viewport coordinates.
-   * @returns A promise that resolves with the list of hit results.
-   */
-  async hitItems(pt) {
-    var _a;
-    const res = await (await this.getScene()).raycaster().hitItems(pt);
-    return (_a = res === null || res === void 0 ? void 0 : res.hits) !== null && _a !== void 0 ? _a : [];
-  }
-  emitTapEvent(emit, position, keyDetails = {}, buttons = 0) {
-    const { altKey = false, ctrlKey = false, metaKey = false, shiftKey = false, } = keyDetails;
-    emit({
-      position,
-      altKey,
-      ctrlKey,
-      metaKey,
-      shiftKey,
-      buttons,
-    });
-  }
-  isCoarseInputDevice(isTouch) {
-    return isTouch || window.matchMedia('(pointer: coarse)').matches;
-  }
-  getWorldPoint(point, depthBuffer, fallbackPoint) {
-    const viewport = this.getViewport();
-    const framePt = viewport.transformPointToFrame(point, depthBuffer);
-    const hasDepth = depthBuffer.hitTest(framePt);
-    return hasDepth
-      ? viewport.transformPointToWorldSpace(point, depthBuffer)
-      : fallbackPoint;
-  }
-}
-
-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);
-  }
-  /**
-   * 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.transformPointToOrthographicWorldSpace(point, depthBuffer, 0.5)
-      : undefined;
-  }
-  /**
-   * 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 = vector3.normalize(camera.up);
-      const normalizedViewVector = vector3.normalize(viewVector);
-      const throttledDelta = point.scale(delta, 0.5, 0.5);
-      const d = vector3.magnitude(viewVector);
-      const epsilonX = (throttledDelta.x * d) / viewport.width;
-      const epsilonY = (throttledDelta.y / viewport.width) * d;
-      const xvec = vector3.cross(normalizedUpVector, normalizedViewVector);
-      const yvec = vector3.cross(normalizedViewVector, xvec);
-      const offset = vector3.add(vector3.scale(epsilonX, xvec), 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$1 = viewport.transformPointToOrthographicRay(screenPt, frame.image, startingCamera);
-        const hitPlane = plane.fromNormalAndCoplanarPoint(direction, camera.lookAt);
-        const hitPt = ray.intersectPlane(ray$1, 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$1 = viewport.transformPointToOrthographicRay(screenPt, frame.image, startingCamera);
-        const movePt = ray.intersectPlane(ray$1, hitPlane);
-        if (movePt != null) {
-          const delta = vector3.subtract(hitPt, movePt);
-          return camera.update({
-            lookAt: vector3.add(startingCamera.lookAt, delta),
-          });
-        }
-      }
-      return camera;
-    });
-  }
-  async zoomCameraToPoint(point$1, delta) {
-    return this.transformCamera(({ camera, viewport, frame, depthBuffer }) => {
-      if (this.orthographicZoomData == null ||
-        point.distance(point$1, this.orthographicZoomData.startingScreenPt) > 2) {
-        const frameCam = camera.toFrameCamera();
-        const dir = frameCam.direction;
-        const ray$1 = viewport.transformPointToOrthographicRay(point$1, frame.image, frameCam);
-        const fallbackPlane = plane.fromNormalAndCoplanarPoint(dir, frameCam.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$1, depthBuffer, fallbackPt)
-          : fallbackPt;
-        const hitPlane = plane.fromNormalAndCoplanarPoint(dir, hitPt);
-        this.orthographicZoomData = {
-          hitPt,
-          hitPlane,
-          startingScreenPt: point$1,
-        };
-      }
-      if (this.orthographicZoomData != null) {
-        const { hitPt, hitPlane } = this.orthographicZoomData;
-        const relativeDelta = 2 * (camera.fovHeight / viewport.height) * delta * 2;
-        const fovHeight = Math.max(1, camera.fovHeight - relativeDelta);
-        const projectedLookAt = plane.projectPoint(hitPlane, camera.lookAt);
-        const diff = vector3.scale((camera.fovHeight - fovHeight) / camera.fovHeight, vector3.subtract(hitPt, projectedLookAt));
-        return camera.update({
-          lookAt: 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 = await 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());
-    }
-  }
-}
-
-const CAMERA_MIN_ZOOM_SCALAR = 0.2;
-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 = vector3.normalize(camera.up);
-      const v = vector3.normalize(vv);
-      const throttledDelta = point.scale(delta, 0.25, 0.25);
-      const d = vector3.magnitude(vv) * Math.tan((_a = camera.fovY) !== null && _a !== void 0 ? _a : 45);
-      const epsilonX = (throttledDelta.x * d) / viewport.width;
-      const epsilonY = (throttledDelta.y / viewport.width) * d;
-      const xvec = vector3.cross(u, v);
-      const yvec = vector3.cross(v, xvec);
-      const offset = vector3.add(vector3.scale(epsilonX, xvec), vector3.scale(epsilonY, yvec));
-      return camera.moveBy(offset);
-    });
-  }
-  async zoomCameraToPoint(point, delta) {
-    return this.transformCamera(({ camera, viewport, frame, depthBuffer, boundingBox }) => {
-      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 { hitPlane } = this.zoomData;
-        const { position, distance, isPastHitPlane, keepCurrent } = this.computeZoomDistances(delta, camera, viewport, boundingBox, ray$1, this.zoomData);
-        if (isPastHitPlane && !keepCurrent) {
-          const viewVectorRay = ray.create({
-            origin: position,
-            direction: vector3.normalize(camera.viewVector),
-          });
-          return camera.update({
-            position,
-            lookAt: ray.at(viewVectorRay, distance),
-          });
-        }
-        else if (!keepCurrent) {
-          return camera.update({
-            position,
-            lookAt: plane.projectPoint(hitPlane, position),
-          });
-        }
-      }
-      return camera;
-    });
-  }
-  async transformCamera(t) {
-    var _a;
-    if (this.isInteracting()) {
-      const scene = await 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());
-    }
-  }
-  computeZoomDistances(delta, camera, viewport, boundingBox, pointRay, zoomData) {
-    const config = this.getConfig();
-    const { hitPt, hitPlane } = zoomData;
-    const minDistance = config.useMinimumPerspectiveZoomDistance
-      ? this.computeZoomMinimumDistance(camera, boundingBox)
-      : -1;
-    const expectedDistance = vector3.distance(camera.position, hitPt);
-    const actualDistance = Math.max(minDistance, expectedDistance);
-    const epsilon = (6 * actualDistance * delta) / viewport.height;
-    const expectedPosition = ray.at(pointRay, epsilon);
-    const expectedViewVector = ray.create({
-      origin: expectedPosition,
-      direction: vector3.normalize(camera.viewVector),
-    });
-    const expectedIntersection = ray.intersectPlane(expectedViewVector, hitPlane);
-    if (expectedIntersection == null &&
-      config.useMinimumPerspectiveZoomDistance) {
-      const minDistanceEpsilon = (6 * minDistance * delta) / viewport.height;
-      const position = ray.at(pointRay, minDistanceEpsilon);
-      return {
-        position,
-        distance: minDistance,
-        isPastHitPlane: true,
-        keepCurrent: false,
-      };
-    }
-    else if (expectedIntersection == null) {
-      return {
-        position: camera.position,
-        distance: actualDistance,
-        isPastHitPlane: true,
-        keepCurrent: true,
-      };
-    }
-    return {
-      position: expectedPosition,
-      distance: actualDistance,
-      isPastHitPlane: false,
-      keepCurrent: false,
-    };
-  }
-  computeZoomMinimumDistance(camera, boundingBox) {
-    const xLength = Math.abs(boundingBox.min.x) + Math.abs(boundingBox.max.x);
-    const yLength = Math.abs(boundingBox.min.y) + Math.abs(boundingBox.max.y);
-    const zLength = Math.abs(boundingBox.min.z) + Math.abs(boundingBox.max.z);
-    const maxLength = Math.max(xLength, yLength, zLength);
-    const absDotX = Math.abs(vector3.dot(vector3.normalize(camera.viewVector), vector3.right()));
-    const absDotY = Math.abs(vector3.dot(vector3.normalize(camera.viewVector), vector3.up()));
-    const absDotZ = Math.abs(vector3.dot(vector3.normalize(camera.viewVector), vector3.back()));
-    const scaledLengthX = xLength * absDotX;
-    const scaledLengthY = yLength * absDotY;
-    const scaledLengthZ = zLength * absDotZ;
-    const relevanceLengthX = maxLength / xLength;
-    const relevanceLengthY = maxLength / yLength;
-    const relevanceLengthZ = maxLength / zLength;
-    return (((scaledLengthX + scaledLengthY + scaledLengthZ) /
-      (relevanceLengthX + relevanceLengthY + relevanceLengthZ)) *
-      CAMERA_MIN_ZOOM_SCALAR);
-  }
-}
-
-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: 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 = (await 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: toProtobuf(camera
-            .update({
-            lookAt: vector3.create(hit.hitPoint.x, hit.hitPoint.y, hit.hitPoint.z),
-          })
-            .toFrameCamera()),
-          animation: {
-            duration: 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;
-class BaseInteractionHandler {
-  constructor(downEvent, upEvent, moveEvent, rotateInteraction, rotatePointInteraction, zoomInteraction, panInteraction, twistInteraction, pivotInteraction, getConfig) {
-    this.downEvent = downEvent;
-    this.upEvent = upEvent;
-    this.moveEvent = moveEvent;
-    this.rotateInteraction = rotateInteraction;
-    this.rotatePointInteraction = rotatePointInteraction;
-    this.zoomInteraction = zoomInteraction;
-    this.panInteraction = panInteraction;
-    this.twistInteraction = twistInteraction;
-    this.pivotInteraction = pivotInteraction;
-    this.getConfig = getConfig;
-    this.primaryInteraction = this.rotateInteraction;
-    this.isDragging = false;
-    this.keyboardControls = false;
-    this.disableIndividualInteractions = false;
-    this.primaryInteractionTypeChange = new EventDispatcher();
-    this.handleDownEvent = this.handleDownEvent.bind(this);
-    this.handleMouseWheel = this.handleMouseWheel.bind(this);
-    this.handleWindowMove = this.handleWindowMove.bind(this);
-    this.handleWindowUp = this.handleWindowUp.bind(this);
-    this.handleDoubleClick = this.handleDoubleClick.bind(this);
-  }
-  initialize(element, api) {
-    this.element = element;
-    this.interactionApi = api;
-    element.addEventListener(this.downEvent, this.handleDownEvent);
-    element.addEventListener('mousedown', this.handleDoubleClick);
-    element.addEventListener('wheel', this.handleMouseWheel);
-  }
-  dispose() {
-    var _a, _b, _c;
-    (_a = this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener(this.downEvent, this.handleDownEvent);
-    (_b = this.element) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousedown', this.handleDoubleClick);
-    (_c = this.element) === null || _c === void 0 ? void 0 : _c.removeEventListener('wheel', this.handleMouseWheel);
-    this.element = undefined;
-  }
-  onPrimaryInteractionTypeChange(listener) {
-    return this.primaryInteractionTypeChange.on(listener);
-  }
-  setCurrentInteractionType(type) {
-    var _a;
-    switch (type) {
-      case 'rotate':
-        this.currentInteraction = this.rotateInteraction;
-        break;
-      case 'zoom':
-        this.currentInteraction = this.zoomInteraction;
-        break;
-      case 'pan':
-        this.currentInteraction = this.panInteraction;
-        break;
-      case 'twist':
-        this.currentInteraction = this.twistInteraction;
-        break;
-      case 'rotate-point':
-        this.currentInteraction = this.rotatePointInteraction;
-        break;
-      case 'pivot':
-        this.currentInteraction = this.pivotInteraction;
-        break;
-      default:
-        this.currentInteraction = undefined;
-    }
-    if (this.draggingInteraction) {
-      const point = this.draggingInteraction.getPosition();
-      this.draggingInteraction =
-        this.currentInteraction || this.primaryInteraction;
-      (_a = this.interactionApi) === null || _a === void 0 ? void 0 : _a.resetLastAngle();
-      this.draggingInteraction.setPosition(point);
-    }
-  }
-  getPrimaryInteractionType() {
-    return this.primaryInteraction.getType();
-  }
-  getCurrentInteractionType() {
-    return (this.currentInteraction || this.primaryInteraction).getType();
-  }
-  setPrimaryInteractionType(type) {
-    switch (type) {
-      case 'rotate':
-        this.primaryInteraction = this.rotateInteraction;
-        this.lastPrimaryRotateInteraction = this.rotateInteraction;
-        break;
-      case 'rotate-point':
-        this.primaryInteraction = this.rotatePointInteraction;
-        this.lastPrimaryRotateInteraction = this.rotatePointInteraction;
-        break;
-      case 'zoom':
-        this.primaryInteraction = this.zoomInteraction;
-        break;
-      case 'pan':
-        this.primaryInteraction = this.panInteraction;
-        break;
-      case 'pivot':
-        this.primaryInteraction = this.pivotInteraction;
-        break;
-    }
-    this.primaryInteractionTypeChange.emit();
-  }
-  setDefaultKeyboardControls(keyboardControls) {
-    this.keyboardControls = keyboardControls;
-  }
-  handleDownEvent(event) {
-    // Prevent selection of any text while interacting with the model.
-    event.preventDefault();
-    this.interactionTimer = window.setTimeout(() => {
-      this.downPosition = point.create(event.screenX, event.screenY);
-      this.downPositionCanvas = this.getCanvasPosition(event);
-      this.interactionTimer = undefined;
-      // Perform the current movement in the case that the interaction timer elapses
-      if (this.lastMoveEvent != null) {
-        this.handleWindowMove(this.lastMoveEvent);
-      }
-    }, this.getConfig().interactions.interactionDelay);
-    window.addEventListener(this.moveEvent, this.handleWindowMove);
-    window.addEventListener(this.upEvent, this.handleWindowUp);
-  }
-  handleWindowMove(event) {
-    if (this.interactionTimer == null) {
-      if (this.disableIndividualInteractions) {
-        return;
-      }
-      const position = point.create(event.screenX, event.screenY);
-      const pixelThreshold = this.interactionApi != null
-        ? this.interactionApi.pixelThreshold(this.isTouch(event))
-        : 2;
-      if (this.downPosition != null &&
-        point.distance(position, this.downPosition) >= pixelThreshold &&
-        !this.isDragging) {
-        this.beginDrag(event);
-        this.isDragging = true;
-      }
-      if (this.isDragging) {
-        this.drag(event);
-      }
-    }
-    this.lastMoveEvent = event;
-  }
-  async handleWindowUp(event) {
-    if (this.isDragging) {
-      this.endDrag(event);
-      this.isDragging = false;
-    }
-    if (this.interactionTimer != null) {
-      window.clearTimeout(this.interactionTimer);
-      this.interactionTimer = undefined;
-    }
-    window.removeEventListener(this.moveEvent, this.handleWindowMove);
-    window.removeEventListener(this.upEvent, this.handleWindowUp);
-    this.lastMoveEvent = undefined;
-  }
-  async handleDoubleClick(event) {
-    // event.detail is the number of clicks that have happened recently. If the number is 2, then the user double clicked.
-    if (event.detail === 2 &&
-      event.buttons === 4 &&
-      this.interactionApi != null) {
-      this.interactionApi.viewAll();
-    }
-  }
-  beginDrag(event) {
-    var _a;
-    if (this.keyboardControls && event.metaKey && event.shiftKey) {
-      this.currentInteraction = this.rotatePointInteraction;
-    }
-    else if (this.keyboardControls && event.shiftKey && event.altKey) {
-      this.currentInteraction = this.twistInteraction;
-    }
-    else if (this.keyboardControls && event.shiftKey) {
-      this.currentInteraction = this.zoomInteraction;
-    }
-    else if (this.keyboardControls && (event.metaKey || event.ctrlKey)) {
-      this.currentInteraction = this.panInteraction;
-    }
-    else if (this.keyboardControls && event.altKey) {
-      this.currentInteraction = this.rotateInteraction;
-    }
-    if (event.buttons === 1) {
-      this.draggingInteraction =
-        this.currentInteraction || this.primaryInteraction;
-    }
-    else if (event.buttons === 2) {
-      this.draggingInteraction = this.panInteraction;
-    }
-    else if (event.buttons === 4) {
-      this.draggingInteraction =
-        (_a = this.lastPrimaryRotateInteraction) !== null && _a !== void 0 ? _a : this.rotateInteraction;
-    }
-    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);
-      this.draggingInteraction.beginDrag(event, this.downPositionCanvas || point.create(event.clientX, event.clientY), this.interactionApi, this.element);
-    }
-  }
-  drag(event) {
-    if (this.keyboardControls && event.altKey && event.shiftKey) {
-      this.currentInteraction = this.twistInteraction;
-    }
-    else {
-      this.currentInteraction = undefined;
-    }
-    this.draggingInteraction =
-      this.currentInteraction ||
-        this.draggingInteraction ||
-        this.primaryInteraction;
-    if (this.draggingInteraction != null && this.interactionApi != null) {
-      this.draggingInteraction.drag(event, this.interactionApi);
-    }
-  }
-  endDrag(event) {
-    if (this.keyboardControls &&
-      this.currentInteraction === this.twistInteraction) {
-      this.currentInteraction = undefined;
-    }
-    if (this.draggingInteraction != null && this.interactionApi != null) {
-      this.draggingInteraction.endDrag(event, this.interactionApi);
-      this.draggingInteraction = undefined;
-    }
-  }
-  handleMouseWheel(event) {
-    event.preventDefault();
-    if (this.element != null &&
-      this.interactionApi != null &&
-      event.buttons !== 4) {
-      const delta = -this.wheelDeltaToPixels(event.deltaY, event.deltaMode) / 10;
-      const rect = this.element.getBoundingClientRect();
-      const point = getMouseClientPosition(event, rect);
-      SCROLL_WHEEL_DELTA_PERCENTAGES.forEach((percentage, index) => {
-        window.setTimeout(() => {
-          if (this.interactionApi != null) {
-            const zoomDelta = delta * percentage;
-            this.zoomInteraction.zoomToPoint(point, zoomDelta, this.interactionApi);
-          }
-        }, index * 2);
-      });
-    }
-  }
-  wheelDeltaToPixels(deltaY, deltaMode) {
-    if (this.computedBodyStyle == null) {
-      this.computedBodyStyle = window.getComputedStyle(document.body);
-    }
-    const defaultLineHeight = this.computedBodyStyle.fontSize != null &&
-      this.computedBodyStyle.fontSize !== '' &&
-      !isNaN(parseFloat(this.computedBodyStyle.fontSize))
-      ? parseFloat(this.computedBodyStyle.fontSize) * DEFAULT_LINE_HEIGHT
-      : DEFAULT_FONT_SIZE * DEFAULT_LINE_HEIGHT;
-    if (deltaMode === 1) {
-      // deltaMode 1 corresponds to DOM_DELTA_LINE, which computes deltas in lines
-      return this.computedBodyStyle.lineHeight != null &&
-        this.computedBodyStyle.lineHeight !== '' &&
-        !isNaN(parseFloat(this.computedBodyStyle.lineHeight))
-        ? deltaY * parseFloat(this.computedBodyStyle.lineHeight)
-        : deltaY * defaultLineHeight;
-    }
-    else if (deltaMode === 2) {
-      // deltaMode 2 corresponds to DOM_DELTA_PAGE, which computes deltas in pages
-      return this.computedBodyStyle.height != null &&
-        this.computedBodyStyle.height !== '' &&
-        !isNaN(parseFloat(this.computedBodyStyle.height))
-        ? deltaY * parseFloat(this.computedBodyStyle.height)
-        : deltaY * window.innerHeight;
-    }
-    // deltaMode 0 corresponds to DOM_DELTA_PIXEL, which computes deltas in pixels
-    return deltaY;
-  }
-  getCanvasPosition(event) {
-    var _a;
-    const canvasBounds = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    const canvasOffset = canvasBounds != null
-      ? point.create(canvasBounds.left, canvasBounds.top)
-      : undefined;
-    return canvasOffset != null
-      ? point.subtract(point.create(event.clientX, event.clientY), canvasOffset)
-      : undefined;
-  }
-  isTouch(event) {
-    return window.PointerEvent != null && event instanceof PointerEvent
-      ? event.pointerType === 'touch'
-      : false;
-  }
-}
-
-class MouseInteraction {
-  setPosition(position) {
-    this.currentPosition = position;
-  }
-  getPosition() {
-    return this.currentPosition;
-  }
-  getType() {
-    return this.type;
-  }
-  beginDrag(event, canvasPosition, api, element) {
-    // noop
-  }
-  drag(event, api) {
-    // noop
-  }
-  endDrag(event, api) {
-    if (this.currentPosition != null) {
-      api.endInteraction();
-      this.currentPosition = undefined;
-    }
-  }
-  zoom(delta, api) {
-    // noop
-  }
-}
-class RotateInteraction extends MouseInteraction {
-  constructor() {
-    super(...arguments);
-    this.type = 'rotate';
-  }
-  beginDrag(event, canvasPosition, api) {
-    if (this.currentPosition == null) {
-      this.currentPosition = point.create(event.screenX, event.screenY);
-      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.rotateCamera(delta);
-      this.currentPosition = position;
-    }
-  }
-  endDrag(event, api) {
-    super.endDrag(event, api);
-  }
-}
-class RotatePointInteraction extends MouseInteraction {
-  constructor() {
-    super(...arguments);
-    this.type = 'rotate-point';
-  }
-  beginDrag(event, canvasPosition, api) {
-    if (this.currentPosition == null) {
-      this.currentPosition = point.create(event.screenX, event.screenY);
-      this.startingPosition = canvasPosition;
-      api.beginInteraction();
-    }
-  }
-  drag(event, api) {
-    if (this.currentPosition != null && this.startingPosition != null) {
-      const position = point.create(event.screenX, event.screenY);
-      const delta = point.subtract(position, this.currentPosition);
-      api.rotateCameraAtPoint(delta, this.startingPosition);
-      this.currentPosition = position;
-    }
-  }
-  endDrag(event, api) {
-    super.endDrag(event, api);
-  }
-}
-class ZoomInteraction extends MouseInteraction {
-  constructor(interactionTimeout = 1000) {
-    super();
-    this.interactionTimeout = interactionTimeout;
-    this.type = 'zoom';
-    this.didTransformBegin = false;
-  }
-  beginDrag(event, canvasPosition, api, element) {
-    if (this.currentPosition == null) {
-      this.currentPosition = point.create(event.clientX, event.clientY);
-      const rect = element.getBoundingClientRect();
-      const point$1 = getMouseClientPosition(event, rect);
-      this.startPt = point$1;
-      api.beginInteraction();
-    }
-  }
-  drag(event, api) {
-    if (this.currentPosition != null) {
-      const position = point.create(event.clientX, event.clientY);
-      const delta = point.subtract(position, this.currentPosition);
-      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.startPt = undefined;
-  }
-  zoom(delta, api) {
-    this.operateWithTimer(api, () => api.zoomCamera(delta));
-  }
-  zoomToPoint(pt, delta, api) {
-    this.operateWithTimer(api, () => api.zoomCameraToPoint(pt, delta));
-  }
-  beginInteraction(api) {
-    this.didTransformBegin = true;
-    api.beginInteraction();
-  }
-  endInteraction(api) {
-    this.didTransformBegin = false;
-    api.endInteraction();
-  }
-  resetInteractionTimer(api) {
-    this.stopInteractionTimer();
-    this.startInteractionTimer(api);
-  }
-  startInteractionTimer(api) {
-    this.interactionTimer = window.setTimeout(() => {
-      this.interactionTimer = undefined;
-      this.endInteraction(api);
-    }, this.interactionTimeout);
-  }
-  stopInteractionTimer() {
-    if (this.interactionTimer != null) {
-      window.clearTimeout(this.interactionTimer);
-      this.interactionTimer = undefined;
-    }
-  }
-  operateWithTimer(api, f) {
-    if (!this.didTransformBegin) {
-      this.beginInteraction(api);
-    }
-    this.resetInteractionTimer(api);
-    f();
-  }
-}
-class PanInteraction extends MouseInteraction {
-  constructor() {
-    super(...arguments);
-    this.type = 'pan';
-  }
-  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 && this.canvasRect != null) {
-      const position = getMouseClientPosition(event, this.canvasRect);
-      api.panCameraToScreenPoint(position);
-      this.currentPosition = position;
-    }
-  }
-  endDrag(event, api) {
-    super.endDrag(event, api);
-  }
-}
-class TwistInteraction extends MouseInteraction {
-  constructor() {
-    super(...arguments);
-    this.type = 'twist';
-  }
-  beginDrag(event, canvasPosition, api, element) {
-    this.currentPosition = point.create(event.offsetX, event.offsetY);
-    this.canvasRect = element.getBoundingClientRect();
-    api.beginInteraction();
-  }
-  drag(event, api) {
-    const position = getMouseClientPosition(event, this.canvasRect);
-    this.currentPosition = position;
-    api.twistCamera(position);
-  }
-  endDrag(event, api) {
-    super.endDrag(event, api);
-  }
-}
-class PivotInteraction extends MouseInteraction {
-  constructor() {
-    super(...arguments);
-    this.type = 'pivot';
-  }
-  beginDrag(event, canvasPosition, api) {
-    if (this.currentPosition == null) {
-      this.currentPosition = point.create(event.screenX, event.screenY);
-      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.pivotCamera(-0.25 * delta.y, 0.25 * delta.x);
-      this.currentPosition = position;
-    }
-  }
-  endDrag(event, api) {
-    super.endDrag(event, api);
-  }
-}
-
-class MouseInteractionHandler extends BaseInteractionHandler {
-  constructor(getConfig, rotateInteraction = new RotateInteraction(), rotatePointInteraction = new RotatePointInteraction(), zoomInteraction = new ZoomInteraction(), panInteraction = new PanInteraction(), twistInteraction = new TwistInteraction(), pivotInteraction = new PivotInteraction()) {
-    super('mousedown', 'mouseup', 'mousemove', rotateInteraction, rotatePointInteraction, zoomInteraction, panInteraction, twistInteraction, pivotInteraction, getConfig);
-  }
-}
-
-class MultiTouchInteractionHandler {
-  initialize(element, api) {
-    this.element = element;
-    this.interactionApi = api;
-  }
-  dispose() {
-    this.element = undefined;
-  }
-  handleTwoPointTouchMove(point1, point2) {
-    var _a, _b, _c, _d;
-    if (this.currentPosition1 != null && this.currentPosition2 != null) {
-      const delta = point.add(point.subtract(point1, this.currentPosition1), point.subtract(point2, this.currentPosition2));
-      const distance = point.distance(point1, point2) -
-        point.distance(this.currentPosition1, this.currentPosition2);
-      const zoom = distance * 0.5;
-      const previousToCurrent = matrix2.create(point.subtract(this.currentPosition1, this.currentPosition2), point.subtract(point1, point2));
-      const angle$1 = angle.toDegrees(Math.atan2(matrix2.determinant(previousToCurrent), matrix2.dot(previousToCurrent)));
-      const center = point.create((point1.x + point2.x) / 2, (point1.y + point2.y) / 2);
-      (_a = this.interactionApi) === null || _a === void 0 ? void 0 : _a.beginInteraction();
-      (_b = this.interactionApi) === null || _b === void 0 ? void 0 : _b.zoomCameraToPoint(center, zoom);
-      (_c = this.interactionApi) === null || _c === void 0 ? void 0 : _c.panCameraByDelta(delta);
-      // Setting a minimum angle to prevent wobbling
-      if (Math.abs(angle$1) > 0.5) {
-        (_d = this.interactionApi) === null || _d === void 0 ? void 0 : _d.twistCamera(angle$1);
-      }
-    }
-    this.currentPosition1 = point1;
-    this.currentPosition2 = point2;
-  }
-}
-
-class MultiPointerInteractionHandler extends MultiTouchInteractionHandler {
-  constructor() {
-    super();
-    this.touchPoints = {};
-    this.handlePointerDown = this.handlePointerDown.bind(this);
-    this.handlePointerMove = this.handlePointerMove.bind(this);
-    this.handlePointerUp = this.handlePointerUp.bind(this);
-  }
-  dispose() {
-    var _a;
-    (_a = this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener('pointerdown', this.handlePointerDown);
-    super.dispose();
-  }
-  initialize(element, api) {
-    super.initialize(element, api);
-    element.addEventListener('pointerdown', this.handlePointerDown);
-  }
-  handlePointerDown(event) {
-    const point$1 = point.create(event.screenX, event.screenY);
-    this.touchPoints = Object.assign(Object.assign({}, this.touchPoints), { [event.pointerId]: point$1 });
-    const keys = Object.keys(this.touchPoints);
-    if (keys.length === 1) {
-      window.addEventListener('pointermove', this.handlePointerMove);
-      window.addEventListener('pointerup', this.handlePointerUp);
-    }
-  }
-  handlePointerMove(event) {
-    if (this.touchPoints[event.pointerId] != null) {
-      this.touchPoints[event.pointerId] = point.create(event.screenX, event.screenY);
-    }
-    const keys = Object.keys(this.touchPoints);
-    if (keys.length === 2) {
-      const point1 = this.touchPoints[keys[0]];
-      const point2 = this.touchPoints[keys[1]];
-      this.handleTwoPointTouchMove(point1, point2);
-    }
-  }
-  handlePointerUp(event) {
-    var _a;
-    delete this.touchPoints[event.pointerId];
-    const keys = Object.keys(this.touchPoints);
-    if (keys.length === 1) {
-      (_a = this.interactionApi) === null || _a === void 0 ? void 0 : _a.endInteraction();
-      this.currentPosition1 = undefined;
-      this.currentPosition2 = undefined;
-    }
-    if (keys.length === 0) {
-      window.removeEventListener('pointermove', this.handlePointerMove);
-      window.removeEventListener('pointerup', this.handlePointerUp);
-    }
-  }
-}
-
-class PointerInteractionHandler extends BaseInteractionHandler {
-  constructor(getConfig) {
-    super('pointerdown', 'pointerup', 'pointermove', new RotateInteraction(), new RotatePointInteraction(), new ZoomInteraction(), new PanInteraction(), new TwistInteraction(), new PivotInteraction(), getConfig);
-    this.touchPoints = new Set();
-    this.handlePointerDown = this.handlePointerDown.bind(this);
-    this.handlePointerUp = this.handlePointerUp.bind(this);
-  }
-  initialize(element, api) {
-    super.initialize(element, api);
-    element.addEventListener('pointerdown', this.handlePointerDown);
-  }
-  handlePointerDown(event) {
-    this.downPosition = point.create(event.screenX, event.screenY);
-    this.touchPoints.add(event.pointerId);
-    if (this.touchPoints.size === 1) {
-      window.addEventListener('pointerup', this.handlePointerUp);
-    }
-    if (this.touchPoints.size === 2) {
-      this.disableIndividualInteractions = true;
-    }
-  }
-  handlePointerUp(event) {
-    this.touchPoints.delete(event.pointerId);
-    if (this.touchPoints.size < 2) {
-      this.disableIndividualInteractions = false;
-    }
-    if (this.touchPoints.size === 0) {
-      window.removeEventListener('pointerup', this.handlePointerUp);
-    }
-  }
-}
-
-class TapInteractionHandler {
-  constructor(downEvent, upEvent, moveEvent, getConfig) {
-    this.downEvent = downEvent;
-    this.upEvent = upEvent;
-    this.moveEvent = moveEvent;
-    this.getConfig = getConfig;
-    this.handleDown = this.handleDown.bind(this);
-    this.handleUp = this.handleUp.bind(this);
-    this.handleMove = this.handleMove.bind(this);
-    this.handleTouchStart = this.handleTouchStart.bind(this);
-    this.handleTouchMove = this.handleTouchMove.bind(this);
-    this.handleTouchEnd = this.handleTouchEnd.bind(this);
-    this.handlePointerMove = this.handlePointerMove.bind(this);
-    this.handlePointerEnd = this.handlePointerEnd.bind(this);
-    this.clearPositions = this.clearPositions.bind(this);
-    this.restartDoubleTapTimer = this.restartDoubleTapTimer.bind(this);
-    this.clearDoubleTapTimer = this.clearDoubleTapTimer.bind(this);
-    this.restartLongPressTimer = this.restartLongPressTimer.bind(this);
-    this.clearLongPressTimer = this.clearLongPressTimer.bind(this);
-    this.setPointerPositions = this.setPointerPositions.bind(this);
-    this.emit = this.emit.bind(this);
-  }
-  dispose() {
-    var _a, _b;
-    (_a = this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener(this.downEvent, this.handleDown);
-    (_b = this.element) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchstart', this.handleTouchStart);
-    this.element = undefined;
-    this.clearDoubleTapTimer();
-    this.clearLongPressTimer();
-  }
-  initialize(element, api) {
-    this.element = element;
-    this.interactionApi = api;
-    element.addEventListener(this.downEvent, this.handleDown);
-    element.addEventListener('touchstart', this.handleTouchStart);
-  }
-  handleTouchStart(event) {
-    if (event.touches.length === 1) {
-      this.setPointerPositions(point.create(event.touches[0].clientX, event.touches[0].clientY));
-      this.restartLongPressTimer();
-      window.addEventListener('touchend', this.handleTouchEnd);
-      window.addEventListener('touchmove', this.handleTouchMove);
-    }
-  }
-  handleTouchMove(event) {
-    if (event.touches.length > 0) {
-      this.handlePointerMove(point.create(event.touches[0].clientX, event.touches[0].clientY), true);
-    }
-  }
-  handleTouchEnd(event) {
-    if (this.pointerDownPosition != null) {
-      window.removeEventListener('touchend', this.handleTouchEnd);
-      window.removeEventListener('touchmove', this.handleTouchMove);
-    }
-    this.handlePointerEnd(this.pointerDownPosition);
-  }
-  handleDown(event) {
-    this.setPointerPositions(point.create(event.clientX, event.clientY));
-    this.buttons = event.buttons;
-    const eventKeys = {
-      altKey: event.altKey,
-      ctrlKey: event.ctrlKey,
-      metaKey: event.metaKey,
-      shiftKey: event.shiftKey,
-    };
-    this.restartLongPressTimer(eventKeys);
-    window.addEventListener(this.upEvent, this.handleUp);
-    window.addEventListener(this.moveEvent, this.handleMove);
-  }
-  handleMove(event) {
-    this.handlePointerMove(point.create(event.clientX, event.clientY), this.isTouch(event));
-  }
-  handleUp(event) {
-    if (this.pointerDownPosition != null) {
-      window.removeEventListener(this.upEvent, this.handleUp);
-      window.removeEventListener(this.moveEvent, this.handleMove);
-    }
-    this.handlePointerEnd(point.create(event.clientX, event.clientY), {
-      altKey: event.altKey,
-      ctrlKey: event.ctrlKey,
-      metaKey: event.metaKey,
-      shiftKey: event.shiftKey,
-    }, this.buttons, this.isTouch(event));
-    this.buttons = undefined;
-  }
-  handlePointerMove(position, isTouch) {
-    var _a;
-    // Ignore pointer end events for this associated touch start
-    // since the distance from the start is large enough
-    const threshold = ((_a = this.interactionApi) === null || _a === void 0 ? void 0 : _a.pixelThreshold(isTouch)) || 2;
-    if (this.pointerDownPosition != null &&
-      point.distance(position, this.pointerDownPosition) >= threshold &&
-      this.interactionTimer == null) {
-      this.clearPositions();
-    }
-  }
-  handlePointerEnd(position, keyDetails = {}, buttons = 0, isTouch = false) {
-    var _a, _b;
-    if (position != null) {
-      if (this.longPressTimer != null) {
-        this.emit((_a = this.interactionApi) === null || _a === void 0 ? void 0 : _a.tap)(position, keyDetails, buttons);
-      }
-      if (this.doubleTapTimer != null &&
-        this.secondPointerDownPosition != null) {
-        this.emit((_b = this.interactionApi) === null || _b === void 0 ? void 0 : _b.doubleTap)(position, keyDetails, buttons, this.secondPointerDownPosition);
-        this.clearDoubleTapTimer();
-      }
-    }
-    this.pointerDownPosition = undefined;
-    this.clearLongPressTimer();
-  }
-  emit(emitter) {
-    return (pointerUpPosition, keyDetails = {}, buttons = 0, pointerDownPosition, isTouch = false) => {
-      var _a;
-      const downPosition = pointerDownPosition || this.pointerDownPosition;
-      const threshold = ((_a = this.interactionApi) === null || _a === void 0 ? void 0 : _a.pixelThreshold(isTouch)) || 1;
-      let emittedPosition;
-      if (this.interactionTimer != null) {
-        emittedPosition = this.getCanvasPosition(downPosition || pointerUpPosition);
-      }
-      else if (downPosition != null &&
-        point.distance(downPosition, pointerUpPosition) <= threshold) {
-        emittedPosition = this.getCanvasPosition(pointerUpPosition);
-      }
-      if (emittedPosition != null && emitter != null) {
-        emitter(emittedPosition, keyDetails, buttons);
-      }
-    };
-  }
-  getCanvasPosition(point$1) {
-    var _a;
-    const canvasBounds = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    const canvasOffset = canvasBounds != null
-      ? point.create(canvasBounds.left, canvasBounds.top)
-      : undefined;
-    return canvasOffset != null
-      ? point.subtract(point.create(point$1.x, point$1.y), canvasOffset)
-      : undefined;
-  }
-  clearPositions() {
-    this.pointerDownPosition = undefined;
-    this.firstPointerDownPosition = undefined;
-    this.secondPointerDownPosition = undefined;
-    this.clearDoubleTapTimer();
-    this.clearLongPressTimer();
-    this.clearInteractionTimer();
-  }
-  clearDoubleTapTimer() {
-    if (this.doubleTapTimer != null) {
-      window.clearTimeout(this.doubleTapTimer);
-    }
-    this.doubleTapTimer = undefined;
-    this.firstPointerDownPosition = undefined;
-    this.secondPointerDownPosition = undefined;
-  }
-  restartDoubleTapTimer() {
-    this.clearDoubleTapTimer();
-    this.doubleTapTimer = window.setTimeout(() => this.clearDoubleTapTimer(), this.getConfig().events.doubleTapThreshold);
-  }
-  clearLongPressTimer() {
-    if (this.longPressTimer != null) {
-      window.clearTimeout(this.longPressTimer);
-    }
-    this.longPressTimer = undefined;
-  }
-  restartLongPressTimer(eventKeys = {}) {
-    this.clearLongPressTimer();
-    this.longPressTimer = window.setTimeout(() => {
-      var _a;
-      if (this.pointerDownPosition) {
-        this.emit((_a = this.interactionApi) === null || _a === void 0 ? void 0 : _a.longPress)(this.pointerDownPosition, eventKeys, this.buttons);
-      }
-      this.clearLongPressTimer();
-    }, this.getConfig().events.longPressThreshold);
-  }
-  restartInteractionTimer() {
-    this.clearInteractionTimer();
-    this.interactionTimer = window.setTimeout(() => {
-      this.interactionTimer = undefined;
-    }, this.getConfig().interactions.interactionDelay);
-  }
-  clearInteractionTimer() {
-    if (this.interactionTimer != null) {
-      window.clearTimeout(this.interactionTimer);
-      this.interactionTimer = undefined;
-    }
-  }
-  setPointerPositions(point) {
-    this.pointerDownPosition = point;
-    this.restartInteractionTimer();
-    if (this.firstPointerDownPosition == null) {
-      this.restartDoubleTapTimer();
-      this.firstPointerDownPosition = point;
-    }
-    else {
-      this.secondPointerDownPosition = point;
-    }
-  }
-  isTouch(event) {
-    return window.PointerEvent != null && event instanceof PointerEvent
-      ? event.pointerType === 'touch'
-      : false;
-  }
-}
-
-class TouchInteractionHandler extends MultiTouchInteractionHandler {
-  constructor() {
-    super();
-    this.handleTouchStart = this.handleTouchStart.bind(this);
-    this.handleTouchMove = this.handleTouchMove.bind(this);
-    this.handleTouchEnd = this.handleTouchEnd.bind(this);
-  }
-  dispose() {
-    var _a;
-    (_a = this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', this.handleTouchStart);
-    super.dispose();
-  }
-  initialize(element, api) {
-    super.initialize(element, api);
-    element.addEventListener('touchstart', this.handleTouchStart);
-  }
-  handleTouchStart(event) {
-    if (event.touches.length >= 1) {
-      const touch1 = event.touches[0];
-      const touch2 = event.touches[1];
-      this.currentPosition1 = point.create(touch1.screenX, touch1.screenY);
-      this.currentPosition2 =
-        touch2 != null
-          ? point.create(touch2.screenX, touch2.screenY)
-          : undefined;
-      window.addEventListener('touchmove', this.handleTouchMove, {
-        passive: false,
-      });
-      window.addEventListener('touchend', this.handleTouchEnd);
-    }
-  }
-  handleTouchMove(event) {
-    if (event.touches.length === 1) {
-      this.handleOnePointTouchMove(event.touches[0]);
-    }
-    else if (event.touches.length === 2) {
-      const point1 = point.create(event.touches[0].clientX, event.touches[0].clientY);
-      const point2 = point.create(event.touches[1].clientX, event.touches[1].clientY);
-      this.handleTwoPointTouchMove(point1, point2);
-    }
-  }
-  handleTouchEnd(event) {
-    var _a;
-    (_a = this.interactionApi) === null || _a === void 0 ? void 0 : _a.endInteraction();
-    this.isInteracting = false;
-    window.removeEventListener('touchmove', this.handleTouchMove);
-    window.removeEventListener('touchend', this.handleTouchEnd);
-  }
-  handleOnePointTouchMove(touch) {
-    var _a, _b, _c;
-    const position = point.create(touch.screenX, touch.screenY);
-    if (this.currentPosition1 != null) {
-      const delta = point.subtract(position, this.currentPosition1);
-      const threshold = ((_a = this.interactionApi) === null || _a === void 0 ? void 0 : _a.pixelThreshold(true)) || 2;
-      if (point.distance(position, this.currentPosition1) >= threshold ||
-        this.isInteracting) {
-        (_b = this.interactionApi) === null || _b === void 0 ? void 0 : _b.beginInteraction();
-        (_c = this.interactionApi) === null || _c === void 0 ? void 0 : _c.rotateCamera(delta);
-        this.isInteracting = true;
-      }
-    }
-    this.currentPosition1 = position;
-  }
-}
-
-/**
- * A meter for measuring timings. Measurements are stored using the browser's
- * performance APIs, which provide high-resolution timestamps, as well as
- * provides visibility in the browser's developer tooling.
- */
-class TimingMeter {
-  constructor(name, perf = window.performance) {
-    this.name = name;
-    this.perf = perf;
-    this.measures = new Set();
-    this.nextId = 0;
-  }
-  /**
-   * Clears any measurements from the buffer.
-   */
-  clearMeasurements() {
-    this.perf.clearMeasures(this.name);
-  }
-  measure(target) {
-    if (isPromise(target)) {
-      const mark = this.begin();
-      return target.finally(() => this.end(mark));
-    }
-    else if (typeof target === 'function') {
-      const mark = this.begin();
-      const result = target();
-      this.end(mark);
-      return result;
-    }
-    else {
-      throw new Error('Input must be a function or Promise');
-    }
-  }
-  /**
-   * Returns a list of measurements that have been recorded, and clears the
-   * internal measurement buffer.
-   */
-  takeMeasurements() {
-    const timings = this.perf.getEntriesByName(this.name);
-    this.clearMeasurements();
-    return timings;
-  }
-  /**
-   * Returns the last measurement to have been recorded, and clears the internal
-   * measurement buffer.
-   */
-  takeLastMeasurement() {
-    const measurements = this.takeMeasurements();
-    return measurements[measurements.length - 1];
-  }
-  begin() {
-    const mark = `${this.name}-${this.nextId++}`;
-    this.measures.add(mark);
-    this.perf.mark(mark);
-    return mark;
-  }
-  end(mark) {
-    this.perf.measure(this.name, mark);
-    this.perf.clearMarks(mark);
-    this.measures.delete(mark);
-  }
-}
-const paintTime = new TimingMeter('paint_time');
-
-function loadImageBytesAsImageElement(imageData) {
-  return new Promise((resolve, reject) => {
-    const blob = new Blob([imageData]);
-    const blobUrl = URL.createObjectURL(blob);
-    const image = new Image();
-    image.addEventListener('load', () => {
-      resolve({ image, dispose: () => undefined });
-      URL.revokeObjectURL(blobUrl);
-    });
-    image.addEventListener('error', () => {
-      reject(new ImageLoadError('Failed to load image data'));
-      URL.revokeObjectURL(blobUrl);
-    });
-    image.src = blobUrl;
-  });
-}
-async function loadImageBytesAsImageBitmap(imageData) {
-  const blob = new Blob([imageData]);
-  const bitmap = await window.createImageBitmap(blob);
-  return { image: bitmap, dispose: () => bitmap.close() };
-}
-function loadImageBytes(imageBytes) {
-  if (window.createImageBitmap != null) {
-    return loadImageBytesAsImageBitmap(imageBytes);
-  }
-  else {
-    return loadImageBytesAsImageElement(imageBytes);
-  }
-}
-
-const REPORTING_INTERVAL_MS = 1000;
-function drawImage(image, data) {
-  const rect = data.viewport.calculateDrawRect(data.frame.image);
-  data.canvas.clearRect(0, 0, data.canvasDimensions.width, data.canvasDimensions.height);
-  data.canvas.drawImage(image.image, rect.x, rect.y, rect.width, rect.height);
-}
-function reportTimings(meter, callback) {
-  const timings = meter.takeMeasurements();
-  if (timings.length > 0) {
-    callback(timings);
-  }
-}
-function measureCanvasRenderer(meter, renderer, logFrameRate, callback, intervalMs = REPORTING_INTERVAL_MS) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let timer;
-  let renderCount = 0;
-  let fpsFrameCount;
-  let fpsHistory = [];
-  function start() {
-    renderCount++;
-    if (timer == null) {
-      timer = setInterval(() => {
-        reportTimings(meter, callback);
-        if (renderCount === 0) {
-          clearTimer();
-        }
-      }, intervalMs);
-    }
-  }
-  function end() {
-    renderCount--;
-  }
-  function clearTimer() {
-    if (timer != null) {
-      clearInterval(timer);
-      timer = undefined;
-    }
-  }
-  /* istanbul ignore next */
-  if (logFrameRate) {
-    setInterval(() => {
-      if (fpsFrameCount != null) {
-        if (fpsHistory.length === 5) {
-          fpsHistory = [...fpsHistory.slice(1), fpsFrameCount];
-        }
-        else {
-          fpsHistory.push(fpsFrameCount);
-        }
-        const avgFps = fpsHistory.reduce((res, num) => res + num) / fpsHistory.length;
-        console.debug(`Paint rate: ${fpsFrameCount}fps`);
-        console.debug(`Paint rate (avg): ${avgFps}`);
-        fpsFrameCount = undefined;
-      }
-    }, 1000);
-  }
-  return (data) => {
-    start();
-    return meter
-      .measure(async () => {
-      const frame = await renderer(data);
-      fpsFrameCount = fpsFrameCount == null ? 1 : fpsFrameCount + 1;
-      return frame;
-    })
-      .finally(() => end());
-  };
-}
-function createCanvasRenderer() {
-  let accumulatedCorrelationIds = [];
-  function addCorrelationIds(frame) {
-    if (frame != null) {
-      const frameWithCorrelationIds = frame.copy({
-        correlationIds: [
-          ...frame.correlationIds,
-          ...accumulatedCorrelationIds.filter((id) => !frame.correlationIds.includes(id)),
-        ],
-      });
-      accumulatedCorrelationIds = [];
-      return frameWithCorrelationIds;
-    }
-    return frame;
-  }
-  function loadFrame() {
-    let lastLoadedFrameNumber = -1;
-    return async (data) => {
-      if (data.frame.sequenceNumber > lastLoadedFrameNumber) {
-        const image = await loadImageBytes(data.frame.image.imageBytes);
-        lastLoadedFrameNumber = data.frame.sequenceNumber;
-        return image;
-      }
-    };
-  }
-  function drawFrame() {
-    let lastDrawnFrameNumber = -1;
-    return async (data, image) => {
-      var _a;
-      if (image != null && data.frame.sequenceNumber > lastDrawnFrameNumber) {
-        lastDrawnFrameNumber = data.frame.sequenceNumber;
-        (_a = data.beforeDraw) === null || _a === void 0 ? void 0 : _a.call(data);
-        drawImage(image, data);
-        image.dispose();
-        return data.frame;
-      }
-      image === null || image === void 0 ? void 0 : image.dispose();
-    };
-  }
-  const load = loadFrame();
-  const draw = drawFrame();
-  return async (data) => {
-    var _a, _b;
-    const predicatePassing = (_b = (_a = data.predicate) === null || _a === void 0 ? void 0 : _a.call(data)) !== null && _b !== void 0 ? _b : true;
-    accumulatedCorrelationIds = [
-      ...accumulatedCorrelationIds,
-      ...data.frame.correlationIds,
-    ];
-    if (predicatePassing) {
-      return load(data).then((image) => draw(data, image).then(addCorrelationIds));
-    }
-  };
-}
-
-function ifRequestId(f) {
-  return (req) => {
-    var _a;
-    const reqId = (_a = req.request.requestId) === null || _a === void 0 ? void 0 : _a.value;
-    if (reqId != null) {
-      f(reqId)(req);
-    }
-  };
-}
-function ifDrawFrame(f) {
-  return (req) => {
-    const { drawFrame } = req.request;
-    if (drawFrame != null) {
-      f(drawFrame)(req);
-    }
-  };
-}
-
-const MUTE_WARNING_SECONDS = 1 * 60; // 1 minute
-function calculateSendToReceiveDuration(clockProvider) {
-  let muteWarning = false;
-  return (sentAt) => {
-    const clock = clockProvider();
-    if (clock != null) {
-      const receivedAt = clock.remoteTime(new Date(Date.now()));
-      const duration = toProtoDuration(sentAt, receivedAt);
-      const durationInMs = protoToDate(duration).getTime();
-      if (durationInMs >= 0) {
-        return duration;
-      }
-      else {
-        if (!muteWarning) {
-          console.warn(`Possible erroneous send to receive timing. Muting for ${MUTE_WARNING_SECONDS}s. [sent-at=${sentAt.toISOString()}, received-at=${receivedAt.toISOString()}, remote-time=${clock.knownRemoteTime.toISOString()}]`);
-          muteWarning = true;
-          setTimeout(() => (muteWarning = false), MUTE_WARNING_SECONDS * 1000);
-        }
-        return undefined;
-      }
-    }
-  };
-}
-/**
- * Returns a request handler that will acknowledge any frame requests that it
- * receives.
- *
- * @param api The client to acknowledge frames from.
- * @param clock A function that returns a synchronized clock.
- */
-function acknowledgeFrameRequests(api, clockProvider) {
-  const sendToReceiveDuration = calculateSendToReceiveDuration(clockProvider);
-  return ifRequestId((reqId) => ifDrawFrame((_) => (req) => {
-    const sentAt = protoToDate(req.sentAtTime);
-    if (sentAt != null) {
-      api.replyResult(reqId, {
-        drawFrame: {
-          sendToReceiveDuration: sendToReceiveDuration(sentAt),
-        },
-      });
-    }
-  }));
-}
-
-var StorageKeys;
-(function (StorageKeys) {
-  StorageKeys["DEVICE_ID"] = "vertexvis:device-id";
-})(StorageKeys || (StorageKeys = {}));
-function upsertStorageEntry(key, values, storage = window.localStorage) {
-  const existing = storage.getItem(key);
-  if (existing != null) {
-    const updated = Object.assign(Object.assign({}, JSON.parse(existing)), values);
-    storage.setItem(key, JSON.stringify(updated));
-  }
-  else {
-    storage.setItem(key, JSON.stringify(values));
-  }
-}
-function getStorageEntry(key, f, storage = window.localStorage) {
-  const item = storage.getItem(key);
-  if (item != null) {
-    return f(JSON.parse(item));
-  }
-}
-
-class ViewerStream extends StreamApi {
-  constructor(ws, opts = {}) {
-    var _a, _b, _c;
-    super(ws, { loggingEnabled: opts.loggingEnabled });
-    this.state = { type: 'disconnected' };
-    this.stateChanged = new EventDispatcher();
-    this.dimensions = dimensions.create(0, 0);
-    this.streamAttributes = {};
-    this.frameBgColor = color.create(255, 255, 255);
-    this.config = parseConfig('platprod');
-    this.options = {
-      tokenRefreshOffsetInSeconds: (_a = opts.tokenRefreshOffsetInSeconds) !== null && _a !== void 0 ? _a : 30,
-      offlineThresholdInSeconds: (_b = opts.offlineThresholdInSeconds) !== null && _b !== void 0 ? _b : 30,
-      loadTimeoutInSeconds: (_c = opts.loadTimeoutInSeconds) !== null && _c !== void 0 ? _c : 15,
-    };
-  }
-  getState() {
-    return this.state;
-  }
-  disconnect() {
-    if (this.state.type !== 'disconnected' &&
-      this.state.type !== 'connection-failed') {
-      console.debug('Disconnecting websocket');
-      this.state.connection.dispose();
-      this.updateState({ type: 'disconnected' });
-    }
-  }
-  async load(urn, clientId, deviceId, config = parseConfig('platprod')) {
-    this.clientId = clientId;
-    this.deviceId = deviceId;
-    this.config = config;
-    if (this.state.type === 'disconnected') {
-      return this.loadIfDisconnected(urn);
-    }
-    else if (this.state.type === 'connection-failed') {
-      return this.loadIfDisconnected(urn);
-    }
-    else if (this.state.type === 'reconnecting') {
-      return this.loadIfConnectingOrConnected(urn, this.state);
-    }
-    else if (this.state.type === 'connecting') {
-      return this.loadIfConnectingOrConnected(urn, this.state);
-    }
-    else {
-      return this.loadIfConnectingOrConnected(urn, this.state);
-    }
-  }
-  update(fields) {
-    this.frameBgColor = fields.frameBgColor
-      ? fields.frameBgColor
-      : this.frameBgColor;
-    if (fields.dimensions != null && fields.dimensions !== this.dimensions) {
-      this.dimensions = fields.dimensions;
-      this.ifState('connected', () => this.updateDimensions({ dimensions: this.dimensions }));
-    }
-    if (fields.streamAttributes != null &&
-      this.streamAttributes !== fields.streamAttributes) {
-      this.streamAttributes = fields.streamAttributes;
-      this.ifState('connected', () => this.updateStream({
-        streamAttributes: toPbStreamAttributesOrThrow(this.streamAttributes),
-      }));
-    }
-  }
-  async loadIfConnectingOrConnected(urn, state) {
-    var _a;
-    const { resource: pResource, subResource: pSubResource } = state.resource;
-    const resource = fromUrn(urn);
-    const hasResourceChanged = !objects.isEqual(pResource, resource.resource);
-    const hasSubResourceChanged = !objects.isEqual(pSubResource, resource.subResource);
-    const isConnecting = state.type === 'connecting' || state.type === 'reconnecting';
-    const isConnected = state.type === 'connected';
-    const suppliedIdQuery = resource.queries.find((q) => q.type === 'supplied-id');
-    if (hasResourceChanged || (isConnecting && hasSubResourceChanged)) {
-      this.disconnect();
-      return this.loadIfDisconnected(urn);
-    }
-    else if (isConnected &&
-      hasSubResourceChanged &&
-      ((_a = resource.subResource) === null || _a === void 0 ? void 0 : _a.type) === 'scene-view-state') {
-      const payload = Object.assign(Object.assign({}, (resource.subResource.id != null
-        ? { sceneViewStateId: { hex: resource.subResource.id } }
-        : {})), (suppliedIdQuery != null
-        ? { sceneViewStateSuppliedId: { value: suppliedIdQuery.id } }
-        : {}));
-      await this.loadSceneViewState(payload);
-      this.updateState(Object.assign(Object.assign({}, state), { resource }));
-    }
-  }
-  async loadIfDisconnected(urn) {
-    try {
-      await this.connectWithNewStream(fromUrn(urn));
-    }
-    catch (e) {
-      if (e instanceof CustomError) {
-        this.updateState({
-          type: 'connection-failed',
-          message: `Cannot load scene. ${e.message}`,
-          error: e,
-        });
-      }
-      else if (e instanceof StreamRequestError) {
-        this.updateState({
-          type: 'connection-failed',
-          message: `Cannot load scene. Stream request failed to start stream.`,
-          error: e,
-        });
-      }
-      else {
-        this.updateState({
-          type: 'connection-failed',
-          message: `Cannot load scene for unknown reason. See console logs.`,
-          error: e,
-        });
-      }
-      throw e;
-    }
-  }
-  connectWithNewStream(resource) {
-    return this.openWebsocketStream(resource, 'connecting', () => this.requestNewStream(resource));
-  }
-  connectToExistingStream(state) {
-    return this.openWebsocketStream(state.resource, 'reconnecting', () => this.requestReconnectStream(state), { maxRetries: Number.POSITIVE_INFINITY });
-  }
-  async openWebsocketStream(resource, type, requestStream, { maxRetries = 3 } = {}) {
-    const descriptor = getWebsocketDescriptor(getWebsocketUri(this.config, resource.resource, this.clientId, this.deviceId));
-    console.debug(`Initiating WS connection [uri=${descriptor.url}]`);
-    const controller = new AbortController();
-    const settings = getStreamSettings(this.config);
-    this.updateState({
-      type,
-      resource,
-      connection: {
-        dispose: () => {
-          this.dispose();
-          controller.abort();
-        },
-      },
-    });
-    const connection = await async.abort(controller.signal, async.retry(() => this.connect(descriptor, settings), {
-      maxRetries,
-      delaysInMs: ViewerStream.WS_RECONNECT_DELAYS,
-    })).catch((e) => {
-      throw new WebsocketConnectionError('Websocket connection failed.', e instanceof Error ? e : undefined);
-    });
-    if (!connection.aborted) {
-      return this.requestNewOrExistingStream(resource, connection.result, requestStream);
-    }
-    else {
-      this.updateState({ type: 'disconnected' });
-    }
-  }
-  async requestNewOrExistingStream(resource, connection, requestStream) {
-    const pendingClock = this.requestClock();
-    const stream = await requestStream();
-    console.debug(`Stream connected [stream-id=${stream.streamId}, scene-id=${stream.sceneId}, scene-view-id=${stream.sceneViewId}]`);
-    const onRequest = this.onRequest((msg) => {
-      const req = msg.request.drawFrame;
-      if (req != null) {
-        const frame = fromPbFrameOrThrow(stream.worldOrientation)(req);
-        if (this.state.type === 'connected') {
-          this.updateState(Object.assign(Object.assign({}, this.state), { frame }));
-        }
-      }
-    });
-    const reconnect = this.reconnectWhenNeeded();
-    const refreshToken = this.refreshTokenWhenExpired(stream.token);
-    const acknowledgeFrameRequests = this.acknowledgeFrameRequests();
-    const frame = stream.frame == null
-      ? await this.waitForFrame(stream.worldOrientation, this.options.loadTimeoutInSeconds)
-      : stream.frame;
-    const clock = await pendingClock;
-    console.debug(`Synchronized clocks [local-time=${clock.knownLocalTime.toISOString()}, remote-time=${clock.knownRemoteTime.toISOString()}]`);
-    this.updateState({
-      type: 'connected',
-      connection: {
-        dispose: () => {
-          reconnect.dispose();
-          onRequest.dispose();
-          refreshToken.dispose();
-          acknowledgeFrameRequests.dispose();
-          connection.dispose();
-        },
-      },
-      resource,
-      streamId: stream.streamId,
-      deviceId: stream.deviceId,
-      sceneId: stream.sceneId,
-      sceneViewId: stream.sceneViewId,
-      worldOrientation: stream.worldOrientation,
-      token: stream.token,
-      frame,
-      clock,
-    });
-  }
-  async requestNewStream(resource) {
-    var _a, _b;
-    const suppliedIdQuery = resource.queries.find((q) => q.type === 'supplied-id');
-    const res = fromPbStartStreamResponseOrThrow(await this.startStream({
-      streamKey: { value: resource.resource.id },
-      dimensions: this.dimensions,
-      frameBackgroundColor: toPbColorOrThrow(this.frameBgColor),
-      streamAttributes: toPbStreamAttributesOrThrow(this.streamAttributes),
-      sceneViewStateId: ((_a = resource.subResource) === null || _a === void 0 ? void 0 : _a.type) === 'scene-view-state' &&
-        resource.subResource.id != null
-        ? { hex: resource.subResource.id }
-        : undefined,
-      sceneViewStateSuppliedId: ((_b = resource.subResource) === null || _b === void 0 ? void 0 : _b.type) === 'scene-view-state' &&
-        suppliedIdQuery != null
-        ? { value: suppliedIdQuery.id }
-        : undefined,
-    }));
-    return {
-      resource: resource,
-      streamId: res.streamId,
-      sceneId: res.sceneId,
-      sceneViewId: res.sceneViewId,
-      deviceId: res.sessionId,
-      token: res.token,
-      worldOrientation: res.worldOrientation,
-      frame: undefined,
-    };
-  }
-  async requestReconnectStream(state) {
-    const res = fromPbReconnectResponseOrThrow(await this.reconnect({
-      streamId: { hex: state.streamId },
-      dimensions: this.dimensions,
-      frameBackgroundColor: toPbColorOrThrow(this.frameBgColor),
-      streamAttributes: toPbStreamAttributesOrThrow(this.streamAttributes),
-    }));
-    return Object.assign(Object.assign({}, state), { token: res.token });
-  }
-  async requestClock() {
-    const remoteTime = fromPbSyncTimeResponseOrThrow(await this.syncTime({
-      requestTime: currentDateAsProtoTimestamp(),
-    }));
-    return new SynchronizedClock(remoteTime);
-  }
-  reconnectWhenNeeded() {
-    const whenDisconnected = this.onClose(() => {
-      if (this.state.type === 'connected') {
-        this.closeAndReconnect(this.state);
-      }
-    });
-    const whenRequested = this.onRequest((msg) => {
-      const isReconnectMsg = msg.request.gracefulReconnection != null;
-      if (isReconnectMsg && this.state.type === 'connected') {
-        console.debug('Received request for graceful reconnect. Closing connection and attempting reconnect.');
-        this.closeAndReconnect(this.state);
-      }
-    });
-    const whenOffline = this.reconnectWhenOffline();
-    return {
-      dispose: () => {
-        whenDisconnected.dispose();
-        whenRequested.dispose();
-        whenOffline.dispose();
-      },
-    };
-  }
-  refreshTokenWhenExpired(token) {
-    let timer;
-    const startTimer = (token) => {
-      const { tokenRefreshOffsetInSeconds } = this.options;
-      const ms = token.remainingTimeInMs(tokenRefreshOffsetInSeconds);
-      timer = window.setTimeout(async () => {
-        const res = await this.refreshToken();
-        const newToken = fromPbRefreshTokenResponseOrThrow(res);
-        startTimer(newToken);
-        if (this.state.type === 'connected') {
-          this.updateState(Object.assign(Object.assign({}, this.state), { token: newToken }));
-        }
-      }, ms);
-    };
-    startTimer(token);
-    return { dispose: () => clearTimeout(timer) };
-  }
-  reconnectWhenOffline() {
-    let timer;
-    const clearTimer = () => window.clearTimeout(timer);
-    const restartTimer = () => {
-      clearTimer();
-      const delayInSec = this.options.offlineThresholdInSeconds;
-      console.debug(`Detected that host is offline. Will attempt reconnect in ${delayInSec}s.`);
-      timer = window.setTimeout(() => {
-        if (this.state.type === 'connected') {
-          this.closeAndReconnect(this.state);
-        }
-      }, delayInSec * 1000);
-    };
-    const handleOnline = () => {
-      console.debug('Detected that host is online.');
-      clearTimer();
-    };
-    const handleOffline = () => restartTimer();
-    window.addEventListener('offline', handleOffline);
-    window.addEventListener('online', handleOnline);
-    return {
-      dispose: () => {
-        clearTimer();
-        window.removeEventListener('offline', restartTimer);
-        window.removeEventListener('online', clearTimer);
-      },
-    };
-  }
-  closeAndReconnect(state) {
-    state.connection.dispose();
-    return this.connectToExistingStream(state);
-  }
-  async waitForFrame(worldOrientation, timeoutInSeconds) {
-    let disposable;
-    try {
-      return await async.timeout(timeoutInSeconds * 1000, new Promise((resolve) => {
-        disposable = this.onRequest((msg) => {
-          try {
-            const req = msg.request.drawFrame;
-            if (req != null) {
-              const frame = fromPbFrameOrThrow(worldOrientation)(req);
-              resolve(frame);
-            }
-          }
-          finally {
-            disposable === null || disposable === void 0 ? void 0 : disposable.dispose();
-          }
-        });
-      }));
-    }
-    catch (e) {
-      throw new SceneRenderError(`Frame timed out after ${timeoutInSeconds / 1000}s`, e instanceof Error ? e : undefined);
-    }
-    finally {
-      disposable === null || disposable === void 0 ? void 0 : disposable.dispose();
-    }
-  }
-  acknowledgeFrameRequests() {
-    return this.onRequest(acknowledgeFrameRequests(this, () => this.state.type === 'connected' ? this.state.clock : undefined));
-  }
-  updateState(state) {
-    if (this.state !== state) {
-      this.state = state;
-      this.stateChanged.emit(this.state);
-    }
-  }
-  ifState(state, f) {
-    if (this.state.type === state) {
-      return f();
-    }
-  }
-  onStateChanged(listener) {
-    return this.stateChanged.on(listener);
-  }
-}
-ViewerStream.WS_RECONNECT_DELAYS = [0, 1000, 1000, 5000];
-const toPbStreamAttributesOrThrow = mapper.ifInvalidThrow(toPbStreamAttributes);
-const toPbColorOrThrow = mapper.ifInvalidThrow(toPbRGBi);
-function getStreamSettings(config) {
-  return {
-    EXPERIMENTAL_frameDelivery: Object.assign(Object.assign({}, config.EXPERIMENTAL_frameDelivery), { rateLimitingEnabled: config.flags.throttleFrameDelivery }),
-    EXPERIMENTAL_adaptiveRendering: Object.assign(Object.assign({}, config.EXPERIMENTAL_adaptiveRendering), { enabled: config.flags.adaptiveRendering }),
-    EXPERIMENTAL_qualityOfService: Object.assign({}, config.EXPERIMENTAL_qualityOfService),
-  };
-}
-function getWebsocketDescriptor(uri$1) {
-  return {
-    url: uri.toString(uri$1),
-    protocols: ['ws.vertexvis.com'],
-  };
-}
-function getWebsocketUri(config, resource, clientId, deviceId) {
-  if (clientId != null) {
-    return uri.appendPath(uri.toString(uri.parseAndAddParams('/ws', {
-      clientId,
-      deviceId,
-    })), uri.parse(config.network.renderingHost));
-  }
-  else {
-    return uri.appendPath(`/stream-keys/${resource.id}/session`, uri.parse(config.network.renderingHost));
-  }
-}
-
-const DEFAULT_VIEWER_SCENE_WAIT_MS = 15000;
-function getElementBackgroundColor(element) {
-  const styles = window.getComputedStyle(element);
-  return color.fromCss(styles.backgroundColor);
-}
-function getElementBoundingClientRect(element) {
-  return element.getBoundingClientRect();
-}
-
-const viewerCss = ":host{--image-background:var(--image-background);--viewer-background:var(--viewer-background);display:block;position:relative;width:300px;height:300px;min-width:1px;min-height:1px}.canvas-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:relative;background:var(--image-background, var(--viewer-background, #ffffff))}.enable-pointer-events{touch-action:none}.viewer-container{width:100%;height:100%;overflow:hidden;background:var(--viewer-background, #ffffff)}.error-message{position:absolute;top:50%;width:100%;transform:translateY(-50%);text-align:center}";
-
-const Viewer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.tap = createEvent(this, "tap", 7);
-    this.doubletap = createEvent(this, "doubletap", 7);
-    this.longpress = createEvent(this, "longpress", 7);
-    this.frameReceived = createEvent(this, "frameReceived", 7);
-    this.frameDrawn = createEvent(this, "frameDrawn", 7);
-    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.cameraTypeChanged = createEvent(this, "cameraTypeChanged", 7);
-    this.deviceIdChange = createEvent(this, "deviceIdChange", 7);
-    this.dimensionschange = createEvent(this, "dimensionschange", 7);
-    /**
-     * Sets the default environment for the viewer. This setting is used for
-     * auto-configuring network hosts.
-     *
-     * Use the `config` property for manually setting hosts.
-     *
-     * @see Viewer.config
-     */
-    this.configEnv = 'platprod';
-    /**
-     * Enables or disables the default mouse and touch interactions provided by
-     * 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.
-     *
-     */
-    this.keyboardControls = true;
-    /**
-     * Enables or disables the default rotation interaction being changed to
-     * rotate around the pointer down location.
-     */
-    this.rotateAroundTapPoint = true;
-    /**
-     * Specifies how phantom parts should appear.
-     * The opacity must be between 0 and 1, where 0 is completely hidden and 1 is completely visible.
-     */
-    this.phantom = { opacity: 0.1 };
-    /**
-     * Specifies whether to use the default lights for the scene. When false, default
-     * lights are used. When true, no default lights are used, and the lights must
-     * be specified separately.
-     */
-    this.noDefaultLights = false;
-    /**
-     * @private
-     * @internal
-     * Specifies experimental rendering options. For Vertex use only.
-     */
-    this.experimentalRenderingOptions = '';
-    /**
-     * An optional value that will debounce frame updates when resizing
-     * this viewer element.
-     */
-    this.resizeDebounce = 100;
-    /**
-     * @internal
-     */
-    this.stencilBuffer = new StencilBufferManager(this.hostElement);
-    /**
-     * Represents the current viewport of the viewer. The viewport represents the
-     * dimensions of the canvas where a frame is rendered. It contains methods for
-     * translating between viewport coordinates, frame coordinates and world
-     * coordinates.
-     */
-    this.viewport = Viewport.fromDimensions(dimensions.create(0, 0));
-    /**
-     * This stores internal state that you want to preserve across live-reloads,
-     * but shouldn't trigger a refresh if the data changes. Marking this with
-     * @State to allow to preserve state across live-reloads.
-     */
-    this.stateMap = {
-      cursorManager: new CursorManager(),
-      streamState: { type: 'disconnected' },
-    };
-    this.interactionHandlers = [];
-    this.defaultInteractionHandlerDisposables = [];
-    this.tapKeyInteractions = [];
-    this.defaultTapKeyInteractions = [];
-    this.internalFrameDrawnDispatcher = new EventDispatcher();
-    this.handleElementResize = this.handleElementResize.bind(this);
-  }
-  /**
-   * @ignore
-   */
-  componentWillLoad() {
-    var _a;
-    this.updateResolvedConfig();
-    this.calculateComponentDimensions();
-    this.resizeObserver = new ResizeObserver(this.handleElementResize);
-    this.registerSlotChangeListeners();
-    this.stream =
-      (_a = this.stream) !== null && _a !== void 0 ? _a : new ViewerStream(new WebSocketClientImpl(), {
-        loggingEnabled: this.getResolvedConfig().flags.logWsMessages,
-      });
-    this.addStreamListeners();
-    this.updateStreamAttributes();
-    this.stateMap.cursorManager.onChanged.on(() => this.handleCursorChanged());
-  }
-  /**
-   * @ignore
-   */
-  componentDidLoad() {
-    var _a;
-    this.interactionApi = this.createInteractionApi();
-    if (this.containerElement != null) {
-      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.containerElement);
-    }
-    if (this.src != null) {
-      this.load(this.src).catch((e) => {
-        console.error('Error loading scene', e);
-      });
-    }
-    this.initializeDefaultInteractionHandlers();
-    this.injectViewerApi();
-  }
-  /**
-   * @ignore
-   */
-  render() {
-    var _a;
-    return (h(Host, null, h("div", { class: "viewer-container", style: { cursor: cssCursor((_a = this.cursor) !== null && _a !== void 0 ? _a : '') }, onContextMenu: (event) => event.preventDefault() }, h("div", { ref: (ref) => (this.containerElement = ref), class: classnames('canvas-container', {
-        'enable-pointer-events ': window.PointerEvent != null,
-      }) }, h("canvas", { ref: (ref) => {
-        this.canvasElement = ref;
-        this.stateMap.interactionTarget = ref;
-      }, class: "canvas" }), this.errorMessage != null ? (h("div", { class: "error-message" }, this.errorMessage)) : null), h("slot", null))));
-  }
-  /**
-   * @internal
-   */
-  async dispatchFrameDrawn(frame) {
-    this.frame = frame;
-    this.internalFrameDrawnDispatcher.emit(frame);
-    this.frameDrawn.emit(frame);
-  }
-  /**
-   * Registers and initializes an interaction handler with the viewer. Returns a
-   * `Disposable` that should be used to deregister the interaction handler.
-   *
-   * `InteractionHandler`s are used to build custom mouse and touch interactions
-   * for the viewer. Use `<vertex-viewer camera-controls="false" />` to disable
-   * the default camera controls provided by the viewer.
-   *
-   * @example
-   * ```
-   * class CustomInteractionHandler extends InteractionHandler {
-   *   private element: HTMLElement;
-   *   private api: InteractionApi;
-   *
-   *   public dispose(): void {
-   *     this.element.removeEventListener('click', this.handleElementClick);
-   *   }
-   *
-   *   public initialize(element: HTMLElement, api: InteractionApi): void {
-   *     this.api = api;
-   *     this.element = element;
-   *     this.element.addEventListener('click', this.handleElementClick);
-   *   }
-   *
-   *   private handleElementClick = (event: MouseEvent) => {
-   *     api.tap({ x: event.clientX, y: event.clientY });
-   *   }
-   * }
-   *
-   * const viewer = document.querySelector("vertex-viewer");
-   * viewer.registerInteractionHandler(new CustomInteractionHandler);
-   * ```
-   *
-   * @param interactionHandler The interaction handler to register.
-   * @returns {Promise<void>} A promise containing the disposable to use to
-   *  deregister the handler.
-   */
-  async registerInteractionHandler(interactionHandler) {
-    this.interactionHandlers.push(interactionHandler);
-    this.initializeInteractionHandler(interactionHandler);
-    return {
-      dispose: () => {
-        const index = this.interactionHandlers.indexOf(interactionHandler);
-        if (index !== -1) {
-          this.interactionHandlers[index].dispose();
-          this.interactionHandlers.splice(index, 1);
-        }
-      },
-    };
-  }
-  /**
-   * Registers a key interaction to be invoked when a specific set of
-   * keys are pressed during a `tap` event.
-   *
-   * `KeyInteraction`s are used to build custom keyboard shortcuts for the
-   * viewer using the current state of they keyboard to determine whether
-   * the `fn` should be invoked. Use `<vertex-viewer keyboard-controls="false" />`
-   * to disable the default keyboard shortcuts provided by the viewer.
-   *
-   * @example
-   * ```
-   * class CustomKeyboardInteraction extends KeyInteraction<TapEventDetails> {
-   *   constructor(private viewer: HTMLVertexViewerElement) {}
-   *
-   *   public predicate(keyState: KeyState): boolean {
-   *     return keyState['Alt'];
-   *   }
-   *
-   *   public async fn(event: TapEventDetails) {
-   *     const scene = await this.viewer.scene();
-   *     const result = await scene.raycaster().hitItems(event.position);
-   *
-   *     if (result.hits.length > 0) {
-   *       await scene
-   *         .camera()
-   *         .fitTo(q => q.withItemId(result.hits[0].itemId))
-   *         .render();
-   *     }
-   *   }
-   * }
-   * ```
-   *
-   * @param keyInteraction - The `KeyInteraction` to register.
-   */
-  async registerTapKeyInteraction(keyInteraction) {
-    this.tapKeyInteractions = [...this.tapKeyInteractions, keyInteraction];
-  }
-  /**
-   * The HTML element that will handle interaction events from the user. Used by
-   * components to listen for interaction events from the same element as the
-   * viewer. Note, this property maybe removed in the future when refactoring
-   * our interaction handling.
-   *
-   * @internal
-   * @deprecated Use `InteractionHandler`.
-   */
-  async getInteractionTarget_DEPRECATED() {
-    if (this.stateMap.interactionTarget != null) {
-      return this.stateMap.interactionTarget;
-    }
-    else
-      throw new Error('Interaction target is undefined.');
-  }
-  /**
-   * Adds a cursor to the viewer, and displays it if the cursor has the highest
-   * priority.
-   *
-   * Cursors are managed as a prioritized list. A cursor is displayed if it has
-   * the highest priority or if the cursor is the most recently added cursor in
-   * the set of cursors with the same priority.
-   *
-   * To remove a cursor, call `dispose()` on the returned disposable.
-   *
-   * @param cursor The cursor to add.
-   * @param priority The priority of the cursor.
-   * @returns A disposable that can be used to remove the cursor.
-   * @see See {@link CursorManager} for constants to pass to `priority`.
-   */
-  async addCursor(cursor, priority) {
-    return this.stateMap.cursorManager.add(cursor, priority);
-  }
-  async getInteractionHandlers() {
-    return this.interactionHandlers;
-  }
-  /**
-   * @internal
-   * @ignore
-   */
-  async getKeyInteractions() {
-    return this.tapKeyInteractions;
-  }
-  async getBaseInteractionHandler() {
-    return this.baseInteractionHandler;
-  }
-  /**
-   * @deprecated Use `token`.
-   */
-  async getJwt() {
-    return this.token;
-  }
-  handleSrcChanged(src) {
-    if (src != null) {
-      this.load(src);
-    }
-    else {
-      this.unload();
-    }
-  }
-  /**
-   * @ignore
-   */
-  handleCameraControlsChanged() {
-    this.initializeDefaultCameraInteractionHandlers();
-  }
-  /**
-   * @ignore
-   */
-  handleKeyboardControlsChanged() {
-    this.initializeDefaultKeyboardInteractionHandlers();
-  }
-  /**
-   * @ignore
-   */
-  handleRotateAboutTapPointChanged() {
-    var _a, _b;
-    this.updateStreamAttributes();
-    if (this.rotateAroundTapPoint) {
-      (_a = this.baseInteractionHandler) === null || _a === void 0 ? void 0 : _a.setPrimaryInteractionType('rotate-point');
-    }
-    else {
-      (_b = this.baseInteractionHandler) === null || _b === void 0 ? void 0 : _b.setPrimaryInteractionType('rotate');
-    }
-  }
-  handleCameraTypeChanged(updatedCameraType, previousCameraType) {
-    if (updatedCameraType !== previousCameraType) {
-      this.updateCameraType();
-    }
-  }
-  /**
-   * @ignore
-   */
-  handleDepthBuffersChanged() {
-    this.updateStreamAttributes();
-  }
-  handlePhantomChanged() {
-    this.updateStreamAttributes();
-  }
-  handleNoDefaultLightsChanged() {
-    this.updateStreamAttributes();
-  }
-  /**
-   * @ignore
-   */
-  handleExperimentalRenderingOptionsChanged() {
-    this.updateStreamAttributes();
-  }
-  /**
-   * @ignore
-   */
-  handleFeatureLinesChanged() {
-    this.updateStreamAttributes();
-  }
-  /**
-   * @ignore
-   */
-  handleSelectionHighlightingChanged() {
-    this.updateStreamAttributes();
-  }
-  /**
-   * @ignore
-   */
-  handleFeatureHighlightingChanged() {
-    this.updateStreamAttributes();
-  }
-  /**
-   * @ignore
-   */
-  handleFeatureMapsChanged() {
-    this.updateStreamAttributes();
-  }
-  /**
-   * @ignore
-   */
-  handleConfigChanged() {
-    this.updateResolvedConfig();
-  }
-  /**
-   * @ignore
-   */
-  handleConfigEnvChanged() {
-    this.updateResolvedConfig();
-  }
-  /**
-   * Loads the given scene into the viewer and return a `Promise` that
-   * resolves when the scene has been loaded. The specified scene is
-   * provided as a URN in the following format:
-   *
-   *  * `urn:vertex:scene:<sceneid>`
-   *
-   * @param urn The URN of the resource to load.
-   */
-  async load(urn) {
-    var _a;
-    if (this.stream != null && this.dimensions != null) {
-      this.calculateComponentDimensions();
-      this.stream.update({
-        streamAttributes: this.getStreamAttributes(),
-        config: parseConfig(this.configEnv, this.config),
-        dimensions: this.dimensions,
-        frameBgColor: this.getBackgroundColor(),
-      });
-      await ((_a = this.stream) === null || _a === void 0 ? void 0 : _a.load(urn, this.clientId, this.getDeviceId(), this.getResolvedConfig()));
-      this.sceneReady.emit();
-    }
-    else {
-      throw new ViewerInitializationError('Cannot load scene. Viewer has not been initialized.');
-    }
-  }
-  /**
-   * Disconnects the websocket and removes any internal state associated with
-   * the scene.
-   */
-  async unload() {
-    if (this.stream != null) {
-      this.stream.disconnect();
-      this.frame = undefined;
-      this.errorMessage = 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
-   * currently being viewed. These operations include updating items,
-   * positioning the camera and performing hit tests.
-   */
-  async scene() {
-    return this.createScene();
-  }
-  /**
-   * Returns `true` indicating that the scene is ready to be interacted with.
-   */
-  async isSceneReady() {
-    return this.stateMap.streamState.type === 'connected';
-  }
-  async handleTapEvent(event) {
-    this.tapKeyInteractions
-      .filter((i) => i.predicate(event.detail))
-      .forEach((i) => i.fn(event.detail));
-  }
-  emitConnectionChange(status) {
-    this.connectionChange.emit(status);
-  }
-  handleElementResize(entries) {
-    const dimensionsHaveChanged = entries.length > 0 &&
-      this.dimensions != null &&
-      !dimensions.isEqual(entries[0].contentRect, this.viewport);
-    if (dimensionsHaveChanged) {
-      if (this.resizeTimer != null) {
-        clearTimeout(this.resizeTimer);
-        this.resizeTimer = undefined;
-      }
-      if (!this.isResizing) {
-        this.resizeTimer = setTimeout(() => {
-          this.isResizing = true;
-          this.isResizeUpdate = true;
-          this.recalculateComponentDimensions();
-        }, this.resizeDebounce);
-      }
-    }
-  }
-  registerSlotChangeListeners() {
-    this.mutationObserver = new MutationObserver((_) => this.injectViewerApi());
-    this.mutationObserver.observe(this.hostElement, {
-      childList: true,
-      subtree: true,
-    });
-  }
-  injectViewerApi() {
-    function queryChildren(el) {
-      return Array.from(el.querySelectorAll('*'));
-    }
-    const children = queryChildren(this.hostElement);
-    children
-      .filter((node) => node.nodeName.startsWith('VERTEX-'))
-      .reduce((elements, element) => [
-      ...elements,
-      element,
-      ...queryChildren(element),
-    ], [])
-      .forEach((node) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      node.viewer = this.hostElement;
-    });
-  }
-  calculateComponentDimensions() {
-    var _a;
-    const maxPixelCount = 2073600;
-    const bounds = this.getBounds();
-    if ((bounds === null || bounds === void 0 ? void 0 : bounds.width) != null && (bounds === null || bounds === void 0 ? void 0 : bounds.height) != null) {
-      const measuredViewport = dimensions.create(bounds.width, bounds.height);
-      const trimmedViewport = dimensions.scaleFit(maxPixelCount, measuredViewport);
-      this.hostDimensions = measuredViewport;
-      this.dimensions =
-        trimmedViewport != null
-          ? dimensions.create(trimmedViewport.width, trimmedViewport.height)
-          : undefined;
-      this.viewport = Viewport.fromDimensions((_a = this.getCanvasDimensions()) !== null && _a !== void 0 ? _a : dimensions.create(0, 0));
-    }
-  }
-  recalculateComponentDimensions() {
-    var _a;
-    if (this.isResizing) {
-      this.calculateComponentDimensions();
-      this.isResizing = false;
-      if (((_a = this.stream) === null || _a === void 0 ? void 0 : _a.getState().type) === 'connected') {
-        this.updateDimensions(this.dimensions);
-      }
-    }
-  }
-  reportPerformance(timings) {
-    if (this.stateMap.streamState.type === 'connected') {
-      const payload = {
-        timings: timings.map((t) => ({
-          receiveToPaintDuration: toProtoDuration(t.duration),
-        })),
-      };
-      this.getStream().recordPerformance(payload, false);
-    }
-  }
-  addStreamListeners() {
-    this.stateMap.streamListeners = this.getStream().stateChanged.on((s) => {
-      this.handleStreamStateChanged(this.stateMap.streamState, s);
-    });
-  }
-  handleStreamStateChanged(previous, state) {
-    this.stateMap.streamState = state;
-    if (state.type === 'connecting') {
-      this.handleConnecting(previous, state);
-    }
-    else if (state.type === 'connected') {
-      this.handleConnected(previous, state);
-    }
-    else if (state.type === 'connection-failed') {
-      this.handleConnectionFailed(previous, state);
-    }
-    else if (state.type === 'disconnected') {
-      this.handleDisconnected(previous, state);
-    }
-  }
-  handleConnecting(previous, state) {
-    if (previous.type !== 'connecting') {
-      this.token = undefined;
-      this.errorMessage = undefined;
-      this.emitConnectionChange({ status: 'connecting' });
-    }
-  }
-  handleConnected(previous, state) {
-    var _a;
-    this.token = state.token.token;
-    if (previous.type !== 'connected') {
-      this.errorMessage = undefined;
-      this.canvasRenderer = measureCanvasRenderer(paintTime, createCanvasRenderer(), this.getResolvedConfig().flags.logFrameRate, (timings) => this.reportPerformance(timings));
-      this.emitConnectionChange({
-        status: 'connected',
-        jwt: state.token.token,
-      });
-      this.deviceIdChange.emit(state.deviceId);
-    }
-    if (((_a = this.frame) === null || _a === void 0 ? void 0 : _a.getId()) !== state.frame.getId()) {
-      this.updateFrame(state.frame);
-    }
-    this.updateDimensions(this.dimensions);
-  }
-  handleConnectionFailed(previous, state) {
-    if (previous.type !== 'connection-failed') {
-      this.token = undefined;
-      this.errorMessage = state.message;
-      this.emitConnectionChange({
-        status: 'connection-failed',
-        errorMessage: state.message,
-      });
-    }
-  }
-  handleDisconnected(previous, state) {
-    if (previous.type !== 'disconnected') {
-      this.token = undefined;
-      this.errorMessage = undefined;
-      this.emitConnectionChange({ status: 'disconnected' });
-    }
-  }
-  updateDimensions(dimensions) {
-    var _a;
-    (_a = this.stream) === null || _a === void 0 ? void 0 : _a.update({ dimensions });
-    this.dimensionschange.emit(dimensions);
-  }
-  async updateFrame(frame) {
-    var _a;
-    const canvasDimensions = this.getCanvasDimensions();
-    if (this.canvasElement != null &&
-      canvasDimensions != null &&
-      ((_a = this.frame) === null || _a === void 0 ? void 0 : _a.getId()) !== frame.getId()) {
-      const canvas = this.canvasElement.getContext('2d');
-      if (canvas != null) {
-        const previousFrame = this.frame;
-        this.frame = copySummaryIfInvalid(frame, previousFrame);
-        this.updateInteractionApi(previousFrame);
-        const data = {
-          canvas,
-          canvasDimensions,
-          dimensions: this.dimensions,
-          frame: this.frame,
-          viewport: this.viewport,
-          beforeDraw: () => {
-            this.updateCanvasDimensions(canvasDimensions);
-            this.isResizeUpdate = false;
-          },
-          predicate: () => {
-            if (this.isResizeUpdate) {
-              return (this.dimensions == null ||
-                dimensions.isEqual(this.dimensions, data.frame.image.imageAttr.frameDimensions));
-            }
-            return true;
-          },
-        };
-        this.frameReceived.emit(this.frame);
-        if (this.frame.scene.hasChanged) {
-          this.sceneChanged.emit();
-        }
-        const drawnFrame = await this.canvasRenderer(data);
-        if (drawnFrame != null) {
-          this.dispatchFrameDrawn(drawnFrame);
-        }
-      }
-    }
-  }
-  async initializeDefaultInteractionHandlers() {
-    var _a;
-    await this.initializeDefaultCameraInteractionHandlers();
-    await this.initializeDefaultTapInteractionHandler();
-    this.initializeDefaultKeyboardInteractionHandlers();
-    if (this.rotateAroundTapPoint) {
-      (_a = this.baseInteractionHandler) === null || _a === void 0 ? void 0 : _a.setPrimaryInteractionType('rotate-point');
-    }
-  }
-  clearDefaultCameraInteractionHandlers() {
-    this.defaultInteractionHandlerDisposables.forEach((disposable) => disposable.dispose());
-    this.defaultInteractionHandlerDisposables = [];
-  }
-  clearDefaultKeyboardInteractions() {
-    this.defaultTapKeyInteractions.forEach((interaction) => {
-      const index = this.tapKeyInteractions.indexOf(interaction);
-      if (index !== -1) {
-        this.tapKeyInteractions.splice(index, 1);
-      }
-    });
-    this.tapKeyInteractions = [];
-  }
-  async initializeDefaultCameraInteractionHandlers() {
-    var _a, _b;
-    this.clearDefaultCameraInteractionHandlers();
-    if (this.cameraControls) {
-      if (window.PointerEvent != null) {
-        this.baseInteractionHandler =
-          (_a = this.baseInteractionHandler) !== null && _a !== void 0 ? _a : new PointerInteractionHandler(() => this.getResolvedConfig());
-        const baseDisposable = await this.registerInteractionHandler(this.baseInteractionHandler);
-        const multiPointerDisposable = await this.registerInteractionHandler(new MultiPointerInteractionHandler());
-        this.defaultInteractionHandlerDisposables = [
-          baseDisposable,
-          multiPointerDisposable,
-        ];
-      }
-      else {
-        // fallback to touch events and mouse events as a default
-        this.baseInteractionHandler =
-          (_b = this.baseInteractionHandler) !== null && _b !== void 0 ? _b : new MouseInteractionHandler(() => this.getResolvedConfig());
-        const baseDisposable = await this.registerInteractionHandler(this.baseInteractionHandler);
-        const touchDisposable = await this.registerInteractionHandler(new TouchInteractionHandler());
-        this.defaultInteractionHandlerDisposables = [
-          baseDisposable,
-          touchDisposable,
-        ];
-      }
-    }
-  }
-  initializeDefaultKeyboardInteractionHandlers() {
-    var _a;
-    this.clearDefaultKeyboardInteractions();
-    if (this.keyboardControls && this.stream != null) {
-      (_a = this.baseInteractionHandler) === null || _a === void 0 ? void 0 : _a.setDefaultKeyboardControls(this.keyboardControls);
-      const flyToPart = new FlyToPartKeyInteraction(this.stream, () => this.getResolvedConfig(), () => this.getImageScale());
-      const flyToPosition = new FlyToPositionKeyInteraction(this.stream, () => this.getResolvedConfig(), () => this.getImageScale(), () => this.createScene());
-      this.registerTapKeyInteraction(flyToPart);
-      this.registerTapKeyInteraction(flyToPosition);
-      this.defaultTapKeyInteractions = [flyToPart, flyToPosition];
-    }
-  }
-  async initializeDefaultTapInteractionHandler() {
-    if (this.tapHandlerDisposable == null) {
-      if (window.PointerEvent != null) {
-        const tapInteractionHandler = new TapInteractionHandler('pointerdown', 'pointerup', 'pointermove', () => this.getResolvedConfig());
-        this.tapHandlerDisposable = await this.registerInteractionHandler(tapInteractionHandler);
-      }
-      else {
-        const tapInteractionHandler = new TapInteractionHandler('mousedown', 'mouseup', 'mousemove', () => this.getResolvedConfig());
-        this.tapHandlerDisposable = await this.registerInteractionHandler(tapInteractionHandler);
-      }
-    }
-  }
-  initializeInteractionHandler(handler) {
-    if (this.stateMap.interactionTarget == null) {
-      throw new InteractionHandlerError('Cannot initialize interaction handler. Interaction target is undefined.');
-    }
-    if (this.interactionApi == null) {
-      throw new InteractionHandlerError('Cannot initialize interaction handler. Interaction APi is undefined.');
-    }
-    handler.initialize(this.stateMap.interactionTarget, this.interactionApi);
-  }
-  createInteractionApi() {
-    if (this.stream == null) {
-      throw new ComponentInitializationError('Cannot create interaction API. Component has not been initialized.');
-    }
-    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(() => {
-      this.cursor = this.stateMap.cursorManager.getActiveCursor();
-    });
-  }
-  async createScene() {
-    const state = await this.waitForConnectedState();
-    const { frame, sceneId, sceneViewId, worldOrientation } = state;
-    return new Scene(this.getStream(), frame, fromPbFrameOrThrow(worldOrientation), () => this.getImageScale(), this.viewport, sceneId, sceneViewId);
-  }
-  /**
-   * This function is currently not in use, but will required
-   * when we want to automatically configure the background color of
-   * JPEG images.
-   */
-  getBackgroundColor() {
-    if (this.containerElement != null) {
-      return getElementBackgroundColor(this.containerElement);
-    }
-  }
-  getBounds() {
-    return getElementBoundingClientRect(this.hostElement);
-  }
-  getCanvasDimensions() {
-    return this.getResolvedConfig().flags.letterboxFrames
-      ? this.dimensions
-      : this.hostDimensions;
-  }
-  getImageScale() {
-    const canvasDimensions = this.getCanvasDimensions();
-    if (this.dimensions != null && canvasDimensions != null) {
-      return point.create(this.dimensions.width / canvasDimensions.width, this.dimensions.height / canvasDimensions.height);
-    }
-  }
-  getStreamAttributes() {
-    return {
-      depthBuffers: this.getDepthBufferStreamAttributesValue(),
-      phantom: this.phantom,
-      noDefaultLights: this.noDefaultLights,
-      featureLines: this.featureLines,
-      featureHighlighting: this.featureHighlighting,
-      featureMaps: this.featureMaps,
-      experimentalRenderingOptions: this.experimentalRenderingOptions,
-      selectionHighlighting: this.selectionHighlighting,
-    };
-  }
-  updateCanvasDimensions(dimensions) {
-    if (this.canvasElement != null) {
-      this.canvasElement.width = dimensions.width;
-      this.canvasElement.height = dimensions.height;
-    }
-  }
-  updateStreamAttributes() {
-    var _a;
-    (_a = this.stream) === null || _a === void 0 ? void 0 : _a.update({ streamAttributes: this.getStreamAttributes() });
-  }
-  updateInteractionApi(previousFrame) {
-    if (this.frame != null) {
-      const hasChangedFromPerspective = (previousFrame == null || previousFrame.scene.camera.isPerspective()) &&
-        this.frame.scene.camera.isOrthographic();
-      const hasChangedFromOrthographic = (previousFrame == null ||
-        previousFrame.scene.camera.isOrthographic()) &&
-        this.frame.scene.camera.isPerspective();
-      if (hasChangedFromPerspective || hasChangedFromOrthographic) {
-        this.interactionApi = this.createInteractionApi();
-        this.cameraType = this.frame.scene.camera.isPerspective()
-          ? 'perspective'
-          : 'orthographic';
-        this.cameraTypeChanged.emit(this.cameraType);
-        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: toProtobuf(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: toProtobuf(toPerspective(this.frame.scene.camera)),
-        });
-      }
-    }
-  }
-  getDepthBufferStreamAttributesValue() {
-    var _a;
-    const depthBuffer = (_a = this.depthBuffers) !== null && _a !== void 0 ? _a : (this.rotateAroundTapPoint ? 'final' : undefined);
-    return depthBuffer;
-  }
-  updateResolvedConfig() {
-    this.resolvedConfig = parseConfig(this.configEnv, this.config);
-  }
-  getResolvedConfig() {
-    return getRequiredProp('Resolved config is undefined', () => this.resolvedConfig);
-  }
-  getStream() {
-    return getRequiredProp('Stream is undefined', () => this.stream);
-  }
-  getDeviceId() {
-    if (this.deviceId == null) {
-      try {
-        this.deviceId = getStorageEntry(StorageKeys.DEVICE_ID, (entry) => entry['device-id']);
-      }
-      catch (e) {
-        console.warn('Cannot read device ID. Local storage is not supported.');
-      }
-      if (this.deviceId == null) {
-        this.deviceId = uuid.create();
-        try {
-          upsertStorageEntry(StorageKeys.DEVICE_ID, {
-            ['device-id']: this.deviceId,
-          });
-        }
-        catch (e) {
-          console.warn('Cannot write device ID. Local storage is not supported.');
-        }
-      }
-    }
-    return this.deviceId;
-  }
-  async waitForConnectedState() {
-    if (this.stateMap.streamState.type !== 'connected') {
-      console.debug('Stream was not in a connected state. Waiting for successful connection.');
-      return new Promise((resolve, reject) => {
-        const disposable = this.getStream().onStateChanged((state) => {
-          if (state.type === 'connected') {
-            resolve(state);
-          }
-        });
-        setTimeout(() => {
-          disposable.dispose();
-          reject(new Error('Timed out waiting for connected state.'));
-        }, DEFAULT_VIEWER_SCENE_WAIT_MS);
-      });
-    }
-    return this.stateMap.streamState;
-  }
-  get hostElement() { return this; }
-  static get watchers() { return {
-    "src": ["handleSrcChanged"],
-    "cameraControls": ["handleCameraControlsChanged"],
-    "keyboardControls": ["handleKeyboardControlsChanged"],
-    "rotateAroundTapPoint": ["handleRotateAboutTapPointChanged"],
-    "cameraType": ["handleCameraTypeChanged"],
-    "depthBuffers": ["handleDepthBuffersChanged"],
-    "phantom": ["handlePhantomChanged"],
-    "noDefaultLights": ["handleNoDefaultLightsChanged"],
-    "experimentalRenderingOptions": ["handleExperimentalRenderingOptionsChanged"],
-    "featureLines": ["handleFeatureLinesChanged"],
-    "selectionHighlighting": ["handleSelectionHighlightingChanged"],
-    "featureHighlighting": ["handleFeatureHighlightingChanged"],
-    "featureMaps": ["handleFeatureMapsChanged"],
-    "config": ["handleConfigChanged"],
-    "configEnv": ["handleConfigEnvChanged"]
-  }; }
-  static get style() { return viewerCss; }
-}, [1, "vertex-viewer", {
-    "src": [1],
-    "clientId": [1, "client-id"],
-    "deviceId": [1025, "device-id"],
-    "config": [1],
-    "configEnv": [1, "config-env"],
-    "resolvedConfig": [1040],
-    "cameraControls": [4, "camera-controls"],
-    "cameraType": [1537, "camera-type"],
-    "keyboardControls": [4, "keyboard-controls"],
-    "rotateAroundTapPoint": [4, "rotate-around-tap-point"],
-    "token": [1025],
-    "depthBuffers": [1, "depth-buffers"],
-    "phantom": [16],
-    "noDefaultLights": [4, "no-default-lights"],
-    "experimentalRenderingOptions": [1, "experimental-rendering-options"],
-    "featureLines": [16],
-    "selectionHighlighting": [16],
-    "featureHighlighting": [16],
-    "featureMaps": [1, "feature-maps"],
-    "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_DEPRECATED": [64],
-    "addCursor": [64],
-    "getInteractionHandlers": [64],
-    "getKeyInteractions": [64],
-    "getBaseInteractionHandler": [64],
-    "getJwt": [64],
-    "load": [64],
-    "unload": [64],
-    "scene": [64],
-    "isSceneReady": [64]
-  }, [[0, "tap", "handleTapEvent"]]]);
-function getRequiredProp(errorMsg, getter) {
-  const value = getter();
-  if (value != null) {
-    return value;
-  }
-  else
-    throw new Error(errorMsg);
-}
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-viewer"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-viewer":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Viewer);
-      }
-      break;
-  } });
-}
-
-const VertexViewer = Viewer;
-const defineCustomElement = defineCustomElement$1;
-
-export { VertexViewer, defineCustomElement };
-
-//# sourceMappingURL=vertex-viewer.js.map