TopDogLabs/TheNoiseClock
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>

Browse Source
This commit is contained in:
Matt Bruce 2026-02-01 12:52:29 -06:00
parent 443f1e02ec
commit 7338c576e8
1 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
TheNoiseClock/Features/Clock/Views/Components/TimeDisplayView.swift
View File

@ -132,6 +132,7 @@ struct TimeDisplayView: View {
TimeSegment(text: secondsText, fontSize: $fontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign, isDisplayMode: isDisplayMode) TimeSegment(text: secondsText, fontSize: $fontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign, isDisplayMode: isDisplayMode)
} }
} }
.frame(maxWidth: .infinity) // Center horizontally in portrait
} else { } else {
// Landscape mode - use fixed digit widths for stable layout // Landscape mode - use fixed digit widths for stable layout
// Each digit gets the same width (based on "8") so clock doesn't shift // Each digit gets the same width (based on "8") so clock doesn't shift
@ -145,18 +146,19 @@ struct TimeDisplayView: View {
HStack(alignment: .center, spacing: 0) { HStack(alignment: .center, spacing: 0) {
TimeSegment(text: hour, fontSize: $fontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign, isDisplayMode: isDisplayMode) TimeSegment(text: hour, fontSize: $fontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign, isDisplayMode: isDisplayMode)
.frame(width: segmentWidth, height: containerSize.height) .frame(width: segmentWidth)
ColonView(dotDiameter: dotDiameter, spacing: dotSpacing, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight, isHorizontal: false) ColonView(dotDiameter: dotDiameter, spacing: dotSpacing, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight, isHorizontal: false)
.frame(width: dotDiameter, height: containerSize.height) .frame(width: dotDiameter)
TimeSegment(text: minute, fontSize: $fontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign, isDisplayMode: isDisplayMode) TimeSegment(text: minute, fontSize: $fontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign, isDisplayMode: isDisplayMode)
.frame(width: segmentWidth, height: containerSize.height) .frame(width: segmentWidth)
if showSeconds { if showSeconds {
ColonView(dotDiameter: dotDiameter, spacing: dotSpacing, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight, isHorizontal: false) ColonView(dotDiameter: dotDiameter, spacing: dotSpacing, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontWeight: fontWeight, isHorizontal: false)
.frame(width: dotDiameter, height: containerSize.height) .frame(width: dotDiameter)
TimeSegment(text: secondsText, fontSize: $fontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign, isDisplayMode: isDisplayMode) TimeSegment(text: secondsText, fontSize: $fontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign, isDisplayMode: isDisplayMode)
.frame(width: segmentWidth, height: containerSize.height) .frame(width: segmentWidth)
} }
} }
.frame(maxWidth: .infinity, maxHeight: .infinity) // Center in landscape
} }
} }
.overlay(alignment: .bottomTrailing) { .overlay(alignment: .bottomTrailing) {
@ -288,12 +290,32 @@ struct TimeDisplayView: View {
} }
if !portrait { if !portrait {
// Verify colon height fits
let dotDiameter = estimated * Layout.dotDiameterMultiplier let dotDiameter = estimated * Layout.dotDiameterMultiplier
let dotSpacing = estimated * Layout.dotSpacingLandscapeMultiplier let dotSpacing = estimated * Layout.dotSpacingLandscapeMultiplier
let colonHeight = (dotDiameter * 2) + dotSpacing let colonHeight = (dotDiameter * 2) + dotSpacing
if colonHeight > containerSize.height { if colonHeight > containerSize.height {
estimated *= containerSize.height / colonHeight estimated *= containerSize.height / colonHeight
} }
// CRITICAL: Verify total width fits to prevent clipping
// Calculate actual widths that will be used in layout
let actualDigitWidth = FontUtils.digitWidth(
fontName: fontFamily,
weight: fontWeight,
design: fontDesign,
fontSize: estimated
)
let actualColonWidth = estimated * Layout.dotDiameterMultiplier
let segmentCount: CGFloat = showSeconds ? 3.0 : 2.0
let totalWidth = (actualDigitWidth * 2 * segmentCount) + (colonCount * actualColonWidth)
// If total width exceeds container, scale down
if totalWidth > containerSize.width {
let scaleFactor = containerSize.width / totalWidth
estimated *= scaleFactor * 0.98 // Add 2% margin
Design.debugLog("[clockLayout] width overflow: totalWidth=\(Int(totalWidth)) container=\(Int(containerSize.width)) scaling by \(String(format: "%.2f", scaleFactor))")
}
} }
Design.debugLog("[clockLayout] calcFont estimatedFontSize=\(String(format: "%.1f", estimated))") Design.debugLog("[clockLayout] calcFont estimatedFontSize=\(String(format: "%.1f", estimated))")