Improved web Camera

Implemented all methods of CameraRef except SetCamera

src/web/components/Camera.tsx

@@ -1,10 +1,53 @@
 import React from 'react';
 
+import { CameraRef } from '../../components/Camera';
+import { Position } from '../../types/Position';
 import MapContext from '../MapContext';
 
-class Camera extends React.Component<{
-  centerCoordinate: [number, number] | null;
-}> {
+function isArray<T>(value: T | ArrayLike<T>): value is ArrayLike<T> {
+  return (value as ArrayLike<T>).length !== undefined;
+}
+
+function buildMapboxGlPadding(
+  padding?: number | number[],
+): number | mapboxgl.PaddingOptions | undefined {
+  if (padding === undefined) {
+    // undefined
+    return undefined;
+  } else if (!isArray(padding)) {
+    // padding
+    return padding;
+  } else {
+    // Array
+    if (padding.length < 2) {
+      // [padding]
+      return buildMapboxGlPadding(padding[0]);
+    } else if (padding.length < 4) {
+      // [vertical, horizontal]
+      return {
+        left: padding[0],
+        right: padding[0],
+        top: padding[1],
+        bottom: padding[1],
+      };
+    } else {
+      // [top, right, bottom, left]
+      return {
+        top: padding[0],
+        right: padding[1],
+        bottom: padding[2],
+        left: padding[3],
+      };
+    }
+  }
+}
+
+class Camera
+  extends React.Component<{
+    centerCoordinate: [number, number] | null;
+  }>
+  implements Omit<CameraRef, 'setCamera'>
+{
   context!: React.ContextType<typeof MapContext>;
 
   static contextType = MapContext;
@@ -19,14 +62,53 @@ class Camera extends React.Component<{
   }
 
   fitBounds(
-    northEastCoordinates: [number, number],
-    southWestCoordinates: [number, number],
-    padding = 0,
-    animationDuration = 0.0,
+    northEastCoordinates: Position,
+    southWestCoordinates: Position,
+    padding: number | number[] = 0,
+    animationDuration: number = 0,
   ) {
     const { map } = this.context;
     if (map) {
-      map.fitBounds([northEastCoordinates, southWestCoordinates]);
+      map.fitBounds(
+        [
+          northEastCoordinates.slice(0, 2) as [number, number],
+          southWestCoordinates.slice(0, 2) as [number, number],
+        ],
+        {
+          padding: buildMapboxGlPadding(padding),
+          duration: animationDuration,
+        },
+      );
+    }
+  }
+
+  flyTo(centerCoordinate: Position, animationDuration: number = 2000) {
+    const { map } = this.context;
+    if (map) {
+      map.flyTo({
+        center: centerCoordinate.slice(0, 2) as [number, number],
+        duration: animationDuration,
+      });
+    }
+  }
+
+  moveTo(centerCoordinate: Position, animationDuration: number = 0) {
+    const { map } = this.context;
+    if (map) {
+      map.easeTo({
+        center: centerCoordinate.slice(0, 2) as [number, number],
+        duration: animationDuration,
+      });
+    }
+  }
+
+  zoomTo(zoomLevel: number, animationDuration: number = 2000) {
+    const { map } = this.context;
+    if (map) {
+      map.flyTo({
+        zoom: zoomLevel,
+        duration: animationDuration,
+      });
     }
   }