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

package/src/components/Marker.web.tsx

@@ -1,32 +1,210 @@
-import React from 'react';
-import { AdvancedMarker } from '@vis.gl/react-google-maps';
-import type { MarkerProps } from './Marker';
-
-/**
- * Converts point to % anchor for web.
- * e.g. `0.5` to `-50%`
- */
+import React, {
+  isValidElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  AdvancedMarker,
+  InfoWindow,
+  useAdvancedMarkerRef,
+} from '@vis.gl/react-google-maps';
+import { useMapContext } from '../MapProvider.web';
+import type { MarkerProps } from './Marker.types';
+
+const CALLOUT_ARROW_HEIGHT = 12;
+const UNBUBBLED_CLASS = 'rnm-callout-unbubbled';
+const UNBUBBLED_STYLE_ID = 'rnm-callout-unbubbled-style';
+
+function injectUnbubbledStyle() {
+  if (document.getElementById(UNBUBBLED_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = UNBUBBLED_STYLE_ID;
+  style.textContent = `
+    .gm-style-iw-c:has(.${UNBUBBLED_CLASS}) {
+      background: transparent !important;
+      box-shadow: none !important;
+      padding: 0 !important;
+      border-radius: 0 !important;
+    }
+    .gm-style-iw-d:has(.${UNBUBBLED_CLASS}) {
+      overflow: visible !important;
+    }
+    .gm-style-iw-t:has(.${UNBUBBLED_CLASS})::after,
+    .gm-style-iw-t:has(.${UNBUBBLED_CLASS}) .gm-style-iw-tc {
+      display: none !important;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
 const toWebAnchor = (value: number) => `-${value * 100}%`;
 
-export class Marker extends React.Component<MarkerProps> {
-  render() {
-    const { coordinate, title, anchor, zIndex, children } = this.props;
+const createEvent = (
+  e: google.maps.MapMouseEvent,
+  coordinate: MarkerProps['coordinate']
+) =>
+  ({
+    nativeEvent: {
+      coordinate: {
+        latitude: e.latLng?.lat() ?? coordinate.latitude,
+        longitude: e.latLng?.lng() ?? coordinate.longitude,
+      },
+      point: {
+        x: (e.domEvent as MouseEvent)?.clientX ?? 0,
+        y: (e.domEvent as MouseEvent)?.clientY ?? 0,
+      },
+    },
+  } as any);
+
+export const Marker = ({
+  coordinate,
+  title,
+  description,
+  anchor,
+  zIndex,
+  rotate,
+  scale,
+  draggable,
+  onPress,
+  onDragStart,
+  onDragChange,
+  onDragEnd,
+  callout,
+  calloutOptions,
+  children,
+}: MarkerProps) => {
+  const { moveCamera, onCalloutClose, closeCallouts } = useMapContext();
+  const dragPositionRef = useRef<google.maps.LatLngLiteral | null>(null);
+  const [markerRef, markerElement] = useAdvancedMarkerRef();
+  const [infoWindowOpen, setInfoWindowOpen] = useState(false);
+  const calloutBubbled = calloutOptions?.bubbled ?? true;
+
+  const closeCallout = useCallback(() => setInfoWindowOpen(false), []);
+
+  useEffect(() => onCalloutClose(closeCallout), [onCalloutClose, closeCallout]);
+
+  useEffect(() => {
+    if (!calloutBubbled) injectUnbubbledStyle();
+  }, [calloutBubbled]);
+
+  const hasCallout = !!(callout || title);
 
-    const position = {
-      lat: coordinate.latitude,
-      lng: coordinate.longitude,
-    };
+  const calloutContent = callout
+    ? isValidElement(callout)
+      ? callout
+      : React.createElement(callout)
+    : title
+    ? React.createElement(
+        'div',
+        { style: { fontSize: 14 } },
+        React.createElement('div', { style: { fontWeight: 500 } }, title),
+        description ? React.createElement('div', null, description) : null
+      )
+    : null;
 
-    return (
+  const transforms: string[] = [];
+  if (rotate) transforms.push(`rotate(${rotate}deg)`);
+  if (scale && scale !== 1) transforms.push(`scale(${scale})`);
+
+  const handleClick = useCallback(
+    (e: google.maps.MapMouseEvent) => {
+      const pos = dragPositionRef.current;
+      const coord = pos
+        ? { latitude: pos.lat, longitude: pos.lng }
+        : coordinate;
+      moveCamera(coord);
+      onPress?.(createEvent(e, coordinate));
+      if (hasCallout) {
+        closeCallouts(closeCallout);
+        setInfoWindowOpen((prev) => !prev);
+      }
+    },
+    [moveCamera, onPress, coordinate, hasCallout, closeCallouts, closeCallout]
+  );
+
+  const handleDragStart = useCallback(
+    (e: google.maps.MapMouseEvent) => {
+      const latLng = e.latLng;
+      if (latLng) {
+        dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
+      }
+      onDragStart?.(createEvent(e, coordinate));
+    },
+    [onDragStart, coordinate]
+  );
+
+  const handleDrag = useCallback(
+    (e: google.maps.MapMouseEvent) => {
+      const latLng = e.latLng;
+      if (latLng) {
+        dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
+      }
+      onDragChange?.(createEvent(e, coordinate));
+    },
+    [onDragChange, coordinate]
+  );
+
+  const handleDragEnd = useCallback(
+    (e: google.maps.MapMouseEvent) => {
+      const latLng = e.latLng;
+      if (latLng) {
+        dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
+      }
+      onDragEnd?.(createEvent(e, coordinate));
+    },
+    [onDragEnd, coordinate]
+  );
+
+  useEffect(() => {
+    dragPositionRef.current = null;
+  }, [coordinate.latitude, coordinate.longitude]);
+
+  const latLngPosition = {
+    lat: coordinate.latitude,
+    lng: coordinate.longitude,
+  };
+
+  const position = dragPositionRef.current ?? latLngPosition;
+
+  return (
+    <>
       <AdvancedMarker
+        ref={markerRef}
         position={position}
         title={title}
         zIndex={zIndex}
         anchorLeft={anchor ? toWebAnchor(anchor.x) : undefined}
         anchorTop={anchor ? toWebAnchor(anchor.y) : undefined}
+        clickable
+        draggable={draggable}
+        onClick={handleClick}
+        onDragStart={handleDragStart}
+        onDrag={handleDrag}
+        onDragEnd={handleDragEnd}
+        style={
+          transforms.length > 0
+            ? { transform: transforms.join(' ') }
+            : undefined
+        }
       >
         {children}
       </AdvancedMarker>
-    );
-  }
-}
+      {calloutContent && infoWindowOpen && markerElement && (
+        <InfoWindow
+          anchor={markerElement}
+          pixelOffset={!calloutBubbled ? [0, CALLOUT_ARROW_HEIGHT] : undefined}
+          headerDisabled
+          onClose={() => setInfoWindowOpen(false)}
+        >
+          {!calloutBubbled ? (
+            <div className={UNBUBBLED_CLASS}>{calloutContent}</div>
+          ) : (
+            calloutContent
+          )}
+        </InfoWindow>
+      )}
+    </>
+  );
+};

package/src/components/Polygon.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import LuggPolygonViewNativeComponent from '../fabric/LuggPolygonViewNativeComponent';
+import type { PolygonProps } from './Polygon.types';
+
+export type { PolygonProps } from './Polygon.types';
+
+export class Polygon extends React.PureComponent<PolygonProps> {
+  private _cachedZIndex: number | undefined;
+  private _cachedStyle: any;
+
+  private getStyle(zIndex: number | undefined) {
+    if (zIndex == null) return styles.polygon;
+    if (zIndex !== this._cachedZIndex) {
+      this._cachedZIndex = zIndex;
+      this._cachedStyle = [{ zIndex }, styles.polygon];
+    }
+    return this._cachedStyle!;
+  }
+
+  render() {
+    const {
+      coordinates,
+      holes,
+      strokeColor,
+      strokeWidth,
+      fillColor,
+      zIndex,
+      onPress,
+    } = this.props;
+
+    return (
+      <LuggPolygonViewNativeComponent
+        style={this.getStyle(zIndex)}
+        coordinates={coordinates}
+        holes={holes}
+        strokeColor={strokeColor}
+        strokeWidth={strokeWidth}
+        fillColor={fillColor}
+        tappable={!!onPress}
+        onPolygonPress={onPress}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  polygon: {
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
+});

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;
+}