@lugg/maps 0.2.0-alpha.9 → 1.0.0-beta.1

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,17 @@
-export * from './Marker';
-export * from './Polyline';
+export { Marker } from './Marker';
+export type {
+  CalloutOptions,
+  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 { CalloutOptions, 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/LuggCalloutViewNativeComponent.ts

@@ -0,0 +1,20 @@
+import { codegenNativeComponent } from 'react-native';
+import type { ViewProps, HostComponent } from 'react-native';
+import type {
+  Double,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface Point {
+  x: Double;
+  y: Double;
+}
+
+export interface NativeProps extends ViewProps {
+  bubbled?: WithDefault<boolean, true>;
+  anchor?: Point;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'LuggCalloutView'
+) as HostComponent<NativeProps>;

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;

package/src/fabric/LuggMarkerViewNativeComponent.ts

@@ -1,6 +1,10 @@
 import { codegenNativeComponent } from 'react-native';
 import type { ViewProps, HostComponent } from 'react-native';
-import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+import type {
+  Double,
+  WithDefault,
+  DirectEventHandler,
+} from 'react-native/Libraries/Types/CodegenTypes';
 
 export interface Coordinate {
   latitude: Double;
@@ -18,6 +22,50 @@ export interface NativeProps extends ViewProps {
   title?: string;
   description?: string;
   anchor?: Point;
+  rotate?: WithDefault<Double, 0>;
+  scale?: WithDefault<Double, 1>;
+  rasterize?: WithDefault<boolean, true>;
+  draggable?: WithDefault<boolean, false>;
+  onMarkerPress?: DirectEventHandler<{
+    coordinate: {
+      latitude: Double;
+      longitude: Double;
+    };
+    point: {
+      x: Double;
+      y: Double;
+    };
+  }>;
+  onMarkerDragStart?: DirectEventHandler<{
+    coordinate: {
+      latitude: Double;
+      longitude: Double;
+    };
+    point: {
+      x: Double;
+      y: Double;
+    };
+  }>;
+  onMarkerDragChange?: DirectEventHandler<{
+    coordinate: {
+      latitude: Double;
+      longitude: Double;
+    };
+    point: {
+      x: Double;
+      y: Double;
+    };
+  }>;
+  onMarkerDragEnd?: DirectEventHandler<{
+    coordinate: {
+      latitude: Double;
+      longitude: Double;
+    };
+    point: {
+      x: Double;
+      y: Double;
+    };
+  }>;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/fabric/LuggPolygonViewNativeComponent.ts

@@ -0,0 +1,25 @@
+import { codegenNativeComponent } from 'react-native';
+import type { ViewProps, HostComponent, ColorValue } from 'react-native';
+import type {
+  Double,
+  DirectEventHandler,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface Coordinate {
+  latitude: Double;
+  longitude: Double;
+}
+
+export interface NativeProps extends ViewProps {
+  coordinates: ReadonlyArray<Coordinate>;
+  holes?: ReadonlyArray<ReadonlyArray<Coordinate>>;
+  strokeColor?: ColorValue;
+  strokeWidth?: Double;
+  fillColor?: ColorValue;
+  tappable?: boolean;
+  onPolygonPress?: DirectEventHandler<null>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'LuggPolygonView'
+) as HostComponent<NativeProps>;

package/src/fabric/LuggPolylineViewNativeComponent.ts

@@ -7,11 +7,19 @@ export interface Coordinate {
   longitude: Double;
 }
 
+export interface AnimatedOptions {
+  duration?: Double;
+  easing?: string;
+  trailLength?: Double;
+  delay?: Double;
+}
+
 export interface NativeProps extends ViewProps {
   coordinates: ReadonlyArray<Coordinate>;
   strokeColors?: ReadonlyArray<ColorValue>;
   strokeWidth?: Double;
   animated?: boolean;
+  animatedOptions?: AnimatedOptions;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/index.ts

@@ -1,17 +1,46 @@
 export { MapView } from './MapView';
 export { MapProvider } from './MapProvider';
 export type { MapProviderProps } from './MapProvider.types';
-export * from './components';
+export { Marker } from './components';
+export type {
+  CalloutOptions,
+  MarkerProps,
+  MarkerPressEvent,
+  MarkerDragEvent,
+} from './components';
+export { Polygon } from './components';
+export type { PolygonProps } from './components';
+export { Polyline } from './components';
+export type {
+  PolylineProps,
+  PolylineEasing,
+  PolylineAnimatedOptions,
+} from './components';
+export { GeoJson } from './components';
+export type { GeoJsonProps } from './components';
 export type {
   MapViewProps,
   MapViewRef,
   MoveCameraOptions,
   FitCoordinatesOptions,
+  SetEdgeInsetsOptions,
   CameraEventPayload,
+  MapCameraEvent,
+  MapPressEvent,
 } from './MapView.types';
 export type {
   MapProvider as MapProviderType,
+  MapTheme,
   Coordinate,
   Point,
   EdgeInsets,
+  PressEventPayload,
 } from './types';
+export type {
+  GeoJSON,
+  Feature,
+  FeatureCollection,
+  FeatureProperties,
+  Geometry,
+  Position,
+} from './components/GeoJson.types';

package/src/index.web.ts

@@ -1,7 +1,14 @@
 export { MapView } from './MapView.web';
 export { MapProvider } from './MapProvider.web';
 export type { MapProviderProps } from './MapProvider.types';
-export * from './components/index.web';
+export { Marker } from './components/index.web';
+export type { CalloutOptions, MarkerProps } from './components/index.web';
+export { Polygon } from './components/index.web';
+export type { PolygonProps } from './components/index.web';
+export { Polyline } from './components/index.web';
+export type { PolylineProps } from './components/index.web';
+export { GeoJson } from './components/index.web';
+export type { GeoJsonProps } from './components/index.web';
 export type {
   MapViewProps,
   MapViewRef,
@@ -15,3 +22,11 @@ export type {
   Point,
   EdgeInsets,
 } from './types';
+export type {
+  GeoJSON,
+  Feature,
+  FeatureCollection,
+  FeatureProperties,
+  Geometry,
+  Position,
+} from './components/GeoJson.types';

package/src/types.ts

@@ -28,3 +28,16 @@ export interface EdgeInsets {
   bottom: number;
   right: number;
 }
+
+/**
+ * Map theme
+ */
+export type MapTheme = 'light' | 'dark' | 'system';
+
+/**
+ * Press event payload
+ */
+export interface PressEventPayload {
+  coordinate: Coordinate;
+  point: Point;
+}