Scarriffle/onyx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Panel wächst in die Breite, Menüleiste wird schmaler

Browse Source 
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
2026-08-11 11:07:20 +02:00
parent a0342205fd
commit 93fe95827f
27 changed files with 988 additions and 535 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Packages/OnyxKit/Sources/AudioProvider/MixerView.swift
View File

@@ -271,16 +271,15 @@ public struct AudioMixerWidget: OnyxWidget {
public let id = "audio"
public var displayName: String { String(localized: "mixer.name", bundle: .module) }
public let symbolName = "slider.horizontal.3"
public let supportedSizes: [WidgetSize] = [.medium, .large]
private let mixer: AudioMixer
public init(mixer: AudioMixer) { self.mixer = mixer }
public func makeView(size: WidgetSize) -> AnyView {
public func makeView() -> AnyView {
AnyView(
ScrollView {
MixerView(mixer: mixer, compact: size == .medium)
MixerView(mixer: mixer)
}
.scrollIndicators(.never)
)

20
Packages/OnyxKit/Sources/CalendarProvider/CalendarWidget.swift
View File

@@ -24,7 +24,13 @@ public final class CalendarModel {
}
}
/// Monatsraster statt Terminliste.
public var showsMonthGrid: Bool {
didSet { defaults.set(showsMonthGrid, forKey: Self.gridKey) }
}
private static let kindKey = "calendar.source"
private static let gridKey = "calendar.showsMonthGrid"
private let appleSource: CalendarSource
private let calendarrSource: CalendarSource
@@ -44,6 +50,7 @@ public final class CalendarModel {
self.calendar = calendar
self.kind = defaults.string(forKey: Self.kindKey)
.flatMap(CalendarSourceKind.init(rawValue:)) ?? .appleCalendar
self.showsMonthGrid = defaults.bool(forKey: Self.gridKey)
observeCalendarrIfNeeded()
}
@@ -157,7 +164,6 @@ public struct CalendarWidget: OnyxWidget {
public let id = "calendar"
public var displayName: String { String(localized: "widget.calendar.name", bundle: .module) }
public let symbolName = "calendar"
public let supportedSizes: [WidgetSize] = [.medium, .large]
private let model: CalendarModel
@@ -165,21 +171,23 @@ public struct CalendarWidget: OnyxWidget {
self.model = model
}
public func makeView(size: WidgetSize) -> AnyView {
AnyView(CalendarWidgetView(model: model, size: size))
public func makeView() -> AnyView {
AnyView(CalendarWidgetView(model: model))
}
}
private struct CalendarWidgetView: View {
let model: CalendarModel
let size: WidgetSize
var body: some View {
Group {
switch model.state {
case .ready(let window):
if size == .large {
LargeCalendar(window: window, upcoming: model.upcoming)
// Monatsraster oder Terminliste — das ist keine Frage der
// Größe, sondern was man sehen will. Beides zugleich passt in
// eine Kachel nicht, ohne dass eines davon unlesbar wird.
if model.showsMonthGrid {
LargeCalendar(window: window, upcoming: [])
} else {
AgendaList(events: model.upcoming, coverage: window.coverage)
}

11
Packages/OnyxKit/Sources/MediaProvider/MediaWidget.swift
View File

@@ -7,25 +7,23 @@ public struct MediaWidget: OnyxWidget {
public let id = "media"
public var displayName: String { String(localized: "widget.media.name", bundle: .module) }
public let symbolName = "play.circle"
public let supportedSizes: [WidgetSize] = [.medium, .wide]
private let model: MediaModel
public init(model: MediaModel) { self.model = model }
public func makeView(size: WidgetSize) -> AnyView {
AnyView(MediaWidgetView(model: model, size: size))
public func makeView() -> AnyView {
AnyView(MediaWidgetView(model: model))
}
}
private struct MediaWidgetView: View {
let model: MediaModel
let size: WidgetSize
var body: some View {
Group {
if let state = model.nowPlaying, state.hasMetadata {
Playing(model: model, state: state, size: size)
Playing(model: model, state: state)
} else {
// Auch ohne Angaben bleibt das Widget bedienbar: die
// Medientasten erreichen jedes Programm. Ein Widget, das bei
@@ -56,7 +54,6 @@ private struct Idle: View {
private struct Playing: View {
let model: MediaModel
let state: NowPlaying
let size: WidgetSize
var body: some View {
HStack(spacing: 10) {
@@ -97,7 +94,7 @@ private struct Playing: View {
.onTapGesture(count: 2) { model.activateSource() }
}
private var artworkSize: CGFloat { size == .wide ? 64 : 56 }
private let artworkSize: CGFloat = 56
}
private struct Artwork: View {

71
Packages/OnyxKit/Sources/MetricsProvider/MetricMenuBarModule.swift
View File

@@ -76,7 +76,7 @@ public final class MetricMenuBarModule: MenuBarModule {
/// Darstellungsart, sonst springt bei jeder Messung die ganze Leiste. Mit
/// SwiftUI müsste man diese Breite doppelt führen — einmal für das Layout und
/// einmal für `NSStatusItem.length`.
final class MetricStatusView: NSView {
final class MetricStatusView: NSView, WidthReporting {
private let metric: MetricKind
private let presentation: MenuBarPresentation
@@ -87,21 +87,61 @@ final class MetricStatusView: NSView {
init(metric: MetricKind, presentation: MenuBarPresentation) {
self.metric = metric
self.presentation = presentation
super.init(frame: NSRect(x: 0, y: 0, width: presentation.width, height: 22))
super.init(frame: NSRect(x: 0, y: 0, width: 22, height: 22))
}
@available(*, unavailable)
required init?(coder: NSCoder) { fatalError() }
override var intrinsicContentSize: NSSize {
NSSize(width: presentation.width, height: 22)
NSSize(width: width, height: 22)
}
/// Gemessen statt geschätzt — und zwar an der **breitesten Zeichenfolge,
/// die vorkommen kann**, nicht an der gerade angezeigten. Sonst schiebt
/// jedes Prozent alle Symbole rechts davon hin und her.
private var width: CGFloat {
switch presentation {
case .symbol: MenuBarText.minimumWidth
case .graph: 28
case .bars: barsWidth
case .value: MenuBarText.width(for: reference)
case .valueAndGraph: MenuBarText.width(for: reference) + 2 + 28
}
}
/// Ein Balken je Kern braucht Platz für jeden Kern. Bei fünfzehn ist eine
/// feste Breite entweder zu eng oder überall sonst zu weit.
private var barsWidth: CGFloat {
let count = (metric == .cpu && mode == .usage) ? max(snapshot.cpu.perCore.count, 1) : 1
guard count > 1 else { return MenuBarText.minimumWidth }
return min(CGFloat(count) * 2 + CGFloat(count - 1) * 1 + 4, 60)
}
/// Die breiteste Zeichenfolge dieser Metrik.
private var reference: String {
switch (metric, mode) {
case (.temperature, _), (_, .temperature): "100 °C"
default: "100 %"
}
}
/// Meldet, wenn sich die nötige Breite geändert hat — der Controller stellt
/// das Element danach neu ein.
var onWidthChange: ((CGFloat) -> Void)?
func update(snapshot: MetricsSnapshot, history: [Double], mode: MetricDisplayMode) {
let before = width
self.snapshot = snapshot
self.history = history
self.mode = mode
needsDisplay = true
// Die Kernzahl steht erst nach der ersten Messung fest, und der Modus
// wechselt zwischen „100 %" und „100 °C".
if width != before {
invalidateIntrinsicContentSize()
onWidthChange?(width)
}
}
override func draw(_ dirtyRect: NSRect) {
@@ -129,16 +169,7 @@ final class MetricStatusView: NSView {
}
private func drawText(_ text: String, color: NSColor, in rect: NSRect? = nil) {
let attributes: [NSAttributedString.Key: Any] = [
// Feste Ziffernbreite: ohne sie wackelt der Text bei jeder Messung.
.font: NSFont.monospacedDigitSystemFont(ofSize: 11, weight: .regular),
.foregroundColor: color,
]
let string = NSAttributedString(string: text, attributes: attributes)
let area = rect ?? bounds
let size = string.size()
string.draw(at: NSPoint(x: area.midX - size.width / 2,
y: area.midY - size.height / 2))
MenuBarText.draw(text, color: color, in: rect ?? bounds)
}
private func drawSymbol(color: NSColor) {
@@ -193,20 +224,6 @@ final class MetricStatusView: NSView {
}
extension MenuBarPresentation {
/// Feste Breite je Darstellungsart.
///
/// Ohne sie ändert das Element bei jedem Messwert seine Größe und schiebt
/// alle Symbole rechts davon hin und her — das fällt in der Menüleiste
/// sofort unangenehm auf.
var width: CGFloat {
switch self {
case .value: 42
case .symbol: 22
case .graph: 34
case .bars: 30
case .valueAndGraph: 74
}
}
}
public extension MetricSummary {

27
Packages/OnyxKit/Sources/MetricsProvider/MetricWidgets.swift
View File

@@ -11,7 +11,6 @@ public struct MetricWidget: OnyxWidget {
String(localized: .init(metric.localizationKey), bundle: .module)
}
public var symbolName: String { metric.symbolName }
public let supportedSizes: [WidgetSize]
private let model: MetricsModel
@@ -25,11 +24,10 @@ public struct MetricWidget: OnyxWidget {
case .battery: "battery"
case .temperature: "sensors"
}
self.supportedSizes = metric == .temperature ? [.medium, .large] : [.small, .medium]
}
public func makeView(size: WidgetSize) -> AnyView {
AnyView(MetricWidgetView(model: model, metric: metric, size: size))
public func makeView() -> AnyView {
AnyView(MetricWidgetView(model: model, metric: metric))
}
}
@@ -48,17 +46,15 @@ extension MetricKind {
private struct MetricWidgetView: View {
let model: MetricsModel
let metric: MetricKind
let size: WidgetSize
@State private var token: UUID?
var body: some View {
Group {
switch (metric, size) {
case (.temperature, _):
SensorList(snapshot: model.snapshot, detailed: size == .large)
case (_, .small):
CompactMetric(model: model, metric: metric)
default:
// Die Kachel ist hochkant: die Sensorliste hat Platz für Details,
// alles andere zeigt Zahl und Verlauf.
if metric == .temperature {
SensorList(snapshot: model.snapshot, detailed: true)
} else {
WideMetric(model: model, metric: metric)
}
}
@@ -119,13 +115,18 @@ private struct WideMetric: View {
let metric: MetricKind
var body: some View {
HStack(spacing: 10) {
// Übereinander, nicht nebeneinander: die Kachel ist hochkant, und ein
// Verlauf über die volle Breite liest sich besser als einer, der sich
// die Zeile mit der Zahl teilt.
VStack(alignment: .leading, spacing: 8) {
CompactMetric(model: model, metric: metric)
.frame(width: 84)
Spacer(minLength: 0)
Sparkline(values: model.series(metric),
tint: MetricSummary.color(metric, model.snapshot,
mode: model.displayMode(for: metric)))
.frame(height: 46)
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
}
}

21
Packages/OnyxKit/Sources/NetworkProvider/NetworkMenuBarModule.swift
View File

@@ -73,15 +73,28 @@ final class NetworkStatusView: NSView {
/// Breiter als die Hardwaremodule: „↓ 2,4 MB/s" braucht schlicht mehr Platz
/// als „46 %".
/// Gemessen an der breitesten Zeichenfolge, die vorkommen kann.
///
/// „↓ 999,9 MB/s" ist der Extremfall — meistens steht dort „↓ 12 KB/s".
/// Vorher waren 76 Punkte fest verdrahtet, und daneben blieb dauerhaft
/// Platz für ein weiteres Symbol frei, in dem nichts stand.
static func width(_ presentation: MenuBarPresentation) -> CGFloat {
switch presentation {
case .symbol: 22
case .graph: 34
case .bars: 30
case .value, .valueAndGraph: 76
case .symbol: MenuBarText.minimumWidth
case .graph, .bars: 28
case .value: ratesWidth
case .valueAndGraph: ratesWidth + 26
}
}
/// Die Raten stehen zweizeilig in 9 pt — dafür misst `MenuBarText` mit
/// seiner 11-pt-Schrift zu breit, also hier eigens gemessen.
private static var ratesWidth: CGFloat {
let font = NSFont.monospacedDigitSystemFont(ofSize: 9, weight: .regular)
let widest = NSAttributedString(string: "↓ 999,9 MB/s", attributes: [.font: font])
return ceil(widest.size().width) + 2 * MenuBarText.sidePadding
}
override var intrinsicContentSize: NSSize {
NSSize(width: Self.width(presentation), height: 22)
}

20
Packages/OnyxKit/Sources/NetworkProvider/NetworkWidget.swift
View File

@@ -126,20 +126,18 @@ public struct NetworkWidget: OnyxWidget {
public let id = "network"
public var displayName: String { String(localized: "network.name", bundle: .module) }
public let symbolName = "network"
public let supportedSizes: [WidgetSize] = [.small, .medium, .large]
private let model: NetworkModel
public init(model: NetworkModel) { self.model = model }
public func makeView(size: WidgetSize) -> AnyView {
AnyView(NetworkWidgetView(model: model, size: size))
public func makeView() -> AnyView {
AnyView(NetworkWidgetView(model: model))
}
}
private struct NetworkWidgetView: View {
let model: NetworkModel
let size: WidgetSize
@State private var token: UUID?
var body: some View {
@@ -154,17 +152,13 @@ private struct NetworkWidgetView: View {
.lineLimit(1)
}
Rates(snapshot: model.snapshot, compact: size == .small)
Rates(snapshot: model.snapshot, compact: false)
if size != .small {
Sparkline(values: model.series(download: true), tint: Onyx.Color.accent)
.frame(height: 18)
}
Sparkline(values: model.series(download: true), tint: Onyx.Color.accent)
.frame(height: 18)
if size == .large {
Divider().overlay(Onyx.Color.hairline)
Details(snapshot: model.snapshot)
}
Divider().overlay(Onyx.Color.hairline)
Details(snapshot: model.snapshot)
Spacer(minLength: 0)
}

78
Packages/OnyxKit/Sources/OnyxMenuBar/MenuBarController.swift
View File

@@ -42,6 +42,7 @@ public final class MenuBarController {
}
public func stop() {
closeOpenPopover()
visibilityTimer?.invalidate()
visibilityTimer = nil
for id in entries.keys { setEnabled(false, forModuleID: id) }
@@ -78,6 +79,12 @@ public final class MenuBarController {
apply(entry.settings, toModuleID: id)
}
/// Welches Popover gerade offen ist. Höchstens eines.
private var openPopoverID: String?
private var globalMonitor: Any?
private var localMonitor: Any?
private var keyMonitor: Any?
public func settings(forModuleID id: String) -> MenuBarModuleSettings? {
entries[id]?.settings
}
@@ -100,7 +107,14 @@ public final class MenuBarController {
button.sendAction(on: [.leftMouseUp, .rightMouseUp])
button.identifier = NSUserInterfaceItemIdentifier(id)
}
entry.item.length = view.fittingSize.width > 0 ? view.fittingSize.width : NSStatusItem.variableLength
applyWidth(view.intrinsicContentSize.width, to: entry)
// Die nötige Breite steht nicht von Anfang an fest: die Kernzahl
// kennt das Modul erst nach der ersten Messung, und ein Moduswechsel
// ändert „100 %" in „100 °C".
(view as? WidthReporting)?.onWidthChange = { [weak self] width in
guard let self, let entry = entries[id] else { return }
applyWidth(width, to: entry)
}
entry.module.activate()
} else {
entry.module.deactivate()
@@ -108,20 +122,78 @@ public final class MenuBarController {
checkVisibility()
}
private func applyWidth(_ width: CGFloat, to entry: Entry) {
entry.item.length = width > 0 ? width : NSStatusItem.variableLength
}
// MARK: - Interaktion
@objc private func statusItemClicked(_ sender: NSStatusBarButton) {
guard let id = sender.identifier?.rawValue, let entry = entries[id] else { return }
if entry.popover.isShown {
entry.popover.performClose(nil)
// Immer nur eines offen. Zwei Popover nebeneinander sehen aus wie ein
// Fehler, und das zweite verdeckt oft das erste.
if openPopoverID == id {
closeOpenPopover()
return
}
closeOpenPopover()
entry.popover.contentViewController = NSHostingController(
rootView: entry.module.makePopoverView())
entry.popover.show(relativeTo: sender.bounds, of: sender, preferredEdge: .minY)
// Ohne das bleibt das Popover hinter dem aktiven Fenster.
entry.popover.contentViewController?.view.window?.makeKey()
openPopoverID = id
startWatchingForOutsideClicks()
}
// MARK: - Schließen bei Klick daneben
/// `NSPopover.behavior = .transient` genügt hier **nicht**.
///
/// Es schließt zuverlässig, solange die eigene App aktiv ist. Onyx läuft
/// aber als `.accessory` und wird durch einen Klick auf ein Statuselement
/// nicht aktiviert — ein Klick in ein fremdes Fenster erreicht das Popover
/// dann gar nicht, und es bleibt offen stehen. Ein globaler Beobachter sieht
/// solche Klicks trotzdem.
private func startWatchingForOutsideClicks() {
guard globalMonitor == nil else { return }
globalMonitor = NSEvent.addGlobalMonitorForEvents(
matching: [.leftMouseDown, .rightMouseDown, .otherMouseDown]) { [weak self] _ in
Task { @MainActor in self?.closeOpenPopover() }
}
// Der globale Beobachter sieht keine Klicks in die eigene App — dafür
// der lokale. Er reicht das Ereignis weiter, damit Knöpfe im Popover
// weiterhin funktionieren.
localMonitor = NSEvent.addLocalMonitorForEvents(
matching: [.leftMouseDown, .rightMouseDown]) { [weak self] event in
guard let self, let id = openPopoverID, let entry = entries[id] else { return event }
// Klicks **im** Popover schließen es nicht.
if event.window !== entry.popover.contentViewController?.view.window,
event.window !== entry.item.button?.window {
closeOpenPopover()
}
return event
}
// Auch die Escape-Taste und ein Bildschirmwechsel beenden es.
keyMonitor = NSEvent.addLocalMonitorForEvents(matching: .keyDown) { [weak self] event in
if event.keyCode == 53 { self?.closeOpenPopover(); return nil }
return event
}
}
private func closeOpenPopover() {
if let id = openPopoverID, let entry = entries[id] {
entry.popover.performClose(nil)
}
openPopoverID = nil
globalMonitor.map(NSEvent.removeMonitor)
localMonitor.map(NSEvent.removeMonitor)
keyMonitor.map(NSEvent.removeMonitor)
globalMonitor = nil
localMonitor = nil
keyMonitor = nil
}
private func checkVisibility() {

67
Packages/OnyxKit/Sources/OnyxMenuBar/MenuBarText.swift Normal file
View File

@@ -0,0 +1,67 @@
import AppKit
/// Beschriftung und Breite eines Menüleisten-Elements.
///
/// Die Breite wird **gemessen**, nicht geschätzt. Vorher stand je Darstellungsart
/// eine feste Zahl im Code, großzügig gewählt, damit nichts abgeschnitten wird —
/// mit dem Ergebnis, dass neben jedem Wert Platz für ein weiteres Symbol blieb,
/// in dem nichts stand. In einer Menüleiste ist das der teuerste Platz des
/// ganzen Bildschirms.
///
/// Gemessen wird die **breiteste Zeichenfolge, die vorkommen kann**, nicht die
/// gerade angezeigte. Sonst ändert das Element bei jeder Messung seine Größe und
/// schiebt alle Symbole rechts davon hin und her.
public enum MenuBarText {
/// Feste Ziffernbreite: ohne sie wackelt der Text bei jeder Messung.
///
/// Als berechnete Eigenschaft, nicht als gespeicherte: `NSFont` ist nicht
/// `Sendable`, und die Schrift jedes Mal neu zu erfragen kostet nichts —
/// AppKit gibt dieselbe zwischengespeicherte Instanz zurück.
public static var font: NSFont {
NSFont.monospacedDigitSystemFont(ofSize: 11, weight: .regular)
}
public static let sidePadding: CGFloat = 2
public static let symbolWidth: CGFloat = 13
/// Abstand zwischen Symbol und Zahl.
public static let innerGap: CGFloat = 2
/// Schmaler geht nicht, ohne dass ein Glyph anstößt.
public static let minimumWidth: CGFloat = 20
/// Die Breite eines Elements aus gemessener Textbreite. Rein, damit die
/// Rechnung prüfbar bleibt.
public static func itemWidth(textWidth: CGFloat, includesSymbol: Bool) -> CGFloat {
let symbol = includesSymbol ? symbolWidth + innerGap : 0
let content = textWidth > 0 ? ceil(textWidth) + 2 * sidePadding : 2 * sidePadding
return max(minimumWidth, content + symbol)
}
public static func width(of text: String) -> CGFloat {
guard !text.isEmpty else { return 0 }
return NSAttributedString(string: text, attributes: [.font: font]).size().width
}
/// Die Breite für die breiteste vorkommende Zeichenfolge.
public static func width(for reference: String, includesSymbol: Bool = false) -> CGFloat {
itemWidth(textWidth: width(of: reference), includesSymbol: includesSymbol)
}
public static func draw(_ text: String, color: NSColor, in rect: NSRect) {
let string = NSAttributedString(string: text,
attributes: [.font: font, .foregroundColor: color])
let size = string.size()
string.draw(at: NSPoint(x: rect.midX - size.width / 2,
y: rect.midY - size.height / 2))
}
}
/// Eine Statusansicht, deren nötige Breite sich ändern kann.
///
/// Der Controller stellt das Statuselement daraufhin neu ein. Ohne diesen Weg
/// bliebe ein Element in der Breite stehen, die beim allerersten Zeichnen
/// gebraucht wurde — vor der ersten Messung also.
@MainActor
public protocol WidthReporting: AnyObject {
var onWidthChange: ((CGFloat) -> Void)? { get set }
}

172
Packages/OnyxKit/Sources/OnyxWidgetKit/LayoutEngine.swift
View File

@@ -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)
}
}

12
Packages/OnyxKit/Sources/OnyxWidgetKit/LayoutStore.swift
View File

@@ -62,15 +62,9 @@ public struct LayoutStore: Sendable {
/// wenige Widgets, die sofort etwas zeigen, als ein volles Panel, das
/// erst konfiguriert werden will.
public static func defaultLayout(knownWidgetIDs: Set<String>) -> [WidgetPlacement] {
let preferred: [(String, WidgetSize)] = [
("calendar", .large),
("weather", .medium),
("cpu", .small),
("battery", .small),
("media", .wide),
]
let preferred = ["calendar", "weather", "media", "cpu", "battery"]
return preferred
.filter { knownWidgetIDs.contains($0.0) }
.map { WidgetPlacement(widgetID: $0.0, size: $0.1) }
.filter { knownWidgetIDs.contains($0) }
.map { WidgetPlacement(widgetID: $0) }
}
}

7
Packages/OnyxKit/Sources/OnyxWidgetKit/OnyxWidget.swift
View File

@@ -13,10 +13,9 @@ public protocol OnyxWidget: Identifiable, Sendable {
var displayName: String { get }
var symbolName: String { get }
/// Welche Größen dieses Widget sinnvoll ausfüllen kann.
var supportedSizes: [WidgetSize] { get }
@ViewBuilder func makeView(size: WidgetSize) -> AnyView
/// Der Inhalt der Kachel. Alle Kacheln sind gleich groß — was ein Widget
/// zeigt, entscheidet es selbst, nicht eine Größenauswahl.
@ViewBuilder func makeView() -> AnyView
/// Einstellungen dieses Widgets, falls es welche hat.
@ViewBuilder func makeSettingsView() -> AnyView?
}

19
Packages/OnyxKit/Sources/OnyxWidgetKit/WidgetGrid.swift
View File

@@ -11,18 +11,22 @@ public struct WidgetGrid: View {
private let resolved: [ResolvedPlacement]
private let panelSize: CGSize
public init(placements: [WidgetPlacement]) {
self.resolved = LayoutEngine.resolve(placements)
self.panelSize = LayoutEngine.panelSize(for: resolved)
public init(placements: [WidgetPlacement], availableWidth: CGFloat) {
self.resolved = LayoutEngine.resolve(placements, availableWidth: availableWidth)
self.panelSize = LayoutEngine.panelSize(for: placements, availableWidth: availableWidth)
}
public var body: some View {
ZStack(alignment: .topLeading) {
ForEach(resolved) { item in
let frame = LayoutEngine.frame(for: item, in: panelSize)
let frame = LayoutEngine.frame(for: item)
widgetView(for: item)
.frame(width: frame.width, height: frame.height)
// Beschneiden ist Pflicht, kein Feinschliff: quillt der
// Inhalt über, zeichnet er über die Nachbarkachel — und
// ganz oben über die Notch.
.clipped()
.offset(x: frame.minX, y: frame.minY)
}
}
@@ -32,7 +36,7 @@ public struct WidgetGrid: View {
@ViewBuilder
private func widgetView(for item: ResolvedPlacement) -> some View {
if let widget = WidgetRegistry.shared.widget(id: item.placement.widgetID) {
OnyxTile { widget.makeView(size: item.placement.size) }
OnyxTile { widget.makeView() }
} else {
// Sollte nach dem Filtern in LayoutStore nicht vorkommen. Falls doch,
// ist eine sichtbare Lücke mit Namen besser als ein stiller Ausfall.
@@ -50,7 +54,8 @@ public struct WidgetGrid: View {
/// Die Größe, die das Panel für dieses Layout braucht — der Controller
/// stellt das Fenster darauf ein.
public static func panelSize(for placements: [WidgetPlacement]) -> CGSize {
LayoutEngine.panelSize(for: LayoutEngine.resolve(placements))
public static func panelSize(for placements: [WidgetPlacement],
availableWidth: CGFloat) -> CGSize {
LayoutEngine.panelSize(for: placements, availableWidth: availableWidth)
}
}

3
Packages/OnyxKit/Sources/ShelfProvider/AirDropWidget.swift
View File

@@ -67,11 +67,10 @@ public struct AirDropWidget: OnyxWidget {
public let id = "airdrop"
public var displayName: String { String(localized: "airdrop.name", bundle: .module) }
public let symbolName = "shareplay"
public let supportedSizes: [WidgetSize] = [.small, .medium]
public init() {}
public func makeView(size: WidgetSize) -> AnyView {
public func makeView() -> AnyView {
AnyView(AirDropView())
}
}

5
Packages/OnyxKit/Sources/ShelfProvider/ShelfWidget.swift
View File

@@ -191,13 +191,12 @@ public struct ShelfWidget: OnyxWidget {
public let id = "shelf"
public var displayName: String { String(localized: "shelf.name", bundle: .module) }
public let symbolName = "tray.full"
public let supportedSizes: [WidgetSize] = [.medium, .large]
private let store: ShelfStore
public init(store: ShelfStore) { self.store = store }
public func makeView(size: WidgetSize) -> AnyView {
AnyView(ShelfView(store: store, compact: size == .medium))
public func makeView() -> AnyView {
AnyView(ShelfView(store: store))
}
}

46
Packages/OnyxKit/Sources/WeatherProvider/WeatherWidget.swift
View File

@@ -101,20 +101,18 @@ public struct WeatherWidget: OnyxWidget {
public let id = "weather"
public var displayName: String { String(localized: "widget.weather.name", bundle: .module) }
public let symbolName = "cloud.sun"
public let supportedSizes: [WidgetSize] = [.small, .medium]
private let model: WeatherModel
public init(model: WeatherModel) { self.model = model }
public func makeView(size: WidgetSize) -> AnyView {
AnyView(WeatherWidgetView(model: model, size: size))
public func makeView() -> AnyView {
AnyView(WeatherWidgetView(model: model))
}
}
private struct WeatherWidgetView: View {
let model: WeatherModel
let size: WidgetSize
var body: some View {
Group {
@@ -143,11 +141,8 @@ private struct WeatherWidgetView: View {
@ViewBuilder
private func content(_ snapshot: WeatherSnapshot, isStale: Bool) -> some View {
if size == .small {
CompactWeather(snapshot: snapshot, isStale: isStale)
} else {
WideWeather(snapshot: snapshot, isStale: isStale)
}
// Die Kachel ist hochkant und hat Platz für die ausführliche Fassung.
WideWeather(snapshot: snapshot, isStale: isStale)
}
}
@@ -169,39 +164,6 @@ private struct Notice: View {
}
}
private struct CompactWeather: View {
let snapshot: WeatherSnapshot
let isStale: Bool
var body: some View {
VStack(alignment: .leading, spacing: 2) {
Image(systemName: snapshot.condition.symbolName(isDaylight: snapshot.isDaylight))
.font(.system(size: 18))
.foregroundStyle(Onyx.Color.textPrimary)
.symbolRenderingMode(.hierarchical)
Spacer(minLength: 0)
Text(snapshot.temperature.onyxFormatted)
.font(Onyx.Font.metric)
.foregroundStyle(Onyx.Color.textPrimary)
Text(snapshot.placeName)
.font(.system(size: 9))
.foregroundStyle(Onyx.Color.textTertiary)
.lineLimit(1)
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
.opacity(isStale ? 0.55 : 1)
.help(helpText)
}
private var helpText: Text {
// Apples Namensnennung ist Bedingung der Nutzung. In der 1×1-Kachel ist
// dafür kein Platz — sie steht hier und zusätzlich in den Einstellungen.
Text(verbatim: [snapshot.placeName,
snapshot.attribution.map { "Wetterdaten: \($0.name)" }]
.compactMap { $0 }.joined(separator: " · "))
}
}
private struct WideWeather: View {
let snapshot: WeatherSnapshot
let isStale: Bool