feat: make compatible with both v2 and v3

- Makes the library compatible with both `mapbox-gl` v2 and v3. The
  signature of `CollisionIndex.projectAndGetPerspectiveRatio` was
  actually changed from v2.11.1 to v2.12.0. So we have to take care of
  three groups:
    - v2.11.1 or earlier
    - v2.12.0 or later but before v3.0.0
    - v3.0.0 or later

  A new script `src/private/mapbox-gl-version.ts` determines the above
  groups. `src/private/mapbox-types.ts` mixes up type definitions for
  all the versions.

issue #3

Author: kikuomax

src/index.ts

@@ -10,13 +10,14 @@
 import { Map } from 'mapbox-gl';
 
 import { calculateCollisionBox } from './private/collision-index';
+import { getMapboxGlVersion } from './private/mapbox-gl-version';
 import { EXTENT, isSymbolBucket } from './private/mapbox-types';
 import { waitForPlacement } from './private/placement';
 import {
   getSymbolPlacementTileProjectionMatrix,
 } from './private/projection-util';
 import { evaluateSizeForZoom } from './private/symbol-size';
-import { Box, FeatureBox } from './types';
+import type { Box, FeatureBox } from './types';
 export { Box, FeatureBox } from './types';
 
 // placement timeout in milliseconds.
@@ -59,6 +60,7 @@ export async function collectCollisionBoxesAndFeatures(
   layerId: string,
 ): Promise<FeatureBox[]> {
   const style = map.style;
+  const version = getMapboxGlVersion(map);
   const placement = style.placement;
   const layer = style._layers[layerId];
   if (layer == null) {
@@ -68,7 +70,9 @@ export async function collectCollisionBoxesAndFeatures(
     throw new RangeError(`layer "${layerId}" is not a symbol layer`);
   }
   await waitForPlacement(placement, PLACEMENT_TIMEOUT_IN_MS);
-  const sourceCache = style.getOwnLayerSourceCache(layer);
+  const sourceCache = version.isV3
+    ? style.getOwnLayerSourceCache(layer)
+    : style._getLayerSourceCache(layer);
   if (sourceCache == null) {
     throw new Error(`no SourceCache available`);
   }
@@ -117,6 +121,7 @@ export async function collectCollisionBoxesAndFeatures(
           posMatrix,
           textPixelRatio,
           scale,
+          version,
         );
       }
     }

src/private/collision-index.ts

@@ -1,6 +1,7 @@
 import { mat4 } from 'gl-matrix';
 
 import { Box } from '../types';
+import type { MapboxGlVersion } from './mapbox-gl-version';
 import {
   Placement,
   SingleCollisionBox,
@@ -17,6 +18,10 @@ import {
  * `CollisionIndex#placeCollisionBox`.
  * https://github.com/mapbox/mapbox-gl-js/blob/922da6dd02dbcc1ccd852cebba8b830a070d46ca/src/symbol/collision_index.js#L90-L140
  *
+ * @param version
+ *
+ *   Version information of `mapbox-gl`.
+ *
  * @beta
  */
 export function calculateCollisionBox(
@@ -27,6 +32,7 @@ export function calculateCollisionBox(
   posMatrix: mat4,
   textPixelRatio: number,
   scale: number,
+  version: MapboxGlVersion,
 ): Box {
   // we assumes symbols do not have a text.
   // so `shift` is `(0, 0)`.
@@ -55,15 +61,23 @@ export function calculateCollisionBox(
     bucket.projection.name === 'globe' ||
     !!elevation ||
     collisionIndex.transform.pitch > 0;
-  const projectedPoint = collisionIndex.projectAndGetPerspectiveRatio(
-    posMatrix,
-    anchorX,
-    anchorY,
-    anchorZ,
-    box.tileID,
-    checkOcclusion,
-    bucket.getProjection(),
-  );
+  const projectedPoint = version.isLegacy
+    ? collisionIndex.projectAndGetPerspectiveRatio(
+      posMatrix,
+      [anchorX, anchorY, anchorZ],
+      box.tileID,
+      checkOcclusion,
+      bucket.getProjection(),
+    )
+    : collisionIndex.projectAndGetPerspectiveRatio(
+      posMatrix,
+      anchorX,
+      anchorY,
+      anchorZ,
+      box.tileID,
+      checkOcclusion,
+      bucket.getProjection(),
+    );
   const tileToViewport = textPixelRatio * projectedPoint.perspectiveRatio;
   const screenX = projectedPoint.point.x;
   const screenY = projectedPoint.point.y;

src/private/mapbox-gl-version.ts

@@ -0,0 +1,25 @@
+import type { Map } from 'mapbox-gl';
+
+/**
+ * Version information on `mapbox-gl`.
+ *
+ * @beta
+ */
+export interface MapboxGlVersion {
+  /** Whether v3 or later. */
+  readonly isV3: boolean;
+
+  /** Whether v2.11.1 or earlier. */
+  readonly isLegacy: boolean;
+}
+
+/**
+ * Obtains {@link MapboxGlVersion} from a given map instance.
+ *
+ * @beta
+ */
+export function getMapboxGlVersion(map: Map): MapboxGlVersion {
+  const isV3 = typeof map.style.getOwnLayerSourceCache !== 'undefined';
+  const isLegacy = typeof map._isDragging === 'undefined';
+  return { isV3, isLegacy }
+}

src/private/mapbox-types.ts

@@ -22,6 +22,9 @@ declare module 'mapbox-gl' {
     // but it should not matter because this augmentation is private anyway
     style: Style;
     painter: Painter;
+
+    // v2.12.0 or later
+    _isDragging(): boolean;
   }
 
   interface Style {
@@ -33,6 +36,9 @@ declare module 'mapbox-gl' {
     _serializedLayers: { [layerId: string]: StyleLayer };
     _availableImages: string[];
 
+    // v2
+    _getLayerSourceCache(layer: StyleLayer): SourceCache | undefined;
+    // v3
     getOwnLayerSourceCache(layer: StyleLayer): SourceCache | undefined;
   }
 }
@@ -54,6 +60,15 @@ export interface Placement {
 export interface CollisionIndex {
   transform: Transform;
 
+  // v2.11.1 or earlier
+  projectAndGetPerspectiveRatio(
+    posMatrix: mat4,
+    point: vec3,
+    tileID: OverscaledTileID | undefined | null,
+    checkOcclusiion: boolean,
+    bucketProjection: Projection,
+  ): ScreenAnchorPoint;
+  // v2.12.0 or later
   projectAndGetPerspectiveRatio(
     posMatrix: mat4,
     x: number,