@fundar/data-chart-telling 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the project adheres to [Semantic Versioning](https://semver.org/).
 
+## [1.5.0] - 2026-10-31
+
+### Changed
+
+- Zooming or panning a map no longer re-projects every feature on each wheel tick or drag move. The features already drawn are carried to the new view with an SVG transform and the projection is moved, and the features redrawn, once the view has been still for 120 ms. A map of 6,000 features goes from about 340 ms to about 50 ms per wheel tick. Strokes and dots are briefly scaled while the view moves.
+
+### Fixed
+
+- A series' catch-all segments that name different facets, or a facet next to the unscoped one, no longer log the warning for two catch-alls: they do not compete.
+
 ## [1.4.0] - 2026-10-30
 
 ### Added

package/dist/layout/coordinates/ProjectionZoom.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, setContext, type Snippet } from 'svelte';
+	import { getContext, setContext, untrack, type Snippet } from 'svelte';
 	import { ZoomedProjection } from './ZoomedProjection';
 	import type { GeoZoomTransform } from './zoom.svelte';
 	import type { StreamingProjection } from '../../plots/utils/tiles';
@@ -10,31 +10,65 @@
 	 * positions, while dots, text and strokes keep their size. Works by handing
 	 * the marks below a view of svelteplot's plot state whose `scales.projection`
 	 * is the moved one.
+	 *
+	 * Re-projecting every mark is the cost of that, and a map with thousands of
+	 * features pays it on each wheel tick. So while the view is moving, the marks
+	 * already drawn are carried to it with an SVG transform (cheap, if briefly
+	 * coarser: strokes and dots scale with it), and the projection is only moved,
+	 * and the marks redrawn, once the view has been still for `settleDelay` ms.
 	 */
 	let {
 		inner,
 		outer,
+		settleDelay = 120,
 		children
-	}: { inner: GeoZoomTransform; outer: GeoZoomTransform; children: Snippet } = $props();
+	}: {
+		inner: GeoZoomTransform;
+		outer: GeoZoomTransform;
+		/** Milliseconds the view must be still before the marks are re-projected */
+		settleDelay?: number;
+		children: Snippet;
+	} = $props();
+
+	const same = (a: GeoZoomTransform, b: GeoZoomTransform) =>
+		a.k === b.k && a.x === b.x && a.y === b.y;
+
+	// The view the marks are drawn for; the first one is the one they mount with.
+	let settled = $state.raw(untrack(() => ({ inner: { ...inner }, outer: { ...outer } })));
+
+	$effect(() => {
+		const next = { inner: { ...inner }, outer: { ...outer } };
+		if (same(next.inner, settled.inner) && same(next.outer, settled.outer)) return;
+		const timer = setTimeout(() => (settled = next), settleDelay);
+		return () => clearTimeout(timer);
+	});
+
+	const carry = $derived(
+		ZoomedProjection.between(
+			ZoomedProjection.compose(settled.inner, settled.outer),
+			ZoomedProjection.compose(inner, outer)
+		)
+	);
+	const carrying = $derived(carry.k !== 1 || carry.x !== 0 || carry.y !== 0);
 
 	type Scales = { projection?: StreamingProjection & { aspectRatio?: number } } | undefined;
 	type PlotState = { scales: Scales; publicState: object };
 	type PlotContext = { getPlotState: () => PlotState } & Record<string, unknown>;
 
 	const context = getContext<PlotContext>('svelteplot');
-	const state = context.getPlotState();
+	const plot = context.getPlotState();
 
 	const scales = $derived.by((): Scales => {
-		const own = state.scales;
+		const own = plot.scales;
 		return own?.projection
-			? { ...own, projection: ZoomedProjection.of(own.projection, inner, outer) }
+			? { ...own, projection: ZoomedProjection.of(own.projection, settled.inner, settled.outer) }
 			: own;
 	});
 
-	const publicState = new Proxy(state.publicState, {
+	const publicState = new Proxy(plot.publicState, {
 		get: (target, key) => (key === 'scales' ? scales : Reflect.get(target, key, target))
 	});
-	const movedState = new Proxy(state, {
+	const movedState = new Proxy(plot, {
 		get: (target, key) => {
 			if (key === 'scales') return scales;
 			if (key === 'publicState') return publicState;
@@ -45,4 +79,6 @@
 	setContext('svelteplot', { ...context, getPlotState: () => movedState });
 </script>
 
-{@render children()}
+<g transform={carrying ? `translate(${carry.x} ${carry.y}) scale(${carry.k})` : undefined}>
+	{@render children()}
+</g>

package/dist/layout/coordinates/ProjectionZoom.svelte.d.ts

@@ -3,6 +3,8 @@ import type { GeoZoomTransform } from './zoom.svelte';
 type $$ComponentProps = {
     inner: GeoZoomTransform;
     outer: GeoZoomTransform;
+    /** Milliseconds the view must be still before the marks are re-projected */
+    settleDelay?: number;
     children: Snippet;
 };
 declare const ProjectionZoom: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/layout/coordinates/ZoomedProjection.d.ts

@@ -2,6 +2,10 @@ import type { GeoZoomTransform } from './zoom.svelte';
 import type { StreamingProjection } from '../../plots/utils/tiles';
 /** A fitted projection with a pan and scale applied to where it puts things, so positions move and zoom while what is drawn at them keeps its size. */
 export declare class ZoomedProjection {
+    /** `outer` over `inner` as one pan and scale of the pixels. */
+    static compose(inner: GeoZoomTransform, outer: GeoZoomTransform): GeoZoomTransform;
+    /** The pan and scale that carries what is drawn through `settled` to where `live` puts it. */
+    static between(settled: GeoZoomTransform, live: GeoZoomTransform): GeoZoomTransform;
     /** `projection`, then `outer` over `inner` (each a pan and scale) as one move in pixels. */
     static of(projection: StreamingProjection & {
         aspectRatio?: number;

package/dist/layout/coordinates/ZoomedProjection.js

@@ -1,11 +1,18 @@
 import { geoTransform } from 'd3-geo';
 /** A fitted projection with a pan and scale applied to where it puts things, so positions move and zoom while what is drawn at them keeps its size. */
 export class ZoomedProjection {
+    /** `outer` over `inner` as one pan and scale of the pixels. */
+    static compose(inner, outer) {
+        return { k: inner.k * outer.k, x: outer.k * inner.x + outer.x, y: outer.k * inner.y + outer.y };
+    }
+    /** The pan and scale that carries what is drawn through `settled` to where `live` puts it. */
+    static between(settled, live) {
+        const k = live.k / settled.k;
+        return { k, x: live.x - settled.x * k, y: live.y - settled.y * k };
+    }
     /** `projection`, then `outer` over `inner` (each a pan and scale) as one move in pixels. */
     static of(projection, inner, outer) {
-        const k = inner.k * outer.k;
-        const x = outer.k * inner.x + outer.x;
-        const y = outer.k * inner.y + outer.y;
+        const { k, x, y } = ZoomedProjection.compose(inner, outer);
         if (k === 1 && x === 0 && y === 0)
             return projection;
         const move = geoTransform({

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

@@ -17,8 +17,11 @@ export declare function resolveSegmentsForSeries<TStyle>(segments: SegmentsConfi
 export declare function matchesSegmentX<TStyle>(xVal: AxisValue, seg: Segment<TStyle>): boolean;
 /**
  * Warns about obvious configuration mistakes: multiple catch-all segments
- * (no `areas`) in the same series list. Since catch-alls are evaluated last
- * and in order, only the first one can ever match; later ones are dead code.
+ * (no `areas`) in the same series list that reach the same facet panels.
+ * Since catch-alls are evaluated last and in order, only the first one can
+ * ever match; later ones are dead code. A catch-all that names a `facet`
+ * does not compete with one for another panel, nor with the unscoped one,
+ * which it overrides in its own panels.
  */
 export declare function validateSegments<TStyle>(segments: SegmentsConfig<TStyle>): void;
 export declare function buildGroupedSeries<S extends Series<any>, TStyle = LineSegmentStyle>(seriesList: S[], segments?: SegmentsConfig<TStyle>, connect?: boolean): VisualGroup<S, TStyle>[];

package/dist/plots/utils/segments.js

@@ -49,12 +49,22 @@ function areaMatchesXY(xVal, yVal, area) {
 /* eslint-enable @typescript-eslint/no-explicit-any */
 /**
  * Warns about obvious configuration mistakes: multiple catch-all segments
- * (no `areas`) in the same series list. Since catch-alls are evaluated last
- * and in order, only the first one can ever match; later ones are dead code.
+ * (no `areas`) in the same series list that reach the same facet panels.
+ * Since catch-alls are evaluated last and in order, only the first one can
+ * ever match; later ones are dead code. A catch-all that names a `facet`
+ * does not compete with one for another panel, nor with the unscoped one,
+ * which it overrides in its own panels.
  */
 export function validateSegments(segments) {
     const check = (label, segs) => {
-        const catchAlls = segs.filter((s) => !s.areas || s.areas.length === 0).length;
+        const perScope = new Map();
+        for (const seg of segs) {
+            if (seg.areas && seg.areas.length > 0)
+                continue;
+            const scope = JSON.stringify(seg.facet ?? null);
+            perScope.set(scope, (perScope.get(scope) ?? 0) + 1);
+        }
+        const catchAlls = Math.max(0, ...perScope.values());
         if (catchAlls > 1) {
             console.warn(`segments ${label}: ${catchAlls} entries have no areas - ` +
                 `only the first catch-all's style will be used.`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Declarative charts, maps and small multiples for Svelte, built on svelteplot.",
   "license": "MIT",
   "author": "Ezequiel Puerta",