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

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,44 @@
 export { MapView } from './MapView';
 export { MapProvider } from './MapProvider';
 export type { MapProviderProps } from './MapProvider.types';
-export * from './components';
+export { Marker } from './components';
+export type {
+  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,
+  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 { 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,10 @@ export type {
   Point,
   EdgeInsets,
 } from './types';
+export type {
+  GeoJSON,
+  Feature,
+  FeatureCollection,
+  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;
+}

package/android/src/main/java/com/luggmaps/LuggGoogleMapView.kt

@@ -1,511 +0,0 @@
-package com.luggmaps
-
-import android.annotation.SuppressLint
-import android.view.View
-import android.view.ViewGroup
-import com.facebook.react.uimanager.PixelUtil.dpToPx
-import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.util.RNLog
-import com.facebook.react.views.view.ReactViewGroup
-import com.google.android.gms.maps.CameraUpdateFactory
-import com.google.android.gms.maps.GoogleMap
-import com.google.android.gms.maps.GoogleMapOptions
-import com.google.android.gms.maps.MapView
-import com.google.android.gms.maps.OnMapReadyCallback
-import com.google.android.gms.maps.model.AdvancedMarker
-import com.google.android.gms.maps.model.AdvancedMarkerOptions
-import com.google.android.gms.maps.model.AdvancedMarkerOptions.CollisionBehavior
-import com.google.android.gms.maps.model.LatLng
-import com.google.android.gms.maps.model.PolylineOptions
-import com.luggmaps.core.PolylineAnimator
-
-interface LuggGoogleMapViewEventDelegate {
-  fun onCameraMove(
-    view: LuggGoogleMapView,
-    latitude: Double,
-    longitude: Double,
-    zoom: Float,
-    gesture: Boolean
-  )
-  fun onCameraIdle(
-    view: LuggGoogleMapView,
-    latitude: Double,
-    longitude: Double,
-    zoom: Float,
-    gesture: Boolean
-  )
-  fun onReady(view: LuggGoogleMapView)
-}
-
-@SuppressLint("ViewConstructor")
-class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
-  ReactViewGroup(reactContext),
-  OnMapReadyCallback,
-  LuggMarkerViewDelegate,
-  LuggPolylineViewDelegate,
-  GoogleMap.OnCameraMoveStartedListener,
-  GoogleMap.OnCameraMoveListener,
-  GoogleMap.OnCameraIdleListener {
-
-  var eventDelegate: LuggGoogleMapViewEventDelegate? = null
-  private var mapView: MapView? = null
-  private var mapWrapperView: LuggMapWrapperView? = null
-  private var googleMap: GoogleMap? = null
-  private var isMapReady = false
-  private var isDragging = false
-  private var mapId: String = DEMO_MAP_ID
-  private val pendingMarkerViews = mutableListOf<LuggMarkerView>()
-  private val pendingPolylineViews = mutableListOf<LuggPolylineView>()
-  private val polylineAnimators = mutableMapOf<LuggPolylineView, PolylineAnimator>()
-
-  // Initial camera settings
-  private var initialLatitude: Double = 37.78
-  private var initialLongitude: Double = -122.43
-  private var initialZoom: Float = 14f
-
-  // UI settings
-  private var zoomEnabled: Boolean = true
-  private var scrollEnabled: Boolean = true
-  private var rotateEnabled: Boolean = true
-  private var pitchEnabled: Boolean = true
-  private var userLocationEnabled: Boolean = false
-
-  // Zoom limits
-  private var minZoom: Float? = null
-  private var maxZoom: Float? = null
-
-  // Padding
-  private var paddingTop: Int = 0
-  private var paddingLeft: Int = 0
-  private var paddingBottom: Int = 0
-  private var paddingRight: Int = 0
-
-  // region View Lifecycle
-
-  override fun addView(child: View?, index: Int) {
-    super.addView(child, index)
-    when (child) {
-      is LuggMapWrapperView -> mapWrapperView = child
-
-      is LuggMarkerView -> {
-        child.delegate = this
-        syncMarkerView(child)
-      }
-
-      is LuggPolylineView -> {
-        child.delegate = this
-        syncPolylineView(child)
-      }
-    }
-  }
-
-  override fun removeViewAt(index: Int) {
-    val view = getChildAt(index)
-    if (view is LuggMarkerView) {
-      view.marker?.remove()
-      view.marker = null
-    } else if (view is LuggPolylineView) {
-      polylineAnimators[view]?.destroy()
-      polylineAnimators.remove(view)
-      view.polyline?.remove()
-      view.polyline = null
-    }
-    super.removeViewAt(index)
-  }
-
-  override fun onAttachedToWindow() {
-    super.onAttachedToWindow()
-    if (mapView == null && mapWrapperView != null) {
-      initializeMap()
-    }
-  }
-
-  fun onDropViewInstance() {
-    pendingMarkerViews.clear()
-    pendingPolylineViews.clear()
-    polylineAnimators.values.forEach { it.destroy() }
-    polylineAnimators.clear()
-    googleMap?.clear()
-    googleMap = null
-    isMapReady = false
-    mapView?.onPause()
-    mapView?.onDestroy()
-    mapView = null
-    mapWrapperView = null
-  }
-
-  // endregion
-
-  // region Map Initialization
-
-  private fun initializeMap() {
-    if (mapView != null || mapWrapperView == null) return
-
-    val options = GoogleMapOptions().mapId(mapId)
-    mapView = MapView(context, options).also { view ->
-      view.onCreate(null)
-      view.onResume()
-      view.getMapAsync(this)
-      mapWrapperView?.addView(
-        view,
-        LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
-      )
-    }
-  }
-
-  override fun onMapReady(map: GoogleMap) {
-    googleMap = map
-    isMapReady = true
-
-    val position = LatLng(initialLatitude, initialLongitude)
-    map.moveCamera(CameraUpdateFactory.newLatLngZoom(position, initialZoom))
-
-    map.setOnCameraMoveStartedListener(this)
-    map.setOnCameraMoveListener(this)
-    map.setOnCameraIdleListener(this)
-
-    applyUiSettings()
-    applyZoomLimits()
-    applyPadding()
-    applyUserLocation()
-    processPendingMarkers()
-    processPendingPolylines()
-
-    eventDelegate?.onReady(this)
-  }
-
-  override fun onCameraMoveStarted(reason: Int) {
-    isDragging = reason == GoogleMap.OnCameraMoveStartedListener.REASON_GESTURE
-  }
-
-  override fun onCameraMove() {
-    val map = googleMap ?: return
-    val position = map.cameraPosition
-    eventDelegate?.onCameraMove(this, position.target.latitude, position.target.longitude, position.zoom, isDragging)
-  }
-
-  override fun onCameraIdle() {
-    val map = googleMap ?: return
-    val position = map.cameraPosition
-    eventDelegate?.onCameraIdle(this, position.target.latitude, position.target.longitude, position.zoom, isDragging)
-    isDragging = false
-  }
-
-  private fun applyUiSettings() {
-    googleMap?.uiSettings?.apply {
-      isZoomGesturesEnabled = zoomEnabled
-      isScrollGesturesEnabled = scrollEnabled
-      isRotateGesturesEnabled = rotateEnabled
-      isTiltGesturesEnabled = pitchEnabled
-    }
-  }
-
-  private fun applyZoomLimits() {
-    googleMap?.apply {
-      minZoom?.let { setMinZoomPreference(it) }
-      maxZoom?.let { setMaxZoomPreference(it) }
-    }
-  }
-
-  private fun applyPadding() {
-    googleMap?.setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom)
-  }
-
-  @SuppressLint("MissingPermission")
-  private fun applyUserLocation() {
-    val hasPermission =
-      context.checkSelfPermission(
-        android.Manifest.permission.ACCESS_FINE_LOCATION
-      ) == android.content.pm.PackageManager.PERMISSION_GRANTED ||
-        context.checkSelfPermission(android.Manifest.permission.ACCESS_COARSE_LOCATION) ==
-        android.content.pm.PackageManager.PERMISSION_GRANTED
-    googleMap?.isMyLocationEnabled = userLocationEnabled && hasPermission
-  }
-
-  // endregion
-
-  // region PolylineViewDelegate
-
-  override fun polylineViewDidUpdate(polylineView: LuggPolylineView) {
-    syncPolylineView(polylineView)
-  }
-
-  // endregion
-
-  // region MarkerViewDelegate
-
-  override fun markerViewDidLayout(markerView: LuggMarkerView) {
-    if (googleMap == null) {
-      if (!pendingMarkerViews.contains(markerView)) {
-        pendingMarkerViews.add(markerView)
-      }
-      return
-    }
-
-    if (markerView.hasCustomView) {
-      // Recreate marker with custom view
-      markerView.marker?.remove()
-      addMarkerViewToMap(markerView)
-    } else {
-      syncMarkerView(markerView)
-    }
-  }
-
-  override fun markerViewDidUpdate(markerView: LuggMarkerView) {
-    syncMarkerView(markerView)
-  }
-
-  // endregion
-
-  // region Marker Management
-
-  private fun syncMarkerView(markerView: LuggMarkerView) {
-    if (googleMap == null) {
-      if (!pendingMarkerViews.contains(markerView)) {
-        pendingMarkerViews.add(markerView)
-      }
-      return
-    }
-
-    if (markerView.marker == null) {
-      // Custom views need layout first before adding to map
-      if (markerView.hasCustomView) return
-      addMarkerViewToMap(markerView)
-      return
-    }
-
-    markerView.marker?.apply {
-      position = LatLng(markerView.latitude, markerView.longitude)
-      title = markerView.title
-      snippet = markerView.description
-      setAnchor(markerView.anchorX, markerView.anchorY)
-      zIndex = markerView.zIndex
-      if (!markerView.hasCustomView) {
-        iconView = null
-      }
-    }
-  }
-
-  private fun processPendingMarkers() {
-    if (googleMap == null) return
-
-    pendingMarkerViews.forEach { addMarkerViewToMap(it) }
-    pendingMarkerViews.clear()
-  }
-
-  private fun addMarkerViewToMap(markerView: LuggMarkerView) {
-    val map = googleMap ?: run {
-      RNLog.w(reactContext, "Lugg: addMarkerViewToMap called without a map")
-      return
-    }
-
-    val position = LatLng(markerView.latitude, markerView.longitude)
-    val iconView = markerView.iconView
-
-    (iconView.parent as? ViewGroup)?.removeView(iconView)
-
-    val options = AdvancedMarkerOptions()
-      .position(position)
-      .title(markerView.title)
-      .snippet(markerView.description)
-
-    if (markerView.hasCustomView) {
-      options.iconView(iconView)
-    }
-
-    val marker = map.addMarker(options) as AdvancedMarker
-    marker.setAnchor(markerView.anchorX, markerView.anchorY)
-    marker.zIndex = markerView.zIndex
-
-    markerView.marker = marker
-  }
-
-  // endregion
-
-  // region Polyline Management
-
-  private fun syncPolylineView(polylineView: LuggPolylineView) {
-    if (googleMap == null) {
-      if (!pendingPolylineViews.contains(polylineView)) {
-        pendingPolylineViews.add(polylineView)
-      }
-      return
-    }
-
-    if (polylineView.polyline == null) {
-      addPolylineViewToMap(polylineView)
-      return
-    }
-
-    polylineView.polyline?.width = polylineView.strokeWidth.dpToPx()
-
-    polylineAnimators[polylineView]?.apply {
-      coordinates = polylineView.coordinates
-      strokeColors = polylineView.strokeColors
-      strokeWidth = polylineView.strokeWidth.dpToPx()
-      animated = polylineView.animated
-      update()
-    }
-  }
-
-  private fun processPendingPolylines() {
-    if (googleMap == null) return
-
-    pendingPolylineViews.forEach { addPolylineViewToMap(it) }
-    pendingPolylineViews.clear()
-  }
-
-  private fun addPolylineViewToMap(polylineView: LuggPolylineView) {
-    val map = googleMap ?: return
-
-    val options = PolylineOptions()
-      .width(polylineView.strokeWidth.dpToPx())
-
-    val polyline = map.addPolyline(options)
-    polylineView.polyline = polyline
-
-    val animator = PolylineAnimator().apply {
-      this.polyline = polyline
-      coordinates = polylineView.coordinates
-      strokeColors = polylineView.strokeColors
-      strokeWidth = polylineView.strokeWidth.dpToPx()
-      animated = polylineView.animated
-      update()
-    }
-
-    polylineAnimators[polylineView] = animator
-  }
-
-  // endregion
-
-  // region Property Setters
-
-  fun setMapId(value: String?) {
-    if (value.isNullOrEmpty()) return
-
-    if (mapView != null) {
-      RNLog.w(reactContext, "Lugg: mapId cannot be changed after map is initialized")
-      return
-    }
-
-    mapId = value
-  }
-
-  fun setInitialCoordinate(latitude: Double, longitude: Double) {
-    initialLatitude = latitude
-    initialLongitude = longitude
-  }
-
-  fun setInitialZoom(zoom: Double) {
-    initialZoom = zoom.toFloat()
-  }
-
-  fun setZoomEnabled(enabled: Boolean) {
-    zoomEnabled = enabled
-    googleMap?.uiSettings?.isZoomGesturesEnabled = enabled
-  }
-
-  fun setScrollEnabled(enabled: Boolean) {
-    scrollEnabled = enabled
-    googleMap?.uiSettings?.isScrollGesturesEnabled = enabled
-  }
-
-  fun setRotateEnabled(enabled: Boolean) {
-    rotateEnabled = enabled
-    googleMap?.uiSettings?.isRotateGesturesEnabled = enabled
-  }
-
-  fun setPitchEnabled(enabled: Boolean) {
-    pitchEnabled = enabled
-    googleMap?.uiSettings?.isTiltGesturesEnabled = enabled
-  }
-
-  fun setUserLocationEnabled(enabled: Boolean) {
-    userLocationEnabled = enabled
-    applyUserLocation()
-  }
-
-  fun setMinZoom(zoom: Double) {
-    minZoom = if (zoom > 0) zoom.toFloat() else null
-    googleMap?.let { map ->
-      minZoom?.let { map.setMinZoomPreference(it) } ?: map.resetMinMaxZoomPreference()
-    }
-  }
-
-  fun setMaxZoom(zoom: Double) {
-    maxZoom = if (zoom > 0) zoom.toFloat() else null
-    googleMap?.let { map ->
-      maxZoom?.let { map.setMaxZoomPreference(it) } ?: map.resetMinMaxZoomPreference()
-    }
-  }
-
-  fun setMapPadding(top: Int, left: Int, bottom: Int, right: Int) {
-    paddingTop = top
-    paddingLeft = left
-    paddingBottom = bottom
-    paddingRight = right
-    applyPadding()
-  }
-
-  // endregion
-
-  // region Commands
-
-  fun moveCamera(latitude: Double, longitude: Double, zoom: Double, duration: Int) {
-    val map = googleMap ?: return
-    val position = LatLng(latitude, longitude)
-    val cameraUpdate = CameraUpdateFactory.newLatLngZoom(position, zoom.toFloat())
-    when {
-      duration < 0 -> map.animateCamera(cameraUpdate)
-      duration > 0 -> map.animateCamera(cameraUpdate, duration, null)
-      else -> map.moveCamera(cameraUpdate)
-    }
-  }
-
-  fun fitCoordinates(
-    coordinates: List<LatLng>,
-    paddingTop: Int,
-    paddingLeft: Int,
-    paddingBottom: Int,
-    paddingRight: Int,
-    duration: Int
-  ) {
-    val map = googleMap ?: return
-    if (coordinates.isEmpty()) return
-
-    val boundsBuilder = com.google.android.gms.maps.model.LatLngBounds.Builder()
-    coordinates.forEach { boundsBuilder.include(it) }
-    val bounds = boundsBuilder.build()
-
-    val top = paddingTop.toFloat().dpToPx().toInt()
-    val left = paddingLeft.toFloat().dpToPx().toInt()
-    val bottom = paddingBottom.toFloat().dpToPx().toInt()
-    val right = paddingRight.toFloat().dpToPx().toInt()
-
-    // Set padding before camera update, then restore after
-    map.setPadding(
-      this.paddingLeft + left,
-      this.paddingTop + top,
-      this.paddingRight + right,
-      this.paddingBottom + bottom
-    )
-
-    val cameraUpdate = CameraUpdateFactory.newLatLngBounds(bounds, 0)
-
-    when {
-      duration < 0 -> map.animateCamera(cameraUpdate)
-      duration > 0 -> map.animateCamera(cameraUpdate, duration, null)
-      else -> map.moveCamera(cameraUpdate)
-    }
-
-    // Restore base padding
-    map.setPadding(this.paddingLeft, this.paddingTop, this.paddingRight, this.paddingBottom)
-  }
-
-  // endregion
-
-  companion object {
-    private const val TAG = "Lugg"
-    const val DEMO_MAP_ID = "DEMO_MAP_ID"
-  }
-}