layerchart 2.0.0-next.45 → 2.0.0-next.47

package/dist/states/brush.svelte.js

@@ -0,0 +1,153 @@
+import { clamp } from '@layerstack/utils';
+import { min, max } from 'd3-array';
+import { add } from '../utils/math.js';
+export class BrushState {
+    ctx;
+    x = $state([null, null]);
+    y = $state([null, null]);
+    active = $state();
+    axis = $state('x');
+    handleSize = $state(0);
+    constructor(ctx, options) {
+        this.ctx = ctx;
+        this.x = options?.x ?? [null, null];
+        this.y = options?.y ?? [null, null];
+        this.active = options?.active;
+        this.axis = options?.axis ?? 'x';
+    }
+    /** The domain extent bounds from the base (unzoomed) scales */
+    get xDomainMin() {
+        return this.ctx?.baseXScale.domain()[0];
+    }
+    get xDomainMax() {
+        return this.ctx?.baseXScale.domain()[1];
+    }
+    get yDomainMin() {
+        return this.ctx?.baseYScale.domain()[0];
+    }
+    get yDomainMax() {
+        return this.ctx?.baseYScale.domain()[1];
+    }
+    get range() {
+        if (!this.ctx) {
+            return { x: 0, y: 0, width: 0, height: 0 };
+        }
+        const top = this.ctx.yScale(this.y?.[1]);
+        const bottom = this.ctx.yScale(this.y?.[0]);
+        const left = this.ctx.xScale(this.x?.[0]);
+        const right = this.ctx.xScale(this.x?.[1]);
+        return {
+            x: this.axis === 'both' || this.axis === 'x' ? left : 0,
+            y: this.axis === 'both' || this.axis === 'y' ? top : 0,
+            width: this.axis === 'both' || this.axis === 'x' ? right - left : this.ctx.width,
+            height: this.axis === 'both' || this.axis === 'y' ? bottom - top : this.ctx.height,
+        };
+    }
+    /** Reset brush to cleared state */
+    reset() {
+        this.active = false;
+        this.x = [null, null];
+        this.y = [null, null];
+    }
+    /** Select the full domain extent */
+    selectAll() {
+        this.active = true;
+        this.x = [this.xDomainMin, this.xDomainMax];
+        this.y = [this.yDomainMin, this.yDomainMax];
+    }
+    /** Programmatically set the brush selection. Like d3's `brush.move()`. */
+    move(selection) {
+        if ('x' in selection) {
+            this.x = selection.x ?? [null, null];
+        }
+        if ('y' in selection) {
+            this.y = selection.y ?? [null, null];
+        }
+        // Determine active state from current values
+        const hasX = this.x[0] != null && this.x[1] != null;
+        const hasY = this.y[0] != null && this.y[1] != null;
+        this.active =
+            this.axis === 'x' ? hasX : this.axis === 'y' ? hasY : hasX || hasY;
+    }
+    /** Set brush to a new range, clamped to domain bounds */
+    setRange(startValue, currentValue) {
+        this.active = true;
+        this.x = [
+            clamp(min([startValue.x, currentValue.x]), this.xDomainMin, this.xDomainMax),
+            clamp(max([startValue.x, currentValue.x]), this.xDomainMin, this.xDomainMax),
+        ];
+        this.y = [
+            clamp(min([startValue.y, currentValue.y]), this.yDomainMin, this.yDomainMax),
+            clamp(max([startValue.y, currentValue.y]), this.yDomainMin, this.yDomainMax),
+        ];
+    }
+    /** Move the entire brush range by a delta, clamped to domain bounds */
+    moveRange(start, currentValue) {
+        const dx = clamp(currentValue.x - start.value.x, this.xDomainMin - +start.x[0], this.xDomainMax - +start.x[1]);
+        this.x = [add(start.x[0], dx), add(start.x[1], dx)];
+        const dy = clamp(currentValue.y - start.value.y, this.yDomainMin - +start.y[0], this.yDomainMax - +start.y[1]);
+        this.y = [add(start.y[0], dy), add(start.y[1], dy)];
+    }
+    /** Adjust a single edge of the brush, clamped to domain bounds. Handles inversion if dragged past opposite edge. */
+    adjustEdge(edge, start, currentValue) {
+        switch (edge) {
+            case 'top':
+                this.y = [
+                    clamp(currentValue.y < +start.y[0] ? currentValue.y : start.y[0], this.yDomainMin, this.yDomainMax),
+                    clamp(currentValue.y < +start.y[0] ? start.y[0] : currentValue.y, this.yDomainMin, this.yDomainMax),
+                ];
+                break;
+            case 'bottom':
+                this.y = [
+                    clamp(currentValue.y > +start.y[1] ? start.y[1] : currentValue.y, this.yDomainMin, this.yDomainMax),
+                    clamp(currentValue.y > +start.y[1] ? currentValue.y : start.y[1], this.yDomainMin, this.yDomainMax),
+                ];
+                break;
+            case 'left':
+                this.x = [
+                    clamp(currentValue.x > +start.x[1] ? start.x[1] : currentValue.x, this.xDomainMin, this.xDomainMax),
+                    clamp(currentValue.x > +start.x[1] ? currentValue.x : start.x[1], this.xDomainMin, this.xDomainMax),
+                ];
+                break;
+            case 'right':
+                this.x = [
+                    clamp(currentValue.x < +start.x[0] ? currentValue.x : start.x[0], this.xDomainMin, this.xDomainMax),
+                    clamp(currentValue.x < +start.x[0] ? start.x[0] : currentValue.x, this.xDomainMin, this.xDomainMax),
+                ];
+                break;
+        }
+    }
+    /**
+     * Sync external domain values into brush state.
+     * Only writes when values actually differ to avoid reactive loops.
+     */
+    syncFromExternal(externalX, externalY) {
+        const newX = externalX ?? [null, null];
+        const newY = externalY ?? [null, null];
+        // Only write when values actually differ to avoid reactive loops
+        if (this.x[0]?.valueOf() !== newX[0]?.valueOf() || this.x[1]?.valueOf() !== newX[1]?.valueOf()) {
+            this.x = newX;
+        }
+        if (this.y[0]?.valueOf() !== newY[0]?.valueOf() || this.y[1]?.valueOf() !== newY[1]?.valueOf()) {
+            this.y = newY;
+        }
+        const isXAxisActive = externalX != null &&
+            externalX[0] != null &&
+            externalX[1] != null &&
+            (externalX[0].valueOf() !== this.xDomainMin?.valueOf() ||
+                externalX[1].valueOf() !== this.xDomainMax?.valueOf());
+        const isYAxisActive = externalY != null &&
+            externalY[0] != null &&
+            externalY[1] != null &&
+            (externalY[0].valueOf() !== this.yDomainMin?.valueOf() ||
+                externalY[1].valueOf() !== this.yDomainMax?.valueOf());
+        const newActive = this.axis === 'x'
+            ? isXAxisActive
+            : this.axis === 'y'
+                ? isYAxisActive
+                : isXAxisActive || isYAxisActive;
+        if (this.active !== newActive) {
+            this.active = newActive;
+        }
+    }
+}

package/dist/states/brush.svelte.test.d.ts

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

package/dist/states/brush.svelte.test.js

@@ -0,0 +1,292 @@
+import { describe, it, expect } from 'vitest';
+import { BrushState } from './brush.svelte.js';
+/** Create a mock chart context with a simple linear scale over [0, 100] */
+function createMockCtx(options) {
+    const xDomain = options?.xDomain ?? [0, 100];
+    const yDomain = options?.yDomain ?? [0, 100];
+    const width = options?.width ?? 500;
+    const height = options?.height ?? 300;
+    const xScale = (v) => ((v - xDomain[0]) / (xDomain[1] - xDomain[0])) * width;
+    const yScale = (v) => height - ((v - yDomain[0]) / (yDomain[1] - yDomain[0])) * height;
+    return {
+        xScale,
+        yScale,
+        baseXScale: { domain: () => xDomain },
+        baseYScale: { domain: () => yDomain },
+        width,
+        height,
+    };
+}
+describe('BrushState', () => {
+    describe('constructor', () => {
+        it('should initialize with default values', () => {
+            const brush = new BrushState(null);
+            expect(brush.x).toEqual([null, null]);
+            expect(brush.y).toEqual([null, null]);
+            expect(brush.active).toBeUndefined();
+            expect(brush.axis).toBe('x');
+        });
+        it('should initialize with provided options', () => {
+            const ctx = createMockCtx();
+            const brush = new BrushState(ctx, {
+                x: [10, 50],
+                y: [20, 80],
+                axis: 'both',
+                active: true,
+            });
+            expect(brush.x).toEqual([10, 50]);
+            expect(brush.y).toEqual([20, 80]);
+            expect(brush.axis).toBe('both');
+            expect(brush.active).toBe(true);
+        });
+    });
+    describe('domain bounds', () => {
+        it('should return domain min/max from base scales', () => {
+            const ctx = createMockCtx({ xDomain: [0, 200], yDomain: [10, 90] });
+            const brush = new BrushState(ctx);
+            expect(brush.xDomainMin).toBe(0);
+            expect(brush.xDomainMax).toBe(200);
+            expect(brush.yDomainMin).toBe(10);
+            expect(brush.yDomainMax).toBe(90);
+        });
+        it('should return undefined when no ctx', () => {
+            const brush = new BrushState(null);
+            expect(brush.xDomainMin).toBeUndefined();
+            expect(brush.xDomainMax).toBeUndefined();
+        });
+    });
+    describe('range', () => {
+        it('should return zero range when no ctx', () => {
+            const brush = new BrushState(null);
+            expect(brush.range).toEqual({ x: 0, y: 0, width: 0, height: 0 });
+        });
+        it('should compute pixel range from domain values (x-axis)', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], width: 500, height: 300 });
+            const brush = new BrushState(ctx, { x: [20, 80], axis: 'x' });
+            expect(brush.range.x).toBe(100); // 20/100 * 500
+            expect(brush.range.width).toBe(300); // (80-20)/100 * 500
+            // y-axis not active, should span full height
+            expect(brush.range.y).toBe(0);
+            expect(brush.range.height).toBe(300);
+        });
+        it('should compute pixel range for both axes', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100], width: 500, height: 300 });
+            const brush = new BrushState(ctx, { x: [20, 80], y: [25, 75], axis: 'both' });
+            expect(brush.range.x).toBe(100); // 20/100 * 500
+            expect(brush.range.width).toBe(300); // (80-20)/100 * 500
+        });
+    });
+    describe('reset', () => {
+        it('should clear x, y, and active state', () => {
+            const ctx = createMockCtx();
+            const brush = new BrushState(ctx, { x: [10, 50], y: [20, 80], active: true });
+            brush.reset();
+            expect(brush.x).toEqual([null, null]);
+            expect(brush.y).toEqual([null, null]);
+            expect(brush.active).toBe(false);
+        });
+    });
+    describe('selectAll', () => {
+        it('should set x and y to full domain extent', () => {
+            const ctx = createMockCtx({ xDomain: [0, 200], yDomain: [10, 90] });
+            const brush = new BrushState(ctx);
+            brush.selectAll();
+            expect(brush.x).toEqual([0, 200]);
+            expect(brush.y).toEqual([10, 90]);
+        });
+    });
+    describe('move', () => {
+        it('should set x domain and activate', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x' });
+            brush.move({ x: [20, 80] });
+            expect(brush.x).toEqual([20, 80]);
+            expect(brush.active).toBe(true);
+        });
+        it('should set y domain only', () => {
+            const ctx = createMockCtx({ yDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'y', x: [10, 50] });
+            brush.move({ y: [30, 70] });
+            expect(brush.x).toEqual([10, 50]); // unchanged
+            expect(brush.y).toEqual([30, 70]);
+            expect(brush.active).toBe(true);
+        });
+        it('should set both axes', () => {
+            const ctx = createMockCtx();
+            const brush = new BrushState(ctx, { axis: 'both' });
+            brush.move({ x: [10, 90], y: [20, 80] });
+            expect(brush.x).toEqual([10, 90]);
+            expect(brush.y).toEqual([20, 80]);
+            expect(brush.active).toBe(true);
+        });
+        it('should clear with null', () => {
+            const ctx = createMockCtx();
+            const brush = new BrushState(ctx, { axis: 'x', x: [20, 80], active: true });
+            brush.move({ x: null });
+            expect(brush.x).toEqual([null, null]);
+            expect(brush.active).toBe(false);
+        });
+        it('should be inactive when only non-active axis has values', () => {
+            const ctx = createMockCtx();
+            const brush = new BrushState(ctx, { axis: 'x' });
+            brush.move({ y: [20, 80] }); // axis is 'x', so y doesn't count
+            expect(brush.active).toBe(false);
+        });
+    });
+    describe('setRange', () => {
+        it('should set brush to new range with clamping', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx);
+            brush.setRange({ x: 20, y: 30 }, { x: 60, y: 70 });
+            expect(brush.active).toBe(true);
+            expect(brush.x).toEqual([20, 60]);
+            expect(brush.y).toEqual([30, 70]);
+        });
+        it('should handle reversed values (drag right-to-left)', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx);
+            brush.setRange({ x: 60, y: 70 }, { x: 20, y: 30 });
+            expect(brush.x).toEqual([20, 60]);
+            expect(brush.y).toEqual([30, 70]);
+        });
+        it('should clamp to domain bounds', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx);
+            brush.setRange({ x: -10, y: -10 }, { x: 150, y: 150 });
+            expect(brush.x).toEqual([0, 100]);
+            expect(brush.y).toEqual([0, 100]);
+        });
+    });
+    describe('moveRange', () => {
+        it('should move the range by delta', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx, { x: [20, 40], y: [20, 40] });
+            brush.moveRange({ x: [20, 40], y: [20, 40], value: { x: 30, y: 30 } }, { x: 40, y: 50 });
+            // Delta: x=+10, y=+20
+            expect(brush.x).toEqual([30, 50]);
+            expect(brush.y).toEqual([40, 60]);
+        });
+        it('should clamp movement to domain bounds', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx);
+            brush.moveRange({ x: [80, 100], y: [80, 100], value: { x: 90, y: 90 } }, { x: 110, y: 110 });
+            // Should not exceed domain max
+            expect(brush.x).toEqual([80, 100]);
+            expect(brush.y).toEqual([80, 100]);
+        });
+    });
+    describe('adjustEdge', () => {
+        it('should adjust the right edge', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { x: [20, 60] });
+            brush.adjustEdge('right', { x: [20, 60], y: [0, 100] }, { x: 80, y: 50 });
+            expect(brush.x).toEqual([20, 80]);
+        });
+        it('should adjust the left edge', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { x: [20, 60] });
+            brush.adjustEdge('left', { x: [20, 60], y: [0, 100] }, { x: 10, y: 50 });
+            expect(brush.x).toEqual([10, 60]);
+        });
+        it('should invert edges when dragged past the opposite edge', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { x: [20, 60] });
+            // Drag left handle past right edge
+            brush.adjustEdge('left', { x: [20, 60], y: [0, 100] }, { x: 80, y: 50 });
+            expect(brush.x).toEqual([60, 80]);
+        });
+        it('should adjust the top edge', () => {
+            const ctx = createMockCtx({ yDomain: [0, 100] });
+            const brush = new BrushState(ctx, { y: [20, 60] });
+            // Top edge pivots around start.y[0] (bottom of range)
+            brush.adjustEdge('top', { x: [0, 100], y: [20, 60] }, { x: 50, y: 10 });
+            expect(brush.y).toEqual([10, 20]);
+        });
+        it('should adjust the bottom edge', () => {
+            const ctx = createMockCtx({ yDomain: [0, 100] });
+            const brush = new BrushState(ctx, { y: [20, 60] });
+            // Bottom edge pivots around start.y[1] (top of range)
+            brush.adjustEdge('bottom', { x: [0, 100], y: [20, 60] }, { x: 50, y: 80 });
+            expect(brush.y).toEqual([60, 80]);
+        });
+        it('should clamp to domain bounds', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { x: [20, 60] });
+            brush.adjustEdge('right', { x: [20, 60], y: [0, 100] }, { x: 150, y: 50 });
+            expect(brush.x).toEqual([20, 100]);
+        });
+    });
+    describe('syncFromExternal', () => {
+        it('should sync x/y values and set active when different from domain', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x' });
+            brush.syncFromExternal([20, 80], null);
+            expect(brush.x).toEqual([20, 80]);
+            expect(brush.y).toEqual([null, null]);
+            expect(brush.active).toBe(true);
+        });
+        it('should set inactive when x matches full domain', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x' });
+            brush.syncFromExternal([0, 100], null);
+            expect(brush.active).toBe(false);
+        });
+        it('should set inactive when x is null (reset)', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x', active: true, x: [20, 80] });
+            brush.syncFromExternal(null, null);
+            expect(brush.x).toEqual([null, null]);
+            expect(brush.active).toBe(false);
+        });
+        it('should set inactive when x is [null, null] (reset via onChange)', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x', active: true, x: [20, 80] });
+            brush.syncFromExternal([null, null], null);
+            expect(brush.x).toEqual([null, null]);
+            expect(brush.active).toBe(false);
+        });
+        it('should handle both axis mode', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'both' });
+            brush.syncFromExternal([20, 80], [30, 70]);
+            expect(brush.active).toBe(true);
+        });
+        it('should be inactive in both mode when only y differs but axis is x', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100], yDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x' });
+            brush.syncFromExternal([0, 100], [20, 80]);
+            expect(brush.active).toBe(false);
+        });
+        it('should handle Date domains', () => {
+            const d1 = new Date('2024-01-01');
+            const d2 = new Date('2024-12-31');
+            const d3 = new Date('2024-03-01');
+            const d4 = new Date('2024-09-01');
+            const ctx = createMockCtx();
+            // Override baseXScale to use dates
+            ctx.baseXScale = { domain: () => [d1, d2] };
+            const brush = new BrushState(ctx, { axis: 'x' });
+            brush.syncFromExternal([d3, d4], null);
+            expect(brush.x).toEqual([d3, d4]);
+            expect(brush.active).toBe(true);
+        });
+        it('should be inactive when Date domain matches full extent', () => {
+            const d1 = new Date('2024-01-01');
+            const d2 = new Date('2024-12-31');
+            const ctx = createMockCtx();
+            ctx.baseXScale = { domain: () => [d1, d2] };
+            const brush = new BrushState(ctx, { axis: 'x' });
+            // Same date values but different object references — should compare by valueOf
+            brush.syncFromExternal([new Date('2024-01-01'), new Date('2024-12-31')], null);
+            expect(brush.active).toBe(false);
+        });
+        it('should not write when values have not changed', () => {
+            const ctx = createMockCtx({ xDomain: [0, 100] });
+            const brush = new BrushState(ctx, { axis: 'x', x: [20, 80] });
+            const originalX = brush.x;
+            brush.syncFromExternal([20, 80], null);
+            // Should be the same reference (no write)
+            expect(brush.x).toBe(originalX);
+        });
+    });
+});

package/dist/states/chart.component-node.svelte.test.d.ts

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

package/dist/states/chart.component-node.svelte.test.js

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import ComponentNodeLifecycleHarness from './__fixtures__/ComponentNodeLifecycleHarness.svelte';
+describe('ChartState registerComponent', () => {
+    it('cleans up child nodes and mark registrations when components unmount', async () => {
+        let chartContext;
+        let parentNode;
+        render(ComponentNodeLifecycleHarness, {
+            oncontext: (ctx) => {
+                chartContext = ctx;
+            },
+            onparentnode: (node) => {
+                parentNode = node;
+            },
+        });
+        const toggle = page.getByTestId('toggle-child');
+        const child = page.getByTestId('component-node-lifecycle-child');
+        await expect.element(toggle).toBeInTheDocument();
+        await expect.element(child).toBeInTheDocument();
+        await expect.poll(() => parentNode?.children.length ?? -1).toBe(1);
+        await expect.poll(() => chartContext?.series.isDefaultSeries ?? true).toBe(false);
+        await toggle.click();
+        await expect.element(child).not.toBeInTheDocument();
+        await expect.poll(() => parentNode?.children.length ?? -1).toBe(0);
+        await expect.poll(() => chartContext?.series.isDefaultSeries ?? false).toBe(true);
+    });
+});