layerchart 0.81.2 → 0.90.0

package/dist/components/Spline.svelte

@@ -4,6 +4,7 @@
   import { tweened as tweenedStore } from 'svelte/motion';
   import { draw as _drawTransition } from 'svelte/transition';
   import { cubicInOut } from 'svelte/easing';
+  import { merge } from 'lodash-es';
 
   import { line as d3Line, lineRadial } from 'd3-shape';
   import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
@@ -22,8 +23,8 @@
   import { accessor, type Accessor } from '../utils/common.js';
   import { isScaleBand } from '../utils/scales.js';
   import { flattenPathData } from '../utils/path.js';
-  import { renderPathData } from '../utils/canvas.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
+  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
 
   const {
     data: contextData,
@@ -72,6 +73,15 @@
   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;
+  export let onpointerdown: ((e: PointerEvent) => void) | undefined = undefined;
+  export let ontouchmove: ((e: TouchEvent) => void) | undefined = undefined;
+  export let onpointerover: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerout: ((e: PointerEvent) => void) | undefined = undefined;
+
   /** Marker to attach to start, mid, and end points of path */
   export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
     undefined;
@@ -167,11 +177,20 @@
   const canvasContext = getCanvasContext();
   const renderContext = canvasContext ? 'canvas' : 'svg';
 
-  function render(ctx: CanvasRenderingContext2D) {
-    renderPathData(ctx, $tweened_d, {
-      styles: { stroke, fill, strokeWidth, opacity },
-      classes: className,
-    });
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    renderPathData(
+      ctx,
+      $tweened_d,
+      styleOverrides
+        ? merge({ styles: { strokeWidth } }, styleOverrides)
+        : {
+            styles: { fill, stroke, strokeWidth, opacity },
+            classes: className,
+          }
+    );
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
@@ -186,7 +205,20 @@
 
   let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Spline', render });
+    canvasUnregister = canvasContext.register({
+      name: 'Spline',
+      render,
+      events: {
+        click: onclick,
+        pointerenter: onpointerenter,
+        pointermove: onpointermove,
+        pointerleave: onpointerleave,
+        pointerdown: onpointerdown,
+        pointerover: onpointerover,
+        pointerout: onpointerout,
+        touchmove: ontouchmove,
+      },
+    });
   }
 
   onDestroy(() => {
@@ -244,10 +276,14 @@
       marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
       marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
       in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
-      on:click
-      on:pointerenter
-      on:pointermove
-      on:pointerleave
+      on:click={onclick}
+      on:pointerenter={onpointerenter}
+      on:pointermove={onpointermove}
+      on:pointerleave={onpointerleave}
+      on:pointerdown={onpointerdown}
+      on:pointerover={onpointerover}
+      on:pointerout={onpointerout}
+      on:touchmove={ontouchmove}
       bind:this={pathEl}
     />
 

package/dist/components/Text.svelte

@@ -3,11 +3,12 @@
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { cls } from '@layerstack/tailwind';
   import { objectId } from '@layerstack/utils/object';
+  import { merge } from 'lodash-es';
 
   import { getStringWidth } from '../utils/string.js';
   import { motionStore } from '../stores/motionStore.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
-  import { renderText } from '../utils/canvas.js';
+  import { renderText, type ComputedStylesOptions } from '../utils/canvas.js';
 
   /*
     TODO:
@@ -182,7 +183,10 @@
   const canvasContext = getCanvasContext();
   const renderContext = canvasContext ? 'canvas' : 'svg';
 
-  function render(ctx: CanvasRenderingContext2D) {
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
     wordsByLines.forEach((line, index) => {
       renderText(
         ctx,
@@ -194,10 +198,12 @@
             getPixelValue(dy) +
             (index === 0 ? startDy : getPixelValue(lineHeight)),
         },
-        {
-          styles: { fill, fillOpacity, stroke, strokeWidth, paintOrder: 'stroke', textAnchor },
-          classes: cls(fill === undefined && 'fill-surface-content', className),
-        }
+        styleOverrides
+          ? merge({ styles: { strokeWidth } }, styleOverrides)
+          : {
+              styles: { fill, fillOpacity, stroke, strokeWidth, paintOrder: 'stroke', textAnchor },
+              classes: cls(fill === undefined && 'fill-surface-content', className),
+            }
       );
     });
   }

package/dist/components/TransformContext.svelte

@@ -54,8 +54,6 @@
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
   import { chartContext } from './ChartContext.svelte';
   import { motionStore, type MotionOptions, motionFinishHandler } from '../stores/motionStore.js';
 
@@ -90,11 +88,11 @@
   /** Distance/threshold to consider drag vs click (disable click propagation) */
   export let clickDistance = 10;
 
-  const dispatch = createEventDispatcher<{
-    dragstart: null;
-    dragend: null;
-    transform: { scale: number; translate: { x: number; y: number } };
-  }>();
+  export let ondragstart: (() => void) | undefined = undefined;
+  export let ondragend: (() => void) | undefined = undefined;
+  export let ontransform:
+    | ((e: { scale: number; translate: { x: number; y: number } }) => void)
+    | undefined = undefined;
 
   let pointerDown = false;
   const dragging = writable(false);
@@ -161,7 +159,7 @@
     startPoint = localPoint(e);
     startTranslate = $translate;
 
-    dispatch('dragstart');
+    ondragstart?.();
   }
 
   function onPointerMove(e: PointerEvent) {
@@ -194,7 +192,7 @@
   function onPointerUp(e: PointerEvent) {
     pointerDown = false;
     $dragging = false;
-    dispatch('dragend');
+    ondragend?.();
   }
 
   function onClick(e: MouseEvent) {
@@ -297,7 +295,7 @@
     y: center.y - $translate.y,
   };
 
-  $: dispatch('transform', { scale: $scale, translate: $translate });
+  $: ontransform?.({ scale: $scale, translate: $translate });
 
   setTransformContext({
     mode,

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

@@ -47,6 +47,15 @@ declare const __propDef: {
         /** Disable pointer events including move/dragging.  Useful for `mode="canvas" but only want zoomTo() interactions */ disablePointer?: boolean;
         /** Action to take during wheel scroll */ initialScrollMode?: TransformScrollMode;
         /** Distance/threshold to consider drag vs click (disable click propagation) */ clickDistance?: number;
+        ondragstart?: (() => void) | undefined;
+        ondragend?: (() => void) | undefined;
+        ontransform?: ((e: {
+            scale: number;
+            translate: {
+                x: number;
+                y: number;
+            };
+        }) => void) | undefined;
         initialTranslate?: {
             x: number;
             y: number;
@@ -86,15 +95,6 @@ declare const __propDef: {
         keydown: KeyboardEvent;
         keyup: KeyboardEvent;
         keypress: KeyboardEvent;
-        dragstart: CustomEvent<null>;
-        dragend: CustomEvent<null>;
-        transform: CustomEvent<{
-            scale: number;
-            translate: {
-                x: number;
-                y: number;
-            };
-        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Voronoi.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
   import { min } from 'd3-array';
   import { Delaunay } from 'd3-delaunay';
   import type { GeoPermissibleObjects } from 'd3-geo';
@@ -11,6 +10,7 @@
   import { chartContext } from './ChartContext.svelte';
   import GeoPath from './GeoPath.svelte';
   import { geoContext, type GeoContext } from './GeoContext.svelte';
+  import Spline from './Spline.svelte';
 
   const { flatData, xGet, yGet, x: xContext, y: yContext, width, height, radial } = chartContext();
   const geo = geoContext() as GeoContext | undefined;
@@ -23,21 +23,43 @@
     path?: string;
   } = {};
 
-  const dispatch = createEventDispatcher<{
-    click: { data: any; point?: [number, number]; feature?: GeoPermissibleObjects };
-    pointerenter: {
-      event: PointerEvent;
-      data: any;
-      point?: [number, number];
-      feature?: GeoPermissibleObjects;
-    };
-    pointermove: {
-      event: PointerEvent;
-      data: any;
-      point?: [number, number];
-      feature?: GeoPermissibleObjects;
-    };
-  }>();
+  export let onclick:
+    | ((
+        e: MouseEvent,
+        details: { data: any; point?: [number, number]; feature?: GeoPermissibleObjects }
+      ) => void)
+    | undefined = undefined;
+  export let onpointerenter:
+    | ((
+        e: PointerEvent,
+        details: {
+          data: any;
+          point?: [number, number];
+          feature?: GeoPermissibleObjects;
+        }
+      ) => void)
+    | undefined = undefined;
+  export let onpointermove:
+    | ((
+        e: PointerEvent,
+        details: {
+          data: any;
+          point?: [number, number];
+          feature?: GeoPermissibleObjects;
+        }
+      ) => void)
+    | undefined = undefined;
+  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerdown:
+    | ((
+        e: PointerEvent,
+        details: {
+          data: any;
+          point?: [number, number];
+          feature?: GeoPermissibleObjects;
+        }
+      ) => void)
+    | undefined = undefined;
 
   $: points = (data ?? $flatData).map((d: any) => {
     // geo voronoi needs raw latitude/longtude, not mapped to range (chart dimensions)
@@ -71,38 +93,38 @@
     {#each polygons.features as feature}
       <GeoPath
         geojson={feature}
-        class={cls('fill-transparent', classes.path)}
-        on:pointerenter={(e) =>
-          dispatch('pointerenter', { event: e, data: feature.properties.site.data, feature })}
-        on:pointermove={(e) =>
-          dispatch('pointermove', { event: e, data: feature.properties.site.data, feature })}
-        on:pointerleave
-        on:touchmove={(e) => {
+        class={cls('fill-transparent stroke-transparent', classes.path)}
+        onclick={(e) => onclick?.(e, { data: feature.properties.site.data, feature })}
+        onpointerenter={(e) => onpointerenter?.(e, { data: feature.properties.site.data, feature })}
+        onpointermove={(e) => onpointermove?.(e, { data: feature.properties.site.data, feature })}
+        onpointerdown={(e) => onpointerdown?.(e, { data: feature.properties.site.data, feature })}
+        {onpointerleave}
+        ontouchmove={(e) => {
           // Prevent touch to not interfer with pointer
           e.preventDefault();
         }}
-        on:pointerdown
-        on:click={(e) => dispatch('click', { data: feature.properties.site.data, feature })}
       />
     {/each}
   {:else}
     {@const voronoi = Delaunay.from(points).voronoi([0, 0, boundWidth, boundHeight])}
     {#each points as point, i}
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <path
-        d={voronoi.renderCell(i)}
-        class={cls('fill-transparent', classes.path)}
-        on:pointerenter={(e) => dispatch('pointerenter', { event: e, data: point.data, point })}
-        on:pointermove={(e) => dispatch('pointermove', { event: e, data: point.data, point })}
-        on:pointerleave
-        on:touchmove={(e) => {
-          // Prevent touch to not interfer with pointer
-          e.preventDefault();
-        }}
-        on:pointerdown
-        on:click={(e) => dispatch('click', { data: point.data, point })}
-      />
+      {@const pathData = voronoi.renderCell(i)}
+      <!-- Wait to render Spline until pathData is available to fix path artifacts from injected tweened points in Spline  -->
+      {#if pathData}
+        <Spline
+          {pathData}
+          class={cls('fill-transparent stroke-transparent', classes.path)}
+          onclick={(e) => onclick?.(e, { data: point.data, point })}
+          onpointerenter={(e) => onpointerenter?.(e, { data: point.data, point })}
+          onpointermove={(e) => onpointermove?.(e, { data: point.data, point })}
+          {onpointerleave}
+          onpointerdown={(e) => onpointerdown?.(e, { data: point.data, point })}
+          ontouchmove={(e) => {
+            // Prevent touch to not interfer with pointer
+            e.preventDefault();
+          }}
+        />
+      {/if}
     {/each}
   {/if}
 </g>

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

@@ -8,28 +8,29 @@ declare const __propDef: {
             root?: string;
             path?: string;
         } | undefined;
-    };
-    events: {
-        pointerleave: PointerEvent;
-        pointerdown: PointerEvent;
-        click: CustomEvent<{
+        onclick?: ((e: MouseEvent, details: {
             data: any;
             point?: [number, number];
             feature?: GeoPermissibleObjects;
-        }>;
-        pointerenter: CustomEvent<{
-            event: PointerEvent;
+        }) => void) | undefined | undefined;
+        onpointerenter?: ((e: PointerEvent, details: {
             data: any;
             point?: [number, number];
             feature?: GeoPermissibleObjects;
-        }>;
-        pointermove: CustomEvent<{
-            event: PointerEvent;
+        }) => void) | undefined | undefined;
+        onpointermove?: ((e: PointerEvent, details: {
             data: any;
             point?: [number, number];
             feature?: GeoPermissibleObjects;
-        }>;
-    } & {
+        }) => void) | undefined | undefined;
+        onpointerleave?: ((e: PointerEvent) => void) | undefined | undefined;
+        onpointerdown?: ((e: PointerEvent, details: {
+            data: any;
+            point?: [number, number];
+            feature?: GeoPermissibleObjects;
+        }) => void) | undefined | undefined;
+    };
+    events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/charts/AreaChart.svelte

@@ -35,6 +35,7 @@
   interface $$Props extends ComponentProps<Chart<TData>> {
     axis?: typeof axis;
     brush?: typeof brush;
+    debug?: typeof debug;
     grid?: typeof grid;
     labels?: typeof labels;
     legend?: typeof legend;
@@ -45,8 +46,8 @@
     series?: typeof series;
     seriesLayout?: typeof seriesLayout;
     renderContext?: typeof renderContext;
-    onPointClick?: typeof onPointClick;
-    onTooltipClick?: typeof onTooltipClick;
+    onpointclick?: typeof onpointclick;
+    ontooltipclick?: typeof ontooltipclick;
   }
 
   export let data: $$Props['data'] = [];
@@ -83,13 +84,16 @@
   export let rule: ComponentProps<Rule> | boolean = true;
 
   /** Event dispatched with current tooltip data */
-  export let onTooltipClick: (e: { data: any }) => void = () => {};
+  export let ontooltipclick: (e: MouseEvent, details: { data: any }) => void = () => {};
 
   /** Event dispatched when Highlight point is clicked (useful with multiple series) */
-  export let onPointClick: (e: {
-    data: HighlightPointData;
-    series: (typeof series)[number];
-  }) => void = () => {};
+  export let onpointclick: (
+    e: MouseEvent,
+    details: {
+      data: HighlightPointData;
+      series: (typeof series)[number];
+    }
+  ) => void = () => {};
 
   export let props: {
     area?: Partial<ComponentProps<Area>>;
@@ -118,6 +122,9 @@
   /** Log initial render performance using `console.time` */
   export let profile = false;
 
+  /** Enable debug mode */
+  export let debug = false;
+
   $: allSeriesData = visibleSeries
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d) as Array<TData & { stackData?: any }>;
@@ -274,7 +281,8 @@
     ? false
     : {
         mode: 'bisect-x',
-        onClick: onTooltipClick,
+        onclick: ontooltipclick,
+        debug,
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
@@ -308,7 +316,7 @@
   }}
 
   <slot {...slotProps}>
-    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} center={radial}>
+    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} center={radial} {debug}>
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid x={radial} y {...typeof grid === 'object' ? grid : null} {...props.grid} />
@@ -381,9 +389,9 @@
               ),
             }}
             lines={i == 0}
-            onPointClick={(e) => onPointClick({ ...e, series: s })}
-            onPointEnter={() => (highlightSeriesKey = s.key)}
-            onPointLeave={() => (highlightSeriesKey = null)}
+            onpointclick={(e, detail) => onpointclick(e, { ...detail, series: s })}
+            onpointenter={() => (highlightSeriesKey = s.key)}
+            onpointleave={() => (highlightSeriesKey = null)}
             {...props.highlight}
           />
         {/each}
@@ -424,9 +432,9 @@
           tickFormat={(key) => series.find((s) => s.key === key)?.label ?? key}
           placement="bottom"
           variant="swatches"
-          onClick={(item) => $selectedSeries.toggleSelected(item.value)}
-          onPointerEnter={(item) => (highlightSeriesKey = item.value)}
-          onPointerLeave={(item) => (highlightSeriesKey = null)}
+          onclick={(e, item) => $selectedSeries.toggleSelected(item.value)}
+          onpointerenter={(e, item) => (highlightSeriesKey = item.value)}
+          onpointerleave={(e) => (highlightSeriesKey = null)}
           {...props.legend}
           {...typeof legend === 'object' ? legend : null}
           classes={{

package/dist/components/charts/BarChart.svelte

@@ -27,12 +27,13 @@
     type Accessor,
   } from '../../utils/common.js';
   import { asAny } from '../../utils/types.js';
-  import type { Insets } from '../../index.js/utils/rect.js';
+  import type { Insets } from '../../utils/rect.js';
 
   type ChartProps = ComponentProps<Chart<TData>>;
 
   interface $$Props extends ChartProps {
     axis?: typeof axis;
+    debug?: typeof debug;
     grid?: typeof grid;
     bandPadding?: typeof bandPadding;
     groupPadding?: typeof groupPadding;
@@ -46,8 +47,8 @@
     series?: typeof series;
     seriesLayout?: typeof seriesLayout;
     renderContext?: typeof renderContext;
-    onBarClick?: typeof onBarClick;
-    onTooltipClick?: typeof onTooltipClick;
+    onbarclick?: typeof onbarclick;
+    ontooltipclick?: typeof ontooltipclick;
   }
 
   export let data: $$Props['data'] = [];
@@ -93,11 +94,14 @@
   export let stackPadding = 0;
 
   /** Event dispatched with current tooltip data */
-  export let onTooltipClick: (e: { data: any }) => void = () => {};
+  export let ontooltipclick: (e: MouseEvent, detail: { data: any }) => void = () => {};
 
   // TODO: Need to find a way to have this play nice with `tooltip={{ mode: 'band' }}`
   /** Event dispatched when individual Bar is clicked (useful with multiple series) */
-  export let onBarClick: (e: { data: any; series: (typeof series)[number] }) => void = () => {};
+  export let onbarclick: (
+    e: MouseEvent,
+    detail: { data: any; series: (typeof series)[number] }
+  ) => void = () => {};
 
   $: xScale = $$props.xScale ?? (isVertical ? scaleBand().padding(bandPadding) : scaleLinear());
   $: xBaseline = isVertical ? undefined : 0;
@@ -150,6 +154,9 @@
   /** Log initial render performance using `console.time` */
   export let profile = false;
 
+  /** Enable debug mode */
+  export let debug = false;
+
   $: allSeriesData = visibleSeries
     .flatMap((s) =>
       s.data?.map((d) => {
@@ -226,7 +233,7 @@
       strokeWidth: 1,
       insets: stackInsets,
       fill: s.color,
-      onBarClick: (e) => onBarClick({ data: e.data, series: s }),
+      onbarclick: (e, detail) => onbarclick(e, { ...detail, series: s }),
       ...props.bars,
       ...s.props,
       class: cls(
@@ -303,7 +310,13 @@
   {...$$restProps}
   tooltip={$$props.tooltip === false
     ? false
-    : { mode: 'band', onClick: onTooltipClick, ...props.tooltip?.context, ...$$props.tooltip }}
+    : {
+        mode: 'band',
+        onclick: ontooltipclick,
+        debug,
+        ...props.tooltip?.context,
+        ...$$props.tooltip,
+      }}
   let:x
   let:xScale
   let:y
@@ -332,7 +345,7 @@
     getLabelsProps,
   }}
   <slot {...slotProps}>
-    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg}>
+    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} {debug}>
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid
@@ -420,9 +433,9 @@
           tickFormat={(key) => series.find((s) => s.key === key)?.label ?? key}
           placement="bottom"
           variant="swatches"
-          onClick={(item) => $selectedSeries.toggleSelected(item.value)}
-          onPointerEnter={(item) => (highlightSeriesKey = item.value)}
-          onPointerLeave={(item) => (highlightSeriesKey = null)}
+          onclick={(e, item) => $selectedSeries.toggleSelected(item.value)}
+          onpointerenter={(e, item) => (highlightSeriesKey = item.value)}
+          onpointerleave={(e) => (highlightSeriesKey = null)}
           {...props.legend}
           {...typeof legend === 'object' ? legend : null}
           classes={{