canvasframework 0.6.3 → 0.7.1

package/core/Component.js

@@ -37,25 +37,53 @@ class Component {
     this.hovered = false;
     this.onClick = options.onClick;
     this.onPress = options.onPress;
-    
-    // Système dirty simple (optionnel)
+
+    // Système dirty simple
     this._dirty = true;
-    
+
+    // Flag de destruction — stoppe les RAF/timers des sous-classes
+    this._destroyed = false;
+
     // Lifecycle
     this._mounted = false;
 
-    // Pour détecter les updates
-    this._prevProps = { ...options };
-	
-	// Système de listeners
+    // Deep copy pour éviter que _prevProps référence les mêmes objets
+    // qu'options (important si options contient des tableaux ou objets imbriqués).
+    this._prevProps = Component._deepClone(options);
+
+    // Système de listeners
     this._listeners = new Map();
   }
 
+  // ─────────────────────────────────────────
+  // UTILITAIRE INTERNE
+  // ─────────────────────────────────────────
+
   /**
-   * 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
+   * Clone profond léger (JSON-safe).
+   * Pour des options contenant des fonctions (onClick…), on préfère
+   * une copie structurée qui ignore les fonctions non-sérialisables.
+   * @private
+   */
+  static _deepClone(obj) {
+    try {
+      return JSON.parse(JSON.stringify(obj, (key, val) =>
+        typeof val === 'function' ? undefined : val
+      ));
+    } catch {
+      return { ...obj };
+    }
+  }
+
+  // ─────────────────────────────────────────
+  // SYSTÈME DE LISTENERS
+  // ─────────────────────────────────────────
+
+  /**
+   * Ajoute un listener pour un événement.
+   * @param {string} event
+   * @param {Function} handler
+   * @returns {Component}
    */
   on(event, handler) {
     if (!this._listeners.has(event)) {
@@ -66,26 +94,23 @@ class Component {
   }
 
   /**
-   * Retire un listener
-   * @param {string} event - Nom de l'événement
-   * @param {Function} handler - Fonction à retirer
+   * Retire un listener.
+   * @param {string} event
+   * @param {Function} handler
    * @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);
-    }
+    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
+   * Ajoute un listener qui s'exécute une seule fois.
+   * @param {string} event
+   * @param {Function} handler
    * @returns {Component}
    */
   once(event, handler) {
@@ -97,28 +122,26 @@ class Component {
   }
 
   /**
-   * Émet un événement
-   * @param {string} event - Nom de l'événement
-   * @param {...any} args - Arguments à passer aux handlers
+   * Émet un événement.
+   * @param {string} event
+   * @param {...any} args
    * @returns {Component}
    */
   emit(event, ...args) {
     if (!this._listeners.has(event)) return this;
-    
-    const handlers = this._listeners.get(event);
-    for (let handler of handlers) {
+    for (const handler of this._listeners.get(event)) {
       try {
         handler(...args);
       } catch (error) {
-        console.error(`Error in ${event} handler:`, 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)
+   * Retire tous les listeners (ou ceux d'un événement précis).
+   * @param {string} [event]
    * @returns {Component}
    */
   removeAllListeners(event) {
@@ -131,24 +154,23 @@ class Component {
   }
 
   /**
-   * Retourne le nombre de listeners pour un événement
-   * @param {string} event - Nom de l'événement
+   * Retourne le nombre de listeners pour un événement.
+   * @param {string} event
    * @returns {number}
    */
   listenerCount(event) {
     return this._listeners.has(event) ? this._listeners.get(event).length : 0;
-  }	
-  /* =======================
-     LIFECYCLE HOOKS
-     ======================= */
+  }
+
+  // ─────────────────────────────────────────
+  // LIFECYCLE HOOKS (à surcharger)
+  // ─────────────────────────────────────────
 
   onMount() {}
   onUnmount() {}
   onUpdate(prevProps) {}
   onResize(width, height) {}
 
-  /* ======================= */
-
   _mount() {
     if (!this._mounted) {
       this._mounted = true;
@@ -165,7 +187,7 @@ class Component {
 
   _update(newProps) {
     this.onUpdate(this._prevProps);
-    this._prevProps = { ...newProps };
+    this._prevProps = Component._deepClone(newProps);
     this.markDirty();
   }
 
@@ -176,25 +198,23 @@ class Component {
 
   setProps(newProps = {}) {
     const changed = Object.keys(newProps).some(
-      key => this[key] !== newProps[key]
+      (key) => this[key] !== newProps[key]
     );
-
     if (!changed) return;
-
     Object.assign(this, newProps);
     this._update(newProps);
   }
 
   measure(constraints) {
-    return {
-      width: this.width,
-      height: this.height
-    };
+    return { width: this.width, height: this.height };
   }
 
+  // ─────────────────────────────────────────
+  // DIRTY / CLEAN
+  // ─────────────────────────────────────────
+
   /**
-   * Marque le composant pour redessin
-   * Appelez cette méthode après avoir modifié une propriété
+   * Marque le composant pour redessin.
    */
   markDirty() {
     this._dirty = true;
@@ -203,41 +223,79 @@ class Component {
     }
   }
 
-  /**
-   * Marque le composant comme propre (appelé automatiquement après draw)
-   */
+  /** Marque le composant comme propre (appelé après draw). */
   markClean() {
     this._dirty = false;
   }
 
-  /**
-   * Vérifie si le composant est dirty
-   */
+  /** Indique si le composant doit être redessiné. */
   isDirty() {
     return this._dirty;
   }
 
+  // ─────────────────────────────────────────
+  // INTERACTION
+  // ─────────────────────────────────────────
+
   /**
-   * Vérifie si un point est dans les limites du composant
+   * Vérifie si un point (x, y) est à l'intérieur du composant.
+   * @param {number} x
+   * @param {number} y
+   * @returns {boolean}
    */
   isPointInside(x, y) {
-    return x >= this.x && x <= this.x + this.width &&
-           y >= this.y && y <= this.y + this.height;
+    return (
+      x >= this.x &&
+      x <= this.x + this.width &&
+      y >= this.y &&
+      y <= this.y + this.height
+    );
   }
 
+  // ─────────────────────────────────────────
+  // DESSIN — À SURCHARGER OBLIGATOIREMENT
+  // ─────────────────────────────────────────
+
   /**
-   * Méthode de dessin (à implémenter par les sous-classes)
+   * Dessine le composant sur le canvas.
+   * **Méthode abstraite** — doit être implémentée par chaque sous-classe.
+   *
+   * @abstract
+   * @param {CanvasRenderingContext2D} ctx - Contexte 2D du canvas
    */
   draw(ctx) {
-    // À implémenter par les sous-classes
+    // Méthode abstraite — implémenter dans la sous-classe.
+    // Ne jamais appeler super.draw(ctx) depuis une sous-classe.
   }
-}
-
-
-export default Component;
-
-
-
 
+  // ─────────────────────────────────────────
+  // DESTROY
+  // ─────────────────────────────────────────
 
+  /**
+   * Libère les ressources du composant.
+   *
+   * Les sous-classes qui utilisent setInterval, requestAnimationFrame,
+   * des EventListeners DOM ou d'autres ressources externes **doivent**
+   * surcharger cette méthode et appeler super.destroy() à la fin.
+   *
+   * Le flag `this._destroyed` est positionné à true AVANT les appels
+   * internes : les boucles d'animation doivent tester ce flag pour s'arrêter.
+   *
+   * @example
+   * destroy() {
+   *   // annuler propre RAF ou timer ici
+   *   cancelAnimationFrame(this._rafId);
+   *   super.destroy();
+   * }
+   */
+  destroy() {
+    this._destroyed = true;
+    this._unmount();
+    this.removeAllListeners();
+    this.onClick = null;
+    this.onPress = null;
+  }
+}
 
+export default Component;