canvasframework 0.5.0 → 0.5.2

package/components/Button.js

@@ -200,6 +200,7 @@ class Button extends Component {
       
       this.ripples = this.ripples.filter(r => r.opacity > 0);
       
+	  
       if (hasActiveRipples) {
         requestAnimationFrame(animate);
       }

package/components/ListItem.js

@@ -53,16 +53,35 @@ class ListItem extends Component {
    * @param {number} y - Coordonnée Y
    * @private
    */
-  handlePress(x, y) {
+   handlePress(x, y) {
     if (this.platform === 'material') {
-      const adjustedY = y - this.framework.scrollOffset;
+      // ✅ CORRECTION : Calculer les coordonnées LOCALES du composant
+      // x et y sont déjà les coordonnées écran après ajustement par le framework
+      
+      // Calculer les coordonnées relatives au composant
+      const localX = x - this.x;
+      const localY = y - this.y;
+      
+      // ✅ AJOUTER : Vérifier si le point est vraiment dans le composant
+      if (localX < 0 || localX > this.width || localY < 0 || localY > this.height) {
+        return; // Le clic n'est pas dans le composant
+      }
+      
       this.ripples.push({
-        x: x - this.x,
-        y: adjustedY - this.y,
+        x: localX, // ✅ Coordonnée X relative au composant
+        y: localY, // ✅ Coordonnée Y relative au composant
         radius: 0,
         maxRadius: Math.max(this.width, this.height) * 1.5,
-        opacity: 1
+        opacity: 1,
+        startTime: Date.now() // Pour une animation plus précise
       });
+      // ✅ TEMPORAIREMENT mettre pressed à true pour le feedback visuel immédiat
+      this.pressed = true;
+      
+      // ✅ MAIS le remettre à false après un court délai
+      setTimeout(() => {
+        this.pressed = false;
+      }, 150); // 150ms de feedback tactile
       this.animateRipple();
     }
   }
@@ -72,28 +91,54 @@ class ListItem extends Component {
    * @private
    */
   animateRipple() {
+    let animationId = null;
+    const startTime = Date.now();
+    const duration = 600; // 600ms pour l'animation complète
+    
     const animate = () => {
+      const elapsed = Date.now() - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      
       let hasActiveRipples = false;
       
       for (let ripple of this.ripples) {
-        if (ripple.radius < ripple.maxRadius) {
-          ripple.radius += ripple.maxRadius / 15;
-          hasActiveRipples = true;
+        // ✅ Animation plus fluide avec easing
+        const easedProgress = this.easeOutCubic(progress);
+        ripple.radius = easedProgress * ripple.maxRadius;
+        
+        // Fade out à partir de 50% de progression
+        if (progress > 0.5) {
+          const fadeProgress = (progress - 0.5) / 0.5;
+          ripple.opacity = 1 - fadeProgress;
         }
         
-        if (ripple.radius >= ripple.maxRadius * 0.5) {
-          ripple.opacity -= 0.05;
+        if (progress < 1) {
+          hasActiveRipples = true;
         }
       }
       
+      // Filtrer les ripples terminés
       this.ripples = this.ripples.filter(r => r.opacity > 0);
       
-      if (hasActiveRipples) {
-        requestAnimationFrame(animate);
+      if (hasActiveRipples && this.ripples.length > 0) {
+        animationId = requestAnimationFrame(animate);
+      } else {
+        // ✅ Nettoyer quand l'animation est terminée
+        if (animationId) {
+          cancelAnimationFrame(animationId);
+        }
+        this.ripples = [];
       }
     };
     
-    animate();
+    animationId = requestAnimationFrame(animate);
+  }
+  
+   /**
+   * Fonction d'easing pour animation fluide
+   */
+  easeOutCubic(t) {
+    return 1 - Math.pow(1 - t, 3);
   }
   
   /**
@@ -103,108 +148,109 @@ class ListItem extends Component {
   draw(ctx) {
     ctx.save();
     
-    // Background
+    // 1. Background (toujours opaque)
     ctx.fillStyle = this.pressed ? '#F5F5F5' : this.bgColor;
     ctx.fillRect(this.x, this.y, this.width, this.height);
     
-    // Ripple effect (Material)
+    // 2. Ripples (si présents)
     if (this.platform === 'material' && this.ripples.length > 0) {
-      ctx.save();
-      ctx.beginPath();
-      ctx.rect(this.x, this.y, this.width, this.height);
-      ctx.clip();
-      
-      for (let ripple of this.ripples) {
-        ctx.globalAlpha = ripple.opacity;
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+        ctx.save();
+        
+        // Clip pour contenir les ripples
         ctx.beginPath();
-        ctx.arc(this.x + ripple.x, this.y + ripple.y, ripple.radius, 0, Math.PI * 2);
-        ctx.fill();
-      }
-      
-      ctx.restore();
+        ctx.rect(this.x, this.y, this.width, this.height);
+        ctx.clip();
+        
+        // Dessiner tous les ripples
+        for (let ripple of this.ripples) {
+            // Utiliser fillStyle avec alpha intégré au lieu de globalAlpha
+            ctx.fillStyle = `rgba(0, 0, 0, ${0.1 * ripple.opacity})`;
+            ctx.beginPath();
+            ctx.arc(this.x + ripple.x, this.y + ripple.y, ripple.radius, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        
+        ctx.restore();
     }
     
+    // 3. Contenu (texte, icônes, etc.) - toujours avec alpha = 1
+    this.drawContent(ctx);
+    
+    ctx.restore();
+}
+
+/**
+ * Dessine le contenu du ListItem (séparé pour plus de clarté)
+ */
+drawContent(ctx) {
     let leftOffset = 16;
     
-    // Left Icon ou Image
     if (this.leftIcon) {
-      ctx.fillStyle = '#757575';
-      ctx.font = '24px sans-serif';
-      ctx.textAlign = 'left';
-      ctx.textBaseline = 'middle';
-      ctx.fillText(this.leftIcon, this.x + leftOffset, this.y + this.height / 2);
-      leftOffset += 48;
+        ctx.fillStyle = '#757575';
+        ctx.font = '24px sans-serif';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(this.leftIcon, this.x + leftOffset, this.y + this.height / 2);
+        leftOffset += 48;
     } else if (this.leftImage) {
-      // Circle pour l'avatar
-      ctx.fillStyle = '#E0E0E0';
-      ctx.beginPath();
-      ctx.arc(this.x + leftOffset + 20, this.y + this.height / 2, 20, 0, Math.PI * 2);
-      ctx.fill();
-      
-      // TODO: Charger vraie image
-      ctx.fillStyle = '#757575';
-      ctx.font = '14px sans-serif';
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-      ctx.fillText('👤', this.x + leftOffset + 20, this.y + this.height / 2);
-      
-      leftOffset += 56;
+        ctx.fillStyle = '#E0E0E0';
+        ctx.beginPath();
+        ctx.arc(this.x + leftOffset + 20, this.y + this.height / 2, 20, 0, Math.PI * 2);
+        ctx.fill();
+        
+        ctx.fillStyle = '#757575';
+        ctx.font = '14px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText('👤', this.x + leftOffset + 20, this.y + this.height / 2);
+        leftOffset += 56;
     }
     
-    // Title et Subtitle
     const textX = this.x + leftOffset;
     const centerY = this.y + this.height / 2;
     
     if (this.subtitle) {
-      // Title
-      ctx.fillStyle = '#000000';
-      ctx.font = '16px -apple-system, Roboto, sans-serif';
-      ctx.textAlign = 'left';
-      ctx.textBaseline = 'bottom';
-      ctx.fillText(this.title, textX, centerY - 2);
-      
-      // Subtitle
-      ctx.fillStyle = '#757575';
-      ctx.font = '14px -apple-system, Roboto, sans-serif';
-      ctx.textBaseline = 'top';
-      ctx.fillText(this.subtitle, textX, centerY + 2);
+        ctx.fillStyle = '#000000';
+        ctx.font = '16px -apple-system, Roboto, sans-serif';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'bottom';
+        ctx.fillText(this.title, textX, centerY - 2);
+        
+        ctx.fillStyle = '#757575';
+        ctx.font = '14px -apple-system, Roboto, sans-serif';
+        ctx.textBaseline = 'top';
+        ctx.fillText(this.subtitle, textX, centerY + 2);
     } else {
-      // Title seul (centré verticalement)
-      ctx.fillStyle = '#000000';
-      ctx.font = '16px -apple-system, Roboto, sans-serif';
-      ctx.textAlign = 'left';
-      ctx.textBaseline = 'middle';
-      ctx.fillText(this.title, textX, centerY);
+        ctx.fillStyle = '#000000';
+        ctx.font = '16px -apple-system, Roboto, sans-serif';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(this.title, textX, centerY);
     }
     
-    // Right Text ou Icon
     if (this.rightText) {
-      ctx.fillStyle = '#757575';
-      ctx.font = '14px -apple-system, Roboto, sans-serif';
-      ctx.textAlign = 'right';
-      ctx.textBaseline = 'middle';
-      ctx.fillText(this.rightText, this.x + this.width - 16, centerY);
+        ctx.fillStyle = '#757575';
+        ctx.font = '14px -apple-system, Roboto, sans-serif';
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(this.rightText, this.x + this.width - 16, centerY);
     } else if (this.rightIcon) {
-      ctx.fillStyle = '#757575';
-      ctx.font = '20px sans-serif';
-      ctx.textAlign = 'right';
-      ctx.textBaseline = 'middle';
-      ctx.fillText(this.rightIcon, this.x + this.width - 16, centerY);
+        ctx.fillStyle = '#757575';
+        ctx.font = '20px sans-serif';
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(this.rightIcon, this.x + this.width - 16, centerY);
     }
     
-    // Divider
     if (this.divider) {
-      ctx.strokeStyle = '#E0E0E0';
-      ctx.lineWidth = 1;
-      ctx.beginPath();
-      ctx.moveTo(this.x + leftOffset, this.y + this.height);
-      ctx.lineTo(this.x + this.width, this.y + this.height);
-      ctx.stroke();
+        ctx.strokeStyle = '#E0E0E0';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(this.x + leftOffset, this.y + this.height);
+        ctx.lineTo(this.x + this.width, this.y + this.height);
+        ctx.stroke();
     }
-    
-    ctx.restore();
-  }
+}
   
   /**
    * Vérifie si un point est dans les limites

package/components/SwipeableListItem.js

@@ -60,7 +60,6 @@ class SwipeableListItem extends Component {
     }
 
     const canvas = this.framework.canvas;
-    console.log('📡 Configuration des événements sur le canvas');
 
     // Événements souris
     canvas.addEventListener('mousedown', this.handleMouseDown);
@@ -123,7 +122,6 @@ class SwipeableListItem extends Component {
    */
   handleMouseDown(event) {
     const coords = this.getCoordinates(event);
-    console.log('🖱️ MouseDown', coords, 'isInside:', this.isPointInside(coords.x, coords.y));
     this.onDragStart(coords.x, coords.y);
   }
 
@@ -134,7 +132,6 @@ class SwipeableListItem extends Component {
   handleMouseMove(event) {
     if (!this.dragging) return;
     const coords = this.getCoordinates(event);
-    console.log('🖱️ MouseMove', coords, 'dragging:', this.dragging);
     this.onDragMove(coords.x, coords.y);
     this.requestRender();
   }
@@ -145,7 +142,6 @@ class SwipeableListItem extends Component {
    */
   handleMouseUp(event) {
     if (!this.dragging) return;
-    console.log('🖱️ MouseUp');
     this.onDragEnd();
     this.requestRender();
   }
@@ -156,7 +152,6 @@ class SwipeableListItem extends Component {
    */
   handleTouchStart(event) {
     const coords = this.getCoordinates(event);
-    console.log('👆 TouchStart', coords, 'isInside:', this.isPointInside(coords.x, coords.y));
     if (this.isPointInside(coords.x, coords.y)) {
       event.preventDefault();
       this.onDragStart(coords.x, coords.y);
@@ -171,7 +166,6 @@ class SwipeableListItem extends Component {
     if (!this.dragging) return;
     event.preventDefault();
     const coords = this.getCoordinates(event);
-    console.log('👆 TouchMove', coords);
     this.onDragMove(coords.x, coords.y);
     this.requestRender();
   }
@@ -183,7 +177,6 @@ class SwipeableListItem extends Component {
   handleTouchEnd(event) {
     if (!this.dragging) return;
     event.preventDefault();
-    console.log('👆 TouchEnd');
     this.onDragEnd();
     this.requestRender();
   }
@@ -205,14 +198,12 @@ class SwipeableListItem extends Component {
    */
   onDragStart(x, y) {
     const inside = this.isPointInside(x, y);
-    console.log('🟢 onDragStart', { x, y, inside, bounds: { x: this.x, y: this.y, w: this.width, h: this.height } });
     
     if (inside) {
       this.dragging = true;
       this.startX = x;
       this.startY = y;
       this.hasMoved = false;
-      console.log('✅ Swipe démarré');
     } else {
       console.log('❌ Point en dehors des limites');
     }
@@ -228,7 +219,6 @@ class SwipeableListItem extends Component {
       const deltaX = x - this.startX;
       const deltaY = Math.abs(y - this.startY);
 
-      console.log('🔄 onDragMove', { deltaX, deltaY, hasMoved: this.hasMoved });
 
       // Swipe horizontal seulement si déplacement > 5px
       if (Math.abs(deltaX) > 5 || this.hasMoved) {
@@ -242,7 +232,6 @@ class SwipeableListItem extends Component {
         );
         this.dragOffset = Math.min(Math.max(this.dragOffset, -maxOffset), maxOffset);
 
-        console.log('↔️ Offset mis à jour:', this.dragOffset);
       }
     }
   }
@@ -252,14 +241,11 @@ class SwipeableListItem extends Component {
    */
   onDragEnd() {
     if (this.dragging) {
-      console.log('🔴 onDragEnd', { offset: this.dragOffset, hasMoved: this.hasMoved });
 
       if (this.hasMoved) {
         if (this.dragOffset > 80 && this.leftActions[0]) {
-          console.log('✅ Action gauche déclenchée');
           this.leftActions[0].onClick?.();
         } else if (this.dragOffset < -80 && this.rightActions[0]) {
-          console.log('✅ Action droite déclenchée');
           this.rightActions[0].onClick?.();
         }
       }
@@ -334,12 +320,6 @@ class SwipeableListItem extends Component {
   const inside = x >= this.x && x <= this.x + this.width &&
                  y >= this.y && y <= this.y + this.height;
   
-  console.log('🎯 isPointInside check', {
-    point: { x, y },
-    bounds: { x: this.x, y: this.y, width: this.width, height: this.height },
-    inside
-  });
-  
   return inside;
 }
 }

package/core/CanvasFramework.js

@@ -155,14 +155,24 @@ class CanvasFramework {
     constructor(canvasId, options = {}) {
         // ✅ AJOUTER: Démarrer le chronomètre
         const startTime = performance.now();
-
-        // ✅ OPTIMISATION OPTION 5: Contexte Canvas optimisé
-        this.canvas = document.getElementById(canvasId);
-        /*this.ctx = this.canvas.getContext('2d', {
-            alpha: false, // ✅ Gain de 30% de performance
-            desynchronized: true, // ✅ Bypass la queue du navigateur
-            willReadFrequently: false
-        });*/
+		
+		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');
+		this.canvas.id = canvasId || `canvas-${Date.now()}`;
+		this.canvas.style.display = 'block';
+		this.canvas.style.touchAction = 'none';
+		this.canvas.style.userSelect = 'none';
+		document.body.appendChild(this.canvas);
+        
 		// NOUVELLE OPTION: choisir entre Canvas 2D et WebGL
         this.useWebGL = options.useWebGL ?? false;   // utilise la valeur si fournie, sinon false
     
@@ -999,71 +1009,73 @@ class CanvasFramework {
      * ✅ OPTIMISATION OPTION 2: Rendu partiel (seulement les composants sales)
      * @private
      */
-    _renderDirtyComponents() {
-        const ctx = this.optimizations.useDoubleBuffering ? this._bufferCtx : this.ctx;
-
-        if (!ctx || this.dirtyComponents.size === 0) return;
-
-        // Séparer les composants sales par type
-        const fixedDirty = [];
-        const scrollableDirty = [];
-
-        this.dirtyComponents.forEach(comp => {
-            if (comp.visible) {
-                if (this.isFixedComponent(comp)) {
-                    fixedDirty.push(comp);
-                } else {
-                    scrollableDirty.push(comp);
-                }
-            }
-        });
-
-        // ✅ CORRECTION : Traiter séparément pour éviter les problèmes de contexte
-
-        // 1. Dessiner les composants scrollables d'abord
-        if (scrollableDirty.length > 0) {
-            for (let comp of scrollableDirty) {
-                const screenY = comp.y + this.scrollOffset;
-
-                // Nettoyer la zone avec le background
-                ctx.save();
-                ctx.fillStyle = this.backgroundColor || '#ffffff';
-                ctx.fillRect(comp.x - 2, screenY - 2, comp.width + 4, comp.height + 4);
-                ctx.restore();
-
-                // Dessiner le composant avec translation
-                ctx.save();
-                ctx.translate(0, this.scrollOffset);
-                comp.draw(ctx);
-                ctx.restore();
-
-                if (comp.markClean) comp.markClean();
-            }
-        }
-
-        // 2. Dessiner les composants fixes ensuite
-        if (fixedDirty.length > 0) {
-            for (let comp of fixedDirty) {
-                // Nettoyer la zone avec le background
-                ctx.save();
-                ctx.fillStyle = this.backgroundColor || '#ffffff';
-                ctx.fillRect(comp.x - 2, comp.y - 2, comp.width + 4, comp.height + 4);
-                ctx.restore();
-
-                // Dessiner le composant sans translation
-                comp.draw(ctx);
-
-                if (comp.markClean) comp.markClean();
-            }
-        }
-
-        this.dirtyComponents.clear();
-
-        // Flush si on utilise le double buffering
-        if (this.optimizations.useDoubleBuffering) {
-            this.flush();
-        }
-    }
+	_renderDirtyComponents() {
+		const ctx = this.optimizations.useDoubleBuffering ? this._bufferCtx : this.ctx;
+		
+		if (!ctx || this.dirtyComponents.size === 0) return;
+		
+		// ✅ CORRECTION : Ne pas nettoyer avec fillRect !
+		// À la place, utiliser le clipping pour redessiner proprement
+		
+		// Copier dans un tableau
+		const dirtyArray = Array.from(this.dirtyComponents);
+		
+		// Vider immédiatement
+		this.dirtyComponents.clear();
+		
+		// Séparer les composants
+		const fixedComps = [];
+		const scrollableComps = [];
+		
+		dirtyArray.forEach(comp => {
+			if (!comp.visible) return;
+			
+			if (this.isFixedComponent(comp)) {
+				fixedComps.push(comp);
+			} else {
+				scrollableComps.push(comp);
+			}
+		});
+		
+		// ✅ APPROCHE CORRECTE : Redessiner les composants sales
+		// sans effacer leur zone d'abord
+		
+		// 1. Dessiner les scrollables
+		if (scrollableComps.length > 0) {
+			ctx.save();
+			ctx.translate(0, this.scrollOffset);
+			
+			for (let comp of scrollableComps) {
+				// ✅ NE PAS faire de fillRect !
+				// Juste dessiner le composant
+				if (comp.draw) {
+					comp.draw(ctx);
+				}
+				
+				if (comp.markClean) {
+					comp.markClean();
+				}
+			}
+			
+			ctx.restore();
+		}
+		
+		// 2. Dessiner les fixes
+		for (let comp of fixedComps) {
+			if (comp.draw) {
+				comp.draw(ctx);
+			}
+			
+			if (comp.markClean) {
+				comp.markClean();
+			}
+		}
+		
+		// Flush si double buffering
+		if (this.optimizations.useDoubleBuffering) {
+			this.flush();
+		}
+	}
 
     /**
      * Active/désactive une optimisation spécifique
@@ -2467,10 +2479,20 @@ class CanvasFramework {
 
     // 4. Modifiez markComponentDirty() pour éviter de marquer pendant le scroll
     markComponentDirty(component) {
-        if (this.optimizationEnabled && !this.isDragging && Math.abs(this.scrollVelocity) < 5) {
-            this.dirtyComponents.add(component);
-        }
-    }
+		// Vérifications basiques
+		if (!component || !component.visible) return;
+		
+		// ✅ TOUJOURS ajouter au set des composants sales
+		// Les conditions de rendu seront vérifiées dans _renderDirtyComponents
+		if (this.optimizationEnabled) {
+			this.dirtyComponents.add(component);
+		}
+		
+		// ✅ Optionnel : Marquer aussi le composant lui-même
+		if (component._dirty !== undefined) {
+			component._dirty = true;
+		}
+	}
 
     enableOptimization() {
         this.optimizationEnabled = true;
@@ -2636,77 +2658,86 @@ class CanvasFramework {
         }
     }
 
-    startRenderLoop() {
-        let lastScrollOffset = this.scrollOffset;
-        let framesWithoutScroll = 0;
-
-        const render = () => {
-            if (!this._splashFinished) {
-                requestAnimationFrame(render);
-                return;
-            }
-
-            // 1️⃣ Vérifier si le scroll a changé
-            const scrollChanged = Math.abs(this.scrollOffset - lastScrollOffset) > 0.1;
-            lastScrollOffset = this.scrollOffset;
-
-            // 2️⃣ Clear canvas AVEC BACKGROUND (toujours faire un clear complet)
-            this.ctx.fillStyle = this.backgroundColor || '#ffffff';
-            this.ctx.fillRect(0, 0, this.width, this.height);
-
-            // 3️⃣ Transition handling
-            if (this.transitionState.isTransitioning) {
-                this.updateTransition();
-            }
-            // 4️⃣ Rendu optimisé UNIQUEMENT si pas de scroll actif et peu de composants sales
-            else if (this.optimizationEnabled &&
-                this.dirtyComponents.size > 0 &&
-                !this.isDragging &&
-                Math.abs(this.scrollVelocity) < 0.5) {
-
-                // ✅ OPTIMISATION : Si on scroll, on fait un rendu complet pour éviter le clignotement
-                if (scrollChanged && this.dirtyComponents.size < this.components.length / 2) {
-                    // Si beaucoup de composants sales + scroll, rendu complet
-                    this.renderFull();
-                } else {
-                    // Sinon, rendu optimisé
-                    this._renderDirtyComponents();
-                }
-            } else {
-                // Full redraw (plus stable pendant le scroll)
-                this.renderFull();
-            }
-
-            // 5️⃣ FPS
-            this._frames++;
-            const now = performance.now();
-            if (now - this._lastFpsTime >= 1000) {
-                this.fps = this._frames;
-                this._frames = 0;
-                this._lastFpsTime = now;
-            }
-
-            if (this.showFps) {
-                this.ctx.save();
-                this.ctx.fillStyle = 'lime';
-                this.ctx.font = '16px monospace';
-                this.ctx.fillText(`FPS: ${this.fps}`, 10, 20);
-                this.ctx.restore();
-            }
-
-            if (this.debbug) {
-                this.drawOverflowIndicators();
-            }
-
-            if (!this._firstRenderDone && this.components.length > 0) {
-                this._markFirstRender();
-            }
-
-            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/PullToRefresh.js

@@ -247,7 +247,7 @@ class PullToRefresh extends Component {
     ctx.save();
     
     const progress = Math.min(1, this.pullDistance / this.refreshThreshold);
-    const displayHeight = Math.min(this.pullDistance, 100);
+    const displayHeight = Math.min(this.pullDistance, 230);
     
     // Background
     ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';

package/package.json

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