canvasframework 0.7.0 → 0.7.1

package/components/Dialog.js

@@ -1,50 +1,65 @@
 import Component from '../core/Component.js';
+import { roundRect } from '../core/CanvasUtils.js';
 
 /**
- * Dialog Material (Android) & Cupertino (iOS)
+ * Dialog — Material (Android) & Cupertino (iOS).
+ *
+ * Corrections :
+ *  - roundRect() vient de CanvasUtils
+ *  - Guard _destroyed dans les boucles RAF (fade in/out)
+ *  - destroy() nettoie les ressources
  */
 class Dialog extends Component {
+  /**
+   * @param {CanvasFramework} framework
+   * @param {Object} [options={}]
+   * @param {string}   [options.title='']
+   * @param {string}   [options.message='']
+   * @param {string[]} [options.buttons=['OK']]
+   * @param {Function} [options.onButtonClick]  - (index, label) => void
+   */
   constructor(framework, options = {}) {
     super(framework, {
       x: 0,
       y: 0,
       width: framework.width,
       height: framework.height,
-      visible: false
+      visible: false,
     });
 
-    this.platform = framework.platform;
-
-    this.title = options.title || '';
-    this.message = options.message || '';
-    this.buttons = options.buttons || ['OK'];
+    this.platform      = framework.platform;
+    this.title         = options.title   || '';
+    this.message       = options.message || '';
+    this.buttons       = options.buttons || ['OK'];
     this.onButtonClick = options.onButtonClick;
 
-    this.dialogWidth = Math.min(320, framework.width - 40);
+    this.dialogWidth  = Math.min(320, framework.width - 40);
     this.dialogHeight = 160;
-    this.opacity = 0;
-
-    this.isVisible = false;
-    this.buttonRects = [];
+    this.opacity      = 0;
+    this.isVisible    = false;
+    this.buttonRects  = [];
+    this._rafId       = null;
 
-    /* Ripple Android uniquement */
-    this.ripples = [];
-    this._animating = false;
+    // Ripple (Material uniquement)
+    this.ripples    = [];
+    this._rippleRaf = null;
 
-    this.onPress = this.handlePress.bind(this);
+    this.onPress = this._handlePress.bind(this);
 
-    this.messageLines = this.wrapText(
+    // Pré-calcul du wrapping du message
+    this.messageLines = this._wrapText(
       this.message,
       this.dialogWidth - 48,
       '16px -apple-system, Roboto, sans-serif'
     );
-
     if (this.messageLines.length > 2) {
       this.dialogHeight += (this.messageLines.length - 2) * 22;
     }
   }
 
-  /* ---------------- DRAW ---------------- */
+  // ─────────────────────────────────────────
+  // DESSIN
+  // ─────────────────────────────────────────
 
   draw(ctx) {
     if (!this.isVisible || this.opacity <= 0) return;
@@ -52,152 +67,133 @@ class Dialog extends Component {
     ctx.save();
     ctx.globalAlpha = this.opacity;
 
-    // Overlay
+    // Overlay sombre
     ctx.fillStyle = 'rgba(0,0,0,0.5)';
     ctx.fillRect(0, 0, this.framework.width, this.framework.height);
 
     if (this.platform === 'material') {
-      this.drawMaterial(ctx);
+      this._drawMaterial(ctx);
     } else {
-      this.drawCupertino(ctx); // 👈 TON DESIGN INITIAL
+      this._drawCupertino(ctx);
     }
 
     ctx.restore();
   }
 
-  /* ---------------- MATERIAL (ANDROID) ---------------- */
-
-  drawMaterial(ctx) {
-    const x = (this.framework.width - this.dialogWidth) / 2;
+  /** @private */
+  _drawMaterial(ctx) {
+    const x = (this.framework.width  - this.dialogWidth)  / 2;
     const y = (this.framework.height - this.dialogHeight) / 2;
 
-    // Card
-    ctx.fillStyle = '#FFF';
+    // Carte
+    ctx.fillStyle   = '#FFF';
     ctx.shadowColor = 'rgba(0,0,0,0.25)';
-    ctx.shadowBlur = 12;
-    this.roundRect(ctx, x, y, this.dialogWidth, this.dialogHeight, 6);
+    ctx.shadowBlur  = 12;
+    ctx.beginPath();
+    roundRect(ctx, x, y, this.dialogWidth, this.dialogHeight, 6);
     ctx.fill();
     ctx.shadowColor = 'transparent';
 
-    // Title
-    ctx.fillStyle = '#000';
-    ctx.font = '500 20px Roboto, sans-serif';
-    ctx.textAlign = 'left';
+    // Titre
+    ctx.fillStyle  = '#000';
+    ctx.font       = '500 20px Roboto, sans-serif';
+    ctx.textAlign  = 'left';
     ctx.fillText(this.title, x + 24, y + 36);
 
     // Message
     ctx.fillStyle = '#444';
-    ctx.font = '16px Roboto, sans-serif';
+    ctx.font      = '16px Roboto, sans-serif';
     for (let i = 0; i < this.messageLines.length; i++) {
       ctx.fillText(this.messageLines[i], x + 24, y + 70 + i * 22);
     }
 
-    // Buttons
+    // Boutons
     this.buttonRects = [];
-    let btnX = x + this.dialogWidth - 16;
-    const btnY = y + this.dialogHeight - 28;
-
-    ctx.font = '500 14px Roboto, sans-serif';
+    let btnX         = x + this.dialogWidth - 16;
+    const btnY       = y + this.dialogHeight - 28;
+    ctx.font         = '500 14px Roboto, sans-serif';
 
     for (let i = this.buttons.length - 1; i >= 0; i--) {
       const text = this.buttons[i];
-      const w = ctx.measureText(text).width + 24;
+      const w    = ctx.measureText(text).width + 24;
+      btnX      -= w;
 
-      btnX -= w;
-
-      const rect = {
-        x: btnX,
-        y: btnY - 18,
-        width: w,
-        height: 36,
-        index: i
-      };
+      const rect = { x: btnX, y: btnY - 18, width: w, height: 36, index: i };
       this.buttonRects[i] = rect;
 
-      // Ripple
+      // Ripple clip
       ctx.save();
       ctx.beginPath();
       ctx.rect(rect.x, rect.y, rect.width, rect.height);
       ctx.clip();
-
       for (const r of this.ripples) {
         if (r.index === i) {
-          ctx.globalAlpha = r.alpha;
-          ctx.fillStyle = 'rgba(98,0,238,0.25)';
+          ctx.globalAlpha = r.alpha * this.opacity;
+          ctx.fillStyle   = 'rgba(98,0,238,0.25)';
           ctx.beginPath();
           ctx.arc(r.x, r.y, r.radius, 0, Math.PI * 2);
           ctx.fill();
         }
       }
       ctx.restore();
+      ctx.globalAlpha = this.opacity;
 
-      ctx.fillStyle = '#6200EE';
-      ctx.textAlign = 'center';
+      ctx.fillStyle  = '#6200EE';
+      ctx.textAlign  = 'center';
       ctx.fillText(text, btnX + w / 2, btnY);
-
       btnX -= 8;
     }
   }
 
-  /* ---------------- CUPERTINO (iOS) — DESIGN ORIGINAL ---------------- */
-
-  drawCupertino(ctx) {
-    const x = (this.framework.width - this.dialogWidth) / 2;
+  /** @private */
+  _drawCupertino(ctx) {
+    const x = (this.framework.width  - this.dialogWidth)  / 2;
     const y = (this.framework.height - this.dialogHeight) / 2;
 
-    // Dialog
-    ctx.fillStyle = '#FFF';
+    // Fond
+    ctx.fillStyle   = '#FFF';
     ctx.shadowColor = 'rgba(0,0,0,0.3)';
-    ctx.shadowBlur = 20;
-    this.roundRect(ctx, x, y, this.dialogWidth, this.dialogHeight, 12);
+    ctx.shadowBlur  = 20;
+    ctx.beginPath();
+    roundRect(ctx, x, y, this.dialogWidth, this.dialogHeight, 12);
     ctx.fill();
     ctx.shadowColor = 'transparent';
 
-    // Title
-    ctx.fillStyle = '#000';
-    ctx.font = '600 18px -apple-system, sans-serif';
-    ctx.textAlign = 'center';
+    // Titre
+    ctx.fillStyle  = '#000';
+    ctx.font       = '600 18px -apple-system, sans-serif';
+    ctx.textAlign  = 'center';
     ctx.fillText(this.title, x + this.dialogWidth / 2, y + 38);
 
     // Message
     ctx.fillStyle = '#666';
-    ctx.font = '16px -apple-system, sans-serif';
+    ctx.font      = '16px -apple-system, sans-serif';
     for (let i = 0; i < this.messageLines.length; i++) {
-      ctx.fillText(
-        this.messageLines[i],
-        x + this.dialogWidth / 2,
-        y + 72 + i * 22
-      );
+      ctx.fillText(this.messageLines[i], x + this.dialogWidth / 2, y + 72 + i * 22);
     }
 
-    // Divider
-    const dividerY = y + this.dialogHeight - 54;
-    ctx.strokeStyle = '#E5E5EA';
+    // Séparateur
+    const dividerY        = y + this.dialogHeight - 54;
+    ctx.strokeStyle       = '#E5E5EA';
+    ctx.lineWidth         = 0.5;
     ctx.beginPath();
     ctx.moveTo(x, dividerY);
     ctx.lineTo(x + this.dialogWidth, dividerY);
     ctx.stroke();
 
-    // Buttons
-    this.buttonRects = [];
-    const btnW = this.dialogWidth / this.buttons.length;
-    const btnH = 54;
+    // Boutons
+    this.buttonRects     = [];
+    const btnW           = this.dialogWidth / this.buttons.length;
+    const btnH           = 54;
 
     for (let i = 0; i < this.buttons.length; i++) {
       const bx = x + i * btnW;
       const by = dividerY;
 
-      this.buttonRects.push({
-        x: bx,
-        y: by,
-        width: btnW,
-        height: btnH
-      });
-
-      ctx.fillStyle =
-        i === this.buttons.length - 1 ? '#007AFF' : '#8E8E93';
+      this.buttonRects.push({ x: bx, y: by, width: btnW, height: btnH });
 
-      ctx.font = '600 17px -apple-system, sans-serif';
+      ctx.fillStyle = i === this.buttons.length - 1 ? '#007AFF' : '#8E8E93';
+      ctx.font      = '600 17px -apple-system, sans-serif';
       ctx.textAlign = 'center';
       ctx.fillText(this.buttons[i], bx + btnW / 2, by + btnH / 2);
 
@@ -211,26 +207,24 @@ class Dialog extends Component {
     }
   }
 
-  /* ---------------- INTERACTION ---------------- */
+  // ─────────────────────────────────────────
+  // INTERACTION
+  // ─────────────────────────────────────────
 
-  handlePress(x, y) {
+  /** @private */
+  _handlePress(x, y) {
     for (let i = 0; i < this.buttonRects.length; i++) {
       const r = this.buttonRects[i];
-      if (
-        x >= r.x && x <= r.x + r.width &&
-        y >= r.y && y <= r.y + r.height
-      ) {
+      if (x >= r.x && x <= r.x + r.width && y >= r.y && y <= r.y + r.height) {
+
         if (this.platform === 'material') {
-          const max = Math.max(r.width, r.height) * 1.4;
           this.ripples.push({
-            index: i,
-            x,
-            y,
+            index: i, x, y,
             radius: 0,
             alpha: 0.35,
-            max
+            max: Math.max(r.width, r.height) * 1.4,
           });
-          this.animateRipples();
+          this._animateRipples();
         }
 
         setTimeout(() => {
@@ -240,73 +234,97 @@ class Dialog extends Component {
         return;
       }
     }
-
+    // Clic en dehors = ferme
     this.hide();
   }
 
-  animateRipples() {
-    if (this._animating) return;
-    this._animating = true;
+  /** @private */
+  _animateRipples() {
+    if (this._rippleRaf) return;
 
     const step = () => {
-      let active = false;
+      if (this._destroyed) { this._rippleRaf = null; return; }
 
+      let active = false;
       for (const r of this.ripples) {
         r.radius += r.max * 0.12;
-        r.alpha -= 0.04;
+        r.alpha  -= 0.04;
         if (r.alpha > 0) active = true;
       }
+      this.ripples = this.ripples.filter((r) => r.alpha > 0);
 
-      this.ripples = this.ripples.filter(r => r.alpha > 0);
-
-      if (active) requestAnimationFrame(step);
-      else this._animating = false;
+      if (active) {
+        this._rippleRaf = requestAnimationFrame(step);
+      } else {
+        this._rippleRaf = null;
+      }
     };
 
-    requestAnimationFrame(step);
+    this._rippleRaf = requestAnimationFrame(step);
   }
 
-  /* ---------------- SHOW / HIDE ---------------- */
+  // ─────────────────────────────────────────
+  // SHOW / HIDE
+  // ─────────────────────────────────────────
 
   show() {
     this.isVisible = true;
-    this.visible = true;
-    this.opacity = 0;
+    this.visible   = true;
+    this.opacity   = 0;
+
+    if (this._rafId) cancelAnimationFrame(this._rafId);
 
     const fade = () => {
+      if (this._destroyed) { this._rafId = null; return; }
       this.opacity += 0.1;
-      if (this.opacity < 1) requestAnimationFrame(fade);
+      if (this.opacity < 1) {
+        this._rafId = requestAnimationFrame(fade);
+      } else {
+        this.opacity = 1;
+        this._rafId  = null;
+      }
     };
-    fade();
+    this._rafId = requestAnimationFrame(fade);
   }
 
   hide() {
+    if (this._rafId) cancelAnimationFrame(this._rafId);
+
     const fade = () => {
+      if (this._destroyed) { this._rafId = null; return; }
       this.opacity -= 0.1;
-      if (this.opacity > 0) requestAnimationFrame(fade);
-      else {
+      if (this.opacity > 0) {
+        this._rafId = requestAnimationFrame(fade);
+      } else {
+        this.opacity   = 0;
         this.isVisible = false;
-        this.visible = false;
+        this.visible   = false;
+        this._rafId    = null;
         this.framework.remove(this);
       }
     };
-    fade();
+    this._rafId = requestAnimationFrame(fade);
   }
 
-  /* ---------------- UTILS ---------------- */
+  // ─────────────────────────────────────────
+  // UTILITAIRES
+  // ─────────────────────────────────────────
 
-  wrapText(text, maxWidth, font) {
+  /** @private */
+  _wrapText(text, maxWidth, font) {
+    if (!text) return [''];
     const ctx = this.framework.ctx;
-    ctx.font = font;
+    ctx.font   = font;
 
     const words = text.split(' ');
     const lines = [];
-    let line = words[0];
+    let line    = words[0];
 
     for (let i = 1; i < words.length; i++) {
-      const test = line + ' ' + words[i];
-      if (ctx.measureText(test).width < maxWidth) line = test;
-      else {
+      const test = `${line} ${words[i]}`;
+      if (ctx.measureText(test).width < maxWidth) {
+        line = test;
+      } else {
         lines.push(line);
         line = words[i];
       }
@@ -315,23 +333,20 @@ class Dialog extends Component {
     return lines;
   }
 
-  roundRect(ctx, x, y, w, h, r) {
-    ctx.beginPath();
-    ctx.moveTo(x + r, y);
-    ctx.lineTo(x + w - r, y);
-    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
-    ctx.lineTo(x + w, y + h - r);
-    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
-    ctx.lineTo(x + r, y + h);
-    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
-    ctx.lineTo(x, y + r);
-    ctx.quadraticCurveTo(x, y, x + r, y);
-    ctx.closePath();
-  }
-
   isPointInside() {
     return this.isVisible;
   }
+
+  // ─────────────────────────────────────────
+  // DESTROY
+  // ─────────────────────────────────────────
+
+  destroy() {
+    if (this._rafId)    { cancelAnimationFrame(this._rafId);    this._rafId    = null; }
+    if (this._rippleRaf){ cancelAnimationFrame(this._rippleRaf); this._rippleRaf = null; }
+    this.ripples = [];
+    super.destroy();
+  }
 }
 
-export default Dialog;
+export default Dialog;