canvasframework 0.3.6

package/components/Card.js

@@ -0,0 +1,193 @@
+import Component from '../core/Component.js';
+/**
+ * Carte avec ombre et contenu
+ * @class
+ * @extends Component
+ * @property {Component[]} children - Enfants de la carte
+ * @property {number} padding - Padding interne
+ * @property {string} bgColor - Couleur de fond
+ * @property {number} elevation - Élévation (ombre)
+ * @property {number} borderRadius - Rayon des coins
+ * @property {boolean} clipContent - Clip le contenu
+ * @property {boolean} clickableChildren - Active les clics sur les enfants
+ */
+class Card extends Component {
+  /**
+   * Crée une instance de Card
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {number} [options.padding=16] - Padding interne
+   * @param {string} [options.bgColor='#FFFFFF'] - Couleur de fond
+   * @param {number} [options.elevation=2] - Élévation (ombre)
+   * @param {number} [options.borderRadius] - Rayon des coins (auto selon platform)
+   * @param {boolean} [options.clipContent=true] - Clip le contenu
+   * @param {boolean} [options.clickableChildren=true] - Active les clics enfants
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.children = [];
+    this.padding = options.padding || 16;
+    this.bgColor = options.bgColor || '#FFFFFF';
+    this.elevation = options.elevation || 2;
+    this.borderRadius = options.borderRadius || (framework.platform === 'material' ? 4 : 12);
+    this.clipContent = options.clipContent !== false;
+    this.clickableChildren = options.clickableChildren !== false; // NOUVEAU: activer/désactiver les enfants cliquables
+  }
+
+  /**
+   * Ajoute un enfant à la carte
+   * @param {Component} child - Composant enfant
+   * @returns {Component} L'enfant ajouté
+   */
+  add(child) {
+    // Ajuster les coordonnées de l'enfant pour qu'elles soient relatives à la Card
+    child.x = child.x || 0;
+    child.y = child.y || 0;
+    this.children.push(child);
+    
+    // Marquer l'enfant comme appartenant à cette Card
+    child.parentCard = this;
+    
+    return child;
+  }
+
+  /**
+   * Dessine la carte et ses enfants
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    // Ombre
+    if (this.elevation > 0) {
+      ctx.shadowColor = 'rgba(0, 0, 0, 0.15)';
+      ctx.shadowBlur = this.elevation * 3;
+      ctx.shadowOffsetY = this.elevation;
+    }
+    
+    // Background
+    ctx.fillStyle = this.bgColor;
+    ctx.beginPath();
+    this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+    ctx.fill();
+    
+    ctx.shadowColor = 'transparent';
+    
+    // Clipping pour empêcher le contenu de déborder
+    if (this.clipContent) {
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+      ctx.clip();
+    }
+    
+    // Children - dessinés relativement à la Card
+    for (let child of this.children) {
+      if (child.visible) {
+        // Sauvegarder les coordonnées originales
+        const originalX = child.x;
+        const originalY = child.y;
+        
+        // Ajuster les coordonnées pour être relatives à la Card
+        child.x = this.x + this.padding + originalX;
+        child.y = this.y + this.padding + originalY;
+        
+        // Dessiner l'enfant
+        child.draw(ctx);
+        
+        // Restaurer les coordonnées originales
+        child.x = originalX;
+        child.y = originalY;
+      }
+    }
+    
+    ctx.restore();
+  }
+
+  /**
+   * Vérifie les clics sur les enfants
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {boolean} True si un enfant a été cliqué
+   * @private
+   */
+  checkChildClick(x, y) {
+    // Ajuster y avec le scrollOffset
+    const adjustedY = y - this.framework.scrollOffset;
+    
+    // Vérifier chaque enfant
+    for (let i = this.children.length - 1; i >= 0; i--) {
+      const child = this.children[i];
+      
+      // Calculer les coordonnées absolues de l'enfant
+      const childX = this.x + this.padding + child.x;
+      const childY = this.y + this.padding + child.y;
+      
+      // Vérifier si le clic est dans l'enfant
+      if (child.visible && 
+          adjustedY >= childY && 
+          adjustedY <= childY + child.height &&
+          x >= childX && 
+          x <= childX + child.width) {
+        
+        // Si l'enfant a un onClick ou onPress, le déclencher
+        if (child.onClick) {
+          child.onClick();
+          return true;
+        } else if (child.onPress) {
+          child.onPress(x, adjustedY);
+          return true;
+        }
+      }
+    }
+    
+    return false;
+  }
+
+  /**
+   * 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();
+  }
+  
+  /**
+   * 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 carte
+   */
+  isPointInside(x, y) {
+    return x >= this.x && 
+           x <= this.x + this.width && 
+           y >= this.y && 
+           y <= this.y + this.height;
+  }
+  
+  /**
+   * Gère le clic sur la carte
+   * @private
+   */
+  onClick() {
+    // La Card elle-même peut avoir un onClick, mais on veut aussi vérifier les enfants
+    // Cette logique est gérée dans le CanvasFramework modifié ci-dessous
+  }
+}
+
+export default Card;

package/components/Checkbox.js

@@ -0,0 +1,180 @@
+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
+ */
+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.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);
+  }
+  
+  /**
+   * 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.restore();
+    return width;
+  }
+
+  /**
+   * Gère le clic sur la checkbox
+   * @private
+   */
+  handleClick() {
+    this.checked = !this.checked;
+    if (this.onChange) this.onChange(this.checked);
+  }
+
+  /**
+   * 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;
+    
+    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();
+      }
+    } 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();
+      }
+    }
+    
+    // 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) {
+    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();
+  }
+  
+  /**
+   * 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;
+  }
+}
+
+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;