layerchart 2.0.0-next.5 → 2.0.0-next.50

package/dist/utils/motion.svelte.js

@@ -1,5 +1,5 @@
+import { untrack } from 'svelte';
 import { Spring, Tween } from 'svelte/motion';
-import { afterTick } from './afterTick.js';
 /**
  * Extended Spring class that adds a type discriminator to help with
  * type narrowing in our motion system
@@ -63,10 +63,36 @@ function setupTracking(motion, getValue, options) {
     if (options.controlled)
         return;
     $effect(() => {
-        motion.set(getValue());
+        const value = getValue();
+        if (value == null)
+            return;
+        // Use untrack to prevent reactive reads inside motion.set() and motion.target
+        // from being tracked as dependencies of this effect (which would cause infinite loops)
+        untrack(() => {
+            motion.set(value, { instant: motion.target == null });
+        });
     });
 }
 export function createMotion(initialValue, getValue, motionProp, options = {}) {
+    // Fast path: when no motion is configured, skip all state/effect overhead
+    // and return a lightweight passthrough that reads directly from the getter.
+    if (motionProp === undefined) {
+        return {
+            type: 'none',
+            get current() {
+                return getValue();
+            },
+            get target() {
+                return getValue();
+            },
+            set target(v) {
+                // no-op for passthrough
+            },
+            set(_value, _options) {
+                return Promise.resolve();
+            },
+        };
+    }
     const motion = parseMotionProp(motionProp);
     const motionState = motion.type === 'spring'
         ? new MotionSpring(initialValue, motion.options)
@@ -115,6 +141,63 @@ export function createMotionTracker() {
         },
     };
 }
+/**
+ * Creates a motion state map for data mode rendering.
+ * Tracks per-item animated values keyed by the item key.
+ * Returns null if no motion is configured (type: 'none').
+ */
+export function createDataMotionMap(motionProp) {
+    // Fast path: skip parseMotionProp overhead when no motion is configured
+    if (motionProp === undefined)
+        return null;
+    const config = parseMotionProp(motionProp);
+    if (config.type === 'none')
+        return null;
+    const map = new Map();
+    function create(value) {
+        return config.type === 'spring'
+            ? new MotionSpring(value, config.options)
+            : new MotionTween(value, config.options);
+    }
+    return {
+        /** Update motion targets for an item. Creates states on first call per key/prop. */
+        update(key, values) {
+            let itemMap = map.get(key);
+            if (!itemMap) {
+                itemMap = new Map();
+                map.set(key, itemMap);
+            }
+            for (const [prop, value] of Object.entries(values)) {
+                let state = itemMap.get(prop);
+                if (!state) {
+                    state = create(value);
+                    itemMap.set(prop, state);
+                }
+                else {
+                    state.set(value);
+                }
+            }
+        },
+        /** Get current animated values for an item, or null if not tracked yet. */
+        get(key) {
+            const itemMap = map.get(key);
+            if (!itemMap)
+                return null;
+            const result = {};
+            for (const [prop, state] of itemMap) {
+                result[prop] = state.current;
+            }
+            return result;
+        },
+        /** Remove items no longer in the active set. */
+        cleanup(activeKeys) {
+            for (const key of map.keys()) {
+                if (!activeKeys.has(key))
+                    map.delete(key);
+            }
+        },
+    };
+}
 /**
  * Extracts tween configuration from a motion prop
  * @returns Resolved tween configuration or undefined if not a tween

package/dist/utils/motion.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { parseMotionProp, extractTweenConfig } from './motion.svelte.js';
+import { createMotion, parseMotionProp, extractTweenConfig } from './motion.svelte.js';
 describe('parseMotionProp', () => {
     it('should return "none" type when config is undefined', () => {
         const result = parseMotionProp(undefined);
@@ -117,6 +117,54 @@ describe('parseMotionProp', () => {
         });
     });
 });
+describe('createMotion', () => {
+    describe('fast path (motionProp === undefined)', () => {
+        it('should return a passthrough that reads from the getter', () => {
+            let value = 42;
+            const motion = createMotion(0, () => value, undefined);
+            expect(motion.current).toBe(42);
+            value = 99;
+            expect(motion.current).toBe(99);
+        });
+        it('should have type "none"', () => {
+            const motion = createMotion(0, () => 0, undefined);
+            expect(motion.type).toBe('none');
+        });
+        it('should return resolved promise from set()', async () => {
+            const motion = createMotion(0, () => 0, undefined);
+            const result = motion.set(10);
+            expect(result).toBeInstanceOf(Promise);
+            await expect(result).resolves.toBeUndefined();
+        });
+        it('target getter should read from getValue', () => {
+            let value = 5;
+            const motion = createMotion(0, () => value, undefined);
+            expect(motion.target).toBe(5);
+            value = 20;
+            expect(motion.target).toBe(20);
+        });
+    });
+    describe('with explicit "none" motion', () => {
+        it('should create a MotionNone state (not a passthrough)', () => {
+            const motion = createMotion(0, () => 42, 'none');
+            // MotionNone stores its own state, so current reflects the initial value
+            // until the tracking effect runs (which requires Svelte runtime)
+            expect(motion.type).toBe('none');
+        });
+    });
+    describe('with spring motion', () => {
+        it('should create a spring motion state', () => {
+            const motion = createMotion(0, () => 42, 'spring');
+            expect(motion.type).toBe('spring');
+        });
+    });
+    describe('with tween motion', () => {
+        it('should create a tween motion state', () => {
+            const motion = createMotion(0, () => 42, 'tween');
+            expect(motion.type).toBe('tween');
+        });
+    });
+});
 describe('extractTweenConfig', () => {
     // Test case 1: Undefined input
     it('should return undefined when config is undefined', () => {

package/dist/utils/path.d.ts

@@ -10,12 +10,65 @@ export declare function circlePath(dimensions: {
     r: number;
     sweep?: 'inside' | 'outside';
 }): string;
-/** Create spike (triangle) using path data  */
+/**
+ * @deprecated Use `vectorSpikePath` or the `Vector` component with `shape="spike"` instead.
+ * Create spike (triangle) using path data
+ */
 export declare function spikePath({ x, y, width, height, }: {
     x: number;
     y: number;
     width: number;
     height: number;
 }): string;
+/** Create rounded polygon path
+ *
+ * @param coords - Array of points (x, y)
+ * @param radius - Radius of the curve
+ * @returns String of path data
+ */
+export declare function roundedPolygonPath(coords: {
+    x: number;
+    y: number;
+}[], radius: number): string;
+/** Vector anchor position */
+export type VectorAnchor = 'start' | 'middle' | 'end';
+/**
+ * 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.
+ *
+ * The arrow consists of a stem line with a V-shaped arrowhead at the tip.
+ */
+export declare function vectorArrowPath({ length, anchor, width, }: {
+    length: number;
+    anchor?: VectorAnchor;
+    /** Total width of the arrowhead (wing tip to wing tip). */
+    width?: number;
+}): string;
+/**
+ * Create spike (filled triangle) vector path data (pointing up by default).
+ * The path is centered on the anchor point at origin — use SVG `transform` to position and rotate.
+ */
+export declare function vectorSpikePath({ length, anchor, width, }: {
+    length: number;
+    anchor?: VectorAnchor;
+    width?: number;
+}): string;
+/**
+ * Create filled 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.
+ *
+ * The shape has a tapered tail that widens into a triangular arrowhead at the tip.
+ */
+export declare function vectorArrowFilledPath({ length, anchor, width, }: {
+    length: number;
+    anchor?: VectorAnchor;
+    /** Total width of the arrowhead. Defaults to 30% of length. */
+    width?: number;
+}): string;
+/**
+ * Apply rotation (degrees) and translation to a path string containing only M and L commands
+ * with absolute coordinates. Converts local vector path data to absolute positioned coordinates.
+ */
+export declare function transformVectorPath(pathData: string, cx: number, cy: number, rotateDeg: number): string;
 /** Flatten all `y` coordinates to `0` */
 export declare function flattenPathData(pathData: string, yOverride?: number): string;

package/dist/utils/path.js

@@ -24,17 +24,150 @@ export function circlePath(dimensions) {
     a ${r},${r} 0 1,${_sweep} -${r * 2},0
   `;
 }
-/** Create spike (triangle) using path data  */
+/**
+ * @deprecated Use `vectorSpikePath` or the `Vector` component with `shape="spike"` instead.
+ * Create spike (triangle) using path data
+ */
 export function spikePath({ x, y, width, height, }) {
-    const startPoint = { x: x - width / 2, y };
-    const midPoint = { x, y: y - height };
-    const endPoint = { x: x + width / 2, y };
-    const pathData = `
-    M ${startPoint.x},${startPoint.y}
-    L ${midPoint.x},${midPoint.y}
-    L ${endPoint.x},${endPoint.y}
-  `;
-    return pathData;
+    return transformVectorPath(vectorSpikePath({ length: height, anchor: 'start', width }), x, y, 0);
+}
+/** Create rounded polygon path
+ *
+ * @param coords - Array of points (x, y)
+ * @param radius - Radius of the curve
+ * @returns String of path data
+ */
+export function roundedPolygonPath(coords, radius) {
+    if (radius === 0) {
+        // Simple polygon with straight lines
+        return `M${coords[0].x},${coords[0].y}${coords
+            .slice(1)
+            .map((p) => `L${p.x},${p.y}`)
+            .join('')}Z`;
+    }
+    let path = '';
+    const length = coords.length + 1;
+    for (let i = 0; i < length; i++) {
+        const a = coords[i % coords.length];
+        const b = coords[(i + 1) % coords.length];
+        const t = Math.min(radius / Math.hypot(b.x - a.x, b.y - a.y), 0.5);
+        if (i == 0)
+            path += `M${a.x * (1 - t) + b.x * t},${a.y * (1 - t) + b.y * t}`;
+        if (i > 0)
+            path += `Q${a.x},${a.y} ${a.x * (1 - t) + b.x * t},${a.y * (1 - t) + b.y * t}`;
+        if (i < length - 1)
+            path += `L${a.x * t + b.x * (1 - t)},${a.y * t + b.y * (1 - t)}`;
+    }
+    path += 'Z';
+    return path;
+}
+/**
+ * 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.
+ *
+ * The arrow consists of a stem line with a V-shaped arrowhead at the tip.
+ */
+export function vectorArrowPath({ length, anchor = 'middle', width = 5, }) {
+    const halfWidth = width / 2;
+    // Compute y-offsets for base and tip relative to anchor point at origin
+    let baseY, tipY;
+    switch (anchor) {
+        case 'start':
+            baseY = 0;
+            tipY = -length;
+            break;
+        case 'end':
+            baseY = length;
+            tipY = 0;
+            break;
+        case 'middle':
+        default:
+            baseY = length / 2;
+            tipY = -length / 2;
+            break;
+    }
+    // Stem from base to tip, then arrowhead wings at the tip
+    return `M0,${baseY}L0,${tipY}M${-halfWidth},${tipY + width}L0,${tipY}L${halfWidth},${tipY + width}`;
+}
+/**
+ * Create spike (filled triangle) vector path data (pointing up by default).
+ * The path is centered on the anchor point at origin — use SVG `transform` to position and rotate.
+ */
+export function vectorSpikePath({ length, anchor = 'start', width = 3, }) {
+    const halfWidth = width / 2;
+    let baseY, tipY;
+    switch (anchor) {
+        case 'start':
+            baseY = 0;
+            tipY = -length;
+            break;
+        case 'end':
+            baseY = length;
+            tipY = 0;
+            break;
+        case 'middle':
+        default:
+            baseY = length / 2;
+            tipY = -length / 2;
+            break;
+    }
+    return `M${-halfWidth},${baseY}L0,${tipY}L${halfWidth},${baseY}`;
+}
+/**
+ * Create filled 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.
+ *
+ * The shape has a tapered tail that widens into a triangular arrowhead at the tip.
+ */
+export function vectorArrowFilledPath({ length, anchor = 'middle', width = length * 0.3, }) {
+    let baseY, tipY;
+    switch (anchor) {
+        case 'start':
+            baseY = 0;
+            tipY = -length;
+            break;
+        case 'end':
+            baseY = length;
+            tipY = 0;
+            break;
+        case 'middle':
+        default:
+            baseY = length / 2;
+            tipY = -length / 2;
+            break;
+    }
+    const headLength = Math.max(3, length * 0.3);
+    const headSpike = headLength * 0.2;
+    const headWidth = Math.max(2, width);
+    const tailWidth = headWidth * 0.3;
+    // Path points (relative to base→tip axis)
+    const headStart = tipY + headLength;
+    const spikeY = headStart - headSpike;
+    return [
+        `M0,${baseY}`,
+        `L${tailWidth / 2},${spikeY}`,
+        `L${headWidth / 2},${headStart}`,
+        `L0,${tipY}`,
+        `L${-headWidth / 2},${headStart}`,
+        `L${-tailWidth / 2},${spikeY}`,
+        'Z',
+    ].join('');
+}
+/**
+ * Apply rotation (degrees) and translation to a path string containing only M and L commands
+ * with absolute coordinates. Converts local vector path data to absolute positioned coordinates.
+ */
+export function transformVectorPath(pathData, cx, cy, rotateDeg) {
+    const rad = (rotateDeg * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    return pathData.replace(/([ML])(-?\d*\.?\d+),(-?\d*\.?\d+)/g, (_match, cmd, xStr, yStr) => {
+        const lx = Number(xStr);
+        const ly = Number(yStr);
+        const ax = cx + lx * cos - ly * sin;
+        const ay = cy + lx * sin + ly * cos;
+        return `${cmd}${ax},${ay}`;
+    });
 }
 /** Flatten all `y` coordinates to `0` */
 export function flattenPathData(pathData, yOverride = 0) {
@@ -47,12 +180,9 @@ export function flattenPathData(pathData, yOverride = 0) {
     result = result.replace(/([v])(-?\d*\.?\d+)/g, (match, command, l) => {
         return `${command}${0}`;
     });
-    // TODO: Flatten all elliptical arc commands (ex. `a4,4 0 0 1 4,4`) with `0` height
-    // result = result.replace(
-    //   /a(\d+),(\d+) (\d+) (\d+) (\d+) (\d+),(\d+)/g,
-    //   (match, rx, ry, rot, large, sweep, x, y) => {
-    //     return `a${rx},0 ${rot} ${large} ${sweep} ${x},0`;
-    //   }
-    // );
+    // Flatten relative elliptical arc commands (ex. `a4,4 0 0 1 4,4`) — zero out ry and dy
+    result = result.replace(/a(-?\d*\.?\d+),(-?\d*\.?\d+) (\d+) (\d+) (\d+) (-?\d*\.?\d+),(-?\d*\.?\d+)/g, (match, rx, ry, rot, large, sweep, dx, dy) => {
+        return `a${rx},0 ${rot} ${large} ${sweep} ${dx},0`;
+    });
     return result;
 }

package/dist/utils/rasterBounds.d.ts

@@ -0,0 +1,18 @@
+import type { InterpolateMethod } from './rasterInterpolate.js';
+export type RasterBounds = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
+export declare function resolveRasterBounds(width: number, height: number, x1?: number, y1?: number, x2?: number, y2?: number): RasterBounds;
+export declare function gridPointToBounds(x: number, y: number, width: number, height: number, bounds: RasterBounds): {
+    x: number;
+    y: number;
+};
+export declare function gridCellCenterToBounds(column: number, row: number, width: number, height: number, bounds: RasterBounds): {
+    x: number;
+    y: number;
+};
+export declare function sampleGridAtBounds(values: ArrayLike<number>, width: number, height: number, bounds: RasterBounds, x: number, y: number, method?: InterpolateMethod): number;
+export declare function blurGridIgnoringNaN(values: ArrayLike<number>, width: number, height: number, radius: number): Float64Array<ArrayBufferLike>;

package/dist/utils/rasterBounds.js

@@ -0,0 +1,98 @@
+import { blur2 } from 'd3-array';
+export function resolveRasterBounds(width, height, x1, y1, x2, y2) {
+    return {
+        x1: x1 ?? 0,
+        y1: y1 ?? 0,
+        x2: x2 ?? width,
+        y2: y2 ?? height,
+    };
+}
+export function gridPointToBounds(x, y, width, height, bounds) {
+    return {
+        x: bounds.x1 + (x / width) * (bounds.x2 - bounds.x1),
+        y: bounds.y1 + (y / height) * (bounds.y2 - bounds.y1),
+    };
+}
+export function gridCellCenterToBounds(column, row, width, height, bounds) {
+    return {
+        x: bounds.x1 + ((column + 0.5) / width) * (bounds.x2 - bounds.x1),
+        y: bounds.y1 + ((row + 0.5) / height) * (bounds.y2 - bounds.y1),
+    };
+}
+export function sampleGridAtBounds(values, width, height, bounds, x, y, method = 'barycentric') {
+    const dx = bounds.x2 - bounds.x1;
+    const dy = bounds.y2 - bounds.y1;
+    if (!width || !height || dx === 0 || dy === 0)
+        return NaN;
+    const fx = ((x - bounds.x1) / dx) * width - 0.5;
+    const fy = ((y - bounds.y1) / dy) * height - 0.5;
+    if (fx < -0.5 || fx > width - 0.5 || fy < -0.5 || fy > height - 0.5) {
+        return NaN;
+    }
+    switch (method) {
+        case 'barycentric':
+            return sampleBilinear(values, width, height, fx, fy);
+        case 'nearest':
+        case 'none':
+        default:
+            return sampleNearest(values, width, height, fx, fy);
+    }
+}
+export function blurGridIgnoringNaN(values, width, height, radius) {
+    if (!radius || !values.length) {
+        return values instanceof Float64Array ? values : Float64Array.from(values);
+    }
+    const numerators = new Float64Array(values.length);
+    const weights = new Float64Array(values.length);
+    for (let index = 0; index < values.length; index++) {
+        const value = values[index] ?? NaN;
+        if (!Number.isFinite(value))
+            continue;
+        numerators[index] = value;
+        weights[index] = 1;
+    }
+    blur2({ data: numerators, width, height }, radius);
+    blur2({ data: weights, width, height }, radius);
+    const result = new Float64Array(values.length);
+    for (let index = 0; index < values.length; index++) {
+        const weight = weights[index];
+        result[index] = weight > 1e-12 ? numerators[index] / weight : NaN;
+    }
+    return result;
+}
+function sampleNearest(values, width, height, x, y) {
+    const column = clamp(Math.round(x), 0, width - 1);
+    const row = clamp(Math.round(y), 0, height - 1);
+    return values[row * width + column] ?? NaN;
+}
+function sampleBilinear(values, width, height, x, y) {
+    const x0 = Math.floor(x);
+    const y0 = Math.floor(y);
+    const x1 = x0 + 1;
+    const y1 = y0 + 1;
+    const tx = x - x0;
+    const ty = y - y0;
+    const weightedValues = [
+        [getSample(values, width, height, x0, y0), (1 - tx) * (1 - ty)],
+        [getSample(values, width, height, x1, y0), tx * (1 - ty)],
+        [getSample(values, width, height, x0, y1), (1 - tx) * ty],
+        [getSample(values, width, height, x1, y1), tx * ty],
+    ];
+    let totalWeight = 0;
+    let totalValue = 0;
+    for (const [value, weight] of weightedValues) {
+        if (!Number.isFinite(value))
+            continue;
+        totalWeight += weight;
+        totalValue += value * weight;
+    }
+    return totalWeight > 0 ? totalValue / totalWeight : NaN;
+}
+function getSample(values, width, height, x, y) {
+    const column = clamp(x, 0, width - 1);
+    const row = clamp(y, 0, height - 1);
+    return values[row * width + column] ?? NaN;
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}

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

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

package/dist/utils/rasterBounds.test.js

@@ -0,0 +1,63 @@
+import { describe, expect, it } from 'vitest';
+import { blurGridIgnoringNaN, gridCellCenterToBounds, gridPointToBounds, resolveRasterBounds, sampleGridAtBounds, } from './rasterBounds.js';
+describe('resolveRasterBounds', () => {
+    it('defaults to grid dimensions', () => {
+        expect(resolveRasterBounds(360, 180)).toEqual({
+            x1: 0,
+            y1: 0,
+            x2: 360,
+            y2: 180,
+        });
+    });
+    it('uses explicit geographic bounds', () => {
+        expect(resolveRasterBounds(360, 180, -180, 90, 180, -90)).toEqual({
+            x1: -180,
+            y1: 90,
+            x2: 180,
+            y2: -90,
+        });
+    });
+});
+describe('gridPointToBounds', () => {
+    it('maps contour-space coordinates back into bound coordinates', () => {
+        expect(gridPointToBounds(180, 90, 360, 180, resolveRasterBounds(360, 180, -180, 90, 180, -90))).toEqual({
+            x: 0,
+            y: 0,
+        });
+    });
+});
+describe('gridCellCenterToBounds', () => {
+    it('maps grid cell centers into bound coordinates', () => {
+        expect(gridCellCenterToBounds(0, 0, 360, 180, resolveRasterBounds(360, 180, -180, 90, 180, -90))).toEqual({
+            x: -179.5,
+            y: 89.5,
+        });
+    });
+});
+describe('sampleGridAtBounds', () => {
+    const grid = [0, 1, 2, 3];
+    const bounds = resolveRasterBounds(2, 2, -1, 1, 1, -1);
+    it('samples the nearest grid cell center', () => {
+        expect(sampleGridAtBounds(grid, 2, 2, bounds, -0.5, 0.5, 'nearest')).toBe(0);
+        expect(sampleGridAtBounds(grid, 2, 2, bounds, 0.5, -0.5, 'nearest')).toBe(3);
+    });
+    it('interpolates between adjacent cells', () => {
+        expect(sampleGridAtBounds(grid, 2, 2, bounds, 0, 0, 'barycentric')).toBe(1.5);
+    });
+    it('returns NaN outside the raster bounds', () => {
+        expect(sampleGridAtBounds(grid, 2, 2, bounds, 4, 4, 'barycentric')).toBeNaN();
+    });
+});
+describe('blurGridIgnoringNaN', () => {
+    it('preserves nearby finite values when blurring through NaN gaps', () => {
+        const blurred = blurGridIgnoringNaN([1, NaN, 3], 3, 1, 1);
+        expect(blurred[0]).toBeGreaterThan(0);
+        expect(blurred[1]).toBeGreaterThan(1);
+        expect(blurred[1]).toBeLessThan(3);
+        expect(blurred[2]).toBeGreaterThan(0);
+    });
+    it('keeps fully empty regions as NaN', () => {
+        const blurred = blurGridIgnoringNaN([NaN, NaN, NaN], 3, 1, 1);
+        expect(Array.from(blurred).every((value) => Number.isNaN(value))).toBe(true);
+    });
+});

package/dist/utils/rasterInterpolate.d.ts

@@ -0,0 +1,11 @@
+export type InterpolateMethod = 'none' | 'nearest' | 'barycentric';
+/**
+ * Interpolate scattered 2D points onto a regular grid.
+ *
+ * @param points - Array of [x, y, value] triples in grid coordinates
+ * @param width - Grid width (columns)
+ * @param height - Grid height (rows)
+ * @param method - Interpolation method
+ * @returns Flat Float64Array of grid values (row-major, length = width * height)
+ */
+export declare function interpolateGrid(points: [number, number, number][], width: number, height: number, method?: InterpolateMethod): Float64Array;