canvasframework 0.5.38 → 0.5.39

package/components/Card.js

@@ -42,6 +42,217 @@ 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;
+      }
+    }
   }
 
   /**
@@ -53,7 +264,6 @@ class Card extends Component {
     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;
     
@@ -63,6 +273,11 @@ class Card extends Component {
       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();
@@ -335,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)
@@ -477,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.38",
+  "version": "0.5.39",
   "repository": {
     "type": "git",
     "url": "https://github.com/beyons/CanvasFramework.git"