@fundar/data-chart-telling 0.0.16 → 0.0.18

package/dist/layout/legend/ContinuousSection.svelte

@@ -26,11 +26,34 @@
   // ── Drag-to-narrow-margins ────────────────────────────────────────────────
   const interaction = getLegendInteraction() ?? createLegendInteraction();
 
-  // Seeded once from the section's own bounds (deliberately untracked — this
-  // component doesn't follow later `section.min`/`max` prop changes).
+  // Seeded once from the section's own bounds (deliberately untracked — see
+  // the tracking/clamping effect below for how later prop changes are
+  // handled instead).
   let lo = $state(untrack(() => section.min));
   let hi = $state(untrack(() => section.max));
 
+  // Whether the user has actually dragged *that* handle off its default
+  // position — tracked per handle, not as one combined flag, so dragging one
+  // doesn't freeze the other: until the other is touched, it must keep
+  // tracking `section.min`/`max` exactly, since a consumer's domain routinely
+  // changes with no interaction at all (e.g. a different year picked on its
+  // own timeline), and with nothing to protect there the legend should
+  // always read the true current extent rather than some earlier domain's
+  // stale numbers.
+  let loAdjusted = $state(false);
+  let hiAdjusted = $state(false);
+
+  // Once a handle *has* been dragged, a later domain change (same scenario as
+  // above, but now with a selection to protect) instead re-clamps it to stay
+  // valid: the lower handle only moves up to meet a risen min, the upper
+  // handle only moves down to meet a fallen max. Clamping against *both* of
+  // the new min/max first (not just its own side) keeps a handle from
+  // crossing the other if the domain shifts entirely past its old position.
+  $effect(() => {
+    lo = loAdjusted ? Math.min(Math.max(lo, section.min), section.max) : section.min;
+    hi = hiAdjusted ? Math.max(Math.min(hi, section.max), section.min) : section.max;
+  });
+
   function toT(v: number): number {
     return (v - section.min) / (section.max - section.min || 1);
   }
@@ -74,6 +97,8 @@
     return (event: PointerEvent) => {
       if (!section.interactive) return;
       event.preventDefault();
+      if (which === 'lo') loAdjusted = true;
+      else hiAdjusted = true;
       const target = event.currentTarget as SVGElement;
       target.setPointerCapture(event.pointerId);
       const startX = event.clientX;
@@ -102,8 +127,13 @@
 
   function resetHandle(which: 'lo' | 'hi') {
     return () => {
-      if (which === 'lo') lo = section.min;
-      else hi = section.max;
+      if (which === 'lo') {
+        lo = section.min;
+        loAdjusted = false;
+      } else {
+        hi = section.max;
+        hiAdjusted = false;
+      }
     };
   }
 </script>

package/dist/plots/utils/tiles.d.ts

@@ -44,7 +44,7 @@ export declare function toProjectionLike(projection: StreamingProjection): Proje
  * whose tile coverage is well-defined; callers are responsible for the
  * projection-compatibility check (see `Plot.svelte`'s validation effect).
  */
-export declare function visibleTiles(projection: ProjectionLike, bounds: ScreenBounds, tileSize?: number, minZoom?: number, maxZoom?: number): TileCoord[];
+export declare function visibleTiles(projection: ProjectionLike, rawBounds: ScreenBounds, tileSize?: number, minZoom?: number, maxZoom?: number): TileCoord[];
 /** An affine tile-space → screen-space mapping (see `buildMercatorFit`), reused across every tile in a grid instead of forward-projecting each one individually. */
 export type MercatorFit = {
     z: number;
@@ -76,7 +76,7 @@ export type MercatorFit = {
  * affine in screen space by construction, so one linear fit applies
  * uniformly to every tile in the grid.
  */
-export declare function buildMercatorFit(projection: ProjectionLike, bounds: ScreenBounds, z: number): MercatorFit | null;
+export declare function buildMercatorFit(projection: ProjectionLike, rawBounds: ScreenBounds, z: number): MercatorFit | null;
 /** Places a tile on screen via a `MercatorFit` — `null` only if `tile` is from a different zoom level than the fit was built for. */
 export declare function tileScreenBounds(fit: MercatorFit, tile: TileCoord): ScreenBounds | null;
 /**

package/dist/plots/utils/tiles.js

@@ -49,6 +49,42 @@ function estimateZoomLevel(projection, centerLon, centerLat, tileSize) {
         return null;
     return Math.round(Math.log2(ratio));
 }
+/**
+ * Clamps `bounds`' horizontal extent to at most one world-width, centered on
+ * the box's own center, before any corner of it gets inverted.
+ *
+ * A Mercator(-family) projection wraps a single world onto a *finite* pixel
+ * span at any given scale. `visibleTiles`/`buildMercatorFit` invert `bounds`'
+ * corners and assume the result increases monotonically left-to-right — true
+ * only up to one world-width. Past that, the inverted longitude wraps around
+ * the antimeridian and comes back the other way, silently reversing the
+ * corner ordering (`buildMercatorFit` was seen to compute a *negative*
+ * `pxPerTileX` from this). This bites specifically when a plot's actual
+ * geographic content occupies far less of its box than the box's own aspect
+ * ratio does — e.g. a tall, narrow country's choropleth fit into a short,
+ * wide facet-grid cell: the fit shrinks scale to match the constraining
+ * (height) axis, and the *unconstrained* (width) axis's letterboxed margin
+ * can then span more of the earth than actually exists. Clamping first means
+ * that margin still renders tiles (real basemap, not blank) up to a full
+ * world, and simply stops there instead of wrapping into a bogus repeat.
+ */
+function clampBoundsToWorld(projection, bounds) {
+    if (!projection.invert)
+        return bounds;
+    const centerX = bounds.left + bounds.width / 2;
+    const centerY = bounds.top + bounds.height / 2;
+    const centerLonLat = projection.invert([centerX, centerY]);
+    if (!centerLonLat)
+        return bounds;
+    const west = projection([-180, centerLonLat[1]]);
+    const east = projection([180, centerLonLat[1]]);
+    if (!west || !east)
+        return bounds;
+    const worldWidth = Math.abs(east[0] - west[0]);
+    if (!(worldWidth > 0) || bounds.width <= worldWidth)
+        return bounds;
+    return { ...bounds, left: centerX - worldWidth / 2, width: worldWidth };
+}
 /**
  * Derives the visible XYZ tile grid from svelteplot's own already-fitted
  * projection (rather than this package computing/duplicating a `d3-geo` fit
@@ -57,9 +93,10 @@ function estimateZoomLevel(projection, centerLon, centerLat, tileSize) {
  * whose tile coverage is well-defined; callers are responsible for the
  * projection-compatibility check (see `Plot.svelte`'s validation effect).
  */
-export function visibleTiles(projection, bounds, tileSize = 256, minZoom = 0, maxZoom = 19) {
+export function visibleTiles(projection, rawBounds, tileSize = 256, minZoom = 0, maxZoom = 19) {
     if (!projection.invert)
         return [];
+    const bounds = clampBoundsToWorld(projection, rawBounds);
     const corners = [
         [bounds.left, bounds.top],
         [bounds.left + bounds.width, bounds.top],
@@ -110,9 +147,10 @@ export function visibleTiles(projection, bounds, tileSize = 256, minZoom = 0, ma
  * affine in screen space by construction, so one linear fit applies
  * uniformly to every tile in the grid.
  */
-export function buildMercatorFit(projection, bounds, z) {
+export function buildMercatorFit(projection, rawBounds, z) {
     if (!projection.invert)
         return null;
+    const bounds = clampBoundsToWorld(projection, rawBounds);
     const topLeft = projection.invert([bounds.left, bounds.top]);
     const bottomRight = projection.invert([bounds.left + bounds.width, bounds.top + bounds.height]);
     if (!topLeft || !bottomRight)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "type": "module",
   "files": [
     "dist"