Native source code for CodeSlicing episode on squishy toggles part 3

SquishyTogglePart03Native.swift

//
//  SquishyTogglePart03Native.swift
//
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to deal
//  in the Software without restriction, including without limitation the rights
//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
//  of the Software, and to permit persons to whom the Software is furnished to do so,
//  subject to the following conditions:
//
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
//  INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
//  PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
//  COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
//  AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
//  WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
//  Created by Adam Fordyce on 06/03/2021.
//  Copyright © 2020 Adam Fordyce. All rights reserved.
//


import SwiftUI

private let duration = 0.6

private let stateIconHeightRatio: CGFloat = 0.5
private let buttonDiameterRatio: CGFloat = 0.9

private struct SquishyTogglePart03Native: View {
    
    @State private var isOn = false
    
    var body: some View {
        let debug = false
        GeometryReader { (geo: GeometryProxy) in
            let size = calculateSize(from: geo)
            let buttonDiameter = size.height * buttonDiameterRatio
            ZStack {
                ToggleFrame(isOn, debug: debug)
                    .styling(color: .green)
                    .animation(Animation.linear(duration: duration))
                
                Group {
                ToggleButton()
                    .frame(width: buttonDiameter, height: buttonDiameter)
                
                StateIcon(isOn, debug: debug)
                    .styling(lineWidth: size.width * 0.04)
                    .frame(width: size.height * stateIconHeightRatio, height: size.height * stateIconHeightRatio)
                }
                
                .offset(x: debug ? 0 : size.height * (isOn ? 0.5 : -0.5))
                
                .animation(Animation.easeInOut(duration: duration))
            }
            .frame(width: size.width, height: size.height)
            .border(debug ? Color.gray.opacity(0.2) : Color.clear)
            .contentShape(Capsule())
            .onTapGesture {
                isOn.toggle()
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
    
    private func calculateSize(from geo: GeometryProxy) -> CGSize {
        let doubleHeight = geo.size.height * 2
        if geo.size.width < doubleHeight {
            return CGSize(width: geo.size.width, height: geo.size.width * 0.5)
        } else {
            return CGSize(width:doubleHeight, height: geo.size.height)
        }
    }
}

private struct ToggleFrame: Shape {

    var animatableData: CGFloat
    private let debug: Bool
    
    init(_ toggle: Bool, debug: Bool = false) {
        animatableData = toggle ? 1 : 0
        self.debug = debug
    }
    
    func path(in rect: CGRect) -> Path {
        var path = Path()

        let maxCurveYOffset = rect.height * 0.18
        let halfMaxCurveYOffset = maxCurveYOffset * 0.5
        
        let angle = Angle.degrees(360 * Double(animatableData))
        
        let curveYOffset = halfMaxCurveYOffset + halfMaxCurveYOffset * CGFloat(cos(angle.radians))

        let arcRadius = rect.size.height * 0.5
 
        let quarterX = rect.minX + rect.width * 0.25
        let threeQuarterX = rect.minX + rect.width * 0.75
        let cpXLeft = rect.minX + rect.width * 0.4
        let cpXRight = rect.minX + rect.width * 0.6
        
        let p1 = CGPoint(x: quarterX, y: rect.minY)
        let p1cp2 = CGPoint(x: cpXLeft, y: rect.minY)
        
        let p2 = CGPoint(x: rect.midX, y: rect.minY + curveYOffset)
        let p2cp1 = CGPoint(x: cpXLeft, y: rect.minY + curveYOffset)
        let p2cp2 = CGPoint(x: cpXRight, y: rect.minY + curveYOffset)
        
        let p3 = CGPoint(x: threeQuarterX, y: rect.minY)
        let p3cp1 = CGPoint(x: cpXRight, y: rect.minY)
        
        let p4cp2 = CGPoint(x: cpXRight, y: rect.maxY)
        
        let p5 = CGPoint(x: rect.midX, y: rect.maxY - curveYOffset)
        let p5cp1 = CGPoint(x: cpXRight, y: rect.maxY - curveYOffset)
        let p5cp2 = CGPoint(x: cpXLeft, y: rect.maxY - curveYOffset)
        
        let p6 = CGPoint(x: quarterX, y: rect.maxY)
        let p6cp1 = CGPoint(x: cpXLeft, y: rect.maxY)

        path.move(to: p1)
        
        path.addCurve(to: p2, control1: p1cp2, control2: p2cp1)
        path.addCurve(to: p3, control1: p2cp2, control2: p3cp1)
        
        path.addArc(center: CGPoint(x: threeQuarterX, y: rect.minY + arcRadius), radius: arcRadius, startAngle: .degrees(-90), endAngle: .degrees(90), clockwise: false)

        path.addCurve(to: p5, control1: p4cp2, control2: p5cp1)
        path.addCurve(to: p6, control1: p5cp2, control2: p6cp1)
        
        path.addArc(center: CGPoint(x: quarterX, y: rect.minY + arcRadius), radius: arcRadius, startAngle: .degrees(90), endAngle: .degrees(-90), clockwise: false)
        
        path.closeSubpath()

        return path
    }
    
    @ViewBuilder func styling(color: Color, debug: Bool = false) -> some View {
        if debug {
            debugStyling()
        } else {
            fill(color)
        }
    }
}

private let outerGradient = LinearGradient(
    gradient: Gradient(colors: [Color(white: 0.45), Color(white: 0.95)]),
    startPoint: .bottomLeading,
    endPoint: .topLeading)

private struct ToggleButton: View {
    
    public var body: some View {
        GeometryReader { (geo: GeometryProxy) in
            
            let innerGradient = RadialGradient(
                gradient: Gradient(colors: [Color(white: 0.9), Color(white: 0.3)]),
                center: .bottomTrailing,
                startRadius: geo.size.width * 0.2,
                endRadius: geo.size.width * 1.5)
            
            ZStack {
                Circle()
                    .fill(outerGradient)
                Circle()
                    .inset(by: geo.size.width * 0.1)
                    .fill(innerGradient)
            }
            .drawingGroup()
        }
    }
}

private struct StateIcon: Shape {
    
    var animatableData: CGFloat
    private var debug: Bool
    
    init(_ isOn: Bool, debug: Bool = false) {
        animatableData = isOn ? 1 : 0
        self.debug = debug
    }
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        let rectTop = CGPoint(x: rect.midX, y: rect.minY)
        let rectBottom = CGPoint(x: rect.midX, y: rect.maxY)
        let rectLeading = CGPoint(x: rect.minX, y: rect.midY)
        let rectTrailing = CGPoint(x: rect.maxX, y: rect.midY)
        let rectCenter = CGPoint(x: rect.midX, y: rect.midY)
        
        let bezierCurveCpOffset: CGFloat = 0.552 * (0.5 * rect.size.height)
        
        path.move(to: rectLeading.to(rectCenter, animatableData))
        
        let c1cp1 = CGPoint(x: rect.minX, y: rect.midY - bezierCurveCpOffset)
        let c1cp1OnState = CGPoint(x: rect.midX, y: rect.midY - bezierCurveCpOffset)
        let c1cp2 = CGPoint(x: rect.midX - bezierCurveCpOffset, y: rectTop.y)
        let c1cp2OnState = CGPoint(x: rect.midX, y: rect.minY + 1)

        path.addCurve(to: rectTop,
                      control1: c1cp1.to(c1cp1OnState, animatableData),
                      control2: c1cp2.to(c1cp2OnState, animatableData))
        
        let c2cp1 = CGPoint(x: rect.midX + bezierCurveCpOffset, y: rect.minY)
        let c2cp1OnState = CGPoint(x: rect.midX, y: rect.minY + 1)
        let c2cp2 = CGPoint(x: rect.maxX, y: rect.midY - bezierCurveCpOffset)
        let c2cp2OnState = CGPoint(x: rect.midX, y: rect.midY - bezierCurveCpOffset)
        
        path.addCurve(to: rectTrailing.to(rectCenter, animatableData),
                      control1: c2cp1.to(c2cp1OnState, animatableData),
                      control2: c2cp2.to(c2cp2OnState, animatableData))
        
        let c3cp1 = CGPoint(x: rect.maxX, y: rect.midY + bezierCurveCpOffset)
        let c3cp1OnState = CGPoint(x: rect.midX, y: rect.midY + bezierCurveCpOffset)
        let c3cp2 = CGPoint(x: rect.midX + bezierCurveCpOffset, y: rect.maxY)
        let c3cp2OnState = CGPoint(x: rect.midX, y: rect.maxY - 1)
        
        path.addCurve(to: rectBottom,
                      control1: c3cp1.to(c3cp1OnState, animatableData),
                      control2: c3cp2.to(c3cp2OnState, animatableData))
        
        let c4cp1 = CGPoint(x: rect.midX - bezierCurveCpOffset, y: rect.maxY)
        let c4cp1OnState = CGPoint(x: rect.midX, y: rect.maxY - 1)
        let c4cp2 = CGPoint(x: rect.minX, y: rect.midY + bezierCurveCpOffset)
        let c4cp2OnState = CGPoint(x: rect.midX, y: rect.midY + bezierCurveCpOffset)
        
        path.addCurve(to: rectLeading.to(rectCenter, animatableData),
                      control1: c4cp1.to(c4cp1OnState, animatableData),
                      control2: c4cp2.to(c4cp2OnState, animatableData))

        path.closeSubpath()

        return path
    }
    
    @ViewBuilder func styling(lineWidth: CGFloat) -> some View {
        if debug {
            debugStyling()
        } else {
            stroke(style: .init(lineWidth: lineWidth, lineJoin: .round))
        }
    }
}

private extension Shape {
    func debugStyling() -> some View {
        stroke(Color.black, lineWidth: 2)
    }
}

// MARK: ----- EXTENSION FROM PureSwiftUI to make code cleaner / more readable

private extension CGPoint {
    
    func to(_ destination: CGPoint, _ factor: CGFloat) -> CGPoint {
        let deltaX = destination.x - self.x
        let deltaY = destination.y - self.y
        return CGPoint(x: self.x + deltaX * factor, y: self.y + deltaY * factor)
    }
    
}

struct SquishyTogglePart03Native_Previews: PreviewProvider {
    struct SquishyTogglePart03Native_Harness: View {

        var body: some View {
            
            SquishyTogglePart03Native()
                .frame(width: 400, height: 400)
        }
    }

    static var previews: some View {
        SquishyTogglePart03Native_Harness()
            .previewDevice("iPhone 12 Pro Max")
            .previewDisplayName("iPhone 12 Pro Max")
    }
}