canvasframework 0.5.18 → 0.5.20

package/components/Checkbox.js

@@ -0,0 +1,166 @@
+import Component from '../core/Component.js';
+
+/**
+ * Checkbox Material & Cupertino (iOS-like)
+ */
+class Checkbox extends Component {
+  constructor(framework, options = {}) {
+    super(framework, options);
+
+    this.checked = !!options.checked;
+    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;
+
+    // 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);
+    };
+  }
+
+  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.restore();
+    return w;
+  }
+
+  draw(ctx) {
+    ctx.save();
+    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);
+    } else {
+      this.drawCupertino(ctx, centerY);
+    }
+
+    ctx.restore();
+  }
+
+  /* ---------------- 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.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();
+  }
+
+  isPointInside(x, y) {
+    return (
+      x >= this.x &&
+      x <= this.x + this.width &&
+      y >= this.y &&
+      y <= this.y + this.height
+    );
+  }
+}
+
+export default Checkbox;

package/components/Chip.js

@@ -0,0 +1,212 @@
+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.onClose = options.onClose;
+    
+    // Calculer la largeur en fonction du contenu
+    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 closeWidth = this.closable ? 24 : 0;
+    this.width = iconWidth + textWidth + closeWidth + 24; // padding
+    this.height = options.height || 32;
+    this.borderRadius = this.height / 2;
+    
+    this.closeButtonRect = null;
+    this.onPress = this.handlePress.bind(this);
+  }
+
+  /**
+   * Dessine le chip
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    // Background
+    ctx.fillStyle = this.pressed ? this.darkenColor(this.bgColor) : 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
+    if (this.icon) {
+      ctx.font = '16px sans-serif';
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.fillStyle = this.textColor;
+      ctx.fillText(this.icon, currentX, this.y + this.height / 2);
+      currentX += 20;
+    }
+    
+    // Texte
+    ctx.font = '14px -apple-system, sans-serif';
+    ctx.fillStyle = this.textColor;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(this.text, currentX, this.y + this.height / 2);
+    
+    // Bouton de fermeture
+    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)';
+      ctx.beginPath();
+      ctx.arc(closeX, closeY, 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.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
+    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();
+        return;
+      }
+    }
+    
+    // Sinon, déclencher onClick normal
+    if (this.onClick) 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);
+    ctx.closePath();
+  }
+
+  /**
+   * Assombrit une couleur
+   * @param {string} color - Couleur
+   * @returns {string} Couleur assombrie
+   * @private
+   */
+  darkenColor(color) {
+    // Utiliser la même méthode que Button
+    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)})`;
+    }
+    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 ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      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;

package/components/CircularProgress.js

@@ -0,0 +1,327 @@
+import Component from '../core/Component.js';
+
+/**
+ * Spinner de chargement circulaire avec support Material et Cupertino
+ * @class
+ * @extends Component
+ * @property {number} size - Taille du spinner
+ * @property {boolean} indeterminate - Mode indéterminé
+ * @property {number} progress - Progression (0-100)
+ * @property {string} platform - Plateforme
+ * @property {string} color - Couleur
+ * @property {number} lineWidth - Épaisseur de la ligne
+ * @property {number} rotation - Rotation actuelle
+ * @property {number} animationSpeed - Vitesse d'animation
+ */
+class CircularProgress extends Component {
+  /**
+   * Crée une instance de CircularProgress
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {number} [options.size=40] - Taille
+   * @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] - Épaisseur (auto selon platform)
+   * @param {number} [options.animationSpeed] - Vitesse d'animation (auto selon platform)
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.size = options.size || 40;
+    this.indeterminate = options.indeterminate !== false;
+    this.progress = options.progress || 0; // 0-100
+    this.platform = framework.platform;
+    
+    // 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;
+    
+    // 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;
+    
+    // Démarrer l'animation pour indeterminate
+    if (this.indeterminate) {
+      this.startAnimation();
+    }
+  }
+  
+  /**
+   * Démarre l'animation du spinner
+   * @private
+   */
+  startAnimation() {
+    let lastTime = performance.now();
+    
+    const animate = (currentTime) => {
+      if (!this.visible || !this.indeterminate) return;
+      
+      const deltaTime = currentTime - lastTime;
+      lastTime = currentTime;
+      
+      if (this.platform === 'material') {
+        this.animateMaterial(deltaTime);
+      } else {
+        this.animateCupertino(deltaTime);
+      }
+      
+      this.markDirty();
+      requestAnimationFrame(animate);
+    };
+    
+    requestAnimationFrame(animate);
+  }
+  
+  /**
+   * Animation Material (arc qui tourne et change de taille)
+   * @private
+   */
+  animateMaterial(deltaTime) {
+    // Rotation globale
+    this.rotation += this.animationSpeed;
+    if (this.rotation > Math.PI * 2) {
+      this.rotation -= Math.PI * 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) {
+      // 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.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();
+      
+      // Progress
+      const angle = (this.progress / 100) * Math.PI * 2;
+      ctx.strokeStyle = this.color;
+      ctx.lineCap = 'round';
+      ctx.beginPath();
+      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 iOS (plus fin et élégant)
+      // Track
+      ctx.strokeStyle = '#E5E5EA';
+      ctx.lineWidth = this.lineWidth;
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+      ctx.stroke();
+      
+      // Progress
+      const angle = (this.progress / 100) * Math.PI * 2;
+      ctx.strokeStyle = this.color;
+      ctx.lineCap = 'round';
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + angle);
+      ctx.stroke();
+      
+      // 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 = `${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();
+    }
+  }
+  
+  /**
+   * Vérifie si un point est dans les limites
+   * @returns {boolean} False (non cliquable)
+   */
+  isPointInside() {
+    return false; // Non cliquable
+  }
+}
+
+export default CircularProgress;