svelteplot 0.12.0 → 0.14.0

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>;

package/dist/marks/Voronoi.svelte

@@ -0,0 +1,118 @@
+<!-- @component
+    Renders individual Voronoi cells, one per data point, allowing per-cell styling.
+-->
+<script lang="ts" generics="Datum = DataRecord">
+    interface VoronoiMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
+        /** the input data array */
+        data?: Datum[];
+        /** the horizontal position channel */
+        x?: ChannelAccessor<Datum>;
+        /** the vertical position channel */
+        y?: ChannelAccessor<Datum>;
+        /** the grouping channel; separate Voronoi diagrams per group */
+        z?: ChannelAccessor<Datum>;
+        /** Render using a canvas element instead of SVG paths. */
+        canvas?: boolean;
+    }
+
+    import { Delaunay } from 'd3-delaunay';
+    import type {
+        DataRecord,
+        BaseMarkProps,
+        ChannelAccessor,
+        LinkableMarkProps,
+        MarkType,
+        ScaledDataRecord
+    } from '../types/index.js';
+    import { groupFacetsAndZ } from '../helpers/group.js';
+    import { recordizeXY } from '../transforms/recordize.js';
+    import { sort } from '../index.js';
+    import Mark from '../Mark.svelte';
+    import PathItems from './helpers/PathItems.svelte';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
+    import { getPlotDefaults } from '../hooks/plotDefaults.js';
+
+    const DEFAULTS = {
+        ...getPlotDefaults().voronoi
+    };
+
+    let markProps: VoronoiMarkProps = $props();
+
+    const {
+        data = [] as Datum[],
+        class: className = 'voronoi',
+        canvas = false,
+        ...options
+    }: VoronoiMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
+    const args = $derived(
+        sort(
+            recordizeXY({
+                data: data as any[],
+                ...options
+            })
+        )
+    );
+
+    const plot = usePlot();
+
+    function computeVoronoi(scaledData: ScaledDataRecord[]) {
+        const x0 = plot.options.marginLeft;
+        const y0 = plot.options.marginTop;
+        const x1 = x0 + plot.facetWidth;
+        const y1 = y0 + plot.facetHeight;
+        if (!(x1 > x0) || !(y1 > y0)) return [];
+
+        const scaledByDatum = new Map(scaledData.map((d) => [d.datum, d]));
+        const results: { path: string; datum: ScaledDataRecord }[] = [];
+
+        groupFacetsAndZ(
+            scaledData.map((d) => d.datum),
+            args,
+            (groupItems) => {
+                const groupScaled = groupItems
+                    .map((d) => scaledByDatum.get(d))
+                    .filter(
+                        (d): d is ScaledDataRecord =>
+                            d !== undefined &&
+                            d.valid &&
+                            Number.isFinite(d.x as number) &&
+                            Number.isFinite(d.y as number)
+                    );
+                if (groupScaled.length < 2) return;
+
+                const delaunay = Delaunay.from(
+                    groupScaled,
+                    (d) => d.x as number,
+                    (d) => d.y as number
+                );
+                const voronoi = delaunay.voronoi([x0, y0, x1, y1]);
+
+                groupScaled.forEach((d, cellIndex) => {
+                    const path = voronoi.renderCell(cellIndex);
+                    if (path) results.push({ path, datum: d });
+                });
+            },
+            false
+        );
+
+        return results;
+    }
+</script>
+
+<Mark
+    type={'voronoi' as MarkType}
+    channels={['x', 'y', 'fill', 'opacity', 'stroke', 'fillOpacity', 'strokeOpacity']}
+    defaults={{ fill: 'none', stroke: 'currentColor' }}
+    {...args}>
+    {#snippet children({ mark, usedScales, scaledData })}
+        <PathItems
+            paths={computeVoronoi(scaledData)}
+            {args}
+            {options}
+            {className}
+            {usedScales}
+            {plot}
+            {canvas} />
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,172 @@
+import type { DataRecord, ChannelAccessor, LinkableMarkProps } from '../types/index.js';
+declare function $$render<Datum = DataRecord>(): {
+    props: Partial<{
+        filter: import("../types/index.js").ConstantAccessor<boolean, Datum>;
+        facet: "auto" | "include" | "exclude";
+        fx: ChannelAccessor<Datum>;
+        fy: ChannelAccessor<Datum>;
+        dx: import("../types/index.js").ConstantAccessor<number, Datum>;
+        dy: import("../types/index.js").ConstantAccessor<number, Datum>;
+        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
+        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
+        fill: ChannelAccessor<Datum>;
+        fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
+        fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
+        fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
+        sort: ((a: import("../types/data.js").RawValue, b: import("../types/data.js").RawValue) => number) | {
+            channel: string;
+            order?: "ascending" | "descending";
+        } | import("../types/index.js").ConstantAccessor<import("../types/data.js").RawValue, Datum>;
+        stroke: ChannelAccessor<Datum>;
+        strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
+        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
+        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
+        opacity: ChannelAccessor<Datum>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
+        blend: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        clipPath: string;
+        mask: string;
+        imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
+        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        class: string;
+        style: string;
+        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: import("../types/index.js").ConstantAccessor<string, Datum>;
+    }> & LinkableMarkProps<Datum> & {
+        /** the input data array */
+        data?: Datum[];
+        /** the horizontal position channel */
+        x?: ChannelAccessor<Datum>;
+        /** the vertical position channel */
+        y?: ChannelAccessor<Datum>;
+        /** the grouping channel; separate Voronoi diagrams per group */
+        z?: ChannelAccessor<Datum>;
+        /** Render using a canvas element instead of SVG paths. */
+        canvas?: boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum = DataRecord> {
+    props(): ReturnType<typeof $$render<Datum>>['props'];
+    events(): ReturnType<typeof $$render<Datum>>['events'];
+    slots(): ReturnType<typeof $$render<Datum>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum = DataRecord>(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 = DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Renders individual Voronoi cells, one per data point, allowing per-cell styling. */
+declare const Voronoi: $$IsomorphicComponent;
+type Voronoi<Datum = DataRecord> = InstanceType<typeof Voronoi<Datum>>;
+export default Voronoi;

package/dist/marks/VoronoiMesh.svelte

@@ -0,0 +1,109 @@
+<!-- @component
+    Renders the full Voronoi diagram as a single SVG path.
+-->
+<script lang="ts" generics="Datum = DataRecord">
+    interface VoronoiMeshMarkProps extends BaseMarkProps<Datum> {
+        /** the input data array */
+        data?: Datum[];
+        /** the horizontal position channel */
+        x?: ChannelAccessor<Datum>;
+        /** the vertical position channel */
+        y?: ChannelAccessor<Datum>;
+        /** the grouping channel; separate diagrams per group */
+        z?: ChannelAccessor<Datum>;
+        /** Render using a canvas element instead of SVG paths. */
+        canvas?: boolean;
+    }
+
+    import { Delaunay } from 'd3-delaunay';
+    import type {
+        DataRecord,
+        BaseMarkProps,
+        ChannelAccessor,
+        MarkType,
+        ScaledDataRecord
+    } from '../types/index.js';
+    import { groupFacetsAndZ } from '../helpers/group.js';
+    import { recordizeXY } from '../transforms/recordize.js';
+    import Mark from '../Mark.svelte';
+    import PathGroup from './helpers/PathGroup.svelte';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
+    import { getPlotDefaults } from '../hooks/plotDefaults.js';
+
+    const DEFAULTS = {
+        ...getPlotDefaults().voronoiMesh
+    };
+
+    let markProps: VoronoiMeshMarkProps = $props();
+
+    const {
+        data = [] as Datum[],
+        class: className = 'voronoi-mesh',
+        canvas = false,
+        ...options
+    }: VoronoiMeshMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
+    const args = $derived(
+        recordizeXY({
+            data: data as any[],
+            ...options
+        })
+    );
+
+    const plot = usePlot();
+
+    function computeMeshPaths(scaledData: ScaledDataRecord[]) {
+        const x0 = plot.options.marginLeft;
+        const y0 = plot.options.marginTop;
+        const x1 = x0 + plot.facetWidth;
+        const y1 = y0 + plot.facetHeight;
+        if (!(x1 > x0) || !(y1 > y0)) return [];
+
+        const scaledByDatum = new Map(scaledData.map((d) => [d.datum, d]));
+        const meshes: { path: string; datum: ScaledDataRecord }[] = [];
+
+        groupFacetsAndZ(
+            scaledData.map((d) => d.datum),
+            args,
+            (groupItems) => {
+                const groupScaled = groupItems
+                    .map((d) => scaledByDatum.get(d))
+                    .filter(
+                        (d): d is ScaledDataRecord =>
+                            d !== undefined &&
+                            d.valid &&
+                            Number.isFinite(d.x as number) &&
+                            Number.isFinite(d.y as number)
+                    );
+                if (groupScaled.length < 2) return;
+                const delaunay = Delaunay.from(
+                    groupScaled,
+                    (d) => d.x as number,
+                    (d) => d.y as number
+                );
+                const voronoi = delaunay.voronoi([x0, y0, x1, y1]);
+                const path = voronoi.render();
+                if (path) meshes.push({ path, datum: groupScaled[0] });
+            },
+            false
+        );
+
+        return meshes;
+    }
+</script>
+
+<Mark
+    type={'voronoiMesh' as MarkType}
+    channels={['x', 'y', 'fill', 'stroke', 'strokeOpacity', 'fillOpacity', 'opacity']}
+    defaults={{ fill: 'none', stroke: 'currentColor' }}
+    {...args}>
+    {#snippet children({ scaledData, usedScales })}
+        <PathGroup
+            paths={computeMeshPaths(scaledData)}
+            {args}
+            {className}
+            {usedScales}
+            {plot}
+            {canvas} />
+    {/snippet}
+</Mark>