layerchart 2.0.0-next.3 → 2.0.0-next.31

package/dist/utils/arcText.svelte.js

@@ -216,7 +216,7 @@ export function createArcTextProps(props, opts = {}, position) {
             x: x,
             y: y,
             textAnchor,
-            'dominant-baseline': 'middle',
+            dominantBaseline: 'middle',
         };
     });
     const current = $derived.by(() => {
@@ -224,21 +224,21 @@ export function createArcTextProps(props, opts = {}, position) {
             return {
                 path: innerPath.current,
                 ...sharedProps,
-                'dominant-baseline': innerDominantBaseline,
+                dominantBaseline: innerDominantBaseline,
             };
         }
         else if (position === 'outer') {
             return {
                 path: outerPath.current,
                 ...sharedProps,
-                'dominant-baseline': outerDominantBaseline,
+                dominantBaseline: outerDominantBaseline,
             };
         }
         else if (position === 'middle') {
             return {
                 path: middlePath.current,
                 ...sharedProps,
-                'dominant-baseline': 'middle',
+                dominantBaseline: 'middle',
             };
         }
         else if (position === 'centroid') {

package/dist/utils/array.d.ts

@@ -1,5 +1,6 @@
 import type { Numeric } from 'd3-array';
 import { extent as d3extent } from 'd3-array';
+import { type Accessor } from './common.js';
 /**
  * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
  */
@@ -11,3 +12,13 @@ export declare function extent<T extends Numeric>(iterable: Parameters<typeof d3
  * of making a set
  */
 export declare function arraysEqual(arr1: unknown[], arr2: unknown[]): boolean;
+/**
+ * Add `lanes` property to each element in the data array support densely packing.
+ * This is useful for visualizing overlapping events in a timeline / Gantt chart.
+ */
+export declare function applyLanes<T extends Record<string, any>>(data: T[], options?: {
+    start: Accessor<T>;
+    end: Accessor<T>;
+}): (T & {
+    lane: number;
+})[];

package/dist/utils/array.js

@@ -1,4 +1,5 @@
 import { extent as d3extent } from 'd3-array';
+import { accessor } from './common.js';
 /**
  * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
  */
@@ -18,3 +19,25 @@ export function arraysEqual(arr1, arr2) {
         return arr2.includes(k);
     });
 }
+/**
+ * Add `lanes` property to each element in the data array support densely packing.
+ * This is useful for visualizing overlapping events in a timeline / Gantt chart.
+ */
+export function applyLanes(data, options = {
+    start: 'start',
+    end: 'end',
+}) {
+    const result = [];
+    let stack = [];
+    const startAccessor = accessor(options.start);
+    const endAccessor = accessor(options.end);
+    for (const d of data) {
+        let lane = stack.findIndex((s) => endAccessor(s) <= startAccessor(d) && startAccessor(s) < startAccessor(d));
+        if (lane === -1) {
+            lane = stack.length;
+        }
+        result.push({ ...d, lane });
+        stack[lane] = d;
+    }
+    return result;
+}

package/dist/utils/array.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/array.test.js

@@ -0,0 +1,200 @@
+import { describe, it, expect } from 'vitest';
+import { applyLanes } from './array.js';
+describe('applyLanes', () => {
+    it('should assign same lane to non-overlapping events', () => {
+        const data = [
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02') },
+            { id: 2, start: new Date('2023-01-03'), end: new Date('2023-01-05') },
+            { id: 3, start: new Date('2023-01-06'), end: new Date('2023-01-08') },
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02'), lane: 0 },
+            { id: 2, start: new Date('2023-01-03'), end: new Date('2023-01-05'), lane: 0 },
+            { id: 3, start: new Date('2023-01-06'), end: new Date('2023-01-08'), lane: 0 },
+        ]);
+    });
+    it('should assign different lanes to overlapping events', () => {
+        const data = [
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-03') },
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-04') },
+            { id: 3, start: new Date('2023-01-02T12:00:00'), end: new Date('2023-01-05') },
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-03'), lane: 0 },
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-04'), lane: 1 },
+            { id: 3, start: new Date('2023-01-02T12:00:00'), end: new Date('2023-01-05'), lane: 2 },
+        ]);
+    });
+    it('should reuse lanes when events no longer overlap', () => {
+        const data = [
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02') },
+            { id: 2, start: new Date('2023-01-01T12:00:00'), end: new Date('2023-01-03') },
+            { id: 3, start: new Date('2023-01-04'), end: new Date('2023-01-06') }, // starts after id: 1 ends
+            { id: 4, start: new Date('2023-01-05'), end: new Date('2023-01-07') }, // starts after id: 2 ends
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02'), lane: 0 },
+            { id: 2, start: new Date('2023-01-01T12:00:00'), end: new Date('2023-01-03'), lane: 1 },
+            { id: 3, start: new Date('2023-01-04'), end: new Date('2023-01-06'), lane: 0 }, // reuses lane 0
+            { id: 4, start: new Date('2023-01-05'), end: new Date('2023-01-07'), lane: 1 }, // reuses lane 1
+        ]);
+    });
+    it('should handle events that start exactly when another ends', () => {
+        const data = [
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02') },
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-04') }, // starts exactly when id: 1 ends
+            { id: 3, start: new Date('2023-01-01T12:00:00'), end: new Date('2023-01-03') }, // overlaps with both
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02'), lane: 0 },
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-04'), lane: 0 }, // can reuse lane 0
+            { id: 3, start: new Date('2023-01-01T12:00:00'), end: new Date('2023-01-03'), lane: 1 }, // overlaps, needs new lane
+        ]);
+    });
+    it('should work with string keys for start and end', () => {
+        const data = [
+            { name: 'Task 1', startTime: new Date('2023-01-01'), endTime: new Date('2023-01-03') },
+            { name: 'Task 2', startTime: new Date('2023-01-02'), endTime: new Date('2023-01-04') },
+        ];
+        const result = applyLanes(data, { start: 'startTime', end: 'endTime' });
+        expect(result).toEqual([
+            {
+                name: 'Task 1',
+                startTime: new Date('2023-01-01'),
+                endTime: new Date('2023-01-03'),
+                lane: 0,
+            },
+            {
+                name: 'Task 2',
+                startTime: new Date('2023-01-02'),
+                endTime: new Date('2023-01-04'),
+                lane: 1,
+            },
+        ]);
+    });
+    it('should work with nested string keys for start and end', () => {
+        const data = [
+            { name: 'Task 1', duration: { start: new Date('2023-01-01'), end: new Date('2023-01-02') } },
+            { name: 'Task 2', duration: { start: new Date('2023-01-03'), end: new Date('2023-01-04') } },
+        ];
+        const result = applyLanes(data, { start: 'duration.start', end: 'duration.end' });
+        expect(result).toEqual([
+            {
+                name: 'Task 1',
+                duration: { start: new Date('2023-01-01'), end: new Date('2023-01-02') },
+                lane: 0,
+            },
+            {
+                name: 'Task 2',
+                duration: { start: new Date('2023-01-03'), end: new Date('2023-01-04') },
+                lane: 0,
+            },
+        ]);
+    });
+    it('should work with function accessors for start and end', () => {
+        const data = [
+            { name: 'Task 1', duration: { start: new Date('2023-01-01'), end: new Date('2023-01-02') } },
+            { name: 'Task 2', duration: { start: new Date('2023-01-03'), end: new Date('2023-01-04') } },
+        ];
+        const result = applyLanes(data, { start: (d) => d.duration.start, end: (d) => d.duration.end });
+        expect(result).toEqual([
+            {
+                name: 'Task 1',
+                duration: { start: new Date('2023-01-01'), end: new Date('2023-01-02') },
+                lane: 0,
+            },
+            {
+                name: 'Task 2',
+                duration: { start: new Date('2023-01-03'), end: new Date('2023-01-04') },
+                lane: 0,
+            },
+        ]);
+    });
+    it('should handle empty array', () => {
+        const data = [];
+        const result = applyLanes(data);
+        expect(result).toEqual([]);
+    });
+    it('should handle single event', () => {
+        const data = [{ id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02') }];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02'), lane: 0 },
+        ]);
+    });
+    it('should handle complex overlapping scenario', () => {
+        const data = [
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-05') }, // long event
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-03') }, // short event inside
+            { id: 3, start: new Date('2023-01-02T12:00:00'), end: new Date('2023-01-04') }, // overlaps with both
+            { id: 4, start: new Date('2023-01-03'), end: new Date('2023-01-04T12:00:00') }, // overlaps with 1 and 3
+            { id: 5, start: new Date('2023-01-06'), end: new Date('2023-01-08') }, // separate event
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-05'), lane: 0 },
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-03'), lane: 1 },
+            { id: 3, start: new Date('2023-01-02T12:00:00'), end: new Date('2023-01-04'), lane: 2 },
+            { id: 4, start: new Date('2023-01-03'), end: new Date('2023-01-04T12:00:00'), lane: 1 }, // can reuse lane 1 since id: 2 ended
+            { id: 5, start: new Date('2023-01-06'), end: new Date('2023-01-08'), lane: 0 }, // can reuse lane 0 since id: 1 ended
+        ]);
+    });
+    it('should preserve all original properties', () => {
+        const data = [
+            {
+                id: 1,
+                start: new Date('2023-01-01'),
+                end: new Date('2023-01-02'),
+                name: 'First',
+                priority: 'high',
+                metadata: { foo: 'bar' },
+            },
+            {
+                id: 2,
+                start: new Date('2023-01-01T12:00:00'),
+                end: new Date('2023-01-03'),
+                name: 'Second',
+                priority: 'low',
+                metadata: { baz: 'qux' },
+            },
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            {
+                id: 1,
+                start: new Date('2023-01-01'),
+                end: new Date('2023-01-02'),
+                name: 'First',
+                priority: 'high',
+                metadata: { foo: 'bar' },
+                lane: 0,
+            },
+            {
+                id: 2,
+                start: new Date('2023-01-01T12:00:00'),
+                end: new Date('2023-01-03'),
+                name: 'Second',
+                priority: 'low',
+                metadata: { baz: 'qux' },
+                lane: 1,
+            },
+        ]);
+    });
+    it('should work with numeric values', () => {
+        const data = [
+            { id: 1, start: 0, end: 3 },
+            { id: 2, start: 1, end: 4 },
+            { id: 3, start: 5, end: 7 },
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: 0, end: 3, lane: 0 },
+            { id: 2, start: 1, end: 4, lane: 1 },
+            { id: 3, start: 5, end: 7, lane: 0 }, // can reuse lane 0 since id: 1 ended
+        ]);
+    });
+});

package/dist/utils/canvas.d.ts

@@ -0,0 +1,77 @@
+import type { ClassValue } from 'svelte/elements';
+import type { PatternShape } from '../components/Pattern.svelte';
+export declare const DEFAULT_FILL = "rgb(0, 0, 0)";
+type StyleOptions = Partial<Omit<CSSStyleDeclaration, 'fillOpacity' | 'strokeWidth' | 'opacity'> & {
+    fillOpacity?: number | string;
+    strokeWidth?: number | string;
+    opacity?: number | string;
+}>;
+export type ComputedStylesOptions = {
+    styles?: StyleOptions;
+    classes?: ClassValue | null;
+};
+/**
+ * Appends or reuses `<svg>` element below `<canvas>` to resolve CSS variables and classes (ex. `stroke: var(--color-primary)` => `stroke: rgb(...)` )
+ */
+export declare function _getComputedStyles(canvas: HTMLCanvasElement, { styles, classes }?: ComputedStylesOptions): CSSStyleDeclaration;
+export declare const getComputedStyles: any;
+/** Render SVG path data onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
+export declare function renderPathData(ctx: CanvasRenderingContext2D, pathData: string | null | undefined, styleOptions?: ComputedStylesOptions): void;
+export declare function renderText(ctx: CanvasRenderingContext2D, text: string | number | null | undefined, coords: {
+    x: number;
+    y: number;
+}, styleOptions?: ComputedStylesOptions): void;
+export declare function renderRect(ctx: CanvasRenderingContext2D, coords: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, styleOptions?: ComputedStylesOptions): void;
+export declare function renderCircle(ctx: CanvasRenderingContext2D, coords: {
+    cx: number;
+    cy: number;
+    r: number;
+}, styleOptions?: ComputedStylesOptions): void;
+export declare function renderEllipse(ctx: CanvasRenderingContext2D, coords: {
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+}, styleOptions?: ComputedStylesOptions): void;
+/** Clear canvas accounting for Canvas `context.translate(...)` */
+export declare function clearCanvasContext(ctx: 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;
+};
+/** Get pixel color (r,g,b,a) at canvas coordinates */
+export declare function getPixelColor(ctx: CanvasRenderingContext2D, x: number, y: number): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export declare function _createLinearGradient(ctx: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number, stops: {
+    offset: number;
+    color: string;
+}[]): CanvasGradient;
+/** Create linear gradient and memoize result to fix reactivity */
+export declare const createLinearGradient: any;
+export declare function _createPattern(ctx: CanvasRenderingContext2D, width: number, height: number, shapes: PatternShape[], background?: string): CanvasPattern | null;
+/** Create pattern and memoize result to fix reactivity */
+export declare const createPattern: any;
+export {};

package/dist/utils/canvas.js

@@ -1,11 +1,25 @@
+import memoize from 'memoize';
 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';
+const supportedStyles = [
+    'fill',
+    'fillOpacity',
+    'stroke',
+    'strokeWidth',
+    'opacity',
+    'fontWeight',
+    'fontSize',
+    'fontFamily',
+    'textAnchor',
+    'textAlign',
+    'paintOrder',
+];
 /**
  * Appends or reuses `<svg>` element below `<canvas>` to resolve CSS variables and classes (ex. `stroke: var(--color-primary)` => `stroke: rgb(...)` )
  */
-export function getComputedStyles(canvas, { styles, classes } = {}) {
+export function _getComputedStyles(canvas, { styles, classes } = {}) {
+    // console.count(`getComputedStyles: ${getComputedStylesKey(canvas, { styles, classes })}`);
     try {
         // Get or create `<svg>` below `<canvas>`
         let svg = document.getElementById(CANVAS_STYLES_ELEMENT_ID);
@@ -24,13 +38,19 @@ export function getComputedStyles(canvas, { styles, classes } = {}) {
         if (styles) {
             Object.assign(svg.style, styles);
         }
+        // Make sure `<svg>` is not visible
+        svg.style.display = 'none';
         if (classes) {
             svg.setAttribute('class', cls(classes)
                 .split(' ')
                 .filter((s) => !s.startsWith('transition-'))
                 .join(' '));
         }
-        const computedStyles = window.getComputedStyle(svg);
+        // Capture copy to enable memoization and avoid capturing all styles (which is very slow)
+        const computedStyles = supportedStyles.reduce((acc, style) => {
+            acc[style] = window.getComputedStyle(svg)[style];
+            return acc;
+        }, {});
         return computedStyles;
     }
     catch (e) {
@@ -38,38 +58,71 @@ export function getComputedStyles(canvas, { styles, classes } = {}) {
         return {};
     }
 }
+function getComputedStylesKey(canvas, { styles, classes } = {}) {
+    return JSON.stringify({ canvasId: canvas.id, styles, classes });
+}
+export const getComputedStyles = memoize(_getComputedStyles, {
+    cacheKey: ([canvas, styleOptions]) => {
+        return getComputedStylesKey(canvas, styleOptions);
+    },
+});
 /** Render onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
-function render(ctx, render, styleOptions = {}) {
+function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
     // console.count('render');
     // TODO: Consider memoizing?  How about reactiving to CSS variable changes (light/dark mode toggle)
-    const computedStyles = getComputedStyles(ctx.canvas, styleOptions);
-    // Adhere to CSS paint order: https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order
-    const paintOrder = computedStyles?.paintOrder === 'stroke' ? ['stroke', 'fill'] : ['fill', 'stroke'];
-    if (computedStyles?.opacity) {
-        ctx.globalAlpha = Number(computedStyles?.opacity);
+    let resolvedStyles;
+    if (styleOptions.classes == null &&
+        !Object.values(styleOptions.styles ?? {}).some((v) => typeof v === 'string' && v.includes('var('))) {
+        // Skip resolving styles if no classes are provided and no styles are using CSS variables
+        resolvedStyles = styleOptions.styles ?? {};
     }
-    // Text properties
-    ctx.font = `${computedStyles.fontWeight} ${computedStyles.fontSize} ${computedStyles.fontFamily}`; // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
-    // TODO: Hack to handle `textAnchor` with canvas.  Try to find a better approach
-    if (computedStyles.textAnchor === 'middle') {
-        ctx.textAlign = 'center';
+    else {
+        // Remove constant non-css variable properties (ex. `strokeWidth: 0.5`, `fill: #123456`) as not needed and improves memoization cache hit
+        const { constantStyles, variableStyles } = Object.entries(styleOptions.styles ?? {}).reduce((acc, [key, value]) => {
+            if (typeof value === 'number' || (typeof value === 'string' && !value.includes('var('))) {
+                acc.constantStyles[key] = value;
+            }
+            else if (typeof value === 'string' && value.includes('var(')) {
+                acc.variableStyles[key] = value;
+            }
+            return acc;
+        }, { constantStyles: {}, variableStyles: {} });
+        const computedStyles = getComputedStyles(ctx.canvas, {
+            styles: variableStyles,
+            classes: styleOptions.classes,
+        });
+        resolvedStyles = { ...computedStyles, ...constantStyles };
     }
-    else if (computedStyles.textAnchor === 'end') {
-        ctx.textAlign = 'right';
+    // Adhere to CSS paint order: https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order
+    const paintOrder = resolvedStyles?.paintOrder === 'stroke' ? ['stroke', 'fill'] : ['fill', 'stroke'];
+    if (resolvedStyles?.opacity) {
+        ctx.globalAlpha = Number(resolvedStyles?.opacity);
     }
-    else {
-        ctx.textAlign = computedStyles.textAlign; // TODO: Handle/map `justify` and `match-parent`?
+    // font/text properties can be expensive to set (not sure why), so only apply if needed (renderText())
+    if (applyText) {
+        // Text properties
+        ctx.font = `${resolvedStyles.fontWeight} ${resolvedStyles.fontSize} ${resolvedStyles.fontFamily}`; // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
+        // TODO: Hack to handle `textAnchor` with canvas.  Try to find a better approach
+        if (resolvedStyles.textAnchor === 'middle') {
+            ctx.textAlign = 'center';
+        }
+        else if (resolvedStyles.textAnchor === 'end') {
+            ctx.textAlign = 'right';
+        }
+        else {
+            ctx.textAlign = resolvedStyles.textAlign; // TODO: Handle/map `justify` and `match-parent`?
+        }
+        // TODO: Handle `textBaseline` / `verticalAnchor` (Text)
+        // ctx.textBaseline = 'top';
+        // ctx.textBaseline = 'middle';
+        // ctx.textBaseline = 'bottom';
+        // ctx.textBaseline = 'alphabetic';
+        // ctx.textBaseline = 'hanging';
+        // ctx.textBaseline = 'ideographic';
     }
-    // TODO: Handle `textBaseline` / `verticalAnchor` (Text)
-    // ctx.textBaseline = 'top';
-    // ctx.textBaseline = 'middle';
-    // ctx.textBaseline = 'bottom';
-    // ctx.textBaseline = 'alphabetic';
-    // ctx.textBaseline = 'hanging';
-    // ctx.textBaseline = 'ideographic';
     // Dashed lines
-    if (computedStyles.strokeDasharray.includes(',')) {
-        const dashArray = computedStyles.strokeDasharray
+    if (resolvedStyles.strokeDasharray?.includes(',')) {
+        const dashArray = resolvedStyles.strokeDasharray
             .split(',')
             .map((s) => Number(s.replace('px', '')));
         ctx.setLineDash(dashArray);
@@ -81,11 +134,11 @@ function render(ctx, render, styleOptions = {}) {
                     styleOptions.styles?.fill instanceof CanvasPattern ||
                     !styleOptions.styles?.fill?.includes('var'))
                 ? styleOptions.styles.fill
-                : computedStyles?.fill;
+                : resolvedStyles?.fill;
             if (fill && !['none', DEFAULT_FILL].includes(fill)) {
                 const currentGlobalAlpha = ctx.globalAlpha;
-                const fillOpacity = Number(computedStyles?.fillOpacity);
-                const opacity = Number(computedStyles?.opacity);
+                const fillOpacity = Number(resolvedStyles?.fillOpacity);
+                const opacity = Number(resolvedStyles?.opacity);
                 ctx.globalAlpha = fillOpacity * opacity;
                 ctx.fillStyle = fill;
                 render.fill(ctx);
@@ -98,12 +151,12 @@ function render(ctx, render, styleOptions = {}) {
                 (styleOptions.styles?.stroke instanceof CanvasGradient ||
                     !styleOptions.styles?.stroke?.includes('var'))
                 ? styleOptions.styles?.stroke
-                : computedStyles?.stroke;
+                : resolvedStyles?.stroke;
             if (stroke && !['none'].includes(stroke)) {
                 ctx.lineWidth =
-                    typeof computedStyles?.strokeWidth === 'string'
-                        ? Number(computedStyles?.strokeWidth?.replace('px', ''))
-                        : (computedStyles?.strokeWidth ?? 1);
+                    typeof resolvedStyles?.strokeWidth === 'string'
+                        ? Number(resolvedStyles?.strokeWidth?.replace('px', ''))
+                        : (resolvedStyles?.strokeWidth ?? 1);
                 ctx.strokeStyle = stroke;
                 render.stroke(ctx);
             }
@@ -123,7 +176,7 @@ export function renderText(ctx, text, coords, styleOptions = {}) {
         render(ctx, {
             fill: (ctx) => ctx.fillText(text.toString(), coords.x, coords.y),
             stroke: (ctx) => ctx.strokeText(text.toString(), coords.x, coords.y),
-        }, styleOptions);
+        }, styleOptions, { applyText: true });
     }
 }
 export function renderRect(ctx, coords, styleOptions = {}) {
@@ -145,6 +198,19 @@ export function renderCircle(ctx, coords, styleOptions = {}) {
     }, styleOptions);
     ctx.closePath();
 }
+export function renderEllipse(ctx, coords, styleOptions = {}) {
+    ctx.beginPath();
+    ctx.ellipse(coords.cx, coords.cy, coords.rx, coords.ry, 0, 0, 2 * Math.PI);
+    render(ctx, {
+        fill: (ctx) => {
+            ctx.fill();
+        },
+        stroke: (ctx) => {
+            ctx.stroke();
+        },
+    }, styleOptions);
+    ctx.closePath();
+}
 /** Clear canvas accounting for Canvas `context.translate(...)` */
 export function clearCanvasContext(ctx, options) {
     // Clear with negative offset due to Canvas `context.translate(...)`
@@ -179,9 +245,8 @@ export function _createLinearGradient(ctx, x0, y0, x1, y1, stops) {
     return gradient;
 }
 /** Create linear gradient and memoize result to fix reactivity */
-export const createLinearGradient = memoize(_createLinearGradient, (ctx, x0, y0, x1, y1, stops) => {
-    const key = JSON.stringify({ x0, y0, x1, y1, stops });
-    return key;
+export const createLinearGradient = memoize(_createLinearGradient, {
+    cacheKey: (args) => JSON.stringify(args.slice(1)), // Ignore `ctx` argument
 });
 export function _createPattern(ctx, width, height, shapes, background) {
     const patternCanvas = document.createElement('canvas');
@@ -214,7 +279,6 @@ export function _createPattern(ctx, width, height, shapes, background) {
     return pattern;
 }
 /** Create pattern and memoize result to fix reactivity */
-export const createPattern = memoize(_createPattern, (ctx, width, height, shapes, background) => {
-    const key = JSON.stringify({ width, height, shapes, background });
-    return key;
+export const createPattern = memoize(_createPattern, {
+    cacheKey: (args) => JSON.stringify(args.slice(1)), // Ignore `ctx` argument
 });

package/dist/utils/genData.d.ts

@@ -75,3 +75,17 @@ export declare function getSpiral({ angle, radius, count, width, height, }: {
     x: number;
     y: number;
 }[];
+interface SineWaveOptions {
+    numPoints: number;
+    frequency?: number;
+    amplitude?: number;
+    noiseLevel?: number;
+    phase?: number;
+    xMin?: number;
+    xMax?: number;
+}
+export declare function generateSineWave(options: SineWaveOptions): {
+    x: number;
+    y: number;
+}[];
+export {};