layerchart 2.0.0-next.5 → 2.0.0-next.50

package/dist/components/Circle.svelte.test.js

@@ -0,0 +1,141 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import TestHarness, { componentTestId } from './tests/TestHarness.svelte';
+import Circle from './Circle.svelte';
+describe('Circle', () => {
+    describe('pixel mode', () => {
+        it('should render a circle with pixel values', async () => {
+            render(TestHarness, {
+                component: Circle,
+                componentProps: {
+                    cx: 50,
+                    cy: 50,
+                    r: 10,
+                    fill: 'red',
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+            expect(el.element()?.getAttribute('cx')).toBe('50');
+            expect(el.element()?.getAttribute('cy')).toBe('50');
+            expect(el.element()?.getAttribute('r')).toBe('10');
+        });
+    });
+    describe('data mode', () => {
+        const data = [
+            { date: new Date('2024-01-01'), value: 20 },
+            { date: new Date('2024-02-01'), value: 40 },
+            { date: new Date('2024-03-01'), value: 60 },
+        ];
+        it('should render one circle per data item with string accessors', async () => {
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    r: 5,
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(3);
+        });
+        it('should render with function accessors', async () => {
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    cx: (d) => d.date,
+                    cy: (d) => d.value,
+                    r: 5,
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(3);
+        });
+        it('should resolve data-driven fill through cScale', async () => {
+            const colorData = [
+                { date: new Date('2024-01-01'), value: 20, category: 'A' },
+                { date: new Date('2024-02-01'), value: 40, category: 'B' },
+                { date: new Date('2024-03-01'), value: 60, category: 'A' },
+            ];
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data: colorData,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                    c: 'category',
+                    cRange: ['steelblue', 'coral'],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    r: 5,
+                    fill: 'category',
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(3);
+            // First and third items have category 'A' → steelblue
+            expect(circles[0].getAttribute('fill')).toBe('steelblue');
+            expect(circles[2].getAttribute('fill')).toBe('steelblue');
+            // Second item has category 'B' → coral
+            expect(circles[1].getAttribute('fill')).toBe('coral');
+        });
+        it('should pass literal CSS colors through unchanged in data mode', async () => {
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    r: 5,
+                    fill: 'red',
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(3);
+            // 'red' is not a data property, so it's used as-is
+            expect(circles[0].getAttribute('fill')).toBe('red');
+            expect(circles[1].getAttribute('fill')).toBe('red');
+        });
+        it('should use explicit data prop over chart context data', async () => {
+            const explicitData = [{ date: new Date('2024-01-01'), value: 20 }];
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data: explicitData,
+                    cx: 'date',
+                    cy: 'value',
+                    r: 5,
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(1);
+        });
+    });
+});

package/dist/components/CircleClipPath.svelte

@@ -76,10 +76,26 @@
   $effect.pre(() => {
     refProp = ref;
   });
+
+  function canvasClip(ctx: CanvasRenderingContext2D) {
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, Math.PI * 2);
+  }
+
+  function canvasClipDeps() {
+    return [cx, cy, r];
+  }
 </script>
 
-<ClipPath {id} {disabled} {children}>
+<ClipPath {id} {disabled} {children} {canvasClip} {canvasClipDeps}>
   {#snippet clip()}
-    <Circle {cx} {cy} {r} {motion} {...extractLayerProps(restProps, 'clip-path-circle')} bind:ref />
+    <Circle
+      {cx}
+      {cy}
+      {r}
+      {motion}
+      {...extractLayerProps(restProps, 'lc-clip-path-circle')}
+      bind:ref
+    />
   {/snippet}
 </ClipPath>

package/dist/components/ClipPath.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" module>
   import { createId } from '../utils/createId.js';
   import type { Without } from '../utils/types.js';
-  import { layerClass } from '../utils/attributes.js';
   import type { Snippet } from 'svelte';
   import type { SVGAttributes } from 'svelte/elements';
-  import { getRenderContext } from './Chart.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
 
   export type ClipPathPropsWithoutHTML = {
     /**
@@ -37,6 +36,16 @@
      * Provides the id, url, and useId for the clipPath as snippet props.
      */
     children?: Snippet<[{ id: string; url: string; useId?: string }]>;
+    /**
+     * Canvas clip path function. When provided and in canvas mode, sets up a canvas
+     * clip region by drawing a path and calling `ctx.clip()` before rendering children.
+     */
+    canvasClip?: (ctx: CanvasRenderingContext2D) => void;
+    /**
+     * Reactive deps for canvas clip invalidation. Return array of values that,
+     * when changed, should trigger a canvas redraw.
+     */
+    canvasClipDeps?: () => any[];
   };
 
   export type ClipPathProps = ClipPathPropsWithoutHTML &
@@ -44,6 +53,8 @@
 </script>
 
 <script lang="ts">
+  import { getChartContext } from '../contexts/chart.js';
+
   const uid = $props.id();
 
   let {
@@ -52,15 +63,34 @@
     disabled = false,
     children,
     clip,
+    canvasClip,
+    canvasClipDeps,
     ...restProps
   }: ClipPathPropsWithoutHTML = $props();
 
   const url = $derived(`url(#${id})`);
 
-  const renderContext = getRenderContext();
+  const layerCtx = getLayerContext();
+  const chartCtx = getChartContext();
+
+  if (layerCtx === 'canvas') {
+    chartCtx.registerComponent({
+      name: 'ClipPath',
+      kind: 'group',
+      canvasRender: {
+        render: (ctx) => {
+          if (!disabled && canvasClip) {
+            canvasClip(ctx);
+            ctx.clip();
+          }
+        },
+        deps: () => canvasClipDeps?.() ?? [],
+      },
+    });
+  }
 </script>
 
-{#if renderContext === 'svg'}
+{#if layerCtx === 'svg'}
   <defs>
     <clipPath {id} {...restProps}>
       {@render clip?.({ id })}
@@ -73,10 +103,10 @@
 {/if}
 
 {#if children}
-  {#if disabled || renderContext !== 'svg'}
+  {#if disabled || layerCtx !== 'svg'}
     {@render children({ id, url, useId })}
   {:else}
-    <g style:clip-path={url} class={layerClass('clip-path-g')}>
+    <g style:clip-path={url} class="lc-clip-path-g">
       {@render children({ id, url, useId })}
     </g>
   {/if}

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

@@ -34,6 +34,16 @@ export type ClipPathPropsWithoutHTML = {
         url: string;
         useId?: string;
     }]>;
+    /**
+     * Canvas clip path function. When provided and in canvas mode, sets up a canvas
+     * clip region by drawing a path and calling `ctx.clip()` before rendering children.
+     */
+    canvasClip?: (ctx: CanvasRenderingContext2D) => void;
+    /**
+     * Reactive deps for canvas clip invalidation. Return array of values that,
+     * when changed, should trigger a canvas redraw.
+     */
+    canvasClipDeps?: () => any[];
 };
 export type ClipPathProps = ClipPathPropsWithoutHTML & Without<SVGAttributes<SVGClipPathElement>, ClipPathPropsWithoutHTML>;
 declare const ClipPath: import("svelte").Component<ClipPathPropsWithoutHTML, {}, "">;

package/dist/components/ColorRamp.svelte

@@ -83,5 +83,5 @@
   preserveAspectRatio="none"
   {height}
   {width}
-  {...extractLayerProps(restProps, 'color-ramp')}
+  {...extractLayerProps(restProps, 'lc-color-ramp')}
 />

package/dist/components/ComputedStyles.svelte

@@ -13,7 +13,6 @@
 <script lang="ts">
   import { computedStyles } from '@layerstack/svelte-actions';
   import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../utils/attributes.js';
 
   let { class: className, children }: ComputedStylesProps = $props();
 
@@ -21,8 +20,16 @@
 </script>
 
 <div
-  class={cls(layerClass('computed-styles'), 'hidden', className)}
+  class={cls('lc-computed-styles', className)}
   use:computedStyles={(_styles) => (styles = _styles)}
 ></div>
 
 {@render children?.({ styles })}
+
+<style>
+  @layer base {
+    :global(:where(.lc-computed-styles)) {
+      display: none;
+    }
+  }
+</style>

package/dist/components/Connector.svelte

@@ -46,10 +46,10 @@
      * @default `d3.curveLinear`
      */
     curve?: CurveFactory;
-  } & SplinePropsWithoutHTML;
+  } & PathPropsWithoutHTML;
 
   export type ConnectorProps = ConnectorPropsWithoutHTML &
-    Without<SplineProps, ConnectorPropsWithoutHTML>;
+    Without<PathProps, ConnectorPropsWithoutHTML>;
 </script>
 
 <script lang="ts">
@@ -61,7 +61,7 @@
     type ConnectorSweep,
     type ConnectorType,
   } from '../utils/connectorUtils.js';
-  import Spline, { type SplineProps, type SplinePropsWithoutHTML } from './Spline.svelte';
+  import Path, { type PathProps, type PathPropsWithoutHTML } from './Path.svelte';
   import type { Without } from '../utils/types.js';
   import { createId } from '../utils/createId.js';
   import { extractLayerProps } from '../utils/attributes.js';
@@ -82,7 +82,7 @@
     type = 'rounded',
     radius = 20,
     curve = curveLinear,
-    splineRef = $bindable(),
+    pathRef = $bindable(),
     pathData: pathDataProp,
     marker,
     markerStart,
@@ -135,13 +135,13 @@
   );
 </script>
 
-<Spline
+<Path
   pathData={motionPath.current}
-  bind:splineRef
+  bind:pathRef
   marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
   marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
   marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-  {...extractLayerProps(restProps, 'connector')}
+  {...extractLayerProps(restProps, 'lc-connector')}
   {...restProps}
 />
 <MarkerWrapper id={markerStartId} marker={markerStart} />

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

@@ -40,12 +40,12 @@ export type ConnectorPropsWithoutHTML = {
      * @default `d3.curveLinear`
      */
     curve?: CurveFactory;
-} & SplinePropsWithoutHTML;
-export type ConnectorProps = ConnectorPropsWithoutHTML & Without<SplineProps, ConnectorPropsWithoutHTML>;
+} & PathPropsWithoutHTML;
+export type ConnectorProps = ConnectorPropsWithoutHTML & Without<PathProps, ConnectorPropsWithoutHTML>;
 import { type CurveFactory } from 'd3-shape';
 import { type ConnectorCoords, type ConnectorSweep, type ConnectorType } from '../utils/connectorUtils.js';
-import { type SplineProps, type SplinePropsWithoutHTML } from './Spline.svelte';
+import { type PathProps, type PathPropsWithoutHTML } from './Path.svelte';
 import type { Without } from '../utils/types.js';
-declare const Connector: import("svelte").Component<ConnectorProps, {}, "splineRef">;
+declare const Connector: import("svelte").Component<ConnectorProps, {}, "pathRef">;
 type Connector = ReturnType<typeof Connector>;
 export default Connector;

package/dist/components/Contour.svelte

@@ -0,0 +1,301 @@
+<script lang="ts" module>
+  import type { SVGAttributes } from 'svelte/elements';
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { Accessor } from '../utils/common.js';
+  import type { InterpolateMethod } from '../utils/rasterInterpolate.js';
+
+  export type ContourPropsWithoutHTML = {
+    /**
+     * Input data. Interpretation depends on other props:
+     * - With `width`/`height`: flat array of grid values (row-major order)
+     * - With `value` accessor: array of objects with x/y/value properties (scattered data)
+     * - Without: uses chart context data for scattered interpolation
+     */
+    data?: number[] | Float64Array | any[];
+    /** Grid width (columns). When set, `data` is treated as a flat grid array. */
+    width?: number;
+    /** Grid height (rows). When set, `data` is treated as a flat grid array. */
+    height?: number;
+
+    /** Left bound of the raster in data coordinates. Defaults to `0` in grid mode. */
+    x1?: number;
+    /** Top bound of the raster in data coordinates. Defaults to `0` in grid mode. */
+    y1?: number;
+    /** Right bound of the raster in data coordinates. Defaults to `width` in grid mode. */
+    x2?: number;
+    /** Bottom bound of the raster in data coordinates. Defaults to `height` in grid mode. */
+    y2?: number;
+
+    /**
+     * Value channel. Interpretation depends on the type:
+     * - `(x, y) => number`: continuous function evaluated at each pixel (function sampling mode)
+     * - `string | number | (d) => any`: accessor for scattered data interpolation
+     * @default 'value'
+     */
+    value?: Accessor | ((x: number, y: number) => number);
+
+    /** X accessor for scattered data. Defaults to chart context. */
+    x?: Accessor;
+    /** Y accessor for scattered data. Defaults to chart context. */
+    y?: Accessor;
+
+    /** Interpolation method for scattered data. @default 'barycentric' */
+    interpolate?: InterpolateMethod;
+
+    /** Number of contour thresholds or explicit threshold values. @default 10 */
+    thresholds?: number | number[];
+    /** Gaussian blur radius applied to grid values. @default 0 */
+    blur?: number;
+    /** Whether to smooth contour lines. @default true */
+    smooth?: boolean;
+  } & CommonStyleProps;
+
+  export type ContourProps = ContourPropsWithoutHTML &
+    Without<SVGAttributes<SVGGElement>, ContourPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { contours as d3Contours } from 'd3-contour';
+  import { geoPath, geoTransform } from 'd3-geo';
+  import { scaleSequential } from 'd3-scale';
+  import { interpolateYlGnBu } from 'd3-scale-chromatic';
+  import { max, min } from 'd3-array';
+
+  import Group from './Group.svelte';
+  import Path from './Path.svelte';
+  import { accessor as resolveAccessor, chartDataArray } from '../utils/common.js';
+  import { getChartContext } from '../contexts/chart.js';
+  import { getGeoContext } from '../contexts/geo.js';
+  import {
+    blurGridIgnoringNaN,
+    gridCellCenterToBounds,
+    gridPointToBounds,
+    resolveRasterBounds,
+  } from '../utils/index.js';
+  import { interpolateGrid } from '../utils/rasterInterpolate.js';
+
+  const ctx = getChartContext();
+  const geo = getGeoContext();
+
+  let {
+    data: dataProp,
+    width: widthProp,
+    height: heightProp,
+    x1: x1Prop,
+    y1: y1Prop,
+    x2: x2Prop,
+    y2: y2Prop,
+    value: valueProp,
+    x: xProp,
+    y: yProp,
+    interpolate: interpolateMethod = 'barycentric',
+    thresholds = 10,
+    blur: blurRadius = 0,
+    smooth = true,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    class: className,
+    ...restProps
+  }: ContourProps = $props();
+
+  // Detect grid mode: data + width/height
+  const isGridMode = $derived(!!(dataProp && widthProp && heightProp));
+  const hasExplicitBounds = $derived(
+    x1Prop !== undefined || y1Prop !== undefined || x2Prop !== undefined || y2Prop !== undefined
+  );
+  const gridBounds = $derived(
+    resolveRasterBounds(widthProp ?? 0, heightProp ?? 0, x1Prop, y1Prop, x2Prop, y2Prop)
+  );
+
+  // Register as composite-mark with markInfo for grid mode domain participation
+  ctx.registerComponent({
+    name: 'Contour',
+    kind: 'composite-mark',
+    markInfo: () => {
+      if (!isGridMode) return {};
+      return {
+        data: [
+          { x: gridBounds.x1, y: gridBounds.y1 },
+          { x: gridBounds.x2, y: gridBounds.y2 },
+        ],
+        x: 'x',
+        y: 'y',
+      };
+    },
+  });
+
+  // Grid dimensions: use provided, or derive from chart size
+  const gridW = $derived(widthProp ?? Math.min(Math.ceil(ctx.width), 200));
+  const gridH = $derived(heightProp ?? Math.min(Math.ceil(ctx.height), 200));
+
+  // Scale factors from grid coordinates to chart pixel coordinates
+  const scaleX = $derived(ctx.width / gridW);
+  const scaleY = $derived(ctx.height / gridH);
+  const contourScaleX = $derived(gridW / ctx.width);
+  const contourScaleY = $derived(gridH / ctx.height);
+  const useProjectedGridSampling = $derived(!!(geo.projection && isGridMode && hasExplicitBounds));
+
+  // Resolve grid values from one of three input modes
+  const gridValues = $derived.by(() => {
+    if (!ctx.width || !ctx.height) return new Float64Array(0);
+
+    // Mode 1: Grid data (flat array + width/height)
+    if (isGridMode) {
+      return dataProp instanceof Float64Array ? dataProp : Float64Array.from(dataProp as number[]);
+    }
+
+    // Mode 2: Continuous function — evaluate at each grid cell
+    if (typeof valueProp === 'function' && valueProp.length >= 2) {
+      const fn = valueProp as (x: number, y: number) => number;
+      const grid = new Float64Array(gridW * gridH);
+      const xInvert = ctx.xScale.invert;
+      const yInvert = ctx.yScale.invert;
+      for (let j = 0; j < gridH; j++) {
+        for (let i = 0; i < gridW; i++) {
+          const px = (i + 0.5) * scaleX;
+          const py = (j + 0.5) * scaleY;
+          const dataX = xInvert ? xInvert(px) : px;
+          const dataY = yInvert ? yInvert(py) : py;
+          grid[j * gridW + i] = fn(dataX, dataY);
+        }
+      }
+      return grid;
+    }
+
+    // Mode 3: Scattered data — interpolate onto grid
+    const chartData = dataProp ? (dataProp as any[]) : chartDataArray(ctx.data);
+    if (!chartData || chartData.length === 0) return new Float64Array(0);
+
+    const xAcc = xProp ? resolveAccessor(xProp) : ctx.x;
+    const yAcc = yProp ? resolveAccessor(yProp) : ctx.y;
+    const valAcc = resolveAccessor((valueProp ?? 'value') as Accessor);
+
+    const points: [number, number, number][] = chartData.map((d: any) => [
+      ctx.xScale(xAcc(d)) / scaleX,
+      ctx.yScale(yAcc(d)) / scaleY,
+      valAcc(d),
+    ]);
+
+    return interpolateGrid(points, gridW, gridH, interpolateMethod);
+  });
+
+  const projectedGridPoints = $derived.by(() => {
+    if (!useProjectedGridSampling || !widthProp || !heightProp || !geo.projection) return [];
+
+    const points: [number, number, number][] = [];
+    for (let row = 0; row < heightProp; row++) {
+      for (let column = 0; column < widthProp; column++) {
+        const value = gridValues[row * widthProp + column];
+        if (!Number.isFinite(value)) continue;
+
+        const point = gridCellCenterToBounds(column, row, widthProp, heightProp, gridBounds);
+        const projected = geo.projection([point.x, point.y]);
+        if (!projected || !Number.isFinite(projected[0]) || !Number.isFinite(projected[1]))
+          continue;
+
+        points.push([projected[0] * contourScaleX, projected[1] * contourScaleY, value]);
+      }
+    }
+
+    return points;
+  });
+
+  const contourGridValues = $derived.by(() => {
+    if (useProjectedGridSampling) {
+      return interpolateGrid(projectedGridPoints, gridW, gridH, interpolateMethod);
+    }
+
+    return gridValues;
+  });
+
+  // Apply optional blur
+  const blurredValues = $derived.by(() => {
+    if (!blurRadius || contourGridValues.length === 0) return contourGridValues;
+    return blurGridIgnoringNaN(contourGridValues, gridW, gridH, blurRadius);
+  });
+
+  // Run d3 contour generator
+  const contourData = $derived.by(() => {
+    if (blurredValues.length === 0) return [];
+    const generator = d3Contours().size([gridW, gridH]).smooth(smooth);
+    generator.thresholds(thresholds);
+    return generator(Array.from(blurredValues));
+  });
+
+  // Path generator that maps contour geometry into either data or geo space.
+  const pathGenerator = $derived.by(() => {
+    if (useProjectedGridSampling) {
+      return geoPath(
+        geoTransform({
+          point(x, y) {
+            this.stream.point(x * scaleX, y * scaleY);
+          },
+        })
+      );
+    }
+
+    if (isGridMode && hasExplicitBounds) {
+      return geoPath(
+        geoTransform({
+          point(x, y) {
+            const point = gridPointToBounds(x, y, gridW, gridH, gridBounds);
+            this.stream.point(ctx.xScale(point.x), ctx.yScale(point.y));
+          },
+        })
+      );
+    }
+
+    if (scaleX === 1 && scaleY === 1) return geoPath();
+    return geoPath(
+      geoTransform({
+        point(x, y) {
+          this.stream.point(x * scaleX, y * scaleY);
+        },
+      })
+    );
+  });
+
+  // Color scale: use chart's cScale (with auto-computed domain) or fall back to default
+  const colorScale = $derived.by(() => {
+    if (fill) return null;
+    const minValue = min(contourData, (d) => d.value) ?? 0;
+    const maxValue = max(contourData, (d) => d.value) ?? 1;
+    if (ctx.cScale) {
+      const scale = ctx.cScale.copy();
+      return ctx.props.cDomain ? scale : scale.domain([minValue, maxValue]);
+    }
+    return scaleSequential([minValue, maxValue], interpolateYlGnBu);
+  });
+
+  function getContourFill(contour: { value: number }) {
+    if (fill) return fill;
+    return colorScale ? String(colorScale(contour.value)) : 'steelblue';
+  }
+</script>
+
+{#if contourData.length > 0}
+  <Group class="lc-contour" {opacity}>
+    {#each contourData as contour, i (i)}
+      <Path
+        pathData={pathGenerator(contour) ?? ''}
+        fill={getContourFill(contour)}
+        {fillOpacity}
+        {stroke}
+        {strokeWidth}
+        class={cls('lc-contour-band', className)}
+      />
+    {/each}
+  </Group>
+{/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-contour-band)) {
+      --stroke-color: none;
+    }
+  }
+</style>