@lugg/maps 0.2.0-alpha.8 → 1.0.0-beta.0

package/src/MapView.web.tsx

@@ -1,33 +1,35 @@
 import {
-  Children,
-  Component,
-  isValidElement,
+  forwardRef,
+  useCallback,
   useEffect,
+  useId,
+  useImperativeHandle,
   useRef,
+  useState,
   type CSSProperties,
-  type ReactElement,
-  type ReactNode,
 } from 'react';
-import type { NativeSyntheticEvent, ViewStyle } from 'react-native';
+import type { NativeSyntheticEvent } from 'react-native';
 import { View } from 'react-native';
-import { Map, useMap } from '@vis.gl/react-google-maps';
+import {
+  ColorScheme,
+  Map,
+  useMap,
+  type MapCameraChangedEvent,
+  type MapEvent,
+  type MapMouseEvent,
+} from '@vis.gl/react-google-maps';
 import { Marker } from './components/Marker.web';
-import { Polyline } from './components/Polyline.web';
+import { MapContext } from './MapProvider.web';
 
 import type {
   MapViewProps,
   MapViewRef,
   MoveCameraOptions,
   FitCoordinatesOptions,
+  SetEdgeInsetsOptions,
   CameraEventPayload,
 } from './MapView.types';
-import type { Coordinate } from './types';
-
-// Map-specific component types that render inside the Google Map
-const MAP_COMPONENT_TYPES = new Set([Marker, Polyline]);
-
-const isMapComponent = (child: ReactElement): boolean =>
-  MAP_COMPONENT_TYPES.has(child.type as typeof Marker | typeof Polyline);
+import type { Coordinate, EdgeInsets } from './types';
 
 const createSyntheticEvent = <T,>(nativeEvent: T): NativeSyntheticEvent<T> =>
   ({
@@ -48,69 +50,31 @@ const createSyntheticEvent = <T,>(nativeEvent: T): NativeSyntheticEvent<T> =>
     type: '',
   } as unknown as NativeSyntheticEvent<T>);
 
-interface MapControllerProps {
-  onMapReady: (map: google.maps.Map) => void;
-  onCameraMove?: (event: NativeSyntheticEvent<CameraEventPayload>) => void;
-  onCameraIdle?: (event: NativeSyntheticEvent<CameraEventPayload>) => void;
-  onReady?: () => void;
-  userLocationEnabled?: boolean;
-}
-
-function MapController({
-  onMapReady,
-  onCameraMove,
-  onCameraIdle,
-  onReady,
-  userLocationEnabled,
-}: MapControllerProps) {
-  const map = useMap();
-  const readyFired = useRef(false);
-  const userLocationMarker =
-    useRef<google.maps.marker.AdvancedMarkerElement | null>(null);
-
-  useEffect(() => {
-    if (!map) return;
-    onMapReady(map);
+const userLocationDotStyle: CSSProperties = {
+  width: 16,
+  height: 16,
+  backgroundColor: '#4285F4',
+  border: '2px solid white',
+  borderRadius: '50%',
+  boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
+};
 
-    if (!readyFired.current) {
-      readyFired.current = true;
-      onReady?.();
-    }
-  }, [map, onMapReady, onReady]);
+const UserLocationMarker = ({ enabled }: { enabled?: boolean }) => {
+  const [coordinate, setCoordinate] = useState<Coordinate | null>(null);
 
   useEffect(() => {
-    if (!map || !userLocationEnabled) {
-      if (userLocationMarker.current) {
-        userLocationMarker.current.map = null;
-        userLocationMarker.current = null;
-      }
+    if (!enabled) {
+      setCoordinate(null);
       return;
     }
 
     let watchId: number | null = null;
 
     const updateLocation = (position: GeolocationPosition) => {
-      const { latitude, longitude } = position.coords;
-      const pos = { lat: latitude, lng: longitude };
-
-      if (!userLocationMarker.current) {
-        const dot = document.createElement('div');
-        dot.style.width = '16px';
-        dot.style.height = '16px';
-        dot.style.backgroundColor = '#4285F4';
-        dot.style.border = '2px solid white';
-        dot.style.borderRadius = '50%';
-        dot.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
-
-        userLocationMarker.current =
-          new google.maps.marker.AdvancedMarkerElement({
-            map,
-            position: pos,
-            content: dot,
-          });
-      } else {
-        userLocationMarker.current.position = pos;
-      }
+      setCoordinate({
+        latitude: position.coords.latitude,
+        longitude: position.coords.longitude,
+      });
     };
 
     navigator.geolocation.getCurrentPosition(updateLocation, () => {});
@@ -120,198 +84,366 @@ function MapController({
       if (watchId !== null) {
         navigator.geolocation.clearWatch(watchId);
       }
-      if (userLocationMarker.current) {
-        userLocationMarker.current.map = null;
-        userLocationMarker.current = null;
-      }
     };
-  }, [map, userLocationEnabled]);
-
-  useEffect(() => {
-    if (!map) return;
+  }, [enabled]);
+
+  if (!coordinate) return null;
+
+  return (
+    <Marker coordinate={coordinate} anchor={{ x: 0.5, y: 0.5 }}>
+      <div style={userLocationDotStyle} />
+    </Marker>
+  );
+};
+
+export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
+  props,
+  ref
+) {
+  const {
+    mapId = 'DEMO_MAP_ID',
+    initialCoordinate,
+    initialZoom = 10,
+    minZoom,
+    maxZoom,
+    zoomEnabled = true,
+    scrollEnabled = true,
+    pitchEnabled = true,
+    edgeInsets,
+    userLocationEnabled,
+    theme = 'system',
+    onPress,
+    onLongPress,
+    onCameraMove,
+    onCameraIdle,
+    onReady,
+    children,
+    style,
+  } = props;
+
+  const id = useId();
+  const map = useMap(id);
+  const containerRef = useRef<View>(null);
+  const readyFired = useRef(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const wasGesture = useRef(false);
+  const prevEdgeInsets = useRef(edgeInsets);
+
+  const offsetCenter = useCallback(
+    (coord: Coordinate, zoom: number, insets?: EdgeInsets, reverse = false) => {
+      const p = insets ?? prevEdgeInsets.current;
+      if (!p) {
+        return { lat: coord.latitude, lng: coord.longitude };
+      }
 
-    const createPayload = (gesture: boolean): CameraEventPayload => {
+      const dir = reverse ? -1 : 1;
+      const scale = 256 * Math.pow(2, zoom);
+      const offsetX = (dir * ((p.right ?? 0) - (p.left ?? 0))) / 2;
+      const offsetY = (dir * ((p.bottom ?? 0) - (p.top ?? 0))) / 2;
+
+      const latRad = (coord.latitude * Math.PI) / 180;
+      const x = ((coord.longitude + 180) / 360) * scale + offsetX;
+      const y =
+        ((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) /
+          2) *
+          scale +
+        offsetY;
+
+      const lng = (x / scale) * 360 - 180;
+      const lat =
+        (Math.atan(Math.sinh(Math.PI * (1 - (2 * y) / scale))) * 180) / Math.PI;
+
+      return { lat, lng };
+    },
+    []
+  );
+
+  const applyEdgeInsets = useCallback(
+    (newEdgeInsets: EdgeInsets, duration?: number) => {
+      if (!map) return;
+
+      const prev = prevEdgeInsets.current;
       const center = map.getCenter();
-      return {
-        coordinate: {
-          latitude: center?.lat() ?? 0,
-          longitude: center?.lng() ?? 0,
-        },
-        zoom: map.getZoom() ?? 0,
-        gesture,
-      };
-    };
+      const zoom = map.getZoom() ?? initialZoom;
+
+      if (center) {
+        const logicalCenter = offsetCenter(
+          { latitude: center.lat(), longitude: center.lng() },
+          zoom,
+          prev,
+          true
+        );
+        const newCenter = offsetCenter(
+          { latitude: logicalCenter.lat, longitude: logicalCenter.lng },
+          zoom,
+          newEdgeInsets,
+          false
+        );
+
+        if (duration === 0) {
+          map.moveCamera({ center: newCenter, zoom });
+        } else {
+          map.panTo(newCenter);
+        }
+      }
 
-    let isDragging = false;
+      prevEdgeInsets.current = newEdgeInsets;
+    },
+    [map, initialZoom, offsetCenter]
+  );
 
-    const dragStartListener = map.addListener('dragstart', () => {
-      isDragging = true;
-    });
+  const panToCoordinate = useCallback(
+    (coordinate: Coordinate) => {
+      if (!map) return;
+      const zoom = map.getZoom() || initialZoom;
+      const center = offsetCenter(coordinate, zoom, undefined, false);
+      map.panTo(center);
+    },
+    [map, initialZoom, offsetCenter]
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      moveCamera(coordinate: Coordinate, options?: MoveCameraOptions) {
+        if (!map) return;
+
+        const { zoom = 0, duration = -1 } = options ?? {};
+        const targetZoom = zoom || map.getZoom() || initialZoom;
+        const center = offsetCenter(coordinate, targetZoom, undefined, false);
+
+        if (duration === 0) {
+          map.moveCamera({ center, zoom: targetZoom });
+        } else {
+          const currentZoom = map.getZoom();
+          const zoomChanged = zoom !== 0 && zoom !== currentZoom;
+
+          if (zoomChanged) {
+            map.setZoom(zoom);
+          }
+          map.panTo(center);
+        }
+      },
+
+      fitCoordinates(
+        coordinates: Coordinate[],
+        options?: FitCoordinatesOptions
+      ) {
+        const first = coordinates[0];
+        if (!map || !first) return;
+
+        const { padding: fitPadding, duration = -1 } = options ?? {};
+
+        if (coordinates.length === 1) {
+          this.moveCamera(first, { zoom: initialZoom, duration });
+          return;
+        }
+
+        const bounds = new google.maps.LatLngBounds();
+        coordinates.forEach((coord) => {
+          bounds.extend({ lat: coord.latitude, lng: coord.longitude });
+        });
+
+        const ei = prevEdgeInsets.current;
+        map.fitBounds(bounds, {
+          top: (ei?.top ?? 0) + (fitPadding?.top ?? 0),
+          left: (ei?.left ?? 0) + (fitPadding?.left ?? 0),
+          bottom: (ei?.bottom ?? 0) + (fitPadding?.bottom ?? 0),
+          right: (ei?.right ?? 0) + (fitPadding?.right ?? 0),
+        });
+      },
+
+      setEdgeInsets(newEdgeInsets: EdgeInsets, options?: SetEdgeInsetsOptions) {
+        applyEdgeInsets(newEdgeInsets, options?.duration);
+      },
+    }),
+    [map, initialZoom, offsetCenter, applyEdgeInsets]
+  );
 
-    const dragEndListener = map.addListener('dragend', () => {
-      isDragging = false;
-    });
+  useEffect(() => {
+    if (map && !readyFired.current) {
+      readyFired.current = true;
+      onReady?.();
+    }
+  }, [map, onReady]);
 
-    const centerListener = map.addListener('center_changed', () => {
-      onCameraMove?.(createSyntheticEvent(createPayload(isDragging)));
-    });
+  useEffect(() => {
+    if (!map || !edgeInsets) return;
 
-    const idleListener = map.addListener('idle', () => {
-      onCameraIdle?.(createSyntheticEvent(createPayload(false)));
-    });
+    const prev = prevEdgeInsets.current;
+    const changed =
+      prev?.top !== edgeInsets.top ||
+      prev?.left !== edgeInsets.left ||
+      prev?.bottom !== edgeInsets.bottom ||
+      prev?.right !== edgeInsets.right;
 
+    if (changed) {
+      applyEdgeInsets(edgeInsets);
+    }
+  }, [map, edgeInsets, applyEdgeInsets]);
+
+  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const longPressFired = useRef(false);
+
+  const getPoint = useCallback((domEvent?: Event) => {
+    const el = containerRef.current as unknown as HTMLElement | null;
+    if (!domEvent || !el) return { x: 0, y: 0 };
+    const rect = el.getBoundingClientRect();
+    const e = domEvent as MouseEvent | Touch;
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  }, []);
+
+  const handleClick = useCallback(
+    (event: MapMouseEvent) => {
+      if (longPressFired.current) {
+        longPressFired.current = false;
+        return;
+      }
+      const latLng = event.detail.latLng;
+      if (!onPress || !latLng) return;
+      onPress(
+        createSyntheticEvent({
+          coordinate: { latitude: latLng.lat, longitude: latLng.lng },
+          point: getPoint(event.domEvent),
+        })
+      );
+    },
+    [onPress, getPoint]
+  );
+
+  const handleMouseDown = useCallback(
+    (event: google.maps.MapMouseEvent) => {
+      if (!onLongPress) return;
+      const point = getPoint(event.domEvent);
+      longPressFired.current = false;
+      longPressTimer.current = setTimeout(() => {
+        longPressFired.current = true;
+        const latLng = event.latLng;
+        if (!latLng) return;
+        onLongPress(
+          createSyntheticEvent({
+            coordinate: { latitude: latLng.lat(), longitude: latLng.lng() },
+            point,
+          })
+        );
+      }, 500);
+    },
+    [onLongPress, getPoint]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    if (longPressTimer.current) {
+      clearTimeout(longPressTimer.current);
+      longPressTimer.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!map || !onLongPress) return;
+    const listeners = [
+      map.addListener('mousedown', handleMouseDown),
+      map.addListener('mouseup', handleMouseUp),
+    ];
     return () => {
-      google.maps.event.removeListener(dragStartListener);
-      google.maps.event.removeListener(dragEndListener);
-      google.maps.event.removeListener(centerListener);
-      google.maps.event.removeListener(idleListener);
+      listeners.forEach((l) => google.maps.event.removeListener(l));
+      handleMouseUp();
     };
-  }, [map, onCameraMove, onCameraIdle]);
-
-  return null;
-}
-
-export class MapView extends Component<MapViewProps> implements MapViewRef {
-  static defaultProps: Partial<MapViewProps> = {
-    provider: 'google',
-    mapId: 'DEMO_MAP_ID',
-    initialZoom: 10,
-    zoomEnabled: true,
-    scrollEnabled: true,
-    rotateEnabled: true,
-    pitchEnabled: true,
-  };
+  }, [map, onLongPress, handleMouseDown, handleMouseUp]);
 
-  private mapInstance: google.maps.Map | null = null;
-
-  private handleMapReady = (map: google.maps.Map) => {
-    this.mapInstance = map;
+  const handleDragStart = () => {
+    handleMouseUp();
+    setIsDragging(true);
+    wasGesture.current = true;
   };
 
-  moveCamera(coordinate: Coordinate, options: MoveCameraOptions) {
-    const map = this.mapInstance;
-    if (!map) return;
-
-    const { zoom, duration = -1 } = options;
-    const center = { lat: coordinate.latitude, lng: coordinate.longitude };
-
-    if (duration > 0) {
-      map.panTo(center);
-      map.setZoom(zoom);
-    } else {
-      map.setCenter(center);
-      map.setZoom(zoom);
-    }
-  }
-
-  fitCoordinates(coordinates: Coordinate[], options?: FitCoordinatesOptions) {
-    const map = this.mapInstance;
-    const first = coordinates[0];
-    if (!map || !first) return;
-
-    const { padding, duration = -1 } = options ?? {};
-
-    if (coordinates.length === 1) {
-      const zoom = this.props.initialZoom ?? 10;
-      this.moveCamera(first, { zoom, duration });
-      return;
-    }
+  const handleDragEnd = () => {
+    setIsDragging(false);
+  };
 
-    const bounds = new google.maps.LatLngBounds();
-    coordinates.forEach((coord) => {
-      bounds.extend({ lat: coord.latitude, lng: coord.longitude });
-    });
-
-    map.fitBounds(bounds, {
-      top: padding?.top ?? 0,
-      left: padding?.left ?? 0,
-      bottom: padding?.bottom ?? 0,
-      right: padding?.right ?? 0,
-    });
-  }
-
-  render() {
-    const {
-      mapId,
-      initialCoordinate,
-      initialZoom,
-      minZoom,
-      maxZoom,
-      zoomEnabled,
-      scrollEnabled,
-      pitchEnabled,
-      padding,
-      userLocationEnabled,
-      onCameraMove,
-      onCameraIdle,
-      onReady,
-      children,
-      style,
-    } = this.props;
-
-    const gestureHandling =
-      scrollEnabled === false && zoomEnabled === false
-        ? 'none'
-        : scrollEnabled === false
-        ? 'none'
-        : 'auto';
-
-    const defaultCenter = initialCoordinate
-      ? { lat: initialCoordinate.latitude, lng: initialCoordinate.longitude }
-      : undefined;
-
-    // Separate map children (Marker, Polyline) from overlay children (regular Views)
-    const mapChildren: ReactNode[] = [];
-    const overlayChildren: ReactNode[] = [];
-
-    Children.forEach(children, (child) => {
-      if (!isValidElement(child)) return;
-      if (isMapComponent(child)) {
-        mapChildren.push(child);
-      } else {
-        overlayChildren.push(child);
-      }
-    });
-
-    const mapContainerStyle: ViewStyle = {
-      position: 'absolute',
-      top: padding?.top ?? 0,
-      left: padding?.left ?? 0,
-      right: padding?.right ?? 0,
-      bottom: padding?.bottom ?? 0,
+  const handleCameraChanged = (event: MapCameraChangedEvent) => {
+    const logicalCenter = offsetCenter(
+      { latitude: event.detail.center.lat, longitude: event.detail.center.lng },
+      event.detail.zoom,
+      undefined,
+      true
+    );
+    const payload: CameraEventPayload = {
+      coordinate: {
+        latitude: logicalCenter.lat,
+        longitude: logicalCenter.lng,
+      },
+      zoom: event.detail.zoom,
+      gesture: isDragging,
     };
+    onCameraMove?.(createSyntheticEvent(payload));
+  };
 
-    const mapStyle: CSSProperties = {
-      width: '100%',
-      height: '100%',
+  const handleIdle = (event: MapEvent) => {
+    const center = event.map.getCenter();
+    const zoom = event.map.getZoom() ?? 0;
+    const logicalCenter = offsetCenter(
+      { latitude: center?.lat() ?? 0, longitude: center?.lng() ?? 0 },
+      zoom,
+      undefined,
+      true
+    );
+    const payload: CameraEventPayload = {
+      coordinate: {
+        latitude: logicalCenter.lat,
+        longitude: logicalCenter.lng,
+      },
+      zoom,
+      gesture: wasGesture.current,
     };
+    onCameraIdle?.(createSyntheticEvent(payload));
+    wasGesture.current = false;
+  };
 
-    return (
-      <View style={style}>
-        <View style={mapContainerStyle}>
-          <Map
-            mapId={mapId}
-            defaultCenter={defaultCenter}
-            defaultZoom={initialZoom}
-            minZoom={minZoom}
-            maxZoom={maxZoom}
-            gestureHandling={gestureHandling}
-            disableDefaultUI
-            tilt={pitchEnabled === false ? 0 : undefined}
-            style={mapStyle}
-          >
-            <MapController
-              onMapReady={this.handleMapReady}
-              onCameraMove={onCameraMove}
-              onCameraIdle={onCameraIdle}
-              onReady={onReady}
-              userLocationEnabled={userLocationEnabled}
-            />
-            {mapChildren}
-          </Map>
-        </View>
-        {overlayChildren}
+  const gestureHandling =
+    scrollEnabled === false && zoomEnabled === false
+      ? 'none'
+      : scrollEnabled === false
+      ? 'cooperative'
+      : 'auto';
+
+  const colorScheme =
+    theme === 'dark'
+      ? ColorScheme.DARK
+      : theme === 'light'
+      ? ColorScheme.LIGHT
+      : ColorScheme.FOLLOW_SYSTEM;
+
+  const defaultCenter = initialCoordinate
+    ? { lat: initialCoordinate.latitude, lng: initialCoordinate.longitude }
+    : undefined;
+
+  return (
+    <MapContext.Provider
+      value={{ map, isDragging, moveCamera: panToCoordinate }}
+    >
+      <View ref={containerRef} style={style}>
+        <Map
+          id={id}
+          mapId={mapId}
+          defaultCenter={defaultCenter}
+          defaultZoom={initialZoom}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
+          gestureHandling={gestureHandling}
+          colorScheme={colorScheme}
+          disableDefaultUI
+          isFractionalZoomEnabled
+          tilt={pitchEnabled === false ? 0 : undefined}
+          onClick={handleClick}
+          onDragstart={handleDragStart}
+          onDragend={handleDragEnd}
+          onCameraChanged={handleCameraChanged}
+          onIdle={handleIdle}
+        >
+          <UserLocationMarker enabled={userLocationEnabled} />
+          {children}
+        </Map>
       </View>
-    );
-  }
-}
+    </MapContext.Provider>
+  );
+});