Brush component

.changeset/five-phones-tease.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+[Frame] Expose `rectEl` and forward `mousedown`, `touchstart`, and `dblclick` events

.changeset/itchy-cameras-guess.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+Add Brush component

.changeset/pretty-vans-exist.md

@@ -0,0 +1,5 @@
+---
+"layerchart": patch
+---
+
+[Group] Forward `dblclick` event

.changeset/purple-tools-eat.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+[ChartClipPath] Remove padding by default (opt-in with `full`)

packages/layerchart/src/lib/components/Brush.svelte

@@ -0,0 +1,309 @@
+<script lang="ts">
+  import { createEventDispatcher, getContext } from 'svelte';
+  import type { SVGAttributes } from 'svelte/elements';
+  import { extent } from 'd3-array';
+
+  import { clamp, cls } from 'svelte-ux';
+  import Frame from './Frame.svelte';
+  import { localPoint } from '$lib/utils/event.js';
+  import Group from './Group.svelte';
+
+  const { xScale, yScale, width, height, padding } = getContext('LayerCake');
+
+  const dispatch = createEventDispatcher<{
+    change: { xDomain?: [any, any]; yDomain?: [any, any] };
+    brushStart: { xDomain?: [any, any]; yDomain?: [any, any] };
+    brushEnd: { xDomain?: [any, any]; yDomain?: [any, any] };
+  }>();
+
+  /** 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: [number | null, number | null] = $xScale.domain();
+  export let yDomain: [number | null, number | null] = $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: SVGAttributes<SVGRectElement> | undefined = undefined;
+
+  /** Attributes passed to handle <rect> elements */
+  export let handle: SVGAttributes<SVGRectElement> | undefined = undefined;
+
+  export let classes: {
+    root?: string;
+    frame?: string;
+    range?: string;
+    handle?: string;
+  } = {};
+
+  let frameEl: SVGRectElement;
+
+  function handler(
+    fn: (
+      start: {
+        xDomain: [number, number];
+        yDomain: [number, number];
+        value: { x: number; y: number };
+      },
+      value: { x: number; y: number }
+    ) => void
+  ) {
+    return (e: PointerEvent) => {
+      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: PointerEvent) => {
+        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: PointerEvent) => {
+        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>

packages/layerchart/src/lib/components/ChartClipPath.svelte

@@ -5,15 +5,15 @@
 
   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}
 >

packages/layerchart/src/lib/components/Frame.svelte

@@ -5,6 +5,9 @@
 
   /** Include padding area */
   export let full = false;
+
+  /** Access underlying `<rect>` element */
+  export let rectEl: SVGRectElement;
 </script>
 
 <rect
@@ -13,5 +16,8 @@
   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}
 />

packages/layerchart/src/lib/components/Group.svelte

@@ -49,6 +49,7 @@
   {transform}
   {...$$restProps}
   on:click
+  on:pointerdown
   on:pointerenter
   on:pointermove
   on:pointerleave

packages/layerchart/src/lib/components/Rect.svelte

@@ -50,4 +50,5 @@
   on:pointermove
   on:pointerout
   on:pointerleave
+  on:dblclick
 />