canvasframework 0.5.16 → 0.5.18

package/components/Checkbox.js

@@ -1,166 +0,0 @@
-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

@@ -1,212 +0,0 @@
-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

@@ -1,327 +0,0 @@
-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;