canvasframework 0.5.26 → 0.5.28

package/components/Card.js

@@ -8,11 +8,12 @@ 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', 'stretch')
+ * @property {string} align - Alignement ('start', 'center', 'end')
  * @property {string} bgColor - Couleur de fond
  * @property {number} borderRadius - Rayon des coins
  * @property {number} elevation - Niveau d'élévation (ombres)
- * @property {boolean} autoHeight - Ajuste automatiquement la hauteur selon le contenu
+ * @property {boolean} autoLayout - Active le layout automatique
+ * @property {Map} childPositions - Positions relatives des enfants
  */
 class Card extends Component {
   /**
@@ -26,19 +27,22 @@ class Card extends Component {
    * @param {string} [options.bgColor='transparent'] - Couleur de fond
    * @param {number} [options.borderRadius=0] - Rayon des coins
    * @param {number} [options.elevation=0] - Niveau d'élévation (0-5)
-   * @param {boolean} [options.autoHeight=false] - Ajuste automatiquement la hauteur
+   * @param {boolean} [options.autoLayout=true] - Active le layout automatique
    */
   constructor(framework, options = {}) {
     super(framework, options);
     this.children = [];
     this.padding = options.padding || 0;
-    this.gap = options.gap || 0; // Espacement constant entre chaque enfant
+    this.gap = options.gap || 0;
     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;
-    this.autoHeight = options.autoHeight || false;
+    this.autoLayout = options.autoLayout !== undefined ? options.autoLayout : true;
+    
+    // Stocker les positions relatives des enfants
+    this.childPositions = new Map();
   }
 
   /**
@@ -48,7 +52,17 @@ class Card extends Component {
    */
   add(child) {
     this.children.push(child);
-    this.layout();
+    
+    // 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;
   }
 
@@ -61,7 +75,8 @@ class Card extends Component {
     const index = this.children.indexOf(child);
     if (index > -1) {
       this.children.splice(index, 1);
-      this.layout();
+      this.childPositions.delete(child);
+      if (this.autoLayout) this.layout();
       return true;
     }
     return false;
@@ -72,91 +87,127 @@ class Card extends Component {
    */
   clear() {
     this.children = [];
-    this.layout();
+    this.childPositions.clear();
+    if (this.autoLayout) this.layout();
   }
 
   /**
-   * Organise les enfants selon le layout avec espacement constant
+   * Organise les enfants selon le layout
    * @private
    */
   layout() {
-    if (this.children.length === 0) return;
+    if (this.children.length === 0 || !this.autoLayout) return;
 
-    let currentX = this.x + this.padding;
-    let currentY = this.y + this.padding;
-    
     if (this.direction === 'column') {
+      let currentY = this.padding;
+      
       for (let i = 0; i < this.children.length; i++) {
         const child = this.children[i];
         
-        // Positionner l'enfant
-        child.x = currentX;
-        child.y = currentY;
-        
-        // Gérer l'alignement horizontal
+        // Calculer la position X selon l'alignement
+        let childX = this.padding;
         if (this.align === 'center') {
-          child.x = this.x + (this.width - child.width) / 2;
+          childX = (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);
+          childX = this.width - child.width - this.padding;
         }
         
+        // 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
-        // Toujours le même espacement (gap) entre chaque enfant
-        currentY += child.height + this.gap;
-      }
-      
-      // Ajuster la hauteur automatiquement si autoHeight est activé
-      if (this.autoHeight) {
-        const totalChildrenHeight = this.children.reduce((sum, child) => sum + child.height, 0);
-        const totalGapHeight = this.gap * Math.max(0, this.children.length - 1);
-        const neededHeight = totalChildrenHeight + totalGapHeight + (this.padding * 2);
+        currentY += child.height;
         
-        if (neededHeight !== this.height) {
-          this.height = neededHeight;
-          // Notifier un changement de dimensions
-          if (this.onResize) this.onResize(this.width, this.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' (logique similaire pour l'alignement horizontal)
+      // Direction 'row'
+      let currentX = 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
+        // Calculer la position Y selon l'alignement
+        let childY = this.padding;
         if (this.align === 'center') {
-          child.y = this.y + (this.height - child.height) / 2;
+          childY = (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);
+          childY = this.height - child.height - this.padding;
         }
         
-        // Espacement constant entre chaque enfant
-        currentX += child.width + this.gap;
-      }
-      
-      // Ajuster la largeur automatiquement si autoHeight est activé (pour row)
-      if (this.autoHeight) {
-        const totalChildrenWidth = this.children.reduce((sum, child) => sum + child.width, 0);
-        const totalGapWidth = this.gap * Math.max(0, this.children.length - 1);
-        const neededWidth = totalChildrenWidth + totalGapWidth + (this.padding * 2);
+        // Positionner l'enfant RELATIVEMENT à la Card
+        child.x = this.x + currentX;
+        child.y = this.y + childY;
         
-        if (neededWidth !== this.width) {
-          this.width = neededWidth;
-          // Notifier un changement de dimensions
-          if (this.onResize) this.onResize(this.width, this.height);
+        // 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
+   * @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;
+    }
+  }
+
+  /**
+   * Définit la position d'un enfant dans le système de coordonnées de la Card
+   * @param {Component} child - L'enfant à positionner
+   * @param {number} relativeX - Position X relative à la Card
+   * @param {number} relativeY - Position Y relative à la Card
+   */
+  setChildPosition(child, relativeX, relativeY) {
+    if (this.children.includes(child)) {
+      child.x = this.x + relativeX;
+      child.y = this.y + relativeY;
+      this.childPositions.set(child, { x: relativeX, y: relativeY });
+    }
+  }
+
+  /**
+   * Active/désactive le layout automatique
+   * @param {boolean} enabled - True pour activer le layout automatique
+   */
+  setAutoLayout(enabled) {
+    this.autoLayout = enabled;
+    if (enabled) this.layout();
+  }
+
+  /**
+   * Force un recalcul du layout
+   */
+  updateLayout() {
+    this.layout();
+  }
+
   /**
    * Génère les paramètres d'ombre selon le niveau d'élévation
    * @param {number} elevation - Niveau d'élévation (0-5)
@@ -230,7 +281,7 @@ class Card extends Component {
       }
     }
     
-    // Appliquer le clipping pour le borderRadius (empêche les débordements)
+    // 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);
@@ -309,41 +360,13 @@ class Card extends Component {
     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();
+    if (this.autoLayout) this.layout();
   }
 
   /**
@@ -352,7 +375,7 @@ class Card extends Component {
    */
   setPadding(padding) {
     this.padding = Math.max(0, padding);
-    this.layout();
+    if (this.autoLayout) this.layout();
   }
 
   /**
@@ -362,20 +385,98 @@ class Card extends Component {
   setDirection(direction) {
     if (direction === 'column' || direction === 'row') {
       this.direction = direction;
-      this.layout();
+      if (this.autoLayout) this.layout();
     }
   }
 
   /**
    * Définit l'alignement
-   * @param {string} align - 'start', 'center', 'end' ou 'stretch'
+   * @param {string} align - 'start', 'center', 'end'
    */
   setAlign(align) {
-    if (['start', 'center', 'end', 'stretch'].includes(align)) {
+    if (['start', 'center', 'end'].includes(align)) {
       this.align = align;
-      this.layout();
+      if (this.autoLayout) 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;
+    
+    if (this.direction === 'column') {
+      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);
+    }
+    return this.height;
+  }
+
+  /**
+   * 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;
+    
+    if (this.direction === 'row') {
+      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);
+    }
+    return this.width;
+  }
+
+  /**
+   * 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();
+    }
+  }
+
+  /**
+   * 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();
+    }
+  }
+
+  /**
+   * Met à jour les dimensions et relayout si autoLayout est activé
+   * @param {number} width - Nouvelle largeur
+   * @param {number} height - Nouvelle hauteur
+   */
+  setSize(width, height) {
+    super.setSize(width, height);
+    if (this.autoLayout) this.layout();
+  }
+
+  /**
+   * Obtient la position relative d'un enfant
+   * @param {Component} child - L'enfant
+   * @returns {Object|null} Position relative {x, y} ou null si non trouvé
+   */
+  getChildPosition(child) {
+    return this.childPositions.get(child) || null;
+  }
 }
 
 export default Card;

package/package.json

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