canvasframework 0.5.28 → 0.5.29

package/components/Card.js

@@ -8,12 +8,11 @@ import Component from '../core/Component.js';
  * @property {number} padding - Padding interne
  * @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 - Niveau d'élévation (ombres)
  * @property {boolean} autoLayout - Active le layout automatique
- * @property {Map} childPositions - Positions relatives des enfants
  */
 class Card extends Component {
   /**
@@ -46,21 +45,27 @@ class Card extends Component {
   }
 
   /**
-   * Ajoute un enfant
+   * Ajoute un enfant (position relative convertie en absolue)
    * @param {Component} child - Composant enfant
    * @returns {Component} L'enfant ajouté
    */
   add(child) {
     this.children.push(child);
     
+    // CONVERTIR les positions relatives en positions absolues
+    // Les x, y passés sont relatifs à la Card
+    child.x = this.x + child.x;
+    child.y = this.y + child.y;
+    
+    // Stocker la position relative originale
+    this.childPositions.set(child, { 
+      x: child.x - this.x, 
+      y: child.y - this.y 
+    });
+    
     // Si autoLayout est activé, organiser automatiquement
     if (this.autoLayout) {
       this.layout();
-    } else {
-      // En mode manuel, calculer et stocker la position relative
-      const relativeX = child.x - this.x;
-      const relativeY = child.y - this.y;
-      this.childPositions.set(child, { x: relativeX, y: relativeY });
     }
     
     return child;
@@ -88,7 +93,6 @@ class Card extends Component {
   clear() {
     this.children = [];
     this.childPositions.clear();
-    if (this.autoLayout) this.layout();
   }
 
   /**
@@ -110,6 +114,9 @@ class Card extends Component {
           childX = (this.width - child.width) / 2;
         } else if (this.align === 'end') {
           childX = this.width - child.width - this.padding;
+        } else if (this.align === 'stretch') {
+          childX = this.padding;
+          child.width = this.width - (this.padding * 2);
         }
         
         // Positionner l'enfant RELATIVEMENT à la Card
@@ -140,6 +147,9 @@ class Card extends Component {
           childY = (this.height - child.height) / 2;
         } else if (this.align === 'end') {
           childY = this.height - child.height - this.padding;
+        } else if (this.align === 'stretch') {
+          childY = this.padding;
+          child.height = this.height - (this.padding * 2);
         }
         
         // Positionner l'enfant RELATIVEMENT à la Card
@@ -281,13 +291,6 @@ class Card extends Component {
       }
     }
     
-    // Appliquer le clipping si borderRadius > 0
-    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);
@@ -391,10 +394,10 @@ class Card extends Component {
 
   /**
    * Définit l'alignement
-   * @param {string} align - 'start', 'center', 'end'
+   * @param {string} align - 'start', 'center', 'end' ou 'stretch'
    */
   setAlign(align) {
-    if (['start', 'center', 'end'].includes(align)) {
+    if (['start', 'center', 'end', 'stretch'].includes(align)) {
       this.align = align;
       if (this.autoLayout) this.layout();
     }
@@ -452,11 +455,8 @@ class Card extends Component {
    * Ajuste automatiquement les dimensions de la carte pour contenir tous les enfants
    */
   fitSize() {
-    if (this.direction === 'column') {
-      this.height = this.getTotalHeight();
-    } else if (this.direction === 'row') {
-      this.width = this.getTotalWidth();
-    }
+    this.fitWidth();
+    this.fitHeight();
   }
 
   /**

package/package.json

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