Skip to content

v0.13.7

Choose a tag to compare

View all tags
@TBarregren TBarregren released this 14 May 15:55
· 35 commits to main since this release
v0.13.7
529e47d

Step 7 — Tooltip

The Elevation block's cursor now carries a top-pinned tooltip showing the interpolated distance and elevation at the cursor's fraction. The tooltip follows the cursor horizontally and flips to the left side with 0.5em hysteresis when it would otherwise clip the plot rectangle's right edge.

Highlights

  • Top-pinned anchor with horizontal-only flip. The tooltip's y is constant at plotRect.y + 0.5em; only x changes with the cursor. A 0.5em hysteresis band prevents flip oscillation at the threshold.
  • Locale-aware deterministic formatting. Distance line uses the same m/km threshold as the x-axis ticks (below 2000 m → metres, above → km with 1 decimal); elevation line is always in metres. Intl.NumberFormat with the site locale handles separators and grouping.
  • Per-row visibility toggles. tooltipShowDistance and tooltipShowHeight independently gate each row. When both are off, the tooltip group is not rendered.
  • showCursor-coupled hide-on-master-off. When the Cursor master toggle is off, the tooltip group is not emitted and the entire tooltip inspector surface (Tooltip info PanelBody, three tooltip Color rows, two Tooltip typography PanelBodies) disappears.
  • Cross-block sync is automatic. Map's cursor scrub writes state[ mapId ].fraction; the same fraction read drives both Elevation's cursor and its tooltip in lockstep.
  • No state-payload growth. The per-mapId slice still has samples, statistics, fraction only. The two new row toggles travel via data-wp-context per block.
  • Nine new colour + typography surfaces. tooltipBackgroundColor, tooltipDistanceColor, tooltipHeightColor plus eight typography attributes per row × two rows. Server-side wired through Color_Sanitizer / Typography_Sanitizer; SCSS defaults fall back to #000000cc / #ffffff / #dddddd / inherit.

Cleanups

  • geometry/cursor.ts split into geometry/sample-interpolation.ts; the SVG DOM helpers in root-level cursor.ts stay.
  • createTextMeasurer( svg, className? ) gains an optional class parameter so tooltip-row measurements pick up their class-scoped typography.
Assets 3
Loading