canvasframework 0.5.27 → 0.5.28

package/components/Card.js

@@ -6,12 +6,14 @@ import Component from '../core/Component.js';
  * @extends Component
  * @property {Component[]} children - Enfants
  * @property {number} padding - Padding interne
- * @property {number} gap - Espacement constant entre enfants SEULEMENT
+ * @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} autoLayout - Active le layout automatique
+ * @property {Map} childPositions - Positions relatives des enfants
  */
 class Card extends Component {
   /**
@@ -19,23 +21,28 @@ class Card extends Component {
    * @param {CanvasFramework} framework - Framework parent
    * @param {Object} [options={}] - Options de configuration
    * @param {number} [options.padding=0] - Padding interne
-   * @param {number} [options.gap=0] - Espacement constant entre enfants SEULEMENT
+   * @param {number} [options.gap=0] - Espacement constant entre enfants
    * @param {string} [options.direction='column'] - Direction
    * @param {string} [options.align='start'] - Alignement
    * @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.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 UNIQUEMENT entre enfants
+    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.autoLayout = options.autoLayout !== undefined ? options.autoLayout : true;
+    
+    // Stocker les positions relatives des enfants
+    this.childPositions = new Map();
   }
 
   /**
@@ -45,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;
   }
 
@@ -58,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;
@@ -69,40 +87,39 @@ 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;
 
     if (this.direction === 'column') {
-      let currentY = this.y + this.padding;
+      let currentY = this.padding;
       
       for (let i = 0; i < this.children.length; i++) {
         const child = this.children[i];
         
-        // Positionner l'enfant sans tenir compte de ses marges internes
-        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);
-        } else {
-          // Alignement 'start' par défaut
-          child.x = this.x + this.padding;
+          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
-        // UNIQUEMENT avec le gap spécifié, rien d'autre
         currentY += child.height;
         
         // Ajouter le gap seulement si ce n'est pas le dernier enfant
@@ -112,25 +129,26 @@ class Card extends Component {
       }
     } else {
       // Direction 'row'
-      let currentX = this.x + this.padding;
+      let currentX = this.padding;
       
       for (let i = 0; i < this.children.length; i++) {
         const child = this.children[i];
         
-        child.x = currentX;
-        
-        // 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);
-        } else {
-          child.y = this.y + this.padding;
+          childY = this.height - child.height - this.padding;
         }
         
+        // 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;
         
@@ -142,6 +160,54 @@ class Card extends Component {
     }
   }
 
+  /**
+   * 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)
@@ -215,6 +281,13 @@ 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);
@@ -287,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();
   }
 
   /**
@@ -330,7 +375,7 @@ class Card extends Component {
    */
   setPadding(padding) {
     this.padding = Math.max(0, padding);
-    this.layout();
+    if (this.autoLayout) this.layout();
   }
 
   /**
@@ -340,18 +385,18 @@ 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();
     }
   }
 
@@ -362,9 +407,12 @@ class Card extends Component {
   getTotalHeight() {
     if (this.children.length === 0) return 0;
     
-    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);
+    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;
   }
 
   /**
@@ -374,9 +422,12 @@ class Card extends Component {
   getTotalWidth() {
     if (this.children.length === 0) return 0;
     
-    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);
+    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;
   }
 
   /**
@@ -396,6 +447,36 @@ class Card extends Component {
       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.27",
+  "version": "0.5.28",
   "repository": {
     "type": "git",
     "url": "https://github.com/beyons/CanvasFramework.git"