The background mask cuts off part of the foreground layer

Question

Recently ran into a problem in one of my tasks. I tried to solve this problem for two days. Finally I came here.

I have a custom progress view. Don't look at the colors, they are so awful just for the debugging process to see better. [the look I have now] 1 [the look I want to have] 2

As you can see, there is a red dot at the end of the progress layer, but it is cut at the top and bottom ... And it shouldn't be like that ...

Also I will leave here all the code I have, maybe someone can help me.

Thank you all in advance for your time.

import UIKit

class PlainProgressBar: UIView {
    //MARK: - Private
    //colour of progress layer : default -> white
    private var color: UIColor = .white {
        didSet { setNeedsDisplay() }
    }

    // progress numerical value
    private var progress: CGFloat = 0.0 {
        didSet { setNeedsDisplay() }
    }
    
    private var height : CGFloat = 0.0 {
        didSet{ setNeedsDisplay() }
    }
    
    
    private let progressLayer = CALayer()
    private let dotLayer = CALayer()
    private let backgroundMask = CAShapeLayer()
    
    private func setupLayers() {
        layer.addSublayer(progressLayer)
        layer.addSublayer(dotLayer)
    }
    
    //MARK:- Public
    // set color for progress layer
    func setColor(progressLayer color: UIColor){
        self.color = color
    }
    
    func set(progress: CGFloat){
        if progress > 1.0{
            self.progress = 1.0
        }
        if progress < 0.0{
            self.progress = 0.0
        }
        if progress >= 0.0 && progress <= 1.0{
            self.progress = progress
        }
    }
    
    func set(height: CGFloat){
        self.height = height
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayers()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayers()
    }
    
    //Main draw function for view
    override func draw(_ rect: CGRect) {
        backgroundMask.path = UIBezierPath(roundedRect: CGRect(origin: .zero, size: CGSize(width: rect.width, height: height)), cornerRadius: rect.height * 0.25).cgPath
        layer.mask = backgroundMask
        
        let dotOnProgressLayer = CGRect(origin: .zero, size: CGSize(width: 10.0, height: 10.0))
        let progressRect = CGRect(origin: .zero, size: CGSize(width: rect.width * progress, height: height))
        
        progressLayer.frame = progressRect
        progressLayer.backgroundColor = color.cgColor
        dotLayer.frame = dotOnProgressLayer
        dotLayer.cornerRadius = dotLayer.bounds.width * 0.5
        dotLayer.backgroundColor = #colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1).cgColor
        dotLayer.position = CGPoint(x: progressLayer.frame.width ,y: progressLayer.frame.height / 2)
    }

}

  progressView.set(height: 4.5)
        progressView.setColor(progressLayer: UIColor(ciColor: .green))

Answer 1

You are masking the views layer with

layer.mask = backgroundMask

So anything outside the mask will no be drawn.