Reimplement tables under new layout system and allow cells to contain arbitrary views

These changes took a lot of thinking but I'm pretty happy with how they turned out

Author: stackotter

Examples/Sources/SpreadsheetExample/SpreadsheetApp.swift

@@ -1,3 +1,4 @@
+import Foundation
 import SelectedBackend
 import SwiftCrossUI
 
@@ -25,6 +26,9 @@ class SpreadsheetState: Observable {
             email: "bob@example.com", occupation: "adversary"
         ),
     ]
+
+    @Observed
+    var greeting: String?
 }
 
 @main
@@ -37,14 +41,28 @@ struct SpreadsheetApp: App {
     var body: some Scene {
         WindowGroup("Spreadsheet") {
             #hotReloadable {
-                Table(state.data) {
-                    TableColumn("Name", value: \Person.name)
-                    TableColumn("Age", value: \Person.age)
-                    TableColumn("Phone", value: \Person.phone)
-                    TableColumn("Email", value: \Person.email)
-                    TableColumn("Occupation", value: \Person.occupation)
+                VStack(spacing: 0) {
+                    VStack {
+                        if let greeting = state.greeting {
+                            Text(greeting)
+                        } else {
+                            Text("Pending greeting...")
+                        }
+                    }
+                    .padding(10)
+                    Table(state.data) {
+                        TableColumn("Name", value: \Person.name)
+                        TableColumn("Age", value: \Person.age.description)
+                        TableColumn("Phone", value: \Person.phone)
+                        TableColumn("Email", value: \Person.email)
+                        TableColumn("Occupation", value: \Person.occupation)
+                        TableColumn("Action") { (person: Person) in
+                            Button("Greet") {
+                                state.greeting = "Hello, \(person.name)!"
+                            }
+                        }
+                    }
                 }
-                .padding(10)
             }
         }
     }

Sources/AppKitBackend/AppKitBackend.swift

@@ -537,6 +537,100 @@ public struct AppKitBackend: AppBackend {
 
         imageView.image = NSImage(cgImage: cgImage, size: NSSize(width: width, height: height))
     }
+
+    public func createTable() -> Widget {
+        let scrollView = NSScrollView()
+        let table = NSCustomTableView()
+        table.delegate = table.customDelegate
+        table.dataSource = table.customDelegate
+        table.usesAlternatingRowBackgroundColors = true
+        table.rowHeight = 24
+        table.columnAutoresizingStyle = .lastColumnOnlyAutoresizingStyle
+        table.allowsColumnSelection = false
+        scrollView.documentView = table
+        return .view(scrollView)
+    }
+
+    public func setRowCount(ofTable table: Widget, to rowCount: Int) {
+        let table = (table.view as! NSScrollView).documentView as! NSCustomTableView
+        table.customDelegate.rowCount = rowCount
+    }
+
+    public func setColumnLabels(ofTable table: Widget, to labels: [String]) {
+        let table = (table.view as! NSScrollView).documentView as! NSCustomTableView
+        var columnIndices: [ObjectIdentifier: Int] = [:]
+        let columns = labels.enumerated().map { (i, label) in
+            let column = NSTableColumn(
+                identifier: NSUserInterfaceItemIdentifier("Column \(i)")
+            )
+            column.headerCell = NSTableHeaderCell(textCell: label)
+            // column.width = 200
+            columnIndices[ObjectIdentifier(column)] = i
+            return column
+        }
+        table.customDelegate.columnIndices = columnIndices
+        for column in table.tableColumns {
+            table.removeTableColumn(column)
+        }
+        table.customDelegate.columnCount = labels.count
+        for column in columns {
+            table.addTableColumn(column)
+        }
+    }
+
+    public func setCells(
+        ofTable table: Widget,
+        to cells: [Widget],
+        withRowHeights rowHeights: [Int]
+    ) {
+        let table = (table.view as! NSScrollView).documentView as! NSCustomTableView
+        table.customDelegate.widgets = cells
+        table.customDelegate.rowHeights = rowHeights
+        table.reloadData()
+    }
+}
+
+class NSCustomTableView: NSTableView {
+    var customDelegate = NSCustomTableViewDelegate()
+}
+
+class NSCustomTableViewDelegate: NSObject, NSTableViewDelegate, NSTableViewDataSource {
+    var widgets: [AppKitBackend.Widget] = []
+    var rowHeights: [Int] = []
+    var columnIndices: [ObjectIdentifier: Int] = [:]
+    var rowCount = 0
+    var columnCount = 0
+
+    func numberOfRows(in tableView: NSTableView) -> Int {
+        return rowCount
+    }
+
+    func tableView(_ tableView: NSTableView, heightOfRow row: Int) -> CGFloat {
+        return CGFloat(rowHeights[row])
+    }
+
+    func tableView(
+        _ tableView: NSTableView,
+        viewFor tableColumn: NSTableColumn?,
+        row: Int
+    ) -> NSView? {
+        guard let tableColumn else {
+            print("warning: No column provided")
+            return nil
+        }
+        guard let columnIndex = columnIndices[ObjectIdentifier(tableColumn)] else {
+            print("warning: NSTableView asked for value of non-existent column")
+            return nil
+        }
+        return widgets[row * columnCount + columnIndex].view
+    }
+
+    func tableView(
+        _ tableView: NSTableView,
+        selectionIndexesForProposedSelection proposedSelectionIndexes: IndexSet
+    ) -> IndexSet {
+        []
+    }
 }
 
 extension Color {

Sources/Gtk/Generated/Switch.swift

@@ -5,13 +5,13 @@ import CGtk
 /// ![An example GtkSwitch](switch.png)
 ///
 /// The user can control which state should be active by clicking the
-/// empty area, or by dragging the handle.
+/// empty area, or by dragging the slider.
 ///
-/// `GtkSwitch` can also handle situations where the underlying state
-/// changes with a delay. In this case, the slider position indicates
-/// the user's recent change (as indicated by the [property@Gtk.Switch:active]
-/// property), and the color indicates whether the underlying state (represented
-/// by the [property@Gtk.Switch:state] property) has been updated yet.
+/// `GtkSwitch` can also express situations where the underlying state changes
+/// with a delay. In this case, the slider position indicates the user's recent
+/// change (represented by the [property@Gtk.Switch:active] property), while the
+/// trough color indicates the present underlying state (represented by the
+/// [property@Gtk.Switch:state] property).
 ///
 /// ![GtkSwitch with delayed state change](switch-state.png)
 ///
@@ -115,6 +115,10 @@ public class Switch: Widget, Actionable {
 
     /// The backend state that is controlled by the switch.
     ///
+    /// Applications should usually set the [property@Gtk.Switch:active] property,
+    /// except when indicating a change to the backend state which occurs
+    /// separately from the user's interaction.
+    ///
     /// See [signal@Gtk.Switch::state-set] for details.
     @GObjectProperty(named: "state") public var state: Bool
 
@@ -129,18 +133,14 @@ public class Switch: Widget, Actionable {
     /// Emitted to change the underlying state.
     ///
     /// The ::state-set signal is emitted when the user changes the switch
-    /// position. The default handler keeps the state in sync with the
-    /// [property@Gtk.Switch:active] property.
+    /// position. The default handler calls [method@Gtk.Switch.set_state] with the
+    /// value of @state.
     ///
     /// To implement delayed state change, applications can connect to this
     /// signal, initiate the change of the underlying state, and call
     /// [method@Gtk.Switch.set_state] when the underlying state change is
     /// complete. The signal handler should return %TRUE to prevent the
     /// default handler from running.
-    ///
-    /// Visually, the underlying state is represented by the trough color of
-    /// the switch, while the [property@Gtk.Switch:active] property is
-    /// represented by the position of the switch.
     public var stateSet: ((Switch) -> Void)?
 
     public var notifyActive: ((Switch) -> Void)?

Sources/SwiftCrossUI/Backend/AppBackend.swift

@@ -194,16 +194,19 @@ public protocol AppBackend {
     ///     to influence the size of the image on-screen).
     func updateImageView(_ imageView: Widget, rgbaData: [UInt8], width: Int, height: Int)
 
-    /// Creates a table with an initial number of rows and columns.
-    func createTable(rows: Int, columns: Int) -> Widget
+    /// Creates an empty table.
+    func createTable() -> Widget
     /// Sets the number of rows of a table. Existing rows outside of the new bounds should
     /// be deleted.
     func setRowCount(ofTable table: Widget, to rows: Int)
-    /// Sets the number of columns of a table. Existing columns outside of the new bounds
-    /// should be deleted.
-    func setColumnCount(ofTable table: Widget, to columns: Int)
-    /// Sets the contents of the table cell at the given position in a table.
-    func setCell(at position: CellPosition, inTable table: Widget, to widget: Widget)
+    /// Sets the labels of a table's columns. Also sets the number of columns of the table to the
+    /// number of labels provided.
+    func setColumnLabels(ofTable table: Widget, to labels: [String])
+    /// Sets the contents of the table as a flat array of cells in order of and grouped by row. Also
+    /// sets the height of each row's content.
+    ///
+    /// A nested array would have significantly more overhead, especially for large arrays.
+    func setCells(ofTable table: Widget, to cells: [Widget], withRowHeights rowHeights: [Int])
 
     // MARK: Controls
 
@@ -329,16 +332,20 @@ extension AppBackend {
         todo()
     }
 
-    public func createTable(rows: Int, columns: Int) -> Widget {
+    public func createTable() -> Widget {
         todo()
     }
     public func setRowCount(ofTable table: Widget, to rows: Int) {
         todo()
     }
-    public func setColumnCount(ofTable table: Widget, to columns: Int) {
+    public func setColumnLabels(ofTable table: Widget, to labels: [String]) {
         todo()
     }
-    public func setCell(at position: CellPosition, inTable table: Widget, to widget: Widget) {
+    public func setCells(
+        ofTable table: Widget,
+        to cells: [Widget],
+        withRowHeights rowHeights: [Int]
+    ) {
         todo()
     }