Skip to content

v0.13.3

Choose a tag to compare

View all tags
@TBarregren TBarregren released this 12 May 20:55
· 65 commits to main since this release
v0.13.3
bd3b57b

Step 3 of docs/elevation-rebuild.md — responsive axes with client-side rendering.

The Elevation chart now mounts client-side under the WordPress Interactivity API and draws two responsive axis lines whose margins are derived from the eventual tick-label widths.

What changed

  • Pure geometry helpers under src/blocks/elevation/geometry/ — format.ts (locale-aware label formatting, m/km switch), ticks.ts (nice-tick generation [1,2,5]×10^n), margins.ts (the wLeft = widest(niceYLabels) + 0.5em / wRight = last(niceXLabels)/2 + 0.5em / h = measure("-0,123456789").height + 0.5em formulas), and measure.ts (SVG <text> + getBBox() measurer). Fully unit-testable; margins.test.ts injects a mock measurer for a DOM-free run.
  • Editor preview: chart.tsx mounts the SVG host, runs the margin algorithm via useLayoutEffect, and observes resize via ResizeObserver. Loading state returns null so the wrapper retains its min-height: 15vh slot.
  • Frontend: view.ts registers callbacks.initElevation on the shared kntnt-gpx-blocks Interactivity store. It awaits document.fonts.ready, mounts SVG, computes margins, draws axes, and listens for loadingdone to re-measure when late-loaded webfonts arrive. No store writes yet — Step 6 adds the cursor + fraction wiring.
  • PHP: Render_Elevation drops render_info(); the Step 2 info box is replaced by the chart wrapper with the documented Interactivity directives + <noscript> fallback. Two new warning reasons land: no-elevation-data (Case A) and zero-distance (Case C). The healthy state emits wp_interactivity_state('kntnt-gpx-blocks', [ $map_id => [ 'statistics' => […] ] ]).
  • Wrapper sizing: Dimensions_Defaults now injects min-height: 15vh on Elevation whenever minHeight is blank (regardless of aspectRatio). The SCSS baseline matches.
  • Editor preview state union grows two warning kinds (no-elevation-data, zero-distance) plus an editor-only payload-error kind; the healthy branch dispatches to <Chart>.

Acceptance

All five gates green: npm run build, composer test (480 tests, 1565 assertions), phpstan analyse, npm run test:js (341 tests across 28 suites), wp-scripts lint-js src/blocks/.

Assets 3
Loading