I'm trying to port my Pathfinding Visualizer web app from JS to SwiftUI on MacOS. Web App hosted on GitHub
Currently stuck on implementing the grid's input.
I want to be able to draw walls on the grid by dragging the cursor.
Full Code On GitHub
Here is my current method:
struct NodeView: View {
#State var nodeInfo: Node
#Binding var mouseDown: Bool
var body: some View {
Rectangle()
.fill(nodeColor(state: nodeInfo.getState()))
.frame(width: 25, height: 25)
.onHover { hover in
if mouseDown && hover {
print("mouse hover")
nodeInfo.toggleWall()
}
if hover {
print("node: \(nodeInfo.id) hovered!")
}
}
.pressAction {
if mouseDown == false {
mouseDown = true
print("mouse down")
nodeInfo.toggleWall()
}
} onRelease: {
mouseDown = false
print("mouse up")
}
}
The code for pressAction
struct PressActions: ViewModifier {
var onPress: () -> Void
var onRelease: () -> Void
func body(content: Content) -> some View {
content
.simultaneousGesture(
DragGesture(minimumDistance: 0)
.onChanged({ _ in
onPress()
})
.onEnded({ _ in
onRelease()
})
)
}
}
extension View {
func pressAction(onPress: #escaping (() -> Void), onRelease: #escaping (() -> Void)) -> some View {
modifier(PressActions(onPress: {
onPress()
}, onRelease: {
onRelease()
}))
}
}
The mindset is when a node detects that the mouse is pressed it will update the mouseDown variable passed down from the grid.
The other nodes on the grid will respond to the cursor hovering over them when mouseDown is true.
However this approach doesn't work as I wished. The nodes won't respond to the cursor when dragged across them most of the time. And even if it does, the response is quite laggy.
Is it because I'm using dragGesture to listen to mouse down and mouse up during the whole dragging action?
Currently trying to use NSEvent instead of gestures.
Update:
I've changed the implementation to using stateGesture on the content view instead of each node view.
But the time it takes from input to render seems proportional to the grid's size.
Also it seems the view won't update while the cursor is moving.
I've tried the implementation suggested by the post SwiftUI drag gesture across multiple subviews
This approach works. However, the input lag is proportional to the grid's size.
After profiling and searching for the cause of such behavior.
My theory is there's simply too much subviews inside contentView, causing SwiftUI to spend a considerable amount of time on diffing when the state changes.(If I'm wrong you're welcome to correct me)
I'm not sure if there is a way to solve this inside SwiftUI.
Eventually I choose to implement the grid view using UIKit's UIView.
With this approach I successfully implemented a grid that can draw walls with little to none latency.
If your interested with the code, the code is posted at GitHub
I am using a Geometry Reader to control the horizontal layout of some child views in a HStack. The child views must finally be equally spaced and their numbers are not fixed. This works fine without any problems.
However, the vertical layout, which is solely determined by the content (child views), is expanded to max available height by the geometry reader (which is standard behaviour).
Any suggestions on how to overcome this behaviour are welcome?
(Another way of explaining the problem is to say that a Horizontal Geometry Reader would solve the problem)
Hereby a code snippet added for clarity:
public struct ToolbarView: View {
#ObservedObject public var viewModel: ToolbarViewModel
public var body: some View
{
GeometryReader { geometry in
HStack(spacing:0) {
ForEach(self.viewModel.items.filter({ $0.visible })) { item in
ToolbarItemView(itemViewModel:item, toolbarViewModel: self.viewModel)
.frame(width:geometry.size.width / CGFloat(Double(self.viewModel.items.count)))
.font(self.viewModel.textFont)
}
}
}.frame(height:CGFloat(50))
}
}
As you note in the comments, Spacers will fix this without a GR. You just need to put them in an HStack:
HStack(spacing:0) {
ForEach(self.viewModel.items.filter({ $0.visible })) { item in
HStack {
Spacer()
ToolbarItemView(itemViewModel:item, toolbarViewModel: self.viewModel)
.font(self.viewModel.textFont)
Spacer()
}
}.frame(height:CGFloat(50))
}
Im trying to calculate the screen safe area size in a SwiftUI app launch so I can derive component sizes from the safe area rectangle for iOS devices of different screen sizes.
UIScreen.main.bounds - I can use this at the start but it gives me the total screen and not the safe area
GeometryReader - using this I can get the CGSize of the safe area but I cant find a way to send this anywhere - tried using Notifications and simple functions both of which caused errors
Finally I tried using the .onPreferenceSet event in the initial view then within that closure set a CGSize variable in a reference file, but doing that, for some reason makes the first view initialise twice. Does anyone know a good way to get the edge insets or the safe area size at app startup?
More simpler solution :
UIApplication.shared.windows.first { $0.isKeyWindow }?.safeAreaInsets.bottom
or shorter:
UIApplication.shared.windows.first?.safeAreaInsets.top
Have you tried this?
You can use EnvironmentObject to send the safe area insets anywhere in your code after initializing it in your initial View.
This works for me.
class GlobalModel: ObservableObject {
//Safe Area size
#Published var safeArea: (top: CGFloat, bottom: CGFloat)
init() {
self.safeArea = (0, 0)
}
}
Inside SceneDelegate.
let globalModel = GlobalModel()
let contentView = ContentView().environmentObject(globalModel)
Inside your initial view.
struct ContentView: View {
#EnvironmentObject var globalModel: GlobalModel
var body: some View {
ZStack {
GeometryReader { geo in
Color.clear
.edgesIgnoringSafeArea(.all)
.onAppear {
self.globalModel.safeArea = (geo.safeAreaInsets.top, geo.safeAreaInsets.bottom)
}
}
SomeView()
}
}
}
I've been seeing some strange behavior for preference keys with ScrollView. If I put the onPreferenceChange inside the ScrollView it won't be called, but if I put it outside it does!
I've setup a width preference key as follows:
struct WidthPreferenceKey: PreferenceKey {
typealias Value = CGFloat
static var defaultValue = CGFloat(0)
static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
value = nextValue()
}
}
The following simple view does not print:
struct ContentView: View {
var body: some View {
ScrollView {
Text("Hello")
.preference(key: WidthPreferenceKey.self, value: 20)
.onPreferenceChange(WidthPreferenceKey.self) {
print($0) // Not being called, we're in a scroll view.
}
}
}
}
But this works:
struct ContentView: View {
var body: some View {
ScrollView {
Text("Hello")
.preference(key: WidthPreferenceKey.self, value: 20)
}
.onPreferenceChange(WidthPreferenceKey.self) {
print($0)
}
}
}
I know that I can use the latter approach to fix this, but sometimes I'm inside a child view that does not have access to its parent scroll view but I still want to record a preference key.
Any ideas on how to get onPreferenceChange to get called inside a ScrollView?
Note: I get Bound preference WidthPreferenceKey tried to update multiple times per frame. when I put the function inside the scroll view, which might explain what is going on but I can't figure it out.
Thanks!
I had been trying to figure out this issue for a long time and have found how to deal with it, although the way I used was just one of the workarounds.
Use onAppear to ScrollView with a flag to make its children show up.
...
#State var isShowingContent = false
...
ScrollView {
if isShowingContent {
ContentView()
}
}
.onAppear {
self.isShowingContent = true
}
Or,
Use List instead of it.
It has the scroll feature, and you can customize it with its own functionality and UITableView appearance in terms of UI. the most important is that it works as we expected.
[If you have time to read more]
Let me say my thought about that issue.
I have confirmed that onPreferenceChange isn't called at the bootstrap time of a view put inside a ScrollView. I'm not sure if it is the right behavior or not. But, I assume that it's wrong because ScrollView has to be capable of containing any views even if some of those use PreferenceKey to pass any data among views inside it. If it's the right behavior, it would be quite easy for us to get in trouble when creating our custom views.
Let's get into more detail.
I suppose that ScrollView would work slightly different from the other container views such as List, (H/V)Stack when it comes to set up its child view at the bootstrap time. In other words, ScrollView would try to draw(or lay out) children in its own way. Unfortunately, that way would affect the children's layout mechanism working incorrectly as what we've been seeing. We could guess what happened with the following message on debug view.
TestHPreferenceKey tried to update multiple times per frame.
It might be a piece of evidence to tell us that the update of children has occurred while ScrollView is doing something for its setup. At that moment, it could be guessed that the update to PreferenceKey has been ignored.
That's why I tried to put the placing child views off to onAppear.
I hope that will be useful for someone who's struggling with various issues on SwiftUI.
I think onPreferenceChange in your example is not called because it’s function is profoundly different from preference(key…)
preference(key:..) sets a preference value for the view it is used on.
whereas onPreferenceChange is a function called on a parent view – a view on a higher position in the view tree hierarchy. Its function is to go through all its children and sub-children and collect their preference(key:) values. When it found one it will use the reduce function from the PreferenceKey on this new value and all the already collected values. Once it has all the values collected and reduced them it will execute the onPreference closure on the result.
In your first example this closure is never called because the Text(“Hello”) view has no children which set the preference key value (in fact the view has no children at all). In your second example the Scroll view has a child which sets its preference value (the Text view).
All this does not explain the multiple times per frame error – which is most likely unrelated.
Recent update (24.4.2020):
In a similar case I could induce the call of onPreferenceChange by changing the Equatable condition for the PreferenceData. PreferenceData needs to be Equatable (probably to detect a change in them). However, the Anchor type by itself is not equatable any longer. To extract the values enclosed in an Anchor type a GeometryProxy is required. You get a GeometryProxy via a GeometryReader. For not disturbing the design of views by enclosing some of them into a GeometryReader I generated one in the equatable function of the PreferenceData struct:
struct ParagraphSizeData: Equatable {
let paragraphRect: Anchor<CGRect>?
static func == (value1: ParagraphSizeData, value2: ParagraphSizeData) -> Bool {
var theResult : Bool = false
let _ = GeometryReader { geometry in
generateView(geometry:geometry, equality:&theResult)
}
func generateView(geometry: GeometryProxy, equality: inout Bool) -> Rectangle {
let paragraphSize1, paragraphSize2: NSSize
if let anAnchor = value1.paragraphRect { paragraphSize1 = geometry[anAnchor].size }
else {paragraphSize1 = NSZeroSize }
if let anAnchor = value2.paragraphRect { paragraphSize2 = geometry[anAnchor].size }
else {paragraphSize2 = NSZeroSize }
equality = (paragraphSize1 == paragraphSize2)
return Rectangle()
}
return theResult
}
}
With kind regards
It seems like the issue is not necessarily with ScrollView, but with your usage of PreferenceKey. For instance, here is a sample struct in which a PreferenceKey is set according to the width of a Rectangle, and then printed using .onPreferenceChange(), all inside of a ScrollView. As you drag the Slider to change the width, the key is updated and the print closure is executed.
struct ContentView: View {
#State private var width: CGFloat = 100
var body: some View {
VStack {
Slider(value: $width, in: 100...200)
ScrollView(.vertical) {
Rectangle()
.background(WidthPreferenceKeyReader())
.onPreferenceChange(WidthPreferenceKey.self) {
print($0)
}
}
.frame(width: self.width)
}
}
}
struct WidthPreferenceKeyReader: View {
var body: some View {
GeometryReader { geometry in
Rectangle()
.fill(Color.clear)
.preference(key: WidthPreferenceKey.self, value: geometry.size.width)
}
}
}
As you noted, the first time the key tries to set, the console prints "Bound preference WidthPreferenceKey tried to update multiple times per frame," but a real value is immediately set afterward, and it continues to update dynamically.
What value are you actually trying to set, and what are you trying to do in .onPreferenceChange()?
I think this is because you implemented reduce() incorrectly.
You can find the details here:
https://stackoverflow.com/a/73300115/4366470
TL;DR: Replace value = nextValue() in reduce() with value += nextValue().
You may only read it in superView, but you can change it with transformPreference after you set it .
struct ContentView: View {
var body: some View {
ScrollView {
VStack{
Text("Hello")
.preference(key: WidthPreferenceKey.self, value: 20)
}.transformPreference(WidthPreferenceKey.self, {
$0 = 30})
}.onPreferenceChange(WidthPreferenceKey.self) {
print($0)
}
}
}
The last value is 30 now. Hope it is what you want.
You can read from other layer:
ScrollView {
Text("Hello").preference(key: WidthPreferenceKey.self, value: CGFloat(40.0))
.backgroundPreferenceValue(WidthPreferenceKey.self) { x -> Color in
print(x)
return Color.clear
}
}
The problem here is actually not in ScrollView but in usage - this mechanism allow to transfer data up in viewTree:
A view with multiple children automatically combines its values for a
given preference into a single value visible to its ancestors.
source
The keywords here - with multiple children. This mean that u can pass it in viewTree from child to parent.
Let's review u'r code:
struct ContentView: View {
var body: some View {
ScrollView {
Text("Hello")
.preference(key: WidthPreferenceKey.self, value: 20)
.onPreferenceChange(WidthPreferenceKey.self) {
print($0) // Not being called, we're in a scroll view.
}
}
}
}
As u can see now - child pass value to itself, and not to parent - so this don't want to work, as per design.
And working case:
struct ContentView: View {
var body: some View {
ScrollView {
Text("Hello")
.preference(key: WidthPreferenceKey.self, value: 20)
}
.onPreferenceChange(WidthPreferenceKey.self) {
print($0)
}
}
}
Here, ScrollView is parent and Text is child, and child talk to parent - everything works as expected.
So, as I sad in the beginning the problem here not in ScrollView but in usage and in Apple documentation (u need to read it few times as always).
And regarding this:
Bound preference WidthPreferenceKey tried to update multiple times per
frame.
This is because u may change multiply values in same time and View can't be rendered, try to .receive(on:) or DispatchQueue.main.async as workaround (I guess this may be a bug)
I have a Geometry Reader in a .background of a Text view that saves the View size to a variable during .onAppear which works for the initial size calculation of the view. But if the view grows I cant think of a way for the Geometry Reader to update the size variable (taskHeight) of the view.
.background(
GeometryReader {geometry in
ZStack{
Rectangle()
.fill(Color.clear)
.onAppear{
self.taskHeight = geometry.size.height
}
// below is a function I created to try to get an updated taskHeight
// every time the String being typed updates, however including this
// gives me an error (written below the code snippet)
if (shouldCheckTaskSize())
{
self.taskHeight = geometry.size.height
Text("")
}
} //ZStack
}
)
the function I've attemped to solve my problem with throws this error: "The compiler is unable to type-check this expression in reasonable time; try breaking up the expression into distinct sub-expressions"
and this is the function:
func shouldCheckTaskSize() -> Bool
{
if (self.newTaskTitle != self.lastSizedTaskTitle)
{
self.lastSizedTaskTitle = self.newTaskTitle
return true
}
else
{
return false
}
}
In SwiftUI the view is just a function of the state if anything in the state changes the whole vie gets redrawn. So if the geometry changes the view will get redrawn automatically, just define the height of a view using geometry reader (if that is needed) and one of the modifiers and SwiftUI will do the work for you.