canvasframework 0.3.15 → 0.3.17

package/components/SwipeableListItem.js

@@ -4,13 +4,6 @@ import Component from '../core/Component.js';
  * Élément de liste avec support swipe et actions
  * @class
  * @extends Component
- * @property {string} title - Titre
- * @property {string} subtitle - Sous-titre
- * @property {Array<{icon?: string, text: string, color: string, onClick: Function}>} leftActions - Actions swipe gauche
- * @property {Array<{icon?: string, text: string, color: string, onClick: Function}>} rightActions - Actions swipe droite
- * @property {string} bgColor - Couleur de fond
- * @property {string} platform - Plateforme ('material' ou 'cupertino')
- * @property {number} height - Hauteur de l'item
  */
 class SwipeableListItem extends Component {
   constructor(framework, options = {}) {
@@ -29,9 +22,180 @@ class SwipeableListItem extends Component {
     this.dragOffset = 0;
     this.dragging = false;
     this.startX = 0;
+    this.startY = 0;
+    this.hasMoved = false;
 
     this.ripples = [];
-    this.onPress = this.handlePress.bind(this);
+    this.animationFrame = null;
+    this.lastAnimationTime = 0;
+
+    // 🔹 Binding des handlers
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
+    this.handleTouchStart = this.handleTouchStart.bind(this);
+    this.handleTouchMove = this.handleTouchMove.bind(this);
+    this.handleTouchEnd = this.handleTouchEnd.bind(this);
+
+    console.log('🏗️ SwipeableListItem créé', {
+      hasCanvas: !!this.framework.canvas,
+      x: this.x,
+      y: this.y,
+      width: this.width,
+      height: this.height
+    });
+
+    // 🔹 Enregistrer les événements
+    this.setupEventListeners();
+  }
+
+  /**
+   * Configure les écouteurs d'événements
+   * @private
+   */
+  setupEventListeners() {
+    if (!this.framework.canvas) {
+      console.error('❌ Pas de canvas trouvé dans le framework');
+      return;
+    }
+
+    const canvas = this.framework.canvas;
+    console.log('📡 Configuration des événements sur le canvas');
+
+    // Événements souris
+    canvas.addEventListener('mousedown', this.handleMouseDown);
+    canvas.addEventListener('mousemove', this.handleMouseMove);
+    canvas.addEventListener('mouseup', this.handleMouseUp);
+
+    // Événements tactiles
+    canvas.addEventListener('touchstart', this.handleTouchStart, { passive: false });
+    canvas.addEventListener('touchmove', this.handleTouchMove, { passive: false });
+    canvas.addEventListener('touchend', this.handleTouchEnd);
+
+    console.log('✅ Événements configurés');
+  }
+
+  /**
+   * Nettoyer les événements lors de la destruction
+   */
+  destroy() {
+    if (this.framework.canvas) {
+      const canvas = this.framework.canvas;
+      canvas.removeEventListener('mousedown', this.handleMouseDown);
+      canvas.removeEventListener('mousemove', this.handleMouseMove);
+      canvas.removeEventListener('mouseup', this.handleMouseUp);
+      canvas.removeEventListener('touchstart', this.handleTouchStart);
+      canvas.removeEventListener('touchmove', this.handleTouchMove);
+      canvas.removeEventListener('touchend', this.handleTouchEnd);
+    }
+
+    if (this.animationFrame) {
+      cancelAnimationFrame(this.animationFrame);
+      this.animationFrame = null;
+    }
+
+    if (super.destroy) {
+      super.destroy();
+    }
+  }
+
+  /**
+   * Obtenir les coordonnées depuis un événement
+   * @private
+   */
+  getCoordinates(event) {
+    const rect = this.framework.canvas.getBoundingClientRect();
+    if (event.touches && event.touches.length > 0) {
+      return {
+        x: event.touches[0].clientX - rect.left,
+        y: event.touches[0].clientY - rect.top
+      };
+    }
+    return {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    };
+  }
+
+  /**
+   * Handler mousedown
+   * @private
+   */
+  handleMouseDown(event) {
+    const coords = this.getCoordinates(event);
+    console.log('🖱️ MouseDown', coords, 'isInside:', this.isPointInside(coords.x, coords.y));
+    this.onDragStart(coords.x, coords.y);
+  }
+
+  /**
+   * Handler mousemove
+   * @private
+   */
+  handleMouseMove(event) {
+    if (!this.dragging) return;
+    const coords = this.getCoordinates(event);
+    console.log('🖱️ MouseMove', coords, 'dragging:', this.dragging);
+    this.onDragMove(coords.x, coords.y);
+    this.requestRender();
+  }
+
+  /**
+   * Handler mouseup
+   * @private
+   */
+  handleMouseUp(event) {
+    if (!this.dragging) return;
+    console.log('🖱️ MouseUp');
+    this.onDragEnd();
+    this.requestRender();
+  }
+
+  /**
+   * Handler touchstart
+   * @private
+   */
+  handleTouchStart(event) {
+    const coords = this.getCoordinates(event);
+    console.log('👆 TouchStart', coords, 'isInside:', this.isPointInside(coords.x, coords.y));
+    if (this.isPointInside(coords.x, coords.y)) {
+      event.preventDefault();
+      this.onDragStart(coords.x, coords.y);
+    }
+  }
+
+  /**
+   * Handler touchmove
+   * @private
+   */
+  handleTouchMove(event) {
+    if (!this.dragging) return;
+    event.preventDefault();
+    const coords = this.getCoordinates(event);
+    console.log('👆 TouchMove', coords);
+    this.onDragMove(coords.x, coords.y);
+    this.requestRender();
+  }
+
+  /**
+   * Handler touchend
+   * @private
+   */
+  handleTouchEnd(event) {
+    if (!this.dragging) return;
+    event.preventDefault();
+    console.log('👆 TouchEnd');
+    this.onDragEnd();
+    this.requestRender();
+  }
+
+  /**
+   * Demander un redessin
+   * @private
+   */
+  requestRender() {
+    if (this.framework && this.framework.requestRender) {
+      this.framework.requestRender();
+    }
   }
 
   /**
@@ -40,21 +204,46 @@ class SwipeableListItem extends Component {
    * @param {number} y
    */
   onDragStart(x, y) {
-    if (this.isPointInside(x, y)) {
+    const inside = this.isPointInside(x, y);
+    console.log('🟢 onDragStart', { x, y, inside, bounds: { x: this.x, y: this.y, w: this.width, h: this.height } });
+    
+    if (inside) {
       this.dragging = true;
       this.startX = x;
+      this.startY = y;
+      this.hasMoved = false;
+      console.log('✅ Swipe démarré');
+    } else {
+      console.log('❌ Point en dehors des limites');
     }
   }
 
   /**
    * Déplacement pendant swipe
    * @param {number} x
+   * @param {number} y
    */
-  onDragMove(x) {
+  onDragMove(x, y) {
     if (this.dragging) {
-      this.dragOffset = x - this.startX;
-      const maxOffset = Math.max(this.leftActions.length, this.rightActions.length) * 80;
-      this.dragOffset = Math.min(Math.max(this.dragOffset, -maxOffset), maxOffset);
+      const deltaX = x - this.startX;
+      const deltaY = Math.abs(y - this.startY);
+
+      console.log('🔄 onDragMove', { deltaX, deltaY, hasMoved: this.hasMoved });
+
+      // Swipe horizontal seulement si déplacement > 5px
+      if (Math.abs(deltaX) > 5 || this.hasMoved) {
+        this.hasMoved = true;
+        this.dragOffset = deltaX;
+
+        // Limiter le déplacement
+        const maxOffset = Math.max(
+          this.leftActions.length * 80,
+          this.rightActions.length * 80
+        );
+        this.dragOffset = Math.min(Math.max(this.dragOffset, -maxOffset), maxOffset);
+
+        console.log('↔️ Offset mis à jour:', this.dragOffset);
+      }
     }
   }
 
@@ -63,51 +252,24 @@ class SwipeableListItem extends Component {
    */
   onDragEnd() {
     if (this.dragging) {
-      if (this.dragOffset > 80 && this.leftActions[0]) {
-        this.leftActions[0].onClick?.();
-      } else if (this.dragOffset < -80 && this.rightActions[0]) {
-        this.rightActions[0].onClick?.();
+      console.log('🔴 onDragEnd', { offset: this.dragOffset, hasMoved: this.hasMoved });
+
+      if (this.hasMoved) {
+        if (this.dragOffset > 80 && this.leftActions[0]) {
+          console.log('✅ Action gauche déclenchée');
+          this.leftActions[0].onClick?.();
+        } else if (this.dragOffset < -80 && this.rightActions[0]) {
+          console.log('✅ Action droite déclenchée');
+          this.rightActions[0].onClick?.();
+        }
       }
+
       this.dragOffset = 0;
       this.dragging = false;
+      this.hasMoved = false;
     }
   }
 
-  /**
-   * Gestion du press pour ripple Material
-   * @param {number} x
-   * @param {number} y
-   */
-  handlePress(x, y) {
-    if (this.platform === 'material') {
-      const adjustedY = y - this.framework.scrollOffset;
-      this.ripples.push({
-        x: x - this.x,
-        y: adjustedY - this.y,
-        radius: 0,
-        maxRadius: Math.max(this.width, this.height) * 1.5,
-        opacity: 1
-      });
-      this.animateRipple();
-    }
-  }
-
-  animateRipple() {
-    const animate = () => {
-      let hasActive = false;
-      for (let ripple of this.ripples) {
-        if (ripple.radius < ripple.maxRadius) {
-          ripple.radius += ripple.maxRadius / 15;
-          hasActive = true;
-        }
-        if (ripple.radius >= ripple.maxRadius * 0.5) ripple.opacity -= 0.05;
-      }
-      this.ripples = this.ripples.filter(r => r.opacity > 0);
-      if (hasActive) requestAnimationFrame(animate);
-    };
-    animate();
-  }
-
   /**
    * Dessine l'item
    * @param {CanvasRenderingContext2D} ctx
@@ -115,12 +277,12 @@ class SwipeableListItem extends Component {
   draw(ctx) {
     ctx.save();
 
-    // Actions swipe
+    // Actions swipe (arrière-plan)
     if (this.dragOffset > 0 && this.leftActions[0]) {
       ctx.fillStyle = this.leftActions[0].color || '#388E3C';
       ctx.fillRect(this.x, this.y, this.dragOffset, this.height);
       ctx.fillStyle = '#FFF';
-      ctx.font = '14px sans-serif';
+      ctx.font = 'bold 14px sans-serif';
       ctx.textAlign = 'center';
       ctx.textBaseline = 'middle';
       ctx.fillText(this.leftActions[0].text, this.x + this.dragOffset / 2, this.y + this.height / 2);
@@ -129,51 +291,57 @@ class SwipeableListItem extends Component {
       ctx.fillStyle = this.rightActions[0].color || '#D32F2F';
       ctx.fillRect(this.x + this.width - offset, this.y, offset, this.height);
       ctx.fillStyle = '#FFF';
+      ctx.font = 'bold 14px sans-serif';
       ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
       ctx.fillText(this.rightActions[0].text, this.x + this.width - offset / 2, this.y + this.height / 2);
     }
 
+    // Déplacement du contenu principal
     ctx.translate(this.dragOffset, 0);
 
     // Background
     ctx.fillStyle = this.bgColor;
     ctx.fillRect(this.x, this.y, this.width, this.height);
 
-    // Ripple
-    if (this.platform === 'material') {
-      ctx.save();
-      ctx.beginPath();
-      ctx.rect(this.x, this.y, this.width, this.height);
-      ctx.clip();
-      for (let ripple of this.ripples) {
-        ctx.globalAlpha = ripple.opacity;
-        ctx.fillStyle = 'rgba(0,0,0,0.1)';
-        ctx.beginPath();
-        ctx.arc(this.x + ripple.x, this.y + ripple.y, ripple.radius, 0, Math.PI * 2);
-        ctx.fill();
-      }
-      ctx.restore();
-    }
-
-    // Texte
+    // Texte principal
     ctx.fillStyle = '#000';
-    ctx.font = '16px sans-serif';
+    ctx.font = '16px -apple-system, Roboto, sans-serif';
     ctx.textAlign = 'left';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(this.title, this.x + 16, this.y + this.height / 2);
+    ctx.textBaseline = this.subtitle ? 'top' : 'middle';
+    const titleY = this.subtitle ? this.y + 16 : this.y + this.height / 2;
+    ctx.fillText(this.title, this.x + 16, titleY);
+
+    // Sous-titre
     if (this.subtitle) {
       ctx.fillStyle = '#757575';
-      ctx.font = '14px sans-serif';
-      ctx.fillText(this.subtitle, this.x + 16, this.y + this.height / 2 + 12);
+      ctx.font = '14px -apple-system, Roboto, sans-serif';
+      ctx.fillText(this.subtitle, this.x + 16, this.y + 38);
     }
 
+    // Bordure inférieure
+    ctx.strokeStyle = '#E0E0E0';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(this.x, this.y + this.height);
+    ctx.lineTo(this.x + this.width, this.y + this.height);
+    ctx.stroke();
+
     ctx.restore();
   }
 
-  isPointInside(x, y) {
-    return x >= this.x && x <= this.x + this.width &&
-           y >= this.y && y <= this.y + this.height;
-  }
+ isPointInside(x, y) {
+  const inside = x >= this.x && x <= this.x + this.width &&
+                 y >= this.y && y <= this.y + this.height;
+  
+  console.log('🎯 isPointInside check', {
+    point: { x, y },
+    bounds: { x: this.x, y: this.y, width: this.width, height: this.height },
+    inside
+  });
+  
+  return inside;
+}
 }
 
-export default SwipeableListItem;
+export default SwipeableListItem;

package/components/Tabs.js

@@ -1,32 +1,14 @@
 import Component from '../core/Component.js';
+
 /**
- * Onglets de navigation
+ * Onglets de navigation avec support Material & Cupertino
  * @class
  * @extends Component
- * @property {Array} tabs - Onglets [{label, icon}]
- * @property {number} selectedIndex - Onglet sélectionné
- * @property {Function} onChange - Callback au changement
- * @property {string} platform - Plateforme
- * @property {string} indicatorColor - Couleur de l'indicateur
- * @property {string} textColor - Couleur du texte
- * @property {string} selectedTextColor - Couleur du texte sélectionné
  */
 class Tabs extends Component {
-  /**
-   * Crée une instance de Tabs
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}] - Options de configuration
-   * @param {Array} [options.tabs=[]] - Onglets
-   * @param {number} [options.selectedIndex=0] - Onglet sélectionné
-   * @param {Function} [options.onChange] - Callback au changement
-   * @param {number} [options.height=48] - Hauteur
-   * @param {string} [options.indicatorColor] - Couleur indicateur (auto selon platform)
-   * @param {string} [options.textColor='#000000'] - Couleur texte
-   * @param {string} [options.selectedTextColor] - Couleur texte sélectionné (auto selon indicatorColor)
-   */
   constructor(framework, options = {}) {
     super(framework, options);
-    this.tabs = options.tabs || []; // [{label: 'Tab 1', icon: '📱'}, ...]
+    this.tabs = options.tabs || [];
     this.selectedIndex = options.selectedIndex || 0;
     this.onChange = options.onChange;
     this.platform = framework.platform;
@@ -35,13 +17,159 @@ class Tabs extends Component {
     this.textColor = options.textColor || '#000000';
     this.selectedTextColor = options.selectedTextColor || this.indicatorColor;
     
+    // 🔹 Système de ripples amélioré
+    this.ripples = [];
+    this.animationFrame = null;
+    this.lastAnimationTime = 0;
+    
+    // 🔹 Pour détecter les doubles événements
+    this.lastEventTime = 0;
+    this.lastEventCoords = { x: -1, y: -1 };
+    
     this.onPress = this.handlePress.bind(this);
   }
 
   /**
-   * Dessine les onglets
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   * Démarre l'animation des ripples
+   * @private
    */
+  startRippleAnimation() {
+    const animate = (timestamp) => {
+      if (!this.lastAnimationTime) this.lastAnimationTime = timestamp;
+      const deltaTime = timestamp - this.lastAnimationTime;
+      this.lastAnimationTime = timestamp;
+
+      let needsUpdate = false;
+
+      // Mettre à jour chaque ripple
+      for (let i = this.ripples.length - 1; i >= 0; i--) {
+        const ripple = this.ripples[i];
+        
+        // Animer le rayon (expansion)
+        if (ripple.radius < ripple.maxRadius) {
+          ripple.radius += (ripple.maxRadius / 300) * deltaTime;
+          needsUpdate = true;
+        }
+
+        // Animer l'opacité (fade out)
+        if (ripple.radius >= ripple.maxRadius * 0.4) {
+          ripple.opacity -= (0.003 * deltaTime);
+          if (ripple.opacity < 0) ripple.opacity = 0;
+          needsUpdate = true;
+        }
+
+        // Supprimer les ripples terminés
+        if (ripple.opacity <= 0 && ripple.radius >= ripple.maxRadius * 0.95) {
+          this.ripples.splice(i, 1);
+          needsUpdate = true;
+        }
+      }
+
+      // Redessiner si nécessaire
+      if (needsUpdate) {
+        this.requestRender();
+      }
+
+      // Continuer l'animation
+      if (this.ripples.length > 0) {
+        this.animationFrame = requestAnimationFrame(animate);
+      } else {
+        this.animationFrame = null;
+        this.lastAnimationTime = 0;
+      }
+    };
+
+    if (this.ripples.length > 0 && !this.animationFrame) {
+      this.animationFrame = requestAnimationFrame(animate);
+    }
+  }
+
+  /**
+   * Demander un redessin
+   * @private
+   */
+  requestRender() {
+    if (this.framework && this.framework.requestRender) {
+      this.framework.requestRender();
+    }
+  }
+
+  /**
+   * Nettoyer l'animation lors de la destruction
+   */
+  destroy() {
+    if (this.animationFrame) {
+      cancelAnimationFrame(this.animationFrame);
+      this.animationFrame = null;
+    }
+    if (super.destroy) {
+      super.destroy();
+    }
+  }
+
+  handlePress(x, y) {
+    const now = performance.now();
+    
+    // 🔹 Détecter si c'est le même événement physique (mousedown + click)
+    const deltaTime = now - this.lastEventTime;
+    const deltaX = Math.abs(x - this.lastEventCoords.x);
+    const deltaY = Math.abs(y - this.lastEventCoords.y);
+    
+    const isDoubleEvent = deltaX < 2 && deltaY < 2 && deltaTime < 50;
+    
+    if (isDoubleEvent) {
+      return; // Ignorer le double événement
+    }
+    
+    // 🔹 Enregistrer cet événement
+    this.lastEventTime = now;
+    this.lastEventCoords = { x, y };
+    
+    const tabWidth = this.width / this.tabs.length;
+    const index = Math.floor((x - this.x) / tabWidth);
+    
+    if (index >= 0 && index < this.tabs.length) {
+      // Ripple pour Material
+      if (this.platform === 'material') {
+        const rippleCenterX = this.x + index * tabWidth + tabWidth / 2;
+        
+        // Calculer la taille maximale du ripple
+        const maxRippleRadius = Math.min(tabWidth * 0.6, this.height * 0.8);
+        
+        this.ripples.push({
+          x: rippleCenterX,
+          y: this.y + this.height / 2,
+          radius: 0,
+          maxRadius: maxRippleRadius,
+          opacity: 1,
+          createdAt: now,
+          tabIndex: index
+        });
+        
+        // Démarrer l'animation si elle n'est pas en cours
+        if (!this.animationFrame) {
+          this.startRippleAnimation();
+        }
+        
+        // Forcer un redessin
+        this.requestRender();
+      }
+
+      // Changement d'onglet
+      if (index !== this.selectedIndex) {
+        this.selectedIndex = index;
+        if (this.onChange) this.onChange(index, this.tabs[index]);
+      }
+      
+      this.requestRender();
+    }
+  }
+
+  isPointInside(x, y) {
+    return x >= this.x && x <= this.x + this.width &&
+           y >= this.y && y <= this.y + this.height;
+  }
+
   draw(ctx) {
     ctx.save();
     
@@ -56,16 +184,22 @@ class Tabs extends Component {
     ctx.moveTo(this.x, this.y + this.height);
     ctx.lineTo(this.x + this.width, this.y + this.height);
     ctx.stroke();
-    
+
     const tabWidth = this.width / this.tabs.length;
-    
+
+    // 🔹 Dessiner les ripples Material EN PREMIER
+    if (this.platform === 'material') {
+      this.drawRipples(ctx, tabWidth);
+    }
+
+    // Dessiner les onglets
     for (let i = 0; i < this.tabs.length; i++) {
       const tab = this.tabs[i];
       const tabX = this.x + i * tabWidth;
       const isSelected = i === this.selectedIndex;
       const color = isSelected ? this.selectedTextColor : this.textColor;
-      
-      // Icône (si présente)
+
+      // Icône (facultative)
       if (tab.icon) {
         ctx.font = '20px sans-serif';
         ctx.textAlign = 'center';
@@ -73,7 +207,7 @@ class Tabs extends Component {
         ctx.fillStyle = color;
         ctx.fillText(tab.icon, tabX + tabWidth / 2, this.y + 16);
       }
-      
+
       // Label
       ctx.font = `${isSelected ? 'bold ' : ''}14px -apple-system, Roboto, sans-serif`;
       ctx.fillStyle = color;
@@ -81,44 +215,40 @@ class Tabs extends Component {
       ctx.textBaseline = 'middle';
       const labelY = tab.icon ? this.y + 36 : this.y + this.height / 2;
       ctx.fillText(tab.label, tabX + tabWidth / 2, labelY);
-      
-      // Indicateur (Material uniquement)
+
+      // Indicateur (Material)
       if (isSelected && this.platform === 'material') {
         ctx.fillStyle = this.indicatorColor;
         ctx.fillRect(tabX, this.y + this.height - 2, tabWidth, 2);
       }
     }
-    
+
     ctx.restore();
   }
 
   /**
-   * Gère la pression (clic)
-   * @param {number} x - Coordonnée X
-   * @param {number} y - Coordonnée Y
+   * Dessine les ripples (Material)
    * @private
    */
-  handlePress(x, y) {
-    const tabWidth = this.width / this.tabs.length;
-    const index = Math.floor((x - this.x) / tabWidth);
+  drawRipples(ctx, tabWidth) {
+    // Sauvegarder le contexte
+    ctx.save();
     
-    if (index >= 0 && index < this.tabs.length && index !== this.selectedIndex) {
-      this.selectedIndex = index;
-      if (this.onChange) {
-        this.onChange(index, this.tabs[index]);
-      }
+    // Créer un masque de clipping pour limiter les ripples aux onglets
+    ctx.beginPath();
+    ctx.rect(this.x, this.y, this.width, this.height);
+    ctx.clip();
+    
+    for (let ripple of this.ripples) {
+      ctx.globalAlpha = ripple.opacity;
+      ctx.fillStyle = this.indicatorColor || '#6200EE';
+      ctx.beginPath();
+      ctx.arc(ripple.x, ripple.y, ripple.radius, 0, Math.PI * 2);
+      ctx.fill();
     }
-  }
-
-  /**
-   * 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 les onglets
-   */
-  isPointInside(x, y) {
-    return x >= this.x && x <= this.x + this.width && 
-           y >= this.y && y <= this.y + this.height;
+    
+    // Restaurer le contexte
+    ctx.restore();
   }
 }