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

package/dist/states/transform.svelte.js

@@ -1,31 +1,406 @@
+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 function createDefaultTransformContext() {
-    let defaultTranslate = $state(DEFAULT_TRANSLATE);
-    let defaultScale = $state(DEFAULT_SCALE);
-    const defaultContext = {
+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)
+            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',
-        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;
+        initialTranslate: DEFAULT_TRANSLATE,
+        initialScale: DEFAULT_SCALE,
+    });
 }

package/dist/utils/canvas.d.ts

@@ -1,8 +1,10 @@
 import type { ClassValue } from 'svelte/elements';
 import type { PatternShape } from '../components/Pattern.svelte';
+/** @deprecated - use `isTransparentFill` instead */
 export declare const DEFAULT_FILL = "rgb(0, 0, 0)";
-type StyleOptions = Partial<Omit<CSSStyleDeclaration, 'fillOpacity' | 'strokeWidth' | 'opacity'> & {
+type StyleOptions = Partial<Omit<CSSStyleDeclaration, 'fillOpacity' | 'strokeOpacity' | 'strokeWidth' | 'opacity'> & {
     fillOpacity?: number | string;
+    strokeOpacity?: number | string;
     strokeWidth?: number | string;
     opacity?: number | string;
 }>;

package/dist/utils/canvas.js

@@ -1,6 +1,17 @@
 import memoize from 'memoize';
 import { cls } from '@layerstack/tailwind';
+/** @deprecated - use `isTransparentFill` instead */
 export const DEFAULT_FILL = 'rgb(0, 0, 0)';
+/**
+ * Returns true if the fill color is effectively invisible (none, transparent, or alpha=0).
+ * Used to skip canvas fill rendering for invisible fills.
+ */
+function isTransparentFill(fill) {
+    if (!fill || fill === 'none' || fill === 'transparent')
+        return true;
+    // Match rgba(..., 0) - alpha channel is 0 (fully transparent)
+    return /rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*0\s*\)/.test(fill);
+}
 const CANVAS_STYLES_ELEMENT_ID = '__layerchart_canvas_styles_id';
 /**
  * Parse an inline CSS style string into a StyleOptions object.
@@ -30,6 +41,7 @@ const supportedStyles = [
     'fill',
     'fillOpacity',
     'stroke',
+    'strokeOpacity',
     'strokeWidth',
     'strokeDasharray',
     'opacity',
@@ -130,16 +142,19 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
     if (applyText) {
         // Text properties
         ctx.font = `${resolvedStyles.fontWeight} ${resolvedStyles.fontSize} ${resolvedStyles.fontFamily}`; // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
-        // TODO: Hack to handle `textAnchor` with canvas.  Try to find a better approach
         if (resolvedStyles.textAnchor === 'middle') {
             ctx.textAlign = 'center';
         }
         else if (resolvedStyles.textAnchor === 'end') {
             ctx.textAlign = 'right';
         }
-        else {
-            ctx.textAlign = resolvedStyles.textAlign; // TODO: Handle/map `justify` and `match-parent`?
+        else if (resolvedStyles.textAnchor === 'start') {
+            ctx.textAlign = 'left';
+        }
+        else if (resolvedStyles.textAlign) {
+            ctx.textAlign = resolvedStyles.textAlign;
         }
+        // If textAnchor/textAlign are unset, ctx.textAlign retains its pre-set value (e.g. from Text.svelte)
         // TODO: Handle `textBaseline` / `verticalAnchor` (Text)
         // ctx.textBaseline = 'top';
         // ctx.textBaseline = 'middle';
@@ -166,7 +181,7 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
                     !styleOptions.styles?.fill?.includes('var'))
                 ? styleOptions.styles.fill
                 : resolvedStyles?.fill;
-            if (fill && !['none', DEFAULT_FILL].includes(fill)) {
+            if (fill && !isTransparentFill(fill)) {
                 const currentGlobalAlpha = ctx.globalAlpha;
                 const fillOpacity = Number(resolvedStyles?.fillOpacity);
                 const opacity = Number(resolvedStyles?.opacity);
@@ -184,12 +199,20 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
                 ? styleOptions.styles?.stroke
                 : resolvedStyles?.stroke;
             if (stroke && !['none'].includes(stroke)) {
+                const currentGlobalAlpha = ctx.globalAlpha;
+                const strokeOpacity = Number(resolvedStyles?.strokeOpacity);
+                const opacity = Number(resolvedStyles?.opacity);
+                if (!isNaN(strokeOpacity) && strokeOpacity !== 1) {
+                    ctx.globalAlpha = strokeOpacity * (isNaN(opacity) ? 1 : opacity);
+                }
                 ctx.lineWidth =
                     typeof resolvedStyles?.strokeWidth === 'string'
                         ? Number(resolvedStyles?.strokeWidth?.replace('px', ''))
                         : (resolvedStyles?.strokeWidth ?? 1);
                 ctx.strokeStyle = stroke;
                 render.stroke(ctx);
+                // Restore in case it was modified by `strokeOpacity`
+                ctx.globalAlpha = currentGlobalAlpha;
             }
         }
     }

package/dist/utils/canvas.svelte.test.d.ts

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