canvasframework 0.5.23 → 0.5.25

package/components/Card.js

@@ -1,150 +1,167 @@
 import Component from '../core/Component.js';
 /**
- * Carte avec ombre et contenu
+ * Container avec système de layout et effet d'élévation
  * @class
  * @extends Component
- * @property {Component[]} children - Enfants de la carte
+ * @property {Component[]} children - Enfants
  * @property {number} padding - Padding interne
+ * @property {number} gap - Espacement entre enfants
+ * @property {string} direction - Direction ('column' ou 'row')
+ * @property {string} align - Alignement ('start', 'center', 'end')
  * @property {string} bgColor - Couleur de fond
- * @property {number} elevation - Élévation (ombre)
  * @property {number} borderRadius - Rayon des coins
- * @property {boolean} clipContent - Clip le contenu
- * @property {boolean} clickableChildren - Active les clics sur les enfants
+ * @property {number} elevation - Niveau d'élévation (ombres)
  */
 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=16] - Padding interne
-   * @param {string} [options.bgColor='#FFFFFF'] - Couleur de fond
-   * @param {number} [options.elevation=2] - Élévation (ombre)
-   * @param {number} [options.borderRadius] - Rayon des coins (auto selon platform)
-   * @param {boolean} [options.clipContent=true] - Clip le contenu
-   * @param {boolean} [options.clickableChildren=true] - Active les clics enfants
+   * @param {number} [options.padding=0] - Padding interne
+   * @param {number} [options.gap=0] - Espacement 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)
    */
   constructor(framework, options = {}) {
     super(framework, options);
     this.children = [];
-    this.padding = options.padding || 16;
-    this.bgColor = options.bgColor || '#FFFFFF';
-    this.elevation = options.elevation || 2;
-    this.borderRadius = options.borderRadius || (framework.platform === 'material' ? 4 : 12);
-    this.clipContent = options.clipContent !== false;
-    this.clickableChildren = options.clickableChildren !== false; // NOUVEAU: activer/désactiver les enfants cliquables
+    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; // Nouvelle propriété
   }
 
   /**
-   * Ajoute un enfant à la carte
+   * Ajoute un enfant
    * @param {Component} child - Composant enfant
    * @returns {Component} L'enfant ajouté
    */
   add(child) {
-    // Ajuster les coordonnées de l'enfant pour qu'elles soient relatives à la Card
-    child.x = child.x || 0;
-    child.y = child.y || 0;
     this.children.push(child);
+    this.layout();
+    return child;
+  }
+
+  /**
+   * Organise les enfants selon le layout
+   * @private
+   */
+  layout() {
+    let currentX = this.x + this.padding;
+    let currentY = this.y + this.padding;
     
-    // Marquer l'enfant comme appartenant à cette Card
-    child.parentCard = this;
+    for (let child of this.children) {
+      if (this.direction === 'column') {
+        child.x = currentX;
+        child.y = currentY;
+        if (this.align === 'center') {
+          child.x = this.x + (this.width - child.width) / 2;
+        } else if (this.align === 'end') {
+          child.x = this.x + this.width - child.width - this.padding;
+        }
+        currentY += child.height + this.gap;
+      } else {
+        child.x = currentX;
+        child.y = currentY;
+        if (this.align === 'center') {
+          child.y = this.y + (this.height - child.height) / 2;
+        } else if (this.align === 'end') {
+          child.y = this.y + this.height - child.height - this.padding;
+        }
+        currentX += child.width + this.gap;
+      }
+    }
+  }
+
+  /**
+   * 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 }, // 0 - pas d'ombre
+      { blur: 2, offsetY: 1, color: 'rgba(0,0,0,0.12)', spread: 0 }, // 1 - léger
+      { blur: 3, offsetY: 1, color: 'rgba(0,0,0,0.14)', spread: 0 }, // 2 - léger
+      { blur: 4, offsetY: 2, color: 'rgba(0,0,0,0.16)', spread: 0 }, // 3 - moyen
+      { blur: 6, offsetY: 3, color: 'rgba(0,0,0,0.18)', spread: 0 }, // 4 - moyen
+      { blur: 8, offsetY: 4, color: 'rgba(0,0,0,0.20)', spread: 0 }, // 5 - fort
+    ];
     
-    return child;
+    return shadows[Math.min(elevation, shadows.length - 1)];
   }
 
   /**
-   * Dessine la carte et ses enfants
+   * Dessine l'effet d'ombre selon l'élévation
    * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   * @private
    */
-  /**
- * Dessine la carte et ses enfants
- * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
- */
-	draw(ctx) {
-	  ctx.save();
-	  
-	  // Ombre
-	  if (this.elevation > 0) {
-		ctx.shadowColor = 'rgba(0, 0, 0, 0.15)';
-		ctx.shadowBlur = this.elevation * 3;
-		ctx.shadowOffsetY = this.elevation;
-	  }
-	  
-	  // Background
-	  ctx.fillStyle = this.bgColor;
-	  ctx.beginPath();
-	  this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
-	  ctx.fill();
-	  
-	  ctx.shadowColor = 'transparent';
-	  
-	  // Clipping pour empêcher le contenu de déborder
-	  if (this.clipContent) {
-		ctx.beginPath();
-		this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
-		ctx.clip();
-	  }
-	  
-	  // Children - dessinés relativement à la Card
-	  for (let child of this.children) {
-		if (child.visible) {
-		  // *** FIX : Utiliser ctx.translate au lieu de modifier child.x/y ***
-		  ctx.save();
-		  ctx.translate(this.x + this.padding, this.y + this.padding);
-		  
-		  // Dessiner l'enfant (ses coordonnées sont déjà relatives)
-		  child.draw(ctx);
-		  
-		  ctx.restore();
-		}
-	  }
-	  
-	  ctx.restore();
-	}
+  drawShadow(ctx) {
+    if (this.elevation <= 0) return;
+    
+    const shadow = this.getShadowConfig(this.elevation);
+    
+    // Sauvegarder l'état du contexte
+    ctx.save();
+    
+    // Configurer l'ombre
+    ctx.shadowColor = shadow.color;
+    ctx.shadowBlur = shadow.blur;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = shadow.offsetY;
+    
+    // Dessiner un rectangle pour l'ombre
+    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();
+  }
 
   /**
-	 * Vérifie les clics sur les enfants
-	 * @param {number} x - Coordonnée X
-	 * @param {number} y - Coordonnée Y
-	 * @returns {boolean} True si un enfant a été cliqué
-	 * @private
-	 */
-	checkChildClick(x, y) {
-	  // Ajuster y avec le scrollOffset
-	  const adjustedY = y - (this.framework.scrollOffset || 0);
-	  
-	  // Calculer les coordonnées de base de la Card
-	  const baseX = this.x + this.padding;
-	  const baseY = this.y + this.padding;
-	  
-	  // Vérifier chaque enfant (du dernier au premier pour respecter z-index)
-	  for (let i = this.children.length - 1; i >= 0; i--) {
-		const child = this.children[i];
-		
-		if (!child.visible) continue;
-		
-		// Coordonnées absolues de l'enfant
-		const childAbsX = baseX + child.x;
-		const childAbsY = baseY + child.y;
-		
-		// Vérifier si le clic est dans l'enfant
-		if (adjustedY >= childAbsY && 
-			adjustedY <= childAbsY + child.height &&
-			x >= childAbsX && 
-			x <= childAbsX + child.width) {
-		  
-		  // Déclencher onClick ou onPress
-		  if (child.onClick) {
-			child.onClick();
-			return true;
-		  } else if (child.onPress) {
-			child.onPress(x, adjustedY);
-			return true;
-		  }
-		}
-	  }
-	  
-	  return false;
-	}
+   * 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
@@ -157,7 +174,6 @@ class Card extends Component {
    * @private
    */
   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);
@@ -167,14 +183,13 @@ class Card extends Component {
     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 carte
+   * @returns {boolean} True si le point est dans la vue
    */
   isPointInside(x, y) {
     return x >= this.x && 
@@ -182,14 +197,27 @@ class Card extends Component {
            y >= this.y && 
            y <= this.y + this.height;
   }
-  
+
   /**
-   * Gère le clic sur la carte
-   * @private
+   * 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
    */
-  onClick() {
-    // La Card elle-même peut avoir un onClick, mais on veut aussi vérifier les enfants
-    // Cette logique est gérée dans le CanvasFramework modifié ci-dessous
+  lower() {
+    this.setElevation(this.elevation - 1);
   }
 }
 

package/package.json

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