From f3c97f41ee84dfdc718d1a9bc1aac24e6b6755c9 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Sun, 15 Jan 2023 22:31:04 +1100 Subject: Avoid tick label overlap Use rotation for horizontal timelines with long tick labels. For other labels, look for overlap, and hide problematic ones. Use darker text to indicate minor ticks instead of minor offset. --- src/lib.ts | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'src/lib.ts') diff --git a/src/lib.ts b/src/lib.ts index 6299345..9849006 100644 --- a/src/lib.ts +++ b/src/lib.ts @@ -59,11 +59,20 @@ export function getNumTrailingZeros(n: number): number { } throw new Error('Exceeded floating point precision'); } +// Removes a class from an element, triggers reflow, then adds the class export function animateWithClass(el: HTMLElement, className: string){ el.classList.remove(className); el.offsetWidth; // Triggers reflow el.classList.add(className); } +// For estimating text width (via https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript) +const _getTextWidthCanvas = document.createElement('canvas'); +export function getTextWidth(text: string, font: string): number { + const context = _getTextWidthCanvas.getContext('2d')!; + context.font = font; + const metrics = context.measureText(text); + return metrics.width; +} // For calendar conversion (mostly copied from backend/hist_data/cal.py) export function gregorianToJdn(year: number, month: number, day: number): number { -- cgit v1.2.3