Selecting nearest button according to finger position in SwiftUI - swift

Question

I have some buttons in a row and I want to select the nearest one according to X-direction of the finger in the screen.
I have the following code...
struct SelectTheKey: View {
private var sArray = ["e", "s", "p", "b", "k"]
#State var isShowPopup: Bool = false
#State private var dragPosition = CGPoint.zero
var body: some View {
VStack() {
Spacer()
Text("global: \(self.dragPosition.x) : \(self.dragPosition.y)")
if isShowPopup {
HStack(spacing: 5) {
ForEach(0..<sArray.count) { id in
Text("\(self.sArray[id])").fontWeight(.bold).font(.title)
.foregroundColor(.white)
.padding()
.background(id == 2 ? Color.red : Color.blue)
.cornerRadius(5)
}
}.offset(x:40, y:0)
}
Text("A").frame(width: 60, height: 90)
.foregroundColor(.white)
.background(Color.purple)
.shadow(radius: 2)
.padding(10)
.gesture(DragGesture(minimumDistance: 2, coordinateSpace: .global)
.onChanged { dragGesture in
self.dragPosition = dragGesture.location
if !self.isShowPopup {self.isShowPopup.toggle()}
}
.onEnded {finalValue in
if self.isShowPopup {self.isShowPopup.toggle()}
})
}
}
}

Answer 1

Here is possible approach. Tested with Xcode 11.4 / iOS 13.4
struct SelectTheKey: View {
private var sArray = ["e", "s", "p", "b", "k"]
#State var isShowPopup: Bool = false
#State private var dragPosition = CGPoint.zero
#State private var rects = [Int: CGRect]()
#State private var selected = -1
var body: some View {
VStack() {
Spacer()
Text("global: \(self.dragPosition.x) : \(self.dragPosition.y)")
if isShowPopup {
HStack(spacing: 5) {
ForEach(0..<sArray.count) { id in
Text("\(self.sArray[id])").fontWeight(.bold).font(.title)
.foregroundColor(.white)
.padding()
.background(id == self.selected ? Color.red : Color.blue)
.cornerRadius(5)
.background(self.rectReader(for: id))
}
}.offset(x:40, y:0)
}
Text("A").frame(width: 60, height: 90)
.foregroundColor(.white)
.background(Color.purple)
.shadow(radius: 2)
.padding(10)
.gesture(DragGesture(minimumDistance: 2, coordinateSpace: .global)
.onChanged { dragGesture in
self.dragPosition = dragGesture.location
if let (id, _) = self.rects.first(where: { (_, value) -> Bool in
value.minX < dragGesture.location.x && value.maxX > dragGesture.location.x
}) { self.selected = id }
if !self.isShowPopup {self.isShowPopup.toggle()}
}
.onEnded {finalValue in
if self.isShowPopup {self.isShowPopup.toggle()}
})
}
}
func rectReader(for key: Int) -> some View {
return GeometryReader { gp -> AnyView in
let rect = gp.frame(in: .global)
DispatchQueue.main.async {
self.rects[key] = rect
}
return AnyView(Rectangle().fill(Color.clear))
}
}
}