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
@@ -1,194 +1,126 @@
|
||||
import Testing
|
||||
import Foundation
|
||||
import CoreGraphics
|
||||
@testable import OnyxWidgetKit
|
||||
|
||||
// Das Panel-Raster hat vier Spalten. Widgets werden in der gespeicherten
|
||||
// Reihenfolge eingesetzt, jedes an die erste Stelle, an die es passt. Bleibt
|
||||
// links eine Lücke, füllt sie das nächste Widget, das hineinpasst — sonst
|
||||
// stünden im Panel dauernd Löcher, die niemand füllen kann.
|
||||
// Das Panel wächst in die **Breite**. Widgets stehen nebeneinander, alle gleich
|
||||
// groß, in der Reihenfolge, die der Nutzer festgelegt hat. Eine zweite Reihe
|
||||
// entsteht erst, wenn der Bildschirm keine weitere Kachel mehr hergibt.
|
||||
|
||||
@Suite("Layout-Engine")
|
||||
private func placements(_ count: Int) -> [WidgetPlacement] {
|
||||
(0..<count).map { WidgetPlacement(widgetID: "w\($0)") }
|
||||
}
|
||||
|
||||
/// Breit genug für beliebig viele Kacheln in dieser Testreihe.
|
||||
private let wideScreen: CGFloat = 4000
|
||||
|
||||
@Suite("Rasteraufteilung")
|
||||
struct LayoutEngineTests {
|
||||
|
||||
private func placement(_ widget: String, _ size: WidgetSize) -> WidgetPlacement {
|
||||
WidgetPlacement(widgetID: widget, size: size)
|
||||
}
|
||||
|
||||
// MARK: - Grundlegendes Setzen
|
||||
|
||||
@Test("Ein kleines Widget landet oben links")
|
||||
func singleSmall() {
|
||||
let resolved = LayoutEngine.resolve([placement("cpu", .small)])
|
||||
|
||||
#expect(resolved.count == 1)
|
||||
#expect(resolved[0].column == 0)
|
||||
#expect(resolved[0].row == 0)
|
||||
}
|
||||
|
||||
@Test("Vier kleine Widgets füllen genau die erste Zeile")
|
||||
func fourSmallFillFirstRow() {
|
||||
let resolved = LayoutEngine.resolve((0..<4).map { placement("w\($0)", .small) })
|
||||
|
||||
#expect(resolved.map(\.row) == [0, 0, 0, 0])
|
||||
@Test("Widgets stehen nebeneinander, nicht untereinander")
|
||||
func sideBySide() {
|
||||
let resolved = LayoutEngine.resolve(placements(4), availableWidth: wideScreen)
|
||||
#expect(resolved.allSatisfy { $0.row == 0 })
|
||||
#expect(resolved.map(\.column) == [0, 1, 2, 3])
|
||||
}
|
||||
|
||||
@Test("Das fünfte kleine Widget rutscht in die zweite Zeile")
|
||||
func fifthWraps() {
|
||||
let resolved = LayoutEngine.resolve((0..<5).map { placement("w\($0)", .small) })
|
||||
|
||||
#expect(resolved[4].row == 1)
|
||||
#expect(resolved[4].column == 0)
|
||||
@Test("Die Reihenfolge des Nutzers bleibt die Reihenfolge im Panel")
|
||||
func keepsOrder() {
|
||||
let items = [WidgetPlacement(widgetID: "wetter"),
|
||||
WidgetPlacement(widgetID: "kalender"),
|
||||
WidgetPlacement(widgetID: "medien")]
|
||||
let resolved = LayoutEngine.resolve(items, availableWidth: wideScreen)
|
||||
#expect(resolved.map(\.placement.widgetID) == ["wetter", "kalender", "medien"])
|
||||
}
|
||||
|
||||
@Test("Ein breites Widget belegt alle vier Spalten")
|
||||
func wideTakesFullRow() {
|
||||
let resolved = LayoutEngine.resolve([placement("media", .wide)])
|
||||
|
||||
#expect(resolved[0].column == 0)
|
||||
#expect(resolved[0].columnSpan == 4)
|
||||
@Test("Alle Kacheln sind gleich groß")
|
||||
func allTilesSameSize() {
|
||||
let resolved = LayoutEngine.resolve(placements(5), availableWidth: wideScreen)
|
||||
let sizes = Set(resolved.map { LayoutEngine.frame(for: $0).size.debugDescription })
|
||||
#expect(sizes.count == 1)
|
||||
}
|
||||
|
||||
@Test("Ein hohes Widget belegt zwei Zeilen")
|
||||
func largeSpansTwoRows() {
|
||||
let resolved = LayoutEngine.resolve([placement("calendar", .large)])
|
||||
|
||||
#expect(resolved[0].columnSpan == 2)
|
||||
#expect(resolved[0].rowSpan == 2)
|
||||
}
|
||||
|
||||
// MARK: - Packen
|
||||
|
||||
@Test("Ein breites Widget passt nicht neben ein kleines und beginnt eine neue Zeile")
|
||||
func wideStartsNewRowWhenBlocked() {
|
||||
let resolved = LayoutEngine.resolve([
|
||||
placement("cpu", .small),
|
||||
placement("media", .wide),
|
||||
])
|
||||
|
||||
#expect(resolved[0].row == 0)
|
||||
#expect(resolved[1].row == 1)
|
||||
#expect(resolved[1].column == 0)
|
||||
}
|
||||
|
||||
@Test("Kleine Widgets füllen die Lücke neben einem hohen Widget")
|
||||
func smallFillsGapBesideLarge() {
|
||||
// Ein 2×2-Widget links lässt rechts zwei freie 1×1-Plätze in Zeile 0
|
||||
// und zwei in Zeile 1 — die dürfen nicht verloren gehen.
|
||||
let resolved = LayoutEngine.resolve([
|
||||
placement("calendar", .large),
|
||||
placement("cpu", .small),
|
||||
placement("ram", .small),
|
||||
placement("gpu", .small),
|
||||
])
|
||||
|
||||
#expect(resolved[1].row == 0)
|
||||
#expect(resolved[1].column == 2)
|
||||
#expect(resolved[2].row == 0)
|
||||
#expect(resolved[2].column == 3)
|
||||
#expect(resolved[3].row == 1)
|
||||
#expect(resolved[3].column == 2)
|
||||
}
|
||||
|
||||
@Test("Belegte Felder werden nie doppelt vergeben")
|
||||
func noOverlaps() {
|
||||
let resolved = LayoutEngine.resolve([
|
||||
placement("a", .large), placement("b", .medium), placement("c", .small),
|
||||
placement("d", .wide), placement("e", .small), placement("f", .large),
|
||||
])
|
||||
|
||||
var occupied = Set<GridCell>()
|
||||
for item in resolved {
|
||||
for row in item.row..<(item.row + item.rowSpan) {
|
||||
for column in item.column..<(item.column + item.columnSpan) {
|
||||
let cell = GridCell(row: row, column: column)
|
||||
#expect(!occupied.contains(cell), "Feld \(cell) doppelt belegt")
|
||||
occupied.insert(cell)
|
||||
@Test("Keine zwei Kacheln überlappen sich")
|
||||
func noOverlap() {
|
||||
// Der eigentliche Punkt. Genau das war im alten Raster zu sehen: der
|
||||
// Kalender lag über dem Wetter. Eine Kachel, die eine andere verdeckt,
|
||||
// ist kein Schönheitsfehler, sondern eine verlorene Auskunft.
|
||||
for count in 1...12 {
|
||||
let resolved = LayoutEngine.resolve(placements(count), availableWidth: 1200)
|
||||
let frames = resolved.map { LayoutEngine.frame(for: $0) }
|
||||
for (index, frame) in frames.enumerated() {
|
||||
for other in frames[(index + 1)...] {
|
||||
#expect(!frame.intersects(other),
|
||||
"Überlappung bei \(count) Kacheln: \(frame) und \(other)")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Test("Nichts ragt über den rechten Rand hinaus")
|
||||
func nothingOverflowsRight() {
|
||||
let resolved = LayoutEngine.resolve([
|
||||
placement("a", .small), placement("b", .medium),
|
||||
placement("c", .large), placement("d", .wide),
|
||||
])
|
||||
@Test("Das Panel wächst in die Breite, nicht in die Höhe")
|
||||
func growsSideways() {
|
||||
let one = LayoutEngine.panelSize(for: placements(1), availableWidth: wideScreen)
|
||||
let four = LayoutEngine.panelSize(for: placements(4), availableWidth: wideScreen)
|
||||
#expect(four.width > one.width)
|
||||
#expect(four.height == one.height)
|
||||
}
|
||||
|
||||
for item in resolved {
|
||||
#expect(item.column + item.columnSpan <= LayoutEngine.columns)
|
||||
@Test("Erst wenn der Bildschirm voll ist, kommt eine zweite Reihe")
|
||||
func wrapsOnlyWhenFull() {
|
||||
// Ein Panel breiter als der Bildschirm wäre schlimmer als eine zweite
|
||||
// Reihe: die Hälfte hinge außerhalb.
|
||||
// Genau so breit, dass zwei Kacheln passen und keine dritte.
|
||||
let narrow = LayoutEngine.panelSize(for: placements(2), availableWidth: wideScreen).width
|
||||
let resolved = LayoutEngine.resolve(placements(3), availableWidth: narrow)
|
||||
#expect(resolved.map(\.row) == [0, 0, 1])
|
||||
#expect(resolved.map(\.column) == [0, 1, 0])
|
||||
}
|
||||
|
||||
@Test("Das Panel bleibt innerhalb des verfügbaren Platzes")
|
||||
func neverExceedsAvailableWidth() {
|
||||
let available: CGFloat = 900
|
||||
for count in 1...10 {
|
||||
let size = LayoutEngine.panelSize(for: placements(count), availableWidth: available)
|
||||
#expect(size.width <= available)
|
||||
}
|
||||
}
|
||||
|
||||
@Test("Die gespeicherte Reihenfolge bleibt erhalten")
|
||||
func orderIsStable() {
|
||||
let placements = [placement("a", .small), placement("b", .wide), placement("c", .small)]
|
||||
let resolved = LayoutEngine.resolve(placements)
|
||||
|
||||
#expect(resolved.map(\.placement.widgetID) == ["a", "b", "c"])
|
||||
@Test("Auf einem sehr schmalen Bildschirm bleibt mindestens eine Spalte")
|
||||
func alwaysAtLeastOneColumn() {
|
||||
// Lieber ein Panel, das über den Rand ragt, als eine Division durch
|
||||
// null oder ein Panel ohne Inhalt.
|
||||
let resolved = LayoutEngine.resolve(placements(2), availableWidth: 10)
|
||||
#expect(resolved.map(\.column) == [0, 0])
|
||||
#expect(resolved.map(\.row) == [0, 1])
|
||||
}
|
||||
|
||||
@Test("Leeres Layout ergibt kein Ergebnis und keinen Absturz")
|
||||
func emptyLayout() {
|
||||
#expect(LayoutEngine.resolve([]).isEmpty)
|
||||
}
|
||||
|
||||
// MARK: - Panelgröße
|
||||
|
||||
@Test("Panelgröße folgt der belegten Zeilenzahl, nicht der Widgetzahl")
|
||||
func panelSizeFollowsRows() {
|
||||
let oneRow = LayoutEngine.panelSize(for: LayoutEngine.resolve([
|
||||
placement("a", .small), placement("b", .small),
|
||||
]))
|
||||
let twoRows = LayoutEngine.panelSize(for: LayoutEngine.resolve(
|
||||
(0..<5).map { placement("w\($0)", .small) }))
|
||||
|
||||
#expect(twoRows.height > oneRow.height)
|
||||
// Die Breite steht fest: vier Spalten, immer.
|
||||
#expect(twoRows.width == oneRow.width)
|
||||
}
|
||||
|
||||
@Test("Ein leeres Panel hat trotzdem eine sinnvolle Mindestgröße")
|
||||
func emptyPanelHasMinimumSize() {
|
||||
let size = LayoutEngine.panelSize(for: [])
|
||||
|
||||
@Test("Ein leeres Layout ergibt trotzdem ein sichtbares Panel")
|
||||
func emptyLayoutHasSize() {
|
||||
let size = LayoutEngine.panelSize(for: [], availableWidth: wideScreen)
|
||||
#expect(size.width > 0)
|
||||
#expect(size.height > 0)
|
||||
}
|
||||
|
||||
@Test("Ein hohes Widget allein ergibt zwei Zeilen Höhe")
|
||||
func largeAloneIsTwoRowsTall() {
|
||||
let large = LayoutEngine.panelSize(for: LayoutEngine.resolve([placement("a", .large)]))
|
||||
let small = LayoutEngine.panelSize(for: LayoutEngine.resolve([placement("a", .small)]))
|
||||
|
||||
#expect(large.height > small.height)
|
||||
@Test("Die Kacheln stehen in gleichem Abstand")
|
||||
func evenSpacing() {
|
||||
let resolved = LayoutEngine.resolve(placements(3), availableWidth: wideScreen)
|
||||
let frames = resolved.map { LayoutEngine.frame(for: $0) }
|
||||
let gaps = zip(frames, frames.dropFirst()).map { $1.minX - $0.maxX }
|
||||
#expect(gaps.allSatisfy { abs($0 - LayoutEngine.tileSpacing) < 0.001 })
|
||||
}
|
||||
|
||||
// MARK: - Rahmen im Panel
|
||||
|
||||
@Test("Ein Widget in Spalte 2 sitzt weiter rechts als eines in Spalte 0")
|
||||
func framesFollowColumns() {
|
||||
let resolved = LayoutEngine.resolve([
|
||||
placement("a", .medium), placement("b", .medium),
|
||||
])
|
||||
let panel = LayoutEngine.panelSize(for: resolved)
|
||||
|
||||
let first = LayoutEngine.frame(for: resolved[0], in: panel)
|
||||
let second = LayoutEngine.frame(for: resolved[1], in: panel)
|
||||
|
||||
#expect(second.minX > first.minX)
|
||||
#expect(first.minY == second.minY)
|
||||
}
|
||||
|
||||
@Test("Ein breites Widget ist im Rahmen wirklich breiter als ein kleines")
|
||||
func wideFrameIsWider() {
|
||||
let wide = LayoutEngine.resolve([placement("a", .wide)])
|
||||
let small = LayoutEngine.resolve([placement("a", .small)])
|
||||
|
||||
let wideFrame = LayoutEngine.frame(for: wide[0], in: LayoutEngine.panelSize(for: wide))
|
||||
let smallFrame = LayoutEngine.frame(for: small[0], in: LayoutEngine.panelSize(for: small))
|
||||
|
||||
#expect(wideFrame.width > smallFrame.width)
|
||||
@Test("Die Kacheln liegen vollständig im Panel")
|
||||
func tilesFitInsidePanel() {
|
||||
// Sonst zeichnet etwas außerhalb — und im Panel heißt außerhalb oben:
|
||||
// hinter der Notch.
|
||||
let items = placements(7)
|
||||
let size = LayoutEngine.panelSize(for: items, availableWidth: 1200)
|
||||
for item in LayoutEngine.resolve(items, availableWidth: 1200) {
|
||||
let frame = LayoutEngine.frame(for: item)
|
||||
#expect(frame.minX >= 0)
|
||||
#expect(frame.minY >= 0)
|
||||
#expect(frame.maxX <= size.width + 0.001)
|
||||
#expect(frame.maxY <= size.height + 0.001)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user