layerchart 0.38.6 → 0.40.0

package/dist/components/Brush.svelte

@@ -0,0 +1,244 @@
+<script>import { createEventDispatcher, getContext } from 'svelte';
+import { extent } from 'd3-array';
+import { clamp, cls } from 'svelte-ux';
+import Frame from './Frame.svelte';
+import { localPoint } from '../utils/event.js';
+import Group from './Group.svelte';
+const { xScale, yScale, width, height, padding } = getContext('LayerCake');
+const dispatch = createEventDispatcher();
+/** Axis to apply brushing */
+export let axis = 'x';
+/** Size of draggable handles (width/height) */
+export let handleSize = 5;
+/** Only show range while actively brushing.  Useful with `brushEnd` event */
+export let resetOnEnd = false;
+export let xDomain = $xScale.domain();
+export let yDomain = $yScale.domain();
+// Capture original domains for reset()
+const originalXDomain = $xScale.domain();
+const originalYDomain = $yScale.domain();
+$: [xDomainMin, xDomainMax] = extent($xScale.domain());
+$: [yDomainMin, yDomainMax] = extent($yScale.domain());
+/** Attributes passed to range <rect> element */
+export let range = undefined;
+/** Attributes passed to handle <rect> elements */
+export let handle = undefined;
+export let classes = {};
+let frameEl;
+function handler(fn) {
+    return (e) => {
+        const start = {
+            xDomain: [xDomain[0] ?? xDomainMin, xDomain[1] ?? xDomainMax],
+            yDomain: [yDomain[0] ?? yDomainMin, yDomain[1] ?? yDomainMax],
+            value: {
+                x: $xScale.invert(localPoint(frameEl, e)?.x - $padding.left),
+                y: $yScale.invert(localPoint(frameEl, e)?.y - $padding.top),
+            },
+        };
+        dispatch('brushStart', { xDomain, yDomain });
+        const onPointerMove = (e) => {
+            fn(start, {
+                x: $xScale.invert(localPoint(frameEl, e)?.x - $padding.left),
+                y: $yScale.invert(localPoint(frameEl, e)?.y - $padding.top),
+            });
+            // if (xDomain[0] === xDomain[1] || yDomain[0] === yDomain[1]) {
+            //   // Ignore?
+            //   // TODO: What about when using `x` or `y` axis?
+            // } else {
+            dispatch('change', { xDomain, yDomain });
+            // }
+        };
+        const onPointerUp = (e) => {
+            if (e.target === frameEl) {
+                reset();
+                dispatch('change', { xDomain, yDomain });
+            }
+            dispatch('brushEnd', { xDomain, yDomain });
+            if (resetOnEnd) {
+                reset();
+            }
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+    };
+}
+const createRange = handler((start, value) => {
+    isActive = true;
+    xDomain = [
+        clamp(Math.min(start.value.x, value.x), xDomainMin, xDomainMax),
+        clamp(Math.max(start.value.x, value.x), xDomainMin, xDomainMax),
+    ];
+    yDomain = [
+        clamp(Math.min(start.value.y, value.y), yDomainMin, yDomainMax),
+        clamp(Math.max(start.value.y, value.y), yDomainMin, yDomainMax),
+    ];
+});
+const adjustRange = handler((start, value) => {
+    const dx = clamp(value.x - start.value.x, xDomainMin - start.xDomain[0], xDomainMax - start.xDomain[1]);
+    xDomain = [Number(start.xDomain[0]) + dx, Number(start.xDomain[1]) + dx];
+    const dy = clamp(value.y - start.value.y, yDomainMin - start.yDomain[0], yDomainMax - start.yDomain[1]);
+    yDomain = [Number(start.yDomain[0]) + dy, Number(start.yDomain[1]) + dy];
+});
+const adjustBottom = handler((start, value) => {
+    yDomain = [
+        clamp(value.y > start.yDomain[1] ? start.yDomain[1] : value.y, yDomainMin, yDomainMax),
+        clamp(value.y > start.yDomain[1] ? value.y : start.yDomain[1], yDomainMin, yDomainMax),
+    ];
+});
+const adjustTop = handler((start, value) => {
+    yDomain = [
+        clamp(value.y < start.yDomain[1] ? value.y : start.yDomain[0], yDomainMin, yDomainMax),
+        clamp(value.y < start.yDomain[1] ? start.yDomain[0] : value.y, yDomainMin, yDomainMax),
+    ];
+});
+const adjustLeft = handler((start, value) => {
+    xDomain = [
+        clamp(value.x > start.xDomain[1] ? start.xDomain[1] : value.x, xDomainMin, xDomainMax),
+        clamp(value.x > start.xDomain[1] ? value.x : start.xDomain[1], xDomainMin, xDomainMax),
+    ];
+});
+const adjustRight = handler((start, value) => {
+    xDomain = [
+        clamp(value.x < start.xDomain[0] ? value.x : start.xDomain[0], xDomainMin, xDomainMax),
+        clamp(value.x < start.xDomain[0] ? start.xDomain[0] : value.x, xDomainMin, xDomainMax),
+    ];
+});
+function reset() {
+    isActive = false;
+    xDomain = originalXDomain;
+    yDomain = originalYDomain;
+}
+function selectAll() {
+    xDomain = [xDomainMin, xDomainMax];
+    yDomain = [yDomainMin, yDomainMax];
+}
+$: top = $yScale(yDomain[1]);
+$: bottom = $yScale(yDomain[0]);
+$: left = $xScale(xDomain[0]);
+$: right = $xScale(xDomain[1]);
+$: rangeTop = axis === 'both' || axis === 'y' ? top : 0;
+$: rangeLeft = axis === 'both' || axis === 'x' ? left : 0;
+$: rangeWidth = axis === 'both' || axis === 'x' ? right - left : $width;
+$: rangeHeight = axis === 'both' || axis === 'y' ? bottom - top : $height;
+// Set reactively to handle cases where xDomain/yDomain are set externally (ex. `bind:xDomain`)
+$: isActive =
+    xDomain[0]?.valueOf() !== originalXDomain[0]?.valueOf() ||
+        xDomain[1]?.valueOf() !== originalXDomain[1]?.valueOf() ||
+        yDomain[0]?.valueOf() !== originalYDomain[0]?.valueOf() ||
+        yDomain[1]?.valueOf() !== originalYDomain[1]?.valueOf();
+</script>
+
+<g class={cls('Brush select-none', classes.root, $$props.class)}>
+  <Frame
+    class={cls('frame', 'fill-transparent', classes.frame)}
+    on:pointerdown={createRange}
+    on:dblclick={() => selectAll()}
+    bind:rectEl={frameEl}
+  />
+
+  {#if isActive}
+    <Group x={rangeLeft} y={rangeTop} class="range">
+      <slot name="range" {rangeWidth} {rangeHeight}>
+        <rect
+          width={rangeWidth}
+          height={rangeHeight}
+          class={cls(
+            'cursor-move select-none',
+            range?.fill == null && 'fill-surface-content/10',
+            classes.range
+          )}
+          on:pointerdown={adjustRange}
+          on:dblclick={() => reset()}
+          {...range}
+        />
+      </slot>
+    </Group>
+
+    {#if axis === 'both' || axis === 'y'}
+      <Group
+        x={rangeLeft}
+        y={rangeTop}
+        class="handle top"
+        on:pointerdown={adjustTop}
+        on:dblclick={() => {
+          yDomain[0] = yDomainMin;
+          dispatch('change', { xDomain, yDomain });
+        }}
+      >
+        <slot name="handle" edge="top" {rangeWidth} {rangeHeight}>
+          <rect
+            width={rangeWidth}
+            height={handleSize}
+            class={cls('fill-transparent cursor-ns-resize select-none', classes.handle)}
+            {...handle}
+          />
+        </slot>
+      </Group>
+
+      <Group
+        x={rangeLeft}
+        y={bottom - handleSize + 1}
+        class="handle bottom"
+        on:pointerdown={adjustBottom}
+        on:dblclick={() => {
+          yDomain[1] = yDomainMax;
+        }}
+      >
+        <slot name="handle" edge="bottom" {rangeWidth} {rangeHeight}>
+          <rect
+            width={rangeWidth}
+            height={handleSize}
+            class={cls('fill-transparent cursor-ns-resize select-none', classes.handle)}
+            {...handle}
+          />
+        </slot>
+      </Group>
+    {/if}
+
+    {#if axis === 'both' || axis === 'x'}
+      <Group
+        x={rangeLeft}
+        y={rangeTop}
+        class="handle left"
+        on:pointerdown={adjustLeft}
+        on:dblclick={() => {
+          xDomain[0] = xDomainMin;
+          dispatch('change', { xDomain, yDomain });
+        }}
+      >
+        <slot name="handle" edge="left" {rangeWidth} {rangeHeight}>
+          <rect
+            width={handleSize}
+            height={rangeHeight}
+            class={cls('fill-transparent cursor-ew-resize select-none', classes.handle)}
+            {...handle}
+          />
+        </slot>
+      </Group>
+
+      <Group
+        x={right - handleSize + 1}
+        y={rangeTop}
+        class="handle right"
+        on:pointerdown={adjustRight}
+        on:dblclick={() => {
+          xDomain[1] = xDomainMax;
+          dispatch('change', { xDomain, yDomain });
+        }}
+      >
+        <slot name="handle" edge="right" {rangeWidth} {rangeHeight}>
+          <rect
+            width={handleSize}
+            height={rangeHeight}
+            class={cls('fill-transparent cursor-ew-resize select-none', classes.handle)}
+            {...handle}
+          />
+        </slot>
+      </Group>
+    {/if}
+
+    <!-- TODO: Add diagonal/corner handles -->
+  {/if}
+</g>

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

@@ -0,0 +1,53 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SVGAttributes } from 'svelte/elements';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        axis?: "x" | "y" | "both" | undefined;
+        handleSize?: number | undefined;
+        resetOnEnd?: boolean | undefined;
+        xDomain?: [number | null, number | null] | undefined;
+        yDomain?: [number | null, number | null] | undefined;
+        range?: SVGAttributes<SVGRectElement> | undefined;
+        handle?: SVGAttributes<SVGRectElement> | undefined;
+        classes?: {
+            root?: string | undefined;
+            frame?: string | undefined;
+            range?: string | undefined;
+            handle?: string | undefined;
+        } | undefined;
+    };
+    events: {
+        change: CustomEvent<{
+            xDomain?: [any, any] | undefined;
+            yDomain?: [any, any] | undefined;
+        }>;
+        brushStart: CustomEvent<{
+            xDomain?: [any, any] | undefined;
+            yDomain?: [any, any] | undefined;
+        }>;
+        brushEnd: CustomEvent<{
+            xDomain?: [any, any] | undefined;
+            yDomain?: [any, any] | undefined;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        range: {
+            rangeWidth: any;
+            rangeHeight: any;
+        };
+        handle: {
+            edge: string;
+            rangeWidth: any;
+            rangeHeight: any;
+        };
+    };
+};
+export type BrushProps = typeof __propDef.props;
+export type BrushEvents = typeof __propDef.events;
+export type BrushSlots = typeof __propDef.slots;
+export default class Brush extends SvelteComponentTyped<BrushProps, BrushEvents, BrushSlots> {
+}
+export {};

package/dist/components/Chart.svelte

@@ -76,8 +76,6 @@ export let tooltip = undefined;
 /** Props passed to TransformContext */
 export let transform = undefined;
 export let transformContext = undefined;
-/** Set transformContext's initial translate and scale based on geo object.  Requires `geo.projection` to also be set */
-export let fitGeoObject = undefined;
 // Binded for access within TransformContext
 let geoProjection = undefined;
 // Track when mounted since LayerCake initializes width/height with `100` until binded `clientWidth`/`clientWidth` can run
@@ -115,9 +113,10 @@ onMount(() => {
   let:data
   let:flatData
 >
+  <!-- Apply fitGeojson using TransformContext instead of GeoContext if `applyTransform` is used -->
   {@const initialTransform =
-    fitGeoObject && geo?.projection
-      ? geoFitObjectTransform(geo.projection(), [width, height], fitGeoObject)
+    geo?.applyTransform && geo?.fitGeojson && geo?.projection
+      ? geoFitObjectTransform(geo.projection(), [width, height], geo.fitGeojson)
       : undefined}
 
   {#key isMounted}

package/dist/components/Chart.svelte.d.ts

@@ -11,7 +11,6 @@ import { type ComponentProps } from 'svelte';
 import GeoContext from './GeoContext.svelte';
 import TooltipContext from './TooltipContext.svelte';
 import TransformContext from './TransformContext.svelte';
-import { geoFitObjectTransform } from '../utils/geo.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -25,7 +24,6 @@ declare const __propDef: {
         tooltip?: Partial<ComponentProps<TooltipContext>> | boolean | undefined;
         transform?: Partial<ComponentProps<TransformContext>> | undefined;
         transformContext?: TransformContext | undefined;
-        fitGeoObject?: Parameters<typeof geoFitObjectTransform>[2] | undefined;
     };
     events: {
         transform: CustomEvent<{

package/dist/components/ChartClipPath.svelte

@@ -1,15 +1,15 @@
 <script>import { getContext } from 'svelte';
 import RectClipPath from './RectClipPath.svelte';
 const { width, height, padding } = getContext('LayerCake');
-/** Whether clipping should include chart padding (ex. axis) */
-export let includePadding = false;
+/** Include padding area (ex. axis) */
+export let full = false;
 </script>
 
 <RectClipPath
-  x={includePadding ? -$padding.left : 0}
-  y={includePadding ? -$padding.top : 0}
-  width={$width + (includePadding ? $padding.left + $padding.right : 0)}
-  height={$height + (includePadding ? $padding.top + $padding.bottom : 0)}
+  x={full ? -$padding.left : 0}
+  y={full ? -$padding.top : 0}
+  width={$width + (full ? $padding.left + $padding.right : 0)}
+  height={$height + (full ? $padding.top + $padding.bottom : 0)}
   on:click
   {...$$restProps}
 >

package/dist/components/ChartClipPath.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        includePadding?: boolean | undefined;
+        full?: boolean | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/dist/components/Frame.svelte

@@ -2,6 +2,8 @@
 const { width, height, padding } = getContext('LayerCake');
 /** Include padding area */
 export let full = false;
+/** Access underlying `<rect>` element */
+export let rectEl;
 </script>
 
 <rect
@@ -10,5 +12,8 @@ export let full = false;
   width={$width + (full ? $padding.left + $padding.right : 0)}
   height={$height + (full ? $padding.top + $padding.bottom : 0)}
   on:click
+  on:pointerdown
+  on:dblclick
+  bind:this={rectEl}
   {...$$restProps}
 />

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

@@ -3,9 +3,12 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         full?: boolean | undefined;
+        rectEl: SVGRectElement;
     };
     events: {
         click: MouseEvent;
+        pointerdown: PointerEvent;
+        dblclick: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Group.svelte

@@ -37,6 +37,7 @@ $: if (center || x != null || y != null) {
   {transform}
   {...$$restProps}
   on:click
+  on:pointerdown
   on:pointerenter
   on:pointermove
   on:pointerleave

package/dist/components/Group.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        pointerdown: PointerEvent;
         pointerenter: PointerEvent;
         pointermove: PointerEvent;
         pointerleave: PointerEvent;

package/dist/components/Rect.svelte

@@ -36,4 +36,5 @@ $: tick().then(() => {
   on:pointermove
   on:pointerout
   on:pointerleave
+  on:dblclick
 />

package/dist/components/Rect.svelte.d.ts

@@ -24,6 +24,7 @@ declare const __propDef: {
         pointermove: PointerEvent;
         pointerout: PointerEvent;
         pointerleave: PointerEvent;
+        dblclick: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/TooltipContext.svelte

@@ -112,6 +112,14 @@ function showTooltip(e, tooltipData) {
     const point = localPoint(referenceNode, e);
     const localX = point?.x ?? 0;
     const localY = point?.y ?? 0;
+    if (e.offsetX < e.currentTarget.offsetLeft ||
+        e.offsetX > e.currentTarget.offsetLeft + e.currentTarget.offsetWidth ||
+        e.offsetY < e.currentTarget.offsetTop ||
+        e.offsetY > e.currentTarget.offsetTop + e.currentTarget.offsetHeight) {
+        // Ignore if within padding of chart
+        hideTooltip();
+        return;
+    }
     // If tooltipData not provided already (voronoi, etc), attempt to find it
     // TODO: When using bisect-x/y/band, values should be sorted.  Tyipcally are for `x`, but not `y` (and band depends on if x or y scale)
     if (tooltipData == null) {
@@ -267,26 +275,30 @@ $: if (mode === 'bounds' || mode === 'band') {
 }
 </script>
 
-<slot tooltip={$tooltip} />
-
 {#if ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode)}
-  <Html>
-    <div
-      style:width="{$width}px"
-      style:height="{$height}px"
-      class={cls(
-        'tooltip-trigger absolute touch-none',
-        debug && 'bg-danger/10 outline outline-danger'
-      )}
-      on:pointerenter={showTooltip}
-      on:pointermove={showTooltip}
-      on:pointerleave={hideTooltip}
-      on:click={(e) => {
-        onClick({ data: $tooltip?.data });
-      }}
-    />
-  </Html>
+  <div
+    style:width="{$width}px"
+    style:height="{$height}px"
+    style:top="{$padding.top}px"
+    style:left="{$padding.left}px"
+    class={cls(
+      'tooltip-trigger absolute touch-none',
+      debug && 'bg-danger/10 outline outline-danger'
+    )}
+    on:pointerenter={showTooltip}
+    on:pointermove={showTooltip}
+    on:pointerleave={hideTooltip}
+    on:click={(e) => {
+      onClick({ data: $tooltip?.data });
+    }}
+  >
+    <!-- Rendering slot within tooltip-trigger allows pointer events to bubble up (ex. Brush) -->
+    <div class="absolute" style:top="-{$padding.top}px" style:left="-{$padding.left}px">
+      <slot tooltip={$tooltip} />
+    </div>
+  </div>
 {:else if mode === 'voronoi'}
+  <slot tooltip={$tooltip} />
   <Svg>
     <Voronoi
       on:pointerenter={(e) => showTooltip(e.detail.event, e.detail.data)}
@@ -299,6 +311,7 @@ $: if (mode === 'bounds' || mode === 'band') {
     />
   </Svg>
 {:else if mode === 'bounds' || mode === 'band'}
+  <slot tooltip={$tooltip} />
   <Svg>
     <g class="tooltip-rects">
       {#each rects as rect}
@@ -318,10 +331,12 @@ $: if (mode === 'bounds' || mode === 'band') {
       {/each}
     </g>
   </Svg>
+{:else}
+  <slot tooltip={$tooltip} />
 {/if}
 
 {#if mode === 'quadtree' && debug}
-  <Svg>
+  <Svg pointerEvents={false}>
     <ChartClipPath>
       <g class="tooltip-quadtree">
         {#each quadtreeRects(quadtree, false) as rect}

package/dist/components/TransformContext.svelte

@@ -11,6 +11,8 @@ const defaultContext = {
     setTranslate: defaultTranslate.set,
     moving: writable(false),
     dragging: writable(false),
+    scrollMode: writable('none'),
+    setScrollMode: () => { },
     reset: () => { },
     zoomIn: () => { },
     zoomOut: () => { },
@@ -29,6 +31,7 @@ function setTransformContext(transform) {
 import { motionStore, motionFinishHandler } from '../stores/motionStore.js';
 const { width, height } = getContext('LayerCake');
 export let mode = 'none';
+/** Translate towards point (ex. mouse cursor/center) while zooming in/out */
 export let translateOnScale = false;
 export let spring = undefined;
 export let tweened = undefined;
@@ -41,12 +44,13 @@ export let processTranslate = (x, y, deltaX, deltaY, scale) => {
 /** Disable pointer events including move/dragging.  Useful for `mode="canvas" but only want zoomTo() interactions */
 export let disablePointer = false;
 /** Action to take during wheel scroll */
-export let scroll = 'none';
+export let initialScrollMode = 'none';
 /** Distance/threshold to consider drag vs click (disable click propagation) */
 export let clickDistance = 10;
 const dispatch = createEventDispatcher();
 let pointerDown = false;
 const dragging = writable(false);
+const scrollMode = writable(initialScrollMode);
 const DEFAULT_TRANSLATE = { x: 0, y: 0 };
 export let initialTranslate = undefined;
 export const translate = motionStore(initialTranslate ?? DEFAULT_TRANSLATE, { spring, tweened });
@@ -55,6 +59,9 @@ export let initialScale = undefined;
 export const scale = motionStore(initialScale ?? DEFAULT_SCALE, { spring, tweened });
 let startPoint = { x: 0, y: 0 };
 let startTranslate = { x: 0, y: 0 };
+export function setScrollMode(mode) {
+    $scrollMode = mode;
+}
 export function reset() {
     $translate = initialTranslate ?? DEFAULT_TRANSLATE;
     $scale = initialScale ?? DEFAULT_SCALE;
@@ -126,18 +133,18 @@ function onDoubleClick(e) {
     scaleTo(e.shiftKey ? 0.5 : 2, point);
 }
 function onWheel(e) {
-    if (mode === 'none' || disablePointer || scroll === 'none')
+    if (mode === 'none' || disablePointer || $scrollMode === 'none')
         return;
     e.preventDefault();
     const point = (startPoint = localPoint(e));
     // Pinch to zoom is registered as a wheel event with control key
     const pinchToZoom = e.ctrlKey;
-    if (scroll === 'scale' || pinchToZoom) {
+    if ($scrollMode === 'scale' || pinchToZoom) {
         // https://github.com/d3/d3-zoom#zoom_wheelDelta
         const scaleBy = -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002) * (e.ctrlKey ? 10 : 1);
         scaleTo(Math.pow(2, scaleBy), point, spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
     }
-    else if (scroll === 'translate') {
+    else if ($scrollMode === 'translate') {
         translate.update((startTranslate) => processTranslate(startTranslate.x, startTranslate.y, -e.deltaX, -e.deltaY, $scale), spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
     }
 }
@@ -195,6 +202,8 @@ setTransformContext({
     zoomOut,
     translateCenter,
     zoomTo,
+    scrollMode,
+    setScrollMode,
 });
 </script>
 

package/dist/components/TransformContext.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 import { type Readable, type Writable } from 'svelte/store';
 export declare const transformContextKey: unique symbol;
+type TransformMode = 'canvas' | 'manual' | 'none';
+type TransformScrollMode = 'scale' | 'translate' | 'none';
 export type TransformContextValue = {
-    mode: 'canvas' | 'manual' | 'none';
+    mode: TransformMode;
     scale: Writable<number>;
     setScale(value: number, options?: MotionOptions): void;
     translate: Writable<{
@@ -15,6 +17,8 @@ export type TransformContextValue = {
     }, options?: MotionOptions): void;
     moving: Readable<boolean>;
     dragging: Readable<boolean>;
+    scrollMode: Readable<TransformScrollMode>;
+    setScrollMode(mode: TransformScrollMode): void;
     reset(): void;
     zoomIn(): void;
     zoomOut(): void;
@@ -32,8 +36,8 @@ export declare function transformContext(): TransformContext;
 import { motionStore, type MotionOptions } from '../stores/motionStore.js';
 declare const __propDef: {
     props: {
-        mode?: "none" | "canvas" | "manual" | undefined;
-        translateOnScale?: boolean | undefined;
+        mode?: TransformMode | undefined;
+        /** Translate towards point (ex. mouse cursor/center) while zooming in/out */ translateOnScale?: boolean | undefined;
         spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
         tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
         processTranslate?: ((x: number, y: number, deltaX: number, deltaY: number, scale: number) => {
@@ -41,7 +45,7 @@ declare const __propDef: {
             y: number;
         }) | undefined;
         /** Disable pointer events including move/dragging.  Useful for `mode="canvas" but only want zoomTo() interactions */ disablePointer?: boolean | undefined;
-        /** Action to take during wheel scroll */ scroll?: "none" | "scale" | "translate" | undefined;
+        /** Action to take during wheel scroll */ initialScrollMode?: TransformScrollMode | undefined;
         /** Distance/threshold to consider drag vs click (disable click propagation) */ clickDistance?: number | undefined;
         initialTranslate?: {
             x: number;
@@ -59,6 +63,7 @@ declare const __propDef: {
         }> | undefined;
         initialScale?: number | undefined;
         scale?: import("svelte/motion").Spring<number> | import("svelte/motion").Tweened<number> | Writable<number> | undefined;
+        setScrollMode?: ((mode: TransformScrollMode) => void) | undefined;
         reset?: (() => void) | undefined;
         zoomIn?: (() => void) | undefined;
         zoomOut?: (() => void) | undefined;
@@ -133,6 +138,7 @@ export default class TransformContext extends SvelteComponentTyped<TransformCont
         y: number;
     }> | undefined>;
     get scale(): NonNullable<import("svelte/motion").Spring<number> | import("svelte/motion").Tweened<number> | Writable<number> | undefined>;
+    get setScrollMode(): (mode: TransformScrollMode) => void;
     get reset(): () => void;
     get zoomIn(): () => void;
     get zoomOut(): () => void;

package/dist/components/TransformControls.svelte

@@ -1,9 +1,35 @@
-<script>import { Button, Tooltip, cls } from 'svelte-ux';
-import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus, } from '@mdi/js';
+<script>import { Button, Icon, MenuButton, Tooltip, cls } from 'svelte-ux';
+import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus, mdiChevronDown, mdiResize, mdiArrowExpandAll, mdiCancel, } from '@mdi/js';
 import { transformContext } from './TransformContext.svelte';
 export let placement = 'top-right';
 export let orientation = 'vertical';
+export let show = ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode'];
+$: menuPlacementByOrientationAndPlacement = {
+    horizontal: {
+        'top-left': 'bottom-end',
+        top: 'bottom-end',
+        'top-right': 'bottom-end',
+        left: 'bottom-end',
+        center: 'bottom-end',
+        right: 'bottom-end',
+        'bottom-left': 'top-end',
+        bottom: 'top-end',
+        'bottom-right': 'top-end',
+    },
+    vertical: {
+        'top-left': 'right-start',
+        top: 'right-start',
+        'top-right': 'left-start',
+        left: 'right-start',
+        center: 'right-start',
+        right: 'left-start',
+        'bottom-left': 'right-end',
+        bottom: 'right-end',
+        'bottom-right': 'left-end',
+    },
+};
 const transform = transformContext();
+const scrollMode = transform.scrollMode;
 </script>
 
 <div
@@ -23,33 +49,70 @@ const transform = transformContext();
     }[placement],
     $$props.class
   )}
+  on:dblclick={(e) => {
+    // Stop from propagating to TransformContext
+    e.stopPropagation();
+  }}
 >
-  <Tooltip title="Zoom in">
-    <Button
-      icon={mdiMagnifyPlusOutline}
-      on:click={() => transform.zoomIn()}
-      class="text-surface-content p-2"
-    />
-  </Tooltip>
-  <Tooltip title="Zoom out">
-    <Button
-      icon={mdiMagnifyMinusOutline}
-      on:click={() => transform.zoomOut()}
-      class="text-surface-content p-2"
-    />
-  </Tooltip>
-  <Tooltip title="Center">
-    <Button
-      icon={mdiImageFilterCenterFocus}
-      on:click={() => transform.translateCenter()}
-      class="text-surface-content p-2"
-    />
-  </Tooltip>
-  <Tooltip title="Reset">
-    <Button
-      icon={mdiArrowULeftTop}
-      on:click={() => transform.reset()}
-      class="text-surface-content p-2"
-    />
-  </Tooltip>
+  {#if show.includes('zoomIn')}
+    <Tooltip title="Zoom in">
+      <Button
+        icon={mdiMagnifyPlusOutline}
+        on:click={() => transform.zoomIn()}
+        class="text-surface-content p-2"
+      />
+    </Tooltip>
+  {/if}
+
+  {#if show.includes('zoomOut')}
+    <Tooltip title="Zoom out">
+      <Button
+        icon={mdiMagnifyMinusOutline}
+        on:click={() => transform.zoomOut()}
+        class="text-surface-content p-2"
+      />
+    </Tooltip>
+  {/if}
+
+  {#if show.includes('center')}
+    <Tooltip title="Center">
+      <Button
+        icon={mdiImageFilterCenterFocus}
+        on:click={() => transform.translateCenter()}
+        class="text-surface-content p-2"
+      />
+    </Tooltip>
+  {/if}
+
+  {#if show.includes('reset')}
+    <Tooltip title="Reset">
+      <Button
+        icon={mdiArrowULeftTop}
+        on:click={() => transform.reset()}
+        class="text-surface-content p-2"
+      />
+    </Tooltip>
+  {/if}
+
+  {#if show.includes('scrollMode')}
+    <Tooltip title="Scroll mode">
+      <MenuButton
+        iconOnly
+        options={[
+          { label: 'None', value: 'none', icon: mdiCancel },
+          { label: 'Zoom', value: 'scale', icon: mdiResize },
+          { label: 'Move', value: 'translate', icon: mdiArrowExpandAll },
+        ]}
+        menuProps={{ placement: menuPlacementByOrientationAndPlacement[orientation][placement] }}
+        menuIcon={null}
+        value={$scrollMode}
+        on:change={(e) => transform.setScrollMode(e.detail.value)}
+        class="text-surface-content"
+      >
+        <svelte:fragment slot="selection" let:value>
+          <Icon data={value?.icon ?? mdiChevronDown} />
+        </svelte:fragment>
+      </MenuButton>
+    </Tooltip>
+  {/if}
 </div>

package/dist/components/TransformControls.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         placement?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
+        show?: ("reset" | "center" | "scrollMode" | "zoomIn" | "zoomOut")[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export { default as Axis } from './Axis.svelte';
 export { default as Bar } from './Bar.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
+export { default as Brush } from './Brush.svelte';
 export { default as Bounds } from './Bounds.svelte';
 export { default as Calendar } from './Calendar.svelte';
 export { default as Canvas } from './layout/Canvas.svelte';

package/dist/components/index.js

@@ -7,6 +7,7 @@ export { default as Axis } from './Axis.svelte';
 export { default as Bar } from './Bar.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
+export { default as Brush } from './Brush.svelte';
 export { default as Bounds } from './Bounds.svelte';
 export { default as Calendar } from './Calendar.svelte';
 export { default as Canvas } from './layout/Canvas.svelte';

package/dist/utils/genData.d.ts

@@ -8,6 +8,12 @@ export declare function getRandomNumber(min: number, max: number): number;
  *   see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
  */
 export declare function getRandomInteger(min: number, max: number, includeMax?: boolean): number;
+/**
+ * @see: https://observablehq.com/@d3/d3-cumsum
+ */
+export declare function randomWalk(options?: {
+    count?: number;
+}): number[];
 export declare function createSeries(options: {
     count?: number;
     min: number;

package/dist/utils/genData.js

@@ -1,4 +1,6 @@
 import { addMinutes, startOfDay, startOfToday, subDays } from 'date-fns';
+import { cumsum } from 'd3-array';
+import { randomNormal } from 'd3-random';
 import { degreesToRadians, radiansToDegrees } from './math.js';
 /**
  * Get random number between min (inclusive) and max (exclusive)
@@ -16,6 +18,13 @@ export function getRandomInteger(min, max, includeMax = true) {
     max = Math.floor(max);
     return Math.floor(Math.random() * (max - min + (includeMax ? 1 : 0)) + min);
 }
+/**
+ * @see: https://observablehq.com/@d3/d3-cumsum
+ */
+export function randomWalk(options) {
+    const random = randomNormal();
+    return Array.from(cumsum({ length: options?.count ?? 100 }, random));
+}
 export function createSeries(options) {
     const count = options.count ?? 10;
     const min = options.min;

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.38.6",
+  "version": "0.40.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.5",
     "@mdi/js": "^7.4.47",
@@ -36,29 +36,29 @@
     "@types/topojson-simplify": "^3.0.3",
     "autoprefixer": "^10.4.19",
     "marked": "^12.0.2",
-    "mdsvex": "^0.11.0",
+    "mdsvex": "^0.11.2",
     "posthog-js": "^1.95.1",
-    "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.3",
+    "prettier": "^3.3.1",
+    "prettier-plugin-svelte": "^3.2.4",
     "prism-svelte": "^0.5.0",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
     "rehype-slug": "^6.0.0",
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
-    "svelte": "^4.2.17",
+    "svelte": "^4.2.18",
     "svelte-check": "^3.8.0",
     "svelte-json-tree": "^2.2.0",
     "svelte-preprocess": "^5.1.4",
     "svelte2tsx": "^0.7.9",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.4",
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
-    "tslib": "^2.6.2",
+    "tslib": "^2.6.3",
     "typescript": "^5.4.5",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^5.2.12"
+    "vite": "^5.2.13"
   },
   "type": "module",
   "dependencies": {
@@ -83,11 +83,11 @@
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
     "date-fns": "^3.6.0",
-    "layercake": "^8.2.0",
+    "layercake": "^8.3.0",
     "lodash-es": "^4.17.21",
-    "posthog-js": "^1.136.2",
+    "posthog-js": "^1.138.3",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.66.4",
+    "svelte-ux": "^0.66.6",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {