layerchart 0.78.0 → 0.79.1

package/dist/components/Arc.svelte

@@ -24,6 +24,8 @@
   import { scaleLinear } from 'd3-scale';
   import { min, max } from 'd3-array';
 
+  import { objectId } from '@layerstack/utils/object';
+
   import { chartContext } from './ChartContext.svelte';
   import { motionStore } from '../stores/motionStore.js';
   import { degreesToRadians } from '../utils/math.js';
@@ -87,6 +89,9 @@
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let track: boolean | SVGAttributes<SVGPathElement> = false;
 
   const { yRange } = chartContext();
@@ -213,19 +218,23 @@
     // Arc
     renderPathData(ctx, arc(), {
       styles: { fill, fillOpacity, stroke, strokeWidth },
-      classes: $$props.class,
+      classes: className,
     });
   }
 
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  $: fillKey = typeof fill === 'object' ? objectId(fill) : fill;
+  $: strokeKey = typeof stroke === 'object' ? objectId(stroke) : stroke;
+
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Arc', render });
+    // Redraw when props change
+    arc && trackArc && fillKey && fillOpacity && strokeKey && strokeWidth && className;
+    canvasContext.invalidate();
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    // Redraw when props changes (TODO: styles, class, etc)
-    arc && trackArc;
-    canvasContext.invalidate();
+    canvasUnregister = canvasContext.register({ name: 'Arc', render });
   }
 
   onDestroy(() => {
@@ -253,6 +262,7 @@
     fill-opacity={fillOpacity}
     {stroke}
     stroke-width={strokeWidth}
+    class={className}
     {...$$restProps}
     on:pointerenter={(e) => tooltip?.show(e, data)}
     on:pointermove={(e) => tooltip?.show(e, data)}

package/dist/components/Area.svelte

@@ -7,6 +7,7 @@
   import { interpolatePath } from 'd3-interpolate-path';
 
   import { cls } from '@layerstack/tailwind';
+  import { objectId } from '@layerstack/utils/object';
 
   import { motionStore } from '../stores/motionStore.js';
 
@@ -59,6 +60,9 @@
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   $: xAccessor = x ? accessor(x) : $contextX;
   $: y0Accessor = y0 ? accessor(y0) : (d: any) => min($yDomain);
   $: y1Accessor = y1 ? accessor(y1) : $y;
@@ -139,10 +143,20 @@
   function render(ctx: CanvasRenderingContext2D) {
     renderPathData(ctx, $tweened_d, {
       styles: { fill, fillOpacity, stroke, strokeWidth },
-      classes: $$props.class,
+      classes: className,
     });
   }
 
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  $: fillKey = typeof fill === 'object' ? objectId(fill) : fill;
+  $: strokeKey = typeof stroke === 'object' ? objectId(stroke) : stroke;
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when props change
+    fillKey && fillOpacity && strokeKey && strokeWidth && className;
+    canvasContext.invalidate();
+  }
+
   let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
     canvasUnregister = canvasContext.register({ name: 'Area', render });
@@ -182,7 +196,7 @@
     {stroke}
     stroke-width={strokeWidth}
     {...$$restProps}
-    class={cls('path-area', $$props.class)}
+    class={cls('path-area', className)}
     on:click
     on:pointermove
     on:pointerleave

package/dist/components/Circle.svelte

@@ -2,6 +2,7 @@
   import { onDestroy, tick } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { cls } from '@layerstack/tailwind';
+  import { objectId } from '@layerstack/utils/object';
 
   import { motionStore } from '../stores/motionStore.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
@@ -25,6 +26,9 @@
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   let tweened_cx = motionStore(initialCx, { spring, tweened });
   let tweened_cy = motionStore(initialCy, { spring, tweened });
   let tweened_r = motionStore(initialR, { spring, tweened });
@@ -46,15 +50,26 @@
     });
   }
 
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  $: fillKey = fill && typeof fill === 'object' ? objectId(fill) : fill;
+  $: strokeKey = stroke && typeof stroke === 'object' ? objectId(stroke) : stroke;
+
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Circle', render });
+    // Redraw when props changes
+    $tweened_cx &&
+      $tweened_cy &&
+      $tweened_r &&
+      fillKey &&
+      fillOpacity &&
+      strokeKey &&
+      strokeWidth &&
+      className;
+    canvasContext.invalidate();
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    // Redraw when props changes (TODO: styles, class, etc)
-    $tweened_cx && $tweened_cy && $tweened_r;
-    canvasContext.invalidate();
+    canvasUnregister = canvasContext.register({ name: 'Circle', render });
   }
 
   onDestroy(() => {

package/dist/components/GeoPath.svelte

@@ -15,6 +15,7 @@
   import { geoCurvePath } from '../utils/geo.js';
   import { renderPathData } from '../utils/canvas.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
+  import { objectId } from '@layerstack/utils/object';
 
   export let geojson: GeoPermissibleObjects | null | undefined = undefined;
 
@@ -89,17 +90,21 @@
     }
   }
 
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
-  $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'GeoPath', render: _render });
-  }
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  $: fillKey = typeof fill === 'object' ? objectId(fill) : fill;
+  $: strokeKey = typeof stroke === 'object' ? objectId(stroke) : stroke;
 
   $: if (renderContext === 'canvas') {
     // Redraw when geojson, projection, or class change
-    geojson && _projection && className && fill && stroke && strokeWidth;
+    geojson && _projection && fillKey && strokeKey && strokeWidth && className;
     canvasContext.invalidate();
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'GeoPath', render: _render });
+  }
+
   onDestroy(() => {
     if (renderContext === 'canvas') {
       canvasUnregister();

package/dist/components/GeoTile.svelte

@@ -46,14 +46,14 @@
     });
   }
 
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'GeoTile', render });
+    tile;
+    canvasContext.invalidate();
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    tile;
-    canvasContext.invalidate();
+    canvasUnregister = canvasContext.register({ name: 'GeoTile', render });
   }
 
   onDestroy(() => {

package/dist/components/Group.svelte

@@ -53,14 +53,14 @@
     ctx.translate($tweened_x ?? 0, $tweened_y ?? 0);
   }
 
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Group', render, retainState: true });
+    $tweened_x && $tweened_y;
+    canvasContext.invalidate();
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    $tweened_x && $tweened_y;
-    canvasContext.invalidate();
+    canvasUnregister = canvasContext.register({ name: 'Group', render, retainState: true });
   }
 
   onDestroy(() => {

package/dist/components/Line.svelte

@@ -2,9 +2,10 @@
   import { onDestroy, tick, type ComponentProps } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { cls } from '@layerstack/tailwind';
+  import { uniqueId } from '@layerstack/utils';
+  import { objectId } from '@layerstack/utils/object';
 
   import { motionStore } from '../stores/motionStore.js';
-  import { uniqueId } from '@layerstack/utils';
 
   import Marker from './Marker.svelte';
   import { renderPathData } from '../utils/canvas.js';
@@ -26,6 +27,9 @@
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   /** Marker to attach to start and end points of path */
   export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
     undefined;
@@ -61,19 +65,30 @@
     const pathData = `M ${$tweened_x1},${$tweened_y1} L ${$tweened_x2},${$tweened_y2}`;
     renderPathData(ctx, pathData, {
       styles: { fill, stroke, strokeWidth },
-      classes: $$props.class,
+      classes: className,
     });
   }
 
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  $: fillKey = typeof fill === 'object' ? objectId(fill) : fill;
+  $: strokeKey = typeof stroke === 'object' ? objectId(stroke) : stroke;
+
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Line', render });
+    // Redraw when props change
+    $tweened_x1 &&
+      $tweened_y1 &&
+      $tweened_x2 &&
+      $tweened_y2 &&
+      fillKey &&
+      strokeKey &&
+      strokeWidth &&
+      className;
+    canvasContext.invalidate();
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    // Redraw when props changes (TODO: styles, class, etc)
-    $tweened_x1 && $tweened_y1 && $tweened_x2 && $tweened_y2;
-    canvasContext.invalidate();
+    canvasUnregister = canvasContext.register({ name: 'Line', render });
   }
 
   onDestroy(() => {
@@ -95,8 +110,8 @@
     stroke-width={strokeWidth}
     marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
     marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-    class={cls($$props.stroke === undefined && 'stroke-surface-content')}
     {...$$restProps}
+    class={cls($$props.stroke === undefined && 'stroke-surface-content', className)}
     on:click
     on:pointermove
     on:pointerleave

package/dist/components/LinearGradient.svelte

@@ -4,7 +4,7 @@
 
   import { chartContext } from './ChartContext.svelte';
   import { getCanvasContext } from './layout/Canvas.svelte';
-  import { getComputedStyles } from '../utils/canvas.js';
+  import { createLinearGradient, getComputedStyles } from '../utils/canvas.js';
   import { parsePercent } from '../utils/math.js';
 
   /** Unique id for linearGradient */
@@ -36,43 +36,45 @@
   let canvasGradient: CanvasGradient;
 
   function render(ctx: CanvasRenderingContext2D) {
-    // TODO: Use x1/y1/x2/y2 values (convert from pecentage strings)
-    const gradient = ctx.createLinearGradient(
-      $padding.left,
-      $padding.top,
-      vertical ? $padding.left : $width - $padding.right,
-      vertical ? $height + $padding.bottom : $padding.top
-    );
-
     // Use `getComputedStyles()` to convert each stop (if using CSS variables and/or classes) to color values
-    stops.forEach((stop, i) => {
+    const _stops = stops.map((stop, i) => {
       if (Array.isArray(stop)) {
         const { fill } = getComputedStyles(ctx.canvas, {
           styles: { fill: stop[1] },
           classes: $$props.class,
         });
-        gradient.addColorStop(parsePercent(stop[0]), fill);
+        return { offset: parsePercent(stop[0]), color: fill };
       } else {
         const { fill } = getComputedStyles(ctx.canvas, {
           styles: { fill: stop },
           classes: $$props.class,
         });
-        gradient.addColorStop(i / (stops.length - 1), fill);
+        return { offset: i / (stops.length - 1), color: fill };
       }
     });
 
+    // TODO: Use x1/y1/x2/y2 values (convert from pecentage strings)
+    const gradient = createLinearGradient(
+      ctx,
+      $padding.left,
+      $padding.top,
+      vertical ? $padding.left : $width - $padding.right,
+      vertical ? $height + $padding.bottom : $padding.top,
+      _stops
+    );
+
     canvasGradient = gradient;
   }
 
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Gradient', render });
+    // Redraw when props changes (TODO: styles, class, etc)
+    x1 && y1 && x2 && y2 && stops;
+    canvasContext.invalidate();
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    // Redraw when props changes (TODO: styles, class, etc)
-    stops && x1 && y1 && x2 && y2 && $width && $height;
-    canvasContext.invalidate();
+    canvasUnregister = canvasContext.register({ name: 'Gradient', render });
   }
 
   onDestroy(() => {

package/dist/components/RadialGradient.svelte

@@ -41,6 +41,7 @@
 
   function render(ctx: CanvasRenderingContext2D) {
     // TODO: Set correct values: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient.  See also: LinearGradient
+    // TODO: Memoize `createRadialGradient()` (see LinearGradient)
     const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, 0);
 
     // Use `getComputedStyles()` to convert each stop (if using CSS variables and/or classes) to color values

package/dist/components/Rect.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onDestroy, tick } from 'svelte';
   import { cls } from '@layerstack/tailwind';
+  import { objectId } from '@layerstack/utils/object';
 
   import {
     motionStore,
@@ -28,6 +29,9 @@
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let spring: boolean | SpringOptions | { [prop: string]: SpringOptions } = undefined;
   export let tweened: boolean | TweenedOptions | { [prop: string]: TweenedOptions } = undefined;
 
@@ -52,20 +56,31 @@
       { x: $tweened_x, y: $tweened_y, width: $tweened_width, height: $tweened_height },
       {
         styles: { fill, fillOpacity, stroke, strokeWidth },
-        classes: $$props.class,
+        classes: className,
       }
     );
   }
 
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  $: fillKey = typeof fill === 'object' ? objectId(fill) : fill;
+  $: strokeKey = typeof stroke === 'object' ? objectId(stroke) : stroke;
+
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Rect', render });
+    // Redraw when props change
+    $tweened_x &&
+      $tweened_y &&
+      $tweened_width &&
+      $tweened_height &&
+      fillKey &&
+      strokeKey &&
+      strokeWidth &&
+      className;
+    canvasContext.invalidate();
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    // Redraw when props changes (TODO: styles, class, etc)
-    $tweened_x && $tweened_y && $tweened_width && $tweened_height;
-    canvasContext.invalidate();
+    canvasUnregister = canvasContext.register({ name: 'Rect', render });
   }
 
   onDestroy(() => {
@@ -83,7 +98,7 @@
     y={$tweened_y}
     width={$tweened_width}
     height={$tweened_height}
-    class={cls($$props.fill == null && 'fill-surface-content')}
+    class={cls(fill == null && 'fill-surface-content')}
     {fill}
     fill-opacity={fillOpacity}
     {stroke}

package/dist/components/Spline.svelte

@@ -12,6 +12,7 @@
   import { max } from 'd3-array';
   import { cls } from '@layerstack/tailwind';
   import { uniqueId } from '@layerstack/utils';
+  import { objectId } from '@layerstack/utils/object';
 
   import { chartContext } from './ChartContext.svelte';
   import Group from './Group.svelte';
@@ -68,6 +69,9 @@
   export let strokeWidth: number | undefined = undefined;
   export let opacity: number | undefined = undefined;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   /** Marker to attach to start, mid, and end points of path */
   export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
     undefined;
@@ -166,17 +170,23 @@
   function render(ctx: CanvasRenderingContext2D) {
     renderPathData(ctx, $tweened_d, {
       styles: { stroke, fill, strokeWidth, opacity },
-      classes: $$props.class,
+      classes: className,
     });
   }
 
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  $: fillKey = typeof fill === 'object' ? objectId(fill) : fill;
+  $: strokeKey = typeof stroke === 'object' ? objectId(stroke) : stroke;
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when props change
+    $tweened_d && fillKey && strokeKey && strokeWidth && className;
+    canvasContext.invalidate();
+  }
+
   let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
     canvasUnregister = canvasContext.register({ name: 'Spline', render });
-
-    tweened_d.subscribe(() => {
-      canvasContext.invalidate();
-    });
   }
 
   onDestroy(() => {
@@ -225,12 +235,7 @@
     <path
       d={$tweened_d}
       {...$$restProps}
-      class={cls(
-        'path-line',
-        !$$props.fill && 'fill-none',
-        !$$props.stroke && 'stroke-surface-content',
-        $$props.class
-      )}
+      class={cls('path-line', !fill && 'fill-none', !stroke && 'stroke-surface-content', className)}
       {fill}
       {stroke}
       stroke-width={strokeWidth}

package/dist/components/Text.svelte

@@ -2,6 +2,7 @@
   import { onDestroy, tick } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { cls } from '@layerstack/tailwind';
+  import { objectId } from '@layerstack/utils/object';
 
   import { getStringWidth } from '../utils/string.js';
   import { motionStore } from '../stores/motionStore.js';
@@ -65,6 +66,9 @@
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   let wordsByLines: { words: string[]; width?: number }[] = [];
   let wordsWithWidth: { word: string; width: number }[] = [];
   let spaceWidth: number = 0;
@@ -192,21 +196,25 @@
         },
         {
           styles: { fill, fillOpacity, stroke, strokeWidth, paintOrder: 'stroke', textAnchor },
-          classes: cls(fill === undefined && 'fill-surface-content', $$props.class),
+          classes: cls(fill === undefined && 'fill-surface-content', className),
         }
       );
     });
   }
 
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  $: fillKey = typeof fill === 'object' ? objectId(fill) : fill;
+  $: strokeKey = typeof stroke === 'object' ? objectId(stroke) : stroke;
+
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Text', render });
+    // Redraw when props change
+    value && $tweened_x && $tweened_y && fillKey && strokeKey && strokeWidth && className;
+    canvasContext.invalidate();
   }
 
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    // Redraw when props changes (TODO: styles, class, etc)
-    value && $tweened_x && $tweened_y;
-    canvasContext.invalidate();
+    canvasUnregister = canvasContext.register({ name: 'Text', render });
   }
 
   onDestroy(() => {
@@ -231,7 +239,7 @@
         fill-opacity={fillOpacity}
         {stroke}
         stroke-width={strokeWidth}
-        class={cls(fill === undefined && 'fill-surface-content', $$props.class)}
+        class={cls(fill === undefined && 'fill-surface-content', className)}
       >
         {#each wordsByLines as line, index}
           <tspan x={$tweened_x} dy={index === 0 ? startDy : lineHeight}>

package/dist/utils/canvas.js

@@ -1,3 +1,5 @@
+import { cls } from '@layerstack/tailwind';
+import { memoize } from 'lodash-es';
 export const DEFAULT_FILL = 'rgb(0, 0, 0)';
 const CANVAS_STYLES_ELEMENT_ID = '__layerchart_canvas_styles_id';
 /**
@@ -23,7 +25,10 @@ export function getComputedStyles(canvas, { styles, classes } = {}) {
             Object.assign(svg.style, styles);
         }
         if (classes) {
-            svg.setAttribute('class', classes);
+            svg.setAttribute('class', cls(classes)
+                .split(' ')
+                .filter((s) => !s.startsWith('transition-'))
+                .join(' '));
         }
         const computedStyles = window.getComputedStyle(svg);
         return computedStyles;
@@ -35,6 +40,7 @@ export function getComputedStyles(canvas, { styles, classes } = {}) {
 }
 /** Render onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
 function render(canvasCtx, render, styleOptions = {}) {
+    // console.count('render');
     // TODO: Consider memoizing?  How about reactiving to CSS variable changes (light/dark mode toggle)
     const computedStyles = getComputedStyles(canvasCtx.canvas, styleOptions);
     // Adhere to CSS paint order: https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order
@@ -77,9 +83,9 @@ function render(canvasCtx, render, styleOptions = {}) {
                     : computedStyles?.fill;
             if (fill) {
                 const currentGlobalAlpha = canvasCtx.globalAlpha;
-                if (computedStyles?.fillOpacity) {
-                    canvasCtx.globalAlpha = Number(computedStyles?.fillOpacity);
-                }
+                const fillOpacity = Number(computedStyles?.fillOpacity);
+                const opacity = Number(computedStyles?.opacity);
+                canvasCtx.globalAlpha = fillOpacity * opacity;
                 canvasCtx.fillStyle = fill;
                 render.fill(canvasCtx);
                 // Restore in case it was modified by `fillOpacity`
@@ -144,3 +150,15 @@ export function scaleCanvas(ctx, width, height) {
     ctx.scale(devicePixelRatio, devicePixelRatio);
     return { width: ctx.canvas.width, height: ctx.canvas.height };
 }
+export function _createLinearGradient(canvasCtx, x0, y0, x1, y1, stops) {
+    const gradient = canvasCtx.createLinearGradient(x0, y0, x1, y1);
+    stops.forEach(({ offset, color }) => {
+        gradient.addColorStop(offset, color);
+    });
+    return gradient;
+}
+/** Create linear gradient and memoize result to fix reactivity */
+export const createLinearGradient = memoize(_createLinearGradient, (canvasCtx, x0, y0, x1, y1, stops) => {
+    const key = JSON.stringify({ x0, y0, x1, y1, stops });
+    return key;
+});

package/package.json

@@ -4,17 +4,17 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.78.0",
+  "version": "0.79.1",
   "devDependencies": {
-    "@changesets/cli": "^2.27.10",
+    "@changesets/cli": "^2.27.12",
     "@mdi/js": "^7.4.47",
     "@rollup/plugin-dsv": "^3.0.5",
-    "@sveltejs/adapter-cloudflare": "^4.8.0",
-    "@sveltejs/kit": "^2.11.1",
-    "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^5.0.2",
+    "@sveltejs/adapter-cloudflare": "^5.0.1",
+    "@sveltejs/kit": "^2.16.1",
+    "@sveltejs/package": "^2.3.9",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
-    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/d3-array": "^3.2.1",
     "@types/d3-color": "^3.1.3",
     "@types/d3-delaunay": "^6.0.4",
@@ -30,7 +30,7 @@
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-scale": "^4.0.8",
     "@types/d3-scale-chromatic": "^3.1.0",
-    "@types/d3-shape": "^3.1.6",
+    "@types/d3-shape": "^3.1.7",
     "@types/d3-time": "^3.0.4",
     "@types/lodash-es": "^4.17.12",
     "@types/prismjs": "^1.26.5",
@@ -39,31 +39,31 @@
     "@types/topojson-simplify": "^3.0.3",
     "@types/topojson-specification": "^1.0.5",
     "autoprefixer": "^10.4.20",
-    "marked": "^15.0.3",
+    "marked": "^15.0.6",
     "mdsvex": "^0.12.3",
-    "posthog-js": "^1.203.1",
+    "posthog-js": "^1.210.2",
     "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.2",
+    "prettier-plugin-svelte": "^3.3.3",
     "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": "^5.13.0",
-    "svelte-check": "^4.1.1",
+    "svelte": "^5.19.3",
+    "svelte-check": "^4.1.4",
     "svelte-json-tree": "^2.2.0",
-    "svelte-ux": "^0.76.0",
-    "svelte2tsx": "^0.7.30",
+    "svelte-ux": "^0.90.0",
+    "svelte2tsx": "^0.7.34",
     "tailwindcss": "^3.4.16",
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "tslib": "^2.8.1",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^6.0.3",
-    "vitest": "^2.1.8"
+    "vite": "^6.0.11",
+    "vitest": "^3.0.4"
   },
   "type": "module",
   "dependencies": {

package/dist/utils/canvas.d.ts

@@ -1,46 +0,0 @@
-export declare const DEFAULT_FILL = "rgb(0, 0, 0)";
-type ComputedStylesOptions = {
-    styles?: Partial<Omit<CSSStyleDeclaration, 'fillOpacity' | 'strokeWidth' | 'opacity'> & {
-        fillOpacity?: number | string;
-        strokeWidth?: number | string;
-        opacity?: number | string;
-    }>;
-    classes?: string;
-};
-/**
- * Appends or reuses `<svg>` element below `<canvas>` to resolve CSS variables and classes (ex. `stroke: hsl(var(--color-primary))` => `stroke: rgb(...)` )
- */
-export declare function getComputedStyles(canvas: HTMLCanvasElement, { styles, classes }?: ComputedStylesOptions): CSSStyleDeclaration;
-/** Render SVG path data onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
-export declare function renderPathData(canvasCtx: CanvasRenderingContext2D, pathData: string | null | undefined, styleOptions?: ComputedStylesOptions): void;
-export declare function renderText(canvasCtx: CanvasRenderingContext2D, text: string | number | null | undefined, coords: {
-    x: number;
-    y: number;
-}, styleOptions?: ComputedStylesOptions): void;
-export declare function renderRect(canvasCtx: CanvasRenderingContext2D, coords: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}, styleOptions?: ComputedStylesOptions): void;
-/** Clear canvas accounting for Canvas `context.translate(...)` */
-export declare function clearCanvasContext(canvasCtx: CanvasRenderingContext2D, options: {
-    containerWidth: number;
-    containerHeight: number;
-    padding: {
-        top: number;
-        bottom: number;
-        left: number;
-        right: number;
-    };
-}): void;
-/**
-    Scales a canvas for high DPI / retina displays.
-  @see: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#examples
-  @see: https://web.dev/articles/canvas-hidipi
-*/
-export declare function scaleCanvas(ctx: CanvasRenderingContext2D, width: number, height: number): {
-    width: number;
-    height: number;
-};
-export {};