Add gestures initial functionality

[shial4]

Pull Request Description: Add Gestures Functionality

Description

This pull request aims to enhance the Tokamak framework by adding support for handling gestures in SwiftUI-like components. The goal is to enable developers to implement various interactive features in their applications using gestures, such as taps, long presses and drags.

Changes Made

The following changes have been made to the Tokamak framework to support gesture functionality:

1. Added support for gestures such as TapGesture, LongPressGesture and DragGesture. These gestures are now functional and update the respective state when triggered.

2. Added helper View modifiers for TapGesture and LongPressGesture aiming to match SwiftUI counterpart.

3. Implemented TokamakDOM renderer gestures par

4. Add basic implementation for standard, simultaneous and highPriority gesture handling, without the use of GestureMask.

5. Add coordinate space

Remaining Work

The following features are yet to be implemented:

1. Add AnyGesture for type erasure: A generic AnyGesture type is intended to be added to perform type erasure for gestures, allowing for a more flexible and unified approach when handling gestures. WIP, to be fixed.

2. Add handling of GestureMask.

Example Use Case

To demonstrate the implemented gesture functionality, a sample use case has been provided. It includes examples of tap gestures, double tap gestures, long press gestures, and drag gestures. Certain parts of the code related to simultaneous gesture handling have been commented out, awaiting the implementation of gesture priority and simultaneous gesture support.

Please review and test the changes to ensure they work as expected and are aligned with the Tokamak framework's design and guidelines. Once reviewed and approved, this pull request can be merged into the main repository to enable gesture support in Tokamak.

_WASM_SwiftUI_gestures.mov

Screen.Recording.2023-08-14.at.20.28.32.mov

TestCode

The below code has been tested in SwiftUI and Tokamak to ensure the behavior is the same.

import TokamakDOM
import Foundation

@main
struct TokamakApp: App {
    var body: some Scene {
        WindowGroup("Tokamak App") {
            ContentView()
        }
    }
}

struct ContentView: View {
    @State var count: Int = 0
    @State var countDouble: Int = 0
    @GestureState var isDetectingTap = false
    
    @GestureState var isDetectingLongPress = false
    @State var completedLongPress = false
    @State var countLongpress: Int = 0
    
    @GestureState var dragAmount = CGSize.zero
    @State private var countDragLongPress = 0
    
    var body: some View {
        HStack(alignment: .top, spacing: 8) {
            tapGestures
            longPressGestures
            dragGestures
        }
        .padding()
    }
    
    var dragGestures: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("Drag Gestures")

            HStack {
                Rectangle()
                    .fill(Color.yellow)
                    .frame(width: 100, height: 100)
                    .gesture(DragGesture().updating($dragAmount) { value, state, transaction in
                        state = value.translation
                    }.onEnded { value in
                        print(value)
                    })
                Text("dragAmount: \(dragAmount.width), \(dragAmount.height)")
            }

            HStack {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 100, height: 100)
                    .gesture(DragGesture(minimumDistance: 0)
                        .onChanged { _ in
                            self.countDragLongPress += 1
                        })
                Text("Drag Count: \(countDragLongPress)")
            }
        }
    }
    
    var longPressGestures: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("LongPress Gestures")

            HStack {
                Rectangle()
                    .fill(self.isDetectingLongPress ? Color.pink : (self.completedLongPress ? Color.purple : Color.gray))
                    .frame(width: 100, height: 100)
                    .gesture(LongPressGesture(minimumDuration: 2)
                        .updating($isDetectingLongPress) { currentState, gestureState, transaction in
                            gestureState = currentState
                            transaction.animation = Animation.easeIn(duration: 2.0)
                        }
                        .onEnded { finished in
                            self.completedLongPress = finished
                        })
                Text(self.isDetectingLongPress ? "detecting" : (self.completedLongPress ? "completed" : "unknow"))
            }

            HStack {
                Rectangle()
                    .fill(Color.orange)
                    .frame(width: 100, height: 100)
                    .onLongPressGesture(minimumDuration: 0) {
                        countLongpress += 1
                    }
                    .onTapGesture() {
                        fatalError("onTapGesture, should not be called")
                    }
                Text("Long Pressed: \(countLongpress)")
            }
        }
    }
    
    var tapGestures: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("Tap Gestures")
            HStack {
                Rectangle()
                    .fill(Color.white)
                    .frame(width: 100, height: 100)
                    .onTapGesture {
                        count += 1
                        print("⚪️ gesture")
                    }
                Text("Tap: \(count)")
            }
            HStack {
                Rectangle()
                    .fill(Color.green)
                    .frame(width: 100, height: 100)
                    .onTapGesture(count: 2) {
                        countDouble += 1
                        print("🟢 double gesture")
                    }
                Text("double tap: \(countDouble)")
            }
            HStack {
                Rectangle()
                    .fill(Color.blue)
                    .frame(width: 100, height: 100)
                    .onTapGesture() {
                        print("🔵 1st gesture")
                    }
                    .onTapGesture() {
                        fatalError("should not be called")
                    }
                Text("1st tap gesture")
            }
            HStack {
                Rectangle()
                    .fill(Color.pink)
                    .frame(width: 100, height: 100)
                    .simultaneousGesture(
                        TapGesture()
                            .onEnded({ _ in
                                print("🩷 simultaneousGesture gesture")
                            })
                    )
                    .onTapGesture() {
                        fatalError("should not be called")
                    }
                    .onTapGesture() {
                        fatalError("should not be called")
                    }
                    .simultaneousGesture(
                        TapGesture()
                            .onEnded({ _ in
                                print("🩷 simultaneousGesture 2 gesture")
                            })
                    )
                Text("simultaneousGesture")
            }
            HStack {
                Rectangle()
                    .fill(Color.purple)
                    .frame(width: 100, height: 100)
                    .simultaneousGesture(
                        TapGesture()
                            .onEnded({ _ in
                                fatalError("should not be called")
                            })
                    )
                    .onTapGesture() {
                        fatalError("should not be called")
                    }
                    .highPriorityGesture(
                        TapGesture()
                            .onEnded({ _ in
                                fatalError("should not be called")
                            })
                    )
                    .highPriorityGesture(
                        TapGesture()
                            .onEnded({ _ in
                                print("🟣 highPriorityGesture 3 gesture")
                            })
                    )
                Text("highPriorityGesture")
            }
        }
    }
}

Basic implementation of standard, simultaneous and highPriority gesture handling has been tested and compared against SwiftUI playgrounds with the below code

var tapGestures: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("Tap Gestures")

            HStack {
                Rectangle()
                    .fill(Color.blue)
                    .frame(width: 100, height: 100)
                    .simultaneousGesture(
                        TapGesture().onEnded({ _ in
                            print("🔵 simultaneousGesture gesture")
                        })
                    )
                    .onTapGesture() {
                        print("🔵 1st gesture")
                    }
                    .onTapGesture() {
                        print("🔵 2st gesture")
                    }
                    .simultaneousGesture(
                        TapGesture().onEnded({ _ in
                            print("🔵 simultaneousGesture 2 gesture")
                        })
                    )
                Text("simultaneousGesture")
            }
            HStack {
                Rectangle()
                    .fill(Color.purple)
                    .frame(width: 100, height: 100)
                    .simultaneousGesture(
                        TapGesture().onEnded({ _ in
                            print("🟢 simultaneousGesture gesture")
                        })
                    )
                    .onTapGesture() {
                        print("🟢 1st gesture")
                    }
                    .highPriorityGesture(
                        TapGesture().onEnded({ _ in
                            print("🟢 highPriorityGesture 2 gesture")
                        })
                    )
                    .highPriorityGesture(
                        TapGesture().onEnded({ _ in
                            print("🟢 highPriorityGesture 3 gesture")
                        })
                    )
                Text("highPriorityGesture")
            }
        }
    }

output

🟢 highPriorityGesture 3 gesture
🔵 simultaneousGesture 2 gesture
🔵 simultaneousGesture gesture

The main difference in simultaneousGesture is that Tokamak has different order where simultaneousGesture 2 is after simultaneousGesture

Screen.Recording.2023-08-13.at.20.46.33.mov

With follow-up test

Rectangle()
 .fill(Color.blue)
 .frame(width: 100, height: 100)
.onTapGesture() {
    print("🔵 1st gesture")
}
.onTapGesture() {
    print("🔵 2st gesture")
}

🔵 1st gesture

Screen.Recording.2023-08-13.at.20.45.57.mov

Added Fibre support for gestures

Screen_Recording_2023-08-25_at_19.26.10.mov

Tested with the below code

struct GestureDemo: View {
    let rows = 16
    let columns = 16
    
    struct Rect: Hashable {
        let row: Int
        let column: Int
    }
    
    @State private var selectedRects: Set<Rect> = []
    
    var body: some View {
        VStack(spacing: 0) {
            ForEach(0..<rows, id: \.self) { row in
                HStack(spacing: 0) {
                    ForEach(0..<columns, id: \.self) { column in
                        Rectangle()
                            .fill(isSelected(row: row, column: column) ? Color.blue : Color.gray)
                            .frame(width: 50, height: 50)
                            .overlay(
                                Text("\(row):\(column)")
                                    .foregroundColor(.white)
                            )
                    }
                }
            }
        }
        .border(Color.red)
        .coordinateSpace(name: "MyView")
        .gesture(
            TapGesture()
                .onEnded {
                    print("🔵")
                    selectedRects.removeAll()
                }
        )
        .gesture(
            DragGesture(coordinateSpace: .named("MyView"))
                .onChanged { value in
                    let location = value.location
                    let row = Int(location.y / 50)
                    let column = Int(location.x / 50)
                    print("🟢", row, column, location)
                    if !isSelected(row: row, column: column) {
                        selectedRects.insert(Rect(row: row, column: column))
                    }
                }
        )
    }
    
    func isSelected(row: Int, column: Int) -> Bool {
        selectedRects.contains(Rect(row: row, column: column))
    }
}

[j-f1]

This is incredible! I am unfortunately about to hop on a bus to start a job at Apple so I can’t give this a thorough review 🥲

But hopefully @carson-katri can take a look at some point.

[carson-katri]

This is amazing, you for working on this! Left a few notes.

[shial4]

Hey, I've addressed PR feedback. Have some questions where I tagged you. Could use some input

[shial4]

updated PR & its description
#bump up

🚀

[shial4]

fixed
#545

[shial4]

coordinate space broken for custom spaces while using fiber reconciler.
ticket here: #547

[shial4]

Add content shape modifier. Verify gesture start against the shape fill area.
#548

[carson-katri]

It looks like formatting was changed in many of the files. Could you run swift-lint or check if you have the pre-commit hook installed?
https://github.com/TokamakUI/Tokamak/blob/main/CONTRIBUTING.md#coding-style

[carson-katri]

Nice refactor 👍

[shial4]

updated view change modifier, not to relay on _onChange or _onUnmount events
due to this comment
#542 (comment)

@carson-katri ready for the review too :)

[shial4]

Tests for onChange & onReceive will pass after Fiber fixes attempt 2 will be merge

[aehlke]

is this in a good state to use? (sorry to bother)

[shial4]

@aehlke

is this in a good state to use? (sorry to bother)

I'm building my apps of top of this branch. However would love to have fibre working with gesture, but for that we will need the fibre PR merged in + some other additions and improvements