canvasframework 0.5.34 → 0.5.36

package/components/Card.js

@@ -39,34 +39,52 @@ 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
+    
+    // 🔴 IMPORTANT : Activer la gestion des clics pour les enfants
     this.clickableChildren = true;
+    
+    // 🔴 Détecter la plateforme
+    this.isCapacitor = typeof window !== 'undefined' && (window.Capacitor || window.cordova);
+    
     // Stocker les positions relatives des enfants
     this.childPositions = new Map();
   }
 
   /**
-   * Ajoute un enfant (position relative convertie en absolue)
+   * Ajoute un enfant
    * @param {Component} child - Composant enfant
    * @returns {Component} L'enfant ajouté
    */
-add(child) {
+  add(child) {
     this.children.push(child);
     
-    // NE PAS CONVERTIR - garder relatif
-    this.childPositions.set(child, { 
+    if (this.isCapacitor) {
+      // CAPACITOR : Convertir en positions absolues
+      const relativeX = child.x;
+      const relativeY = child.y;
+      
+      child.x = this.x + relativeX;
+      child.y = this.y + relativeY;
+      
+      this.childPositions.set(child, { 
+        x: relativeX, 
+        y: relativeY 
+      });
+    } else {
+      // WEB : Garder les positions relatives
+      this.childPositions.set(child, { 
         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
@@ -100,56 +118,84 @@ add(child) {
     if (this.children.length === 0 || !this.autoLayout) return;
 
     if (this.direction === 'column') {
-        let currentY = this.padding;
+      let currentY = this.padding;
+      
+      for (let i = 0; i < this.children.length; i++) {
+        const child = this.children[i];
         
-        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;
-            }
+        // 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);
         }
+        
+        if (this.isCapacitor) {
+          // CAPACITOR : Positions absolues
+          child.x = this.x + childX;
+          child.y = this.y + currentY;
+        } else {
+          // WEB : Positions relatives
+          child.x = childX;
+          child.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;
+        
+        // Ajouter le gap seulement si ce n'est pas le dernier enfant
+        if (i < this.children.length - 1) {
+          currentY += this.gap;
+        }
+      }
     } else {
-        // Direction 'row' - même logique
-        let currentX = this.padding;
+      // 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);
+        }
+        
+        if (this.isCapacitor) {
+          // CAPACITOR : Positions absolues
+          child.x = this.x + currentX;
+          child.y = this.y + childY;
+        } else {
+          // WEB : Positions relatives
+          child.x = currentX;
+          child.y = childY;
+        }
+        
+        // Stocker la position relative
+        this.childPositions.set(child, { x: currentX, y: childY });
         
-        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;
-            }
+        // 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
@@ -157,15 +203,20 @@ add(child) {
    * @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;
+    if (this.isCapacitor) {
+      // CAPACITOR : Déplacer les enfants avec la carte
+      const deltaX = x - this.x;
+      const deltaY = y - this.y;
+      
+      super.setPosition(x, y);
+      
+      for (let child of this.children) {
+        child.x += deltaX;
+        child.y += deltaY;
+      }
+    } else {
+      // WEB : Les enfants sont en relatif, pas besoin de les déplacer
+      super.setPosition(x, y);
     }
   }
 
@@ -177,8 +228,13 @@ add(child) {
    */
   setChildPosition(child, relativeX, relativeY) {
     if (this.children.includes(child)) {
-      child.x = this.x + relativeX;
-      child.y = this.y + relativeY;
+      if (this.isCapacitor) {
+        child.x = this.x + relativeX;
+        child.y = this.y + relativeY;
+      } else {
+        child.x = relativeX;
+        child.y = relativeY;
+      }
       this.childPositions.set(child, { x: relativeX, y: relativeY });
     }
   }
@@ -257,57 +313,41 @@ add(child) {
     
     // 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 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;
-            }
-        }
+    // Dessiner les enfants
+    if (this.isCapacitor) {
+      // CAPACITOR : Dessiner directement (positions absolues)
+      for (let child of this.children) {
+        if (child.visible) child.draw(ctx);
+      }
     } 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();
+      // WEB : Dessiner avec translate (positions relatives)
+      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.34",
+  "version": "0.5.36",
   "repository": {
     "type": "git",
     "url": "https://github.com/beyons/CanvasFramework.git"