canvasframework 0.3.24 → 0.3.26

package/components/Camera.js

@@ -0,0 +1,392 @@
+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)
+ */
+class Camera 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;
+    }
+  }
+
+  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;
+        ctx.drawImage(this.previewPhoto, 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
+    ctx.fillStyle = '#ffffff';
+    ctx.font = '28px Arial';
+    ctx.fillText('↻', this.x + 20, this.y + 45);
+
+    // Torch
+    if (this.torchSupported) {
+      ctx.fillStyle = this.torchOn ? '#ffeb3b' : '#ffffff';
+      ctx.fillText('⚡', this.x + this.width - 50, this.y + 45);
+    }
+
+    // Bouton switch mode
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(this.x + this.width - 80, this.y + 20, this.modeButtonSize, this.modeButtonSize);
+    ctx.fillStyle = '#000';
+    ctx.font = '14px Arial';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(this.fitMode.toUpperCase().slice(0, 4), 
+                 this.x + this.width - 80 + this.modeButtonSize/2, 
+                 this.y + 20 + this.modeButtonSize/2);
+
+    ctx.restore();
+  }
+}
+
+export default Camera;

package/core/CanvasFramework.js

@@ -54,6 +54,7 @@ import Banner from '../components/Banner.js';
 import Chart from '../components/Chart.js';
 import SliverAppBar from '../components/SliverAppBar.js';
 import AudioPlayer from '../components/AudioPlayer.js';
+import Camera from '../components/Camera.js';
 
 // Utils
 import SafeArea from '../utils/SafeArea.js';
@@ -178,8 +179,22 @@ class CanvasFramework {
     this.lightTheme = lightTheme;
     this.darkTheme = darkTheme;
     this.theme = lightTheme; // thème par défaut
-    
+     // État actuel + préférence
+    this.themeMode = options.themeMode || 'system'; // 'light', 'dark', 'system'
+    this.userThemeOverride = null; // null = suit system, sinon 'light' ou 'dark'
+
+    // Applique le thème initial
+    this.setupSystemThemeListener();
+	
+	// Récupère override utilisateur
+    const savedOverride = localStorage.getItem('themeOverride');
+    if (savedOverride && ['light', 'dark'].includes(savedOverride)) {
+      this.userThemeOverride = savedOverride;
+      this.themeMode = savedOverride;
+    } 
+
 	this.components = [];
+	this.applyThemeFromSystem();
     this.state = {};
     // NOUVELLE OPTION: choisir entre Canvas 2D et WebGL
     this.useWebGL = options.useWebGL !== false; // true par défaut
@@ -265,6 +280,70 @@ class CanvasFramework {
     }
   }
   
+  /**
+   * Détecte le thème système et applique si mode = 'system'
+   */
+  applyThemeFromSystem() {
+    if (this.themeMode === 'system') {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const newTheme = prefersDark ? this.darkTheme : this.lightTheme;
+      this.setTheme(newTheme);
+    } else {
+      // Mode forcé
+      this.setTheme(
+        this.themeMode === 'dark' ? this.darkTheme : this.lightTheme
+      );
+    }
+  }
+
+  /**
+   * Écoute les changements système (ex: utilisateur bascule dark mode)
+   */
+  setupSystemThemeListener() {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  
+    // Ancienne méthode (compatibilité large)
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', (e) => {
+        if (this.themeMode === 'system') {
+          this.applyThemeFromSystem();
+        }
+      });
+    } else {
+      // Anciens navigateurs (rare en 2026)
+      mediaQuery.addListener((e) => {
+        if (this.themeMode === 'system') {
+          this.applyThemeFromSystem();
+        }
+      });
+    }
+  }
+  
+  /**
+   * Change le mode thème
+   * @param {'light'|'dark'|'system'} mode - Mode à appliquer
+   * @param {boolean} [save=true] - Sauvegarder le choix utilisateur ?
+   */
+  setThemeMode(mode, save = true) {
+    if (!['light', 'dark', 'system'].includes(mode)) {
+      console.warn('Mode invalide, valeurs acceptées: light, dark, system');
+      return;
+    }
+
+    this.themeMode = mode;
+
+    if (save && mode !== 'system') {
+      this.userThemeOverride = mode;
+      // Sauvegarde (ex: localStorage ou ton SecureStorage)
+      localStorage.setItem('themeOverride', mode);
+    } else if (mode === 'system') {
+      this.userThemeOverride = null;
+      localStorage.removeItem('themeOverride');
+    }
+
+    this.applyThemeFromSystem();
+  }
+  
   /**
    * Active ou désactive les DevTools
    * @param {boolean} enabled - true pour activer, false pour désactiver
@@ -431,13 +510,16 @@ class CanvasFramework {
   setTheme(theme) {
     this.theme = theme;
 
-    // Intercepter le context pour remplacer les couleurs globalement
     if (!this.useWebGL) {
       this.wrapContext(this.ctx, theme);
     }
 
-    // marque tous les composants dirty pour redraw
-    for (let comp of this.components) comp.markDirty();
+    // Protège la boucle
+    if (this.components && Array.isArray(this.components)) {
+      this.components.forEach(comp => comp.markDirty());
+    } else {
+      console.warn('[setTheme] components pas encore initialisé');
+    }
   }
 	
   // Switch Theme

package/core/UIBuilder.js

@@ -55,6 +55,7 @@ import Banner from '../components/Banner.js';
 import Chart from '../components/Chart.js';
 import SliverAppBar from '../components/SliverAppBar.js';
 import AudioPlayer from '../components/AudioPlayer.js';
+import Camera from '../components/Camera.js';
 
 // Features
 import PullToRefresh from '../features/PullToRefresh.js';
@@ -96,6 +97,7 @@ const Components = {
   AppBar,
   SliverAppBar,
   Chip,
+  Camera,
   Stepper,
   Accordion,
   Tabs,

package/index.js

@@ -62,6 +62,7 @@ export { default as Banner } from './components/Banner.js';
 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';
 
 // Utils
 export { default as SafeArea } from './utils/SafeArea.js';
@@ -104,7 +105,7 @@ export { default as FeatureFlags } from './manager/FeatureFlags.js';
 
 // Version du framework
 
-export const VERSION = '0.3.24';
+export const VERSION = '0.3.23';
 
 
 

package/package.json

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