svelteplot 0.8.1 → 0.9.0-pr-311.0

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

@@ -1,106 +1,6 @@
-import { type MarkerShape } from './Marker.svelte';
-import type { BaseMarkProps, ConstantAccessor, DataRecord, Mark, PlotScales } from '../../types/index.js';
+import type { DataRecord } from '../../types/index.js';
 declare function $$render<Datum extends DataRecord>(): {
-    props: Partial<{
-        filter: ConstantAccessor<boolean, Datum>;
-        facet: "auto" | "include" | "exclude";
-        fx: import("../../types/index.js").ChannelAccessor<Datum>;
-        fy: import("../../types/index.js").ChannelAccessor<Datum>;
-        dx: ConstantAccessor<number, Datum>;
-        dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../../transforms/dodge").DodgeYOptions;
-        fill: import("../../types/index.js").ChannelAccessor<Datum>;
-        fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: import("../../types/index.js").RawValue, b: import("../../types/index.js").RawValue) => number) | {
-            channel: string;
-            order?: "ascending" | "descending";
-        } | ConstantAccessor<import("../../types/index.js").RawValue, Datum>;
-        stroke: import("../../types/index.js").ChannelAccessor<Datum>;
-        strokeWidth: ConstantAccessor<number, Datum>;
-        strokeOpacity: ConstantAccessor<number, Datum>;
-        strokeLinejoin: ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
-        strokeLinecap: ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
-        strokeMiterlimit: ConstantAccessor<number, Datum>;
-        opacity: import("../../types/index.js").ChannelAccessor<Datum>;
-        strokeDasharray: ConstantAccessor<string, Datum>;
-        strokeDashoffset: ConstantAccessor<number, Datum>;
-        mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
-        clipPath: string;
-        imageFilter: ConstantAccessor<string, Datum>;
-        shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
-        paintOrder: 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: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }> & {
-        /**
-         * the datum associated with this path, usually the first
-         * element of the data array group
-         */
-        datum: Datum;
-        /**
-         * the marker shape to use at the start of the path, defaults to
-         * circle
-         */
-        markerStart?: boolean | MarkerShape;
-        /**
-         * the marker shape to use at the middle of the path, defaults to circle
-         */
-        markerMid?: boolean | MarkerShape;
-        /**
-         * the marker shape to use at the end of the path, defaults to circle
-         */
-        markerEnd?: boolean | MarkerShape;
-        /**
-         * shorthand for setting all markers
-         */
-        marker?: boolean | MarkerShape;
-        /**
-         * path string
-         */
-        d: string;
-        style: string;
-        startOffset: string;
-        textStyle: string;
-        textStyleClass?: string | null;
-        text: string;
-        transform: string;
-        color: string;
-        strokeWidth: ConstantAccessor<number>;
-        mark: Mark<BaseMarkProps<Datum>>;
-        scales: PlotScales;
-    };
+    props: any;
     exports: {};
     bindings: "";
     slots: {};

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;