canvasframework 0.5.32 → 0.5.34

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,29 +50,23 @@ class Card extends Component {
    * @param {Component} child - Composant enfant
    * @returns {Component} L'enfant ajouté
    */
-  add(child) {
+add(child) {
     this.children.push(child);
     
-    // Stocker la position relative originale
-    const relativeX = child.x;
-    const relativeY = child.y;
-    
+    // NE PAS CONVERTIR - garder relatif
     this.childPositions.set(child, { 
-        x: relativeX, 
-        y: relativeY 
+        x: child.x, 
+        y: child.y 
     });
     
-    // CONVERTIR seulement si autoLayout est activé
     if (this.autoLayout) {
-        this.layout();  // layout() fera la conversion
-    } else {
-        // Si autoLayout est désactivé, convertir manuellement
-        child.x = this.x + relativeX;
-        child.y = this.y + relativeY;
+        this.layout();
     }
     
+    // PAS de conversion child.x = this.x + relativeX !
+    
     return child;
-  }
+}
 
   /**
    * Supprime un enfant
@@ -105,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 });
-        
-        // Mettre à jour la position Y pour l'enfant suivant
-        currentY += child.height;
+        let currentY = this.padding;
         
-        // 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];
-        
-        // 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);
-        }
-        
-        // Positionner l'enfant RELATIVEMENT à la Card
-        child.x = this.x + currentX;
-        child.y = this.y + childY;
+        // Direction 'row' - même logique
+        let currentX = this.padding;
         
-        // 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;
+        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;
+            }
         }
-      }
     }
-  }
+}
 
   /**
    * Met à jour la position de la carte et ajuste les enfants
@@ -278,28 +257,57 @@ 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
     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
-    for (let child of this.children) {
-      if (child.visible) child.draw(ctx);
+    // 🔴 DESSINER avec translate POUR LE WEB, sans translate POUR CAPACITOR
+    const isCapacitor = typeof window !== 'undefined' && window.Capacitor;
+    
+    if (isCapacitor) {
+        // Capacitor : positions absolues directes
+        for (let child of this.children) {
+            if (child.visible) {
+                // Sauvegarder position relative
+                const relX = child.x;
+                const relY = child.y;
+                
+                // Convertir temporairement en absolu pour le dessin
+                child.x = this.x + relX;
+                child.y = this.y + relY;
+                
+                child.draw(ctx);
+                
+                // Restaurer position relative
+                child.x = relX;
+                child.y = relY;
+            }
+        }
+    } else {
+        // Web : translate
+        ctx.save();
+        ctx.translate(this.x, this.y);
+        
+        for (let child of this.children) {
+            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.32",
+  "version": "0.5.34",
   "repository": {
     "type": "git",
     "url": "https://github.com/beyons/CanvasFramework.git"