@grafloria/element 0.3.18 → 0.3.19

package/src/libs/renderer/src/services/animation-performance.service.js

@@ -0,0 +1,371 @@
+"use strict";
+/**
+ * Animation Performance Service
+ *
+ * Phase 1.1: Performance monitoring and metrics for animations
+ * Tracks FPS, animated element count, memory usage, and provides performance insights
+ *
+ * @example
+ * ```typescript
+ * const perfService = new AnimationPerformanceService();
+ *
+ * // Start monitoring
+ * perfService.startMonitoring();
+ *
+ * // Get current metrics
+ * const metrics = perfService.getMetrics();
+ * console.log(`FPS: ${metrics.fps}, Animated elements: ${metrics.animatedElementCount}`);
+ *
+ * // Subscribe to metrics updates
+ * perfService.onMetricsUpdate(metrics => {
+ *   if (metrics.fps < 30) {
+ *     console.warn('Low FPS detected!');
+ *   }
+ * });
+ * ```
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimationPerformanceService = exports.PerformanceWarning = void 0;
+/**
+ * Performance warning types
+ */
+var PerformanceWarning;
+(function (PerformanceWarning) {
+    PerformanceWarning["LOW_FPS"] = "LOW_FPS";
+    PerformanceWarning["HIGH_ELEMENT_COUNT"] = "HIGH_ELEMENT_COUNT";
+    PerformanceWarning["FRAME_DROPS"] = "FRAME_DROPS";
+    PerformanceWarning["HIGH_MEMORY"] = "HIGH_MEMORY";
+    PerformanceWarning["LONG_FRAMES"] = "LONG_FRAMES";
+})(PerformanceWarning || (exports.PerformanceWarning = PerformanceWarning = {}));
+/**
+ * Animation Performance Service
+ *
+ * Monitors animation performance and provides metrics
+ */
+class AnimationPerformanceService {
+    constructor(thresholds) {
+        this.monitoring = false;
+        this.fpsHistory = [];
+        this.frameTimestamps = [];
+        this.lastFrameTime = 0;
+        this.frameCount = 0;
+        this.startTime = 0;
+        this.rafId = null;
+        this.thresholds = {
+            minFps: 30,
+            maxAnimatedElements: 100,
+            maxFrameDrops: 10,
+            maxMemoryMB: 100,
+            maxFrameTime: 50,
+        };
+        this.metricsListeners = new Set();
+        this.warningListeners = new Set();
+        /**
+         * Measure a single frame
+         */
+        this.measureFrame = () => {
+            if (!this.monitoring) {
+                return;
+            }
+            const now = performance.now();
+            const deltaTime = now - this.lastFrameTime;
+            // Calculate FPS
+            const fps = deltaTime > 0 ? 1000 / deltaTime : 0;
+            // Track frame timing
+            this.fpsHistory.push(fps);
+            this.frameTimestamps.push(now);
+            this.frameCount++;
+            // Keep only last 60 frames (1 second at 60fps)
+            if (this.fpsHistory.length > 60) {
+                this.fpsHistory.shift();
+                this.frameTimestamps.shift();
+            }
+            // Update metrics
+            this.updateMetrics(fps, deltaTime);
+            // Check for warnings
+            this.checkPerformanceWarnings();
+            this.lastFrameTime = now;
+            // Schedule next frame
+            this.rafId = requestAnimationFrame(this.measureFrame);
+        };
+        if (thresholds) {
+            this.thresholds = Object.assign(Object.assign({}, this.thresholds), thresholds);
+        }
+        this.metrics = this.createEmptyMetrics();
+    }
+    /**
+     * Start performance monitoring
+     */
+    startMonitoring() {
+        if (this.monitoring) {
+            return;
+        }
+        this.monitoring = true;
+        this.startTime = performance.now();
+        this.frameCount = 0;
+        this.fpsHistory = [];
+        this.frameTimestamps = [];
+        this.lastFrameTime = performance.now();
+        this.measureFrame();
+    }
+    /**
+     * Stop performance monitoring
+     */
+    stopMonitoring() {
+        if (!this.monitoring) {
+            return;
+        }
+        this.monitoring = false;
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+    }
+    /**
+     * Update metrics
+     */
+    updateMetrics(currentFps, frameTime) {
+        const monitoringDuration = (performance.now() - this.startTime) / 1000;
+        // Calculate statistics
+        const averageFps = this.fpsHistory.length > 0
+            ? this.fpsHistory.reduce((sum, fps) => sum + fps, 0) / this.fpsHistory.length
+            : 0;
+        const minFps = this.fpsHistory.length > 0
+            ? Math.min(...this.fpsHistory)
+            : 0;
+        const maxFps = this.fpsHistory.length > 0
+            ? Math.max(...this.fpsHistory)
+            : 0;
+        // Count frame drops (fps < threshold)
+        const frameDrops = this.fpsHistory.filter(fps => fps < this.thresholds.minFps).length;
+        // Count animated elements
+        const animatedElements = this.countAnimatedElements();
+        this.metrics = {
+            fps: currentFps,
+            averageFps,
+            minFps,
+            maxFps,
+            animatedElementCount: animatedElements.total,
+            animatedNodeCount: animatedElements.nodes,
+            animatedEdgeCount: animatedElements.edges,
+            frameDrops,
+            memoryUsage: this.getMemoryUsage(),
+            cpuUsage: this.estimateCPUUsage(frameTime),
+            timestamp: Date.now(),
+            monitoringDuration,
+        };
+        // Notify listeners
+        this.notifyMetricsListeners();
+    }
+    /**
+     * Count animated elements in the DOM
+     */
+    countAnimatedElements() {
+        if (typeof document === 'undefined') {
+            return { total: 0, nodes: 0, edges: 0 };
+        }
+        // Count elements with animation classes
+        const animatedNodes = document.querySelectorAll('[class*="node-border-"], [class*="node-status-"]').length;
+        const animatedEdges = document.querySelectorAll('[class*="link-animated-"]').length;
+        return {
+            total: animatedNodes + animatedEdges,
+            nodes: animatedNodes,
+            edges: animatedEdges,
+        };
+    }
+    /**
+     * Get memory usage (if Performance.memory is available)
+     */
+    getMemoryUsage() {
+        if (typeof performance === 'undefined' || !performance.memory) {
+            return undefined;
+        }
+        try {
+            const memory = performance.memory;
+            // Return used JS heap size in MB
+            return memory.usedJSHeapSize / (1024 * 1024);
+        }
+        catch (_a) {
+            return undefined;
+        }
+    }
+    /**
+     * Estimate CPU usage based on frame time
+     */
+    estimateCPUUsage(frameTime) {
+        // Rough estimate: frame time vs target (16.67ms for 60fps)
+        const targetFrameTime = 1000 / 60;
+        const usage = (frameTime / targetFrameTime) * 100;
+        return Math.min(100, Math.max(0, usage));
+    }
+    /**
+     * Check for performance warnings
+     */
+    checkPerformanceWarnings() {
+        // Low FPS warning
+        if (this.metrics.fps < this.thresholds.minFps && this.metrics.fps > 0) {
+            this.emitWarning({
+                type: PerformanceWarning.LOW_FPS,
+                message: `Low FPS detected: ${this.metrics.fps.toFixed(1)} fps (threshold: ${this.thresholds.minFps})`,
+                metrics: Object.assign({}, this.metrics),
+                timestamp: Date.now(),
+            });
+        }
+        // Too many animated elements
+        if (this.metrics.animatedElementCount > this.thresholds.maxAnimatedElements) {
+            this.emitWarning({
+                type: PerformanceWarning.HIGH_ELEMENT_COUNT,
+                message: `Too many animated elements: ${this.metrics.animatedElementCount} (threshold: ${this.thresholds.maxAnimatedElements})`,
+                metrics: Object.assign({}, this.metrics),
+                timestamp: Date.now(),
+            });
+        }
+        // Frame drops
+        if (this.metrics.frameDrops > this.thresholds.maxFrameDrops) {
+            this.emitWarning({
+                type: PerformanceWarning.FRAME_DROPS,
+                message: `Frequent frame drops detected: ${this.metrics.frameDrops} drops`,
+                metrics: Object.assign({}, this.metrics),
+                timestamp: Date.now(),
+            });
+        }
+        // High memory usage
+        if (this.metrics.memoryUsage && this.metrics.memoryUsage > this.thresholds.maxMemoryMB) {
+            this.emitWarning({
+                type: PerformanceWarning.HIGH_MEMORY,
+                message: `High memory usage: ${this.metrics.memoryUsage.toFixed(1)} MB (threshold: ${this.thresholds.maxMemoryMB} MB)`,
+                metrics: Object.assign({}, this.metrics),
+                timestamp: Date.now(),
+            });
+        }
+    }
+    /**
+     * Get current metrics
+     */
+    getMetrics() {
+        return Object.assign({}, this.metrics);
+    }
+    /**
+     * Get FPS history
+     */
+    getFPSHistory() {
+        return [...this.fpsHistory];
+    }
+    /**
+     * Update performance thresholds
+     */
+    updateThresholds(thresholds) {
+        this.thresholds = Object.assign(Object.assign({}, this.thresholds), thresholds);
+    }
+    /**
+     * Get current thresholds
+     */
+    getThresholds() {
+        return Object.assign({}, this.thresholds);
+    }
+    /**
+     * Subscribe to metrics updates
+     */
+    onMetricsUpdate(listener) {
+        this.metricsListeners.add(listener);
+        return () => {
+            this.metricsListeners.delete(listener);
+        };
+    }
+    /**
+     * Subscribe to performance warnings
+     */
+    onPerformanceWarning(listener) {
+        this.warningListeners.add(listener);
+        return () => {
+            this.warningListeners.delete(listener);
+        };
+    }
+    /**
+     * Notify metrics listeners
+     */
+    notifyMetricsListeners() {
+        const metrics = Object.assign({}, this.metrics);
+        this.metricsListeners.forEach(listener => {
+            try {
+                listener(metrics);
+            }
+            catch (error) {
+                console.error('Error in metrics listener:', error);
+            }
+        });
+    }
+    /**
+     * Emit performance warning
+     */
+    emitWarning(warning) {
+        this.warningListeners.forEach(listener => {
+            try {
+                listener(warning);
+            }
+            catch (error) {
+                console.error('Error in warning listener:', error);
+            }
+        });
+    }
+    /**
+     * Reset metrics
+     */
+    reset() {
+        this.metrics = this.createEmptyMetrics();
+        this.fpsHistory = [];
+        this.frameTimestamps = [];
+        this.frameCount = 0;
+        this.startTime = performance.now();
+    }
+    /**
+     * Create empty metrics object
+     */
+    createEmptyMetrics() {
+        return {
+            fps: 0,
+            averageFps: 0,
+            minFps: 0,
+            maxFps: 0,
+            animatedElementCount: 0,
+            animatedNodeCount: 0,
+            animatedEdgeCount: 0,
+            frameDrops: 0,
+            memoryUsage: undefined,
+            cpuUsage: undefined,
+            timestamp: Date.now(),
+            monitoringDuration: 0,
+        };
+    }
+    /**
+     * Check if monitoring is active
+     */
+    isMonitoring() {
+        return this.monitoring;
+    }
+    /**
+     * Get performance summary
+     */
+    getSummary() {
+        const m = this.metrics;
+        return `
+Animation Performance Summary:
+- FPS: ${m.fps.toFixed(1)} (avg: ${m.averageFps.toFixed(1)}, min: ${m.minFps.toFixed(1)}, max: ${m.maxFps.toFixed(1)})
+- Animated Elements: ${m.animatedElementCount} (${m.animatedNodeCount} nodes, ${m.animatedEdgeCount} edges)
+- Frame Drops: ${m.frameDrops}
+- Memory: ${m.memoryUsage ? m.memoryUsage.toFixed(1) + ' MB' : 'N/A'}
+- CPU Usage: ${m.cpuUsage !== undefined ? m.cpuUsage.toFixed(1) + '%' : 'N/A'}
+- Monitoring Duration: ${m.monitoringDuration.toFixed(1)}s
+`.trim();
+    }
+    /**
+     * Cleanup
+     */
+    destroy() {
+        this.stopMonitoring();
+        this.metricsListeners.clear();
+        this.warningListeners.clear();
+    }
+}
+exports.AnimationPerformanceService = AnimationPerformanceService;
+//# sourceMappingURL=animation-performance.service.js.map

package/src/libs/renderer/src/services/animation-performance.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation-performance.service.js","sourceRoot":"","sources":["../../../../../../renderer/src/services/animation-performance.service.ts"],"names":[],"mappings":"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"}

package/src/libs/renderer/src/services/animation-sequencer.d.ts

@@ -0,0 +1,226 @@
+/**
+ * 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();
+ * ```
+ */
+import { CustomAnimationRegistry } from './custom-animation-registry';
+import { AnimationLifecycleManager } from './animation-lifecycle';
+/**
+ * Animation step options
+ */
+export interface AnimationStepOptions {
+    /** Animation duration */
+    duration?: string;
+    /** Timing function */
+    timingFunction?: string;
+    /** Delay before starting */
+    delay?: string;
+    /** Iteration count */
+    iterationCount?: string;
+    /** Direction */
+    direction?: string;
+    /** Fill mode */
+    fillMode?: string;
+}
+/**
+ * Animation step types
+ */
+export type AnimationStepType = 'single' | 'parallel' | 'delay' | 'callback';
+/**
+ * Single animation step
+ */
+export interface SingleAnimationStep {
+    type: 'single';
+    element: HTMLElement;
+    animationName: string;
+    options?: AnimationStepOptions;
+}
+/**
+ * Parallel animation step
+ */
+export interface ParallelAnimationStep {
+    type: 'parallel';
+    animations: Array<{
+        element: HTMLElement;
+        animationName: string;
+        options?: AnimationStepOptions;
+    }>;
+}
+/**
+ * Delay step
+ */
+export interface DelayStep {
+    type: 'delay';
+    duration: number;
+}
+/**
+ * Callback step
+ */
+export interface CallbackStep {
+    type: 'callback';
+    callback: () => void | Promise<void>;
+}
+/**
+ * Animation step union type
+ */
+export type AnimationStep = SingleAnimationStep | ParallelAnimationStep | DelayStep | CallbackStep;
+/**
+ * Sequence playback state
+ */
+export type SequenceState = 'idle' | 'playing' | 'paused' | 'completed' | 'cancelled';
+/**
+ * Animation Sequencer
+ *
+ * Manages sequences of animations
+ */
+export declare class AnimationSequencer {
+    private steps;
+    private currentStepIndex;
+    private state;
+    private completionCallbacks;
+    private animationRegistry?;
+    private lifecycleManager?;
+    constructor(animationRegistry?: CustomAnimationRegistry, lifecycleManager?: AnimationLifecycleManager);
+    /**
+     * Add a single animation step
+     */
+    add(element: HTMLElement, animationName: string, options?: AnimationStepOptions): this;
+    /**
+     * Add multiple animations to run in parallel
+     */
+    parallel(animations: Array<{
+        element: HTMLElement;
+        animationName: string;
+        options?: AnimationStepOptions;
+    }>): this;
+    /**
+     * Add a delay
+     */
+    delay(duration: number): this;
+    /**
+     * Add a callback step
+     */
+    then(callback: () => void | Promise<void>): this;
+    /**
+     * Add completion callback
+     */
+    onComplete(callback: () => void): this;
+    /**
+     * Play the sequence
+     */
+    play(): Promise<void>;
+    /**
+     * Execute all steps in the sequence
+     */
+    private executeSteps;
+    /**
+     * Execute a single step
+     */
+    private executeStep;
+    /**
+     * Execute a single animation
+     */
+    private executeSingleAnimation;
+    /**
+     * Execute parallel animations
+     */
+    private executeParallelAnimations;
+    /**
+     * Execute delay
+     */
+    private executeDelay;
+    /**
+     * Execute callback
+     */
+    private executeCallback;
+    /**
+     * Apply animation to an element
+     */
+    private applyAnimation;
+    /**
+     * Parse duration string to milliseconds
+     */
+    private parseDuration;
+    /**
+     * Sleep for specified milliseconds
+     */
+    private sleep;
+    /**
+     * Pause the sequence
+     */
+    pause(): void;
+    /**
+     * Resume the sequence
+     */
+    resume(): void;
+    /**
+     * Cancel the sequence
+     */
+    cancel(): void;
+    /**
+     * Reset the sequence
+     */
+    reset(): void;
+    /**
+     * Get current state
+     */
+    getState(): SequenceState;
+    /**
+     * Get current step index
+     */
+    getCurrentStepIndex(): number;
+    /**
+     * Get total number of steps
+     */
+    getTotalSteps(): number;
+    /**
+     * Get all steps
+     */
+    getSteps(): AnimationStep[];
+    /**
+     * Clear all steps
+     */
+    clear(): void;
+    /**
+     * Notify completion callbacks
+     */
+    private notifyCompletion;
+    /**
+     * Clone this sequencer (creates a new instance with the same steps)
+     */
+    clone(): AnimationSequencer;
+    /**
+     * Export sequence as JSON
+     */
+    exportToJSON(): string;
+}
+/**
+ * Create a new animation sequencer
+ */
+export declare function createSequencer(animationRegistry?: CustomAnimationRegistry, lifecycleManager?: AnimationLifecycleManager): AnimationSequencer;
+/**
+ * Helper: Create a simple fade in sequence
+ */
+export declare function fadeInSequence(elements: HTMLElement[], delay?: number): AnimationSequencer;
+/**
+ * Helper: Create a stagger animation sequence
+ */
+export declare function staggerSequence(elements: HTMLElement[], animationName: string, staggerDelay?: number, options?: AnimationStepOptions): AnimationSequencer;