I'm pretty new to Swift and SwiftUI and am building a Todo app to learn.
What I'm trying to do
In my app, I've got some todo's that are top level, and some that are nested under a header. These are set in my view using two State vars that are passed in from the parent view: topLevelTodos and headings. Headings has a .todos property to access the todos under that heading. Todos are sorted using a property on the Todo model; position for items not under a heading, positionHeading for items in a heading (picking the right one is what the forContext: todoContext takes care of).
I'd like to sort items and be able to drag them into and out of headings at will. Dragging to other headings or outside a heading is out of scope for this question now; I'm just trying to get sorting within the top level items and within a heading working now.
The problem
Sorting within the top level items works well. Sorting under a heading does nothing. It seems like the call to .move in the DropDelegate that should update the order of the items in the array so the view can update does absolutely nothing. I can see different indices going in, but when I inspect the todos array after the .move call, it has not changed. Its as if the array is read-only. I suspect I'm doing something wrong with my bindings, but I'm not sure.
Any pointers would be greatly appreciated!
Thanks,
Bastiaan
The code ->
struct TodoDropDelegate: DropDelegate {
let destinationTodo: Todo
let todoContext: TodoContext
@Binding var todos:[Todo]
@Binding var draggedTodo:Todo?
func dropUpdated(info: DropInfo) -> DropProposal? {
return DropProposal(operation: .move)
}
func performDrop(info: DropInfo) -> Bool {
// commit the changes to the underlying SwiftData models
for (index, item) in todos.enumerated() {
item.setPosition(index: index, forContext: todoContext)
}
draggedTodo = nil
return true
}
func dropEntered(info: DropInfo) {
if let draggedTodo {
let fromIndex = todos.firstIndex(of: draggedTodo)
if let fromIndex {
let toIndex = todos.firstIndex(of: destinationTodo)
if let toIndex, fromIndex != toIndex {
// move the items around in the array to update the view and visually rearrange the items
debugPrint("moving from, to", fromIndex, toIndex)
self.todos.move(fromOffsets: IndexSet(integer: fromIndex), toOffset: (toIndex > fromIndex ? (toIndex + 1) : toIndex))
}
}
}
}
}
struct TodoListView: View {
@Environment(\.modelContext) private var modelContext
@EnvironmentObject var viewState:TodoViewState
@State var topLevelTodos:[Todo]
@State var headings:[Heading]
var todoItemViewConfig:TodoItemViewConfig
@State var draggedTodo: Todo?
var body: some View {
VStack {
Section() {
// Items without a heading
ForEach(topLevelTodos) { todo in
TodoItemView(todo: todo, isEditing: .constant(false), isSelected: .constant(false), viewConfig: todoItemViewConfig)
.overlay(TodoItemDragPlaceholder(draggedTodo: $draggedTodo, todo: todo))
.onDrag {
self.draggedTodo = todo
return NSItemProvider(object: todo.name as NSString)
} preview: {
TodoItemView(todo: todo, isEditing: .constant(false), isSelected: .constant(true), viewConfig: todoItemViewConfig)
}
.onDrop(
of: [.text],
delegate: TodoDropDelegate(
destinationTodo: todo,
todoContext: viewState.context.getTodoContext(),
todos: $topLevelTodos,
draggedTodo: $draggedTodo
)
)
}
}
ForEach(0..<headings.count, id: \.self) { index in
Section(header: Text(headings[index].name)) {
if headings[index].todos.count > 0 {
ForEach(headings[index].todos.sorted { $0.positionHeading < $1.positionHeading } ) { todo in
TodoItemView(todo: todo, isEditing: .constant(false), isSelected: .constant(false), viewConfig: todoItemViewConfig)
.overlay(TodoItemDragPlaceholder(draggedTodo: $draggedTodo, todo: todo))
.onDrag {
self.draggedTodo = todo
return NSItemProvider(object: todo.name as NSString)
} preview: {
TodoItemView(todo: todo, isEditing: .constant(false), isSelected: .constant(true), viewConfig: todoItemViewConfig)
}
.onDrop(
of: [.text],
delegate: TodoDropDelegate(
destinationTodo: todo,
todoContext: TodoContext.heading,
todos: $headings[index].todos,
draggedTodo: $draggedTodo
)
)
}
}
}
}
}
.animation(.bouncy(duration: 0.3), value: topLevelTodos)
}
}