canvasframework 0.5.18 → 0.5.19

package/components/QRCodeReader.js

@@ -0,0 +1,539 @@
+import Component from '../core/Component.js';
+
+/**
+ * Composant QR Code Reader autonome
+ * Analyse en temps réel le flux vidéo pour détecter les QR codes
+ */
+class QRCodeReader extends Component {
+  constructor(framework, options = {}) {
+    super(framework, options);
+
+    this.facingMode = options.facingMode || 'environment';
+    this.autoStart = options.autoStart !== false;
+    this.onQRCodeDetected = options.onQRCodeDetected || null; // Callback quand un QR code est détecté
+    this.onError = options.onError || null;
+    
+    // Options de scan
+    this.scanInterval = options.scanInterval || 300; // ms entre chaque analyse
+    this.continuous = options.continuous !== false; // Continue à scanner même après détection
+    this.vibrateOnDetect = options.vibrateOnDetect !== false; // Vibration mobile
+    
+    this.stream = null;
+    this.video = null;
+    this.loaded = false;
+    this.error = null;
+    
+    // État du scan
+    this.isScanning = false;
+    this.scanTimer = null;
+    this.lastScanTime = 0;
+    this.currentQRCode = null;
+    this.scanHistory = []; // Historique des codes scannés
+    
+    // UI
+    this.showControls = true;
+    this.showScannerOverlay = true;
+    this.scannerFrameSize = 250; // Taille du cadre de scan
+    this.scannerFrameColor = '#00ff00';
+    this.scannerLineColor = '#ff0000';
+    this.scannerLineHeight = 2;
+    this.scannerLineSpeed = 2;
+    this.scannerLinePosition = 0;
+    this.scannerLineDirection = 1;
+    
+    this.torchSupported = false;
+    this.torchOn = false;
+    
+    this.isStarting = false;
+    
+    // Charger la librairie QR code (jsQR)
+    this.loadQRScanner();
+  }
+
+  async _mount() {
+    super._mount?.();
+
+    if (this.autoStart && !this.stream && !this.isStarting) {
+      this.isStarting = true;
+      await this.startCamera();
+      this.isStarting = false;
+    }
+
+    this.setupEventListeners();
+  }
+
+  destroy() {
+    this.stopScanning();
+    this.removeEventListeners();
+    this.stopCamera();
+    super.destroy?.();
+  }
+
+  // Charger jsQR depuis CDN
+  loadQRScanner() {
+    if (typeof jsQR === 'undefined') {
+      const script = document.createElement('script');
+      script.src = 'https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js';
+      script.onload = () => {
+        console.log('jsQR loaded');
+        if (this.loaded && !this.isScanning) {
+          this.startScanning();
+        }
+      };
+      script.onerror = () => {
+        console.error('Failed to load jsQR');
+        this.error = 'Échec du chargement du scanner QR';
+      };
+      document.head.appendChild(script);
+    }
+  }
+
+  setupEventListeners() {
+    this.onTouchStart = this.handleTouchStart.bind(this);
+    this.onMouseDown = this.handleMouseDown.bind(this);
+
+    const canvas = this.framework.canvas;
+    canvas.addEventListener('touchstart', this.onTouchStart, { passive: false });
+    canvas.addEventListener('mousedown', this.onMouseDown);
+  }
+
+  removeEventListeners() {
+    const canvas = this.framework.canvas;
+    canvas.removeEventListener('touchstart', this.onTouchStart);
+    canvas.removeEventListener('mousedown', this.onMouseDown);
+  }
+
+  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);
+  }
+
+  handleMouseDown(e) {
+    const pos = this.getLocalPos(e.clientX, e.clientY);
+    this.handlePress(pos.x, pos.y);
+  }
+
+  async startCamera() {
+    if (this.stream) return;
+
+    try {
+      this.stopCamera();
+
+      this.stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          facingMode: this.facingMode,
+          width: { ideal: 320 },
+          height: { ideal: 240 },
+          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().then(() => {
+            if (typeof jsQR !== 'undefined') {
+              this.startScanning();
+            }
+            resolve();
+          }).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);
+      if (this.onError) this.onError(this.error);
+      this.markDirty();
+    }
+  }
+
+  stopCamera() {
+    this.stopScanning();
+    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();
+  }
+
+  startScanning() {
+    if (this.isScanning || !this.loaded || !this.video) return;
+    
+    this.isScanning = true;
+    this.scanTimer = setInterval(() => {
+      this.scanQRCode();
+    }, this.scanInterval);
+  }
+
+  stopScanning() {
+    if (this.scanTimer) {
+      clearInterval(this.scanTimer);
+      this.scanTimer = null;
+    }
+    this.isScanning = false;
+  }
+
+  async switchCamera() {
+    this.stopScanning();
+    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);
+    }
+  }
+
+  scanQRCode() {
+    if (!this.loaded || !this.video || typeof jsQR === 'undefined') return;
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    
+    // Définir la taille optimale pour la détection
+    const width = this.video.videoWidth;
+    const height = this.video.videoHeight;
+    
+    canvas.width = width;
+    canvas.height = height;
+    
+    // Dessiner l'image vidéo
+    ctx.drawImage(this.video, 0, 0, width, height);
+    
+    // Extraire les données d'image
+    const imageData = ctx.getImageData(0, 0, width, height);
+    
+    // Scanner le QR code
+    const code = jsQR(imageData.data, imageData.width, imageData.height, {
+      inversionAttempts: 'dontInvert',
+    });
+
+    if (code) {
+      this.handleQRCodeDetected(code.data, code.location);
+    } else {
+      this.currentQRCode = null;
+    }
+    
+    this.markDirty();
+  }
+
+  handleQRCodeDetected(data, location) {
+    const now = Date.now();
+    
+    // Éviter les doublons rapides
+    if (this.scanHistory.length > 0) {
+      const lastScan = this.scanHistory[this.scanHistory.length - 1];
+      if (lastScan.data === data && now - lastScan.timestamp < 2000) {
+        return; // Code déjà scanné récemment
+      }
+    }
+
+    this.currentQRCode = {
+      data: data,
+      location: location,
+      timestamp: now
+    };
+
+    // Ajouter à l'historique
+    this.scanHistory.push({
+      data: data,
+      timestamp: now
+    });
+    
+    // Limiter l'historique
+    if (this.scanHistory.length > 10) {
+      this.scanHistory.shift();
+    }
+
+    // Feedback haptique
+    if (this.vibrateOnDetect && navigator.vibrate) {
+      navigator.vibrate(200);
+    }
+
+    // Callback
+    if (this.onQRCodeDetected) {
+      this.onQRCodeDetected(data);
+    }
+
+    // Stop si pas en mode continu
+    if (!this.continuous) {
+      this.stopScanning();
+    }
+
+    console.log('QR Code détecté:', data);
+  }
+
+  handlePress(relX, relY) {
+    // Bouton switch caméra (haut gauche)
+    if (relX < 60 && relY < 60) {
+      this.switchCamera();
+      return;
+    }
+
+    // Torch (haut droite)
+    if (this.torchSupported && relX > this.width - 60 && relY < 60) {
+      this.toggleTorch();
+      return;
+    }
+
+    // Zone centrale pour réinitialiser le scan
+    if (relX > this.width/2 - 100 && relX < this.width/2 + 100 &&
+        relY > this.height/2 - 100 && relY < this.height/2 + 100) {
+      if (!this.isScanning && this.loaded) {
+        this.startScanning();
+      }
+      return;
+    }
+  }
+
+  drawScannerOverlay(ctx) {
+    if (!this.showScannerOverlay) return;
+
+    const centerX = this.x + this.width / 2;
+    const centerY = this.y + this.height / 2;
+    const frameSize = this.scannerFrameSize;
+    const halfSize = frameSize / 2;
+
+    // Fond semi-transparent autour
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+  
+    // Haut
+    ctx.fillRect(this.x, this.y, this.width, centerY - this.y - halfSize);
+  
+    // Bas
+    ctx.fillRect(this.x, centerY + halfSize, this.width, this.y + this.height - (centerY + halfSize));
+  
+    // Gauche
+    ctx.fillRect(this.x, centerY - halfSize, centerX - this.x - halfSize, frameSize);
+  
+    // Droite
+    ctx.fillRect(centerX + halfSize, centerY - halfSize, this.x + this.width - (centerX + halfSize), frameSize);
+
+    // Cadre de scan
+    ctx.strokeStyle = this.scannerFrameColor;
+    ctx.lineWidth = 4;
+    ctx.strokeRect(centerX - halfSize, centerY - halfSize, frameSize, frameSize);
+
+    // Coins décoratifs
+    const cornerSize = 20;
+  
+    // Coin haut gauche
+    ctx.beginPath();
+    ctx.moveTo(centerX - halfSize, centerY - halfSize + cornerSize);
+    ctx.lineTo(centerX - halfSize, centerY - halfSize);
+    ctx.lineTo(centerX - halfSize + cornerSize, centerY - halfSize);
+    ctx.stroke();
+
+    // Coin haut droit
+    ctx.beginPath();
+    ctx.moveTo(centerX + halfSize - cornerSize, centerY - halfSize);
+    ctx.lineTo(centerX + halfSize, centerY - halfSize);
+    ctx.lineTo(centerX + halfSize, centerY - halfSize + cornerSize);
+    ctx.stroke();
+
+    // Coin bas gauche
+    ctx.beginPath();
+    ctx.moveTo(centerX - halfSize, centerY + halfSize - cornerSize);
+    ctx.lineTo(centerX - halfSize, centerY + halfSize);
+    ctx.lineTo(centerX - halfSize + cornerSize, centerY + halfSize);
+    ctx.stroke();
+
+    // Coin bas droit
+    ctx.beginPath();
+    ctx.moveTo(centerX + halfSize - cornerSize, centerY + halfSize);
+    ctx.lineTo(centerX + halfSize, centerY + halfSize);
+    ctx.lineTo(centerX + halfSize, centerY + halfSize - cornerSize);
+    ctx.stroke();
+
+    // Ligne animée
+    this.scannerLinePosition += this.scannerLineSpeed * this.scannerLineDirection;
+    if (this.scannerLinePosition > frameSize || this.scannerLinePosition < 0) {
+      this.scannerLineDirection *= -1;
+    }
+
+    const lineY = centerY - halfSize + this.scannerLinePosition;
+    ctx.fillStyle = this.scannerLineColor;
+    ctx.fillRect(centerX - halfSize, lineY, frameSize, this.scannerLineHeight);
+  }
+
+  drawControls(ctx) {
+    // Bouton switch caméra
+    ctx.fillStyle = 'rgba(0,0,0,0.5)';
+    ctx.beginPath();
+    ctx.arc(this.x + 30, this.y + 30, 25, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Icône caméra
+    ctx.fillStyle = '#fff';
+    ctx.font = '20px Arial';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('🔄', this.x + 30, this.y + 30);
+
+    // Torch
+    if (this.torchSupported) {
+      ctx.fillStyle = 'rgba(0,0,0,0.5)';
+      ctx.beginPath();
+      ctx.arc(this.x + this.width - 30, this.y + 30, 25, 0, Math.PI * 2);
+      ctx.fill();
+
+      ctx.fillStyle = this.torchOn ? '#ffeb3b' : '#fff';
+      ctx.fillText('⚡', this.x + this.width - 30, this.y + 30);
+    }
+
+    // État du scan
+    const scanStatusY = this.y + this.height - 40;
+    ctx.fillStyle = this.isScanning ? '#4CAF50' : '#FF5722';
+    ctx.font = '14px Arial';
+    ctx.textAlign = 'center';
+    ctx.fillText(
+      this.isScanning ? 'Scan en cours...' : 'Scan arrêté',
+      this.x + this.width / 2,
+      scanStatusY
+    );
+
+    // Dernier QR code détecté
+    if (this.currentQRCode) {
+      ctx.fillStyle = 'rgba(0, 150, 0, 0.8)';
+      ctx.fillRect(this.x, this.y + this.height - 90, this.width, 40);
+
+      ctx.fillStyle = '#fff';
+      ctx.font = '12px Arial';
+      ctx.textAlign = 'center';
+      
+      // Tronquer si trop long
+      const displayText = this.currentQRCode.data.length > 50 
+        ? this.currentQRCode.data.substring(0, 47) + '...' 
+        : this.currentQRCode.data;
+      
+      ctx.fillText(
+        `QR Code: ${displayText}`,
+        this.x + this.width / 2,
+        this.y + this.height - 70
+      );
+    }
+  }
+
+  draw(ctx) {
+    ctx.save();
+
+    // Fond
+    ctx.fillStyle = '#000';
+    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) {
+      // Ajustement de la vidéo (cover pour remplir l'écran)
+      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 (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;
+      }
+
+      ctx.drawImage(this.video, this.x + offsetX, this.y + offsetY, drawWidth, drawHeight);
+
+      // Dessiner l'overlay de scan
+      this.drawScannerOverlay(ctx);
+
+      // Dessiner les contrôles
+      this.drawControls(ctx);
+    }
+
+    // Instructions
+    if (this.loaded && !this.currentQRCode) {
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+      ctx.font = '16px Arial';
+      ctx.textAlign = 'center';
+      ctx.fillText(
+        'Placez un QR code dans le cadre',
+        this.x + this.width / 2,
+        this.y + this.height / 2 + 150
+      );
+    }
+
+    ctx.restore();
+  }
+}
+
+export default QRCodeReader;

package/components/RadioButton.js

@@ -0,0 +1,151 @@
+import Component from '../core/Component.js';
+
+/**
+ * Bouton radio pour les sélections uniques
+ * @class
+ * @extends Component
+ * @property {string} group - Groupe de boutons radio
+ * @property {boolean} checked - État sélectionné
+ * @property {string} label - Texte du label
+ * @property {string} platform - Plateforme
+ * @property {number} circleSize - Taille du cercle
+ * @property {number} circleRadius - Rayon du cercle
+ * @property {Function} onChange - Callback au changement
+ */
+class RadioButton extends Component {
+  /**
+   * Crée une instance de RadioButton
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {string} [options.group='default'] - Groupe de boutons
+   * @param {boolean} [options.checked=false] - État initial
+   * @param {string} [options.label=''] - Texte du label
+   * @param {Function} [options.onChange] - Callback au changement
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.group = options.group || 'default';
+    this.checked = options.checked || false;
+    this.label = options.label || '';
+	this.labelColor = options.labelColor || '#000000'; // Nouvelle propriété
+    this.platform = framework.platform;
+    this.circleSize = 24; // Taille du cercle
+    this.circleRadius = 10; // Rayon du cercle
+    this.onChange = options.onChange;
+    
+    // Calculer la largeur totale incluant le label
+    this.totalWidth = this.label ? this.circleSize + 8 + this.getTextWidth(this.label) : this.circleSize;
+    this.width = this.totalWidth; // Mettre à jour la largeur totale
+    this.height = this.circleSize; // Garder la même hauteur
+    
+    // Définir onClick
+    this.onClick = this.handleClick.bind(this);
+  }
+  
+  /**
+   * Calcule la largeur du texte
+   * @param {string} text - Texte à mesurer
+   * @returns {number} Largeur du texte
+   * @private
+   */
+  getTextWidth(text) {
+    // Utiliser le contexte temporaire pour mesurer le texte
+    const ctx = this.framework.ctx;
+    ctx.save();
+    ctx.font = '16px -apple-system, sans-serif';
+    const width = ctx.measureText(text).width;
+    ctx.restore();
+    return width;
+  }
+
+  /**
+   * Gère le clic sur le bouton radio
+   * @private
+   */
+  handleClick() {
+    // Décocher les autres du même groupe
+    for (let comp of this.framework.components) {
+      if (comp instanceof RadioButton && comp.group === this.group && comp !== this) {
+        comp.checked = false;
+      }
+    }
+    this.checked = true;
+    if (this.onChange) this.onChange(this.checked);
+  }
+
+  /**
+   * Dessine le bouton radio
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    const centerX = this.x + this.circleSize / 2;
+    const centerY = this.y + this.circleSize / 2;
+    
+    if (this.platform === 'material') {
+      // Outer circle
+      ctx.strokeStyle = this.checked ? '#6200EE' : '#666666';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, this.circleRadius, 0, Math.PI * 2);
+      ctx.stroke();
+      
+      // Inner circle
+      if (this.checked) {
+        ctx.fillStyle = '#6200EE';
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, 5, 0, Math.PI * 2);
+        ctx.fill();
+      }
+     } else {
+      // Cupertino (iOS style)
+      if (this.checked) {
+        // Cercle bleu rempli
+        ctx.fillStyle = '#007AFF';
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, this.circleRadius, 0, Math.PI * 2);
+        ctx.fill();
+        
+        // Point blanc au centre
+        ctx.fillStyle = '#FFFFFF';
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, 4, 0, Math.PI * 2);
+        ctx.fill();
+      } else {
+        // Cercle gris clair
+        ctx.strokeStyle = '#D1D1D6';
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, this.circleRadius, 0, Math.PI * 2);
+        ctx.stroke();
+      }
+    }
+    
+    // Label
+    if (this.label) {
+      ctx.fillStyle = this.labelColor; // Au lieu de '#000000'
+      ctx.font = '16px -apple-system, sans-serif';
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this.label, this.x + this.circleSize + 8, centerY);
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Vérifie si un point est dans les limites
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {boolean} True si le point est dans le bouton
+   */
+  isPointInside(x, y) {
+    return x >= this.x && 
+           x <= this.x + this.width && 
+           y >= this.y && 
+           y <= this.y + this.height;
+  }
+}
+
+export default RadioButton;