svelteplot 0.1.3-next.9 → 0.2.1

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/ColorLegend.svelte

@@ -2,7 +2,7 @@
     import { getContext } from 'svelte';
     import { Plot, AxisX, Frame } from '../index.js';
     import { symbol as d3Symbol, symbol } from 'd3-shape';
-    import { range as d3Range } from 'd3-array';
+    import { range as d3Range, extent } from 'd3-array';
     import { maybeSymbol } from '../helpers/symbols.js';
 
     import type { DefaultOptions, PlotContext } from '../types.js';
@@ -72,7 +72,7 @@
                 </div>
             {/each}
         {:else if scaleType === 'quantile' || scaleType === 'quantize' || scaleType === 'threshold'}
-            {@const domain = plot.scales.color.domain}
+            {@const domain = extent(plot.scales.color.fn.domain())}
             {@const range = plot.scales.color.range}
             {@const tickLabels =
                 scaleType === 'quantile'
@@ -85,7 +85,6 @@
                 domain[1],
                 (domain[1] - domain[0]) / range.length
             ).slice(1)}
-
             <Plot
                 maxWidth="240px"
                 margins={1}
@@ -112,16 +111,13 @@
                     </linearGradient>
                 </defs>
                 <Frame dy={-5} stroke={null} fill="url(#gradient-{randId})" />
-                <AxisX tickSize={18} dy={-17} />
+                <AxisX tickSize={18} dy={-17} tickFormat={(d, i) => tickFormat(tickLabels[i])} />
             </Plot>
         {:else}
             <!--- continuous -->
-            {@const domain = plot.scales.color.domain}
-            {@const ticks = new Set([
-                domain[0],
-                ...(plot.scales.color?.fn?.ticks?.(Math.ceil(width / 5)) ?? []),
-                domain[1]
-            ])}
+            {@const domain = extent(plot.scales.color.domain)}
+            {@const ticks = d3Range(domain[0], domain[1], (domain[1] - domain[0]) / 7).slice(1)}
+
             <Plot
                 maxWidth="240px"
                 margins={1}

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 {
@@ -59,7 +53,7 @@
     }: DotProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
     function getSymbolPath(symbolType, size) {
         return d3Symbol(maybeSymbol(symbolType), size)();
@@ -102,7 +96,7 @@
     {#snippet children({ mark, usedScales, scaledData })}
         <g class="dots {className || ''}">
             {#if canvas}
-                <DotCanvas data={args.data} {mark} {plot} {testFacet} {usedScales} />
+                <DotCanvas data={scaledData} {mark} />
             {:else}
                 {#each scaledData as d}
                     {#if d.valid && isValid(d.r)}
@@ -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,11 +7,19 @@
     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');
     const plot = $derived(getPlotState());
@@ -40,6 +48,3 @@
         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>;