Panel wächst in die Breite, Menüleiste wird schmaler
Das Raster ist weg. Widgets stehen nebeneinander, alle gleich groß, in der Reihenfolge aus den Einstellungen. Das Panel sitzt am oberen Rand — nach unten zu wachsen bedeckt den Bildschirm, nach rechts und links legt es sich in den ohnehin leeren Streifen neben der Notch. Eine zweite Reihe entsteht erst, wenn der Bildschirm keine weitere Kachel mehr hergibt. Die Größenauswahl fällt damit weg, und das ist kein Verlust: ein 2×1 neben einem 2×2 lässt oben rechts eine Lücke, die niemand füllen kann und die aussieht wie ein Fehler. Genau daher kam auch die Überlappung. Ein Test prüft jetzt für ein bis zwölf Kacheln, dass sich keine zwei schneiden und alle vollständig im Panel liegen — außerhalb heißt oben: hinter der Notch. Kacheln werden zusätzlich beschnitten, damit überquellender Inhalt nicht über den Nachbarn zeichnet. Der Kalender wählt jetzt zwischen Monatsraster und Terminliste. Das war vorher an die Kachelgröße gekoppelt und ist in Wahrheit eine Frage dessen, was man sehen will. In der Menüleiste wird die Breite gemessen statt geschätzt. Vorher stand je Darstellungsart eine feste Zahl im Code, großzügig gewählt — mit dem Ergebnis, dass neben jedem Wert Platz für ein weiteres Symbol blieb, in dem nichts stand. Gemessen wird die breiteste vorkommende Zeichenfolge, nicht die gerade angezeigte, sonst springt die Leiste bei jedem Messwert. Die Balkendarstellung bekommt ihre Breite aus der Kernzahl, die erst nach der ersten Messung feststeht. Popover schließen jetzt beim Klick daneben. `behavior = .transient` genügt nicht: es greift, solange die eigene App aktiv ist, aber Onyx läuft als .accessory und wird durch einen Klick auf ein Statuselement nicht aktiviert. Ein Klick in ein fremdes Fenster erreichte das Popover gar nicht. Ein globaler Beobachter sieht solche Klicks, ein lokaler die in der eigenen App, Escape schließt ebenfalls — und es ist immer nur eines offen. Mixer und Lüfter haben eigene Menüleistenelemente. Beides regelt man mitten in etwas anderem; der Weg über ein Einstellungsfenster war zu weit. Die Lüfter sind damit auch als Panel-Kachel echt statt Platzhalter. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
@@ -2,58 +2,25 @@ import Foundation
|
||||
import CoreGraphics
|
||||
import OnyxDesign
|
||||
|
||||
/// Die Größen, in denen ein Widget im Panel auftreten darf.
|
||||
public enum WidgetSize: String, Codable, Sendable, CaseIterable, Identifiable {
|
||||
/// 1 × 1 — ein Messwert, ein Ring.
|
||||
case small
|
||||
/// 2 × 1 — Messwert mit Verlauf, kurze Liste.
|
||||
case medium
|
||||
/// 2 × 2 — Mini-Monat, Sensorliste.
|
||||
case large
|
||||
/// 4 × 1 — Medienzeile über die volle Breite.
|
||||
case wide
|
||||
|
||||
public var id: String { rawValue }
|
||||
|
||||
public var columnSpan: Int {
|
||||
switch self {
|
||||
case .small: 1
|
||||
case .medium, .large: 2
|
||||
case .wide: 4
|
||||
}
|
||||
}
|
||||
|
||||
public var rowSpan: Int {
|
||||
switch self {
|
||||
case .small, .medium, .wide: 1
|
||||
case .large: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Ein Widget an seinem Platz im Layout, wie der Nutzer es angeordnet hat.
|
||||
/// Ein Widget an seinem Platz im Layout, in der Reihenfolge, die der Nutzer
|
||||
/// festgelegt hat.
|
||||
///
|
||||
/// Ohne Größe: alle Kacheln sind gleich groß. Eine Größenauswahl klingt nach
|
||||
/// Freiheit und bringt vor allem Löcher — ein 2×1 neben einem 2×2 lässt oben
|
||||
/// rechts eine Lücke, die niemand füllen kann und die aussieht wie ein Fehler.
|
||||
public struct WidgetPlacement: Codable, Equatable, Identifiable, Sendable {
|
||||
public let id: UUID
|
||||
public var widgetID: String
|
||||
public var size: WidgetSize
|
||||
|
||||
public init(id: UUID = UUID(), widgetID: String, size: WidgetSize) {
|
||||
public init(id: UUID = UUID(), widgetID: String) {
|
||||
self.id = id
|
||||
self.widgetID = widgetID
|
||||
self.size = size
|
||||
}
|
||||
}
|
||||
|
||||
public struct GridCell: Hashable, Sendable, CustomStringConvertible {
|
||||
public let row: Int
|
||||
public let column: Int
|
||||
|
||||
public init(row: Int, column: Int) {
|
||||
self.row = row
|
||||
self.column = column
|
||||
}
|
||||
|
||||
public var description: String { "(\(row),\(column))" }
|
||||
/// Ältere Layouts trugen noch eine Größe. Sie wird beim Lesen verworfen,
|
||||
/// statt die Datei für ungültig zu erklären — sonst stünde nach dem
|
||||
/// Aktualisieren ein leeres Panel da.
|
||||
private enum CodingKeys: String, CodingKey { case id, widgetID }
|
||||
}
|
||||
|
||||
/// Ein Widget mit ausgerechneter Rasterposition.
|
||||
@@ -63,92 +30,67 @@ public struct ResolvedPlacement: Equatable, Identifiable, Sendable {
|
||||
public let column: Int
|
||||
|
||||
public var id: UUID { placement.id }
|
||||
public var columnSpan: Int { placement.size.columnSpan }
|
||||
public var rowSpan: Int { placement.size.rowSpan }
|
||||
}
|
||||
|
||||
/// Setzt Widgets in ein Raster mit fester Spaltenzahl.
|
||||
/// Setzt Widgets nebeneinander.
|
||||
///
|
||||
/// Das Panel wächst in die **Breite**. Es sitzt an der Notch, also am oberen
|
||||
/// Rand — nach unten zu wachsen bedeckt den Bildschirm, nach rechts und links
|
||||
/// legt es sich in den ohnehin leeren Streifen neben der Notch. Eine zweite
|
||||
/// Reihe entsteht erst, wenn der Bildschirm keine weitere Kachel mehr hergibt.
|
||||
public enum LayoutEngine {
|
||||
|
||||
public static let columns = 4
|
||||
/// Kantenlänge eines 1×1-Feldes.
|
||||
public static let cellSize: CGFloat = 96
|
||||
|
||||
/// Ordnet die Widgets in der gespeicherten Reihenfolge ein, jedes an die
|
||||
/// erste Stelle, an die es passt.
|
||||
/// Die eine Kachelgröße.
|
||||
///
|
||||
/// Der Reihe nach von links oben zu suchen statt stur hintereinander zu
|
||||
/// setzen ist der ganze Unterschied: neben einem 2×2-Widget bleiben rechts
|
||||
/// zwei 1×1-Plätze frei, und ein Verfahren, das immer nur hinten anfügt,
|
||||
/// lässt sie dauerhaft leer.
|
||||
public static func resolve(_ placements: [WidgetPlacement]) -> [ResolvedPlacement] {
|
||||
var occupied = Set<GridCell>()
|
||||
var resolved: [ResolvedPlacement] = []
|
||||
/// Hochkant, weil fast jedes Widget eine Liste zeigt: Termine, Sensoren,
|
||||
/// Programme im Mischpult. Breiter als hoch wäre für ein einziges davon
|
||||
/// besser und für alle anderen schlechter.
|
||||
public static let tileSize = CGSize(width: 180, height: 200)
|
||||
public static var tileSpacing: CGFloat { Onyx.Metric.tileSpacing }
|
||||
private static var padding: CGFloat { Onyx.Metric.panelPadding }
|
||||
|
||||
for placement in placements {
|
||||
let span = placement.size
|
||||
// Zu breit für das Raster: einpassen statt verwerfen. Ein Widget
|
||||
// verschwinden zu lassen wäre für den Nutzer nicht erklärbar.
|
||||
let columnSpan = min(span.columnSpan, columns)
|
||||
|
||||
guard let cell = firstFreeCell(columnSpan: columnSpan,
|
||||
rowSpan: span.rowSpan,
|
||||
occupied: occupied) else { continue }
|
||||
|
||||
for row in cell.row..<(cell.row + span.rowSpan) {
|
||||
for column in cell.column..<(cell.column + columnSpan) {
|
||||
occupied.insert(GridCell(row: row, column: column))
|
||||
}
|
||||
}
|
||||
resolved.append(ResolvedPlacement(placement: placement,
|
||||
row: cell.row,
|
||||
column: cell.column))
|
||||
}
|
||||
return resolved
|
||||
/// Wie viele Kacheln nebeneinander passen.
|
||||
public static func columns(availableWidth: CGFloat) -> Int {
|
||||
let usable = availableWidth - 2 * padding + tileSpacing
|
||||
let fitting = Int(usable / (tileSize.width + tileSpacing))
|
||||
// Mindestens eine: lieber ein Panel, das über den Rand ragt, als eine
|
||||
// Division durch null oder ein Panel ganz ohne Inhalt.
|
||||
return max(1, fitting)
|
||||
}
|
||||
|
||||
private static func firstFreeCell(columnSpan: Int,
|
||||
rowSpan: Int,
|
||||
occupied: Set<GridCell>) -> GridCell? {
|
||||
let maxRow = (occupied.map(\.row).max() ?? -1) + rowSpan + 1
|
||||
|
||||
for row in 0...maxRow {
|
||||
for column in 0...(columns - columnSpan) {
|
||||
let fits = (row..<(row + rowSpan)).allSatisfy { r in
|
||||
(column..<(column + columnSpan)).allSatisfy { c in
|
||||
!occupied.contains(GridCell(row: r, column: c))
|
||||
}
|
||||
}
|
||||
if fits { return GridCell(row: row, column: column) }
|
||||
}
|
||||
public static func resolve(_ placements: [WidgetPlacement],
|
||||
availableWidth: CGFloat) -> [ResolvedPlacement] {
|
||||
let columnCount = columns(availableWidth: availableWidth)
|
||||
return placements.enumerated().map { index, placement in
|
||||
ResolvedPlacement(placement: placement,
|
||||
row: index / columnCount,
|
||||
column: index % columnCount)
|
||||
}
|
||||
return nil
|
||||
}
|
||||
|
||||
/// Die Größe, die das Panel für dieses Layout braucht.
|
||||
public static func panelSize(for resolved: [ResolvedPlacement]) -> CGSize {
|
||||
let spacing = Onyx.Metric.tileSpacing
|
||||
let padding = Onyx.Metric.panelPadding
|
||||
|
||||
let rows = resolved.map { $0.row + $0.rowSpan }.max() ?? 1
|
||||
let usedRows = max(rows, 1)
|
||||
public static func panelSize(for placements: [WidgetPlacement],
|
||||
availableWidth: CGFloat) -> CGSize {
|
||||
let columnCount = columns(availableWidth: availableWidth)
|
||||
// Ein leeres Layout bekommt trotzdem eine Kachelfläche: ein Panel ohne
|
||||
// Ausdehnung wäre ein unsichtbares Panel, und der Nutzer hielte das
|
||||
// für einen Absturz.
|
||||
let count = max(placements.count, 1)
|
||||
let used = min(count, columnCount)
|
||||
let rows = Int(ceil(Double(count) / Double(columnCount)))
|
||||
|
||||
return CGSize(
|
||||
width: CGFloat(columns) * cellSize + CGFloat(columns - 1) * spacing + 2 * padding,
|
||||
height: CGFloat(usedRows) * cellSize + CGFloat(usedRows - 1) * spacing + 2 * padding)
|
||||
width: CGFloat(used) * tileSize.width
|
||||
+ CGFloat(used - 1) * tileSpacing + 2 * padding,
|
||||
height: CGFloat(rows) * tileSize.height
|
||||
+ CGFloat(rows - 1) * tileSpacing + 2 * padding)
|
||||
}
|
||||
|
||||
/// Der Rahmen eines Widgets innerhalb des Panels, in SwiftUI-Koordinaten
|
||||
/// (Ursprung oben links).
|
||||
public static func frame(for item: ResolvedPlacement, in panelSize: CGSize) -> CGRect {
|
||||
let spacing = Onyx.Metric.tileSpacing
|
||||
let padding = Onyx.Metric.panelPadding
|
||||
|
||||
let x = padding + CGFloat(item.column) * (cellSize + spacing)
|
||||
let y = padding + CGFloat(item.row) * (cellSize + spacing)
|
||||
let width = CGFloat(item.columnSpan) * cellSize + CGFloat(item.columnSpan - 1) * spacing
|
||||
let height = CGFloat(item.rowSpan) * cellSize + CGFloat(item.rowSpan - 1) * spacing
|
||||
|
||||
return CGRect(x: x, y: y, width: width, height: height)
|
||||
/// Der Rahmen einer Kachel im Panel, in SwiftUI-Koordinaten (oben links).
|
||||
public static func frame(for item: ResolvedPlacement) -> CGRect {
|
||||
CGRect(x: padding + CGFloat(item.column) * (tileSize.width + tileSpacing),
|
||||
y: padding + CGFloat(item.row) * (tileSize.height + tileSpacing),
|
||||
width: tileSize.width,
|
||||
height: tileSize.height)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user