canvasframework 0.5.37 → 0.5.39

package/components/Card.js

@@ -40,48 +40,242 @@ class Card extends Component {
     this.elevation = options.elevation || 0;
     this.autoLayout = options.autoLayout !== undefined ? options.autoLayout : true;
     
-    // 🔴 IMPORTANT : Activer la gestion des clics pour les enfants
-    this.clickableChildren = true;
-    
-    // 🔴 Détecter la plateforme
-    //this.isCapacitor = typeof window !== 'undefined' && (window.Capacitor || window.cordova);
-    
     // 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);
+    }
   }
-  
-  // 🔴 AJOUTER CETTE MÉTHODE
-  _isMobileApp() {
-    if (typeof window === 'undefined') return false;
-    return !!(window.Capacitor || window.cordova || window.__FORCE_MOBILE_MODE__);
+
+  // 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
+   * Ajoute un enfant (position relative convertie en absolue)
    * @param {Component} child - Composant enfant
    * @returns {Component} L'enfant ajouté
    */
   add(child) {
     this.children.push(child);
     
-    if (this._isMobileApp()) {
-      // CAPACITOR : Convertir en positions absolues
-      const relativeX = child.x;
-      const relativeY = child.y;
-      
-      child.x = this.x + relativeX;
-      child.y = this.y + relativeY;
-      
-      this.childPositions.set(child, { 
-        x: relativeX, 
-        y: relativeY 
-      });
-    } else {
-      // WEB : Garder les positions relatives
-      this.childPositions.set(child, { 
-        x: child.x, 
-        y: child.y 
-      });
+    // 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
@@ -140,15 +334,9 @@ class Card extends Component {
           child.width = this.width - (this.padding * 2);
         }
         
-        if (this._isMobileApp()) {
-          // CAPACITOR : Positions absolues
-          child.x = this.x + childX;
-          child.y = this.y + currentY;
-        } else {
-          // WEB : Positions relatives
-          child.x = childX;
-          child.y = currentY;
-        }
+        // 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 });
@@ -179,15 +367,9 @@ class Card extends Component {
           child.height = this.height - (this.padding * 2);
         }
         
-        if (this._isMobileApp()) {
-          // CAPACITOR : Positions absolues
-          child.x = this.x + currentX;
-          child.y = this.y + childY;
-        } else {
-          // WEB : Positions relatives
-          child.x = currentX;
-          child.y = childY;
-        }
+        // 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 });
@@ -209,20 +391,15 @@ class Card extends Component {
    * @param {number} y - Nouvelle position Y
    */
   setPosition(x, y) {
-    if (this._isMobileApp()) {
-      // CAPACITOR : Déplacer les enfants avec la carte
-      const deltaX = x - this.x;
-      const deltaY = y - this.y;
-      
-      super.setPosition(x, y);
-      
-      for (let child of this.children) {
-        child.x += deltaX;
-        child.y += deltaY;
-      }
-    } else {
-      // WEB : Les enfants sont en relatif, pas besoin de les déplacer
-      super.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;
     }
   }
 
@@ -234,13 +411,8 @@ class Card extends Component {
    */
   setChildPosition(child, relativeX, relativeY) {
     if (this.children.includes(child)) {
-      if (this._isMobileApp()) {
-        child.x = this.x + relativeX;
-        child.y = this.y + relativeY;
-      } else {
-        child.x = relativeX;
-        child.y = relativeY;
-      }
+      child.x = this.x + relativeX;
+      child.y = this.y + relativeY;
       this.childPositions.set(child, { x: relativeX, y: relativeY });
     }
   }
@@ -335,21 +507,8 @@ class Card extends Component {
     }
     
     // Dessiner les enfants
-    if (this._isMobileApp()) {
-      // CAPACITOR : Dessiner directement (positions absolues)
-      for (let child of this.children) {
-        if (child.visible) child.draw(ctx);
-      }
-    } else {
-      // WEB : Dessiner avec translate (positions relatives)
-      ctx.save();
-      ctx.translate(this.x, this.y);
-      
-      for (let child of this.children) {
-        if (child.visible) child.draw(ctx);
-      }
-      
-      ctx.restore();
+    for (let child of this.children) {
+      if (child.visible) child.draw(ctx);
     }
     
     ctx.restore();
@@ -391,12 +550,63 @@ 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)
@@ -533,6 +743,21 @@ 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.37",
+  "version": "0.5.39",
   "repository": {
     "type": "git",
     "url": "https://github.com/beyons/CanvasFramework.git"