layerchart 2.0.0-next.0 → 2.0.0-next.2

package/dist/components/BrushContext.svelte

@@ -1,25 +1,24 @@
-<script lang="ts" context="module">
-  import { getContext, setContext } from 'svelte';
-  import { writable, type Readable } from 'svelte/store';
+<script lang="ts" module>
+  import { Context } from 'runed';
 
-  export const brushContextKey = Symbol();
+  const _BrushContext = new Context<BrushContextValue>('BrushContext');
+
+  export type BrushRange = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
 
   export type BrushContextValue = {
     xDomain: DomainType;
     yDomain: DomainType;
     isActive: boolean;
-    range: {
-      x: number;
-      y: number;
-      width: number;
-      height: number;
-    };
+    range: BrushRange;
     handleSize: number;
   };
 
-  export type BrushContext = Readable<BrushContextValue>;
-
-  const defaultContext: BrushContext = writable({
+  const defaultContext: BrushContextValue = {
     xDomain: null,
     yDomain: null,
     isActive: false,
@@ -30,14 +29,112 @@
       height: 0,
     },
     handleSize: 0,
-  });
-  export function brushContext() {
-    return getContext<BrushContext>(brushContextKey) ?? defaultContext;
+  };
+  export function getBrushContext() {
+    const defaults = $state(defaultContext);
+    return _BrushContext.getOr(defaults);
   }
 
-  function setBrushContext(brush: BrushContext) {
-    setContext(brushContextKey, brush);
+  export function setBrushContext(brush: BrushContextValue) {
+    return _BrushContext.set(brush);
   }
+
+  type BrushEventPayload = {
+    xDomain: DomainType | null;
+    yDomain: DomainType | null;
+  };
+
+  type BrushContextPropsWithoutHTML = {
+    /**
+     * The axis to apply brushing
+     *
+     * @default 'x'
+     */
+    axis?: 'x' | 'y' | 'both';
+
+    /**
+     * Size of the draggable handles (width/height)
+     *
+     * @default 5
+     */
+    handleSize?: number;
+
+    /**
+     * Only show range while actively brushing.
+     * Useful with `brushEnd` event
+     *
+     * @default false
+     */
+    resetOnEnd?: boolean;
+
+    /**
+     * Ignore click to reset.
+     * Useful to add click handlers to marks.  Requires external resetting (button, another chart, etc)
+     *
+     * @default false
+     */
+    ignoreResetClick?: boolean;
+
+    xDomain?: DomainType;
+
+    yDomain?: DomainType;
+
+    /**
+     * Mode of operation
+     *  - `integrated`: use with single chart
+     *  - `separated`: use with separate (typically smaller) chart and state can be managed
+     * externally (sync with other charts, etc).  Show active selection when domain does not equal
+     * original
+     *
+     * @default 'integrated'
+     */
+    mode?: 'integrated' | 'separated';
+
+    /**
+     * Disable brush
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Attributes passed to the range <div> element
+     */
+    range?: Partial<HTMLAttributes<HTMLElement>>;
+
+    /**
+     * Attributes passed to the handle <div> elements
+     */
+    handle?: Partial<HTMLAttributes<HTMLElement>>;
+
+    /**
+     * Classes to apply to the various elements rendered
+     *
+     * @default {}
+     */
+    classes?: {
+      root?: string;
+      frame?: string;
+      range?: string;
+      handle?: string;
+      labels?: string;
+    };
+
+    onChange?: (detail: BrushEventPayload) => void;
+    onBrushStart?: (detail: BrushEventPayload) => void;
+    onBrushEnd?: (detail: BrushEventPayload) => void;
+    onReset?: (detail: BrushEventPayload) => void;
+
+    /**
+     * A reference to this brush's context for use in parent
+     * components.
+     *
+     * @bindable
+     */
+    brushContext?: BrushContextValue;
+
+    children?: Snippet<[{ brushContext: BrushContextValue }]>;
+  };
 </script>
 
 <script lang="ts">
@@ -46,84 +143,111 @@
   import { cls } from '@layerstack/tailwind';
   import { Logger } from '@layerstack/utils';
 
-  import { chartContext } from './ChartContext.svelte';
-
-  import type { DomainType } from '../utils/scales.js';
+  import { scaleInvert, type DomainType } from '../utils/scales.svelte.js';
   import { add } from '../utils/math.js';
   import type { HTMLAttributes } from 'svelte/elements';
+  import { getChartContext } from './Chart.svelte';
+  import type { Snippet } from 'svelte';
+  import { layerClass } from '../utils/attributes.js';
+
+  const ctx = getChartContext();
+
+  let {
+    brushContext: brushContextProp = $bindable(),
+    axis = 'x',
+    handleSize = 5,
+    resetOnEnd = false,
+    ignoreResetClick = false,
+    xDomain: xDomain,
+    yDomain: yDomain,
+    mode = 'integrated',
+    disabled = false,
+    range = {},
+    handle = {},
+    classes = {},
+    onBrushEnd = () => {},
+    onBrushStart = () => {},
+    onChange = () => {},
+    onReset = () => {},
+    children,
+  }: BrushContextPropsWithoutHTML = $props();
+
+  let rootEl = $state<HTMLElement>();
+
+  if (xDomain === undefined) {
+    xDomain = ctx.xScale.domain();
+  }
+  if (yDomain === undefined) {
+    yDomain = ctx.yScale.domain();
+  }
 
-  const { xScale, yScale, width, height, padding, containerWidth, containerHeight, config } =
-    chartContext();
-
-  /** Axis to apply brushing */
-  export let axis: 'x' | 'y' | 'both' = '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: DomainType = $xScale.domain() as [number, number];
-  export let yDomain: DomainType = $yScale.domain() as [number, number];
-
-  /** Mode of operation
-   *   `integrated`: use with single chart
-   *   `separated`: use with separate (typically smaller) chart and state can be managed externally (sync with other charts, etc).  Show active selection when domain does not equal original
-   */
-  export let mode: 'integrated' | 'separated' = 'integrated';
+  $effect.pre(() => {
+    if (xDomain !== undefined) return;
+    xDomain = ctx.xScale.domain();
+  });
 
-  /** Disable brush */
-  export let disabled = false;
+  $effect.pre(() => {
+    if (yDomain !== undefined) return;
+    yDomain = ctx.yScale.domain();
+  });
 
-  // Capture original domains for reset()
-  const originalXDomain = $config.xDomain;
-  const originalYDomain = $config.yDomain;
+  const ogXDomain = xDomain;
+  const ogYDomain = yDomain;
+  const originalXDomain = ctx.config.xDomain;
+  const originalYDomain = ctx.config.yDomain;
 
-  $: [xDomainMin, xDomainMax] = extent<number>($xScale.domain()) as [number, number];
-  $: [yDomainMin, yDomainMax] = extent<number>($yScale.domain()) as [number, number];
+  const xDomainMinMax = $derived(extent<number>(ctx.xScale.domain()) as [number, number]);
+  const xDomainMin = $derived(xDomainMinMax[0]);
+  const xDomainMax = $derived(xDomainMinMax[1]);
 
-  /** Attributes passed to range <div> element */
-  export let range: Partial<HTMLAttributes<HTMLDivElement>> | undefined = undefined;
+  const yDomainMinMax = $derived(extent<number>(ctx.yScale.domain()) as [number, number]);
+  const yDomainMin = $derived(yDomainMinMax[0]);
+  const yDomainMax = $derived(yDomainMinMax[1]);
 
-  /** Attributes passed to handle <div> elements */
-  export let handle: Partial<HTMLAttributes<HTMLDivElement>> | undefined = undefined;
+  const top = $derived(ctx.yScale(yDomain?.[1]));
+  const bottom = $derived(ctx.yScale(yDomain?.[0]));
+  const left = $derived(ctx.xScale(xDomain?.[0]));
+  const right = $derived(ctx.xScale(xDomain?.[1]));
 
-  export let classes: {
-    root?: string;
-    frame?: string;
-    range?: string;
-    handle?: string;
-    labels?: string;
-  } = {};
+  const _range = $derived({
+    x: axis === 'both' || axis === 'x' ? left : 0,
+    y: axis === 'both' || axis === 'y' ? top : 0,
+    width: axis === 'both' || axis === 'x' ? right - left : ctx.width,
+    height: axis === 'both' || axis === 'y' ? bottom - top : ctx.height,
+  });
 
-  export let onchange: (detail: { xDomain?: DomainType; yDomain?: DomainType }) => void = () => {};
-  export let onbrushstart: (detail: {
-    xDomain?: DomainType;
-    yDomain?: DomainType;
-  }) => void = () => {};
-  export let onbrushend: (detail: {
-    xDomain?: DomainType;
-    yDomain?: DomainType;
-  }) => void = () => {};
-  export let onreset: (detail: { xDomain?: DomainType; yDomain?: DomainType }) => void = () => {};
+  let isActive = $state(false);
 
-  /** Exposed to allow binding in Chart */
-  export let brush = writable<BrushContextValue>({
-    xDomain: null,
-    yDomain: null,
-    isActive: false,
-    range: {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
+  const brushContext = {
+    get xDomain() {
+      return xDomain!;
     },
-    handleSize: 0,
-  });
-  setBrushContext(brush);
+    set xDomain(v: DomainType) {
+      xDomain = v;
+    },
+    get yDomain() {
+      return yDomain!;
+    },
+    set yDomain(v: DomainType) {
+      yDomain = v;
+    },
+    get isActive() {
+      return isActive;
+    },
+    set isActive(v: boolean) {
+      isActive = v;
+    },
+    get range() {
+      return _range;
+    },
+    get handleSize() {
+      return handleSize;
+    },
+  };
+
+  brushContextProp = brushContext;
 
-  let rootEl: HTMLDivElement;
+  setBrushContext(brushContext);
 
   const logger = new Logger('BrushContext');
   const RESET_THRESHOLD = 1; // size of pointer delta to ignore
@@ -146,9 +270,16 @@
 
       if (
         startPoint &&
-        (startPoint.x < 0 || startPoint.x > $width || startPoint.y < 0 || startPoint.y > $height)
+        (startPoint.x < 0 ||
+          startPoint.x > ctx.width ||
+          startPoint.y < 0 ||
+          startPoint.y > ctx.height)
       ) {
-        logger.debug('ignoring click as outside of chart bounds', { startPoint, $width, $height });
+        logger.debug('ignoring click as outside of chart bounds', {
+          startPoint,
+          width: ctx.width,
+          height: ctx.height,
+        });
         return;
       }
 
@@ -156,21 +287,21 @@
         xDomain: [xDomain?.[0] ?? xDomainMin, xDomain?.[1] ?? xDomainMax] as [number, number],
         yDomain: [yDomain?.[0] ?? yDomainMin, yDomain?.[1] ?? yDomainMax] as [number, number],
         value: {
-          x: $xScale.invert?.(startPoint?.x ?? 0),
-          y: $yScale.invert?.(startPoint?.y ?? 0),
+          x: scaleInvert(ctx.xScale, startPoint?.x ?? 0),
+          y: scaleInvert(ctx.yScale, startPoint?.y ?? 0),
         },
       };
 
-      onbrushstart({ xDomain, yDomain });
+      onBrushStart({ xDomain, yDomain });
 
       const onPointerMove = (e: PointerEvent) => {
         const currentPoint = localPoint(e, rootEl);
         fn(start, {
-          x: $xScale.invert?.(currentPoint?.x ?? 0),
-          y: $yScale.invert?.(currentPoint?.y ?? 0),
+          x: scaleInvert(ctx.xScale, currentPoint?.x ?? 0),
+          y: scaleInvert(ctx.yScale, currentPoint?.y ?? 0),
         });
 
-        onchange({ xDomain, yDomain });
+        onChange({ xDomain, yDomain });
       };
 
       const onPointerUp = (e: PointerEvent) => {
@@ -189,9 +320,13 @@
           _range.height < RESET_THRESHOLD
         ) {
           // Clicked on frame, or pointer delta was <1
-          logger.debug('resetting due to frame click');
-          reset();
-          onchange({ xDomain, yDomain });
+          if (ignoreResetClick) {
+            logger.debug('ignoring frame click reset');
+          } else {
+            logger.debug('resetting due to frame click');
+            reset();
+            onChange({ xDomain, yDomain });
+          }
         } else {
           logger.debug('drag end', {
             target: e.target,
@@ -202,10 +337,15 @@
           });
         }
 
-        onbrushend({ xDomain, yDomain });
+        onBrushEnd({ xDomain, yDomain });
 
         if (resetOnEnd) {
-          reset();
+          if (ignoreResetClick) {
+            // Still hide brush, but do not reset domain
+            brushContext.isActive = false;
+          } else {
+            reset();
+          }
         }
 
         window.removeEventListener('pointermove', onPointerMove);
@@ -219,7 +359,7 @@
 
   const createRange = handler((start, value) => {
     logger.debug('createRange');
-    isActive = true;
+    brushContext.isActive = true;
 
     xDomain = [
       // @ts-expect-error
@@ -288,12 +428,12 @@
 
   function reset() {
     logger.debug('reset');
-    isActive = false;
+    brushContext.isActive = false;
 
-    xDomain = originalXDomain;
-    yDomain = originalYDomain;
+    onReset({ xDomain, yDomain });
 
-    onreset({ xDomain, yDomain });
+    xDomain = ogXDomain;
+    yDomain = ogYDomain;
   }
 
   function selectAll() {
@@ -302,67 +442,50 @@
     yDomain = [yDomainMin, yDomainMax];
   }
 
-  $: top = $yScale(yDomain?.[1]);
-  $: bottom = $yScale(yDomain?.[0]);
-  $: left = $xScale(xDomain?.[0]);
-  $: right = $xScale(xDomain?.[1]);
-
-  $: _range = {
-    x: axis === 'both' || axis === 'x' ? left : 0,
-    y: axis === 'both' || axis === 'y' ? top : 0,
-    width: axis === 'both' || axis === 'x' ? right - left : $width,
-    height: axis === 'both' || axis === 'y' ? bottom - top : $height,
-  };
-
-  let isActive = false;
-  $: if (mode === 'separated') {
-    // Set reactively to handle cases where xDomain/yDomain are set externally (ex. `bind:xDomain`)
-    const isXAxisActive =
-      xDomain?.[0]?.valueOf() !== originalXDomain?.[0]?.valueOf() ||
-      xDomain?.[1]?.valueOf() !== originalXDomain?.[1]?.valueOf();
-
-    const isYAxisActive =
-      yDomain?.[0]?.valueOf() !== originalYDomain?.[0]?.valueOf() ||
-      yDomain?.[1]?.valueOf() !== originalYDomain?.[1]?.valueOf();
-
-    isActive =
-      axis === 'x' ? isXAxisActive : axis == 'y' ? isYAxisActive : isXAxisActive || isYAxisActive;
-  }
-
-  $: $brush = {
-    xDomain,
-    yDomain,
-    isActive,
-    range: _range,
-    handleSize,
-  };
+  $effect.pre(() => {
+    if (mode === 'separated') {
+      // Set reactively to handle cases where xDomain/yDomain are set externally (ex. `bind:xDomain`)
+      const isXAxisActive =
+        xDomain?.[0]?.valueOf() !== originalXDomain?.[0]?.valueOf() ||
+        xDomain?.[1]?.valueOf() !== originalXDomain?.[1]?.valueOf();
+
+      const isYAxisActive =
+        yDomain?.[0]?.valueOf() !== originalYDomain?.[0]?.valueOf() ||
+        yDomain?.[1]?.valueOf() !== originalYDomain?.[1]?.valueOf();
+
+      const result =
+        axis === 'x' ? isXAxisActive : axis == 'y' ? isYAxisActive : isXAxisActive || isYAxisActive;
+      brushContext.isActive = result;
+    }
+  });
 </script>
 
 {#if disabled}
-  <slot />
+  {@render children?.({ brushContext })}
 {:else}
+  {@const handleClass = layerClass('brush-handle')}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    style:top="{$padding.top}px"
-    style:left="{$padding.left}px"
-    style:width="{$width}px"
-    style:height="{$height}px"
-    class={cls('BrushContext absolute touch-none')}
-    on:pointerdown={createRange}
-    on:dblclick={() => selectAll()}
     bind:this={rootEl}
+    style:top="{ctx.padding.top}px"
+    style:left="{ctx.padding.left}px"
+    style:width="{ctx.width}px"
+    style:height="{ctx.height}px"
+    class={cls(layerClass('brush-context'), 'absolute touch-none')}
+    onpointerdown={createRange}
+    ondblclick={() => selectAll()}
   >
     <div
-      class="absolute"
-      style:top="-{$padding.top ?? 0}px"
-      style:left="-{$padding.left ?? 0}px"
-      style:width="{$containerWidth}px"
-      style:height="{$containerHeight}px"
+      class={cls(layerClass('brush-container'), 'absolute')}
+      style:top="-{ctx.padding.top ?? 0}px"
+      style:left="-{ctx.padding.left ?? 0}px"
+      style:width="{ctx.containerWidth}px"
+      style:height="{ctx.containerHeight}px"
     >
-      <slot brush={$brush} />
+      {@render children?.({ brushContext })}
     </div>
 
-    {#if isActive}
+    {#if brushContext.isActive}
       <div
         {...range}
         style:left="{_range.x}px"
@@ -370,14 +493,14 @@
         style:width="{_range.width}px"
         style:height="{_range.height}px"
         class={cls(
-          'range',
+          layerClass('brush-range'),
           'absolute bg-surface-content/10 cursor-move select-none',
           'z-10',
           classes.range,
           range?.class
         )}
-        on:pointerdown={adjustRange}
-        on:dblclick={() => reset()}
+        onpointerdown={adjustRange}
+        ondblclick={() => reset()}
       ></div>
 
       {#if axis === 'both' || axis === 'y'}
@@ -387,20 +510,21 @@
           style:top="{_range.y}px"
           style:width="{_range.width}px"
           style:height="{handleSize}px"
+          data-position="top"
           class={cls(
-            'handle top',
+            handleClass,
             'cursor-ns-resize select-none',
             'range absolute',
             'z-10',
             classes.handle,
             handle?.class
           )}
-          on:pointerdown={adjustTop}
-          on:dblclick={(e) => {
+          onpointerdown={adjustTop}
+          ondblclick={(e) => {
             e.stopPropagation();
             if (yDomain) {
               yDomain[0] = yDomainMin;
-              onchange({ xDomain, yDomain });
+              onChange({ xDomain, yDomain });
             }
           }}
         ></div>
@@ -411,7 +535,9 @@
           style:top="{bottom - handleSize}px"
           style:width="{_range.width}px"
           style:height="{handleSize}px"
+          data-position="bottom"
           class={cls(
+            handleClass,
             'handle bottom',
             'cursor-ns-resize select-none',
             'range absolute',
@@ -419,12 +545,12 @@
             classes.handle,
             handle?.class
           )}
-          on:pointerdown={adjustBottom}
-          on:dblclick={(e) => {
+          onpointerdown={adjustBottom}
+          ondblclick={(e) => {
             e.stopPropagation();
             if (yDomain) {
               yDomain[1] = yDomainMax;
-              onchange({ xDomain, yDomain });
+              onChange({ xDomain, yDomain });
             }
           }}
         ></div>
@@ -437,20 +563,21 @@
           style:top="{_range.y}px"
           style:width="{handleSize}px"
           style:height="{_range.height}px"
+          data-position="left"
           class={cls(
-            'handle left',
+            handleClass,
             'cursor-ew-resize select-none',
             'range absolute',
             'z-10',
             classes.handle,
             handle?.class
           )}
-          on:pointerdown={adjustLeft}
-          on:dblclick={(e) => {
+          onpointerdown={adjustLeft}
+          ondblclick={(e) => {
             e.stopPropagation();
             if (xDomain) {
               xDomain[0] = xDomainMin;
-              onchange({ xDomain, yDomain });
+              onChange({ xDomain, yDomain });
             }
           }}
         ></div>
@@ -461,20 +588,21 @@
           style:top="{_range.y}px"
           style:width="{handleSize}px"
           style:height="{_range.height}px"
+          data-position="right"
           class={cls(
-            'handle right',
+            handleClass,
             'cursor-ew-resize select-none',
             'range absolute',
             'z-10',
             classes.handle,
             handle?.class
           )}
-          on:pointerdown={adjustRight}
-          on:dblclick={(e) => {
+          onpointerdown={adjustRight}
+          ondblclick={(e) => {
             e.stopPropagation();
             if (xDomain) {
               xDomain[1] = xDomainMax;
-              onchange({ xDomain, yDomain });
+              onChange({ xDomain: xDomain, yDomain: yDomain });
             }
           }}
         ></div>