canvasframework 0.7.0 → 0.7.1

package/components/Toast.js

@@ -1,236 +1,212 @@
 import Component from '../core/Component.js';
+import { roundRect } from '../core/CanvasUtils.js';
+
 /**
- * Toast (notification temporaire)
- * @class
- * @extends Component
- * @property {string} text - Message
- * @property {number} duration - Durée d'affichage
- * @property {number} fontSize - Taille de police
- * @property {number} padding - Padding interne
- * @property {number} opacity - Opacité
- * @property {string} platform - Plateforme
- * @property {boolean} isVisible - Visibilité
- * @property {number} targetY - Position Y cible
- * @property {number} minWidth - Largeur minimale
- * @property {number} maxWidth - Largeur maximale
- * @property {boolean} animating - En cours d'animation
+ * Toast — notification temporaire non bloquante.
+ *
+ * Corrections :
+ *  - roundRect() vient de CanvasUtils (plus de copie locale)
+ *  - Guard _destroyed dans les boucles RAF
+ *  - targetY tient compte de SafeArea / bottomOffset
+ *  - destroy() annule les RAF en cours
  */
 class Toast extends Component {
   /**
-   * Crée une instance de Toast
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}] - Options de configuration
-   * @param {string} [options.text=''] - Message
-   * @param {number} [options.duration=3000] - Durée en ms
-   * @param {number} [options.x] - Position X (auto-centré)
-   * @param {number} [options.y] - Position Y (en bas)
+   * @param {CanvasFramework} framework
+   * @param {Object} [options={}]
+   * @param {string}  [options.text='']
+   * @param {number}  [options.duration=3000]   - Durée d'affichage en ms
+   * @param {number}  [options.bottomOffset=100] - Distance depuis le bas de l'écran
    */
   constructor(framework, options = {}) {
     super(framework, {
       x: 0,
-      y: framework.height, // Commence hors écran en bas
+      y: framework.height,
       width: framework.width,
-      height: 60, // Hauteur fixe pour le toast
-      ...options
+      height: 60,
+      ...options,
     });
-    
-    this.text = options.text || '';
-    this.duration = options.duration || 3000;
-    this.fontSize = 16;
-    this.padding = 20;
-    this.opacity = 0;
-    this.platform = framework.platform;
-    this.isVisible = false;
-    
-    // Position cible (en bas, légèrement remonté)
-    this.targetY = framework.height - 100;
-    
-    // Calculer la largeur minimale
+
+    this.text         = options.text     || '';
+    this.duration     = options.duration ?? 3000;
+    this.fontSize     = 16;
+    this.padding      = 20;
+    this.opacity      = 0;
+    this.platform     = framework.platform;
+    this.isVisible    = false;
+    this._rafId       = null;
+    this._hideTimer   = null;
+
+    // Offset configurable — respecte SafeArea si disponible
+    const safeAreaBottom = framework.safeArea?.bottom ?? 0;
+    const bottomOffset   = options.bottomOffset ?? 100;
+    this.targetY = framework.height - bottomOffset - safeAreaBottom;
+
     this.minWidth = 200;
     this.maxWidth = Math.min(600, framework.width - 40);
-    
-    // Animation
-    this.animating = false;
-    
-    // NE PAS appeler show() ici - laissé à l'appelant
   }
 
-  /**
-   * Affiche le toast
-   */
+  // ─────────────────────────────────────────
+  // API PUBLIQUE
+  // ─────────────────────────────────────────
+
+  /** Affiche le toast et programme sa disparition. */
   show() {
     this.isVisible = true;
-    this.visible = true;
-    this.animateIn();
-    
-    // Auto-dismiss après la durée
-    setTimeout(() => {
-      if (this.isVisible) {
-        this.hide();
-      }
+    this.visible   = true;
+    this._animateIn();
+
+    this._hideTimer = setTimeout(() => {
+      if (this.isVisible) this.hide();
     }, this.duration);
   }
 
-  /**
-   * Cache le toast
-   */
+  /** Masque le toast. */
   hide() {
-    this.animateOut();
+    if (this._hideTimer) {
+      clearTimeout(this._hideTimer);
+      this._hideTimer = null;
+    }
+    this._animateOut();
   }
 
-  /**
-   * Anime l'entrée
-   * @private
-   */
-  animateIn() {
-    if (this.animating) return;
-    this.animating = true;
-    
+  // ─────────────────────────────────────────
+  // ANIMATIONS
+  // ─────────────────────────────────────────
+
+  /** @private */
+  _animateIn() {
+    if (this._rafId) return;
+
     const animate = () => {
+      if (this._destroyed) { this._rafId = null; return; }
+
       this.opacity += 0.1;
-      this.y -= (this.y - this.targetY) * 0.2;
-      
+      this.y       -= (this.y - this.targetY) * 0.2;
+
       if (this.opacity >= 1 && Math.abs(this.y - this.targetY) < 1) {
         this.opacity = 1;
-        this.y = this.targetY;
-        this.animating = false;
+        this.y       = this.targetY;
+        this._rafId  = null;
         return;
       }
-      
-      requestAnimationFrame(animate);
+
+      this._rafId = requestAnimationFrame(animate);
     };
-    
-    animate();
+
+    this._rafId = requestAnimationFrame(animate);
   }
 
-  /**
-   * Anime la sortie
-   * @private
-   */
-  animateOut() {
-    if (this.animating) return;
-    this.animating = true;
-    
+  /** @private */
+  _animateOut() {
+    if (this._rafId) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+    }
+
     const animate = () => {
+      if (this._destroyed) { this._rafId = null; return; }
+
       this.opacity -= 0.1;
-      this.y += 5;
-      
+      this.y       += 5;
+
       if (this.opacity <= 0) {
-        this.opacity = 0;
+        this.opacity   = 0;
         this.isVisible = false;
-        this.visible = false;
-        this.animating = false;
+        this.visible   = false;
+        this._rafId    = null;
         this.framework.remove(this);
         return;
       }
-      
-      requestAnimationFrame(animate);
+
+      this._rafId = requestAnimationFrame(animate);
     };
-    
-    animate();
+
+    this._rafId = requestAnimationFrame(animate);
   }
 
-  /**
-   * Dessine le toast
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
+  // ─────────────────────────────────────────
+  // DESSIN
+  // ─────────────────────────────────────────
+
   draw(ctx) {
     if (!this.isVisible || this.opacity <= 0) return;
-    
+
     ctx.save();
     ctx.globalAlpha = this.opacity;
-    
-    // Calculer la largeur en fonction du texte
+
     ctx.font = `${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
-    const textWidth = ctx.measureText(this.text).width;
+    const textWidth  = ctx.measureText(this.text).width;
     const toastWidth = Math.min(
       this.maxWidth,
       Math.max(this.minWidth, textWidth + this.padding * 2)
     );
-    
-    // Position centrée horizontalement
+
     const toastX = (this.framework.width - toastWidth) / 2;
     const toastY = this.y;
-    
+
     if (this.platform === 'material') {
-      // Material Toast
-      ctx.fillStyle = '#323232';
-      ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
-      ctx.shadowBlur = 15;
-      ctx.shadowOffsetY = 4;
+      ctx.fillStyle       = '#323232';
+      ctx.shadowColor     = 'rgba(0,0,0,0.3)';
+      ctx.shadowBlur      = 15;
+      ctx.shadowOffsetY   = 4;
       ctx.beginPath();
-      this.roundRect(ctx, toastX, toastY, toastWidth, this.height, 8);
+      roundRect(ctx, toastX, toastY, toastWidth, this.height, 8);
       ctx.fill();
     } else {
-      // Cupertino Toast
-      ctx.fillStyle = 'rgba(0, 0, 0, 0.85)';
-      ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
-      ctx.shadowBlur = 20;
-      ctx.shadowOffsetY = 4;
+      ctx.fillStyle       = 'rgba(0,0,0,0.85)';
+      ctx.shadowColor     = 'rgba(0,0,0,0.2)';
+      ctx.shadowBlur      = 20;
+      ctx.shadowOffsetY   = 4;
       ctx.beginPath();
-      this.roundRect(ctx, toastX, toastY, toastWidth, this.height, 14);
+      roundRect(ctx, toastX, toastY, toastWidth, this.height, 14);
       ctx.fill();
     }
-    
-    ctx.shadowColor = 'transparent';
-    ctx.shadowBlur = 0;
-    
-    // Texte
-    ctx.fillStyle = '#FFFFFF';
-    ctx.font = `${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
-    ctx.textAlign = 'center';
+
+    ctx.shadowColor   = 'transparent';
+    ctx.shadowBlur    = 0;
+    ctx.shadowOffsetY = 0;
+
+    // Texte (tronqué si nécessaire)
+    ctx.fillStyle    = '#FFFFFF';
+    ctx.textAlign    = 'center';
     ctx.textBaseline = 'middle';
-    
-    // Tronquer le texte si nécessaire
+
     let displayText = this.text;
     if (textWidth > toastWidth - this.padding * 2) {
-      // Trouver où couper le texte
-      let truncated = this.text;
       for (let i = this.text.length; i > 0; i--) {
-        truncated = this.text.substring(0, i) + '...';
+        const truncated = this.text.substring(0, i) + '...';
         if (ctx.measureText(truncated).width <= toastWidth - this.padding * 2) {
           displayText = truncated;
           break;
         }
       }
     }
-    
+
     ctx.fillText(displayText, toastX + toastWidth / 2, toastY + this.height / 2);
-    
-    ctx.restore();
-  }
 
-  /**
-   * Dessine un rectangle avec coins arrondis
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   * @param {number} x - Position X
-   * @param {number} y - Position Y
-   * @param {number} width - Largeur
-   * @param {number} height - Hauteur
-   * @param {number} radius - Rayon des coins
-   * @private
-   */
-  roundRect(ctx, x, y, width, height, radius) {
-    ctx.beginPath();
-    ctx.moveTo(x + radius, y);
-    ctx.lineTo(x + width - radius, y);
-    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-    ctx.lineTo(x + width, y + height - radius);
-    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
-    ctx.lineTo(x + radius, y + height);
-    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-    ctx.lineTo(x, y + radius);
-    ctx.quadraticCurveTo(x, y, x + radius, y);
-    ctx.closePath();
+    ctx.restore();
   }
 
-  /**
-   * Vérifie si un point est dans les limites
-   * @returns {boolean} False (non cliquable)
-   */
   isPointInside() {
     return false; // Non cliquable
   }
+
+  // ─────────────────────────────────────────
+  // DESTROY
+  // ─────────────────────────────────────────
+
+  destroy() {
+    if (this._rafId) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+    }
+    if (this._hideTimer) {
+      clearTimeout(this._hideTimer);
+      this._hideTimer = null;
+    }
+    super.destroy();
+  }
 }
 
 export default Toast;

package/components/VirtualList.js

@@ -2,119 +2,148 @@ import Component from '../core/Component.js';
 import ListItem from '../components/ListItem.js';
 
 /**
- * Virtual List : optimise le rendu pour les longues listes
- * @class
- * @extends Component
+ * VirtualList — rendu optimisé pour les longues listes.
+ *
+ * Corrections :
+ *  - visibleItems passe de Array à Map<index, ListItem> → lookup O(1)
+ *  - scroll() appelle markDirty() pour déclencher le re-render
+ *  - destroy() supprime tous les items restants
  */
 class VirtualList extends Component {
+  /**
+   * @param {CanvasFramework} framework
+   * @param {Object} [options={}]
+   * @param {number}   [options.itemHeight=56]
+   * @param {number}   [options.height]         - Hauteur du viewport visible
+   * @param {Function} [options.onItemClick]    - (index, data) => void
+   */
   constructor(framework, options = {}) {
     super(framework, options);
 
-    this.allItemsData = [];        // Stocke toutes les données des items (mais pas tous les objets)
-    this.visibleItems = [];        // Liste des ListItem réellement créés/dessinés
-    this.itemHeight = options.itemHeight || 56;
-    this.onItemClick = options.onItemClick;
-    this.y = options.y || 0;
-
-    this.viewportHeight = options.height || framework.height; // Hauteur visible
-    this.scrollOffset = 0; // Position de scroll
+    this.allItemsData   = [];          // Toutes les données (légères)
+    this.visibleItems   = new Map();   // Map<index, ListItem> — O(1) lookup
+    this.itemHeight     = options.itemHeight || 56;
+    this.onItemClick    = options.onItemClick;
+    this.y              = options.y || 0;
+    this.viewportHeight = options.height || framework.height;
+    this.scrollOffset   = 0;
   }
 
+  // ─────────────────────────────────────────
+  // API PUBLIQUE
+  // ─────────────────────────────────────────
+
   /**
-   * Ajoute un item (seule la data est stockée)
-   * @param {Object} itemOptions
+   * Ajoute un item (seule la donnée est stockée, pas l'objet visuel).
+   * @param {Object} itemOptions - Options passées à ListItem lors de la création
    */
   addItem(itemOptions) {
     this.allItemsData.push(itemOptions);
-    this.updateVisibleItems();
+    this._updateVisibleItems();
   }
 
   /**
-   * Supprime tous les items
+   * Supprime tous les items (données + objets visuels).
    */
   clear() {
-    for (let item of this.visibleItems) {
+    for (const item of this.visibleItems.values()) {
       this.framework.remove(item);
     }
     this.allItemsData = [];
-    this.visibleItems = [];
+    this.visibleItems.clear();
     this.height = 0;
   }
 
   /**
-   * Met à jour la liste des items visibles selon scrollOffset
+   * Fait défiler la liste d'un delta.
+   * @param {number} deltaY - Valeur positive = vers le bas
    */
-  updateVisibleItems() {
+  scroll(deltaY) {
+    this.scrollOffset += deltaY;
+    this.scrollOffset  = Math.max(0, this.scrollOffset);
+
+    const maxScroll = Math.max(0, this.allItemsData.length * this.itemHeight - this.viewportHeight);
+    this.scrollOffset = Math.min(this.scrollOffset, maxScroll);
+
+    this._updateVisibleItems();
+    this.markDirty(); // Déclenche le re-render du framework
+  }
+
+  // ─────────────────────────────────────────
+  // INTERNE
+  // ─────────────────────────────────────────
+
+  /** @private */
+  _updateVisibleItems() {
     const firstIndex = Math.floor(this.scrollOffset / this.itemHeight);
-    const lastIndex = Math.min(this.allItemsData.length - 1, Math.ceil((this.scrollOffset + this.viewportHeight) / this.itemHeight));
+    const lastIndex  = Math.min(
+      this.allItemsData.length - 1,
+      Math.ceil((this.scrollOffset + this.viewportHeight) / this.itemHeight)
+    );
 
-    const newVisibleItems = [];
+    const nextVisible = new Set();
 
     for (let i = firstIndex; i <= lastIndex; i++) {
-      let item = this.visibleItems.find(v => v.__virtualIndex === i);
-      if (!item) {
-        // Crée un nouvel item si pas existant
+      nextVisible.add(i);
+
+      const targetY = this.y + i * this.itemHeight - this.scrollOffset;
+
+      if (this.visibleItems.has(i)) {
+        // Mettre à jour la position Y si l'item existe déjà
+        this.visibleItems.get(i).y = targetY;
+      } else {
+        // Créer un nouvel item
         const data = this.allItemsData[i];
-        item = new ListItem(this.framework, {
+        const item = new ListItem(this.framework, {
           ...data,
           x: this.x,
-          y: this.y + i * this.itemHeight - this.scrollOffset,
+          y: targetY,
           width: this.width,
           height: this.itemHeight,
           onClick: () => {
-            if (this.onItemClick) this.onItemClick(i, data);
-            if (data.onClick) data.onClick();
-          }
+            this.onItemClick?.(i, data);
+            data.onClick?.();
+          },
         });
         item.__virtualIndex = i;
         this.framework.add(item);
-      } else {
-        // Met à jour la position Y si déjà existant
-        item.y = this.y + i * this.itemHeight - this.scrollOffset;
+        this.visibleItems.set(i, item);
       }
-      newVisibleItems.push(item);
     }
 
-    // Supprime les items qui ne sont plus visibles
-    for (let item of this.visibleItems) {
-      if (!newVisibleItems.includes(item)) {
+    // Supprimer les items qui sortent du viewport
+    for (const [index, item] of this.visibleItems) {
+      if (!nextVisible.has(index)) {
         this.framework.remove(item);
+        this.visibleItems.delete(index);
       }
     }
 
-    this.visibleItems = newVisibleItems;
     this.height = this.allItemsData.length * this.itemHeight;
   }
 
-  /**
-   * Scroll la liste
-   * @param {number} deltaY
-   */
-  scroll(deltaY) {
-    this.scrollOffset += deltaY;
-    if (this.scrollOffset < 0) this.scrollOffset = 0;
-    const maxScroll = Math.max(0, this.height - this.viewportHeight);
-    if (this.scrollOffset > maxScroll) this.scrollOffset = maxScroll;
-
-    this.updateVisibleItems();
-  }
+  // ─────────────────────────────────────────
+  // DESSIN
+  // ─────────────────────────────────────────
 
-  /**
-   * Dessine les items visibles
-   * @param {CanvasRenderingContext2D} ctx
-   */
   draw(ctx) {
-    for (let item of this.visibleItems) {
+    for (const item of this.visibleItems.values()) {
       item.draw(ctx);
     }
   }
 
-  /**
-   * Toujours false : les ListItems gèrent leurs clics
-   */
   isPointInside() {
-    return false;
+    return false; // Les ListItems gèrent leurs propres hit-tests
+  }
+
+  // ─────────────────────────────────────────
+  // DESTROY
+  // ─────────────────────────────────────────
+
+  destroy() {
+    this.clear();
+    super.destroy();
   }
 }
 
-export default VirtualList;
+export default VirtualList;