layerchart 0.81.3 → 0.91.0

package/dist/components/Arc.svelte

@@ -23,6 +23,7 @@
   import { arc as d3arc } from 'd3-shape';
   import { scaleLinear } from 'd3-scale';
   import { min, max } from 'd3-array';
+  import { merge } from 'lodash-es';
 
   import { objectId } from '@layerstack/utils/object';
 
@@ -31,7 +32,7 @@
   import { degreesToRadians } from '../utils/math.js';
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
   import { getCanvasContext } from './layout/Canvas.svelte';
-  import { renderPathData } from '../utils/canvas.js';
+  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
 
   export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
@@ -94,6 +95,11 @@
 
   export let track: boolean | SVGAttributes<SVGPathElement> = false;
 
+  export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
+  export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
+
   const { yRange } = chartContext();
 
   $: scale = scaleLinear().domain(domain).range(range);
@@ -199,7 +205,10 @@
   const canvasContext = getCanvasContext();
   const renderContext = canvasContext ? 'canvas' : 'svg';
 
-  function render(ctx: CanvasRenderingContext2D) {
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
     ctx.translate(xOffset, yOffset);
 
     // Track
@@ -216,10 +225,16 @@
     });
 
     // Arc
-    renderPathData(ctx, arc(), {
-      styles: { fill, fillOpacity, stroke, strokeWidth },
-      classes: className,
-    });
+    renderPathData(
+      ctx,
+      arc(),
+      styleOverrides
+        ? merge({ styles: { strokeWidth } }, styleOverrides)
+        : {
+            styles: { fill, fillOpacity, stroke, strokeWidth },
+            classes: className,
+          }
+    );
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
@@ -232,9 +247,32 @@
     canvasContext.invalidate();
   }
 
+  // Hide `tooltip` reactivity
+  function _onPointerEnter(e: PointerEvent) {
+    onpointerenter?.(e);
+    tooltip?.show(e, data);
+  }
+  function _onPointerMove(e: PointerEvent) {
+    onpointermove?.(e);
+    tooltip?.show(e, data);
+  }
+  function _onPointerLeave(e: PointerEvent) {
+    onpointerleave?.(e);
+    tooltip?.hide();
+  }
+
   let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Arc', render });
+    canvasUnregister = canvasContext.register({
+      name: 'Arc',
+      render,
+      events: {
+        click: onclick,
+        pointerenter: _onPointerEnter,
+        pointermove: _onPointerMove,
+        pointerleave: _onPointerLeave,
+      },
+    });
   }
 
   onDestroy(() => {
@@ -264,19 +302,16 @@
     stroke-width={strokeWidth}
     class={className}
     {...$$restProps}
-    on:pointerenter={(e) => tooltip?.show(e, data)}
-    on:pointermove={(e) => tooltip?.show(e, data)}
-    on:pointerleave={(e) => tooltip?.hide()}
+    on:click={onclick}
+    on:pointerenter={onpointerenter}
+    on:pointermove={_onPointerMove}
+    on:pointerleave={_onPointerLeave}
     on:touchmove={(e) => {
       if (tooltip) {
         // Prevent touch to not interfer with pointer when using tooltip
         e.preventDefault();
       }
     }}
-    on:click
-    on:pointerenter
-    on:pointermove
-    on:pointerleave
     on:touchmove
   />
 {/if}

package/dist/components/Area.svelte

@@ -5,6 +5,7 @@
   import type { CurveFactory } from 'd3-shape';
   import { max, min } from 'd3-array';
   import { interpolatePath } from 'd3-interpolate-path';
+  import { merge } from 'lodash-es';
 
   import { cls } from '@layerstack/tailwind';
   import { objectId } from '@layerstack/utils/object';
@@ -15,8 +16,8 @@
   import Spline from './Spline.svelte';
   import { accessor, type Accessor } from '../utils/common.js';
   import { isScaleBand } from '../utils/scales.js';
-  import { renderPathData } from '../utils/canvas.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
+  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
 
   const {
     data: contextData,
@@ -63,6 +64,11 @@
   let className: string | undefined = undefined;
   export { className as class };
 
+  export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
+  export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
+
   $: xAccessor = x ? accessor(x) : $contextX;
   $: y0Accessor = y0 ? accessor(y0) : (d: any) => min($yDomain);
   $: y1Accessor = y1 ? accessor(y1) : $y;
@@ -140,11 +146,20 @@
   const canvasContext = getCanvasContext();
   const renderContext = canvasContext ? 'canvas' : 'svg';
 
-  function render(ctx: CanvasRenderingContext2D) {
-    renderPathData(ctx, $tweened_d, {
-      styles: { fill, fillOpacity, stroke, strokeWidth },
-      classes: className,
-    });
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    renderPathData(
+      ctx,
+      $tweened_d,
+      styleOverrides
+        ? merge({ styles: { strokeWidth } }, styleOverrides)
+        : {
+            styles: { fill, fillOpacity, stroke, strokeWidth },
+            classes: className,
+          }
+    );
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
@@ -159,7 +174,16 @@
 
   let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Area', render });
+    canvasUnregister = canvasContext.register({
+      name: 'Area',
+      render,
+      events: {
+        click: onclick,
+        pointerenter: onpointerenter,
+        pointermove: onpointermove,
+        pointerleave: onpointerleave,
+      },
+    });
 
     tweened_d.subscribe(() => {
       canvasContext.invalidate();
@@ -173,7 +197,6 @@
   });
 </script>
 
-<!-- TODO: Find way to not clear <Canvas> when rendering Spline (remove Area rendering).  Idea: https://github.com/techniq/layerchart/issues/158#issuecomment-2543416108 -->
 {#if line}
   <Spline
     {data}
@@ -197,8 +220,9 @@
     stroke-width={strokeWidth}
     {...$$restProps}
     class={cls('path-area', className)}
-    on:click
-    on:pointermove
-    on:pointerleave
+    on:click={onclick}
+    on:pointerenter={onpointerenter}
+    on:pointermove={onpointermove}
+    on:pointerleave={onpointerleave}
   />
 {/if}

package/dist/components/Bar.svelte

@@ -56,6 +56,11 @@
 
   export let insets: Insets | undefined = undefined;
 
+  export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
+  export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
+
   export let spring: ComponentProps<Rect>['spring'] = undefined;
   export let tweened: ComponentProps<Rect>['tweened'] = undefined;
 
@@ -120,13 +125,13 @@
     {stroke}
     {strokeWidth}
     rx={radius}
+    {onclick}
+    {onpointerenter}
+    {onpointermove}
+    {onpointerleave}
+    on:touchmove
     {...dimensions}
     {...$$restProps}
-    on:click
-    on:pointerenter
-    on:pointermove
-    on:pointerleave
-    on:touchmove
   />
 {:else}
   <Spline
@@ -136,11 +141,11 @@
     {tweened}
     {stroke}
     {strokeWidth}
-    {...$$restProps}
-    on:click
-    on:pointerenter
-    on:pointermove
-    on:pointerleave
+    {onclick}
+    {onpointerenter}
+    {onpointermove}
+    {onpointerleave}
     on:touchmove
+    {...$$restProps}
   />
 {/if}

package/dist/components/Bars.svelte

@@ -5,7 +5,7 @@
   import Bar from './Bar.svelte';
   import Rect from './Rect.svelte';
   import { chartDataArray, type Accessor } from '../utils/common.js';
-  import type { Insets } from '../index.js/utils/rect.js';
+  import type { Insets } from '../utils/rect.js';
 
   const { data: contextData, cGet, config } = chartContext();
 
@@ -49,7 +49,7 @@
   export let tweened: ComponentProps<Rect>['tweened'] = undefined;
 
   /** Event dispatched when individual Bar is clicked */
-  export let onBarClick: (e: { data: any }) => void = () => {};
+  export let onbarclick: (e: MouseEvent, detail: { data: any }) => void = () => {};
 
   $: _data = chartDataArray(data ?? $contextData);
 </script>
@@ -70,7 +70,7 @@
         {insets}
         {spring}
         {tweened}
-        on:click={() => onBarClick({ data: d })}
+        onclick={(e) => onbarclick(e, { data: d })}
         {...$$restProps}
       />
     {/each}

package/dist/components/Brush.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { type ComponentProps } from 'svelte';
-  import type { SVGAttributes } from 'svelte/elements';
   import { extent, min, max } from 'd3-array';
   import { clamp } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
@@ -14,6 +13,7 @@
   import { localPoint } from '../utils/event.js';
   import type { DomainType } from '../utils/scales.js';
   import { asAny } from '../utils/types.js';
+  import Rect from './Rect.svelte';
 
   const { xScale, yScale, width, height, padding, config } = chartContext();
 
@@ -45,10 +45,10 @@
   $: [yDomainMin, yDomainMax] = extent<number>($yScale.domain()) as [number, number];
 
   /** Attributes passed to range <rect> element */
-  export let range: SVGAttributes<SVGRectElement> | undefined = undefined;
+  export let range: Partial<ComponentProps<Rect>> | undefined = undefined;
 
   /** Attributes passed to handle <rect> elements */
-  export let handle: SVGAttributes<SVGRectElement> | undefined = undefined;
+  export let handle: Partial<ComponentProps<Rect>> | undefined = undefined;
 
   /** Apply format to labels, if shown */
   export let format: FormatType | undefined = undefined;
@@ -61,10 +61,16 @@
     labels?: string;
   } = {};
 
-  export let onChange: (e: { xDomain?: DomainType; yDomain?: DomainType }) => void = () => {};
-  export let onBrushStart: (e: { xDomain?: DomainType; yDomain?: DomainType }) => void = () => {};
-  export let onBrushEnd: (e: { xDomain?: DomainType; yDomain?: DomainType }) => void = () => {};
-  export let onReset: (e: { xDomain?: DomainType; yDomain?: DomainType }) => void = () => {};
+  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 frameEl: SVGRectElement;
 
@@ -88,7 +94,7 @@
         },
       };
 
-      onBrushStart({ xDomain, yDomain });
+      onbrushstart({ xDomain, yDomain });
 
       const onPointerMove = (e: PointerEvent) => {
         fn(start, {
@@ -100,17 +106,17 @@
         //   // Ignore?
         //   // TODO: What about when using `x` or `y` axis?
         // } else {
-        onChange({ xDomain, yDomain });
+        onchange({ xDomain, yDomain });
         // }
       };
 
       const onPointerUp = (e: PointerEvent) => {
         if (e.target === frameEl) {
           reset();
-          onChange({ xDomain, yDomain });
+          onchange({ xDomain, yDomain });
         }
 
-        onBrushEnd({ xDomain, yDomain });
+        onbrushend({ xDomain, yDomain });
 
         if (resetOnEnd) {
           reset();
@@ -203,7 +209,7 @@
     xDomain = originalXDomain;
     yDomain = originalYDomain;
 
-    onReset({ xDomain, yDomain });
+    onreset({ xDomain, yDomain });
   }
 
   function selectAll() {
@@ -235,16 +241,15 @@
 <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}
+    onpointerdown={createRange}
+    ondblclick={() => selectAll()}
+    bind:element={frameEl}
   />
 
   {#if isActive}
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <Group x={rangeLeft} y={rangeTop} class="range">
       <slot name="range" {rangeWidth} {rangeHeight}>
-        <rect
+        <Rect
           width={rangeWidth}
           height={rangeHeight}
           class={cls(
@@ -252,8 +257,8 @@
             range?.fill == null && 'fill-surface-content/10',
             classes.range
           )}
-          on:pointerdown={adjustRange}
-          on:dblclick={() => reset()}
+          onpointerdown={adjustRange}
+          ondblclick={() => reset()}
           {...range}
         />
       </slot>
@@ -264,16 +269,16 @@
         x={rangeLeft}
         y={rangeTop}
         class="handle top"
-        on:pointerdown={adjustTop}
-        on:dblclick={() => {
+        onpointerdown={adjustTop}
+        ondblclick={() => {
           if (yDomain) {
             yDomain[0] = yDomainMin;
-            onChange({ xDomain, yDomain });
+            onchange({ xDomain, yDomain });
           }
         }}
       >
         <slot name="handle" edge="top" {rangeWidth} {rangeHeight}>
-          <rect
+          <Rect
             width={rangeWidth}
             height={handleSize}
             class={cls('fill-transparent cursor-ns-resize select-none', classes.handle)}
@@ -286,15 +291,15 @@
         x={rangeLeft}
         y={bottom - handleSize + 1}
         class="handle bottom"
-        on:pointerdown={adjustBottom}
-        on:dblclick={() => {
+        onpointerdown={adjustBottom}
+        ondblclick={() => {
           if (yDomain) {
             yDomain[1] = yDomainMax;
           }
         }}
       >
         <slot name="handle" edge="bottom" {rangeWidth} {rangeHeight}>
-          <rect
+          <Rect
             width={rangeWidth}
             height={handleSize}
             class={cls('fill-transparent cursor-ns-resize select-none', classes.handle)}
@@ -309,11 +314,11 @@
         x={rangeLeft}
         y={rangeTop}
         class="handle left"
-        on:pointerdown={adjustLeft}
-        on:dblclick={() => {
+        onpointerdown={adjustLeft}
+        ondblclick={() => {
           if (xDomain) {
             xDomain[0] = xDomainMin;
-            onChange({ xDomain, yDomain });
+            onchange({ xDomain, yDomain });
           }
         }}
       >
@@ -331,16 +336,16 @@
         x={right - handleSize + 1}
         y={rangeTop}
         class="handle right"
-        on:pointerdown={adjustRight}
-        on:dblclick={() => {
+        onpointerdown={adjustRight}
+        ondblclick={() => {
           if (xDomain) {
             xDomain[1] = xDomainMax;
-            onChange({ xDomain, yDomain });
+            onchange({ xDomain, yDomain });
           }
         }}
       >
         <slot name="handle" edge="right" {rangeWidth} {rangeHeight}>
-          <rect
+          <Rect
             width={handleSize}
             height={rangeHeight}
             class={cls('fill-transparent cursor-ew-resize select-none', classes.handle)}

package/dist/components/Calendar.svelte

@@ -64,8 +64,8 @@
       width={cellWidth}
       height={cellHeight}
       fill={cell.color}
-      on:pointermove={(e) => tooltip?.show(e, cell.data)}
-      on:pointerleave={(e) => tooltip?.hide()}
+      onpointermove={(e) => tooltip?.show(e, cell.data)}
+      onpointerleave={(e) => tooltip?.hide()}
       class="stroke-surface-content/5"
       {...$$restProps}
     />

package/dist/components/Chart.svelte

@@ -209,6 +209,14 @@
 
     /** Exposed via bind: to support `bind:tooltipContext` for external access (ex. `tooltipContext.data) */
     tooltipContext?: typeof tooltipContext;
+
+    // ChartContext callback events
+    onresize?: typeof onresize;
+
+    // TransformContext callback events
+    ondragstart?: typeof ondragstart;
+    ondragend?: typeof ondragend;
+    ontransform?: typeof ontransform;
   }
 
   export let data: TData[] | HierarchyNode<TData> | SankeyGraph<any, any> = [];
@@ -284,6 +292,11 @@
   /** Expose bound tooltip context */
   export let tooltipContext: ComponentProps<TooltipContext>['tooltip'] = undefined;
 
+  export let onresize: ComponentProps<ChartContext<TData>>['onresize'] = undefined;
+  export let ondragstart: ComponentProps<TransformContext>['ondragstart'] = undefined;
+  export let ondragend: ComponentProps<TransformContext>['ondragend'] = undefined;
+  export let ontransform: ComponentProps<TransformContext>['ontransform'] = undefined;
+
   // Track when mounted since LayerCake initializes width/height with `100` until bound `clientWidth`/`clientWidth` can run
   // Useful to key/remount TransformContext with correct `initialTranslate` / `initialScale` values
   let isMounted = false;
@@ -370,7 +383,7 @@
     let:c
     let:cScale
     let:cGet
-    on:resize
+    {onresize}
   >
     {#key isMounted}
       <TransformContext
@@ -401,9 +414,9 @@
           : undefined}
         {...transform}
         let:transform={_transform}
-        on:transform
-        on:dragstart
-        on:dragend
+        {ondragstart}
+        {ontransform}
+        {ondragend}
       >
         <GeoContext {...geo} bind:geo={geoProjection} let:projection>
           {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}

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

@@ -184,13 +184,13 @@ declare class __sveltets_Render<TData> {
         }> | undefined;
         /** Props passed to TooltipContext */
         tooltip?: boolean | Partial<{
-            mode?: "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | "manual";
+            mode?: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
             findTooltipData?: "closest" | "left" | "right";
             raiseTarget?: boolean;
             locked?: boolean;
             radius?: number;
             debug?: boolean;
-            onClick?: ({ data }: {
+            onclick?: ({ data }: {
                 data: any;
             }) => any;
             tooltip?: import("svelte/store").Writable<{
@@ -199,6 +199,7 @@ declare class __sveltets_Render<TData> {
                 data: any;
                 show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;
+                mode: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
             }>;
         }> | undefined;
         /** Props passed to TransformContext */
@@ -214,6 +215,15 @@ declare class __sveltets_Render<TData> {
             disablePointer?: boolean;
             initialScrollMode?: "none" | "scale" | "translate";
             clickDistance?: number;
+            ondragstart?: (() => void) | undefined;
+            ondragend?: (() => void) | undefined;
+            ontransform?: ((e: {
+                scale: number;
+                translate: {
+                    x: number;
+                    y: number;
+                };
+            }) => void) | undefined;
             initialTranslate?: {
                 x: number;
                 y: number;
@@ -259,20 +269,20 @@ declare class __sveltets_Render<TData> {
             data: any;
             show: (e: PointerEvent, tooltipData?: any) => void;
             hide: () => void;
+            mode: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
         }> | undefined;
-    };
-    events(): {
-        resize: CustomEvent<any>;
-        transform: CustomEvent<{
+        onresize?: ((e: import("./ChartContext.svelte").ChartResizeDetail) => void) | undefined;
+        ondragstart?: (() => void) | undefined;
+        ondragend?: (() => void) | undefined;
+        ontransform?: ((e: {
             scale: number;
             translate: {
                 x: number;
                 y: number;
             };
-        }>;
-        dragstart: CustomEvent<null>;
-        dragend: CustomEvent<null>;
-    } & {
+        }) => void) | undefined;
+    };
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {
@@ -310,6 +320,7 @@ declare class __sveltets_Render<TData> {
                 data: any;
                 show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;
+                mode: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
             };
             x: Function;
             xScale: any;

package/dist/components/ChartClipPath.svelte

@@ -17,7 +17,6 @@
   width={$width + (full ? ($padding?.left ?? 0) + ($padding?.right ?? 0) : 0)}
   height={$height + (full ? ($padding?.top ?? 0) + ($padding?.bottom ?? 0) : 0)}
   {disabled}
-  on:click
   {...$$restProps}
 >
   <slot />

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

@@ -6,8 +6,6 @@ declare const __propDef: {
         disabled?: boolean | undefined;
     };
     events: {
-        click: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/ChartContext.svelte

@@ -3,13 +3,7 @@
   import { createScale, type AnyScale } from '../utils/scales.js';
 
   import type { HierarchyNode } from 'd3-hierarchy';
-  import {
-    createEventDispatcher,
-    getContext,
-    onMount,
-    setContext,
-    type ComponentProps,
-  } from 'svelte';
+  import { getContext, onMount, setContext } from 'svelte';
   import { derived, writable, type Readable } from 'svelte/store';
 
   export const chartContextKey = Symbol();
@@ -102,8 +96,6 @@
     containerHeight: number;
   };
 
-  export type ChartResizeEvent = CustomEvent<ChartResizeDetail>;
-
   export type ChartContext<TData> = LayerCakeContext<TData> & {
     // Additional context values
     radial: Readable<boolean>;
@@ -266,9 +258,10 @@
   };
   setChartContext(chartContext);
 
-  const dispatch = createEventDispatcher<ChartEvents>();
+  export let onresize: ((e: ChartResizeDetail) => void) | undefined = undefined;
+
   $: if (isMounted) {
-    dispatch('resize', {
+    onresize?.({
       width: $width,
       height: $height,
       containerWidth: $containerWidth,