@rnmapbox/maps 10.0.10-rc.2 → 10.0.11-rc.0

package/ios/RCTMGL-v10/RCTMGLImages.swift

@@ -7,7 +7,6 @@ protocol RCTMGLImageSetter : AnyObject {
 class RCTMGLImages : UIView, RCTMGLMapComponent {
   
   weak var bridge : RCTBridge! = nil
-  var remoteImages : [String:String] = [:]
   
   weak var style: Style? = nil
 
@@ -15,7 +14,13 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
   var onImageMissing: RCTBubblingEventBlock? = nil
   
   @objc
-  var images : [String:Any] = [:]
+  var images : [String:Any] = [:] {
+    didSet {
+      updateImages(images: images, oldImages: oldValue)
+    }
+  }
+    
+  var loadedImages : Set<String> = []
   
   var imageViews: [RCTMGLImage] = []
 
@@ -24,7 +29,7 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
     didSet {
       nativeImageInfos = nativeImages.compactMap { decodeImage($0) }
     }
-  };
+  }
 
   typealias NativeImageInfo = (name:String, sdf: Bool, stretchX:[(from:Float, to:Float)], stretchY:[(from:Float, to:Float)], content: (left:Float,top:Float,right:Float,bottom:Float)? );
   var nativeImageInfos: [NativeImageInfo] = []
@@ -57,7 +62,7 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
     map.images.append(self)
     
     self.addNativeImages(style: style, nativeImages: nativeImageInfos)
-    self.addRemoteImages(style: style, remoteImages: images)
+    self.addImages(style: style, images: images, oldImages: [:])
     self.addImageViews(style: style, imageViews: imageViews)
   }
   
@@ -67,7 +72,21 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
     return true
   }
   
-  func addRemoteImages(style: Style, remoteImages: [String: Any]) {
+  func sameImage(oldValue: Any?, newValue: Any?) -> Bool {
+    if let oldS = oldValue as? String, let newS = newValue as? String {
+      return oldS == newS
+    } else {
+      return false
+    }
+  }
+
+  func updateImages(images: [String:Any], oldImages: [String:Any]) {
+    if let style = self.style {
+      addImages(style: style, images: images, oldImages: oldImages)
+    }
+  }
+
+  func addImages(style: Style, images: [String: Any], oldImages: [String:Any]) {
     var missingImages : [String:Any] = [:]
     
     // Add image placeholder for images that are not yet available in the style. This way
@@ -78,17 +97,25 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
     //
     // See also: https://github.com/mapbox/mapbox-gl-native/pull/14253#issuecomment-478827792
     
-    for imageName in remoteImages.keys {
-      if style.styleManager.getStyleImage(forImageId: imageName) == nil {
-        logged("RCTMGLImages.addImagePlaceholder") {
-          try? style.addImage(placeholderImage, id: imageName, stretchX: [], stretchY: [])
-          missingImages[imageName] = remoteImages[imageName]
+    for name in images.keys {
+      let newImage = oldImages[name] == nil
+      if oldImages[name] == nil || loadedImages.contains(name) || !sameImage(oldValue: oldImages[name], newValue: images[name]) {
+        let addPlaceholder = oldImages[name] == nil
+        if !sameImage(oldValue: oldImages[name], newValue: images[name]) {
+          missingImages[name] = images[name]
+        } else {
+          if style.styleManager.getStyleImage(forImageId: name) == nil {
+            logged("RCTMGLImages.addImagePlaceholder") {
+              try? style.addImage(placeholderImage, id: name, stretchX: [], stretchY: [])
+              missingImages[name] = images[name]
+            }
+          }
         }
       }
     }
     
     if missingImages.count > 0 {
-      RCTMGLUtils.fetchImages(bridge, style: style, objects: missingImages, forceUpdate: true, callback: { })
+      RCTMGLUtils.fetchImages(bridge, style: style, objects: missingImages, forceUpdate: true, loaded: { name in self.loadedImages.insert(name) } ,callback: { })
     }
   }
   
@@ -104,8 +131,8 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
       return true
     }
     
-    if let remoteImage = images[imageName] {
-      addRemoteImages(style: style, remoteImages: [imageName: remoteImage])
+    if let image = images[imageName] {
+      addImages(style: style, images: [imageName: image], oldImages: [:])
       return true
     }
     return false

package/ios/RCTMGL-v10/RCTMGLUtils.swift

@@ -8,7 +8,7 @@ class RCTMGLUtils {
     RCTMGLImageQueue.sharedInstance.addImage(url, scale: scale, bridge: bridge, handler: callback)
   }
   
-  static func fetchImages(_ bridge: RCTBridge, style: Style, objects: [String:Any], forceUpdate: Bool, callback: @escaping ()->Void) {
+  static func fetchImages(_ bridge: RCTBridge, style: Style, objects: [String:Any], forceUpdate: Bool, loaded: @escaping (_ name:String) -> Void, callback: @escaping ()->Void) {
     guard !objects.isEmpty else {
       callback()
       return
@@ -47,8 +47,8 @@ class RCTMGLUtils {
               DispatchQueue.main.async {
                 if let image = image {
                   logged("RCTMGLUtils.fetchImage-\(imageName)") {
-                    print("width=\(image.size.width) height=\(image.size.height) scale=\(image.scale) scale2=\(scale)")
                     try style.addImage(image, id: imageName, sdf:sdf, stretchX: stretchX, stretchY: stretchY, content: content)
+                    loaded(imageName)
                     imageLoadedBlock()
                   }
                 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rnmapbox/maps",
   "description": "A Mapbox react native module for creating custom maps",
-  "version": "10.0.10-rc.2",
+  "version": "10.0.11-rc.0",
   "publishConfig": {
     "access": "public"
   },