canvasframework 0.5.18 → 0.5.20

package/components/Drawer.js

@@ -0,0 +1,276 @@
+import Component from '../core/Component.js';
+
+/**
+ * Tiroir latéral (navigation)
+ * @class
+ * @extends Component
+ * @property {number} targetX - Position X cible
+ * @property {Array} items - Items du drawer
+ * @property {Object|null} header - En-tête
+ * @property {Function} onItemClick - Callback au clic sur item
+ * @property {string} platform - Plateforme
+ * @property {boolean} animating - En cours d'animation
+ * @property {number} hoveredIndex - Index survolé
+ */
+class Drawer extends Component {
+  /**
+   * Crée une instance de Drawer
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {Array} [options.items=[]] - Items [{label, icon, divider}]
+   * @param {Object} [options.header] - En-tête {title}
+   * @param {Function} [options.onItemClick] - Callback au clic sur item
+   */
+  constructor(framework, options = {}) {
+    super(framework, {
+      x: -framework.width * 0.8,
+      y: 0,
+      width: framework.width * 0.8,
+      height: framework.height,
+      visible: false,
+      ...options
+    });
+    this.targetX = -this.width;
+    this.items = options.items || [];
+    this.header = options.header || null;
+    this.onItemClick = options.onItemClick;
+    this.platform = framework.platform;
+    this.animating = false;
+    this.hoveredIndex = -1;
+    
+    // Bind des méthodes
+    this.handlePress = this.handlePress.bind(this);
+    this.handleMove = this.handleMove.bind(this);
+    
+    // IMPORTANT: Définir les callbacks
+    this.onPress = this.handlePress;
+    this.onMove = this.handleMove;
+	// ✅ Se mettre automatiquement au-dessus de tous les composants
+	this.bringToFront();
+  }
+  
+  /**
+  * Met le drawer au-dessus de tous les composants
+  * @private
+  */
+  bringToFront() {
+    const index = this.framework.components.indexOf(this);
+    if (index > -1) {
+      this.framework.components.splice(index, 1);
+      this.framework.components.push(this);
+    }
+  }
+
+  /**
+   * Ouvre le drawer
+   */
+  open() {
+	this.bringToFront(); // ✅ Se remettre au-dessus à chaque ouverture
+    this.visible = true;
+    this.targetX = 0;
+    this.animate();
+  }
+
+  /**
+   * Ferme le drawer
+   */
+  close() {
+    this.targetX = -this.width;
+    this.animate();
+  }
+
+  /**
+   * Anime le drawer
+   * @private
+   */
+  animate() {
+    if (this.animating) return;
+    this.animating = true;
+    
+    const step = () => {
+      const diff = this.targetX - this.x;
+      if (Math.abs(diff) < 1) {
+        this.x = this.targetX;
+        this.animating = false;
+        if (this.targetX < 0) {
+          this.visible = false;
+        }
+        return;
+      }
+      this.x += diff * 0.2;
+      requestAnimationFrame(step);
+    };
+    step();
+  }
+
+  /**
+   * Vérifie dans quelle zone se trouve un point
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {string|null} Zone ('overlay', 'item', 'drawer', null si en dehors)
+   * @private
+   */
+  getZoneAtPoint(x, y) {
+    if (!this.visible) return null;
+    
+    // Vérifier si le point est dans l'overlay (toute la zone de l'écran)
+    // Mais on ne veut pas capturer les clics sur le drawer lui-même pour les items
+    if (x >= this.x && x <= this.x + this.width) {
+      // Le point est dans le drawer
+      const startY = this.header ? 150 : 0;
+      const index = Math.floor((y - startY) / 56);
+      if (index >= 0 && index < this.items.length) {
+        const itemY = startY + index * 56;
+        if (y >= itemY && y <= itemY + 56) {
+          return 'item';
+        }
+      }
+      return 'drawer';
+    }
+    
+    // Le point est dans l'overlay (zone sombre autour du drawer)
+    return 'overlay';
+  }
+
+  /**
+   * Gère la pression (clic)
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @private
+   */
+  handlePress(x, y) {
+    const zone = this.getZoneAtPoint(x, y);
+    
+    if (zone === 'overlay') {
+      // Clic sur l'overlay - fermer le drawer
+      this.close();
+      return true; // On a géré le clic
+    } else if (zone === 'item') {
+      // Clic sur un item
+      const startY = this.header ? 150 : 0;
+      const index = Math.floor((y - startY) / 56);
+      if (index >= 0 && index < this.items.length) {
+        if (this.onItemClick) {
+          this.onItemClick(index, this.items[index]);
+        }
+        this.close();
+      }
+      return true; // On a géré le clic
+    }
+    
+    // Clic sur le drawer (mais pas sur un item) - on ne fait rien mais on capture le clic
+    return true;
+  }
+  
+  /**
+   * Gère le mouvement (hover)
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @private
+   */
+  handleMove(x, y) {
+    if (!this.visible) return;
+    
+    const zone = this.getZoneAtPoint(x, y);
+    if (zone === 'item') {
+      const startY = this.header ? 150 : 0;
+      const index = Math.floor((y - startY) / 56);
+      this.hoveredIndex = index;
+    } else {
+      this.hoveredIndex = -1;
+    }
+  }
+
+  /**
+   * Vérifie si un point est dans les limites du drawer (inclut l'overlay)
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {boolean} True si le point est dans le drawer ou l'overlay
+   */
+  isPointInside(x, y) {
+    if (!this.visible) return false;
+    
+    // Quand le drawer est ouvert, il capture TOUS les clics sur l'écran
+    // car il a un overlay qui couvre tout
+    return true;
+  }
+
+  /**
+   * Dessine le drawer
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    if (!this.visible) return;
+    
+    ctx.save();
+    
+    // Overlay sombre avec opacité progressive
+    const overlayOpacity = Math.min(0.5, (this.x + this.width) / this.width * 0.5);
+    ctx.fillStyle = `rgba(0, 0, 0, ${overlayOpacity})`;
+    ctx.fillRect(0, 0, this.framework.width, this.framework.height);
+    
+    // Drawer
+    ctx.fillStyle = '#FFFFFF';
+    ctx.fillRect(this.x, this.y, this.width, this.height);
+    
+    // Ombre droite
+    const gradient = ctx.createLinearGradient(this.x + this.width, 0, this.x + this.width + 10, 0);
+    gradient.addColorStop(0, 'rgba(0, 0, 0, 0.2)');
+    gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+    ctx.fillStyle = gradient;
+    ctx.fillRect(this.x + this.width, 0, 10, this.height);
+    
+    // Header
+    if (this.header) {
+      ctx.fillStyle = this.platform === 'material' ? '#6200EE' : '#F8F8F8';
+      ctx.fillRect(this.x, this.y, this.width, 150);
+      
+      ctx.fillStyle = this.platform === 'material' ? '#FFFFFF' : '#000000';
+      ctx.font = 'bold 24px -apple-system, Roboto, sans-serif';
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'bottom';
+      ctx.fillText(this.header.title || '', this.x + 20, this.y + 130);
+    }
+    
+    // Items
+    const startY = this.header ? 150 : 0;
+    for (let i = 0; i < this.items.length; i++) {
+      const item = this.items[i];
+      const itemY = this.y + startY + i * 56;
+      
+      // Hover effect
+      if (this.hoveredIndex === i) {
+        ctx.fillStyle = '#F5F5F5';
+        ctx.fillRect(this.x, itemY, this.width, 56);
+      }
+      
+      // Icon
+      if (item.icon) {
+        ctx.fillStyle = '#757575';
+        ctx.font = '20px -apple-system, Roboto, sans-serif';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(item.icon, this.x + 20, itemY + 28);
+      }
+      
+      // Label
+      ctx.fillStyle = '#000000';
+      ctx.font = '16px -apple-system, Roboto, sans-serif';
+      ctx.fillText(item.label, this.x + (item.icon ? 72 : 20), itemY + 28);
+      
+      // Divider
+      if (item.divider) {
+        ctx.strokeStyle = '#E0E0E0';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(this.x, itemY + 56);
+        ctx.lineTo(this.x + this.width, itemY + 56);
+        ctx.stroke();
+      }
+    }
+    
+    ctx.restore();
+  }
+}
+
+export default Drawer;

package/components/FAB.js

@@ -0,0 +1,270 @@
+import Component from '../core/Component.js';
+
+/**
+ * Bouton d'action flottant (Material Design 3)
+ * @class
+ * @extends Component
+ * @property {string} icon - Icône du bouton
+ * @property {boolean} extended - Mode étendu (avec texte)
+ * @property {string} text - Texte (en mode étendu)
+ * @property {string} platform - Plateforme
+ * @property {string} variant - Variante Material 3: 'small', 'medium', 'large', 'extended'
+ * @property {number} size - Taille du bouton
+ * @property {string} bgColor - Couleur de fond
+ * @property {string} iconColor - Couleur de l'icône
+ * @property {Array} ripples - Effets ripple
+ */
+class FAB extends Component {
+  /**
+   * Crée une instance de FAB
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {string} [options.icon='+'] - Icône
+   * @param {boolean} [options.extended=false] - Mode étendu
+   * @param {string} [options.text=''] - Texte (mode étendu)
+   * @param {string} [options.variant='medium'] - Variante: 'small', 'medium', 'large', 'extended'
+   * @param {string} [options.bgColor] - Couleur (auto selon platform)
+   * @param {string} [options.iconColor='#FFFFFF'] - Couleur de l'icône
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    
+    this.icon = options.icon || '+';
+    this.extended = options.extended || false;
+    this.text = options.text || '';
+    this.platform = framework.platform;
+    this.variant = options.variant || 'medium';
+    
+    // Tailles selon Material Design 3
+    const sizes = {
+      small: 40,
+      medium: 56,
+      large: 96
+    };
+    
+    this.size = options.size || sizes[this.variant] || 56;
+    
+    // Couleurs Material 3
+    this.bgColor = options.bgColor || (framework.platform === 'material' ? '#6750A4' : '#007AFF');
+    this.iconColor = options.iconColor || '#FFFFFF';
+    
+    // Border radius selon Material 3 (pas circulaire!)
+    this.borderRadius = {
+      small: 12,
+      medium: 16,
+      large: 28,
+      extended: 16
+    }[this.variant] || 16;
+    
+    // Position par défaut en bas à droite
+    this.x = options.x !== undefined ? options.x : framework.width - this.size - 16;
+    this.y = options.y !== undefined ? options.y : framework.height - this.size - 80;
+    
+    // Si extended, ajuster la largeur
+    if (this.extended && this.text) {
+      const ctx = framework.ctx;
+      ctx.save();
+      ctx.font = 'bold 14px -apple-system, sans-serif';
+      const textWidth = ctx.measureText(this.text).width;
+      ctx.restore();
+      this.width = this.size + textWidth + 24;
+      this.borderRadius = 16;
+    } else {
+      this.width = this.size;
+    }
+    this.height = this.size;
+    
+    // Effet ripple
+    this.ripples = [];
+    
+    // ✅ CORRECTION : Binder onPress comme dans Button
+    this.onPress = this.handlePress.bind(this);
+  }
+  
+  /**
+   * Gère la pression sur le FAB
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @private
+   */
+  handlePress(x, y) {
+    // Créer un ripple au point de clic (Material uniquement)
+    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();
+    }
+  }
+  
+  /**
+   * Anime l'effet ripple
+   * @private
+   */
+  animateRipple() {
+    const animate = () => {
+      let hasActiveRipples = false;
+      
+      for (let ripple of this.ripples) {
+        if (ripple.radius < ripple.maxRadius) {
+          ripple.radius += ripple.maxRadius / 15;
+          hasActiveRipples = true;
+        }
+        
+        // Fade out après 50% de l'expansion
+        if (ripple.radius >= ripple.maxRadius * 0.5) {
+          ripple.opacity -= 0.05;
+        }
+      }
+      
+      // Nettoyer les ripples terminés
+      this.ripples = this.ripples.filter(r => r.opacity > 0);
+      
+      if (hasActiveRipples) {
+        requestAnimationFrame(animate);
+      }
+    };
+    
+    animate();
+  }
+  
+  /**
+   * Dessine le FAB
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    // Ombre (elevation)
+    if (!this.pressed) {
+      ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
+      ctx.shadowBlur = this.platform === 'material' ? 8 : 12;
+      ctx.shadowOffsetY = this.platform === 'material' ? 4 : 6;
+    }
+    
+    // Background - Material 3: rectangles arrondis, pas cercles!
+    ctx.fillStyle = this.pressed ? this.darkenColor(this.bgColor) : this.bgColor;
+    ctx.beginPath();
+    this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+    ctx.fill();
+    
+    ctx.shadowColor = 'transparent';
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetY = 0;
+    
+    // Clipping pour les ripples (Material uniquement)
+    if (this.platform === 'material') {
+      ctx.save();
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+      ctx.clip();
+      
+      // Dessiner les ripples
+      for (let ripple of this.ripples) {
+        ctx.globalAlpha = ripple.opacity;
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+        ctx.beginPath();
+        ctx.arc(this.x + ripple.x, this.y + ripple.y, ripple.radius, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      
+      ctx.restore();
+    }
+    
+    // Overlay si pressed (iOS)
+    if (this.pressed && this.platform === 'cupertino') {
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+      ctx.fill();
+    }
+    
+    // Icône
+    ctx.fillStyle = this.iconColor;
+    const iconSize = this.variant === 'large' ? 36 : 24;
+    ctx.font = `bold ${iconSize}px sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    
+    if (this.extended && this.text) {
+      // Icône à gauche
+      ctx.fillText(this.icon, this.x + this.size / 2, this.y + this.size / 2);
+      
+      // Texte à droite
+      ctx.font = 'bold 14px -apple-system, sans-serif';
+      ctx.fillText(this.text, this.x + this.size + 12, this.y + this.size / 2);
+    } else {
+      // Icône centrée
+      ctx.fillText(this.icon, this.x + this.width / 2, this.y + this.height / 2);
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Dessine un rectangle avec coins arrondis
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   * @param {number} x - Position X
+   * @param {number} y - Position Y
+   * @param {number} width - Largeur
+   * @param {number} height - Hauteur
+   * @param {number} radius - Rayon des coins
+   * @private
+   */
+  roundRect(ctx, x, y, width, height, radius) {
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+  }
+  
+  /**
+   * Assombrit une couleur
+   * @param {string} color - Couleur hexadécimale
+   * @returns {string} Couleur assombrie
+   * @private
+   */
+  darkenColor(color) {
+    const rgb = this.hexToRgb(color);
+    return `rgb(${Math.max(0, rgb.r - 30)}, ${Math.max(0, rgb.g - 30)}, ${Math.max(0, rgb.b - 30)})`;
+  }
+  
+  /**
+   * Convertit une couleur hex en RGB
+   * @param {string} hex - Couleur hexadécimale
+   * @returns {{r: number, g: number, b: number}} Objet RGB
+   * @private
+   */
+  hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : { r: 0, g: 0, b: 0 };
+  }
+  
+  /**
+   * 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 le FAB
+   */
+  isPointInside(x, y) {
+    // Material 3: toujours des rectangles arrondis, plus de cercles
+    return x >= this.x && x <= this.x + this.width && 
+           y >= this.y && y <= this.y + this.height;
+  }
+}
+
+export default FAB;