svelteplot 0.12.0-pr-532.3 → 0.12.0-pr-532.5

package/dist/marks/Density.svelte

@@ -55,6 +55,8 @@
         strokeMiterlimit?: number;
         clipPath?: string;
         class?: string;
+        /** Render using a canvas element instead of SVG paths. */
+        canvas?: boolean;
         /** the horizontal facet channel */
         fx?: ChannelAccessor<Datum>;
         /** the vertical facet channel */
@@ -68,6 +70,7 @@
         MarkType,
         RawValue
     } from '../types/index.js';
+    import DensityCanvas from './helpers/DensityCanvas.svelte';
     import { SvelteMap, SvelteSet } from 'svelte/reactivity';
     import { contourDensity } from 'd3-contour';
     import { geoPath } from 'd3-geo';
@@ -117,6 +120,7 @@
         strokeMiterlimit = 1,
         clipPath,
         class: className = '',
+        canvas = false,
         fx: fxAcc,
         fy: fyAcc,
         ...options
@@ -295,28 +299,45 @@
      */
     const extent = $derived.by(() => {
         if (!data?.length) return null;
-        let xMin: number | Date = Infinity,
-            xMax: number | Date = -Infinity,
-            yMin: number | Date = Infinity,
-            yMax: number | Date = -Infinity;
+        let xMin = Infinity,
+            xMax = -Infinity,
+            yMin = Infinity,
+            yMax = -Infinity;
+        let xUsesDate = false,
+            yUsesDate = false;
         for (const d of data as any[]) {
             const xv = resolveAcc(xAcc, d);
             const yv = resolveAcc(yAcc, d);
-            if ((typeof xv === 'number' && isFinite(xv)) || xv instanceof Date) {
+            if (xv instanceof Date) {
+                xUsesDate = true;
+                const ms = xv.getTime();
+                if (isFinite(ms)) {
+                    if (ms < xMin) xMin = ms;
+                    if (ms > xMax) xMax = ms;
+                }
+            } else if (typeof xv === 'number' && isFinite(xv)) {
                 if (xv < xMin) xMin = xv;
                 if (xv > xMax) xMax = xv;
             }
-            if ((typeof yv === 'number' && isFinite(yv)) || yv instanceof Date) {
+            if (yv instanceof Date) {
+                yUsesDate = true;
+                const ms = yv.getTime();
+                if (isFinite(ms)) {
+                    if (ms < yMin) yMin = ms;
+                    if (ms > yMax) yMax = ms;
+                }
+            } else if (typeof yv === 'number' && isFinite(yv)) {
                 if (yv < yMin) yMin = yv;
                 if (yv > yMax) yMax = yv;
             }
         }
-        return (Number.isFinite(xMin as number) || xMin instanceof Date) &&
-            (Number.isFinite(xMax as number) || xMax instanceof Date) &&
-            (Number.isFinite(yMin as number) || yMin instanceof Date) &&
-            (Number.isFinite(yMax as number) || yMax instanceof Date)
-            ? { x1: xMin, x2: xMax, y1: yMin, y2: yMax }
-            : null;
+        if (!isFinite(xMin) || !isFinite(xMax) || !isFinite(yMin) || !isFinite(yMax)) return null;
+        return {
+            x1: xUsesDate ? new Date(xMin) : xMin,
+            x2: xUsesDate ? new Date(xMax) : xMax,
+            y1: yUsesDate ? new Date(yMin) : yMin,
+            y2: yUsesDate ? new Date(yMax) : yMax
+        };
     });
 
     /**
@@ -334,7 +355,6 @@
     const markData = $derived.by((): DataRecord[] => {
         const ext = extent;
         const records: any[] = [];
-
         // Bootstrap extent record(s) so x/y scales are available for density
         // computation on the first render pass.  When faceted, emit one record
         // per unique (fxVal, fyVal) combination so no record carries an
@@ -442,13 +462,27 @@
     {...markChannelProps}>
     {#snippet children({ scaledData }: { scaledData: ScaledDataRecord[] })}
         <g clip-path={clipPath} class={className || null} aria-label="density">
-            {#each scaledData as d, i (i)}
-                {#if d.datum[GEOM] && (d.datum[GEOM] as DensityGeometry).coordinates.length > 0}
-                    <path
-                        d={path(d.datum[GEOM] as any)}
-                        style={densityStyle(d.datum[RAW_VALUE] as number)} />
-                {/if}
-            {/each}
+            {#if canvas}
+                <DensityCanvas
+                    {scaledData}
+                    {path}
+                    geomKey={GEOM}
+                    {fill}
+                    stroke={effectiveStroke}
+                    {strokeWidth}
+                    {strokeOpacity}
+                    {fillOpacity}
+                    {opacity}
+                    {strokeMiterlimit} />
+            {:else}
+                {#each scaledData as d, i (i)}
+                    {#if d.datum[GEOM] && (d.datum[GEOM] as DensityGeometry).coordinates.length > 0}
+                        <path
+                            d={path(d.datum[GEOM] as any)}
+                            style={densityStyle(d.datum[RAW_VALUE] as number)} />
+                    {/if}
+                {/each}
+            {/if}
         </g>
     {/snippet}
 </Mark>

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

@@ -40,6 +40,8 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeMiterlimit?: number;
         clipPath?: string;
         class?: string;
+        /** Render using a canvas element instead of SVG paths. */
+        canvas?: boolean;
         /** the horizontal facet channel */
         fx?: ChannelAccessor<Datum>;
         /** the vertical facet channel */

package/dist/marks/helpers/DensityCanvas.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+    import type { ScaledDataRecord } from '../../types/index.js';
+    import type { GeoPath } from 'd3-geo';
+    import type { Attachment } from 'svelte/attachments';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import { CSS_VAR } from '../../constants.js';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+    import { RAW_VALUE } from '../../transforms/recordize.js';
+
+    let {
+        scaledData,
+        path,
+        geomKey,
+        fill,
+        stroke,
+        strokeWidth,
+        strokeOpacity,
+        fillOpacity,
+        opacity,
+        strokeMiterlimit
+    }: {
+        scaledData: ScaledDataRecord[];
+        path: GeoPath;
+        /** Symbol key used to retrieve the DensityGeometry from each datum. */
+        geomKey: symbol;
+        fill: string;
+        stroke: string;
+        strokeWidth?: number;
+        strokeOpacity?: number;
+        fillOpacity?: number;
+        opacity?: number;
+        strokeMiterlimit?: number;
+    } = $props();
+
+    const plot = usePlot();
+
+    /** Resolve a fill/stroke string that may be the "density" keyword. */
+    function resolveColorProp(prop: string, densityValue: number): string {
+        if (/^density$/i.test(prop)) {
+            return (plot.scales.color?.fn(densityValue) as string) ?? 'currentColor';
+        }
+        return prop;
+    }
+
+    const render: Attachment = (canvasEl: Element) => {
+        const canvas = canvasEl as HTMLCanvasElement;
+        const context = canvas.getContext('2d');
+
+        $effect(() => {
+            if (!context) return;
+
+            path.context(context);
+            context.resetTransform();
+            context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+            let currentColor: string | undefined;
+
+            const resolveCanvasColor = (color: string): string => {
+                if (color.toLowerCase() === 'currentcolor') {
+                    return (
+                        currentColor ||
+                        (currentColor = getComputedStyle(
+                            canvas.parentElement?.parentElement ?? canvas
+                        ).getPropertyValue('color'))
+                    );
+                }
+                if (CSS_VAR.test(color)) {
+                    return getComputedStyle(canvas).getPropertyValue(color.slice(4, -1));
+                }
+                return color;
+            };
+
+            const globalOpacity = opacity ?? 1;
+            if (strokeMiterlimit != null) context.miterLimit = strokeMiterlimit;
+
+            for (const d of scaledData) {
+                const geom = d.datum[geomKey as any] as any;
+                if (!geom?.coordinates?.length) continue;
+
+                const densityValue = (d.datum[RAW_VALUE as any] as number) ?? 0;
+                const fillColor = resolveCanvasColor(resolveColorProp(fill, densityValue));
+                const strokeColor = resolveCanvasColor(resolveColorProp(stroke, densityValue));
+
+                context.beginPath();
+                path(geom);
+                context.closePath();
+
+                if (fillColor && fillColor !== 'none') {
+                    context.fillStyle = fillColor;
+                    context.globalAlpha = globalOpacity * (fillOpacity ?? 1);
+                    context.fill();
+                }
+
+                if (strokeColor && strokeColor !== 'none') {
+                    context.strokeStyle = strokeColor;
+                    context.lineWidth = strokeWidth ?? 1;
+                    context.globalAlpha = globalOpacity * (strokeOpacity ?? 1);
+                    context.stroke();
+                }
+            }
+
+            // Reset path context in case we switch back to SVG rendering.
+            path.context(null);
+
+            return () => {
+                context.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+<CanvasLayer {@attach render} />

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

@@ -0,0 +1,18 @@
+import type { ScaledDataRecord } from '../../types/index.js';
+import type { GeoPath } from 'd3-geo';
+type $$ComponentProps = {
+    scaledData: ScaledDataRecord[];
+    path: GeoPath;
+    /** Symbol key used to retrieve the DensityGeometry from each datum. */
+    geomKey: symbol;
+    fill: string;
+    stroke: string;
+    strokeWidth?: number;
+    strokeOpacity?: number;
+    fillOpacity?: number;
+    opacity?: number;
+    strokeMiterlimit?: number;
+};
+declare const DensityCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
+type DensityCanvas = ReturnType<typeof DensityCanvas>;
+export default DensityCanvas;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.12.0-pr-532.3",
+    "version": "0.12.0-pr-532.5",
     "description": "A Svelte-native data visualization framework based on the layered grammar of graphics principles.",
     "keywords": [
         "svelte",