canvasframework 0.5.26 → 0.5.27

package/components/Card.js

@@ -6,13 +6,12 @@ import Component from '../core/Component.js';
  * @extends Component
  * @property {Component[]} children - Enfants
  * @property {number} padding - Padding interne
- * @property {number} gap - Espacement constant entre enfants
+ * @property {number} gap - Espacement constant entre enfants SEULEMENT
  * @property {string} direction - Direction ('column' ou 'row')
  * @property {string} align - Alignement ('start', 'center', 'end', 'stretch')
  * @property {string} bgColor - Couleur de fond
  * @property {number} borderRadius - Rayon des coins
  * @property {number} elevation - Niveau d'élévation (ombres)
- * @property {boolean} autoHeight - Ajuste automatiquement la hauteur selon le contenu
  */
 class Card extends Component {
   /**
@@ -20,25 +19,23 @@ class Card extends Component {
    * @param {CanvasFramework} framework - Framework parent
    * @param {Object} [options={}] - Options de configuration
    * @param {number} [options.padding=0] - Padding interne
-   * @param {number} [options.gap=0] - Espacement constant entre enfants
+   * @param {number} [options.gap=0] - Espacement constant entre enfants SEULEMENT
    * @param {string} [options.direction='column'] - Direction
    * @param {string} [options.align='start'] - Alignement
    * @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 || 0;
-    this.gap = options.gap || 0; // Espacement constant entre chaque enfant
+    this.gap = options.gap || 0; // Espacement UNIQUEMENT entre enfants
     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;
   }
 
   /**
@@ -82,15 +79,13 @@ class Card extends Component {
   layout() {
     if (this.children.length === 0) return;
 
-    let currentX = this.x + this.padding;
-    let currentY = this.y + this.padding;
-    
     if (this.direction === 'column') {
+      let currentY = this.y + this.padding;
+      
       for (let i = 0; i < this.children.length; i++) {
         const child = this.children[i];
         
-        // Positionner l'enfant
-        child.x = currentX;
+        // Positionner l'enfant sans tenir compte de ses marges internes
         child.y = currentY;
         
         // Gérer l'alignement horizontal
@@ -101,32 +96,28 @@ class Card extends Component {
         } else if (this.align === 'stretch') {
           child.x = this.x + this.padding;
           child.width = this.width - (this.padding * 2);
+        } else {
+          // Alignement 'start' par défaut
+          child.x = this.x + this.padding;
         }
         
         // Mettre à jour la position Y pour l'enfant suivant
-        // Toujours le même espacement (gap) entre chaque enfant
-        currentY += child.height + this.gap;
-      }
-      
-      // 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);
+        // UNIQUEMENT avec le gap spécifié, rien d'autre
+        currentY += child.height;
         
-        if (neededHeight !== this.height) {
-          this.height = neededHeight;
-          // Notifier un changement de dimensions
-          if (this.onResize) this.onResize(this.width, this.height);
+        // Ajouter le gap seulement si ce n'est pas le dernier enfant
+        if (i < this.children.length - 1) {
+          currentY += this.gap;
         }
       }
     } else {
-      // Direction 'row' (logique similaire pour l'alignement horizontal)
+      // Direction 'row'
+      let currentX = this.x + this.padding;
+      
       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') {
@@ -136,22 +127,16 @@ class Card extends Component {
         } else if (this.align === 'stretch') {
           child.y = this.y + this.padding;
           child.height = this.height - (this.padding * 2);
+        } else {
+          child.y = this.y + this.padding;
         }
         
-        // 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);
+        // Mettre à jour la position X pour l'enfant suivant
+        currentX += child.width;
         
-        if (neededWidth !== this.width) {
-          this.width = neededWidth;
-          // Notifier un changement de dimensions
-          if (this.onResize) this.onResize(this.width, this.height);
+        // Ajouter le gap seulement si ce n'est pas le dernier enfant
+        if (i < this.children.length - 1) {
+          currentX += this.gap;
         }
       }
     }
@@ -230,13 +215,6 @@ class Card extends Component {
       }
     }
     
-    // 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();
-    }
-    
     // Dessiner les enfants
     for (let child of this.children) {
       if (child.visible) child.draw(ctx);
@@ -376,6 +354,48 @@ class Card extends Component {
       this.layout();
     }
   }
+
+  /**
+   * Calcule la hauteur totale nécessaire pour contenir tous les enfants
+   * @returns {number} Hauteur totale nécessaire
+   */
+  getTotalHeight() {
+    if (this.children.length === 0) return 0;
+    
+    const totalChildrenHeight = this.children.reduce((sum, child) => sum + child.height, 0);
+    const totalGapHeight = this.gap * Math.max(0, this.children.length - 1);
+    return totalChildrenHeight + totalGapHeight + (this.padding * 2);
+  }
+
+  /**
+   * Calcule la largeur totale nécessaire pour contenir tous les enfants
+   * @returns {number} Largeur totale nécessaire
+   */
+  getTotalWidth() {
+    if (this.children.length === 0) return 0;
+    
+    const totalChildrenWidth = this.children.reduce((sum, child) => sum + child.width, 0);
+    const totalGapWidth = this.gap * Math.max(0, this.children.length - 1);
+    return totalChildrenWidth + totalGapWidth + (this.padding * 2);
+  }
+
+  /**
+   * Ajuste automatiquement la hauteur de la carte pour contenir tous les enfants
+   */
+  fitHeight() {
+    if (this.direction === 'column') {
+      this.height = this.getTotalHeight();
+    }
+  }
+
+  /**
+   * Ajuste automatiquement la largeur de la carte pour contenir tous les enfants
+   */
+  fitWidth() {
+    if (this.direction === 'row') {
+      this.width = this.getTotalWidth();
+    }
+  }
 }
 
 export default Card;

package/package.json

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