svelteplot 0.8.1-pr-283.3 → 0.8.1-pr-283.5

package/dist/marks/Trail.svelte

@@ -107,7 +107,14 @@
             {@const groupedTrailData = groupIndex(scaledData, groupByKey)}
             {#if canvas}
                 <!-- todo -->
-                <TrailCanvas />
+                <TrailCanvas
+                    {curve}
+                    {cap}
+                    {tension}
+                    {resolution}
+                    {usedScales}
+                    data={groupedTrailData}
+                    options={args} />
             {:else}
                 <g class={['trail', className]}>
                     {#each groupedTrailData as trailData, i (i)}

package/dist/marks/helpers/TrailCanvas.svelte

@@ -0,0 +1,140 @@
+<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,26 +1,40 @@
-export default TrailCanvas;
-type TrailCanvas = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const TrailCanvas: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+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>;
     };
-    z_$$bindings?: Bindings;
 }
+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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.8.1-pr-283.3",
+    "version": "0.8.1-pr-283.5",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",