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

package/src/components/Polygon.types.ts

@@ -0,0 +1,33 @@
+import type { ColorValue } from 'react-native';
+import type { Coordinate } from '../types';
+
+export interface PolygonProps {
+  /**
+   * Array of coordinates forming the polygon boundary
+   */
+  coordinates: Coordinate[];
+  /**
+   * Array of coordinate arrays representing interior holes
+   */
+  holes?: Coordinate[][];
+  /**
+   * Stroke (outline) color
+   */
+  strokeColor?: ColorValue;
+  /**
+   * Stroke width in points
+   */
+  strokeWidth?: number;
+  /**
+   * Fill color of the polygon
+   */
+  fillColor?: ColorValue;
+  /**
+   * Z-index for layering
+   */
+  zIndex?: number;
+  /**
+   * Called when the polygon is tapped
+   */
+  onPress?: () => void;
+}

package/src/components/Polygon.web.tsx

@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useMapContext } from '../MapProvider.web';
+import type { PolygonProps } from './Polygon.types';
+
+export const Polygon = ({
+  coordinates,
+  holes,
+  strokeColor = '#000000',
+  strokeWidth = 1,
+  fillColor = 'rgba(0, 0, 0, 0.3)',
+  zIndex = 0,
+  onPress,
+}: PolygonProps) => {
+  const { map } = useMapContext();
+  const polygonRef = useRef<google.maps.Polygon | null>(null);
+  const listenersRef = useRef<google.maps.MapsEventListener[]>([]);
+
+  const handleClick = useCallback(() => {
+    onPress?.();
+  }, [onPress]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      listenersRef.current.forEach((l) => l.remove());
+      listenersRef.current = [];
+      polygonRef.current?.setMap(null);
+      polygonRef.current = null;
+    };
+  }, []);
+
+  // Sync listeners
+  useEffect(() => {
+    const polygon = polygonRef.current;
+    if (!polygon) return;
+
+    listenersRef.current.forEach((l) => l.remove());
+    listenersRef.current = [];
+
+    if (onPress) {
+      listenersRef.current.push(polygon.addListener('click', handleClick));
+    }
+    polygon.set('clickable', !!onPress);
+  }, [onPress, handleClick]);
+
+  // Sync polygon with props
+  useEffect(() => {
+    if (!map || coordinates.length === 0) {
+      polygonRef.current?.setMap(null);
+      return;
+    }
+
+    const outerPath = coordinates.map((c) => ({
+      lat: c.latitude,
+      lng: c.longitude,
+    }));
+
+    const paths = [
+      outerPath,
+      ...(holes ?? []).map((hole) =>
+        [...hole].reverse().map((c) => ({ lat: c.latitude, lng: c.longitude }))
+      ),
+    ];
+
+    if (polygonRef.current) {
+      polygonRef.current.setPaths(paths);
+      polygonRef.current.setOptions({
+        strokeColor: strokeColor as string,
+        strokeWeight: strokeWidth,
+        fillColor: fillColor as string,
+        zIndex,
+      });
+    } else {
+      const polygon = new google.maps.Polygon({
+        paths,
+        strokeColor: strokeColor as string,
+        strokeWeight: strokeWidth,
+        strokeOpacity: 1,
+        fillColor: fillColor as string,
+        fillOpacity: 1,
+        zIndex,
+        clickable: !!onPress,
+        map,
+      });
+      polygonRef.current = polygon;
+
+      if (onPress) {
+        listenersRef.current.push(polygon.addListener('click', handleClick));
+      }
+    }
+  }, [
+    map,
+    coordinates,
+    holes,
+    strokeColor,
+    strokeWidth,
+    fillColor,
+    zIndex,
+    onPress,
+    handleClick,
+  ]);
+
+  return null;
+};

package/src/components/Polyline.tsx

@@ -1,44 +1,45 @@
 import React from 'react';
-import type { ColorValue } from 'react-native';
 import { StyleSheet } from 'react-native';
 import LuggPolylineViewNativeComponent from '../fabric/LuggPolylineViewNativeComponent';
-import type { Coordinate } from '../types';
+import type { PolylineProps } from './Polyline.types';
 
-export interface PolylineProps {
-  /**
-   * Array of coordinates forming the polyline
-   */
-  coordinates: Coordinate[];
-  /**
-   * Gradient colors along the polyline
-   */
-  strokeColors?: ColorValue[];
-  /**
-   * Line width in points
-   */
-  strokeWidth?: number;
-  /**
-   * Animate the polyline with a snake effect
-   */
-  animated?: boolean;
-}
+export type {
+  PolylineProps,
+  PolylineEasing,
+  PolylineAnimatedOptions,
+} from './Polyline.types';
+
+export class Polyline extends React.PureComponent<PolylineProps> {
+  private getStyle(zIndex: number | undefined) {
+    if (zIndex == null) return styles.polyline;
+    if (zIndex !== this._cachedZIndex) {
+      this._cachedZIndex = zIndex;
+      this._cachedStyle = [{ zIndex }, styles.polyline];
+    }
+    return this._cachedStyle!;
+  }
+
+  private _cachedZIndex: number | undefined;
+  private _cachedStyle: any;
 
-export class Polyline extends React.Component<PolylineProps> {
   render() {
     const {
       coordinates,
       strokeColors,
       strokeWidth,
       animated = false,
+      animatedOptions,
+      zIndex,
     } = this.props;
 
     return (
       <LuggPolylineViewNativeComponent
-        style={styles.polyline}
+        style={this.getStyle(zIndex)}
         coordinates={coordinates}
         strokeColors={strokeColors}
         strokeWidth={strokeWidth}
         animated={animated}
+        animatedOptions={animatedOptions}
       />
     );
   }

package/src/components/Polyline.types.ts

@@ -0,0 +1,55 @@
+import type { ColorValue } from 'react-native';
+import type { Coordinate } from '../types';
+
+export type PolylineEasing = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut';
+
+export interface PolylineAnimatedOptions {
+  /**
+   * Animation duration in milliseconds
+   * @default 2150
+   */
+  duration?: number;
+  /**
+   * Easing function for the animation
+   * @default 'linear'
+   */
+  easing?: PolylineEasing;
+  /**
+   * Portion of the line visible as trail (0-1)
+   * 1.0 = full snake effect, 0.2 = short worm
+   * @default 1.0
+   */
+  trailLength?: number;
+  /**
+   * Delay before animation starts in milliseconds
+   * @default 0
+   */
+  delay?: number;
+}
+
+export interface PolylineProps {
+  /**
+   * Array of coordinates forming the polyline
+   */
+  coordinates: Coordinate[];
+  /**
+   * Gradient colors along the polyline
+   */
+  strokeColors?: ColorValue[];
+  /**
+   * Line width in points
+   */
+  strokeWidth?: number;
+  /**
+   * Animate the polyline with a snake effect
+   */
+  animated?: boolean;
+  /**
+   * Animation configuration options
+   */
+  animatedOptions?: PolylineAnimatedOptions;
+  /**
+   * Z-index for layering polylines
+   */
+  zIndex?: number;
+}

package/src/components/Polyline.web.tsx

@@ -1,17 +1,27 @@
-import {
-  Component,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { useMap } from '@vis.gl/react-google-maps';
-import type { PolylineProps } from './Polyline';
-
-const ANIMATION_DURATION = 1500;
-
-function interpolateColor(color1: string, color2: string, t: number): string {
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useMapContext } from '../MapProvider.web';
+import type { PolylineProps, PolylineEasing } from './Polyline.types';
+
+const DEFAULT_DURATION = 2150;
+
+const applyEasing = (t: number, easing: PolylineEasing = 'linear'): number => {
+  switch (easing) {
+    case 'easeIn':
+      return t * t;
+    case 'easeOut':
+      return t * (2 - t);
+    case 'easeInOut':
+      return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+    default:
+      return t;
+  }
+};
+
+const interpolateColor = (
+  color1: string,
+  color2: string,
+  t: number
+): string => {
   const hex = (c: string) => parseInt(c, 16);
   const r1 = hex(color1.slice(1, 3));
   const g1 = hex(color1.slice(3, 5));
@@ -27,9 +37,9 @@ function interpolateColor(color1: string, color2: string, t: number): string {
   return `#${r.toString(16).padStart(2, '0')}${g
     .toString(16)
     .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-}
+};
 
-function getGradientColor(colors: string[], position: number): string {
+const getGradientColor = (colors: string[], position: number): string => {
   if (colors.length === 0) return '#000000';
   if (colors.length === 1 || position <= 0) return colors[0]!;
   if (position >= 1) return colors[colors.length - 1]!;
@@ -39,17 +49,39 @@ function getGradientColor(colors: string[], position: number): string {
   const t = scaledPos - index;
 
   return interpolateColor(colors[index]!, colors[index + 1]!, t);
-}
+};
 
-function PolylineImpl({
+export const Polyline = ({
   coordinates,
   strokeColors,
   strokeWidth = 1,
   animated,
-}: PolylineProps) {
-  const map = useMap();
+  animatedOptions,
+  zIndex,
+}: PolylineProps) => {
+  const resolvedZIndex = zIndex ?? (animated ? 1 : 0);
+  const { map, isDragging } = useMapContext();
+
+  const { duration, easing, trailLength, delay } = useMemo(
+    () => ({
+      duration: animatedOptions?.duration ?? DEFAULT_DURATION,
+      easing: animatedOptions?.easing ?? 'linear',
+      trailLength: Math.max(
+        0.01,
+        Math.min(1, animatedOptions?.trailLength ?? 1)
+      ),
+      delay: animatedOptions?.delay ?? 0,
+    }),
+    [
+      animatedOptions?.duration,
+      animatedOptions?.easing,
+      animatedOptions?.trailLength,
+      animatedOptions?.delay,
+    ]
+  );
   const polylinesRef = useRef<google.maps.Polyline[]>([]);
   const animationRef = useRef<number>(0);
+  const isPausedRef = useRef(false);
 
   const colors = useMemo(
     () =>
@@ -62,13 +94,25 @@ function PolylineImpl({
   const hasGradient = colors.length > 1;
 
   // Refs for animation loop access
-  const propsRef = useRef({ map, colors, strokeWidth, hasGradient });
+  const propsRef = useRef({
+    map,
+    colors,
+    strokeWidth,
+    hasGradient,
+    zIndex: resolvedZIndex,
+  });
   const [mapReady, setMapReady] = useState(!!map);
 
   useEffect(() => {
-    propsRef.current = { map, colors, strokeWidth, hasGradient };
+    propsRef.current = {
+      map,
+      colors,
+      strokeWidth,
+      hasGradient,
+      zIndex: resolvedZIndex,
+    };
     if (map && !mapReady) setMapReady(true);
-  }, [map, colors, strokeWidth, hasGradient, mapReady]);
+  }, [map, colors, strokeWidth, hasGradient, resolvedZIndex, mapReady]);
 
   const updatePath = useCallback((path: google.maps.LatLngLiteral[]) => {
     const {
@@ -76,11 +120,18 @@ function PolylineImpl({
       colors: currentColors,
       strokeWidth: currentStrokeWidth,
       hasGradient: currentHasGradient,
+      zIndex: currentZIndex,
     } = propsRef.current;
-    if (!currentMap || path.length < 2) return;
+    const existing = polylinesRef.current;
+    if (!currentMap) return;
+
+    if (path.length < 2) {
+      existing.forEach((p) => p.setMap(null));
+      existing.length = 0;
+      return;
+    }
 
     const neededSegments = currentHasGradient ? path.length - 1 : 1;
-    const existing = polylinesRef.current;
 
     // Update or create segments
     for (let i = 0; i < neededSegments; i++) {
@@ -100,6 +151,7 @@ function PolylineImpl({
             strokeColor: color,
             strokeWeight: currentStrokeWidth,
             strokeOpacity: 1,
+            zIndex: currentZIndex,
             map: currentMap,
           })
         );
@@ -122,6 +174,11 @@ function PolylineImpl({
     };
   }, []);
 
+  // Pause/resume animation during drag
+  useEffect(() => {
+    isPausedRef.current = isDragging;
+  }, [isDragging]);
+
   // Main effect
   useEffect(() => {
     if (!propsRef.current.map || coordinates.length === 0) return;
@@ -139,12 +196,65 @@ function PolylineImpl({
     }
 
     const totalPoints = fullPath.length;
-    const cycleDuration = ANIMATION_DURATION * 2;
+    const useTrailMode = trailLength < 1;
+    const renderMax = useTrailMode ? 1 : 2;
+    const cycleMax = useTrailMode ? 1 : 2.15;
+
+    let startTime: number | null = null;
+    let delayRemaining = delay;
+
+    let pausedAt: number | null = null;
 
     const animate = (time: number) => {
-      const progress = (time % cycleDuration) / ANIMATION_DURATION;
-      const startIdx = progress <= 1 ? 0 : (progress - 1) * totalPoints;
-      const endIdx = progress <= 1 ? progress * totalPoints : totalPoints;
+      if (isPausedRef.current) {
+        if (pausedAt === null) pausedAt = time;
+        animationRef.current = requestAnimationFrame(animate);
+        return;
+      }
+
+      if (pausedAt !== null) {
+        if (startTime !== null) {
+          startTime += time - pausedAt;
+        }
+        pausedAt = null;
+      }
+
+      if (startTime === null) {
+        startTime = time;
+      }
+
+      const elapsed = time - startTime;
+
+      if (delayRemaining > 0) {
+        if (elapsed < delayRemaining) {
+          animationRef.current = requestAnimationFrame(animate);
+          return;
+        }
+        startTime = time - (elapsed - delayRemaining);
+        delayRemaining = 0;
+      }
+
+      const rawProgress = (time - startTime) / duration;
+
+      if (rawProgress >= cycleMax) {
+        delayRemaining = delay;
+        startTime = time;
+      }
+
+      const clampedProgress = Math.min(rawProgress, renderMax);
+      const easedProgress =
+        applyEasing(clampedProgress / renderMax, easing) * renderMax;
+
+      let startIdx: number;
+      let endIdx: number;
+
+      if (useTrailMode) {
+        endIdx = easedProgress * totalPoints;
+        startIdx = Math.max(0, endIdx - trailLength * totalPoints);
+      } else {
+        startIdx = easedProgress <= 1 ? 0 : (easedProgress - 1) * totalPoints;
+        endIdx = easedProgress <= 1 ? easedProgress * totalPoints : totalPoints;
+      }
 
       const partialPath: google.maps.LatLngLiteral[] = [];
       const startFloor = Math.floor(startIdx);
@@ -194,13 +304,17 @@ function PolylineImpl({
     animationRef.current = requestAnimationFrame(animate);
 
     return () => cancelAnimationFrame(animationRef.current);
-  }, [coordinates, animated, hasGradient, updatePath, mapReady]);
+  }, [
+    coordinates,
+    animated,
+    duration,
+    easing,
+    trailLength,
+    delay,
+    hasGradient,
+    updatePath,
+    mapReady,
+  ]);
 
   return null;
-}
-
-export class Polyline extends Component<PolylineProps> {
-  render() {
-    return <PolylineImpl {...this.props} />;
-  }
-}
+};

package/src/components/index.ts

@@ -1,2 +1,16 @@
-export * from './Marker';
-export * from './Polyline';
+export { Marker } from './Marker';
+export type {
+  MarkerProps,
+  MarkerPressEvent,
+  MarkerDragEvent,
+} from './Marker.types';
+export { Polygon } from './Polygon';
+export type { PolygonProps } from './Polygon.types';
+export { Polyline } from './Polyline';
+export type {
+  PolylineProps,
+  PolylineEasing,
+  PolylineAnimatedOptions,
+} from './Polyline.types';
+export { GeoJson } from './GeoJson';
+export type { GeoJsonProps } from './GeoJson.types';

package/src/components/index.web.ts

@@ -1,4 +1,8 @@
 export { Marker } from './Marker.web';
+export { Polygon } from './Polygon.web';
 export { Polyline } from './Polyline.web';
-export type { MarkerProps } from './Marker';
-export type { PolylineProps } from './Polyline';
+export type { MarkerProps } from './Marker.types';
+export type { PolygonProps } from './Polygon.types';
+export type { PolylineProps } from './Polyline.types';
+export { GeoJson } from './GeoJson';
+export type { GeoJsonProps } from './GeoJson.types';

package/src/fabric/{LuggGoogleMapViewNativeComponent.ts → LuggMapViewNativeComponent.ts}

@@ -2,6 +2,7 @@ import { codegenNativeComponent, codegenNativeCommands } from 'react-native';
 import type { ViewProps, HostComponent } from 'react-native';
 import type {
   Double,
+  WithDefault,
   DirectEventHandler,
 } from 'react-native/Libraries/Types/CodegenTypes';
 
@@ -35,9 +36,32 @@ export interface CameraIdleEvent {
   gesture: boolean;
 }
 
+export interface PressEvent {
+  coordinate: {
+    latitude: Double;
+    longitude: Double;
+  };
+  point: {
+    x: Double;
+    y: Double;
+  };
+}
+
+export interface LongPressEvent {
+  coordinate: {
+    latitude: Double;
+    longitude: Double;
+  };
+  point: {
+    x: Double;
+    y: Double;
+  };
+}
+
 export interface ReadyEvent {}
 
 export interface NativeProps extends ViewProps {
+  provider?: WithDefault<'google' | 'apple', 'google'>;
   mapId?: string;
   initialCoordinate?: Coordinate;
   initialZoom?: Double;
@@ -47,8 +71,12 @@ export interface NativeProps extends ViewProps {
   scrollEnabled?: boolean;
   rotateEnabled?: boolean;
   pitchEnabled?: boolean;
-  padding?: EdgeInsets;
+  edgeInsets?: EdgeInsets;
   userLocationEnabled?: boolean;
+  userLocationButtonEnabled?: boolean;
+  theme?: WithDefault<'light' | 'dark' | 'system', 'system'>;
+  onMapPress?: DirectEventHandler<PressEvent>;
+  onMapLongPress?: DirectEventHandler<LongPressEvent>;
   onCameraMove?: DirectEventHandler<CameraMoveEvent>;
   onCameraIdle?: DirectEventHandler<CameraIdleEvent>;
   onReady?: DirectEventHandler<ReadyEvent>;
@@ -67,18 +95,26 @@ interface NativeCommands {
   fitCoordinates: (
     viewRef: React.ElementRef<ComponentType>,
     coordinates: Coordinate[],
-    paddingTop: Double,
-    paddingLeft: Double,
-    paddingBottom: Double,
-    paddingRight: Double,
+    edgeInsetsTop: Double,
+    edgeInsetsLeft: Double,
+    edgeInsetsBottom: Double,
+    edgeInsetsRight: Double,
+    duration: Double
+  ) => void;
+  setEdgeInsets: (
+    viewRef: React.ElementRef<ComponentType>,
+    top: Double,
+    left: Double,
+    bottom: Double,
+    right: Double,
     duration: Double
   ) => void;
 }
 
 export const Commands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['moveCamera', 'fitCoordinates'],
+  supportedCommands: ['moveCamera', 'fitCoordinates', 'setEdgeInsets'],
 });
 
 export default codegenNativeComponent<NativeProps>(
-  'LuggGoogleMapView'
+  'LuggMapView'
 ) as ComponentType;