@vertexvis/viewer 0.22.0-canary.2 → 0.22.0-testing.0

package/dist/cjs/{queries-d9cd5ec1.js → queries-918bb133.js}

@@ -3,13 +3,15 @@
  */
 'use strict';
 
+const bundle_esm = require('./bundle.esm-b2145e44.js');
+const dom = require('./dom-4344863c.js');
+const multiElementInteractionHandler = require('./multiElementInteractionHandler-93bd9593.js');
 const browser_esm = require('./browser.esm-13ce8652.js');
 const errors = require('./errors-1c8307fa.js');
-const bundle_esm$1 = require('./bundle.esm-b2145e44.js');
 const streamAttributes = require('./streamAttributes-a383ddd7.js');
 require('./entities-551add54.js');
 const scene_view_api_pb = require('./scene_view_api_pb-ecc4b802.js');
-const bundle_esm = require('./bundle.esm-013a8b84.js');
+const bundle_esm$1 = require('./bundle.esm-013a8b84.js');
 
 const defaultColor = {
   opacity: 255,
@@ -69,6 +71,271 @@ const colorMaterial = /*#__PURE__*/Object.freeze({
   fromHex: fromHex
 });
 
+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 = bundle_esm.point.create(event.screenX, event.screenY);
+      api.beginInteraction();
+    }
+  }
+  drag(event, api) {
+    if (this.currentPosition != null) {
+      const position = bundle_esm.point.create(event.screenX, event.screenY);
+      const delta = bundle_esm.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 = bundle_esm.point.create(event.screenX, event.screenY);
+      this.startingPosition = canvasPosition;
+      api.beginInteraction();
+    }
+  }
+  drag(event, api) {
+    if (this.currentPosition != null && this.startingPosition != null) {
+      const position = bundle_esm.point.create(event.screenX, event.screenY);
+      const delta = bundle_esm.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 = bundle_esm.point.create(event.clientX, event.clientY);
+      const rect = element.getBoundingClientRect();
+      const point = dom.getMouseClientPosition(event, rect);
+      this.startPt = point;
+      api.beginInteraction();
+    }
+  }
+  drag(event, api) {
+    if (this.currentPosition != null) {
+      const position = bundle_esm.point.create(event.clientX, event.clientY);
+      const delta = bundle_esm.point.subtract(position, this.currentPosition);
+      if (this.startPt != null) {
+        api.zoomCameraToPoint(this.startPt, delta.y);
+        this.currentPosition = position;
+      }
+    }
+  }
+  setInteractionTimeout(ms) {
+    this.interactionTimeout = ms;
+  }
+  getInteractionTimeout() {
+    return this.interactionTimeout;
+  }
+  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 = bundle_esm.point.create(event.screenX, event.screenY);
+      this.canvasRect = element.getBoundingClientRect();
+      api.beginInteraction();
+    }
+  }
+  drag(event, api) {
+    if (this.currentPosition != null && this.canvasRect != null) {
+      const position = dom.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 = bundle_esm.point.create(event.offsetX, event.offsetY);
+    this.canvasRect = element.getBoundingClientRect();
+    api.beginInteraction();
+  }
+  drag(event, api) {
+    const position = dom.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 = bundle_esm.point.create(event.screenX, event.screenY);
+      api.beginInteraction();
+    }
+  }
+  drag(event, api) {
+    if (this.currentPosition != null) {
+      const position = bundle_esm.point.create(event.screenX, event.screenY);
+      const delta = bundle_esm.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 PointerInteractionHandler extends multiElementInteractionHandler.MultiElementInteractionHandler {
+  constructor(getConfig, rotateInteraction = new RotateInteraction(), rotatePointInteraction = new RotatePointInteraction(), zoomInteraction = new ZoomInteraction(), panInteraction = new PanInteraction(), twistInteraction = new TwistInteraction(), pivotInteraction = new PivotInteraction()) {
+    super('pointerdown', 'pointerup', 'pointermove', rotateInteraction, rotatePointInteraction, zoomInteraction, panInteraction, twistInteraction, 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);
+  }
+  setZoomInteractionTimeout(ms) {
+    this.zoomInteraction.setInteractionTimeout(ms);
+  }
+  getZoomInteractionTimeout() {
+    return this.zoomInteraction.getInteractionTimeout();
+  }
+  addEventListenersToElement(element) {
+    element.addEventListener(this.downEvent, this.handleDownEvent);
+    element.addEventListener('wheel', this.handleMouseWheel, {
+      passive: false,
+    });
+    return {
+      dispose: () => {
+        element.removeEventListener(this.downEvent, this.handleDownEvent);
+        element.removeEventListener('wheel', this.handleMouseWheel);
+      },
+    };
+  }
+  handlePointerDown(event) {
+    this.downPosition = bundle_esm.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);
+    }
+  }
+}
+
 function fromUrn(urn) {
   var _a;
   const uri = browser_esm.uri.parse(urn);
@@ -460,7 +727,7 @@ function buildFlyToOperation(frameCorrelationId, options, animation, baseCamera)
     },
     animation: animation
       ? {
-        duration: bundle_esm.toProtoDuration(animation.milliseconds),
+        duration: bundle_esm$1.toProtoDuration(animation.milliseconds),
       }
       : undefined,
     baseCamera: baseCamera != null ? streamAttributes.toProtobuf(baseCamera) : undefined,
@@ -687,9 +954,9 @@ class Camera {
    */
   signedDistanceToBoundingBoxCenter(boundingBox) {
     const { position, viewVector } = streamAttributes.withPositionAndViewVector(this.data);
-    const boundingBoxCenter = bundle_esm$1.boundingBox.center(boundingBox !== null && boundingBox !== void 0 ? boundingBox : this.boundingBox);
-    const cameraToCenter = bundle_esm$1.vector3.subtract(boundingBoxCenter, position);
-    return (bundle_esm$1.vector3.dot(viewVector, cameraToCenter) / bundle_esm$1.vector3.magnitude(viewVector));
+    const boundingBoxCenter = bundle_esm.boundingBox.center(boundingBox !== null && boundingBox !== void 0 ? boundingBox : this.boundingBox);
+    const cameraToCenter = bundle_esm.vector3.subtract(boundingBoxCenter, position);
+    return (bundle_esm.vector3.dot(viewVector, cameraToCenter) / bundle_esm.vector3.magnitude(viewVector));
   }
   /**
    * Specifies that the next render of the camera will be repositioned to one of
@@ -859,22 +1126,22 @@ class Camera {
    * @param normal The normal of the plane to align to.
    */
   alignTo(position, normal) {
-    const worldX = bundle_esm$1.vector3.normalize(bundle_esm$1.vector3.cross(this.up, bundle_esm$1.vector3.normalize(this.viewVector)));
-    const positiveWorldY = bundle_esm$1.vector3.normalize(bundle_esm$1.vector3.cross(bundle_esm$1.vector3.normalize(this.viewVector), worldX));
+    const worldX = bundle_esm.vector3.normalize(bundle_esm.vector3.cross(this.up, bundle_esm.vector3.normalize(this.viewVector)));
+    const positiveWorldY = bundle_esm.vector3.normalize(bundle_esm.vector3.cross(bundle_esm.vector3.normalize(this.viewVector), worldX));
     // Invert the world y axis if the provided normal is more than 90 degrees from it
     // to compute a proper angle to rotate the view vector by
-    const worldY = bundle_esm$1.vector3.angleTo(normal, positiveWorldY) > Math.PI / 2
-      ? bundle_esm$1.vector3.negate(positiveWorldY)
+    const worldY = bundle_esm.vector3.angleTo(normal, positiveWorldY) > Math.PI / 2
+      ? bundle_esm.vector3.negate(positiveWorldY)
       : positiveWorldY;
-    const localX = bundle_esm$1.vector3.isEqual(worldY, normal)
+    const localX = bundle_esm.vector3.isEqual(worldY, normal)
       ? worldX
-      : bundle_esm$1.vector3.normalize(bundle_esm$1.vector3.cross(worldY, normal));
-    const transformedViewVector = bundle_esm$1.vector3.transformMatrix(this.viewVector, bundle_esm$1.matrix4.makeRotation(bundle_esm$1.quaternion.fromAxisAngle(localX, bundle_esm$1.vector3.angleTo(normal, worldY))));
-    const lookAtRay = bundle_esm$1.ray.create({
+      : bundle_esm.vector3.normalize(bundle_esm.vector3.cross(worldY, normal));
+    const transformedViewVector = bundle_esm.vector3.transformMatrix(this.viewVector, bundle_esm.matrix4.makeRotation(bundle_esm.quaternion.fromAxisAngle(localX, bundle_esm.vector3.angleTo(normal, worldY))));
+    const lookAtRay = bundle_esm.ray.create({
       origin: position,
-      direction: bundle_esm$1.vector3.normalize(transformedViewVector),
+      direction: bundle_esm.vector3.normalize(transformedViewVector),
     });
-    const lookAt = bundle_esm$1.ray.at(lookAtRay, bundle_esm$1.vector3.magnitude(this.viewVector));
+    const lookAt = bundle_esm.ray.at(lookAtRay, bundle_esm.vector3.magnitude(this.viewVector));
     return this.update({
       position,
       lookAt,
@@ -893,8 +1160,8 @@ class Camera {
   standardView(standardView) {
     return this.update({
       position: standardView.position,
-      viewVector: bundle_esm$1.vector3.subtract(bundle_esm$1.vector3.origin(), standardView.position),
-      lookAt: bundle_esm$1.vector3.origin(),
+      viewVector: bundle_esm.vector3.subtract(bundle_esm.vector3.origin(), standardView.position),
+      lookAt: bundle_esm.vector3.origin(),
       up: standardView.up,
     });
   }
@@ -908,15 +1175,15 @@ class Camera {
    * @returns A new camera.
    */
   standardViewFixedLookAt(standardView) {
-    const standardViewRay = bundle_esm$1.ray.create({
+    const standardViewRay = bundle_esm.ray.create({
       origin: this.lookAt,
-      direction: bundle_esm$1.vector3.normalize(standardView.position),
+      direction: bundle_esm.vector3.normalize(standardView.position),
     });
-    const updatedPosition = bundle_esm$1.ray.at(standardViewRay, bundle_esm$1.vector3.magnitude(this.viewVector));
+    const updatedPosition = bundle_esm.ray.at(standardViewRay, bundle_esm.vector3.magnitude(this.viewVector));
     return this.update({
       up: standardView.up,
       position: updatedPosition,
-      viewVector: bundle_esm$1.vector3.subtract(this.lookAt, updatedPosition),
+      viewVector: bundle_esm.vector3.subtract(this.lookAt, updatedPosition),
     });
   }
   buildFlyToType(options) {
@@ -953,15 +1220,15 @@ class PerspectiveCamera extends Camera {
    */
   moveBy(delta) {
     return this.update({
-      position: bundle_esm$1.vector3.add(this.position, delta),
-      lookAt: bundle_esm$1.vector3.add(this.lookAt, delta),
+      position: bundle_esm.vector3.add(this.position, delta),
+      lookAt: bundle_esm.vector3.add(this.lookAt, delta),
     });
   }
   rotateAroundAxisAtPoint(angleInRadians, point, axis) {
     return this.update({
-      position: bundle_esm$1.vector3.rotateAboutAxis(angleInRadians, this.position, axis, point),
-      lookAt: bundle_esm$1.vector3.rotateAboutAxis(angleInRadians, this.lookAt, axis, point),
-      up: bundle_esm$1.vector3.rotateAboutAxis(angleInRadians, this.up, axis, bundle_esm$1.vector3.origin()),
+      position: bundle_esm.vector3.rotateAboutAxis(angleInRadians, this.position, axis, point),
+      lookAt: bundle_esm.vector3.rotateAboutAxis(angleInRadians, this.lookAt, axis, point),
+      up: bundle_esm.vector3.rotateAboutAxis(angleInRadians, this.up, axis, bundle_esm.vector3.origin()),
     });
   }
   update(camera) {
@@ -974,7 +1241,7 @@ class PerspectiveCamera extends Camera {
     return new streamAttributes.FramePerspectiveCamera(this.position, this.lookAt, this.up, this.near, this.far, this.aspectRatio, (_a = this.fovY) !== null && _a !== void 0 ? _a : 45);
   }
   get viewVector() {
-    return bundle_esm$1.vector3.subtract(this.lookAt, this.position);
+    return bundle_esm.vector3.subtract(this.lookAt, this.position);
   }
   /**
    * The position vector for the camera, in world space coordinates.
@@ -1037,27 +1304,27 @@ class OrthographicCamera extends Camera {
    */
   moveBy(delta) {
     // The rotation point should match the lookAt point when panning
-    const updatedPoint = bundle_esm$1.vector3.add(this.lookAt, delta);
+    const updatedPoint = bundle_esm.vector3.add(this.lookAt, delta);
     return this.update({
       lookAt: updatedPoint,
       rotationPoint: updatedPoint,
     });
   }
   rotateAroundAxisAtPoint(angleInRadians, point, axis) {
-    const updatedLookAt = bundle_esm$1.vector3.rotateAboutAxis(angleInRadians, this.lookAt, axis, point);
-    const updatedPosition = bundle_esm$1.vector3.rotateAboutAxis(angleInRadians, this.position, axis, point);
-    const viewVector = streamAttributes.constrainViewVector(bundle_esm$1.vector3.subtract(updatedLookAt, updatedPosition), bundle_esm$1.boundingSphere.create(this.boundingBox));
+    const updatedLookAt = bundle_esm.vector3.rotateAboutAxis(angleInRadians, this.lookAt, axis, point);
+    const updatedPosition = bundle_esm.vector3.rotateAboutAxis(angleInRadians, this.position, axis, point);
+    const viewVector = streamAttributes.constrainViewVector(bundle_esm.vector3.subtract(updatedLookAt, updatedPosition), bundle_esm.boundingSphere.create(this.boundingBox));
     return this.update({
       viewVector: viewVector,
       lookAt: updatedLookAt,
-      up: bundle_esm$1.vector3.rotateAboutAxis(angleInRadians, this.up, axis, bundle_esm$1.vector3.origin()),
+      up: bundle_esm.vector3.rotateAboutAxis(angleInRadians, this.up, axis, bundle_esm.vector3.origin()),
     });
   }
   update(camera) {
     return new OrthographicCamera(this.stream, this.aspect, Object.assign(Object.assign({}, this.orthographicData), camera), this.boundingBox, this.decodeFrame, this.flyToOptions);
   }
   toFrameCamera() {
-    const boundingSphere = bundle_esm$1.boundingSphere.create(this.boundingBox);
+    const boundingSphere = bundle_esm.boundingSphere.create(this.boundingBox);
     const viewVector = streamAttributes.constrainViewVector(this.viewVector, boundingSphere);
     const lookAt = streamAttributes.updateLookAtRelativeToBoundingBoxCenter(this.lookAt, viewVector, boundingSphere.center);
     return new streamAttributes.FrameOrthographicCamera(viewVector, lookAt, this.up, this.near, this.far, this.aspectRatio, this.fovHeight, this.rotationPoint);
@@ -1066,7 +1333,7 @@ class OrthographicCamera extends Camera {
     return Object.assign({}, this.orthographicData.viewVector);
   }
   get position() {
-    return bundle_esm$1.vector3.add(this.lookAt, bundle_esm$1.vector3.negate(this.viewVector));
+    return bundle_esm.vector3.add(this.lookAt, bundle_esm.vector3.negate(this.viewVector));
   }
   /**
    * A vector, in world space coordinates, of where the camera should be rotated around.
@@ -1296,7 +1563,7 @@ class Raycaster {
   async hitItems(point, options) {
     const scale = this.imageScaleProvider();
     const res = await this.stream.hitItems({
-      point: bundle_esm$1.point.scale(point, (scale === null || scale === void 0 ? void 0 : scale.x) || 1, (scale === null || scale === void 0 ? void 0 : scale.y) || 1),
+      point: bundle_esm.point.scale(point, (scale === null || scale === void 0 ? void 0 : scale.x) || 1, (scale === null || scale === void 0 ? void 0 : scale.y) || 1),
       includeMetadata: options === null || options === void 0 ? void 0 : options.includeMetadata,
     }, true);
     return res.hitItems || undefined;
@@ -1334,7 +1601,7 @@ class SceneViewStateLoader {
       const flyToResult = await this.stream.flyTo({
         sceneViewStateIdentifier: identifier,
         animation: {
-          duration: bundle_esm.toProtoDuration(opts.animation.milliseconds),
+          duration: bundle_esm$1.toProtoDuration(opts.animation.milliseconds),
         },
         frameCorrelationId: {
           value: corrId,
@@ -1889,7 +2156,7 @@ class Scene {
   camera() {
     const { scene } = this.frame;
     if (scene.camera.isOrthographic()) {
-      return new OrthographicCamera(this.stream, bundle_esm$1.dimensions.aspectRatio(this.viewport()), {
+      return new OrthographicCamera(this.stream, bundle_esm.dimensions.aspectRatio(this.viewport()), {
         viewVector: scene.camera.viewVector,
         lookAt: scene.camera.lookAt,
         up: scene.camera.up,
@@ -1898,7 +2165,7 @@ class Scene {
       }, this.frame.scene.boundingBox, this.decodeFrame);
     }
     else if (scene.camera.isPerspective()) {
-      return new PerspectiveCamera(this.stream, bundle_esm$1.dimensions.aspectRatio(this.viewport()), {
+      return new PerspectiveCamera(this.stream, bundle_esm.dimensions.aspectRatio(this.viewport()), {
         position: scene.camera.position,
         lookAt: scene.camera.lookAt,
         up: scene.camera.up,
@@ -1941,7 +2208,7 @@ class Scene {
    * The current x and y scale of the rendered image.
    */
   scale() {
-    return this.imageScaleProvider() || bundle_esm$1.point.create(1, 1);
+    return this.imageScaleProvider() || bundle_esm.point.create(1, 1);
   }
 }
 
@@ -2376,16 +2643,23 @@ class SceneItemQueryExecutor {
 
 exports.Camera = Camera;
 exports.CrossSectioner = CrossSectioner;
+exports.PanInteraction = PanInteraction;
+exports.PivotInteraction = PivotInteraction;
+exports.PointerInteractionHandler = PointerInteractionHandler;
 exports.Raycaster = Raycaster;
 exports.RootQuery = RootQuery;
+exports.RotateInteraction = RotateInteraction;
+exports.RotatePointInteraction = RotatePointInteraction;
 exports.Scene = Scene;
 exports.SceneItemOperationsBuilder = SceneItemOperationsBuilder;
 exports.SceneItemQueryExecutor = SceneItemQueryExecutor;
 exports.SceneOperationBuilder = SceneOperationBuilder;
 exports.SynchronizedClock = SynchronizedClock;
+exports.TwistInteraction = TwistInteraction;
+exports.ZoomInteraction = ZoomInteraction;
 exports.colorMaterial = colorMaterial;
 exports.fromUrn = fromUrn;
 exports.loadableResource = loadableResource;
 exports.sceneViewStateIdentifier = sceneViewStateIdentifier;
 
-//# sourceMappingURL=queries-d9cd5ec1.js.map
+//# sourceMappingURL=queries-918bb133.js.map