GeometryReader in SwiftUI 2.0 uses a top-leading alignment instead of…

… a centered alignment. This lead to many many issues but have been resolved.
kieranb662 · Jul 24, 2020 · 900e469 · 900e469
1 parent ebf93bd
commit 900e469
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 59 deletions.
diff --git a/Sources/Sliders/Joystick.swift b/Sources/Sliders/Joystick.swift
@@ -444,7 +444,7 @@ public struct Joystick: View {
                 .allowsHitTesting(!self.isDisabled)
         }.overlayPreferenceValue(Key.self) { (bounds: [Int: Anchor<CGRect>]) in
             GeometryReader { proxy in
-                ZStack {
+                ZStack(alignment: .center) {
                     self.style.makeHitBox(configuration: self.config)
                         .gesture(DragGesture()
                             .onChanged({ (value) in
@@ -465,7 +465,7 @@ public struct Joystick: View {
                                 self.lock(proxy[bound].contains(value.location))
                             }))
                     self.joystick.allowsHitTesting(false)
-                }
+                }.frame(width: proxy.size.width, height: proxy.size.height)
             }
         }
     }

diff --git a/Sources/Sliders/LSlider.swift b/Sources/Sliders/LSlider.swift
@@ -274,13 +274,15 @@ public struct LSlider: View {
     // MARK: View
     public var body: some View {
         ZStack {
-            style.makeTrack(configuration: configuration)
-            GeometryReader { proxy in
-                self.style.makeThumb(configuration: self.configuration)
-                    .position(x: proxy.size.width/2, y: proxy.size.height/2)
-                    .offset(self.thumbOffset(proxy))
-                    .gesture(self.makeGesture(proxy)).allowsHitTesting(!self.isDisabled)
-            }
+            self.style.makeTrack(configuration: self.configuration)
+                .overlay(GeometryReader { proxy in
+                    ZStack(alignment: .center) {
+                        self.style.makeThumb(configuration: self.configuration)
+                            .offset(self.thumbOffset(proxy))
+                            .gesture(self.makeGesture(proxy))
+                            .allowsHitTesting(!self.isDisabled)
+                    }.frame(width: proxy.size.width, height: proxy.size.height)
+                })
         }
         .coordinateSpace(name: space)
     }

diff --git a/Sources/Sliders/PSlider.swift b/Sources/Sliders/PSlider.swift
@@ -263,26 +263,29 @@ public struct PSlider<S: Shape>: View {
                 .makeThumb(configuration: self.configuration)
                 .position(position)
                 .offset(dragState.translation)
-                .gesture(
-                    DragGesture(minimumDistance: 0, coordinateSpace: .named(space))
-                        .onChanged({ (drag) in
-                            let closestPoint = getClosestPoint(drag.location , lookupTable: self.lookUpTable)
-                            self.dragState = .dragging(translation: self.getDisplacement(closestPoint: closestPoint))
-                            self.value = Double(getPercent(closestPoint, lookupTable: self.lookUpTable))*(self.range.upperBound-self.range.lowerBound) + self.range.lowerBound
-                        })
-                        .onEnded { drag in
-                            let closestPoint = getClosestPoint(drag.location, lookupTable: self.lookUpTable)
-                            self.value = Double(getPercent(closestPoint, lookupTable: self.lookUpTable))*(self.range.upperBound-self.range.lowerBound) + self.range.lowerBound
-                            let displacement = self.getDisplacement(closestPoint: closestPoint)
-                            self.position.x += displacement.width
-                            self.position.y += displacement.height
-                            self.dragState = .inactive
-                })
+                .gesture(self.dragGesture)
                 .onAppear {
                     let num = self.value*Double(self.lookUpTable.count)
                     self.position = self.lookUpTable[Int(num)]
             }
         }
+
+        private var dragGesture: some Gesture {
+            DragGesture(minimumDistance: 0, coordinateSpace: .named(space))
+                .onChanged({ (drag) in
+                    let closestPoint = getClosestPoint(drag.location , lookupTable: self.lookUpTable)
+                    self.dragState = .dragging(translation: self.getDisplacement(closestPoint: closestPoint))
+                    self.value = Double(getPercent(closestPoint, lookupTable: self.lookUpTable))*(self.range.upperBound-self.range.lowerBound) + self.range.lowerBound
+                })
+                .onEnded { drag in
+                    let closestPoint = getClosestPoint(drag.location, lookupTable: self.lookUpTable)
+                    self.value = Double(getPercent(closestPoint, lookupTable: self.lookUpTable))*(self.range.upperBound-self.range.lowerBound) + self.range.lowerBound
+                    let displacement = self.getDisplacement(closestPoint: closestPoint)
+                    self.position.x += displacement.width
+                    self.position.y += displacement.height
+                    self.dragState = .inactive
+        }
+        }
     }
 
     private func makeThumb(_ proxy: GeometryProxy) -> some View {

diff --git a/Sources/Sliders/RadialPad.swift b/Sources/Sliders/RadialPad.swift
@@ -172,33 +172,35 @@ public struct RadialPad: View {
     private var configuration: RadialPadConfiguration {
         return .init(isDisabled, isActive, offset == 1, angle, offset)
     }
+    private func makeGesture(_ proxy: GeometryProxy) -> some Gesture {
+        DragGesture(minimumDistance: 0, coordinateSpace: .named(self.space))
+            .onChanged({
+                let middle = CGPoint(x: proxy.size.width/2, y: proxy.size.height/2)
+                let radius = Double(proxy.size.width > proxy.size.height ? proxy.size.height/2 : proxy.size.width/2)
+                let off = sqrt((middle - $0.location).magnitudeSquared)
+                self.offset = min(radius, off)/radius
+                self.angle = Angle(degrees: calculateDirection(middle, $0.location)*360)
+                self.isActive = true
+            })
+            .onEnded({
+                let middle = CGPoint(x: proxy.size.width/2, y: proxy.size.height/2)
+                let radius = Double(proxy.size.width > proxy.size.height ? proxy.size.height/2 : proxy.size.width/2)
+                let off = sqrt((middle - $0.location).magnitudeSquared)
+                self.offset = min(radius, off)/radius
+                self.angle = Angle(degrees: calculateDirection(middle, $0.location)*360)
+                self.isActive = false
+            })
+    }
 
     public var body: some View {
         ZStack {
             style.makeTrack(configuration: configuration)
                 .overlay(GeometryReader { proxy in
-                    ZStack {
+                    ZStack(alignment: .center) {
                         self.style.makeThumb(configuration: self.configuration)
                             .offset(self.thumbOffset(proxy))
-                            .gesture(
-                                DragGesture(minimumDistance: 0, coordinateSpace: .named(self.space))
-                                    .onChanged({
-                                        let middle = CGPoint(x: proxy.size.width/2, y: proxy.size.height/2)
-                                        let radius = Double(proxy.size.width > proxy.size.height ? proxy.size.height/2 : proxy.size.width/2)
-                                        let off = sqrt((middle - $0.location).magnitudeSquared)
-                                        self.offset = min(radius, off)/radius
-                                        self.angle = Angle(degrees: calculateDirection(middle, $0.location)*360)
-                                        self.isActive = true
-                                    })
-                                    .onEnded({
-                                        let middle = CGPoint(x: proxy.size.width/2, y: proxy.size.height/2)
-                                        let radius = Double(proxy.size.width > proxy.size.height ? proxy.size.height/2 : proxy.size.width/2)
-                                        let off = sqrt((middle - $0.location).magnitudeSquared)
-                                        self.offset = min(radius, off)/radius
-                                        self.angle = Angle(degrees: calculateDirection(middle, $0.location)*360)
-                                        self.isActive = false
-                                    }))
-                    }
+                            .gesture(self.makeGesture(proxy))
+                    }.frame(width: proxy.size.width, height: proxy.size.height)
                 })
         }.coordinateSpace(name: space)
     }

diff --git a/Sources/Sliders/RadialSlider.swift b/Sources/Sliders/RadialSlider.swift
@@ -258,9 +258,9 @@ public struct RSlider: View {
     }
     public var body: some View {
         style.makeTrack(configuration: configuration).overlay(GeometryReader { proxy in
-            ZStack {
+            ZStack(alignment: .center) {
                 self.makeThumb(proxy)
-            }
+            }.frame(width: proxy.size.width, height: proxy.size.height)
         }).padding()
     }
 }

diff --git a/Sources/Sliders/TrackPad.swift b/Sources/Sliders/TrackPad.swift
@@ -255,19 +255,21 @@ public struct TrackPad: View {
         ZStack {
             style.makeTrack(configuration: configuration)
             GeometryReader { proxy in
-                self.style.makeThumb(configuration: self.configuration)
-                    .position(x: proxy.size.width/2, y: proxy.size.height/2)
-                    .offset(self.thumbOffset(proxy))
-                    .gesture(
-                        DragGesture(minimumDistance: 0, coordinateSpace: .named(self.space))
-                            .onChanged({
-                                self.constrainValue(proxy, $0.location)
-                                self.isActive = true
-                            })
-                            .onEnded({
-                                self.constrainValue(proxy, $0.location)
-                                self.isActive = false
-                            }))
+                ZStack(alignment: .center) {
+                    self.style.makeThumb(configuration: self.configuration)
+                        .offset(self.thumbOffset(proxy))
+                        .gesture(
+                            DragGesture(minimumDistance: 0, coordinateSpace: .named(self.space))
+                                .onChanged({
+                                    self.constrainValue(proxy, $0.location)
+                                    self.isActive = true
+                                })
+                                .onEnded({
+                                    self.constrainValue(proxy, $0.location)
+                                    self.isActive = false
+                                }))
+
+                }.frame(width: proxy.size.width, height: proxy.size.height)
             }
         }.coordinateSpace(name: space)
     }