canvasframework 0.5.5 → 0.5.7

package/components/FloatedCamera.js

@@ -0,0 +1,624 @@
+import Component from '../core/Component.js';
+
+/**
+ * Composant FloatedCamera autonome avec gestion directe des clics/touches
+ * Modes : contain (tout visible + bandes), cover (remplit + crop), fit (centre sans crop)
+ */
+class FloatedCamera extends Component {
+  constructor(framework, options = {}) {
+    super(framework, options);
+
+    this.facingMode = options.facingMode || 'environment';
+    this.autoStart = options.autoStart !== false;
+    this.onPhoto = options.onPhoto || null;
+
+    this.fitModes = ['contain', 'cover'];
+    this.currentFitModeIndex = 0;
+    this.fitMode = this.fitModes[this.currentFitModeIndex];
+
+    this.stream = null;
+    this.video = null;
+    this.loaded = false;
+    this.error = null;
+
+    this.showControls = true;
+    this.torchSupported = false;
+    this.torchOn = false;
+    this.captureButtonRadius = 35;
+    this.modeButtonSize = 40;
+
+    // Feedback capture
+    this.flashTimer = null;
+    this.previewPhoto = null; // dataUrl dernière photo
+    this.previewTimeout = null;
+
+    this.isStarting = false;
+  }
+
+  async _mount() {
+    super._mount?.();
+
+    // Redémarrage auto si besoin
+    if (this.autoStart && !this.stream && !this.isStarting) {
+      this.isStarting = true;
+      await this.startCamera();
+      this.isStarting = false;
+    }
+
+    this.setupEventListeners();
+  }
+
+  destroy() {
+    this.removeEventListeners();
+    this.stopCamera();
+    if (this.flashTimer) clearTimeout(this.flashTimer);
+    if (this.previewTimeout) clearTimeout(this.previewTimeout);
+    super.destroy?.();
+  }
+
+  // Écoute directe (indépendante du framework)
+  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);
+
+    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);
+  }
+
+  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);
+  }
+
+  // Coordonnées locales
+  getLocalPos(clientX, clientY) {
+    const rect = this.framework.canvas.getBoundingClientRect();
+    const globalX = clientX - rect.left;
+    const globalY = clientY - rect.top - this.framework.scrollOffset;
+    return {
+      x: globalX - this.x,
+      y: globalY - this.y
+    };
+  }
+
+  handleTouchStart(e) {
+    e.preventDefault();
+    const touch = e.touches[0];
+    const pos = this.getLocalPos(touch.clientX, touch.clientY);
+    this.handlePress(pos.x, pos.y);
+  }
+
+  handleTouchMove(e) {
+    e.preventDefault();
+  }
+
+  handleTouchEnd(e) {
+    e.preventDefault();
+  }
+
+  handleMouseDown(e) {
+    const pos = this.getLocalPos(e.clientX, e.clientY);
+    this.handlePress(pos.x, pos.y);
+  }
+
+  handleMouseMove(e) {}
+
+  handleMouseUp(e) {}
+
+  async startCamera() {
+    if (this.stream) return;
+
+    try {
+      this.stopCamera();
+
+      this.stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          facingMode: this.facingMode,
+          width: { ideal: 1280 },
+          height: { ideal: 720 },
+          frameRate: { ideal: 30 }
+        }
+      });
+
+      const [track] = this.stream.getVideoTracks();
+      const caps = track.getCapabilities?.() || {};
+      this.torchSupported = !!caps.torch;
+
+      this.video = document.createElement('video');
+      this.video.autoplay = true;
+      this.video.playsInline = true;
+      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';
+      document.body.appendChild(this.video);
+
+      await new Promise(resolve => {
+        this.video.onloadedmetadata = () => {
+          this.loaded = true;
+          this.video.play().catch(e => console.warn('Play auto échoué:', e));
+          resolve();
+        };
+        this.video.onerror = (e) => {
+          this.error = 'Erreur vidéo';
+          console.error('Video error:', e);
+          resolve();
+        };
+      });
+
+      this.markDirty();
+    } catch (err) {
+      this.error = err.message || 'Accès caméra refusé';
+      console.error('Échec getUserMedia:', err);
+      this.markDirty();
+    }
+  }
+
+  stopCamera() {
+    if (this.stream) {
+      this.stream.getTracks().forEach(track => track.stop());
+      this.stream = null;
+    }
+    if (this.video) {
+      if (this.video.parentNode) {
+        this.video.parentNode.removeChild(this.video);
+      }
+      this.video.srcObject = null;
+      this.video = null;
+    }
+    this.loaded = false;
+    this.markDirty();
+  }
+
+  async switchCamera() {
+    this.stopCamera();
+    this.facingMode = this.facingMode === 'user' ? 'environment' : 'user';
+    await this.startCamera();
+  }
+
+  async toggleTorch() {
+    if (!this.torchSupported || !this.stream) return;
+
+    const [track] = this.stream.getVideoTracks();
+    try {
+      await track.applyConstraints({
+        advanced: [{ torch: !this.torchOn }]
+      });
+      this.torchOn = !this.torchOn;
+      this.markDirty();
+    } catch (err) {
+      console.warn('Torch impossible:', err);
+    }
+  }
+
+  capturePhoto() {
+    if (!this.loaded || !this.video) {
+      console.warn('Capture impossible : caméra pas prête');
+      return null;
+    }
+
+    const canvas = document.createElement('canvas');
+    canvas.width = this.video.videoWidth;
+    canvas.height = this.video.videoHeight;
+
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(this.video, 0, 0);
+
+    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(() => {
+      this.flashTimer = null;
+      this.markDirty();
+    }, 200);
+
+    this.previewPhoto = dataUrl;
+    this.previewTimeout = setTimeout(() => {
+      this.previewPhoto = null;
+      this.markDirty();
+    }, 3000);
+
+    this.markDirty();
+    return dataUrl;
+  }
+
+  switchFitMode() {
+    this.currentFitModeIndex = (this.currentFitModeIndex + 1) % this.fitModes.length;
+    this.fitMode = this.fitModes[this.currentFitModeIndex];
+    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
+    if (relX < 60 && relY < 60) {
+      this.switchCamera();
+      return;
+    }
+
+    // Torch
+    if (this.torchSupported && relX > this.width - 60 && relY < 60) {
+      this.toggleTorch();
+      return;
+    }
+
+    // Switch mode
+    const modeButtonX = this.width - 80;
+    const modeButtonY = 20;
+    if (relX > modeButtonX && relX < modeButtonX + this.modeButtonSize &&
+        relY > modeButtonY && relY < modeButtonY + this.modeButtonSize) {
+      this.switchFitMode();
+      return;
+    }
+  }
+
+  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();
+  }
+
+  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();
+  }
+
+    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();
+  }
+
+  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();
+  }
+
+  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;
+    
+    ctx.strokeStyle = '#ffffff';
+    ctx.lineWidth = 3;
+    ctx.lineCap = 'round';
+    
+    // Arc circulaire (flèche de rotation)
+    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 arrowAngle = Math.PI * 0.7;
+    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 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.fillStyle = '#000';
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, size * 0.08, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  draw(ctx) {
+    ctx.save();
+
+    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);
+    }
+
+    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;
+        }
+      } 
+
+      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);
+      }
+    }
+
+    // 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;
+    
+    // Fond semi-transparent
+    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();
+    
+    // Icône
+    this.drawSwitchCameraIcon(ctx, switchBtnX, switchBtnY, switchBtnSize);
+
+    // Torch
+    if (this.torchSupported) {
+      ctx.fillStyle = this.torchOn ? '#ffeb3b' : '#ffffff';
+      ctx.fillText('⚡', this.x + this.width - 50, this.y + 45);
+    }
+
+    // Bouton switch mode avec icône
+    const btnX = this.x + this.width - 80;
+    const btnY = this.y + 20;
+    
+    // Fond du bouton
+    ctx.fillStyle = 'rgba(255,255,255,0.9)';
+    ctx.fillRect(btnX, btnY, this.modeButtonSize, this.modeButtonSize);
+    
+    // Bordure
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(btnX, btnY, this.modeButtonSize, this.modeButtonSize);
+    
+    // Dessiner l'icône appropriée
+    if (this.fitMode === 'contain') {
+      this.drawContainIcon(ctx, btnX, btnY, this.modeButtonSize);
+    } else {
+      this.drawCoverIcon(ctx, btnX, btnY, this.modeButtonSize);
+    }
+
+    ctx.restore();
+  }
+}
+
+export default FloatedCamera;

package/core/CanvasFramework.js

@@ -55,6 +55,7 @@ import Chart from '../components/Chart.js';
 import SliverAppBar from '../components/SliverAppBar.js';
 import AudioPlayer from '../components/AudioPlayer.js';
 import Camera from '../components/Camera.js';
+import FloatedCamera from '../components/FloatedCamera.js';
 import TimePicker from '../components/TimePicker.js';
 import QRCodeReader from '../components/QRCodeReader.js';
 
@@ -1806,7 +1807,7 @@ class CanvasFramework {
         // Hook beforeLeave de la route actuelle (peut bloquer la navigation)
         const currentRouteData = this.routes.get(this.currentRoute);
         if (currentRouteData?.beforeLeave) {
-            const canLeave = await currentRouteData.beforeLeave(this.currentParams, this.currentQuery);
+            const canLeave = await currentRouteData.beforeLeave(this.currentParams, this.currentQuery, this);
             if (canLeave === false) {
                 console.log('Navigation cancelled by beforeLeave hook');
                 return;
@@ -1815,14 +1816,14 @@ class CanvasFramework {
 
         // ✅ NOUVEAU : Hook onLeave (alias plus intuitif de beforeLeave, mais ne bloque pas)
         if (currentRouteData?.onLeave) {
-            await currentRouteData.onLeave(this.currentParams, this.currentQuery);
+            await currentRouteData.onLeave(this.currentParams, this.currentQuery, this);
         }
 
         // ===== LIFECYCLE: AVANT D'ENTRER DANS LA NOUVELLE ROUTE =====
 
         // Hook beforeEnter de la nouvelle route (peut bloquer la navigation)
         if (route.beforeEnter) {
-            const canEnter = await route.beforeEnter(params, query);
+            const canEnter = await route.beforeEnter(params, query, this);
             if (canEnter === false) {
                 console.log('Navigation cancelled by beforeEnter hook');
                 return;
@@ -1831,7 +1832,7 @@ class CanvasFramework {
 
         // ✅ NOUVEAU : Hook onEnter (appelé juste avant de créer les composants)
         if (route.onEnter) {
-            await route.onEnter(params, query);
+            await route.onEnter(params, query, this);
         }
 
         // ===== SAUVEGARDER L'ÉTAT ACTUEL =====
@@ -1910,7 +1911,7 @@ class CanvasFramework {
 
         // Hook afterEnter (appelé immédiatement après la création des composants)
         if (route.afterEnter) {
-            route.afterEnter(params, query);
+            route.afterEnter(params, query, this);
         }
 
         // ✅ NOUVEAU : Hook afterLeave de l'ancienne route (après transition complète)
@@ -1918,11 +1919,11 @@ class CanvasFramework {
             // Si animation, attendre la fin de la transition
             if (animate && this.transitionState.isTransitioning) {
                 setTimeout(() => {
-                    currentRouteData.afterLeave(oldParams, oldQuery);
+                    currentRouteData.afterLeave(oldParams, oldQuery, this);
                 }, this.transitionState.duration || 300);
             } else {
                 // Pas d'animation, appeler immédiatement
-                currentRouteData.afterLeave(oldParams, oldQuery);
+                currentRouteData.afterLeave(oldParams, oldQuery, this);
             }
         }
 

package/core/UIBuilder.js

@@ -56,6 +56,7 @@ import Chart from '../components/Chart.js';
 import SliverAppBar from '../components/SliverAppBar.js';
 import AudioPlayer from '../components/AudioPlayer.js';
 import Camera from '../components/Camera.js';
+import FloatedCamera from '../components/FloatedCamera.js';
 import TimePicker from '../components/TimePicker.js';
 import QRCodeReader from '../components/QRCodeReader.js';
 

package/index.js

@@ -63,6 +63,7 @@ export { default as Chart } from './components/Chart.js';
 export { default as SliverAppBar } from './components/SliverAppBar.js';
 export { default as AudioPlayer } from './components/AudioPlayer.js';
 export { default as Camera } from './components/Camera.js';
+export { default as FloatedCamera } from './components/FloatedCamera.js';
 export { default as TimePicker } from './components/TimePicker.js';
 export { default as QRCodeReader } from './components/QRCodeReader.js';
 
@@ -115,4 +116,4 @@ export { default as FeatureFlags } from './manager/FeatureFlags.js';
 
 // Version du framework
 
-export const VERSION = '0.4.7';
+export const VERSION = '0.5.7';

package/package.json

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