timescale.info#298 · The timeline theme sets label and measure text sizes
- timeline-app
- pull request
Closes #267. **Timeline theme 2** adds two settings, picked from a list in the Plugins dialog (75%–200%, or Default): - **Label size**: event labels and their dates (also summary and stack labels). - **Measure size**: the tick labels. Sizes are a new plugin setting kind, `text-size`: a whole percentage from 50 to 200, saved as a string such as `"125"`. Theme roles `textSize` and `measureSize` read them, and the stage gets `--timeline-text-scale` / `--timeline-measure-scale`. A plugin can now declare up to twelve settings (was eight). **Layout adapts instead of overlapping** (`src/app.ts`): - Label rows and stems are spaced from the label's height (32 px × size + 11 px between rows). At 100% this is exactly the old 128/85/272/315 layout. - Stack-entry captions above the axis move up to match. - Moments group into summaries sooner by the label size (`pixels()` × size when above 100%), so labels sharing a row don't run into each other. - Label rows extend the vertical pan limits, so rows that reach past the stage can be panned into view. - The ruler's text scale includes the measure size, so larger tick labels are spaced further apart. On a decimal ruler that can mean jumping to the next power of ten, as zooming the stage already does. **Compatibility:** version 1 (no sizes) stays in the built-in list, so timelines that installed it keep working unchanged. The plugin library now offers **Update to vN** for an installed plugin it has a newer version of. That replaces it in place, keeping its order, enabled state and the settings the new version still declares. Before, it just said Installed. **Tests:** - Unit (`test/plugins.test.mjs`): size values and ranges, v1 still available, theme scales and properties, and role/kind checks. - Browser (`test/timeline-theme-browser.mjs`): - Label and tick font sizes at 100%, 150%, and 200%/75% picked in the plugin list. - No label overlaps another label, a marker, the axis or a tick label, and no tick labels overlap. - Default restores the usual size. - A v1 timeline is updated to v2 from the library, keeping its color. - Screenshots go to `artifacts/theme-sizes-{100,150,200}- .png`. - Results: - `npm test`: 307 of 307 pass. `npm run build` succeeds. - Full `test/browser.mjs`: passes in Firefox and WebKit. - Chromium: the full suite passed once on this branch before the library-update test was added. Since then it stops earlier, at `duration-backgrounds-browser.mjs:283` (the duration menu's **Fit in view** item never appears). That happens on current main (e4779f6) too, so it isn't this change. The theme check alone passes in all three browsers.
Sources
Open #298 · The timeline theme sets label and measure text sizes in the timeline