Resizable image support (#1269)

evil159 · web-flow · commit 9386f2cadec7 · 2022-04-19T19:58:31.000Z
diff --git a/Apps/Examples/Examples.xcodeproj/project.pbxproj b/Apps/Examples/Examples.xcodeproj/project.pbxproj
@@ -45,6 +45,7 @@
 		58A3C0C925C4B93600CAE5F0 /* AnimateGeoJSONLineExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 58A3C0C825C4B93600CAE5F0 /* AnimateGeoJSONLineExample.swift */; };
 		73694BD325D4B2CE0064F636 /* TrackingModeExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 73694BD225D4B2CE0064F636 /* TrackingModeExample.swift */; };
 		73E27C2627AF024C0067F277 /* DataJoinExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 73E27C2527AF024C0067F277 /* DataJoinExample.swift */; };
+		7406E3702806B66F002CC41F /* ResizableImageExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7406E36F2806B66F002CC41F /* ResizableImageExample.swift */; };
 		7412CF6227E8DD1E00F03B1C /* AddOneMarkerSymbolExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7412CF6127E8DD1E00F03B1C /* AddOneMarkerSymbolExample.swift */; };
 		7412CF6427E8EA2A00F03B1C /* CircleAnnotationExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7412CF6327E8EA2A00F03B1C /* CircleAnnotationExample.swift */; };
 		7412CF6627E9A7FF00F03B1C /* CLLocationCoordinate2D+Random.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7412CF6527E9A7FF00F03B1C /* CLLocationCoordinate2D+Random.swift */; };
@@ -189,6 +190,7 @@
 		666E0D4925664EE7000B8AF5 /* LayerPositionExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LayerPositionExample.swift; sourceTree = "<group>"; };
 		73694BD225D4B2CE0064F636 /* TrackingModeExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TrackingModeExample.swift; sourceTree = "<group>"; };
 		73E27C2527AF024C0067F277 /* DataJoinExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DataJoinExample.swift; sourceTree = "<group>"; };
+		7406E36F2806B66F002CC41F /* ResizableImageExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ResizableImageExample.swift; sourceTree = "<group>"; };
 		7412CF6127E8DD1E00F03B1C /* AddOneMarkerSymbolExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AddOneMarkerSymbolExample.swift; sourceTree = "<group>"; };
 		7412CF6327E8EA2A00F03B1C /* CircleAnnotationExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CircleAnnotationExample.swift; sourceTree = "<group>"; };
 		7412CF6527E9A7FF00F03B1C /* CLLocationCoordinate2D+Random.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "CLLocationCoordinate2D+Random.swift"; sourceTree = "<group>"; };
@@ -285,6 +287,8 @@
 			isa = PBXGroup;
 			children = (
 				B58E470827BABE0E00D87FD6 /* AdvancedViewportGesturesExample.swift */,
+				7406E36E2806B659002CC41F /* Lab */,
+				7412CF6027E8DCFB00F03B1C /* Annotations */,
 				58A3C0C825C4B93600CAE5F0 /* AnimateGeoJSONLineExample.swift */,
 				17B480592684FB2300CF0D5E /* AnimateImageLayerExample.swift */,
 				07DBDC91254C94C500F89304 /* AnimateLayerExample.swift */,
@@ -427,6 +431,14 @@
 			path = Radar;
 			sourceTree = "<group>";
 		};
+		7406E36E2806B659002CC41F /* Lab */ = {
+			isa = PBXGroup;
+			children = (
+				7406E36F2806B66F002CC41F /* ResizableImageExample.swift */,
+			);
+			path = Lab;
+			sourceTree = "<group>";
+		};
 		7412CF6027E8DCFB00F03B1C /* Annotations */ = {
 			isa = PBXGroup;
 			children = (
@@ -649,6 +661,7 @@
 				17E28C5C2672A1160033DF0F /* SymbolClusteringExample.swift in Sources */,
 				CADCF733258499130065C51B /* Examples.swift in Sources */,
 				CADCF743258499570065C51B /* BasicMapExample.swift in Sources */,
+				7406E3702806B66F002CC41F /* ResizableImageExample.swift in Sources */,
 				17B40D2426A85500000887EF /* LiveDataExample.swift in Sources */,
 				CADCF7242584990E0065C51B /* AnimateLayerExample.swift in Sources */,
 				073475D725AFAE520049B0B8 /* CustomLayerExample.swift in Sources */,
diff --git a/Apps/Examples/Examples/All Examples/Annotations/AddMarkersSymbolExample.swift b/Apps/Examples/Examples/All Examples/Annotations/AddMarkersSymbolExample.swift
@@ -40,8 +40,8 @@ final class AddMarkersSymbolExample: UIViewController, ExampleProtocol {
 
     private func prepareStyle() {
         let style = mapView.mapboxMap.style
-        try? style.addImage(UIImage(named: "blue_marker_view")!, id: Constants.BLUE_ICON_ID, stretchX: [], stretchY: [])
-        try? style.addImage(UIImage(named: "red_marker")!, id: Constants.RED_ICON_ID, stretchX: [], stretchY: [])
+        try? style.addImage(UIImage(named: "blue_marker_view")!, id: Constants.BLUE_ICON_ID)
+        try? style.addImage(UIImage(named: "red_marker")!, id: Constants.RED_ICON_ID)
 
         var features = [Feature]()
         var feature = Feature(geometry: Point(LocationCoordinate2D(latitude: 55.608166, longitude: 12.65147)))
diff --git a/Apps/Examples/Examples/All Examples/Annotations/AddOneMarkerSymbolExample.swift b/Apps/Examples/Examples/All Examples/Annotations/AddOneMarkerSymbolExample.swift
@@ -32,7 +32,7 @@ final class AddOneMarkerSymbolExample: UIViewController, ExampleProtocol {
     }
 
     private func addMarkerAnnotation(toStyle style: Style) {
-        try? style.addImage(UIImage(named: "blue_marker_view")!, id: Constants.BLUE_ICON_ID, stretchX: [], stretchY: [])
+        try? style.addImage(UIImage(named: "blue_marker_view")!, id: Constants.BLUE_ICON_ID)
 
         var source = GeoJSONSource()
         source.data = .geometry(Geometry.point(Point(Constants.coordinate)))
diff --git a/Apps/Examples/Examples/All Examples/Annotations/AnimatedMarkerExample.swift b/Apps/Examples/Examples/All Examples/Annotations/AnimatedMarkerExample.swift
@@ -62,7 +62,7 @@ final class AnimatedMarkerExample: UIViewController, ExampleProtocol {
     }
 
     private func setupExample() {
-        try? mapView.mapboxMap.style.addImage(UIImage(named: "red_marker")!, id: Constants.markerIconId, stretchX: [], stretchY: [])
+        try? mapView.mapboxMap.style.addImage(UIImage(named: "red_marker")!, id: Constants.markerIconId)
 
         // Create a GeoJSON data source.
         var source = GeoJSONSource()
diff --git a/Apps/Examples/Examples/All Examples/Annotations/IconSizeChangeExample.swift b/Apps/Examples/Examples/All Examples/Annotations/IconSizeChangeExample.swift
@@ -48,7 +48,7 @@ final class IconSizeChangeExample: UIViewController, ExampleProtocol {
         try? mapView.mapboxMap.style.addSource(markerSource, id: Constants.markerSourceId)
 
         // Add marker image to the map
-        try? mapView.mapboxMap.style.addImage(UIImage(named: "blue_marker_view")!, id: Constants.blueMarkerImageId, stretchX: [], stretchY: [])
+        try? mapView.mapboxMap.style.addImage(UIImage(named: "blue_marker_view")!, id: Constants.blueMarkerImageId)
 
         // Create a symbol layer for markers
         var markerLayer = SymbolLayer(id: Constants.markerLayerId)
diff --git a/Apps/Examples/Examples/All Examples/Annotations/SymbolClusteringExample.swift b/Apps/Examples/Examples/All Examples/Annotations/SymbolClusteringExample.swift
@@ -37,11 +37,7 @@ class SymbolClusteringExample: UIViewController, ExampleProtocol {
         // Add the image tp the map's style. Set `sdf` to `true`. This allows the icon images to be recolored.
         // For more information about `SDF`, or Signed Distance Fields, see
         // https://docs.mapbox.com/help/troubleshooting/using-recolorable-images-in-mapbox-maps/#what-are-signed-distance-fields-sdf
-        try! style.addImage(image,
-                            id: "fire-station-icon",
-                            sdf: true,
-                            stretchX: [],
-                            stretchY: [])
+        try! style.addImage(image, id: "fire-station-icon", sdf: true)
 
         // Fire_Hydrants.geojson contains information about fire hydrants in the District of Columbia.
         // It was downloaded on 6/10/21 from https://opendata.dc.gov/datasets/DCGIS::fire-hydrants/about
diff --git a/Apps/Examples/Examples/All Examples/Annotations/ViewAnnotationMarkerExample.swift b/Apps/Examples/Examples/All Examples/Annotations/ViewAnnotationMarkerExample.swift
@@ -110,7 +110,7 @@ final class ViewAnnotationMarkerExample: UIViewController, ExampleProtocol {
 
     private func prepareStyle() {
         let style = mapView.mapboxMap.style
-        try? style.addImage(image, id: Constants.BLUE_ICON_ID, stretchX: [], stretchY: [])
+        try? style.addImage(image, id: Constants.BLUE_ICON_ID)
 
         var source = GeoJSONSource()
         source.data = .featureCollection(FeatureCollection(features: pointList))
diff --git a/Apps/Examples/Examples/All Examples/Annotations/ViewAnnotationWithPointAnnotationExample.swift b/Apps/Examples/Examples/All Examples/Annotations/ViewAnnotationWithPointAnnotationExample.swift
@@ -31,7 +31,7 @@ final class ViewAnnotationWithPointAnnotationExample: UIViewController, ExampleP
         mapView.mapboxMap.onNext(.mapLoaded) { [weak self] _ in
             guard let self = self else { return }
 
-            try? self.mapView.mapboxMap.style.addImage(self.image, id: Constants.blueIconId, stretchX: [], stretchY: [])
+            try? self.mapView.mapboxMap.style.addImage(self.image, id: Constants.blueIconId)
             self.addPointAndViewAnnotation(at: self.mapView.mapboxMap.coordinate(for: self.mapView.center))
 
             // The below line is used for internal testing purposes only.
diff --git a/Apps/Examples/Examples/All Examples/DataDrivenSymbolsExample.swift b/Apps/Examples/Examples/All Examples/DataDrivenSymbolsExample.swift
@@ -30,18 +30,9 @@ public class DataDrivenSymbolsExample: UIViewController, ExampleProtocol {
 
         // Add icons from the U.S. National Parks Service to the map's style.
         // Icons are located in the asset catalog
-        try! mapView.mapboxMap.style.addImage(UIImage(named: "nps-restrooms")!,
-                                              id: "restrooms",
-                                              stretchX: [],
-                                              stretchY: [])
-        try! mapView.mapboxMap.style.addImage(UIImage(named: "nps-trailhead")!,
-                                              id: "trailhead",
-                                              stretchX: [],
-                                              stretchY: [])
-        try! mapView.mapboxMap.style.addImage(UIImage(named: "nps-picnic-area")!,
-                                              id: "picnic-area",
-                                              stretchX: [],
-                                              stretchY: [])
+        try! mapView.mapboxMap.style.addImage(UIImage(named: "nps-restrooms")!, id: "restrooms")
+        try! mapView.mapboxMap.style.addImage(UIImage(named: "nps-trailhead")!, id: "trailhead")
+        try! mapView.mapboxMap.style.addImage(UIImage(named: "nps-picnic-area")!, id: "picnic-area")
 
         // Access a vector tileset that contains places of interest at Yosemite National Park.
         // This tileset was created by uploading NPS shapefiles to Mapbox Studio.
diff --git a/Apps/Examples/Examples/All Examples/Lab/ResizableImageExample.swift b/Apps/Examples/Examples/All Examples/Lab/ResizableImageExample.swift
@@ -0,0 +1,110 @@
+import Foundation
+import UIKit
+import MapboxMaps
+
+/// An example showcasing of adding a resizable image to the style
+/// and demonstrating how the image is stretched
+@objc(ResizableImageExample)
+final class ResizableImageExample: UIViewController, ExampleProtocol {
+    private static let center = CLLocationCoordinate2DMake(55.70651, 12.554729)
+    private static let layerId = "layer_id"
+    private static let textBase = "Hi! "
+
+    private lazy var mapView: MapView = {
+        let mapInitOptions = MapInitOptions(cameraOptions: CameraOptions(center: Self.center, zoom: 9))
+        let mapView = MapView(frame: view.bounds, mapInitOptions: mapInitOptions)
+        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        return mapView
+    }()
+    private var style: Style { mapView.mapboxMap.style }
+
+    private var appendTextCounter = 1
+    private var symbolLayer: SymbolLayer!
+    private weak var timer: Timer? {
+        didSet { oldValue?.invalidate() }
+    }
+
+    // MARK: - Lifecycle
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        view.addSubview(mapView)
+
+        mapView.mapboxMap.onNext(.mapLoaded) { _ in
+            self.setupExample()
+            self.startUpdatingIconText()
+        }
+    }
+
+    override func viewDidAppear(_ animated: Bool) {
+        super.viewDidAppear(animated)
+        // The below line is used for internal testing purposes only.
+        finish()
+    }
+
+    override func didMove(toParent parent: UIViewController?) {
+        super.didMove(toParent: parent)
+
+        if parent == nil {
+            timer = nil
+        }
+    }
+
+    // MARK: - Private
+
+    private func setupExample() {
+        let geoJSONSourceId = "source_id"
+
+        // create an image of a circle and specify the corners that should remain unchanged
+        let image = UIImage(named: "circle")!
+            .resizableImage(withCapInsets: UIEdgeInsets(top: 12, left: 12, bottom: 12, right: 12))
+        try? style.addImage(image, id: "circle")
+
+        // add a GeoJSON source with a single point to the style
+        var source = GeoJSONSource()
+        source.data = .feature(Feature(geometry: Point(Self.center)))
+
+        try? style.addSource(source, id: geoJSONSourceId)
+
+        // add a symbol layer with the resizable icon image
+        symbolLayer = SymbolLayer(id: Self.layerId)
+        symbolLayer.source = geoJSONSourceId
+        symbolLayer.iconImage = .constant(.name("circle"))
+        // make sure the icon image is stretched both vertically and horizontally
+        symbolLayer.iconTextFit = .constant(.both)
+        symbolLayer.iconTextFitPadding = .constant([10, 10, 10, 10])
+        symbolLayer.textField = .constant(Self.textBase)
+
+        try? style.addLayer(symbolLayer, layerPosition: .default)
+    }
+
+    private func startUpdatingIconText() {
+        Timer.scheduledTimer(timeInterval: 1.5, target: self, selector: #selector(updateIconText), userInfo: nil, repeats: true)
+    }
+
+    // Append some text to the layer's textField, stretching the icon image in both X and Y axes
+    @objc private func updateIconText() {
+        guard style.isLoaded else {
+            return
+        }
+
+        let layer = try? style.layer(withId: Self.layerId, type: SymbolLayer.self)
+
+        guard case .expression(let expression) = layer?.textField else {
+            return
+        }
+
+        appendTextCounter += 1
+
+        guard let textLabel = expression.arguments.first?.description
+            .appending(Self.textBase)
+            .appending(appendTextCounter % 3 == 0 ? "\n" : "") else {
+            return
+        }
+
+        try? style.updateLayer(withId: Self.layerId, type: SymbolLayer.self) { layer in
+            layer.textField = .constant(textLabel)
+        }
+    }
+}
diff --git a/Apps/Examples/Examples/Assets.xcassets/circle.imageset/Contents.json b/Apps/Examples/Examples/Assets.xcassets/circle.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "circle.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Apps/Examples/Examples/Assets.xcassets/circle.imageset/circle.png b/Apps/Examples/Examples/Assets.xcassets/circle.imageset/circle.png
diff --git a/Apps/Examples/Examples/Models/Examples.swift b/Apps/Examples/Examples/Models/Examples.swift
@@ -25,6 +25,10 @@ struct Examples {
             "title": "Camera",
             "examples": cameraExamples
         ],
+        [
+            "title": "Lab",
+            "examples": labExamples
+        ],
         [
             "title": "Location",
             "examples": locationExamples
@@ -153,8 +157,15 @@ struct Examples {
 
     ]
 
+    // Miscellaneous examples
+    public static let labExamples = [
+        Example(title: "Resizable image",
+                description: "Add a resizable image with cap insets to a style.",
+                type: ResizableImageExample.self)
+    ]
+
     // Examples focused on displaying the user's location.
-    static let locationExamples = [
+    public static let locationExamples = [
         Example(title: "Display the user's location",
                 description: "Display the user's location on a map with the default user location puck.",
                 type: TrackingModeExample.self),
diff --git a/Sources/MapboxMaps/Annotations/PointAnnotation+ImageHandling.swift b/Sources/MapboxMaps/Annotations/PointAnnotation+ImageHandling.swift
@@ -21,7 +21,7 @@ extension PointAnnotationManager {
             // If the image is not found, add it to the style
             if style.image(withId: pointAnnotationImage.name) == nil {
                 do {
-                    try style.addImage(pointAnnotationImage.image, id: pointAnnotationImage.name, stretchX: [], stretchY: [])
+                    try style.addImage(pointAnnotationImage.image, id: pointAnnotationImage.name)
                 } catch {
                     Log.warning(
                         forMessage: "Could not add image to style in PointAnnotationManager due to error: \(error)",
diff --git a/Sources/MapboxMaps/Style/Style.swift b/Sources/MapboxMaps/Style/Style.swift
@@ -1,6 +1,7 @@
 // swiftlint:disable file_length
 @_implementationOnly import MapboxCommon_Private
 @_implementationOnly import MapboxCoreMaps_Private
+import UIKit
 
 internal protocol StyleProtocol: AnyObject {
     func addPersistentLayer(_ layer: Layer, layerPosition: LayerPosition?) throws
@@ -681,6 +682,9 @@ public final class Style: StyleProtocol {
     /// [`fill-pattern`](https://www.mapbox.com/mapbox-gl-js/style-spec/#paint-fill-fill-pattern), and
     /// [`line-pattern`](https://www.mapbox.com/mapbox-gl-js/style-spec/#paint-line-line-pattern).
     ///
+    /// For more information on how `stretchX` and `stretchY` parameters affect image stretching
+    /// see [this Mapbox GL-JS example](https://docs.mapbox.com/mapbox-gl-js/example/add-image-stretchable).
+    ///
     /// - Parameters:
     ///   - image: Image to add.
     ///   - id: ID of the image.
@@ -721,6 +725,46 @@ public final class Style: StyleProtocol {
         }
     }
 
+    /// Adds an image to be used in the style.
+    ///
+    /// If the image has non-zero `UIImage.capInsets` it will be stretched accordingly,
+    /// regardless of the value in `UIImage.resizingMode`.
+    ///
+    /// - Parameters:
+    ///   - image: Image to add.
+    ///   - id: ID of the image.
+    ///   - sdf: Option to treat whether image is SDF(signed distance field) or not.
+    ///         Setting this to `true` allows template images to be recolored. The
+    ///         default value is `false`.
+    ///   - contentInsets: The distances the edges of content are inset from the image rectangle.
+    ///         If present, and if the icon uses icon-text-fit, the
+    ///         symbol's text will be fit inside the content box.
+    ///
+    /// - Throws:
+    ///     An error describing why the operation was unsuccessful.
+    public func addImage(_ image: UIImage, id: String, sdf: Bool = false, contentInsets: UIEdgeInsets = .zero) throws {
+        let scale = Float(image.scale)
+        let stretchXFirst = Float(image.capInsets.left) * scale
+        let stretchXSecond = Float(image.size.width - image.capInsets.right) * scale
+        let stretchYFirst = Float(image.capInsets.top) * scale
+        let stretchYSecond = Float(image.size.height - image.capInsets.bottom) * scale
+
+        let contentBoxLeft = Float(contentInsets.left) * scale
+        let contentBoxRight = Float(image.size.width - contentInsets.right) * scale
+        let contentBoxTop = Float(contentInsets.top) * scale
+        let contentBoxBottom = Float(image.size.height - contentInsets.bottom) * scale
+
+        let contentBox = ImageContent(left: contentBoxLeft,
+                                      top: contentBoxTop,
+                                      right: contentBoxRight,
+                                      bottom: contentBoxBottom)
+        try addImage(image,
+                     id: id,
+                     stretchX: [ImageStretches(first: stretchXFirst, second: stretchXSecond)],
+                     stretchY: [ImageStretches(first: stretchYFirst, second: stretchYSecond)],
+                     content: contentBox)
+    }
+
     /// Removes an image from the style.
     ///
     /// - Parameter id: ID of the image to remove.

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ final class AddOneMarkerSymbolExample: UIViewController, ExampleProtocol {`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`private func addMarkerAnnotation(toStyle style: Style) {`
`35`		`- try? style.addImage(UIImage(named: "blue_marker_view")!, id: Constants.BLUE_ICON_ID, stretchX: [], stretchY: [])`
	`35`	`+ try? style.addImage(UIImage(named: "blue_marker_view")!, id: Constants.BLUE_ICON_ID)`
`36`	`36`
`37`	`37`	`var source = GeoJSONSource()`
`38`	`38`	`source.data = .geometry(Geometry.point(Point(Constants.coordinate)))`
Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,7 @@ final class AnimatedMarkerExample: UIViewController, ExampleProtocol {`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`private func setupExample() {`
`65`		`- try? mapView.mapboxMap.style.addImage(UIImage(named: "red_marker")!, id: Constants.markerIconId, stretchX: [], stretchY: [])`
	`65`	`+ try? mapView.mapboxMap.style.addImage(UIImage(named: "red_marker")!, id: Constants.markerIconId)`
`66`	`66`
`67`	`67`	`// Create a GeoJSON data source.`
`68`	`68`	`var source = GeoJSONSource()`