UKCircularProgress

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CircularProgressPreview.swift

@@ -6,17 +6,36 @@ struct CircularProgressPreview: View {
   @State private var model = Self.initialModel
   @State private var currentValue: CGFloat = Self.initialValue
 
+  private let circularProgress = UKCircularProgress(
+    model: Self.initialModel
+  )
+
   private let timer = Timer
     .publish(every: 0.5, on: .main, in: .common)
     .autoconnect()
-
+  
   var body: some View {
     VStack {
+      PreviewWrapper(title: "UIKit") {
+        self.circularProgress
+          .preview
+          .onAppear {
+            self.circularProgress.currentValue = Self.initialValue
+            self.circularProgress.model = Self.initialModel
+          }
+          .onChange(of: model) { newModel in
+            self.circularProgress.model = newModel
+          }
+          .onChange(of: self.currentValue) { newValue in
+            self.circularProgress.currentValue = newValue
+          }
+      }
       PreviewWrapper(title: "SwiftUI") {
         SUCircularProgress(currentValue: self.currentValue, model: self.model)
       }
       Form {
         ComponentColorPicker(selection: self.$model.color)
+
         Picker("Font", selection: self.$model.font) {
           Text("Default").tag(Optional<UniversalFont>.none)
           Text("Small").tag(UniversalFont.smButton)
@@ -56,8 +75,9 @@ struct CircularProgressPreview: View {
   private static var initialValue: Double {
     return 0.0
   }
+
   private static var initialModel = CircularProgressVM {
-    $0.label = "0"
+    $0.label = "0%"
     $0.style = .light
   }
 }

Sources/ComponentsKit/Components/CircularProgress/Models/CircularProgressVM.swift

@@ -89,12 +89,17 @@ extension CircularProgressVM {
     let path = CGMutablePath()
     let step = stripeWidth + stripeSpacing
     let radians = stripeAngle.radians
-    let dx = rect.height * tan(radians)
-    for x in stride(from: dx, through: rect.width + rect.height, by: step) {
-      let topLeft = CGPoint(x: x, y: 0)
-      let topRight = CGPoint(x: x + stripeWidth, y: 0)
-      let bottomLeft = CGPoint(x: x + dx, y: rect.height)
-      let bottomRight = CGPoint(x: x + stripeWidth + dx, y: rect.height)
+
+    let startY = -rect.width
+    let endY = rect.height + rect.width
+
+    for y in stride(from: startY, through: endY, by: step) {
+      let topLeft = CGPoint(x: 0, y: y)
+      let topRight = CGPoint(x: 0, y: y + stripeWidth)
+
+      let bottomLeft  = CGPoint(x: rect.width, y: y + tan(radians) * rect.width)
+      let bottomRight = CGPoint(x: rect.width, y: (y + stripeWidth) + tan(radians) * rect.width)
+
       path.move(to: topLeft)
       path.addLine(to: topRight)
       path.addLine(to: bottomRight)
@@ -118,26 +123,37 @@ extension CircularProgressVM {
     return max(0, min(1, normalized))
   }
 
-  func backgroundArcStart(for normalized: CGFloat) -> CGFloat {
+  func stripedArcStart(for normalized: CGFloat) -> CGFloat {
     let gapValue = self.gap(for: normalized)
     return max(0, min(1, normalized + gapValue))
   }
 
-  func backgroundArcEnd(for normalized: CGFloat) -> CGFloat {
+  func stripedArcEnd(for normalized: CGFloat) -> CGFloat {
     let gapValue = self.gap(for: normalized)
     return 1 - gapValue
   }
 }
 
 extension CircularProgressVM {
-  public func progress(for currentValue: CGFloat) -> CGFloat {
+  func progress(for currentValue: CGFloat) -> CGFloat {
     let range = self.maxValue - self.minValue
     guard range > 0 else { return 0 }
     let normalized = (currentValue - self.minValue) / range
     return max(0, min(1, normalized))
   }
 }
 
+// MARK: - UIKit Helpers
+
+extension CircularProgressVM {
+  func stripesBezierPath(in rect: CGRect) -> UIBezierPath {
+    return UIBezierPath(cgPath: self.stripesCGPath(in: rect))
+  }
+  func shouldInvalidateIntrinsicContentSize(_ oldValue: Self) -> Bool {
+    return self.preferredSize != oldValue.preferredSize
+  }
+}
+
 // MARK: - SwiftUI Helpers
 
 extension CircularProgressVM {

Sources/ComponentsKit/Components/CircularProgress/SUCircularProgress.swift

@@ -112,8 +112,8 @@ public struct SUCircularProgress: View {
       )
     }
     .trim(
-      from: self.model.backgroundArcStart(for: self.progress),
-      to: self.model.backgroundArcEnd(for: self.progress)
+      from: self.model.stripedArcStart(for: self.progress),
+      to: self.model.stripedArcEnd(for: self.progress)
     )
     .stroke(
       .clear,
@@ -136,8 +136,8 @@ public struct SUCircularProgress: View {
             )
           }
           .trim(
-            from: self.model.backgroundArcStart(for: self.progress),
-            to: self.model.backgroundArcEnd(for: self.progress)
+            from: self.model.stripedArcStart(for: self.progress),
+            to: self.model.stripedArcEnd(for: self.progress)
           )
           .stroke(
             style: StrokeStyle(