canvasframework 0.5.38 → 0.5.40

package/components/Card.js

@@ -42,6 +42,9 @@ class Card extends Component {
     
     // Stocker les positions relatives des enfants
     this.childPositions = new Map();
+    
+    // NOUVEAU: Flag pour forcer les positions absolues
+    this._positionsCorrected = false;
   }
 
   /**
@@ -52,49 +55,29 @@ class Card extends Component {
   add(child) {
     this.children.push(child);
     
-    // CONVERTIR les positions relatives en positions absolues
-    // Les x, y passés sont relatifs à la Card
-    child.x = this.x + child.x;
-    child.y = this.y + child.y;
+    // 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: child.x - this.x, 
-      y: child.y - this.y 
+      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) {
-      this.layout();
+      // Utiliser setTimeout pour éviter les conflits avec Vite Hot Reload
+      setTimeout(() => this.layout(), 0);
     }
     
     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
@@ -119,7 +102,7 @@ class Card extends Component {
           child.width = this.width - (this.padding * 2);
         }
         
-        // Positionner l'enfant RELATIVEMENT à la Card
+        // Positionner l'enfant en COORDONNÉES ABSOLUES
         child.x = this.x + childX;
         child.y = this.y + currentY;
         
@@ -152,7 +135,7 @@ class Card extends Component {
           child.height = this.height - (this.padding * 2);
         }
         
-        // Positionner l'enfant RELATIVEMENT à la Card
+        // Positionner l'enfant en COORDONNÉES ABSOLUES
         child.x = this.x + currentX;
         child.y = this.y + childY;
         
@@ -168,6 +151,68 @@ class Card extends Component {
         }
       }
     }
+    
+    // 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;
+        }
+      }
+    }
   }
 
   /**
@@ -186,6 +231,44 @@ class Card extends Component {
       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();
   }
 
   /**
@@ -196,6 +279,7 @@ class Card extends Component {
    */
   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 });
@@ -267,38 +351,6 @@ class Card extends Component {
     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

package/package.json

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