canvasframework 0.5.11 → 0.5.13

package/core/CanvasFramework.js

@@ -1932,16 +1932,37 @@ class CanvasFramework {
         // ✅ OPTIONNEL : Marquer les composants comme "dirty" pour forcer le rendu
         this._maxScrollDirty = true;
 		
-		this.components.forEach(comp => {
+		// ✅ ARRÊTER LES CAMÉRAS DES ANCIENS COMPOSANTS
+		oldComponents.forEach(comp => {
 			// Vérifier si c'est un composant caméra
-			if (comp.constructor.name === 'FloatedCamera' || comp.constructor.name === 'Camera') {
+			if (comp.constructor.name === 'FloatedCamera' || 
+				comp.constructor.name === 'Camera' || 
+				comp.constructor.name === 'QRCodeReader') {
 				// Arrêter le stream vidéo
 				if (comp.stopCamera && typeof comp.stopCamera === 'function') {
 					comp.stopCamera();
-					console.log(`🎥 Caméra ${comp.constructor.name} arrêtée avant navigation`);
 				}
 			}
 		});
+		
+		// ✅ NOUVEAU : Vérifier si la nouvelle route contient des composants caméra
+		const hasCamera = this.components.some(comp => 
+			comp.constructor.name === 'FloatedCamera' || 
+			comp.constructor.name === 'Camera' || 
+			comp.constructor.name === 'QRCodeReader'
+		);
+		
+		// Si la nouvelle route N'A PAS de caméra, nettoyer toutes les vidéos après 3 secondes
+		if (!hasCamera) {
+			console.log('⏰ Nettoyage des vidéos programmé dans 3 secondes...');
+			setTimeout(() => {
+				const videos = document.querySelectorAll('video');
+				videos.forEach(v => v.remove());
+			}, 3000);
+		} else {
+			console.log('📹 Route avec caméra détectée, pas de nettoyage automatique');
+		}
+		
     }
 
     /**
@@ -2745,19 +2766,48 @@ class CanvasFramework {
 	renderSimpleTransition() {
 		const { progress, type, direction, oldComponents, newComponents } = this.transitionState;
 		
-		// Calculer la position de décalage
-		const slideOffset = this.width * (1 - progress);
+		// Easing pour une animation plus fluide
+		const eased = this.easeInOutCubic(progress);
+		
 		const directionMultiplier = direction === 'forward' ? 1 : -1;
 		
-		// Pour l'animation slide, dessiner seulement la nouvelle vue à la bonne position
 		if (type === 'slide') {
-			// Sauvegarder le contexte
+			// ✅ AMÉLIORATION 1 : Dessiner l'ANCIENNE vue qui sort
+			this.ctx.save();
+			
+			// L'ancienne vue se déplace vers la gauche/droite
+			const oldOffset = -this.width * eased * directionMultiplier;
+			this.ctx.translate(oldOffset, 0);
+			
+			// Légère transparence pour donner de la profondeur
+			this.ctx.globalAlpha = 1 - (eased * 0.3);
+			
+			// Dessiner les anciens composants
+			for (let comp of oldComponents) {
+				if (comp && comp.visible) {
+					const isFixed = this.isFixedComponent(comp);
+					
+					if (isFixed) {
+						comp.draw(this.ctx);
+					} else {
+						this.ctx.save();
+						this.ctx.translate(0, 0); // Pas de scroll pendant la transition
+						comp.draw(this.ctx);
+						this.ctx.restore();
+					}
+				}
+			}
+			
+			this.ctx.restore();
+			
+			// ✅ AMÉLIORATION 2 : Dessiner la NOUVELLE vue qui entre
 			this.ctx.save();
 			
-			// Appliquer la translation pour l'animation
-			this.ctx.translate(slideOffset * directionMultiplier, 0);
+			// La nouvelle vue arrive de la droite/gauche
+			const newOffset = this.width * (1 - eased) * directionMultiplier;
+			this.ctx.translate(newOffset, 0);
 			
-			// Dessiner UNIQUEMENT les nouveaux composants
+			// Dessiner les nouveaux composants
 			for (let comp of newComponents) {
 				if (comp && comp.visible) {
 					const isFixed = this.isFixedComponent(comp);
@@ -2765,9 +2815,8 @@ class CanvasFramework {
 					if (isFixed) {
 						comp.draw(this.ctx);
 					} else {
-						// Pour les composants scrollables, ajouter le décalage
 						this.ctx.save();
-						this.ctx.translate(0, this.scrollOffset);
+						this.ctx.translate(0, 0); // Pas de scroll pendant la transition
 						comp.draw(this.ctx);
 						this.ctx.restore();
 					}
@@ -2776,20 +2825,39 @@ class CanvasFramework {
 			
 			this.ctx.restore();
 		}
-		// Pour fade, dessiner la nouvelle vue avec alpha
 		else if (type === 'fade') {
+			// Ancienne vue qui fade out
 			this.ctx.save();
-			this.ctx.globalAlpha = progress;
+			this.ctx.globalAlpha = 1 - eased;
+			
+			for (let comp of oldComponents) {
+				if (comp && comp.visible) {
+					const isFixed = this.isFixedComponent(comp);
+					if (isFixed) {
+						comp.draw(this.ctx);
+					} else {
+						this.ctx.save();
+						this.ctx.translate(0, 0);
+						comp.draw(this.ctx);
+						this.ctx.restore();
+					}
+				}
+			}
+			
+			this.ctx.restore();
+			
+			// Nouvelle vue qui fade in
+			this.ctx.save();
+			this.ctx.globalAlpha = eased;
 			
 			for (let comp of newComponents) {
 				if (comp && comp.visible) {
 					const isFixed = this.isFixedComponent(comp);
-					
 					if (isFixed) {
 						comp.draw(this.ctx);
 					} else {
 						this.ctx.save();
-						this.ctx.translate(0, this.scrollOffset);
+						this.ctx.translate(0, 0);
 						comp.draw(this.ctx);
 						this.ctx.restore();
 					}
@@ -2798,7 +2866,6 @@ class CanvasFramework {
 			
 			this.ctx.restore();
 		}
-		// Pour 'none', dessiner normalement
 		else {
 			this.renderFull();
 		}

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasframework",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "repository": {
     "type": "git",
     "url": "https://github.com/beyons/CanvasFramework.git"