layerchart 2.0.0-next.6 → 2.0.0-next.60

package/dist/states/transform.svelte.js

@@ -0,0 +1,408 @@
+import { createControlledMotion, createMotionTracker, parseMotionProp, } from '../utils/motion.svelte.js';
+import { localPoint } from '@layerstack/utils';
+import { watch } from 'runed';
+export const DEFAULT_TRANSLATE = { x: 0, y: 0 };
+export const DEFAULT_SCALE = 1;
+export class TransformState {
+    // Context reference
+    ctx;
+    // Options
+    mode;
+    axis;
+    processTranslate;
+    disablePointer;
+    clickDistance;
+    initialTranslate;
+    initialScale;
+    onTransform;
+    ondragstart;
+    ondragend;
+    scrollActivationKey;
+    scaleExtent;
+    translateExtent;
+    constrain;
+    inertia;
+    // State
+    pointerDown = $state(false);
+    dragging = $state(false);
+    scrollMode = $state('none');
+    startPoint = $state({ x: 0, y: 0 });
+    startTranslate = $state({ x: 0, y: 0 });
+    // Velocity tracking for inertia
+    _pointerSamples = [];
+    // Motion controllers (internal)
+    _translate;
+    _scale;
+    _translating;
+    _scaling;
+    constructor(ctx, options = {}) {
+        this.ctx = ctx;
+        // Initialize options with defaults
+        this.mode = options.mode ?? 'none';
+        this.axis = options.axis ?? 'both';
+        this.processTranslate = options.processTranslate;
+        this.disablePointer = options.disablePointer ?? false;
+        this.clickDistance = options.clickDistance ?? 10;
+        this.initialTranslate = options.initialTranslate ?? DEFAULT_TRANSLATE;
+        this.initialScale = options.initialScale ?? DEFAULT_SCALE;
+        this.onTransform = options.onTransform ?? (() => { });
+        this.ondragstart = options.ondragstart ?? (() => { });
+        this.ondragend = options.ondragend ?? (() => { });
+        this.scrollActivationKey = options.scrollActivationKey;
+        this.scaleExtent = options.scaleExtent;
+        this.translateExtent = options.translateExtent;
+        this.constrain = options.constrain;
+        // Inertia
+        const inertiaOpt = options.inertia;
+        if (inertiaOpt === true) {
+            this.inertia = {
+                enabled: true,
+                decay: 0.99,
+                minVelocity: 0.1,
+                maxVelocity: Infinity,
+                velocityWindow: 160,
+            };
+        }
+        else if (typeof inertiaOpt === 'object') {
+            this.inertia = {
+                enabled: true,
+                decay: inertiaOpt.decay ?? 0.99,
+                minVelocity: inertiaOpt.minVelocity ?? 0.1,
+                maxVelocity: inertiaOpt.maxVelocity ?? Infinity,
+                velocityWindow: inertiaOpt.velocityWindow ?? 160,
+            };
+        }
+        else {
+            this.inertia = {
+                enabled: false,
+                decay: 0.99,
+                minVelocity: 0.1,
+                maxVelocity: Infinity,
+                velocityWindow: 160,
+            };
+        }
+        this.scrollMode = options.scrollMode ?? (this.mode === 'domain' ? 'scale' : 'none');
+        // Initialize motion controllers
+        const resolvedMotion = parseMotionProp(options.motion);
+        this._translate = createControlledMotion(this.initialTranslate, resolvedMotion);
+        this._scale = createControlledMotion(this.initialScale, resolvedMotion);
+        this._translating = createMotionTracker();
+        this._scaling = createMotionTracker();
+        // Watch for transform changes
+        watch([() => this._scale.current, () => this._translate.current], () => {
+            this.onTransform({
+                scale: this._scale.current,
+                translate: this._translate.current,
+            });
+        });
+    }
+    _applyTranslate(x, y, deltaX, deltaY) {
+        if (this.processTranslate)
+            return this.processTranslate(x, y, deltaX, deltaY);
+        if (this.mode === 'domain') {
+            // Negate deltaY because screen Y (top→bottom) is inverted vs data Y (bottom→top).
+            // This works for both normal and reversed Y domains because _computeTransformDomain
+            // uses signed range, which naturally handles the reversal.
+            if (this.axis === 'x')
+                return { x: x + deltaX, y: 0 };
+            if (this.axis === 'y')
+                return { x: 0, y: y - deltaY };
+            return { x: x + deltaX, y: y - deltaY };
+        }
+        return { x: x + deltaX, y: y + deltaY };
+    }
+    /** Clamp scale and translate using scaleExtent, translateExtent, and custom constrain. */
+    _clampScale(value) {
+        if (this.scaleExtent) {
+            value = Math.max(this.scaleExtent[0], Math.min(this.scaleExtent[1], value));
+        }
+        return value;
+    }
+    _clampTranslate(point) {
+        let { x, y } = point;
+        if (this.translateExtent) {
+            const [[minX, minY], [maxX, maxY]] = this.translateExtent;
+            x = Math.max(minX, Math.min(maxX, x));
+            y = Math.max(minY, Math.min(maxY, y));
+        }
+        return { x, y };
+    }
+    _applyConstraints(scale, translate) {
+        scale = this._clampScale(scale);
+        translate = this._clampTranslate(translate);
+        if (this.constrain) {
+            const constrained = this.constrain({ scale, translate });
+            scale = constrained.scale;
+            translate = constrained.translate;
+        }
+        return { scale, translate };
+    }
+    // Derived state
+    get moving() {
+        return this.dragging || this._translating.current || this._scaling.current;
+    }
+    // Public getters and setters for scale and translate
+    get scale() {
+        return this._scale.current;
+    }
+    set scale(value) {
+        this.setScale(value);
+    }
+    get translate() {
+        return this._translate.current;
+    }
+    set translate(point) {
+        this.setTranslate(point);
+    }
+    setScrollMode(mode) {
+        this.scrollMode = mode;
+    }
+    reset() {
+        this._translate.target = this.initialTranslate;
+        this._scale.target = this.initialScale;
+    }
+    zoomIn() {
+        if (!this.ctx)
+            return;
+        this.scaleTo(1.25, {
+            x: (this.ctx.width + this.ctx.padding.left) / 2,
+            y: (this.ctx.height + this.ctx.padding.top) / 2,
+        });
+    }
+    zoomOut() {
+        if (!this.ctx)
+            return;
+        this.scaleTo(0.8, {
+            x: (this.ctx.width + this.ctx.padding.left) / 2,
+            y: (this.ctx.height + this.ctx.padding.top) / 2,
+        });
+    }
+    translateCenter() {
+        this._translate.target = { x: 0, y: 0 };
+    }
+    zoomTo(center, rect) {
+        if (!this.ctx)
+            return;
+        let newScale = rect
+            ? this.ctx.width < this.ctx.height
+                ? this.ctx.width / rect.width
+                : this.ctx.height / rect.height
+            : 1;
+        newScale = this._clampScale(newScale);
+        const newTranslate = {
+            x: this.ctx.width / 2 - center.x * newScale,
+            y: this.ctx.height / 2 - center.y * newScale,
+        };
+        const constrained = this._applyConstraints(newScale, newTranslate);
+        this._translate.target = constrained.translate;
+        if (rect) {
+            this._scale.target = constrained.scale;
+        }
+    }
+    setTranslate(point, options) {
+        const constrained = this._applyConstraints(this._scale.current, point);
+        this._translating.handle(this._translate.set(constrained.translate, options));
+    }
+    setScale(value, options) {
+        const clamped = this._clampScale(value);
+        this._scaling.handle(this._scale.set(clamped, options));
+    }
+    scaleTo(value, point, options = undefined) {
+        if (!this.ctx)
+            return;
+        // In domain mode, reflect Y point because screen Y is inverted vs data Y.
+        // This ensures zoom targets the correct data position under the cursor.
+        if (this.mode === 'domain' && this.axis !== 'x') {
+            point = {
+                x: point.x,
+                y: this.ctx.padding.top + this.ctx.height - (point.y - this.ctx.padding.top),
+            };
+        }
+        const currentScale = this._scale.current;
+        const newScale = this._clampScale(this._scale.current * value);
+        this.setScale(newScale, options);
+        // Translate towards point (ex. mouse cursor/center) while zooming in/out
+        if (!this.processTranslate) {
+            const invertTransformPoint = {
+                x: (point.x - this.ctx.padding.left - this._translate.current.x) / currentScale,
+                y: (point.y - this.ctx.padding.top - this._translate.current.y) / currentScale,
+            };
+            const newTranslate = {
+                x: point.x - this.ctx.padding.left - invertTransformPoint.x * newScale,
+                y: point.y - this.ctx.padding.top - invertTransformPoint.y * newScale,
+            };
+            // Constrain translate to active axis in domain mode
+            if (this.mode === 'domain') {
+                if (this.axis === 'x')
+                    newTranslate.y = 0;
+                if (this.axis === 'y')
+                    newTranslate.x = 0;
+            }
+            this.setTranslate(newTranslate, options);
+        }
+    }
+    onPointerDown(e) {
+        if (this.mode === 'none' || this.disablePointer)
+            return;
+        e.preventDefault();
+        this.pointerDown = true;
+        this.dragging = false;
+        this.startPoint = localPoint(e);
+        this.startTranslate = this._translate.current;
+        this._pointerSamples = [];
+        this.ondragstart?.();
+    }
+    onPointerMove(e) {
+        if (!this.pointerDown)
+            return;
+        e.preventDefault(); // Stop text selection
+        const endPoint = localPoint(e);
+        const deltaX = endPoint.x - this.startPoint.x;
+        const deltaY = endPoint.y - this.startPoint.y;
+        if (!this.dragging) {
+            // If dragged beyond threshold, disable click propagation
+            this.dragging = deltaX * deltaX + deltaY * deltaY > this.clickDistance;
+        }
+        if (this.dragging) {
+            e.stopPropagation(); // Stop tooltip from triggering (along with `capture: true`)
+            e.currentTarget?.setPointerCapture(e.pointerId);
+            // Track pointer samples for inertia velocity calculation
+            if (this.inertia.enabled) {
+                const now = performance.now();
+                this._pointerSamples.push({ x: endPoint.x, y: endPoint.y, t: now });
+                // Trim to keep only samples within the velocity window (plus some buffer)
+                const windowStart = now - this.inertia.velocityWindow * 2;
+                while (this._pointerSamples.length > 2 && this._pointerSamples[0].t < windowStart) {
+                    this._pointerSamples.shift();
+                }
+            }
+            this.setTranslate(this._applyTranslate(this.startTranslate.x, this.startTranslate.y, deltaX, deltaY), this._translate.type === 'spring'
+                ? { instant: true }
+                : this._translate.type === 'tween'
+                    ? { duration: 0 }
+                    : undefined);
+        }
+    }
+    onPointerUp(_e) {
+        const wasDragging = this.dragging;
+        this.pointerDown = false;
+        this.dragging = false;
+        // Apply inertia if enabled and was dragging with enough velocity
+        if (this.inertia.enabled && wasDragging && this._pointerSamples.length >= 2) {
+            const now = performance.now();
+            // Filter samples to the velocity measurement window
+            const windowStart = now - this.inertia.velocityWindow;
+            const recentSamples = this._pointerSamples.filter((s) => s.t >= windowStart);
+            if (recentSamples.length >= 2) {
+                // Compute velocity using recency-weighted per-segment approach.
+                // More recent segments get higher weight, so the final gesture
+                // direction/speed dominates over earlier movement in the window.
+                let weightedVx = 0;
+                let weightedVy = 0;
+                let totalWeight = 0;
+                for (let i = 1; i < recentSamples.length; i++) {
+                    const prev = recentSamples[i - 1];
+                    const curr = recentSamples[i];
+                    const segDt = curr.t - prev.t;
+                    if (segDt <= 0)
+                        continue;
+                    const segVx = (curr.x - prev.x) / segDt;
+                    const segVy = (curr.y - prev.y) / segDt;
+                    // Quadratic recency weight: recent segments contribute more
+                    const recency = (curr.t - windowStart) / this.inertia.velocityWindow;
+                    const weight = recency * recency;
+                    weightedVx += segVx * weight;
+                    weightedVy += segVy * weight;
+                    totalWeight += weight;
+                }
+                if (totalWeight > 0) {
+                    let vx = weightedVx / totalWeight;
+                    let vy = weightedVy / totalWeight;
+                    let speed = Math.sqrt(vx * vx + vy * vy);
+                    // Cap velocity to prevent wild throws
+                    if (speed > this.inertia.maxVelocity) {
+                        const ratio = this.inertia.maxVelocity / speed;
+                        vx *= ratio;
+                        vy *= ratio;
+                        speed = this.inertia.maxVelocity;
+                    }
+                    if (speed > this.inertia.minVelocity) {
+                        // Project target: velocity * decay multiplier (converts decay 0-1 to a distance factor)
+                        // With decay=0.99, factor = 100, giving a natural coast distance
+                        const factor = 1 / (1 - this.inertia.decay);
+                        const current = this._translate.current;
+                        const projectedX = current.x + vx * factor;
+                        const projectedY = current.y + vy * factor;
+                        // For tween motion, compute coast duration proportional to velocity.
+                        // Faster flings coast longer (similar to MapLibre/Google Maps behavior).
+                        const motionOptions = this._translate.type === 'tween'
+                            ? { duration: Math.min(speed * 500, 1200) }
+                            : undefined;
+                        this.setTranslate(this._applyTranslate(current.x, current.y, projectedX - current.x, projectedY - current.y), motionOptions);
+                    }
+                }
+            }
+            this._pointerSamples = [];
+        }
+        this.ondragend?.();
+    }
+    onDoubleClick(e) {
+        if (this.mode === 'none')
+            return;
+        const point = localPoint(e);
+        this.scaleTo(e.shiftKey ? 0.5 : 2, point);
+    }
+    _isActivationKeyHeld(e) {
+        if (!this.scrollActivationKey)
+            return true;
+        switch (this.scrollActivationKey) {
+            case 'meta':
+                return e.metaKey;
+            case 'alt':
+                return e.altKey;
+            case 'control':
+                return e.ctrlKey;
+            case 'shift':
+                return e.shiftKey;
+        }
+    }
+    onWheel(e) {
+        if (this.mode === 'none' || this.scrollMode === 'none')
+            return;
+        if (!this._isActivationKeyHeld(e))
+            return;
+        e.preventDefault();
+        const point = (this.startPoint = localPoint(e));
+        // Pinch to zoom is registered as a wheel event with control key
+        const pinchToZoom = e.ctrlKey;
+        const instantMotionOptions = this._scale.type === 'spring'
+            ? { instant: true }
+            : this._scale.type === 'tween'
+                ? { duration: 0 }
+                : undefined;
+        if (this.scrollMode === 'scale' || pinchToZoom) {
+            // https://github.com/d3/d3-zoom#zoom_wheelDelta
+            const scaleBy = -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002) * (e.ctrlKey ? 10 : 1);
+            this.scaleTo(Math.pow(2, scaleBy), point, instantMotionOptions);
+            // In domain mode, also handle deltaX as pan (for trackpad horizontal scroll)
+            if (this.mode === 'domain' && e.deltaX !== 0) {
+                const startTranslate = this._translate.current;
+                this.setTranslate(this._applyTranslate(startTranslate.x, startTranslate.y, -e.deltaX, 0), instantMotionOptions);
+            }
+        }
+        else if (this.scrollMode === 'translate') {
+            const startTranslate = this._translate.current;
+            this._translate
+                .set(this._applyTranslate(startTranslate.x, startTranslate.y, -e.deltaX, -e.deltaY), instantMotionOptions)
+                .then(() => { })
+                .catch(() => { });
+        }
+    }
+}
+export function createDefaultTransformState() {
+    return new TransformState(null, {
+        mode: 'none',
+        initialTranslate: DEFAULT_TRANSLATE,
+        initialScale: DEFAULT_SCALE,
+    });
+}

package/dist/styles/daisyui-5.css

@@ -0,0 +1,6 @@
+.lc-root-container {
+  --color-surface-100: var(--color-base-100);
+  --color-surface-200: var(--color-base-200);
+  --color-surface-300: var(--color-base-300);
+  --color-surface-content: var(--color-base-content);
+}

package/dist/styles/shadcn-svelte.css

@@ -0,0 +1,11 @@
+/*
+  When NOT using shadcn-svelte Chart component.
+  Not typically needed even when using built-in Chart, as defaults typically are sufficient
+*/
+.lc-root-container {
+  --color-primary: var(--primary);
+  --color-surface-100: var(--card-background);
+  --color-surface-200: var(--card-muted);
+  /* No direct mapping, should add explicit color (light and dark mode) */
+  --color-surface-content: var(--card-foreground);
+}

package/dist/styles/skeleton-3.css

@@ -0,0 +1,15 @@
+.lc-root-container {
+  --color-primary: var(--color-primary-500);
+
+  --color-surface-100: var(--color-surface-50);
+  --color-surface-200: var(--color-surface-100);
+  --color-surface-300: var(--color-surface-200);
+  --color-surface-content: var(--base-font-color);
+
+  html.dark & {
+    --color-surface-100: var(--color-surface-700);
+    --color-surface-200: var(--color-surface-800);
+    --color-surface-300: var(--color-surface-900);
+    --color-surface-content: var(--base-font-color-dark);
+  }
+}

package/dist/styles/skeleton-4.css

@@ -0,0 +1,15 @@
+.lc-root-container {
+  --color-primary: var(--color-primary-500);
+
+  --color-surface-100: var(--color-surface-50);
+  --color-surface-200: var(--color-surface-100);
+  --color-surface-300: var(--color-surface-200);
+  --color-surface-content: var(--base-font-color);
+
+  html.dark & {
+    --color-surface-100: var(--color-surface-700);
+    --color-surface-200: var(--color-surface-800);
+    --color-surface-300: var(--color-surface-900);
+    --color-surface-content: var(--base-font-color-dark);
+  }
+}

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;
@@ -39,9 +39,15 @@ export type ArcTextOptions = {
     startOffset?: string;
     /**
      * An amount of padding to add to the outer radius of the path to add space
-     * between the text and the arc.
+     * between the text and the arc. Applies to `'outer'` and `'middle'` positions.
      */
     outerPadding?: number;
+    /**
+     * An amount of padding to subtract from the inner radius of the path to add
+     * space between the text and the arc. Applies to `'inner'` and `'middle'`
+     * positions. Positive values move the text inward (toward the chart center).
+     */
+    innerPadding?: number;
     /**
      * Optional offset specifically for 'outer-radial' position from the outer arc edge.
      * If not provided, 'outerPadding' will be used.

package/dist/utils/arcText.svelte.js

@@ -172,14 +172,18 @@ export function createArcTextProps(props, opts = {}, position) {
         return undefined;
     });
     const sharedProps = $derived.by(() => {
-        if (reverseText) {
+        // Center text along the arc path by default (50% startOffset, middle anchor).
+        // When the caller provides an explicit `startOffset`, honor it with a `start`
+        // anchor so the text begins at that position instead of centering around it.
+        if (opts.startOffset != null) {
             return {
-                startOffset: opts.startOffset ?? '100%',
-                textAnchor: 'end',
+                startOffset: opts.startOffset,
+                textAnchor: 'start',
             };
         }
         return {
-            startOffset: opts.startOffset ?? undefined,
+            startOffset: '50%',
+            textAnchor: 'middle',
         };
     });
     const radialPositionProps = $derived.by(() => {
@@ -216,7 +220,7 @@ export function createArcTextProps(props, opts = {}, position) {
             x: x,
             y: y,
             textAnchor,
-            'dominant-baseline': 'middle',
+            dominantBaseline: 'middle',
         };
     });
     const current = $derived.by(() => {
@@ -224,21 +228,21 @@ export function createArcTextProps(props, opts = {}, position) {
             return {
                 path: innerPath.current,
                 ...sharedProps,
-                'dominant-baseline': innerDominantBaseline,
+                dominantBaseline: innerDominantBaseline,
             };
         }
         else if (position === 'outer') {
             return {
                 path: outerPath.current,
                 ...sharedProps,
-                'dominant-baseline': outerDominantBaseline,
+                dominantBaseline: outerDominantBaseline,
             };
         }
         else if (position === 'middle') {
             return {
                 path: middlePath.current,
                 ...sharedProps,
-                'dominant-baseline': 'middle',
+                dominantBaseline: 'middle',
             };
         }
         else if (position === 'centroid') {

package/dist/utils/array.d.ts

@@ -1,5 +1,6 @@
 import type { Numeric } from 'd3-array';
 import { extent as d3extent } from 'd3-array';
+import { type Accessor } from './common.js';
 /**
  * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
  */
@@ -11,3 +12,13 @@ export declare function extent<T extends Numeric>(iterable: Parameters<typeof d3
  * of making a set
  */
 export declare function arraysEqual(arr1: unknown[], arr2: unknown[]): boolean;
+/**
+ * Add `lanes` property to each element in the data array support densely packing.
+ * This is useful for visualizing overlapping events in a timeline / Gantt chart.
+ */
+export declare function applyLanes<T extends Record<string, any>>(data: T[], options?: {
+    start: Accessor<T>;
+    end: Accessor<T>;
+}): (T & {
+    lane: number;
+})[];

package/dist/utils/array.js

@@ -1,4 +1,5 @@
 import { extent as d3extent } from 'd3-array';
+import { accessor } from './common.js';
 /**
  * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
  */
@@ -18,3 +19,25 @@ export function arraysEqual(arr1, arr2) {
         return arr2.includes(k);
     });
 }
+/**
+ * Add `lanes` property to each element in the data array support densely packing.
+ * This is useful for visualizing overlapping events in a timeline / Gantt chart.
+ */
+export function applyLanes(data, options = {
+    start: 'start',
+    end: 'end',
+}) {
+    const result = [];
+    let stack = [];
+    const startAccessor = accessor(options.start);
+    const endAccessor = accessor(options.end);
+    for (const d of data) {
+        let lane = stack.findIndex((s) => endAccessor(s) <= startAccessor(d) && startAccessor(s) < startAccessor(d));
+        if (lane === -1) {
+            lane = stack.length;
+        }
+        result.push({ ...d, lane });
+        stack[lane] = d;
+    }
+    return result;
+}

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

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