svelteplot 0.12.0 → 0.13.0

package/dist/marks/Contour.svelte.d.ts

@@ -0,0 +1,150 @@
+import type { DataRow, ChannelAccessor } from '../types/index.js';
+import { type InterpolateFunction } from '../helpers/rasterInterpolate.js';
+declare function $$render<Datum extends DataRow>(): {
+    props: {
+        /**
+         * Input data.  For **dense grid** mode supply a flat row-major array and
+         * set `width`/`height`.  Omit (or set null) for **function-sampling**
+         * mode.  For **scatter interpolation** supply an array of records with
+         * `x`/`y` channels.
+         */
+        data?: Datum[] | null;
+        /** x position channel (scatter mode) */
+        x?: ChannelAccessor<Datum>;
+        /** y position channel (scatter mode) */
+        y?: ChannelAccessor<Datum>;
+        /**
+         * Scalar field accessor, identity function for dense grid, or an
+         * `(x, y) => number` function for function-sampling mode.
+         */
+        value?: ChannelAccessor<Datum> | ((x: number, y: number) => number);
+        /**
+         * Contour threshold levels.  Can be:
+         * - a **count** (number): approximately that many nicely-spaced levels
+         * - an explicit **array** of threshold values
+         * - a **function** `(values, min, max) => number[]`
+         * - a d3 **threshold scheme** object with `.floor()` / `.range()`
+         *
+         * Defaults to Sturges' formula applied to the value range.
+         */
+        thresholds?: number | number[] | ((values: number[], min: number, max: number) => number[]) | {
+            floor(x: number): number;
+            range(a: number, b: number): number[];
+        };
+        /**
+         * Step interval between contour levels (alternative to `thresholds`).
+         * Can be a number (constant step) or an interval object with `.floor()`
+         * / `.range()`.
+         */
+        interval?: number | {
+            floor(x: number): number;
+            range(a: number, b: number): number[];
+        };
+        /**
+         * Whether to apply linear interpolation when tracing contour edges
+         * (default `true`).  Set to `false` for a blockier, faster appearance.
+         */
+        smooth?: boolean;
+        /** left bound of the domain in data coordinates */
+        x1?: number;
+        /** top bound of the domain in data coordinates */
+        y1?: number;
+        /** right bound of the domain in data coordinates */
+        x2?: number;
+        /** bottom bound of the domain in data coordinates */
+        y2?: number;
+        /**
+         * Explicit grid width; required for dense grid mode, overrides
+         * `pixelSize` in other modes.
+         */
+        width?: number;
+        /**
+         * Explicit grid height; required for dense grid mode, overrides
+         * `pixelSize` in other modes.
+         */
+        height?: number;
+        /** pixel size in screen pixels (default 2) */
+        pixelSize?: number;
+        /** Gaussian blur radius applied before contouring (default 0) */
+        blur?: number;
+        /**
+         * Spatial interpolation for scatter mode:
+         * `"none"` | `"nearest"` | `"barycentric"` | `"random-walk"` or a
+         * custom `(index, w, h, X, Y, V) => W` function.
+         * Defaults to `"nearest"` when data is provided.
+         */
+        interpolate?: "none" | "nearest" | "barycentric" | "random-walk" | InterpolateFunction;
+        /**
+         * Fill color for contour polygons.  Use `"value"` to map each
+         * threshold level through the plot's color scale.  Default `"none"`.
+         *
+         * **Shorthand**: if `value` is omitted and `fill` is a field name or
+         * accessor function (not a CSS color), it is automatically promoted to
+         * the `value` channel and `fill` is set to `"value"`.
+         */
+        fill?: string | ChannelAccessor<Datum>;
+        /**
+         * Stroke color for contour lines.  Use `"value"` to map each
+         * threshold level through the plot's color scale.  Default
+         * `"currentColor"`.
+         *
+         * **Shorthand**: if `value` is omitted and `stroke` is a field name or
+         * accessor function (not a CSS color), it is automatically promoted to
+         * the `value` channel and `stroke` is set to `"value"`.
+         */
+        stroke?: string | ChannelAccessor<Datum>;
+        strokeWidth?: number;
+        strokeOpacity?: number;
+        fillOpacity?: number;
+        opacity?: number;
+        strokeMiterlimit?: number;
+        clipPath?: string;
+        class?: string;
+        /** the horizontal facet channel */
+        fx?: ChannelAccessor<Datum>;
+        /** the vertical facet channel */
+        fy?: ChannelAccessor<Datum>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum extends DataRow> {
+    props(): ReturnType<typeof $$render<Datum>>['props'];
+    events(): ReturnType<typeof $$render<Datum>>['events'];
+    slots(): ReturnType<typeof $$render<Datum>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum extends DataRow>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
+    } & ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum extends DataRow>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Renders contour lines (or filled contour bands) from a scalar field using
+ * the marching-squares algorithm.
+ *
+ * Supports the same three input modes as the `Raster` mark:
+ *
+ * **Dense grid mode** (`data` is a flat row-major array, `width`/`height` are
+ * set, no `x`/`y` channels): each datum is its own scalar value (unless `value`
+ * is specified).
+ *
+ * **Function sampling mode** (`data` is omitted/null, `value` is an
+ * `(x, y) => number` function): the function is evaluated on a pixel grid.
+ *
+ * **Scatter interpolation mode** (`data` is an array with `x`/`y` channels):
+ * each datum contributes a position and scalar value; the mark spatially
+ * interpolates over the grid before running marching squares.
+ *
+ * Styling: `fill` and `stroke` accept ordinary CSS color strings **or** the
+ * special keyword `"value"`, which maps each contour level's threshold through
+ * the plot's color scale.  Defaults: `fill="none"`, `stroke="currentColor"`.
+ */
+declare const Contour: $$IsomorphicComponent;
+type Contour<Datum extends DataRow> = InstanceType<typeof Contour<Datum>>;
+export default Contour;

package/dist/marks/Image.svelte

@@ -22,7 +22,8 @@
         title?: ConstantAccessor<string, Datum>;
         /** the SVG preserveAspectRatio attribute for the image (e.g. "xMidYMid meet") */
         preserveAspectRatio?: string;
-        // canvas?: boolean;
+        /** if true, renders using Canvas instead of SVG */
+        canvas?: boolean;
         /** CSS class name(s) to apply to individual image elements */
         imageClass?: ConstantAccessor<string, Datum>;
     }
@@ -39,6 +40,7 @@
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { sort } from '../transforms/index.js';
     import Anchor from './helpers/Anchor.svelte';
+    import ImageCanvas from './helpers/ImageCanvas.svelte';
     import Mark from '../Mark.svelte';
 
     let markProps: ImageMarkProps = $props();
@@ -51,6 +53,7 @@
 
     const {
         data = [{} as Datum],
+        canvas = false,
         width,
         height,
         src,
@@ -71,31 +74,38 @@
     channels={['x', 'y', 'r', 'fill', 'opacity', 'stroke', 'fillOpacity', 'strokeOpacity']}
     {...args}
     type="image">
-    {#snippet children({ scaledData })}
-        {#each scaledData as record, i (i)}
-            {#if record.valid}
-                {@const w =
-                    record.r !== undefined
-                        ? record.r * 2
-                        : Number(resolveProp(width, record.datum, 20) ?? 20)}
-                {@const h =
-                    record.r !== undefined
-                        ? record.r * 2
-                        : Number(resolveProp(height || width, record.datum, 20) ?? 20)}
-                <Anchor {options} datum={record.datum}>
-                    <image
-                        class={resolveProp(imageClass, record.datum, null)}
-                        href={resolveProp(src, record.datum, '')}
-                        x={record.x! - w * 0.5}
-                        y={record.y! - h * 0.5}
-                        {preserveAspectRatio}
-                        clip-path={record.r !== undefined ? `circle(${record.r}px)` : null}
-                        width={w}
-                        height={h}
-                        >{#if title}<title>{resolveProp(title, record.datum, '')}</title
-                            >{/if}</image>
-                </Anchor>
-            {/if}
-        {/each}
+    {#snippet children({ scaledData, usedScales })}
+        {#if canvas}
+            <ImageCanvas
+                data={scaledData}
+                options={{ ...options, src, width, height }}
+                {usedScales} />
+        {:else}
+            {#each scaledData as record, i (i)}
+                {#if record.valid}
+                    {@const w =
+                        record.r !== undefined
+                            ? record.r * 2
+                            : Number(resolveProp(width, record.datum, 20) ?? 20)}
+                    {@const h =
+                        record.r !== undefined
+                            ? record.r * 2
+                            : Number(resolveProp(height || width, record.datum, 20) ?? 20)}
+                    <Anchor {options} datum={record.datum}>
+                        <image
+                            class={resolveProp(imageClass, record.datum, null)}
+                            href={resolveProp(src, record.datum, '')}
+                            x={record.x! - w * 0.5}
+                            y={record.y! - h * 0.5}
+                            {preserveAspectRatio}
+                            clip-path={record.r !== undefined ? `circle(${record.r}px)` : null}
+                            width={w}
+                            height={h}
+                            >{#if title}<title>{resolveProp(title, record.datum, '')}</title
+                                >{/if}</image>
+                    </Anchor>
+                {/if}
+            {/each}
+        {/if}
     {/snippet}
 </Mark>

package/dist/marks/Image.svelte.d.ts

@@ -154,6 +154,8 @@ declare function $$render<Datum extends DataRecord>(): {
         title?: ConstantAccessor<string, Datum>;
         /** the SVG preserveAspectRatio attribute for the image (e.g. "xMidYMid meet") */
         preserveAspectRatio?: string;
+        /** if true, renders using Canvas instead of SVG */
+        canvas?: boolean;
         /** CSS class name(s) to apply to individual image elements */
         imageClass?: ConstantAccessor<string, Datum>;
     };

package/dist/marks/Link.svelte

@@ -45,6 +45,8 @@
         textStartOffset?: ConstantAccessor<string, Datum>;
         /** the stroke width for the text label rendered along the link */
         textStrokeWidth?: ConstantAccessor<number, Datum>;
+        /** if true, renders using Canvas instead of SVG */
+        canvas?: boolean;
     }
     import type {
         DataRecord,
@@ -65,6 +67,7 @@
     import { maybeCurve } from '../helpers/curves.js';
     import { geoPath } from 'd3-geo';
     import { pick } from 'es-toolkit';
+    import LinkCanvas from './helpers/LinkCanvas.svelte';
     import { sort } from '../transforms/sort.js';
     import { indexData } from '../transforms/recordize.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
@@ -81,6 +84,7 @@
         tension = 0,
         bend,
         text,
+        canvas,
         class: className = '',
         ...options
     }: LinkMarkProps = $derived({
@@ -103,6 +107,13 @@
 
     const sphericalLine = $derived(plot.scales.projection && curve === 'auto');
 
+    const curveFactory = $derived(
+        maybeCurve(
+            curve === 'auto' ? 'linear' : curve,
+            bend === true ? 0.6 : bend === false ? 0 : (bend ?? tension ?? 0)
+        )
+    );
+
     const linePath: (d: ScaledDataRecord, reversed?: boolean) => string | null = $derived.by(() => {
         const fn: D3Line<[number, number]> = line<[number, number]>()
             .curve(
@@ -168,56 +179,63 @@
     channels={['x1', 'y1', 'x2', 'y2', 'opacity', 'stroke', 'strokeOpacity']}
     {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
-        <g class={['link', className]} data-use-x={usedScales.x ? 1 : 0}>
-            {#each scaledData as d, i (i)}
-                {#if d.valid || true}
-                    {@const [style, styleClass] = resolveStyles(
-                        plot,
-                        d,
-                        { strokeWidth: 1.6, ...args },
-                        'stroke',
-                        usedScales
-                    )}
-                    {@const [textStyle, textStyleClass] = resolveStyles(
-                        plot,
-                        d,
-                        {
-                            textAnchor: 'middle',
-                            ...pick(args, ['fontSize', 'fontWeight', 'fontStyle']),
-                            fill: options.textFill || args.stroke,
-                            stroke: options.textStroke,
-                            strokeWidth: options.textStrokeWidth
-                        },
-                        'fill',
-                        usedScales
-                    )}
+        {#if canvas}
+            <LinkCanvas data={scaledData} options={args} {usedScales} {curveFactory} />
+        {:else}
+            <g class={['link', className]} data-use-x={usedScales.x ? 1 : 0}>
+                {#each scaledData as d, i (i)}
+                    {#if d.valid || true}
+                        {@const [style, styleClass] = resolveStyles(
+                            plot,
+                            d,
+                            { strokeWidth: 1.6, ...args },
+                            'stroke',
+                            usedScales
+                        )}
+                        {@const [textStyle, textStyleClass] = resolveStyles(
+                            plot,
+                            d,
+                            {
+                                textAnchor: 'middle',
+                                ...pick(args, ['fontSize', 'fontWeight', 'fontStyle']),
+                                fill: options.textFill || args.stroke,
+                                stroke: options.textStroke,
+                                strokeWidth: options.textStrokeWidth
+                            },
+                            'fill',
+                            usedScales
+                        )}
 
-                    <MarkerPath
-                        mark={{ ...mark, options: args }}
-                        transform=""
-                        scales={plot.scales}
-                        markerStart={options.markerStart as boolean | MarkerShape | undefined}
-                        markerEnd={options.markerEnd as boolean | MarkerShape | undefined}
-                        marker={options.marker as boolean | MarkerShape | undefined}
-                        markerScale={options.markerScale}
-                        class={styleClass ?? undefined}
-                        strokeWidth={options.strokeWidth as ConstantAccessor<number>}
-                        datum={d.datum as DataRecord}
-                        color={d.stroke ?? 'currentColor'}
-                        d={(sphericalLine ? sphericalLinePath(d) : linePath(d)) ?? ''}
-                        dInv={(sphericalLine ? sphericalLinePath(d, true) : linePath(d, true)) ??
-                            undefined}
-                        style={style ?? ''}
-                        text={text ? ((resolveProp(text, d.datum as Datum) as string) ?? '') : ''}
-                        startOffset={(resolveProp(
-                            options.textStartOffset,
-                            d.datum as Datum,
-                            '50%'
-                        ) as string) ?? '50%'}
-                        textStyle={textStyle ?? ''}
-                        {textStyleClass} />
-                {/if}
-            {/each}
-        </g>
+                        <MarkerPath
+                            mark={{ ...mark, options: args }}
+                            transform=""
+                            scales={plot.scales}
+                            markerStart={options.markerStart as boolean | MarkerShape | undefined}
+                            markerEnd={options.markerEnd as boolean | MarkerShape | undefined}
+                            marker={options.marker as boolean | MarkerShape | undefined}
+                            markerScale={options.markerScale}
+                            class={styleClass ?? undefined}
+                            strokeWidth={options.strokeWidth as ConstantAccessor<number>}
+                            datum={d.datum as DataRecord}
+                            color={d.stroke ?? 'currentColor'}
+                            d={(sphericalLine ? sphericalLinePath(d) : linePath(d)) ?? ''}
+                            dInv={(sphericalLine
+                                ? sphericalLinePath(d, true)
+                                : linePath(d, true)) ?? undefined}
+                            style={style ?? ''}
+                            text={text
+                                ? ((resolveProp(text, d.datum as Datum) as string) ?? '')
+                                : ''}
+                            startOffset={(resolveProp(
+                                options.textStartOffset,
+                                d.datum as Datum,
+                                '50%'
+                            ) as string) ?? '50%'}
+                            textStyle={textStyle ?? ''}
+                            {textStyleClass} />
+                    {/if}
+                {/each}
+            </g>
+        {/if}
     {/snippet}
 </Mark>

package/dist/marks/Link.svelte.d.ts

@@ -180,6 +180,8 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
         textStartOffset?: ConstantAccessor<string, Datum>;
         /** the stroke width for the text label rendered along the link */
         textStrokeWidth?: ConstantAccessor<number, Datum>;
+        /** if true, renders using Canvas instead of SVG */
+        canvas?: boolean;
     };
     exports: {};
     bindings: "";

package/dist/marks/Raster.svelte

@@ -90,6 +90,11 @@
     } from '../helpers/rasterInterpolate.js';
     import { X, Y, RAW_VALUE } from '../transforms/recordize.js';
     import { scaleLinear } from 'd3-scale';
+    import { getPlotDefaults } from '../hooks/plotDefaults.js';
+
+    const DEFAULTS = {
+        ...getPlotDefaults().raster
+    };
 
     let markProps: RasterMarkProps = $props();
 
@@ -108,7 +113,7 @@
         interpolate,
         imageRendering = 'auto',
         ...options
-    }: RasterMarkProps = $derived({ ...markProps });
+    }: RasterMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const plot = usePlot();
 

package/dist/marks/Vector.svelte

@@ -3,10 +3,7 @@
     The vector mark lets you place shapes (like arrows) on your plot.
 -->
 <script lang="ts" module>
-    type D3Path = ReturnType<typeof import('d3-path').path>;
-    export type ShapeRenderer = {
-        draw(context: D3Path, l: number, r: number): void;
-    };
+    export type { ShapeRenderer } from '../helpers/vectorShapes.js';
 </script>
 
 <script lang="ts" generics="Datum = DataRecord | GeoJSON.GeoJsonObject">
@@ -45,25 +42,23 @@
     } from '../types/index.js';
 
     import { getContext, type Snippet } from 'svelte';
-    import { pathRound as path } from 'd3-path';
 
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { sort } from '../index.js';
     import Mark from '../Mark.svelte';
-    //import DotCanvas from './helpers/DotCanvas.svelte';
+    import VectorCanvas from './helpers/VectorCanvas.svelte';
     import { isValid } from '../helpers/index.js';
     import { addEventHandlers } from './helpers/events.js';
     import { indexData } from '../transforms/recordize.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { usePlot } from '../hooks/usePlot.svelte.js';
 
-    const defaultRadius = 3;
-
-    // The size of the arrowhead is proportional to its length, but we still allow
-    // the relative size of the head to be controlled via the mark's width option;
-    // doubling the default radius will produce an arrowhead that is twice as big.
-    // That said, we'll probably want a arrow with a fixed head size, too.
-    const wingRatio = defaultRadius * 5;
+    import {
+        defaultRadius,
+        maybeShape,
+        shapePath,
+        type ShapeRenderer
+    } from '../helpers/vectorShapes.js';
 
     let markProps: VectorMarkProps = $props();
     const DEFAULTS = {
@@ -83,72 +78,6 @@
 
     const plot = usePlot();
 
-    const shapeArrow: ShapeRenderer = {
-        draw(context: D3Path, l: number, r: number) {
-            const wing = (l * r) / wingRatio;
-            context.moveTo(0, 0);
-            context.lineTo(0, -l);
-            context.moveTo(-wing, wing - l);
-            context.lineTo(0, -l);
-            context.lineTo(wing, wing - l);
-        }
-    };
-
-    const shapeSpike: ShapeRenderer = {
-        draw(context: D3Path, l: number, r: number) {
-            context.moveTo(-r, 0);
-            context.lineTo(0, -l);
-            context.lineTo(r, 0);
-        }
-    };
-
-    const shapeArrowFilled: ShapeRenderer = {
-        draw(context: D3Path, l: number, r: number) {
-            // const wing = (l * r) / wingRatio;
-            const headLength = Math.max(3, l * 0.3);
-            const headSpike = headLength * 0.2;
-            const headWidth = Math.max(2, l * 0.3);
-            const tailWidth = Math.max(2, l * 0.3) * 0.3;
-
-            context.moveTo(0, 0);
-
-            context.lineTo(tailWidth * 0.5, -l + headLength - headSpike);
-            context.lineTo(headWidth * 0.5, -l + headLength);
-            context.lineTo(0, -l);
-            context.lineTo(-headWidth * 0.5, -l + headLength);
-            context.lineTo(-tailWidth * 0.5, -l + headLength - headSpike);
-
-            context.closePath();
-        }
-    };
-
-    const shapes = new Map([
-        ['arrow', shapeArrow],
-        ['arrow-filled', shapeArrowFilled],
-        ['spike', shapeSpike]
-    ]);
-
-    function isShapeObject(value: any): value is ShapeRenderer {
-        return value && typeof value.draw === 'function';
-    }
-
-    function maybeShape(shape: 'arrow' | 'spike' | 'arrow-filled' | ShapeRenderer) {
-        if (isShapeObject(shape)) return shape;
-        const value = shapes.get(`${shape}`.toLowerCase());
-        if (value) return value;
-        throw new Error(`invalid shape: ${shape}`);
-    }
-
-    function shapePath(
-        shape: 'arrow' | 'spike' | 'arrow-filled' | ShapeRenderer,
-        l: number,
-        r: number
-    ) {
-        const context = path();
-        maybeShape(shape).draw(context, l, r);
-        return context.toString();
-    }
-
     const args = $derived(
         sort({
             data: indexData(data as object[]) as unknown as Datum[],
@@ -177,8 +106,10 @@
     {#snippet children({ scaledData, usedScales })}
         <g class="vector" data-l={usedScales.length}>
             {#if canvas}
-                <text x="30" y="30" style="color:red"
-                    >implement canvas rendering for vector mark</text>
+                <VectorCanvas
+                    data={scaledData}
+                    options={{ ...args, shape, anchor } as any}
+                    {usedScales} />
             {:else}
                 {#each scaledData as d, i (i)}
                     {#if d.valid && isValid(d.r)}

package/dist/marks/Vector.svelte.d.ts

@@ -1,9 +1,7 @@
-type D3Path = ReturnType<typeof import('d3-path').path>;
-export type ShapeRenderer = {
-    draw(context: D3Path, l: number, r: number): void;
-};
+export type { ShapeRenderer } from '../helpers/vectorShapes.js';
 import type { DataRecord, ChannelAccessor } from '../types/index.js';
 import { type Snippet } from 'svelte';
+import { type ShapeRenderer } from '../helpers/vectorShapes.js';
 declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
     props: Partial<{
         filter: import("../types/index.js").ConstantAccessor<boolean, Datum>;