svelteplot 0.2.0 → 0.2.2

package/dist/marks/Geo.svelte

@@ -1,15 +1,22 @@
 <script lang="ts">
     import { getContext } from 'svelte';
-    import type { DataRecord, PlotContext, BaseMarkProps } from '../types.js';
+    import type {
+        DataRecord,
+        PlotContext,
+        BaseMarkProps,
+        FacetContext,
+        ConstantAccessor,
+        UsedScales
+    } from '../types.js';
     import Mark from '../Mark.svelte';
     import { geoPath } from 'd3-geo';
-    import { resolveChannel, resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
-    import { getUsedScales } from '../helpers/scales.js';
+    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import callWithProps from '../helpers/callWithProps.js';
     import { sort } from '../index.js';
-    import { testFilter } from '../helpers/index.js';
     import { addEventHandlers } from './helpers/events.js';
     import GeoCanvas from './helpers/GeoCanvas.svelte';
+    import { recordize } from '../transforms/recordize.js';
+    import { GEOJSON_PREFER_STROKE } from '../helpers/index.js';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -19,6 +26,8 @@
         geoType?: 'sphere' | 'graticule';
         dragRotate: boolean;
         canvas: boolean;
+        href: ConstantAccessor<string>;
+        target: ConstantAccessor<string>;
     } & BaseMarkProps;
 
     let {
@@ -39,60 +48,60 @@
     );
 
     const args = $derived(
-        sort({
-            data,
-            ...(options.r ? { sort: { channel: '-r' } } : {}),
-            ...options
-        })
+        sort(
+            recordize({
+                data,
+                ...(options.r ? { sort: { channel: '-r' } } : {}),
+                ...options
+            })
+        )
     );
-    const preferStroke = new Set(['MultiLineString', 'LineString']);
-
-    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
-    const testFacet = $derived(getTestFacet());
 </script>
 
 <Mark
     type="geo"
     channels={['fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity', 'r']}
     {...args}>
-    {#snippet children({ mark, usedScales })}
+    {#snippet children({ mark, scaledData, usedScales })}
+        {#snippet el(d)}
+            {@const title = resolveProp(args.title, d.datum, '')}
+            {@const geometry = resolveProp(args.geometry, d.datum, d.datum)}
+            {@const [style, styleClass] = resolveStyles(
+                plot,
+                d,
+                args,
+                GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill',
+                usedScales
+            )}
+            <path
+                d={path(geometry)}
+                {style}
+                class={[styleClass]}
+                use:addEventHandlers={{
+                    getPlotState,
+                    options: args,
+                    datum: d.datum
+                }}>
+                {#if title}<title>{title}</title>{/if}
+            </path>
+        {/snippet}
         <g
             aria-label="geo"
             class={['geo', geoType && `geo-${geoType}`, className]}
             style="fill:currentColor">
             {#if canvas}
-                <GeoCanvas data={args.data} {mark} {plot} {testFacet} {usedScales} {path} />
+                <GeoCanvas data={scaledData} {path} {mark} {usedScales} />
             {:else}
-                {#each args.data as datum}
-                    {#if testFilter(datum, mark.options) && testFacet(datum, mark.options)}
-                        {#snippet el(datum)}
-                            {@const title = resolveProp(args.title, datum, '')}
-                            {@const geometry = resolveProp(args.geometry, datum, datum)}
-                            <path
-                                d={path(geometry)}
-                                style={resolveScaledStyles(
-                                    datum,
-                                    args,
-                                    usedScales,
-                                    plot,
-                                    preferStroke.has(geometry.type) ? 'stroke' : 'fill'
-                                )}
-                                use:addEventHandlers={{
-                                    getPlotState,
-                                    options: args,
-                                    datum
-                                }}>
-                                {#if title}<title>{title}</title>{/if}
-                            </path>
-                        {/snippet}
+                {#each scaledData as d}
+                    {#if d.valid}
                         {#if options.href}
                             <a
-                                href={resolveProp(args.href, datum, '')}
-                                target={resolveProp(args.target, datum, '_self')}>
-                                {@render el(datum)}
+                                href={resolveProp(args.href, d.datum, '')}
+                                target={resolveProp(args.target, d.datum, '_self')}>
+                                {@render el(d)}
                             </a>
                         {:else}
-                            {@render el(datum)}
+                            {@render el(d)}
                         {/if}
                     {/if}
                 {/each}

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

@@ -1,9 +1,11 @@
-import type { DataRecord, BaseMarkProps } from '../types.js';
+import type { DataRecord, BaseMarkProps, ConstantAccessor } from '../types.js';
 type GeoMarkProps = {
     data: DataRecord[];
     geoType?: 'sphere' | 'graticule';
     dragRotate: boolean;
     canvas: boolean;
+    href: ConstantAccessor<string>;
+    target: ConstantAccessor<string>;
 } & BaseMarkProps;
 declare const Geo: import("svelte").Component<GeoMarkProps, {}, "">;
 type Geo = ReturnType<typeof Geo>;

package/dist/marks/GridX.svelte

@@ -39,9 +39,9 @@
 
 <Mark
     type="gridX"
-    data={data.length ? data.map((tick) => ({ __x: tick })) : []}
+    data={data.length ? data.map((tick) => ({ [RAW_VALUE]: tick })) : []}
     channels={['y1', 'y2', 'x', 'stroke', 'strokeOpacity']}
-    {...{ ...options, x: '__x' }}
+    {...{ ...options, x: RAW_VALUE }}
     {automatic}>
     {#snippet children({ usedScales })}
         <g class="grid-x">

package/dist/marks/GridY.svelte

@@ -36,9 +36,9 @@
 
 <Mark
     type="gridY"
-    data={data.length ? data.map((tick) => ({ ___orig___: tick })) : []}
+    data={data.length ? data.map((tick) => ({ [RAW_VALUE]: tick })) : []}
     channels={['x1', 'x2', 'y', 'stroke', 'strokeOpacity']}
-    {...{ ...options, y: '___orig___' }}
+    {...{ ...options, y: RAW_VALUE }}
     {automatic}>
     {#snippet children({ usedScales })}
         <g class="grid-y">

package/dist/marks/Line.svelte

@@ -18,8 +18,9 @@
         data: DataRecord[];
         z?: ChannelAccessor;
         stroke?: ChannelAccessor;
-        outlineStroke?: ConstantAccessor<string>;
-        outlineStrokeWidth?: ConstantAccessor<number>;
+        outlineStroke?: string;
+        outlineStrokeWidth?: number;
+        outlineStrokeOpacity?: number;
         dx?: ConstantAccessor<number>;
         dy?: ConstantAccessor<number>;
         curve?: CurveName | CurveFactory;
@@ -31,6 +32,7 @@
         textStartOffset?: ConstantAccessor<string>;
         textStrokeWidth?: ConstantAccessor<number>;
         lineClass?: ConstantAccessor<string>;
+        canvas?: boolean;
     } & MarkerOptions;
 </script>
 
@@ -39,11 +41,12 @@
     import MarkerPath from './helpers/MarkerPath.svelte';
     import { getContext } from 'svelte';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { line, type CurveFactory } from 'd3-shape';
+    import { line, type CurveFactory, type Line } from 'd3-shape';
     import { geoPath } from 'd3-geo';
     import callWithProps from '../helpers/callWithProps.js';
     import { maybeCurve } from '../helpers/curves.js';
     import { pick } from 'es-toolkit';
+    import LineCanvas from './helpers/LineCanvas.svelte';
 
     type LineMarkProps = BaseMarkProps & {
         x?: ChannelAccessor;
@@ -61,6 +64,7 @@
         curve = 'auto',
         tension = 0,
         text,
+        canvas = false,
         class: className = null,
         lineClass = null,
         ...options
@@ -96,9 +100,7 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
-    type LinePath = (dr: DataRecord[]) => string;
-
-    const linePath: LinePath = $derived(
+    const linePath: Line<ScaledDataRecord> = $derived(
         plot.scales.projection && curve === 'auto'
             ? sphereLine(plot.scales.projection)
             : callWithProps(line, [], {
@@ -111,7 +113,7 @@
 
     function sphereLine(projection) {
         const path = geoPath(projection);
-        return (lineData: ScaledDataRecord[]) => {
+        const fn = (lineData: ScaledDataRecord[]) => {
             let line = [];
             const lines = [line];
             for (const { x, y } of lineData) {
@@ -125,6 +127,8 @@
             }
             return path({ type: 'MultiLineString', coordinates: lines });
         };
+        fn.context = path.context;
+        return fn;
     }
 </script>
 
@@ -135,88 +139,102 @@
     {...args}>
     {#snippet children({ mark, usedScales, scaledData })}
         {#if scaledData.length > 0}
-            <g class={['lines', className]}>
-                {#each groupIndex(scaledData, groupByKey) as lineData, i}
-                    {@const pathString = linePath(lineData)}
-                    {#if pathString}
-                        <GroupMultiple class={resolveProp(lineClass, lineData[0])}>
-                            {#if options.outlineStroke}
-                                {@const [outlineStyle, outlineStyleClass] = resolveStyles(
+            {@const groupedLineData = groupIndex(scaledData, groupByKey)};
+            {#if canvas}
+                <LineCanvas {groupedLineData} {mark} {usedScales} {linePath} {groupByKey} />
+            {:else}
+                <g class={['lines', className]}>
+                    {#each groupedLineData as lineData, i}
+                        {@const pathString = linePath(lineData)}
+                        {#if pathString}
+                            <GroupMultiple class={resolveProp(lineClass, lineData[0])}>
+                                {#if options.outlineStroke}
+                                    {@const [outlineStyle, outlineStyleClass] = resolveStyles(
+                                        plot,
+                                        { ...lineData[0], stroke: options.outlineStroke },
+                                        {
+                                            strokeLinejoin: 'round',
+                                            ...args,
+                                            stroke: options.outlineStroke,
+                                            strokeOpacity: options.outlineStrokeOpacity ?? 1,
+                                            strokeWidth:
+                                                options.outlineStrokeWidth ||
+                                                resolveProp(
+                                                    options.strokeWidth,
+                                                    lineData[0].datum,
+                                                    1.4
+                                                ) + 2
+                                        },
+                                        'stroke',
+                                        usedScales
+                                    )}
+                                    <path
+                                        d={pathString}
+                                        style={outlineStyle}
+                                        class={['is-outline', outlineStyleClass]} />
+                                {/if}
+                                {@const [style, styleClass] = resolveStyles(
                                     plot,
-                                    { ...lineData[0], stroke: options.outlineStroke },
+                                    lineData[0],
                                     {
+                                        strokeWidth: 1.4,
                                         strokeLinejoin: 'round',
                                         ...args,
-                                        stroke: options.outlineStroke,
-                                        strokeWidth:
-                                            options.outlineStrokeWidth ||
-                                            (+options.strokeWidth || 1.4) + 2
+                                        stroke: lineData[0].stroke
                                     },
                                     'stroke',
                                     usedScales
                                 )}
-                                <path
+                                {@const [textStyle, textStyleClass] = resolveStyles(
+                                    plot,
+                                    lineData[0],
+                                    {
+                                        textAnchor: 'middle',
+                                        ...pick(args, [
+                                            'fontSize',
+                                            'fontWeight',
+                                            'fontStyle',
+                                            'textAnchor'
+                                        ]),
+                                        strokeWidth: args.textStrokeWidth
+                                            ? args.textStrokeWidth
+                                            : args.textStroke
+                                              ? 2
+                                              : 0,
+                                        fill: args.textFill || args.stroke,
+                                        stroke: args.textStroke
+                                    },
+                                    'fill',
+                                    usedScales,
+                                    true
+                                )}
+                                <MarkerPath
+                                    {mark}
+                                    scales={plot.scales}
+                                    markerStart={args.markerStart}
+                                    markerMid={args.markerMid}
+                                    markerEnd={args.markerEnd}
+                                    marker={args.marker}
+                                    strokeWidth={args.strokeWidth}
+                                    datum={lineData[0]}
                                     d={pathString}
-                                    style={outlineStyle}
-                                    class={['is-outline', outlineStyleClass]} />
-                            {/if}
-                            {@const [style, styleClass] = resolveStyles(
-                                plot,
-                                lineData[0],
-                                {
-                                    strokeWidth: 1.4,
-                                    strokeLinejoin: 'round',
-                                    ...args,
-                                    stroke: lineData[0].stroke
-                                },
-                                'stroke',
-                                usedScales
-                            )}
-                            {@const [textStyle, textStyleClass] = resolveStyles(
-                                plot,
-                                lineData[0],
-                                {
-                                    textAnchor: 'middle',
-                                    ...pick(args, [
-                                        'fontSize',
-                                        'fontWeight',
-                                        'fontStyle',
-                                        'textAnchor'
-                                    ]),
-                                    strokeWidth: args.textStrokeWidth
-                                        ? args.textStrokeWidth
-                                        : args.textStroke
-                                          ? 2
-                                          : 0,
-                                    fill: args.textFill || args.stroke,
-                                    stroke: args.textStroke
-                                },
-                                'fill',
-                                usedScales,
-                                true
-                            )}
-                            <MarkerPath
-                                {mark}
-                                scales={plot.scales}
-                                markerStart={args.markerStart}
-                                markerMid={args.markerMid}
-                                markerEnd={args.markerEnd}
-                                marker={args.marker}
-                                strokeWidth={args.strokeWidth}
-                                datum={lineData[0]}
-                                d={pathString}
-                                dInv={text ? linePath(lineData.toReversed()) : null}
-                                color={lineData[0].stroke || 'currentColor'}
-                                {style}
-                                class={styleClass}
-                                text={text ? resolveProp(text, lineData[0]) : null}
-                                startOffset={resolveProp(args.textStartOffset, lineData[0], '50%')}
-                                {textStyle}
-                                {textStyleClass} />
-                        </GroupMultiple>
-                    {/if}
-                {/each}
-            </g>
+                                    dInv={text ? linePath(lineData.toReversed()) : null}
+                                    color={lineData[0].stroke || 'currentColor'}
+                                    {style}
+                                    class={styleClass}
+                                    text={text ? resolveProp(text, lineData[0]) : null}
+                                    startOffset={resolveProp(
+                                        args.textStartOffset,
+                                        lineData[0],
+                                        '50%'
+                                    )}
+                                    {textStyle}
+                                    {textStyleClass} />
+                            </GroupMultiple>
+                        {/if}
+                    {/each}
+                </g>
+            {/if}
         {/if}
     {/snippet}
 </Mark>

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

@@ -3,8 +3,9 @@ export type BaseLineMarkProps = {
     data: DataRecord[];
     z?: ChannelAccessor;
     stroke?: ChannelAccessor;
-    outlineStroke?: ConstantAccessor<string>;
-    outlineStrokeWidth?: ConstantAccessor<number>;
+    outlineStroke?: string;
+    outlineStrokeWidth?: number;
+    outlineStrokeOpacity?: number;
     dx?: ConstantAccessor<number>;
     dy?: ConstantAccessor<number>;
     curve?: CurveName | CurveFactory;
@@ -18,8 +19,9 @@ export type BaseLineMarkProps = {
     textStartOffset?: ConstantAccessor<string>;
     textStrokeWidth?: ConstantAccessor<number>;
     lineClass?: ConstantAccessor<string>;
+    canvas?: boolean;
 } & MarkerOptions;
-import { type CurveFactory } from 'd3-shape';
+import { type CurveFactory, type Line } from 'd3-shape';
 import type { RawValue } from '../types.js';
 type LineMarkProps = BaseMarkProps & {
     x?: ChannelAccessor;

package/dist/marks/Pointer.svelte

@@ -31,6 +31,7 @@
     import { quadtree } from 'd3-quadtree';
     import { projectXY } from '../helpers/scales.js';
     import isDataRecord from '../helpers/isDataRecord.js';
+    import { RAW_VALUE } from '../transforms/recordize.js';
 
     let {
         data = [{}],
@@ -109,7 +110,7 @@
                             true
                         );
                         return {
-                            ...(isDataRecord(d) ? d : { ___orig___: d }),
+                            ...(isDataRecord(d) ? d : { [RAW_VALUE]: d }),
                             __pointerX: px,
                             __pointerY: py
                         };

package/dist/marks/Rect.svelte

@@ -17,6 +17,7 @@
     } from '../types.js';
     import { addEventHandlers } from './helpers/events.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import RectPath from './helpers/RectPath.svelte';
 
     type RectMarkProps = BaseMarkProps & {
         data: DataRecord[];
@@ -57,31 +58,16 @@
                     {@const maxy = Math.max(y1, y2)}
                     {@const minx = Math.min(x1, x2)}
                     {@const maxx = Math.max(x1, x2)}
-                    {@const inset = resolveProp(args.inset, d.datum, 0)}
-                    {@const insetLeft = resolveProp(args.insetLeft, d.datum)}
-                    {@const insetRight = resolveProp(args.insetRight, d.datum)}
-                    {@const insetTop = resolveProp(args.insetTop, d.datum)}
-                    {@const insetBottom = resolveProp(args.insetBottom, d.datum)}
-                    {@const insetL = maybeNumber(coalesce(insetLeft, inset, 0)) ?? 0}
-                    {@const insetT = maybeNumber(coalesce(insetTop, inset, 0)) ?? 0}
-                    {@const insetR = maybeNumber(coalesce(insetRight, inset, 0)) ?? 0}
-                    {@const insetB = maybeNumber(coalesce(insetBottom, inset, 0)) ?? 0}
 
-                    {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
-                    <rect
-                        class={[scaledData.length === 1 && className, styleClass]}
-                        {style}
-                        x={minx + insetL}
-                        y={miny + insetT}
-                        width={maxx - minx - insetL - insetR}
-                        height={maxy - miny - insetT - insetB}
-                        rx={resolveProp(args.rx, d.datum, null)}
-                        ry={resolveProp(args.ry, d.datum, null)}
-                        use:addEventHandlers={{
-                            getPlotState,
-                            options: args,
-                            datum: d.datum
-                        }} />
+                    <RectPath
+                        datum={d}
+                        class={scaledData.length === 1 ? className : null}
+                        x={minx}
+                        y={miny}
+                        width={maxx - minx}
+                        height={maxy - miny}
+                        options={args}
+                        {usedScales} />
                 {/if}
             {/each}
         </GroupMultiple>

package/dist/marks/helpers/CanvasLayer.svelte

@@ -1,18 +1,12 @@
 <script lang="ts">
-    let {
-        canvas = $bindable(),
-        devicePixelRatio = $bindable(1),
-        plot
-    }: {
-        canvas: HTMLCanvasElement;
-        devicePixelRatio: number;
-        plot: PlotState;
-    } = $props();
+    import { getContext } from 'svelte';
+    import type { PlotContext } from '../../types';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
 
-    $effect(() => {
-        devicePixelRatio = window.devicePixelRatio || 1;
-        const ctx = canvas.getContext('2d');
-    });
+    let restProps: {} = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
 </script>
 
 <!-- 
@@ -24,9 +18,9 @@
 <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}
+        {...restProps}
+        width={plot.width * (devicePixelRatio.current ?? 1)}
+        height={plot.height * (devicePixelRatio.current ?? 1)}
         style="width: {plot.width}px; height: {plot.height}px;"></canvas>
 </foreignObject>
 

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

@@ -1,13 +1,9 @@
-type $$ComponentProps = {
-    canvas: HTMLCanvasElement;
-    devicePixelRatio: number;
-    plot: PlotState;
-};
+type $$ComponentProps = {};
 /**
  * The CanvasLayer component is a helper component that inserts a
  * canvas element inside a foreignObject for use in a plot and takes care of
  * scaling it to the device pixel ratio.
  */
-declare const CanvasLayer: import("svelte").Component<$$ComponentProps, {}, "canvas" | "devicePixelRatio">;
+declare const CanvasLayer: import("svelte").Component<$$ComponentProps, {}, "">;
 type CanvasLayer = ReturnType<typeof CanvasLayer>;
 export default CanvasLayer;