@grafloria/element 0.3.20 → 0.3.22

package/src/libs/renderer/src/services/animation-sequencer.js

@@ -1,379 +0,0 @@
-"use strict";
-/**
- * Animation Sequencer
- *
- * Phase 1.1: Chains multiple animations together
- * Allows creating sequences of animations with delays, callbacks, and parallel execution
- *
- * @example
- * ```typescript
- * const sequencer = new AnimationSequencer();
- *
- * // Create a sequence
- * sequencer
- *   .add(element1, 'fade-in', { duration: '500ms' })
- *   .delay(200)
- *   .add(element2, 'slide-in', { duration: '300ms' })
- *   .parallel([
- *     { element: element3, animation: 'rotate', options: { duration: '1s' } },
- *     { element: element4, animation: 'scale', options: { duration: '1s' } }
- *   ])
- *   .onComplete(() => console.log('Sequence complete!'))
- *   .play();
- * ```
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnimationSequencer = void 0;
-exports.createSequencer = createSequencer;
-exports.fadeInSequence = fadeInSequence;
-exports.staggerSequence = staggerSequence;
-const tslib_1 = require("tslib");
-/**
- * Animation Sequencer
- *
- * Manages sequences of animations
- */
-class AnimationSequencer {
-    constructor(animationRegistry, lifecycleManager) {
-        this.steps = [];
-        this.currentStepIndex = 0;
-        this.state = 'idle';
-        this.completionCallbacks = [];
-        this.animationRegistry = animationRegistry;
-        this.lifecycleManager = lifecycleManager;
-    }
-    /**
-     * Add a single animation step
-     */
-    add(element, animationName, options) {
-        this.steps.push({
-            type: 'single',
-            element,
-            animationName,
-            options,
-        });
-        return this;
-    }
-    /**
-     * Add multiple animations to run in parallel
-     */
-    parallel(animations) {
-        this.steps.push({
-            type: 'parallel',
-            animations,
-        });
-        return this;
-    }
-    /**
-     * Add a delay
-     */
-    delay(duration) {
-        this.steps.push({
-            type: 'delay',
-            duration,
-        });
-        return this;
-    }
-    /**
-     * Add a callback step
-     */
-    then(callback) {
-        this.steps.push({
-            type: 'callback',
-            callback,
-        });
-        return this;
-    }
-    /**
-     * Add completion callback
-     */
-    onComplete(callback) {
-        this.completionCallbacks.push(callback);
-        return this;
-    }
-    /**
-     * Play the sequence
-     */
-    play() {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            if (this.state === 'playing') {
-                console.warn('Sequence is already playing');
-                return;
-            }
-            this.state = 'playing';
-            this.currentStepIndex = 0;
-            try {
-                yield this.executeSteps();
-                this.state = 'completed';
-                this.notifyCompletion();
-            }
-            catch (error) {
-                console.error('Error playing animation sequence:', error);
-                this.state = 'cancelled';
-                throw error;
-            }
-        });
-    }
-    /**
-     * Execute all steps in the sequence
-     */
-    executeSteps() {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            for (let i = 0; i < this.steps.length; i++) {
-                if (this.state !== 'playing') {
-                    break;
-                }
-                this.currentStepIndex = i;
-                yield this.executeStep(this.steps[i]);
-            }
-        });
-    }
-    /**
-     * Execute a single step
-     */
-    executeStep(step) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            switch (step.type) {
-                case 'single':
-                    yield this.executeSingleAnimation(step);
-                    break;
-                case 'parallel':
-                    yield this.executeParallelAnimations(step);
-                    break;
-                case 'delay':
-                    yield this.executeDelay(step);
-                    break;
-                case 'callback':
-                    yield this.executeCallback(step);
-                    break;
-            }
-        });
-    }
-    /**
-     * Execute a single animation
-     */
-    executeSingleAnimation(step) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            const { element, animationName, options } = step;
-            // Apply animation
-            this.applyAnimation(element, animationName, options);
-            // Wait for animation to complete
-            if (this.lifecycleManager) {
-                yield this.lifecycleManager.waitFor(animationName, element);
-            }
-            else {
-                // Fallback: estimate duration
-                const duration = this.parseDuration((options === null || options === void 0 ? void 0 : options.duration) || '1s');
-                yield this.sleep(duration);
-            }
-        });
-    }
-    /**
-     * Execute parallel animations
-     */
-    executeParallelAnimations(step) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            const promises = step.animations.map((anim) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                var _a;
-                this.applyAnimation(anim.element, anim.animationName, anim.options);
-                if (this.lifecycleManager) {
-                    yield this.lifecycleManager.waitFor(anim.animationName, anim.element);
-                }
-                else {
-                    const duration = this.parseDuration(((_a = anim.options) === null || _a === void 0 ? void 0 : _a.duration) || '1s');
-                    yield this.sleep(duration);
-                }
-            }));
-            yield Promise.all(promises);
-        });
-    }
-    /**
-     * Execute delay
-     */
-    executeDelay(step) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            yield this.sleep(step.duration);
-        });
-    }
-    /**
-     * Execute callback
-     */
-    executeCallback(step) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            const result = step.callback();
-            // If callback returns a promise, await it
-            if (result && typeof result.then === 'function') {
-                yield result;
-            }
-        });
-    }
-    /**
-     * Apply animation to an element
-     */
-    applyAnimation(element, animationName, options) {
-        const parts = [animationName];
-        if (options === null || options === void 0 ? void 0 : options.duration)
-            parts.push(options.duration);
-        if (options === null || options === void 0 ? void 0 : options.timingFunction)
-            parts.push(options.timingFunction);
-        if (options === null || options === void 0 ? void 0 : options.delay)
-            parts.push(options.delay);
-        if (options === null || options === void 0 ? void 0 : options.iterationCount)
-            parts.push(options.iterationCount);
-        if (options === null || options === void 0 ? void 0 : options.direction)
-            parts.push(options.direction);
-        if (options === null || options === void 0 ? void 0 : options.fillMode)
-            parts.push(options.fillMode);
-        element.style.animation = parts.join(' ');
-        // Track element if lifecycle manager is available
-        if (this.lifecycleManager) {
-            this.lifecycleManager.trackElement(element);
-        }
-    }
-    /**
-     * Parse duration string to milliseconds
-     */
-    parseDuration(duration) {
-        const match = duration.match(/^([\d.]+)(ms|s)$/);
-        if (!match) {
-            console.warn(`Invalid duration: ${duration}, defaulting to 1s`);
-            return 1000;
-        }
-        const value = parseFloat(match[1]);
-        const unit = match[2];
-        return unit === 's' ? value * 1000 : value;
-    }
-    /**
-     * Sleep for specified milliseconds
-     */
-    sleep(ms) {
-        return new Promise(resolve => setTimeout(resolve, ms));
-    }
-    /**
-     * Pause the sequence
-     */
-    pause() {
-        if (this.state === 'playing') {
-            this.state = 'paused';
-        }
-    }
-    /**
-     * Resume the sequence
-     */
-    resume() {
-        if (this.state === 'paused') {
-            this.state = 'playing';
-        }
-    }
-    /**
-     * Cancel the sequence
-     */
-    cancel() {
-        this.state = 'cancelled';
-    }
-    /**
-     * Reset the sequence
-     */
-    reset() {
-        this.state = 'idle';
-        this.currentStepIndex = 0;
-    }
-    /**
-     * Get current state
-     */
-    getState() {
-        return this.state;
-    }
-    /**
-     * Get current step index
-     */
-    getCurrentStepIndex() {
-        return this.currentStepIndex;
-    }
-    /**
-     * Get total number of steps
-     */
-    getTotalSteps() {
-        return this.steps.length;
-    }
-    /**
-     * Get all steps
-     */
-    getSteps() {
-        return [...this.steps];
-    }
-    /**
-     * Clear all steps
-     */
-    clear() {
-        this.steps = [];
-        this.reset();
-    }
-    /**
-     * Notify completion callbacks
-     */
-    notifyCompletion() {
-        this.completionCallbacks.forEach(callback => {
-            try {
-                callback();
-            }
-            catch (error) {
-                console.error('Error in completion callback:', error);
-            }
-        });
-    }
-    /**
-     * Clone this sequencer (creates a new instance with the same steps)
-     */
-    clone() {
-        const clone = new AnimationSequencer(this.animationRegistry, this.lifecycleManager);
-        clone.steps = [...this.steps];
-        clone.completionCallbacks = [...this.completionCallbacks];
-        return clone;
-    }
-    /**
-     * Export sequence as JSON
-     */
-    exportToJSON() {
-        // Note: Cannot serialize element references and callbacks
-        // This is mainly for debugging/visualization
-        return JSON.stringify({
-            totalSteps: this.steps.length,
-            steps: this.steps.map((step, index) => (Object.assign({ index, type: step.type }, (step.type === 'delay' && { duration: step.duration })))),
-        }, null, 2);
-    }
-}
-exports.AnimationSequencer = AnimationSequencer;
-/**
- * Create a new animation sequencer
- */
-function createSequencer(animationRegistry, lifecycleManager) {
-    return new AnimationSequencer(animationRegistry, lifecycleManager);
-}
-/**
- * Helper: Create a simple fade in sequence
- */
-function fadeInSequence(elements, delay = 100) {
-    const sequencer = new AnimationSequencer();
-    elements.forEach((element, index) => {
-        if (index > 0) {
-            sequencer.delay(delay);
-        }
-        sequencer.add(element, 'fade-in', { duration: '300ms', fillMode: 'forwards' });
-    });
-    return sequencer;
-}
-/**
- * Helper: Create a stagger animation sequence
- */
-function staggerSequence(elements, animationName, staggerDelay = 100, options) {
-    const sequencer = new AnimationSequencer();
-    elements.forEach((element, index) => {
-        if (index > 0) {
-            sequencer.delay(staggerDelay);
-        }
-        sequencer.add(element, animationName, options);
-    });
-    return sequencer;
-}
-//# sourceMappingURL=animation-sequencer.js.map

package/src/libs/renderer/src/services/animation.service.d.ts

@@ -1,182 +0,0 @@
-/**
- * Animation Service
- *
- * Phase 1: Manages diagram element animations
- * - Configuration management
- * - Reduced motion detection
- * - Animation class generation
- * - Global animation control
- *
- * @example
- * ```typescript
- * const animationService = new AnimationService();
- *
- * // Get animation classes for a link
- * const linkClasses = animationService.getEdgeAnimationClass(link);
- *
- * // Get animation classes for a node
- * const nodeClasses = animationService.getNodeAnimationClass(node);
- *
- * // Disable all animations
- * animationService.setEnabled(false);
- *
- * // Configure animation speed
- * animationService.updateConfig({ animationSpeed: 0.5 });
- * ```
- */
-import type { LinkModel, NodeModel } from '@grafloria/engine';
-export interface AnimationConfig {
-    /** Enable/disable all animations globally */
-    enabled: boolean;
-    /** Respect user's prefers-reduced-motion system setting */
-    reducedMotion: boolean;
-    /** Default animation type for edges */
-    defaultEdgeAnimation: 'marching-ants' | 'flow' | 'pulse' | 'none';
-    /** Default border animation type for nodes */
-    defaultNodeBorderAnimation: 'gradient' | 'pulse' | 'breathe' | 'shimmer' | 'none';
-    /** Global speed multiplier (0.5 = half speed, 2 = double speed) */
-    animationSpeed: number;
-    /** Auto-detect and respect system motion preferences */
-    autoDetectMotionPreference: boolean;
-    /** Performance mode (simplifies animations) */
-    performanceMode: boolean;
-    /** Battery saving mode (disables expensive animations) */
-    batterySavingMode: boolean;
-    /**
-     * Auto-engage {@link batterySavingMode} from the (experimental) Battery
-     * Status API when the device is below 20% and not charging. Default true —
-     * but it is a HOST decision: with no off switch, a laptop dipping under 20%
-     * silently killed every edge animation (and turned the demo gallery's
-     * animation gates red on an unplugged machine — that is how this flag was
-     * born). Set false to never auto-toggle; an explicit `batterySavingMode`
-     * you set yourself is always honoured either way.
-     */
-    respectBatteryStatus: boolean;
-    /** Lazy load CSS (only inject when first animation is used) */
-    lazyLoadCSS: boolean;
-}
-/**
- * AnimationService - Manages all diagram animations
- *
- * Features:
- * - Detects and respects prefers-reduced-motion
- * - Provides global animation enable/disable
- * - Generates animation CSS classes for nodes and links
- * - Supports animation speed control
- * - Performance and battery saving modes
- */
-export declare class AnimationService {
-    private config;
-    private motionMediaQuery;
-    private batteryManager;
-    private listeners;
-    private cssInjected;
-    private styleElement;
-    constructor(config?: Partial<AnimationConfig>);
-    /**
-     * Detect user's motion preference using matchMedia
-     */
-    private detectReducedMotionPreference;
-    /**
-     * Detect battery status and enable battery saving mode when low
-     * (Experimental Battery Status API - may not be available in all browsers)
-     */
-    private detectBatteryStatus;
-    /**
-     * Enable or disable all animations globally
-     */
-    setEnabled(enabled: boolean): void;
-    /**
-     * Get current configuration
-     */
-    getConfig(): Readonly<AnimationConfig>;
-    /**
-     * Update configuration (partial update)
-     */
-    updateConfig(config: Partial<AnimationConfig>): void;
-    /**
-     * Check if animations should be disabled
-     * (due to reduced motion, disabled state, or battery saving)
-     */
-    private shouldDisableAnimations;
-    /**
-     * Get animation CSS classes for an edge (link)
-     *
-     * @param link - LinkModel to generate classes for
-     * @returns Space-separated CSS class string
-     */
-    getEdgeAnimationClass(link: LinkModel): string;
-    /**
-     * Get animation CSS classes for a node
-     *
-     * @param node - NodeModel to generate classes for
-     * @param useSVGVariant - Whether to use SVG-compatible animations (for pure SVG nodes without foreignObject)
-     * @returns Space-separated CSS class string
-     */
-    getNodeAnimationClass(node: NodeModel, useSVGVariant?: boolean): string;
-    /**
-     * Calculate animation duration with speed multiplier applied
-     *
-     * @param baseDuration - Base duration in seconds
-     * @returns Adjusted duration in seconds
-     */
-    getAnimationDuration(baseDuration: number): number;
-    /**
-     * Update all animations in the DOM
-     * Applies global CSS classes to body element
-     */
-    private updateAllAnimations;
-    /**
-     * Pause all animations (for debugging or screenshots)
-     */
-    pauseAllAnimations(): void;
-    /**
-     * Resume all animations
-     */
-    resumeAllAnimations(): void;
-    /**
-     * Add listener for configuration changes
-     *
-     * @param listener - Callback function
-     * @returns Unsubscribe function
-     */
-    onConfigChange(listener: (config: AnimationConfig) => void): () => void;
-    /**
-     * Notify all listeners of configuration changes
-     */
-    private notifyListeners;
-    /**
-     * Save configuration to localStorage
-     */
-    private saveConfig;
-    /**
-     * Load configuration from localStorage
-     */
-    private loadConfig;
-    /**
-     * Reset configuration to defaults
-     */
-    resetConfig(): void;
-    /**
-     * Phase 1.1: Inject animation CSS into the document
-     * This is called automatically when lazyLoadCSS is enabled and first animation is used
-     */
-    injectCSS(): void;
-    /**
-     * Phase 1.1: Remove injected animation CSS from the document
-     */
-    removeCSS(): void;
-    /**
-     * Phase 1.1: Check if CSS has been injected
-     */
-    isCSSInjected(): boolean;
-    /**
-     * Phase 1.1: Get animation CSS content
-     * This returns the complete CSS for all animations
-     */
-    private getAnimationCSS;
-    /**
-     * Cleanup: Remove event listeners and injected CSS
-     */
-    destroy(): void;
-}