canvasframework 0.5.24 → 0.5.26

package/components/Card.js

@@ -1,46 +1,44 @@
 import Component from '../core/Component.js';
 
 /**
- * Carte avec système de layout, ombre et bordures arrondies
+ * Container avec système de layout et effet d'élévation
  * @class
  * @extends Component
  * @property {Component[]} children - Enfants
  * @property {number} padding - Padding interne
- * @property {number} gap - Espacement entre enfants
+ * @property {number} gap - Espacement constant entre enfants
  * @property {string} direction - Direction ('column' ou 'row')
- * @property {string} align - Alignement ('start', 'center', 'end')
+ * @property {string} align - Alignement ('start', 'center', 'end', 'stretch')
  * @property {string} bgColor - Couleur de fond
  * @property {number} borderRadius - Rayon des coins
- * @property {number} elevation - Élévation (ombre)
- * @property {boolean} clipContent - Clip le contenu aux bordures
+ * @property {number} elevation - Niveau d'élévation (ombres)
+ * @property {boolean} autoHeight - Ajuste automatiquement la hauteur selon le contenu
  */
 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 {number} [options.gap=0] - Espacement entre enfants
+   * @param {number} [options.padding=0] - Padding interne
+   * @param {number} [options.gap=0] - Espacement constant entre enfants
    * @param {string} [options.direction='column'] - Direction
    * @param {string} [options.align='start'] - Alignement
-   * @param {string} [options.bgColor='#FFFFFF'] - Couleur de fond
-   * @param {number} [options.borderRadius] - Rayon des coins (auto selon platform)
-   * @param {number} [options.elevation=2] - Élévation (ombre)
-   * @param {boolean} [options.clipContent=true] - Clip le contenu
+   * @param {string} [options.bgColor='transparent'] - Couleur de fond
+   * @param {number} [options.borderRadius=0] - Rayon des coins
+   * @param {number} [options.elevation=0] - Niveau d'élévation (0-5)
+   * @param {boolean} [options.autoHeight=false] - Ajuste automatiquement la hauteur
    */
   constructor(framework, options = {}) {
     super(framework, options);
     this.children = [];
-    this.padding = options.padding !== undefined ? options.padding : 16;
-    this.gap = options.gap || 0;
-    this.direction = options.direction || 'column'; // 'column' ou 'row'
-    this.align = options.align || 'start'; // 'start', 'center', 'end'
-    this.bgColor = options.bgColor || '#FFFFFF';
-    this.borderRadius = options.borderRadius !== undefined 
-      ? options.borderRadius 
-      : (framework.platform === 'material' ? 4 : 12);
-    this.elevation = options.elevation !== undefined ? options.elevation : 2;
-    this.clipContent = options.clipContent !== false;
+    this.padding = options.padding || 0;
+    this.gap = options.gap || 0; // Espacement constant entre chaque enfant
+    this.direction = options.direction || 'column';
+    this.align = options.align || 'start';
+    this.bgColor = options.bgColor || 'transparent';
+    this.borderRadius = options.borderRadius || 0;
+    this.elevation = options.elevation || 0;
+    this.autoHeight = options.autoHeight || false;
   }
 
   /**
@@ -55,34 +53,157 @@ class Card extends Component {
   }
 
   /**
-   * Organise les enfants selon le layout
+   * Supprime un enfant
+   * @param {Component} child - Composant enfant à supprimer
+   * @returns {boolean} True si l'enfant a été supprimé
+   */
+  remove(child) {
+    const index = this.children.indexOf(child);
+    if (index > -1) {
+      this.children.splice(index, 1);
+      this.layout();
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Supprime tous les enfants
+   */
+  clear() {
+    this.children = [];
+    this.layout();
+  }
+
+  /**
+   * Organise les enfants selon le layout avec espacement constant
    * @private
    */
   layout() {
-    let currentX = this.padding;
-    let currentY = this.padding;
+    if (this.children.length === 0) return;
+
+    let currentX = this.x + this.padding;
+    let currentY = this.y + this.padding;
     
-    for (let child of this.children) {
-      if (this.direction === 'column') {
+    if (this.direction === 'column') {
+      for (let i = 0; i < this.children.length; i++) {
+        const child = this.children[i];
+        
+        // Positionner l'enfant
         child.x = currentX;
         child.y = currentY;
+        
+        // Gérer l'alignement horizontal
         if (this.align === 'center') {
-          child.x = (this.width - child.width) / 2;
+          child.x = this.x + (this.width - child.width) / 2;
         } else if (this.align === 'end') {
-          child.x = this.width - child.width - this.padding;
+          child.x = this.x + this.width - child.width - this.padding;
+        } else if (this.align === 'stretch') {
+          child.x = this.x + this.padding;
+          child.width = this.width - (this.padding * 2);
         }
+        
+        // Mettre à jour la position Y pour l'enfant suivant
+        // Toujours le même espacement (gap) entre chaque enfant
         currentY += child.height + this.gap;
-      } else {
+      }
+      
+      // Ajuster la hauteur automatiquement si autoHeight est activé
+      if (this.autoHeight) {
+        const totalChildrenHeight = this.children.reduce((sum, child) => sum + child.height, 0);
+        const totalGapHeight = this.gap * Math.max(0, this.children.length - 1);
+        const neededHeight = totalChildrenHeight + totalGapHeight + (this.padding * 2);
+        
+        if (neededHeight !== this.height) {
+          this.height = neededHeight;
+          // Notifier un changement de dimensions
+          if (this.onResize) this.onResize(this.width, this.height);
+        }
+      }
+    } else {
+      // Direction 'row' (logique similaire pour l'alignement horizontal)
+      for (let i = 0; i < this.children.length; i++) {
+        const child = this.children[i];
+        
         child.x = currentX;
         child.y = currentY;
+        
+        // Gérer l'alignement vertical
         if (this.align === 'center') {
-          child.y = (this.height - child.height) / 2;
+          child.y = this.y + (this.height - child.height) / 2;
         } else if (this.align === 'end') {
-          child.y = this.height - child.height - this.padding;
+          child.y = this.y + this.height - child.height - this.padding;
+        } else if (this.align === 'stretch') {
+          child.y = this.y + this.padding;
+          child.height = this.height - (this.padding * 2);
         }
+        
+        // Espacement constant entre chaque enfant
         currentX += child.width + this.gap;
       }
+      
+      // Ajuster la largeur automatiquement si autoHeight est activé (pour row)
+      if (this.autoHeight) {
+        const totalChildrenWidth = this.children.reduce((sum, child) => sum + child.width, 0);
+        const totalGapWidth = this.gap * Math.max(0, this.children.length - 1);
+        const neededWidth = totalChildrenWidth + totalGapWidth + (this.padding * 2);
+        
+        if (neededWidth !== this.width) {
+          this.width = neededWidth;
+          // Notifier un changement de dimensions
+          if (this.onResize) this.onResize(this.width, this.height);
+        }
+      }
+    }
+  }
+
+  /**
+   * Génère les paramètres d'ombre selon le niveau d'élévation
+   * @param {number} elevation - Niveau d'élévation (0-5)
+   * @returns {Object} Configuration de l'ombre
+   * @private
+   */
+  getShadowConfig(elevation) {
+    const shadows = [
+      { blur: 0, offsetY: 0, color: 'transparent', spread: 0 },
+      { blur: 2, offsetY: 1, color: 'rgba(0,0,0,0.12)', spread: 0 },
+      { blur: 3, offsetY: 1, color: 'rgba(0,0,0,0.14)', spread: 0 },
+      { blur: 4, offsetY: 2, color: 'rgba(0,0,0,0.16)', spread: 0 },
+      { blur: 6, offsetY: 3, color: 'rgba(0,0,0,0.18)', spread: 0 },
+      { blur: 8, offsetY: 4, color: 'rgba(0,0,0,0.20)', spread: 0 },
+    ];
+    
+    return shadows[Math.min(elevation, shadows.length - 1)];
+  }
+
+  /**
+   * Dessine l'effet d'ombre selon l'élévation
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   * @private
+   */
+  drawShadow(ctx) {
+    if (this.elevation <= 0) return;
+    
+    const shadow = this.getShadowConfig(this.elevation);
+    
+    ctx.save();
+    
+    ctx.shadowColor = shadow.color;
+    ctx.shadowBlur = shadow.blur;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = shadow.offsetY;
+    
+    if (this.borderRadius > 0) {
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y + shadow.offsetY, this.width, this.height, this.borderRadius);
+      ctx.fillStyle = this.bgColor === 'transparent' ? 'white' : this.bgColor;
+      ctx.fill();
+    } else {
+      ctx.fillStyle = this.bgColor === 'transparent' ? 'white' : this.bgColor;
+      ctx.fillRect(this.x, this.y + shadow.offsetY, this.width, this.height);
     }
+    
+    ctx.restore();
   }
 
   /**
@@ -92,14 +213,12 @@ class Card extends Component {
   draw(ctx) {
     ctx.save();
     
-    // Ombre (elevation)
+    // Dessiner l'ombre si elevation > 0
     if (this.elevation > 0) {
-      ctx.shadowColor = 'rgba(0, 0, 0, 0.15)';
-      ctx.shadowBlur = this.elevation * 3;
-      ctx.shadowOffsetY = this.elevation;
+      this.drawShadow(ctx);
     }
     
-    // Background
+    // Dessiner le fond de la carte
     if (this.bgColor !== 'transparent') {
       ctx.fillStyle = this.bgColor;
       if (this.borderRadius > 0) {
@@ -111,30 +230,19 @@ class Card extends Component {
       }
     }
     
-    // Réinitialiser l'ombre
-    ctx.shadowColor = 'transparent';
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetY = 0;
-    
-    // Clipping (optionnel)
-    if (this.clipContent && this.borderRadius > 0) {
+    // Appliquer le clipping pour le borderRadius (empêche les débordements)
+    if (this.borderRadius > 0) {
       ctx.beginPath();
       this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
       ctx.clip();
     }
     
-    // Children - coordonnées relatives à la Card
-    ctx.save();
-    ctx.translate(this.x, this.y);
-    
+    // Dessiner les enfants
     for (let child of this.children) {
-      if (child.visible) {
-        child.draw(ctx);
-      }
+      if (child.visible) child.draw(ctx);
     }
     
     ctx.restore();
-    ctx.restore();
   }
 
   /**
@@ -148,6 +256,11 @@ class Card extends Component {
    * @private
    */
   roundRect(ctx, x, y, width, height, radius) {
+    if (radius === 0) {
+      ctx.rect(x, y, width, height);
+      return;
+    }
+    
     ctx.beginPath();
     ctx.moveTo(x + radius, y);
     ctx.lineTo(x + width - radius, y);
@@ -165,7 +278,7 @@ class Card extends Component {
    * 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
+   * @returns {boolean} True si le point est dans la vue
    */
   isPointInside(x, y) {
     return x >= this.x && 
@@ -173,6 +286,96 @@ class Card extends Component {
            y >= this.y && 
            y <= this.y + this.height;
   }
+
+  /**
+   * Définit le niveau d'élévation
+   * @param {number} elevation - Nouveau niveau d'élévation (0-5)
+   */
+  setElevation(elevation) {
+    this.elevation = Math.max(0, Math.min(elevation, 5));
+  }
+
+  /**
+   * Augmente le niveau d'élévation
+   */
+  raise() {
+    this.setElevation(this.elevation + 1);
+  }
+
+  /**
+   * Réduit le niveau d'élévation
+   */
+  lower() {
+    this.setElevation(this.elevation - 1);
+  }
+
+  /**
+   * Met à jour la position de la carte (surcharge pour recalculer le layout)
+   * @param {number} x - Nouvelle position X
+   * @param {number} y - Nouvelle position Y
+   */
+  setPosition(x, y) {
+    const deltaX = x - this.x;
+    const deltaY = y - this.y;
+    
+    super.setPosition(x, y);
+    
+    // Déplacer tous les enfants avec la carte
+    for (let child of this.children) {
+      child.x += deltaX;
+      child.y += deltaY;
+    }
+  }
+
+  /**
+   * Met à jour les dimensions (surcharge pour recalculer le layout)
+   * @param {number} width - Nouvelle largeur
+   * @param {number} height - Nouvelle hauteur
+   */
+  setSize(width, height) {
+    super.setSize(width, height);
+    this.layout();
+  }
+
+  /**
+   * Définit l'espacement entre enfants
+   * @param {number} gap - Nouvel espacement
+   */
+  setGap(gap) {
+    this.gap = Math.max(0, gap);
+    this.layout();
+  }
+
+  /**
+   * Définit le padding
+   * @param {number} padding - Nouveau padding
+   */
+  setPadding(padding) {
+    this.padding = Math.max(0, padding);
+    this.layout();
+  }
+
+  /**
+   * Définit la direction du layout
+   * @param {string} direction - 'column' ou 'row'
+   */
+  setDirection(direction) {
+    if (direction === 'column' || direction === 'row') {
+      this.direction = direction;
+      this.layout();
+    }
+  }
+
+  /**
+   * Définit l'alignement
+   * @param {string} align - 'start', 'center', 'end' ou 'stretch'
+   */
+  setAlign(align) {
+    if (['start', 'center', 'end', 'stretch'].includes(align)) {
+      this.align = align;
+      this.layout();
+    }
+  }
 }
 
 export default Card;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasframework",
-  "version": "0.5.24",
+  "version": "0.5.26",
   "repository": {
     "type": "git",
     "url": "https://github.com/beyons/CanvasFramework.git"