canvasframework 0.7.0 → 0.7.1

package/components/Switch.js

@@ -1,146 +1,180 @@
 import Component from '../core/Component.js';
+
 /**
- * Interrupteur (toggle)
- * @class
- * @extends Component
- * @property {boolean} checked - État activé
- * @property {string} platform - Plateforme
- * @property {number} animProgress - Progression de l'animation
- * @property {boolean} isAnimating - En cours d'animation
- * @property {Function} onChange - Callback au changement
+ * Interrupteur (toggle) — Material et Cupertino.
+ *
+ * Corrections par rapport à la version précédente :
+ *  - setInterval remplacé par requestAnimationFrame (plus précis, respecte le display rate)
+ *  - `adjustedY` mort supprimé
+ *  - Support `disabled` ajouté
+ *  - destroy() annule le RAF en cours
  */
 class Switch extends Component {
   /**
-   * Crée une instance de Switch
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}] - Options de configuration
-   * @param {boolean} [options.checked=false] - État initial
-   * @param {Function} [options.onChange] - Callback au changement
+   * @param {CanvasFramework} framework
+   * @param {Object} [options={}]
+   * @param {boolean} [options.checked=false]
+   * @param {boolean} [options.disabled=false]
+   * @param {Function} [options.onChange]
    */
   constructor(framework, options = {}) {
     super(framework, options);
-    this.checked = options.checked || false;
+
+    this.checked  = options.checked  || false;
+    this.disabled = options.disabled || false;
     this.platform = framework.platform;
-    this.width = 51;
+
+    // Dimensions fixes Material / Cupertino
+    this.width  = 51;
     this.height = 31;
+
     this.onChange = options.onChange;
+
+    // Progression d'animation [0 = off, 1 = on]
     this.animProgress = this.checked ? 1 : 0;
-    this.isAnimating = false;
-    
-    // S'assurer que le Switch est cliquable
-    this.onClick = this.handleClick.bind(this);
+    this._animating   = false;
+    this._rafId       = null;
+
+    this.onClick = this._handleClick.bind(this);
   }
 
-  /**
-   * Gère le clic sur le switch
-   * @private
-   */
-  handleClick() {
-    console.log('Switch clicked!');
+  // ─────────────────────────────────────────
+  // INTERACTIONS
+  // ─────────────────────────────────────────
+
+  /** @private */
+  _handleClick() {
+    if (this.disabled) return;
+
     this.checked = !this.checked;
-    if (this.onChange) this.onChange(this.checked);
-    this.animate();
+    this.onChange?.(this.checked);
+    this._startAnimation();
   }
 
-  /**
-   * Anime le toggle
-   * @private
-   */
-  animate() {
-    if (this.isAnimating) return;
-    
-    this.isAnimating = true;
+  /** @private */
+  _startAnimation() {
+    if (this._animating) return;
+    this._animating = true;
+
     const target = this.checked ? 1 : 0;
-    const step = 0.1;
-    const interval = setInterval(() => {
-      if (Math.abs(this.animProgress - target) < step) {
+
+    const step = () => {
+      if (this._destroyed) { this._rafId = null; this._animating = false; return; }
+
+      const diff = target - this.animProgress;
+
+      if (Math.abs(diff) < 0.01) {
         this.animProgress = target;
-        clearInterval(interval);
-        this.isAnimating = false;
-      } else {
-        this.animProgress += this.animProgress < target ? step : -step;
+        this._animating   = false;
+        this._rafId       = null;
+        this.markDirty();
+        return;
       }
-    }, 16);
+
+      // Lerp fluide (~150 ms pour un écran 60 Hz)
+      this.animProgress += diff * 0.18;
+      this.markDirty();
+      this._rafId = requestAnimationFrame(step);
+    };
+
+    this._rafId = requestAnimationFrame(step);
   }
 
-  /**
-   * Dessine le switch
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
+  // ─────────────────────────────────────────
+  // DESSIN
+  // ─────────────────────────────────────────
+
   draw(ctx) {
     ctx.save();
-    
-    // Déplacer le contexte avec le scroll
-    const adjustedY = this.y;
-    
+
+    if (this.disabled) ctx.globalAlpha = 0.38;
+
     if (this.platform === 'material') {
-      // Material Design Switch
-      const trackColor = this.checked ? 'rgba(98, 0, 238, 0.5)' : 'rgba(0, 0, 0, 0.38)';
-      const thumbColor = this.checked ? '#6200EE' : '#FAFAFA';
-
-      // Track
-      ctx.fillStyle = trackColor;
-      ctx.beginPath();
-      ctx.arc(this.x + 15.5, adjustedY + 15.5, 7, Math.PI / 2, Math.PI * 1.5);
-      ctx.arc(this.x + 35.5, adjustedY + 15.5, 7, Math.PI * 1.5, Math.PI / 2);
-      ctx.closePath();
-      ctx.fill();
-
-      // Thumb
-      const thumbX = this.x + 15.5 + (this.animProgress * 20);
-      ctx.fillStyle = thumbColor;
-      ctx.beginPath();
-      ctx.arc(thumbX, adjustedY + 15.5, 10, 0, Math.PI * 2);
-      ctx.fill();
-
-      // Shadow for unchecked state
-      if (!this.checked) {
-        ctx.strokeStyle = 'rgba(0, 0, 0, 0.12)';
-        ctx.lineWidth = 1;
-        ctx.stroke();
-      }
+      this._drawMaterial(ctx);
     } else {
-      // Cupertino (iOS) Switch
-      const bgColor = this.checked ? '#34C759' : '#E9E9EA';
-
-      // Track
-      ctx.fillStyle = bgColor;
-      ctx.beginPath();
-      ctx.arc(this.x + 15.5, adjustedY + 15.5, 15.5, Math.PI / 2, Math.PI * 1.5);
-      ctx.arc(this.x + 35.5, adjustedY + 15.5, 15.5, Math.PI * 1.5, Math.PI / 2);
-      ctx.closePath();
-      ctx.fill();
-
-      // Thumb with shadow
-      const thumbX = this.x + 15.5 + (this.animProgress * 20);
-      ctx.fillStyle = '#FFFFFF';
-      ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
-      ctx.shadowBlur = 4;
-      ctx.shadowOffsetY = 2;
-      ctx.beginPath();
-      ctx.arc(thumbX, adjustedY + 15.5, 13.5, 0, Math.PI * 2);
-      ctx.fill();
-      
-      // Reset shadow
-      ctx.shadowColor = 'transparent';
-      ctx.shadowBlur = 0;
-      ctx.shadowOffsetY = 0;
+      this._drawCupertino(ctx);
     }
-    
+
     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 switch
-   */
+  /** @private */
+  _drawMaterial(ctx) {
+    const trackColor = this.checked ? 'rgba(98,0,238,0.5)' : 'rgba(0,0,0,0.38)';
+    const thumbColor = this.checked ? '#6200EE' : '#FAFAFA';
+
+    // Track
+    ctx.fillStyle = trackColor;
+    ctx.beginPath();
+    ctx.arc(this.x + 15.5, this.y + 15.5, 7, Math.PI / 2, Math.PI * 1.5);
+    ctx.arc(this.x + 35.5, this.y + 15.5, 7, Math.PI * 1.5, Math.PI / 2);
+    ctx.closePath();
+    ctx.fill();
+
+    // Thumb
+    const thumbX = this.x + 15.5 + this.animProgress * 20;
+    ctx.fillStyle = thumbColor;
+    ctx.beginPath();
+    ctx.arc(thumbX, this.y + 15.5, 10, 0, Math.PI * 2);
+    ctx.fill();
+
+    if (!this.checked) {
+      ctx.strokeStyle = 'rgba(0,0,0,0.12)';
+      ctx.lineWidth   = 1;
+      ctx.stroke();
+    }
+  }
+
+  /** @private */
+  _drawCupertino(ctx) {
+    const bgColor = this.checked ? '#34C759' : '#E9E9EA';
+
+    // Track
+    ctx.fillStyle = bgColor;
+    ctx.beginPath();
+    ctx.arc(this.x + 15.5, this.y + 15.5, 15.5, Math.PI / 2, Math.PI * 1.5);
+    ctx.arc(this.x + 35.5, this.y + 15.5, 15.5, Math.PI * 1.5, Math.PI / 2);
+    ctx.closePath();
+    ctx.fill();
+
+    // Thumb avec ombre
+    const thumbX = this.x + 15.5 + this.animProgress * 20;
+    ctx.fillStyle       = '#FFFFFF';
+    ctx.shadowColor     = 'rgba(0,0,0,0.3)';
+    ctx.shadowBlur      = 4;
+    ctx.shadowOffsetY   = 2;
+    ctx.beginPath();
+    ctx.arc(thumbX, this.y + 15.5, 13.5, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Reset ombre
+    ctx.shadowColor   = 'transparent';
+    ctx.shadowBlur    = 0;
+    ctx.shadowOffsetY = 0;
+  }
+
+  // ─────────────────────────────────────────
+  // HIT TEST
+  // ─────────────────────────────────────────
+
   isPointInside(x, y) {
-    return x >= this.x && 
-           x <= this.x + this.width && 
-           y >= this.y && 
-           y <= this.y + this.height;
+    if (this.disabled) return false;
+    return (
+      x >= this.x && x <= this.x + this.width &&
+      y >= this.y && y <= this.y + this.height
+    );
+  }
+
+  // ─────────────────────────────────────────
+  // DESTROY
+  // ─────────────────────────────────────────
+
+  destroy() {
+    if (this._rafId) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+    }
+    super.destroy();
   }
 }
 

package/components/Text.js

@@ -1,141 +1,142 @@
 import Component from '../core/Component.js';
+
 /**
- * Composant texte
- * @class
- * @extends Component
- * @property {string} text - Texte à afficher
- * @property {number} fontSize - Taille de police
- * @property {string} color - Couleur
- * @property {string} align - Alignement ('left', 'center', 'right')
- * @property {boolean} bold - Gras
- * @property {number|null} maxWidth - Largeur maximale
- * @property {boolean} wrap - Retour à la ligne
- * @property {number} lineHeight - Hauteur de ligne
- * @property {string[]|null} wrappedLines - Lignes après wrap
+ * Text — composant texte avec support du wrap et de la troncature.
+ *
+ * Corrections :
+ *  - Calcul de x aligné pour tous les modes (center / right / left)
+ *  - isPointInside retourne false sauf si onClick est défini
+ *  - destroy() propre
  */
 class Text extends Component {
   /**
-   * Crée une instance de Text
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}] - Options de configuration
-   * @param {string} [options.text=''] - Texte
-   * @param {number} [options.fontSize=16] - Taille de police
-   * @param {string} [options.color='#000000'] - Couleur
-   * @param {string} [options.align='left'] - Alignement
-   * @param {boolean} [options.bold=false] - Gras
-   * @param {number} [options.maxWidth] - Largeur maximale
-   * @param {boolean} [options.wrap=false] - Retour à la ligne
-   * @param {number} [options.lineHeight] - Hauteur de ligne
+   * @param {CanvasFramework} framework
+   * @param {Object} [options={}]
+   * @param {string}  [options.text='']
+   * @param {number}  [options.fontSize=16]
+   * @param {string}  [options.color='#000000']
+   * @param {string}  [options.align='left']     - 'left' | 'center' | 'right'
+   * @param {boolean} [options.bold=false]
+   * @param {number}  [options.maxWidth]          - Largeur maximale (troncature ou wrap)
+   * @param {boolean} [options.wrap=false]        - Retour à la ligne automatique
+   * @param {number}  [options.lineHeight]        - Hauteur de ligne (défaut : fontSize × 1.2)
    */
   constructor(framework, options = {}) {
     super(framework, options);
-    this.text = options.text || '';
-    this.fontSize = options.fontSize || 16;
-    this.color = options.color || '#000000';
-    this.align = options.align || 'left';
-    this.bold = options.bold || false;
-    this.maxWidth = options.maxWidth || null; // Nouvelle option: largeur maximale
-    this.wrap = options.wrap || false; // Nouvelle option: retour à la ligne
+
+    this.text       = options.text     || '';
+    this.fontSize   = options.fontSize || 16;
+    this.color      = options.color    || '#000000';
+    this.align      = options.align    || 'left';
+    this.bold       = options.bold     || false;
+    this.maxWidth   = options.maxWidth || null;
+    this.wrap       = options.wrap     || false;
     this.lineHeight = options.lineHeight || this.fontSize * 1.2;
-    
-    // Calculer la hauteur en fonction du texte
-    if (this.wrap && this.maxWidth && this.text) {
-      this.calculateWrappedHeight();
-    }
-  }
-  
-  /**
-   * Calcule la hauteur avec wrap
-   * @private
-   */
-  calculateWrappedHeight() {
-    // Cette méthode sera appelée dans draw quand on a le contexte
-    // Pour l'instant, on initialise juste
-    this.wrappedLines = null;
   }
 
-  /**
-   * Dessine le texte
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
+  // ─────────────────────────────────────────
+  // DESSIN
+  // ─────────────────────────────────────────
+
   draw(ctx) {
     ctx.save();
-    ctx.fillStyle = this.color;
-    ctx.font = `${this.bold ? 'bold ' : ''}${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
-    ctx.textAlign = this.align;
+
+    ctx.fillStyle    = this.color;
+    ctx.font         = `${this.bold ? 'bold ' : ''}${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
+    ctx.textAlign    = this.align;
     ctx.textBaseline = 'top';
-    
+
+    // Calcul de l'ancre X selon l'alignement
+    const contentWidth = this.maxWidth || this.width;
+    let anchorX;
+    if (this.align === 'center') {
+      anchorX = this.x + contentWidth / 2;
+    } else if (this.align === 'right') {
+      anchorX = this.x + contentWidth;
+    } else {
+      anchorX = this.x;
+    }
+
     let lines = [this.text];
-    
-    // Si wrap est activé et on a une largeur max, on divise le texte
+
     if (this.wrap && this.maxWidth && this.text) {
-      lines = this.wrapText(ctx, this.text, this.maxWidth);
+      lines = this._wrapText(ctx, this.text, this.maxWidth);
     } else if (this.maxWidth && this.text) {
-      // Sinon, on tronque le texte avec des points de suspension
-      const ellipsis = '...';
-      let text = this.text;
-      while (ctx.measureText(text).width > this.maxWidth && text.length > 3) {
-        text = text.substring(0, text.length - 1);
-      }
-      if (text !== this.text && text.length > 3) {
-        text = text.substring(0, text.length - 3) + ellipsis;
-      }
-      lines = [text];
+      lines = [this._truncateText(ctx, this.text, this.maxWidth)];
     }
-    
-    // Calculer la position x en fonction de l'alignement
-    const x = this.align === 'center' ? this.x + (this.maxWidth || this.width) / 2 :
-               this.align === 'right' ? this.x + (this.maxWidth || this.width) : this.x;
-    
-    // Dessiner chaque ligne
+
     for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-      const y = this.y + (i * this.lineHeight);
-      ctx.fillText(line, x, y);
+      ctx.fillText(lines[i], anchorX, this.y + i * this.lineHeight);
     }
-    
-    // Ajuster la hauteur si on a plusieurs lignes
+
+    // Mise à jour de la hauteur si multilignes
     if (lines.length > 1) {
       this.height = lines.length * this.lineHeight;
     }
-    
+
     ctx.restore();
   }
 
-  /**
-   * Divise le texte en plusieurs lignes
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   * @param {string} text - Texte à diviser
-   * @param {number} maxWidth - Largeur maximale
-   * @returns {string[]} Tableau de lignes
-   * @private
-   */
-  wrapText(ctx, text, maxWidth) {
-    const words = text.split(' ');
-    const lines = [];
-    let currentLine = words[0];
-    
+  // ─────────────────────────────────────────
+  // UTILITAIRES
+  // ─────────────────────────────────────────
+
+  /** @private */
+  _wrapText(ctx, text, maxWidth) {
+    const words   = text.split(' ');
+    const lines   = [];
+    let current   = words[0] || '';
+
     for (let i = 1; i < words.length; i++) {
-      const word = words[i];
-      const width = ctx.measureText(currentLine + " " + word).width;
-      if (width < maxWidth) {
-        currentLine += " " + word;
+      const test = `${current} ${words[i]}`;
+      if (ctx.measureText(test).width <= maxWidth) {
+        current = test;
       } else {
-        lines.push(currentLine);
-        currentLine = word;
+        lines.push(current);
+        current = words[i];
       }
     }
-    lines.push(currentLine);
+    lines.push(current);
     return lines;
   }
 
+  /** @private */
+  _truncateText(ctx, text, maxWidth) {
+    if (ctx.measureText(text).width <= maxWidth) return text;
+
+    const ellipsis = '...';
+    let truncated  = text;
+
+    while (truncated.length > 0 && ctx.measureText(truncated + ellipsis).width > maxWidth) {
+      truncated = truncated.slice(0, -1);
+    }
+
+    return truncated + ellipsis;
+  }
+
+  // ─────────────────────────────────────────
+  // HIT TEST
+  // ─────────────────────────────────────────
+
   /**
-   * Vérifie si un point est dans les limites
-   * @returns {boolean} False (non cliquable)
+   * Retourne false par défaut (le texte n'est pas cliquable).
+   * Retourne true uniquement si un onClick a été défini.
    */
-  isPointInside() {
-    return false;
+  isPointInside(x, y) {
+    if (!this.onClick) return false;
+    return (
+      x >= this.x && x <= this.x + this.width &&
+      y >= this.y && y <= this.y + this.height
+    );
+  }
+
+  // ─────────────────────────────────────────
+  // DESTROY
+  // ─────────────────────────────────────────
+
+  destroy() {
+    super.destroy();
   }
 }
 
-export default Text;
+export default Text;