@lugg/maps 0.2.0-alpha.26 → 0.2.0-alpha.28

package/src/MapView.web.tsx

@@ -25,9 +25,10 @@ import type {
   MapViewRef,
   MoveCameraOptions,
   FitCoordinatesOptions,
+  SetEdgeInsetsOptions,
   CameraEventPayload,
 } from './MapView.types';
-import type { Coordinate } from './types';
+import type { Coordinate, EdgeInsets } from './types';
 
 const createSyntheticEvent = <T,>(nativeEvent: T): NativeSyntheticEvent<T> =>
   ({
@@ -99,7 +100,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
   ref
 ) {
   const {
-    mapId = google.maps.Map.DEMO_MAP_ID,
+    mapId = 'DEMO_MAP_ID',
     initialCoordinate,
     initialZoom = 10,
     minZoom,
@@ -126,15 +127,9 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
   const prevEdgeInsets = useRef(edgeInsets);
 
   const offsetCenter = useCallback(
-    (
-      coord: Coordinate,
-      zoom: number,
-      edgeInsetsOverride?: typeof edgeInsets,
-      reverse = false
-    ) => {
-      const p = edgeInsetsOverride ?? edgeInsets;
-      const div = map?.getDiv();
-      if (!p || !div) {
+    (coord: Coordinate, zoom: number, insets?: EdgeInsets, reverse = false) => {
+      const p = insets ?? prevEdgeInsets.current;
+      if (!p) {
         return { lat: coord.latitude, lng: coord.longitude };
       }
 
@@ -157,7 +152,41 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
 
       return { lat, lng };
     },
-    [map, edgeInsets]
+    []
+  );
+
+  const applyEdgeInsets = useCallback(
+    (newEdgeInsets: EdgeInsets, duration?: number) => {
+      if (!map) return;
+
+      const prev = prevEdgeInsets.current;
+      const center = map.getCenter();
+      const zoom = map.getZoom() ?? initialZoom;
+
+      if (center) {
+        const logicalCenter = offsetCenter(
+          { latitude: center.lat(), longitude: center.lng() },
+          zoom,
+          prev,
+          true
+        );
+        const newCenter = offsetCenter(
+          { latitude: logicalCenter.lat, longitude: logicalCenter.lng },
+          zoom,
+          newEdgeInsets,
+          false
+        );
+
+        if (duration === 0) {
+          map.moveCamera({ center: newCenter, zoom });
+        } else {
+          map.panTo(newCenter);
+        }
+      }
+
+      prevEdgeInsets.current = newEdgeInsets;
+    },
+    [map, initialZoom, offsetCenter]
   );
 
   useImperativeHandle(
@@ -190,7 +219,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
         const first = coordinates[0];
         if (!map || !first) return;
 
-        const { edgeInsets: fitEdgeInsets, duration = -1 } = options ?? {};
+        const { padding: fitPadding, duration = -1 } = options ?? {};
 
         if (coordinates.length === 1) {
           this.moveCamera(first, { zoom: initialZoom, duration });
@@ -202,15 +231,20 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
           bounds.extend({ lat: coord.latitude, lng: coord.longitude });
         });
 
+        const ei = prevEdgeInsets.current;
         map.fitBounds(bounds, {
-          top: (edgeInsets?.top ?? 0) + (fitEdgeInsets?.top ?? 0),
-          left: (edgeInsets?.left ?? 0) + (fitEdgeInsets?.left ?? 0),
-          bottom: (edgeInsets?.bottom ?? 0) + (fitEdgeInsets?.bottom ?? 0),
-          right: (edgeInsets?.right ?? 0) + (fitEdgeInsets?.right ?? 0),
+          top: (ei?.top ?? 0) + (fitPadding?.top ?? 0),
+          left: (ei?.left ?? 0) + (fitPadding?.left ?? 0),
+          bottom: (ei?.bottom ?? 0) + (fitPadding?.bottom ?? 0),
+          right: (ei?.right ?? 0) + (fitPadding?.right ?? 0),
         });
       },
+
+      setEdgeInsets(newEdgeInsets: EdgeInsets, options?: SetEdgeInsetsOptions) {
+        applyEdgeInsets(newEdgeInsets, options?.duration);
+      },
     }),
-    [map, initialZoom, edgeInsets, offsetCenter]
+    [map, initialZoom, offsetCenter, applyEdgeInsets]
   );
 
   useEffect(() => {
@@ -231,26 +265,9 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
       prev?.right !== edgeInsets.right;
 
     if (changed) {
-      const center = map.getCenter();
-      const zoom = map.getZoom() ?? initialZoom;
-      if (center) {
-        const logicalCenter = offsetCenter(
-          { latitude: center.lat(), longitude: center.lng() },
-          zoom,
-          prev,
-          true
-        );
-        const newCenter = offsetCenter(
-          { latitude: logicalCenter.lat, longitude: logicalCenter.lng },
-          zoom,
-          edgeInsets,
-          false
-        );
-        map.panTo(newCenter);
-      }
-      prevEdgeInsets.current = edgeInsets;
+      applyEdgeInsets(edgeInsets);
     }
-  }, [map, edgeInsets, initialZoom, offsetCenter]);
+  }, [map, edgeInsets, applyEdgeInsets]);
 
   const handleDragStart = () => {
     setIsDragging(true);

package/src/components/Marker.tsx

@@ -52,7 +52,19 @@ export interface MarkerProps {
   children?: ReactNode;
 }
 
-export class Marker extends React.Component<MarkerProps> {
+export class Marker extends React.PureComponent<MarkerProps> {
+  private getStyle(zIndex: number | undefined) {
+    if (zIndex == null) return styles.marker;
+    if (zIndex !== this._cachedZIndex) {
+      this._cachedZIndex = zIndex;
+      this._cachedStyle = [{ zIndex }, styles.marker];
+    }
+    return this._cachedStyle!;
+  }
+
+  private _cachedZIndex: number | undefined;
+  private _cachedStyle: any;
+
   render() {
     const {
       name,
@@ -69,7 +81,7 @@ export class Marker extends React.Component<MarkerProps> {
 
     return (
       <LuggMarkerViewNativeComponent
-        style={[{ zIndex }, styles.marker]}
+        style={this.getStyle(zIndex)}
         name={name}
         coordinate={coordinate}
         title={title}

package/src/components/Polyline.tsx

@@ -57,7 +57,19 @@ export interface PolylineProps {
   zIndex?: number;
 }
 
-export class Polyline extends React.Component<PolylineProps> {
+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;
+
   render() {
     const {
       coordinates,
@@ -70,7 +82,7 @@ export class Polyline extends React.Component<PolylineProps> {
 
     return (
       <LuggPolylineViewNativeComponent
-        style={[{ zIndex }, styles.polyline]}
+        style={this.getStyle(zIndex)}
         coordinates={coordinates}
         strokeColors={strokeColors}
         strokeWidth={strokeWidth}

package/src/components/index.ts

@@ -1,2 +1,8 @@
-export * from './Marker';
-export * from './Polyline';
+export { Marker } from './Marker';
+export type { MarkerProps } from './Marker';
+export { Polyline } from './Polyline';
+export type {
+  PolylineProps,
+  PolylineEasing,
+  PolylineAnimatedOptions,
+} from './Polyline';

package/src/fabric/LuggMapViewNativeComponent.ts

@@ -77,10 +77,18 @@ interface NativeCommands {
     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>(

package/src/index.ts

@@ -1,12 +1,20 @@
 export { MapView } from './MapView';
 export { MapProvider } from './MapProvider';
 export type { MapProviderProps } from './MapProvider.types';
-export * from './components';
+export { Marker } from './components';
+export type { MarkerProps } from './components';
+export { Polyline } from './components';
+export type {
+  PolylineProps,
+  PolylineEasing,
+  PolylineAnimatedOptions,
+} from './components';
 export type {
   MapViewProps,
   MapViewRef,
   MoveCameraOptions,
   FitCoordinatesOptions,
+  SetEdgeInsetsOptions,
   CameraEventPayload,
 } from './MapView.types';
 export type {

package/src/index.web.ts

@@ -1,7 +1,10 @@
 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 { MarkerProps } from './components/index.web';
+export { Polyline } from './components/index.web';
+export type { PolylineProps } from './components/index.web';
 export type {
   MapViewProps,
   MapViewRef,