@mapvina-com/mapvina-react-native 1.0.0

package/android/src/main/java/io/github/mapvina/reactnative/components/annotations/markerview/MLRNMarkerView.kt

@@ -0,0 +1,245 @@
+package io.github.mapvina.reactnative.components.annotations.markerview
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.PointF
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import io.github.mapvina.android.geometry.LatLng
+import io.github.mapvina.geojson.Point
+import io.github.mapvina.reactnative.components.AbstractMapFeature
+import io.github.mapvina.reactnative.components.mapview.MLRNMapView
+import io.github.mapvina.reactnative.events.PointAnnotationEvent
+import io.github.mapvina.reactnative.utils.GeoJSONUtils
+
+@SuppressLint("ViewConstructor")
+class MLRNMarkerView(
+    context: Context,
+) : AbstractMapFeature(context),
+    View.OnLayoutChangeListener {
+    private var mMapView: MLRNMapView? = null
+    private var mChildView: View? = null
+    private var mWrapperView: MLRNMarkerViewContent? = null
+    private var mMarkerViewManager: MarkerViewManager? = null
+    private var mMarkerInfo: MarkerViewManager.MarkerInfo? = null
+    private var mCoordinate: Point? = null
+    private var mAnchor: FloatArray? = null
+    private var mOffset: FloatArray? = null
+    private var mAddedToMap = false
+    private var mLastWidth = 0
+    private var mLastHeight = 0
+    private var mLastZIndex: Float? = null
+    private var markerId: String? = null
+
+    private val surfaceId: Int
+        get() {
+            val reactContext = context as ReactContext
+            return UIManagerHelper.getSurfaceId(reactContext)
+        }
+
+    private fun ViewGroup.disableClipping() {
+        clipChildren = false
+        clipToPadding = false
+        clipToOutline = false
+    }
+
+    override fun addView(
+        childView: View,
+        childPosition: Int,
+    ) {
+        if (childPosition != 0) return
+
+        mChildView = childView
+        childView.addOnLayoutChangeListener(this)
+
+        val offscreenContainer = mMapView?.offscreenAnnotationViewContainer()
+        offscreenContainer?.disableClipping()
+        offscreenContainer?.addView(childView)
+    }
+
+    override fun removeView(view: View?) {
+        if (view == mChildView) {
+            removeChildView()
+        }
+    }
+
+    override fun removeViewAt(index: Int) {
+        if (index == 0 && mChildView != null) {
+            removeChildView()
+        }
+    }
+
+    private fun removeChildView() {
+        mChildView?.removeOnLayoutChangeListener(this)
+        (mChildView?.parent as? ViewGroup)?.removeView(mChildView)
+        mChildView = null
+    }
+
+    override fun getChildCount(): Int = if (mChildView != null) 1 else 0
+
+    override fun getChildAt(index: Int): View? = if (index == 0) mChildView else null
+
+    fun setLngLat(lngLat: DoubleArray?) {
+        if (lngLat == null || lngLat.size < 2) return
+        val point = Point.fromLngLat(lngLat[0], lngLat[1])
+        mCoordinate = point
+        val latLng = GeoJSONUtils.toLatLng(point)
+        if (latLng != null && mMarkerInfo != null && mMarkerViewManager != null) {
+            mMarkerViewManager!!.updateMarkerCoordinate(mMarkerInfo!!, latLng)
+        }
+    }
+
+    fun setAnchor(
+        x: Float,
+        y: Float,
+    ) {
+        mAnchor = floatArrayOf(x, y)
+        if (mMarkerInfo != null && mMarkerViewManager != null) {
+            mMarkerViewManager!!.updateMarkerAnchor(mMarkerInfo!!, x, y)
+        }
+    }
+
+    fun setOffset(
+        x: Float,
+        y: Float,
+    ) {
+        mOffset = floatArrayOf(x, y)
+        val scale = resources.displayMetrics.density
+        val pixelOffsetX = x * scale
+        val pixelOffsetY = y * scale
+        if (mMarkerInfo != null && mMarkerViewManager != null) {
+            mMarkerViewManager!!.updateMarkerOffset(mMarkerInfo!!, pixelOffsetX, pixelOffsetY)
+        }
+    }
+
+    fun updateZIndex(zIndex: Float) {
+        mLastZIndex = zIndex
+        mWrapperView?.translationZ = zIndex
+    }
+
+    fun setId(id: String) {
+        markerId = id
+    }
+
+    fun onPress(
+        latLng: LatLng,
+        screenPos: PointF,
+    ) {
+        val event =
+            PointAnnotationEvent(
+                surfaceId,
+                id,
+                "onPress",
+                markerId,
+                latLng,
+                screenPos,
+            )
+        mMapView?.eventDispatcher?.dispatchEvent(event)
+    }
+
+    override fun addToMap(mapView: MLRNMapView) {
+        mMapView = mapView
+        if (mChildView != null && !mChildView!!.isAttachedToWindow) {
+            val offscreenContainer = mMapView?.offscreenAnnotationViewContainer()
+            offscreenContainer?.disableClipping()
+            offscreenContainer?.addView(mChildView)
+        }
+        tryAddToMarkerViewManager()
+    }
+
+    private fun tryAddToMarkerViewManager() {
+        if (mAddedToMap || mMapView == null || mChildView == null) return
+        if (mChildView!!.width == 0 || mChildView!!.height == 0) return
+
+        mAddedToMap = true
+
+        mMapView?.getMapAsync { mapVinaMap ->
+            val latLng = GeoJSONUtils.toLatLng(mCoordinate)
+            mMarkerViewManager = mMapView?.getMarkerViewManager(mapVinaMap)
+
+            if (latLng != null && mChildView != null && mMarkerViewManager != null) {
+                mMapView?.offscreenAnnotationViewContainer()?.removeView(mChildView)
+
+                mWrapperView =
+                    MLRNMarkerViewContent(context).apply {
+                        layoutParams =
+                            FrameLayout.LayoutParams(
+                                FrameLayout.LayoutParams.WRAP_CONTENT,
+                                FrameLayout.LayoutParams.WRAP_CONTENT,
+                            )
+                        addView(mChildView)
+                    }
+                mWrapperView!!.setLayerType(LAYER_TYPE_HARDWARE, null)
+
+                mLastZIndex?.let { zIndex ->
+                    mWrapperView!!.translationZ = zIndex
+                }
+
+                val scale = resources.displayMetrics.density
+                val pixelOffsetX = (mOffset?.get(0) ?: 0f) * scale
+                val pixelOffsetY = (mOffset?.get(1) ?: 0f) * scale
+
+                mMarkerInfo =
+                    mMarkerViewManager!!.addMarker(
+                        view = mWrapperView!!,
+                        markerView = this@MLRNMarkerView,
+                        latLng = latLng,
+                        anchorX = mAnchor?.get(0) ?: 0f,
+                        anchorY = mAnchor?.get(1) ?: 0f,
+                        offsetX = pixelOffsetX,
+                        offsetY = pixelOffsetY,
+                    )
+            }
+        }
+    }
+
+    override fun removeFromMap(mapView: MLRNMapView) {
+        if (mMarkerInfo != null && mMarkerViewManager != null) {
+            mMarkerViewManager!!.removeMarker(mMarkerInfo!!)
+            mMarkerInfo = null
+            mMarkerViewManager = null
+        }
+        mChildView?.removeOnLayoutChangeListener(this)
+        mWrapperView?.removeAllViews()
+        mWrapperView = null
+        if (mChildView != null && !mAddedToMap) {
+            mMapView?.offscreenAnnotationViewContainer()?.removeView(mChildView)
+        }
+        mAddedToMap = false
+    }
+
+    override fun onLayoutChange(
+        v: View,
+        left: Int,
+        top: Int,
+        right: Int,
+        bottom: Int,
+        oldLeft: Int,
+        oldTop: Int,
+        oldRight: Int,
+        oldBottom: Int,
+    ) {
+        if (left == 0 && top == 0 && right == 0 && bottom == 0) return
+
+        val width = right - left
+        val height = bottom - top
+
+        if (!mAddedToMap) {
+            tryAddToMarkerViewManager()
+            return
+        }
+
+        if (width == mLastWidth && height == mLastHeight) return
+
+        mLastWidth = width
+        mLastHeight = height
+        mChildView?.layoutParams?.let { params ->
+            params.width = width
+            params.height = height
+        }
+        mMarkerViewManager?.updateMarkers()
+    }
+}

package/android/src/main/java/io/github/mapvina/reactnative/components/annotations/markerview/MLRNMarkerViewContent.kt

@@ -0,0 +1,46 @@
+package io.github.mapvina.reactnative.components.annotations.markerview
+
+import android.content.Context
+import android.view.ViewGroup
+import com.facebook.react.views.view.ReactViewGroup
+
+/**
+ * Based on rnmapbox/maps implementation:
+ * https://github.com/rnmapbox/maps/blob/512c50865f322fa89e0d20066b4a0fb10f080cb5/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXMarkerViewContent.kt
+ */
+class MLRNMarkerViewContent(
+    context: Context,
+) : ReactViewGroup(context) {
+    init {
+        allowRenderingOutside()
+    }
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        configureParentClipping()
+    }
+
+    private fun configureParentClipping() {
+        val parent = parent
+        if (parent is ViewGroup) {
+            parent.allowRenderingOutside()
+        }
+    }
+
+    /**
+     * Returns the authoritative content size from the first child view.
+     * The child is laid out by React Native before this wrapper is added to the map,
+     * so its dimensions are reliable even before this view's own layout pass runs.
+     */
+    fun getContentSize(): Pair<Float, Float> {
+        val child = getChildAt(0) ?: return Pair(width.toFloat(), height.toFloat())
+        val w = if (child.width > 0) child.width else width
+        val h = if (child.height > 0) child.height else height
+        return Pair(w.toFloat(), h.toFloat())
+    }
+}
+
+private fun ViewGroup.allowRenderingOutside() {
+    clipChildren = false
+    clipToPadding = false
+}

package/android/src/main/java/io/github/mapvina/reactnative/components/annotations/markerview/MLRNMarkerViewManager.kt

@@ -0,0 +1,104 @@
+package io.github.mapvina.reactnative.components.annotations.markerview
+
+import android.view.View
+import com.facebook.react.bridge.Dynamic
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.ReadableType
+import com.facebook.react.module.annotations.ReactModule
+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.MLRNMarkerViewManagerDelegate
+import com.facebook.react.viewmanagers.MLRNMarkerViewManagerInterface
+
+@ReactModule(name = MLRNMarkerViewManager.REACT_CLASS)
+class MLRNMarkerViewManager(
+    private val reactApplicationContext: ReactApplicationContext,
+) : ViewGroupManager<MLRNMarkerView>(),
+    MLRNMarkerViewManagerInterface<MLRNMarkerView> {
+    private val delegate: MLRNMarkerViewManagerDelegate<MLRNMarkerView, MLRNMarkerViewManager> =
+        MLRNMarkerViewManagerDelegate(this)
+
+    override fun getDelegate(): ViewManagerDelegate<MLRNMarkerView> = delegate
+
+    companion object {
+        const val REACT_CLASS: String = "MLRNMarkerView"
+    }
+
+    override fun getName(): String = REACT_CLASS
+
+    override fun createViewInstance(reactContext: ThemedReactContext): MLRNMarkerView = MLRNMarkerView(reactContext)
+
+    @ReactProp(name = "id")
+    override fun setId(
+        markerView: MLRNMarkerView,
+        id: String?,
+    ) {
+        id?.let { markerView.setId(it) }
+    }
+
+    override fun addView(
+        parent: MLRNMarkerView,
+        child: View,
+        index: Int,
+    ) {
+        parent.addView(child, index)
+    }
+
+    override fun removeViewAt(
+        parent: MLRNMarkerView,
+        index: Int,
+    ) {
+        parent.removeViewAt(index)
+    }
+
+    override fun getChildCount(parent: MLRNMarkerView): Int = parent.childCount
+
+    override fun getChildAt(
+        parent: MLRNMarkerView,
+        index: Int,
+    ): View? = parent.getChildAt(index)
+
+    @ReactProp(name = "lngLat")
+    override fun setLngLat(
+        markerView: MLRNMarkerView,
+        lngLat: Dynamic,
+    ) {
+        if (lngLat.type == ReadableType.Array) {
+            val arr = lngLat.asArray()
+            if (arr != null && arr.size() >= 2) {
+                markerView.setLngLat(doubleArrayOf(arr.getDouble(0), arr.getDouble(1)))
+            }
+        }
+    }
+
+    @ReactProp(name = "anchor")
+    override fun setAnchor(
+        markerView: MLRNMarkerView,
+        map: ReadableMap?,
+    ) {
+        if (map != null) {
+            markerView.setAnchor(map.getDouble("x").toFloat(), map.getDouble("y").toFloat())
+        }
+    }
+
+    @ReactProp(name = "offset")
+    override fun setOffset(
+        markerView: MLRNMarkerView,
+        map: ReadableMap?,
+    ) {
+        if (map != null) {
+            markerView.setOffset(map.getDouble("x").toFloat(), map.getDouble("y").toFloat())
+        }
+    }
+
+    override fun setZIndex(
+        view: MLRNMarkerView,
+        zIndex: Float,
+    ) {
+        super.setZIndex(view, zIndex)
+        view.updateZIndex(zIndex)
+    }
+}

package/android/src/main/java/io/github/mapvina/reactnative/components/annotations/markerview/MarkerViewManager.kt

@@ -0,0 +1,143 @@
+package io.github.mapvina.reactnative.components.annotations.markerview
+
+import android.graphics.PointF
+import android.graphics.RectF
+import android.view.View
+import io.github.mapvina.android.geometry.LatLng
+import io.github.mapvina.android.maps.MapVinaMap
+import io.github.mapvina.android.maps.MapView
+
+class MarkerViewManager(
+    private val mapView: MapView,
+    private val map: MapVinaMap,
+) {
+    data class MarkerInfo(
+        val view: MLRNMarkerViewContent,
+        val markerView: MLRNMarkerView,
+        var latLng: LatLng,
+        var anchorX: Float = 0f,
+        var anchorY: Float = 0f,
+        var offsetX: Float = 0f,
+        var offsetY: Float = 0f,
+    )
+
+    private val markers = mutableListOf<MarkerInfo>()
+    private var isDestroyed = false
+
+    fun addMarker(
+        view: MLRNMarkerViewContent,
+        markerView: MLRNMarkerView,
+        latLng: LatLng,
+        anchorX: Float = 0f,
+        anchorY: Float = 0f,
+        offsetX: Float = 0f,
+        offsetY: Float = 0f,
+    ): MarkerInfo {
+        val markerInfo = MarkerInfo(view, markerView, latLng, anchorX, anchorY, offsetX, offsetY)
+        markers.add(markerInfo)
+
+        if (view.parent == null) {
+            mapView.clipChildren = false
+            mapView.clipToPadding = false
+            mapView.clipToOutline = false
+            mapView.addView(view)
+        }
+
+        updateMarkerPosition(markerInfo)
+
+        return markerInfo
+    }
+
+    fun removeMarker(markerInfo: MarkerInfo) {
+        markers.remove(markerInfo)
+        mapView.removeView(markerInfo.view)
+    }
+
+    fun removeMarkerByView(view: View) {
+        markers.find { it.view == view }?.let { removeMarker(it) }
+    }
+
+    fun updateMarkers() {
+        if (isDestroyed) return
+
+        for (marker in markers) {
+            updateMarkerPosition(marker)
+        }
+    }
+
+    private fun updateMarkerPosition(marker: MarkerInfo) {
+        val view = marker.view
+        val screenPos: PointF = map.projection.toScreenLocation(marker.latLng)
+        val (viewWidth, viewHeight) = view.getContentSize()
+        val anchorOffsetX = viewWidth * marker.anchorX
+        val anchorOffsetY = viewHeight * marker.anchorY
+        view.x = screenPos.x - anchorOffsetX + marker.offsetX
+        view.y = screenPos.y - anchorOffsetY + marker.offsetY
+    }
+
+    fun findMarkerByView(view: View): MarkerInfo? = markers.find { it.view == view }
+
+    fun isPointInsideMarker(screenPoint: PointF): Boolean = findMarkerAtPoint(screenPoint) != null
+
+    fun findMarkerAtPoint(screenPoint: PointF): MarkerInfo? {
+        for (marker in markers) {
+            val v = marker.view
+            if (v.visibility != View.VISIBLE) continue
+            val (w, h) = v.getContentSize()
+            val rect = RectF(v.x, v.y, v.x + w, v.y + h)
+            if (rect.contains(screenPoint.x, screenPoint.y)) return marker
+        }
+        return null
+    }
+
+    fun updateMarkerCoordinate(
+        markerInfo: MarkerInfo,
+        latLng: LatLng,
+    ) {
+        markerInfo.latLng = latLng
+        updateMarkerPosition(markerInfo)
+    }
+
+    fun updateMarkerAnchor(
+        markerInfo: MarkerInfo,
+        anchorX: Float,
+        anchorY: Float,
+    ) {
+        markerInfo.anchorX = anchorX
+        markerInfo.anchorY = anchorY
+        updateMarkerPosition(markerInfo)
+    }
+
+    fun updateMarkerOffset(
+        markerInfo: MarkerInfo,
+        offsetX: Float,
+        offsetY: Float,
+    ) {
+        markerInfo.offsetX = offsetX
+        markerInfo.offsetY = offsetY
+        updateMarkerPosition(markerInfo)
+    }
+
+    fun removeViews() {
+        for (marker in markers) {
+            mapView.removeView(marker.view)
+        }
+    }
+
+    fun restoreViews() {
+        for (marker in markers) {
+            if (marker.view.parent == null) {
+                mapView.addView(marker.view)
+            }
+        }
+        updateMarkers()
+    }
+
+    fun onDestroy() {
+        isDestroyed = true
+        for (marker in markers) {
+            mapView.removeView(marker.view)
+        }
+        markers.clear()
+    }
+}