canvasframework 0.5.46 → 0.5.47

package/components/Chip.js

@@ -1,192 +1,185 @@
 import Component from '../core/Component.js';
-/**
- * Chip (étiquette cliquable)
- * @class
- * @extends Component
- * @property {string} text - Texte
- * @property {string|null} icon - Icône
- * @property {boolean} closable - Peut être fermé
- * @property {string} platform - Plateforme
- * @property {string} bgColor - Couleur de fond
- * @property {string} textColor - Couleur du texte
- * @property {Function} onClose - Callback à la fermeture
- * @property {number} borderRadius - Rayon des coins
- * @property {Object|null} closeButtonRect - Rectangle du bouton fermer
- */
+
 class Chip extends Component {
-  /**
-   * Crée une instance de Chip
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}] - Options de configuration
-   * @param {string} [options.text=''] - Texte
-   * @param {string} [options.icon] - Icône
-   * @param {boolean} [options.closable=true] - Peut être fermé
-   * @param {string} [options.bgColor] - Couleur de fond (auto selon platform)
-   * @param {string} [options.textColor='#000000'] - Couleur du texte
-   * @param {Function} [options.onClose] - Callback à la fermeture
-   * @param {number} [options.height=32] - Hauteur
-   */
   constructor(framework, options = {}) {
     super(framework, options);
+
     this.text = options.text || '';
     this.icon = options.icon || null;
     this.closable = options.closable !== false;
-    this.platform = framework.platform;
-    this.bgColor = options.bgColor || (framework.platform === 'material' ? '#E0E0E0' : '#F0F0F0');
-    this.textColor = options.textColor || '#000000';
+    this.platform = framework.platform; // 'material' ou 'cupertino'
     this.onClose = options.onClose;
-    
-    // Calculer la largeur en fonction du contenu
+
+    // Couleurs par défaut selon platform
+    if (this.platform === 'material') {
+      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)';
+      this.textColor = options.textColor || '#000';
+    }
+
+    // Dimensions
     const ctx = framework.ctx;
     ctx.font = '14px -apple-system, sans-serif';
     const textWidth = ctx.measureText(this.text).width;
-    const iconWidth = this.icon ? 24 : 0;
+    const iconWidth = this.icon ? 20 : 0;
     const closeWidth = this.closable ? 24 : 0;
-    this.width = iconWidth + textWidth + closeWidth + 24; // padding
+    this.width = iconWidth + textWidth + closeWidth + 24;
     this.height = options.height || 32;
     this.borderRadius = this.height / 2;
-    
+
+    // Ripple pour Material
+    this.ripples = [];
+    this.pressed = false;
+
     this.closeButtonRect = null;
     this.onPress = this.handlePress.bind(this);
   }
 
-  /**
-   * Dessine le chip
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
+  addRipple(x, y) {
+    const ripple = {
+      x, y,
+      radius: 0,
+      maxRadius: Math.max(this.width, this.height) * 1.5,
+      opacity: 0.3
+    };
+    this.ripples.push(ripple);
+
+    const animate = () => {
+      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;
+        }
+      }
+      this.ripples = this.ripples.filter(r => r.opacity > 0);
+      if (active) requestAnimationFrame(animate);
+    };
+    animate();
+  }
+
   draw(ctx) {
     ctx.save();
-    
+
     // Background
-    ctx.fillStyle = this.pressed ? this.darkenColor(this.bgColor) : this.bgColor;
+    ctx.fillStyle = this.pressed && this.platform === 'cupertino'
+      ? this.darkenColor(this.bgColor, 0.1)
+      : this.bgColor;
+
     ctx.beginPath();
     this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
     ctx.fill();
-    
-    let currentX = this.x + 12;
-    
-    // Icône
+
+    let offsetX = this.x + 12;
+
+    // Icon
     if (this.icon) {
       ctx.font = '16px sans-serif';
+      ctx.fillStyle = this.textColor;
       ctx.textAlign = 'left';
       ctx.textBaseline = 'middle';
-      ctx.fillStyle = this.textColor;
-      ctx.fillText(this.icon, currentX, this.y + this.height / 2);
-      currentX += 20;
+      ctx.fillText(this.icon, offsetX, this.y + this.height / 2);
+      offsetX += 20;
     }
-    
-    // Texte
-    ctx.font = '14px -apple-system, sans-serif';
+
+    // Text
+    ctx.font = this.platform === 'material'
+      ? '500 14px Roboto, sans-serif'
+      : '400 14px -apple-system';
     ctx.fillStyle = this.textColor;
-    ctx.textAlign = 'left';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(this.text, currentX, this.y + this.height / 2);
-    
-    // Bouton de fermeture
+    ctx.fillText(this.text, offsetX, this.y + this.height / 2);
+
+    // Ripple (Material)
+    if (this.platform === 'material') {
+      ctx.save();
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+      ctx.clip();
+
+      this.ripples.forEach(r => {
+        ctx.globalAlpha = r.opacity;
+        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
     if (this.closable) {
-      const closeX = this.x + this.width - 20;
-      const closeY = this.y + this.height / 2;
-      
-      this.closeButtonRect = {
-        x: closeX - 8,
-        y: closeY - 8,
-        width: 16,
-        height: 16
-      };
-      
-      // Cercle du bouton (optionnel)
-      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+      const cx = this.x + this.width - 20;
+      const cy = this.y + this.height / 2;
+      this.closeButtonRect = { x: cx - 8, y: cy - 8, width: 16, height: 16 };
+
+      ctx.fillStyle = 'rgba(0,0,0,0.1)';
       ctx.beginPath();
-      ctx.arc(closeX, closeY, 8, 0, Math.PI * 2);
+      ctx.arc(cx, cy, 8, 0, Math.PI * 2);
       ctx.fill();
-      
-      // Croix (X)
+
       ctx.strokeStyle = this.textColor;
       ctx.lineWidth = 1.5;
       ctx.lineCap = 'round';
       ctx.beginPath();
-      ctx.moveTo(closeX - 4, closeY - 4);
-      ctx.lineTo(closeX + 4, closeY + 4);
-      ctx.stroke();
-      
-      ctx.beginPath();
-      ctx.moveTo(closeX + 4, closeY - 4);
-      ctx.lineTo(closeX - 4, closeY + 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();
   }
 
-  /**
-   * Gère la pression (clic)
-   * @param {number} x - Coordonnée X
-   * @param {number} y - Coordonnée Y
-   * @private
-   */
   handlePress(x, y) {
-    const adjustedY = y - this.framework.scrollOffset;
-    
-    // Vérifier si on clique sur le bouton de fermeture
+    // Vérifie bouton close
     if (this.closable && this.closeButtonRect) {
-      if (x >= this.closeButtonRect.x && 
-          x <= this.closeButtonRect.x + this.closeButtonRect.width &&
-          adjustedY >= this.closeButtonRect.y && 
-          adjustedY <= this.closeButtonRect.y + this.closeButtonRect.height) {
-        if (this.onClose) this.onClose();
+      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;
       }
     }
-    
-    // Sinon, déclencher onClick normal
-    if (this.onClick) this.onClick();
+
+    // 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?.();
   }
 
-  /**
-   * 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);
+  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();
   }
 
-  /**
-   * Assombrit une couleur
-   * @param {string} color - Couleur
-   * @returns {string} Couleur assombrie
-   * @private
-   */
-  darkenColor(color) {
-    // Utiliser la même méthode que Button
+  darkenColor(color, factor = 0.2) {
     if (color.startsWith('#')) {
-      const rgb = this.hexToRgb(color);
-      return `rgb(${Math.max(0, rgb.r - 20)}, ${Math.max(0, rgb.g - 20)}, ${Math.max(0, rgb.b - 20)})`;
+      const { r, g, b } = this.hexToRgb(color);
+      return `rgb(${Math.floor(r * (1 - factor))}, ${Math.floor(g * (1 - factor))}, ${Math.floor(b * (1 - factor))})`;
     }
     return color;
   }
 
-  /**
-   * Convertit une couleur hex en RGB
-   * @param {string} hex - Couleur hexadécimale
-   * @returns {{r: number, g: number, b: number}} Objet RGB
-   * @private
-   */
   hexToRgb(hex) {
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
     return result ? {
@@ -195,18 +188,6 @@ class Chip extends Component {
       b: parseInt(result[3], 16)
     } : { r: 0, g: 0, b: 0 };
   }
-
-  /**
-   * Vérifie si un point est dans les limites
-   * @param {number} x - Coordonnée X
-   * @param {number} y - Coordonnée Y
-   * @returns {boolean} True si le point est dans le chip
-   */
-  isPointInside(x, y) {
-    const adjustedY = y - this.framework.scrollOffset;
-    return x >= this.x && x <= this.x + this.width && 
-           adjustedY >= this.y && adjustedY <= this.y + this.height;
-  }
 }
 
-export default Chip;
+export default Chip;

package/components/RadioButton.js

@@ -1,151 +1,206 @@
 import Component from '../core/Component.js';
 
 /**
- * Bouton radio pour les sélections uniques
+ * RadioButton Material You & Cupertino
  * @class
  * @extends Component
- * @property {string} group - Groupe de boutons radio
- * @property {boolean} checked - État sélectionné
- * @property {string} label - Texte du label
- * @property {string} platform - Plateforme
- * @property {number} circleSize - Taille du cercle
- * @property {number} circleRadius - Rayon du cercle
- * @property {Function} onChange - Callback au changement
  */
 class RadioButton extends Component {
-  /**
-   * Crée une instance de RadioButton
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}] - Options de configuration
-   * @param {string} [options.group='default'] - Groupe de boutons
-   * @param {boolean} [options.checked=false] - État initial
-   * @param {string} [options.label=''] - Texte du label
-   * @param {Function} [options.onChange] - Callback au changement
-   */
   constructor(framework, options = {}) {
     super(framework, options);
+
     this.group = options.group || 'default';
     this.checked = options.checked || false;
     this.label = options.label || '';
-	this.labelColor = options.labelColor || '#000000'; // Nouvelle propriété
+    this.labelColor = options.labelColor || (framework.platform === 'material' ? '#1F1F1F' : '#000000');
     this.platform = framework.platform;
-    this.circleSize = 24; // Taille du cercle
-    this.circleRadius = 10; // Rayon du cercle
+
+    // Cercle
+    this.circleSize = 24;           // Taille du bouton
+    this.circleRadius = 12;         // Rayon du cercle extérieur
+    this.innerRadius = this.circleRadius * 0.5; // Cercle intérieur proportionnel
+
+    // Animation feedback
+    this.tapAlpha = 0;              // Pour iOS
+    this.ripple = null;             // Pour Material
+    this.rippleSpeed = 0.15;
+
     this.onChange = options.onChange;
-    
-    // Calculer la largeur totale incluant le label
-    this.totalWidth = this.label ? this.circleSize + 8 + this.getTextWidth(this.label) : this.circleSize;
-    this.width = this.totalWidth; // Mettre à jour la largeur totale
-    this.height = this.circleSize; // Garder la même hauteur
-    
-    // Définir onClick
+
+    // Calcul largeur totale avec label
+    this.width = this.label ? this.circleSize + 8 + this.getTextWidth(this.label) : this.circleSize;
+    this.height = this.circleSize;
+
     this.onClick = this.handleClick.bind(this);
+	this.selectionProgress = this.checked ? 1 : 0; // 0 = non sélectionné, 1 = sélectionné
+	this.animSpeed = 0.2; // vitesse animation
   }
-  
-  /**
-   * Calcule la largeur du texte
-   * @param {string} text - Texte à mesurer
-   * @returns {number} Largeur du texte
-   * @private
-   */
+
   getTextWidth(text) {
-    // Utiliser le contexte temporaire pour mesurer le texte
     const ctx = this.framework.ctx;
     ctx.save();
-    ctx.font = '16px -apple-system, sans-serif';
+    ctx.font = this.platform === 'material' ? '16px Roboto' : '16px -apple-system';
     const width = ctx.measureText(text).width;
     ctx.restore();
     return width;
   }
 
-  /**
-   * Gère le clic sur le bouton radio
-   * @private
-   */
-  handleClick() {
-    // Décocher les autres du même groupe
+  handleClick(x, y) {
+    // Décocher les autres du groupe
     for (let comp of this.framework.components) {
       if (comp instanceof RadioButton && comp.group === this.group && comp !== this) {
         comp.checked = false;
       }
     }
     this.checked = true;
+
+    // Feedback
+    if (this.platform === 'material') {
+      this.ripple = { x: x - this.x, y: y - this.y, radius: 0, opacity: 0.3 };
+      this.animateRipple();
+    } else {
+      this.tapAlpha = 0.3;
+      this.animateTap();
+    }
+
     if (this.onChange) this.onChange(this.checked);
   }
 
-  /**
-   * Dessine le bouton radio
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
+  animateRipple() {
+    if (!this.ripple) return;
+    const step = () => {
+      if (!this.ripple) return;
+      this.ripple.radius += this.circleSize * this.rippleSpeed;
+      this.ripple.opacity -= 0.02;
+
+      if (this.ripple.opacity <= 0) this.ripple = null;
+      else requestAnimationFrame(step);
+      this.markDirty();
+    };
+    step();
+  }
+
+  animateTap() {
+    const step = () => {
+      this.tapAlpha -= 0.03;
+      if (this.tapAlpha <= 0) this.tapAlpha = 0;
+      else requestAnimationFrame(step);
+      this.markDirty();
+    };
+    step();
+  }
+
+  update() {
+    const target = this.checked ? 1 : 0;
+    this.selectionProgress += (target - this.selectionProgress) * this.animSpeed;
+    this.selectionProgress = Math.max(0, Math.min(1, this.selectionProgress));
+    
+    
+  }
+
   draw(ctx) {
     ctx.save();
-    
+
     const centerX = this.x + this.circleSize / 2;
     const centerY = this.y + this.circleSize / 2;
-    
+
     if (this.platform === 'material') {
-      // Outer circle
-      ctx.strokeStyle = this.checked ? '#6200EE' : '#666666';
+      // Cercle extérieur
+      ctx.strokeStyle = this.checked ? '#6750A4' : '#666666';
       ctx.lineWidth = 2;
       ctx.beginPath();
       ctx.arc(centerX, centerY, this.circleRadius, 0, Math.PI * 2);
       ctx.stroke();
-      
-      // Inner circle
+
+      // Cercle intérieur
       if (this.checked) {
-        ctx.fillStyle = '#6200EE';
+        ctx.fillStyle = '#6750A4';
         ctx.beginPath();
-        ctx.arc(centerX, centerY, 5, 0, Math.PI * 2);
+        ctx.arc(centerX, centerY, this.innerRadius, 0, Math.PI * 2);
         ctx.fill();
       }
-     } else {
-      // Cupertino (iOS style)
+
+      // Ripple
+      if (this.ripple) {
+        ctx.globalAlpha = this.ripple.opacity;
+        ctx.fillStyle = '#6750A4';
+        ctx.beginPath();
+        ctx.arc(this.x + this.ripple.x, this.y + this.ripple.y, this.ripple.radius, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.globalAlpha = 1;
+      }
+    } else {
+      // Cupertino
       if (this.checked) {
-        // Cercle bleu rempli
         ctx.fillStyle = '#007AFF';
         ctx.beginPath();
         ctx.arc(centerX, centerY, this.circleRadius, 0, Math.PI * 2);
         ctx.fill();
-        
-        // Point blanc au centre
+
+        // Point central blanc
         ctx.fillStyle = '#FFFFFF';
         ctx.beginPath();
-        ctx.arc(centerX, centerY, 4, 0, Math.PI * 2);
+        ctx.arc(centerX, centerY, this.innerRadius, 0, Math.PI * 2);
         ctx.fill();
       } else {
-        // Cercle gris clair
         ctx.strokeStyle = '#D1D1D6';
         ctx.lineWidth = 1.5;
         ctx.beginPath();
         ctx.arc(centerX, centerY, this.circleRadius, 0, Math.PI * 2);
         ctx.stroke();
       }
+
+      // Tap overlay
+      if (this.tapAlpha > 0) {
+        ctx.fillStyle = `rgba(0,0,0,${this.tapAlpha})`;
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, this.circleRadius, 0, Math.PI * 2);
+        ctx.fill();
+      }
     }
-    
+	
+	this.update();
+
+	// Cercle intérieur avec animation Material
+	if (this.platform === 'material') {
+		if (this.selectionProgress > 0) {
+			ctx.fillStyle = '#6200EE';
+			ctx.beginPath();
+			ctx.arc(centerX, centerY, 5 * this.selectionProgress, 0, Math.PI*2);
+			ctx.fill();
+		}
+	}
+
+	// Cercle bleu pour Cupertino
+	if (this.platform === 'cupertino' && this.selectionProgress > 0) {
+		ctx.fillStyle = '#007AFF';
+		ctx.beginPath();
+		ctx.arc(centerX, centerY, this.circleRadius * this.selectionProgress, 0, Math.PI*2);
+		ctx.fill();
+
+		// Point blanc au centre
+		ctx.fillStyle = '#FFFFFF';
+		ctx.beginPath();
+		ctx.arc(centerX, centerY, 4 * this.selectionProgress, 0, Math.PI*2);
+		ctx.fill();
+	}
+
     // Label
     if (this.label) {
-      ctx.fillStyle = this.labelColor; // Au lieu de '#000000'
-      ctx.font = '16px -apple-system, sans-serif';
+      ctx.fillStyle = this.labelColor;
+      ctx.font = this.platform === 'material' ? '16px Roboto' : '16px -apple-system';
       ctx.textAlign = 'left';
       ctx.textBaseline = 'middle';
       ctx.fillText(this.label, this.x + this.circleSize + 8, centerY);
     }
-    
+
     ctx.restore();
   }
-  
-  /**
-   * Vérifie si un point est dans les limites
-   * @param {number} x - Coordonnée X
-   * @param {number} y - Coordonnée Y
-   * @returns {boolean} True si le point est dans le bouton
-   */
+
   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;
   }
 }
 
-export default RadioButton;
+export default RadioButton;