canvasframework 0.5.8 → 0.5.10

package/README.md

@@ -4,7 +4,7 @@
 # Canvas UI Engine (UI engine inspired by Flutter, built for the Web)
 
 > **Canvas-based UI Engine for Mobile & Embedded Apps**  
-> A high-performance UI engine rendered with Canvas/WebGL (Text rendering), running inside a WebView runtime (Capacitor / Cordova), without DOM, HTML or CSS.
+> A high-performance UI engine rendered with Canvas/WebGL, running inside a WebView runtime (Capacitor / Cordova), without DOM, HTML or CSS.
 
 ---
 

package/core/CanvasFramework.js

@@ -1903,9 +1903,10 @@ class CanvasFramework {
         // ===== LANCER L'ANIMATION DE TRANSITION =====
 
         if (animate && !this.transitionState.isTransitioning) {
-            const transitionType = transition || route.transition || 'slide';
-            this.startTransition(oldComponents, this.components, transitionType, direction);
-        }
+			const transitionType = transition || route.transition || 'slide';
+			this.startTransition(oldComponents, this.components, transitionType, direction);
+			// Pas besoin d'appeler renderFull() ici, la boucle de rendu s'en chargera
+		}
 
         // ===== LIFECYCLE: APRÈS ÊTRE ENTRÉ DANS LA NOUVELLE ROUTE =====
 
@@ -2662,21 +2663,39 @@ class CanvasFramework {
 	startRenderLoop() {
 		let lastScrollOffset = this.scrollOffset;
 		let lastRenderMode = 'full';
+		let lastFrameTime = performance.now();
 		
-		const render = () => {
+		const render = (currentTime) => {
+			// Calculer le delta time
+			const deltaTime = currentTime - lastFrameTime;
+			lastFrameTime = currentTime;
+			
 			if (!this._splashFinished) {
 				requestAnimationFrame(render);
 				return;
 			}
 			
-			// Vérifier le scroll
+			// 1. Mettre à jour l'animation de transition si active
+			if (this.transitionState.isTransitioning) {
+				this.updateTransition();
+				
+				// Si la transition est terminée, nettoyer
+				if (this.transitionState.progress >= 1) {
+					this.transitionState.isTransitioning = false;
+					this.transitionState.oldComponents = [];
+				}
+			}
+			
+			// 2. Vérifier le scroll
 			const scrollChanged = Math.abs(this.scrollOffset - lastScrollOffset) > 0.1;
 			lastScrollOffset = this.scrollOffset;
 			
-			// Décider du mode de rendu
+			// 3. Décider du mode de rendu
 			let renderMode = 'full';
 			
+			// Conditions pour utiliser le rendu optimisé (dirty components)
 			if (this.optimizationEnabled && 
+				!this.transitionState.isTransitioning && // ← Pas pendant les transitions
 				this.dirtyComponents.size > 0 &&
 				!this.isDragging &&
 				Math.abs(this.scrollVelocity) < 0.5 &&
@@ -2685,17 +2704,23 @@ class CanvasFramework {
 				renderMode = 'dirty';
 			}
 			
-			if (renderMode === 'full' || lastRenderMode !== renderMode) {
+			// 4. Exécuter le rendu
+			if (this.transitionState.isTransitioning) {
+				// Pendant les transitions, toujours utiliser un rendu complet spécial
+				this.renderTransition();
+			} else if (renderMode === 'full' || lastRenderMode !== renderMode) {
+				// Rendu complet normal
 				this.ctx.fillStyle = this.backgroundColor || '#ffffff';
 				this.ctx.fillRect(0, 0, this.width, this.height);
 				this.renderFull();
 			} else {
+				// Rendu optimisé (seulement les composants sales)
 				this._renderDirtyComponents();
 			}
 			
 			lastRenderMode = renderMode;
 			
-			// ✅ AJOUTER : Calcul et affichage du FPS
+			// 5. Calculer et afficher le FPS
 			this._frames++;
 			const now = performance.now();
 			const elapsed = now - this._lastFpsTime;
@@ -2706,7 +2731,7 @@ class CanvasFramework {
 				this._lastFpsTime = now;
 			}
 			
-			// ✅ AJOUTER : Afficher le FPS si activé
+			// Afficher le FPS si activé
 			if (this.showFps) {
 				this.ctx.save();
 				this.ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
@@ -2719,74 +2744,231 @@ class CanvasFramework {
 				this.ctx.restore();
 			}
 			
-			// ✅ AJOUTER : Indicateurs de débogage si activés
+			// Indicateurs de débogage si activés
 			if (this.debbug) {
 				this.drawOverflowIndicators();
 			}
 			
-			// ✅ AJOUTER : Marquer le premier rendu
+			// Marquer le premier rendu
 			if (!this._firstRenderDone) {
 				this._markFirstRender();
 			}
 			
-			// ✅ AJOUTER : Mettre à jour l'inertie si nécessaire
+			// Mettre à jour l'inertie du scroll si nécessaire
 			if (Math.abs(this.scrollVelocity) > 0.1 && !this.isDragging) {
 				this.scrollWorker.postMessage({ type: 'UPDATE_INERTIA' });
 			}
 			
+			// Nettoyer les composants sales après le rendu
+			if (renderMode === 'full') {
+				this.dirtyComponents.clear();
+			}
+			
 			requestAnimationFrame(render);
 		};
 		
-		render();
+		render(lastFrameTime);
+	}
+	
+	
+	/**
+	 * Rendu spécial pour les transitions
+	 * @private
+	 */
+	renderTransition() {
+		const ctx = this.ctx;
+		
+		// Effacer l'écran
+		ctx.fillStyle = this.backgroundColor || '#ffffff';
+		ctx.fillRect(0, 0, this.width, this.height);
+		
+		// Dessiner l'animation de transition
+		const progress = this.transitionState.progress;
+		const { type, direction, oldComponents, newComponents } = this.transitionState;
+		const directionMultiplier = direction === 'forward' ? 1 : -1;
+		
+		// Calculer le facteur d'easing
+		const eased = this.easeInOutCubic(progress);
+		
+		switch (type) {
+			case 'slide':
+				// 1. Ancienne vue qui sort
+				ctx.save();
+				ctx.translate(-this.width * eased * directionMultiplier, 0);
+				ctx.globalAlpha = 1 - eased * 0.3;
+				
+				for (let comp of oldComponents) {
+					if (comp && comp.visible) {
+						const isFixed = this.isFixedComponent(comp);
+						
+						if (isFixed) {
+							// Composants fixes : dessiner normalement
+							comp.draw(ctx);
+						} else {
+							// Composants scrollables : appliquer le décalage de scroll
+							ctx.save();
+							ctx.translate(0, this.scrollOffset);
+							comp.draw(ctx);
+							ctx.restore();
+						}
+					}
+				}
+				ctx.restore();
+				
+				// 2. Nouvelle vue qui entre
+				ctx.save();
+				ctx.translate(this.width * (1 - eased) * directionMultiplier, 0);
+				
+				for (let comp of newComponents) {
+					if (comp && comp.visible) {
+						const isFixed = this.isFixedComponent(comp);
+						
+						if (isFixed) {
+							comp.draw(ctx);
+						} else {
+							ctx.save();
+							ctx.translate(0, this.scrollOffset);
+							comp.draw(ctx);
+							ctx.restore();
+						}
+					}
+				}
+				ctx.restore();
+				break;
+				
+			case 'fade':
+				// Ancienne vue qui disparaît
+				ctx.save();
+				ctx.globalAlpha = 1 - eased;
+				for (let comp of oldComponents) {
+					if (comp && comp.visible) {
+						const isFixed = this.isFixedComponent(comp);
+						
+						if (isFixed) {
+							comp.draw(ctx);
+						} else {
+							ctx.save();
+							ctx.translate(0, this.scrollOffset);
+							comp.draw(ctx);
+							ctx.restore();
+						}
+					}
+				}
+				ctx.restore();
+				
+				// Nouvelle vue qui apparaît
+				ctx.save();
+				ctx.globalAlpha = eased;
+				for (let comp of newComponents) {
+					if (comp && comp.visible) {
+						const isFixed = this.isFixedComponent(comp);
+						
+						if (isFixed) {
+							comp.draw(ctx);
+						} else {
+							ctx.save();
+							ctx.translate(0, this.scrollOffset);
+							comp.draw(ctx);
+							ctx.restore();
+						}
+					}
+				}
+				ctx.restore();
+				break;
+				
+			case 'none':
+				// Pas d'animation, juste dessiner la nouvelle vue
+				for (let comp of newComponents) {
+					if (comp && comp.visible) {
+						const isFixed = this.isFixedComponent(comp);
+						
+						if (isFixed) {
+							comp.draw(ctx);
+						} else {
+							ctx.save();
+							ctx.translate(0, this.scrollOffset);
+							comp.draw(ctx);
+							ctx.restore();
+						}
+					}
+				}
+				break;
+		}
 	}
 
-    // 3. Ajoutez une méthode renderFull() optimisée
-    renderFull() {
-        // Sauvegarder le contexte
-        this.ctx.save();
-
-        // Séparer les composants
-        const scrollableComponents = [];
-        const fixedComponents = [];
-
-        for (let comp of this.components) {
-            if (this.isFixedComponent(comp)) {
-                fixedComponents.push(comp);
-            } else {
-                scrollableComponents.push(comp);
-            }
-        }
-
-        // ✅ OPTIMISATION : Dessiner les composants scrollables avec translation
-        if (scrollableComponents.length > 0) {
-            this.ctx.save();
-            this.ctx.translate(0, this.scrollOffset);
-
-            for (let comp of scrollableComponents) {
-                if (comp.visible) {
-                    // Viewport culling
-                    const screenY = comp.y + this.scrollOffset;
-                    const isInViewport = screenY + comp.height >= -100 && screenY <= this.height + 100;
-
-                    if (isInViewport) {
-                        comp.draw(this.ctx);
-                    }
-                }
-            }
-
-            this.ctx.restore();
-        }
+	/**
+	 * Mettre à jour la progression de la transition
+	 * @private
+	 */
+	updateTransition() {
+		if (!this.transitionState.isTransitioning) return;
+		
+		const elapsed = Date.now() - this.transitionState.startTime;
+		this.transitionState.progress = Math.min(elapsed / this.transitionState.duration, 1);
+		
+		// Si la transition est terminée
+		if (this.transitionState.progress >= 1) {
+			this.transitionState.isTransitioning = false;
+			
+			// Marquer tous les nouveaux composants comme sales pour le prochain rendu
+			this.transitionState.newComponents.forEach(comp => {
+				this.markComponentDirty(comp);
+			});
+		}
+	}
 
-        // Dessiner les composants fixes
-        for (let comp of fixedComponents) {
-            if (comp.visible) {
-                comp.draw(this.ctx);
-            }
-        }
+	/**
+	 * Rendu complet normal (sans transition)
+	 * @private
+	 */
+	renderFull() {
+		// Sauvegarder le contexte
+		this.ctx.save();
+		
+		// Séparer les composants
+		const scrollableComponents = [];
+		const fixedComponents = [];
+		
+		for (let comp of this.components) {
+			if (this.isFixedComponent(comp)) {
+				fixedComponents.push(comp);
+			} else {
+				scrollableComponents.push(comp);
+			}
+		}
+		
+		// Dessiner les composants scrollables avec translation
+		if (scrollableComponents.length > 0) {
+			this.ctx.save();
+			this.ctx.translate(0, this.scrollOffset);
+			
+			for (let comp of scrollableComponents) {
+				if (comp.visible) {
+					// Viewport culling
+					const screenY = comp.y + this.scrollOffset;
+					const isInViewport = screenY + comp.height >= -100 && screenY <= this.height + 100;
+					
+					if (isInViewport) {
+						comp.draw(this.ctx);
+					}
+				}
+			}
+			
+			this.ctx.restore();
+		}
+		
+		// Dessiner les composants fixes
+		for (let comp of fixedComponents) {
+			if (comp.visible) {
+				comp.draw(this.ctx);
+			}
+		}
+		
+		// Restaurer le contexte
+		this.ctx.restore();
+	}
 
-        // Restaurer le contexte
-        this.ctx.restore();
-    }
+	   
 
     /**
      * Fait défiler à une position spécifique

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "canvasframework",
-  "version": "0.5.8",
+  "version": "0.5.10",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/beyons/CanvasFramework.git"
+  },
   "description": "Canvas-based cross-platform UI framework (Material & Cupertino)",
   "type": "module",
   "main": "./index.js",