LeoVasanko/calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Event overlay, smaller events to fit on screen, forfeit horizontal scaling by text width. Cleanup.

Browse Source
This commit is contained in:
Leo Vasanko
2025-09-23 15:52:21 -06:00
parent 0dfccb7b34
commit 3a902a9dfa
1 changed files with 3 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/EventOverlay.vue
View File

@@ -60,46 +60,6 @@ const justDragged = ref(false)
const weekOverlayRef = ref(null)
const segmentCompression = ref({}) // key -> boolean
// Font metrics ratios (ascent/descent relative to 1em) to align baselines and fit ascenders/descenders
// Hardcoded from measured values: ascent: 0.9, descent: 0.25, total: 1.15
const fmTotal = 1.15
/*
// Measurement function retained for reference; disabled in favor of hardcoded metrics
function measureFontMetrics() {
try {
const root = weekOverlayRef.value || document.documentElement
const cs = getComputedStyle(root)
const weight = '600'
const family = cs.fontFamily || 'system-ui, sans-serif'
const refSize = 100
const font = `${weight} ${refSize}px ${family}`
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
if (!ctx) return
ctx.font = font
const test = 'HgypQgjpq'
const m = ctx.measureText(test)
const ascPx = (m.fontBoundingBoxAscent ?? m.actualBoundingBoxAscent ?? 0)
const descPx = (m.fontBoundingBoxDescent ?? m.actualBoundingBoxDescent ?? 0)
let asc = ascPx / refSize
let desc = descPx / refSize
if (!isFinite(asc) || asc <= 0 || !isFinite(desc) || desc <= 0) {
asc = 0.9
desc = 0.25
}
asc = Math.min(Math.max(asc, 0.6), 0.95)
desc = Math.min(Math.max(desc, 0.1), 0.4)
const total = asc + desc
console.log('[EventOverlay] Measured font metrics', { family, weight, ascent: asc, descent: desc, total })
fm.value = { asc, desc, total }
} catch (e) {
fm.value = { asc: 0.9, desc: 0.25, total: 1.15 }
try { console.log('[EventOverlay] Using default font metrics fallback', fm.value) } catch {}
}
}
*/
// Build event segments: each segment is a contiguous day range with at least one bridging event between any adjacent days within it.
const eventSegments = computed(() => {
// Construct spans across the week
@@ -240,7 +200,7 @@ function recomputeCompression() {
if (!available) return
const cs = getComputedStyle(el)
const fontSize = parseFloat(cs.fontSize) || 16
const baseRowPx = fontSize * 1.5 // desired row height (matches CSS 1.5em)
const baseRowPx = fontSize // desired row height (matches CSS 1.5em)
const marginTop = 0 // already applied outside height
const usable = Math.max(0, available - marginTop)
const nextMap = {}
@@ -614,7 +574,7 @@ function applyRangeDuringDrag(st, startDate, endDate) {
pointer-events: none;
overflow: hidden;
grid-auto-columns: 1fr;
grid-auto-rows: var(--segment-row-height, 1.5em);
grid-auto-rows: var(--segment-row-height);
}
.event-span {
@@ -623,7 +583,7 @@ function applyRangeDuringDrag(st, startDate, endDate) {
/* Font-size so that ascender+descender exactly fills the row height:
given total = asc+desc at 1em (hardcoded 1.15), font-size = rowHeight / total */
font-size: calc(var(--segment-row-height, 1.5em) / 1.15);
font-weight: 600;
font-weight: 500;
cursor: grab;
pointer-events: auto;
overflow: hidden;