layerchart 2.0.0-next.5 → 2.0.0-next.51

package/dist/utils/canvas.js

@@ -1,11 +1,71 @@
+import memoize from 'memoize';
 import { cls } from '@layerstack/tailwind';
-import { memoize } from 'lodash-es';
+/** @deprecated - use `isTransparentFill` instead */
 export const DEFAULT_FILL = 'rgb(0, 0, 0)';
+/**
+ * Returns true if the fill color is effectively invisible (none, transparent, or alpha=0).
+ * Used to skip canvas fill rendering for invisible fills.
+ */
+function isTransparentFill(fill) {
+    if (!fill || fill === 'none' || fill === 'transparent')
+        return true;
+    // Match rgba(..., 0) - alpha channel is 0 (fully transparent)
+    return /rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*0\s*\)/.test(fill);
+}
 const CANVAS_STYLES_ELEMENT_ID = '__layerchart_canvas_styles_id';
+/**
+ * Parse an inline CSS style string into a StyleOptions object.
+ * Converts kebab-case properties to camelCase (e.g., 'stroke-dasharray' -> 'strokeDasharray')
+ */
+function parseStyleString(styleString) {
+    if (!styleString)
+        return {};
+    const styles = {};
+    // Split by semicolons and process each declaration
+    const declarations = styleString.split(';').filter((s) => s.trim());
+    for (const declaration of declarations) {
+        const colonIndex = declaration.indexOf(':');
+        if (colonIndex === -1)
+            continue;
+        const property = declaration.slice(0, colonIndex).trim();
+        const value = declaration.slice(colonIndex + 1).trim();
+        if (!property || !value)
+            continue;
+        // Convert kebab-case to camelCase (e.g., 'stroke-dasharray' -> 'strokeDasharray')
+        const camelProperty = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+        styles[camelProperty] = value;
+    }
+    return styles;
+}
+const supportedStyles = [
+    'fill',
+    'fillOpacity',
+    'stroke',
+    'strokeOpacity',
+    'strokeWidth',
+    'strokeDasharray',
+    '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 } = {}) {
+    // Server-side: no DOM available, return styles with sensible defaults
+    if (typeof document === 'undefined') {
+        const merged = { ...styles };
+        if (!merged.fontSize)
+            merged.fontSize = '10px';
+        if (!merged.fontFamily)
+            merged.fontFamily = 'sans-serif';
+        return merged;
+    }
+    // console.count(`getComputedStyles: ${getComputedStylesKey(canvas, { styles, classes })}`);
     try {
         // Get or create `<svg>` below `<canvas>`
         let svg = document.getElementById(CANVAS_STYLES_ELEMENT_ID);
@@ -24,13 +84,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,54 +104,106 @@ 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');
+    // Parse inline style string and merge with styles object
+    const parsedInlineStyles = parseStyleString(styleOptions.style);
+    const mergedStyles = { ...styleOptions.styles, ...parsedInlineStyles };
     // 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 (typeof document === 'undefined' ||
+        (styleOptions.classes == null &&
+            !Object.values(mergedStyles).some((v) => typeof v === 'string' && v.includes('var(')))) {
+        // Skip resolving styles if running on server (no DOM), or no classes are provided and no styles are using CSS variables
+        resolvedStyles = mergedStyles;
+        // On server, provide sensible defaults for styles that would normally come from CSS
+        if (typeof document === 'undefined') {
+            if (!resolvedStyles.stroke && !resolvedStyles.fill) {
+                resolvedStyles = { ...resolvedStyles, stroke: 'black' };
+            }
+        }
+    }
+    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(mergedStyles).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 };
     }
-    // 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';
+    // 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 if (computedStyles.textAnchor === 'end') {
-        ctx.textAlign = 'right';
+    // font/text properties can be expensive to set (not sure why), so only apply if needed (renderText())
+    if (applyText) {
+        // Text properties — use defaults for server-side rendering where computed styles aren't available
+        const fontSize = resolvedStyles.fontSize || '10px';
+        const fontFamily = resolvedStyles.fontFamily || 'sans-serif';
+        const fontWeight = resolvedStyles.fontWeight || '';
+        ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`.trim(); // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
+        if (resolvedStyles.textAnchor === 'middle') {
+            ctx.textAlign = 'center';
+        }
+        else if (resolvedStyles.textAnchor === 'end') {
+            ctx.textAlign = 'right';
+        }
+        else if (resolvedStyles.textAnchor === 'start') {
+            ctx.textAlign = 'left';
+        }
+        else if (resolvedStyles.textAlign) {
+            ctx.textAlign = resolvedStyles.textAlign;
+        }
+        // If textAnchor/textAlign are unset, ctx.textAlign retains its pre-set value (e.g. from Text.svelte)
+        // TODO: Handle `textBaseline` / `verticalAnchor` (Text)
+        // ctx.textBaseline = 'top';
+        // ctx.textBaseline = 'middle';
+        // ctx.textBaseline = 'bottom';
+        // ctx.textBaseline = 'alphabetic';
+        // ctx.textBaseline = 'hanging';
+        // ctx.textBaseline = 'ideographic';
     }
-    else {
-        ctx.textAlign = computedStyles.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';
-    // Dashed lines
-    if (computedStyles.strokeDasharray.includes(',')) {
-        const dashArray = computedStyles.strokeDasharray
-            .split(',')
+    // Dashed lines (supports both comma and space separators, e.g., "2,2" or "2 2")
+    if (resolvedStyles.strokeDasharray && resolvedStyles.strokeDasharray !== 'none') {
+        const dashArray = resolvedStyles.strokeDasharray
+            .split(/[\s,]+/)
+            .filter((s) => s.length > 0)
             .map((s) => Number(s.replace('px', '')));
-        ctx.setLineDash(dashArray);
+        if (dashArray.length > 0 && dashArray.every((n) => !isNaN(n))) {
+            ctx.setLineDash(dashArray);
+        }
     }
     for (const attr of paintOrder) {
         if (attr === 'fill') {
             const fill = styleOptions.styles?.fill &&
-                (styleOptions.styles?.fill instanceof CanvasGradient ||
-                    styleOptions.styles?.fill instanceof CanvasPattern ||
+                ((typeof CanvasGradient !== 'undefined' && styleOptions.styles?.fill instanceof CanvasGradient) ||
+                    (typeof CanvasPattern !== 'undefined' && styleOptions.styles?.fill instanceof CanvasPattern) ||
                     !styleOptions.styles?.fill?.includes('var'))
                 ? styleOptions.styles.fill
-                : computedStyles?.fill;
-            if (fill && !['none', DEFAULT_FILL].includes(fill)) {
+                : resolvedStyles?.fill;
+            if (fill && !isTransparentFill(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);
@@ -95,17 +213,25 @@ function render(ctx, render, styleOptions = {}) {
         }
         else if (attr === 'stroke') {
             const stroke = styleOptions.styles?.stroke &&
-                (styleOptions.styles?.stroke instanceof CanvasGradient ||
+                ((typeof CanvasGradient !== 'undefined' && styleOptions.styles?.stroke instanceof CanvasGradient) ||
                     !styleOptions.styles?.stroke?.includes('var'))
                 ? styleOptions.styles?.stroke
-                : computedStyles?.stroke;
+                : resolvedStyles?.stroke;
             if (stroke && !['none'].includes(stroke)) {
+                const currentGlobalAlpha = ctx.globalAlpha;
+                const strokeOpacity = Number(resolvedStyles?.strokeOpacity);
+                const opacity = Number(resolvedStyles?.opacity);
+                if (!isNaN(strokeOpacity) && strokeOpacity !== 1) {
+                    ctx.globalAlpha = strokeOpacity * (isNaN(opacity) ? 1 : opacity);
+                }
                 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);
+                // Restore in case it was modified by `strokeOpacity`
+                ctx.globalAlpha = currentGlobalAlpha;
             }
         }
     }
@@ -123,14 +249,50 @@ 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 = {}) {
-    render(ctx, {
-        fill: (ctx) => ctx.fillRect(coords.x, coords.y, coords.width, coords.height),
-        stroke: (ctx) => ctx.strokeRect(coords.x, coords.y, coords.width, coords.height),
-    }, styleOptions);
+    const { x, y, width, height } = coords;
+    const rx = coords.rx ?? 0;
+    const ry = coords.ry ?? rx; // Default ry to rx if not provided (SVG behavior)
+    // No rounding - use simple rect methods
+    if (rx === 0 && ry === 0) {
+        render(ctx, {
+            fill: (ctx) => ctx.fillRect(x, y, width, height),
+            stroke: (ctx) => ctx.strokeRect(x, y, width, height),
+        }, styleOptions);
+        return;
+    }
+    // Try native roundRect if available (modern browsers)
+    if (typeof ctx.roundRect === 'function') {
+        ctx.beginPath();
+        ctx.roundRect(x, y, width, height, [rx, ry]);
+        render(ctx, {
+            fill: (ctx) => ctx.fill(),
+            stroke: (ctx) => ctx.stroke(),
+        }, styleOptions);
+        ctx.closePath();
+        return;
+    }
+    // Fallback: use path rendering for rounded corners
+    // Clamp radii to half the width/height
+    const clampedRx = Math.min(rx, width / 2);
+    const clampedRy = Math.min(ry, height / 2);
+    // Build rounded rect path: start at top-left (after corner), go clockwise
+    const pathData = [
+        `M${x + clampedRx},${y}`, // Move to top-left (after corner)
+        `h${width - 2 * clampedRx}`, // Top edge
+        `a${clampedRx},${clampedRy} 0 0 1 ${clampedRx},${clampedRy}`, // Top-right corner
+        `v${height - 2 * clampedRy}`, // Right edge
+        `a${clampedRx},${clampedRy} 0 0 1 ${-clampedRx},${clampedRy}`, // Bottom-right corner
+        `h${2 * clampedRx - width}`, // Bottom edge
+        `a${clampedRx},${clampedRy} 0 0 1 ${-clampedRx},${-clampedRy}`, // Bottom-left corner
+        `v${2 * clampedRy - height}`, // Left edge
+        `a${clampedRx},${clampedRy} 0 0 1 ${clampedRx},${-clampedRy}`, // Top-left corner
+        'z', // Close path
+    ].join(' ');
+    renderPathData(ctx, pathData, styleOptions);
 }
 export function renderCircle(ctx, coords, styleOptions = {}) {
     ctx.beginPath();
@@ -145,6 +307,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(...)`
@@ -156,7 +331,7 @@ export function clearCanvasContext(ctx, options) {
   @see: https://web.dev/articles/canvas-hidipi
 */
 export function scaleCanvas(ctx, width, height) {
-    const devicePixelRatio = window.devicePixelRatio || 1;
+    const devicePixelRatio = typeof window !== 'undefined' ? (window.devicePixelRatio || 1) : 1;
     ctx.canvas.width = width * devicePixelRatio;
     ctx.canvas.height = height * devicePixelRatio;
     ctx.canvas.style.width = `${width}px`;
@@ -166,7 +341,7 @@ export function scaleCanvas(ctx, width, height) {
 }
 /** Get pixel color (r,g,b,a) at canvas coordinates */
 export function getPixelColor(ctx, x, y) {
-    const dpr = window.devicePixelRatio ?? 1;
+    const dpr = (typeof window !== 'undefined' ? window.devicePixelRatio : null) ?? 1;
     const imageData = ctx.getImageData(x * dpr, y * dpr, 1, 1);
     const [r, g, b, a] = imageData.data;
     return { r, g, b, a };
@@ -179,9 +354,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 +388,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/canvas.svelte.test.d.ts

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