canvasframework 0.5.25 → 0.5.27

package/components/Card.js

@@ -1,13 +1,14 @@
 import Component from '../core/Component.js';
+
 /**
  * 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 SEULEMENT
  * @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 - Niveau d'élévation (ombres)
@@ -18,7 +19,7 @@ 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 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
@@ -29,12 +30,12 @@ class Card extends Component {
     super(framework, options);
     this.children = [];
     this.padding = options.padding || 0;
-    this.gap = options.gap || 0;
+    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; // Nouvelle propriété
+    this.elevation = options.elevation || 0;
   }
 
   /**
@@ -49,32 +50,94 @@ 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.x + this.padding;
-    let currentY = this.y + this.padding;
-    
-    for (let child of this.children) {
-      if (this.direction === 'column') {
-        child.x = currentX;
+    if (this.children.length === 0) return;
+
+    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 sans tenir compte de ses marges internes
         child.y = currentY;
+        
+        // Gérer l'alignement horizontal
         if (this.align === 'center') {
           child.x = this.x + (this.width - child.width) / 2;
         } else if (this.align === 'end') {
           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);
+        } else {
+          // Alignement 'start' par défaut
+          child.x = this.x + this.padding;
         }
-        currentY += child.height + this.gap;
-      } else {
+        
+        // Mettre à jour la position Y pour l'enfant suivant
+        // UNIQUEMENT avec le gap spécifié, rien d'autre
+        currentY += child.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'
+      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') {
           child.y = this.y + (this.height - child.height) / 2;
         } else if (this.align === 'end') {
           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);
+        } else {
+          child.y = this.y + this.padding;
+        }
+        
+        // Mettre à jour la position X pour l'enfant suivant
+        currentX += child.width;
+        
+        // Ajouter le gap seulement si ce n'est pas le dernier enfant
+        if (i < this.children.length - 1) {
+          currentX += this.gap;
         }
-        currentX += child.width + this.gap;
       }
     }
   }
@@ -87,12 +150,12 @@ class Card extends Component {
    */
   getShadowConfig(elevation) {
     const shadows = [
-      { blur: 0, offsetY: 0, color: 'transparent', spread: 0 }, // 0 - pas d'ombre
-      { blur: 2, offsetY: 1, color: 'rgba(0,0,0,0.12)', spread: 0 }, // 1 - léger
-      { blur: 3, offsetY: 1, color: 'rgba(0,0,0,0.14)', spread: 0 }, // 2 - léger
-      { blur: 4, offsetY: 2, color: 'rgba(0,0,0,0.16)', spread: 0 }, // 3 - moyen
-      { blur: 6, offsetY: 3, color: 'rgba(0,0,0,0.18)', spread: 0 }, // 4 - moyen
-      { blur: 8, offsetY: 4, color: 'rgba(0,0,0,0.20)', spread: 0 }, // 5 - fort
+      { 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)];
@@ -108,16 +171,13 @@ class Card extends Component {
     
     const shadow = this.getShadowConfig(this.elevation);
     
-    // Sauvegarder l'état du contexte
     ctx.save();
     
-    // Configurer l'ombre
     ctx.shadowColor = shadow.color;
     ctx.shadowBlur = shadow.blur;
     ctx.shadowOffsetX = 0;
     ctx.shadowOffsetY = shadow.offsetY;
     
-    // Dessiner un rectangle pour l'ombre
     if (this.borderRadius > 0) {
       ctx.beginPath();
       this.roundRect(ctx, this.x, this.y + shadow.offsetY, this.width, this.height, this.borderRadius);
@@ -174,6 +234,12 @@ 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);
     ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
@@ -183,6 +249,7 @@ class Card extends Component {
     ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
     ctx.lineTo(x, y + radius);
     ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
   }
 
   /**
@@ -219,6 +286,116 @@ class Card extends Component {
   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();
+    }
+  }
+
+  /**
+   * 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.25",
+  "version": "0.5.27",
   "repository": {
     "type": "git",
     "url": "https://github.com/beyons/CanvasFramework.git"