@lugg/maps 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/Polyline.web.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useMapContext } from '../MapProvider.web';
 import type { PolylineProps, PolylineEasing } from './Polyline.types';
 
@@ -51,270 +51,270 @@ const getGradientColor = (colors: string[], position: number): string => {
   return interpolateColor(colors[index]!, colors[index + 1]!, t);
 };
 
-export const Polyline = ({
-  coordinates,
-  strokeColors,
-  strokeWidth = 1,
-  animated,
-  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(
-    () =>
-      strokeColors && strokeColors.length > 0
-        ? (strokeColors as string[])
-        : ['#000000'],
-    [strokeColors]
-  );
-
-  const hasGradient = colors.length > 1;
-
-  // Refs for animation loop access
-  const propsRef = useRef({
-    map,
-    colors,
-    strokeWidth,
-    hasGradient,
-    zIndex: resolvedZIndex,
-  });
-  const [mapReady, setMapReady] = useState(!!map);
-
-  useEffect(() => {
-    propsRef.current = {
+export const Polyline = memo(
+  ({
+    coordinates,
+    strokeColors,
+    strokeWidth = 1,
+    animated,
+    animatedOptions,
+    zIndex,
+  }: PolylineProps) => {
+    const resolvedZIndex = zIndex ?? (animated ? 1 : 0);
+    const { map, isDraggingRef } = 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 colors = useMemo(
+      () =>
+        strokeColors && strokeColors.length > 0
+          ? (strokeColors as string[])
+          : ['#000000'],
+      [strokeColors]
+    );
+
+    const hasGradient = colors.length > 1;
+
+    // Refs for animation loop access
+    const propsRef = useRef({
       map,
       colors,
       strokeWidth,
       hasGradient,
       zIndex: resolvedZIndex,
-    };
-    if (map && !mapReady) setMapReady(true);
-  }, [map, colors, strokeWidth, hasGradient, resolvedZIndex, mapReady]);
-
-  const updatePath = useCallback((path: google.maps.LatLngLiteral[]) => {
-    const {
-      map: currentMap,
-      colors: currentColors,
-      strokeWidth: currentStrokeWidth,
-      hasGradient: currentHasGradient,
-      zIndex: currentZIndex,
-    } = propsRef.current;
-    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;
-
-    // Update or create segments
-    for (let i = 0; i < neededSegments; i++) {
-      const segmentPath = currentHasGradient ? [path[i]!, path[i + 1]!] : path;
-      const color = currentHasGradient
-        ? getGradientColor(currentColors, i / (path.length - 1))
-        : currentColors[0]!;
-
-      const segment = existing[i];
-      if (segment) {
-        segment.setPath(segmentPath);
-        segment.setOptions({ strokeColor: color });
-      } else {
-        existing.push(
-          new google.maps.Polyline({
-            path: segmentPath,
-            strokeColor: color,
-            strokeWeight: currentStrokeWidth,
-            strokeOpacity: 1,
-            zIndex: currentZIndex,
-            map: currentMap,
-          })
-        );
+    });
+    const [mapReady, setMapReady] = useState(!!map);
+
+    useEffect(() => {
+      propsRef.current = {
+        map,
+        colors,
+        strokeWidth,
+        hasGradient,
+        zIndex: resolvedZIndex,
+      };
+      if (map && !mapReady) setMapReady(true);
+    }, [map, colors, strokeWidth, hasGradient, resolvedZIndex, mapReady]);
+
+    const updatePath = useCallback((path: google.maps.LatLngLiteral[]) => {
+      const {
+        map: currentMap,
+        colors: currentColors,
+        strokeWidth: currentStrokeWidth,
+        hasGradient: currentHasGradient,
+        zIndex: currentZIndex,
+      } = propsRef.current;
+      const existing = polylinesRef.current;
+      if (!currentMap) return;
+
+      if (path.length < 2) {
+        existing.forEach((p) => p.setMap(null));
+        existing.length = 0;
+        return;
       }
-    }
-
-    // Remove extra segments
-    for (let i = neededSegments; i < existing.length; i++) {
-      existing[i]?.setMap(null);
-    }
-    existing.length = neededSegments;
-  }, []);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    const polylines = polylinesRef.current;
-    return () => {
-      cancelAnimationFrame(animationRef.current);
-      polylines.forEach((p) => p.setMap(null));
-    };
-  }, []);
-
-  // Pause/resume animation during drag
-  useEffect(() => {
-    isPausedRef.current = isDragging;
-  }, [isDragging]);
 
-  // Main effect
-  useEffect(() => {
-    if (!propsRef.current.map || coordinates.length === 0) return;
+      const neededSegments = currentHasGradient ? path.length - 1 : 1;
+
+      // Update or create segments
+      for (let i = 0; i < neededSegments; i++) {
+        const segmentPath = currentHasGradient
+          ? [path[i]!, path[i + 1]!]
+          : path;
+        const color = currentHasGradient
+          ? getGradientColor(currentColors, i / (path.length - 1))
+          : currentColors[0]!;
+
+        const segment = existing[i];
+        if (segment) {
+          segment.setPath(segmentPath);
+          segment.setOptions({ strokeColor: color });
+        } else {
+          existing.push(
+            new google.maps.Polyline({
+              path: segmentPath,
+              strokeColor: color,
+              strokeWeight: currentStrokeWidth,
+              strokeOpacity: 1,
+              zIndex: currentZIndex,
+              map: currentMap,
+            })
+          );
+        }
+      }
 
-    const fullPath = coordinates.map((c) => ({
-      lat: c.latitude,
-      lng: c.longitude,
-    }));
+      // Remove extra segments
+      for (let i = neededSegments; i < existing.length; i++) {
+        existing[i]?.setMap(null);
+      }
+      existing.length = neededSegments;
+    }, []);
+
+    // Cleanup on unmount
+    useEffect(() => {
+      const polylines = polylinesRef.current;
+      return () => {
+        cancelAnimationFrame(animationRef.current);
+        polylines.forEach((p) => p.setMap(null));
+      };
+    }, []);
+
+    // Main effect
+    useEffect(() => {
+      if (!propsRef.current.map || coordinates.length === 0) return;
+
+      const fullPath = coordinates.map((c) => ({
+        lat: c.latitude,
+        lng: c.longitude,
+      }));
 
-    cancelAnimationFrame(animationRef.current);
+      cancelAnimationFrame(animationRef.current);
 
-    if (!animated) {
-      updatePath(fullPath);
-      return;
-    }
+      if (!animated) {
+        updatePath(fullPath);
+        return;
+      }
 
-    const totalPoints = fullPath.length;
-    const useTrailMode = trailLength < 1;
-    const renderMax = useTrailMode ? 1 : 2;
-    const cycleMax = useTrailMode ? 1 : 2.15;
+      const totalPoints = fullPath.length;
+      const useTrailMode = trailLength < 1;
+      const renderMax = useTrailMode ? 1 : 2;
+      const cycleMax = useTrailMode ? 1 : 2.15;
 
-    let startTime: number | null = null;
-    let delayRemaining = delay;
+      let startTime: number | null = null;
+      let delayRemaining = delay;
 
-    let pausedAt: number | null = null;
+      let pausedAt: number | null = null;
 
-    const animate = (time: number) => {
-      if (isPausedRef.current) {
-        if (pausedAt === null) pausedAt = time;
-        animationRef.current = requestAnimationFrame(animate);
-        return;
-      }
+      const animate = (time: number) => {
+        if (isDraggingRef.current) {
+          if (pausedAt === null) pausedAt = time;
+          animationRef.current = requestAnimationFrame(animate);
+          return;
+        }
 
-      if (pausedAt !== null) {
-        if (startTime !== null) {
-          startTime += time - pausedAt;
+        if (pausedAt !== null) {
+          if (startTime !== null) {
+            startTime += time - pausedAt;
+          }
+          pausedAt = null;
         }
-        pausedAt = null;
-      }
 
-      if (startTime === null) {
-        startTime = time;
-      }
+        if (startTime === null) {
+          startTime = time;
+        }
 
-      const elapsed = time - startTime;
+        const elapsed = time - startTime;
 
-      if (delayRemaining > 0) {
-        if (elapsed < delayRemaining) {
-          animationRef.current = requestAnimationFrame(animate);
-          return;
+        if (delayRemaining > 0) {
+          if (elapsed < delayRemaining) {
+            animationRef.current = requestAnimationFrame(animate);
+            return;
+          }
+          startTime = time - (elapsed - delayRemaining);
+          delayRemaining = 0;
         }
-        startTime = time - (elapsed - delayRemaining);
-        delayRemaining = 0;
-      }
 
-      const rawProgress = (time - startTime) / duration;
+        const rawProgress = (time - startTime) / duration;
 
-      if (rawProgress >= cycleMax) {
-        delayRemaining = delay;
-        startTime = time;
-      }
+        if (rawProgress >= cycleMax) {
+          delayRemaining = delay;
+          startTime = time;
+        }
 
-      const clampedProgress = Math.min(rawProgress, renderMax);
-      const easedProgress =
-        applyEasing(clampedProgress / renderMax, easing) * renderMax;
+        const clampedProgress = Math.min(rawProgress, renderMax);
+        const easedProgress =
+          applyEasing(clampedProgress / renderMax, easing) * renderMax;
 
-      let startIdx: number;
-      let endIdx: number;
+        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;
-      }
+        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);
-      const endFloor = Math.floor(endIdx);
-
-      // Start point (interpolated)
-      if (startFloor < totalPoints) {
-        const frac = startIdx - startFloor;
-        const from = fullPath[startFloor]!;
-        const to = fullPath[Math.min(startFloor + 1, totalPoints - 1)]!;
-        partialPath.push(
-          frac > 0
-            ? {
-                lat: from.lat + (to.lat - from.lat) * frac,
-                lng: from.lng + (to.lng - from.lng) * frac,
-              }
-            : from
-        );
-      }
+        const partialPath: google.maps.LatLngLiteral[] = [];
+        const startFloor = Math.floor(startIdx);
+        const endFloor = Math.floor(endIdx);
+
+        // Start point (interpolated)
+        if (startFloor < totalPoints) {
+          const frac = startIdx - startFloor;
+          const from = fullPath[startFloor]!;
+          const to = fullPath[Math.min(startFloor + 1, totalPoints - 1)]!;
+          partialPath.push(
+            frac > 0
+              ? {
+                  lat: from.lat + (to.lat - from.lat) * frac,
+                  lng: from.lng + (to.lng - from.lng) * frac,
+                }
+              : from
+          );
+        }
 
-      // Middle points
-      for (
-        let i = startFloor + 1;
-        i <= Math.min(endFloor, totalPoints - 1);
-        i++
-      ) {
-        partialPath.push(fullPath[i]!);
-      }
+        // Middle points
+        for (
+          let i = startFloor + 1;
+          i <= Math.min(endFloor, totalPoints - 1);
+          i++
+        ) {
+          partialPath.push(fullPath[i]!);
+        }
 
-      // End point (interpolated)
-      if (endFloor < totalPoints - 1) {
-        const frac = endIdx - endFloor;
-        const from = fullPath[endFloor]!;
-        const to = fullPath[endFloor + 1]!;
-        if (frac > 0) {
-          partialPath.push({
-            lat: from.lat + (to.lat - from.lat) * frac,
-            lng: from.lng + (to.lng - from.lng) * frac,
-          });
+        // End point (interpolated)
+        if (endFloor < totalPoints - 1) {
+          const frac = endIdx - endFloor;
+          const from = fullPath[endFloor]!;
+          const to = fullPath[endFloor + 1]!;
+          if (frac > 0) {
+            partialPath.push({
+              lat: from.lat + (to.lat - from.lat) * frac,
+              lng: from.lng + (to.lng - from.lng) * frac,
+            });
+          }
         }
-      }
 
-      updatePath(partialPath);
+        updatePath(partialPath);
+        animationRef.current = requestAnimationFrame(animate);
+      };
+
       animationRef.current = requestAnimationFrame(animate);
-    };
 
-    animationRef.current = requestAnimationFrame(animate);
+      return () => cancelAnimationFrame(animationRef.current);
+    }, [
+      coordinates,
+      animated,
+      duration,
+      easing,
+      trailLength,
+      delay,
+      hasGradient,
+      updatePath,
+      mapReady,
+      isDraggingRef,
+    ]);
 
-    return () => cancelAnimationFrame(animationRef.current);
-  }, [
-    coordinates,
-    animated,
-    duration,
-    easing,
-    trailLength,
-    delay,
-    hasGradient,
-    updatePath,
-    mapReady,
-  ]);
-
-  return null;
-};
+    return null;
+  }
+);

package/src/components/TileOverlay.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import LuggTileOverlayViewNativeComponent from '../fabric/LuggTileOverlayViewNativeComponent';
+import type { TileOverlayProps } from './TileOverlay.types';
+
+export type { TileOverlayProps } from './TileOverlay.types';
+
+export class TileOverlay extends React.PureComponent<TileOverlayProps> {
+  private _cachedZIndex: number | undefined;
+  private _cachedStyle: any;
+
+  private getStyle(zIndex: number | undefined) {
+    if (zIndex == null) return styles.overlay;
+    if (zIndex !== this._cachedZIndex) {
+      this._cachedZIndex = zIndex;
+      this._cachedStyle = [{ zIndex }, styles.overlay];
+    }
+    return this._cachedStyle!;
+  }
+
+  render() {
+    const { urlTemplate, tileSize, opacity, bounds, zIndex, onPress } =
+      this.props;
+
+    return (
+      <LuggTileOverlayViewNativeComponent
+        style={this.getStyle(zIndex)}
+        urlTemplate={urlTemplate}
+        tileSize={tileSize}
+        opacity={opacity}
+        bounds={bounds}
+        tappable={!!onPress}
+        onTileOverlayPress={onPress}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
+});

package/src/components/TileOverlay.types.ts

@@ -0,0 +1,37 @@
+import type { Coordinate } from '../types';
+
+export interface TileOverlayBounds {
+  northeast: Coordinate;
+  southwest: Coordinate;
+}
+
+export interface TileOverlayProps {
+  /**
+   * URL template for tile images.
+   * Use `{x}`, `{y}`, `{z}` placeholders for tile coordinates and zoom level.
+   * @example "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+   */
+  urlTemplate: string;
+  /**
+   * Size of each tile in pixels
+   * @default 256
+   */
+  tileSize?: number;
+  /**
+   * Opacity of the tile overlay (0-1)
+   */
+  opacity?: number;
+  /**
+   * Restrict tiles to a geographic region.
+   * Tiles outside these bounds will not be loaded.
+   */
+  bounds?: TileOverlayBounds;
+  /**
+   * Z-index for layering
+   */
+  zIndex?: number;
+  /**
+   * Called when the tile overlay is tapped
+   */
+  onPress?: () => void;
+}