Merge pull request #69 from componentskit/UKCircularProgress

UKCircularProgress

Author: mikhailChelbaev

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

@@ -6,24 +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)
-          Text("Medium").tag(UniversalFont.mdButton)
-          Text("Large").tag(UniversalFont.lgButton)
-          Text("Custom: system bold of size 16").tag(UniversalFont.system(size: 16, weight: .bold))
-        }
+        CaptionFontPicker(selection: self.$model.font)
         Picker("Line Width", selection: self.$model.lineWidth) {
           Text("Default").tag(Optional<CGFloat>.none)
           Text("2").tag(Optional<CGFloat>.some(2))
@@ -56,8 +68,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

@@ -81,24 +81,24 @@ extension CircularProgressVM {
       return .lgCaption
     }
   }
+  var stripeWidth: CGFloat {
+    return 0.5
+  }
   private func stripesCGPath(in rect: CGRect) -> CGMutablePath {
-    let stripeWidth: CGFloat = 0.5
     let stripeSpacing: CGFloat = 3
     let stripeAngle: Angle = .degrees(135)
 
     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 dx: CGFloat = rect.height * tan(radians)
+    for x in stride(from: 0, 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 bottomRight = CGPoint(x: x + dx, y: rect.height)
+
       path.move(to: topLeft)
-      path.addLine(to: topRight)
       path.addLine(to: bottomRight)
-      path.addLine(to: bottomLeft)
       path.closeSubpath()
     }
     return path
@@ -107,37 +107,71 @@ extension CircularProgressVM {
 
 extension CircularProgressVM {
   func gap(for normalized: CGFloat) -> CGFloat {
-    normalized > 0 ? 0.05 : 0
+    return normalized > 0 ? 0.05 : 0
   }
 
-  func progressArcStart(for normalized: CGFloat) -> CGFloat {
-    return 0
-  }
-
-  func progressArcEnd(for normalized: CGFloat) -> CGFloat {
-    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 {
+  var isStripesLayerHidden: Bool {
+    switch self.style {
+    case .light:
+      return true
+    case .striped:
+      return false
+    }
+  }
+  var isBackgroundLayerHidden: Bool {
+    switch self.style {
+    case .light:
+      return false
+    case .striped:
+      return true
+    }
+  }
+  func stripesBezierPath(in rect: CGRect) -> UIBezierPath {
+    let center = CGPoint(x: rect.midX, y: rect.midY)
+    let path = UIBezierPath(cgPath: self.stripesCGPath(in: rect))
+    var transform = CGAffineTransform.identity
+    transform = transform
+      .translatedBy(x: center.x, y: center.y)
+      .rotated(by: -CGFloat.pi / 2)
+      .translatedBy(x: -center.x, y: -center.y)
+    path.apply(transform)
+    return path
+  }
+  func shouldInvalidateIntrinsicContentSize(_ oldModel: Self) -> Bool {
+    return self.preferredSize != oldModel.preferredSize
+  }
+  func shouldUpdateText(_ oldModel: Self) -> Bool {
+    return self.label != oldModel.label
+  }
+  func shouldRecalculateProgress(_ oldModel: Self) -> Bool {
+    return self.minValue != oldModel.minValue
+    || self.maxValue != oldModel.maxValue
+  }
+}
+
 // MARK: - SwiftUI Helpers
 
 extension CircularProgressVM {

Sources/ComponentsKit/Components/CircularProgress/SUCircularProgress.swift

@@ -102,52 +102,33 @@ public struct SUCircularProgress: View {
   }
 
   var stripedBackground: some View {
-    Path { path in
-      path.addArc(
-        center: self.model.center,
-        radius: self.model.radius,
-        startAngle: .radians(0),
-        endAngle: .radians(2 * .pi),
-        clockwise: false
-      )
-    }
-    .trim(
-      from: self.model.backgroundArcStart(for: self.progress),
-      to: self.model.backgroundArcEnd(for: self.progress)
-    )
-    .stroke(
-      .clear,
-      style: StrokeStyle(
-        lineWidth: self.model.circularLineWidth,
-        lineCap: .round
+    StripesShapeCircularProgress(model: self.model)
+      .stroke(
+        self.model.color.main.color,
+        style: StrokeStyle(lineWidth: self.model.stripeWidth)
       )
-    )
-    .overlay {
-      StripesShapeCircularProgress(model: self.model)
-        .foregroundColor(self.model.color.main.color)
-        .mask {
-          Path { maskPath in
-            maskPath.addArc(
-              center: self.model.center,
-              radius: self.model.radius,
-              startAngle: .radians(0),
-              endAngle: .radians(2 * .pi),
-              clockwise: false
-            )
-          }
-          .trim(
-            from: self.model.backgroundArcStart(for: self.progress),
-            to: self.model.backgroundArcEnd(for: self.progress)
-          )
-          .stroke(
-            style: StrokeStyle(
-              lineWidth: self.model.circularLineWidth,
-              lineCap: .round
-            )
+      .mask {
+        Path { maskPath in
+          maskPath.addArc(
+            center: self.model.center,
+            radius: self.model.radius,
+            startAngle: .radians(0),
+            endAngle: .radians(2 * .pi),
+            clockwise: false
           )
         }
-    }
-    .rotationEffect(.degrees(-90))
+        .trim(
+          from: self.model.stripedArcStart(for: self.progress),
+          to: self.model.stripedArcEnd(for: self.progress)
+        )
+        .stroke(
+          style: StrokeStyle(
+            lineWidth: self.model.circularLineWidth,
+            lineCap: .round
+          )
+        )
+      }
+      .rotationEffect(.degrees(-90))
   }
 }