svelteplot 0.4.1 → 0.4.2

package/dist/Mark.svelte

@@ -211,8 +211,8 @@
                 valid: true
             };
             // compute dx/dy
-            const dx = Number(resolveProp<number>(options.dx, out.datum, 0));
-            const dy = Number(resolveProp<number>(options.dy, out.datum, 0));
+            out.dx = Number(resolveProp<number>(options.dx, out.datum, 0));
+            out.dy = Number(resolveProp<number>(options.dy, out.datum, 0));
 
             // special handling if there's a projection, e.g. a line mark
             if (plot.scales.projection && mark.type !== 'geo') {
@@ -271,7 +271,7 @@
                     // apply dx/dy transform
                     out[channel] =
                         Number.isFinite(scaled) && (scale === 'x' || scale === 'y')
-                            ? scaled + (scale === 'x' ? dx : dy)
+                            ? scaled + (scale === 'x' ? out.dx : out.dy)
                             : scaled;
                 } else if (defaults[channel]) {
                     out[channel] = defaults[channel];

package/dist/helpers/resolve.d.ts

@@ -3,7 +3,7 @@ import type { ScaleName, ChannelName, ScaledChannelName, ChannelAccessor, DataRo
 type ChannelAlias = {
     channel: ScaledChannelName;
 };
-export declare function resolveProp<T>(accessor: ConstantAccessor<T>, datum: DataRecord | null, _defaultValue?: T | null): T | typeof _defaultValue;
+export declare function resolveProp<K, T>(accessor: ConstantAccessor<K, T>, datum: DataRecord | null, _defaultValue?: K | null): K | typeof _defaultValue;
 type ChannelOptions = {
     value: ChannelAccessor;
     scale?: ScaleName | null;

package/dist/helpers/resolve.js

@@ -128,7 +128,9 @@ export function resolveStyles(plot, datum, channels, defaultColorProp = null, us
         ...getBaseStylesObject(datum?.datum, channels),
         fill: 'none',
         stroke: 'none',
-        ...(defaultColorProp && channels[oppositeColor[defaultColorProp]] == null
+        ...(defaultColorProp &&
+            (channels[oppositeColor[defaultColorProp]] == null ||
+                channels[oppositeColor[defaultColorProp]] === 'none')
             ? { [defaultColorProp]: 'currentColor' }
             : {}),
         ...Object.fromEntries(Object.entries(scaledStyleProps)
@@ -147,6 +149,9 @@ export function resolveStyles(plot, datum, channels, defaultColorProp = null, us
                     return [cssAttr, plot.options.color.unknown];
                 }
             }
+            else if ((key === 'fill' || key === 'stroke') && value === true) {
+                return [cssAttr, 'currentColor'];
+            }
             return [cssAttr, value];
         }))
     };

package/dist/marks/Frame.svelte

@@ -11,6 +11,7 @@
         stroke?: string;
         fillOpacity?: number;
         strokeOpacity?: number;
+        opacity?: number;
         automatic?: boolean;
         inset?: number;
         insetLeft?: number;
@@ -29,13 +30,14 @@
     } from '../types/index.js';
     import type { BaseMarkProps } from '../types/index.js';
     import RectPath from './helpers/RectPath.svelte';
+    import { resolveProp } from '../helpers/resolve';
 
     let markProps: FrameMarkProps = $props();
 
     const DEFAULTS: FrameMarkProps = {
-        fill: 'none',
+        fill: undefined,
         class: 'frame',
-        stroke: 'currentColor',
+        stroke: undefined,
         fillOpacity: 1,
         strokeOpacity: 1,
         ...getContext<PlotDefaults>('svelteplot/_defaults').frame
@@ -46,6 +48,7 @@
         class: className,
         fill,
         stroke,
+        opacity,
         fillOpacity,
         strokeOpacity,
         ...options
@@ -54,6 +57,9 @@
         ...markProps
     });
 
+    const dx = $derived(resolveProp(options.dx, null, 0) || 0);
+    const dy = $derived(resolveProp(options.dy, null, 0) || 0);
+
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 </script>
@@ -62,13 +68,13 @@
     {#snippet children({ usedScales })}
         <RectPath
             class={className}
-            datum={{ fill, stroke, fillOpacity, strokeOpacity, datum: {}, valid: true }}
-            x={plot.options.marginLeft}
-            y={plot.options.marginTop}
+            datum={{ fill, stroke, fillOpacity, strokeOpacity, opacity, datum: {}, valid: true }}
+            x={plot.options.marginLeft + dx}
+            y={plot.options.marginTop + dy}
             width={plot.facetWidth}
             height={plot.facetHeight}
             {usedScales}
-            fallbackStyle="stroke"
-            options={{ ...options, fill, stroke, fillOpacity, strokeOpacity }} />
+            fallbackStyle={fill == null || fill === 'none' ? 'stroke' : 'fill'}
+            options={{ ...options, fill, stroke, fillOpacity, opacity, strokeOpacity }} />
     {/snippet}
 </Mark>

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

@@ -5,6 +5,7 @@ interface FrameMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'stroke' |
     stroke?: string;
     fillOpacity?: number;
     strokeOpacity?: number;
+    opacity?: number;
     automatic?: boolean;
     inset?: number;
     insetLeft?: number;

package/dist/marks/Link.svelte

@@ -157,8 +157,6 @@
         <g class={['link', className]} data-use-x={usedScales.x ? 1 : 0}>
             {#each scaledData as d, i (i)}
                 {#if d.valid || true}
-                    {@const dx = resolveProp(args.dx, d.datum, 0)}
-                    {@const dy = resolveProp(args.dx, d.datum, 0)}
                     {@const [style, styleClass] = resolveStyles(
                         plot,
                         d,
@@ -196,8 +194,7 @@
                         text={text ? resolveProp(text, d.datum) : null}
                         startOffset={resolveProp(args.textStartOffset, d.datum, '50%')}
                         {textStyle}
-                        {textStyleClass}
-                        transform={dx || dy ? `translate(${dx}, ${dy})` : null} />
+                        {textStyleClass} />
                 {/if}
             {/each}
         </g>

package/dist/marks/Rect.svelte

@@ -31,6 +31,7 @@
     } from '../types/index.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
+    import { resolveProp } from '../helpers/resolve';
 
     let markProps: RectMarkProps = $props();
 
@@ -64,10 +65,12 @@
         <GroupMultiple class={scaledData.length > 1 ? className : null} length={scaledData.length}>
             {#each scaledData as d, i (i)}
                 {#if d.valid}
-                    {@const x1 = d.x1 == null ? plot.options.marginLeft : d.x1}
-                    {@const x2 = d.x2 == null ? plot.options.marginLeft + plot.facetWidth : d.x2}
-                    {@const y1 = d.y1 == null ? plot.options.marginTop : d.y1}
-                    {@const y2 = d.y2 == null ? plot.options.marginTop + plot.facetHeight : d.y2}
+                    {@const x1 = d.x1 == null ? plot.options.marginLeft + d.dx : d.x1}
+                    {@const x2 =
+                        d.x2 == null ? plot.options.marginLeft + plot.facetWidth + d.dx : d.x2}
+                    {@const y1 = d.y1 == null ? plot.options.marginTop + d.dy : d.y1}
+                    {@const y2 =
+                        d.y2 == null ? plot.options.marginTop + plot.facetHeight + d.dy : d.y2}
 
                     {@const miny = Math.min(y1, y2)}
                     {@const maxy = Math.max(y1, y2)}

package/dist/marks/RuleX.svelte

@@ -52,15 +52,13 @@
                 {@const inset = resolveProp(args.inset, d.datum, 0)}
                 {@const insetTop = resolveProp(args.insetTop, d.datum, 0)}
                 {@const insetBottom = resolveProp(args.insetBottom, d.datum, 0)}
-                {@const dx = resolveProp(args.dx, d.datum, 0)}
-                {@const dy = resolveProp(args.dy, d.datum, 0)}
                 {@const [style, styleClass] = resolveStyles(plot, d, args, 'stroke', usedScales)}
                 <line
-                    transform="translate({d.x + dx}, {dy})"
+                    transform="translate({d.x}, 0)"
                     {style}
                     class={[styleClass]}
-                    y1={(inset || insetTop) + (d.y1 != null ? d.y1 : plot.options.marginTop)}
-                    y2={(d.y2 != null ? d.y2 : plot.facetHeight + plot.options.marginTop) -
+                    y1={(inset || insetTop) + (d.y1 != null ? d.y1 : plot.options.marginTop + d.dy)}
+                    y2={(d.y2 != null ? d.y2 : plot.facetHeight + plot.options.marginTop + d.dy) -
                         (inset || insetBottom)} />
             {/each}
         </GroupMultiple>

package/dist/marks/RuleY.svelte

@@ -51,15 +51,14 @@
                 {@const inset = resolveProp(args.inset, d.datum, 0)}
                 {@const insetLeft = resolveProp(args.insetLeft, d.datum, 0)}
                 {@const insetRight = resolveProp(args.insetRight, d.datum, 0)}
-                {@const dx = resolveProp(args.dx, d.datum, 0)}
-                {@const dy = resolveProp(args.dy, d.datum, 0)}
                 {@const [style, styleClass] = resolveStyles(plot, d, args, 'stroke', usedScales)}
                 <line
-                    transform="translate({dx}, {d.y + dy})"
+                    transform="translate(0, {d.y})"
                     {style}
                     class={[styleClass]}
-                    x1={(inset || insetLeft) + (d.x1 != null ? d.x1 : plot.options.marginLeft)}
-                    x2={(d.x2 != null ? d.x2 : plot.facetWidth + plot.options.marginLeft) -
+                    x1={(inset || insetLeft) +
+                        (d.x1 != null ? d.x1 : plot.options.marginLeft + d.dx)}
+                    x2={(d.x2 != null ? d.x2 : plot.facetWidth + plot.options.marginLeft + d.dx) -
                         (inset || insetRight)} />
             {/each}
         </GroupMultiple>

package/dist/marks/Vector.svelte

@@ -177,8 +177,6 @@
                 {#each scaledData as d, i (i)}
                     {@const r = resolveChannel('r', d.datum, { r: 3, ...args })}
                     {#if d.valid && isValid(r)}
-                        {@const dx = +resolveProp(args.dx, d.datum, 0)}
-                        {@const dy = +resolveProp(args.dx, d.datum, 0)}
                         {@const [style, styleClass] = resolveStyles(
                             plot,
                             d,
@@ -193,7 +191,7 @@
                         )}
                         <path
                             d={shapePath(shape, d.length, r)}
-                            transform="translate({d.x + dx}, {d.y + dy}) rotate({resolveProp(
+                            transform="translate({d.x}, {d.y}) rotate({resolveProp(
                                 args.rotate,
                                 d.datum,
                                 0

package/dist/marks/helpers/RectPath.svelte

@@ -58,8 +58,6 @@ Helper component for rendering rectangular marks in SVG
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
-    const dx = $derived(+(resolveProp(options.dx, datum?.datum, 0) as number));
-    const dy = $derived(+(resolveProp(options.dy, datum?.datum, 0) as number));
     const inset = $derived(+(resolveProp(options.inset, datum?.datum, 0) as number));
     const insetLeft = $derived(
         +(resolveProp(
@@ -108,7 +106,7 @@ Helper component for rendering rectangular marks in SVG
 <Anchor {options} datum={datum?.datum}>
     {#if hasBorderRadius}
         <path
-            transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
+            transform="translate({x + insetLeft},{y + insetBottom})"
             d={roundedRect(
                 0,
                 0,
@@ -125,7 +123,7 @@ Helper component for rendering rectangular marks in SVG
             }} />
     {:else}
         <rect
-            transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
+            transform="translate({x + insetLeft},{y + insetBottom})"
             width={width - insetLeft - insetRight}
             height={height - insetTop - insetBottom}
             class={[styleClass, className]}

package/dist/types/data.d.ts

@@ -7,6 +7,8 @@ export type ResolvedDataRecord<T = Record<string | symbol, RawValue>> = Partial<
 export type ScaledDataRecord<T = Record<string | symbol, RawValue>> = Partial<{
     [K in ScaledChannelName]?: ScaledChannelType<K>;
 }> & {
+    dx: number;
+    dy: number;
     datum: DataRecord<T>;
     valid: Boolean;
 };

package/dist/types/index.d.ts

@@ -24,7 +24,7 @@ export type MarkerOptions = {
      */
     marker?: boolean | MarkerShape | Snippet;
 };
-export type ConstantAccessor<T, D = Record<string | symbol, RawValue>> = T | ((d: D) => T) | null | undefined;
+export type ConstantAccessor<K, T = Record<string | symbol, RawValue>> = K | ((d: T) => K) | null | undefined;
 export type TransformArg<T> = Channels<T> & BaseMarkProps<T> & {
     data: T[];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelteplot",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "license": "ISC",
   "author": {
     "name": "Gregor Aisch",