Bound preference _ tried to update multiple times per frame - ios

Question

My goal is to create a similar app interface like in "Things 3", where user can move a cursor to then create a task at where cursor was dropped. Since I m planning to have multiple views to be able to react at whether the cursor is hovering over them, I decided to build a simple system.
First the view that will have a cursor needs to be wrapped in a Selecting class:
struct Selecting<Content: View, Cursor: View>: View {
#State var cursorRect: CGRect?
let cursorView: Cursor
let content: Content
let initialOffset: CGSize
#State var dragging = false
#State var offset = CGSize()
init(initialOffset: CGSize = .zero, #ViewBuilder cursorView: () -> Cursor, #ViewBuilder content: () -> Content) {
self.content = content()
self.cursorView = cursorView()
self.initialOffset = initialOffset
}
var body: some View {
ZStack {
content
.environment(\.cursorRect, cursorRect)
cursorView
.background(
GeometryReader {
Color.clear
.preference(key: CursorRectKey.self, value: $0.frame(in: .global))
}
.onPreferenceChange(CursorRectKey.self) { rect in cursorRect = dragging ? rect : nil }
)
.highPriorityGesture(
DragGesture(minimumDistance: 10, coordinateSpace: .global)
.onChanged {
self.offset = $0.translation
dragging = true
}
.onEnded { _ in
self.offset = .zero
dragging = false
}
)
.offset(initialOffset + offset)
}
}
}
private struct CursorRectKey: PreferenceKey {
static let defaultValue = CGRect()
static func reduce(value: inout CGRect, nextValue: () -> CGRect) {
value = nextValue()
}
}
private struct SelectedKey: PreferenceKey {
static let defaultValue = false
static func reduce(value: inout Bool, nextValue: () -> Bool) {
value = nextValue()
}
}
private struct PointerKey: EnvironmentKey {
static let defaultValue: CGRect? = nil
}
private extension EnvironmentValues {
var cursorRect: CGRect? {
get { self[PointerKey.self] }
set { self[PointerKey.self] = newValue }
}
}
E.g. like this
Selecting(initialOffset: .init(width: 60, height: 60), cursorView: {
Image(systemName: "pencil")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 30)
.foregroundColor(.white)
.background(
Circle()
.frame(width: 60, height: 60)
.foregroundColor(.green)
)
}) {
List(dates, id: \.self) { date in
DayView(currentProgram: currentProgram, events: $events, date: date)
}
}
Then the view that needs to respond to the hovering needs to have a .selectable modifier
extension View {
func selectable(hovered: Binding<Bool?>) -> some View {
Selectable(hovered: hovered) { self }
.border(Color.red, width: 1)
}
}
struct Selectable<Content: View>: View {
let content: Content
#Binding var hovered: Bool?
init(hovered: Binding<Bool?>, #ViewBuilder content: () -> Content) {
self._hovered = hovered
self.content = content()
}
#Environment(\.cursorRect) var cursorRect
var body: some View {
content
.background(
GeometryReader { proxy in
let child = proxy.frame(in: .global)
Color.clear
.preference(key: HoveredKey.self, value: cursorRect == nil ? nil : child.contains(cursorRect!.origin))
}
)
.onPreferenceChange(HoveredKey.self) { hovered in self.hovered = hovered }
}
}
private struct HoveredKey: PreferenceKey {
typealias Value = Bool?
static func reduce(value: inout Value, nextValue: () -> Value) {
value = nextValue()
}
}
E.g. like this:
struct Title: View {
#State var hovered: Bool?
var body: some View {
VStack {
Text("Hello there")
.selectable(hovered: $hovered)
if hovered == true {
Text("Hovering")
}
}
}
}
The problem is that I get this bizarre error "Bound preference HoveredKey tried to update multiple times per frame" and I don't understand how to solve it and why it comes up. During debug, for some reason the hovered variable in Selectable is changed multiple times during a frame, just as the error states.

Answer 1

Alright solved. The problem was in how i was deciding whether a view is hovered or not. I was passing the coordindates of the cursor to the child, then check if it's contained in the child's rect.
However, now i do the opposite, I send the children's rects to the parent (Selecting), where then it's determined who is hovered, then the selected child's id is sent to children. This approach works perfectly
Here is the new code:
import SwiftUI
extension View {
func selectable(hovered: Binding<Bool?>) -> some View {
return Selectable(hovered: hovered) { self }
}
}
struct Selectable<Content: View>: View {
let content: Content
#Binding var hovered: Bool?
#State var id = UUID()
init(hovered: Binding<Bool?>, #ViewBuilder content: () -> Content) {
self._hovered = hovered
self.content = content()
}
#Environment(\.selectedChild) private var selectedChild
var body: some View {
content
.background(
GeometryReader { proxy in
let child = proxy.frame(in: .global)
Color.clear
.preference(key: ChildInfoKey.self, value: [id: child])
.preference(key: BoolKey.self, value: selectedChild == id)
}
)
.onPreferenceChange(BoolKey.self) { hovered = $0 }
}
}
private struct BoolKey: PreferenceKey {
typealias Value = Bool
static var defaultValue = false
static func reduce(value: inout Value, nextValue: () -> Value) { value = nextValue() }
}
private struct ChildInfoKey: PreferenceKey {
typealias Value = [UUID: CGRect]
static var defaultValue: Value = [:]
static func reduce(value: inout Value, nextValue: () -> Value) { value.merge(nextValue()) { $1 } }
}
struct Selecting<Content: View, Cursor: View>: View {
#State var cursorRect: CGRect?
let cursorView: Cursor
let content: Content
let initialOffset: CGSize
#State var dragging = false
#State var offset = CGSize()
#State var children = [UUID: CGRect]()
#State var selectedChild: UUID?
init(initialOffset: CGSize = .zero, #ViewBuilder cursorView: () -> Cursor, #ViewBuilder content: () -> Content) {
self.content = content()
self.cursorView = cursorView()
self.initialOffset = initialOffset
}
var body: some View {
ZStack {
content
.onPreferenceChange(ChildInfoKey.self) { children in self.children = children }
.environment(\.selectedChild, selectedChild)
cursorView
.background(
GeometryReader {
Color.clear
.preference(key: CursorRectKey.self, value: $0.frame(in: .global))
}
)
.onPreferenceChange(CursorRectKey.self) { rect in
let children = self.children
let selectedChild = dragging ? children.first { $0.1.contains(rect.origin) }?.key : nil
self.selectedChild = selectedChild
print("\(selectedChild == nil ? "nil" : "\(selectedChild!)")")
}
.highPriorityGesture(
DragGesture(minimumDistance: 10, coordinateSpace: .global)
.onChanged {
self.offset = $0.translation
dragging = true
}
.onEnded { _ in
self.offset = .zero
dragging = false
}
)
.offset(initialOffset + offset)
}
}
}
private struct CursorRectKey: PreferenceKey {
static let defaultValue = CGRect()
static func reduce(value: inout CGRect, nextValue: () -> CGRect) {
value = nextValue()
}
}
private struct SelectedChildKey: EnvironmentKey {
static var defaultValue: UUID? = nil
}
private extension EnvironmentValues {
var selectedChild: UUID? {
get { self[SelectedChildKey.self] }
set { self[SelectedChildKey.self] = newValue }
}
}