canvasframework 0.5.10 → 0.5.12

package/components/Camera.js

@@ -34,6 +34,25 @@ class Camera extends Component {
 
     this.isStarting = false;
   }
+  
+  static cleanupAllCameras() {
+    const allVideos = document.querySelectorAll('video');
+    allVideos.forEach(video => {
+      // Arrêter les streams
+      if (video.srcObject) {
+         const stream = video.srcObject;
+         if (stream && stream.getTracks) {
+             stream.getTracks().forEach(track => track.stop());
+         }
+	     video.srcObject = null;     
+  	  }
+            
+      // Supprimer du DOM
+      if (video.parentNode) {
+          video.parentNode.removeChild(video);
+      }
+    });
+  }
 
   async _mount() {
     super._mount?.();
@@ -120,6 +139,7 @@ class Camera extends Component {
   handleMouseUp(e) {}
 
   async startCamera() {
+	Camera.cleanupAllCameras();  
     if (this.stream) return;
 
     try {

package/components/FloatedCamera.js

@@ -1,7 +1,7 @@
 import Component from '../core/Component.js';
 
 /**
- * Composant FloatedCamera autonome avec gestion directe des clics/touches
+ * Composant Camera autonome avec gestion directe des clics/touches
  * Modes : contain (tout visible + bandes), cover (remplit + crop), fit (centre sans crop)
  */
 class FloatedCamera extends Component {
@@ -34,6 +34,25 @@ class FloatedCamera extends Component {
 
     this.isStarting = false;
   }
+  
+  static cleanupAllCameras() {
+    const allVideos = document.querySelectorAll('video');
+    allVideos.forEach(video => {
+      // Arrêter les streams
+      if (video.srcObject) {
+         const stream = video.srcObject;
+         if (stream && stream.getTracks) {
+             stream.getTracks().forEach(track => track.stop());
+         }
+	     video.srcObject = null;     
+  	  }
+            
+      // Supprimer du DOM
+      if (video.parentNode) {
+          video.parentNode.removeChild(video);
+      }
+    });
+  }
 
   async _mount() {
     super._mount?.();
@@ -120,6 +139,7 @@ class FloatedCamera extends Component {
   handleMouseUp(e) {}
 
   async startCamera() {
+	FloatedCamera.cleanupAllCameras();  
     if (this.stream) return;
 
     try {

package/core/CanvasFramework.js

@@ -1781,6 +1781,7 @@ class CanvasFramework {
      * @private
      */
     async navigateTo(path, options = {}) {
+		
         const {
             replace = false,
                 animate = true,
@@ -1803,7 +1804,7 @@ class CanvasFramework {
         } = match;
 
         // ===== LIFECYCLE: AVANT DE QUITTER L'ANCIENNE ROUTE =====
-
+		
         // Hook beforeLeave de la route actuelle (peut bloquer la navigation)
         const currentRouteData = this.routes.get(this.currentRoute);
         if (currentRouteData?.beforeLeave) {
@@ -1930,6 +1931,17 @@ class CanvasFramework {
 
         // ✅ OPTIONNEL : Marquer les composants comme "dirty" pour forcer le rendu
         this._maxScrollDirty = true;
+		
+		this.components.forEach(comp => {
+			// Vérifier si c'est un composant caméra
+			if (comp.constructor.name === 'FloatedCamera' || comp.constructor.name === 'Camera') {
+				// 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`);
+				}
+			}
+		});
     }
 
     /**
@@ -2662,65 +2674,38 @@ class CanvasFramework {
 
 	startRenderLoop() {
 		let lastScrollOffset = this.scrollOffset;
-		let lastRenderMode = 'full';
-		let lastFrameTime = performance.now();
 		
-		const render = (currentTime) => {
-			// Calculer le delta time
-			const deltaTime = currentTime - lastFrameTime;
-			lastFrameTime = currentTime;
-			
+		const render = () => {
 			if (!this._splashFinished) {
 				requestAnimationFrame(render);
 				return;
 			}
 			
-			// 1. Mettre à jour l'animation de transition si active
+			// TOUJOURS effacer l'écran en premier
+			this.ctx.fillStyle = this.backgroundColor || '#ffffff';
+			this.ctx.fillRect(0, 0, this.width, this.height);
+			
+			// Si une transition est en cours
 			if (this.transitionState.isTransitioning) {
-				this.updateTransition();
+				// Mettre à jour la progression
+				const elapsed = Date.now() - this.transitionState.startTime;
+				this.transitionState.progress = Math.min(elapsed / this.transitionState.duration, 1);
 				
-				// Si la transition est terminée, nettoyer
+				// Rendu spécial pour la transition
+				this.renderSimpleTransition();
+				
+				// Si la transition est terminée
 				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;
-			
-			// 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 &&
-				!scrollChanged &&
-				this.dirtyComponents.size < 3) {
-				renderMode = 'dirty';
-			}
-			
-			// 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);
+			} 
+			// Sinon, rendu normal
+			else {
 				this.renderFull();
-			} else {
-				// Rendu optimisé (seulement les composants sales)
-				this._renderDirtyComponents();
 			}
 			
-			lastRenderMode = renderMode;
-			
-			// 5. Calculer et afficher le FPS
+			// Calcul FPS (optionnel)
 			this._frames++;
 			const now = performance.now();
 			const elapsed = now - this._lastFpsTime;
@@ -2731,7 +2716,6 @@ class CanvasFramework {
 				this._lastFpsTime = now;
 			}
 			
-			// Afficher le FPS si activé
 			if (this.showFps) {
 				this.ctx.save();
 				this.ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
@@ -2744,158 +2728,170 @@ class CanvasFramework {
 				this.ctx.restore();
 			}
 			
-			// Indicateurs de débogage si activés
-			if (this.debbug) {
-				this.drawOverflowIndicators();
-			}
-			
-			// Marquer le premier rendu
-			if (!this._firstRenderDone) {
-				this._markFirstRender();
-			}
-			
-			// Mettre à jour l'inertie du scroll si nécessaire
+			// Mettre à jour l'inertie du scroll
 			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(lastFrameTime);
+		render();
 	}
-	
-	
+
 	/**
-	 * Rendu spécial pour les transitions
-	 * @private
+	 * Rendu ultra simple pour la transition slide
 	 */
-	renderTransition() {
-		const ctx = this.ctx;
+	renderSimpleTransition() {
+		const { progress, type, direction, oldComponents, newComponents } = this.transitionState;
 		
-		// Effacer l'écran
-		ctx.fillStyle = this.backgroundColor || '#ffffff';
-		ctx.fillRect(0, 0, this.width, this.height);
+		// Easing pour une animation plus fluide
+		const eased = this.easeInOutCubic(progress);
 		
-		// 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();
-						}
+		if (type === 'slide') {
+			// ✅ 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();
 					}
 				}
-				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();
-						}
+			}
+			
+			this.ctx.restore();
+			
+			// ✅ AMÉLIORATION 2 : Dessiner la NOUVELLE vue qui entre
+			this.ctx.save();
+			
+			// La nouvelle vue arrive de la droite/gauche
+			const newOffset = this.width * (1 - eased) * directionMultiplier;
+			this.ctx.translate(newOffset, 0);
+			
+			// Dessiner les nouveaux composants
+			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, 0); // Pas de scroll pendant la transition
+						comp.draw(this.ctx);
+						this.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();
-						}
+			}
+			
+			this.ctx.restore();
+		}
+		else if (type === 'fade') {
+			// Ancienne vue qui fade out
+			this.ctx.save();
+			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();
 					}
 				}
-				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();
-						}
+			}
+			
+			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, 0);
+						comp.draw(this.ctx);
+						this.ctx.restore();
 					}
 				}
-				break;
+			}
+			
+			this.ctx.restore();
+		}
+		else {
+			this.renderFull();
 		}
 	}
 
+	/**
+	 * Rendu normal (sans transition)
+	 */
+	renderFull() {
+		this.ctx.save();
+		
+		// Séparer les composants fixes et scrollables
+		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
+		if (scrollableComponents.length > 0) {
+			this.ctx.save();
+			this.ctx.translate(0, this.scrollOffset);
+			
+			for (let comp of scrollableComponents) {
+				if (comp.visible) {
+					comp.draw(this.ctx);
+				}
+			}
+			
+			this.ctx.restore();
+		}
+		
+		// Dessiner les composants fixes
+		for (let comp of fixedComponents) {
+			if (comp.visible) {
+				comp.draw(this.ctx);
+			}
+		}
+		
+		this.ctx.restore();
+	}
+		
 	/**
 	 * Mettre à jour la progression de la transition
 	 * @private
@@ -3083,8 +3079,4 @@ class CanvasFramework {
     }
 }
 
-export default CanvasFramework;
-
-
-
-
+export default CanvasFramework;

package/package.json

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