canvasframework 0.6.3 → 0.7.1

package/components/Avatar.js

@@ -1,202 +1,201 @@
 import Component from '../core/Component.js';
+
 /**
- * Avatar (photo de profil)
- * @class
- * @extends Component
- * @property {string|null} imageUrl - URL de l'image
- * @property {string} initials - Initiales
- * @property {number} size - Taille
- * @property {string} bgColor - Couleur de fond
- * @property {string} textColor - Couleur du texte
- * @property {number} borderWidth - Épaisseur de la bordure
- * @property {string} borderColor - Couleur de la bordure
- * @property {string|null} status - Statut ('online', 'offline', 'away', 'busy')
- * @property {ImageComponent|null} imageComponent - Composant image interne
+ * Avatar — photo de profil ou initiales.
+ *
+ * Corrections :
+ *  - hexToRgb supprimé (non utilisé directement)
+ *  - destroy() nettoie imageComponent
+ *  - scrollOffset géré proprement dans isPointInside
  */
 class Avatar extends Component {
   /**
-   * Crée une instance de Avatar
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}] - Options de configuration
-   * @param {string} [options.imageUrl] - URL de l'image
-   * @param {string} [options.initials='??'] - Initiales
-   * @param {number} [options.size=48] - Taille
-   * @param {string} [options.bgColor] - Couleur de fond (auto générée)
-   * @param {string} [options.textColor='#FFFFFF'] - Couleur du texte
-   * @param {number} [options.borderWidth=0] - Épaisseur de la bordure
-   * @param {string} [options.borderColor='#FFFFFF'] - Couleur de la bordure
-   * @param {string} [options.status] - Statut
+   * @param {CanvasFramework} framework
+   * @param {Object} [options={}]
+   * @param {string}  [options.imageUrl]
+   * @param {string}  [options.initials='??']
+   * @param {number}  [options.size=48]
+   * @param {string}  [options.bgColor]          - Auto-généré à partir des initiales si absent
+   * @param {string}  [options.textColor='#FFFFFF']
+   * @param {number}  [options.borderWidth=0]
+   * @param {string}  [options.borderColor='#FFFFFF']
+   * @param {string}  [options.status]           - 'online'|'offline'|'away'|'busy'
+   * @param {Function}[options.onClick]
    */
   constructor(framework, options = {}) {
     super(framework, options);
-    this.imageUrl = options.imageUrl || null;
-    this.initials = options.initials || '??';
-    this.size = options.size || 48;
-    this.bgColor = options.bgColor || this.generateColor(this.initials);
-    this.textColor = options.textColor || '#FFFFFF';
+
+    this.imageUrl    = options.imageUrl   || null;
+    this.initials    = options.initials   || '??';
+    this.size        = options.size       || 48;
+    this.bgColor     = options.bgColor    || this._generateColor(this.initials);
+    this.textColor   = options.textColor  || '#FFFFFF';
     this.borderWidth = options.borderWidth || 0;
     this.borderColor = options.borderColor || '#FFFFFF';
-    this.status = options.status || null; // 'online', 'offline', 'away', 'busy'
-    
-    this.width = this.size;
+    this.status      = options.status     || null;
+
+    this.width  = this.size;
     this.height = this.size;
-    
-    // Image component interne
-    this.imageComponent = null;
+
+    this._imageElement = null;
+
     if (this.imageUrl) {
-      this.imageComponent = new ImageComponent(framework, {
-        x: this.x,
-        y: this.y,
-        width: this.size,
-        height: this.size,
-        src: this.imageUrl,
-        fit: 'cover',
-        borderRadius: this.size / 2
-      });
+      this._loadImage(this.imageUrl);
     }
   }
-  
+
+  // ─────────────────────────────────────────
+  // IMAGE
+  // ─────────────────────────────────────────
+
+  /** @private */
+  _loadImage(url) {
+    const img   = new Image();
+    img.onload  = () => { this._imageElement = img; this.markDirty(); };
+    img.onerror = () => { this._imageElement = null; };
+    img.src     = url;
+  }
+
+  /**
+   * Change l'image de l'avatar.
+   * @param {string|null} url
+   */
+  setImage(url) {
+    this.imageUrl      = url;
+    this._imageElement = null;
+    if (url) this._loadImage(url);
+    else this.markDirty();
+  }
+
   /**
-   * Génère une couleur basée sur le texte
-   * @param {string} text - Texte pour générer la couleur
-   * @returns {string} Couleur hexadécimale
-   * @private
+   * Change le statut de l'avatar.
+   * @param {'online'|'offline'|'away'|'busy'|null} status
    */
-  generateColor(text) {
-    // Générer une couleur basée sur le texte (pour cohérence)
+  setStatus(status) {
+    this.status = status;
+    this.markDirty();
+  }
+
+  // ─────────────────────────────────────────
+  // COULEUR AUTO
+  // ─────────────────────────────────────────
+
+  /** @private */
+  _generateColor(text) {
     let hash = 0;
     for (let i = 0; i < text.length; i++) {
       hash = text.charCodeAt(i) + ((hash << 5) - hash);
     }
-    
-    const colors = [
+    const palette = [
       '#E91E63', '#9C27B0', '#673AB7', '#3F51B5',
       '#2196F3', '#00BCD4', '#009688', '#4CAF50',
-      '#FF9800', '#FF5722', '#795548', '#607D8B'
+      '#FF9800', '#FF5722', '#795548', '#607D8B',
     ];
-    
-    return colors[Math.abs(hash) % colors.length];
+    return palette[Math.abs(hash) % palette.length];
   }
-  
-  /**
-   * Dessine l'avatar
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
+
+  // ─────────────────────────────────────────
+  // DESSIN
+  // ─────────────────────────────────────────
+
   draw(ctx) {
     ctx.save();
-    
-    const centerX = this.x + this.size / 2;
-    const centerY = this.y + this.size / 2;
+
+    const cx     = this.x + this.size / 2;
+    const cy     = this.y + this.size / 2;
     const radius = this.size / 2;
-    
+
     // Bordure
     if (this.borderWidth > 0) {
       ctx.fillStyle = this.borderColor;
       ctx.beginPath();
-      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+      ctx.arc(cx, cy, radius, 0, Math.PI * 2);
       ctx.fill();
     }
-    
-    // Clipping circulaire
+
+    // Clip circulaire
     ctx.save();
     ctx.beginPath();
-    ctx.arc(centerX, centerY, radius - this.borderWidth, 0, Math.PI * 2);
+    ctx.arc(cx, cy, radius - this.borderWidth, 0, Math.PI * 2);
     ctx.clip();
-    
-    if (this.imageComponent && this.imageComponent.loaded) {
-      // Dessiner l'image
-      this.imageComponent.x = this.x + this.borderWidth;
-      this.imageComponent.y = this.y + this.borderWidth;
-      this.imageComponent.width = this.size - this.borderWidth * 2;
-      this.imageComponent.height = this.size - this.borderWidth * 2;
-      this.imageComponent.draw(ctx);
+
+    if (this._imageElement) {
+      // Dessin de l'image (cover)
+      const s       = this.size - this.borderWidth * 2;
+      const sx      = this.x + this.borderWidth;
+      const sy      = this.y + this.borderWidth;
+      const imgW    = this._imageElement.naturalWidth;
+      const imgH    = this._imageElement.naturalHeight;
+      const scale   = Math.max(s / imgW, s / imgH);
+      const drawW   = imgW * scale;
+      const drawH   = imgH * scale;
+      const drawX   = sx + (s - drawW) / 2;
+      const drawY   = sy + (s - drawH) / 2;
+      ctx.drawImage(this._imageElement, drawX, drawY, drawW, drawH);
     } else {
-      // Background coloré
+      // Fond coloré + initiales
       ctx.fillStyle = this.bgColor;
       ctx.fillRect(this.x, this.y, this.size, this.size);
-      
-      // Initiales
-      ctx.fillStyle = this.textColor;
-      ctx.font = `bold ${this.size / 2.5}px -apple-system, sans-serif`;
-      ctx.textAlign = 'center';
+
+      ctx.fillStyle    = this.textColor;
+      ctx.font         = `bold ${this.size / 2.5}px -apple-system, sans-serif`;
+      ctx.textAlign    = 'center';
       ctx.textBaseline = 'middle';
-      ctx.fillText(this.initials.toUpperCase(), centerX, centerY);
+      ctx.fillText(this.initials.toUpperCase(), cx, cy);
     }
-    
+
     ctx.restore();
-    
+
     // Indicateur de statut
     if (this.status) {
-      const statusSize = this.size / 4;
-      const statusX = this.x + this.size - statusSize;
-      const statusY = this.y + this.size - statusSize;
-      
-      let statusColor;
-      switch (this.status) {
-        case 'online': statusColor = '#4CAF50'; break;
-        case 'offline': statusColor = '#9E9E9E'; break;
-        case 'away': statusColor = '#FF9800'; break;
-        case 'busy': statusColor = '#F44336'; break;
-        default: statusColor = '#9E9E9E';
-      }
-      
-      // Bordure blanche autour du statut
+      const dotSize = this.size / 4;
+      const dotX    = this.x + this.size - dotSize;
+      const dotY    = this.y + this.size - dotSize;
+
+      const statusColors = {
+        online:  '#4CAF50',
+        offline: '#9E9E9E',
+        away:    '#FF9800',
+        busy:    '#F44336',
+      };
+      const dotColor = statusColors[this.status] || '#9E9E9E';
+
+      // Contour blanc
       ctx.fillStyle = '#FFFFFF';
       ctx.beginPath();
-      ctx.arc(statusX, statusY, statusSize / 2 + 1, 0, Math.PI * 2);
+      ctx.arc(dotX, dotY, dotSize / 2 + 1, 0, Math.PI * 2);
       ctx.fill();
-      
+
       // Cercle de statut
-      ctx.fillStyle = statusColor;
+      ctx.fillStyle = dotColor;
       ctx.beginPath();
-      ctx.arc(statusX, statusY, statusSize / 2, 0, Math.PI * 2);
+      ctx.arc(dotX, dotY, dotSize / 2, 0, Math.PI * 2);
       ctx.fill();
     }
-    
+
     ctx.restore();
   }
-  
-  /**
-   * Change l'image de l'avatar
-   * @param {string} url - Nouvelle URL d'image
-   */
-  setImage(url) {
-    this.imageUrl = url;
-    if (url) {
-      this.imageComponent = new ImageComponent(this.framework, {
-        x: this.x,
-        y: this.y,
-        width: this.size,
-        height: this.size,
-        src: url,
-        fit: 'cover',
-        borderRadius: this.size / 2
-      });
-    } else {
-      this.imageComponent = null;
-    }
-  }
-  
-  /**
-   * Change le statut
-   * @param {string} status - Nouveau statut
-   */
-  setStatus(status) {
-    this.status = status;
-  }
-  
-  /**
-   * 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 l'avatar
-   */
+
+  // ─────────────────────────────────────────
+  // HIT TEST
+  // ─────────────────────────────────────────
+
   isPointInside(x, y) {
-    const adjustedY = y - this.framework.scrollOffset;
-    const dx = x - (this.x + this.size / 2);
-    const dy = adjustedY - (this.y + this.size / 2);
+    const scrollOffset = this.framework?.scrollOffset ?? 0;
+    const adjY         = y + scrollOffset; // le framework soustrait le scroll dans les coords passées
+    const dx           = x - (this.x + this.size / 2);
+    const dy           = adjY - (this.y + this.size / 2);
     return Math.sqrt(dx * dx + dy * dy) <= this.size / 2;
   }
+
+  // ─────────────────────────────────────────
+  // DESTROY
+  // ─────────────────────────────────────────
+
+  destroy() {
+    this._imageElement = null;
+    super.destroy();
+  }
 }
 
 export default Avatar;