canvasframework 0.5.1 → 0.5.3

package/components/Drawer.js

@@ -45,12 +45,27 @@ class Drawer extends Component {
     // IMPORTANT: Définir les callbacks
     this.onPress = this.handlePress;
     this.onMove = this.handleMove;
+	// ✅ Se mettre automatiquement au-dessus de tous les composants
+	this.bringToFront();
+  }
+  
+  /**
+  * Met le drawer au-dessus de tous les composants
+  * @private
+  */
+  bringToFront() {
+    const index = this.framework.components.indexOf(this);
+    if (index > -1) {
+      this.framework.components.splice(index, 1);
+      this.framework.components.push(this);
+    }
   }
 
   /**
    * Ouvre le drawer
    */
   open() {
+	this.bringToFront(); // ✅ Se remettre au-dessus à chaque ouverture
     this.visible = true;
     this.targetX = 0;
     this.animate();

package/core/CanvasFramework.js

@@ -155,6 +155,15 @@ class CanvasFramework {
     constructor(canvasId, options = {}) {
         // ✅ AJOUTER: Démarrer le chronomètre
         const startTime = performance.now();
+		
+		this.metrics = {
+			initTime: 0,
+			firstRenderTime: null,
+			firstInteractionTime: null,
+			totalStartupTime: null
+		};
+		this._firstRenderDone = false;
+		this._startupStartTime = startTime;
 
 		// ✅ Créer automatiquement le canvas
 		this.canvas = document.createElement('canvas');
@@ -2649,54 +2658,86 @@ class CanvasFramework {
         }
     }
 
-    startRenderLoop() {
-    let lastScrollOffset = this.scrollOffset;
-    let lastRenderMode = 'full';
-    
-    const render = () => {
-        if (!this._splashFinished) {
-            requestAnimationFrame(render);
-            return;
-        }
-        
-        // Vérifier le scroll
-        const scrollChanged = Math.abs(this.scrollOffset - lastScrollOffset) > 0.1;
-        lastScrollOffset = this.scrollOffset;
-        
-        // Décider du mode de rendu
-        let renderMode = 'full';
-        
-        if (this.optimizationEnabled && 
-            this.dirtyComponents.size > 0 &&
-            !this.isDragging &&
-            Math.abs(this.scrollVelocity) < 0.5 &&
-            !scrollChanged &&
-            this.dirtyComponents.size < 3) { // ✅ SEULEMENT si très peu de composants sales
-            renderMode = 'dirty';
-        }
-        
-        // ✅ IMPORTANT : NE PAS clear tout le canvas au début
-        // On ne nettoie que si on change de mode ou si c'est nécessaire
-        
-        if (renderMode === 'full' || lastRenderMode !== renderMode) {
-            // Rendu complet : clear tout
-            this.ctx.fillStyle = this.backgroundColor || '#ffffff';
-            this.ctx.fillRect(0, 0, this.width, this.height);
-            this.renderFull();
-        } else {
-            // Rendu optimisé : ne clear QUE les zones des composants sales
-            this._renderDirtyComponents();
-        }
-        
-        lastRenderMode = renderMode;
-        
-        // ... FPS et debug ...
-        
-        requestAnimationFrame(render);
-    };
-    
-    render();
-}
+	startRenderLoop() {
+		let lastScrollOffset = this.scrollOffset;
+		let lastRenderMode = 'full';
+		
+		const render = () => {
+			if (!this._splashFinished) {
+				requestAnimationFrame(render);
+				return;
+			}
+			
+			// Vérifier le scroll
+			const scrollChanged = Math.abs(this.scrollOffset - lastScrollOffset) > 0.1;
+			lastScrollOffset = this.scrollOffset;
+			
+			// Décider du mode de rendu
+			let renderMode = 'full';
+			
+			if (this.optimizationEnabled && 
+				this.dirtyComponents.size > 0 &&
+				!this.isDragging &&
+				Math.abs(this.scrollVelocity) < 0.5 &&
+				!scrollChanged &&
+				this.dirtyComponents.size < 3) {
+				renderMode = 'dirty';
+			}
+			
+			if (renderMode === 'full' || lastRenderMode !== renderMode) {
+				this.ctx.fillStyle = this.backgroundColor || '#ffffff';
+				this.ctx.fillRect(0, 0, this.width, this.height);
+				this.renderFull();
+			} else {
+				this._renderDirtyComponents();
+			}
+			
+			lastRenderMode = renderMode;
+			
+			// ✅ AJOUTER : Calcul et affichage du FPS
+			this._frames++;
+			const now = performance.now();
+			const elapsed = now - this._lastFpsTime;
+			
+			if (elapsed >= 1000) {
+				this.fps = Math.round((this._frames * 1000) / elapsed);
+				this._frames = 0;
+				this._lastFpsTime = now;
+			}
+			
+			// ✅ AJOUTER : Afficher le FPS si activé
+			if (this.showFps) {
+				this.ctx.save();
+				this.ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+				this.ctx.fillRect(10, 10, 100, 40);
+				this.ctx.fillStyle = '#00ff00';
+				this.ctx.font = 'bold 20px monospace';
+				this.ctx.textAlign = 'left';
+				this.ctx.textBaseline = 'top';
+				this.ctx.fillText(`FPS: ${this.fps}`, 20, 20);
+				this.ctx.restore();
+			}
+			
+			// ✅ AJOUTER : Indicateurs de débogage si activés
+			if (this.debbug) {
+				this.drawOverflowIndicators();
+			}
+			
+			// ✅ AJOUTER : Marquer le premier rendu
+			if (!this._firstRenderDone) {
+				this._markFirstRender();
+			}
+			
+			// ✅ AJOUTER : Mettre à jour l'inertie si nécessaire
+			if (Math.abs(this.scrollVelocity) > 0.1 && !this.isDragging) {
+				this.scrollWorker.postMessage({ type: 'UPDATE_INERTIA' });
+			}
+			
+			requestAnimationFrame(render);
+		};
+		
+		render();
+	}
 
     // 3. Ajoutez une méthode renderFull() optimisée
     renderFull() {

package/features/Skeleton.js

@@ -1,4 +1,5 @@
 import Component from '../core/Component.js';
+
 /**
  * Composant Skeleton (placeholder animé pendant le chargement)
  * @class
@@ -6,7 +7,7 @@ import Component from '../core/Component.js';
  * @param {Framework} framework - Instance du framework
  * @param {Object} [options={}] - Options de configuration
  * @param {string} [options.type='text'] - Type de skeleton ('text', 'circle', 'rectangle')
- * @param {number} [options.animationSpeed=0.03] - Vitesse de l'animation
+ * @param {number} [options.animationDuration=1.5] - Durée de l'animation en secondes
  * @example
  * const skeleton = new Skeleton(framework, {
  *   type: 'text',
@@ -21,11 +22,14 @@ class Skeleton extends Component {
   constructor(framework, options = {}) {
     super(framework, options);
     /** @type {string} */
-    this.type = options.type || 'text'; // text, circle, rectangle
+    this.type = options.type || 'text';
+    /** @type {number} */
+    this.animationDuration = (options.animationDuration || 1.5) * 1000; // en ms
     /** @type {number} */
-    this.animationSpeed = options.animationSpeed || 0.03;
+    this.startTime = Date.now();
     /** @type {number} */
-    this.animationProgress = 0;
+    this.borderRadius = options.borderRadius || 4;
+    
     this.startAnimation();
   }
   
@@ -35,50 +39,155 @@ class Skeleton extends Component {
    */
   startAnimation() {
     const animate = () => {
-      if (!this.visible) return;
-      
-      this.animationProgress += this.animationSpeed;
-      if (this.animationProgress > Math.PI * 2) {
-        this.animationProgress = 0;
+      if (!this.visible) {
+        requestAnimationFrame(animate);
+        return;
       }
-      
       requestAnimationFrame(animate);
     };
     animate();
   }
   
   /**
-   * Dessine le skeleton avec animation
+   * Calcule la progression de l'animation (0 à 1)
+   * @private
+   * @returns {number}
+   */
+  getAnimationProgress() {
+    const elapsed = Date.now() - this.startTime;
+    const progress = (elapsed % this.animationDuration) / this.animationDuration;
+    return progress;
+  }
+  
+  /**
+   * Crée le gradient shimmer diagonal style Ionic/Material
+   * @private
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {number} x
+   * @param {number} y
+   * @param {number} width
+   * @param {number} height
+   * @returns {CanvasGradient}
+   */
+  createShimmerGradient(ctx, x, y, width, height) {
+    const progress = this.getAnimationProgress();
+    
+    // Calculer la diagonale pour l'effet
+    const diagonal = Math.sqrt(width * width + height * height);
+    
+    // Position du gradient qui se déplace
+    const offset = diagonal * 2;
+    const position = -diagonal + (offset * progress);
+    
+    // Angle à 45 degrés (de haut-gauche vers bas-droite)
+    const angle = Math.PI / 4;
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    
+    const gradient = ctx.createLinearGradient(
+      x + position * cos,
+      y + position * sin,
+      x + (position + diagonal) * cos,
+      y + (position + diagonal) * sin
+    );
+    
+    // Gradient blanc avec transparence (style Ionic/Material)
+    gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
+    gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.4)');
+    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+    
+    return gradient;
+  }
+  
+  /**
+   * Dessine un rectangle arrondi
+   * @private
+   */
+  roundRect(ctx, x, y, width, height, radius) {
+    if (width < 2 * radius) radius = width / 2;
+    if (height < 2 * radius) radius = height / 2;
+    
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.arcTo(x + width, y, x + width, y + height, radius);
+    ctx.arcTo(x + width, y + height, x, y + height, radius);
+    ctx.arcTo(x, y + height, x, y, radius);
+    ctx.arcTo(x, y, x + width, y, radius);
+    ctx.closePath();
+  }
+  
+  /**
+   * Dessine le skeleton avec l'effet shimmer Ionic/Material
    * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
    */
   draw(ctx) {
     ctx.save();
     
-    const brightness = 0.9 + 0.1 * Math.sin(this.animationProgress);
-    ctx.fillStyle = `rgba(240, 240, 240, ${brightness})`;
+    // Couleur de fond (gris clair Material)
+    const backgroundColor = '#e0e0e0';
     
     switch(this.type) {
       case 'circle':
+        // Dessiner le cercle de base
+        ctx.fillStyle = backgroundColor;
         ctx.beginPath();
         ctx.arc(this.x + this.width/2, this.y + this.height/2, this.width/2, 0, Math.PI * 2);
         ctx.fill();
+        
+        // Créer un clipping path pour le shimmer
+        ctx.beginPath();
+        ctx.arc(this.x + this.width/2, this.y + this.height/2, this.width/2, 0, Math.PI * 2);
+        ctx.clip();
+        
+        // Appliquer le shimmer
+        ctx.fillStyle = this.createShimmerGradient(ctx, this.x, this.y, this.width, this.height);
+        ctx.fillRect(this.x, this.y, this.width, this.height);
         break;
+        
       case 'text':
-        // Simuler des lignes de texte
-        const lineHeight = 20;
-        const lines = Math.floor(this.height / lineHeight);
+        const lineHeight = 16;
+        const lineSpacing = 10;
+        const totalLineHeight = lineHeight + lineSpacing;
+        const lines = Math.floor(this.height / totalLineHeight);
         
         for (let i = 0; i < lines; i++) {
           const lineWidth = i === lines - 1 ? this.width * 0.6 : this.width;
-          ctx.fillRect(this.x, this.y + i * lineHeight, lineWidth, 16);
+          const lineY = this.y + i * totalLineHeight;
+          
+          // Fond de la ligne
+          ctx.fillStyle = backgroundColor;
+          this.roundRect(ctx, this.x, lineY, lineWidth, lineHeight, this.borderRadius);
+          ctx.fill();
+          
+          // Shimmer sur la ligne
+          ctx.save();
+          this.roundRect(ctx, this.x, lineY, lineWidth, lineHeight, this.borderRadius);
+          ctx.clip();
+          
+          ctx.fillStyle = this.createShimmerGradient(ctx, this.x, lineY, lineWidth, lineHeight);
+          ctx.fillRect(this.x - 100, lineY - 100, lineWidth + 200, lineHeight + 200);
+          ctx.restore();
         }
         break;
+        
       default:
-        ctx.fillRect(this.x, this.y, this.width, this.height);
+        // Rectangle de base
+        ctx.fillStyle = backgroundColor;
+        this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+        ctx.fill();
+        
+        // Shimmer
+        ctx.save();
+        this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+        ctx.clip();
+        
+        ctx.fillStyle = this.createShimmerGradient(ctx, this.x, this.y, this.width, this.height);
+        ctx.fillRect(this.x - 100, this.y - 100, this.width + 200, this.height + 200);
+        ctx.restore();
     }
     
     ctx.restore();
   }
 }
 
-export default Skeleton;
+export default Skeleton;

package/index.js

@@ -115,4 +115,4 @@ export { default as FeatureFlags } from './manager/FeatureFlags.js';
 
 // Version du framework
 
-export const VERSION = '0.4.7';
+export const VERSION = '0.5.3';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasframework",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Canvas-based cross-platform UI framework (Material & Cupertino)",
   "type": "module",
   "main": "./index.js",