Pasted

 
// the main change to fix your issue...
//
// on zoom, we change the Width constraint of the Left Container View - based on the zoomScale
//   so it always matches the Width of the Left Scroll View frame
//
// made some other changes to try and help...
//   - changed object / var names for consistency (makes it easier to keep track of things)
//   - modified a few constraints - some were not needed
//   - re-organized some of the code for readability
//   - disabled .bouncesZoom for a better visual
 
import UIKit
 
class PianoViewController: UIViewController, UIScrollViewDelegate {
    
    let rightScrollView = UIScrollView()
    let rightPianoRollView = PianoRollView()
 
    let leftScrollView = UIScrollView()
    let leftPianoRollView = PianoRollViewl()
 
    let rightContainerView = UIView()
    let leftContainerView = UIView()
    
    // we will modify the left container width constraint when zooming
    //  so it always fills the left scroll view width
    // let's define the left container / subviews / scroll view width here
    let leftContainerWidth: CGFloat = 50
    var leftContainerWidthConstraint: NSLayoutConstraint!
 
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = UIColor.black
        
        // buttons will go under the PianoRollView
        let rightButtonsView = UIView()
        
        let leftButtonsView = UIView()
        
        // Add the UIScrollView to the view controller's view
        view.addSubview(rightScrollView)
        view.addSubview(leftScrollView)
        
        // Set the container view as the content view of the scroll view
        rightScrollView.addSubview(rightContainerView)
        leftScrollView.addSubview(leftContainerView)
        
        // add buttons views amd pianoRoll views to container views
        rightContainerView.addSubview(rightButtonsView)
        rightContainerView.addSubview(rightPianoRollView)
        
        leftContainerView.addSubview(leftButtonsView)
        leftContainerView.addSubview(leftPianoRollView)
        
        // we will use auto-layout on all views
        
        rightScrollView.translatesAutoresizingMaskIntoConstraints = false
        leftScrollView.translatesAutoresizingMaskIntoConstraints = false
        leftContainerView.translatesAutoresizingMaskIntoConstraints = false
        leftButtonsView.translatesAutoresizingMaskIntoConstraints = false
        leftPianoRollView.translatesAutoresizingMaskIntoConstraints = false
        rightContainerView.translatesAutoresizingMaskIntoConstraints = false
        rightButtonsView.translatesAutoresizingMaskIntoConstraints = false
        rightPianoRollView.translatesAutoresizingMaskIntoConstraints = false
        
        // we (almost) always want to respect the safe area
        let safeG = view.safeAreaLayoutGuide
        
        // we want to constrain scrollView subviews to the scrollView's Content Layout Guide
        let contentG = rightScrollView.contentLayoutGuide
        let contentgleft = leftScrollView.contentLayoutGuide
        
        // left pianoRollView width
        // auto-layout often complains (generates "breaking constraints" messages to the debug console)
        //  when views get sized dynamically - this will avoid those warning messages
        // we will activate it below
        let leftPianoRollWidthConstraint = leftPianoRollView.widthAnchor.constraint(equalToConstant: leftContainerWidth)
        leftPianoRollWidthConstraint.priority = .required - 1
 
        // we will be modifying this constraint when zooming
        leftContainerWidthConstraint = leftContainerView.widthAnchor.constraint(equalToConstant: leftContainerWidth)
 
        NSLayoutConstraint.activate([
            
            leftScrollView.leadingAnchor.constraint(equalTo: safeG.leadingAnchor),
            leftScrollView.topAnchor.constraint(equalTo: safeG.topAnchor),
            leftScrollView.bottomAnchor.constraint(equalTo: safeG.bottomAnchor),
            leftScrollView.widthAnchor.constraint(equalToConstant: leftContainerWidth),
 
            rightScrollView.leadingAnchor.constraint(equalTo: leftScrollView.trailingAnchor),
            rightScrollView.trailingAnchor.constraint(equalTo: safeG.trailingAnchor),
            rightScrollView.topAnchor.constraint(equalTo: safeG.topAnchor),
            rightScrollView.bottomAnchor.constraint(equalTo: safeG.bottomAnchor),
            
            leftContainerView.leadingAnchor.constraint(equalTo: contentgleft.leadingAnchor),
            leftContainerView.topAnchor.constraint(equalTo: contentgleft.topAnchor),
            leftContainerView.bottomAnchor.constraint(equalTo: contentgleft.bottomAnchor),
            // leftContainerView does NOT need a trailing anchor
            
            // activate leftContainerWidthConstraint
            leftContainerWidthConstraint,
            
            leftPianoRollView.leadingAnchor.constraint(equalTo: leftContainerView.leadingAnchor),
            leftPianoRollView.trailingAnchor.constraint(equalTo: leftContainerView.trailingAnchor),
            leftPianoRollView.topAnchor.constraint(equalTo: leftContainerView.topAnchor),
            leftPianoRollView.bottomAnchor.constraint(equalTo: leftContainerView.bottomAnchor),
 
            // activate the leftPianoRollView width constraint we created above
            leftPianoRollWidthConstraint,
 
            leftButtonsView.leadingAnchor.constraint(equalTo: leftContainerView.leadingAnchor),
            leftButtonsView.trailingAnchor.constraint(equalTo: leftContainerView.trailingAnchor),
            leftButtonsView.topAnchor.constraint(equalTo: leftContainerView.topAnchor),
            leftButtonsView.bottomAnchor.constraint(equalTo: leftContainerView.bottomAnchor),
            
            // constrain containerView to Content Layout Guide
            //  this will define the "scrollable area"
            //  so we won't be setting .contentSize anywhere
            rightContainerView.leadingAnchor.constraint(equalTo: contentG.leadingAnchor),
            rightContainerView.trailingAnchor.constraint(equalTo: contentG.trailingAnchor),
            rightContainerView.topAnchor.constraint(equalTo: contentG.topAnchor),
            rightContainerView.bottomAnchor.constraint(equalTo: contentG.bottomAnchor),
            
            // constrain all 4 sides of buttonView to containerView
            rightButtonsView.leadingAnchor.constraint(equalTo: rightContainerView.leadingAnchor),
            rightButtonsView.trailingAnchor.constraint(equalTo: rightContainerView.trailingAnchor),
            rightButtonsView.topAnchor.constraint(equalTo: rightContainerView.topAnchor),
            rightButtonsView.bottomAnchor.constraint(equalTo: rightContainerView.bottomAnchor),
            
            // constrain all 4 sides of pianoRollView to containerView
            rightPianoRollView.leadingAnchor.constraint(equalTo: rightContainerView.leadingAnchor),
            rightPianoRollView.trailingAnchor.constraint(equalTo: rightContainerView.trailingAnchor),
            rightPianoRollView.topAnchor.constraint(equalTo: rightContainerView.topAnchor),
            rightPianoRollView.bottomAnchor.constraint(equalTo: rightContainerView.bottomAnchor),
            
            // pianoRollView width
            rightPianoRollView.widthAnchor.constraint(equalToConstant: 2000.0),
            
        ])
        
        // calculate size of notes
        
        // let's get close to 2000
        
        // in this example, pianoRollView.numN is 127
        let targetHeight: CGFloat = 2000.0
        let floatNumN: CGFloat = CGFloat(rightPianoRollView.numN)
        
        let noteH1: CGFloat = floor(targetHeight / floatNumN)   // == 15.0
        let noteH2: CGFloat = ceil(targetHeight / floatNumN)    // == 16.0
        
        let totalHeight1: CGFloat = noteH1 * floatNumN          // == 1905
        let totalHeight2: CGFloat = noteH2 * floatNumN          // == 2032
        
        let diff1: CGFloat = abs(targetHeight - totalHeight1)   // == 95
        let diff2: CGFloat = abs(targetHeight - totalHeight2)   // == 32
        
        // if diff1 is less than diff2, use noteH1 else noteH2
        let noteHeight: CGFloat = diff1 < diff2 ? noteH1 : noteH2
        
        // noteHeight now equals 16
        
        // Add buttons to the leftButtonsView
        //  we can constrain them vertically to each other
        var leftpreviousButton: UIButton!
        for i in 0..<rightPianoRollView.numN {
            let button = UIButton()
            button.translatesAutoresizingMaskIntoConstraints = false
            leftButtonsView.addSubview(button)
            
            button.leadingAnchor.constraint(equalTo: leftButtonsView.leadingAnchor).isActive = true
            button.trailingAnchor.constraint(equalTo: leftButtonsView.trailingAnchor).isActive = true
            button.heightAnchor.constraint(equalToConstant: noteHeight).isActive = true
            
            if leftpreviousButton == nil {
                // constrain FIRST button to Top of buttonView
                button.topAnchor.constraint(equalTo: leftButtonsView.topAnchor).isActive = true
            } else {
                // constrain other buttons to Bottom of Previous Button
                button.topAnchor.constraint(equalTo: leftpreviousButton.bottomAnchor).isActive = true
            }
            
            // update previousButton to the current button
            leftpreviousButton = button
            
            button.setTitle("B\(i)", for: .normal)
            button.setTitleColor(.black, for: .normal)
            button.backgroundColor = .green
        }
        
        // constrain bottom of LAST button to bottom of buttonsView
        leftpreviousButton.bottomAnchor.constraint(equalTo: leftButtonsView.bottomAnchor).isActive = true
        
        // Add buttons to the buttonView
        //  we can constrain them vertically to each other
        var previousButton: UIButton!
        for i in 0..<rightPianoRollView.numN {
            let button = UIButton()
            button.translatesAutoresizingMaskIntoConstraints = false
            rightButtonsView.addSubview(button)
            
            button.leadingAnchor.constraint(equalTo: rightButtonsView.leadingAnchor).isActive = true
            button.trailingAnchor.constraint(equalTo: rightButtonsView.trailingAnchor).isActive = true
            button.heightAnchor.constraint(equalToConstant: noteHeight).isActive = true
            
            if previousButton == nil {
                // constrain FIRST button to Top of buttonView
                button.topAnchor.constraint(equalTo: rightButtonsView.topAnchor).isActive = true
            } else {
                // constrain other buttons to Bottom of Previous Button
                button.topAnchor.constraint(equalTo: previousButton.bottomAnchor).isActive = true
            }
            
            // update previousButton to the current button
            previousButton = button
            
            button.setTitle("Button \(i)", for: .normal)
            button.setTitleColor(.black, for: .normal)
            button.backgroundColor = .red
        }
        
        // constrain bottom of LAST button to bottom of buttonsView
        previousButton.bottomAnchor.constraint(equalTo: rightButtonsView.bottomAnchor).isActive = true
        
        
        rightPianoRollView.noteHeight = noteHeight
        leftPianoRollView.noteHeight = noteHeight
        
        // make sure left PianoRoll has the same .numN
        leftPianoRollView.numN = rightPianoRollView.numN
        
        // Set the background color of the piano roll view to clear
        leftPianoRollView.backgroundColor = UIColor.clear
        rightPianoRollView.backgroundColor = UIColor.clear
        leftButtonsView.backgroundColor = UIColor.purple
        
        // Set the delegate of the scroll view to self
        rightScrollView.delegate = self
        leftScrollView.delegate = self
        
        rightScrollView.maximumZoomScale = 5
        leftScrollView.maximumZoomScale = 5
 
        leftScrollView.showsHorizontalScrollIndicator = false
        // probably also want to not-show the vertical indicator
        //  because it just looks odd
        leftScrollView.showsVerticalScrollIndicator = false
 
        // for better visual result, disable zoom bouncing
        rightScrollView.bouncesZoom = false
        leftScrollView.bouncesZoom = false
        
        // during development, so we can see the scrollView framing
        rightScrollView.backgroundColor = UIColor.blue
        leftScrollView.backgroundColor = UIColor.orange
        
        leftContainerView.backgroundColor = UIColor.yellow
 
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        let minZoomScale = rightScrollView.frame.height / rightPianoRollView.bounds.height
        rightScrollView.minimumZoomScale = minZoomScale
        leftScrollView.minimumZoomScale = minZoomScale
    }
    
    // Return the container view in the viewForZooming method
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return scrollView.subviews.first
    }
    
    // implement the UIScrollViewDelegate method for tracking the zoom scale
    func scrollViewDidZoom(_ scrollView: UIScrollView) {
        
        if scrollView == rightScrollView {
 
            // Adjust the content offset so that the content stays centered when zooming
            let horizontalInset = max(0, (scrollView.bounds.width - scrollView.contentSize.width) )
            let verticalInset = max(0, (scrollView.bounds.height - scrollView.contentSize.height) )
            scrollView.contentInset = UIEdgeInsets(top: verticalInset, left: horizontalInset, bottom: verticalInset, right: horizontalInset)
            
            leftScrollView.zoomScale = rightScrollView.zoomScale
            
        } else if scrollView == leftScrollView {
 
            rightScrollView.zoomScale = leftScrollView.zoomScale
 
        }
 
        // set leftContainer Width based on zoomScale so it always
        //  fits the leftScrollView Width
        leftContainerWidthConstraint.constant = leftContainerWidth / leftScrollView.zoomScale
        
    }
    
    // implement UIScrollViewDelegate method
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView == self.rightScrollView {
            self.syncScrollView(self.leftScrollView, toScrollView: self.rightScrollView)
        }
        else if scrollView == self.leftScrollView {
            self.syncScrollView(self.rightScrollView, toScrollView: leftScrollView)
        }
    }
    
    func syncScrollView(_ scrollViewToScroll: UIScrollView, toScrollView scrolledView: UIScrollView) {
        scrollViewToScroll.contentOffset.y = scrolledView.contentOffset.y
    }
    
}
 
class PianoRollView: UIView {
    
    var noteHeight: CGFloat = 0
    var notes: [(note: Int, startTime: Double, duration: Double)] = []
    var numN = 22
    var numT = 4
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        // Draw the  grid
        let context = UIGraphicsGetCurrentContext()
        context?.setStrokeColor(UIColor.black.cgColor)
        context?.setLineWidth(1.0)
        
        for i in 1..<numN {
            let y = CGFloat(i) * noteHeight
            context?.move(to: CGPoint(x: 0, y: y))
            context?.addLine(to: CGPoint(x: bounds.width, y: y))
        }
        
        let timeSlotWidth = bounds.width / CGFloat(numT)
        
        for i in 1..<numT {
            let x = CGFloat(i) * timeSlotWidth
            context?.move(to: CGPoint(x: x, y: 0))
            context?.addLine(to: CGPoint(x: x, y: bounds.height))
        }
        
        // Add line to right of grid
        context?.move(to: CGPoint(x: bounds.width, y: 0))
        context?.addLine(to: CGPoint(x: bounds.width, y: bounds.height))
        // Add line to left of grid
        context?.move(to: CGPoint(x: 0, y: 0))
        context?.addLine(to: CGPoint(x: 0, y: bounds.height))
        
        
        // Add line to top of grid
        context?.move(to: CGPoint(x: 0, y: 0))
        context?.addLine(to: CGPoint(x: bounds.width, y: 0))
        
        // Draw bottom line
        context?.move(to: CGPoint(x: 0, y: bounds.height))
        context?.addLine(to: CGPoint(x: bounds.width, y: bounds.height))
        
        context?.strokePath()
    }
    
}
 
class PianoRollViewl: UIView {
    
    var noteHeight: CGFloat = 0
    
    var numN = 22
    var numT = 4
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        // Draw the  grid
        let context = UIGraphicsGetCurrentContext()
        context?.setStrokeColor(UIColor.black.cgColor)
        context?.setLineWidth(1.0)
        
        // UIKit *may* tell us to draw only PART of the view
        //  (the rect), so use bounds instead of rect
        
        // noteHeight will be set by the controller
        //  when it calculates the button heights
        // let noteHeight = rect.height / CGFloat(numN)
        
        for i in 1..<numN {
            let y = CGFloat(i) * noteHeight
            context?.move(to: CGPoint(x: 0, y: y))
            context?.addLine(to: CGPoint(x: bounds.width, y: y))
        }
        
        context?.strokePath()
    }
    
}