layerchart 2.0.0-next.44 → 2.0.0-next.46

package/dist/contexts/transform.d.ts

@@ -0,0 +1,95 @@
+import { type TransformMode, type TransformScrollMode } from '../states/transform.svelte.js';
+import type { MotionProp } from '../utils/motion.svelte.js';
+export type TransformContextValue = {
+    /**
+     * The current transform mode.
+     *
+     * - `canvas`: The transform is applied to the canvas element.
+     * - `manual`: The transform is applied manually.
+     * - `none`: No transform is applied.
+     */
+    mode: TransformMode;
+    /**
+     * The current scale of the transform.
+     */
+    scale: number;
+    /**
+     * Set the scale of the transform
+     * @param value - the scale value to set
+     * @param options - motion options to apply to the transform (defaults to the motion options passed to the component)
+     */
+    setScale(value: number, options?: MotionProp): void;
+    /**
+     * The current translate of the transform.
+     */
+    translate: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Set the translate of the transform
+     * @param point - the point to translate to
+     * @param options - motion options to apply to the transform (defaults to the motion options passed to the component)
+     */
+    setTranslate(point: {
+        x: number;
+        y: number;
+    }, options?: MotionProp): void;
+    /**
+     * Whether the transform is currently being moved
+     */
+    moving: boolean;
+    /**
+     * Whether the transform is currently being dragged
+     */
+    dragging: boolean;
+    /**
+     * The scroll mode of the transform.
+     *
+     * - `scale`: Scrolling will zoom in/out the canvas.
+     * - `translate`: Scrolling will pan the canvas.
+     * - `none`: No scroll mode is applied.
+     */
+    scrollMode: TransformScrollMode;
+    /**
+     * Set the scroll mode of the transform
+     *
+     * @param mode - the scroll mode to set
+     */
+    setScrollMode(mode: TransformScrollMode): void;
+    /**
+     * Reset the transform to its initial state
+     */
+    reset(): void;
+    /**
+     * Zoom in the transform
+     */
+    zoomIn(): void;
+    /**
+     * Zoom out the transform
+     *
+     */
+    zoomOut(): void;
+    /**
+     * Translate the transform to the center of the canvas
+     */
+    translateCenter(): void;
+    /**
+     * Zoom to a specific point in the canvas
+     *
+     * @param center - The point (in chart coordinates) that should become the new
+     * center of the view after zooming.
+     *
+     * @param rect - A rectangular region (in chart coordinates) that the view should scale to fit.
+     * If omitted, the scale defaults to 1 (no zoom).
+     */
+    zoomTo(center: {
+        x: number;
+        y: number;
+    }, rect?: {
+        width: number;
+        height: number;
+    }): void;
+};
+export declare function getTransformContext(): TransformContextValue;
+export declare function setTransformContext(transform: TransformContextValue): TransformContextValue;

package/dist/contexts/transform.js

@@ -0,0 +1,10 @@
+import { Context } from 'runed';
+import {} from '../components/TransformContext.svelte';
+import { createDefaultTransformContext, } from '../states/transform.svelte.js';
+const _TransformContext = new Context('TransformContext');
+export function getTransformContext() {
+    return _TransformContext.getOr(createDefaultTransformContext());
+}
+export function setTransformContext(transform) {
+    return _TransformContext.set(transform);
+}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components/index.js';
+export * from './contexts/index.js';
 export * from './utils/index.js';

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from './components/index.js';
+export * from './contexts/index.js';
 export * from './utils/index.js';

package/dist/states/settings.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { LayerContext } from '../contexts/layer.js';
+export type SettingsOptions = {
+    layer?: LayerContext;
+    debug?: boolean;
+};
+/** Global settings context for charts */
+export declare class Settings {
+    layer: LayerContext;
+    debug: boolean;
+    constructor(options?: SettingsOptions);
+}
+export declare const defaultSettings: Settings;

package/dist/states/settings.svelte.js

@@ -0,0 +1,10 @@
+/** Global settings context for charts */
+export class Settings {
+    layer;
+    debug;
+    constructor(options = {}) {
+        this.layer = $state(options.layer ?? 'svg');
+        this.debug = $state(options.debug ?? false);
+    }
+}
+export const defaultSettings = new Settings();

package/dist/states/transform.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { TransformContextValue } from '../contexts/transform.js';
+export type TransformMode = 'canvas' | 'manual' | 'none';
+export type TransformScrollMode = 'scale' | 'translate' | 'none';
+export declare const DEFAULT_TRANSLATE: {
+    x: number;
+    y: number;
+};
+export declare const DEFAULT_SCALE = 1;
+export declare function createDefaultTransformContext(): TransformContextValue;

package/dist/states/transform.svelte.js

@@ -0,0 +1,31 @@
+export const DEFAULT_TRANSLATE = { x: 0, y: 0 };
+export const DEFAULT_SCALE = 1;
+export function createDefaultTransformContext() {
+    let defaultTranslate = $state(DEFAULT_TRANSLATE);
+    let defaultScale = $state(DEFAULT_SCALE);
+    const defaultContext = {
+        mode: 'none',
+        get scale() {
+            return defaultScale;
+        },
+        setScale: (value) => {
+            defaultScale = value;
+        },
+        get translate() {
+            return defaultTranslate;
+        },
+        setTranslate: (value) => {
+            defaultTranslate = value;
+        },
+        moving: false,
+        dragging: false,
+        scrollMode: 'none',
+        setScrollMode: () => { },
+        reset: () => { },
+        zoomIn: () => { },
+        zoomOut: () => { },
+        translateCenter: () => { },
+        zoomTo: () => { },
+    };
+    return defaultContext;
+}

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

@@ -6,7 +6,7 @@
  */
 import type { Getter, GetterValues } from './types.js';
 import type { ComponentProps } from 'svelte';
-import type { Text } from '../components/index.js';
+import type Text from '../components/Text.svelte';
 export type ArcTextProps = GetterValues<{
     innerRadius: number;
     outerRadius: number;

package/dist/utils/canvas.d.ts

@@ -9,12 +9,14 @@ type StyleOptions = Partial<Omit<CSSStyleDeclaration, 'fillOpacity' | 'strokeWid
 export type ComputedStylesOptions = {
     styles?: StyleOptions;
     classes?: ClassValue | null;
+    /** Inline style string (e.g., 'stroke-dasharray: 6 4') - will be parsed and merged with styles */
+    style?: string | null;
 };
 /**
  * Appends or reuses `<svg>` element below `<canvas>` to resolve CSS variables and classes (ex. `stroke: var(--color-primary)` => `stroke: rgb(...)` )
  */
 export declare function _getComputedStyles(canvas: HTMLCanvasElement, { styles, classes }?: ComputedStylesOptions): CSSStyleDeclaration;
-export declare const getComputedStyles: any;
+export declare const getComputedStyles: typeof _getComputedStyles;
 /** Render SVG path data onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
 export declare function renderPathData(ctx: CanvasRenderingContext2D, pathData: string | null | undefined, styleOptions?: ComputedStylesOptions): void;
 export declare function renderText(ctx: CanvasRenderingContext2D, text: string | number | null | undefined, coords: {
@@ -26,6 +28,8 @@ export declare function renderRect(ctx: CanvasRenderingContext2D, coords: {
     y: number;
     width: number;
     height: number;
+    rx?: number;
+    ry?: number;
 }, styleOptions?: ComputedStylesOptions): void;
 export declare function renderCircle(ctx: CanvasRenderingContext2D, coords: {
     cx: number;
@@ -70,8 +74,8 @@ export declare function _createLinearGradient(ctx: CanvasRenderingContext2D, x0:
     color: string;
 }[]): CanvasGradient;
 /** Create linear gradient and memoize result to fix reactivity */
-export declare const createLinearGradient: any;
+export declare const createLinearGradient: typeof _createLinearGradient;
 export declare function _createPattern(ctx: CanvasRenderingContext2D, width: number, height: number, shapes: PatternShape[], background?: string): CanvasPattern | null;
 /** Create pattern and memoize result to fix reactivity */
-export declare const createPattern: any;
+export declare const createPattern: typeof _createPattern;
 export {};

package/dist/utils/canvas.js

@@ -2,11 +2,36 @@ import memoize from 'memoize';
 import { cls } from '@layerstack/tailwind';
 export const DEFAULT_FILL = 'rgb(0, 0, 0)';
 const CANVAS_STYLES_ELEMENT_ID = '__layerchart_canvas_styles_id';
+/**
+ * Parse an inline CSS style string into a StyleOptions object.
+ * Converts kebab-case properties to camelCase (e.g., 'stroke-dasharray' -> 'strokeDasharray')
+ */
+function parseStyleString(styleString) {
+    if (!styleString)
+        return {};
+    const styles = {};
+    // Split by semicolons and process each declaration
+    const declarations = styleString.split(';').filter((s) => s.trim());
+    for (const declaration of declarations) {
+        const colonIndex = declaration.indexOf(':');
+        if (colonIndex === -1)
+            continue;
+        const property = declaration.slice(0, colonIndex).trim();
+        const value = declaration.slice(colonIndex + 1).trim();
+        if (!property || !value)
+            continue;
+        // Convert kebab-case to camelCase (e.g., 'stroke-dasharray' -> 'strokeDasharray')
+        const camelProperty = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+        styles[camelProperty] = value;
+    }
+    return styles;
+}
 const supportedStyles = [
     'fill',
     'fillOpacity',
     'stroke',
     'strokeWidth',
+    'strokeDasharray',
     'opacity',
     'fontWeight',
     'fontSize',
@@ -69,16 +94,19 @@ export const getComputedStyles = memoize(_getComputedStyles, {
 /** Render onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
 function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
     // console.count('render');
+    // Parse inline style string and merge with styles object
+    const parsedInlineStyles = parseStyleString(styleOptions.style);
+    const mergedStyles = { ...styleOptions.styles, ...parsedInlineStyles };
     // TODO: Consider memoizing?  How about reactiving to CSS variable changes (light/dark mode toggle)
     let resolvedStyles;
     if (styleOptions.classes == null &&
-        !Object.values(styleOptions.styles ?? {}).some((v) => typeof v === 'string' && v.includes('var('))) {
+        !Object.values(mergedStyles).some((v) => typeof v === 'string' && v.includes('var('))) {
         // Skip resolving styles if no classes are provided and no styles are using CSS variables
-        resolvedStyles = styleOptions.styles ?? {};
+        resolvedStyles = mergedStyles;
     }
     else {
         // Remove constant non-css variable properties (ex. `strokeWidth: 0.5`, `fill: #123456`) as not needed and improves memoization cache hit
-        const { constantStyles, variableStyles } = Object.entries(styleOptions.styles ?? {}).reduce((acc, [key, value]) => {
+        const { constantStyles, variableStyles } = Object.entries(mergedStyles).reduce((acc, [key, value]) => {
             if (typeof value === 'number' || (typeof value === 'string' && !value.includes('var('))) {
                 acc.constantStyles[key] = value;
             }
@@ -120,12 +148,15 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
         // ctx.textBaseline = 'hanging';
         // ctx.textBaseline = 'ideographic';
     }
-    // Dashed lines
-    if (resolvedStyles.strokeDasharray?.includes(',')) {
+    // Dashed lines (supports both comma and space separators, e.g., "2,2" or "2 2")
+    if (resolvedStyles.strokeDasharray && resolvedStyles.strokeDasharray !== 'none') {
         const dashArray = resolvedStyles.strokeDasharray
-            .split(',')
+            .split(/[\s,]+/)
+            .filter((s) => s.length > 0)
             .map((s) => Number(s.replace('px', '')));
-        ctx.setLineDash(dashArray);
+        if (dashArray.length > 0 && dashArray.every((n) => !isNaN(n))) {
+            ctx.setLineDash(dashArray);
+        }
     }
     for (const attr of paintOrder) {
         if (attr === 'fill') {
@@ -180,10 +211,46 @@ export function renderText(ctx, text, coords, styleOptions = {}) {
     }
 }
 export function renderRect(ctx, coords, styleOptions = {}) {
-    render(ctx, {
-        fill: (ctx) => ctx.fillRect(coords.x, coords.y, coords.width, coords.height),
-        stroke: (ctx) => ctx.strokeRect(coords.x, coords.y, coords.width, coords.height),
-    }, styleOptions);
+    const { x, y, width, height } = coords;
+    const rx = coords.rx ?? 0;
+    const ry = coords.ry ?? rx; // Default ry to rx if not provided (SVG behavior)
+    // No rounding - use simple rect methods
+    if (rx === 0 && ry === 0) {
+        render(ctx, {
+            fill: (ctx) => ctx.fillRect(x, y, width, height),
+            stroke: (ctx) => ctx.strokeRect(x, y, width, height),
+        }, styleOptions);
+        return;
+    }
+    // Try native roundRect if available (modern browsers)
+    if (typeof ctx.roundRect === 'function') {
+        ctx.beginPath();
+        ctx.roundRect(x, y, width, height, [rx, ry]);
+        render(ctx, {
+            fill: (ctx) => ctx.fill(),
+            stroke: (ctx) => ctx.stroke(),
+        }, styleOptions);
+        ctx.closePath();
+        return;
+    }
+    // Fallback: use path rendering for rounded corners
+    // Clamp radii to half the width/height
+    const clampedRx = Math.min(rx, width / 2);
+    const clampedRy = Math.min(ry, height / 2);
+    // Build rounded rect path: start at top-left (after corner), go clockwise
+    const pathData = [
+        `M${x + clampedRx},${y}`, // Move to top-left (after corner)
+        `h${width - 2 * clampedRx}`, // Top edge
+        `a${clampedRx},${clampedRy} 0 0 1 ${clampedRx},${clampedRy}`, // Top-right corner
+        `v${height - 2 * clampedRy}`, // Right edge
+        `a${clampedRx},${clampedRy} 0 0 1 ${-clampedRx},${clampedRy}`, // Bottom-right corner
+        `h${2 * clampedRx - width}`, // Bottom edge
+        `a${clampedRx},${clampedRy} 0 0 1 ${-clampedRx},${-clampedRy}`, // Bottom-left corner
+        `v${2 * clampedRy - height}`, // Left edge
+        `a${clampedRx},${clampedRy} 0 0 1 ${clampedRx},${-clampedRy}`, // Top-left corner
+        'z', // Close path
+    ].join(' ');
+    renderPathData(ctx, pathData, styleOptions);
 }
 export function renderCircle(ctx, coords, styleOptions = {}) {
     ctx.beginPath();

package/dist/utils/common.d.ts

@@ -5,7 +5,14 @@ export type Accessor<TData = any> = number | string | ((d: TData) => any) | unde
 export declare function accessor<TData = any>(prop: Accessor<TData>): (d: TData) => any;
 /** Guarantee chart data is an array */
 export declare function chartDataArray<TData = any>(data: ComponentProps<Chart<TData>>['data']): any[];
-export declare function defaultChartPadding<TData, SeriesComponent extends Component, TSnippetProps>(axis?: SimplifiedChartProps<TData, SeriesComponent, TSnippetProps>['axis'], legend?: SimplifiedChartProps<TData, SeriesComponent, TSnippetProps>['legend']): {
+export declare function defaultChartPadding<TData, SeriesComponent extends Component, TSnippetProps>(options?: {
+    axis?: SimplifiedChartProps<TData, SeriesComponent, TSnippetProps>['axis'];
+    legend?: SimplifiedChartProps<TData, SeriesComponent, TSnippetProps>['legend'];
+    top?: number;
+    left?: number;
+    bottom?: number;
+    right?: number;
+} | undefined): {
     top: number;
     left: number;
     bottom: number;

package/dist/utils/common.js

@@ -1,4 +1,4 @@
-import { get } from 'lodash-es';
+import { get } from '@layerstack/utils';
 export function accessor(prop) {
     if (Array.isArray(prop)) {
         return (d) => prop.map((p) => accessor(p)(d));
@@ -32,18 +32,17 @@ export function chartDataArray(data) {
     }
     return [];
 }
-export function defaultChartPadding(axis = true, legend = false) {
+export function defaultChartPadding(options = {}) {
+    const { axis = true, legend = false, top, left, bottom, right } = options;
     if (axis === false) {
         return undefined;
     }
-    else {
-        return {
-            top: axis === true || axis === 'y' ? 4 : 0,
-            left: axis === true || axis === 'y' ? 20 : 0,
-            bottom: (axis === true || axis === 'x' ? 20 : 0) + (legend ? 32 : 0),
-            right: axis === true || axis === 'x' ? 4 : 0,
-        };
-    }
+    return {
+        top: top ?? (axis === true || axis === 'y' ? 4 : 0),
+        left: left ?? (axis === true || axis === 'y' ? 20 : 0),
+        bottom: (bottom ?? (axis === true || axis === 'x' ? 20 : 0)) + (legend ? 32 : 0),
+        right: right ?? (axis === true || axis === 'x' ? 4 : 0),
+    };
 }
 /**
  * Find the first instance within `data` with the same value as `original` using prop accessor.

package/dist/utils/index.d.ts

@@ -6,8 +6,10 @@ export * from './hierarchy.js';
 export * from './math.js';
 export * from './path.js';
 export * from './pivot.js';
+export * from './scales.svelte.js';
 export * from './stack.js';
 export * from './ticks.js';
+export * from './treemap.js';
 export * from './threshold.js';
 export * from './types.js';
 export * from './graph/dagre.js';

package/dist/utils/index.js

@@ -6,8 +6,10 @@ export * from './hierarchy.js';
 export * from './math.js';
 export * from './path.js';
 export * from './pivot.js';
+export * from './scales.svelte.js';
 export * from './stack.js';
 export * from './ticks.js';
+export * from './treemap.js';
 export * from './threshold.js';
 export * from './types.js';
 export * from './graph/dagre.js';

package/dist/utils/motion.svelte.js

@@ -1,5 +1,4 @@
 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

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

@@ -1,4 +1,4 @@
-import type { ChartContextValue } from '../components/Chart.svelte';
+import type { ChartContextValue } from '../contexts/chart.js';
 import { type Accessor } from './common.js';
 /**
  * A set of inset distances, applied to a rectangle to shrink or expand

package/dist/utils/rect.svelte.js

@@ -1,6 +1,6 @@
+import { max, min } from 'd3-array';
 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;
@@ -22,13 +22,15 @@ export function createDimensionGetter(ctx, getOptions) {
         const _y = accessor(options?.y ?? ctx.y);
         const _x1 = accessor(options?.x1 ?? ctx.x1);
         const _y1 = accessor(options?.y1 ?? ctx.y1);
+        const hasX1 = (options?.x1 ?? ctx.config.x1) != null;
+        const hasY1 = (options?.y1 ?? ctx.config.y1) != null;
         if (isScaleBand(ctx.yScale)) {
             // Horizontal band
             const y = firstValue(ctx.yScale(_y(item)) ?? 0) +
-                (ctx.y1Scale ? ctx.y1Scale(_y1(item)) : 0) +
+                (hasY1 && 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()) -
+                ? (hasY1 && ctx.y1Scale ? (ctx.y1Scale.bandwidth?.() ?? 0) : ctx.yScale.bandwidth()) -
                     insets.bottom -
                     insets.top
                 : 0);
@@ -61,9 +63,11 @@ export function createDimensionGetter(ctx, getOptions) {
         }
         else if (isScaleBand(ctx.xScale)) {
             // Vertical band or linear
-            const x = firstValue(ctx.xScale(_x(item))) + (ctx.x1Scale ? ctx.x1Scale(_x1(item)) : 0) + insets.left;
+            const x = firstValue(ctx.xScale(_x(item))) +
+                (hasX1 && 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()) -
+                ? (hasX1 && ctx.x1Scale ? (ctx.x1Scale.bandwidth?.() ?? 0) : ctx.xScale.bandwidth()) -
                     insets.left -
                     insets.right
                 : 0);
@@ -103,8 +107,10 @@ export function createDimensionGetter(ctx, getOptions) {
             const xValue = _x(item);
             const start = ctx.xInterval.floor(xValue);
             const end = ctx.xInterval.offset(start);
-            const x = ctx.xScale(start) + insets.left;
-            const width = ctx.xScale(end) - x - insets.right;
+            const xStart = ctx.xScale(start);
+            const xEnd = ctx.xScale(end);
+            const x = Math.min(xStart, xEnd) + insets.left;
+            const width = Math.abs(xEnd - xStart) - insets.left - insets.right;
             const yValue = _y(item);
             let top = 0;
             let bottom = 0;
@@ -137,8 +143,10 @@ export function createDimensionGetter(ctx, getOptions) {
             const yValue = _y(item);
             const start = ctx.yInterval.floor(yValue);
             const end = ctx.yInterval.offset(start);
-            const y = ctx.yScale(start) + insets.top;
-            const height = ctx.yScale(end) - y - insets.bottom;
+            const yStart = ctx.yScale(start);
+            const yEnd = ctx.yScale(end);
+            const y = Math.min(yStart, yEnd) + insets.top;
+            const height = Math.abs(yEnd - yStart) - insets.top - insets.bottom;
             const xValue = _x(item);
             let left = 0;
             let right = 0;

package/dist/utils/scales.svelte.js

@@ -150,7 +150,7 @@ export function groupScaleBand(scale, flatData, groupBy, padding) {
 export function tweenedScale(scale, tweenedOptions = {}) {
     const tweenedDomain = new Tween(undefined, tweenedOptions);
     const tweenedRange = new Tween(undefined, tweenedOptions);
-    const tweenedScale = $derived.by(() => {
+    const _tweenedScale = $derived.by(() => {
         const scaledInstance = scale.domain ? scale : scale();
         if (tweenedDomain.current) {
             scaledInstance.domain(tweenedDomain.current);
@@ -162,7 +162,7 @@ export function tweenedScale(scale, tweenedOptions = {}) {
     });
     return {
         get current() {
-            return tweenedScale;
+            return _tweenedScale;
         },
         domain: (values) => tweenedDomain.set(values),
         range: (values) => tweenedRange.set(values),

package/dist/utils/string.d.ts

@@ -1,4 +1,5 @@
-export declare const getStringWidth: any;
+declare function _getStringWidth(str: string, style?: CSSStyleDeclaration): number | null;
+export declare const getStringWidth: typeof _getStringWidth;
 export type RasterizeTextOptions = {
     fontSize?: string;
     fontWeight?: number;
@@ -47,3 +48,4 @@ export type TruncateTextOptions = {
  * The ellipsis can be placed at the start, middle, or end of the string.
  */
 export declare function truncateText(text: string, { position, ellipsis, maxWidth, style, maxChars }: TruncateTextOptions): string;
+export {};