fix(point annotation): selected property should select/deselect (#4165)

* fix(point annotation): selected property should select/deselect a point annotation

Co-Authored-By: Miklós Fazekas <mfazekas@szemafor.com>

* fix(android): use non-nullable Dynamic and log null selected values

* fix(ios): fix callout not rendering on PointAnnotation selection

Callout children were mounted into the ComponentView instead of the
contentView (RNMBXCallout), producing a transparent snapshot. Override
mountChildComponentView in RNMBXCalloutComponentView to insert children
into the contentView. Also set iconAllowOverlap on the callout annotation
manager so callouts are not hidden by symbol collision.

* fix(android): add setReactSelected and mIsSelected tracking to RNMBXPointAnnotation

Author: mfazekas

android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXPointAnnotation.kt

@@ -36,7 +36,7 @@ class RNMBXPointAnnotation(private val mContext: Context, private val mManager:
     private val mTitle: String? = null
     private val mSnippet: String? = null
     private var mAnchor: Array<Float>? = null
-    private val mIsSelected = false
+    private var mIsSelected = false
     private var mDraggable = false
     private var mChildView: View? = null
     private var mChildBitmap: Bitmap? = null
@@ -187,7 +187,19 @@ class RNMBXPointAnnotation(private val mContext: Context, private val mManager:
         }
     }
 
+    fun setReactSelected(selected: Boolean) {
+        if (selected && !mIsSelected) {
+            pointAnnotations?.let {
+                it.deselectSelectedAnnotation()
+                it.selectAnnotation(this)
+            }
+        } else if (!selected && mIsSelected) {
+            pointAnnotations?.deselectAnnotation(this)
+        }
+    }
+
     fun doSelect(shouldSendEvent: Boolean) {
+        mIsSelected = true
         if (calloutView != null) {
             makeCallout()
         }
@@ -197,6 +209,7 @@ class RNMBXPointAnnotation(private val mContext: Context, private val mManager:
     }
 
     fun doDeselect() {
+        mIsSelected = false
         mManager.handleEvent(makeEvent(false))
         mCalloutSymbol?.let { mCalloutSymbol ->
             pointAnnotations?.delete(mCalloutSymbol)

android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXPointAnnotationManager.kt

@@ -78,6 +78,17 @@ class RNMBXPointAnnotationManager(reactApplicationContext: ReactApplicationConte
         annotation.setAnchor(mapValue.getDouble("x").toFloat(), mapValue.getDouble("y").toFloat())
     }
 
+    override fun setSelected(
+        annotation: RNMBXPointAnnotation,
+        value: Dynamic
+    ) {
+        if (value.isNull) {
+            Logger.e("RNMBXPointAnnotationManager", "selected value is null")
+            return
+        }
+        annotation.setReactSelected(value.asBoolean())
+    }
+
     @ReactProp(name = "draggable")
     override fun setDraggable(annotation: RNMBXPointAnnotation, draggable: Dynamic) {
         annotation.setDraggable(draggable.asBoolean())

ios/RNMBX/RNMBXCalloutComponentView.mm

@@ -45,6 +45,16 @@ + (ComponentDescriptorProvider)componentDescriptorProvider
   return concreteComponentDescriptorProvider<RNMBXCalloutComponentDescriptor>();
 }
 
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+    [_view insertSubview:childComponentView atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+    [childComponentView removeFromSuperview];
+}
+
 - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &)oldProps
 {
   const auto &newProps = static_cast<const RNMBXCalloutProps &>(*props);

ios/RNMBX/RNMBXMapView.swift

@@ -236,7 +236,9 @@ open class RNMBXMapView: UIView, RCTInvalidating {
   }()
 
   lazy var calloutAnnotationManager : MapboxMaps.PointAnnotationManager = {
-    return mapView.annotations.makePointAnnotationManager(id: "RNMBX-mapview-callouts")
+    let manager = mapView.annotations.makePointAnnotationManager(id: "RNMBX-mapview-callouts")
+    manager.iconAllowOverlap = true
+    return manager
   }()
 
   var _mapView: MapView! = nil
@@ -1893,6 +1895,20 @@ class RNMBXPointAnnotationManager : AnnotationInteractionDelegate {
     //   onTap(annotations: annotations)
   }
 
+  func selected(pointAnnotation: RNMBXPointAnnotation) {
+    if (selected != nil) {
+      deselectCurrentlySelected(deselectAnnotationOnTap: false)
+    }
+    pointAnnotation.doSelect()
+    selected = pointAnnotation
+  }
+
+  func unselected(pointAnnotation: RNMBXPointAnnotation) {
+    if (selected == pointAnnotation) {
+      deselectCurrentlySelected(deselectAnnotationOnTap: false)
+    }
+  }
+
   func deselectCurrentlySelected(deselectAnnotationOnTap: Bool = false) -> Bool {
     if let selected = selected {
       selected.doDeselect(deselectAnnotationOnMapTap: deselectAnnotationOnTap)
@@ -2120,6 +2136,7 @@ class RNMBXPointAnnotationManager : AnnotationInteractionDelegate {
     )
 
   func add(_ annotation: PointAnnotation, _ rnmbxPointAnnotation: RNMBXPointAnnotation) {
+    rnmbxPointAnnotation.manager = self
     manager.annotations.append(annotation)
     manager.refresh()
     annotations.setObject(rnmbxPointAnnotation, forKey: annotation.id as NSString)

ios/RNMBX/RNMBXPointAnnotation.swift

@@ -10,6 +10,8 @@ final class WeakRef<T: AnyObject> {
 }
 @objc
 public class RNMBXPointAnnotation : RNMBXInteractiveElement {
+  weak var manager: RNMBXPointAnnotationManager? = nil
+
   static let key = "RNMBXPointAnnotation"
   static var gid = 0;
 
@@ -31,7 +33,25 @@ public class RNMBXPointAnnotation : RNMBXInteractiveElement {
   @objc public var onDrag: RCTBubblingEventBlock? = nil
   @objc public var onDragEnd: RCTBubblingEventBlock? = nil
   @objc public var onSelected: RCTBubblingEventBlock? = nil
-  
+
+  private var selected: Bool? = nil {
+    didSet {
+      update { annotation in
+        if let selected = selected {
+          annotation.isSelected = selected
+        }
+      }
+    }
+  }
+
+  @objc public func setReactSelected(_ _selected: Bool) {
+    if (_selected == true && self.selected != true) {
+      manager?.selected(pointAnnotation: self)
+    } else if (_selected == false && self.selected == true) {
+      manager?.unselected(pointAnnotation: self)
+    }
+  }
+
   @objc public var coordinate : String? {
     didSet {
       _updateCoordinate()
@@ -173,14 +193,16 @@ public class RNMBXPointAnnotation : RNMBXInteractiveElement {
   }
 
   func doSelect() {
+    self.selected = true
     let event = makeEvent(isSelect: true)
     if let onSelected = onSelected {
       onSelected(event.toJSON())
     }
     onSelect()
   }
-  
+
   func doDeselect(deselectAnnotationOnMapTap: Bool = false) {
+    self.selected = false
     let event = makeEvent(isSelect: false, deselectAnnotationOnMapTap: deselectAnnotationOnMapTap)
     if let onDeselected = onDeselected {
       onDeselected(event.toJSON())
@@ -192,7 +214,7 @@ public class RNMBXPointAnnotation : RNMBXInteractiveElement {
     if let callout = callout,
        let calloutImage = _createViewSnapshot(view: callout),
        let point = point() {
-      
+
       var calloutPtAnnotation = PointAnnotation(point: point)
       calloutId = calloutPtAnnotation.id
       let name =  "rnviewcallout-\(gid())-\(calloutPtAnnotation.id)"

ios/RNMBX/RNMBXPointAnnotationComponentView.mm

@@ -130,6 +130,7 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
   RNMBX_OPTIONAL_PROP_BOOL(draggable)
   RNMBX_OPTIONAL_PROP_NSString(id)
   RNMBX_OPTIONAL_PROP_NSDictionary(anchor)
+  RNMBX_REMAP_OPTIONAL_PROP_BOOL(selected, reactSelected)
 
   [super updateProps:props oldProps:oldProps];
 }

src/specs/RNMBXPointAnnotationNativeComponent.ts

@@ -28,6 +28,7 @@ export interface NativeProps extends ViewProps {
   draggable: UnsafeMixed<boolean>;
   id: UnsafeMixed<string>;
   anchor: UnsafeMixed<any>;
+  selected: UnsafeMixed<boolean>;
 
   onMapboxPointAnnotationDeselected: DirectEventHandler<OnMapboxPointAnnotationDeselectedEventType>;
   onMapboxPointAnnotationDrag: DirectEventHandler<OnMapboxPointAnnotationDragEventType>;