chore: refine & export frame mark prop types + use rectpath in frame

svelteplot · gka · May 26, 2025 · May 25, 2025 · May 25, 2025 · May 25, 2025
commit f5a3cf14e3ff62c5b4a83148777f6eefc385bfe1
diff --git a/src/lib/helpers/resolve.ts b/src/lib/helpers/resolve.ts
@@ -57,14 +57,14 @@ export function toChannelOption(
     return isDataRecord(channel)
         ? (channel as ChannelOptions)
         : {
-              value: channel,
-              scale:
-                  (!isPositionScale && !isOpacityScale && typeof channel === 'number') ||
-                  typeof channel === 'undefined'
-                      ? null
-                      : CHANNEL_SCALE[name],
-              channel: null
-          };
+            value: channel,
+            scale:
+                (!isPositionScale && !isOpacityScale && typeof channel === 'number') ||
+                    typeof channel === 'undefined'
+                    ? null
+                    : CHANNEL_SCALE[name],
+            channel: null
+        };
 }
 
 export function resolveChannel(
@@ -118,10 +118,10 @@ function resolve(
         return typeof accessor === 'function'
             ? accessor(datum)
             : accessor !== null && isRawValue(accessor)
-              ? accessor
-              : !Array.isArray(datum) && (scale === 'x' || scale === 'y')
-                ? datum
-                : null;
+                ? accessor
+                : !Array.isArray(datum) && (scale === 'x' || scale === 'y')
+                    ? datum
+                    : null;
     }
 }
 
@@ -204,7 +204,7 @@ export function resolveStyles(
     recomputeChannels = false
 ): [string | null, string | null] {
     const styleProps = {
-        ...getBaseStylesObject(datum.datum, channels),
+        ...getBaseStylesObject(datum?.datum, channels),
         fill: 'none',
         stroke: 'none',
         ...(defaultColorProp && channels[oppositeColor[defaultColorProp]] == null
@@ -216,7 +216,7 @@ export function resolveStyles(
                 .map(([key, cssAttr]) => [
                     key,
                     cssAttr,
-                    recomputeChannels ? resolveChannel(key, datum.datum, channels) : datum[key]
+                    recomputeChannels ? resolveChannel(key, datum?.datum, channels) : datum?.[key]
                 ])
                 .filter(
                     ([key, , value]) =>
@@ -236,6 +236,17 @@ export function resolveStyles(
                 })
         )
     };
+    if (channels.stroke === 'magenta') {
+        console.log({
+            styleProps, x: (Object.entries(scaledStyleProps) as [ScaledChannelName, string][])
+                .filter(([key]) => channels[key] != null)
+                .map(([key, cssAttr]) => [
+                    key,
+                    cssAttr,
+                    recomputeChannels ? resolveChannel(key, datum?.datum, channels) : datum?.[key]
+                ])
+        })
+    }
     if (plot.css) {
         return [null, plot.css(`${stylePropsToCSS(styleProps)};${channels.style ?? ''}`)];
     } else {

diff --git a/src/lib/marks/DotX.svelte b/src/lib/marks/DotX.svelte
@@ -8,8 +8,7 @@
 <script lang="ts">
     import Dot, { type DotMarkProps } from './Dot.svelte';
     import { recordizeX } from '$lib/index.js';
-    import type { BaseMarkProps, DataRow } from '../types.js';
-    import type { ChannelAccessor } from '$lib/types.js';
+    import type { DataRow } from '../types.js';
 
     let { data = [{}], ...options }: DotXMarkProps = $props();
 

diff --git a/src/lib/marks/Frame.svelte b/src/lib/marks/Frame.svelte
@@ -1,50 +1,61 @@
-<script lang="ts">
-    import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
-    import type { PlotContext, BaseRectMarkProps } from '../types.js';
-    import type { BaseMarkProps } from '../types.js';
-    import { resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
-    import { addEventHandlers } from './helpers/events.js';
-
-    type FrameMarkProps = BaseMarkProps &
+<!-- 
+    @component 
+    Renders a simple frame around the entire plot domain 
+-->
+<script module lang="ts">
+    export type FrameMarkProps = Omit<
+        BaseMarkProps,
+        'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'
+    > &
         Omit<
             BaseRectMarkProps,
             'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'
         > & {
+            fill: string;
+            stroke: string;
+            fillOpacity: number;
+            strokeOpacity: number;
             automatic?: boolean;
             inset?: number;
             insetLeft?: number;
             insetRight?: number;
             insetTop?: number;
             insetBottom?: number;
         };
+</script>
 
-    let { automatic, class: className = '', ...options }: FrameMarkProps = $props();
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import type { PlotContext, BaseRectMarkProps } from '../types.js';
+    import type { BaseMarkProps } from '../types.js';
+    import RectPath from './helpers/RectPath.svelte';
+
+    let {
+        automatic,
+        class: className = '',
+        fill,
+        stroke,
+        fillOpacity,
+        strokeOpacity,
+        ...options
+    }: FrameMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
-
-    const dx = $derived(resolveProp(options.dx, null, 0));
-    const dy = $derived(resolveProp(options.dy, null, 0));
-
-    const {
-        insetLeft = options.inset || 0,
-        insetTop = options.inset || 0,
-        insetRight = options.inset || 0,
-        insetBottom = options.inset || 0
-    } = $derived(options);
 </script>
 
 <Mark type="frame" {automatic}>
-    <rect
-        class={['frame', className]}
-        transform={dx || dy ? `translate(${dx},${dy})` : null}
-        style={resolveScaledStyles({}, options, {}, plot, 'stroke')}
-        x={plot.options.marginLeft + +insetLeft}
-        y={plot.options.marginTop + +insetTop}
-        rx={resolveProp(options.rx, null, null)}
-        ry={resolveProp(options.ry, null, null)}
-        width={plot.facetWidth - (insetLeft || 0) - (insetRight || 0)}
-        height={plot.facetHeight - (insetBottom || 0) - (insetTop || 0)}
-        use:addEventHandlers={{ getPlotState, options: options, datum: {} }} />
+    {#snippet children({ usedScales })}
+        <RectPath
+            class={className}
+            datum={{ fill, stroke, fillOpacity, strokeOpacity, datum: {}, valid: true }}
+            x={plot.options.marginLeft}
+            y={plot.options.marginTop}
+            width={plot.facetWidth}
+            height={plot.facetHeight}
+            {usedScales}
+            fallbackStyle="stroke"
+            options={{ ...options, fill, stroke, fillOpacity, strokeOpacity }} />
+    {/snippet}
 </Mark>
diff --git a/src/lib/marks/helpers/RectPath.svelte b/src/lib/marks/helpers/RectPath.svelte
@@ -25,7 +25,8 @@ Helper component for rendering rectangular marks in SVG
         height,
         useInsetAsFallbackVertically = true,
         useInsetAsFallbackHorizontally = true,
-        usedScales
+        usedScales,
+        fallbackStyle = 'fill'
     }: {
         datum: ScaledDataRecord;
         class: string | null;
@@ -47,39 +48,40 @@ Helper component for rendering rectangular marks in SVG
          */
         useInsetAsFallbackHorizontally?: boolean;
         usedScales: UsedScales;
+        fallbackStyle?: 'fill' | 'stroke';
     } = $props();
 
     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 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(
             options.insetLeft,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackHorizontally ? inset : 0
         ) as number)
     );
     const insetRight = $derived(
         +(resolveProp(
             options.insetRight,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackHorizontally ? inset : 0
         ) as number)
     );
     const insetTop = $derived(
         +(resolveProp(
             options.insetTop,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackVertically ? inset : 0
         ) as number)
     );
     const insetBottom = $derived(
         +(resolveProp(
             options.insetBottom,
-            datum.datum,
+            datum?.datum,
             useInsetAsFallbackVertically ? inset : 0
         ) as number)
     );
@@ -94,7 +96,10 @@ Helper component for rendering rectangular marks in SVG
                     borderRadius.bottomLeft ?? 0
                 ) > 0)
     );
-    const [style, styleClass] = $derived(resolveStyles(plot, datum, options, 'fill', usedScales));
+    const [style, styleClass] = $derived(
+        resolveStyles(plot, datum, options, fallbackStyle, usedScales)
+    );
+    $inspect({ style, stroke: options.stroke, fill: options.fill, options });
 </script>
 
 {#if hasBorderRadius}
@@ -112,7 +117,7 @@ Helper component for rendering rectangular marks in SVG
         use:addEventHandlers={{
             getPlotState,
             options,
-            datum: datum.datum
+            datum: datum?.datum
         }} />
 {:else}
     <rect
@@ -124,6 +129,6 @@ Helper component for rendering rectangular marks in SVG
         use:addEventHandlers={{
             getPlotState,
             options,
-            datum: datum.datum
+            datum: datum?.datum
         }} />
 {/if}