layerchart 2.0.0-next.50 → 2.0.0-next.52

package/dist/components/GeoRaster.svelte

@@ -0,0 +1,311 @@
+<script lang="ts" module>
+  import type { GeoProjection } from 'd3-geo';
+
+  export type GeoRasterPropsWithoutHTML = {
+    /**
+     * The image to reproject. Either:
+     *
+     * - a URL string (loaded via `Image` with `crossOrigin="anonymous"`),
+     * - a preloaded `HTMLImageElement`,
+     * - an `HTMLCanvasElement` (e.g. a stitched tile mosaic),
+     * - or an `ImageBitmap`.
+     *
+     * The image pixel data must be readable (not tainted by CORS). When passing a
+     * URL, the component sets `crossOrigin` on the underlying `Image` — the host
+     * must respond with the appropriate `Access-Control-Allow-Origin` header.
+     */
+    image: string | HTMLImageElement | HTMLCanvasElement | ImageBitmap;
+
+    /**
+     * Projection used by the source image. Pass as an uncalled function, e.g.
+     * `sourceProjection={geoEquirectangular}`.
+     *
+     * When omitted, the source is assumed to be an equirectangular (plate carrée)
+     * image covering the full globe — i.e. `x = ((lon + 180) / 360) * width`,
+     * `y = ((90 - lat) / 180) * height`. This is the common layout for imagery
+     * such as NASA Blue Marble / Black Marble.
+     */
+    sourceProjection?: () => GeoProjection;
+
+    /**
+     * Pixel sampling strategy.
+     *
+     * - `nearest` (default): fastest, slightly blocky at low source resolution.
+     * - `bilinear`: smoother, ~4x slower per pixel.
+     *
+     * @default 'nearest'
+     */
+    interpolate?: 'nearest' | 'bilinear';
+
+    /**
+     * `crossOrigin` attribute applied to the underlying `Image` element when
+     * loading from a URL. Set to `null` to disable.
+     *
+     * @default 'anonymous'
+     */
+    crossOrigin?: string | null;
+
+    /**
+     * Resolution multiplier for the reprojected output, relative to chart CSS
+     * pixels. A value greater than 1 produces a sharper image on HiDPI
+     * displays at the cost of more work per frame.
+     *
+     * @default 1
+     */
+    resolution?: number;
+
+    /**
+     * Disable image smoothing when compositing the reprojected buffer onto the
+     * destination canvas. Useful for a pixel-art look.
+     *
+     * @default false
+     */
+    pixelated?: boolean;
+  };
+
+  export type GeoRasterProps = GeoRasterPropsWithoutHTML;
+</script>
+
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { geoPath } from 'd3-geo';
+
+  import { getChartContext } from '../contexts/chart.js';
+  import { getGeoContext } from '../contexts/geo.js';
+  import { getLayerContext } from '../contexts/layer.js';
+
+  let {
+    image,
+    sourceProjection,
+    interpolate = 'nearest',
+    crossOrigin = 'anonymous',
+    resolution = 1,
+    pixelated = false,
+  }: GeoRasterProps = $props();
+
+  const ctx = getChartContext();
+  const geo = getGeoContext();
+  const layerCtx = getLayerContext();
+
+  type SourcePixels = {
+    data: Uint8ClampedArray;
+    width: number;
+    height: number;
+  };
+
+  let source = $state<SourcePixels | null>(null);
+
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+    // Re-run when `image` changes
+    const src = image;
+
+    let cancelled = false;
+
+    async function load() {
+      let drawable: CanvasImageSource;
+      let sw: number;
+      let sh: number;
+
+      if (typeof src === 'string') {
+        const img = new Image();
+        if (crossOrigin !== null) img.crossOrigin = crossOrigin;
+        img.src = src;
+        try {
+          await img.decode();
+        } catch (err) {
+          console.warn('[GeoRaster] Failed to decode image', err);
+          return;
+        }
+        drawable = img;
+        sw = img.naturalWidth;
+        sh = img.naturalHeight;
+      } else if (src instanceof HTMLImageElement) {
+        try {
+          await src.decode();
+        } catch (err) {
+          console.warn('[GeoRaster] Failed to decode image', err);
+          return;
+        }
+        drawable = src;
+        sw = src.naturalWidth;
+        sh = src.naturalHeight;
+      } else {
+        // HTMLCanvasElement or ImageBitmap — already decoded
+        drawable = src;
+        sw = src.width;
+        sh = src.height;
+      }
+
+      if (cancelled) return;
+      if (!sw || !sh) return;
+
+      const offscreen = document.createElement('canvas');
+      offscreen.width = sw;
+      offscreen.height = sh;
+      const octx = offscreen.getContext('2d', { willReadFrequently: true });
+      if (!octx) return;
+      octx.drawImage(drawable, 0, 0);
+
+      try {
+        const imageData = octx.getImageData(0, 0, sw, sh);
+        untrack(() => {
+          source = { data: imageData.data, width: sw, height: sh };
+        });
+      } catch (err) {
+        console.warn(
+          '[GeoRaster] Unable to read image pixels — the image is likely tainted by CORS',
+          err
+        );
+      }
+    }
+
+    load();
+
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  function render(dstCtx: CanvasRenderingContext2D) {
+    const src = source;
+    if (!src) return;
+
+    const projection = geo.projection;
+    if (!projection?.invert) return;
+
+    const width = Math.max(1, Math.floor(ctx.width * resolution));
+    const height = Math.max(1, Math.floor(ctx.height * resolution));
+    if (width <= 0 || height <= 0) return;
+
+    const buffer = document.createElement('canvas');
+    buffer.width = width;
+    buffer.height = height;
+    const bctx = buffer.getContext('2d');
+    if (!bctx) return;
+
+    const dstImage = bctx.createImageData(width, height);
+    const dstData = dstImage.data;
+
+    const srcData = src.data;
+    const sw = src.width;
+    const sh = src.height;
+
+    const srcProj = sourceProjection?.();
+    const invert = projection.invert.bind(projection);
+    const bilinear = interpolate === 'bilinear';
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        // Inverse-project destination pixel (in chart-space coordinates) to lon/lat.
+        // When `resolution !== 1`, scale the sample point back to chart coordinates.
+        const lonlat = invert([x / resolution, y / resolution]);
+        if (!lonlat) continue;
+
+        const lon = lonlat[0];
+        const lat = lonlat[1];
+        if (!Number.isFinite(lon) || !Number.isFinite(lat)) continue;
+
+        let sx: number;
+        let sy: number;
+
+        if (srcProj) {
+          const p = srcProj([lon, lat]);
+          if (!p) continue;
+          sx = p[0];
+          sy = p[1];
+        } else {
+          // Equirectangular source (plate carrée) — the default for most
+          // full-globe imagery like NASA Blue Marble.
+          sx = ((lon + 180) / 360) * sw;
+          sy = ((90 - lat) / 180) * sh;
+        }
+
+        if (!(sx >= 0 && sx < sw && sy >= 0 && sy < sh)) continue;
+
+        const di = (y * width + x) * 4;
+
+        if (bilinear) {
+          const x0 = Math.floor(sx);
+          const y0 = Math.floor(sy);
+          const x1 = Math.min(x0 + 1, sw - 1);
+          const y1 = Math.min(y0 + 1, sh - 1);
+          const fx = sx - x0;
+          const fy = sy - y0;
+          const w00 = (1 - fx) * (1 - fy);
+          const w10 = fx * (1 - fy);
+          const w01 = (1 - fx) * fy;
+          const w11 = fx * fy;
+          const i00 = (y0 * sw + x0) * 4;
+          const i10 = (y0 * sw + x1) * 4;
+          const i01 = (y1 * sw + x0) * 4;
+          const i11 = (y1 * sw + x1) * 4;
+          dstData[di] =
+            srcData[i00] * w00 + srcData[i10] * w10 + srcData[i01] * w01 + srcData[i11] * w11;
+          dstData[di + 1] =
+            srcData[i00 + 1] * w00 +
+            srcData[i10 + 1] * w10 +
+            srcData[i01 + 1] * w01 +
+            srcData[i11 + 1] * w11;
+          dstData[di + 2] =
+            srcData[i00 + 2] * w00 +
+            srcData[i10 + 2] * w10 +
+            srcData[i01 + 2] * w01 +
+            srcData[i11 + 2] * w11;
+          dstData[di + 3] =
+            srcData[i00 + 3] * w00 +
+            srcData[i10 + 3] * w10 +
+            srcData[i01 + 3] * w01 +
+            srcData[i11 + 3] * w11;
+        } else {
+          const sxi = sx | 0;
+          const syi = sy | 0;
+          const si = (syi * sw + sxi) * 4;
+          dstData[di] = srcData[si];
+          dstData[di + 1] = srcData[si + 1];
+          dstData[di + 2] = srcData[si + 2];
+          dstData[di + 3] = srcData[si + 3];
+        }
+      }
+    }
+
+    bctx.putImageData(dstImage, 0, 0);
+
+    // Clip to the projection's sphere so pixels outside the visible region
+    // (e.g. the far hemisphere of an orthographic globe) aren't drawn. For
+    // non-clipped projections (mercator, etc.) the sphere still renders as a
+    // finite region covering the full map.
+    dstCtx.save();
+    const pathGen = geoPath(projection, dstCtx);
+    dstCtx.beginPath();
+    pathGen({ type: 'Sphere' });
+    dstCtx.clip();
+
+    const prevSmoothing = dstCtx.imageSmoothingEnabled;
+    if (pixelated) dstCtx.imageSmoothingEnabled = false;
+    dstCtx.drawImage(buffer, 0, 0, ctx.width, ctx.height);
+    if (pixelated) dstCtx.imageSmoothingEnabled = prevSmoothing;
+
+    dstCtx.restore();
+  }
+
+  if (layerCtx === 'canvas') {
+    ctx.registerComponent({
+      name: 'GeoRaster',
+      kind: 'mark',
+      canvasRender: {
+        render,
+        deps: () => [
+          source,
+          geo.projection,
+          ctx.width,
+          ctx.height,
+          interpolate,
+          resolution,
+          pixelated,
+          sourceProjection,
+        ],
+      },
+    });
+  }
+</script>

package/dist/components/GeoRaster.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { GeoProjection } from 'd3-geo';
+export type GeoRasterPropsWithoutHTML = {
+    /**
+     * The image to reproject. Either:
+     *
+     * - a URL string (loaded via `Image` with `crossOrigin="anonymous"`),
+     * - a preloaded `HTMLImageElement`,
+     * - an `HTMLCanvasElement` (e.g. a stitched tile mosaic),
+     * - or an `ImageBitmap`.
+     *
+     * The image pixel data must be readable (not tainted by CORS). When passing a
+     * URL, the component sets `crossOrigin` on the underlying `Image` — the host
+     * must respond with the appropriate `Access-Control-Allow-Origin` header.
+     */
+    image: string | HTMLImageElement | HTMLCanvasElement | ImageBitmap;
+    /**
+     * Projection used by the source image. Pass as an uncalled function, e.g.
+     * `sourceProjection={geoEquirectangular}`.
+     *
+     * When omitted, the source is assumed to be an equirectangular (plate carrée)
+     * image covering the full globe — i.e. `x = ((lon + 180) / 360) * width`,
+     * `y = ((90 - lat) / 180) * height`. This is the common layout for imagery
+     * such as NASA Blue Marble / Black Marble.
+     */
+    sourceProjection?: () => GeoProjection;
+    /**
+     * Pixel sampling strategy.
+     *
+     * - `nearest` (default): fastest, slightly blocky at low source resolution.
+     * - `bilinear`: smoother, ~4x slower per pixel.
+     *
+     * @default 'nearest'
+     */
+    interpolate?: 'nearest' | 'bilinear';
+    /**
+     * `crossOrigin` attribute applied to the underlying `Image` element when
+     * loading from a URL. Set to `null` to disable.
+     *
+     * @default 'anonymous'
+     */
+    crossOrigin?: string | null;
+    /**
+     * Resolution multiplier for the reprojected output, relative to chart CSS
+     * pixels. A value greater than 1 produces a sharper image on HiDPI
+     * displays at the cost of more work per frame.
+     *
+     * @default 1
+     */
+    resolution?: number;
+    /**
+     * Disable image smoothing when compositing the reprojected buffer onto the
+     * destination canvas. Useful for a pixel-art look.
+     *
+     * @default false
+     */
+    pixelated?: boolean;
+};
+export type GeoRasterProps = GeoRasterPropsWithoutHTML;
+declare const GeoRaster: import("svelte").Component<GeoRasterPropsWithoutHTML, {}, "">;
+type GeoRaster = ReturnType<typeof GeoRaster>;
+export default GeoRaster;

package/dist/components/Grid.svelte

@@ -44,6 +44,12 @@
      */
     radialY?: 'circle' | 'linear';
 
+    /**
+     * Stroke color for grid lines.
+     * Useful for server-side rendering where CSS variables are not available.
+     */
+    stroke?: string;
+
     /**
      * Classes to apply to the rendered elements.
      *
@@ -113,6 +119,7 @@
     yTicks: yTicksProp,
     bandAlign = 'center',
     radialY = 'circle',
+    stroke,
     motion,
     transitionIn: transitionInProp,
     transitionInParams = { easing: cubicIn },
@@ -168,6 +175,7 @@
             {y1}
             {x2}
             {y2}
+            {stroke}
             motion={tweenConfig}
             {...splineProps}
             class={cls('lc-grid-x-radial-line', classes.line, splineProps?.class)}
@@ -176,6 +184,7 @@
           <Rule
             {x}
             xOffset={xBandOffset}
+            {stroke}
             {motion}
             {...splineProps}
             class={cls('lc-grid-x-rule', classes.line, splineProps?.class)}
@@ -189,6 +198,7 @@
         <Rule
           x={xTickVals[xTickVals.length - 1]}
           xOffset={ctx.xScale.step() + xBandOffset}
+          {stroke}
           {motion}
           {...splineProps}
           class={cls('lc-grid-x-end-rule', classes.line, splineProps?.class)}
@@ -205,6 +215,7 @@
           {#if radialY === 'circle'}
             <Circle
               r={ctx.yScale(y) + yBandOffset}
+              {stroke}
               {motion}
               {...splineProps}
               class={cls('lc-grid-y-radial-circle', classes.line, splineProps?.class)}
@@ -214,6 +225,7 @@
               data={xTickVals.map((x) => ({ x, y }))}
               x="x"
               y="y"
+              {stroke}
               motion={tweenConfig}
               curve={curveLinearClosed}
               {...splineProps}
@@ -226,6 +238,7 @@
             y1={ctx.yScale(y) + yBandOffset}
             x2={ctx.xRange[1]}
             y2={ctx.yScale(y) + yBandOffset}
+            {stroke}
             {motion}
             {...splineProps}
             class={cls('lc-grid-y-rule', classes.line, splineProps?.class)}
@@ -238,6 +251,7 @@
         {#if ctx.radial}
           <Circle
             r={ctx.yScale(yTickVals[yTickVals.length - 1])! + ctx.yScale.step() + yBandOffset}
+            {stroke}
             {motion}
             {...splineProps}
             class={cls('lc-grid-y-radial-circle', classes.line, splineProps?.class)}
@@ -250,6 +264,7 @@
             y1={y}
             x2={ctx.xRange[1]}
             y2={y}
+            {stroke}
             {motion}
             {...splineProps}
             class={cls('lc-grid-y-end-rule', classes.line, splineProps?.class)}

package/dist/components/Grid.svelte.d.ts

@@ -36,6 +36,11 @@ export type GridPropsWithoutHTML<In extends Transition = Transition> = {
      * @default 'circle'
      */
     radialY?: 'circle' | 'linear';
+    /**
+     * Stroke color for grid lines.
+     * Useful for server-side rendering where CSS variables are not available.
+     */
+    stroke?: string;
     /**
      * Classes to apply to the rendered elements.
      *

package/dist/components/Image.svelte

@@ -514,7 +514,7 @@
         style:object-fit="cover"
         crossorigin={crossOrigin}
         class={cls('lc-image', className)}
-        {...restProps}
+        {...restProps as any}
       />
     {/each}
   {:else}
@@ -532,7 +532,7 @@
       style:object-fit="cover"
       crossorigin={crossOrigin}
       class={cls('lc-image', className)}
-      {...restProps}
+      {...restProps as any}
     />
   {/if}
 {/if}

package/dist/components/Labels.svelte

@@ -42,15 +42,19 @@
 
     /**
      * The placement of the label relative to the point.
-     * `smart` dynamically positions labels based on neighboring point values (peak, trough, rising, falling).
+     * - `outside`: outside the bar/point.
+     * - `inside`: inside the bar/point near the value edge.
+     * - `middle`: aligned to the value edge with a middle anchor.
+     * - `center`: centered within the bar body (between the value edge and baseline).
+     * - `smart`: dynamically positions labels based on neighboring point values (peak, trough, rising, falling).
      * @default 'outside'
      */
-    placement?: 'inside' | 'outside' | 'center' | 'smart';
+    placement?: 'inside' | 'outside' | 'middle' | 'center' | 'smart';
 
     /**
      * The offset of the label from the point
      *
-     * @default placement === 'center' ? 0 : 4
+     * @default placement === 'center' || placement === 'middle' ? 0 : 4
      */
     offset?: number;
 
@@ -81,6 +85,7 @@
   import { getChartContext } from '../contexts/chart.js';
   import Group from './Group.svelte';
   import { extractLayerProps } from '../utils/attributes.js';
+  import { createDimensionGetter } from '../utils/rect.svelte.js';
 
   const ctx = getChartContext();
 
@@ -94,7 +99,7 @@
     y,
     seriesKey,
     placement = 'outside',
-    offset = placement === 'center' ? 0 : 4,
+    offset = placement === 'center' || placement === 'middle' ? 0 : 4,
     format,
     key = (_: any, i: number) => i,
     children: childrenProp,
@@ -104,6 +109,9 @@
     ...restProps
   }: LabelsProps<TData> = $props();
 
+  // Used to compute the bar's bounding rect for `center` placement
+  const getDimensions = $derived(createDimensionGetter(ctx, () => ({ x, y })));
+
   // TODO: Should we let `Points` handle opacity for children snippet as well?
   let series = $derived(ctx.series.series.find((s) => s.key === seriesKey));
   let derivedOpacity = $derived(
@@ -146,14 +154,27 @@
 
     if (isScaleBand(ctx.yScale)) {
       // Position label left/right on horizontal bars
-      if (isLowEdge) {
+      if (placement === 'center') {
+        // Center within the bar body
+        const dims = getDimensions(point.data) ?? { x: point.x, y: point.y, width: 0, height: 0 };
+        result = {
+          value: formattedValue,
+          fill: fillValue,
+          x: dims.x + dims.width / 2,
+          y: dims.y + dims.height / 2,
+          textAnchor: 'middle',
+          verticalAnchor: 'middle',
+          capHeight: '.6rem',
+        };
+      } else if (isLowEdge) {
         // left
         result = {
           value: formattedValue,
           fill: fillValue,
           x: point.x + (placement === 'outside' ? -offset : offset),
           y: point.y,
-          textAnchor: placement === 'outside' ? 'end' : 'start',
+          textAnchor:
+            placement === 'middle' ? 'middle' : placement === 'outside' ? 'end' : 'start',
           verticalAnchor: 'middle',
           capHeight: '.6rem',
         };
@@ -164,14 +185,27 @@
           fill: fillValue,
           x: point.x + (placement === 'outside' ? offset : -offset),
           y: point.y,
-          textAnchor: placement === 'outside' ? 'start' : 'end',
+          textAnchor:
+            placement === 'middle' ? 'middle' : placement === 'outside' ? 'start' : 'end',
           verticalAnchor: 'middle',
           capHeight: '.6rem',
         };
       }
     } else {
       // Position label top/bottom on vertical bars
-      if (isLowEdge) {
+      if (placement === 'center') {
+        // Center within the bar body
+        const dims = getDimensions(point.data) ?? { x: point.x, y: point.y, width: 0, height: 0 };
+        result = {
+          value: formattedValue,
+          fill: fillValue,
+          x: dims.x + dims.width / 2,
+          y: dims.y + dims.height / 2,
+          capHeight: '.6rem',
+          textAnchor: 'middle',
+          verticalAnchor: 'middle',
+        };
+      } else if (isLowEdge) {
         // bottom
         result = {
           value: formattedValue,
@@ -181,7 +215,7 @@
           capHeight: '.6rem',
           textAnchor: 'middle',
           verticalAnchor:
-            placement === 'center' ? 'middle' : placement === 'outside' ? 'start' : 'end',
+            placement === 'middle' ? 'middle' : placement === 'outside' ? 'start' : 'end',
         };
       } else {
         // top
@@ -193,7 +227,7 @@
           capHeight: '.6rem',
           textAnchor: 'middle',
           verticalAnchor:
-            placement === 'center' ? 'middle' : placement === 'outside' ? 'end' : 'start',
+            placement === 'middle' ? 'middle' : placement === 'outside' ? 'end' : 'start',
         };
       }
     }
@@ -271,7 +305,8 @@
       --fill-color: var(--color-surface-content, currentColor);
       --stroke-color: var(--color-surface-100, light-dark(white, black));
 
-      &[data-placement='inside'] {
+      &[data-placement='inside'],
+      &[data-placement='center'] {
         --fill-color: var(--color-surface-100, light-dark(white, black));
         --stroke-color: var(--color-surface-content, currentColor);
       }

package/dist/components/Labels.svelte.d.ts

@@ -34,14 +34,18 @@ export type LabelsPropsWithoutHTML<T = any> = {
     seriesKey?: string;
     /**
      * The placement of the label relative to the point.
-     * `smart` dynamically positions labels based on neighboring point values (peak, trough, rising, falling).
+     * - `outside`: outside the bar/point.
+     * - `inside`: inside the bar/point near the value edge.
+     * - `middle`: aligned to the value edge with a middle anchor.
+     * - `center`: centered within the bar body (between the value edge and baseline).
+     * - `smart`: dynamically positions labels based on neighboring point values (peak, trough, rising, falling).
      * @default 'outside'
      */
-    placement?: 'inside' | 'outside' | 'center' | 'smart';
+    placement?: 'inside' | 'outside' | 'middle' | 'center' | 'smart';
     /**
      * The offset of the label from the point
      *
-     * @default placement === 'center' ? 0 : 4
+     * @default placement === 'center' || placement === 'middle' ? 0 : 4
      */
     offset?: number;
     /**