canvasframework 0.5.39 → 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.39",
+  "version": "0.5.41",
   "repository": {
     "type": "git",
     "url": "https://github.com/beyons/CanvasFramework.git"

package/components/Card.js

@@ -1,763 +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: Gestion des événements
-    this._canvas = null;
-    this._isTouchDevice = false;
-    this._clickListeners = new Map();
-    this._touchListeners = new Map();
-    this._enabled = options.enabled !== undefined ? options.enabled : true;
-    this._interactive = options.interactive !== undefined ? options.interactive : true;
-    
-    // NOUVEAU: Pour le hot reload, nettoyer les anciens événements
-    if (typeof window !== 'undefined') {
-      this._setupEventCleanup();
-    }
-  }
-
-  // NOUVEAU: Initialisation des événements
-  _initEvents() {
-    if (!this.framework || !this.framework.canvas) return;
-    
-    this._canvas = this.framework.canvas;
-    
-    // Détecter si on est sur mobile/touch
-    this._isTouchDevice = 'ontouchstart' in window || 
-      navigator.maxTouchPoints > 0 ||
-      navigator.msMaxTouchPoints > 0;
-    
-    // Écouter les événements sur le canvas
-    this._canvas.addEventListener('click', this._handleCanvasClick.bind(this));
-    this._canvas.addEventListener('touchstart', this._handleCanvasTouch.bind(this), { passive: false });
-    this._canvas.addEventListener('touchend', this._handleCanvasTouchEnd.bind(this), { passive: false });
-  }
-
-  // NOUVEAU: Nettoyage pour hot reload Vite
-  _setupEventCleanup() {
-    // Avant que la page ne soit déchargée (pour hot reload)
-    window.addEventListener('beforeunload', () => {
-      this._cleanupEvents();
-    });
-  }
-
-  // NOUVEAU: Nettoyer les événements
-  _cleanupEvents() {
-    if (this._canvas) {
-      this._canvas.removeEventListener('click', this._handleCanvasClick);
-      this._canvas.removeEventListener('touchstart', this._handleCanvasTouch);
-      this._canvas.removeEventListener('touchend', this._handleCanvasTouchEnd);
-    }
-    this._clickListeners.clear();
-    this._touchListeners.clear();
-  }
-
-  // NOUVEAU: Convertir les coordonnées du DOM vers canvas
-  _getCanvasCoordinates(clientX, clientY) {
-    if (!this._canvas) return { x: 0, y: 0 };
-    
-    const rect = this._canvas.getBoundingClientRect();
-    const scaleX = this._canvas.width / rect.width;
-    const scaleY = this._canvas.height / rect.height;
-    
-    return {
-      x: (clientX - rect.left) * scaleX,
-      y: (clientY - rect.top) * scaleY
-    };
-  }
-
-  // NOUVEAU: Gérer les clics sur le canvas
-  _handleCanvasClick(event) {
-    if (!this._enabled || !this.visible || !this._interactive) return;
-    
-    const coords = this._getCanvasCoordinates(event.clientX, event.clientY);
-    
-    // Vérifier si le clic est sur cette carte
-    if (this.isPointInside(coords.x, coords.y)) {
-      // Empêcher le comportement par défaut
-      event.preventDefault();
-      event.stopPropagation();
-      
-      // Déclencher l'événement onClick de la carte
-      if (this.onClick) {
-        const localCoords = {
-          x: coords.x - this.x,
-          y: coords.y - this.y
-        };
-        this.onClick({
-          type: 'click',
-          x: localCoords.x,
-          y: localCoords.y,
-          clientX: event.clientX,
-          clientY: event.clientY,
-          originalEvent: event,
-          target: this
-        });
-      }
-      
-      // Vérifier si un enfant est cliqué
-      this._propagateClickToChildren(coords.x, coords.y, event);
-    }
-  }
-
-  // NOUVEAU: Gérer les touches tactiles
-  _handleCanvasTouch(event) {
-    if (!this._enabled || !this.visible || !this._interactive) return;
-    
-    if (event.touches.length > 0) {
-      event.preventDefault();
-      event.stopPropagation();
-      
-      const touch = event.touches[0];
-      const coords = this._getCanvasCoordinates(touch.clientX, touch.clientY);
-      
-      // Stocker la position de départ du touch
-      this._lastTouchStart = { x: coords.x, y: coords.y };
-      
-      // Vérifier si le touch est sur cette carte
-      if (this.isPointInside(coords.x, coords.y)) {
-        // Déclencher l'événement onTouchStart de la carte
-        if (this.onTouchStart) {
-          const localCoords = {
-            x: coords.x - this.x,
-            y: coords.y - this.y
-          };
-          this.onTouchStart({
-            type: 'touchstart',
-            x: localCoords.x,
-            y: localCoords.y,
-            clientX: touch.clientX,
-            clientY: touch.clientY,
-            originalEvent: event,
-            target: this
-          });
-        }
-      }
-    }
-  }
-
-  // NOUVEAU: Gérer la fin des touches tactiles
-  _handleCanvasTouchEnd(event) {
-    if (!this._enabled || !this.visible || !this._interactive) return;
-    
-    event.preventDefault();
-    event.stopPropagation();
-    
-    if (event.changedTouches.length > 0) {
-      const touch = event.changedTouches[0];
-      const coords = this._getCanvasCoordinates(touch.clientX, touch.clientY);
-      
-      // Vérifier si le touch end est sur cette carte
-      if (this.isPointInside(coords.x, coords.y)) {
-        // Déclencher l'événement onTouchEnd de la carte
-        if (this.onTouchEnd) {
-          const localCoords = {
-            x: coords.x - this.x,
-            y: coords.y - this.y
-          };
-          this.onTouchEnd({
-            type: 'touchend',
-            x: localCoords.x,
-            y: localCoords.y,
-            clientX: touch.clientX,
-            clientY: touch.clientY,
-            originalEvent: event,
-            target: this
-          });
-        }
-        
-        // Simuler un clic si le touch start était sur la même position
-        if (this._lastTouchStart && 
-            Math.abs(coords.x - this._lastTouchStart.x) < 10 &&
-            Math.abs(coords.y - this._lastTouchStart.y) < 10) {
-          this._propagateClickToChildren(coords.x, coords.y, event);
-        }
-        
-        this._lastTouchStart = null;
-      }
-    }
-  }
-
-  // NOUVEAU: Propager le clic aux enfants
-  _propagateClickToChildren(canvasX, canvasY, originalEvent) {
-    // Parcourir les enfants du dernier au premier (z-order)
-    for (let i = this.children.length - 1; i >= 0; i--) {
-      const child = this.children[i];
-      
-      // Vérifier si l'enfant est visible et interactif
-      const childEnabled = child._enabled !== undefined ? child._enabled : true;
-      const childInteractive = child._interactive !== undefined ? child._interactive : true;
-      
-      if (child.visible && childEnabled && childInteractive && 
-          child.isPointInside(canvasX, canvasY)) {
-        
-        // Déclencher l'événement onClick de l'enfant
-        if (child.onClick) {
-          const localCoords = {
-            x: canvasX - child.x,
-            y: canvasY - child.y
-          };
-          child.onClick({
-            type: 'click',
-            x: localCoords.x,
-            y: localCoords.y,
-            clientX: originalEvent.clientX,
-            clientY: originalEvent.clientY,
-            originalEvent: originalEvent,
-            target: child
-          });
-        }
-        
-        // Stopper la propagation après avoir trouvé un enfant cliqué
-        break;
-      }
-    }
-  }
-
-  /**
-   * Ajoute un enfant (position relative convertie en absolue)
-   * @param {Component} child - Composant enfant
-   * @returns {Component} L'enfant ajouté
-   */
-  add(child) {
-    this.children.push(child);
-    
-    // CONVERTIR les positions relatives en positions absolues
-    child.x = this.x + child.x;
-    child.y = this.y + child.y;
-    
-    // Stocker la position relative originale
-    this.childPositions.set(child, { 
-      x: child.x - this.x, 
-      y: child.y - this.y 
-    });
-    
-    // NOUVEAU: Initialiser les événements si c'est la première fois
-    if (this.children.length === 1 && this._canvas === null) {
-      this._initEvents();
-    }
-    
-    // Si autoLayout est activé, organiser automatiquement
-    if (this.autoLayout) {
-      this.layout();
-    }
-    
-    return child;
-  }
-
-  /**
-   * 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();
-  }
-
-  /**
-   * 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 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;
-        
-        // 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 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;
-        
-        // 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)
-   * @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 la carte et ses enfants
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
-  draw(ctx) {
-    ctx.save();
-    
-    // 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();
-  }
-
-  /**
-   * 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) {
-    // Pour les rectangles arrondis, vérification plus précise
-    if (this.borderRadius > 0) {
-      return this._isPointInRoundedRect(x, y);
-    }
-    
-    // Pour les rectangles normaux
-    return x >= this.x && 
-           x <= this.x + this.width && 
-           y >= this.y && 
-           y <= this.y + this.height;
-  }
-
-  // NOUVEAU: Vérifier si un point est dans un rectangle arrondi
-  _isPointInRoundedRect(x, y) {
-    const rectX = this.x;
-    const rectY = this.y;
-    const width = this.width;
-    const height = this.height;
-    const radius = this.borderRadius;
-    
-    // Vérifier la zone centrale (sans les coins arrondis)
-    if (x >= rectX + radius && x <= rectX + width - radius &&
-        y >= rectY && y <= rectY + height) {
-      return true;
-    }
-    if (x >= rectX && x <= rectX + width &&
-        y >= rectY + radius && y <= rectY + height - radius) {
-      return true;
-    }
-    
-    // Vérifier les quatre coins arrondis
-    const checkCorner = (cornerX, cornerY) => {
-      const dx = x - cornerX;
-      const dy = y - cornerY;
-      return (dx * dx + dy * dy) <= (radius * radius);
-    };
-    
-    // Coin supérieur gauche
-    if (x < rectX + radius && y < rectY + radius) {
-      return checkCorner(rectX + radius, rectY + radius);
-    }
-    // Coin supérieur droit
-    if (x > rectX + width - radius && y < rectY + radius) {
-      return checkCorner(rectX + width - radius, rectY + radius);
-    }
-    // Coin inférieur gauche
-    if (x < rectX + radius && y > rectY + height - radius) {
-      return checkCorner(rectX + radius, rectY + height - radius);
-    }
-    // Coin inférieur droit
-    if (x > rectX + width - radius && y > rectY + height - radius) {
-      return checkCorner(rectX + width - radius, rectY + height - radius);
-    }
-    
-    return false;
-  }
-
-  /**
-   * 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;
-  }
-
-  // NOUVEAU: Méthodes pour activer/désactiver l'interactivité
-  setEnabled(enabled) {
-    this._enabled = enabled;
-  }
-
-  setInteractive(interactive) {
-    this._interactive = interactive;
-  }
-
-  // NOUVEAU: Méthode de nettoyage
-  destroy() {
-    this._cleanupEvents();
-    super.destroy();
-  }
-}
-
-export default Card;