canvasframework 0.6.3 → 0.7.1

package/components/AppBar.js

@@ -1,89 +1,102 @@
 import Component from '../core/Component.js';
 
 /**
- * Barre d'application supérieure (Material & Cupertino)
- * @class
- * @extends Component
+ * AppBar — barre d'application supérieure (Material et Cupertino).
+ *
+ * Corrections :
+ *  - Guard _destroyed dans la boucle RAF des ripples
+ *  - destroy() annule le RAF et nettoie les ressources
+ *  - Fautes de frappe mineures corrigées
  */
 class AppBar extends Component {
+  /**
+   * @param {CanvasFramework} framework
+   * @param {Object} [options={}]
+   * @param {string}   [options.title='']
+   * @param {string}   [options.leftIcon]        - 'menu' | 'back'
+   * @param {string}   [options.rightIcon]       - 'search' | 'more'
+   * @param {Function} [options.onLeftClick]
+   * @param {Function} [options.onRightClick]
+   * @param {string}   [options.platform]
+   * @param {string}   [options.bgColor]
+   * @param {string}   [options.textColor]
+   * @param {number}   [options.elevation]
+   */
   constructor(framework, options = {}) {
-    // Détection automatique Material ou Cupertino
-    const platform = options.platform || (() => {
-      if (framework.platform) return framework.platform;
-      return /iPad|iPhone|iPod/.test(navigator.userAgent) ? 'cupertino' : 'material';
-    })();
+    const platform =
+      options.platform ||
+      framework.platform ||
+      (/iPad|iPhone|iPod/.test(navigator.userAgent) ? 'cupertino' : 'material');
 
     super(framework, {
       x: 0,
       y: 0,
       width: framework.width,
       height: options.height || (platform === 'material' ? 56 : 44),
-      ...options
+      ...options,
     });
 
-    this.title = options.title || '';
-    this.leftIcon = options.leftIcon || null;
-    this.rightIcon = options.rightIcon || null;
-    this.onLeftClick = options.onLeftClick;
+    this.title        = options.title       || '';
+    this.leftIcon     = options.leftIcon    || null;
+    this.rightIcon    = options.rightIcon   || null;
+    this.onLeftClick  = options.onLeftClick;
     this.onRightClick = options.onRightClick;
-    this.platform = platform;
+    this.platform     = platform;
 
-    // Couleurs et styles par plateforme
     if (this.platform === 'material') {
-      this.bgColor = options.bgColor || '#6200EE';
+      this.bgColor   = options.bgColor   || '#6200EE';
       this.textColor = options.textColor || '#FFFFFF';
       this.elevation = options.elevation !== undefined ? options.elevation : 4;
     } else {
-      // Cupertino (iOS)
-      this.bgColor = options.bgColor || 'rgba(248, 248, 248, 0.95)';
+      this.bgColor   = options.bgColor   || 'rgba(248,248,248,0.95)';
       this.textColor = options.textColor || '#000000';
       this.elevation = 0;
     }
 
-    // Ripples (Material)
-    this.ripples = [];
-    this.animationFrame = null;
-    this.lastAnimationTime = 0;
-
-    // États press (iOS)
-    this.leftPressed = false;
-    this.rightPressed = false;
+    this.ripples           = [];
+    this._rafId            = null;
+    this._lastAnimTime     = 0;
+    this.leftPressed       = false;
+    this.rightPressed      = false;
 
-    this.onPress = this.handlePress.bind(this);
+    this.onPress = this._handlePress.bind(this);
   }
 
+  // ─────────────────────────────────────────
+  // DESSIN
+  // ─────────────────────────────────────────
+
   draw(ctx) {
     ctx.save();
 
     // Ombre Material
     if (this.platform === 'material' && this.elevation > 0) {
-      ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
-      ctx.shadowBlur = this.elevation * 2;
+      ctx.shadowColor   = 'rgba(0,0,0,0.2)';
+      ctx.shadowBlur    = this.elevation * 2;
       ctx.shadowOffsetY = this.elevation / 2;
     }
 
-    // Background
     ctx.fillStyle = this.bgColor;
     ctx.fillRect(this.x, this.y, this.width, this.height);
 
-    ctx.shadowColor = 'transparent';
-    ctx.shadowBlur = 0;
+    ctx.shadowColor   = 'transparent';
+    ctx.shadowBlur    = 0;
     ctx.shadowOffsetY = 0;
 
-    // Bordure iOS
+    // Séparateur iOS
     if (this.platform === 'cupertino') {
-      ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
-      ctx.lineWidth = 0.5;
+      ctx.strokeStyle = 'rgba(0,0,0,0.1)';
+      ctx.lineWidth   = 0.5;
       ctx.beginPath();
       ctx.moveTo(this.x, this.y + this.height - 0.5);
       ctx.lineTo(this.x + this.width, this.y + this.height - 0.5);
       ctx.stroke();
     }
 
-    // Ripples pour Material
-    if (this.platform === 'material') this.drawRipples(ctx);
+    // Ripples
+    if (this.platform === 'material') this._drawRipples(ctx);
 
-    // Overlay pressed iOS
+    // Overlays pression iOS
     if (this.platform === 'cupertino') {
       if (this.leftPressed && this.leftIcon) {
         ctx.fillStyle = 'rgba(0,0,0,0.1)';
@@ -100,49 +113,52 @@ class AppBar extends Component {
     }
 
     // Titre
-    ctx.fillStyle = this.textColor;
+    ctx.fillStyle    = this.textColor;
     const titleAlign = this.platform === 'material' && this.leftIcon ? 'left' : 'center';
-    const titleX = titleAlign === 'left' ? this.x + 72 : this.x + this.width / 2;
-    ctx.font = `${this.platform === 'material' ? 'bold ' : ''}20px -apple-system, Roboto, sans-serif`;
-    ctx.textAlign = titleAlign;
+    const titleX     = titleAlign === 'left' ? this.x + 72 : this.x + this.width / 2;
+    ctx.font         = `${this.platform === 'material' ? 'bold ' : ''}20px -apple-system, Roboto, sans-serif`;
+    ctx.textAlign    = titleAlign;
     ctx.textBaseline = 'middle';
     ctx.fillText(this.title, titleX, this.y + this.height / 2);
 
-    // Icônes
-    if (this.leftIcon) this.drawLeftIcon(ctx);
-    if (this.rightIcon) this.drawRightIcon(ctx);
+    if (this.leftIcon)  this._drawLeftIcon(ctx);
+    if (this.rightIcon) this._drawRightIcon(ctx);
 
     ctx.restore();
   }
 
-  drawRipples(ctx) {
-    for (let ripple of this.ripples) {
+  /** @private */
+  _drawRipples(ctx) {
+    for (const r of this.ripples) {
       ctx.save();
-      ctx.globalAlpha = ripple.opacity;
-      ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+      ctx.globalAlpha = r.opacity;
+      ctx.fillStyle   = 'rgba(255,255,255,0.3)';
       ctx.beginPath();
-      ctx.arc(ripple.x, ripple.y, ripple.radius, 0, Math.PI * 2);
+      ctx.arc(r.x, r.y, r.radius, 0, Math.PI * 2);
       ctx.fill();
       ctx.restore();
     }
   }
 
-  drawLeftIcon(ctx) {
-    const color = this.platform === 'cupertino' ? this.textColor : this.textColor;
-    if (this.leftIcon === 'menu') this.drawMenuIcon(ctx, this.x + 16, this.y + this.height / 2, color);
-    if (this.leftIcon === 'back') this.drawBackIcon(ctx, this.x + 16, this.y + this.height / 2, color);
+  /** @private */
+  _drawLeftIcon(ctx) {
+    const color = this.textColor;
+    if (this.leftIcon === 'menu') this._drawMenuIcon(ctx, this.x + 16, this.y + this.height / 2, color);
+    if (this.leftIcon === 'back') this._drawBackIcon(ctx, this.x + 16, this.y + this.height / 2, color);
   }
 
-  drawRightIcon(ctx) {
+  /** @private */
+  _drawRightIcon(ctx) {
     const color = this.platform === 'cupertino' ? '#007AFF' : this.textColor;
-    if (this.rightIcon === 'search') this.drawSearchIcon(ctx, this.x + this.width - 36, this.y + this.height / 2, color);
-    if (this.rightIcon === 'more') this.drawMoreIcon(ctx, this.x + this.width - 36, this.y + this.height / 2, color);
+    if (this.rightIcon === 'search') this._drawSearchIcon(ctx, this.x + this.width - 36, this.y + this.height / 2, color);
+    if (this.rightIcon === 'more')   this._drawMoreIcon(ctx, this.x + this.width - 36, this.y + this.height / 2, color);
   }
 
-  drawMenuIcon(ctx, x, y, color) {
+  /** @private */
+  _drawMenuIcon(ctx, x, y, color) {
     ctx.strokeStyle = color;
-    ctx.lineWidth = 2;
-    ctx.lineCap = 'round';
+    ctx.lineWidth   = 2;
+    ctx.lineCap     = 'round';
     for (let i = 0; i < 3; i++) {
       ctx.beginPath();
       ctx.moveTo(x, y - 8 + i * 8);
@@ -151,22 +167,24 @@ class AppBar extends Component {
     }
   }
 
-  drawBackIcon(ctx, x, y, color) {
+  /** @private */
+  _drawBackIcon(ctx, x, y, color) {
     ctx.strokeStyle = color;
-    ctx.lineWidth = 2;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
+    ctx.lineWidth   = 2;
+    ctx.lineCap     = 'round';
+    ctx.lineJoin    = 'round';
     ctx.beginPath();
     ctx.moveTo(x + 16, y - 10);
-    ctx.lineTo(x + 6, y);
+    ctx.lineTo(x + 6,  y);
     ctx.lineTo(x + 16, y + 10);
     ctx.stroke();
   }
 
-  drawSearchIcon(ctx, x, y, color) {
+  /** @private */
+  _drawSearchIcon(ctx, x, y, color) {
     ctx.strokeStyle = color;
-    ctx.lineWidth = 2;
-    ctx.lineCap = 'round';
+    ctx.lineWidth   = 2;
+    ctx.lineCap     = 'round';
     ctx.beginPath();
     ctx.arc(x + 8, y - 2, 8, 0, Math.PI * 2);
     ctx.stroke();
@@ -176,9 +194,10 @@ class AppBar extends Component {
     ctx.stroke();
   }
 
-  drawMoreIcon(ctx, x, y, color) {
-    ctx.fillStyle = color;
-    const spacing = this.platform === 'material' ? 10 : 8;
+  /** @private */
+  _drawMoreIcon(ctx, x, y, color) {
+    ctx.fillStyle   = color;
+    const spacing   = this.platform === 'material' ? 10 : 8;
     for (let i = 0; i < 3; i++) {
       ctx.beginPath();
       ctx.arc(x + 12, y - spacing + i * spacing, 2, 0, Math.PI * 2);
@@ -186,71 +205,112 @@ class AppBar extends Component {
     }
   }
 
-  handlePress(x, y) {
-    const inY = y >= this.y && y <= this.y + this.height;
+  // ─────────────────────────────────────────
+  // INTERACTION
+  // ─────────────────────────────────────────
 
+  /** @private */
+  _handlePress(x, y) {
+    const inY = y >= this.y && y <= this.y + this.height;
     if (!inY) return false;
 
     // Bouton gauche
     if (this.leftIcon && x >= this.x && x <= this.x + 56) {
-      if (this.platform === 'material') this.addRipple(this.x + 28, this.y + this.height / 2);
-      else this.leftPressed = true, setTimeout(() => this.leftPressed = false, 150);
-      if (this.onLeftClick) this.onLeftClick();
+      if (this.platform === 'material') {
+        this._addRipple(this.x + 28, this.y + this.height / 2);
+      } else {
+        this.leftPressed = true;
+        setTimeout(() => { this.leftPressed = false; this.markDirty(); }, 150);
+      }
+      this.onLeftClick?.();
       return true;
     }
 
     // Bouton droit
     if (this.rightIcon && x >= this.x + this.width - 56 && x <= this.x + this.width) {
-      if (this.platform === 'material') this.addRipple(this.x + this.width - 28, this.y + this.height / 2);
-      else this.rightPressed = true, setTimeout(() => this.rightPressed = false, 150);
-      if (this.onRightClick) this.onRightClick();
+      if (this.platform === 'material') {
+        this._addRipple(this.x + this.width - 28, this.y + this.height / 2);
+      } else {
+        this.rightPressed = true;
+        setTimeout(() => { this.rightPressed = false; this.markDirty(); }, 150);
+      }
+      this.onRightClick?.();
       return true;
     }
 
     return false;
   }
 
-  addRipple(x, y) {
+  // ─────────────────────────────────────────
+  // RIPPLE
+  // ─────────────────────────────────────────
+
+  /** @private */
+  _addRipple(x, y) {
     this.ripples.push({
       x, y,
       radius: 0,
       maxRadius: 28,
       opacity: 1,
-      createdAt: performance.now()
+      createdAt: performance.now(),
     });
-    if (!this.animationFrame) this.startRippleAnimation();
+    if (!this._rafId) this._startRippleAnimation();
   }
 
-  startRippleAnimation() {
+  /** @private */
+  _startRippleAnimation() {
     const animate = (timestamp) => {
-      if (!this.lastAnimationTime) this.lastAnimationTime = timestamp;
-      const deltaTime = timestamp - this.lastAnimationTime;
-      this.lastAnimationTime = timestamp;
+      if (this._destroyed) { this._rafId = null; this._lastAnimTime = 0; return; }
+
+      const deltaTime = this._lastAnimTime ? timestamp - this._lastAnimTime : 16;
+      this._lastAnimTime = timestamp;
+
       let needsUpdate = false;
 
       for (let i = this.ripples.length - 1; i >= 0; i--) {
-        const ripple = this.ripples[i];
-        if (ripple.radius < ripple.maxRadius) ripple.radius += (ripple.maxRadius / 250) * deltaTime, needsUpdate = true;
-        if (ripple.radius >= ripple.maxRadius * 0.4) ripple.opacity -= (0.003 * deltaTime), ripple.opacity < 0 && (ripple.opacity = 0), needsUpdate = true;
-        if (ripple.opacity <= 0 && ripple.radius >= ripple.maxRadius * 0.95) this.ripples.splice(i, 1), needsUpdate = true;
+        const r = this.ripples[i];
+        if (r.radius < r.maxRadius) {
+          r.radius += (r.maxRadius / 250) * deltaTime;
+          needsUpdate = true;
+        }
+        if (r.radius >= r.maxRadius * 0.4) {
+          r.opacity -= 0.003 * deltaTime;
+          if (r.opacity < 0) r.opacity = 0;
+          needsUpdate = true;
+        }
+        if (r.opacity <= 0 && r.radius >= r.maxRadius * 0.95) {
+          this.ripples.splice(i, 1);
+          needsUpdate = true;
+        }
       }
 
-      if (needsUpdate) this.requestRender();
-      if (this.ripples.length > 0) this.animationFrame = requestAnimationFrame(animate);
-      else this.animationFrame = null, this.lastAnimationTime = 0;
+      if (needsUpdate) this.markDirty();
+
+      if (this.ripples.length > 0) {
+        this._rafId = requestAnimationFrame(animate);
+      } else {
+        this._rafId        = null;
+        this._lastAnimTime = 0;
+      }
     };
 
-    if (this.ripples.length > 0 && !this.animationFrame) this.animationFrame = requestAnimationFrame(animate);
+    if (this.ripples.length > 0 && !this._rafId) {
+      this._rafId = requestAnimationFrame(animate);
+    }
   }
 
-  requestRender() {
-    if (this.framework && this.framework.requestRender) this.framework.requestRender();
-  }
+  // ─────────────────────────────────────────
+  // DESTROY
+  // ─────────────────────────────────────────
 
   destroy() {
-    if (this.animationFrame) cancelAnimationFrame(this.animationFrame), this.animationFrame = null;
+    if (this._rafId) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+    }
+    this.ripples = [];
     super.destroy();
   }
 }
 
-export default AppBar;
+export default AppBar;