canvasframework 0.5.39 → 0.5.40

package/components/Card.js

@@ -43,216 +43,8 @@ class Card extends Component {
     // 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;
-      }
-    }
+    // NOUVEAU: Flag pour forcer les positions absolues
+    this._positionsCorrected = false;
   }
 
   /**
@@ -263,53 +55,29 @@ class Card extends Component {
   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;
+    // 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 
     });
     
-    // NOUVEAU: Initialiser les événements si c'est la première fois
-    if (this.children.length === 1 && this._canvas === null) {
-      this._initEvents();
-    }
+    // 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
@@ -334,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;
         
@@ -367,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;
         
@@ -383,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;
+        }
+      }
+    }
   }
 
   /**
@@ -401,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();
   }
 
   /**
@@ -411,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 });
@@ -482,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
@@ -550,63 +387,12 @@ class Card extends Component {
    * @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)
@@ -743,21 +529,6 @@ class Card extends Component {
   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;

package/package.json

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