svelteplot 0.8.1-pr-283.11 → 0.8.1-pr-298.0

package/dist/marks/Trail.svelte

@@ -1,163 +0,0 @@
-<script lang="ts" generics="Datum extends DataRecord">
-    interface TrailMarkProps extends Omit<
-        BaseMarkProps<Datum>,
-        'stroke' | 'strokeWidth' | 'strokeDasharray'
-    > {
-        data?: Datum[];
-        x?: ChannelAccessor<Datum>;
-        y?: ChannelAccessor<Datum>;
-        z?: ChannelAccessor<Datum>;
-        r?: ChannelAccessor<Datum>;
-        curve?: CurveName | CurveFactory;
-        tension?: number;
-        sort?: ConstantAccessor<RawValue, Datum> | { channel: 'stroke' | 'fill' };
-        defined?: ConstantAccessor<boolean, Datum>;
-        canvas?: boolean;
-        cap?: 'butt' | 'round';
-        /**
-         * Samples per segment for curve interpolation
-         */
-        resolution?: number | 'auto';
-    }
-    import type {
-        DataRecord,
-        ChannelAccessor,
-        BaseMarkProps,
-        ConstantAccessor,
-        RawValue,
-        PlotContext,
-        ScaledDataRecord,
-        CurveName
-    } from '../types';
-    import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
-    import { path as d3Path } from 'd3-path';
-    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { getPlotDefaults } from '../hooks/plotDefaults';
-    import { sort } from '../transforms';
-    import trailPath, { type TrailSample } from './helpers/trail.js';
-    import TrailCanvas from './helpers/TrailCanvas.svelte';
-    import { addEventHandlers } from './helpers/events';
-    import type { CurveFactory } from 'd3-shape';
-
-    let markProps: TrailMarkProps = $props();
-
-    const DEFAULTS: TrailMarkProps = {
-        curve: 'linear',
-        r: 3,
-        canvas: false,
-        resolution: 'auto',
-        cap: 'round',
-        tension: 0,
-        ...getPlotDefaults().trail
-    };
-
-    const {
-        data = [{} as Datum],
-        curve,
-        resolution,
-        tension,
-        canvas,
-        cap,
-        class: className,
-        ...options
-    }: TrailMarkProps = $derived({
-        ...DEFAULTS,
-        ...markProps
-    });
-
-    const args = $derived(sort({ data, ...options })) as TrailMarkProps;
-
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
-
-    /**
-     * Groups the data by the specified key
-     */
-    function groupIndex(data: ScaledDataRecord[], groupByKey: ChannelAccessor<Datum> | null) {
-        if (!groupByKey) return [data];
-        let group: ScaledDataRecord[] = [];
-        const groups = [group];
-        let lastGroupValue;
-        for (const d of data) {
-            const groupValue = resolveProp(groupByKey, d.datum);
-            if (groupValue === lastGroupValue || group.length === 0) {
-                group.push(d);
-                lastGroupValue = groupValue;
-            } else {
-                // new group
-                group = [d];
-                groups.push(group);
-                lastGroupValue = groupValue;
-            }
-        }
-        return groups.filter((d) => d.length > 0);
-    }
-
-    const groupByKey = $derived(args.z || args.fill) as ChannelAccessor<Datum> | null;
-</script>
-
-<Mark
-    type="trail"
-    channels={['x', 'y', 'opacity', 'fill', 'fillOpacity', 'r']}
-    required={['x', 'y']}
-    {...args}>
-    {#snippet children({ mark, usedScales, scaledData })}
-        {#if scaledData.length > 0}
-            {@const groupedTrailData = groupIndex(scaledData, groupByKey)}
-            {#if canvas}
-                <!-- todo -->
-                <TrailCanvas
-                    {curve}
-                    {cap}
-                    {tension}
-                    {resolution}
-                    {usedScales}
-                    data={groupedTrailData}
-                    options={args} />
-            {:else}
-                <g class={['trail', className]}>
-                    {#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 }
-                                : {})
-                        })}
-                        {@const [style, styleClass] = resolveStyles(
-                            plot,
-                            trailData[0],
-                            {
-                                ...args
-                            },
-                            'fill',
-                            usedScales
-                        )}
-                        <path
-                            d={pathString}
-                            {style}
-                            class={styleClass}
-                            {@attach addEventHandlers({
-                                getPlotState,
-                                options: mark.options,
-                                datum: trailData[0].datum
-                            })} />
-                    {/each}
-                </g>
-            {/if}
-        {/if}
-    {/snippet}
-</Mark>

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

@@ -1,44 +0,0 @@
-import type { DataRecord, ChannelAccessor, ConstantAccessor, RawValue, CurveName } from '../types';
-import type { CurveFactory } from 'd3-shape';
-declare function $$render<Datum extends DataRecord>(): {
-    props: Omit<BaseMarkProps<Datum>, "stroke" | "strokeDasharray" | "strokeWidth"> & {
-        data?: Datum[];
-        x?: ChannelAccessor<Datum>;
-        y?: ChannelAccessor<Datum>;
-        z?: ChannelAccessor<Datum>;
-        r?: ChannelAccessor<Datum>;
-        curve?: CurveName | CurveFactory;
-        tension?: number;
-        sort?: ConstantAccessor<RawValue, Datum> | {
-            channel: "stroke" | "fill";
-        };
-        defined?: ConstantAccessor<boolean, Datum>;
-        canvas?: boolean;
-        cap?: "butt" | "round";
-        /**
-         * Samples per segment for curve interpolation
-         */
-        resolution?: number | "auto";
-    };
-    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 Trail: $$IsomorphicComponent;
-type Trail<Datum extends DataRecord> = InstanceType<typeof Trail<Datum>>;
-export default Trail;

package/dist/marks/helpers/TrailCanvas.svelte

@@ -1,140 +0,0 @@
-<script lang="ts" generics="Datum extends DataRecord">
-    import type {
-        Mark,
-        BaseMarkProps,
-        PlotContext,
-        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 { getContext } from 'svelte';
-    import type { CurveFactory } from 'd3-shape';
-    import { trailPath, type TrailSample } from './trail';
-    import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve';
-
-    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 { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
-
-    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

@@ -1,40 +0,0 @@
-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/trail.d.ts

@@ -1,23 +0,0 @@
-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;