canvasframework 0.5.40 → 0.5.41

package/components/Cards.js

@@ -0,0 +1,232 @@
+import Component from '../core/Component.js';
+
+/**
+ * Container avec système de layout et élévation
+ * @class
+ * @extends Component
+ */
+class Cards extends Component {
+  constructor(framework, options = {}, children = []) {
+    super(framework, options);
+    this.children = [];
+    this.padding = options.padding || 0;
+    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.shadowColor = options.shadowColor || 'rgba(0,0,0,0.15)';
+    this._applyElevationStyles();
+    
+    // Mode de positionnement
+    this.positionMode = options.positionMode || 'flow';
+    
+    // Stocker les positions relatives des enfants
+    this.childRelativePositions = new Map();
+    
+    // Ajouter les enfants passés dans le constructeur
+    if (children && children.length > 0) {
+      this.addChildren(children);
+    }
+  }
+
+  _applyElevationStyles() {
+    const elevationStyles = {
+      0: { blur: 0, offsetY: 0, spread: 0, opacity: 0 },
+      1: { blur: 2, offsetY: 1, spread: 0, opacity: 0.1 },
+      2: { blur: 4, offsetY: 2, spread: 1, opacity: 0.15 },
+      3: { blur: 8, offsetY: 4, spread: 2, opacity: 0.2 },
+      4: { blur: 16, offsetY: 8, spread: 3, opacity: 0.25 },
+      5: { blur: 24, offsetY: 12, spread: 4, opacity: 0.3 }
+    };
+    
+    const style = elevationStyles[Math.min(this.elevation, 5)] || elevationStyles[0];
+    
+    this.shadowBlur = style.blur;
+    this.shadowOffsetY = style.offsetY;
+    this.shadowSpread = style.spread;
+    this.shadowOpacity = style.opacity;
+    
+    this._updateShadowColor();
+  }
+
+  _updateShadowColor() {
+    const rgbMatch = this.shadowColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (rgbMatch) {
+      const r = rgbMatch[1];
+      const g = rgbMatch[2];
+      const b = rgbMatch[3];
+      this._computedShadowColor = `rgba(${r}, ${g}, ${b}, ${this.shadowOpacity})`;
+    } else {
+      this._computedShadowColor = this.shadowColor;
+    }
+  }
+
+  /**
+   * Ajoute plusieurs enfants
+   * @param {Component[]} children - Tableau d'enfants
+   */
+  addChildren(children) {
+    for (const child of children) {
+      this.add(child);
+    }
+  }
+
+  /**
+   * Ajoute un enfant
+   * @param {Component} child - Composant enfant
+   * @returns {Component} L'enfant ajouté
+   */
+  add(child) {
+    this.children.push(child);
+    
+    // Si l'enfant a des coordonnées x,y, on les interprète comme relatives au container
+    if (child.x !== undefined && child.y !== undefined) {
+      // Stocker les positions RELATIVES par rapport au container
+      this.childRelativePositions.set(child, {
+        relativeX: child.x,  // x relatif au container
+        relativeY: child.y   // y relatif au container
+      });
+      
+      // Calculer la position absolue immédiatement
+      this.updateChildPosition(child);
+    }
+    
+    return child;
+  }
+
+  /**
+   * Met à jour la position d'un enfant en fonction de la position du container
+   * @param {Component} child - L'enfant à positionner
+   * @private
+   */
+  updateChildPosition(child) {
+    const relativePos = this.childRelativePositions.get(child);
+    
+    if (relativePos) {
+      // Position ABSOLUE = position container + position relative + padding
+      child.x = this.x + this.padding + relativePos.relativeX;
+      child.y = this.y + this.padding + relativePos.relativeY;
+    }
+  }
+
+  /**
+   * Met à jour la position de tous les enfants quand le container bouge
+   * @override
+   */
+  setPosition(x, y) {
+    super.setPosition(x, y);
+    this.updateAllChildrenPositions();
+  }
+
+  /**
+   * Met à jour toutes les positions des enfants
+   * @private
+   */
+  updateAllChildrenPositions() {
+    for (const child of this.children) {
+      this.updateChildPosition(child);
+    }
+  }
+
+  /**
+   * Change la position relative d'un enfant dans le container
+   * @param {Component} child - L'enfant à repositionner
+   * @param {number} relativeX - Nouvelle position X relative
+   * @param {number} relativeY - Nouvelle position Y relative
+   */
+  setChildPosition(child, relativeX, relativeY) {
+    this.childRelativePositions.set(child, {
+      relativeX: relativeX,
+      relativeY: relativeY
+    });
+    this.updateChildPosition(child);
+  }
+
+  draw(ctx) {
+    ctx.save();
+    
+    // Dessiner l'ombre
+    if (this.elevation > 0 && this.bgColor !== 'transparent') {
+      this.drawShadow(ctx);
+    }
+    
+    // Dessiner le fond
+    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);
+      }
+    }
+    
+    // Dessiner les enfants
+    for (let child of this.children) {
+      if (child.visible) child.draw(ctx);
+    }
+    
+    ctx.restore();
+  }
+
+  drawShadow(ctx) {
+    ctx.save();
+    
+    ctx.shadowColor = this._computedShadowColor;
+    ctx.shadowBlur = this.shadowBlur;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = this.shadowOffsetY;
+    
+    ctx.fillStyle = this.bgColor;
+    
+    if (this.borderRadius > 0) {
+      ctx.beginPath();
+      const spread = this.shadowSpread;
+      this.roundRect(
+        ctx, 
+        this.x - spread/2, 
+        this.y - spread/2, 
+        this.width + spread, 
+        this.height + spread, 
+        this.borderRadius + spread/2
+      );
+      ctx.fill();
+    } else {
+      const spread = this.shadowSpread;
+      ctx.fillRect(
+        this.x - spread/2, 
+        this.y - spread/2, 
+        this.width + spread, 
+        this.height + spread
+      );
+    }
+    
+    ctx.restore();
+  }
+
+  roundRect(ctx, x, y, width, height, radius) {
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+  }
+
+  isPointInside(x, y) {
+    return x >= this.x && 
+           x <= this.x + this.width && 
+           y >= this.y && 
+           y <= this.y + this.height;
+  }
+}
+
+export default Cards;

package/core/CanvasFramework.js

@@ -4,7 +4,8 @@ import Input from '../components/Input.js';
 import Slider from '../components/Slider.js';
 import Text from '../components/Text.js';
 import View from '../components/View.js';
-import Card from '../components/Card.js';
+//import Card from '../components/Card.js';
+import Cards from '../components/Cards.js';
 import FAB from '../components/FAB.js';
 import SpeedDialFAB from '../components/SpeedDialFAB.js';
 import MorphingFAB from '../components/MorphingFAB.js';
@@ -2233,7 +2234,7 @@ class CanvasFramework {
             if (comp.visible) {
                 const adjustedY = isFixedComponent(comp) ? y : y - this.scrollOffset;
 
-                if (comp instanceof Card && comp.clickableChildren && comp.children && comp.children.length > 0) {
+               /* if (comp instanceof Card && comp.clickableChildren && comp.children && comp.children.length > 0) {
                     if (comp.isPointInside(x, adjustedY)) {
                         const cardAdjustedY = adjustedY - comp.y - comp.padding;
                         const cardAdjustedX = x - comp.x - comp.padding;
@@ -2300,7 +2301,7 @@ class CanvasFramework {
                             }
                         }
                     }
-                }
+                }*/
 
                 if (comp.isPointInside(x, adjustedY)) {
                     switch (eventType) {

package/core/UIBuilder.js

@@ -5,7 +5,7 @@ import Input from '../components/Input.js';
 import Slider from '../components/Slider.js';
 import Text from '../components/Text.js';
 import View from '../components/View.js';
-import Card from '../components/Card.js';
+import Cards from '../components/Cards.js';
 import FAB from '../components/FAB.js';
 import SpeedDialFAB from '../components/SpeedDialFAB.js';
 import MorphingFAB from '../components/MorphingFAB.js';
@@ -82,7 +82,7 @@ const Components = {
   Slider,
   Text,
   View,
-  Card,
+  Cards,
   FAB,
   SpeedDialFAB,
   MorphingFAB,

package/index.js

@@ -12,7 +12,7 @@ export { default as Input } from './components/Input.js';
 export { default as Slider } from './components/Slider.js';
 export { default as Text } from './components/Text.js';
 export { default as View } from './components/View.js';
-export { default as Card } from './components/Card.js';
+export { default as Cards } from './components/Cards.js';
 export { default as FAB } from './components/FAB.js';
 export { default as SpeedDialFAB } from './components/SpeedDialFAB.js';
 export { default as MorphingFAB } from './components/MorphingFAB.js';

package/package.json

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

package/components/Card.js

@@ -1,534 +0,0 @@
-import Component from '../core/Component.js';
-
-/**
- * Container avec système de layout et effet d'élévation
- * @class
- * @extends Component
- * @property {Component[]} children - Enfants
- * @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} 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
- */
-class Card extends Component {
-  /**
-   * Crée une instance de Card
-   * @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
-   * @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;
-    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();
-    
-    // NOUVEAU: Flag pour forcer les positions absolues
-    this._positionsCorrected = false;
-  }
-
-  /**
-   * Ajoute un enfant (position relative convertie en absolue)
-   * @param {Component} child - Composant enfant
-   * @returns {Component} L'enfant ajouté
-   */
-  add(child) {
-    this.children.push(child);
-    
-    // SOLUTION: Stocker les coordonnées relatives AVANT conversion
-    const relativeX = child.x || 0;
-    const relativeY = child.y || 0;
-    
-    // Stocker la position relative originale
-    this.childPositions.set(child, { 
-      x: relativeX, 
-      y: relativeY 
-    });
-    
-    // CONVERTIR IMMÉDIATEMENT en positions absolues
-    child.x = this.x + relativeX;
-    child.y = this.y + relativeY;
-    
-    // Si autoLayout est activé, organiser automatiquement
-    if (this.autoLayout) {
-      // Utiliser setTimeout pour éviter les conflits avec Vite Hot Reload
-      setTimeout(() => this.layout(), 0);
-    }
-    
-    return child;
-  }
-
-  /**
-   * Organise les enfants selon le layout
-   * @private
-   */
-  layout() {
-    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 en COORDONNÉES ABSOLUES
-        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;
-        
-        // Ajouter le gap seulement si ce n'est pas le dernier enfant
-        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 en COORDONNÉES ABSOLUES
-        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;
-        }
-      }
-    }
-    
-    // Marquer que les positions sont corrigées
-    this._positionsCorrected = true;
-  }
-
-  /**
-   * Dessine la carte et ses enfants
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
-  draw(ctx) {
-    ctx.save();
-    
-    // SOLUTION: Vérifier et corriger les positions AVANT de dessiner
-    // Ceci garantit que les enfants sont en coordonnées absolues
-    if (this._positionsCorrected) {
-      this._ensureAbsolutePositions();
-    }
-    
-    // Dessiner l'ombre si elevation > 0
-    if (this.elevation > 0) {
-      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);
-      }
-    }
-    
-    // Dessiner les enfants
-    for (let child of this.children) {
-      if (child.visible) child.draw(ctx);
-    }
-    
-    ctx.restore();
-  }
-
-  /**
-   * S'assure que tous les enfants ont des coordonnées absolues
-   * @private
-   */
-  _ensureAbsolutePositions() {
-    for (let child of this.children) {
-      const relativePos = this.childPositions.get(child);
-      if (relativePos) {
-        // Recalculer la position absolue basée sur la position de la carte
-        const expectedX = this.x + relativePos.x;
-        const expectedY = this.y + relativePos.y;
-        
-        // Corriger si nécessaire (important pour Vite Hot Reload)
-        if (Math.abs(child.x - expectedX) > 1 || Math.abs(child.y - expectedY) > 1) {
-          child.x = expectedX;
-          child.y = expectedY;
-        }
-      }
-    }
-  }
-
-  /**
-   * 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;
-    }
-    
-    // Mettre à jour les positions relatives stockées
-    this._updateRelativePositions();
-  }
-
-  /**
-   * Met à jour les positions relatives stockées
-   * @private
-   */
-  _updateRelativePositions() {
-    for (let [child, pos] of this.childPositions.entries()) {
-      // Les positions relatives ne changent pas quand la carte bouge
-      // On garde juste la référence
-    }
-  }
-
-  /**
-   * Supprime un enfant
-   * @param {Component} child - Composant enfant à supprimer
-   * @returns {boolean} True si l'enfant a été supprimé
-   */
-  remove(child) {
-    const index = this.children.indexOf(child);
-    if (index > -1) {
-      this.children.splice(index, 1);
-      this.childPositions.delete(child);
-      if (this.autoLayout) this.layout();
-      return true;
-    }
-    return false;
-  }
-
-  /**
-   * Supprime tous les enfants
-   */
-  clear() {
-    this.children = [];
-    this.childPositions.clear();
-  }
-
-  /**
-   * 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)) {
-      // Définir en coordonnées absolues
-      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)
-   * @returns {Object} Configuration de l'ombre
-   * @private
-   */
-  getShadowConfig(elevation) {
-    const shadows = [
-      { blur: 0, offsetY: 0, color: 'transparent', spread: 0 },
-      { blur: 2, offsetY: 1, color: 'rgba(0,0,0,0.12)', spread: 0 },
-      { blur: 3, offsetY: 1, color: 'rgba(0,0,0,0.14)', spread: 0 },
-      { blur: 4, offsetY: 2, color: 'rgba(0,0,0,0.16)', spread: 0 },
-      { blur: 6, offsetY: 3, color: 'rgba(0,0,0,0.18)', spread: 0 },
-      { blur: 8, offsetY: 4, color: 'rgba(0,0,0,0.20)', spread: 0 },
-    ];
-    
-    return shadows[Math.min(elevation, shadows.length - 1)];
-  }
-
-  /**
-   * Dessine l'effet d'ombre selon l'élévation
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   * @private
-   */
-  drawShadow(ctx) {
-    if (this.elevation <= 0) return;
-    
-    const shadow = this.getShadowConfig(this.elevation);
-    
-    ctx.save();
-    
-    ctx.shadowColor = shadow.color;
-    ctx.shadowBlur = shadow.blur;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = shadow.offsetY;
-    
-    if (this.borderRadius > 0) {
-      ctx.beginPath();
-      this.roundRect(ctx, this.x, this.y + shadow.offsetY, this.width, this.height, this.borderRadius);
-      ctx.fillStyle = this.bgColor === 'transparent' ? 'white' : this.bgColor;
-      ctx.fill();
-    } else {
-      ctx.fillStyle = this.bgColor === 'transparent' ? 'white' : this.bgColor;
-      ctx.fillRect(this.x, this.y + shadow.offsetY, this.width, this.height);
-    }
-    
-    ctx.restore();
-  }
-
-  /**
-   * Dessine un rectangle avec coins arrondis
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   * @param {number} x - Position X
-   * @param {number} y - Position Y
-   * @param {number} width - Largeur
-   * @param {number} height - Hauteur
-   * @param {number} radius - Rayon des coins
-   * @private
-   */
-  roundRect(ctx, x, y, width, height, radius) {
-    if (radius === 0) {
-      ctx.rect(x, y, width, height);
-      return;
-    }
-    
-    ctx.beginPath();
-    ctx.moveTo(x + radius, y);
-    ctx.lineTo(x + width - radius, y);
-    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-    ctx.lineTo(x + width, y + height - radius);
-    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
-    ctx.lineTo(x + radius, y + height);
-    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-    ctx.lineTo(x, y + radius);
-    ctx.quadraticCurveTo(x, y, x + radius, y);
-    ctx.closePath();
-  }
-
-  /**
-   * Vérifie si un point est dans les limites
-   * @param {number} x - Coordonnée X
-   * @param {number} y - Coordonnée Y
-   * @returns {boolean} True si le point est dans la vue
-   */
-  isPointInside(x, y) {
-    return x >= this.x && 
-           x <= this.x + this.width && 
-           y >= this.y && 
-           y <= this.y + this.height;
-  }
-
-  /**
-   * Définit le niveau d'élévation
-   * @param {number} elevation - Nouveau niveau d'élévation (0-5)
-   */
-  setElevation(elevation) {
-    this.elevation = Math.max(0, Math.min(elevation, 5));
-  }
-
-  /**
-   * Augmente le niveau d'élévation
-   */
-  raise() {
-    this.setElevation(this.elevation + 1);
-  }
-
-  /**
-   * Réduit le niveau d'élévation
-   */
-  lower() {
-    this.setElevation(this.elevation - 1);
-  }
-
-  /**
-   * Définit l'espacement entre enfants
-   * @param {number} gap - Nouvel espacement
-   */
-  setGap(gap) {
-    this.gap = Math.max(0, gap);
-    if (this.autoLayout) this.layout();
-  }
-
-  /**
-   * Définit le padding
-   * @param {number} padding - Nouveau padding
-   */
-  setPadding(padding) {
-    this.padding = Math.max(0, padding);
-    if (this.autoLayout) this.layout();
-  }
-
-  /**
-   * Définit la direction du layout
-   * @param {string} direction - 'column' ou 'row'
-   */
-  setDirection(direction) {
-    if (direction === 'column' || direction === 'row') {
-      this.direction = direction;
-      if (this.autoLayout) this.layout();
-    }
-  }
-
-  /**
-   * Définit l'alignement
-   * @param {string} align - 'start', 'center', 'end' ou 'stretch'
-   */
-  setAlign(align) {
-    if (['start', 'center', 'end', 'stretch'].includes(align)) {
-      this.align = align;
-      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() {
-    this.fitWidth();
-    this.fitHeight();
-  }
-
-  /**
-   * 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;