Style update for real-time vehicle position (#407)

* Slightly rounded shape for vehicle icon on map

* Style tweak for design specs

* Fix double shadow

Author: nighthawk

Sources/TripKitUI/views/map annotations/TKUIVehicleAnnotationView.swift

@@ -13,15 +13,33 @@ import MapKit
 
 import TripKit
 
+protocol TKUIVehicleAnnotation: MKAnnotation {
+  var serviceColor: TKColor? { get }
+  var icon: String? { get }
+  var serviceNumber: String? { get }
+  var bearing: NSNumber? { get }
+  var componentsData: Data? { get }
+}
+
+extension TKUIVehicleAnnotation {
+  var serviceColor: TKColor? { nil }
+  var icon: String? { nil }
+  var serviceNumber: String? { nil }
+  var bearing: NSNumber? { nil }
+  var componentsData: Data? { nil }
+}
+
+extension Vehicle: TKUIVehicleAnnotation {}
+
 class TKUIVehicleAnnotationView: TKUIPulsingAnnotationView {
 
   private weak var vehicleShape: TKUIVehicleView?
   private weak var vehicleImageView: UIImageView?
   private weak var label: UILabel!
   private weak var wrapper: UIView!
 
-  private let vehicleWidth = CGFloat(30)
-  private let vehicleHeight = CGFloat(15)
+  private let vehicleWidth = CGFloat(38)
+  private let vehicleHeight = CGFloat(21)
 
   private let disposeBag = DisposeBag()
 
@@ -66,11 +84,11 @@ class TKUIVehicleAnnotationView: TKUIPulsingAnnotationView {
     }
 
     guard
-      let vehicle = annotation as? Vehicle else {
+      let vehicle = annotation as? TKUIVehicleAnnotation else {
       return // happens on getting removed.
     }
 
-    calloutOffset = CGPoint(x: 0, y: 10)
+    calloutOffset = CGPoint(x: 0, y: vehicleHeight / 2)
     frame = CGRect(x: 0, y: 0, width: 44, height: 44)
     backgroundColor = UIColor.clear
     isOpaque = false
@@ -95,6 +113,11 @@ class TKUIVehicleAnnotationView: TKUIPulsingAnnotationView {
       self.vehicleImageView = vehicleImageView
     } else {
       let vehicleShape = TKUIVehicleView(frame: vehicleRect, color: serviceColor)
+      vehicleShape.layer.shadowColor = UIColor.black.cgColor
+      vehicleShape.layer.shadowOpacity = 0.25
+      vehicleShape.layer.shadowRadius = 4
+      vehicleShape.layer.shadowOffset = CGSize(width: 0, height: 2)
+      vehicleShape.layer.masksToBounds = false
       vehicleView = vehicleShape
       self.vehicleShape = vehicleShape
     }
@@ -111,7 +134,7 @@ class TKUIVehicleAnnotationView: TKUIPulsingAnnotationView {
     label.isOpaque = false
     label.textAlignment = .center
     label.textColor = textColorForBackgroundColor(serviceColor)
-    label.font = TKStyleManager.customFont(forTextStyle: .caption2)
+    label.font = TKStyleManager.semiboldCustomFont(forTextStyle: .caption2)
     label.adjustsFontSizeToFitWidth = true
     label.minimumScaleFactor = 0.75
     wrapper.addSubview(label)
@@ -129,12 +152,13 @@ class TKUIVehicleAnnotationView: TKUIPulsingAnnotationView {
     observe(vehicle)
   }
 
-  private func observe(_ vehicle: Vehicle) {
+  private func observe(_ vehicle: TKUIVehicleAnnotation) {
+    guard let tkVehicle = vehicle as? Vehicle else { return }
 
     // Vehicle color needs to change following real-time update.
-    vehicle.rx.observeWeakly(Data.self, "componentsData")
+    tkVehicle.rx.observeWeakly(Data.self, "componentsData")
       .compactMap { data in
-        guard let data = data else { return nil }
+        guard let data else { return nil }
         let components = Vehicle.components(from: data)
         return TKAPI.VehicleOccupancy.average(in: components)?.0.color
       }
@@ -182,3 +206,23 @@ class TKUIVehicleAnnotationView: TKUIPulsingAnnotationView {
     return textColor
   }
 }
+
+#if DEBUG
+class PreviewVehicle: NSObject, TKUIVehicleAnnotation {
+  var coordinate: CLLocationCoordinate2D = .invalid
+  var serviceNumber: String?
+  
+  init(serviceNumber: String? = nil) {
+    self.serviceNumber = serviceNumber
+  }
+}
+
+@available(iOS 17.0, *)
+#Preview {
+  let wrapper = UIView(frame: .init(x: 0, y: 0, width: 300, height: 600))
+  let vehicleView = TKUIVehicleAnnotationView(with: PreviewVehicle(serviceNumber: "311"), reuseIdentifier: "")
+  vehicleView.frame = .init(x: 50, y: 100, width: 50, height: 50)
+  wrapper.addSubview(vehicleView)
+  return wrapper
+}
+#endif

Sources/TripKitUI/views/map annotations/TKUIVehicleView.swift

@@ -33,22 +33,68 @@ class TKUIVehicleView: UIView {
 
   override func draw(_ rect: CGRect) {
     guard let context = UIGraphicsGetCurrentContext() else { return }
-    context.setStrokeColor(red: 1, green: 1, blue: 1, alpha: 1) // white
-    context.setLineWidth(2)
-    context.setFillColor(red: components.r, green: components.g, blue: components.b, alpha: components.a)
+
+    context.setLineJoin(.round)
+    context.setLineCap(.round)
+
+    let rect = rect.insetBy(dx: 2, dy: 2)
+    let radius = sqrt(CGFloat(4))
 
+    // Prepare path, making it a bit less pointy
     let midmidX = rect.maxX - rect.midY
-    context.move(to: .init(x: rect.minX, y: rect.minY))
-    context.addLine(to: .init(x: midmidX, y: rect.minY))
-    context.addLine(to: .init(x: rect.maxX, y: rect.midY))
-    context.addLine(to: .init(x: midmidX, y: rect.maxY))
-    context.addLine(to: .init(x: rect.minX, y: rect.maxY))
-    context.addLine(to: .init(x: rect.minX, y: rect.minY))
-    context.closePath()
+    let path = UIBezierPath()
+    path.move(to: CGPoint(x: rect.minX + radius, y: rect.minY))
+    path.addLine(to: CGPoint(x: midmidX, y: rect.minY))
+    
+    // rounded tip
+    path.addLine(to: CGPoint(x: rect.maxX - 2, y: rect.midY - 1))
+    path.addArc(
+      withCenter: CGPoint(x: rect.maxX - 4, y: rect.midY),
+      radius: radius,
+      startAngle: .pi * 1.75,
+      endAngle: .pi * 0.25,
+      clockwise: true
+    )
+    path.addLine(to: CGPoint(x: rect.maxX - 2, y: rect.midY + 1))
+    
+    // bottom right-ish
+    path.addLine(to: CGPoint(x: midmidX, y: rect.maxY))
+    
+    // then a rounded corner at the bottom left
+    path.addLine(to: CGPoint(x: rect.minX + radius, y: rect.maxY))
+    path.addArc(
+      withCenter: CGPoint(x: rect.minX + radius, y: rect.maxY - radius),
+      radius: radius,
+      startAngle: .pi * 0.5,
+      endAngle: .pi,
+      clockwise: true
+    )
+    path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY - radius))
 
-    context.drawPath(using: .fillStroke)
+    // then a rounded corner at the top left
+    path.addLine(to: CGPoint(x: rect.minX, y: rect.minY + radius))
+    path.addArc(
+      withCenter: CGPoint(x: rect.minX + radius, y: rect.minY + radius),
+      radius: radius,
+      startAngle: .pi,
+      endAngle: .pi * 1.5,
+      clockwise: true
+    )
+    path.addLine(to: CGPoint(x: rect.minX + radius, y: rect.minY))
+
+    path.close()
+
+    // Fill the path
+    context.setFillColor(UIColor(red: components.r, green: components.g, blue: components.b, alpha: components.a).cgColor)
+    context.addPath(path.cgPath)
     context.fillPath()
+
+    // White outline on top
+    context.setLineWidth(2)
+    context.setStrokeColor(UIColor.white.cgColor)
+    context.addPath(path.cgPath)
     context.strokePath()
   }
 
 }
+