svelteplot 0.9.2 → 0.10.0

package/dist/marks/TickY.svelte

@@ -19,8 +19,10 @@
          * length of the tick. Defaults to 10 pixel
          */
         tickLength?: ConstantAccessor<number, Datum>;
+        canvas?: boolean;
     }
     import Mark from '../Mark.svelte';
+    import TickCanvas from './helpers/TickCanvas.svelte';
     import { getContext } from 'svelte';
     import { resolveChannel, resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
     import type {
@@ -47,6 +49,7 @@
     const {
         data = [{}],
         class: className = '',
+        canvas = false,
         ...options
     }: TickYMarkProps = $derived({
         ...DEFAULTS,
@@ -64,40 +67,44 @@
     channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']}
     {...markProps}
     {...args}>
-    {#snippet children({ mark, usedScales })}
-        <g class="tick-y">
-            {#each args.data as datum, i (i)}
-                {#if testFacet(datum, mark.options) && testFilter(datum, args)}
-                    {@const y_ = resolveChannel('y', datum, args)}
-                    {@const x_ = resolveChannel('x', datum, args)}
-                    {@const inset_ = resolveProp(args.inset, datum, 0)}
-                    {@const tickLength_ = resolveProp(args.tickLength, datum, 10)}
-                    {@const dx_ = resolveProp(args.dx, datum, 0)}
-                    {@const dy_ = resolveProp(args.dy, datum, 0)}
-                    {#if isValid(y_) && (isValid(x_) || args.x == null)}
-                        {@const y = usedScales.y ? projectY('y', plot.scales, y_) : y_}
-                        {@const x1 =
-                            args.x != null
-                                ? usedScales.x
-                                    ? projectX('x1', plot.scales, x_)
-                                    : x_
-                                : plot.options.marginLeft}
-                        {@const x2 =
-                            args.x != null
-                                ? usedScales.x
-                                    ? projectX('x2', plot.scales, x_)
-                                    : x_
-                                : plot.options.marginLeft + plot.facetWidth}
-                        {@const inset = parseInset(inset_, Math.abs(x2 - x1))}
-                        <line
-                            transform="translate({dx_}, {y + dy_})"
-                            style={resolveScaledStyles(datum, args, usedScales, plot, 'stroke')}
-                            x1={x1 + inset + (x1 === x2 ? tickLength_ * 0.5 : 0)}
-                            x2={x2 - inset - (x1 === x2 ? tickLength_ * 0.5 : 0)} />
+    {#snippet children({ mark, usedScales, scaledData })}
+        {#if canvas}
+            <TickCanvas data={scaledData} options={args} {usedScales} orientation="horizontal" />
+        {:else}
+            <g class="tick-y">
+                {#each args.data as datum, i (i)}
+                    {#if testFacet(datum, mark.options) && testFilter(datum, args)}
+                        {@const y_ = resolveChannel('y', datum, args)}
+                        {@const x_ = resolveChannel('x', datum, args)}
+                        {@const inset_ = resolveProp(args.inset, datum, 0)}
+                        {@const tickLength_ = resolveProp(args.tickLength, datum, 10)}
+                        {@const dx_ = resolveProp(args.dx, datum, 0)}
+                        {@const dy_ = resolveProp(args.dy, datum, 0)}
+                        {#if isValid(y_) && (isValid(x_) || args.x == null)}
+                            {@const y = usedScales.y ? projectY('y', plot.scales, y_) : y_}
+                            {@const x1 =
+                                args.x != null
+                                    ? usedScales.x
+                                        ? projectX('x1', plot.scales, x_)
+                                        : x_
+                                    : plot.options.marginLeft}
+                            {@const x2 =
+                                args.x != null
+                                    ? usedScales.x
+                                        ? projectX('x2', plot.scales, x_)
+                                        : x_
+                                    : plot.options.marginLeft + plot.facetWidth}
+                            {@const inset = parseInset(inset_, Math.abs(x2 - x1))}
+                            <line
+                                transform="translate({dx_}, {y + dy_})"
+                                style={resolveScaledStyles(datum, args, usedScales, plot, 'stroke')}
+                                x1={x1 + inset + (x1 === x2 ? tickLength_ * 0.5 : 0)}
+                                x2={x2 - inset - (x1 === x2 ? tickLength_ * 0.5 : 0)} />
+                        {/if}
                     {/if}
-                {/if}
-            {/each}
-        </g>
+                {/each}
+            </g>
+        {/if}
     {/snippet}
 </Mark>
 

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

@@ -79,6 +79,7 @@ declare function $$render<Datum extends DataRow>(): {
          * length of the tick. Defaults to 10 pixel
          */
         tickLength?: ConstantAccessor<number, Datum>;
+        canvas?: boolean;
     };
     exports: {};
     bindings: "";

package/dist/marks/Vector.svelte

@@ -48,7 +48,7 @@
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { usePlot } from '../hooks/usePlot.svelte.js';
 
-    const defaultRadius = 3.5;
+    const defaultRadius = 3;
 
     // The size of the arrowhead is proportional to its length, but we still allow
     // the relative size of the head to be controlled via the mark's width option;
@@ -58,14 +58,14 @@
 
     let markProps: VectorMarkProps = $props();
     const DEFAULTS = {
-        ...getPlotDefaults().vector
+        ...getPlotDefaults().vector,
+        r: defaultRadius
     };
     const {
         data = [{}],
         canvas,
         shape = 'arrow',
         anchor = 'middle',
-        r = defaultRadius,
         ...options
     }: VectorMarkProps = $derived({
         ...DEFAULTS,
@@ -74,9 +74,6 @@
 
     const plot = usePlot();
 
-    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
-    const testFacet = $derived(getTestFacet());
-
     const shapeArrow: ShapeRenderer = {
         draw(context: D3Path, l: number, r: number) {
             const wing = (l * r) / wingRatio;
@@ -168,15 +165,14 @@
         'strokeOpacity'
     ]}
     {...args}>
-    {#snippet children({ mark, scaledData, usedScales })}
+    {#snippet children({ scaledData, usedScales })}
         <g class="vector" data-l={usedScales.length}>
             {#if canvas}
                 <text x="30" y="30" style="color:red"
                     >implement canvas rendering for vector mark</text>
             {:else}
                 {#each scaledData as d, i (i)}
-                    {@const r = resolveChannel('r', d.datum, { r: 3, ...args })}
-                    {#if d.valid && isValid(r)}
+                    {#if d.valid && isValid(d.r)}
                         {@const [style, styleClass] = resolveStyles(
                             plot,
                             d,
@@ -190,7 +186,7 @@
                             usedScales
                         )}
                         <path
-                            d={shapePath(shape, d.length, r)}
+                            d={shapePath(shape, d.length, d.r)}
                             transform="translate({d.x}, {d.y}) rotate({resolveProp(
                                 args.rotate,
                                 d.datum,

package/dist/marks/helpers/Marker.svelte

@@ -22,9 +22,10 @@
         id: string;
         shape: MarkerShape;
         color: string;
+        markerScale?: number;
     };
 
-    let { id, shape, color }: MarkerProps = $props();
+    let { id, shape, color, markerScale = 1 }: MarkerProps = $props();
 
     const tickMarker = (orient: number | 'auto') => ({
         viewBox: '-3 -3 6 6',
@@ -81,10 +82,10 @@
 <marker
     {id}
     viewBox={MARKERS[shape].viewBox || '-5 -5 10 10'}
-    markerWidth={MARKERS[shape].width}
+    markerWidth={MARKERS[shape].width * markerScale}
     orient={MARKERS[shape].orient}
-    markerHeight={MARKERS[shape].height}
-    stroke-width="1.5"
+    markerHeight={MARKERS[shape].height * markerScale}
+    stroke-width={Math.max(0, Math.min(100, 1.5 / markerScale))}
     {...markerColors}>
     {#if shape === 'dot' || shape === 'circle' || shape === 'circle-stroke'}
         <circle r={defaultDotRadius} />

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

@@ -3,6 +3,7 @@ type MarkerProps = {
     id: string;
     shape: MarkerShape;
     color: string;
+    markerScale?: number;
 };
 /** Marker is a helper component that creates a marker for use in a line or path. */
 declare const Marker: import("svelte").Component<MarkerProps, {}, "">;

package/dist/marks/helpers/MarkerPath.svelte

@@ -39,6 +39,10 @@
          * shorthand for setting all markers
          */
         marker?: boolean | MarkerShape;
+        /**
+         * scale factor for marker size, relative to the line stroke width
+         */
+        markerScale?: ConstantAccessor<number>;
         /**
          * path string
          */
@@ -61,6 +65,7 @@
         markerMid,
         markerEnd,
         marker,
+        markerScale,
         d,
         dInv,
         style,
@@ -88,6 +93,7 @@
     // use reversed path if the path is not left to right
     const textPath = $derived(!text || leftToRight ? d : dInv);
     const strokeWidth_ = $derived(resolveProp(strokeWidth, datum, 1.4));
+    const markerScale_ = $derived(resolveProp(markerScale, datum, 1));
 </script>
 
 <g
@@ -107,7 +113,8 @@
             <Marker
                 id={markerId}
                 shape={marker === true ? 'circle' : resolveProp(marker, datum)}
-                {color} />
+                {color}
+                markerScale={markerScale_} />
         {/if}
     {/each}
     {#if mark.options.onmouseenter || mark.options.onclick}

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

@@ -87,6 +87,10 @@ declare function $$render<Datum extends DataRecord>(): {
          * shorthand for setting all markers
          */
         marker?: boolean | MarkerShape;
+        /**
+         * scale factor for marker size, relative to the line stroke width
+         */
+        markerScale?: ConstantAccessor<number>;
         /**
          * path string
          */

package/dist/marks/helpers/RuleCanvas.svelte

@@ -0,0 +1,175 @@
+<!--
+@component
+Helper component for rendering Rule marks (RuleX and RuleY) in canvas
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    interface RuleCanvasProps {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum> & {
+            inset?: ConstantAccessor<number, Datum>;
+            insetTop?: ConstantAccessor<number, Datum>;
+            insetBottom?: ConstantAccessor<number, Datum>;
+            insetLeft?: ConstantAccessor<number, Datum>;
+            insetRight?: ConstantAccessor<number, Datum>;
+        };
+        usedScales: UsedScales;
+        orientation: 'vertical' | 'horizontal';
+        marginTop?: number;
+        marginLeft?: number;
+        facetWidth?: number;
+        facetHeight?: number;
+    }
+
+    import type {
+        BaseMarkProps,
+        ConstantAccessor,
+        DataRecord,
+        ScaledDataRecord,
+        UsedScales
+    } from '../../types/index.js';
+    import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
+    import type { Attachment } from 'svelte/attachments';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { resolveColor } from './canvas.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+
+    const plot = usePlot();
+
+    let {
+        data,
+        options,
+        usedScales,
+        orientation,
+        marginTop = plot.options.marginTop,
+        marginLeft = plot.options.marginLeft,
+        facetWidth = plot.facetWidth,
+        facetHeight = plot.facetHeight
+    }: RuleCanvasProps = $props();
+
+    function maybeOpacity(value: unknown) {
+        return value == null ? 1 : +value;
+    }
+
+    const render: Attachment = (canvasEl: Element) => {
+        const canvas = canvasEl as HTMLCanvasElement;
+        const context = canvas.getContext('2d');
+
+        $effect(() => {
+            if (context) {
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+                for (const datum of data) {
+                    if (!datum.valid) continue;
+
+                    let { stroke, ...restStyles } = resolveScaledStyleProps(
+                        datum.datum,
+                        options,
+                        usedScales,
+                        plot,
+                        'stroke'
+                    );
+
+                    const opacity = maybeOpacity(restStyles['opacity']);
+                    const strokeOpacity = maybeOpacity(restStyles['stroke-opacity']);
+
+                    stroke = resolveColor(stroke || 'currentColor', canvas);
+
+                    if (stroke && stroke !== 'none') {
+                        const resolvedLinecap = restStyles['stroke-linecap'] as
+                            | CanvasLineCap
+                            | undefined
+                            | null;
+                        const strokeWidth = resolveProp(
+                            options.strokeWidth,
+                            datum.datum,
+                            1
+                        ) as number;
+                        context.lineCap =
+                            resolvedLinecap === 'round' ||
+                            resolvedLinecap === 'square' ||
+                            resolvedLinecap === 'butt'
+                                ? resolvedLinecap
+                                : 'butt';
+                        context.lineWidth = strokeWidth;
+                        context.strokeStyle = stroke;
+                        context.globalAlpha = opacity * strokeOpacity;
+
+                        context.beginPath();
+
+                        if (orientation === 'vertical') {
+                            // RuleX: vertical line
+                            const x = datum.x;
+                            const inset = +(resolveProp(options.inset, datum.datum, 0) as number);
+                            const insetTop = +(resolveProp(
+                                options.insetTop,
+                                datum.datum,
+                                0
+                            ) as number);
+                            const insetBottom = +(resolveProp(
+                                options.insetBottom,
+                                datum.datum,
+                                0
+                            ) as number);
+
+                            const y1 =
+                                (inset || insetTop) +
+                                (datum.y1 != null ? datum.y1 : marginTop + (datum.dy ?? 0));
+                            const y2 =
+                                (datum.y2 != null
+                                    ? datum.y2
+                                    : facetHeight + marginTop + (datum.dy ?? 0)) -
+                                (inset || insetBottom);
+
+                            if (x != null) {
+                                context.moveTo(x, y1);
+                                context.lineTo(x, y2);
+                            }
+                        } else {
+                            // RuleY: horizontal line
+                            const y = datum.y;
+                            const inset = +(resolveProp(options.inset, datum.datum, 0) as number);
+                            const insetLeft = +(resolveProp(
+                                options.insetLeft,
+                                datum.datum,
+                                0
+                            ) as number);
+                            const insetRight = +(resolveProp(
+                                options.insetRight,
+                                datum.datum,
+                                0
+                            ) as number);
+
+                            const x1 =
+                                (inset || insetLeft) +
+                                (datum.x1 != null ? datum.x1 : marginLeft + (datum.dx ?? 0));
+                            const x2 =
+                                (datum.x2 != null
+                                    ? datum.x2
+                                    : facetWidth + marginLeft + (datum.dx ?? 0)) -
+                                (inset || insetRight);
+
+                            if (y != null) {
+                                context.moveTo(x1, y);
+                                context.lineTo(x2, y);
+                            }
+                        }
+
+                        context.stroke();
+                    }
+                }
+            }
+
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+<CanvasLayer {@attach render} />

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

@@ -0,0 +1,41 @@
+import type { BaseMarkProps, ConstantAccessor, DataRecord, ScaledDataRecord, UsedScales } from '../../types/index.js';
+declare function $$render<Datum extends DataRecord>(): {
+    props: {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum> & {
+            inset?: ConstantAccessor<number, Datum>;
+            insetTop?: ConstantAccessor<number, Datum>;
+            insetBottom?: ConstantAccessor<number, Datum>;
+            insetLeft?: ConstantAccessor<number, Datum>;
+            insetRight?: ConstantAccessor<number, Datum>;
+        };
+        usedScales: UsedScales;
+        orientation: "vertical" | "horizontal";
+        marginTop?: number;
+        marginLeft?: number;
+        facetWidth?: number;
+        facetHeight?: number;
+    };
+    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']>;
+}
+/** Helper component for rendering Rule marks (RuleX and RuleY) in canvas */
+declare const RuleCanvas: $$IsomorphicComponent;
+type RuleCanvas<Datum extends DataRecord> = InstanceType<typeof RuleCanvas<Datum>>;
+export default RuleCanvas;