canvasframework 0.3.14 → 0.3.16

package/components/Checkbox.js

@@ -1,180 +1,166 @@
 import Component from '../core/Component.js';
+
 /**
- * Case à cocher
- * @class
- * @extends Component
- * @property {boolean} checked - État cochée
- * @property {string} label - Texte du label
- * @property {string} platform - Plateforme
- * @property {number} boxWidth - Largeur de la case
- * @property {number} boxHeight - Hauteur de la case
- * @property {Function} onChange - Callback au changement
+ * Checkbox Material & Cupertino (iOS-like)
  */
 class Checkbox extends Component {
-  /**
-   * Crée une instance de Checkbox
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}] - Options de configuration
-   * @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.checked = options.checked || false;
+
+    this.checked = !!options.checked;
     this.label = options.label || '';
     this.platform = framework.platform;
-    this.boxWidth = 24; // Taille de la case
-    this.boxHeight = 24; // Taille de la case
     this.onChange = options.onChange;
-    
-    // Calculer la largeur totale incluant le label
-    this.totalWidth = this.label ? this.boxWidth + 8 + this.getTextWidth(this.label) : this.boxWidth;
-    this.width = this.totalWidth; // Mettre à jour la largeur totale
-    this.height = this.boxHeight; // Garder la même hauteur
-    
-    // Définir onClick
-    this.onClick = this.handleClick.bind(this);
+
+    this.boxSize = 22;
+    this.padding = 10;
+
+    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.height = 28;
+
+    this.onClick = () => {
+      this.checked = !this.checked;
+      this.onChange?.(this.checked);
+    };
   }
-  
-  /**
-   * 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';
-    const width = ctx.measureText(text).width;
+    ctx.font = '16px -apple-system, system-ui, sans-serif';
+    const w = ctx.measureText(text).width;
     ctx.restore();
-    return width;
-  }
-
-  /**
-   * Gère le clic sur la checkbox
-   * @private
-   */
-  handleClick() {
-    this.checked = !this.checked;
-    if (this.onChange) this.onChange(this.checked);
+    return w;
   }
 
-  /**
-   * Dessine la checkbox
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
   draw(ctx) {
     ctx.save();
-    
-    // Position de la case
-    const boxX = this.x;
-    const boxY = this.y;
-    const boxCenterX = boxX + this.boxWidth / 2;
-    const boxCenterY = boxY + this.boxHeight / 2;
-    
+    ctx.font = '16px -apple-system, system-ui, sans-serif';
+    ctx.textBaseline = 'middle';
+
+    const centerY = this.y + this.height / 2;
+
     if (this.platform === 'material') {
-      // Material Design Checkbox
-      if (this.checked) {
-        // Case cochée
-        ctx.fillStyle = '#6200EE';
-        ctx.beginPath();
-        this.roundRect(ctx, boxX, boxY, this.boxWidth, this.boxHeight, 2);
-        ctx.fill();
-        
-        // Coche
-        ctx.strokeStyle = '#FFFFFF';
-        ctx.lineWidth = 2;
-        ctx.beginPath();
-        ctx.moveTo(boxX + 6, boxY + 12);
-        ctx.lineTo(boxX + 10, boxY + 16);
-        ctx.lineTo(boxX + 18, boxY + 8);
-        ctx.stroke();
-      } else {
-        // Case non cochée
-        ctx.strokeStyle = '#666666';
-        ctx.lineWidth = 2;
-        ctx.beginPath();
-        this.roundRect(ctx, boxX, boxY, this.boxWidth, this.boxHeight, 2);
-        ctx.stroke();
-      }
+      this.drawMaterial(ctx, centerY);
     } else {
-      // Cupertino (iOS) Checkbox
-      if (this.checked) {
-        // Case cochée (iOS utilise plutôt un cercle)
-        ctx.fillStyle = '#007AFF';
-        ctx.beginPath();
-        ctx.arc(boxCenterX, boxCenterY, this.boxWidth/2, 0, Math.PI * 2);
-        ctx.fill();
-        
-        // Coche
-        ctx.strokeStyle = '#FFFFFF';
-        ctx.lineWidth = 2;
-        ctx.beginPath();
-        ctx.moveTo(boxX + 6, boxCenterY);
-        ctx.lineTo(boxX + 10, boxCenterY + 4);
-        ctx.lineTo(boxX + 18, boxCenterY - 4);
-        ctx.stroke();
-      } else {
-        // Case non cochée
-        ctx.strokeStyle = '#C7C7CC';
-        ctx.lineWidth = 2;
-        ctx.beginPath();
-        ctx.arc(boxCenterX, boxCenterY, this.boxWidth/2, 0, Math.PI * 2);
-        ctx.stroke();
-      }
+      this.drawCupertino(ctx, centerY);
     }
-    
-    // Label
-    if (this.label) {
-      ctx.fillStyle = '#000000';
-      ctx.font = '16px -apple-system, sans-serif';
-      ctx.textAlign = 'left';
-      ctx.textBaseline = 'middle';
-      ctx.fillText(this.label, boxX + this.boxWidth + 8, boxCenterY);
-    }
-    
+
     ctx.restore();
   }
 
-  /**
-   * 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) {
+  /* ---------------- MATERIAL ---------------- */
+
+  drawMaterial(ctx, centerY) {
+    const x = this.x;
+    const y = centerY - this.boxSize / 2;
+
+    // Box
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = this.checked ? '#6200EE' : '#757575';
+    ctx.fillStyle = this.checked ? '#6200EE' : 'transparent';
+
+    this.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.beginPath();
+      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
+    );
+  }
+
+  /* ---------------- CUPERTINO ---------------- */
+
+  /* ---------------- CUPERTINO ---------------- */
+
+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.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);
+    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();
+  }
+
+  // Checkmark
+  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();
+  }
+
+  // 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();
   }
-  
-  /**
-   * 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 la checkbox
-   */
+
   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 Checkbox;
+export default Checkbox;

package/components/CircularProgress.js

@@ -1,6 +1,7 @@
 import Component from '../core/Component.js';
+
 /**
- * Spinner de chargement circulaire
+ * Spinner de chargement circulaire avec support Material et Cupertino
  * @class
  * @extends Component
  * @property {number} size - Taille du spinner
@@ -21,8 +22,8 @@ class CircularProgress extends Component {
    * @param {boolean} [options.indeterminate=true] - Mode indéterminé
    * @param {number} [options.progress=0] - Progression (0-100)
    * @param {string} [options.color] - Couleur (auto selon platform)
-   * @param {number} [options.lineWidth=4] - Épaisseur
-   * @param {number} [options.animationSpeed=0.05] - Vitesse d'animation
+   * @param {number} [options.lineWidth] - Épaisseur (auto selon platform)
+   * @param {number} [options.animationSpeed] - Vitesse d'animation (auto selon platform)
    */
   constructor(framework, options = {}) {
     super(framework, options);
@@ -30,10 +31,32 @@ class CircularProgress extends Component {
     this.indeterminate = options.indeterminate !== false;
     this.progress = options.progress || 0; // 0-100
     this.platform = framework.platform;
-    this.color = options.color || (framework.platform === 'material' ? '#6200EE' : '#007AFF');
-    this.lineWidth = options.lineWidth || 4;
+    
+    // Couleurs selon la plateforme
+    this.color = options.color || (
+      this.platform === 'material' ? '#6200EE' : '#8E8E93'
+    );
+    
+    // Épaisseur selon la plateforme
+    this.lineWidth = options.lineWidth || (
+      this.platform === 'material' ? 4 : 2.5
+    );
+    
+    // Vitesse d'animation selon la plateforme
+    this.animationSpeed = options.animationSpeed || (
+      this.platform === 'material' ? 0.05 : 0.08
+    );
+    
     this.rotation = 0;
-    this.animationSpeed = options.animationSpeed || 0.05;
+    
+    // Pour l'animation Material (arc qui s'agrandit/rétrécit)
+    this.arcStart = 0;
+    this.arcEnd = 0;
+    this.arcGrowing = true;
+    
+    // Pour l'animation Cupertino (12 traits qui tournent)
+    this.cupertinoLines = 12;
+    this.cupertinoOpacity = Array(this.cupertinoLines).fill(0);
     
     this.width = this.size;
     this.height = this.size;
@@ -49,54 +72,164 @@ class CircularProgress extends Component {
    * @private
    */
   startAnimation() {
-    const animate = () => {
+    let lastTime = performance.now();
+    
+    const animate = (currentTime) => {
       if (!this.visible || !this.indeterminate) return;
       
-      this.rotation += this.animationSpeed;
-      if (this.rotation > Math.PI * 2) {
-        this.rotation = 0;
+      const deltaTime = currentTime - lastTime;
+      lastTime = currentTime;
+      
+      if (this.platform === 'material') {
+        this.animateMaterial(deltaTime);
+      } else {
+        this.animateCupertino(deltaTime);
       }
       
+      this.markDirty();
       requestAnimationFrame(animate);
     };
-    animate();
+    
+    requestAnimationFrame(animate);
   }
   
   /**
-   * Dessine le spinner
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   * Animation Material (arc qui tourne et change de taille)
+   * @private
    */
-  draw(ctx) {
-    ctx.save();
+  animateMaterial(deltaTime) {
+    // Rotation globale
+    this.rotation += this.animationSpeed;
+    if (this.rotation > Math.PI * 2) {
+      this.rotation -= Math.PI * 2;
+    }
     
-    const centerX = this.x + this.size / 2;
-    const centerY = this.y + this.size / 2;
-    const radius = (this.size - this.lineWidth) / 2;
+    // Animation de l'arc (grossit puis rétrécit)
+    const arcSpeed = 0.03;
     
+    if (this.arcGrowing) {
+      this.arcEnd += arcSpeed;
+      if (this.arcEnd > Math.PI * 1.5) {
+        this.arcGrowing = false;
+      }
+    } else {
+      this.arcStart += arcSpeed;
+      if (this.arcStart >= this.arcEnd) {
+        this.arcGrowing = true;
+        this.arcStart = 0;
+        this.arcEnd = 0;
+      }
+    }
+  }
+  
+  /**
+   * Animation Cupertino (traits qui s'estompent)
+   * @private
+   */
+  animateCupertino(deltaTime) {
+    this.rotation += this.animationSpeed;
+    if (this.rotation > Math.PI * 2) {
+      this.rotation -= Math.PI * 2;
+    }
+    
+    // Calculer l'opacité de chaque trait (fade progressif)
+    const activeIndex = Math.floor((this.rotation / (Math.PI * 2)) * this.cupertinoLines);
+    
+    for (let i = 0; i < this.cupertinoLines; i++) {
+      const distance = Math.abs(i - activeIndex);
+      const minDistance = Math.min(distance, this.cupertinoLines - distance);
+      this.cupertinoOpacity[i] = 1 - (minDistance / this.cupertinoLines) * 0.8;
+    }
+  }
+  
+  /**
+   * Dessine le spinner Material
+   * @private
+   */
+  drawMaterial(ctx, centerX, centerY, radius) {
     if (this.indeterminate) {
-      // Spinner qui tourne
+      // Track (cercle de base - très léger)
+      ctx.strokeStyle = 'rgba(98, 0, 238, 0.1)';
+      ctx.lineWidth = this.lineWidth;
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+      ctx.stroke();
+      
+      // Arc animé qui tourne
+      ctx.save();
       ctx.translate(centerX, centerY);
       ctx.rotate(this.rotation);
-      ctx.translate(-centerX, -centerY);
       
-      // Cercle de base (track)
-      ctx.strokeStyle = this.platform === 'material' ? '#E0E0E0' : '#E5E5EA';
-      ctx.lineWidth = this.lineWidth;
+      ctx.strokeStyle = this.color;
       ctx.lineCap = 'round';
+      ctx.lineWidth = this.lineWidth;
+      ctx.beginPath();
+      ctx.arc(0, 0, radius, this.arcStart, this.arcEnd);
+      ctx.stroke();
+      
+      ctx.restore();
+    } else {
+      // Progress circulaire déterminé
+      // Track
+      ctx.strokeStyle = '#E0E0E0';
+      ctx.lineWidth = this.lineWidth;
       ctx.beginPath();
       ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
       ctx.stroke();
       
-      // Arc animé
+      // Progress
+      const angle = (this.progress / 100) * Math.PI * 2;
       ctx.strokeStyle = this.color;
+      ctx.lineCap = 'round';
       ctx.beginPath();
-      ctx.arc(centerX, centerY, radius, 0, Math.PI * 1.5);
+      ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + angle);
       ctx.stroke();
       
+      // Pourcentage au centre
+      if (this.progress > 0) {
+        ctx.fillStyle = this.color;
+        ctx.font = `bold ${this.size / 3}px -apple-system, sans-serif`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(`${Math.round(this.progress)}%`, centerX, centerY);
+      }
+    }
+  }
+  
+  /**
+   * Dessine le spinner Cupertino (style iOS)
+   * @private
+   */
+  drawCupertino(ctx, centerX, centerY, radius) {
+    if (this.indeterminate) {
+      // Spinner iOS avec 12 traits
+      ctx.lineCap = 'round';
+      ctx.lineWidth = this.lineWidth;
+      
+      for (let i = 0; i < this.cupertinoLines; i++) {
+        const angle = (i / this.cupertinoLines) * Math.PI * 2;
+        const opacity = this.cupertinoOpacity[i];
+        
+        ctx.save();
+        ctx.translate(centerX, centerY);
+        ctx.rotate(angle);
+        
+        // Trait avec opacité variable
+        const startRadius = radius * 0.6;
+        const endRadius = radius;
+        
+        ctx.strokeStyle = this.hexToRgba(this.color, opacity);
+        ctx.beginPath();
+        ctx.moveTo(0, -startRadius);
+        ctx.lineTo(0, -endRadius);
+        ctx.stroke();
+        
+        ctx.restore();
+      }
     } else {
-      // Progress circulaire déterminé
+      // Progress circulaire iOS (plus fin et élégant)
       // Track
-      ctx.strokeStyle = this.platform === 'material' ? '#E0E0E0' : '#E5E5EA';
+      ctx.strokeStyle = '#E5E5EA';
       ctx.lineWidth = this.lineWidth;
       ctx.beginPath();
       ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
@@ -110,25 +243,76 @@ class CircularProgress extends Component {
       ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + angle);
       ctx.stroke();
       
-      // Pourcentage au centre (optionnel)
+      // Pas de texte au centre pour iOS (plus minimaliste)
+      // Mais si tu veux, décommente :
+      /*
       if (this.progress > 0) {
         ctx.fillStyle = this.color;
-        ctx.font = `bold ${this.size / 3}px -apple-system, sans-serif`;
+        ctx.font = `${this.size / 4}px -apple-system, sans-serif`;
         ctx.textAlign = 'center';
         ctx.textBaseline = 'middle';
         ctx.fillText(`${Math.round(this.progress)}%`, centerX, centerY);
       }
+      */
+    }
+  }
+  
+  /**
+   * Dessine le spinner
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    const centerX = this.x + this.size / 2;
+    const centerY = this.y + this.size / 2;
+    const radius = (this.size - this.lineWidth * 2) / 2;
+    
+    if (this.platform === 'material') {
+      this.drawMaterial(ctx, centerX, centerY, radius);
+    } else {
+      this.drawCupertino(ctx, centerX, centerY, radius);
     }
     
     ctx.restore();
   }
   
+  /**
+   * Convertit une couleur hex en rgba avec opacité
+   * @private
+   */
+  hexToRgba(hex, alpha) {
+    // Si c'est déjà rgba, le retourner
+    if (hex.startsWith('rgba')) return hex;
+    if (hex.startsWith('rgb')) {
+      return hex.replace('rgb', 'rgba').replace(')', `, ${alpha})`);
+    }
+    
+    // Convertir hex en rgba
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+  
   /**
    * Définit la progression
    * @param {number} value - Valeur de progression (0-100)
    */
   setProgress(value) {
     this.progress = Math.max(0, Math.min(100, value));
+    this.indeterminate = false;
+    this.markDirty();
+  }
+  
+  /**
+   * Active le mode indéterminé
+   */
+  setIndeterminate() {
+    this.indeterminate = true;
+    if (!this._animating) {
+      this.startAnimation();
+    }
   }
   
   /**

package/components/DatePicker.js

@@ -1,4 +1,9 @@
 import Component from '../core/Component.js';
+import AndroidDatePickerDialog from '../components/AndroidDatePickerDialog.js';
+import Modal from '../components/Modal.js';
+import IOSDatePickerWheel from '../components/IOSDatePickerWheel.js';
+import Button from '../components/Button.js';
+
 /**
  * Sélecteur de date (wrapper)
  * @class
@@ -61,6 +66,8 @@ class DatePicker extends Component {
    * Ouvre le sélecteur iOS
    * @private
    */
+   
+ 
   openIOSPicker() {
     // Créer un modal avec le picker iOS
     const modal = new Modal(this.framework, {