svelteplot 0.12.0 → 0.13.0

package/dist/marks/helpers/ArrowCanvas.svelte

@@ -0,0 +1,132 @@
+<!--
+@component
+Helper component for rendering Arrow marks in canvas
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    interface ArrowCanvasProps {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum> & {
+            headAngle?: ConstantAccessor<number, Datum>;
+            headLength?: ConstantAccessor<number, Datum>;
+            bend?: ConstantAccessor<number, Datum> | true;
+            inset?: ConstantAccessor<number, Datum>;
+            insetStart?: ConstantAccessor<number, Datum>;
+            insetEnd?: ConstantAccessor<number, Datum>;
+            sweep?: SweepOption;
+        };
+        usedScales: UsedScales;
+    }
+
+    import type {
+        BaseMarkProps,
+        ConstantAccessor,
+        DataRecord,
+        ScaledDataRecord,
+        UsedScales
+    } from '../../types/index.js';
+    import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
+    import { coalesce, maybeNumber } from '../../helpers/index.js';
+    import {
+        arrowPath,
+        maybeSweep,
+        type SweepFunc,
+        type SweepOption
+    } from '../../helpers/arrowPath.js';
+    import type { Attachment } from 'svelte/attachments';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { resolveColor } from './canvas.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+
+    const plot = usePlot();
+
+    let { data, options, usedScales }: ArrowCanvasProps = $props();
+
+    const render: Attachment = (canvasEl: Element) => {
+        const canvas = canvasEl as HTMLCanvasElement;
+        const context = canvas.getContext('2d');
+
+        $effect(() => {
+            if (context) {
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+                const sweep = maybeSweep(options.sweep) as SweepFunc;
+
+                for (const d of data) {
+                    if (!d.valid) continue;
+
+                    const datum = d.datum as unknown as Datum;
+
+                    const styleProps = resolveScaledStyleProps(
+                        d.datum,
+                        options,
+                        usedScales,
+                        plot,
+                        'stroke'
+                    ) as Record<string, unknown>;
+
+                    const opacity = +(styleProps['opacity'] ?? 1);
+                    const strokeOpacity = +(styleProps['stroke-opacity'] ?? 1);
+                    const stroke = resolveColor(
+                        String(styleProps.stroke || 'currentColor'),
+                        canvas
+                    );
+
+                    if (!stroke || stroke === 'none') continue;
+
+                    const strokeWidth = (resolveProp(options.strokeWidth, datum, 1) ?? 1) as number;
+                    const inset = resolveProp(options.inset, datum, 0);
+                    const insetStart = resolveProp(options.insetStart, datum);
+                    const insetEnd = resolveProp(options.insetEnd, datum);
+                    const headAngle = (resolveProp(options.headAngle, datum, 60) ?? 60) as number;
+                    const headLength = (resolveProp(options.headLength, datum, 8) ?? 8) as number;
+                    const bendVal =
+                        options.bend === true
+                            ? 22.5
+                            : ((resolveProp(
+                                  options.bend as ConstantAccessor<number, Datum>,
+                                  datum,
+                                  0
+                              ) ?? 0) as number);
+
+                    const pathStr = arrowPath(
+                        d.x1 ?? 0,
+                        d.y1 ?? 0,
+                        d.x2 ?? 0,
+                        d.y2 ?? 0,
+                        maybeNumber(coalesce(insetStart, inset)) ?? 0,
+                        maybeNumber(coalesce(insetEnd, inset)) ?? 0,
+                        headAngle,
+                        headLength,
+                        bendVal,
+                        strokeWidth,
+                        sweep
+                    );
+
+                    if (!pathStr) continue;
+
+                    const path = new Path2D(pathStr);
+
+                    context.lineWidth = strokeWidth;
+                    context.lineCap = 'round';
+                    context.lineJoin = 'round';
+                    context.strokeStyle = stroke;
+                    context.globalAlpha = opacity * strokeOpacity;
+                    context.stroke(path);
+                }
+            }
+
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+<CanvasLayer {@attach render} />

package/dist/marks/helpers/ArrowCanvas.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { BaseMarkProps, ConstantAccessor, DataRecord, ScaledDataRecord, UsedScales } from '../../types/index.js';
+import { type SweepOption } from '../../helpers/arrowPath.js';
+declare function $$render<Datum extends DataRecord>(): {
+    props: {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum> & {
+            headAngle?: ConstantAccessor<number, Datum>;
+            headLength?: ConstantAccessor<number, Datum>;
+            bend?: ConstantAccessor<number, Datum> | true;
+            inset?: ConstantAccessor<number, Datum>;
+            insetStart?: ConstantAccessor<number, Datum>;
+            insetEnd?: ConstantAccessor<number, Datum>;
+            sweep?: SweepOption;
+        };
+        usedScales: UsedScales;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum extends 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 extends 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 extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Helper component for rendering Arrow marks in canvas */
+declare const ArrowCanvas: $$IsomorphicComponent;
+type ArrowCanvas<Datum extends DataRecord> = InstanceType<typeof ArrowCanvas<Datum>>;
+export default ArrowCanvas;

package/dist/marks/helpers/BaseAxisX.svelte

@@ -206,6 +206,8 @@
                     {@const moveDown =
                         (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize_ * 0.35 : 0)) *
                         (anchor === 'bottom' ? 1 : -1)}
+                    {@const tickBaseline =
+                        tickRotate !== 0 ? 'central' : anchor === 'bottom' ? 'hanging' : 'auto'}
                     {@const [textStyle, textClass] = resolveStyles(
                         plot,
                         toScaledDatum(tick),
@@ -230,22 +232,18 @@
                     )}
                     <text
                         bind:this={tickTextElements[t]}
-                        transform="translate(0, {moveDown})  rotate({tickRotate})"
+                        transform="translate(0, {moveDown}) rotate({tickRotate})"
                         style={textStyle}
                         class={textClass}
                         x={0}
                         y={0}
-                        dominant-baseline={tickRotate !== 0
-                            ? 'central'
-                            : anchor === 'bottom'
-                              ? 'hanging'
-                              : 'auto'}>
+                        dominant-baseline={tickBaseline}>
                         {#if ticks.length > 0 || t === 0 || t === ticks.length - 1}
                             {#if textLines.length === 1}
                                 {textLines[0]}
                             {:else}
                                 {#each textLines as line, i (i)}
-                                    <tspan x="0" dy={i ? 12 : 0}
+                                    <tspan x="0" dy={i ? 12 : 0} dominant-baseline={tickBaseline}
                                         >{!prevTextLines ||
                                         prevTextLines[i] !== line ||
                                         options.removeDuplicateTicks === false

package/dist/marks/helpers/ImageCanvas.svelte

@@ -0,0 +1,126 @@
+<!--
+@component
+Helper component for rendering Image marks in canvas
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    interface ImageCanvasProps {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum> & {
+            src?: ConstantAccessor<string, Datum>;
+            width?: ConstantAccessor<number, Datum>;
+            height?: ConstantAccessor<number, Datum>;
+        };
+        usedScales: UsedScales;
+    }
+
+    import type {
+        BaseMarkProps,
+        ConstantAccessor,
+        DataRecord,
+        ScaledDataRecord,
+        UsedScales
+    } from '../../types/index.js';
+    import { resolveProp } from '../../helpers/resolve.js';
+    import type { Attachment } from 'svelte/attachments';
+    import { SvelteMap } from 'svelte/reactivity';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+
+    const plot = usePlot();
+
+    let { data, options, usedScales }: ImageCanvasProps = $props();
+
+    // Cache loaded images by URL to avoid redundant fetches
+    const imageCache = new SvelteMap<string, HTMLImageElement>();
+
+    // Reactive counter: incremented when an image finishes loading,
+    // which triggers the $effect to re-run and repaint the canvas.
+    let loadedCount = $state(0);
+
+    function getImage(url: string): HTMLImageElement | undefined {
+        if (imageCache.has(url)) {
+            const img = imageCache.get(url)!;
+            return img.complete && img.naturalWidth > 0 ? img : undefined;
+        }
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        imageCache.set(url, img);
+        img.onload = () => {
+            loadedCount++;
+        };
+        img.onerror = () => {
+            // Remove failed entries so they can be retried
+            imageCache.delete(url);
+        };
+        img.src = url;
+        return img.complete && img.naturalWidth > 0 ? img : undefined;
+    }
+
+    const render: Attachment = (canvasEl: Element) => {
+        const canvas = canvasEl as HTMLCanvasElement;
+        const context = canvas.getContext('2d');
+
+        $effect(() => {
+            // Reference loadedCount so this effect re-runs when images load
+            void loadedCount;
+
+            if (context) {
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+                for (const d of data) {
+                    if (!d.valid) continue;
+
+                    const datum = d.datum as unknown as Datum;
+
+                    const srcUrl = resolveProp(options.src, datum, '') as string;
+                    if (!srcUrl) continue;
+
+                    const img = getImage(srcUrl);
+                    if (!img) continue;
+
+                    const w =
+                        d.r !== undefined
+                            ? (d.r as number) * 2
+                            : (Number(resolveProp(options.width, datum, 20) ?? 20) as number);
+                    const h =
+                        d.r !== undefined
+                            ? (d.r as number) * 2
+                            : (Number(
+                                  resolveProp(options.height || options.width, datum, 20) ?? 20
+                              ) as number);
+
+                    const x = (d.x ?? 0) - w * 0.5;
+                    const y = (d.y ?? 0) - h * 0.5;
+
+                    if (d.r !== undefined) {
+                        // Circular clipping
+                        const cx = d.x as number;
+                        const cy = d.y as number;
+                        const r = d.r as number;
+                        context.save();
+                        context.beginPath();
+                        context.arc(cx, cy, r, 0, Math.PI * 2);
+                        context.clip();
+                        context.drawImage(img, x, y, w, h);
+                        context.restore();
+                    } else {
+                        context.drawImage(img, x, y, w, h);
+                    }
+                }
+            }
+
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+<CanvasLayer {@attach render} />

package/dist/marks/helpers/ImageCanvas.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { BaseMarkProps, ConstantAccessor, DataRecord, ScaledDataRecord, UsedScales } from '../../types/index.js';
+declare function $$render<Datum extends DataRecord>(): {
+    props: {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum> & {
+            src?: ConstantAccessor<string, Datum>;
+            width?: ConstantAccessor<number, Datum>;
+            height?: ConstantAccessor<number, Datum>;
+        };
+        usedScales: UsedScales;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum extends 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 extends 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 extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Helper component for rendering Image marks in canvas */
+declare const ImageCanvas: $$IsomorphicComponent;
+type ImageCanvas<Datum extends DataRecord> = InstanceType<typeof ImageCanvas<Datum>>;
+export default ImageCanvas;

package/dist/marks/helpers/LinkCanvas.svelte

@@ -0,0 +1,103 @@
+<!--
+@component
+Helper component for rendering Link marks in canvas
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    interface LinkCanvasProps {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum>;
+        usedScales: UsedScales;
+        curveFactory: CurveFactory | CurveBundleFactory;
+    }
+
+    import type {
+        BaseMarkProps,
+        DataRecord,
+        ScaledDataRecord,
+        UsedScales
+    } from '../../types/index.js';
+    import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
+    import {
+        line,
+        type CurveFactory,
+        type CurveBundleFactory,
+        type Line as D3Line
+    } from 'd3-shape';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import type { Attachment } from 'svelte/attachments';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import { resolveColor } from './canvas.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+
+    const plot = usePlot();
+
+    let { data, options, usedScales, curveFactory }: LinkCanvasProps = $props();
+
+    const render: Attachment = (canvasEl: Element) => {
+        const canvas = canvasEl as HTMLCanvasElement;
+        const context = canvas.getContext('2d');
+
+        $effect(() => {
+            if (context) {
+                const fn: D3Line<[number, number]> = line<[number, number]>()
+                    .curve(curveFactory as CurveFactory)
+                    .x((d) => d[0])
+                    .y((d) => d[1])
+                    .context(context);
+
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+                context.lineJoin = 'round';
+                context.lineCap = 'round';
+
+                for (const d of data) {
+                    if (!d.valid) continue;
+
+                    const styleProps = resolveScaledStyleProps(
+                        d.datum,
+                        options,
+                        usedScales,
+                        plot,
+                        'stroke'
+                    ) as Record<string, unknown>;
+
+                    const opacity = +(styleProps['opacity'] ?? 1);
+                    const strokeOpacity = +(styleProps['stroke-opacity'] ?? 1);
+                    const stroke = resolveColor(
+                        String(styleProps.stroke || 'currentColor'),
+                        canvas
+                    );
+
+                    if (!stroke || stroke === 'none') continue;
+
+                    const strokeWidth = (resolveProp(options.strokeWidth, d.datum, 1.6) ??
+                        1.6) as number;
+
+                    context.lineWidth = strokeWidth;
+                    context.strokeStyle = stroke;
+                    context.globalAlpha = opacity * strokeOpacity;
+
+                    context.beginPath();
+                    fn([
+                        [d.x1 as number, d.y1 as number],
+                        [d.x2 as number, d.y2 as number]
+                    ]);
+                    context.stroke();
+                }
+
+                fn.context(null);
+            }
+
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+<CanvasLayer {@attach render} />

package/dist/marks/helpers/LinkCanvas.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { BaseMarkProps, DataRecord, ScaledDataRecord, UsedScales } from '../../types/index.js';
+import { type CurveFactory, type CurveBundleFactory } from 'd3-shape';
+declare function $$render<Datum extends DataRecord>(): {
+    props: {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum>;
+        usedScales: UsedScales;
+        curveFactory: CurveFactory | CurveBundleFactory;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum extends 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 extends 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 extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Helper component for rendering Link marks in canvas */
+declare const LinkCanvas: $$IsomorphicComponent;
+type LinkCanvas<Datum extends DataRecord> = InstanceType<typeof LinkCanvas<Datum>>;
+export default LinkCanvas;

package/dist/marks/helpers/VectorCanvas.svelte

@@ -0,0 +1,127 @@
+<!--
+@component
+Helper component for rendering Vector marks in canvas
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    interface VectorCanvasProps {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum> & {
+            rotate?: ChannelAccessor<Datum>;
+            r?: number;
+            anchor?: 'start' | 'middle' | 'end';
+            shape?: 'arrow' | 'spike' | 'arrow-filled' | ShapeRenderer;
+        };
+        usedScales: UsedScales;
+    }
+
+    import type {
+        BaseMarkProps,
+        ChannelAccessor,
+        DataRecord,
+        ScaledDataRecord,
+        UsedScales
+    } from '../../types/index.js';
+    import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
+    import { defaultRadius, shapePath, type ShapeRenderer } from '../../helpers/vectorShapes.js';
+    import type { Attachment } from 'svelte/attachments';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { resolveColor } from './canvas.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+
+    const plot = usePlot();
+
+    let { data, options, usedScales }: VectorCanvasProps = $props();
+
+    const render: Attachment = (canvasEl: Element) => {
+        const canvas = canvasEl as HTMLCanvasElement;
+        const context = canvas.getContext('2d');
+
+        $effect(() => {
+            if (context) {
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+                const shape = options.shape ?? 'arrow';
+                const anchor = options.anchor ?? 'middle';
+                const defaultColorProp = shape === 'arrow-filled' ? 'fill' : 'stroke';
+
+                for (const d of data) {
+                    if (!d.valid) continue;
+
+                    const datum = d.datum as unknown as Datum;
+                    const length = d.length as number;
+                    const r = (d.r as number) ?? defaultRadius;
+
+                    if (length == null || r == null) continue;
+
+                    const styleProps = resolveScaledStyleProps(
+                        d.datum,
+                        options,
+                        usedScales,
+                        plot,
+                        defaultColorProp
+                    ) as Record<string, unknown>;
+
+                    const opacity = +(styleProps['opacity'] ?? 1);
+                    const fillOpacity = +(styleProps['fill-opacity'] ?? 1);
+                    const strokeOpacity = +(styleProps['stroke-opacity'] ?? 1);
+                    const fill = resolveColor(String(styleProps.fill || 'none'), canvas);
+                    const stroke = resolveColor(String(styleProps.stroke || 'none'), canvas);
+
+                    const hasFill = fill && fill !== 'none';
+                    const hasStroke = stroke && stroke !== 'none';
+
+                    if (!hasFill && !hasStroke) continue;
+
+                    const rotateDeg = (resolveProp(options.rotate, datum, 0) ?? 0) as number;
+                    const rotateRad = (rotateDeg * Math.PI) / 180;
+
+                    const anchorOffset =
+                        anchor === 'start' ? 0 : anchor === 'end' ? length : length / 2;
+
+                    const pathStr = shapePath(shape, length, r);
+                    if (!pathStr) continue;
+                    const path2d = new Path2D(pathStr);
+
+                    const strokeWidth = (resolveProp(options.strokeWidth, datum, 1.5) ??
+                        1.5) as number;
+
+                    context.save();
+                    context.translate(d.x as number, d.y as number);
+                    context.rotate(rotateRad);
+                    context.translate(0, anchorOffset);
+
+                    context.lineWidth = strokeWidth;
+                    context.lineCap = 'round';
+                    context.lineJoin = 'round';
+
+                    if (hasFill) {
+                        context.fillStyle = fill as string;
+                        context.globalAlpha = opacity * fillOpacity;
+                        context.fill(path2d);
+                    }
+
+                    if (hasStroke) {
+                        context.strokeStyle = stroke as string;
+                        context.globalAlpha = opacity * strokeOpacity;
+                        context.stroke(path2d);
+                    }
+
+                    context.restore();
+                }
+            }
+
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+<CanvasLayer {@attach render} />

package/dist/marks/helpers/VectorCanvas.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { BaseMarkProps, ChannelAccessor, DataRecord, ScaledDataRecord, UsedScales } from '../../types/index.js';
+import { type ShapeRenderer } from '../../helpers/vectorShapes.js';
+declare function $$render<Datum extends DataRecord>(): {
+    props: {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum> & {
+            rotate?: ChannelAccessor<Datum>;
+            r?: number;
+            anchor?: "start" | "middle" | "end";
+            shape?: "arrow" | "spike" | "arrow-filled" | ShapeRenderer;
+        };
+        usedScales: UsedScales;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum extends 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 extends 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 extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Helper component for rendering Vector marks in canvas */
+declare const VectorCanvas: $$IsomorphicComponent;
+type VectorCanvas<Datum extends DataRecord> = InstanceType<typeof VectorCanvas<Datum>>;
+export default VectorCanvas;

package/dist/marks/index.d.ts

@@ -14,6 +14,7 @@ export { default as Brush } from './Brush.svelte';
 export { default as BrushX } from './BrushX.svelte';
 export { default as BrushY } from './BrushY.svelte';
 export { default as Cell } from './Cell.svelte';
+export { default as Contour } from './Contour.svelte';
 export { default as CellX } from './CellX.svelte';
 export { default as CellY } from './CellY.svelte';
 export { default as CustomMark } from './CustomMark.svelte';