canvasframework 0.6.0 → 0.6.1

package/components/Camera.js

@@ -2,7 +2,9 @@ import Component from '../core/Component.js';
 
 /**
  * Composant Camera autonome avec gestion directe des clics/touches
- * Modes : contain (tout visible + bandes), cover (remplit + crop), fit (centre sans crop)
+ * Modes : contain (tout visible + bandes), cover (remplit + crop)
+ * Layout boutons haut : [switch caméra GAUCHE] [torch CENTRE] [mode DROITE]
+ * Layout bouton bas   : [capture CENTRE]
  */
 class Camera extends Component {
   constructor(framework, options = {}) {
@@ -29,55 +31,56 @@ class Camera extends Component {
 
     // Feedback capture
     this.flashTimer = null;
-    this.previewPhoto = null; // dataUrl dernière photo
+    this.previewPhoto = null;
+    this._previewImg = null; // image pré-chargée
     this.previewTimeout = null;
 
     this.isStarting = false;
+
+    // Taille et position des boutons (haut)
+    this.topBtnSize = 50;
+    this.topBtnMargin = 20;
   }
-  
+
   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
+        const stream = video.srcObject;
+        if (stream && stream.getTracks) {
+          stream.getTracks().forEach(track => track.stop());
+        }
+        video.srcObject = null;
+      }
       if (video.parentNode) {
-          video.parentNode.removeChild(video);
+        video.parentNode.removeChild(video);
       }
     });
   }
 
   async _mount() {
-	super._mount?.();
-
-	// ✅ CORRECTION : Ne démarrer que si visible ET pas en navigation
-	if (this.visible && 
-		  this.autoStart && 
-		  !this.stream && 
-		  !this.isStarting && 
-		  !this.framework._isNavigating) {
-	  this.isStarting = true;
-	  await this.startCamera();
-	  this.isStarting = false;
-	}
-
-	this.setupEventListeners();
+    super._mount?.();
+
+    if (this.visible &&
+        this.autoStart &&
+        !this.stream &&
+        !this.isStarting &&
+        !this.framework._isNavigating) {
+      this.isStarting = true;
+      await this.startCamera();
+      this.isStarting = false;
+    }
+
+    this.setupEventListeners();
   }
-  
+
   onUnmount() {
     this.removeEventListeners();
     this.stopCamera();
     if (this.flashTimer) clearTimeout(this.flashTimer);
     if (this.previewTimeout) clearTimeout(this.previewTimeout);
   }
-  
+
   destroy() {
     this.removeEventListeners();
     this.stopCamera();
@@ -86,35 +89,35 @@ class Camera extends Component {
     super.destroy?.();
   }
 
-  // Écoute directe (indépendante du framework)
+  // ─── Événements ─────────────────────────────────────────────────────────────
+
   setupEventListeners() {
     this.onTouchStart = this.handleTouchStart.bind(this);
-    this.onTouchMove = this.handleTouchMove.bind(this);
-    this.onTouchEnd = this.handleTouchEnd.bind(this);
-    this.onMouseDown = this.handleMouseDown.bind(this);
-    this.onMouseMove = this.handleMouseMove.bind(this);
-    this.onMouseUp = this.handleMouseUp.bind(this);
+    this.onTouchMove  = this.handleTouchMove.bind(this);
+    this.onTouchEnd   = this.handleTouchEnd.bind(this);
+    this.onMouseDown  = this.handleMouseDown.bind(this);
+    this.onMouseMove  = this.handleMouseMove.bind(this);
+    this.onMouseUp    = this.handleMouseUp.bind(this);
 
     const canvas = this.framework.canvas;
     canvas.addEventListener('touchstart', this.onTouchStart, { passive: false });
-    canvas.addEventListener('touchmove', this.onTouchMove, { passive: false });
-    canvas.addEventListener('touchend', this.onTouchEnd, { passive: false });
-    canvas.addEventListener('mousedown', this.onMouseDown);
-    canvas.addEventListener('mousemove', this.onMouseMove);
-    canvas.addEventListener('mouseup', this.onMouseUp);
+    canvas.addEventListener('touchmove',  this.onTouchMove,  { passive: false });
+    canvas.addEventListener('touchend',   this.onTouchEnd,   { passive: false });
+    canvas.addEventListener('mousedown',  this.onMouseDown);
+    canvas.addEventListener('mousemove',  this.onMouseMove);
+    canvas.addEventListener('mouseup',    this.onMouseUp);
   }
 
   removeEventListeners() {
     const canvas = this.framework.canvas;
     canvas.removeEventListener('touchstart', this.onTouchStart);
-    canvas.removeEventListener('touchmove', this.onTouchMove);
-    canvas.removeEventListener('touchend', this.onTouchEnd);
-    canvas.removeEventListener('mousedown', this.onMouseDown);
-    canvas.removeEventListener('mousemove', this.onMouseMove);
-    canvas.removeEventListener('mouseup', this.onMouseUp);
+    canvas.removeEventListener('touchmove',  this.onTouchMove);
+    canvas.removeEventListener('touchend',   this.onTouchEnd);
+    canvas.removeEventListener('mousedown',  this.onMouseDown);
+    canvas.removeEventListener('mousemove',  this.onMouseMove);
+    canvas.removeEventListener('mouseup',    this.onMouseUp);
   }
 
-  // Coordonnées locales
   getLocalPos(clientX, clientY) {
     const rect = this.framework.canvas.getBoundingClientRect();
     const globalX = clientX - rect.left;
@@ -132,13 +135,8 @@ class Camera extends Component {
     this.handlePress(pos.x, pos.y);
   }
 
-  handleTouchMove(e) {
-    e.preventDefault();
-  }
-
-  handleTouchEnd(e) {
-    e.preventDefault();
-  }
+  handleTouchMove(e) { e.preventDefault(); }
+  handleTouchEnd(e)  { e.preventDefault(); }
 
   handleMouseDown(e) {
     const pos = this.getLocalPos(e.clientX, e.clientY);
@@ -146,11 +144,12 @@ class Camera extends Component {
   }
 
   handleMouseMove(e) {}
+  handleMouseUp(e)   {}
 
-  handleMouseUp(e) {}
+  // ─── Caméra ─────────────────────────────────────────────────────────────────
 
   async startCamera() {
-	Camera.cleanupAllCameras();  
+    Camera.cleanupAllCameras();
     if (this.stream) return;
 
     try {
@@ -159,8 +158,8 @@ class Camera extends Component {
       this.stream = await navigator.mediaDevices.getUserMedia({
         video: {
           facingMode: this.facingMode,
-          width: { ideal: 1280 },
-          height: { ideal: 720 },
+          width:     { ideal: 1280 },
+          height:    { ideal: 720 },
           frameRate: { ideal: 30 }
         }
       });
@@ -170,16 +169,16 @@ class Camera extends Component {
       this.torchSupported = !!caps.torch;
 
       this.video = document.createElement('video');
-      this.video.autoplay = true;
+      this.video.autoplay   = true;
       this.video.playsInline = true;
-      this.video.muted = true;
-      this.video.srcObject = this.stream;
+      this.video.muted      = true;
+      this.video.srcObject  = this.stream;
 
       this.video.style.position = 'fixed';
-      this.video.style.left = '-9999px';
-      this.video.style.top = '-9999px';
-      this.video.style.width = '1px';
-      this.video.style.height = '1px';
+      this.video.style.left     = '-9999px';
+      this.video.style.top      = '-9999px';
+      this.video.style.width    = '1px';
+      this.video.style.height   = '1px';
       document.body.appendChild(this.video);
 
       await new Promise(resolve => {
@@ -230,9 +229,7 @@ class Camera extends Component {
 
     const [track] = this.stream.getVideoTracks();
     try {
-      await track.applyConstraints({
-        advanced: [{ torch: !this.torchOn }]
-      });
+      await track.applyConstraints({ advanced: [{ torch: !this.torchOn }] });
       this.torchOn = !this.torchOn;
       this.markDirty();
     } catch (err) {
@@ -247,7 +244,7 @@ class Camera extends Component {
     }
 
     const canvas = document.createElement('canvas');
-    canvas.width = this.video.videoWidth;
+    canvas.width  = this.video.videoWidth;
     canvas.height = this.video.videoHeight;
 
     const ctx = canvas.getContext('2d');
@@ -255,7 +252,6 @@ class Camera extends Component {
 
     const dataUrl = canvas.toDataURL('image/jpeg', 0.92);
     if (this.onPhoto) this.onPhoto(dataUrl);
-    console.log('Photo capturée ! DataURL:', dataUrl.substring(0, 50) + '...');
 
     // Feedback : flash + preview 3s
     this.flashTimer = setTimeout(() => {
@@ -263,9 +259,14 @@ class Camera extends Component {
       this.markDirty();
     }, 200);
 
+    // Pré-charger l'image une seule fois
+    this._previewImg = new Image();
+    this._previewImg.src = dataUrl;
     this.previewPhoto = dataUrl;
+
     this.previewTimeout = setTimeout(() => {
       this.previewPhoto = null;
+      this._previewImg  = null;
       this.markDirty();
     }, 3000);
 
@@ -279,383 +280,329 @@ class Camera extends Component {
     this.markDirty();
   }
 
-  handlePress(relX, relY) {
-	  // Capture centrale
-	  const captureX = this.width / 2;
-	  const captureY = this.height - 60;
-	  if (Math.hypot(relX - captureX, relY - captureY) < this.captureButtonRadius + 10) {
-		this.capturePhoto();
-		return;
-	  }
-
-	  // Switch caméra (haut gauche)
-	  if (relX < 70 && relY < 70) {
-		this.switchCamera();
-		return;
-	  }
-
-	  // Torch (haut droite) - zone précise
-	  if (this.torchSupported && relX > this.width - 75 && relX < this.width - 25 && relY > 20 && relY < 70) {
-		this.toggleTorch();
-		return;
-	  }
-
-	  // Switch mode (haut droite, décalé à gauche de la torche)
-	  const modeButtonX = this.width - 130;
-	  const modeButtonY = 20;
-	  if (relX > modeButtonX && relX < modeButtonX + this.modeButtonSize &&
-		  relY > modeButtonY && relY < modeButtonY + this.modeButtonSize) {
-		this.switchFitMode();
-		return;
-	  }
+  // ─── Zones des boutons ───────────────────────────────────────────────────────
+  // Layout haut : [switch caméra GAUCHE] [torch CENTRE] [mode DROITE]
+  // Layout bas  : [capture CENTRE]
+
+  _getSwitchBtnBounds() {
+    return {
+      x:    this.topBtnMargin,
+      y:    this.topBtnMargin,
+      size: this.topBtnSize
+    };
   }
 
-  drawContainIcon(ctx, x, y, size) {
-    // Icône "contain" : rectangle avec flèches vers l'intérieur
-    const pad = size * 0.2;
-    ctx.strokeStyle = '#000';
-    ctx.lineWidth = 2;
-    
-    // Rectangle extérieur
-    ctx.strokeRect(x + pad, y + pad, size - pad * 2, size - pad * 2);
-    
-    // Flèches pointant vers l'intérieur
-    const arrowSize = size * 0.15;
-    ctx.fillStyle = '#000';
-    
-    // Flèche haut
-    ctx.beginPath();
-    ctx.moveTo(x + size/2, y + pad - 2);
-    ctx.lineTo(x + size/2 - arrowSize, y + pad + arrowSize);
-    ctx.lineTo(x + size/2 + arrowSize, y + pad + arrowSize);
-    ctx.fill();
-    
-    // Flèche bas
-    ctx.beginPath();
-    ctx.moveTo(x + size/2, y + size - pad + 2);
-    ctx.lineTo(x + size/2 - arrowSize, y + size - pad - arrowSize);
-    ctx.lineTo(x + size/2 + arrowSize, y + size - pad - arrowSize);
-    ctx.fill();
-    
-    // Flèche gauche
-    ctx.beginPath();
-    ctx.moveTo(x + pad - 2, y + size/2);
-    ctx.lineTo(x + pad + arrowSize, y + size/2 - arrowSize);
-    ctx.lineTo(x + pad + arrowSize, y + size/2 + arrowSize);
-    ctx.fill();
-    
-    // Flèche droite
-    ctx.beginPath();
-    ctx.moveTo(x + size - pad + 2, y + size/2);
-    ctx.lineTo(x + size - pad - arrowSize, y + size/2 - arrowSize);
-    ctx.lineTo(x + size - pad - arrowSize, y + size/2 + arrowSize);
-    ctx.fill();
+  _getTorchBtnBounds() {
+    return {
+      x:    (this.width - this.topBtnSize) / 2,
+      y:    this.topBtnMargin,
+      size: this.topBtnSize
+    };
   }
 
-  drawCoverIcon(ctx, x, y, size) {
-    // Icône "cover" : rectangle avec flèches vers l'extérieur
-    const pad = size * 0.2;
-    ctx.strokeStyle = '#000';
-    ctx.lineWidth = 2;
-    
-    // Rectangle intérieur
-    ctx.strokeRect(x + pad, y + pad, size - pad * 2, size - pad * 2);
-    
-    // Flèches pointant vers l'extérieur
-    const arrowSize = size * 0.15;
-    ctx.fillStyle = '#000';
-    
-    // Flèche haut
-    ctx.beginPath();
-    ctx.moveTo(x + size/2, y + 2);
-    ctx.lineTo(x + size/2 - arrowSize, y + arrowSize + 2);
-    ctx.lineTo(x + size/2 + arrowSize, y + arrowSize + 2);
-    ctx.fill();
-    
-    // Flèche bas
-    ctx.beginPath();
-    ctx.moveTo(x + size/2, y + size - 2);
-    ctx.lineTo(x + size/2 - arrowSize, y + size - arrowSize - 2);
-    ctx.lineTo(x + size/2 + arrowSize, y + size - arrowSize - 2);
-    ctx.fill();
-    
-    // Flèche gauche
-    ctx.beginPath();
-    ctx.moveTo(x + 2, y + size/2);
-    ctx.lineTo(x + arrowSize + 2, y + size/2 - arrowSize);
-    ctx.lineTo(x + arrowSize + 2, y + size/2 + arrowSize);
-    ctx.fill();
-    
-    // Flèche droite
-    ctx.beginPath();
-    ctx.moveTo(x + size - 2, y + size/2);
-    ctx.lineTo(x + size - arrowSize - 2, y + size/2 - arrowSize);
-    ctx.lineTo(x + size - arrowSize - 2, y + size/2 + arrowSize);
-    ctx.fill();
+  _getModeBtnBounds() {
+    const yCenter = this.topBtnMargin + this.topBtnSize / 2;
+    return {
+      x:    this.width - this.topBtnMargin - this.modeButtonSize,
+      y:    yCenter - this.modeButtonSize / 2,
+      size: this.modeButtonSize
+    };
+  }
+
+  _getCaptureBtnCenter() {
+    return {
+      cx: this.width / 2,
+      cy: this.height - 88
+    };
+  }
+
+  // ─── Gestion des clics ──────────────────────────────────────────────────────
+
+  handlePress(relX, relY) {
+    // Guard : ignorer tout clic hors du composant
+    if (relX < 0 || relX > this.width || relY < 0 || relY > this.height) return;
+
+    // Bouton capture (bas centre)
+    const { cx, cy } = this._getCaptureBtnCenter();
+    if (Math.hypot(relX - cx, relY - cy) < this.captureButtonRadius + 10) {
+      this.capturePhoto();
+      return;
+    }
+
+    // Switch caméra (haut gauche)
+    const sw = this._getSwitchBtnBounds();
+    if (Math.hypot(relX - (sw.x + sw.size / 2), relY - (sw.y + sw.size / 2)) < sw.size / 2 + 5) {
+      this.switchCamera();
+      return;
+    }
+
+    // Torch (haut centre)
+    if (this.torchSupported) {
+      const tb = this._getTorchBtnBounds();
+      if (Math.hypot(relX - (tb.x + tb.size / 2), relY - (tb.y + tb.size / 2)) < tb.size / 2 + 5) {
+        this.toggleTorch();
+        return;
+      }
+    }
+
+    // Mode contain/cover (haut droite)
+    const mb = this._getModeBtnBounds();
+    if (relX >= mb.x && relX <= mb.x + mb.size && relY >= mb.y && relY <= mb.y + mb.size) {
+      this.switchFitMode();
+      return;
+    }
   }
 
-    drawContainIcon(ctx, x, y, size) {
-    // Icône "contain" : rectangle avec flèches vers l'intérieur
+  // ─── Icônes ─────────────────────────────────────────────────────────────────
+
+  drawContainIcon(ctx, x, y, size) {
     const pad = size * 0.2;
     ctx.strokeStyle = '#000';
     ctx.lineWidth = 2;
-    
-    // Rectangle extérieur
     ctx.strokeRect(x + pad, y + pad, size - pad * 2, size - pad * 2);
-    
-    // Flèches pointant vers l'intérieur
+
     const arrowSize = size * 0.15;
     ctx.fillStyle = '#000';
-    
-    // Flèche haut
+
     ctx.beginPath();
-    ctx.moveTo(x + size/2, y + pad - 2);
-    ctx.lineTo(x + size/2 - arrowSize, y + pad + arrowSize);
-    ctx.lineTo(x + size/2 + arrowSize, y + pad + arrowSize);
+    ctx.moveTo(x + size / 2, y + pad - 2);
+    ctx.lineTo(x + size / 2 - arrowSize, y + pad + arrowSize);
+    ctx.lineTo(x + size / 2 + arrowSize, y + pad + arrowSize);
     ctx.fill();
-    
-    // Flèche bas
+
     ctx.beginPath();
-    ctx.moveTo(x + size/2, y + size - pad + 2);
-    ctx.lineTo(x + size/2 - arrowSize, y + size - pad - arrowSize);
-    ctx.lineTo(x + size/2 + arrowSize, y + size - pad - arrowSize);
+    ctx.moveTo(x + size / 2, y + size - pad + 2);
+    ctx.lineTo(x + size / 2 - arrowSize, y + size - pad - arrowSize);
+    ctx.lineTo(x + size / 2 + arrowSize, y + size - pad - arrowSize);
     ctx.fill();
-    
-    // Flèche gauche
+
     ctx.beginPath();
-    ctx.moveTo(x + pad - 2, y + size/2);
-    ctx.lineTo(x + pad + arrowSize, y + size/2 - arrowSize);
-    ctx.lineTo(x + pad + arrowSize, y + size/2 + arrowSize);
+    ctx.moveTo(x + pad - 2, y + size / 2);
+    ctx.lineTo(x + pad + arrowSize, y + size / 2 - arrowSize);
+    ctx.lineTo(x + pad + arrowSize, y + size / 2 + arrowSize);
     ctx.fill();
-    
-    // Flèche droite
+
     ctx.beginPath();
-    ctx.moveTo(x + size - pad + 2, y + size/2);
-    ctx.lineTo(x + size - pad - arrowSize, y + size/2 - arrowSize);
-    ctx.lineTo(x + size - pad - arrowSize, y + size/2 + arrowSize);
+    ctx.moveTo(x + size - pad + 2, y + size / 2);
+    ctx.lineTo(x + size - pad - arrowSize, y + size / 2 - arrowSize);
+    ctx.lineTo(x + size - pad - arrowSize, y + size / 2 + arrowSize);
     ctx.fill();
   }
 
   drawCoverIcon(ctx, x, y, size) {
-    // Icône "cover" : rectangle avec flèches vers l'extérieur
     const pad = size * 0.2;
     ctx.strokeStyle = '#000';
     ctx.lineWidth = 2;
-    
-    // Rectangle intérieur
     ctx.strokeRect(x + pad, y + pad, size - pad * 2, size - pad * 2);
-    
-    // Flèches pointant vers l'extérieur
+
     const arrowSize = size * 0.15;
     ctx.fillStyle = '#000';
-    
-    // Flèche haut
+
     ctx.beginPath();
-    ctx.moveTo(x + size/2, y + 2);
-    ctx.lineTo(x + size/2 - arrowSize, y + arrowSize + 2);
-    ctx.lineTo(x + size/2 + arrowSize, y + arrowSize + 2);
+    ctx.moveTo(x + size / 2, y + 2);
+    ctx.lineTo(x + size / 2 - arrowSize, y + arrowSize + 2);
+    ctx.lineTo(x + size / 2 + arrowSize, y + arrowSize + 2);
     ctx.fill();
-    
-    // Flèche bas
+
     ctx.beginPath();
-    ctx.moveTo(x + size/2, y + size - 2);
-    ctx.lineTo(x + size/2 - arrowSize, y + size - arrowSize - 2);
-    ctx.lineTo(x + size/2 + arrowSize, y + size - arrowSize - 2);
+    ctx.moveTo(x + size / 2, y + size - 2);
+    ctx.lineTo(x + size / 2 - arrowSize, y + size - arrowSize - 2);
+    ctx.lineTo(x + size / 2 + arrowSize, y + size - arrowSize - 2);
     ctx.fill();
-    
-    // Flèche gauche
+
     ctx.beginPath();
-    ctx.moveTo(x + 2, y + size/2);
-    ctx.lineTo(x + arrowSize + 2, y + size/2 - arrowSize);
-    ctx.lineTo(x + arrowSize + 2, y + size/2 + arrowSize);
+    ctx.moveTo(x + 2, y + size / 2);
+    ctx.lineTo(x + arrowSize + 2, y + size / 2 - arrowSize);
+    ctx.lineTo(x + arrowSize + 2, y + size / 2 + arrowSize);
     ctx.fill();
-    
-    // Flèche droite
+
     ctx.beginPath();
-    ctx.moveTo(x + size - 2, y + size/2);
-    ctx.lineTo(x + size - arrowSize - 2, y + size/2 - arrowSize);
-    ctx.lineTo(x + size - arrowSize - 2, y + size/2 + arrowSize);
+    ctx.moveTo(x + size - 2, y + size / 2);
+    ctx.lineTo(x + size - arrowSize - 2, y + size / 2 - arrowSize);
+    ctx.lineTo(x + size - arrowSize - 2, y + size / 2 + arrowSize);
     ctx.fill();
   }
 
   drawSwitchCameraIcon(ctx, x, y, size) {
-    // Icône de switch caméra : deux caméras avec flèche circulaire
     const centerX = x + size / 2;
     const centerY = y + size / 2;
-    const radius = size * 0.35;
-    
+    const radius  = size * 0.35;
+
     ctx.strokeStyle = '#ffffff';
-    ctx.lineWidth = 3;
-    ctx.lineCap = 'round';
-    
-    // Arc circulaire (flèche de rotation)
+    ctx.lineWidth   = 3;
+    ctx.lineCap     = 'round';
+
     ctx.beginPath();
     ctx.arc(centerX, centerY, radius, -Math.PI * 0.7, Math.PI * 0.7);
     ctx.stroke();
-    
-    // Flèche en haut à droite
-    const arrowSize = size * 0.15;
+
+    const arrowSize  = size * 0.15;
     const arrowAngle = Math.PI * 0.7;
-    const arrowX = centerX + radius * Math.cos(arrowAngle);
-    const arrowY = centerY + radius * Math.sin(arrowAngle);
-    
+    const arrowX     = centerX + radius * Math.cos(arrowAngle);
+    const arrowY     = centerY + radius * Math.sin(arrowAngle);
+
     ctx.fillStyle = '#ffffff';
     ctx.beginPath();
     ctx.moveTo(arrowX, arrowY);
     ctx.lineTo(arrowX - arrowSize, arrowY - arrowSize * 0.5);
     ctx.lineTo(arrowX - arrowSize * 0.5, arrowY + arrowSize);
     ctx.fill();
-    
-    // Mini caméra au centre
-    const camWidth = size * 0.25;
+
+    const camWidth  = size * 0.25;
     const camHeight = size * 0.18;
-    const camX = centerX - camWidth / 2;
-    const camY = centerY - camHeight / 2;
-    
     ctx.fillStyle = '#ffffff';
-    ctx.fillRect(camX, camY, camWidth, camHeight);
-    
-    // Objectif
+    ctx.fillRect(centerX - camWidth / 2, centerY - camHeight / 2, camWidth, camHeight);
+
     ctx.fillStyle = '#000';
     ctx.beginPath();
     ctx.arc(centerX, centerY, size * 0.08, 0, Math.PI * 2);
     ctx.fill();
   }
 
-  draw(ctx) {
-  ctx.save();
+  drawTorchIcon(ctx, x, y, size, torchOn) {
+    const cx = x + size / 2;
+    const cy = y + size / 2;
 
-  ctx.fillStyle = '#000';
-  ctx.fillRect(this.x, this.y, this.width, this.height);
+    ctx.fillStyle = torchOn ? 'rgba(255, 235, 59, 0.9)' : 'rgba(0, 0, 0, 0.55)';
+    ctx.beginPath();
+    ctx.arc(cx, cy, size / 2, 0, Math.PI * 2);
+    ctx.fill();
 
-  // Flash blanc après capture
-  if (this.flashTimer) {
-    ctx.fillStyle = 'rgba(255,255,255,0.6)';
-    ctx.fillRect(this.x, this.y, this.width, this.height);
+    ctx.strokeStyle = torchOn ? '#f9a825' : 'rgba(255,255,255,0.3)';
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.arc(cx, cy, size / 2, 0, Math.PI * 2);
+    ctx.stroke();
+
+    ctx.font          = `${Math.round(size * 0.48)}px Arial`;
+    ctx.textAlign     = 'center';
+    ctx.textBaseline  = 'middle';
+    ctx.fillStyle     = torchOn ? '#000000' : '#ffffff';
+    ctx.fillText('⚡', cx, cy);
   }
 
-  if (this.error) {
-    ctx.fillStyle = '#ff4444';
-    ctx.font = '16px Arial';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(this.error, this.x + this.width/2, this.y + this.height/2);
-  } else if (!this.loaded) {
-    ctx.fillStyle = '#fff';
-    ctx.font = '16px Arial';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText('Démarrage caméra...', this.x + this.width/2, this.y + this.height/2);
-  } else if (this.video && this.loaded) {
-    const videoRatio = this.video.videoWidth / this.video.videoHeight;
-    const canvasRatio = this.width / this.height;
-
-    let drawWidth = this.width;
-    let drawHeight = this.height;
-    let offsetX = 0;
-    let offsetY = 0;
-
-    if (this.fitMode === 'cover') {
-      if (videoRatio > canvasRatio) {
-        drawHeight = this.height;
-        drawWidth = drawHeight * videoRatio;
-        offsetX = (this.width - drawWidth) / 2;
-      } else {
-        drawWidth = this.width;
-        drawHeight = drawWidth / videoRatio;
-        offsetY = (this.height - drawHeight) / 2;
+  // ─── Rendu ──────────────────────────────────────────────────────────────────
+
+  draw(ctx) {
+    ctx.save();
+
+    // Fond noir
+    ctx.fillStyle = '#000';
+    ctx.fillRect(this.x, this.y, this.width, this.height);
+
+    // Flash blanc après capture
+    if (this.flashTimer) {
+      ctx.fillStyle = 'rgba(255,255,255,0.6)';
+      ctx.fillRect(this.x, this.y, this.width, this.height);
+    }
+
+    // États erreur / chargement / vidéo
+    if (this.error) {
+      ctx.fillStyle    = '#ff4444';
+      ctx.font         = '16px Arial';
+      ctx.textAlign    = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this.error, this.x + this.width / 2, this.y + this.height / 2);
+
+    } else if (!this.loaded) {
+      ctx.fillStyle    = '#fff';
+      ctx.font         = '16px Arial';
+      ctx.textAlign    = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText('Démarrage caméra...', this.x + this.width / 2, this.y + this.height / 2);
+
+    } else if (this.video && this.loaded) {
+      const videoRatio  = this.video.videoWidth / this.video.videoHeight;
+      const canvasRatio = this.width / this.height;
+
+      let drawWidth  = this.width;
+      let drawHeight = this.height;
+      let offsetX    = 0;
+      let offsetY    = 0;
+
+      if (this.fitMode === 'cover') {
+        if (videoRatio > canvasRatio) {
+          drawHeight = this.height;
+          drawWidth  = drawHeight * videoRatio;
+          offsetX    = (this.width - drawWidth) / 2;
+        } else {
+          drawWidth  = this.width;
+          drawHeight = drawWidth / videoRatio;
+          offsetY    = (this.height - drawHeight) / 2;
+        }
+      } else if (this.fitMode === 'contain') {
+        if (videoRatio > canvasRatio) {
+          drawWidth  = this.width;
+          drawHeight = drawWidth / videoRatio;
+          offsetY    = (this.height - drawHeight) / 2;
+        } else {
+          drawHeight = this.height;
+          drawWidth  = drawHeight * videoRatio;
+          offsetX    = (this.width - drawWidth) / 2;
+        }
       }
-    } else if (this.fitMode === 'contain') {
-      if (videoRatio > canvasRatio) {
-        drawWidth = this.width;
-        drawHeight = drawWidth / videoRatio;
-        offsetY = (this.height - drawHeight) / 2;
-      } else {
-        drawHeight = this.height;
-        drawWidth = drawHeight * videoRatio;
-        offsetX = (this.width - drawWidth) / 2;
+
+      ctx.drawImage(this.video, this.x + offsetX, this.y + offsetY, drawWidth, drawHeight);
+
+      // Mini preview dernière photo (bas droite, 3s)
+      if (this.previewPhoto && this._previewImg?.complete) {
+        const previewSize = 80;
+        const px = this.x + this.width  - previewSize - 10;
+        const py = this.y + this.height - previewSize - 10;
+        ctx.drawImage(this._previewImg, px, py, previewSize, previewSize);
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth   = 2;
+        ctx.strokeRect(px, py, previewSize, previewSize);
       }
     }
 
-    ctx.drawImage(this.video, this.x + offsetX, this.y + offsetY, drawWidth, drawHeight);
-
-    // Mini preview dernière photo (bas droite, 3s)
-    if (this.previewPhoto) {
-      const previewSize = 80;
-      const img = new Image();
-      img.src = this.previewPhoto;
-      ctx.drawImage(img, this.x + this.width - previewSize - 10, this.y + this.height - previewSize - 10, previewSize, previewSize);
-      ctx.strokeStyle = '#fff';
-      ctx.lineWidth = 2;
-      ctx.strokeRect(this.x + this.width - previewSize - 10, this.y + this.height - previewSize - 10, previewSize, previewSize);
-    }
-  }
+    // ── Barre bas ───────────────────────────────────────────────────────────
+    ctx.fillStyle = 'rgba(0,0,0,0.5)';
+    ctx.fillRect(this.x, this.y + this.height - 100, this.width, 100);
 
-  // Contrôles bas
-  ctx.fillStyle = 'rgba(0,0,0,0.5)';
-  ctx.fillRect(this.x, this.y + this.height - 100, this.width, 100);
-
-  // Bouton capture
-  ctx.fillStyle = '#ffffff';
-  ctx.beginPath();
-  ctx.arc(this.x + this.width/2, this.y + this.height - 50, this.captureButtonRadius, 0, Math.PI * 2);
-  ctx.fill();
-
-  ctx.strokeStyle = '#ff4444';
-  ctx.lineWidth = 6;
-  ctx.beginPath();
-  ctx.arc(this.x + this.width/2, this.y + this.height - 50, this.captureButtonRadius + 10, 0, Math.PI * 2);
-  ctx.stroke();
-
-  // Switch caméra avec icône
-  const switchBtnX = this.x + 20;
-  const switchBtnY = this.y + 20;
-  const switchBtnSize = 50;
-
-  ctx.fillStyle = 'rgba(0,0,0,0.5)';
-  ctx.beginPath();
-  ctx.arc(switchBtnX + switchBtnSize/2, switchBtnY + switchBtnSize/2, switchBtnSize/2, 0, Math.PI * 2);
-  ctx.fill();
-
-  this.drawSwitchCameraIcon(ctx, switchBtnX, switchBtnY, switchBtnSize);
-
-  // Bouton torche (haut droite)
-  if (this.torchSupported) {
-    const torchBtnX = this.x + this.width - 75;
-    const torchBtnY = this.y + 20;
-    const torchBtnSize = 50;
-
-    ctx.fillStyle = this.torchOn ? 'rgba(255,235,59,0.8)' : 'rgba(0,0,0,0.5)';
+    // Bouton capture (bas centre)
+    const { cx, cy } = this._getCaptureBtnCenter();
+    ctx.fillStyle = '#ffffff';
     ctx.beginPath();
-    ctx.arc(torchBtnX + torchBtnSize/2, torchBtnY + torchBtnSize/2, torchBtnSize/2, 0, Math.PI * 2);
+    ctx.arc(this.x + cx, this.y + cy, this.captureButtonRadius, 0, Math.PI * 2);
     ctx.fill();
 
-    ctx.fillStyle = '#fff';
-    ctx.font = '24px Arial';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText('⚡', torchBtnX + torchBtnSize/2, torchBtnY + torchBtnSize/2);
-  }
+    ctx.strokeStyle = '#ff4444';
+    ctx.lineWidth   = 6;
+    ctx.beginPath();
+    ctx.arc(this.x + cx, this.y + cy, this.captureButtonRadius + 10, 0, Math.PI * 2);
+    ctx.stroke();
 
-  // Bouton switch mode (décalé à gauche de la torche)
-  const btnX = this.x + this.width - 130;
-  const btnY = this.y + 20;
+    // ── Boutons haut ────────────────────────────────────────────────────────
 
-  ctx.fillStyle = 'rgba(255,255,255,0.9)';
-  ctx.fillRect(btnX, btnY, this.modeButtonSize, this.modeButtonSize);
+    // 1. Switch caméra (GAUCHE)
+    const sw = this._getSwitchBtnBounds();
+    ctx.fillStyle = 'rgba(0,0,0,0.5)';
+    ctx.beginPath();
+    ctx.arc(this.x + sw.x + sw.size / 2, this.y + sw.y + sw.size / 2, sw.size / 2, 0, Math.PI * 2);
+    ctx.fill();
+    this.drawSwitchCameraIcon(ctx, this.x + sw.x, this.y + sw.y, sw.size);
 
-  ctx.strokeStyle = '#000';
-  ctx.lineWidth = 2;
-  ctx.strokeRect(btnX, btnY, this.modeButtonSize, this.modeButtonSize);
+    // 2. Mode contain/cover (DROITE)
+    const mb = this._getModeBtnBounds();
+    ctx.fillStyle = 'rgba(255,255,255,0.9)';
+    ctx.beginPath();
+    ctx.arc(this.x + mb.x + mb.size / 2, this.y + mb.y + mb.size / 2, mb.size / 2, 0, Math.PI * 2);
+    ctx.fill();
+    if (this.fitMode === 'contain') {
+      this.drawContainIcon(ctx, this.x + mb.x, this.y + mb.y, mb.size);
+    } else {
+      this.drawCoverIcon(ctx, this.x + mb.x, this.y + mb.y, mb.size);
+    }
 
-  if (this.fitMode === 'contain') {
-    this.drawContainIcon(ctx, btnX, btnY, this.modeButtonSize);
-  } else {
-    this.drawCoverIcon(ctx, btnX, btnY, this.modeButtonSize);
-  }
+    // 3. Torch (CENTRE) — dessiné en dernier, jamais caché
+    if (this.torchSupported) {
+      const tb = this._getTorchBtnBounds();
+      this.drawTorchIcon(ctx, this.x + tb.x, this.y + tb.y, tb.size, this.torchOn);
+    }
 
-  ctx.restore();
-}
+    ctx.restore();
+  }
 }
 
 export default Camera;

package/components/FloatedCamera.js

@@ -572,11 +572,10 @@ class FloatedCamera extends Component {
 
     // 2. Mode contain/cover (DROITE)
     const mb = this._getModeBtnBounds();
-    ctx.fillStyle = 'rgba(255,255,255,0.9)';
-    ctx.fillRect(this.x + mb.x, this.y + mb.y, mb.size, mb.size);
-    ctx.strokeStyle = '#000';
-    ctx.lineWidth = 2;
-    ctx.strokeRect(this.x + mb.x, this.y + mb.y, mb.size, mb.size);
+	ctx.fillStyle = 'rgba(255,255,255,0.9)';
+	ctx.beginPath();
+	ctx.arc(this.x + mb.x + mb.size / 2, this.y + mb.y + mb.size / 2, mb.size / 2, 0, Math.PI * 2);
+	ctx.fill();
     if (this.fitMode === 'contain') {
       this.drawContainIcon(ctx, this.x + mb.x, this.y + mb.y, mb.size);
     } else {

package/core/CanvasFramework.js

@@ -585,6 +585,7 @@ class CanvasFramework {
 
         this.setupEventListeners();
         this.setupHistoryListener();
+		this._initNavigationGuard(); // ← AJOUTER
 
         this.startRenderLoop();
 
@@ -635,6 +636,13 @@ class CanvasFramework {
         }
 
     }
+	
+	_initNavigationGuard() {
+		// Injecter 2 entrées : une base + la route actuelle
+		// Ainsi le navigateur a toujours une entrée "avant" à consommer
+		window.history.replaceState({ route: '/', _guard: true }, '', '/');
+		window.history.pushState({ route: '/', _app: true }, '', '/');
+	}
 
 	/**
 	 * Crée un élément DOM temporaire, l'ajoute au body, exécute une callback, puis le supprime
@@ -1963,16 +1971,51 @@ class CanvasFramework {
      * @private
      */
     setupHistoryListener() {
-        window.addEventListener('popstate', (e) => {
-            if (e.state && e.state.route) {
-                this.navigateTo(e.state.route, {
-                    replace: true,
-                    animate: true,
-                    direction: 'back'
-                });
-            }
-        });
-    }
+		window.addEventListener('popstate', (e) => {
+			// Cas 1 : L'app a un historique interne → naviguer en arrière dans l'app
+			if (this.historyIndex > 0) {
+				this.historyIndex--;
+				const entry = this.history[this.historyIndex];
+
+				// Recharger la vue précédente sans toucher window.history
+				this._navigateInternal(entry.path, {
+					replace: true,
+					animate: true,
+					direction: 'back'
+				});
+
+				// Réinjecter une entrée pour ne jamais vider la pile navigateur
+				window.history.pushState({ route: entry.path, _app: true }, '', entry.path);
+
+			} else {
+				// Cas 2 : Plus d'historique interne → réinjecter et ignorer
+				// (empêche de quitter l'app)
+				const currentPath = this.currentRoute || '/';
+				window.history.pushState({ route: currentPath, _app: true }, '', currentPath);
+
+				// Optionnel : afficher un toast "Appuyez encore pour quitter"
+				this._handleBackExitAttempt();
+			}
+		});
+	}
+	
+	_handleBackExitAttempt() {
+		const now = Date.now();
+
+		if (this._lastBackAttempt && (now - this._lastBackAttempt) < 2000) {
+			// Deux back rapides → vraiment quitter (sur PWA/WebView)
+			// Sur navigateur standard ce n'est pas possible, mais sur Capacitor/Cordova oui
+			if (window.navigator.app?.exitApp) {
+				window.navigator.app.exitApp(); // Cordova
+			} else if (window.Capacitor?.Plugins?.App) {
+				window.Capacitor.Plugins.App.exitApp(); // Capacitor
+			}
+			this._lastBackAttempt = null;
+		} else {
+			this._lastBackAttempt = now;
+			this.showToast('Appuyez encore pour quitter', 2000);
+		}
+	}
 
     // ===== MÉTHODES DE ROUTING =====
 
@@ -2207,6 +2250,20 @@ class CanvasFramework {
 		}
 
 		this._maxScrollDirty = true;
+		
+		// Historique navigateur : seulement si ce n'est pas un retour interne
+		if (!options._internal) {
+			if (!replace) {
+				window.history.pushState({ route: path, _app: true }, '', path);
+			} else {
+				window.history.replaceState({ route: path, _app: true }, '', path);
+			}
+		}
+	}
+	
+	// Alias pour usage interne (sans toucher window.history)
+	_navigateInternal(path, options = {}) {
+		return this.navigateTo(path, { ...options, _internal: true });
 	}
 
     /**

package/package.json

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