svelteplot 0.8.1 → 0.9.0

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

@@ -0,0 +1,118 @@
+import type { ChannelAccessor, DataRecord, RawValue } from '../../types';
+declare function $$render<Datum extends DataRecord>(): {
+    props: Pick<Partial<{
+        filter: import("../../types").ConstantAccessor<boolean, Datum>;
+        facet: "auto" | "include" | "exclude";
+        fx: ChannelAccessor<Datum>;
+        fy: ChannelAccessor<Datum>;
+        dx: import("../../types").ConstantAccessor<number, Datum>;
+        dy: import("../../types").ConstantAccessor<number, Datum>;
+        dodgeX: import("../../transforms/dodge").DodgeXOptions;
+        dodgeY: import("../../transforms/dodge").DodgeYOptions;
+        fill: ChannelAccessor<Datum>;
+        fillOpacity: import("../../types").ConstantAccessor<number, Datum>;
+        sort: ((a: RawValue, b: RawValue) => number) | {
+            channel: string;
+            order?: "ascending" | "descending";
+        } | import("../../types").ConstantAccessor<RawValue, Datum>;
+        stroke: ChannelAccessor<Datum>;
+        strokeWidth: import("../../types").ConstantAccessor<number, Datum>;
+        strokeOpacity: import("../../types").ConstantAccessor<number, Datum>;
+        strokeLinejoin: import("../../types").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+        strokeLinecap: import("../../types").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: import("../../types").ConstantAccessor<number, Datum>;
+        opacity: ChannelAccessor<Datum>;
+        strokeDasharray: import("../../types").ConstantAccessor<string, Datum>;
+        strokeDashoffset: import("../../types").ConstantAccessor<number, Datum>;
+        mixBlendMode: import("../../types").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        clipPath: string;
+        mask: string;
+        imageFilter: import("../../types").ConstantAccessor<string, Datum>;
+        shapeRendering: import("../../types").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        paintOrder: import("../../types").ConstantAccessor<string, Datum>;
+        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        class: string;
+        style: string;
+        cursor: import("../../types").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+    }>, "fx" | "fy" | "fill" | "stroke" | "class"> & {
+        data: Datum[];
+        x: ChannelAccessor;
+        y: ChannelAccessor;
+        /**
+         * Custom sort order for grouped box plot data
+         */
+        sort?: "min" | "max" | "median" | "p25" | "p75" | ((d: Datum) => RawValue);
+        /**
+         * Options for the rule marks that represent the min/max range
+         */
+        rule: Record<string, ChannelAccessor<Datum>>;
+        /**
+         * Options for the bar marks that represent the IQR range
+         */
+        bar: Record<string, ChannelAccessor<Datum>>;
+        /**
+         * Options for the tick marks that represent the median
+         */
+        tickMedian: Record<string, ChannelAccessor<Datum>> | boolean;
+        /**
+         * Options for the tick marks that represent the min/max range
+         */
+        tickMinMax: Record<string, ChannelAccessor<Datum>> | boolean;
+        /**
+         * Options for the dot marks that represent the outliers
+         */
+        dot: Record<string, ChannelAccessor<Datum>>;
+        orientation: "x" | "y";
+    };
+    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']>;
+}
+/** Internal shared box plot implementation for BoxX and BoxY */
+declare const Box: $$IsomorphicComponent;
+type Box<Datum extends DataRecord> = InstanceType<typeof Box<Datum>>;
+export default Box;

package/dist/marks/helpers/CanvasLayer.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-    import { getContext } from 'svelte';
-    import type { PlotContext } from '../../types/plot';
     import { devicePixelRatio } from 'svelte/reactivity/window';
     import { MediaQuery } from 'svelte/reactivity';
     import type { Attachment } from 'svelte/attachments';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     const darkMode = new MediaQuery('prefers-color-scheme: dark');
     let colorScheme = $state();
@@ -26,8 +25,7 @@
 
     let restProps: {} = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 </script>
 
 <!-- 

package/dist/marks/helpers/DotCanvas.svelte

@@ -3,20 +3,18 @@
         PlotState,
         Mark,
         BaseMarkProps,
-        ScaledDataRecord,
-        PlotContext
+        ScaledDataRecord
     } from '../../types/index.js';
     import { resolveProp } from '../../helpers/resolve.js';
     import { maybeSymbol } from '../../helpers/symbols.js';
     import { symbol as d3Symbol } from 'd3-shape';
     import type { Attachment } from 'svelte/attachments';
     import CanvasLayer from './CanvasLayer.svelte';
-    import { getContext } from 'svelte';
     import { devicePixelRatio } from 'svelte/reactivity/window';
     import { resolveColor } from './canvas.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     let {
         mark,

package/dist/marks/helpers/GeoCanvas.svelte

@@ -2,18 +2,17 @@
     import type {
         Mark,
         BaseMarkProps,
-        PlotContext,
         ScaledDataRecord,
         UsedScales
     } from '../../types/index.js';
     import { CSS_VAR } from '../../constants.js';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
-    import { getContext } from 'svelte';
     import { type GeoPath } from 'd3-geo';
     import CanvasLayer from './CanvasLayer.svelte';
     import type { Attachment } from 'svelte/attachments';
     import { devicePixelRatio } from 'svelte/reactivity/window';
     import { GEOJSON_PREFER_STROKE } from '../../helpers/index.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     let {
         mark,
@@ -27,8 +26,7 @@
         usedScales: UsedScales;
     } = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     function maybeOpacity(value) {
         return value == null ? 1 : +value;

package/dist/marks/helpers/LineCanvas.svelte

@@ -2,17 +2,16 @@
     import type {
         Mark,
         BaseMarkProps,
-        PlotContext,
         ScaledDataRecord,
         UsedScales
     } from '../../types/index.js';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
-    import { getContext } from 'svelte';
     import { type Line } 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';
 
     let {
         mark,
@@ -27,8 +26,7 @@
         groupByKey?: unknown;
     } = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     function maybeOpacity(value: unknown) {
         return value == null ? 1 : +value;

package/dist/marks/helpers/LinearGradientX.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { getContext } from 'svelte';
-    import type { PlotContext, RawValue } from '../../index.js';
+    import type { RawValue } from '../../index.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     let {
         id,
@@ -10,8 +10,7 @@
         stops: { x: RawValue; color: string }[];
     } = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const projectedStops = $derived(
         stops

package/dist/marks/helpers/LinearGradientY.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { getContext } from 'svelte';
-    import type { PlotContext, RawValue } from '../../index.js';
+    import type { RawValue } from '../../index.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     let {
         id,
@@ -10,8 +10,7 @@
         stops: { y: RawValue; color: string }[];
     } = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const projectedStops = $derived(
         stops

package/dist/marks/helpers/MarkerPath.svelte

@@ -11,11 +11,10 @@
         ConstantAccessor,
         DataRecord,
         Mark,
-        PlotContext,
         PlotScales
     } from '../../types/index.js';
     import { addEventHandlers } from './events.js';
-    import { getContext } from 'svelte';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     type MarkerPathProps = BaseMarkProps<Datum> & {
         /**
@@ -78,7 +77,7 @@
 
     const id = randomId();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = usePlot();
 
     const points = $derived(text && d != null ? d.split(/[LMC]/).slice(1) : []);
     const hasPath = $derived(points.length > 0);
@@ -96,7 +95,7 @@
     class={className}
     stroke-width={strokeWidth_}
     {@attach addEventHandlers({
-        getPlotState,
+        plot,
         options: mark.options,
         datum: datum
     })}>
@@ -127,7 +126,7 @@
         {d}
         {style}
         {@attach addEventHandlers({
-            getPlotState,
+            plot,
             options: mark.options,
             datum: datum
         })} />

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: ConstantAccessor<number, Datum>;
         mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: ConstantAccessor<string, Datum>;
         shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: ConstantAccessor<string, Datum>;

package/dist/marks/helpers/MultilineText.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
     import { resolveProp, resolveStyles } from '../../helpers/resolve';
-    import { getContext, type ComponentProps } from 'svelte';
-    import type { PlotContext, ScaledDataRecord, UsedScales } from '../../index.js';
+    import { type ComponentProps } from 'svelte';
+    import type { ScaledDataRecord, UsedScales } from '../../index.js';
     import type Text from '../Text.svelte';
     import { CSS_VAR } from '../../constants';
     import { maybeFromPixel, maybeFromRem } from '../../helpers/getBaseStyles';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     const LINE_ANCHOR = {
         bottom: 'auto',
@@ -12,8 +13,7 @@
         top: 'hanging'
     } as const;
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     let {
         textLines,

package/dist/marks/helpers/RectPath.svelte

@@ -29,11 +29,11 @@ Helper component for rendering rectangular marks in SVG
     import { resolveProp, resolveStyles } from '../../helpers/resolve';
     import { roundedRect } from '../../helpers/roundedRect';
     import { addEventHandlers } from './events.js';
-    import { getContext } from 'svelte';
     import Anchor from './Anchor.svelte';
     import type { BaseMarkProps, BaseRectMarkProps, BorderRadius } from '../../types/mark.js';
     import type { DataRecord, ScaledDataRecord } from '../../types/data.js';
-    import type { PlotContext, UsedScales } from '../../types/index.js';
+    import type { UsedScales } from '../../types/index.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     let {
         datum,
@@ -49,8 +49,7 @@ Helper component for rendering rectangular marks in SVG
         fallbackStyle
     }: RectPathProps = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const inset = $derived(+(resolveProp(options.inset, datum?.datum, 0) as number));
     const insetLeft = $derived(
@@ -119,7 +118,7 @@ Helper component for rendering rectangular marks in SVG
             class={[styleClass, className]}
             {style}
             {@attach addEventHandlers({
-                getPlotState,
+                plot,
                 options,
                 datum: datum?.datum
             })} />
@@ -131,7 +130,7 @@ Helper component for rendering rectangular marks in SVG
             class={[styleClass, className]}
             {style}
             {@attach addEventHandlers({
-                getPlotState,
+                plot,
                 options,
                 datum: datum?.datum
             })} />

package/dist/marks/helpers/Regression.svelte

@@ -1,10 +1,5 @@
 <script module lang="ts">
-    import type {
-        BaseMarkProps,
-        ChannelAccessor,
-        FacetContext,
-        PlotContext
-    } from '../../types/index.js';
+    import type { BaseMarkProps, ChannelAccessor, FacetContext } from '../../types/index.js';
 
     type RegressionType = 'linear' | 'quad' | 'poly' | 'exp' | 'log' | 'pow' | 'loess';
 
@@ -65,8 +60,9 @@
         throw new Error('unknown regression ' + name);
     }
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+
+    const plot = usePlot();
 
     let {
         data,

package/dist/marks/helpers/TrailCanvas.svelte

@@ -0,0 +1,138 @@
+<script lang="ts" generics="Datum extends DataRecord">
+    import type {
+        Mark,
+        BaseMarkProps,
+        ScaledDataRecord,
+        UsedScales,
+        CurveName,
+        ConstantAccessor
+    } from '../../types/index.js';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import type { Attachment } from 'svelte/attachments';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import { resolveColor } from './canvas.js';
+    import type { CurveFactory } from 'd3-shape';
+    import { trailPath, type TrailSample } from './trail';
+    import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+
+    interface TrailCanvasProps<Datum> {
+        curve?: CurveName | CurveFactory;
+        tension?: number;
+        cap?: 'butt' | 'round';
+        resolution?: number | 'auto';
+        data: ScaledDataRecord<Datum>[][];
+        usedScales: UsedScales;
+        options: {
+            fill?: ConstantAccessor<string, Datum>;
+            defined?: ConstantAccessor<boolean, Datum>;
+            opacity?: ConstantAccessor<number, Datum>;
+            'fill-opacity'?: ConstantAccessor<number, Datum>;
+        };
+    }
+
+    let {
+        curve,
+        cap,
+        tension,
+        resolution,
+        usedScales,
+        data: groupedTrailData,
+        options
+    }: TrailCanvasProps<Datum> = $props();
+
+    function maybeOpacity(value: unknown) {
+        return value == null ? 1 : +value;
+    }
+
+    const plot = usePlot();
+
+    const render = ((canvas: HTMLCanvasElement) => {
+        const context = canvas.getContext('2d');
+
+        $effect(() => {
+            if (context) {
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+                for (const trailData of groupedTrailData) {
+                    if (trailData.length < 2) continue;
+
+                    // Get the first point to determine line styles
+                    const firstPoint = trailData[0];
+                    if (!firstPoint || !firstPoint.valid) continue;
+
+                    const samples = trailData.map((d) => ({
+                        x: Number(d.x),
+                        y: Number(d.y),
+                        r: Number(d.r ?? 0)
+                    })) satisfies TrailSample[];
+
+                    const defined = trailData.map(
+                        (d) =>
+                            d.valid &&
+                            d.r >= 0 &&
+                            (resolveProp(options.defined, d.datum, true) ?? true)
+                    );
+
+                    let { fill, ...restStyles } = resolveScaledStyleProps(
+                        firstPoint.datum,
+                        options,
+                        usedScales,
+                        plot,
+                        'fill'
+                    );
+
+                    const opacity = maybeOpacity(restStyles['opacity']);
+                    const fillOpacity = maybeOpacity(restStyles['fill-opacity']);
+
+                    fill = resolveColor(fill, canvas);
+
+                    context.fillStyle = fill ? fill : 'currentColor';
+                    context.beginPath();
+
+                    trailPath(samples, defined, context, {
+                        curve,
+                        cap,
+                        tension,
+                        ...(typeof resolution === 'number' ? { samplesPerSegment: resolution } : {})
+                    });
+
+                    context.globalAlpha = opacity * fillOpacity;
+                    context.fill();
+
+                    // {#each groupedTrailData as trailData, i (i)}
+                    //         {@const samples = trailData.map((d) => ({
+                    //             x: Number(d.x),
+                    //             y: Number(d.y),
+                    //             r: Number(d.r ?? 0)
+                    //         })) satisfies TrailSample[]}
+                    //         {@const defined = trailData.map(
+                    //             (d) =>
+                    //                 d.valid &&
+                    //                 d.r >= 0 &&
+                    //                 (resolveProp(options.defined, d.datum, true) ?? true)
+                    //         )}
+                    //         {@const pathString = trailPath(samples, defined, d3Path(), {
+                    //             curve,
+                    //             cap,
+                    //             tension,
+                    //             ...(typeof resolution === 'number'
+                    //                 ? { samplesPerSegment: resolution }
+                    //                 : {})
+                }
+            }
+
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    }) as Attachment;
+</script>
+
+<CanvasLayer {@attach render} />

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

@@ -0,0 +1,40 @@
+import type { ScaledDataRecord, UsedScales, CurveName, ConstantAccessor } from '../../types/index.js';
+import type { CurveFactory } from 'd3-shape';
+interface TrailCanvasProps<Datum> {
+    curve?: CurveName | CurveFactory;
+    tension?: number;
+    cap?: 'butt' | 'round';
+    resolution?: number | 'auto';
+    data: ScaledDataRecord<Datum>[][];
+    usedScales: UsedScales;
+    options: {
+        fill?: ConstantAccessor<string, Datum>;
+        defined?: ConstantAccessor<boolean, Datum>;
+        opacity?: ConstantAccessor<number, Datum>;
+        'fill-opacity'?: ConstantAccessor<number, Datum>;
+    };
+}
+declare function $$render<Datum extends DataRecord>(): {
+    props: TrailCanvasProps<Datum>;
+    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']>;
+}
+declare const TrailCanvas: $$IsomorphicComponent;
+type TrailCanvas<Datum extends DataRecord> = InstanceType<typeof TrailCanvas<Datum>>;
+export default TrailCanvas;

package/dist/marks/helpers/events.d.ts

@@ -13,8 +13,8 @@ declare global {
  * of the plot frame, regardless of which element triggered the event
  */
 export declare function clientToLayerCoordinates(event: MouseEvent, plotBody: HTMLElement | null | undefined): [number, number];
-export declare function addEventHandlers<T extends DataRow>({ options, datum, getPlotState }: {
+export declare function addEventHandlers<T extends DataRow>({ options, datum, plot }: {
     options: BaseMarkProps<T>;
     datum: DataRecord;
-    getPlotState: () => PlotState;
+    plot: PlotState;
 }): Attachment;

package/dist/marks/helpers/events.js

@@ -19,7 +19,7 @@ export function clientToLayerCoordinates(event, plotBody) {
     // Calculate the coordinates relative to the plot body
     return [event.clientX - plotBodyRect.left, event.clientY - plotBodyRect.top];
 }
-export function addEventHandlers({ options, datum, getPlotState }) {
+export function addEventHandlers({ options, datum, plot }) {
     const events = pick(options, [
         'onclick',
         'oncontextmenu',
@@ -57,7 +57,7 @@ export function addEventHandlers({ options, datum, getPlotState }) {
         for (const [eventName, eventHandler] of Object.entries(events)) {
             if (eventHandler) {
                 const wrappedHandler = (origEvent) => {
-                    const { scales, body, options } = getPlotState();
+                    const { scales, body, options: plotOptions } = plot;
                     if (origEvent instanceof MouseEvent || origEvent instanceof PointerEvent) {
                         let facetEl = origEvent.target;
                         while (facetEl &&
@@ -69,8 +69,8 @@ export function addEventHandlers({ options, datum, getPlotState }) {
                             facetEl = facetEl.parentElement;
                         }
                         const facetRect = (facetEl?.firstElementChild ?? body).getBoundingClientRect();
-                        const relativeX = origEvent.clientX - facetRect.left + (options.marginLeft ?? 0);
-                        const relativeY = origEvent.clientY - facetRect.top + (options.marginTop ?? 0);
+                        const relativeX = origEvent.clientX - facetRect.left + (plotOptions.marginLeft ?? 0);
+                        const relativeY = origEvent.clientY - facetRect.top + (plotOptions.marginTop ?? 0);
                         if (scales.projection) {
                             const [x, y] = scales.projection.invert([relativeX, relativeY]);
                             origEvent.dataX = x;

package/dist/marks/helpers/trail.d.ts

@@ -0,0 +1,23 @@
+import type { Path } from 'd3-path';
+import type { CurveName } from '../../types/index.js';
+import type { CurveFactory } from 'd3-shape';
+export type TrailContext = CanvasRenderingContext2D | Path;
+export type TrailCurve = CurveName | CurveFactory;
+export type TrailCap = 'round' | 'butt';
+export type TrailOptions = {
+    curve?: TrailCurve;
+    samplesPerSegment?: number;
+    cap?: TrailCap;
+    tension?: number;
+};
+export type TrailSample = {
+    x: number;
+    y: number;
+    r: number;
+};
+/**
+ * Draw a stroked capsule trail along successive points with varying widths.
+ * Adapted from Vega's trail mark implementation.
+ */
+export declare function trailPath(samples: TrailSample[], defined: boolean[], context: TrailContext, options?: TrailOptions): string | void;
+export default trailPath;