canvasframework 0.5.31 → 0.5.33

package/components/Card.js

@@ -39,7 +39,8 @@ class Card extends Component {
     this.borderRadius = options.borderRadius || 0;
     this.elevation = options.elevation || 0;
     this.autoLayout = options.autoLayout !== undefined ? options.autoLayout : true;
-    
+    // 🔴 AJOUTER CETTE LIGNE
+    this.clickableChildren = true;
     // Stocker les positions relatives des enfants
     this.childPositions = new Map();
   }
@@ -49,27 +50,23 @@ class Card extends Component {
    * @param {Component} child - Composant enfant
    * @returns {Component} L'enfant ajouté
    */
-  add(child) {
+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
+    // NE PAS CONVERTIR - garder relatif
     this.childPositions.set(child, { 
-      x: child.x - this.x, 
-      y: child.y - this.y 
+        x: child.x, 
+        y: child.y 
     });
     
-    // Si autoLayout est activé, organiser automatiquement
     if (this.autoLayout) {
-      this.layout();
+        this.layout();
     }
     
+    // PAS de conversion child.x = this.x + relativeX !
+    
     return child;
-  }
+}
 
   /**
    * Supprime un enfant
@@ -103,72 +100,56 @@ class Card extends Component {
     if (this.children.length === 0 || !this.autoLayout) return;
 
     if (this.direction === 'column') {
-      let currentY = this.padding;
-      
-      for (let i = 0; i < this.children.length; i++) {
-        const child = this.children[i];
-        
-        // Calculer la position X selon l'alignement
-        let childX = this.padding;
-        if (this.align === 'center') {
-          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
-        child.x = this.x + childX;
-        child.y = this.y + currentY;
-        
-        // Stocker la position relative
-        this.childPositions.set(child, { x: childX, y: currentY });
+        let currentY = this.padding;
         
-        // Mettre à jour la position Y pour l'enfant suivant
-        currentY += child.height;
-        
-        // Ajouter le gap seulement si ce n'est pas le dernier enfant
-        if (i < this.children.length - 1) {
-          currentY += this.gap;
+        for (let i = 0; i < this.children.length; i++) {
+            const child = this.children[i];
+            
+            let childX = this.padding;
+            if (this.align === 'center') {
+                childX = (this.width - child.width) / 2;
+            } else if (this.align === 'end') {
+                childX = this.width - child.width - this.padding;
+            }
+            
+            // GARDER RELATIF (ne pas ajouter this.x et this.y)
+            child.x = childX;
+            child.y = currentY;
+            
+            this.childPositions.set(child, { x: childX, y: currentY });
+            
+            currentY += child.height;
+            if (i < this.children.length - 1) {
+                currentY += this.gap;
+            }
         }
-      }
     } else {
-      // Direction 'row'
-      let currentX = this.padding;
-      
-      for (let i = 0; i < this.children.length; i++) {
-        const child = this.children[i];
+        // Direction 'row' - même logique
+        let currentX = this.padding;
         
-        // Calculer la position Y selon l'alignement
-        let childY = this.padding;
-        if (this.align === 'center') {
-          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);
+        for (let i = 0; i < this.children.length; i++) {
+            const child = this.children[i];
+            
+            let childY = this.padding;
+            if (this.align === 'center') {
+                childY = (this.height - child.height) / 2;
+            } else if (this.align === 'end') {
+                childY = this.height - child.height - this.padding;
+            }
+            
+            // GARDER RELATIF
+            child.x = currentX;
+            child.y = childY;
+            
+            this.childPositions.set(child, { x: currentX, y: childY });
+            
+            currentX += child.width;
+            if (i < this.children.length - 1) {
+                currentX += this.gap;
+            }
         }
-        
-        // Positionner l'enfant RELATIVEMENT à la Card
-        child.x = this.x + currentX;
-        child.y = this.y + childY;
-        
-        // Stocker la position relative
-        this.childPositions.set(child, { x: currentX, y: childY });
-        
-        // 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;
-        }
-      }
     }
-  }
+}
 
   /**
    * Met à jour la position de la carte et ajuste les enfants
@@ -276,28 +257,32 @@ class Card extends Component {
     
     // Dessiner l'ombre si elevation > 0
     if (this.elevation > 0) {
-      this.drawShadow(ctx);
+        this.drawShadow(ctx);
     }
     
-    // Dessiner le fond de la carte
+    // Dessiner le fond de la carte (en position absolue)
     if (this.bgColor !== 'transparent') {
-      ctx.fillStyle = this.bgColor;
-      if (this.borderRadius > 0) {
-        ctx.beginPath();
-        this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
-        ctx.fill();
-      } else {
-        ctx.fillRect(this.x, this.y, this.width, this.height);
-      }
+        ctx.fillStyle = this.bgColor;
+        if (this.borderRadius > 0) {
+            ctx.beginPath();
+            this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+            ctx.fill();
+        } else {
+            ctx.fillRect(this.x, this.y, this.width, this.height);
+        }
     }
     
-    // Dessiner les enfants
+    // 🔴 DESSINER LES ENFANTS AVEC TRANSLATE (coordonnées relatives)
+    ctx.save();
+    ctx.translate(this.x, this.y);
+    
     for (let child of this.children) {
-      if (child.visible) child.draw(ctx);
+        if (child.visible) child.draw(ctx);
     }
     
     ctx.restore();
-  }
+    ctx.restore();
+}
 
   /**
    * Dessine un rectangle avec coins arrondis

package/package.json

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