Rotate view to always face mouse pointer in SwiftUI - swift

Question

Background: I am trying to have a view rotate to face the mouse at all times.
Details of issue: Moving the view based solely on the mouse moving left or right or on up or down works fine (see version 1). But using both at the same time (non-linear or arc motion with the mouse) fails to work as soon as the mouse arcs down (as y goes negative) and around (as x goes negative) and the position of the view regresses.
For this I am attempting to dynamically switch rotation values from negative to positive depending on what side of the screen the mouse is on (see version 2). But this feels like a poor implementation and is quite buggy.
Question: How can I better do this?
I am basing my cursor fetching code off of here.
Version 1-
Problem: moving the view based solely on the mouse moving left or right or on up or down works fine but this issue occurs when trying to move the mouse in a non-linear way:
import SwiftUI
struct ContentView: View {
var window: NSWindow! = NSWindow( contentRect: NSRect(x: 0, y: 0, width: 480, height: 300),
styleMask: [.titled, .closable, .miniaturizable, .resizable, .fullSizeContentView],
backing: .buffered, defer: false)
var mouseLocation: NSPoint { NSEvent.mouseLocation }
var location: NSPoint { window.mouseLocationOutsideOfEventStream }
#State var position: NSPoint = NSPoint.init()
var body: some View {
GeometryReader { geometry in
VStack {
Rectangle()
.fill(Color.red)
.frame(width: 200, height: 200)
.rotationEffect(
(self.position.y > 60) ?
.degrees(Double(self.position.x) / 2)
: .degrees(Double(self.position.x) / 2)
)
.rotationEffect(
(self.position.x > 320) ?
.degrees(Double(self.position.y * -1))
: .degrees(Double(self.position.y) / 2)
)
}.frame(width: geometry.size.width, height: geometry.size.height)
.onAppear() {
//Setup
self.window.center();
self.window.setFrameAutosaveName("Main Window")
/* Get mouse location on movement*/
NSEvent.addLocalMonitorForEvents(matching: [.mouseMoved]) {
self.position = self.location //Save location
print("mouse location:", Double(self.position.x), Double(self.position.y))
return $0
}
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
Version 2- kind of works but is buggy:
import SwiftUI
struct ContentView: View {
var window: NSWindow! = NSWindow( contentRect: NSRect(x: 0, y: 0, width: 480, height: 300),
styleMask: [.titled, .closable, .miniaturizable, .resizable, .fullSizeContentView],
backing: .buffered, defer: false)
var mouseLocation: NSPoint { NSEvent.mouseLocation }
var location: NSPoint { window.mouseLocationOutsideOfEventStream }
#State var position: NSPoint = NSPoint.init()
var body: some View {
GeometryReader { geometry in
VStack {
Rectangle()
.fill(Color.red)
.frame(width: 200, height: 200)
.rotationEffect(
(self.position.x > 181) ?
.degrees(Double(self.position.x) / 2)
: .degrees(Double(self.position.x * -1) / 2)
)
.rotationEffect(
(self.position.x > 181) ?
.degrees(Double(self.position.y * -1) / 2)
: .degrees(Double(self.position.y) / 2)
)
}.frame(width: geometry.size.width, height: geometry.size.height)
.onAppear() {
//Setup
self.window.center();
self.window.setFrameAutosaveName("Main Window")
/* Get mouse location on movement*/
NSEvent.addLocalMonitorForEvents(matching: [.mouseMoved]) {
self.position = self.location //Save location
print("mouse location:", Double(self.position.x), Double(self.position.y))
return $0
}
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}

Answer 1

check this out:
few remarks:
1) i changed it to ios (should be easy to change back to macos because the difference is just the getting of the position
2) i made a gradient to the rectangle so that is clear, in which direction the rectangle rotates
3) i have no idea what you are calculating, but in my opinion you can only do it correctly with trigonometric functions
struct ContentView: View {
#State var position : CGPoint = .zero
#State var offset : CGSize = .zero
#State var translation : CGSize = .zero
#State var angle : Double = 0
func calcAngle(_ geometry: GeometryProxy) -> Angle {
let rectPosition = CGPoint(x: geometry.size.width / 2, y: geometry.size.height / 2)
// tan alpha = dx / dy
var alpha : Double
if rectPosition.y == position.y {
alpha = 0
} else {
var dx = (position.x - rectPosition.x)
let dy = (position.y - rectPosition.y)
if dy > 0 {
dx = -dx
}
let r = sqrt(abs(dx * dx) + abs(dy * dy))
alpha = Double(asin(dx / r))
if dy > 0 {
alpha = alpha + Double.pi
}
}
return Angle(radians: alpha)
}
var body: some View {
GeometryReader { geometry in
ZStack {
Rectangle()
.fill(LinearGradient(gradient: Gradient(colors: [Color.red, Color.yellow]), startPoint: UnitPoint.top, endPoint: UnitPoint.bottom))
.frame(width: 200, height: 200)
.position(CGPoint(x: geometry.size.width / 2, y: geometry.size.height / 2))
.rotationEffect(self.calcAngle(geometry), anchor: UnitPoint(x: 0.5, y: 0.5))
Circle().fill(Color.blue).frame(width:20,height:20).position(self.position)
Circle().fill(Color.green).frame(width:20,height:20).position(self.position)
}.frame(width: geometry.size.width, height: geometry.size.height)
.gesture(
DragGesture()
.onChanged { gesture in
self.position = gesture.location
self.translation = gesture.translation
}
.onEnded { _ in
}
)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}