@expofp/renderer 1.2.1 → 1.3.2

package/dist/index.js

@@ -1,15 +1,15 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { DataTexture, FloatType, UnsignedIntType, IntType, RGBAFormat, RGBAIntegerFormat, RGFormat, RGIntegerFormat, RedFormat, RedIntegerFormat, BatchedMesh as BatchedMesh$1, BufferAttribute, StreamDrawUsage, Color, Matrix4, Vector3, Vector4, DoubleSide, MeshBasicMaterial, Texture, Quaternion, Group, PlaneGeometry, SRGBColorSpace, Vector2, BufferGeometry, LinearSRGBColorSpace, Mesh, Raycaster, Sphere, Box3, Spherical, PerspectiveCamera, Scene, Plane, Clock, WebGLRenderer } from "three";
+import { DataTexture, FloatType, UnsignedIntType, IntType, RGBAFormat, RGBAIntegerFormat, RGFormat, RGIntegerFormat, RedFormat, RedIntegerFormat, BatchedMesh as BatchedMesh$1, BufferAttribute, StreamDrawUsage, Color, Matrix4, Vector3, Vector4, DoubleSide, MeshBasicMaterial, Texture, Quaternion, Group, PlaneGeometry, SRGBColorSpace, Vector2, BufferGeometry, LinearSRGBColorSpace, Mesh, Plane, Raycaster, Sphere, Box3, Spherical, PerspectiveCamera, Scene, Camera, MathUtils, Clock, WebGLRenderer } from "three";
 import { traverseAncestorsGenerator } from "three/examples/jsm/utils/SceneUtils.js";
 import { BatchedText as BatchedText$1, Text as Text$1 } from "troika-three-text";
 import { LineMaterial, LineSegmentsGeometry } from "three/examples/jsm/Addons.js";
 import { MaxRectsPacker, Rectangle } from "maxrects-packer";
 import { converter, parse } from "culori";
-import CameraController from "camera-controls";
-import { EventManager, Rotate } from "mjolnir.js";
-import { DEG2RAD, RAD2DEG } from "three/src/math/MathUtils.js";
+import { RAD2DEG, DEG2RAD, MathUtils as MathUtils$1 } from "three/src/math/MathUtils.js";
+import CameraControls from "camera-controls";
+import { EventManager, Rotate, Pan } from "mjolnir.js";
 function isObject(item) {
   return !!item && typeof item === "object" && !Array.isArray(item);
 }
@@ -2190,18 +2190,43 @@ const subsetOfTHREE = {
   Spherical,
   Box3,
   Sphere,
-  Raycaster
+  Raycaster,
+  Plane
 };
-CameraController.install({ THREE: subsetOfTHREE });
+CameraControls.install({ THREE: subsetOfTHREE });
+class CameraController extends CameraControls {
+  /**
+   * @param camera {@link PerspectiveCamera} instance
+   * @param renderer {@link Renderer} instance
+   */
+  constructor(camera, renderer) {
+    super(camera);
+    this.renderer = renderer;
+  }
+  update(delta) {
+    var _a;
+    const needsUpdate = super.update(delta);
+    if (needsUpdate && ((_a = this.renderer) == null ? void 0 : _a.debugLog)) {
+      const position = this.camera.position.toArray().map((value) => value.toFixed(2)).join(", ");
+      const target = this._target.toArray().map((value) => value.toFixed(2)).join(", ");
+      const spherical = [this._spherical.theta * RAD2DEG, this._spherical.phi * RAD2DEG, this._spherical.radius].map((value) => value.toFixed(2)).join(", ");
+      console.log(`position: [${position}]
+target: [${target}]
+spherical: [${spherical}]`);
+    }
+    return needsUpdate;
+  }
+}
 class CameraSystem {
   /**
    * @param renderer {@link Renderer} instance
    */
   constructor(renderer) {
+    /** External camera instance. Used to render the scene in external mode (e.g. Mapbox GL JS). */
+    __publicField(this, "externalCamera");
     /** {@link CameraController} instance. Used to smoothly animate the camera. */
     __publicField(this, "controller");
     __publicField(this, "camera");
-    __publicField(this, "externalCamera");
     __publicField(this, "zoomIdentityDistance");
     __publicField(this, "zoomBounds");
     this.renderer = renderer;
@@ -2210,7 +2235,7 @@ class CameraSystem {
     this.camera.up.set(0, 0, -1);
     this.zoomIdentityDistance = h / 2;
     this.camera.position.y = this.zoomIdentityDistance;
-    this.controller = new CameraController(this.camera);
+    this.controller = new CameraController(this.camera, renderer);
     void this.controller.rotatePolarTo(0);
   }
   /** Current camera instance. */
@@ -2219,7 +2244,16 @@ class CameraSystem {
   }
   /** Current camera zoom factor. */
   get zoomFactor() {
-    return this.camera.position.z ? this.zoomIdentityDistance / this.camera.position.z : 1;
+    const distance = this.controller.distance;
+    return distance ? this.zoomIdentityDistance / distance : 1;
+  }
+  /**
+   * Calculates the camera distance from the scene's plane for a given zoom factor.
+   * @param zoomFactor Zoom factor
+   * @returns Corresponding camera distance on the Z axis
+   */
+  zoomFactorToDistance(zoomFactor) {
+    return zoomFactor > 0 ? this.zoomIdentityDistance / zoomFactor : this.zoomIdentityDistance;
   }
   /**
    * Initializes the camera with the given zoom bounds.
@@ -2233,35 +2267,41 @@ class CameraSystem {
   updateCamera() {
     if (!this.zoomBounds) return;
     const [w, h] = this.renderer.size;
-    this.zoomIdentityDistance = -h / 2;
+    const zoomFactor = this.zoomFactor;
+    this.zoomIdentityDistance = h / 2;
     const maxDistance = Math.abs(this.zoomIdentityDistance / this.zoomBounds[0]);
     const minDistance = Math.abs(this.zoomIdentityDistance / this.zoomBounds[1]);
     this.camera.aspect = w / (h || 1);
-    this.camera.far = maxDistance + 1;
-    this.camera.near = minDistance - 1;
+    this.computeCameraClipPlanes(minDistance, maxDistance);
     this.camera.updateProjectionMatrix();
-  }
-  /**
-   * Calculates the camera distance from the scene's plane for a given zoom factor.
-   * @param zoomFactor Zoom factor
-   * @returns Corresponding camera distance on the Z axis
-   */
-  zoomFactorToDistance(zoomFactor) {
-    return zoomFactor > 0 ? Math.abs(this.zoomIdentityDistance / zoomFactor) : this.zoomIdentityDistance;
+    this.syncController(minDistance, maxDistance, zoomFactor);
+  }
+  computeCameraClipPlanes(minDistance, maxDistance, nearSafetyFactor = 0.5, farSafetyFactor = 1.5) {
+    const fov = this.camera.fov * DEG2RAD;
+    const aspect = this.camera.aspect;
+    const maxPolarAngle = 85 * DEG2RAD;
+    const halfFovY = fov / 2;
+    const halfFovX = Math.atan(Math.tan(halfFovY) * aspect);
+    const diagonalFov = 2 * Math.atan(Math.sqrt(Math.tan(halfFovX) ** 2 + Math.tan(halfFovY) ** 2));
+    const minHeight = minDistance * Math.cos(maxPolarAngle);
+    const near = Math.max(0.1, minHeight * nearSafetyFactor);
+    const criticalHeight = minHeight;
+    const horizontalDistToOrbit = minDistance * Math.sin(maxPolarAngle);
+    const distToOrbit = minDistance;
+    const visibleRadiusAtOrbit = distToOrbit * Math.tan(diagonalFov / 2);
+    const planeExtent = Math.max(maxDistance, visibleRadiusAtOrbit);
+    const horizontalDistToFarEdge = horizontalDistToOrbit + planeExtent;
+    const maxViewDistance = Math.sqrt(criticalHeight ** 2 + horizontalDistToFarEdge ** 2);
+    const far = maxViewDistance * farSafetyFactor;
+    this.camera.near = near;
+    this.camera.far = far;
+    if (this.renderer.debugLog) console.log("camera clip planes", near, far);
   }
   syncController(minDistance, maxDistance, zoomFactor) {
     if (this.renderer.debugLog) console.log("syncController", minDistance, maxDistance, zoomFactor);
     this.controller.minDistance = minDistance;
     this.controller.maxDistance = maxDistance;
-    void this.controller.setLookAt(
-      this.camera.position.x,
-      this.camera.position.y,
-      -this.zoomFactorToDistance(zoomFactor),
-      this.camera.position.x,
-      this.camera.position.y,
-      0,
-      false
-    );
+    void this.controller.dollyTo(this.zoomFactorToDistance(zoomFactor), false);
   }
 }
 class SceneSystem {
@@ -2277,12 +2317,24 @@ class SceneSystem {
     __publicField(this, "inverseWorldMatrix", new Matrix4());
     __publicField(this, "translationMatrix", new Matrix4());
     __publicField(this, "scaleMatrix", new Matrix4());
+    __publicField(this, "scaleVector", new Vector3());
     __publicField(this, "visibleRectOffsetMatrix", new Matrix4());
     __publicField(this, "viewbox");
     this.renderer = renderer;
     this.scene = new Scene();
     this.scene.matrixAutoUpdate = false;
   }
+  /** Scene scale factor (SVG to pixel) */
+  get scaleFactor() {
+    this.scaleVector.setFromMatrixScale(this.scene.matrix);
+    if (this.scaleVector.z === 1) {
+      return this.scaleVector.x;
+    } else {
+      const perspectiveW = this.scene.matrix.elements[15];
+      const halfViewportWidth = this.renderer.size[0] / 2;
+      return halfViewportWidth * this.scaleVector.x / perspectiveW;
+    }
+  }
   /**
    * Initializes the scene with the given SVG viewbox.
    * @param viewbox {@link Rect} viewbox
@@ -2333,6 +2385,7 @@ class ViewportSystem {
     __publicField(this, "viewboxPlane", new Plane(new Vector3(0, 0, 1), 0));
     __publicField(this, "pxToSvgScaleThreshold", 1e-3);
     __publicField(this, "prevPxToSvgScale");
+    __publicField(this, "externalStaticTransformMatrix", new Matrix4());
     this.renderer = renderer;
     this.eventSystem = eventSystem;
     this.sceneSystem = new SceneSystem(renderer);
@@ -2351,6 +2404,14 @@ class ViewportSystem {
   get cameraController() {
     return this.cameraSystem.controller;
   }
+  /** Current camera zoom factor. */
+  get zoomFactor() {
+    return this.cameraSystem.zoomFactor;
+  }
+  /** Scene scale factor (SVG to pixel) */
+  get scaleFactor() {
+    return this.sceneSystem.scaleFactor;
+  }
   /**
    * Initializes the viewport and zoom bounds with the given scene definition.
    * @param sceneDef {@link SceneDef} scene definition
@@ -2358,6 +2419,13 @@ class ViewportSystem {
   initViewport(sceneDef) {
     this.sceneSystem.initScene(sceneDef.viewbox);
     this.cameraSystem.initCamera([0.1, sceneDef.viewbox.size.width > 1e5 ? 100 : 35]);
+    if (sceneDef.bounds) {
+      const boundary = new Box3(
+        new Vector3(sceneDef.bounds.min.x, sceneDef.bounds.min.y, 0),
+        new Vector3(sceneDef.bounds.max.x, sceneDef.bounds.max.y, 0)
+      ).applyMatrix4(this.sceneSystem.worldMatrix);
+      this.cameraController.setBoundary(boundary);
+    }
   }
   /** Updates the viewport when the renderer size changes. */
   updateViewport() {
@@ -2368,17 +2436,7 @@ class ViewportSystem {
    * Recalculates the svg to pixel scale factor and emits the event if necessary.
    */
   updatePtScale() {
-    const scaleVector = new Vector3();
-    scaleVector.setFromMatrixScale(this.scene.matrix);
-    let scaleFactor;
-    if (scaleVector.z === 1) {
-      scaleFactor = scaleVector.x;
-    } else {
-      const perspectiveW = this.scene.matrix.elements[15];
-      const halfViewportWidth = this.renderer.size[0] / 2;
-      scaleFactor = halfViewportWidth * scaleVector.x / perspectiveW;
-    }
-    const denominator = scaleFactor * this.cameraSystem.zoomFactor;
+    const denominator = this.sceneSystem.scaleFactor * this.cameraSystem.zoomFactor;
     const pxToSvgScale = 1 / denominator;
     if (Math.abs(pxToSvgScale - (this.prevPxToSvgScale ?? 0)) < this.pxToSvgScaleThreshold) return;
     if (this.renderer.debugLog) console.log("pxToSvgScale", +pxToSvgScale.toFixed(3));
@@ -2396,6 +2454,16 @@ class ViewportSystem {
     const intersections = this.raycaster.intersectObject(scene, true).filter((i) => isVisible(i.object));
     return intersections;
   }
+  /**
+   * Converts a point from SVG coordinates to world coordinates.
+   * @param svgCoords Point in SVG coordinates
+   * @returns Point in world coordinates
+   */
+  svgToWorld(svgCoords) {
+    const svg3D = new Vector3(...svgCoords, 0);
+    svg3D.applyMatrix4(this.sceneSystem.worldMatrix);
+    return new Vector2(svg3D.x, svg3D.y);
+  }
   /**
    * Converts a point from screen coordinates to the given coordinate space.
    * @param space Space to convert to (either "svg" or "world")
@@ -2408,6 +2476,219 @@ class ViewportSystem {
     if (space === "svg") this.intersectionPoint.applyMatrix4(this.sceneSystem.inverseWorldMatrix);
     return { x: this.intersectionPoint.x, y: this.intersectionPoint.y };
   }
+  /**
+   * Calculates the camera distance from the scene's plane for a given zoom factor.
+   * @param zoomFactor Zoom factor
+   * @returns Corresponding camera distance on the Z axis
+   */
+  zoomFactorToDistance(zoomFactor) {
+    return this.cameraSystem.zoomFactorToDistance(zoomFactor);
+  }
+  /**
+   * Sets the external transform matrix.
+   * @param staticTransformMatrix static transform matrix to apply to the scene
+   */
+  setExternalTransform(staticTransformMatrix) {
+    this.cameraSystem.externalCamera = new Camera();
+    this.externalStaticTransformMatrix.fromArray(staticTransformMatrix);
+  }
+  /**
+   * Updates the external camera.
+   * @param dynamicTransformMatrix dynamic transform matrix to apply to the scene
+   */
+  updateExternalCamera(dynamicTransformMatrix) {
+    this.scene.matrix.fromArray(dynamicTransformMatrix).multiply(this.externalStaticTransformMatrix);
+    this.scene.matrixWorldNeedsUpdate = true;
+  }
+}
+class ControlsSystem {
+  /**
+   * @param renderer {@link Renderer} instance
+   * @param viewportSystem {@link ViewportSystem} instance
+   * @param interactionsSystem {@link InteractionsSystem} instance
+   */
+  constructor(renderer, viewportSystem, interactionsSystem) {
+    __publicField(this, "controller");
+    this.renderer = renderer;
+    this.viewportSystem = viewportSystem;
+    this.interactionsSystem = interactionsSystem;
+    this.controller = viewportSystem.cameraController;
+  }
+  /** Gesture handlers for camera controls. */
+  get handlers() {
+    return this.interactionsSystem.handlers;
+  }
+  /**
+   * Zooms the camera by the given factor.
+   * @param zoom Zoom factor to apply (e.g., 1.5 for 50% zoom in, 0.5 for 50% zoom out)
+   * @param immediate If true, applies the change immediately without animation
+   * @returns Promise that resolves when the zoom animation completes
+   */
+  zoomBy(zoom, immediate) {
+    const newZoomFactor = this.viewportSystem.zoomFactor * zoom;
+    const newDistance = this.viewportSystem.zoomFactorToDistance(newZoomFactor);
+    return this.controller.dollyTo(newDistance, !immediate);
+  }
+  /**
+   * Zooms the camera to fit the given rectangle.
+   * @param rect Rectangle to zoom to in SVG coordinates
+   * @param opts Optional zoom configuration
+   * @param immediate If true, applies the change immediately without animation
+   * @returns Promise that resolves when the zoom animation completes
+   */
+  async zoomTo(rect, opts = {}, immediate) {
+    const { maxZoom, paddingPercent } = opts;
+    const dpr = this.renderer.context.getPixelRatio();
+    const visibleRect = this.renderer.visibleRect;
+    const sourceRect = new Rect(this.viewportSystem.svgToWorld(rect.min), this.viewportSystem.svgToWorld(rect.max));
+    const targetRect = visibleRect ? new Rect(visibleRect.min.clone().multiplyScalar(dpr), visibleRect.max.clone().multiplyScalar(dpr)) : new Rect([0, 0], this.renderer.size);
+    if (paddingPercent) targetRect.addPadding(targetRect.size.x * paddingPercent, targetRect.size.y * paddingPercent);
+    const zoomByWidth = targetRect.size.x / sourceRect.size.x;
+    const zoomByHeight = targetRect.size.y / sourceRect.size.y;
+    const minZoom = Math.min(zoomByWidth, zoomByHeight);
+    const zoom = maxZoom ? Math.min(minZoom, maxZoom) : minZoom;
+    const translate = sourceRect.center;
+    if (visibleRect) {
+      const offset = new Vector2(...this.renderer.size).multiplyScalar(0.5).sub(targetRect.center).multiplyScalar(1 / zoom);
+      translate.add(offset);
+    }
+    const enableTransition = !immediate;
+    await Promise.all([
+      this.controller.moveTo(translate.x, translate.y, 0, enableTransition),
+      this.controller.dollyTo(this.viewportSystem.zoomFactorToDistance(zoom), enableTransition)
+    ]);
+  }
+  /**
+   * Pans the camera by the given offset in SVG space.
+   * @param x X offset in SVG space
+   * @param y Y offset in SVG space
+   * @param immediate If true, applies the change immediately without animation
+   * @returns Promise that resolves when the pan animation completes
+   */
+  panBy(x, y, immediate) {
+    const svgOrigin = this.viewportSystem.svgToWorld(new Vector2(0, 0));
+    const svgOffset = this.viewportSystem.svgToWorld(new Vector2(x, y));
+    const worldOffset = new Vector3(svgOffset.x - svgOrigin.x, svgOffset.y - svgOrigin.y, 0);
+    const currentTarget = this.controller.getTarget(new Vector3());
+    const newTarget = currentTarget.add(worldOffset);
+    return this.controller.moveTo(newTarget.x, newTarget.y, newTarget.z, !immediate);
+  }
+  /**
+   * Pans the camera to the given coordinates in SVG space.
+   * @param x X coordinate in SVG space
+   * @param y Y coordinate in SVG space
+   * @param immediate If true, applies the change immediately without animation
+   * @returns Promise that resolves when the pan animation completes
+   */
+  panTo(x, y, immediate) {
+    const worldCoords = this.viewportSystem.svgToWorld(new Vector2(x, y));
+    return this.controller.moveTo(worldCoords.x, worldCoords.y, 0, !immediate);
+  }
+  /**
+   * Rolls the camera by the given angle in degrees.
+   * Positive angle rolls clockwise, negative angle rolls counterclockwise.
+   * @param angle Angle in degrees to roll by
+   * @param immediate If true, applies the change immediately without animation
+   * @returns Promise that resolves when the roll animation completes
+   */
+  rollBy(angle, immediate) {
+    const angleRad = -angle * DEG2RAD;
+    const spherical = this.controller.getSpherical(new Spherical());
+    const azimuthAngle = spherical.theta;
+    const newAzimuthAngle = azimuthAngle + angleRad;
+    return this.controller.rotateAzimuthTo(newAzimuthAngle, !immediate);
+  }
+  /**
+   * Rolls the camera to the given angle in degrees.
+   * Positive angles go clockwise.
+   * @param angle Target angle in degrees
+   * @param immediate If true, applies the change immediately without animation
+   * @returns Promise that resolves when the roll animation completes
+   */
+  rollTo(angle, immediate) {
+    const targetAngleRad = -angle * DEG2RAD;
+    const spherical = this.controller.getSpherical(new Spherical());
+    const azimuthAngle = spherical.theta;
+    const deltaAngleRad = shortestRotationAngle(targetAngleRad, azimuthAngle);
+    console.log("rollTo", deltaAngleRad * RAD2DEG, targetAngleRad * RAD2DEG, azimuthAngle * RAD2DEG);
+    return this.rollBy(-deltaAngleRad * RAD2DEG, immediate);
+  }
+  /**
+   * Pitches the camera by the given angle in degrees.
+   * Positive angles increase pitch, negative angles decrease pitch.
+   * Note: This method will not pitch the camera outside the pitch range set by the `handlers.pitch.configure()` method.
+   * @param angle Angle in degrees to pitch by
+   * @param immediate If true, applies the change immediately without animation
+   * @returns Promise that resolves when the pitch animation completes
+   */
+  pitchBy(angle, immediate) {
+    const angleRad = angle * DEG2RAD;
+    const spherical = this.controller.getSpherical(new Spherical());
+    const polarAngle = spherical.phi;
+    const newPolarAngle = polarAngle + angleRad;
+    return this.controller.rotatePolarTo(newPolarAngle, !immediate);
+  }
+  /**
+   * Pitches the camera to the given angle in degrees.
+   * The angle is clamped to the 0-90 degree range.
+   * Note: This method will not pitch the camera outside the pitch range set by the `handlers.pitch.configure()` method.
+   * @param angle Target angle in degrees
+   * @param immediate If true, applies the change immediately without animation
+   * @returns Promise that resolves when the pitch animation completes
+   */
+  pitchTo(angle, immediate) {
+    const angleRad = angle * DEG2RAD;
+    const clampedAngleRad = MathUtils.euclideanModulo(angleRad, Math.PI / 2);
+    return this.controller.rotatePolarTo(clampedAngleRad, !immediate);
+  }
+  /**
+   * Resets the camera to the starting state by resetting enabled handlers.
+   * @param options Configuration for which handlers to reset (defaults to all handlers)
+   * @param immediate If true, applies the change immediately without animation
+   * @returns Promise that resolves when all reset animations complete
+   */
+  async resetCamera(options = { roll: true, zoom: true, pan: true, pitch: true }, immediate) {
+    const resetPromises = [];
+    const enableTransition = !immediate;
+    for (const [key, handler] of Object.entries(this.handlers)) {
+      if (options[key] && handler.isEnabled()) {
+        resetPromises.push(handler.reset(enableTransition));
+      }
+    }
+    await Promise.all(resetPromises);
+  }
+  /**
+   * Configures smooth time values for camera operations.
+   * All time values are in seconds.
+   * @param options Partial configuration object with time values in seconds
+   */
+  configure(options) {
+    const controller = this.controller;
+    if (options.zoomTime !== void 0) controller.dollyTime = options.zoomTime;
+    if (options.panTime !== void 0) controller.truckTime = options.panTime;
+    if (options.rollTime !== void 0) controller.azimuthTime = options.rollTime;
+    if (options.pitchTime !== void 0) controller.polarTime = options.pitchTime;
+  }
+}
+function asControlsAPI(controlsSystem) {
+  return {
+    handlers: controlsSystem.handlers,
+    zoomBy: controlsSystem.zoomBy.bind(controlsSystem),
+    zoomTo: controlsSystem.zoomTo.bind(controlsSystem),
+    panBy: controlsSystem.panBy.bind(controlsSystem),
+    panTo: controlsSystem.panTo.bind(controlsSystem),
+    rollBy: controlsSystem.rollBy.bind(controlsSystem),
+    rollTo: controlsSystem.rollTo.bind(controlsSystem),
+    pitchBy: controlsSystem.pitchBy.bind(controlsSystem),
+    pitchTo: controlsSystem.pitchTo.bind(controlsSystem),
+    resetCamera: controlsSystem.resetCamera.bind(controlsSystem),
+    configure: controlsSystem.configure.bind(controlsSystem)
+  };
+}
+function shortestRotationAngle(targetAngle, sourceAngle) {
+  const angle = targetAngle - sourceAngle;
+  const TAU = Math.PI * 2;
+  return MathUtils.euclideanModulo(angle + Math.PI, TAU) - Math.PI;
 }
 class EventSystem {
   constructor() {
@@ -2478,29 +2759,36 @@ function asEventAPI(system) {
     clear: system.clear.bind(system)
   };
 }
-function normalizeEventCoordinates(event, domElement, target) {
+function clientToCanvas(event, domElement, target) {
+  target = target ?? new Vector2();
   const { left, top } = domElement.getBoundingClientRect();
-  return canvasToNDC({ x: event.clientX - left, y: event.clientY - top }, domElement, target);
+  const clientX = "clientX" in event ? event.clientX : event.x;
+  const clientY = "clientY" in event ? event.clientY : event.y;
+  target.set(clientX - left, clientY - top);
+  return target;
 }
-function canvasToNDC(coordinates, domElement, target) {
+function canvasToNDC(coordinates, canvas, target) {
   target = target ?? new Vector2();
-  const { width, height } = domElement.getBoundingClientRect();
+  const { width, height } = canvas.getBoundingClientRect();
   const uv = [coordinates.x / width, coordinates.y / height];
   target.set(uv[0] * 2 - 1, -uv[1] * 2 + 1);
   return target;
 }
 class Handler {
   /**
-   * @param controller The camera-controls instance for camera manipulation
+   * @param viewportSystem The viewport system instance
    * @param domElement The DOM element to attach event listeners to
    * @param eventManager Shared Mjolnir EventManager for gesture recognition
    */
-  constructor(controller, domElement, eventManager) {
+  constructor(viewportSystem, domElement, eventManager) {
     /** Whether this handler is enabled */
     __publicField(this, "enabled", false);
-    this.controller = controller;
+    /** The camera-controls instance for camera manipulation */
+    __publicField(this, "controller");
+    this.viewportSystem = viewportSystem;
     this.domElement = domElement;
     this.eventManager = eventManager;
+    this.controller = viewportSystem.cameraController;
   }
   /**
    * Per-frame update for this handler.
@@ -2532,7 +2820,7 @@ class Handler {
   }
   /**
    * Disable this handler.
-   * Calls onDisable() hook for subclass-specific disabling logic
+   * Resets to initial state without transition, then calls onDisable() hook for subclass-specific disabling logic
    */
   disable() {
     if (this.enabled) {
@@ -2548,17 +2836,144 @@ class Handler {
     return this.enabled;
   }
 }
+class InertiaController {
+  /**
+   * @param controller {@link CameraController}
+   * @param opts {@link InertiaOptions}
+   */
+  constructor(controller, opts = {}) {
+    __publicField(this, "enabled", true);
+    __publicField(this, "minSampleMs", 50);
+    __publicField(this, "durationMs", 1e3);
+    __publicField(this, "speedThreshold", 0.08);
+    __publicField(this, "ease");
+    __publicField(this, "samples", []);
+    __publicField(this, "position", new Vector3());
+    __publicField(this, "target", new Vector3());
+    __publicField(this, "delta", new Vector3());
+    __publicField(this, "velocity", new Vector3());
+    __publicField(this, "active", false);
+    __publicField(this, "elapsedMs", 0);
+    __publicField(this, "prevFactor", 1);
+    __publicField(this, "enableZ", false);
+    __publicField(this, "isConnected", false);
+    __publicField(this, "onControlStart", () => {
+      this.active = false;
+      this.samples.length = 0;
+    });
+    __publicField(this, "onControl", () => {
+      this.controller.getTarget(this.target, false);
+      this.samples.push({ t: performance.now(), target: this.target.clone() });
+      const cutoff = performance.now() - 300;
+      while (this.samples.length && this.samples[0].t < cutoff) this.samples.shift();
+    });
+    __publicField(this, "onControlEnd", () => {
+      const now = performance.now();
+      const minSampleTimestamp = now - this.minSampleMs;
+      for (let i = this.samples.length - 1; i >= 0; i--) {
+        const s = this.samples[i];
+        if (s.t < minSampleTimestamp || i === 0) {
+          const dt = now - s.t;
+          if (dt <= 0) return;
+          this.controller.getTarget(this.target, false);
+          this.velocity.subVectors(this.target, s.target).divideScalar(dt);
+          if (!this.enableZ) this.velocity.z = 0;
+          const speed = this.velocity.length();
+          if (speed <= this.speedThreshold) return;
+          this.elapsedMs = 0;
+          this.prevFactor = 1;
+          this.active = true;
+          return;
+        }
+      }
+    });
+    this.controller = controller;
+    this.configure(opts);
+    this.ease = opts.ease ?? ((t) => Math.pow(2, 10 * (t - 1)));
+  }
+  /**
+   * Configure the inertia controller.
+   * @param opts {@link InertiaOptions}
+   */
+  configure(opts) {
+    if (opts.enabled !== void 0) {
+      const prev = this.enabled;
+      this.enabled = opts.enabled;
+      if (prev !== this.enabled) {
+        if (this.enabled) this.connect();
+        else this.disconnect();
+      }
+    }
+    if (opts.minSampleMs !== void 0) this.minSampleMs = opts.minSampleMs;
+    if (opts.durationMs !== void 0) this.durationMs = opts.durationMs;
+    if (opts.speedThreshold !== void 0) this.speedThreshold = opts.speedThreshold;
+    if (opts.ease !== void 0) this.ease = opts.ease;
+  }
+  /**
+   * Connect the inertia controller event listeners to the camera controls.
+   */
+  connect() {
+    if (!this.enabled || this.isConnected) return;
+    this.controller.addEventListener("controlstart", this.onControlStart);
+    this.controller.addEventListener("control", this.onControl);
+    this.controller.addEventListener("controlend", this.onControlEnd);
+    this.isConnected = true;
+  }
+  /**
+   * Disconnect the inertia controller event listeners from the camera controls.
+   */
+  disconnect() {
+    if (!this.isConnected) return;
+    this.active = false;
+    this.controller.removeEventListener("controlstart", this.onControlStart);
+    this.controller.removeEventListener("control", this.onControl);
+    this.controller.removeEventListener("controlend", this.onControlEnd);
+    this.isConnected = false;
+  }
+  /**
+   * Per-frame update of camera properties during inertia.
+   * @param delta delta time in seconds
+   * @returns true if the camera has moved due to inertia
+   */
+  update(delta) {
+    if (!this.active) return false;
+    const deltaMs = delta * 1e3;
+    this.elapsedMs += deltaMs;
+    const t = Math.min(1, this.elapsedMs / this.durationMs);
+    const factor = this.ease(1 - t);
+    const avgFactor = (factor + this.prevFactor) * 0.5;
+    this.prevFactor = factor;
+    this.controller.getPosition(this.position, false);
+    this.controller.getTarget(this.target, false);
+    this.delta.copy(this.velocity).multiplyScalar(avgFactor * deltaMs);
+    this.target.add(this.delta);
+    this.position.add(this.delta);
+    void this.controller.moveTo(this.target.x, this.target.y, this.target.z, false);
+    if (factor <= 0.02 || t >= 1) {
+      this.active = false;
+    }
+    return true;
+  }
+}
 class PanHandler extends Handler {
-  reset() {
-    void this.controller.moveTo(0, 0, 0, true);
+  constructor() {
+    super(...arguments);
+    __publicField(this, "inertia", new InertiaController(this.controller));
+  }
+  reset(enableTransition = true) {
+    return this.controller.moveTo(0, 0, 0, enableTransition);
+  }
+  update(delta) {
+    return this.inertia.update(delta);
   }
   /**
    * Enable pan gestures.
    * Configures camera-controls to handle left-click drag and single-touch drag
    */
   onEnable() {
-    this.controller.mouseButtons.left = CameraController.ACTION.TRUCK;
-    this.controller.touches.one = CameraController.ACTION.TOUCH_TRUCK;
+    this.controller.mouseButtons.left = CameraController.ACTION.SCREEN_PAN;
+    this.controller.touches.one = CameraController.ACTION.TOUCH_SCREEN_PAN;
+    this.inertia.connect();
   }
   /**
    * Disable pan gestures.
@@ -2567,195 +2982,297 @@ class PanHandler extends Handler {
   onDisable() {
     this.controller.mouseButtons.left = CameraController.ACTION.NONE;
     this.controller.touches.one = CameraController.ACTION.NONE;
+    this.inertia.disconnect();
+  }
+}
+class PitchHandler extends Handler {
+  /**
+   * @param viewportSystem {@link ViewportSystem} instance
+   * @param domElement {@link HTMLElement} instance
+   * @param eventManager {@link EventManager} instance
+   */
+  constructor(viewportSystem, domElement, eventManager) {
+    super(viewportSystem, domElement, eventManager);
+    // Configuration
+    __publicField(this, "minPitch", 0);
+    __publicField(this, "maxPitch", 85);
+    __publicField(this, "isValid");
+    __publicField(this, "firstMove");
+    __publicField(this, "lastPoints");
+    __publicField(this, "prevTwoFingerAction");
+    __publicField(this, "onPitchStart", (e) => {
+      const pointers = e.pointers.sort((a, b) => a.pointerId - b.pointerId);
+      const p0 = clientToCanvas(pointers[0], this.domElement);
+      const p1 = clientToCanvas(pointers[1], this.domElement);
+      this.lastPoints = [p0, p1];
+      if (this.isVertical(p0.clone().sub(p1))) {
+        this.isValid = false;
+      }
+    });
+    __publicField(this, "onPitchEnd", () => {
+      if (this.prevTwoFingerAction) this.controller.touches.two = this.prevTwoFingerAction;
+      this.prevTwoFingerAction = void 0;
+      this.isValid = void 0;
+      this.firstMove = void 0;
+      this.lastPoints = void 0;
+    });
+    __publicField(this, "onPitch", (e) => {
+      const lastPoints = this.lastPoints;
+      if (!lastPoints) return;
+      const pointers = e.pointers.sort((a, b) => a.pointerId - b.pointerId);
+      const p0 = clientToCanvas(pointers[0], this.domElement);
+      const p1 = clientToCanvas(pointers[1], this.domElement);
+      const vectorA = p0.clone().sub(lastPoints[0]);
+      const vectorB = p1.clone().sub(lastPoints[1]);
+      this.isValid = this.gestureBeginsVertically(vectorA, vectorB, e.timeStamp);
+      if (!this.isValid) return;
+      if (this.prevTwoFingerAction === void 0) {
+        this.prevTwoFingerAction = this.controller.touches.two;
+        this.controller.touches.two = CameraController.ACTION.NONE;
+      }
+      this.lastPoints = [p0, p1];
+      const yDeltaAverage = (vectorA.y + vectorB.y) / 2;
+      const degreesPerPixelMoved = -0.5;
+      const deltaAngle = yDeltaAverage * degreesPerPixelMoved * DEG2RAD;
+      void this.controller.rotatePolarTo(this.controller.polarAngle + deltaAngle, false);
+    });
+    this.updatePolarAngles();
+  }
+  reset(enableTransition = true) {
+    const polarAngle = this.enabled ? this.minPitch * DEG2RAD : 0;
+    return this.controller.rotatePolarTo(polarAngle, enableTransition);
+  }
+  /**
+   * Configure pitch handler options
+   * @param options Partial options to update
+   */
+  configure(options) {
+    if (options.minPitch !== void 0) this.minPitch = options.minPitch;
+    if (options.maxPitch !== void 0) this.maxPitch = options.maxPitch;
+    this.updatePolarAngles();
+  }
+  /**
+   * Enable pitch.
+   * Configures camera-controls to allow polar angle changes within configured range
+   */
+  onEnable() {
+    this.controller.mouseButtons.right |= CameraController.ACTION.ROTATE_POLAR;
+    this.eventManager.on("pitchstart", this.onPitchStart);
+    this.eventManager.on("pitch", this.onPitch);
+    this.eventManager.on("pitchend", this.onPitchEnd);
+  }
+  /**
+   * Disable pitch.
+   */
+  onDisable() {
+    this.controller.mouseButtons.right ^= CameraController.ACTION.ROTATE_POLAR;
+    this.eventManager.off("pitchstart", this.onPitchStart);
+    this.eventManager.off("pitch", this.onPitch);
+    this.eventManager.off("pitchend", this.onPitchEnd);
+  }
+  /**
+   * Update controller polar angles based on current configuration
+   */
+  updatePolarAngles() {
+    this.controller.minPolarAngle = this.minPitch * DEG2RAD;
+    this.controller.maxPolarAngle = this.maxPitch * DEG2RAD;
+    if (this.controller.polarAngle < this.controller.minPolarAngle) {
+      void this.controller.rotatePolarTo(this.controller.minPolarAngle, false);
+    }
+    if (this.controller.polarAngle > this.controller.maxPolarAngle) {
+      void this.controller.rotatePolarTo(this.controller.maxPolarAngle, false);
+    }
+  }
+  gestureBeginsVertically(vectorA, vectorB, timeStamp) {
+    if (this.isValid !== void 0) return this.isValid;
+    const threshold = 2;
+    const movedA = vectorA.length() >= threshold;
+    const movedB = vectorB.length() >= threshold;
+    if (!movedA && !movedB) return;
+    if (!movedA || !movedB) {
+      this.firstMove ?? (this.firstMove = timeStamp);
+      if (timeStamp - this.firstMove < ALLOWED_SINGLE_TOUCH_TIME) {
+        return void 0;
+      } else {
+        return false;
+      }
+    }
+    const isSameDirection = vectorA.y > 0 === vectorB.y > 0;
+    return this.isVertical(vectorA) && this.isVertical(vectorB) && isSameDirection;
+  }
+  isVertical(vector) {
+    return Math.abs(vector.y) > Math.abs(vector.x);
   }
-  // FIXME: Add inertia
 }
-const ROTATION_THRESHOLD = 25;
+const ALLOWED_SINGLE_TOUCH_TIME = 100;
 class RollHandler extends Handler {
   constructor() {
     super(...arguments);
-    __publicField(this, "rotating", false);
+    __publicField(this, "isRolling", false);
+    // Configuration
+    __publicField(this, "rotationThreshold", 25);
+    // Threshold tracking (Mapbox-style)
     __publicField(this, "startVector");
     __publicField(this, "vector");
     __publicField(this, "minDiameter", 0);
-    __publicField(this, "startBearing", 0);
-    __publicField(this, "raycaster", new Raycaster());
+    __publicField(this, "prevAngle", 0);
+    // Camera and pivot vectors
     __publicField(this, "pivotWorld", new Vector3());
-    __publicField(this, "tempVec2", new Vector2());
-    __publicField(this, "tempVec3", new Vector3());
-    __publicField(this, "onRotateStart", (event) => {
-      console.log("RollHandler: rotatestart", event);
-      if (!this.enabled) {
-        console.log("RollHandler: not enabled");
-        return;
-      }
-      const { pointers } = event;
-      console.log("RollHandler: pointers", pointers == null ? void 0 : pointers.length);
-      if (pointers.length !== 2) return;
-      const p0 = new Vector2(pointers[0].offsetX, pointers[0].offsetY);
-      const p1 = new Vector2(pointers[1].offsetX, pointers[1].offsetY);
-      this.startVector = this.vector = p0.clone().sub(p1);
-      this.minDiameter = p0.distanceTo(p1);
-      this.startBearing = 0;
-      this.rotating = false;
-      console.log("RollHandler: initialized rotation, diameter:", this.minDiameter);
-    });
-    __publicField(this, "onRotate", (event) => {
-      if (!this.enabled) return;
-      const { pointers, rotation } = event;
-      if (pointers.length !== 2 || !this.startVector) {
-        console.log("RollHandler: rotate ignored", pointers == null ? void 0 : pointers.length, !!this.startVector);
-        return;
-      }
-      const p0 = new Vector2(pointers[0].offsetX, pointers[0].offsetY);
-      const p1 = new Vector2(pointers[1].offsetX, pointers[1].offsetY);
-      this.vector = p0.clone().sub(p1);
-      if (!this.rotating && this.isBelowThreshold(this.vector)) {
-        console.log("RollHandler: below threshold");
-        return;
-      }
-      if (!this.rotating) {
-        this.rotating = true;
-        this.startBearing = rotation;
-        console.log("RollHandler: rotation started, bearing:", rotation);
-      }
-      const bearingDelta = -(rotation - this.startBearing);
-      this.startBearing = rotation;
-      if (Math.abs(bearingDelta) < 0.01) {
-        console.log("RollHandler: delta too small:", bearingDelta);
-        return;
-      }
-      console.log("RollHandler: rotating by", bearingDelta, "degrees");
-      const midpointPx = p0.clone().add(p1).multiplyScalar(0.5);
-      this.normalizeScreenCoords(midpointPx, this.tempVec2);
-      this.unprojectToWorldPlane(this.tempVec2, this.pivotWorld);
-      void this.controller.rotate(bearingDelta * DEG2RAD, 0, false);
-      this.projectWorldToScreen(this.pivotWorld, this.tempVec2);
-      const pivotNewPx = this.denormalizeScreenCoords(this.tempVec2, this.tempVec3);
-      const screenDeltaX = midpointPx.x - pivotNewPx.x;
-      const screenDeltaY = midpointPx.y - pivotNewPx.y;
-      const worldPan = this.screenDeltaToWorldDelta(screenDeltaX, screenDeltaY);
-      void this.controller.truck(worldPan.x, worldPan.y, false);
+    __publicField(this, "targetWorld", new Vector3());
+    __publicField(this, "cameraPosition", new Vector3());
+    __publicField(this, "cameraForward", new Vector3());
+    __publicField(this, "rotationMatrix", new Matrix4());
+    __publicField(this, "onRotateStart", (e) => {
+      console.log("onRotateStart");
+      const pointers = e.pointers;
+      const p0 = clientToCanvas(pointers[0], this.domElement);
+      const p1 = clientToCanvas(pointers[1], this.domElement);
+      this.startVector = p0.sub(p1);
+      this.minDiameter = this.startVector.length();
     });
     __publicField(this, "onRotateEnd", () => {
-      this.rotating = false;
+      this.isRolling = false;
       this.startVector = void 0;
       this.vector = void 0;
       this.minDiameter = 0;
     });
+    __publicField(this, "onRotate", (e) => {
+      const pointers = e.pointers;
+      if (!this.isRolling) {
+        const p0 = clientToCanvas(pointers[0], this.domElement);
+        const p1 = clientToCanvas(pointers[1], this.domElement);
+        this.vector = p0.sub(p1);
+        if (this.isBelowThreshold(this.vector)) return;
+        this.isRolling = true;
+        this.prevAngle = e.rotation;
+      }
+      const deltaAngle = (e.rotation - this.prevAngle) * -DEG2RAD;
+      this.prevAngle = e.rotation;
+      if (Math.abs(deltaAngle) < 1e-3) return;
+      this.setPivot(e);
+      this.rotationMatrix.makeRotationZ(deltaAngle);
+      this.cameraPosition.sub(this.pivotWorld).applyMatrix4(this.rotationMatrix).add(this.pivotWorld);
+      this.cameraForward.applyMatrix4(this.rotationMatrix);
+      this.targetWorld.copy(this.cameraPosition).add(this.cameraForward);
+      void this.controller.setLookAt(
+        this.cameraPosition.x,
+        this.cameraPosition.y,
+        this.cameraPosition.z,
+        this.targetWorld.x,
+        this.targetWorld.y,
+        this.targetWorld.z,
+        false
+      );
+    });
+  }
+  /**
+   * Get bearing angle between current camera orientation and true north (in radians).
+   * Angle is in range [0, 2π), going clockwise from north.
+   */
+  get bearing() {
+    const tau = Math.PI * 2;
+    return MathUtils$1.euclideanModulo(-this.controller.azimuthAngle, tau);
+  }
+  reset(enableTransition = true) {
+    return this.controller.normalizeRotations().rotateAzimuthTo(0, enableTransition);
   }
-  reset() {
-    void this.controller.rotateAzimuthTo(0, true);
-    this.rotating = false;
-    this.startVector = void 0;
-    this.vector = void 0;
-    this.minDiameter = 0;
+  /**
+   * Configure roll handler options
+   * @param options Partial options to update
+   */
+  configure(options) {
+    if (options.rotationThreshold !== void 0) {
+      this.rotationThreshold = options.rotationThreshold;
+    }
   }
   /**
    * Enable roll gestures.
-   * - Mobile: custom two-finger rotation with pivot compensation
+   * Configures camera-controls to allow any azimuth angle and two-finger touch rotate
    */
   onEnable() {
-    this.controller.maxAzimuthAngle = Infinity;
-    this.controller.minAzimuthAngle = -Infinity;
+    this.controller.mouseButtons.right |= CameraController.ACTION.ROTATE_AZIMUTH;
     this.eventManager.on("rotatestart", this.onRotateStart);
     this.eventManager.on("rotate", this.onRotate);
     this.eventManager.on("rotateend", this.onRotateEnd);
   }
   /**
    * Disable roll gestures.
-   * Restricts azimuth angle to zero and removes event listeners
    */
   onDisable() {
-    this.controller.maxAzimuthAngle = 0;
-    this.controller.minAzimuthAngle = 0;
+    this.controller.mouseButtons.right ^= CameraController.ACTION.ROTATE_AZIMUTH;
     this.eventManager.off("rotatestart", this.onRotateStart);
     this.eventManager.off("rotate", this.onRotate);
     this.eventManager.off("rotateend", this.onRotateEnd);
-    this.rotating = false;
+  }
+  setPivot(e) {
+    const pivotScreen = e.center;
+    const pivotNDC = canvasToNDC(pivotScreen, this.domElement);
+    const pivotWorld2D = this.viewportSystem.screenTo("world", pivotNDC);
+    this.pivotWorld.set(pivotWorld2D.x, pivotWorld2D.y, 0);
+    this.controller.getPosition(this.cameraPosition);
+    this.controller.getTarget(this.targetWorld);
+    this.cameraForward.copy(this.targetWorld).sub(this.cameraPosition);
   }
   /**
    * Check if rotation is below threshold (Mapbox-style).
-   * Threshold is in pixels along circumference, scaled by touch circle diameter.
+   * The threshold before a rotation actually happens is configured in
+   * pixels along the circumference of the circle formed by the two fingers.
+   * This makes the threshold in degrees larger when the fingers are close
+   * together and smaller when the fingers are far apart.
+   * Uses the smallest diameter from the whole gesture to reduce sensitivity
+   * when pinching in and out.
    * @param vector Current vector between fingers
    * @returns true if below threshold, false otherwise
    */
   isBelowThreshold(vector) {
     this.minDiameter = Math.min(this.minDiameter, vector.length());
     const circumference = Math.PI * this.minDiameter;
-    const thresholdDegrees = ROTATION_THRESHOLD / circumference * 360;
-    if (!this.startVector) return true;
-    const bearingDeltaSinceStart = this.getBearingDelta(vector, this.startVector);
-    return Math.abs(bearingDeltaSinceStart) < thresholdDegrees;
+    const threshold = this.rotationThreshold / circumference * 360;
+    const startVector = this.startVector;
+    if (!startVector) return false;
+    const bearingDeltaSinceStart = this.getBearingDelta(vector, startVector);
+    console.log("bearingDeltaSinceStart", vector, startVector);
+    return Math.abs(bearingDeltaSinceStart) < threshold;
   }
   /**
-   * Get signed angle between two vectors in degrees
+   * Get signed angle between two vectors in degrees (Mapbox pattern)
    * @param a First vector
    * @param b Second vector
    * @returns Angle difference in degrees
    */
   getBearingDelta(a, b) {
-    return a.angle() - b.angle();
+    return a.angleTo(b) * RAD2DEG;
   }
   /**
-   * Normalize screen pixel coordinates to NDC [-1, 1]
-   * @param screenPos Screen position in pixels
-   * @param out Output vector for NDC coordinates
-   * @returns NDC coordinates
+   * Normalize angle to be between -π and π
+   * @param angle Angle in radians
+   * @returns Normalized angle in radians
    */
-  normalizeScreenCoords(screenPos, out) {
-    const canvas = this.domElement;
-    return out.set(screenPos.x / canvas.width * 2 - 1, -(screenPos.y / canvas.height) * 2 + 1);
+  normalizeAngle(angle) {
+    while (angle > Math.PI) angle -= 2 * Math.PI;
+    while (angle < -Math.PI) angle += 2 * Math.PI;
+    return angle;
   }
-  /**
-   * Denormalize NDC coordinates to screen pixels
-   * @param ndc NDC coordinates [-1, 1]
-   * @param out Output vector for screen pixel coordinates
-   * @returns Screen pixel coordinates
-   */
-  denormalizeScreenCoords(ndc, out) {
-    const canvas = this.domElement;
-    return out.set((ndc.x + 1) * 0.5 * canvas.width, (1 - ndc.y) * 0.5 * canvas.height, 0);
-  }
-  /**
-   * Unproject screen NDC coordinates to world plane (Z=0)
-   * @param ndc NDC coordinates [-1, 1]
-   * @param out Output vector for world coordinates
-   * @returns World coordinates on Z=0 plane
-   */
-  unprojectToWorldPlane(ndc, out) {
-    const camera = this.controller.camera;
-    this.raycaster.setFromCamera(ndc, camera);
-    const ray = this.raycaster.ray;
-    const t = -ray.origin.z / ray.direction.z;
-    return out.copy(ray.origin).addScaledVector(ray.direction, t);
+}
+class ZoomHandler extends Handler {
+  reset(enableTransition = true) {
+    return this.controller.dollyTo(this.viewportSystem.zoomFactorToDistance(1), enableTransition);
   }
   /**
-   * Project world point to screen NDC coordinates
-   * @param worldPos World position
-   * @param out Output vector for NDC coordinates
-   * @returns NDC coordinates
+   * Enable zoom gestures.
+   * Configures camera-controls to handle mouse wheel and two-finger pinch
    */
-  projectWorldToScreen(worldPos, out) {
-    const camera = this.controller.camera;
-    const projected = this.tempVec3.copy(worldPos).project(camera);
-    return out.set(projected.x, projected.y);
+  onEnable() {
+    this.controller.mouseButtons.wheel = CameraController.ACTION.DOLLY;
+    this.controller.touches.two = CameraController.ACTION.TOUCH_DOLLY_SCREEN_PAN;
   }
   /**
-   * Convert screen-space pixel delta to world-space translation.
-   * For top-down view, this is a simple perspective calculation.
-   * @param deltaX Screen delta X in pixels
-   * @param deltaY Screen delta Y in pixels
-   * @returns World-space translation vector
+   * Disable zoom gestures.
+   * Removes zoom actions from camera-controls
    */
-  screenDeltaToWorldDelta(deltaX, deltaY) {
-    const camera = this.controller.camera;
-    const canvas = this.domElement;
-    const distance = Math.abs(camera.position.z);
-    const fov = camera.getEffectiveFOV() * DEG2RAD;
-    const worldHeight = 2 * distance * Math.tan(fov / 2);
-    const worldWidth = worldHeight * camera.aspect;
-    return this.tempVec2.set(deltaX / canvas.width * worldWidth, -(deltaY / canvas.height) * worldHeight);
+  onDisable() {
+    this.controller.mouseButtons.wheel = CameraController.ACTION.NONE;
+    this.controller.touches.two = CameraController.ACTION.NONE;
   }
 }
 class InteractionsSystem {
@@ -2775,25 +3292,28 @@ class InteractionsSystem {
     __publicField(this, "dragStart");
     __publicField(this, "dragThreshold", 15);
     __publicField(this, "isDragging", false);
-    this.renderer = renderer;
+    __publicField(this, "prevBearing", 0);
     this.events = events;
     this.viewportSystem = viewportSystem;
     this.layerSystem = layerSystem;
     this.canvas = renderer.canvas;
     this.eventManager = new EventManager(this.canvas, {
-      recognizers: [[Rotate, { enable: true }]]
+      recognizers: [Rotate, [Pan, { event: "pitch", pointers: 2 }, "rotate"]]
     });
-    console.log("EventManager created with Rotate recognizer");
     this.configureCameraControls();
     this.attachCanvasListeners();
-    const controller = viewportSystem.cameraController;
-    this.handlers = {
-      pan: new PanHandler(controller, this.canvas, this.eventManager),
-      roll: new RollHandler(controller, this.canvas, this.eventManager, viewportSystem)
+    const handlers = {
+      pan: new PanHandler(viewportSystem, this.canvas, this.eventManager),
+      zoom: new ZoomHandler(viewportSystem, this.canvas, this.eventManager),
+      roll: new RollHandler(viewportSystem, this.canvas, this.eventManager),
+      pitch: new PitchHandler(viewportSystem, this.canvas, this.eventManager)
     };
-    this.handlerArray = Object.values(this.handlers);
+    this.handlers = handlers;
+    this.handlerArray = Object.values(handlers);
     this.handlers.pan.enable();
+    this.handlers.zoom.enable();
     this.handlers.roll.enable();
+    this.handlers.pitch.enable();
   }
   /**
    * Update camera position and directions.
@@ -2803,44 +3323,43 @@ class InteractionsSystem {
    */
   updateControls(delta) {
     let needsUpdate = this.viewportSystem.cameraController.update(delta);
-    if (needsUpdate) {
-      console.log(
-        // "azimuth angle",
-        // Math.round(this.viewportSystem.cameraController.azimuthAngle * RAD2DEG),
-        "polar angle",
-        Math.round(this.viewportSystem.cameraController.polarAngle * RAD2DEG),
-        "camera position",
-        this.viewportSystem.cameraController.camera.position.toArray().map(Math.round)
-      );
-    }
     for (const handler of this.handlerArray) {
       if (handler.isEnabled()) {
         needsUpdate = handler.update(delta) || needsUpdate;
       }
     }
+    if (this.handlers.roll.bearing !== this.prevBearing) {
+      this.prevBearing = this.handlers.roll.bearing;
+      this.events.emit("navigation:roll", this.handlers.roll.bearing);
+    }
     return needsUpdate;
   }
+  /** Disconnect the interactions system. */
+  disconnect() {
+    this.viewportSystem.cameraController.disconnect();
+    for (const handler of this.handlerArray) {
+      handler.disable();
+    }
+  }
   configureCameraControls() {
     const controller = this.viewportSystem.cameraController;
     controller.draggingSmoothTime = 0;
     controller.dollyToCursor = true;
-    controller.restThreshold = 1;
-    controller.maxAzimuthAngle = 0;
-    controller.minAzimuthAngle = 0;
-    controller.maxPolarAngle = 0;
     controller.mouseButtons = {
       left: CameraController.ACTION.NONE,
       middle: CameraController.ACTION.NONE,
-      right: CameraController.ACTION.ROTATE,
+      right: CameraController.ACTION.NONE,
       wheel: CameraController.ACTION.NONE
     };
     controller.touches = {
       one: CameraController.ACTION.NONE,
       two: CameraController.ACTION.NONE,
-      // Disabled - handlers implement custom gestures
       three: CameraController.ACTION.NONE
     };
     controller.connect(this.canvas);
+    controller.addEventListener("transitionstart", () => {
+      this.events.emit("navigation:change");
+    });
   }
   attachCanvasListeners() {
     this.canvas.addEventListener("pointerdown", (event) => {
@@ -2866,7 +3385,8 @@ class InteractionsSystem {
         const isDragging = type === "click" && this.isDragging;
         const hasListeners = this.events.hasListeners(eventType);
         if (isDragging || !hasListeners) return;
-        normalizeEventCoordinates(event, this.canvas, this.mousePointer);
+        clientToCanvas(event, this.canvas, this.mousePointer);
+        canvasToNDC(this.mousePointer, this.canvas, this.mousePointer);
         const intersections = this.viewportSystem.getIntersectedObjects(this.mousePointer);
         const point = this.viewportSystem.screenTo("svg", this.mousePointer);
         const defs = this.layerSystem.getIntersectedDefs(intersections);
@@ -2885,23 +3405,24 @@ class Renderer {
     /** {@link HTMLCanvasElement} that this renderer is rendering to */
     __publicField(this, "canvas");
     __publicField(this, "ui");
-    __publicField(this, "clock");
-    __publicField(this, "renderer");
+    __publicField(this, "gl");
     __publicField(this, "eventSystem");
     __publicField(this, "layerSystem");
     __publicField(this, "viewportSystem");
     __publicField(this, "interactionsSystem");
-    //private navigationSystem: NavigationSystem;
-    __publicField(this, "memoryInfoExtension");
-    __publicField(this, "memoryInfo", "");
+    __publicField(this, "controlsSystem");
+    __publicField(this, "clock");
+    __publicField(this, "renderer");
     __publicField(this, "viewport");
     __publicField(this, "needsRedraw", true);
-    __publicField(this, "isExternalMode", false);
+    __publicField(this, "memoryInfoExtension");
+    __publicField(this, "memoryInfo", "");
     var _a, _b;
     const { canvas, gl, debugLog = false, ui } = opts;
     this.canvas = canvas;
     this.debugLog = debugLog;
     this.ui = ui;
+    this.gl = gl;
     const rendererOptions = {
       antialias: true,
       context: gl,
@@ -2915,31 +3436,17 @@ class Renderer {
     this.viewportSystem = new ViewportSystem(this, this.eventSystem);
     this.layerSystem = new LayerSystem(this);
     this.interactionsSystem = new InteractionsSystem(this, this.eventSystem, this.viewportSystem, this.layerSystem);
+    this.controlsSystem = new ControlsSystem(this, this.viewportSystem, this.interactionsSystem);
     this.memoryInfoExtension = this.renderer.getContext().getExtension("GMAN_webgl_memory");
     this.canvas.addEventListener("webglcontextlost", (e) => this.onContextLost(e), false);
     this.canvas.addEventListener("webglcontextrestored", (e) => this.onContextRestored(e), false);
     void ((_b = (_a = this.ui) == null ? void 0 : _a.stats) == null ? void 0 : _b.init(this.renderer.getContext()));
   }
   /**
-   * {@link NavigationAPI} instance for controlling the viewport
+   * {@link ControlsAPI} instance for controlling the viewport
    */
   get controls() {
-    return {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      zoomBy: () => {
-      },
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      zoomTo: () => {
-      },
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      resetCamera: () => {
-      },
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      configure: () => {
-      },
-      handlers: this.interactionsSystem.handlers,
-      controller: this.viewportSystem.cameraController
-    };
+    return asControlsAPI(this.controlsSystem);
   }
   /**
    * {@link EventsAPI} instance for subscribing to internal events
@@ -2978,14 +3485,18 @@ class Renderer {
    * Sets the renderer to external mode, where parts of rendering process are not managed by the renderer (e.g. Mapbox GL JS).
    * @param staticTransformMatrix static transform matrix to apply to the scene
    */
-  // FIXME: Move to controls system
-  configureExternalMode(staticTransformMatrix) {
+  // TODO: Move somewhere
+  setExternalTransform(staticTransformMatrix) {
+    this.renderer.autoClear = false;
+    this.interactionsSystem.disconnect();
+    this.viewportSystem.setExternalTransform(staticTransformMatrix);
   }
   /**
    * Update scene matrix from dynamic transform matrix.
    * @param dynamicTransformMatrix dynamic transform matrix (changes every frame)
    */
-  updateExternalTransformMatrix(dynamicTransformMatrix) {
+  updateExternalCamera(dynamicTransformMatrix) {
+    this.viewportSystem.updateExternalCamera(dynamicTransformMatrix);
   }
   /**
    * Initialize the scene and start the rendering loop
@@ -3006,10 +3517,9 @@ class Renderer {
     this.layerSystem.updateDefs(defs);
     this.needsRedraw = true;
   }
-  // FIXME: Move to viewport system?
   /**
    * Converts coordinates from canvas space to SVG space.
-   * @param point point in canvas space (relative to the canvas's top left corner)
+   * @param point point in canvas space (relative to the canvas's top left corner), in css pixels
    * @returns point in SVG space
    */
   screenToSvg(point) {
@@ -3023,7 +3533,7 @@ class Renderer {
   render() {
     var _a, _b, _c, _d, _e, _f;
     (_b = (_a = this.ui) == null ? void 0 : _a.stats) == null ? void 0 : _b.begin();
-    if (this.isExternalMode) this.renderer.resetState();
+    if (this.gl !== void 0) this.renderer.resetState();
     else this.resizeCanvasToDisplaySize();
     this.viewportSystem.updatePtScale();
     const delta = this.clock.getDelta();