canvasframework 0.3.25 → 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';

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.25",
+  "version": "0.3.26",
   "description": "Canvas-based cross-platform UI framework (Material & Cupertino)",
   "type": "module",
   "main": "./index.js",