svelteplot 0.1.3-next.8 → 0.2.0

package/dist/marks/Brush.svelte

@@ -0,0 +1,364 @@
+<script module lang="ts">
+    export type Brush = {
+        x1?: Date | number;
+        x2?: Date | number;
+        y1?: Date | number;
+        y2?: Date | number;
+        enabled: boolean;
+    };
+
+    type BrushEvent = MouseEvent & { brush: Brush };
+
+    export type BrushMarkProps = {
+        brush: Brush;
+        /**
+         * limit brushing to x or y dimension
+         */
+        limitDimension?: false | 'x' | 'y';
+        /**
+         * whether brush can move/resize outside domain
+         */
+        constrainToDomain?: boolean;
+        /**
+         * size of the (invisible) drag resize area around the edges of the brush selection
+         */
+        resizeHandleSize?: number;
+        onbrushstart?: (evt: BrushEvent) => void;
+        onbrushend?: (evt: BrushEvent) => void;
+        onbrush?: (evt: BrushEvent) => void;
+    } & Pick<
+        BaseMarkProps,
+        | 'cursor'
+        | 'stroke'
+        | 'strokeDasharray'
+        | 'strokeOpacity'
+        | 'strokeWidth'
+        | 'strokeLinecap'
+        | 'strokeDashoffset'
+        | 'strokeLinejoin'
+        | 'strokeMiterlimit'
+    >;
+</script>
+
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import Frame from './Frame.svelte';
+    import Rect from './Rect.svelte';
+    import type { BaseMarkProps, PlotContext } from '../types.js';
+    import { clientToLayerCoordinates } from './helpers/events.js';
+
+    let {
+        brush = $bindable({ enabled: false }),
+        stroke = 'currentColor',
+        strokeWidth,
+        strokeDasharray = '2,3',
+        strokeOpacity = 0.6,
+        strokeLinecap,
+        strokeDashoffset,
+        strokeLinejoin,
+        strokeMiterlimit,
+        cursor: forceCursor,
+        limitDimension = false,
+        constrainToDomain = false,
+        resizeHandleSize = 10,
+        onbrushstart,
+        onbrushend,
+        onbrush
+    }: BrushMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const xScaleFn = $derived(plot.scales.x.fn);
+    const yScaleFn = $derived(plot.scales.y.fn);
+
+    const xDomain = $derived(plot.scales.x.domain) as [number, number] | [Date, Date];
+    const xRange = $derived(plot.scales.x.range) as [number, number];
+    const yDomain = $derived(plot.scales.y.domain) as [number, number] | [Date, Date];
+    const yRange = $derived(plot.scales.y.range) as [number, number];
+
+    $effect(() => {
+        if (limitDimension !== 'y' && !xScaleFn.invert) {
+            throw new Error('brushing does not work with band/point scales');
+        }
+        if (limitDimension !== 'x' && !yScaleFn.invert) {
+            throw new Error('brushing does not work with band/point scales');
+        }
+    });
+
+    let x1 = $state(brush.x1 as Date | number);
+    let x2 = $state(brush.x2 as Date | number);
+    let y1 = $state(brush.y1 as Date | number);
+    let y2 = $state(brush.y2 as Date | number);
+
+    type ActionType =
+        | 'move'
+        | 'draw'
+        | 'n-resize'
+        | 's-resize'
+        | 'w-resize'
+        | 'e-resize'
+        | 'ne-resize'
+        | 'nw-resize'
+        | 'se-resize'
+        | 'sw-resize'
+        | false;
+
+    let dragging = false;
+    let action: ActionType = $state(false);
+
+    let dragStart: [number, number];
+
+    let pxPointer = $state([0, 0]);
+
+    const pxBrush = $derived({
+        x1: xScaleFn(brush.x1 as Date | number),
+        x2: xScaleFn(brush.x2 as Date | number),
+        y1: yScaleFn(brush.y1 as Date | number),
+        y2: yScaleFn(brush.y2 as Date | number)
+    });
+
+    const HALF_EDGE = $derived(resizeHandleSize * 0.5);
+
+    const isInsideBrush = $derived(
+        (limitDimension === 'y' || pxPointer[0] > pxBrush.x1 + HALF_EDGE) &&
+            (limitDimension === 'y' || pxPointer[0] < pxBrush.x2 - HALF_EDGE) &&
+            (limitDimension === 'x' || pxPointer[1] > pxBrush.y2 + HALF_EDGE) &&
+            (limitDimension === 'x' || pxPointer[1] < pxBrush.y1 - HALF_EDGE)
+    );
+
+    const isXEdge: false | 'left' | 'right' = $derived(
+        pxPointer[0] > pxBrush.x1 - HALF_EDGE && pxPointer[0] < pxBrush.x1 + HALF_EDGE
+            ? 'left'
+            : pxPointer[0] > pxBrush.x2 - HALF_EDGE && pxPointer[0] < pxBrush.x2 + HALF_EDGE
+              ? 'right'
+              : false
+    );
+    const isYEdge: false | 'top' | 'bottom' = $derived(
+        pxPointer[1] > pxBrush.y1 - HALF_EDGE && pxPointer[1] < pxBrush.y1 + HALF_EDGE
+            ? 'top'
+            : pxPointer[1] > pxBrush.y2 - HALF_EDGE && pxPointer[1] < pxBrush.y2 + HALF_EDGE
+              ? 'bottom'
+              : false
+    );
+
+    const CURSOR_MAP = { left: 'w', right: 'e', top: 's', bottom: 'n' };
+
+    const cursor = $derived(
+        forceCursor
+            ? forceCursor
+            : action
+              ? action === 'draw'
+                  ? 'crosshair'
+                  : action
+              : brush.enabled && isInsideBrush
+                ? 'move'
+                : brush.enabled && (isXEdge || isYEdge)
+                  ? `${[isYEdge, isXEdge]
+                        .filter((d) => !!d)
+                        .map((c) => CURSOR_MAP[c])
+                        .join('')}-resize`
+                  : 'crosshair'
+    );
+
+    $effect(() => {
+        brush.x1 =
+            !brush.enabled || limitDimension === 'y'
+                ? undefined
+                : constrain((x1 < x2 ? x1 : x2) as Date | number, xDomain);
+        brush.x2 =
+            !brush.enabled || limitDimension === 'y'
+                ? undefined
+                : constrain(x1 > x2 ? x1 : x2, xDomain);
+        brush.y1 =
+            !brush.enabled || limitDimension === 'x'
+                ? undefined
+                : constrain(y1 < y2 ? y1 : y2, yDomain);
+        brush.y2 =
+            !brush.enabled || limitDimension === 'x'
+                ? undefined
+                : constrain(y1 > y2 ? y1 : y2, yDomain);
+    });
+
+    function constrain<T extends number | Date>(x: T, extent: [typeof x, typeof x]) {
+        const minE = extent[0] < extent[1] ? extent[0] : extent[1];
+        const maxE = extent[0] > extent[1] ? extent[0] : extent[1];
+        if (x < minE) return minE;
+        if (x > maxE) return maxE;
+        return x;
+    }
+
+    const DRAG_MIN_DISTANCE = 5;
+
+    /**
+     * fallback to clientX/clientY to support basic user event testing
+     */
+    function getLayerPos(e: MouseEvent): [number, number] {
+        // Use the clientToLayerCoordinates helper function
+        return clientToLayerCoordinates(e, plot.body);
+    }
+
+    $effect(() => {
+        plot.body?.ownerDocument.body.addEventListener('pointerup', onpointerup);
+        plot.body?.ownerDocument.body.addEventListener('pointermove', onpointermove);
+
+        return () => {
+            plot.body?.ownerDocument.body.removeEventListener('pointerup', onpointerup);
+            plot.body?.ownerDocument.body.removeEventListener('pointermove', onpointermove);
+        };
+    });
+
+    function onpointerdown(e: MouseEvent) {
+        dragging = true;
+        dragStart = getLayerPos(e);
+        pxPointer = getLayerPos(e);
+
+        if (brush.enabled && isInsideBrush) {
+            // drag starts inside existing brush, if so, move the brush
+            action = 'move';
+        } else if (brush.enabled && (isXEdge || isYEdge)) {
+            // drag starts on a brush edge, so resize the brush
+            action = `${[isYEdge, isXEdge]
+                .filter((d) => !!d)
+                .map((c) => CURSOR_MAP[c])
+                .join('')}-resize` as ActionType;
+        } else {
+            // draw new brush selection
+            action = 'draw';
+            x1 = x2 = xScaleFn.invert(dragStart[0]);
+            y1 = y2 = yScaleFn.invert(dragStart[1]);
+        }
+        onbrushstart?.({ ...e, brush });
+    }
+
+    const EAST: Set<ActionType> = new Set(['e-resize', 'ne-resize', 'se-resize']);
+    const WEST: Set<ActionType> = new Set(['w-resize', 'nw-resize', 'sw-resize']);
+    const NORTH: Set<ActionType> = new Set(['n-resize', 'ne-resize', 'nw-resize']);
+    const SOUTH: Set<ActionType> = new Set(['s-resize', 'se-resize', 'sw-resize']);
+
+    function onpointermove(e: MouseEvent) {
+        const newPos = getLayerPos(e);
+
+        if (dragging) {
+            let px = newPos[0] - pxPointer[0];
+            let py = newPos[1] - pxPointer[1];
+
+            if (constrainToDomain) {
+                if (action === 'move') {
+                    // limit selection movement
+                    px = constrain(px, [xRange[0] - pxBrush.x1, xRange[1] - pxBrush.x2]);
+                    py = constrain(py, [yRange[0] - pxBrush.y1, yRange[1] - pxBrush.y2]);
+                } else if (action !== 'draw') {
+                    // limit horizontal resizing
+                    if (EAST.has(action)) {
+                        px = constrain(px, [xRange[0] - pxBrush.x2, xRange[1] - pxBrush.x2]);
+                    } else if (WEST.has(action)) {
+                        px = constrain(px, [xRange[0] - pxBrush.x1, xRange[1] - pxBrush.x1]);
+                    }
+                    // limit vertical resizing
+                    if (NORTH.has(action)) {
+                        py = constrain(py, [yRange[0] - pxBrush.y2, yRange[1] - pxBrush.y2]);
+                    } else if (SOUTH.has(action)) {
+                        py = constrain(py, [yRange[0] - pxBrush.y1, yRange[1] - pxBrush.y1]);
+                    }
+                }
+            }
+
+            const hasX = limitDimension !== 'y';
+            const hasY = limitDimension !== 'x';
+
+            const dx1 = !hasX ? 0 : xScaleFn.invert(xScaleFn(x1) + px);
+            const dx2 = !hasX ? 0 : xScaleFn.invert(xScaleFn(x2) + px);
+            const dy1 = !hasY ? 0 : yScaleFn.invert(yScaleFn(y1) + py);
+            const dy2 = !hasY ? 0 : yScaleFn.invert(yScaleFn(y2) + py);
+
+            if (action === 'move') {
+                // move edges
+                x1 = dx1;
+                x2 = dx2;
+                y1 = dy1;
+                y2 = dy2;
+            } else if (action === 'draw') {
+                x2 = !hasX ? 0 : xScaleFn.invert(newPos[0]);
+                y2 = !hasY ? 0 : yScaleFn.invert(newPos[1]);
+
+                if (constrainToDomain) {
+                    x2 = constrain(x2, xDomain as [typeof x2, typeof x2]);
+                    y2 = constrain(y2, yDomain as [typeof y2, typeof y2]);
+                }
+            } else {
+                if (EAST.has(action)) {
+                    x2 = dx2;
+                } else if (WEST.has(action)) {
+                    x1 = dx1;
+                }
+                if (NORTH.has(action)) {
+                    y2 = dy2;
+                } else if (SOUTH.has(action)) {
+                    y1 = dy1;
+                }
+
+                // if the user drag-resizes a brush edge over the opposite edge we need to
+                // flip the coordinates and invert the resize action name
+
+                [x1, x2, action] = swapIfNeeded(x1, x2, action, 'e', 'w');
+                [y1, y2, action] = swapIfNeeded(y1, y2, action, 'n', 's');
+            }
+
+            const dist = Math.sqrt(
+                (dragStart[0] - pxPointer[0]) ** 2 + (dragStart[1] - pxPointer[1]) ** 2
+            );
+            if (dist > DRAG_MIN_DISTANCE) brush.enabled = true;
+            onbrush?.({ ...e, brush });
+
+            pxPointer = [pxPointer[0] + px, pxPointer[1] + py];
+        } else {
+            pxPointer = getLayerPos(e);
+        }
+    }
+
+    function swapIfNeeded(
+        v1: number | Date,
+        v2: number | Date,
+        action: ActionType,
+        swapDir1: string,
+        swapDir2: string
+    ) {
+        if (action && v2 < v1) {
+            return [
+                v2,
+                v1,
+                `${action.split('-')[0].replace(swapDir1, 'X').replace(swapDir2, swapDir1).replace('X', swapDir2)}-resize` as ActionType
+            ];
+        }
+        return [v1, v2, action];
+    }
+
+    function onpointerup(e: MouseEvent) {
+        if (dragging) {
+            dragging = false;
+            action = false;
+
+            brush.enabled =
+                Math.sqrt((dragStart[0] - pxPointer[0]) ** 2 + (dragStart[1] - pxPointer[1]) ** 2) >
+                DRAG_MIN_DISTANCE;
+            onbrushend?.({ ...e, brush });
+        }
+    }
+</script>
+
+{#if stroke && brush.enabled}
+    <Rect
+        class="brush-rect"
+        {...limitDimension === 'x' ? {} : { y1: brush.y1, y2: brush.y2 }}
+        {...limitDimension === 'y' ? {} : { x1: brush.x1, x2: brush.x2 }}
+        {stroke}
+        {strokeDasharray}
+        {strokeOpacity}
+        {strokeDashoffset}
+        {strokeLinecap}
+        {strokeLinejoin}
+        {strokeMiterlimit}
+        {strokeWidth} />
+{/if}
+<Frame fill="transparent" inset={-20} {cursor} {onpointerdown} {onpointermove} />

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

@@ -0,0 +1,32 @@
+export type Brush = {
+    x1?: Date | number;
+    x2?: Date | number;
+    y1?: Date | number;
+    y2?: Date | number;
+    enabled: boolean;
+};
+type BrushEvent = MouseEvent & {
+    brush: Brush;
+};
+export type BrushMarkProps = {
+    brush: Brush;
+    /**
+     * limit brushing to x or y dimension
+     */
+    limitDimension?: false | 'x' | 'y';
+    /**
+     * whether brush can move/resize outside domain
+     */
+    constrainToDomain?: boolean;
+    /**
+     * size of the (invisible) drag resize area around the edges of the brush selection
+     */
+    resizeHandleSize?: number;
+    onbrushstart?: (evt: BrushEvent) => void;
+    onbrushend?: (evt: BrushEvent) => void;
+    onbrush?: (evt: BrushEvent) => void;
+} & Pick<BaseMarkProps, 'cursor' | 'stroke' | 'strokeDasharray' | 'strokeOpacity' | 'strokeWidth' | 'strokeLinecap' | 'strokeDashoffset' | 'strokeLinejoin' | 'strokeMiterlimit'>;
+import type { BaseMarkProps } from '../types.js';
+declare const Brush: import("svelte").Component<BrushMarkProps, {}, "brush">;
+type Brush = ReturnType<typeof Brush>;
+export default Brush;

package/dist/marks/BrushX.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import Brush, { type BrushMarkProps } from './Brush.svelte';
+
+    let { brush, ...restProps }: Omit<BrushMarkProps, 'limitDimension'> = $props();
+</script>
+
+<Brush bind:brush limitDimension="x" {...restProps} />

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

@@ -0,0 +1,4 @@
+import { type BrushMarkProps } from './Brush.svelte';
+declare const BrushX: import("svelte").Component<Omit<BrushMarkProps, "limitDimension">, {}, "">;
+type BrushX = ReturnType<typeof BrushX>;
+export default BrushX;

package/dist/marks/BrushY.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import Brush, { type BrushMarkProps } from './Brush.svelte';
+
+    let { brush, ...restProps }: Omit<BrushMarkProps, 'limitDimension'> = $props();
+</script>
+
+<Brush bind:brush limitDimension="y" {...restProps} />

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

@@ -0,0 +1,4 @@
+import { type BrushMarkProps } from './Brush.svelte';
+declare const BrushY: import("svelte").Component<Omit<BrushMarkProps, "limitDimension">, {}, "">;
+type BrushY = ReturnType<typeof BrushY>;
+export default BrushY;

package/dist/marks/Cell.svelte

@@ -101,10 +101,3 @@
         </g>
     {/snippet}
 </Mark>
-
-<style>
-    rect {
-        stroke: none;
-        /* fill: none; */
-    }
-</style>

package/dist/marks/Dot.svelte

@@ -9,15 +9,9 @@
         FacetContext,
         PlotDefaults
     } from '../types.js';
-    import {
-        resolveChannel,
-        resolveProp,
-        resolveScaledStyles,
-        resolveStyles
-    } from '../helpers/resolve.js';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { maybeSymbol } from '../helpers/symbols.js';
     import { symbol as d3Symbol } from 'd3-shape';
-    import { projectXY } from '../helpers/scales.js';
     import { sort } from '../index.js';
     import Mark from '../Mark.svelte';
     import DotCanvas from './helpers/DotCanvas.svelte';
@@ -36,14 +30,14 @@
         children?: Snippet;
         dx?: ConstantAccessor<number>;
         dy?: ConstantAccessor<number>;
-        canvas: boolean;
-        dotClass: ConstantAccessor<string>;
-        in: any;
-        inParams: any;
-        out: any;
-        outParams: any;
-        transition: any;
-        wrap: Snippet;
+        canvas?: boolean;
+        dotClass?: ConstantAccessor<string>;
+        in?: any;
+        inParams?: any;
+        out?: any;
+        outParams?: any;
+        transition?: any;
+        wrap?: Snippet;
     };
 
     let {
@@ -132,6 +126,3 @@
         </g>
     {/snippet}
 </Mark>
-
-<style>
-</style>

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

@@ -11,14 +11,14 @@ type DotProps = BaseMarkProps & {
     children?: Snippet;
     dx?: ConstantAccessor<number>;
     dy?: ConstantAccessor<number>;
-    canvas: boolean;
-    dotClass: ConstantAccessor<string>;
-    in: any;
-    inParams: any;
-    out: any;
-    outParams: any;
-    transition: any;
-    wrap: Snippet;
+    canvas?: boolean;
+    dotClass?: ConstantAccessor<string>;
+    in?: any;
+    inParams?: any;
+    out?: any;
+    outParams?: any;
+    transition?: any;
+    wrap?: Snippet;
 };
 declare const Dot: import("svelte").Component<DotProps, {}, "">;
 type Dot = ReturnType<typeof Dot>;

package/dist/marks/Frame.svelte

@@ -7,17 +7,32 @@
     import { addEventHandlers } from './helpers/events.js';
 
     type FrameMarkProps = BaseMarkProps &
-        BaseRectMarkProps & {
+        Omit<
+            BaseRectMarkProps,
+            'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'
+        > & {
             automatic?: boolean;
+            inset?: number;
+            insetLeft?: number;
+            insetRight?: number;
+            insetTop?: number;
+            insetBottom?: number;
         };
 
-    let { automatic, class: className = null, ...options }: FrameMarkProps = $props();
+    let { automatic, class: className = '', ...options }: FrameMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
-    let dx = $derived(resolveProp(options.dx, null, 0));
-    let dy = $derived(resolveProp(options.dy, null, 0));
+    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}>
@@ -25,14 +40,11 @@
         class={['frame', className]}
         transform={dx || dy ? `translate(${dx},${dy})` : null}
         style={resolveScaledStyles({}, options, {}, plot, 'stroke')}
-        x={plot.options.marginLeft}
-        y={plot.options.marginTop}
+        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}
-        height={plot.facetHeight}
+        width={plot.facetWidth - (insetLeft || 0) - (insetRight || 0)}
+        height={plot.facetHeight - (insetBottom || 0) - (insetTop || 0)}
         use:addEventHandlers={{ getPlotState, options: options, datum: {} }} />
 </Mark>
-
-<style>
-</style>

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

@@ -1,7 +1,12 @@
 import type { BaseRectMarkProps } from '../types.js';
 import type { BaseMarkProps } from '../types.js';
-type FrameMarkProps = BaseMarkProps & BaseRectMarkProps & {
+type FrameMarkProps = BaseMarkProps & Omit<BaseRectMarkProps, 'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'> & {
     automatic?: boolean;
+    inset?: number;
+    insetLeft?: number;
+    insetRight?: number;
+    insetTop?: number;
+    insetBottom?: number;
 };
 declare const Frame: import("svelte").Component<FrameMarkProps, {}, "">;
 type Frame = ReturnType<typeof Frame>;

package/dist/marks/GridX.svelte

@@ -2,10 +2,10 @@
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
     import type { PlotContext, BaseMarkProps, RawValue } from '../types.js';
-    import { resolveChannel, resolveScaledStyles } from '../helpers/resolve.js';
+    import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
-    import { getUsedScales } from '../helpers/scales.js';
     import { testFilter } from '../helpers/index.js';
+    import { RAW_VALUE } from '../transforms/recordize.js';
 
     type GrixXMarkProps = BaseMarkProps & {
         data?: RawValue[];
@@ -15,13 +15,13 @@
     let { data = [], automatic = false, ...options }: GrixXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
-    let autoTickCount = $derived(
+    const autoTickCount = $derived(
         Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))
     );
 
-    let ticks: RawValue[] = $derived(
+    const ticks: RawValue[] = $derived(
         data.length > 0
             ? // use custom tick values if user passed any as prop
               data
@@ -54,9 +54,18 @@
                     {@const y2_ = resolveChannel('y2', tick, options)}
                     {@const y1 = options.y1 != null ? plot.scales.y.fn(y1_) : 0}
                     {@const y2 = options.y2 != null ? plot.scales.y.fn(y2_) : plot.facetHeight}
+                    {@const [style, styleClass] = resolveStyles(
+                        plot,
+                        { datum: { [RAW_VALUE]: tick } },
+                        options,
+                        'stroke',
+                        usedScales,
+                        true
+                    )}
                     <line
+                        class={styleClass}
                         transform="translate({x},{plot.options.marginTop})"
-                        style={resolveScaledStyles(tick, options, usedScales, plot, 'stroke')}
+                        {style}
                         {y1}
                         {y2} />
                 {/if}

package/dist/marks/GridY.svelte

@@ -2,23 +2,23 @@
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
     import type { PlotContext, BaseMarkProps, RawValue, DataRecord } from '../types.js';
-    import { resolveChannel, resolveScaledStyles } from '../helpers/resolve.js';
+    import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
-    import { getUsedScales } from '../helpers/scales.js';
     import { testFilter } from '../helpers/index.js';
+    import { RAW_VALUE } from '../transforms/recordize.js';
 
     type GridYMarkProps = BaseMarkProps & { data?: RawValue[]; automatic?: boolean };
 
     let { data = [], automatic = false, ...options }: GridYMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
-    let autoTickCount = $derived(
+    const autoTickCount = $derived(
         Math.max(2, Math.round(plot.facetHeight / plot.options.y.tickSpacing))
     );
 
-    let ticks: RawValue[] = $derived(
+    const ticks: RawValue[] = $derived(
         data.length > 0
             ? // use custom tick values if user passed any as prop
               data
@@ -51,9 +51,18 @@
                     {@const x2_ = resolveChannel('x2', tick, options)}
                     {@const x1 = options.x1 != null ? plot.scales.x.fn(x1_) : 0}
                     {@const x2 = options.x2 != null ? plot.scales.x.fn(x2_) : plot.facetWidth}
+                    {@const [style, styleClass] = resolveStyles(
+                        plot,
+                        { datum: { [RAW_VALUE]: tick } },
+                        options,
+                        'stroke',
+                        usedScales,
+                        true
+                    )}
                     <line
+                        {style}
+                        class={styleClass}
                         transform="translate({plot.options.marginLeft},{y})"
-                        style={resolveScaledStyles(tick, options, usedScales, plot, 'stroke')}
                         {x1}
                         {x2} />
                 {/if}