@lugg/maps 1.0.0-beta.4 → 1.0.0-beta.6

package/src/components/Marker.web.tsx

@@ -1,7 +1,10 @@
 import React, {
+  forwardRef,
   isValidElement,
+  memo,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useRef,
   useState,
 } from 'react';
@@ -11,7 +14,7 @@ import {
   useAdvancedMarkerRef,
 } from '@vis.gl/react-google-maps';
 import { useMapContext } from '../MapProvider.web';
-import type { MarkerProps } from './Marker.types';
+import type { MarkerProps, MarkerRef } from './Marker.types';
 
 const CALLOUT_ARROW_HEIGHT = 12;
 const UNBUBBLED_CLASS = 'rnm-callout-unbubbled';
@@ -58,153 +61,196 @@ const createEvent = (
     },
   } 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 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;
-
-  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
+export const Marker = memo(
+  forwardRef<MarkerRef, MarkerProps>(
+    (
+      {
+        coordinate,
+        title,
+        description,
+        anchor,
+        zIndex,
+        rotate,
+        scale,
+        centerOnPress = true,
+        draggable,
+        onPress,
+        onDragStart,
+        onDragChange,
+        onDragEnd,
+        callout,
+        calloutOptions,
+        children,
+      },
+      ref
+    ) => {
+      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 calloutOffset = calloutOptions?.offset;
+
+      const closeCallout = useCallback(() => setInfoWindowOpen(false), []);
+
+      useEffect(
+        () => onCalloutClose(closeCallout),
+        [onCalloutClose, closeCallout]
+      );
+
+      useEffect(() => {
+        if (!calloutBubbled) injectUnbubbledStyle();
+      }, [calloutBubbled]);
+
+      const hasCallout = !!(callout || title);
+
+      useImperativeHandle(
+        ref,
+        () => ({
+          showCallout() {
+            if (hasCallout) {
+              closeCallouts(closeCallout);
+              setInfoWindowOpen(true);
+            }
+          },
+          hideCallout() {
+            setInfoWindowOpen(false);
+          },
+        }),
+        [hasCallout, closeCallouts, closeCallout]
+      );
+
+      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;
+
+      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;
+          if (centerOnPress) moveCamera(coord);
+          onPress?.(createEvent(e, coordinate));
+          if (hasCallout) {
+            closeCallouts(closeCallout);
+            setInfoWindowOpen((prev) => !prev);
+          }
+        },
+        [
+          centerOnPress,
+          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={draggable ? handleDragStart : undefined}
+            onDrag={draggable ? handleDrag : undefined}
+            onDragEnd={draggable ? handleDragEnd : undefined}
+            style={
+              transforms.length > 0
+                ? { transform: transforms.join(' ') }
+                : undefined
+            }
+          >
+            {children}
+          </AdvancedMarker>
+          {calloutContent && infoWindowOpen && markerElement && (
+            <InfoWindow
+              anchor={markerElement}
+              pixelOffset={
+                !calloutBubbled
+                  ? [
+                      calloutOffset?.x ?? 0,
+                      CALLOUT_ARROW_HEIGHT + (calloutOffset?.y ?? 0),
+                    ]
+                  : undefined
+              }
+              headerDisabled
+              onClose={() => setInfoWindowOpen(false)}
+            >
+              {!calloutBubbled ? (
+                <div className={UNBUBBLED_CLASS}>{calloutContent}</div>
+              ) : (
+                calloutContent
+              )}
+            </InfoWindow>
           )}
-        </InfoWindow>
-      )}
-    </>
-  );
-};
+        </>
+      );
+    }
+  )
+);

package/src/components/Polygon.web.tsx

@@ -1,104 +1,108 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { memo, 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[]>([]);
+export const Polygon = memo(
+  ({
+    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]);
+    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;
-    };
-  }, []);
+    // 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;
+    // Sync listeners
+    useEffect(() => {
+      const polygon = polygonRef.current;
+      if (!polygon) return;
 
-    listenersRef.current.forEach((l) => l.remove());
-    listenersRef.current = [];
+      listenersRef.current.forEach((l) => l.remove());
+      listenersRef.current = [];
 
-    if (onPress) {
-      listenersRef.current.push(polygon.addListener('click', handleClick));
-    }
-    polygon.set('clickable', !!onPress);
-  }, [onPress, handleClick]);
+      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;
-    }
+    // 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 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 }))
-      ),
-    ];
+      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 (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));
+        if (onPress) {
+          listenersRef.current.push(polygon.addListener('click', handleClick));
+        }
       }
-    }
-  }, [
-    map,
-    coordinates,
-    holes,
-    strokeColor,
-    strokeWidth,
-    fillColor,
-    zIndex,
-    onPress,
-    handleClick,
-  ]);
+    }, [
+      map,
+      coordinates,
+      holes,
+      strokeColor,
+      strokeWidth,
+      fillColor,
+      zIndex,
+      onPress,
+      handleClick,
+    ]);
 
-  return null;
-};
+    return null;
+  }
+);