canvasframework 0.7.0 → 0.7.1

package/components/Checkbox.js

@@ -1,166 +1,173 @@
 import Component from '../core/Component.js';
+import { roundRect } from '../core/CanvasUtils.js';
 
 /**
- * Checkbox Material & Cupertino (iOS-like)
+ * Checkbox — Material et Cupertino.
+ *
+ * Corrections :
+ *  - roundRect() vient de CanvasUtils
+ *  - Support `disabled` ajouté
+ *  - destroy() propre
  */
 class Checkbox extends Component {
+  /**
+   * @param {CanvasFramework} framework
+   * @param {Object} [options={}]
+   * @param {boolean}  [options.checked=false]
+   * @param {boolean}  [options.disabled=false]
+   * @param {string}   [options.label='']
+   * @param {Function} [options.onChange]
+   */
   constructor(framework, options = {}) {
     super(framework, options);
 
-    this.checked = !!options.checked;
-    this.label = options.label || '';
+    this.checked  = !!options.checked;
+    this.disabled = !!options.disabled;
+    this.label    = options.label || '';
     this.platform = framework.platform;
     this.onChange = options.onChange;
 
     this.boxSize = 22;
     this.padding = 10;
 
-    this.textWidth = this.label
-      ? this.getTextWidth(this.label)
-      : 0;
+    this.textWidth = this.label ? this._getTextWidth(this.label) : 0;
 
-    // Largeur totale
     this.width =
       this.platform === 'material'
         ? this.boxSize + this.padding + this.textWidth
-        : this.textWidth + 28; // place pour checkmark iOS
+        : this.textWidth + 28;
 
     this.height = 28;
 
     this.onClick = () => {
+      if (this.disabled) return;
       this.checked = !this.checked;
       this.onChange?.(this.checked);
+      this.markDirty();
     };
   }
 
-  getTextWidth(text) {
+  /** @private */
+  _getTextWidth(text) {
     const ctx = this.framework.ctx;
     ctx.save();
-    ctx.font = '16px -apple-system, system-ui, sans-serif';
-    const w = ctx.measureText(text).width;
+    ctx.font    = '16px -apple-system, system-ui, sans-serif';
+    const w     = ctx.measureText(text).width;
     ctx.restore();
     return w;
   }
 
+  // ─────────────────────────────────────────
+  // DESSIN
+  // ─────────────────────────────────────────
+
   draw(ctx) {
     ctx.save();
-    ctx.font = '16px -apple-system, system-ui, sans-serif';
+
+    if (this.disabled) ctx.globalAlpha = 0.38;
+
+    ctx.font         = '16px -apple-system, system-ui, sans-serif';
     ctx.textBaseline = 'middle';
 
     const centerY = this.y + this.height / 2;
 
     if (this.platform === 'material') {
-      this.drawMaterial(ctx, centerY);
+      this._drawMaterial(ctx, centerY);
     } else {
-      this.drawCupertino(ctx, centerY);
+      this._drawCupertino(ctx, centerY);
     }
 
     ctx.restore();
   }
 
-  /* ---------------- MATERIAL ---------------- */
-
-  drawMaterial(ctx, centerY) {
+  /** @private */
+  _drawMaterial(ctx, centerY) {
     const x = this.x;
     const y = centerY - this.boxSize / 2;
 
-    // Box
-    ctx.lineWidth = 2;
+    ctx.lineWidth   = 2;
     ctx.strokeStyle = this.checked ? '#6200EE' : '#757575';
-    ctx.fillStyle = this.checked ? '#6200EE' : 'transparent';
+    ctx.fillStyle   = this.checked ? '#6200EE' : 'transparent';
 
-    this.roundRect(ctx, x, y, this.boxSize, this.boxSize, 3);
+    ctx.beginPath();
+    roundRect(ctx, x, y, this.boxSize, this.boxSize, 3);
     if (this.checked) ctx.fill();
     ctx.stroke();
 
-    // Check
     if (this.checked) {
       ctx.strokeStyle = '#FFF';
-      ctx.lineWidth = 2.4;
+      ctx.lineWidth   = 2.4;
+      ctx.lineCap     = 'round';
+      ctx.lineJoin    = 'round';
       ctx.beginPath();
-      ctx.moveTo(x + 5, y + 12);
-      ctx.lineTo(x + 9, y + 16);
+      ctx.moveTo(x + 5,  y + 12);
+      ctx.lineTo(x + 9,  y + 16);
       ctx.lineTo(x + 17, y + 7);
       ctx.stroke();
     }
 
-    // Label
-    ctx.fillStyle = '#000';
-    ctx.fillText(
-      this.label,
-      x + this.boxSize + this.padding,
-      centerY
-    );
+    if (this.label) {
+      ctx.fillStyle = '#000';
+      ctx.fillText(this.label, x + this.boxSize + this.padding, centerY);
+    }
   }
 
-  /* ---------------- CUPERTINO ---------------- */
-
-  /* ---------------- CUPERTINO ---------------- */
-
-drawCupertino(ctx, centerY) {
-  const radius = 10;
-  const circleX = this.x + radius;
-  const circleY = centerY;
+  /** @private */
+  _drawCupertino(ctx, centerY) {
+    const radius  = 10;
+    const circleX = this.x + radius;
+    const circleY = centerY;
 
-  // Cercle
-  if (this.checked) {
-    ctx.fillStyle = '#007AFF'; // Apple blue
-    ctx.beginPath();
-    ctx.arc(circleX, circleY, radius, 0, Math.PI * 2);
-    ctx.fill();
-  } else {
-    ctx.strokeStyle = '#C7C7CC'; // iOS gray
-    ctx.lineWidth = 2;
-    ctx.beginPath();
-    ctx.arc(circleX, circleY, radius, 0, Math.PI * 2);
-    ctx.stroke();
-  }
+    if (this.checked) {
+      ctx.fillStyle = '#007AFF';
+      ctx.beginPath();
+      ctx.arc(circleX, circleY, radius, 0, Math.PI * 2);
+      ctx.fill();
+    } else {
+      ctx.strokeStyle = '#C7C7CC';
+      ctx.lineWidth   = 2;
+      ctx.beginPath();
+      ctx.arc(circleX, circleY, radius, 0, Math.PI * 2);
+      ctx.stroke();
+    }
 
-  // Checkmark
-  if (this.checked) {
-    ctx.strokeStyle = '#FFFFFF';
-    ctx.lineWidth = 2.2;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
+    if (this.checked) {
+      ctx.strokeStyle = '#FFFFFF';
+      ctx.lineWidth   = 2.2;
+      ctx.lineCap     = 'round';
+      ctx.lineJoin    = 'round';
+      ctx.beginPath();
+      ctx.moveTo(circleX - 4, circleY);
+      ctx.lineTo(circleX - 1, circleY + 3);
+      ctx.lineTo(circleX + 5, circleY - 4);
+      ctx.stroke();
+    }
 
-    ctx.beginPath();
-    ctx.moveTo(circleX - 4, circleY);
-    ctx.lineTo(circleX - 1, circleY + 3);
-    ctx.lineTo(circleX + 5, circleY - 4);
-    ctx.stroke();
+    if (this.label) {
+      ctx.fillStyle = '#000';
+      ctx.fillText(this.label, this.x + radius * 2 + this.padding, centerY);
+    }
   }
 
-  // Label
-  ctx.fillStyle = '#000';
-  ctx.fillText(
-    this.label,
-    this.x + radius * 2 + this.padding,
-    centerY
-  );
-}
-
-  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();
-  }
+  // ─────────────────────────────────────────
+  // HIT TEST
+  // ─────────────────────────────────────────
 
   isPointInside(x, y) {
+    if (this.disabled) return false;
     return (
-      x >= this.x &&
-      x <= this.x + this.width &&
-      y >= this.y &&
-      y <= this.y + this.height
+      x >= this.x && x <= this.x + this.width &&
+      y >= this.y && y <= this.y + this.height
     );
   }
+
+  // ─────────────────────────────────────────
+  // DESTROY
+  // ─────────────────────────────────────────
+
+  destroy() {
+    super.destroy();
+  }
 }
 
-export default Checkbox;
+export default Checkbox;

package/components/Chip.js

@@ -1,118 +1,183 @@
 import Component from '../core/Component.js';
-
+import { roundRect, hexToRgb, darkenColor } from '../core/CanvasUtils.js';
+
+/**
+ * Chip — Material et Cupertino.
+ *
+ * Corrections :
+ *  - roundRect / darkenColor / hexToRgb viennent de CanvasUtils
+ *  - Guard _destroyed dans le RAF de ripple
+ *  - destroy() annule le RAF
+ */
 class Chip extends Component {
+  /**
+   * @param {CanvasFramework} framework
+   * @param {Object} [options={}]
+   * @param {string}   [options.text='']
+   * @param {string}   [options.icon]             - Emoji ou caractère Unicode
+   * @param {boolean}  [options.closable=true]
+   * @param {string}   [options.bgColor]
+   * @param {string}   [options.textColor]
+   * @param {string}   [options.rippleColor]
+   * @param {Function} [options.onClose]
+   */
   constructor(framework, options = {}) {
     super(framework, options);
 
-    this.text = options.text || '';
-    this.icon = options.icon || null;
+    this.text     = options.text    || '';
+    this.icon     = options.icon    || null;
     this.closable = options.closable !== false;
-    this.platform = framework.platform; // 'material' ou 'cupertino'
-    this.onClose = options.onClose;
+    this.platform = framework.platform;
+    this.onClose  = options.onClose;
 
-    // Couleurs par défaut selon platform
     if (this.platform === 'material') {
-      this.bgColor = options.bgColor || '#E0E0E0';
-      this.textColor = options.textColor || '#1F1F1F';
+      this.bgColor     = options.bgColor     || '#E0E0E0';
+      this.textColor   = options.textColor   || '#1F1F1F';
       this.rippleColor = options.rippleColor || 'rgba(0,0,0,0.12)';
-    } else { // Cupertino
-      this.bgColor = options.bgColor || 'rgba(242,242,247,0.95)';
+    } else {
+      this.bgColor   = options.bgColor   || 'rgba(242,242,247,0.95)';
       this.textColor = options.textColor || '#000';
     }
 
-    // Dimensions
-    const ctx = framework.ctx;
-    ctx.font = '14px -apple-system, sans-serif';
+    const ctx       = framework.ctx;
+    ctx.font        = '14px -apple-system, sans-serif';
     const textWidth = ctx.measureText(this.text).width;
-    const iconWidth = this.icon ? 20 : 0;
-    const closeWidth = this.closable ? 24 : 0;
-    this.width = iconWidth + textWidth + closeWidth + 24;
-    this.height = options.height || 32;
-    this.borderRadius = this.height / 2;
+    const iconWidth = this.icon     ? 20 : 0;
+    const closeWide = this.closable ? 24 : 0;
 
-    // Ripple pour Material
-    this.ripples = [];
-    this.pressed = false;
+    this.width        = iconWidth + textWidth + closeWide + 24;
+    this.height       = options.height || 32;
+    this.borderRadius = this.height / 2;
 
+    this.ripples         = [];
+    this._rafId          = null;
+    this.pressed         = false;
     this.closeButtonRect = null;
-    this.onPress = this.handlePress.bind(this);
+
+    this.onPress = this._handlePress.bind(this);
   }
 
-  addRipple(x, y) {
-    const ripple = {
+  // ─────────────────────────────────────────
+  // RIPPLE
+  // ─────────────────────────────────────────
+
+  /** @private */
+  _addRipple(x, y) {
+    this.ripples.push({
       x, y,
       radius: 0,
       maxRadius: Math.max(this.width, this.height) * 1.5,
-      opacity: 0.3
-    };
-    this.ripples.push(ripple);
+      opacity: 0.3,
+    });
+    this._animateRipple();
+  }
+
+  /** @private */
+  _animateRipple() {
+    if (this._rafId) return;
 
     const animate = () => {
+      if (this._destroyed) { this._rafId = null; return; }
+
       let active = false;
-      for (let r of this.ripples) {
-        if (r.radius < r.maxRadius) {
-          r.radius += r.maxRadius / 15;
-          r.opacity -= 0.03;
-          active = true;
-        }
+      for (const r of this.ripples) {
+        if (r.radius < r.maxRadius) { r.radius += r.maxRadius / 15; active = true; }
+        r.opacity -= 0.03;
+      }
+      this.ripples = this.ripples.filter((r) => r.opacity > 0);
+      this.markDirty();
+
+      if (active && this.ripples.length > 0) {
+        this._rafId = requestAnimationFrame(animate);
+      } else {
+        this._rafId = null;
       }
-      this.ripples = this.ripples.filter(r => r.opacity > 0);
-      if (active) requestAnimationFrame(animate);
     };
-    animate();
+
+    this._rafId = requestAnimationFrame(animate);
   }
 
+  // ─────────────────────────────────────────
+  // INTERACTION
+  // ─────────────────────────────────────────
+
+  /** @private */
+  _handlePress(x, y) {
+    // Bouton fermeture
+    if (this.closable && this.closeButtonRect) {
+      const r = this.closeButtonRect;
+      if (x >= r.x && x <= r.x + r.width && y >= r.y && y <= r.y + r.height) {
+        this.onClose?.();
+        return;
+      }
+    }
+
+    if (this.platform === 'material') {
+      this._addRipple(x - this.x, y - this.y);
+    } else {
+      this.pressed = true;
+      setTimeout(() => { this.pressed = false; this.markDirty(); }, 100);
+    }
+
+    this.onClick?.();
+  }
+
+  // ─────────────────────────────────────────
+  // DESSIN
+  // ─────────────────────────────────────────
+
   draw(ctx) {
     ctx.save();
 
-    // Background
+    // Fond
     ctx.fillStyle = this.pressed && this.platform === 'cupertino'
-      ? this.darkenColor(this.bgColor, 0.1)
+      ? darkenColor(this.bgColor)
       : this.bgColor;
 
     ctx.beginPath();
-    this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+    roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
     ctx.fill();
 
     let offsetX = this.x + 12;
 
-    // Icon
+    // Icône
     if (this.icon) {
-      ctx.font = '16px sans-serif';
-      ctx.fillStyle = this.textColor;
-      ctx.textAlign = 'left';
+      ctx.font         = '16px sans-serif';
+      ctx.fillStyle    = this.textColor;
+      ctx.textAlign    = 'left';
       ctx.textBaseline = 'middle';
       ctx.fillText(this.icon, offsetX, this.y + this.height / 2);
       offsetX += 20;
     }
 
-    // Text
-    ctx.font = this.platform === 'material'
+    // Texte
+    ctx.font      = this.platform === 'material'
       ? '500 14px Roboto, sans-serif'
       : '400 14px -apple-system';
-    ctx.fillStyle = this.textColor;
+    ctx.fillStyle    = this.textColor;
+    ctx.textAlign    = 'left';
+    ctx.textBaseline = 'middle';
     ctx.fillText(this.text, offsetX, this.y + this.height / 2);
 
     // Ripple (Material)
-    if (this.platform === 'material') {
+    if (this.platform === 'material' && this.ripples.length > 0) {
       ctx.save();
       ctx.beginPath();
-      this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+      roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
       ctx.clip();
 
-      this.ripples.forEach(r => {
+      for (const r of this.ripples) {
         ctx.globalAlpha = r.opacity;
-        ctx.fillStyle = this.rippleColor;
+        ctx.fillStyle   = this.rippleColor;
         ctx.beginPath();
         ctx.arc(this.x + r.x, this.y + r.y, r.radius, 0, Math.PI * 2);
         ctx.fill();
-      });
-
+      }
       ctx.restore();
       ctx.globalAlpha = 1;
     }
 
-    // Close button
+    // Bouton fermeture
     if (this.closable) {
       const cx = this.x + this.width - 20;
       const cy = this.y + this.height / 2;
@@ -124,70 +189,36 @@ class Chip extends Component {
       ctx.fill();
 
       ctx.strokeStyle = this.textColor;
-      ctx.lineWidth = 1.5;
-      ctx.lineCap = 'round';
+      ctx.lineWidth   = 1.5;
+      ctx.lineCap     = 'round';
       ctx.beginPath();
-      ctx.moveTo(cx - 4, cy - 4);
-      ctx.lineTo(cx + 4, cy + 4);
-      ctx.moveTo(cx + 4, cy - 4);
-      ctx.lineTo(cx - 4, cy + 4);
+      ctx.moveTo(cx - 4, cy - 4); ctx.lineTo(cx + 4, cy + 4);
+      ctx.moveTo(cx + 4, cy - 4); ctx.lineTo(cx - 4, cy + 4);
       ctx.stroke();
     }
 
     ctx.restore();
   }
 
-  handlePress(x, y) {
-    // Vérifie bouton close
-    if (this.closable && this.closeButtonRect) {
-      if (x >= this.closeButtonRect.x && x <= this.closeButtonRect.x + this.closeButtonRect.width &&
-          y >= this.closeButtonRect.y && y <= this.closeButtonRect.y + this.closeButtonRect.height) {
-        this.onClose?.();
-        return;
-      }
-    }
-
-    // Ripple Material
-    if (this.platform === 'material') {
-      this.addRipple(x - this.x, y - this.y);
-    } else {
-      // Feedback press Cupertino
-      this.pressed = true;
-      setTimeout(() => { this.pressed = false; this.markDirty(); }, 100);
-    }
-
-    this.onClick?.();
+  isPointInside(x, y) {
+    return (
+      x >= this.x && x <= this.x + this.width &&
+      y >= this.y && y <= this.y + this.height
+    );
   }
 
-  roundRect(ctx, x, y, w, h, r) {
-    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();
-  }
+  // ─────────────────────────────────────────
+  // DESTROY
+  // ─────────────────────────────────────────
 
-  darkenColor(color, factor = 0.2) {
-    if (color.startsWith('#')) {
-      const { r, g, b } = this.hexToRgb(color);
-      return `rgb(${Math.floor(r * (1 - factor))}, ${Math.floor(g * (1 - factor))}, ${Math.floor(b * (1 - factor))})`;
+  destroy() {
+    if (this._rafId) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
     }
-    return color;
-  }
-
-  hexToRgb(hex) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result ? {
-      r: parseInt(result[1], 16),
-      g: parseInt(result[2], 16),
-      b: parseInt(result[3], 16)
-    } : { r: 0, g: 0, b: 0 };
+    this.ripples = [];
+    super.destroy();
   }
 }
 
-export default Chip;
+export default Chip;