canvasframework 0.3.14 → 0.3.15

package/components/CircularProgress.js

@@ -1,6 +1,7 @@
 import Component from '../core/Component.js';
+
 /**
- * Spinner de chargement circulaire
+ * Spinner de chargement circulaire avec support Material et Cupertino
  * @class
  * @extends Component
  * @property {number} size - Taille du spinner
@@ -21,8 +22,8 @@ class CircularProgress extends Component {
    * @param {boolean} [options.indeterminate=true] - Mode indéterminé
    * @param {number} [options.progress=0] - Progression (0-100)
    * @param {string} [options.color] - Couleur (auto selon platform)
-   * @param {number} [options.lineWidth=4] - Épaisseur
-   * @param {number} [options.animationSpeed=0.05] - Vitesse d'animation
+   * @param {number} [options.lineWidth] - Épaisseur (auto selon platform)
+   * @param {number} [options.animationSpeed] - Vitesse d'animation (auto selon platform)
    */
   constructor(framework, options = {}) {
     super(framework, options);
@@ -30,10 +31,32 @@ class CircularProgress extends Component {
     this.indeterminate = options.indeterminate !== false;
     this.progress = options.progress || 0; // 0-100
     this.platform = framework.platform;
-    this.color = options.color || (framework.platform === 'material' ? '#6200EE' : '#007AFF');
-    this.lineWidth = options.lineWidth || 4;
+    
+    // Couleurs selon la plateforme
+    this.color = options.color || (
+      this.platform === 'material' ? '#6200EE' : '#8E8E93'
+    );
+    
+    // Épaisseur selon la plateforme
+    this.lineWidth = options.lineWidth || (
+      this.platform === 'material' ? 4 : 2.5
+    );
+    
+    // Vitesse d'animation selon la plateforme
+    this.animationSpeed = options.animationSpeed || (
+      this.platform === 'material' ? 0.05 : 0.08
+    );
+    
     this.rotation = 0;
-    this.animationSpeed = options.animationSpeed || 0.05;
+    
+    // Pour l'animation Material (arc qui s'agrandit/rétrécit)
+    this.arcStart = 0;
+    this.arcEnd = 0;
+    this.arcGrowing = true;
+    
+    // Pour l'animation Cupertino (12 traits qui tournent)
+    this.cupertinoLines = 12;
+    this.cupertinoOpacity = Array(this.cupertinoLines).fill(0);
     
     this.width = this.size;
     this.height = this.size;
@@ -49,54 +72,164 @@ class CircularProgress extends Component {
    * @private
    */
   startAnimation() {
-    const animate = () => {
+    let lastTime = performance.now();
+    
+    const animate = (currentTime) => {
       if (!this.visible || !this.indeterminate) return;
       
-      this.rotation += this.animationSpeed;
-      if (this.rotation > Math.PI * 2) {
-        this.rotation = 0;
+      const deltaTime = currentTime - lastTime;
+      lastTime = currentTime;
+      
+      if (this.platform === 'material') {
+        this.animateMaterial(deltaTime);
+      } else {
+        this.animateCupertino(deltaTime);
       }
       
+      this.markDirty();
       requestAnimationFrame(animate);
     };
-    animate();
+    
+    requestAnimationFrame(animate);
   }
   
   /**
-   * Dessine le spinner
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   * Animation Material (arc qui tourne et change de taille)
+   * @private
    */
-  draw(ctx) {
-    ctx.save();
+  animateMaterial(deltaTime) {
+    // Rotation globale
+    this.rotation += this.animationSpeed;
+    if (this.rotation > Math.PI * 2) {
+      this.rotation -= Math.PI * 2;
+    }
     
-    const centerX = this.x + this.size / 2;
-    const centerY = this.y + this.size / 2;
-    const radius = (this.size - this.lineWidth) / 2;
+    // Animation de l'arc (grossit puis rétrécit)
+    const arcSpeed = 0.03;
     
+    if (this.arcGrowing) {
+      this.arcEnd += arcSpeed;
+      if (this.arcEnd > Math.PI * 1.5) {
+        this.arcGrowing = false;
+      }
+    } else {
+      this.arcStart += arcSpeed;
+      if (this.arcStart >= this.arcEnd) {
+        this.arcGrowing = true;
+        this.arcStart = 0;
+        this.arcEnd = 0;
+      }
+    }
+  }
+  
+  /**
+   * Animation Cupertino (traits qui s'estompent)
+   * @private
+   */
+  animateCupertino(deltaTime) {
+    this.rotation += this.animationSpeed;
+    if (this.rotation > Math.PI * 2) {
+      this.rotation -= Math.PI * 2;
+    }
+    
+    // Calculer l'opacité de chaque trait (fade progressif)
+    const activeIndex = Math.floor((this.rotation / (Math.PI * 2)) * this.cupertinoLines);
+    
+    for (let i = 0; i < this.cupertinoLines; i++) {
+      const distance = Math.abs(i - activeIndex);
+      const minDistance = Math.min(distance, this.cupertinoLines - distance);
+      this.cupertinoOpacity[i] = 1 - (minDistance / this.cupertinoLines) * 0.8;
+    }
+  }
+  
+  /**
+   * Dessine le spinner Material
+   * @private
+   */
+  drawMaterial(ctx, centerX, centerY, radius) {
     if (this.indeterminate) {
-      // Spinner qui tourne
+      // Track (cercle de base - très léger)
+      ctx.strokeStyle = 'rgba(98, 0, 238, 0.1)';
+      ctx.lineWidth = this.lineWidth;
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+      ctx.stroke();
+      
+      // Arc animé qui tourne
+      ctx.save();
       ctx.translate(centerX, centerY);
       ctx.rotate(this.rotation);
-      ctx.translate(-centerX, -centerY);
       
-      // Cercle de base (track)
-      ctx.strokeStyle = this.platform === 'material' ? '#E0E0E0' : '#E5E5EA';
-      ctx.lineWidth = this.lineWidth;
+      ctx.strokeStyle = this.color;
       ctx.lineCap = 'round';
+      ctx.lineWidth = this.lineWidth;
+      ctx.beginPath();
+      ctx.arc(0, 0, radius, this.arcStart, this.arcEnd);
+      ctx.stroke();
+      
+      ctx.restore();
+    } else {
+      // Progress circulaire déterminé
+      // Track
+      ctx.strokeStyle = '#E0E0E0';
+      ctx.lineWidth = this.lineWidth;
       ctx.beginPath();
       ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
       ctx.stroke();
       
-      // Arc animé
+      // Progress
+      const angle = (this.progress / 100) * Math.PI * 2;
       ctx.strokeStyle = this.color;
+      ctx.lineCap = 'round';
       ctx.beginPath();
-      ctx.arc(centerX, centerY, radius, 0, Math.PI * 1.5);
+      ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + angle);
       ctx.stroke();
       
+      // Pourcentage au centre
+      if (this.progress > 0) {
+        ctx.fillStyle = this.color;
+        ctx.font = `bold ${this.size / 3}px -apple-system, sans-serif`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(`${Math.round(this.progress)}%`, centerX, centerY);
+      }
+    }
+  }
+  
+  /**
+   * Dessine le spinner Cupertino (style iOS)
+   * @private
+   */
+  drawCupertino(ctx, centerX, centerY, radius) {
+    if (this.indeterminate) {
+      // Spinner iOS avec 12 traits
+      ctx.lineCap = 'round';
+      ctx.lineWidth = this.lineWidth;
+      
+      for (let i = 0; i < this.cupertinoLines; i++) {
+        const angle = (i / this.cupertinoLines) * Math.PI * 2;
+        const opacity = this.cupertinoOpacity[i];
+        
+        ctx.save();
+        ctx.translate(centerX, centerY);
+        ctx.rotate(angle);
+        
+        // Trait avec opacité variable
+        const startRadius = radius * 0.6;
+        const endRadius = radius;
+        
+        ctx.strokeStyle = this.hexToRgba(this.color, opacity);
+        ctx.beginPath();
+        ctx.moveTo(0, -startRadius);
+        ctx.lineTo(0, -endRadius);
+        ctx.stroke();
+        
+        ctx.restore();
+      }
     } else {
-      // Progress circulaire déterminé
+      // Progress circulaire iOS (plus fin et élégant)
       // Track
-      ctx.strokeStyle = this.platform === 'material' ? '#E0E0E0' : '#E5E5EA';
+      ctx.strokeStyle = '#E5E5EA';
       ctx.lineWidth = this.lineWidth;
       ctx.beginPath();
       ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
@@ -110,25 +243,76 @@ class CircularProgress extends Component {
       ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + angle);
       ctx.stroke();
       
-      // Pourcentage au centre (optionnel)
+      // Pas de texte au centre pour iOS (plus minimaliste)
+      // Mais si tu veux, décommente :
+      /*
       if (this.progress > 0) {
         ctx.fillStyle = this.color;
-        ctx.font = `bold ${this.size / 3}px -apple-system, sans-serif`;
+        ctx.font = `${this.size / 4}px -apple-system, sans-serif`;
         ctx.textAlign = 'center';
         ctx.textBaseline = 'middle';
         ctx.fillText(`${Math.round(this.progress)}%`, centerX, centerY);
       }
+      */
+    }
+  }
+  
+  /**
+   * Dessine le spinner
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    const centerX = this.x + this.size / 2;
+    const centerY = this.y + this.size / 2;
+    const radius = (this.size - this.lineWidth * 2) / 2;
+    
+    if (this.platform === 'material') {
+      this.drawMaterial(ctx, centerX, centerY, radius);
+    } else {
+      this.drawCupertino(ctx, centerX, centerY, radius);
     }
     
     ctx.restore();
   }
   
+  /**
+   * Convertit une couleur hex en rgba avec opacité
+   * @private
+   */
+  hexToRgba(hex, alpha) {
+    // Si c'est déjà rgba, le retourner
+    if (hex.startsWith('rgba')) return hex;
+    if (hex.startsWith('rgb')) {
+      return hex.replace('rgb', 'rgba').replace(')', `, ${alpha})`);
+    }
+    
+    // Convertir hex en rgba
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+  
   /**
    * Définit la progression
    * @param {number} value - Valeur de progression (0-100)
    */
   setProgress(value) {
     this.progress = Math.max(0, Math.min(100, value));
+    this.indeterminate = false;
+    this.markDirty();
+  }
+  
+  /**
+   * Active le mode indéterminé
+   */
+  setIndeterminate() {
+    this.indeterminate = true;
+    if (!this._animating) {
+      this.startAnimation();
+    }
   }
   
   /**

package/core/CanvasFramework.js

@@ -66,6 +66,7 @@ import FetchClient from '../utils/FetchClient.js';
 import GeoLocationService from '../utils/GeoLocationService.js';
 import WebSocketClient from '../utils/WebSocketClient.js';
 import AnimationEngine from '../utils/AnimationEngine.js';
+import CryptoManager from '../utils/CryptoManager.js';
 
 // Features
 import PullToRefresh from '../features/PullToRefresh.js';

package/core/Component.js

@@ -46,8 +46,98 @@ class Component {
 
     // Pour détecter les updates
     this._prevProps = { ...options };
+	
+	// Système de listeners
+    this._listeners = new Map();
   }
 
+  /**
+   * Ajoute un listener pour un événement
+   * @param {string} event - Nom de l'événement
+   * @param {Function} handler - Fonction callback
+   * @returns {Component} - Pour le chaînage
+   */
+  on(event, handler) {
+    if (!this._listeners.has(event)) {
+      this._listeners.set(event, []);
+    }
+    this._listeners.get(event).push(handler);
+    return this;
+  }
+
+  /**
+   * Retire un listener
+   * @param {string} event - Nom de l'événement
+   * @param {Function} handler - Fonction à retirer
+   * @returns {Component}
+   */
+  off(event, handler) {
+    if (!this._listeners.has(event)) return this;
+    
+    const handlers = this._listeners.get(event);
+    const index = handlers.indexOf(handler);
+    if (index > -1) {
+      handlers.splice(index, 1);
+    }
+    return this;
+  }
+
+  /**
+   * Ajoute un listener qui s'exécute une seule fois
+   * @param {string} event - Nom de l'événement
+   * @param {Function} handler - Fonction callback
+   * @returns {Component}
+   */
+  once(event, handler) {
+    const wrapper = (...args) => {
+      handler(...args);
+      this.off(event, wrapper);
+    };
+    return this.on(event, wrapper);
+  }
+
+  /**
+   * Émet un événement
+   * @param {string} event - Nom de l'événement
+   * @param {...any} args - Arguments à passer aux handlers
+   * @returns {Component}
+   */
+  emit(event, ...args) {
+    if (!this._listeners.has(event)) return this;
+    
+    const handlers = this._listeners.get(event);
+    for (let handler of handlers) {
+      try {
+        handler(...args);
+      } catch (error) {
+        console.error(`Error in ${event} handler:`, error);
+      }
+    }
+    return this;
+  }
+
+  /**
+   * Retire tous les listeners d'un événement (ou tous)
+   * @param {string} [event] - Nom de l'événement (optionnel)
+   * @returns {Component}
+   */
+  removeAllListeners(event) {
+    if (event) {
+      this._listeners.delete(event);
+    } else {
+      this._listeners.clear();
+    }
+    return this;
+  }
+
+  /**
+   * Retourne le nombre de listeners pour un événement
+   * @param {string} event - Nom de l'événement
+   * @returns {number}
+   */
+  listenerCount(event) {
+    return this._listeners.has(event) ? this._listeners.get(event).length : 0;
+  }	
   /* =======================
      LIFECYCLE HOOKS
      ======================= */

package/index.js

@@ -74,6 +74,7 @@ export { default as FetchClient } from './utils/FetchClient.js';
 export { default as GeoLocationService } from './utils/GeoLocationService.js';
 export { default as WebSocketClient } from './utils/WebSocketClient.js';
 export { default as AnimationEngine } from './utils/AnimationEngine.js';
+export { default as CryptoManager } from './utils/CryptoManager.js';
 
 // Features
 export { default as PullToRefresh } from './features/PullToRefresh.js';

package/package.json

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

package/utils/CryptoManager.js

@@ -0,0 +1,303 @@
+/**
+ * Gestionnaire de cryptographie pour le Canvas Framework
+ * Utilise l'API Web Crypto (SubtleCrypto) pour un chiffrement sécurisé
+ * @class
+ */
+class CryptoManager {
+  constructor() {
+    // Vérifier la disponibilité de l'API Crypto
+    if (!window.crypto || !window.crypto.subtle) {
+      throw new Error('Web Crypto API is not available in this browser');
+    }
+    
+    this.crypto = window.crypto.subtle;
+    
+    // Algorithme par défaut
+    this.algorithm = {
+      name: 'AES-GCM',
+      length: 256
+    };
+    
+    // Stockage des clés en mémoire (pas dans localStorage !)
+    this._keys = new Map();
+  }
+
+  /**
+   * Génère une clé de chiffrement aléatoire
+   * @param {string} keyName - Nom de la clé pour référence ultérieure
+   * @returns {Promise<CryptoKey>}
+   */
+  async generateKey(keyName = 'default') {
+    const key = await this.crypto.generateKey(
+      {
+        name: this.algorithm.name,
+        length: this.algorithm.length
+      },
+      true, // extractable
+      ['encrypt', 'decrypt']
+    );
+    
+    this._keys.set(keyName, key);
+    return key;
+  }
+
+  /**
+   * Importe une clé depuis une chaîne (base64)
+   * @param {string} keyString - Clé au format base64
+   * @param {string} keyName - Nom de la clé
+   * @returns {Promise<CryptoKey>}
+   */
+  async importKey(keyString, keyName = 'default') {
+    const keyBuffer = this._base64ToBuffer(keyString);
+    
+    const key = await this.crypto.importKey(
+      'raw',
+      keyBuffer,
+      { name: this.algorithm.name },
+      true,
+      ['encrypt', 'decrypt']
+    );
+    
+    this._keys.set(keyName, key);
+    return key;
+  }
+
+  /**
+   * Exporte une clé au format base64
+   * @param {string} keyName - Nom de la clé
+   * @returns {Promise<string>}
+   */
+  async exportKey(keyName = 'default') {
+    const key = this._keys.get(keyName);
+    if (!key) {
+      throw new Error(`Key "${keyName}" not found`);
+    }
+    
+    const exported = await this.crypto.exportKey('raw', key);
+    return this._bufferToBase64(exported);
+  }
+
+  /**
+   * Dérive une clé depuis un mot de passe
+   * @param {string} password - Mot de passe
+   * @param {string} keyName - Nom de la clé
+   * @param {string} salt - Salt (optionnel, généré automatiquement)
+   * @returns {Promise<{key: CryptoKey, salt: string}>}
+   */
+  async deriveKeyFromPassword(password, keyName = 'default', salt = null) {
+    // Générer ou utiliser le salt fourni
+    const saltBuffer = salt 
+      ? this._base64ToBuffer(salt)
+      : window.crypto.getRandomValues(new Uint8Array(16));
+    
+    // Encoder le mot de passe
+    const encoder = new TextEncoder();
+    const passwordBuffer = encoder.encode(password);
+    
+    // Importer le mot de passe comme clé
+    const keyMaterial = await this.crypto.importKey(
+      'raw',
+      passwordBuffer,
+      { name: 'PBKDF2' },
+      false,
+      ['deriveBits', 'deriveKey']
+    );
+    
+    // Dériver la clé
+    const key = await this.crypto.deriveKey(
+      {
+        name: 'PBKDF2',
+        salt: saltBuffer,
+        iterations: 100000,
+        hash: 'SHA-256'
+      },
+      keyMaterial,
+      { name: this.algorithm.name, length: this.algorithm.length },
+      true,
+      ['encrypt', 'decrypt']
+    );
+    
+    this._keys.set(keyName, key);
+    
+    return {
+      key,
+      salt: this._bufferToBase64(saltBuffer)
+    };
+  }
+
+  /**
+   * Chiffre des données
+   * @param {any} data - Données à chiffrer (sera converti en JSON)
+   * @param {string} keyName - Nom de la clé à utiliser
+   * @returns {Promise<{encrypted: string, iv: string}>}
+   */
+  async encrypt(data, keyName = 'default') {
+    const key = this._keys.get(keyName);
+    if (!key) {
+      throw new Error(`Key "${keyName}" not found. Generate or import a key first.`);
+    }
+    
+    // Convertir les données en JSON puis en buffer
+    const dataString = typeof data === 'string' ? data : JSON.stringify(data);
+    const encoder = new TextEncoder();
+    const dataBuffer = encoder.encode(dataString);
+    
+    // Générer un IV (Initialization Vector) aléatoire
+    const iv = window.crypto.getRandomValues(new Uint8Array(12));
+    
+    // Chiffrer
+    const encryptedBuffer = await this.crypto.encrypt(
+      {
+        name: this.algorithm.name,
+        iv: iv
+      },
+      key,
+      dataBuffer
+    );
+    
+    return {
+      encrypted: this._bufferToBase64(encryptedBuffer),
+      iv: this._bufferToBase64(iv)
+    };
+  }
+
+  /**
+   * Déchiffre des données
+   * @param {string} encryptedData - Données chiffrées (base64)
+   * @param {string} iv - IV utilisé lors du chiffrement (base64)
+   * @param {string} keyName - Nom de la clé à utiliser
+   * @param {boolean} parseJson - Parser le résultat en JSON (true par défaut)
+   * @returns {Promise<any>}
+   */
+  async decrypt(encryptedData, iv, keyName = 'default', parseJson = true) {
+    const key = this._keys.get(keyName);
+    if (!key) {
+      throw new Error(`Key "${keyName}" not found. Generate or import a key first.`);
+    }
+    
+    // Convertir les chaînes base64 en buffers
+    const encryptedBuffer = this._base64ToBuffer(encryptedData);
+    const ivBuffer = this._base64ToBuffer(iv);
+    
+    // Déchiffrer
+    const decryptedBuffer = await this.crypto.decrypt(
+      {
+        name: this.algorithm.name,
+        iv: ivBuffer
+      },
+      key,
+      encryptedBuffer
+    );
+    
+    // Convertir le buffer en string
+    const decoder = new TextDecoder();
+    const decryptedString = decoder.decode(decryptedBuffer);
+    
+    // Parser en JSON si demandé
+    if (parseJson) {
+      try {
+        return JSON.parse(decryptedString);
+      } catch (e) {
+        // Si le parsing échoue, retourner la chaîne brute
+        return decryptedString;
+      }
+    }
+    
+    return decryptedString;
+  }
+
+  /**
+   * Chiffre et encode en une seule chaîne (pratique pour stockage)
+   * @param {any} data - Données à chiffrer
+   * @param {string} keyName - Nom de la clé
+   * @returns {Promise<string>} - Chaîne contenant données chiffrées + IV
+   */
+  async encryptToString(data, keyName = 'default') {
+    const { encrypted, iv } = await this.encrypt(data, keyName);
+    return `${encrypted}.${iv}`;
+  }
+
+  /**
+   * Déchiffre depuis une chaîne créée par encryptToString
+   * @param {string} encryptedString - Chaîne chiffrée
+   * @param {string} keyName - Nom de la clé
+   * @param {boolean} parseJson - Parser en JSON
+   * @returns {Promise<any>}
+   */
+  async decryptFromString(encryptedString, keyName = 'default', parseJson = true) {
+    const [encrypted, iv] = encryptedString.split('.');
+    if (!encrypted || !iv) {
+      throw new Error('Invalid encrypted string format');
+    }
+    return this.decrypt(encrypted, iv, keyName, parseJson);
+  }
+
+  /**
+   * Hash une chaîne (non réversible)
+   * @param {string} data - Données à hasher
+   * @param {string} algorithm - Algorithme (SHA-256, SHA-384, SHA-512)
+   * @returns {Promise<string>} - Hash en base64
+   */
+  async hash(data, algorithm = 'SHA-256') {
+    const encoder = new TextEncoder();
+    const dataBuffer = encoder.encode(data);
+    
+    const hashBuffer = await this.crypto.digest(algorithm, dataBuffer);
+    return this._bufferToBase64(hashBuffer);
+  }
+
+  /**
+   * Génère un token aléatoire sécurisé
+   * @param {number} length - Longueur en octets (32 par défaut)
+   * @returns {string} - Token en base64
+   */
+  generateToken(length = 32) {
+    const buffer = window.crypto.getRandomValues(new Uint8Array(length));
+    return this._bufferToBase64(buffer);
+  }
+
+  /**
+   * Supprime une clé de la mémoire
+   * @param {string} keyName - Nom de la clé
+   */
+  deleteKey(keyName) {
+    this._keys.delete(keyName);
+  }
+
+  /**
+   * Supprime toutes les clés
+   */
+  deleteAllKeys() {
+    this._keys.clear();
+  }
+
+  /**
+   * Liste les clés disponibles
+   * @returns {string[]}
+   */
+  listKeys() {
+    return Array.from(this._keys.keys());
+  }
+
+  // ===== Méthodes utilitaires =====
+
+  _bufferToBase64(buffer) {
+    const bytes = new Uint8Array(buffer);
+    let binary = '';
+    for (let i = 0; i < bytes.length; i++) {
+      binary += String.fromCharCode(bytes[i]);
+    }
+    return btoa(binary);
+  }
+
+  _base64ToBuffer(base64) {
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes.buffer;
+  }
+}
+
+export default CryptoManager;