layerchart 2.0.0-next.53 → 2.0.0-next.55

package/dist/utils/canvas.js

@@ -1,5 +1,6 @@
 import memoize from 'memoize';
 import { cls } from '@layerstack/tailwind';
+import { roundedRectPath } from './path.js';
 /** @deprecated - use `isTransparentFill` instead */
 export const DEFAULT_FILL = 'rgb(0, 0, 0)';
 /**
@@ -152,7 +153,7 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
     // 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);
+        ctx.globalAlpha *= Number(resolvedStyles?.opacity);
     }
     // font/text properties can be expensive to set (not sure why), so only apply if needed (renderText())
     if (applyText) {
@@ -203,8 +204,7 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
             if (fill && !isTransparentFill(fill)) {
                 const currentGlobalAlpha = ctx.globalAlpha;
                 const fillOpacity = Number(resolvedStyles?.fillOpacity);
-                const opacity = Number(resolvedStyles?.opacity);
-                ctx.globalAlpha = fillOpacity * opacity;
+                ctx.globalAlpha *= isNaN(fillOpacity) ? 1 : fillOpacity;
                 ctx.fillStyle = fill;
                 render.fill(ctx);
                 // Restore in case it was modified by `fillOpacity`
@@ -222,7 +222,7 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
                 const strokeOpacity = Number(resolvedStyles?.strokeOpacity);
                 const opacity = Number(resolvedStyles?.opacity);
                 if (!isNaN(strokeOpacity) && strokeOpacity !== 1) {
-                    ctx.globalAlpha = strokeOpacity * (isNaN(opacity) ? 1 : opacity);
+                    ctx.globalAlpha *= strokeOpacity;
                 }
                 ctx.lineWidth =
                     typeof resolvedStyles?.strokeWidth === 'string'
@@ -253,11 +253,12 @@ export function renderText(ctx, text, coords, styleOptions = {}) {
     }
 }
 export function renderRect(ctx, coords, styleOptions = {}) {
-    const { x, y, width, height } = coords;
+    const { x, y, width, height, corners } = coords;
     const rx = coords.rx ?? 0;
     const ry = coords.ry ?? rx; // Default ry to rx if not provided (SVG behavior)
+    const perCorner = corners && !corners.every((c) => c === corners[0]);
     // No rounding - use simple rect methods
-    if (rx === 0 && ry === 0) {
+    if (!perCorner && rx === 0 && ry === 0 && !corners) {
         render(ctx, {
             fill: (ctx) => ctx.fillRect(x, y, width, height),
             stroke: (ctx) => ctx.strokeRect(x, y, width, height),
@@ -267,7 +268,7 @@ export function renderRect(ctx, coords, styleOptions = {}) {
     // Try native roundRect if available (modern browsers)
     if (typeof ctx.roundRect === 'function') {
         ctx.beginPath();
-        ctx.roundRect(x, y, width, height, [rx, ry]);
+        ctx.roundRect(x, y, width, height, corners ?? [rx, ry]);
         render(ctx, {
             fill: (ctx) => ctx.fill(),
             stroke: (ctx) => ctx.stroke(),
@@ -276,6 +277,11 @@ export function renderRect(ctx, coords, styleOptions = {}) {
         return;
     }
     // Fallback: use path rendering for rounded corners
+    if (corners) {
+        const pathData = roundedRectPath(x, y, width, height, corners);
+        renderPathData(ctx, pathData, styleOptions);
+        return;
+    }
     // Clamp radii to half the width/height
     const clampedRx = Math.min(rx, width / 2);
     const clampedRy = Math.min(ry, height / 2);

package/dist/utils/canvas.svelte.test.js

@@ -286,6 +286,61 @@ describe('renderPathData', () => {
         // During stroke, globalAlpha should be 0.4 * 1 = 0.4
         expect(globalAlphaValues[0]).toBeCloseTo(0.4);
     });
+    it('composes fill opacity with inherited globalAlpha (Group opacity)', () => {
+        // Simulate a parent Group setting globalAlpha to 0.5
+        ctx.globalAlpha = 0.5;
+        const globalAlphaValues = [];
+        const originalFill = ctx.fill.bind(ctx);
+        vi.spyOn(ctx, 'fill').mockImplementation(function (...args) {
+            globalAlphaValues.push(ctx.globalAlpha);
+            originalFill(...args);
+        });
+        renderPathData(ctx, 'M0,0 L100,0 L100,100 Z', {
+            styles: { fill: 'red', fillOpacity: '1', opacity: '1', stroke: 'none' },
+        });
+        // Should be 0.5 (inherited) * 1 * 1 = 0.5, not overwritten to 1
+        expect(globalAlphaValues[0]).toBeCloseTo(0.5);
+    });
+    it('composes stroke opacity with inherited globalAlpha (Group opacity)', () => {
+        ctx.globalAlpha = 0.5;
+        const globalAlphaValues = [];
+        const originalStroke = ctx.stroke.bind(ctx);
+        vi.spyOn(ctx, 'stroke').mockImplementation(function () {
+            globalAlphaValues.push(ctx.globalAlpha);
+            originalStroke();
+        });
+        renderPathData(ctx, 'M0,0 L100,0', {
+            styles: {
+                fill: 'none',
+                stroke: 'black',
+                strokeOpacity: '0.4',
+                opacity: '1',
+                strokeWidth: '2',
+            },
+        });
+        // Should be 0.5 (inherited) * 0.4 = 0.2
+        expect(globalAlphaValues[0]).toBeCloseTo(0.2);
+    });
+    it('composes element opacity with inherited globalAlpha (Group opacity)', () => {
+        ctx.globalAlpha = 0.5;
+        const globalAlphaValues = [];
+        const originalFill = ctx.fill.bind(ctx);
+        vi.spyOn(ctx, 'fill').mockImplementation(function (...args) {
+            globalAlphaValues.push(ctx.globalAlpha);
+            originalFill(...args);
+        });
+        renderPathData(ctx, 'M0,0 L100,0 L100,100 Z', {
+            styles: { fill: 'red', fillOpacity: '1', opacity: '0.6', stroke: 'none' },
+        });
+        // Should be 0.5 (inherited) * 0.6 (element opacity) * 1 (fillOpacity) = 0.3
+        expect(globalAlphaValues[0]).toBeCloseTo(0.3);
+    });
+    it('restores globalAlpha after rendering with inherited alpha', () => {
+        ctx.globalAlpha = 0.5;
+        renderPathData(ctx, 'M0,0 L100,0 L100,100 Z', plainFill('red'));
+        // globalAlpha should be restored to inherited value after rendering
+        expect(ctx.globalAlpha).toBeCloseTo(0.5);
+    });
     it('respects paintOrder stroke (stroke before fill)', () => {
         const callOrder = [];
         vi.spyOn(ctx, 'fill').mockImplementation(() => {

package/dist/utils/connectorUtils.d.ts

@@ -18,4 +18,17 @@ type GetConnectorD3PathProps = Omit<GetConnectorPresetPathProps, 'radius' | 'typ
     curve: CurveFactory;
 };
 export declare function getConnectorD3Path({ source, target, sweep, curve }: GetConnectorD3PathProps): string;
+type GetConnectorRadialPresetPathProps = {
+    source: ConnectorCoords;
+    target: ConnectorCoords;
+    type: PresetConnectorType;
+    radius: number;
+};
+export declare function getConnectorRadialPresetPath({ source, target, type, radius, }: GetConnectorRadialPresetPathProps): string;
+type GetConnectorRadialD3PathProps = {
+    source: ConnectorCoords;
+    target: ConnectorCoords;
+    curve?: CurveFactory;
+};
+export declare function getConnectorRadialD3Path({ source, target, curve, }: GetConnectorRadialD3PathProps): string;
 export {};

package/dist/utils/connectorUtils.js

@@ -1,4 +1,4 @@
-import { line as d3Line, curveLinear } from 'd3-shape';
+import { curveLinear, curveStep, curveStepAfter, curveStepBefore, line as d3Line, lineRadial, linkRadial, } from 'd3-shape';
 function isSamePoint(p1, p2) {
     return Math.abs(p1.x - p2.x) < 1e-6 && Math.abs(p1.y - p2.y) < 1e-6;
 }
@@ -109,3 +109,122 @@ export function getConnectorD3Path({ source, target, sweep, curve }) {
         return FALLBACK_PATH;
     return d;
 }
+function radialGeometry(source, target) {
+    const sa = source.x - Math.PI / 2;
+    const sr = source.y;
+    const ta = target.x - Math.PI / 2;
+    const tr = target.y;
+    const sc = Math.cos(sa);
+    const ss = Math.sin(sa);
+    const tc = Math.cos(ta);
+    const ts = Math.sin(ta);
+    const sweepFlag = Math.abs(ta - sa) > Math.PI ? (ta <= sa ? 1 : 0) : ta > sa ? 1 : 0;
+    return {
+        sa,
+        sr,
+        ta,
+        tr,
+        sc,
+        ss,
+        tc,
+        ts,
+        sx: sr * sc,
+        sy: sr * ss,
+        tx: tr * tc,
+        ty: tr * ts,
+        sweepFlag,
+    };
+}
+export function getConnectorRadialPresetPath({ source, target, type, radius, }) {
+    const g = radialGeometry(source, target);
+    const { sr, ta, tr, sc, ss, tc, ts, sx, sy, tx, ty, sweepFlag } = g;
+    if (type === 'straight') {
+        return `M${sx},${sy}L${tx},${ty}`;
+    }
+    if (type === 'rounded') {
+        // visx LinkRadialCurve: cubic Bezier with rotated offset (percent controls tension)
+        const percent = 0.2;
+        const dx = tx - sx;
+        const dy = ty - sy;
+        const ix = percent * (dx + dy);
+        const iy = percent * (dy - dx);
+        return `M${sx},${sy}C${sx + ix},${sy + iy} ${tx + iy},${ty - ix} ${tx},${ty}`;
+    }
+    if (type === 'square') {
+        // Source at origin — degenerate arc, just radial to target
+        if (sr < 1e-6)
+            return `M${sx},${sy}L${tx},${ty}`;
+        // Step at midpoint radius: radial + arc + radial
+        const mr = (sr + tr) / 2;
+        const p1x = mr * sc;
+        const p1y = mr * ss;
+        const p2x = mr * tc;
+        const p2y = mr * ts;
+        return `M${sx},${sy}L${p1x},${p1y}A${mr},${mr},0,0,${sweepFlag},${p2x},${p2y}L${tx},${ty}`;
+    }
+    // 'beveled': visx-style step with chord at source radius and chamfered corner
+    const cornerX = sr * tc;
+    const cornerY = sr * ts;
+    const chordDx = cornerX - sx;
+    const chordDy = cornerY - sy;
+    const chordLen = Math.hypot(chordDx, chordDy);
+    if (chordLen < 1e-6) {
+        // Source at origin — chord degenerates, just radial to target
+        return `M${sx},${sy}L${tx},${ty}`;
+    }
+    const radialLen = Math.abs(tr - sr) || 1;
+    const r = Math.max(0, Math.min(radius, chordLen, radialLen));
+    const cux = chordDx / chordLen;
+    const cuy = chordDy / chordLen;
+    const radialDir = Math.sign(tr - sr) || 1;
+    const p1x = cornerX - r * cux;
+    const p1y = cornerY - r * cuy;
+    const p2x = cornerX + radialDir * r * tc;
+    const p2y = cornerY + radialDir * r * ts;
+    return `M${sx},${sy}L${p1x},${p1y}L${p2x},${p2y}L${tx},${ty}`;
+}
+export function getConnectorRadialD3Path({ source, target, curve, }) {
+    const g = radialGeometry(source, target);
+    const { sr, tr, sc, ss, tc, ts, sx, sy, tx, ty, sweepFlag } = g;
+    // Step curves render as polar arcs/radials rather than cartesian stairs.
+    // When source is at origin (root), degenerate to straight radial line.
+    if (curve === curveStepBefore || curve === curveStepAfter || curve === curveStep) {
+        if (sr < 1e-6)
+            return `M${sx},${sy}L${tx},${ty}`;
+    }
+    if (curve === curveStepBefore) {
+        // arc at source radius, then radial to target
+        const ax = sr * tc;
+        const ay = sr * ts;
+        return `M${sx},${sy}A${sr},${sr},0,0,${sweepFlag},${ax},${ay}L${tx},${ty}`;
+    }
+    if (curve === curveStepAfter) {
+        // radial at source angle to target radius, then arc at target radius
+        const ax = tr * sc;
+        const ay = tr * ss;
+        return `M${sx},${sy}L${ax},${ay}A${tr},${tr},0,0,${sweepFlag},${tx},${ty}`;
+    }
+    if (curve === curveStep) {
+        // radial to mid-radius, arc at mid-radius, radial to target
+        const mr = (sr + tr) / 2;
+        const p1x = mr * sc;
+        const p1y = mr * ss;
+        const p2x = mr * tc;
+        const p2y = mr * ts;
+        return `M${sx},${sy}L${p1x},${p1y}A${mr},${mr},0,0,${sweepFlag},${p2x},${p2y}L${tx},${ty}`;
+    }
+    if (curve) {
+        // Other curves: apply in polar space via d3.lineRadial between the two nodes
+        const gen = lineRadial().curve(curve);
+        const d = gen([
+            [source.x, source.y],
+            [target.x, target.y],
+        ]);
+        return d ?? FALLBACK_PATH;
+    }
+    // Default: smooth radial curve via d3.linkRadial (visx LinkRadial)
+    const linkGen = linkRadial()
+        .angle((d) => d.x)
+        .radius((d) => d.y);
+    return linkGen({ source, target }) ?? FALLBACK_PATH;
+}

package/dist/utils/path.d.ts

@@ -30,6 +30,25 @@ export declare function roundedPolygonPath(coords: {
     x: number;
     y: number;
 }[], radius: number): string;
+/**
+ * SVG path `d` attribute for a rectangle with per-corner rounding.
+ * Corners are ordered `[top-left, top-right, bottom-right, bottom-left]`
+ * (matching CSS `border-radius` shorthand). Path is drawn clockwise from
+ * the top-left corner.
+ */
+export declare function roundedRectPath(x: number, y: number, width: number, height: number, [tl, tr, br, bl]: [number, number, number, number]): string;
+/**
+ * Normalize a dash-array value (CSS `stroke-dasharray`) to a numeric array.
+ * Accepts `"4 2"`, `"4,2"`, `[4, 2]`, or a single number (e.g. `4` → `[4, 4]`).
+ * Returns `null` when the input is empty or all zeros (i.e. solid stroke).
+ */
+export declare function parseDashArray(value: string | number | number[] | undefined): number[] | null;
+/**
+ * Build a CSS `repeating-linear-gradient` string approximating a `stroke-dasharray`
+ * pattern along a horizontal line (use with `background` on a rotated `<div>`).
+ * Alternates stops between `color` (dash) and `transparent` (gap) to match SVG.
+ */
+export declare function dashArrayToGradient(dashArray: number[], color: string, direction?: string): string;
 /** Vector anchor position */
 export type VectorAnchor = 'start' | 'middle' | 'end';
 /**

package/dist/utils/path.js

@@ -61,6 +61,78 @@ export function roundedPolygonPath(coords, radius) {
     path += 'Z';
     return path;
 }
+/**
+ * SVG path `d` attribute for a rectangle with per-corner rounding.
+ * Corners are ordered `[top-left, top-right, bottom-right, bottom-left]`
+ * (matching CSS `border-radius` shorthand). Path is drawn clockwise from
+ * the top-left corner.
+ */
+export function roundedRectPath(x, y, width, height, [tl, tr, br, bl]) {
+    const topEdge = width - tl - tr;
+    const rightEdge = height - tr - br;
+    const bottomEdge = width - br - bl;
+    const leftEdge = height - bl - tl;
+    return [
+        `M${x + tl},${y}`,
+        `h${topEdge}`,
+        tr > 0 ? `a${tr},${tr} 0 0 1 ${tr},${tr}` : '',
+        `v${rightEdge}`,
+        br > 0 ? `a${br},${br} 0 0 1 ${-br},${br}` : '',
+        `h${-bottomEdge}`,
+        bl > 0 ? `a${bl},${bl} 0 0 1 ${-bl},${-bl}` : '',
+        `v${-leftEdge}`,
+        tl > 0 ? `a${tl},${tl} 0 0 1 ${tl},${-tl}` : '',
+        'z',
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
+/**
+ * Normalize a dash-array value (CSS `stroke-dasharray`) to a numeric array.
+ * Accepts `"4 2"`, `"4,2"`, `[4, 2]`, or a single number (e.g. `4` → `[4, 4]`).
+ * Returns `null` when the input is empty or all zeros (i.e. solid stroke).
+ */
+export function parseDashArray(value) {
+    if (value == null || value === '' || value === 'none')
+        return null;
+    let arr;
+    if (typeof value === 'number') {
+        arr = [value, value];
+    }
+    else if (Array.isArray(value)) {
+        arr = value.filter((n) => Number.isFinite(n));
+    }
+    else {
+        arr = value
+            .split(/[\s,]+/)
+            .filter((s) => s.length > 0)
+            .map((s) => Number(s.replace('px', '')))
+            .filter((n) => Number.isFinite(n));
+    }
+    if (arr.length === 0 || arr.every((n) => n === 0))
+        return null;
+    // SVG/Canvas semantics: an odd-length array is repeated (e.g. `[5]` → `[5, 5]`)
+    if (arr.length % 2 === 1)
+        arr = [...arr, ...arr];
+    return arr;
+}
+/**
+ * Build a CSS `repeating-linear-gradient` string approximating a `stroke-dasharray`
+ * pattern along a horizontal line (use with `background` on a rotated `<div>`).
+ * Alternates stops between `color` (dash) and `transparent` (gap) to match SVG.
+ */
+export function dashArrayToGradient(dashArray, color, direction = 'to right') {
+    const stops = [];
+    let offset = 0;
+    for (let i = 0; i < dashArray.length; i++) {
+        const length = dashArray[i];
+        const isDash = i % 2 === 0;
+        const c = isDash ? color : 'transparent';
+        stops.push(`${c} ${offset}px ${offset + length}px`);
+        offset += length;
+    }
+    return `repeating-linear-gradient(${direction}, ${stops.join(', ')})`;
+}
 /**
  * Create arrow vector path data (pointing up by default).
  * The path is centered on the anchor point at origin — use SVG `transform` to position and rotate.

package/dist/utils/rect.svelte.d.ts

@@ -49,4 +49,22 @@ export declare function createDimensionGetter<TData>(ctx: ChartState<TData>, get
  * Useful when x/y getters for band scale are an array (such as for histograms)
  */
 export declare function firstValue(value: number | number[] | undefined): number | undefined;
+/**
+ * Per-corner radii, ordered [top-left, top-right, bottom-right, bottom-left] —
+ * matching CSS `border-radius` shorthand and Canvas `roundRect`.
+ */
+export type CornerRadii = [number, number, number, number];
+export type Corners = number | CornerRadii | {
+    topLeft?: number;
+    topRight?: number;
+    bottomRight?: number;
+    bottomLeft?: number;
+};
+/**
+ * Normalize a `Corners` value to `[tl, tr, br, bl]`, clamping each corner to
+ * half the shorter side so opposite corners cannot overlap.
+ */
+export declare function resolveCorners(corners: Corners | undefined, width: number, height: number): CornerRadii;
+/** True when all four corner radii are equal (lets callers use simpler `rx`/`ry` rendering). */
+export declare function cornersUniform([tl, tr, br, bl]: CornerRadii): boolean;
 export {};

package/dist/utils/rect.svelte.js

@@ -183,3 +183,36 @@ export function createDimensionGetter(ctx, getOptions) {
 export function firstValue(value) {
     return Array.isArray(value) ? value[0] : value;
 }
+/**
+ * Normalize a `Corners` value to `[tl, tr, br, bl]`, clamping each corner to
+ * half the shorter side so opposite corners cannot overlap.
+ */
+export function resolveCorners(corners, width, height) {
+    let tl = 0;
+    let tr = 0;
+    let br = 0;
+    let bl = 0;
+    if (typeof corners === 'number') {
+        tl = tr = br = bl = corners;
+    }
+    else if (Array.isArray(corners)) {
+        [tl, tr, br, bl] = corners;
+    }
+    else if (corners) {
+        tl = corners.topLeft ?? 0;
+        tr = corners.topRight ?? 0;
+        br = corners.bottomRight ?? 0;
+        bl = corners.bottomLeft ?? 0;
+    }
+    const max = Math.min(width, height) / 2;
+    return [
+        Math.min(Math.max(0, tl), max),
+        Math.min(Math.max(0, tr), max),
+        Math.min(Math.max(0, br), max),
+        Math.min(Math.max(0, bl), max),
+    ];
+}
+/** True when all four corner radii are equal (lets callers use simpler `rx`/`ry` rendering). */
+export function cornersUniform([tl, tr, br, bl]) {
+    return tl === tr && tr === br && br === bl;
+}

package/package.json

@@ -5,12 +5,12 @@
   "license": "MIT",
   "repository": "techniq/layerchart",
   "homepage": "https://layerchart.com",
-  "version": "2.0.0-next.53",
+  "version": "2.0.0-next.55",
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@napi-rs/canvas": "^0.1.97",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/kit": "^2.57.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
@@ -33,19 +33,19 @@
     "@types/d3-scale-chromatic": "^3.1.0",
     "@types/d3-shape": "^3.1.8",
     "@types/d3-time": "^3.0.4",
-    "@vitest/browser": "^4.1.0",
-    "@vitest/browser-playwright": "^4.1.0",
-    "@vitest/ui": "^4.1.0",
-    "playwright": "^1.58.2",
-    "prettier": "^3.8.1",
+    "@vitest/browser": "^4.1.4",
+    "@vitest/browser-playwright": "^4.1.4",
+    "@vitest/ui": "^4.1.4",
+    "playwright": "^1.59.1",
+    "prettier": "^3.8.2",
     "prettier-plugin-svelte": "^3.5.1",
-    "svelte": "5.54.1",
-    "svelte-check": "^4.4.5",
-    "svelte2tsx": "^0.7.52",
+    "svelte": "5.55.3",
+    "svelte-check": "^4.4.6",
+    "svelte2tsx": "^0.7.53",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.1",
-    "vitest": "^4.1.0",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.8",
+    "vitest": "^4.1.4",
     "vitest-browser-svelte": "^2.1.0"
   },
   "type": "module",