drawing line

MVMCoreUI/Atomic/Molecules/VerticalCombinationViews/Order Tracker/OrderTracker.swift

@@ -22,11 +22,13 @@ open class OrderTracker: View {
     
     open override func setupView() {
         super.setupView()
+        isOpaque = false
     }
     
     open override func reset() {
         super.reset()
-        removeSteps()
+        
+        resetSteps()
     }
     
     //--------------------------------------------------
@@ -35,7 +37,7 @@ open class OrderTracker: View {
     
     func constrain(stepModels: [StepModel]?, delegateObject: MVMCoreUIDelegateObject?, additionalData: [AnyHashable: Any]?) {
         
-        removeSteps()
+        resetSteps()
         
         guard let stepModels = stepModels else { return }
         
@@ -46,6 +48,7 @@ open class OrderTracker: View {
             let step = Step()
             step.set(with: stepModel, delegateObject, additionalData)
             addSubview(step)
+            steps.append(step)
             
             step.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
             trailingAnchor.constraint(equalTo: step.trailingAnchor).isActive = true
@@ -57,36 +60,49 @@ open class OrderTracker: View {
                 step.topAnchor.constraint(equalTo: previousStep.bottomAnchor).isActive = true
             }
             
-            if i == steps.count - 1 {
+            if i == stepModels.count - 1 {
                 bottomAnchor.constraint(equalTo: step.bottomAnchor).isActive = true
+                step.imageBottomConstraint?.isActive = false
             }
             
             previousStep = step
         }
     }
     
-    func removeSteps() {
+    func resetSteps() {
         
-        steps.forEach { $0.removeFromSuperview() }
+        steps.forEach {
+            $0.reset()
+            $0.removeFromSuperview()
+        }
         steps = []
     }
     
     //--------------------------------------------------
     // MARK: - Draw
     //--------------------------------------------------
-
+    
     open override func draw(_ rect: CGRect) {
-
+        
-        guard let context = UIGraphicsGetCurrentContext() else { return }
+        guard let context = UIGraphicsGetCurrentContext(), let firstStep = steps.first else { return }
         
         context.setLineWidth(1)
-        context.move(to: steps.first!.imageCenterPoint)
+        let firstRect = convert(firstStep.stateImage.frame, from: firstStep.stateImage)
+        let imageDimension = firstStep.stateImage.bounds.height
+        let startPoint = CGPoint(x: imageDimension / 2, y: firstRect.size.height - 1)
+        context.move(to: startPoint)
         
-        for step in steps.dropLast() {
+        for step in steps.dropFirst() {
             
             context.setStrokeColor((step.state?.color() ?? .mvmCoolGray3).cgColor)
-            context.addLine(to: convert(step.imageCenterPoint, from: step))
+            let relativeOrigin = convert(step.stateImage.frame, from: step.stateImage)
+            let point = CGPoint(x: imageDimension / 2, y: relativeOrigin.origin.y)
+            
+            context.addLine(to: point)
             context.strokePath()
+            
+            let nextPoint = CGPoint(x: imageDimension / 2, y: relativeOrigin.origin.y + imageDimension)
+            context.move(to: nextPoint)
         }
     }
     

MVMCoreUI/Atomic/Molecules/VerticalCombinationViews/Order Tracker/Step.swift

@@ -23,6 +23,12 @@ open class Step: View {
     // MARK: - Computed Properties
     //--------------------------------------------------
     
+    public var imageBottomConstraint: NSLayoutConstraint?
+    
+    //--------------------------------------------------
+    // MARK: - Computed Properties
+    //--------------------------------------------------
+    
     public var stepModel: StepModel? {
         return model as? StepModel
     }
@@ -31,10 +37,6 @@ open class Step: View {
         return stepModel?.state
     }
     
-    public var imageCenterPoint: CGPoint {
-        return stateImage.center
-    }
-    
     //--------------------------------------------------
     // MARK: - Life Cycle
     //--------------------------------------------------
@@ -51,7 +53,8 @@ open class Step: View {
         stateImage.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
         stateImage.heightAnchor.constraint(equalToConstant: 18).isActive = true
         stateImage.widthAnchor.constraint(equalToConstant: 18).isActive = true
-        bottomAnchor.constraint(greaterThanOrEqualTo: stateImage.bottomAnchor, constant: Padding.Ten).isActive = true
+        imageBottomConstraint = bottomAnchor.constraint(greaterThanOrEqualTo: stateImage.bottomAnchor, constant: Padding.Ten)
+        imageBottomConstraint?.isActive = true
         
         headline.topAnchor.constraint(equalTo: topAnchor).isActive = true
         headline.leadingAnchor.constraint(equalTo: stateImage.trailingAnchor, constant: Padding.Four).isActive = true
@@ -76,6 +79,7 @@ open class Step: View {
         bodyTop.text = ""
         bodyBottom.text = ""
         stateImage.image = nil
+        imageBottomConstraint?.isActive = true
     }
     
     //------------------------------------------------------