svelteplot 0.2.0 → 0.2.2

package/dist/marks/helpers/DotCanvas.svelte

@@ -1,29 +1,31 @@
 <script lang="ts">
-    import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+    import type {
+        PlotState,
+        Mark,
+        BaseMarkProps,
+        ScaledDataRecord,
+        PlotContext
+    } from '../../types.js';
     import { CSS_VAR } from '../../constants.js';
-    import { isValid, testFilter } from '../../helpers/index.js';
-    import { resolveChannel, resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
-    import { projectXY } from '../../helpers/scales.js';
+    import { resolveProp } from '../../helpers/resolve.js';
     import { maybeSymbol } from '../../helpers/symbols.js';
     import { symbol as d3Symbol } from 'd3-shape';
-    import { untrack } from 'svelte';
-    import { isEqual } from 'es-toolkit';
+    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';
 
-    let canvas: HTMLCanvasElement | undefined = $state();
-    let devicePixelRatio = $state(1);
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
 
     let {
         mark,
-        plot,
-        data,
-        testFacet,
-        usedScales
+        data
     }: {
         mark: Mark<BaseMarkProps>;
         plot: PlotState;
-        data: DataRecord[];
-        testFacet: any;
-        usedScales: any;
+        data: ScaledDataRecord[];
     } = $props();
 
     function drawSymbolPath(symbolType: string, size: number, context) {
@@ -31,154 +33,65 @@
         return d3Symbol(maybeSymbol(symbolType), size).context(context)();
     }
 
-    function scaleHash(scale) {
-        return { domain: scale.domain, type: scale.type, range: scale.range };
-    }
-
-    let _plotSize = $state([plot.width, plot.height]);
-    let _usedScales = $state(usedScales);
     let _markOptions = $state(mark.options);
-    const xScale = $derived(scaleHash(plot.scales.x));
-    const yScale = $derived(scaleHash(plot.scales.y));
-    const rScale = $derived(scaleHash(plot.scales.r));
-    let _xScale = $state(xScale);
-    let _yScale = $state(yScale);
-    let _rScale = $state(rScale);
-
-    const filteredData = $derived(
-        data.filter((datum) => testFilter(datum, _markOptions) && testFacet(datum, _markOptions))
-    );
-
-    let _filteredData: DataRecord[] = $state([]);
-
-    $effect(() => {
-        // update _usedScales only if changed
-        if (!isEqual(usedScales, _usedScales)) _usedScales = usedScales;
-        if (!isEqual(mark.options, _markOptions)) _markOptions = mark.options;
-
-        const plotSize = [plot.width, plot.height];
-        if (!isEqual(plotSize, _plotSize)) _plotSize = plotSize;
-
-        if (
-            _markOptions.filter
-                ? !isEqual(filteredData, _filteredData)
-                : filteredData.length !== _filteredData.length
-        ) {
-            _filteredData = filteredData;
-        }
-        if (!isEqual(xScale, _xScale)) _xScale = xScale;
-        if (!isEqual(yScale, _yScale)) _yScale = yScale;
-        if (!isEqual(rScale, _rScale)) _rScale = rScale;
-    });
-
-    $effect(() => {
-        // track plot size, since we're untracking the scales
-        _plotSize;
-        _markOptions;
-        _xScale;
-        _yScale;
-        _rScale;
-        const plotScales = untrack(() => plot.scales);
+
+    const renderDots: Attachment = (canvas: HTMLCanvasElement) => {
         const context = canvas.getContext('2d');
-        if (context === null) return;
-        // this will re-run whenever `color` or `size` change
-        context.resetTransform();
-        context.scale(devicePixelRatio, devicePixelRatio);
-
-        for (const datum of _filteredData) {
-            // untrack the filter test to avoid redrawing when not necessary
-            const x = resolveChannel('x', datum, _markOptions);
-            const y = resolveChannel('y', datum, _markOptions);
-            const r = resolveChannel('r', datum, _markOptions) || 2;
-            const symbol_ = resolveChannel('symbol', datum, {
-                symbol: 'circle',
-                ..._markOptions
-            });
-            const symbol = _usedScales.symbol ? plotScales.symbol.fn(symbol_) : symbol_;
-
-            if (isValid(x) && isValid(y) && isValid(r)) {
-                const [px, py] = projectXY(plotScales, x, y, true, true);
-
-                const r_ = _usedScales.r ? plotScales.r.fn(r) : r;
-                const size = r_ * r_ * Math.PI * devicePixelRatio;
-                let { stroke, strokeOpacity, fillOpacity, fill, opacity } = resolveScaledStyleProps(
-                    datum,
-                    _markOptions,
-                    _usedScales,
-                    untrack(() => plot),
-                    'stroke'
-                );
 
-                if (`${fill}`.toLowerCase() === 'currentcolor')
-                    fill = getComputedStyle(canvas.parentElement.parentElement).getPropertyValue(
-                        'color'
-                    );
-                if (`${stroke}`.toLowerCase() === 'currentcolor')
-                    stroke = getComputedStyle(canvas.parentElement.parentElement).getPropertyValue(
-                        'color'
-                    );
-                if (CSS_VAR.test(fill))
-                    fill = getComputedStyle(canvas).getPropertyValue(fill.slice(4, -1));
-                if (CSS_VAR.test(stroke))
-                    stroke = getComputedStyle(canvas).getPropertyValue(stroke.slice(4, -1));
-
-                if (stroke && stroke !== 'none') {
-                    const strokeWidth = resolveProp(_markOptions.strokeWidth, datum, 1.6);
-                    context.lineWidth = strokeWidth;
+        $effect(() => {
+            if (context) {
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+                for (const datum of data) {
+                    if (datum.valid) {
+                        let { fill, stroke } = datum;
+
+                        fill = resolveColor(fill, canvas);
+                        stroke = resolveColor(stroke, canvas);
+
+                        if (stroke && stroke !== 'none') {
+                            const strokeWidth = resolveProp(
+                                _markOptions.strokeWidth,
+                                datum.datum,
+                                1.6
+                            );
+                            context.lineWidth = strokeWidth;
+                        }
+
+                        context.fillStyle = fill ? fill : 'none';
+                        context.strokeStyle = stroke ? stroke : 'none';
+                        context.translate(datum.x, datum.y);
+
+                        const size = datum.r * datum.r * Math.PI;
+
+                        context.beginPath();
+                        drawSymbolPath(datum.symbol, size, context);
+                        context.closePath();
+
+                        const { opacity = 1, fillOpacity = 1, strokeOpacity = 1 } = datum;
+
+                        if (opacity != null) context.globalAlpha = opacity ?? 1;
+                        if (fillOpacity != null) context.globalAlpha = (opacity ?? 1) * fillOpacity;
+                        if (fill && fill !== 'none') context.fill();
+                        if (strokeOpacity != null)
+                            context.globalAlpha = (opacity ?? 1) * strokeOpacity;
+                        if (stroke && stroke !== 'none') context.stroke();
+                        context.translate(-datum.x, -datum.y);
+                    }
                 }
-                context.fillStyle = fill ? fill : 'none';
-                context.strokeStyle = stroke ? stroke : 'none';
-                context.translate(px, py);
-
-                context.beginPath();
-                drawSymbolPath(symbol, size, context);
-                context.closePath();
-
-                if (opacity != null) context.globalAlpha = opacity ?? 1;
-                if (fillOpacity != null) context.globalAlpha = (opacity ?? 1) * fillOpacity;
-                if (fill && fill !== 'none') context.fill();
-                if (strokeOpacity != null) context.globalAlpha = (opacity ?? 1) * strokeOpacity;
-                if (stroke && stroke !== 'none') context.stroke();
-                context.translate(-px, -py);
             }
-        }
-        return () => {
-            canvas?.getContext('2d')?.clearRect(0, 0, canvas?.width, canvas?.height);
-        };
-    });
-
-    // code from https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
-    let remove: null | (() => void) = null;
-
-    function updatePixelRatio() {
-        if (remove != null) {
-            remove();
-        }
-        const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
-        const media = matchMedia(mqString);
-        media.addEventListener('change', updatePixelRatio);
-        remove = () => {
-            media.removeEventListener('change', updatePixelRatio);
-        };
-        devicePixelRatio = window.devicePixelRatio;
-    }
-    $effect(() => {
-        updatePixelRatio();
-    });
+
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
 </script>
 
-<foreignObject x="0" y="0" width={plot.width} height={plot.height}>
-    <canvas
-        xmlns="http://www.w3.org/1999/xhtml"
-        bind:this={canvas}
-        width={plot.width * devicePixelRatio}
-        height={plot.height * devicePixelRatio}
-        style="width: {plot.width}px; height: {plot.height}px;"></canvas>
-</foreignObject>
-
-<style>
-    foreignObject,
-    canvas {
-        color: currentColor;
-    }
-</style>
+<CanvasLayer {@attach renderDots} />

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

@@ -1,10 +1,8 @@
-import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+import type { PlotState, Mark, BaseMarkProps, ScaledDataRecord } from '../../types.js';
 type $$ComponentProps = {
     mark: Mark<BaseMarkProps>;
     plot: PlotState;
-    data: DataRecord[];
-    testFacet: any;
-    usedScales: any;
+    data: ScaledDataRecord[];
 };
 declare const DotCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
 type DotCanvas = ReturnType<typeof DotCanvas>;

package/dist/marks/helpers/GeoCanvas.svelte

@@ -1,165 +1,115 @@
 <script lang="ts">
-    import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+    import type {
+        Mark,
+        BaseMarkProps,
+        PlotContext,
+        ScaledDataRecord,
+        UsedScales
+    } from '../../types.js';
     import { CSS_VAR } from '../../constants.js';
-    import { testFilter } from '../../helpers/index.js';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
-    import { untrack } from 'svelte';
-    import { isEqual } from 'es-toolkit';
+    import { getContext, untrack } from 'svelte';
     import { type GeoPath } from 'd3-geo';
-
-    let canvas: HTMLCanvasElement | undefined = $state();
-    let devicePixelRatio = $state(1);
+    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';
 
     let {
         mark,
-        plot,
         data,
-        testFacet,
-        usedScales,
-        path
+        path,
+        usedScales
     }: {
         mark: Mark<BaseMarkProps>;
-        plot: PlotState;
-        data: DataRecord[];
-        testFacet: any;
-        usedScales: any;
+        data: ScaledDataRecord[];
         path: GeoPath;
+        usedScales: UsedScales;
     } = $props();
 
-    function scaleHash(scale) {
-        return { domain: scale.domain, type: scale.type, range: scale.range };
-    }
-
-    let _plotSize = $state([plot.width, plot.height]);
-    let _usedScales = $state(usedScales);
-    let _markOptions = $state(mark.options);
-
-    const filteredData = $derived(
-        data.filter((datum) => testFilter(datum, _markOptions) && testFacet(datum, _markOptions))
-    );
-
-    let _filteredData: DataRecord[] = $state([]);
-
-    $effect(() => {
-        // update _usedScales only if changed
-        if (!isEqual(usedScales, _usedScales)) _usedScales = usedScales;
-        if (!isEqual(mark.options, _markOptions)) _markOptions = mark.options;
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
 
-        const plotSize = [plot.width, plot.height];
-        if (!isEqual(plotSize, _plotSize)) _plotSize = plotSize;
-
-        if (
-            _markOptions.filter
-                ? !isEqual(filteredData, _filteredData)
-                : filteredData.length !== _filteredData.length
-        ) {
-            _filteredData = filteredData;
-        }
-    });
-
-    $effect(() => {
-        // track plot size, since we're untracking the scales
-        _plotSize;
-        _markOptions;
+    function maybeOpacity(value) {
+        return value == null ? 1 : +value;
+    }
 
-        const plotScales = untrack(() => plot.scales);
+    const render: Attachment = (canvas: HTMLCanvasElement) => {
         const context = canvas.getContext('2d');
-        if (context === null) return;
-        // this will re-run whenever `color` or `size` change
-        context.resetTransform();
-        context.scale(devicePixelRatio, devicePixelRatio);
-
-        let currentColor;
-
-        path.context(context);
-
-        const plot_ = untrack(() => plot);
 
-        for (const datum of _filteredData) {
-            // untrack the filter test to avoid redrawing when not necessary
-            let { stroke, fill, opacity, ...restStyles } = resolveScaledStyleProps(
-                datum,
-                _markOptions,
-                _usedScales,
-                plot_,
-                'fill'
-            );
-
-            const fillOpacity = restStyles['fill-opacity'];
-            const strokeOpacity = restStyles['stroke-opacity'];
-
-            if (`${fill}`.toLowerCase() === 'currentcolor')
-                fill =
-                    currentColor ||
-                    (currentColor = getComputedStyle(
-                        canvas?.parentElement?.parentElement
-                    ).getPropertyValue('color'));
-            if (`${stroke}`.toLowerCase() === 'currentcolor')
-                stroke =
-                    currentColor ||
-                    (currentColor = getComputedStyle(
-                        canvas?.parentElement?.parentElement
-                    ).getPropertyValue('color'));
-            if (CSS_VAR.test(fill))
-                fill = getComputedStyle(canvas).getPropertyValue(fill.slice(4, -1));
-            if (CSS_VAR.test(stroke))
-                stroke = getComputedStyle(canvas).getPropertyValue(stroke.slice(4, -1));
-
-            if (stroke && stroke !== 'none') {
-                const strokeWidth = resolveProp(_markOptions.strokeWidth, datum, 1.6);
-                context.lineWidth = strokeWidth;
+        $effect(() => {
+            path.context(context);
+            if (context) {
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+                let currentColor;
+
+                for (const d of data) {
+                    if (!d.valid) continue;
+                    const geometry = resolveProp(mark.options.geometry, d.datum, d.datum);
+                    // untrack the filter test to avoid redrawing when not necessary
+                    let { stroke, fill, ...restStyles } = resolveScaledStyleProps(
+                        d.datum,
+                        mark.options,
+                        usedScales,
+                        plot,
+                        GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill'
+                    );
+
+                    const opacity = maybeOpacity(restStyles['opacity']);
+                    const fillOpacity = maybeOpacity(restStyles['fill-opacity']);
+                    const strokeOpacity = maybeOpacity(restStyles['stroke-opacity']);
+
+                    if (`${fill}`.toLowerCase() === 'currentcolor')
+                        fill =
+                            currentColor ||
+                            (currentColor = getComputedStyle(
+                                canvas?.parentElement?.parentElement
+                            ).getPropertyValue('color'));
+                    if (`${stroke}`.toLowerCase() === 'currentcolor')
+                        stroke =
+                            currentColor ||
+                            (currentColor = getComputedStyle(
+                                canvas?.parentElement?.parentElement
+                            ).getPropertyValue('color'));
+                    if (CSS_VAR.test(fill))
+                        fill = getComputedStyle(canvas).getPropertyValue(fill.slice(4, -1));
+                    if (CSS_VAR.test(stroke))
+                        stroke = getComputedStyle(canvas).getPropertyValue(stroke.slice(4, -1));
+
+                    if (stroke && stroke !== 'none') {
+                        const strokeWidth = resolveProp(mark.options.strokeWidth, d.datum, 1);
+                        context.lineWidth = strokeWidth ?? 1;
+                    }
+
+                    context.fillStyle = fill ? fill : 'none';
+                    context.strokeStyle = stroke ? stroke : 'none';
+                    context.lineJoin = 'round';
+                    context.beginPath();
+
+                    path(geometry);
+                    context.closePath();
+
+                    if (opacity != null) context.globalAlpha = opacity;
+                    if (fillOpacity != null) context.globalAlpha = opacity * fillOpacity;
+
+                    if (fill && fill !== 'none') context.fill();
+                    if (strokeOpacity != null) context.globalAlpha = opacity * strokeOpacity;
+                    if (stroke && stroke !== 'none') context.stroke();
+                }
             }
-            context.fillStyle = fill ? fill : 'none';
-            context.strokeStyle = stroke ? stroke : 'none';
-
-            context.beginPath();
-            path(datum);
-            context.closePath();
-
-            if (opacity != null) context.globalAlpha = opacity ?? 1;
-            if (fillOpacity != null) context.globalAlpha = (opacity ?? 1) * fillOpacity;
-
-            if (fill && fill !== 'none') context.fill();
-            if (strokeOpacity != null) context.globalAlpha = (opacity ?? 1) * strokeOpacity;
-            if (stroke && stroke !== 'none') context.stroke();
-        }
-        return () => {
-            canvas?.getContext('2d')?.clearRect(0, 0, canvas?.width, canvas?.height);
-        };
-    });
-
-    // code from https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
-    let remove: null | (() => void) = null;
-
-    function updatePixelRatio() {
-        if (remove != null) {
-            remove();
-        }
-        const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
-        const media = matchMedia(mqString);
-        media.addEventListener('change', updatePixelRatio);
-        remove = () => {
-            media.removeEventListener('change', updatePixelRatio);
-        };
-        devicePixelRatio = window.devicePixelRatio;
-    }
-    $effect(() => {
-        updatePixelRatio();
-    });
+            // reset path context in case we switch back to SVG
+            path.context(null);
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
 </script>
 
-<foreignObject x="0" y="0" width={plot.width} height={plot.height}>
-    <canvas
-        xmlns="http://www.w3.org/1999/xhtml"
-        bind:this={canvas}
-        width={plot.width * devicePixelRatio}
-        height={plot.height * devicePixelRatio}
-        style="width: {plot.width}px; height: {plot.height}px;"></canvas>
-</foreignObject>
-
-<style>
-    foreignObject,
-    canvas {
-        color: currentColor;
-    }
-</style>
+<CanvasLayer {@attach render} />

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

@@ -1,12 +1,10 @@
-import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+import type { Mark, BaseMarkProps, ScaledDataRecord, UsedScales } from '../../types.js';
 import { type GeoPath } from 'd3-geo';
 type $$ComponentProps = {
     mark: Mark<BaseMarkProps>;
-    plot: PlotState;
-    data: DataRecord[];
-    testFacet: any;
-    usedScales: any;
+    data: ScaledDataRecord[];
     path: GeoPath;
+    usedScales: UsedScales;
 };
 declare const GeoCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
 type GeoCanvas = ReturnType<typeof GeoCanvas>;

package/dist/marks/helpers/LineCanvas.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+    import type {
+        Mark,
+        BaseMarkProps,
+        PlotContext,
+        ScaledDataRecord,
+        UsedScales
+    } from '../../types.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';
+
+    let {
+        mark,
+        groupedLineData,
+        usedScales,
+        linePath
+    }: {
+        mark: Mark<BaseMarkProps>;
+        groupedLineData: ScaledDataRecord[][];
+        usedScales: UsedScales;
+        linePath: Line<ScaledDataRecord>;
+        groupByKey?: unknown;
+    } = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    function maybeOpacity(value: unknown) {
+        return value == null ? 1 : +value;
+    }
+
+    const render = ((canvas: HTMLCanvasElement) => {
+        const context = canvas.getContext('2d');
+
+        $effect(() => {
+            if (context) {
+                linePath.context(context);
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+                context.lineJoin = 'round';
+                context.lineCap = 'round';
+
+                for (const group of groupedLineData) {
+                    if (group.length < 2) continue;
+
+                    // Get the first point to determine line styles
+                    const firstPoint = group[0];
+                    if (!firstPoint || !firstPoint.valid) continue;
+
+                    let { stroke, ...restStyles } = resolveScaledStyleProps(
+                        firstPoint.datum,
+                        mark.options,
+                        usedScales,
+                        plot,
+                        'stroke'
+                    );
+
+                    const opacity = maybeOpacity(restStyles['opacity']);
+                    const strokeOpacity = maybeOpacity(restStyles['stroke-opacity']);
+
+                    const strokeWidth = resolveProp(
+                        mark.options.strokeWidth,
+                        firstPoint.datum,
+                        1.4
+                    ) as number;
+
+                    if (mark.options.outlineStroke) {
+                        // draw stroke outline first
+                        const outlineStroke = resolveColor(mark.options.outlineStroke, canvas);
+                        const outlineStrokeWidth =
+                            mark.options.outlineStrokeWidth ?? strokeWidth + 2;
+                        const outlineStrokeOpacity = mark.options.outlineStrokeOpacity ?? 1;
+
+                        context.lineWidth = outlineStrokeWidth;
+                        context.strokeStyle = outlineStroke;
+                        context.globalAlpha = opacity * outlineStrokeOpacity;
+                        context.beginPath();
+                        linePath(group);
+                        context.stroke();
+                    }
+
+                    stroke = resolveColor(stroke, canvas);
+
+                    if (stroke && stroke !== 'none') {
+                        context.lineWidth = strokeWidth ?? 1.4;
+                    }
+
+                    context.strokeStyle = stroke ? stroke : 'currentColor';
+                    context.globalAlpha = opacity * strokeOpacity;
+
+                    // Start drawing the line
+                    context.beginPath();
+                    linePath(group);
+                    context.stroke();
+                }
+                linePath.context(null);
+            }
+
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    }) as Attachment;
+</script>
+
+<CanvasLayer {@attach render} />