@lugg/maps 0.2.0-alpha.22 → 0.2.0-alpha.24

package/README.md

@@ -2,6 +2,11 @@
 
 Universal maps for your React Native apps 📍
 
+<img alt="@lugg/maps" src="docs/preview.gif" width="720" />
+
+> [!IMPORTANT]
+> This library is currently under heavy development. APIs may change without notice.
+
 ## Installation
 
 ```sh

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

@@ -0,0 +1,241 @@
+package com.luggmaps
+
+import android.annotation.SuppressLint
+import android.view.View
+import android.view.View.VISIBLE
+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.model.LatLng
+import com.luggmaps.core.EdgeInsets
+import com.luggmaps.core.GoogleMapProvider
+import com.luggmaps.core.MapProvider
+import com.luggmaps.core.MapProviderDelegate
+
+interface LuggMapViewEventDelegate {
+  fun onCameraMove(
+    view: LuggMapView,
+    latitude: Double,
+    longitude: Double,
+    zoom: Float,
+    gesture: Boolean
+  )
+  fun onCameraIdle(
+    view: LuggMapView,
+    latitude: Double,
+    longitude: Double,
+    zoom: Float,
+    gesture: Boolean
+  )
+  fun onReady(view: LuggMapView)
+}
+
+@SuppressLint("ViewConstructor")
+class LuggMapView(private val reactContext: ThemedReactContext) :
+  ReactViewGroup(reactContext),
+  MapProviderDelegate {
+
+  var eventDelegate: LuggMapViewEventDelegate? = null
+  private var provider: MapProvider? = null
+  private var mapWrapperView: LuggMapWrapperView? = null
+
+  // Cached props (applied during initializeProvider)
+  private var mapId: String = GoogleMapProvider.DEMO_MAP_ID
+  private var initialLatitude: Double = 37.78
+  private var initialLongitude: Double = -122.43
+  private var initialZoom: Float = 14f
+  private var theme: String = "system"
+  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
+  private var minZoom: Double? = null
+  private var maxZoom: Double? = null
+  private var padding: EdgeInsets = EdgeInsets()
+
+  // region View Lifecycle
+
+  override fun addView(child: View?, index: Int) {
+    super.addView(child, index)
+    when (child) {
+      is LuggMapWrapperView -> mapWrapperView = child
+      is LuggMarkerView -> provider?.addMarkerView(child)
+      is LuggPolylineView -> provider?.addPolylineView(child)
+    }
+  }
+
+  override fun removeViewAt(index: Int) {
+    val view = getChildAt(index)
+    when (view) {
+      is LuggMarkerView -> provider?.removeMarkerView(view)
+      is LuggPolylineView -> provider?.removePolylineView(view)
+    }
+    super.removeViewAt(index)
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    if (provider == null && mapWrapperView != null) {
+      initializeProvider()
+    }
+  }
+
+  override fun onWindowVisibilityChanged(visibility: Int) {
+    super.onWindowVisibilityChanged(visibility)
+    if (visibility == VISIBLE) {
+      provider?.resumeAnimations()
+    } else {
+      provider?.pauseAnimations()
+    }
+  }
+
+  fun onDropViewInstance() {
+    provider?.destroy()
+    provider = null
+    mapWrapperView = null
+  }
+
+  // endregion
+
+  // region Provider Initialization
+
+  private fun initializeProvider() {
+    if (provider != null || mapWrapperView == null) return
+
+    val google = GoogleMapProvider(context)
+    google.mapId = mapId
+    google.delegate = this
+    provider = google
+
+    applyProps()
+
+    google.initializeMap(mapWrapperView!!, initialLatitude, initialLongitude, initialZoom)
+
+    // Flush children mounted before provider was created
+    for (i in 0 until childCount) {
+      when (val child = getChildAt(i)) {
+        is LuggMarkerView -> google.addMarkerView(child)
+        is LuggPolylineView -> google.addPolylineView(child)
+      }
+    }
+  }
+
+  // endregion
+
+  // region MapProviderDelegate
+
+  override fun mapProviderDidReady() {
+    eventDelegate?.onReady(this)
+  }
+
+  override fun mapProviderDidMoveCamera(latitude: Double, longitude: Double, zoom: Float, gesture: Boolean) {
+    eventDelegate?.onCameraMove(this, latitude, longitude, zoom, gesture)
+  }
+
+  override fun mapProviderDidIdleCamera(latitude: Double, longitude: Double, zoom: Float, gesture: Boolean) {
+    eventDelegate?.onCameraIdle(this, latitude, longitude, zoom, gesture)
+  }
+
+  // endregion
+
+  // region Property Setters
+
+  private fun applyProps() {
+    provider?.setZoomEnabled(zoomEnabled)
+    provider?.setScrollEnabled(scrollEnabled)
+    provider?.setRotateEnabled(rotateEnabled)
+    provider?.setPitchEnabled(pitchEnabled)
+    provider?.setUserLocationEnabled(userLocationEnabled)
+    provider?.setTheme(theme)
+    minZoom?.let { provider?.setMinZoom(it) }
+    maxZoom?.let { provider?.setMaxZoom(it) }
+    provider?.setPadding(padding)
+  }
+
+  fun setProvider(value: String?) {
+    if (value != null && value != "google") {
+      RNLog.w(reactContext, "LuggMapView: Only Google Maps is supported on Android")
+    }
+  }
+
+  fun setMapId(value: String?) {
+    if (value.isNullOrEmpty()) 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
+    provider?.setZoomEnabled(enabled)
+  }
+
+  fun setScrollEnabled(enabled: Boolean) {
+    scrollEnabled = enabled
+    provider?.setScrollEnabled(enabled)
+  }
+
+  fun setRotateEnabled(enabled: Boolean) {
+    rotateEnabled = enabled
+    provider?.setRotateEnabled(enabled)
+  }
+
+  fun setPitchEnabled(enabled: Boolean) {
+    pitchEnabled = enabled
+    provider?.setPitchEnabled(enabled)
+  }
+
+  fun setUserLocationEnabled(enabled: Boolean) {
+    userLocationEnabled = enabled
+    provider?.setUserLocationEnabled(enabled)
+  }
+
+  fun setMinZoom(zoom: Double) {
+    minZoom = zoom
+    provider?.setMinZoom(zoom)
+  }
+
+  fun setMaxZoom(zoom: Double) {
+    maxZoom = zoom
+    provider?.setMaxZoom(zoom)
+  }
+
+  fun setTheme(value: String) {
+    theme = value
+    provider?.setTheme(value)
+  }
+
+  fun setPadding(top: Int, left: Int, bottom: Int, right: Int) {
+    padding = EdgeInsets(top, left, bottom, right)
+    provider?.setPadding(padding)
+  }
+
+  // endregion
+
+  // region Commands
+
+  fun moveCamera(latitude: Double, longitude: Double, zoom: Double, duration: Int) {
+    provider?.moveCamera(latitude, longitude, zoom, duration)
+  }
+
+  fun fitCoordinates(
+    coordinates: List<LatLng>,
+    paddingTop: Int,
+    paddingLeft: Int,
+    paddingBottom: Int,
+    paddingRight: Int,
+    duration: Int
+  ) {
+    provider?.fitCoordinates(coordinates, paddingTop, paddingLeft, paddingBottom, paddingRight, duration)
+  }
+
+  // endregion
+}

package/android/src/main/java/com/luggmaps/{LuggGoogleMapViewManager.kt → LuggMapViewManager.kt}

@@ -8,27 +8,27 @@ import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
-import com.facebook.react.viewmanagers.LuggGoogleMapViewManagerDelegate
-import com.facebook.react.viewmanagers.LuggGoogleMapViewManagerInterface
+import com.facebook.react.viewmanagers.LuggMapViewManagerDelegate
+import com.facebook.react.viewmanagers.LuggMapViewManagerInterface
 import com.google.android.gms.maps.model.LatLng
 import com.luggmaps.events.CameraIdleEvent
 import com.luggmaps.events.CameraMoveEvent
 import com.luggmaps.events.ReadyEvent
 import com.luggmaps.extensions.dispatchEvent
 
-@ReactModule(name = LuggGoogleMapViewManager.NAME)
-class LuggGoogleMapViewManager :
-  ViewGroupManager<LuggGoogleMapView>(),
-  LuggGoogleMapViewManagerInterface<LuggGoogleMapView>,
-  LuggGoogleMapViewEventDelegate {
-  private val delegate: ViewManagerDelegate<LuggGoogleMapView> = LuggGoogleMapViewManagerDelegate(this)
+@ReactModule(name = LuggMapViewManager.NAME)
+class LuggMapViewManager :
+  ViewGroupManager<LuggMapView>(),
+  LuggMapViewManagerInterface<LuggMapView>,
+  LuggMapViewEventDelegate {
+  private val delegate: ViewManagerDelegate<LuggMapView> = LuggMapViewManagerDelegate(this)
 
-  override fun getDelegate(): ViewManagerDelegate<LuggGoogleMapView> = delegate
+  override fun getDelegate(): ViewManagerDelegate<LuggMapView> = delegate
 
   override fun getName(): String = NAME
 
-  override fun createViewInstance(context: ThemedReactContext): LuggGoogleMapView {
-    val view = LuggGoogleMapView(context)
+  override fun createViewInstance(context: ThemedReactContext): LuggMapView {
+    val view = LuggMapView(context)
     view.eventDelegate = this
     return view
   }
@@ -41,7 +41,7 @@ class LuggGoogleMapViewManager :
     )
 
   override fun onCameraMove(
-    view: LuggGoogleMapView,
+    view: LuggMapView,
     latitude: Double,
     longitude: Double,
     zoom: Float,
@@ -51,7 +51,7 @@ class LuggGoogleMapViewManager :
   }
 
   override fun onCameraIdle(
-    view: LuggGoogleMapView,
+    view: LuggMapView,
     latitude: Double,
     longitude: Double,
     zoom: Float,
@@ -60,17 +60,22 @@ class LuggGoogleMapViewManager :
     view.dispatchEvent(CameraIdleEvent(view, latitude, longitude, zoom, gesture))
   }
 
-  override fun onReady(view: LuggGoogleMapView) {
+  override fun onReady(view: LuggMapView) {
     view.dispatchEvent(ReadyEvent(view))
   }
 
+  @ReactProp(name = "provider")
+  override fun setProvider(view: LuggMapView, value: String?) {
+    view.setProvider(value)
+  }
+
   @ReactProp(name = "mapId")
-  override fun setMapId(view: LuggGoogleMapView, value: String?) {
+  override fun setMapId(view: LuggMapView, value: String?) {
     view.setMapId(value)
   }
 
   @ReactProp(name = "initialCoordinate")
-  override fun setInitialCoordinate(view: LuggGoogleMapView, value: ReadableMap?) {
+  override fun setInitialCoordinate(view: LuggMapView, value: ReadableMap?) {
     value?.let {
       val latitude = if (it.hasKey("latitude")) it.getDouble("latitude") else 0.0
       val longitude = if (it.hasKey("longitude")) it.getDouble("longitude") else 0.0
@@ -79,68 +84,68 @@ class LuggGoogleMapViewManager :
   }
 
   @ReactProp(name = "initialZoom", defaultDouble = 10.0)
-  override fun setInitialZoom(view: LuggGoogleMapView, value: Double) {
+  override fun setInitialZoom(view: LuggMapView, value: Double) {
     view.setInitialZoom(value)
   }
 
   @ReactProp(name = "zoomEnabled", defaultBoolean = true)
-  override fun setZoomEnabled(view: LuggGoogleMapView, value: Boolean) {
+  override fun setZoomEnabled(view: LuggMapView, value: Boolean) {
     view.setZoomEnabled(value)
   }
 
   @ReactProp(name = "scrollEnabled", defaultBoolean = true)
-  override fun setScrollEnabled(view: LuggGoogleMapView, value: Boolean) {
+  override fun setScrollEnabled(view: LuggMapView, value: Boolean) {
     view.setScrollEnabled(value)
   }
 
   @ReactProp(name = "rotateEnabled", defaultBoolean = true)
-  override fun setRotateEnabled(view: LuggGoogleMapView, value: Boolean) {
+  override fun setRotateEnabled(view: LuggMapView, value: Boolean) {
     view.setRotateEnabled(value)
   }
 
   @ReactProp(name = "pitchEnabled", defaultBoolean = true)
-  override fun setPitchEnabled(view: LuggGoogleMapView, value: Boolean) {
+  override fun setPitchEnabled(view: LuggMapView, value: Boolean) {
     view.setPitchEnabled(value)
   }
 
   @ReactProp(name = "userLocationEnabled", defaultBoolean = false)
-  override fun setUserLocationEnabled(view: LuggGoogleMapView, value: Boolean) {
+  override fun setUserLocationEnabled(view: LuggMapView, value: Boolean) {
     view.setUserLocationEnabled(value)
   }
 
   @ReactProp(name = "minZoom")
-  override fun setMinZoom(view: LuggGoogleMapView, value: Double) {
+  override fun setMinZoom(view: LuggMapView, value: Double) {
     view.setMinZoom(value)
   }
 
   @ReactProp(name = "maxZoom")
-  override fun setMaxZoom(view: LuggGoogleMapView, value: Double) {
+  override fun setMaxZoom(view: LuggMapView, value: Double) {
     view.setMaxZoom(value)
   }
 
   @ReactProp(name = "theme")
-  override fun setTheme(view: LuggGoogleMapView, value: String?) {
+  override fun setTheme(view: LuggMapView, value: String?) {
     view.setTheme(value ?: "system")
   }
 
   @ReactProp(name = "padding")
-  override fun setPadding(view: LuggGoogleMapView, value: ReadableMap?) {
+  override fun setPadding(view: LuggMapView, value: ReadableMap?) {
     value?.let {
       val top = if (it.hasKey("top")) it.getDouble("top").toFloat().dpToPx().toInt() else 0
       val left = if (it.hasKey("left")) it.getDouble("left").toFloat().dpToPx().toInt() else 0
       val bottom = if (it.hasKey("bottom")) it.getDouble("bottom").toFloat().dpToPx().toInt() else 0
       val right = if (it.hasKey("right")) it.getDouble("right").toFloat().dpToPx().toInt() else 0
-      view.setMapPadding(top, left, bottom, right)
+      view.setPadding(top, left, bottom, right)
     }
   }
 
-  override fun onDropViewInstance(view: LuggGoogleMapView) {
+  override fun onDropViewInstance(view: LuggMapView) {
     super.onDropViewInstance(view)
     view.onDropViewInstance()
   }
 
   override fun moveCamera(
-    view: LuggGoogleMapView,
+    view: LuggMapView,
     latitude: Double,
     longitude: Double,
     zoom: Double,
@@ -150,7 +155,7 @@ class LuggGoogleMapViewManager :
   }
 
   override fun fitCoordinates(
-    view: LuggGoogleMapView,
+    view: LuggMapView,
     coordinates: ReadableArray?,
     paddingTop: Double,
     paddingLeft: Double,
@@ -171,6 +176,6 @@ class LuggGoogleMapViewManager :
   }
 
   companion object {
-    const val NAME = "LuggGoogleMapView"
+    const val NAME = "LuggMapView"
   }
 }

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

@@ -1,13 +1,10 @@
 package com.luggmaps
 
 import com.facebook.react.ReactPackage
-import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ViewManager
 
 class LuggPackage : ReactPackage {
   override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> =
-    listOf(LuggGoogleMapViewManager(), LuggMarkerViewManager(), LuggMapWrapperViewManager(), LuggPolylineViewManager())
-
-  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> = emptyList()
+    listOf(LuggMapViewManager(), LuggMarkerViewManager(), LuggMapWrapperViewManager(), LuggPolylineViewManager())
 }