layerchart 2.0.0-next.1 → 2.0.0-next.11

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

@@ -0,0 +1,140 @@
+import { Spring, Tween } from 'svelte/motion';
+/**
+ * Spring motion configuration options
+ */
+export type SpringOptions<T = any> = ConstructorParameters<typeof Spring<T>>[1];
+export type SpringSetOptions = Parameters<(typeof Spring)['prototype']['set']>[1];
+/**
+ * Tween motion configuration options
+ */
+export type TweenOptions<T = any> = ConstructorParameters<typeof Tween<T>>[1];
+export type TweenSetOptions = Parameters<(typeof Tween)['prototype']['set']>[1];
+/**
+ * MotionNone is a non-animating state container that provides a compatible
+ * interface with Spring and Tween, but updates values immediately without animation.
+ * This gives us consistent state management whether animations are enabled or not.
+ */
+export type NoneOptions<T = any> = ConstructorParameters<typeof MotionNone<T>>[1];
+export type NoneSetOptions = Parameters<(typeof MotionNone)['prototype']['set']>[1];
+/**
+ * Configuration object for Spring animations with additional type discriminator
+ */
+export type MotionSpringOption = ({
+    type: 'spring';
+} & SpringOptions) | 'spring';
+/**
+ * Configuration object for Tween animations with additional type discriminator
+ */
+export type MotionTweenOption = ({
+    type: 'tween';
+} & TweenOptions) | 'tween';
+/**
+ * Configuration object for non-animating state with additional type discriminator
+ */
+export type MotionNoneOption = {
+    type: 'none';
+} | 'none';
+/**
+ * Union type of all possible motion configuration options
+ */
+export type MotionOptions = MotionSpringOption | MotionTweenOption | MotionNoneOption;
+type IsDefault<K> = K extends string ? (string extends K ? true : false) : never;
+/**
+ * Motion config that can be either a direct motion config or
+ * a map of property names to motion configs
+ */
+export type MotionProp<K extends string = string> = IsDefault<K> extends true ? MotionOptions : MotionOptions | {
+    [prop in K]?: MotionOptions;
+};
+/**
+ * Extended Spring class that adds a type discriminator to help with
+ * type narrowing in our motion system
+ */
+declare class MotionSpring<T = any> extends Spring<T> {
+    type: "spring";
+    constructor(value: T, options?: SpringOptions<T>);
+}
+/**
+ * Extended Tween class that adds a type discriminator to help with
+ * type narrowing in our motion system
+ */
+declare class MotionTween<T = any> extends Tween<T> {
+    type: "tween";
+    constructor(value: T, options?: TweenOptions<T>);
+}
+/**
+ * MotionNone is a state container that provides the same interface as
+ * Spring and Tween but without any animation logic. Values update immediately.
+ *
+ * This allows components to use a consistent API regardless of whether
+ * animations are enabled or not.
+ */
+declare class MotionNone<T = any> {
+    #private;
+    type: "none";
+    constructor(value: T, _options?: any);
+    /**
+     * Updates the value immediately and returns a resolved promise
+     * to maintain API compatibility with animated motion classes
+     */
+    set(value: T, _options?: any): Promise<void>;
+    get current(): T;
+    get target(): T;
+    set target(v: T);
+}
+export type ResolvedTween = {
+    type: 'tween';
+    options: TweenOptions;
+};
+export type ResolvedSpring = {
+    type: 'spring';
+    options: SpringOptions;
+};
+export type ResolvedNone = {
+    type: 'none';
+    options: {};
+};
+/**
+ * Union type of all possible resolved motion configurations
+ */
+export type ResolvedMotion = ResolvedSpring | ResolvedTween | ResolvedNone;
+/**
+ * Internal options for motion state configuration
+ */
+type InternalMotionOptions = {
+    /**
+     * When true, the motion state will only update when explicitly set
+     * rather than automatically tracking changes to the source value
+     */
+    controlled?: boolean;
+};
+export declare function createMotion<T = any>(initialValue: T, getValue: () => T, motionProp: MotionOptions | undefined, options?: InternalMotionOptions): MotionSpring<T> | MotionTween<any> | MotionNone<T>;
+/**
+ * Creates a controlled motion state that only updates when explicitly set
+ * rather than automatically tracking changes to the source value
+ */
+export declare function createControlledMotion<T = any>(initialValue: T, motionProp: MotionOptions | undefined): MotionTween<any> | MotionSpring<T> | MotionNone<T>;
+/**
+ * Creates a state tracker for animation completion
+ * This helps track whether any motion transitions are currently in progress
+ *
+ * @returns an object with methods to handle animation promises and check current status
+ */
+export declare function createMotionTracker(): {
+    handle: (promise: Promise<void> | void) => void;
+    readonly current: boolean;
+};
+/**
+ * Extracts tween configuration from a motion prop
+ * @returns Resolved tween configuration or undefined if not a tween
+ */
+export declare function extractTweenConfig<T extends string = never>(prop?: MotionProp<T> | undefined): ResolvedTween | undefined;
+/**
+ * Parses and normalizes a motion configuration into a standard format
+ *
+ * @param config - The motion configuration to parse
+ * @param propertyKey - Optional property key when config is a map of properties
+ * @returns A standardized motion configuration object
+ */
+export declare function parseMotionProp<T extends string = never>(config: MotionProp<T> | undefined | ResolvedMotion, accessor?: string): ResolvedMotion;
+export {};

package/dist/utils/motion.svelte.js

@@ -0,0 +1,180 @@
+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
+ */
+class MotionSpring extends Spring {
+    type = 'spring';
+    constructor(value, options) {
+        super(value, options);
+    }
+}
+/**
+ * Extended Tween class that adds a type discriminator to help with
+ * type narrowing in our motion system
+ */
+class MotionTween extends Tween {
+    type = 'tween';
+    constructor(value, options) {
+        super(value, options);
+    }
+}
+/**
+ * MotionNone is a state container that provides the same interface as
+ * Spring and Tween but without any animation logic. Values update immediately.
+ *
+ * This allows components to use a consistent API regardless of whether
+ * animations are enabled or not.
+ */
+class MotionNone {
+    type = 'none';
+    #current = $state(null);
+    #target = $state(null);
+    constructor(value, _options = {}) {
+        this.#current = value;
+        this.#target = value;
+    }
+    /**
+     * Updates the value immediately and returns a resolved promise
+     * to maintain API compatibility with animated motion classes
+     */
+    set(value, _options = {}) {
+        this.#current = value;
+        this.#target = value;
+        return Promise.resolve();
+    }
+    get current() {
+        return this.#current;
+    }
+    get target() {
+        return this.#target;
+    }
+    set target(v) {
+        this.set(v);
+    }
+}
+/**
+ * Sets up automatic tracking between a source value and a motion state.
+ * When the `controlled` option is `true`, the motion state will not update
+ * automatically and will only update when explicitly set.
+ */
+function setupTracking(motion, getValue, options) {
+    if (options.controlled)
+        return;
+    $effect(() => {
+        motion.set(getValue());
+    });
+}
+export function createMotion(initialValue, getValue, motionProp, options = {}) {
+    const motion = parseMotionProp(motionProp);
+    const motionState = motion.type === 'spring'
+        ? new MotionSpring(initialValue, motion.options)
+        : motion.type === 'tween'
+            ? new MotionTween(initialValue, motion.options)
+            : new MotionNone(initialValue);
+    setupTracking(motionState, getValue, options);
+    return motionState;
+}
+/**
+ * Creates a controlled motion state that only updates when explicitly set
+ * rather than automatically tracking changes to the source value
+ */
+export function createControlledMotion(initialValue, motionProp) {
+    return createMotion(initialValue, () => initialValue, motionProp, { controlled: true });
+}
+/**
+ * Creates a state tracker for animation completion
+ * This helps track whether any motion transitions are currently in progress
+ *
+ * @returns an object with methods to handle animation promises and check current status
+ */
+export function createMotionTracker() {
+    let latestIndex = 0;
+    let current = $state(false);
+    function handle(promise) {
+        latestIndex += 1;
+        if (!promise) {
+            current = false;
+            return;
+        }
+        let currIndex = latestIndex;
+        current = true;
+        promise
+            .then(() => {
+            if (currIndex === latestIndex) {
+                current = false;
+            }
+        })
+            .catch(() => { });
+    }
+    return {
+        handle,
+        get current() {
+            return current;
+        },
+    };
+}
+/**
+ * Extracts tween configuration from a motion prop
+ * @returns Resolved tween configuration or undefined if not a tween
+ */
+export function extractTweenConfig(prop) {
+    const resolved = parseMotionProp(prop);
+    if (resolved.type === 'tween')
+        return resolved;
+}
+/**
+ * Parses and normalizes a motion configuration into a standard format
+ *
+ * @param config - The motion configuration to parse
+ * @param propertyKey - Optional property key when config is a map of properties
+ * @returns A standardized motion configuration object
+ */
+export function parseMotionProp(config, accessor) {
+    if (typeof config === 'object' && 'type' in config && 'options' in config) {
+        if (typeof config.options === 'object')
+            return config;
+        return { type: config.type, options: {} };
+    }
+    // Default to no animation if no configuration provided
+    if (config === undefined)
+        return { type: 'none', options: {} };
+    // Case 1: string shorthand ('spring', 'tween', 'none')
+    if (typeof config === 'string') {
+        if (config === 'spring') {
+            return { type: 'spring', options: {} };
+        }
+        else if (config === 'tween') {
+            return { type: 'tween', options: {} };
+        }
+        return { type: 'none', options: {} };
+    }
+    // Case 2: Object with explicit type property
+    if (typeof config === 'object' && 'type' in config) {
+        if (config.type === 'spring') {
+            const { type, ...options } = config;
+            return { type: 'spring', options };
+        }
+        else if (config.type === 'tween') {
+            const { type, ...options } = config;
+            return { type: 'tween', options };
+        }
+        else {
+            return { type: 'none', options: {} };
+        }
+    }
+    // Case 3: Property map object, lookup by property key
+    // We've already established config is an object at this point
+    if (accessor) {
+        const propConfig = config[accessor];
+        if (propConfig !== undefined) {
+            return parseMotionProp(propConfig);
+        }
+    }
+    // Fallback to no animation
+    return {
+        type: 'none',
+        options: {},
+    };
+}

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

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

package/dist/utils/motion.test.js

@@ -0,0 +1,213 @@
+import { describe, it, expect } from 'vitest';
+import { parseMotionProp, extractTweenConfig } from './motion.svelte.js';
+describe('parseMotionProp', () => {
+    it('should return "none" type when config is undefined', () => {
+        const result = parseMotionProp(undefined);
+        expect(result).toEqual({ type: 'none', options: {} });
+    });
+    it('should return an already resolved motion object that may have been parsed earlier in the chain', () => {
+        const resolvedMotion = {
+            type: 'spring',
+            options: {
+                stiffness: 0.5,
+                damping: 0.8,
+            },
+        };
+        const result = parseMotionProp(resolvedMotion);
+        expect(result).toEqual(resolvedMotion);
+    });
+    describe('string input handling', () => {
+        it('should handle "spring" string shorthand', () => {
+            const result = parseMotionProp('spring');
+            expect(result).toEqual({ type: 'spring', options: {} });
+        });
+        it('should handle "tween" string shorthand', () => {
+            const result = parseMotionProp('tween');
+            expect(result).toEqual({ type: 'tween', options: {} });
+        });
+        it('should handle "none" string shorthand', () => {
+            const result = parseMotionProp('none');
+            expect(result).toEqual({ type: 'none', options: {} });
+        });
+        it('should default to "none" for invalid string values', () => {
+            const result = parseMotionProp('invalid');
+            expect(result).toEqual({ type: 'none', options: {} });
+        });
+    });
+    describe('object with type property', () => {
+        it('should handle spring object with options', () => {
+            const springConfig = {
+                type: 'spring',
+                stiffness: 0.5,
+                damping: 0.8,
+            };
+            const result = parseMotionProp(springConfig);
+            expect(result).toEqual({
+                type: 'spring',
+                options: { stiffness: 0.5, damping: 0.8 },
+            });
+        });
+        it('should handle tween object with options', () => {
+            const tweenConfig = {
+                type: 'tween',
+                duration: 300,
+                easing: (t) => t,
+            };
+            const result = parseMotionProp(tweenConfig);
+            expect(result).toEqual({
+                type: 'tween',
+                options: { duration: 300, easing: expect.any(Function) },
+            });
+        });
+        it('should handle none object', () => {
+            const noneConfig = {
+                type: 'none',
+            };
+            const result = parseMotionProp(noneConfig);
+            expect(result).toEqual({ type: 'none', options: {} });
+        });
+    });
+    describe('property map object with accessor', () => {
+        it('should extract a specific property motion config', () => {
+            const propMap = {
+                x: 'spring',
+                y: { type: 'tween', duration: 300 },
+                scale: { type: 'spring', stiffness: 0.2 },
+            };
+            const resultX = parseMotionProp(propMap, 'x');
+            expect(resultX).toEqual({ type: 'spring', options: {} });
+            const resultY = parseMotionProp(propMap, 'y');
+            expect(resultY).toEqual({ type: 'tween', options: { duration: 300 } });
+            const resultScale = parseMotionProp(propMap, 'scale');
+            expect(resultScale).toEqual({ type: 'spring', options: { stiffness: 0.2 } });
+        });
+        it('should return "none" type for non-existent accessor', () => {
+            const propMap = {
+                x: 'spring',
+                y: 'tween',
+            };
+            const result = parseMotionProp(propMap, 'z');
+            expect(result).toEqual({ type: 'none', options: {} });
+        });
+    });
+    describe('edge cases', () => {
+        it('should handle empty object as "none"', () => {
+            const result = parseMotionProp({});
+            expect(result).toEqual({ type: 'none', options: {} });
+        });
+        it('should handle object without type property', () => {
+            const invalidObject = {
+                stiffness: 0.5,
+                damping: 0.8,
+            };
+            const result = parseMotionProp(invalidObject);
+            expect(result).toEqual({ type: 'none', options: {} });
+        });
+    });
+    // Test case 6: Type Generic
+    describe('type generic parameter', () => {
+        it('should work with explicit generic type parameter', () => {
+            const propMap = {
+                x: 'spring',
+                y: 'tween',
+                scale: { type: 'spring', stiffness: 0.3 },
+            };
+            const result = parseMotionProp(propMap, 'x');
+            expect(result).toEqual({ type: 'spring', options: {} });
+        });
+    });
+});
+describe('extractTweenConfig', () => {
+    // Test case 1: Undefined input
+    it('should return undefined when config is undefined', () => {
+        const result = extractTweenConfig(undefined);
+        expect(result).toBeUndefined();
+    });
+    // Test case 2: String inputs
+    describe('string input handling', () => {
+        it('should extract tween config from "tween" string shorthand', () => {
+            const result = extractTweenConfig('tween');
+            expect(result).toEqual({ type: 'tween', options: {} });
+        });
+        it('should return undefined for "spring" string shorthand', () => {
+            const result = extractTweenConfig('spring');
+            expect(result).toBeUndefined();
+        });
+        it('should return undefined for "none" string shorthand', () => {
+            const result = extractTweenConfig('none');
+            expect(result).toBeUndefined();
+        });
+    });
+    // Test case 3: Object with type property
+    describe('object with type property', () => {
+        it('should extract tween object with options', () => {
+            const tweenConfig = {
+                type: 'tween',
+                duration: 300,
+                easing: (t) => t,
+            };
+            const result = extractTweenConfig(tweenConfig);
+            expect(result).toEqual({
+                type: 'tween',
+                options: { duration: 300, easing: expect.any(Function) },
+            });
+        });
+        it('should return undefined for spring object', () => {
+            const springConfig = {
+                type: 'spring',
+                stiffness: 0.5,
+                damping: 0.8,
+            };
+            const result = extractTweenConfig(springConfig);
+            expect(result).toBeUndefined();
+        });
+        it('should return undefined for none object', () => {
+            const noneConfig = {
+                type: 'none',
+            };
+            const result = extractTweenConfig(noneConfig);
+            expect(result).toBeUndefined();
+        });
+    });
+    // Test case 4: Property map object (without accessor)
+    describe('property map object without accessor', () => {
+        it('should return undefined for property map objects without accessor', () => {
+            const propMap = {
+                x: 'tween',
+                y: { type: 'tween', duration: 300 },
+                scale: { type: 'spring', stiffness: 0.2 },
+            };
+            const result = extractTweenConfig(propMap);
+            expect(result).toBeUndefined();
+        });
+    });
+    // Test case 6: Edge cases
+    describe('edge cases', () => {
+        it('should handle empty object', () => {
+            const result = extractTweenConfig({});
+            expect(result).toBeUndefined();
+        });
+        it('should handle object without type property', () => {
+            const invalidObject = {
+                duration: 300,
+                easing: (t) => t,
+            };
+            const result = extractTweenConfig(invalidObject);
+            expect(result).toBeUndefined();
+        });
+    });
+    describe('with generic type parameter', () => {
+        it('should work with explicit generic type parameter', () => {
+            const propMap = {
+                x: 'tween',
+                y: { type: 'tween', duration: 400 },
+                scale: 'spring',
+            };
+            // The extractTweenConfig function doesn't directly support accessors,
+            // so for this case we manually extract the property first
+            const xConfig = propMap.x;
+            const result = extractTweenConfig(xConfig);
+            expect(result).toEqual({ type: 'tween', options: {} });
+        });
+    });
+});

package/dist/utils/{rect.d.ts → rect.svelte.d.ts}

@@ -1,6 +1,9 @@
-import type { ChartContext } from '../components/ChartContext.svelte';
+import type { ChartContextValue } from '../components/Chart.svelte';
 import { type Accessor } from './common.js';
-/** A set of inset distances, applied to a rectangle to shrink or expand the area represented by that rectangle. */
+/**
+ * A set of inset distances, applied to a rectangle to shrink or expand
+ * the area  represented by that rectangle.
+ */
 export type Insets = {
     /** Applies an inset all sides of a rectangle: `left`, `right`, `bottom`, and `top` */
     all?: number;
@@ -28,12 +31,12 @@ type DimensionGetterOptions = {
     y1?: Accessor;
     insets?: Insets;
 };
-export declare function createDimensionGetter<TData>(context: ChartContext<TData>, options?: DimensionGetterOptions): import("svelte/store").Readable<(item: any) => {
+export declare function createDimensionGetter<TData>(ctx: ChartContextValue<TData>, getOptions?: () => DimensionGetterOptions): (item: TData) => {
     x: any;
     y: any;
     width: number;
     height: number;
-}>;
+};
 /**
  * If value is an array, returns first item, else returns original value
  * Useful when x/y getters for band scale are an array (such as for histograms)

package/dist/utils/rect.svelte.js

@@ -0,0 +1,105 @@
+import { accessor } from './common.js';
+import { isScaleBand } from './scales.svelte.js';
+import { max, min } from 'd3-array';
+function resolveInsets(insets) {
+    const all = insets?.all ?? 0;
+    const x = insets?.x ?? all;
+    const y = insets?.y ?? all;
+    const left = insets?.left ?? x;
+    const right = insets?.right ?? x;
+    const top = insets?.top ?? y;
+    const bottom = insets?.bottom ?? y;
+    return { left, right, bottom, top };
+}
+export function createDimensionGetter(ctx, getOptions) {
+    const options = $derived(getOptions?.());
+    return (item) => {
+        const insets = resolveInsets(options?.insets);
+        // Use `xscale.domain()` instead of `$xDomain` to include `nice()` being applied
+        const xDomainMinMax = ctx.xScale.domain();
+        const yDomainMinMax = ctx.yScale.domain();
+        const _x = accessor(options?.x ?? ctx.x);
+        const _y = accessor(options?.y ?? ctx.y);
+        const _x1 = accessor(options?.x1 ?? ctx.x1);
+        const _y1 = accessor(options?.y1 ?? ctx.y1);
+        if (isScaleBand(ctx.yScale)) {
+            // Horizontal band
+            const y = firstValue(ctx.yScale(_y(item)) ?? 0) +
+                (ctx.y1Scale ? ctx.y1Scale(_y1(item)) : 0) +
+                insets.top;
+            const height = Math.max(0, ctx.yScale.bandwidth
+                ? (ctx.y1Scale ? (ctx.y1Scale.bandwidth?.() ?? 0) : ctx.yScale.bandwidth()) -
+                    insets.bottom -
+                    insets.top
+                : 0);
+            const xValue = _x(item);
+            let left = 0;
+            let right = 0;
+            if (Array.isArray(xValue)) {
+                // Array contains both top and bottom values (stack, etc);
+                left = min(xValue);
+                right = max(xValue);
+            }
+            else if (xValue == null) {
+                // null/undefined value
+                left = 0;
+                right = 0;
+            }
+            else if (xValue > 0) {
+                // Positive value
+                left = max([0, xDomainMinMax[0]]);
+                right = xValue;
+            }
+            else {
+                // Negative value
+                left = xValue;
+                right = min([0, xDomainMinMax[1]]);
+            }
+            const x = ctx.xScale(left) + insets.left;
+            const width = Math.max(0, ctx.xScale(right) - ctx.xScale(left) - insets.left - insets.right);
+            return { x, y, width, height };
+        }
+        else {
+            // Vertical band or linear
+            const x = firstValue(ctx.xScale(_x(item))) + (ctx.x1Scale ? ctx.x1Scale(_x1(item)) : 0) + insets.left;
+            const width = Math.max(0, ctx.xScale.bandwidth
+                ? (ctx.x1Scale ? (ctx.x1Scale.bandwidth?.() ?? 0) : ctx.xScale.bandwidth()) -
+                    insets.left -
+                    insets.right
+                : 0);
+            const yValue = _y(item);
+            let top = 0;
+            let bottom = 0;
+            if (Array.isArray(yValue)) {
+                // Array contains both top and bottom values (stack, etc);
+                top = max(yValue);
+                bottom = min(yValue);
+            }
+            else if (yValue == null) {
+                // null/undefined value
+                top = 0;
+                bottom = 0;
+            }
+            else if (yValue > 0) {
+                // Positive value
+                top = yValue;
+                bottom = max([0, yDomainMinMax[0]]);
+            }
+            else {
+                // Negative value
+                top = min([0, yDomainMinMax[1]]);
+                bottom = yValue;
+            }
+            const y = ctx.yScale(top) + insets.top;
+            const height = ctx.yScale(bottom) - ctx.yScale(top) - insets.bottom - insets.top;
+            return { x, y, width, height };
+        }
+    };
+}
+/**
+ * If value is an array, returns first item, else returns original value
+ * Useful when x/y getters for band scale are an array (such as for histograms)
+ */
+export function firstValue(value) {
+    return Array.isArray(value) ? value[0] : value;
+}