layerchart 2.0.0-next.54 → 2.0.0-next.55

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,7 +5,7 @@
   "license": "MIT",
   "repository": "techniq/layerchart",
   "homepage": "https://layerchart.com",
-  "version": "2.0.0-next.54",
+  "version": "2.0.0-next.55",
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@napi-rs/canvas": "^0.1.97",