Source code for CodeSlicing episode on Squishy Toggles Part 2

SquishyTogglePart02.swift

//
//  SquishyTogglePart02.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 26/02/2021.
//  Copyright © 2020 Adam Fordyce. All rights reserved.
//

import SwiftUI
import PureSwiftUI

private let frameLayoutConfig = LayoutGuideConfig.grid(columns: [0.25, 0.4, 0.6, 0.75], rows: 2)

struct SquishyTogglePart02: View {
    @State private var isOn = true
    var body: some View {
        let debug = false
        GeometryReader { (geo: GeometryProxy) in
            let size = calculateSize(from: geo)
            ZStack {
                ToggleFrame(isOn, debug: debug)
                    .styling(color: .green)
                    .layoutGuide(frameLayoutConfig, color: .green, lineWidth: 2)
                    .animation(.linear(duration: 1))
                
                ToggleButton()
                    .frame(size.heightScaled(0.9))
                    .xOffset(isOn ? size.halfHeight : -size.halfHeight)
                    .animation(.easeInOut(duration: 1))
            }
            .frame(size)
            .borderIf(debug, Color.gray.opacity(0.2))
            .contentShape(Capsule())
            .onTapGesture {
                isOn.toggle()
            }
            .greedyFrame()
        }
        .showLayoutGuides(debug)
    }
    
    private func calculateSize(from geo: GeometryProxy) -> CGSize {
        let doubleHeight = geo.heightScaled(2)
        if geo.width < doubleHeight {
            return CGSize(geo.width, geo.halfWidth)
        } else {
            return CGSize(doubleHeight, geo.height)
        }
    }
}

private struct ToggleFrame: Shape {
    
    var animatableData: CGFloat
    private let 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 maxCurveYOffset = rect.heightScaled(0.18)
        
        let offsetLayoutGuide = LayoutGuide.polar(.rect(.square(maxCurveYOffset)), rings: 1, segments: 1)
            .rotated(360.degrees, factor: animatableData)
        
        let curveYOffset = offsetLayoutGuide.bottom.y
        
        let g = frameLayoutConfig.layout(in: rect)
        
        let arcRadius = rect.halfHeight
        
        path.move(g[0, 0])
        
        path.curve(rect.top.yOffset(curveYOffset),
                   cp1: g[1, 0],
                   cp2: g[1, 0].yOffset(curveYOffset),
                   showControlPoints: debug)
        
        path.curve(g[3, 0],
                   cp1: g[2, 0].yOffset(curveYOffset),
                   cp2: g[2, 0],
                   showControlPoints: debug)
        
        path.arc(g[3, 1], radius: arcRadius, startAngle: .top, endAngle: .bottom)
        
        path.curve(rect.bottom.yOffset(-curveYOffset),
                   cp1: g[2, 2],
                   cp2: g[2, 2].yOffset(-curveYOffset),
                   showControlPoints: debug)
        
        path.curve(g[0, 2],
                   cp1: g[1, 2].yOffset(-curveYOffset),
                   cp2: g[1, 2],
                   showControlPoints: debug)
        
        path.arc(g[0, 1], radius: arcRadius, startAngle: .bottom, endAngle: .top)
        
        path.closeSubpath()
        
        return path
    }
    
    @ViewBuilder func styling(color: Color) -> some View {
        if debug {
            strokeColor(.black, lineWidth: 2)
        } else {
            fill(color)
        }
    }
}

private struct ToggleButton: View {
    
    var body: some View {
        let outerGradient = LinearGradient([.white(0.45), .white(0.95)], to: .topLeading)
        GeometryReader { (geo: GeometryProxy) in
            let innerGradient = RadialGradient([.white(0.9), .white(0.3)],
                                               center: .bottomTrailing,
                                               from: geo.widthScaled(0.2),
                                               to: geo.widthScaled(1.5))
            ZStack {
                Circle()
                    .fill(outerGradient)
                Circle()
                    .inset(geo.widthScaled(0.1))
                    .fill(innerGradient)
            }
            .drawingGroup()
        }
    }
}

struct SquishyTogglePart02_Previews: PreviewProvider {
    struct SquishyTogglePart02_Harness: View {
        
        var body: some View {
            SquishyTogglePart02()
                .frame(400)
        }
    }
    
    static var previews: some View {
        SquishyTogglePart02_Harness()
            .previewDevice(.iPhone_12_Pro_Max)
    }
}