leaflet-city-mapper 0.0.3 → 0.0.4

package/src/collision/intersectMeshes.js

@@ -1,133 +1,32 @@
-import { computeBounds } from "../geometry/computeBounds.js";
-import { sub } from '../geometry/sub.js';
-import { cross } from '../geometry/cross.js';
-import { dot } from '../geometry/dot.js';
-import { sortHits } from './sortHits.js';
-
-/** Nearest triangle hit per mesh, sorted by world-space distance. */
-
-export function intersectMeshes(ray, meshes, night = 0) {
-  const hits = [],
-  a = [0, 0, 0],
-  b = [0, 0, 0],
-  c = [0, 0, 0];
-  let mesh, inverse, inverseValues, value, localOrigin, origin, localDirection, direction;
-  let directionLength, near, far, i, a2, b2, position, index, instanceOffset, vertices, closest;
-  let faceIndex, vertex, offset, x, y, z, ai, bi, ci, e, f, p, det, t, u, q, v, uv, ids, x2, y2;
-  let distance, point, worldPoint;
-  for (mesh of meshes) {
-    // Test in mesh-local space; compare distances only after returning to shared world space.
-    inverse = new DOMMatrix(mesh.worldMatrix).inverse();
-    inverseValues = inverse.toFloat64Array();
-    for (value of inverseValues) {
-      if (!Number.isFinite(value)) throw new Error('Singular 3D transform');
-    }
-    localOrigin = new DOMPoint(...ray.origin, 1).matrixTransform(inverse);
-    origin = [
-      localOrigin.x / localOrigin.w,
-      localOrigin.y / localOrigin.w,
-      localOrigin.z / localOrigin.w
-    ];
-    localDirection = new DOMPoint(...ray.direction, 0).matrixTransform(inverse);
-    direction = [
-      localDirection.x,
-      localDirection.y,
-      localDirection.z
-    ];
-    directionLength = Math.hypot(...direction) || 1;
-    direction[0] /= directionLength;
-    direction[1] /= directionLength;
-    direction[2] /= directionLength;
-    // AABB slab test reuses the same local ray as the triangle test.
-    if (!mesh.geometry.bounds) {
-      computeBounds(mesh.geometry);
-    }
-    near = 0, far = Infinity;
-    for (i = 0; i < 3; i++) {
-      if (Math.abs(direction[i]) < 1e-12) {
-        if (origin[i] < mesh.geometry.bounds.min[i] || origin[i] > mesh.geometry.bounds.max[i]) {
-          far = -Infinity;
-          break;
-        }
-      } else {
-        a2 = (mesh.geometry.bounds.min[i] - origin[i]) / direction[i], b2 = (mesh.geometry.bounds.max[i] - origin[i]) / direction[i];
-        near = Math.max(near, Math.min(a2, b2));
-        far = Math.min(far, Math.max(a2, b2));
-      }
-    }
-    if (far < near) {
-      continue;
-    }
-    ({ position, index, instanceOffset } = mesh.geometry.attributes);
-    vertices = index?.count || position.count;
-    closest = Infinity, faceIndex = void 0;
-    for (i = 0; i < vertices * (instanceOffset?.count ?? 1); i += 3) {
-      vertex = instanceOffset ? i % vertices : i;
-      offset = instanceOffset ? Math.floor(i / vertices) * instanceOffset.size : 0;
-      x = instanceOffset?.data[offset] ?? 0;
-      y = instanceOffset?.data[offset + 1] ?? 0;
-      z = instanceOffset?.data[offset + 2] ?? 0;
-      ai = (index ? index.data[vertex] : vertex) * position.size;
-      bi = (index ? index.data[vertex + 1] : vertex + 1) * position.size;
-      ci = (index ? index.data[vertex + 2] : vertex + 2) * position.size;
-      a[0] = position.data[ai];
-      a[1] = position.data[ai + 1];
-      a[2] = position.data[ai + 2];
-      b[0] = position.data[bi];
-      b[1] = position.data[bi + 1];
-      b[2] = position.data[bi + 2];
-      c[0] = position.data[ci];
-      c[1] = position.data[ci + 1];
-      c[2] = position.data[ci + 2];
-      if (instanceOffset) {
-        a[0] = Math.fround(a[0] + x); a[1] = Math.fround(a[1] + y); a[2] = Math.fround(a[2] + z);
-        b[0] = Math.fround(b[0] + x); b[1] = Math.fround(b[1] + y); b[2] = Math.fround(b[2] + z);
-        c[0] = Math.fround(c[0] + x); c[1] = Math.fround(c[1] + y); c[2] = Math.fround(c[2] + z);
-      }
-      // Moller-Trumbore: barycentric triangle coordinates and local ray distance.
-      e = sub(b, a), f = sub(c, a), p = cross(direction, f), det = dot(e, p);
-      if (mesh.program.cullMode === 'none' || mesh.program.cullFace === null
-        ? Math.abs(det) < 1e-9 : det < 1e-9) {
-        continue;
-      }
-      t = sub(origin, a), u = dot(t, p) / det;
-      if (u < 0 || u > 1) {
-        continue;
-      }
-      q = cross(t, e), v = dot(direction, q) / det;
-      if (v < 0 || u + v > 1) {
-        continue;
-      }
-      if (mesh.program.nightLight) {
-        uv = mesh.geometry.attributes.uv.data;
-        ids = index ? [index.data[i], index.data[i + 1], index.data[i + 2]] : [i, i + 1, i + 2];
-        x2 = uv[ids[0] * 2] * (1 - u - v) + uv[ids[1] * 2] * u + uv[ids[2] * 2] * v;
-        y2 = uv[ids[0] * 2 + 1] * (1 - u - v) + uv[ids[1] * 2 + 1] * u + uv[ids[2] * 2 + 1] * v;
-        if (x2 <= 2 && (!night || x2 * x2 + y2 * y2 > 0.9)) continue;
-      }
-      distance = dot(f, q) / det;
-      if (distance > 0 && distance < closest) {
-        closest = distance; faceIndex = i / 3;
-      }
-    }
-    if (faceIndex === undefined) continue;
-    point = new DOMPoint(
-      direction[0] * closest + origin[0],
-      direction[1] * closest + origin[1],
-      direction[2] * closest + origin[2],
-      1
-    ).matrixTransform(new DOMMatrix(mesh.worldMatrix));
-    worldPoint = [point.x / point.w, point.y / point.w, point.z / point.w];
-    hits.push({
-      faceIndex,
-      object: mesh,
-      point: worldPoint,
-      distance: Math.hypot(
-        worldPoint[0] - ray.origin[0],
-        worldPoint[1] - ray.origin[1],
-        worldPoint[2] - ray.origin[2]
-      )
-    });
-  }
-  return sortHits(hits);
-}
+import { sortHits } from './sortHits.js';
+import { localRay } from './localRay.js';
+import { rayBounds } from './rayBounds.js';
+import { readTriangle } from './readTriangle.js';
+import { triangleDistance } from './triangleDistance.js';
+import { worldHit } from './worldHit.js';
+
+/** Nearest triangle hit per mesh, sorted by world-space distance. */
+export function intersectMeshes(ray, meshes, night = 0) {
+  const hits = /* alloc */ [];
+  const a = /* alloc */ [0, 0, 0], b = /* alloc */ [0, 0, 0], c = /* alloc */ [0, 0, 0];
+  const origin = /* alloc */ [0, 0, 0], direction = /* alloc */ [0, 0, 0];
+  let mesh, position, index, instanceOffset, vertices, closest, faceIndex, i, distance;
+  for (mesh of meshes) {
+    // Test locally, then compare distances in shared world space.
+    localRay(ray, mesh, origin, direction);
+    if (!rayBounds(mesh, origin, direction)) continue;
+    ({ position, index, instanceOffset } = mesh.geometry.attributes);
+    vertices = index?.count || position.count;
+    closest = Infinity, faceIndex = void 0;
+    for (i = 0; i < vertices * (instanceOffset?.count ?? 1); i += 3) {
+      readTriangle(mesh, i, a, b, c);
+      distance = triangleDistance(mesh, i, a, b, c, origin, direction, night);
+      if (distance > 0 && distance < closest) {
+        closest = distance; faceIndex = i / 3;
+      }
+    }
+    if (faceIndex === undefined) continue;
+    hits.push(worldHit(ray, mesh, origin, direction, closest, faceIndex));
+  }
+  return sortHits(hits);
+}

package/src/collision/localRay.js

@@ -0,0 +1,21 @@
+export function localRay(ray, mesh, origin, direction) {
+  const inverse = /* alloc */ new DOMMatrix(mesh.worldMatrix).invertSelf();
+  const inverseValues = inverse.toFloat64Array();
+  let value, x, y, z, w;
+  for (value of inverseValues) {
+    if (!Number.isFinite(value)) throw /* alloc */ new Error('Singular 3D transform');
+  }
+  x = ray.origin[0], y = ray.origin[1], z = ray.origin[2];
+  w = inverseValues[3] * x + inverseValues[7] * y + inverseValues[11] * z + inverseValues[15];
+  origin[0] = (inverseValues[0] * x + inverseValues[4] * y + inverseValues[8] * z + inverseValues[12]) / w;
+  origin[1] = (inverseValues[1] * x + inverseValues[5] * y + inverseValues[9] * z + inverseValues[13]) / w;
+  origin[2] = (inverseValues[2] * x + inverseValues[6] * y + inverseValues[10] * z + inverseValues[14]) / w;
+  x = ray.direction[0], y = ray.direction[1], z = ray.direction[2];
+  direction[0] = inverseValues[0] * x + inverseValues[4] * y + inverseValues[8] * z;
+  direction[1] = inverseValues[1] * x + inverseValues[5] * y + inverseValues[9] * z;
+  direction[2] = inverseValues[2] * x + inverseValues[6] * y + inverseValues[10] * z;
+  const directionLength = Math.hypot(...direction) || 1;
+  direction[0] /= directionLength;
+  direction[1] /= directionLength;
+  direction[2] /= directionLength;
+}

package/src/collision/mergeHits.js

@@ -0,0 +1,11 @@
+export function mergeHits(source, target, start, width) {
+  const middle = Math.min(start + width, source.length), end = Math.min(start + width * 2, source.length);
+  let left = start, right = middle, output;
+  for (output = start; output < end; output++) {
+    if (left < middle && (right >= end || !(source[right].distance < source[left].distance))) {
+      target[output] = source[left++];
+    } else {
+      target[output] = source[right++];
+    }
+  }
+}

package/src/collision/rayBounds.js

@@ -0,0 +1,19 @@
+import { computeBounds } from '../geometry/computeBounds.js';
+
+export function rayBounds(mesh, origin, direction) {
+  if (!mesh.geometry.bounds) computeBounds(mesh.geometry);
+  let near = 0, far = Infinity, i, a, b;
+  for (i = 0; i < 3; i++) {
+    if (Math.abs(direction[i]) < 1e-12) {
+      if (origin[i] < mesh.geometry.bounds.min[i] || origin[i] > mesh.geometry.bounds.max[i]) {
+        far = -Infinity;
+        break;
+      }
+    } else {
+      a = (mesh.geometry.bounds.min[i] - origin[i]) / direction[i], b = (mesh.geometry.bounds.max[i] - origin[i]) / direction[i];
+      near = Math.max(near, Math.min(a, b));
+      far = Math.min(far, Math.max(a, b));
+    }
+  }
+  return !(far < near);
+}

package/src/collision/readTriangle.js

@@ -0,0 +1,20 @@
+export function readTriangle(mesh, i, a, b, c) {
+  const { position, index, instanceOffset } = mesh.geometry.attributes;
+  const vertices = index?.count || position.count;
+  const vertex = instanceOffset ? i % vertices : i;
+  const offset = instanceOffset ? Math.floor(i / vertices) * instanceOffset.size : 0;
+  const x = instanceOffset?.data[offset] ?? 0;
+  const y = instanceOffset?.data[offset + 1] ?? 0;
+  const z = instanceOffset?.data[offset + 2] ?? 0;
+  const ai = (index ? index.data[vertex] : vertex) * position.size;
+  const bi = (index ? index.data[vertex + 1] : vertex + 1) * position.size;
+  const ci = (index ? index.data[vertex + 2] : vertex + 2) * position.size;
+  a[0] = position.data[ai]; a[1] = position.data[ai + 1]; a[2] = position.data[ai + 2];
+  b[0] = position.data[bi]; b[1] = position.data[bi + 1]; b[2] = position.data[bi + 2];
+  c[0] = position.data[ci]; c[1] = position.data[ci + 1]; c[2] = position.data[ci + 2];
+  if (instanceOffset) {
+    a[0] = Math.fround(a[0] + x); a[1] = Math.fround(a[1] + y); a[2] = Math.fround(a[2] + z);
+    b[0] = Math.fround(b[0] + x); b[1] = Math.fround(b[1] + y); b[2] = Math.fround(b[2] + z);
+    c[0] = Math.fround(c[0] + x); c[1] = Math.fround(c[1] + y); c[2] = Math.fround(c[2] + z);
+  }
+}

package/src/collision/sortHits.js

@@ -1,18 +1,11 @@
 export function sortHits(hits) {
-  const buffer = new Array(hits.length);
+  if (hits.length < 2) return hits;
+  const buffer = /* alloc */ new Array(hits.length);
   let source = hits, target = buffer;
-  let width, start, middle, end, left, right, output, previous, i;
+  let width, start, previous, i;
   for (width = 1; width < hits.length; width *= 2) {
     for (start = 0; start < hits.length; start += width * 2) {
-      middle = Math.min(start + width, hits.length), end = Math.min(start + width * 2, hits.length);
-      left = start, right = middle;
-      for (output = start; output < end; output++) {
-        if (left < middle && (right >= end || !(source[right].distance < source[left].distance))) {
-          target[output] = source[left++];
-        } else {
-          target[output] = source[right++];
-        }
-      }
+      mergeHits(source, target, start, width);
     }
     previous = source;
     source = target;
@@ -21,3 +14,4 @@ export function sortHits(hits) {
   if (source !== hits) for (i = 0; i < hits.length; i++) hits[i] = source[i];
   return hits;
 }
+import { mergeHits } from './mergeHits.js';

package/src/collision/transformTriangle.js

@@ -0,0 +1,9 @@
+export function transformTriangle(v, p, index, i, m) {
+  let k, j, x, y, z;
+  for (k = 0; k < 3; k++) {
+    j = (index ? index.data[i + k] : i + k) * 3, x = p[j], y = p[j + 1], z = p[j + 2];
+    v[k * 3] = m[0] * x + m[4] * y + m[8] * z + m[12];
+    v[k * 3 + 1] = m[1] * x + m[5] * y + m[9] * z + m[13];
+    v[k * 3 + 2] = m[2] * x + m[6] * y + m[10] * z + m[14];
+  }
+}

package/src/collision/triangleDistance.js

@@ -0,0 +1,21 @@
+import { hiddenLightHit } from './hiddenLightHit.js';
+
+/** Moller-Trumbore with the renderer's culling and light-halo rules. */
+export function triangleDistance(mesh, i, a, b, c, origin, direction, night) {
+  const ex = b[0] - a[0], ey = b[1] - a[1], ez = b[2] - a[2];
+  const fx = c[0] - a[0], fy = c[1] - a[1], fz = c[2] - a[2];
+  const px = direction[1] * fz - direction[2] * fy;
+  const py = direction[2] * fx - direction[0] * fz;
+  const pz = direction[0] * fy - direction[1] * fx;
+  const det = ex * px + ey * py + ez * pz;
+  if (mesh.program.cullMode === 'none' || mesh.program.cullFace === null
+    ? Math.abs(det) < 1e-9 : det < 1e-9) return Infinity;
+  const tx = origin[0] - a[0], ty = origin[1] - a[1], tz = origin[2] - a[2];
+  const u = (tx * px + ty * py + tz * pz) / det;
+  if (u < 0 || u > 1) return Infinity;
+  const qx = ty * ez - tz * ey, qy = tz * ex - tx * ez, qz = tx * ey - ty * ex;
+  const v = (direction[0] * qx + direction[1] * qy + direction[2] * qz) / det;
+  if (v < 0 || u + v > 1) return Infinity;
+  if (hiddenLightHit(mesh, i, u, v, night)) return Infinity;
+  return (fx * qx + fy * qy + fz * qz) / det;
+}

package/src/collision/worldHit.js

@@ -0,0 +1,18 @@
+export function worldHit(ray, mesh, origin, direction, closest, faceIndex) {
+  const x = direction[0] * closest + origin[0];
+  const y = direction[1] * closest + origin[1];
+  const z = direction[2] * closest + origin[2];
+  const matrix = mesh.worldMatrix;
+  const w = matrix[3] * x + matrix[7] * y + matrix[11] * z + matrix[15];
+  const worldPoint = /* alloc */ [
+    (matrix[0] * x + matrix[4] * y + matrix[8] * z + matrix[12]) / w,
+    (matrix[1] * x + matrix[5] * y + matrix[9] * z + matrix[13]) / w,
+    (matrix[2] * x + matrix[6] * y + matrix[10] * z + matrix[14]) / w,
+  ];
+  return /* alloc */ {
+    faceIndex,
+    object: mesh,
+    point: worldPoint,
+    distance: Math.hypot(worldPoint[0] - ray.origin[0], worldPoint[1] - ray.origin[1], worldPoint[2] - ray.origin[2])
+  };
+}

package/src/controls/addCameraHandler.js

@@ -0,0 +1,9 @@
+import { cameraByMap } from '../globals/cameraByMap.js';
+
+
+
+export function addCameraHandler(map, name, Type) {
+  const handler = cameraByMap.get(map)[name] = /* alloc */ new Type(map);
+  map._handlers.push(handler);
+  if (map.options[name]) handler.enable();
+}

package/src/controls/adjustCameraDrag.js

@@ -1,9 +1,14 @@
+import { cameraByMap } from '../globals/cameraByMap.js';
+
+import { mapGetPitch } from '../camera/mapGetPitch.js';
+import { mapGetBearing } from '../camera/mapGetBearing.js';
+
 import { project } from '../camera/project.js';
 
 export function adjustCameraDrag() {
   const map = this;
-  const draggable = map._cameraDraggable;
-  if (!map.getPitch() && !map.getBearing()) return;
+  const draggable = cameraByMap.get(map)._cameraDraggable;
+  if (!mapGetPitch(map) && !mapGetBearing(map)) return;
   const half = map.getSize().divideBy(2), delta = draggable._newPos.subtract(draggable._startPos);
   const ground = half.subtract(project(map, half.subtract(delta), true));
   draggable._newPos = draggable._startPos.add(ground);

package/src/controls/cameraControls.js

@@ -1,9 +1,18 @@
-import { ShiftRotate } from '../constants/ShiftRotate.js';
-import { PitchDrag } from '../constants/PitchDrag.js';
-import { Compass } from '../constants/Compass.js';
-import { ContainerResize } from '../constants/ContainerResize.js';
-import { TouchMode } from '../constants/TouchMode.js';
-import { cameraControlsState } from '../constants/cameraControlsState.js';
+import { L } from '../globals/L.js';
+import { Compass } from '../globals/Compass.js';
+import { ContainerResize } from '../globals/ContainerResize.js';
+import { PitchDrag } from '../globals/PitchDrag.js';
+import { ShiftRotate } from '../globals/ShiftRotate.js';
+import { TouchMode } from '../globals/TouchMode.js';
+import { cameraByMap } from '../globals/cameraByMap.js';
+import { touchByContainer } from '../globals/touchByContainer.js';
+import { cameraTouchStates } from '../globals/cameraTouchStates.js';
+import { cameraListenerOptions } from '../globals/cameraListenerOptions.js';
+import { cameraEmptyOptions } from '../globals/cameraEmptyOptions.js';
+import { notifyCameraTouchChange } from './notifyCameraTouchChange.js';
+
+
+
 import { rotateOnAdd } from './rotateOnAdd.js';
 import { rotateOnRemove } from './rotateOnRemove.js';
 import { rotateControl } from './rotateControl.js';
@@ -21,10 +30,32 @@ import { endCameraTouchEvent } from './endCameraTouchEvent.js';
 import { changeCameraTouch } from './changeCameraTouch.js';
 import { cleanupCameraTouch } from './cleanupCameraTouch.js';
 import { endAllCameraTouches } from './endAllCameraTouches.js';
+import { addCameraHandler } from './addCameraHandler.js';
+
+Compass.value = L.Handler.extend({
+  addHooks: compassAddHooks,
+  removeHooks: compassRemoveHooks,
+});
+
+ContainerResize.value = L.Handler.extend({
+  addHooks: containerResizeAddHooks,
+  removeHooks: containerResizeRemoveHooks,
+});
+
+PitchDrag.value = L.Handler.extend({
+  addHooks: pitchDragAddHooks,
+  removeHooks: pitchDragRemoveHooks,
+});
 
-cameraControlsState.cameraDrags = new Set();
-cameraControlsState.dragStates = new WeakMap();
-cameraControlsState.cameraTouchStates = new Set();
+ShiftRotate.value = L.Handler.extend({
+  addHooks: shiftRotateAddHooks,
+  removeHooks: shiftRotateRemoveHooks,
+});
+
+TouchMode.value = L.Handler.extend({
+  addHooks: notifyCameraTouchChange,
+  removeHooks: notifyCameraTouchChange,
+});
 
 L.Control.Rotate = L.Control.extend({
   options: { position: 'topleft', closeOnZeroBearing: true, visualizePitch: true },
@@ -35,26 +66,26 @@ L.Control.Rotate = L.Control.extend({
 if (L.control) L.control.rotate = rotateControl;
 
 export function cameraControls(map) {
-  map.addHandler('trackContainerMutation', ContainerResize);
+  addCameraHandler(map, 'trackContainerMutation', ContainerResize.value);
   if (!map.options.rotate) return;
-  map.addHandler('shiftKeyRotate', ShiftRotate);
-  map.addHandler('pitchDrag', PitchDrag);
-  map.addHandler('compassBearing', Compass);
-  map.addHandler('touchRotate', TouchMode);
-  map.addHandler('touchPitch', TouchMode);
+  addCameraHandler(map, 'shiftKeyRotate', ShiftRotate.value);
+  addCameraHandler(map, 'pitchDrag', PitchDrag.value);
+  addCameraHandler(map, 'compassBearing', Compass.value);
+  addCameraHandler(map, 'touchRotate', TouchMode.value);
+  addCameraHandler(map, 'touchPitch', TouchMode.value);
   const container = map.getContainer();
-  const state = map._cameraTouchState = { map, container, touch: null, nativeZoom: undefined };
-  container._cameraTouchState = state;
-  cameraControlsState.cameraTouchStates.add(state);
-  container.addEventListener('touchstart', startCameraTouch, { capture: true, passive: false });
-  container.addEventListener('touchmove', moveCameraTouch, { capture: true, passive: false });
+  const state = cameraByMap.get(map)._cameraTouchState = /* alloc */ { map, container, touch: null, nativeZoom: undefined };
+  touchByContainer.set(container, state);
+  cameraTouchStates.add(state);
+  container.addEventListener('touchstart', startCameraTouch, cameraListenerOptions);
+  container.addEventListener('touchmove', moveCameraTouch, cameraListenerOptions);
   container.addEventListener('touchend', endCameraTouchEvent, true);
   container.addEventListener('touchcancel', endCameraTouchEvent, true);
   window.addEventListener('blur', endAllCameraTouches);
   map.on('cameratouchchange', changeCameraTouch, map);
   if (map.options.rotateControl) {
-    map.rotateControl = new L.Control.Rotate(typeof map.options.rotateControl === 'object' ? map.options.rotateControl : {});
-    map.rotateControl.addTo(map);
+    cameraByMap.get(map).rotateControl = /* alloc */ new L.Control.Rotate(typeof map.options.rotateControl === 'object' ? map.options.rotateControl : cameraEmptyOptions);
+    cameraByMap.get(map).rotateControl.addTo(map);
   }
   map.once('unload', cleanupCameraTouch, map);
 }

package/src/controls/cameraDragClick.js

@@ -1,7 +1,8 @@
-import { cameraControlsState } from '../constants/cameraControlsState.js';
+import { dragStates } from '../globals/dragStates.js';
+
 
 export function cameraDragClick(event) {
-  const state = cameraControlsState.dragStates.get(this);
+  const state = dragStates.value.get(this);
   if (!state.moved) return;
   event.preventDefault();
   event.stopPropagation();

package/src/controls/cameraDragContextMenu.js

@@ -1,7 +1,8 @@
-import { cameraControlsState } from '../constants/cameraControlsState.js';
+import { dragStates } from '../globals/dragStates.js';
+
 
 export function cameraDragContextMenu(event) {
-  const state = cameraControlsState.dragStates.get(this);
+  const state = dragStates.value.get(this);
   if (!state.drag && !state.moved) return;
   event.preventDefault();
   event.stopPropagation();

package/src/controls/cameraDragDown.js

@@ -1,20 +1,23 @@
-import { cameraControlsState } from '../constants/cameraControlsState.js';
+import { dragStates } from '../globals/dragStates.js';
+import { cameraFocusOptions } from '../globals/cameraFocusOptions.js';
+
+
 import { editable } from './editable.js';
 
-export function cameraDragDown(event) {
-  const state = cameraControlsState.dragStates.get(this);
-  if (state.drag || !state.accept(event) || editable(event.target)) return;
-  event.preventDefault();
-  event.stopPropagation();
-  state.moved = false;
-  const rect = state.map.getContainer().getBoundingClientRect();
-  state.drag = {
-    id: event.pointerId, x: event.clientX, y: event.clientY, cursor: state.element.style.cursor,
-    cx: rect.left + rect.width / 2, cy: rect.top + rect.height / 2,
-    dragging: state.map.dragging?.enabled(),
-  };
-  state.map.dragging?.disable();
-  state.element.focus?.({ preventScroll: true });
-  state.element.setPointerCapture(event.pointerId);
-  state.element.style.cursor = 'grabbing';
+export function cameraDragDown(event) {
+  const state = dragStates.value.get(this);
+  if (state.drag || !state.accept(event) || editable(event.target)) return;
+  event.preventDefault();
+  event.stopPropagation();
+  state.moved = false;
+  const rect = state.map.getContainer().getBoundingClientRect();
+  state.drag = /* alloc */ {
+    id: event.pointerId, x: event.clientX, y: event.clientY, cursor: state.element.style.cursor,
+    cx: rect.left + rect.width / 2, cy: rect.top + rect.height / 2,
+    dragging: state.map.dragging?.enabled(),
+  };
+  state.map.dragging?.disable();
+  state.element.focus?.(cameraFocusOptions);
+  state.element.setPointerCapture(event.pointerId);
+  state.element.style.cursor = 'grabbing';
 }

package/src/controls/cameraDragEnd.js

@@ -1,6 +1,7 @@
+import { dragStates } from '../globals/dragStates.js';
+
 import { finishCameraDrag } from './finishCameraDrag.js';
-import { cameraControlsState } from '../constants/cameraControlsState.js';
 
 export function cameraDragEnd(event) {
-  finishCameraDrag(cameraControlsState.dragStates.get(this), event);
+  finishCameraDrag(dragStates.value.get(this), event);
 }

package/src/controls/cameraDragMove.js

@@ -1,11 +1,17 @@
-import { cameraControlsState } from '../constants/cameraControlsState.js';
+import { degrees } from '../globals/degrees.js';
+import { dragStates } from '../globals/dragStates.js';
+
+import { mapStopPitchBearingAnimation } from '../camera/mapStopPitchBearingAnimation.js';
+import { mapSetPitchAndBearing } from '../camera/mapSetPitchAndBearing.js';
+import { mapGetPitch } from '../camera/mapGetPitch.js';
+import { mapGetBearing } from '../camera/mapGetBearing.js';
 
 export function cameraDragMove(event) {
-  const state = cameraControlsState.dragStates.get(this);
+  const state = dragStates.value.get(this);
   if (!state.drag || state.drag.id !== event.pointerId) return;
   const x = event.clientX - state.drag.x, y = event.clientY - state.drag.y;
   if (Math.hypot(x, y) < 3 && !state.moved) return;
-  state.map._stopPitchBearingAnimation();
+  mapStopPitchBearingAnimation(state.map);
   state.moved = true;
   event.preventDefault();
   let bearing = x * state.sensitivity[0];
@@ -13,11 +19,10 @@ export function cameraDragMove(event) {
     if (Math.abs(state.drag.cy - state.drag.y) > 100) {
       const angle = Math.atan2(event.clientY - state.drag.cy, event.clientX - state.drag.cx) -
         Math.atan2(event.clientY - state.drag.cy, state.drag.x - state.drag.cx);
-      bearing = Math.atan2(Math.sin(angle), Math.cos(angle)) * 180 / Math.PI;
+      bearing = Math.atan2(Math.sin(angle), Math.cos(angle)) * degrees;
     } else bearing *= event.clientY < state.drag.cy ? 1 : -1;
   }
-  state.map._setPitchAndBearing(state.map.getPitch() - y * state.sensitivity[1],
-    state.map.getBearing() + bearing);
+  mapSetPitchAndBearing(state.map, mapGetPitch(state.map) - y * state.sensitivity[1], mapGetBearing(state.map) + bearing);
   state.drag.x = event.clientX;
   state.drag.y = event.clientY;
 }

package/src/controls/changeCameraTouch.js

@@ -1,8 +1,11 @@
+import { cameraByMap } from '../globals/cameraByMap.js';
+
+
 import { endCameraTouch } from './endCameraTouch.js';
 
 export function changeCameraTouch() {
-  const state = this._cameraTouchState, { map, container } = state;
-  const active = map.touchRotate.enabled() || map.touchPitch.enabled();
+  const state = cameraByMap.get(this)._cameraTouchState, { map, container } = state;
+  const active = cameraByMap.get(map).touchRotate.enabled() || cameraByMap.get(map).touchPitch.enabled();
   if (active && state.nativeZoom === undefined) {
     state.nativeZoom = map.touchZoom?.enabled();
     map.touchZoom?.disable();

package/src/controls/cleanupCameraTouch.js

@@ -1,24 +1,29 @@
+import { cameraByMap } from '../globals/cameraByMap.js';
+import { cameraTouchStates } from '../globals/cameraTouchStates.js';
+import { touchByContainer } from '../globals/touchByContainer.js';
+
+
 import { endCameraTouch } from './endCameraTouch.js';
 import { startCameraTouch } from './startCameraTouch.js';
 import { moveCameraTouch } from './moveCameraTouch.js';
 import { endCameraTouchEvent } from './endCameraTouchEvent.js';
-import { cameraControlsState } from '../constants/cameraControlsState.js';
+
 import { endAllCameraTouches } from './endAllCameraTouches.js';
 import { changeCameraTouch } from './changeCameraTouch.js';
 
-export function cleanupCameraTouch() {
-  const state = this._cameraTouchState;
-  if (!state) return;
-  const { container, map } = state;
-  endCameraTouch(state);
-  container.removeEventListener('touchstart', startCameraTouch, true);
-  container.removeEventListener('touchmove', moveCameraTouch, true);
-  container.removeEventListener('touchend', endCameraTouchEvent, true);
-  container.removeEventListener('touchcancel', endCameraTouchEvent, true);
-  cameraControlsState.cameraTouchStates.delete(state);
-  if (!cameraControlsState.cameraTouchStates.size) window.removeEventListener('blur', endAllCameraTouches);
-  map.off('cameratouchchange', changeCameraTouch, map);
-  map.rotateControl?.remove();
-  delete container._cameraTouchState;
-  delete map._cameraTouchState;
+export function cleanupCameraTouch() {
+  const state = cameraByMap.get(this)._cameraTouchState;
+  if (!state) return;
+  const { container, map } = state;
+  endCameraTouch(state);
+  container.removeEventListener('touchstart', startCameraTouch, true);
+  container.removeEventListener('touchmove', moveCameraTouch, true);
+  container.removeEventListener('touchend', endCameraTouchEvent, true);
+  container.removeEventListener('touchcancel', endCameraTouchEvent, true);
+  cameraTouchStates.delete(state);
+  if (!cameraTouchStates.size) window.removeEventListener('blur', endAllCameraTouches);
+  map.off('cameratouchchange', changeCameraTouch, map);
+  cameraByMap.get(map).rotateControl?.remove();
+  touchByContainer.delete(container);
+  delete cameraByMap.get(map)._cameraTouchState;
 }