canvasframework 0.5.55 → 0.5.56

package/components/QRCodeGenerator.js

@@ -0,0 +1,231 @@
+import Component from '../core/Component.js';
+
+/**
+ * Composant QRCodeGenerator simple
+ * Génère et affiche un QR code à partir d'une chaîne de caractères
+ * 
+ * @example
+ * new QRCodeGenerator(framework, {
+ *   x: 50,
+ *   y: 100,
+ *   width: 250,
+ *   height: 250,
+ *   data: 'https://example.com'
+ * });
+ */
+class QRCodeGenerator extends Component {
+  constructor(framework, options = {}) {
+    super(framework, options);
+
+    // Données du QR code
+    this.data = options.data || options.text || 'https://example.com';
+    
+    // Dimensions
+    this.width = options.width || 250;
+    this.height = options.height || 250;
+    
+    // Le QR code est toujours carré, on prend la plus petite dimension
+    this.qrSize = Math.min(this.width, this.height);
+    
+    // Options du QR code
+    this.errorCorrectionLevel = options.errorCorrectionLevel || 'M';
+    this.backgroundColor = options.backgroundColor || '#ffffff';
+    this.foregroundColor = options.foregroundColor || '#000000';
+    this.margin = options.margin !== undefined ? options.margin : 1;
+    
+    // État interne
+    this.qrCanvas = null;
+    this.qrImage = null;
+    this.isGenerating = false;
+    this.error = null;
+    
+    // Charger la librairie QRCode
+    this.loadQRCodeLibrary();
+  }
+
+  /**
+   * Charge la librairie qrcode.js depuis CDN
+   */
+  loadQRCodeLibrary() {
+    if (typeof QRCode === 'undefined') {
+      const script = document.createElement('script');
+      script.src = 'https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js';
+      script.onload = () => {
+        console.log('[QRCodeGenerator] Library loaded');
+        this.generateQRCode();
+      };
+      script.onerror = () => {
+        console.error('[QRCodeGenerator] Failed to load library');
+        this.error = 'Échec du chargement';
+        this.markDirty();
+      };
+      document.head.appendChild(script);
+    } else {
+      // Librairie déjà chargée
+      this.generateQRCode();
+    }
+  }
+
+  async _mount() {
+    super._mount?.();
+    
+    // Générer le QR code si les données sont définies et la lib est chargée
+    if (this.data && typeof QRCode !== 'undefined' && !this.qrCanvas) {
+      await this.generateQRCode();
+    }
+  }
+
+  destroy() {
+    if (this.qrCanvas) {
+      this.qrCanvas = null;
+    }
+    if (this.qrImage) {
+      this.qrImage = null;
+    }
+    super.destroy?.();
+  }
+
+  onUnmount() {
+    console.log('[QRCodeGenerator] onUnmount called');
+    if (this.qrCanvas) {
+      this.qrCanvas = null;
+    }
+    if (this.qrImage) {
+      this.qrImage = null;
+    }
+  }
+
+  /**
+   * Génère le QR code
+   */
+  async generateQRCode() {
+    if (typeof QRCode === 'undefined') {
+      this.error = 'Librairie non chargée';
+      this.markDirty();
+      return;
+    }
+
+    if (!this.data) {
+      this.error = 'Aucune donnée';
+      this.markDirty();
+      return;
+    }
+
+    this.isGenerating = true;
+    this.error = null;
+    this.markDirty();
+
+    try {
+      // Créer un canvas temporaire
+      const tempCanvas = document.createElement('canvas');
+      
+      // Options de génération
+      const options = {
+        errorCorrectionLevel: this.errorCorrectionLevel,
+        margin: this.margin,
+        width: this.qrSize,
+        color: {
+          dark: this.foregroundColor,
+          light: this.backgroundColor
+        }
+      };
+
+      // Générer le QR code
+      await QRCode.toCanvas(tempCanvas, this.data, options);
+      
+      this.qrCanvas = tempCanvas;
+      
+      // Convertir en image pour le rendu
+      const dataURL = tempCanvas.toDataURL('image/png');
+      this.qrImage = new Image();
+      this.qrImage.onload = () => {
+        this.isGenerating = false;
+        this.markDirty();
+      };
+      this.qrImage.src = dataURL;
+
+    } catch (err) {
+      this.error = 'Erreur génération';
+      this.isGenerating = false;
+      console.error('[QRCodeGenerator] Error:', err);
+      this.markDirty();
+    }
+  }
+
+  /**
+   * Change les données et régénère le QR code
+   */
+  async setData(newData) {
+    if (this.data === newData) return;
+    
+    this.data = newData;
+    await this.generateQRCode();
+  }
+
+  /**
+   * Change la taille du QR code
+   */
+  async setSize(newSize) {
+    this.width = newSize;
+    this.height = newSize;
+    this.qrSize = newSize;
+    await this.generateQRCode();
+  }
+
+  draw(ctx) {
+    ctx.save();
+
+    // Fond
+    ctx.fillStyle = this.backgroundColor;
+    ctx.fillRect(this.x, this.y, this.width, this.height);
+
+    // Centrer le QR code dans les dimensions du composant
+    const offsetX = (this.width - this.qrSize) / 2;
+    const offsetY = (this.height - this.qrSize) / 2;
+
+    // État : Génération en cours
+    if (this.isGenerating) {
+      ctx.fillStyle = '#666';
+      ctx.font = '14px Arial';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(
+        'Génération...',
+        this.x + this.width / 2,
+        this.y + this.height / 2
+      );
+      ctx.restore();
+      return;
+    }
+
+    // État : Erreur
+    if (this.error) {
+      ctx.fillStyle = '#ff4444';
+      ctx.font = '12px Arial';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(
+        this.error,
+        this.x + this.width / 2,
+        this.y + this.height / 2
+      );
+      ctx.restore();
+      return;
+    }
+
+    // Dessiner le QR code
+    if (this.qrImage && this.qrImage.complete) {
+      ctx.drawImage(
+        this.qrImage, 
+        this.x + offsetX, 
+        this.y + offsetY, 
+        this.qrSize, 
+        this.qrSize
+      );
+    }
+
+    ctx.restore();
+  }
+}
+
+export default QRCodeGenerator;

package/core/CanvasFramework.js

@@ -59,6 +59,7 @@ import Camera from '../components/Camera.js';
 import FloatedCamera from '../components/FloatedCamera.js';
 import TimePicker from '../components/TimePicker.js';
 import QRCodeReader from '../components/QRCodeReader.js';
+import QRCodeGenerator from '../components/QRCodeGenerator.js';
 
 // Utils
 import SafeArea from '../utils/SafeArea.js';

package/core/UIBuilder.js

@@ -59,6 +59,7 @@ import Camera from '../components/Camera.js';
 import FloatedCamera from '../components/FloatedCamera.js';
 import TimePicker from '../components/TimePicker.js';
 import QRCodeReader from '../components/QRCodeReader.js';
+import QRCodeGenerator from '../components/QRCodeGenerator.js';
 
 // Features
 import PullToRefresh from '../features/PullToRefresh.js';
@@ -145,6 +146,7 @@ const Components = {
   Positioned,
   Banner,
   Chart,
+  QRCodeGenerator,
   Stack
 };
 

package/index.js

@@ -66,6 +66,7 @@ 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';
+export { default as QRCodeGenerator } from './components/QRCodeGenerator.js';
 
 // Utils
 export { default as SafeArea } from './utils/SafeArea.js';

package/package.json

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