canvasframework 0.3.8 → 0.3.9

package/components/Button.js

@@ -1,17 +1,13 @@
 import Component from '../core/Component.js';
 
 /**
- * Bouton cliquable
+ * Bouton cliquable avec variantes Material et Cupertino
  * @class
  * @extends Component
- * @property {string} text - Texte du bouton
- * @property {number} fontSize - Taille de la police
- * @property {string} platform - Plateforme
- * @property {string} bgColor - Couleur de fond
- * @property {string} textColor - Couleur du texte
- * @property {string} rippleColor - Couleur du ripple
- * @property {number} elevation - Élévation (ombre)
- * @property {Array} ripples - Effets ripple
+ * 
+ * Types Material: 'filled', 'outlined', 'text', 'elevated', 'tonal'
+ * Types Cupertino: 'filled', 'gray', 'tinted', 'bordered', 'plain'
+ * Shapes: 'rounded', 'square', 'pill' (très arrondi)
  */
 class Button extends Component {
   /**
@@ -20,35 +16,135 @@ class Button extends Component {
    * @param {Object} [options={}] - Options de configuration
    * @param {string} [options.text='Button'] - Texte
    * @param {number} [options.fontSize=16] - Taille de police
-   * @param {string} [options.bgColor] - Couleur de fond (auto selon platform)
-   * @param {string} [options.textColor] - Couleur du texte (auto selon platform)
-   * @param {number} [options.elevation=2] - Élévation (Material)
+   * @param {string} [options.type] - Type de bouton (auto selon platform)
+   * @param {string} [options.shape='rounded'] - Forme: 'rounded', 'square', 'pill'
+   * @param {string} [options.bgColor] - Couleur personnalisée
+   * @param {string} [options.textColor] - Couleur du texte personnalisée
+   * @param {number} [options.elevation=2] - Élévation (Material elevated)
    */
   constructor(framework, options = {}) {
     super(framework, options);
     this.text = options.text || 'Button';
     this.fontSize = options.fontSize || 16;
     this.platform = framework.platform;
+    this.shape = options.shape || 'rounded';
     
-    // Couleurs selon la plateforme
+    // Définir le type de bouton selon la plateforme
     if (this.platform === 'material') {
-      this.bgColor = options.bgColor || '#6200EE';
-      this.textColor = options.textColor || '#FFFFFF';
-      this.rippleColor = 'rgba(255, 255, 255, 0.3)';
-      this.elevation = options.elevation || 2;
+      this.type = options.type || 'filled';
+      this.setupMaterialStyle(options);
     } else {
-      this.bgColor = options.bgColor || '#007AFF';
-      this.textColor = options.textColor || '#FFFFFF';
-      this.borderRadius = 10;
+      this.type = options.type || 'filled';
+      this.setupCupertinoStyle(options);
     }
     
-    // Effet Ripple
+    // Effets ripple (Material uniquement)
     this.ripples = [];
     
-    // Bind des méthodes
+    // Bind
     this.onPress = this.handlePress.bind(this);
   }
   
+  /**
+   * Configure le style Material Design
+   * @private
+   */
+  setupMaterialStyle(options) {
+    const baseColor = options.bgColor || '#6200EE';
+    this.elevation = options.elevation || 2;
+    
+    switch (this.type) {
+      case 'filled':
+        this.bgColor = baseColor;
+        this.textColor = options.textColor || '#FFFFFF';
+        this.borderWidth = 0;
+        this.rippleColor = 'rgba(255, 255, 255, 0.3)';
+        break;
+        
+      case 'outlined':
+        this.bgColor = 'transparent';
+        this.textColor = options.textColor || baseColor;
+        this.borderColor = baseColor;
+        this.borderWidth = 1;
+        this.rippleColor = this.hexToRgba(baseColor, 0.2);
+        this.elevation = 0;
+        break;
+        
+      case 'text':
+        this.bgColor = 'transparent';
+        this.textColor = options.textColor || baseColor;
+        this.borderWidth = 0;
+        this.rippleColor = this.hexToRgba(baseColor, 0.2);
+        this.elevation = 0;
+        break;
+        
+      case 'elevated':
+        this.bgColor = options.bgColor || '#FFFFFF';
+        this.textColor = options.textColor || baseColor;
+        this.borderWidth = 0;
+        this.rippleColor = this.hexToRgba(baseColor, 0.2);
+        this.elevation = options.elevation || 4;
+        break;
+        
+      case 'tonal':
+        this.bgColor = this.hexToRgba(baseColor, 0.3);
+        this.textColor = options.textColor || baseColor;
+        this.borderWidth = 0;
+        this.rippleColor = this.hexToRgba(baseColor, 0.3);
+        this.elevation = 0;
+        break;
+    }
+  }
+  
+  /**
+   * Configure le style Cupertino (iOS)
+   * @private
+   */
+  setupCupertinoStyle(options) {
+    const baseColor = options.bgColor || '#007AFF';
+    
+    switch (this.type) {
+      case 'filled':
+        this.bgColor = baseColor;
+        this.textColor = options.textColor || '#FFFFFF';
+        this.borderWidth = 0;
+        break;
+        
+      case 'gray':
+        this.bgColor = 'rgba(120, 120, 128, 0.16)';
+        this.textColor = options.textColor || baseColor;
+        this.borderWidth = 0;
+        break;
+        
+      case 'tinted':
+        this.bgColor = this.hexToRgba(baseColor, 0.2);
+        this.textColor = options.textColor || baseColor;
+        this.borderWidth = 0;
+        break;
+        
+      case 'plain':
+        this.bgColor = 'transparent';
+        this.textColor = options.textColor || baseColor;
+        this.borderWidth = 0;
+        break;
+    }
+  }
+  
+  /**
+   * Retourne le rayon des coins selon la forme
+   * @returns {number} Rayon en pixels
+   * @private
+   */
+  getBorderRadius() {
+    switch (this.shape) {
+      case 'square':
+        return 0;
+      case 'rounded':
+      default:
+        return this.platform === 'material' ? 4 : 10;
+    }
+  }
+  
   /**
    * Gère la pression sur le bouton
    * @param {number} x - Coordonnée X
@@ -56,7 +152,6 @@ class Button extends Component {
    * @private
    */
   handlePress(x, y) {
-    // Créer un ripple au point de clic
     if (this.platform === 'material') {
       const adjustedY = y - this.framework.scrollOffset;
       this.ripples.push({
@@ -89,7 +184,6 @@ class Button extends Component {
         }
       }
       
-      // Nettoyer les ripples terminés
       this.ripples = this.ripples.filter(r => r.opacity > 0);
       
       if (hasActiveRipples) {
@@ -107,31 +201,44 @@ class Button extends Component {
   draw(ctx) {
     ctx.save();
     
-    if (this.platform === 'material') {
-      // Material Design
-      // Ombre (elevation)
-      if (this.elevation > 0 && !this.pressed) {
-        ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
-        ctx.shadowBlur = this.elevation * 2;
-        ctx.shadowOffsetY = this.elevation;
-      }
-      
+    const radius = this.getBorderRadius();
+    
+    // Ombre Material (elevated/filled)
+    if (this.platform === 'material' && this.elevation > 0 && !this.pressed) {
+      ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
+      ctx.shadowBlur = this.elevation * 2;
+      ctx.shadowOffsetY = this.elevation;
+    }
+    
+    // Background
+    if (this.bgColor !== 'transparent') {
       ctx.fillStyle = this.pressed ? this.darkenColor(this.bgColor) : this.bgColor;
       ctx.beginPath();
-      this.roundRect(ctx, this.x, this.y, this.width, this.height, 4);
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, radius);
       ctx.fill();
-      
-      ctx.shadowColor = 'transparent';
-      ctx.shadowBlur = 0;
-      ctx.shadowOffsetY = 0;
-      
-      // Clipping pour les ripples
+    }
+    
+    // Réinitialiser l'ombre
+    ctx.shadowColor = 'transparent';
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetY = 0;
+    
+    // Bordure
+    if (this.borderWidth > 0) {
+      ctx.strokeStyle = this.borderColor;
+      ctx.lineWidth = this.borderWidth;
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, radius);
+      ctx.stroke();
+    }
+    
+    // Ripple effect (Material)
+    if (this.platform === 'material') {
       ctx.save();
       ctx.beginPath();
-      this.roundRect(ctx, this.x, this.y, this.width, this.height, 4);
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, radius);
       ctx.clip();
       
-      // Dessiner les ripples
       for (let ripple of this.ripples) {
         ctx.globalAlpha = ripple.opacity;
         ctx.fillStyle = this.rippleColor;
@@ -141,17 +248,20 @@ class Button extends Component {
       }
       
       ctx.restore();
-      
-    } else {
-      // Cupertino (iOS)
-      ctx.fillStyle = this.pressed ? this.darkenColor(this.bgColor) : this.bgColor;
+    }
+    
+    // Effet pressed pour iOS (overlay sombre)
+    if (this.platform === 'cupertino' && this.pressed && this.bgColor !== 'transparent') {
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
       ctx.beginPath();
-      this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, radius);
       ctx.fill();
     }
     
     // Texte
-    ctx.fillStyle = this.textColor;
+    ctx.fillStyle = this.pressed && this.platform === 'cupertino' 
+      ? this.darkenColor(this.textColor) 
+      : this.textColor;
     ctx.font = `${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
@@ -162,15 +272,14 @@ class Button extends Component {
 
   /**
    * 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) {
+    if (radius === 0) {
+      ctx.rect(x, y, width, height);
+      return;
+    }
+    
     ctx.moveTo(x + radius, y);
     ctx.lineTo(x + width - radius, y);
     ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
@@ -184,19 +293,24 @@ class Button extends Component {
 
   /**
    * Assombrit une couleur
-   * @param {string} color - Couleur hexadécimale
-   * @returns {string} Couleur assombrie
    * @private
    */
   darkenColor(color) {
+    if (color === 'transparent') return 'rgba(0, 0, 0, 0.1)';
+    
+    if (color.startsWith('rgba') || color.startsWith('rgb')) {
+      return color.replace(/[\d.]+\)$/g, match => {
+        const val = parseFloat(match);
+        return `${Math.max(0, val - 0.1)})`;
+      });
+    }
+    
     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
+   * Convertit hex en RGB
    * @private
    */
   hexToRgb(hex) {
@@ -208,11 +322,17 @@ class Button extends Component {
     } : { r: 0, g: 0, b: 0 };
   }
 
+  /**
+   * Convertit hex en RGBA avec alpha
+   * @private
+   */
+  hexToRgba(hex, alpha) {
+    const rgb = this.hexToRgb(hex);
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+  }
+
   /**
    * 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 bouton
    */
   isPointInside(x, y) {
     return x >= this.x && 

package/components/MorphingFAB.js

@@ -0,0 +1,428 @@
+import FAB from './FAB.js';
+
+/**
+ * Morphing FAB - FAB qui se transforme en barre d'actions
+ * @class
+ * @extends FAB
+ * @property {boolean} isMorphed - État transformé
+ * @property {Array} actions - Actions disponibles dans la barre
+ * @property {number} morphProgress - Progression de l'animation (0-1)
+ * @property {number} targetWidth - Largeur cible en mode morphé
+ */
+class MorphingFAB extends FAB {
+  /**
+   * Crée une instance de MorphingFAB
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {Array} [options.actions=[]] - Actions de la barre
+   * @param {string} [options.morphType='toolbar'] - Type: 'toolbar', 'searchbar'
+   * @example
+   * // Toolbar
+   * actions: [
+   *   { icon: '🏠', label: 'Home', action: () => {...} },
+   *   { icon: '⭐', label: 'Favorites', action: () => {...} },
+   *   { icon: '⚙', label: 'Settings', action: () => {...} }
+   * ]
+   * 
+   * // Searchbar
+   * morphType: 'searchbar'
+   */
+  constructor(framework, options = {}) {
+    super(framework, {
+      ...options,
+      icon: options.icon || '+'
+    });
+    
+    this.actions = options.actions || [];
+    this.morphType = options.morphType || 'toolbar';
+    this.isMorphed = false;
+    this.morphProgress = 0;
+    
+    // Dimensions
+    this.originalWidth = this.width;
+    this.originalHeight = this.height;
+    this.originalX = this.x;
+    this.originalY = this.y;
+    
+    // Calculer la largeur cible selon le type
+    if (this.morphType === 'searchbar') {
+      this.targetWidth = Math.min(framework.width - 32, 400);
+      this.targetHeight = 56;
+      this.targetX = (framework.width - this.targetWidth) / 2;
+      this.targetY = 16;
+    } else {
+      // toolbar
+      this.targetWidth = Math.min(framework.width - 32, this.actions.length * 80 + 32);
+      this.targetHeight = 56;
+      this.targetX = (framework.width - this.targetWidth) / 2;
+      this.targetY = framework.height - 80;
+    }
+    
+    // État des boutons d'actions
+    this.actionButtons = this.actions.map((action, index) => ({
+      ...action,
+      x: 0,
+      y: 0,
+      width: 60,
+      height: 48,
+      alpha: 0,
+      pressed: false
+    }));
+    
+    // État de la searchbar
+    this.searchText = '';
+    this.searchFocused = false;
+    
+    // Input caché pour la searchbar
+    if (this.morphType === 'searchbar') {
+      this.setupHiddenInput();
+    }
+    
+    // Bind
+    this.onPress = this.handlePress.bind(this);
+  }
+  
+  /**
+   * Configure l'input HTML caché pour la searchbar
+   * @private
+   */
+  setupHiddenInput() {
+    this.hiddenInput = document.createElement('input');
+    this.hiddenInput.style.position = 'fixed';
+    this.hiddenInput.style.opacity = '0';
+    this.hiddenInput.style.pointerEvents = 'none';
+    this.hiddenInput.style.top = '-100px';
+    document.body.appendChild(this.hiddenInput);
+    
+    this.hiddenInput.addEventListener('input', (e) => {
+      if (this.searchFocused) {
+        this.searchText = e.target.value;
+      }
+    });
+    
+    this.hiddenInput.addEventListener('blur', () => {
+      this.searchFocused = false;
+    });
+  }
+  
+  /**
+   * Gère la pression
+   */
+  handlePress(x, y) {
+    const adjustedY = y - this.framework.scrollOffset;
+    
+    if (this.isMorphed) {
+      // Mode morphé
+      if (this.morphType === 'searchbar') {
+        // Zone de l'input searchbar
+        const searchInputX = this.x + 48;
+        const searchInputWidth = this.width - 96;
+        
+        if (x >= searchInputX && x <= searchInputX + searchInputWidth &&
+            adjustedY >= this.y && adjustedY <= this.y + this.height) {
+          // Clic sur l'input - activer le focus
+          this.searchFocused = true;
+          if (this.hiddenInput) {
+            this.hiddenInput.value = this.searchText;
+            this.hiddenInput.style.top = `${this.y}px`;
+            this.hiddenInput.focus();
+          }
+          return;
+        }
+        
+        // Bouton fermer (X)
+        const closeX = this.x + this.width - 40;
+        if (x >= closeX && x <= closeX + 40 &&
+            adjustedY >= this.y && adjustedY <= this.y + this.height) {
+          this.searchText = '';
+          this.toggle();
+          return;
+        }
+      } else {
+        // Toolbar - vérifier les actions
+        for (let btn of this.actionButtons) {
+          if (x >= btn.x && x <= btn.x + btn.width &&
+              adjustedY >= btn.y && adjustedY <= btn.y + btn.height) {
+            btn.pressed = true;
+            setTimeout(() => {
+              btn.pressed = false;
+              if (btn.action) btn.action();
+            }, 150);
+            return;
+          }
+        }
+      }
+      
+      // Clic en dehors -> fermer
+      if (!this.isPointInside(x, y)) {
+        this.toggle();
+      }
+    } else {
+      // Mode normal - ouvrir
+      this.toggle();
+      super.handlePress(x, y);
+    }
+  }
+  
+  /**
+   * Toggle entre FAB et barre
+   */
+  toggle() {
+    this.isMorphed = !this.isMorphed;
+    
+    // Si on ferme et que c'est une searchbar, nettoyer l'input
+    if (!this.isMorphed && this.morphType === 'searchbar') {
+      this.searchText = '';
+      this.searchFocused = false;
+      if (this.hiddenInput) {
+        this.hiddenInput.blur();
+        this.hiddenInput.remove();
+        this.hiddenInput = null;
+      }
+    }
+    
+    // Si on ouvre une searchbar, recréer l'input
+    if (this.isMorphed && this.morphType === 'searchbar' && !this.hiddenInput) {
+      this.setupHiddenInput();
+    }
+    
+    this.animate();
+  }
+  
+  /**
+   * Anime la transformation
+   * @private
+   */
+  animate() {
+    const startTime = Date.now();
+    const duration = 400;
+    
+    const step = () => {
+      const elapsed = Date.now() - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      
+      // Easing out cubic
+      const eased = 1 - Math.pow(1 - progress, 3);
+      
+      this.morphProgress = this.isMorphed ? eased : 1 - eased;
+      
+      // Interpoler les dimensions
+      this.width = this.lerp(this.originalWidth, this.targetWidth, this.morphProgress);
+      this.height = this.lerp(this.originalHeight, this.targetHeight, this.morphProgress);
+      this.x = this.lerp(this.originalX, this.targetX, this.morphProgress);
+      this.y = this.lerp(this.originalY, this.targetY, this.morphProgress);
+      
+      // Mettre à jour les positions des actions
+      if (this.morphType === 'toolbar') {
+        this.updateActionPositions();
+      }
+      
+      if (progress < 1) {
+        requestAnimationFrame(step);
+      }
+    };
+    
+    step();
+  }
+  
+  /**
+   * Met à jour les positions des boutons d'action
+   * @private
+   */
+  updateActionPositions() {
+    const spacing = this.targetWidth / (this.actionButtons.length + 1);
+    
+    this.actionButtons.forEach((btn, index) => {
+      btn.x = this.x + spacing * (index + 1) - btn.width / 2;
+      btn.y = this.y + (this.height - btn.height) / 2;
+      btn.alpha = this.morphProgress;
+    });
+  }
+  
+  /**
+   * Interpolation linéaire
+   * @private
+   */
+  lerp(start, end, t) {
+    return start + (end - start) * t;
+  }
+  
+  /**
+   * Dessine le Morphing FAB
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    if (this.isMorphed || this.morphProgress > 0) {
+      this.drawMorphed(ctx);
+    } else {
+      super.draw(ctx);
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Dessine l'état morphé
+   * @private
+   */
+  drawMorphed(ctx) {
+    // Ombre
+    ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
+    ctx.shadowBlur = 12;
+    ctx.shadowOffsetY = 4;
+    
+    // Background de la barre
+    ctx.fillStyle = this.bgColor;
+    ctx.beginPath();
+    const radius = this.lerp(this.borderRadius, 28, this.morphProgress);
+    this.roundRect(ctx, this.x, this.y, this.width, this.height, radius);
+    ctx.fill();
+    
+    ctx.shadowColor = 'transparent';
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetY = 0;
+    
+    if (this.morphType === 'searchbar') {
+      this.drawSearchBar(ctx);
+    } else {
+      this.drawToolbar(ctx);
+    }
+  }
+  
+  /**
+   * Dessine la toolbar
+   * @private
+   */
+  drawToolbar(ctx) {
+    // Dessiner les actions
+    for (let btn of this.actionButtons) {
+      if (btn.alpha > 0.01) {
+        ctx.save();
+        ctx.globalAlpha = btn.alpha;
+        
+        // Highlight si pressed
+        if (btn.pressed) {
+          ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
+          ctx.beginPath();
+          ctx.arc(btn.x + btn.width / 2, btn.y + btn.height / 2, 24, 0, Math.PI * 2);
+          ctx.fill();
+        }
+        
+        // Icône
+        ctx.fillStyle = this.iconColor;
+        ctx.font = 'bold 20px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(btn.icon, btn.x + btn.width / 2, btn.y + btn.height / 2 - 8);
+        
+        // Label
+        if (btn.label) {
+          ctx.font = '11px -apple-system, sans-serif';
+          ctx.fillText(btn.label, btn.x + btn.width / 2, btn.y + btn.height / 2 + 12);
+        }
+        
+        ctx.restore();
+      }
+    }
+  }
+  
+  /**
+   * Dessine la search bar
+   * @private
+   */
+  drawSearchBar(ctx) {
+    ctx.save();
+    ctx.globalAlpha = this.morphProgress;
+    
+    // Icône de recherche
+    ctx.fillStyle = this.iconColor;
+    ctx.font = 'bold 20px sans-serif';
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('🔍', this.x + 16, this.y + this.height / 2);
+    
+    // Curseur clignotant si focus
+    let showCursor = false;
+    if (this.searchFocused) {
+      showCursor = Math.floor(Date.now() / 500) % 2 === 0;
+    }
+    
+    // Placeholder ou texte
+    ctx.font = '16px -apple-system, sans-serif';
+    ctx.fillStyle = this.searchText ? this.iconColor : 'rgba(255, 255, 255, 0.6)';
+    const displayText = this.searchText || 'Search...';
+    ctx.fillText(displayText, this.x + 48, this.y + this.height / 2);
+    
+    // Curseur
+    if (showCursor && this.searchText) {
+      const textWidth = ctx.measureText(this.searchText).width;
+      ctx.fillStyle = this.iconColor;
+      ctx.fillRect(this.x + 48 + textWidth + 2, this.y + this.height / 2 - 10, 2, 20);
+    }
+    
+    // Bouton fermer
+    if (this.searchText || this.isMorphed) {
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+      ctx.font = 'bold 18px sans-serif';
+      ctx.textAlign = 'right';
+      ctx.fillText('✕', this.x + this.width - 16, this.y + this.height / 2);
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Dessine un rectangle arrondi
+   * @private
+   */
+  roundRect(ctx, x, y, width, height, radius) {
+    ctx.beginPath();
+    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);
+  }
+  
+  /**
+   * Vérifie si un point est dans le composant
+   */
+  isPointInside(x, y) {
+    const adjustedY = y - this.framework.scrollOffset;
+    return x >= this.x && x <= this.x + this.width &&
+           adjustedY >= this.y && adjustedY <= this.y + this.height;
+  }
+  
+  /**
+   * Gère l'input texte (pour searchbar)
+   * @param {string} char - Caractère à ajouter
+   */
+  addChar(char) {
+    if (this.morphType === 'searchbar' && this.isMorphed) {
+      this.searchText += char;
+    }
+  }
+  
+  /**
+   * Efface un caractère
+   */
+  backspace() {
+    if (this.morphType === 'searchbar' && this.isMorphed) {
+      this.searchText = this.searchText.slice(0, -1);
+    }
+  }
+  
+  /**
+   * Réinitialise la recherche
+   */
+  clearSearch() {
+    this.searchText = '';
+  }
+}
+
+export default MorphingFAB;

package/components/SpeedDialFAB.js

@@ -0,0 +1,397 @@
+import FAB from './FAB.js';
+
+/**
+ * Speed Dial FAB - FAB qui ouvre un menu d'actions
+ * @class
+ * @extends FAB
+ * @property {Array} actions - Liste des actions du menu
+ * @property {boolean} isOpen - État ouvert/fermé
+ * @property {number} animProgress - Progression de l'animation (0-1)
+ */
+class SpeedDialFAB extends FAB {
+  /**
+   * Crée une instance de SpeedDialFAB
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {Array} [options.actions=[]] - Actions du menu
+   * @example
+   * actions: [
+   *   { icon: '✉', label: 'Email', bgColor: '#4CAF50', action: () => {...} },
+   *   { icon: '📞', label: 'Call', bgColor: '#2196F3', action: () => {...} },
+   *   { icon: '📍', label: Map', bgColor: '#FF9800', action: () => {...} }
+   * ]
+   */
+  constructor(framework, options = {}) {
+    super(framework, {
+      ...options,
+      icon: options.icon || '+'
+    });
+    
+    this.actions = options.actions || [];
+    this.isOpen = false;
+    this.animProgress = 0;
+    this.actionSpacing = 72; // Espacement entre les mini FABs
+    
+    // AJOUT: Flags pour gérer l'interaction
+    this.justClicked = false; // Pour éviter la fermeture immédiate
+    this.clickStartTime = 0;
+    this.clickStartY = 0;
+    this.isScrolling = false;
+    this.scrollThreshold = 5; // Seuil de mouvement pour détecter un scroll
+    
+    // Initialiser les mini FABs
+    this.miniFabs = this.actions.map((action, index) => ({
+      ...action,
+      size: 48,
+      x: this.x,
+      y: this.y,
+      targetY: this.y - (index + 1) * this.actionSpacing,
+      currentY: this.y,
+      alpha: 0,
+      pressed: false
+    }));
+    
+    // Overlay pour fermer le menu
+    this.showOverlay = false;
+    
+    // Bind methods
+    this.onPress = this.handlePress.bind(this);
+    this.onMove = this.handleMove.bind(this);
+  }
+  
+  /**
+   * Gère le début de la pression
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   */
+  handlePress(x, y) {
+    this.justClicked = true;
+    this.clickStartTime = Date.now();
+    this.clickStartY = y;
+    this.isScrolling = false;
+    
+    const adjustedY = y - this.framework.scrollOffset;
+    
+    // 1. Vérifier si c'est le FAB principal
+    const isMainFabClick = x >= this.x && x <= this.x + this.width &&
+                           adjustedY >= this.y && adjustedY <= this.y + this.height;
+    
+    if (isMainFabClick) {
+      // Le FAB principal peut toujours être cliqué (ouvrir/fermer)
+      this.toggle();
+      super.handlePress(x, y);
+      
+      // Empêcher la fermeture immédiate
+      setTimeout(() => {
+        this.justClicked = false;
+      }, 300);
+      return;
+    }
+    
+    // 2. Si le menu est ouvert, vérifier les mini FABs
+    if (this.isOpen) {
+      for (let i = 0; i < this.miniFabs.length; i++) {
+        const fab = this.miniFabs[i];
+        if (fab.alpha < 0.5) continue; // Ignorer les FABs pas encore visibles
+        
+        const fabX = this.x + (this.width - fab.size) / 2;
+        const fabY = fab.currentY;
+        
+        const distance = Math.sqrt(
+          Math.pow(x - (fabX + fab.size / 2), 2) +
+          Math.pow(adjustedY - (fabY + fab.size / 2), 2)
+        );
+        
+        if (distance <= fab.size / 2) {
+          // Action cliquée
+          fab.pressed = true;
+          setTimeout(() => {
+            fab.pressed = false;
+            if (fab.action) fab.action();
+            this.close();
+          }, 150);
+          
+          // Empêcher la fermeture par handleClickOutside
+          this.justClicked = true;
+          setTimeout(() => {
+            this.justClicked = false;
+          }, 300);
+          return;
+        }
+      }
+      
+      // 3. Clic sur overlay (n'importe où ailleurs)
+      // Ne pas fermer immédiatement, attendre la fin du mouvement
+    }
+    
+    // Pas de return ici, la fermeture sera gérée par handleClickOutside
+    // avec vérification du mouvement
+  }
+  
+  /**
+   * Gère le mouvement
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   */
+  handleMove(x, y) {
+    // Détecter si c'est un scroll
+    const deltaY = Math.abs(y - this.clickStartY);
+    if (deltaY > this.scrollThreshold) {
+      this.isScrolling = true;
+    }
+  }
+  
+  /**
+   * Ouvre le menu
+   */
+  open() {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    this.showOverlay = true;
+    this.animate();
+  }
+  
+  /**
+   * Ferme le menu
+   */
+  close() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.animate();
+  }
+  
+  /**
+   * Toggle l'état ouvert/fermé
+   */
+  toggle() {
+    this.isOpen ? this.close() : this.open();
+  }
+  
+  /**
+   * Anime l'ouverture/fermeture
+   * @private
+   */
+  animate() {
+    const startTime = Date.now();
+    const duration = 300;
+    
+    const step = () => {
+      const elapsed = Date.now() - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      
+      // Easing out cubic
+      const eased = 1 - Math.pow(1 - progress, 3);
+      
+      this.animProgress = this.isOpen ? eased : 1 - eased;
+      
+      // Mettre à jour les positions des mini FABs
+      this.miniFabs.forEach((fab, index) => {
+        const delay = index * 0.05;
+        const fabProgress = Math.max(0, Math.min(1, (this.animProgress - delay) / (1 - delay)));
+        
+        fab.currentY = this.y - (fabProgress * (index + 1) * this.actionSpacing);
+        fab.alpha = fabProgress;
+      });
+      
+      if (progress < 1) {
+        requestAnimationFrame(step);
+      } else {
+        if (!this.isOpen) {
+          this.showOverlay = false;
+        }
+      }
+    };
+    
+    step();
+  }
+  
+  /**
+   * Dessine le Speed Dial FAB
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    // Overlay semi-transparent avec gestion du clic
+    if (this.showOverlay) {
+      ctx.save();
+      ctx.fillStyle = `rgba(0, 0, 0, ${this.animProgress * 0.5})`;
+      ctx.fillRect(0, 0, this.framework.width, this.framework.height);
+      ctx.restore();
+      
+      // Dessiner une zone invisible pour détecter les clics sur l'overlay
+      // On enregistre cette zone pour la détection
+      this.overlayActive = true;
+    } else {
+      this.overlayActive = false;
+    }
+    
+    // Dessiner les mini FABs (de bas en haut)
+    if (this.animProgress > 0) {
+      for (let i = this.miniFabs.length - 1; i >= 0; i--) {
+        const fab = this.miniFabs[i];
+        if (fab.alpha > 0.01) {
+          this.drawMiniFab(ctx, fab);
+        }
+      }
+    }
+    
+    // FAB principal
+    ctx.save();
+    
+    // Rotation de l'icône + quand ouvert
+    if (this.icon === '+') {
+      ctx.save();
+      ctx.translate(this.x + this.width / 2, this.y + this.height / 2);
+      ctx.rotate((this.animProgress * 45) * Math.PI / 180);
+      ctx.translate(-(this.x + this.width / 2), -(this.y + this.height / 2));
+    }
+    
+    super.draw(ctx);
+    
+    if (this.icon === '+') {
+      ctx.restore();
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Dessine un mini FAB
+   * @private
+   */
+  drawMiniFab(ctx, fab) {
+    ctx.save();
+    ctx.globalAlpha = fab.alpha;
+    
+    const fabX = this.x + (this.width - fab.size) / 2;
+    const fabY = fab.currentY;
+    
+    // Ombre
+    if (!fab.pressed) {
+      ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
+      ctx.shadowBlur = 6;
+      ctx.shadowOffsetY = 3;
+    }
+    
+    // Background
+    const bgColor = fab.bgColor || this.bgColor;
+    ctx.fillStyle = fab.pressed ? this.darkenColor(bgColor) : bgColor;
+    ctx.beginPath();
+    ctx.arc(fabX + fab.size / 2, fabY + fab.size / 2, fab.size / 2, 0, Math.PI * 2);
+    ctx.fill();
+    
+    ctx.shadowColor = 'transparent';
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetY = 0;
+    
+    // Icône
+    ctx.fillStyle = fab.iconColor || '#FFFFFF';
+    ctx.font = 'bold 20px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(fab.icon, fabX + fab.size / 2, fabY + fab.size / 2);
+    
+    // Label à gauche
+    if (fab.label && fab.alpha > 0.5) {
+      ctx.fillStyle = '#FFFFFF';
+      ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
+      ctx.shadowBlur = 4;
+      
+      const labelPadding = 12;
+      const labelHeight = 32;
+      ctx.font = '14px -apple-system, sans-serif';
+      const labelWidth = ctx.measureText(fab.label).width + labelPadding * 2;
+      
+      // Fond du label
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
+      this.roundRect(
+        ctx,
+        fabX - labelWidth - 8,
+        fabY + fab.size / 2 - labelHeight / 2,
+        labelWidth,
+        labelHeight,
+        4
+      );
+      ctx.fill();
+      
+      ctx.shadowColor = 'transparent';
+      ctx.shadowBlur = 0;
+      
+      // Texte du label
+      ctx.fillStyle = '#FFFFFF';
+      ctx.textAlign = 'right';
+      ctx.fillText(fab.label, fabX - 16, fabY + fab.size / 2);
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Dessine un rectangle arrondi
+   * @private
+   */
+  roundRect(ctx, x, y, width, height, radius) {
+    ctx.beginPath();
+    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);
+  }
+  
+  /**
+   * Vérifie si un point est dans le Speed Dial
+   */
+  /**
+ * Vérifie si un point est dans le Speed Dial
+ */
+isPointInside(x, y) {
+  const adjustedY = y - this.framework.scrollOffset;
+  
+  // Vérifier le FAB principal
+  if (x >= this.x && x <= this.x + this.width &&
+      adjustedY >= this.y && adjustedY <= this.y + this.height) {
+    return true;
+  }
+  
+  // Si ouvert, vérifier les mini FABs
+  if (this.isOpen) {
+    for (let fab of this.miniFabs) {
+      if (fab.alpha < 0.01) continue;
+      
+      const fabX = this.x + (this.width - fab.size) / 2;
+      const fabY = fab.currentY;
+      
+      const distance = Math.sqrt(
+        Math.pow(x - (fabX + fab.size / 2), 2) +
+        Math.pow(adjustedY - (fabY + fab.size / 2), 2)
+      );
+      
+      if (distance <= fab.size / 2) {
+        return true;
+      }
+    }
+    
+    // LA CLÉ : Quand le menu est ouvert, TOUT L'ÉCRAN compte comme "inside"
+    // Cela empêche le framework d'appeler handleClickOutside()
+    return true;
+  }
+  
+  return false;
+}
+
+/**
+ * Gère le clic en dehors (appelé par le framework)
+ */
+handleClickOutside() {
+  // Ne pas fermer automatiquement
+  // La fermeture se fera par handleClick() seulement
+  // si on a vraiment cliqué en dehors
+}
+  
+  
+}
+export default SpeedDialFAB;

package/core/CanvasFramework.js

@@ -6,6 +6,8 @@ import Text from '../components/Text.js';
 import View from '../components/View.js';
 import Card from '../components/Card.js';
 import FAB from '../components/FAB.js';
+import SpeedDialFAB from '../components/SpeedDialFAB.js';
+import MorphingFAB from '../components/MorphingFAB.js';
 import CircularProgress from '../components/CircularProgress.js';
 import ImageComponent from '../components/ImageComponent.js';
 import DatePicker from '../components/DatePicker.js';

package/index.js

@@ -13,6 +13,8 @@ export { default as Text } from './components/Text.js';
 export { default as View } from './components/View.js';
 export { default as Card } from './components/Card.js';
 export { default as FAB } from './components/FAB.js';
+export { default as SpeedDialFAB } from './components/SpeedDialFAB.js';
+export { default as MorphingFAB } from './components/MorphingFAB.js';
 export { default as CircularProgress } from './components/CircularProgress.js';
 export { default as ImageComponent } from './components/ImageComponent.js';
 export { default as DatePicker } from './components/DatePicker.js';
@@ -91,7 +93,7 @@ export { default as FeatureFlags } from './manager/FeatureFlags.js';
 
 // Version du framework
 
-export const VERSION = '0.3.8';
+export const VERSION = '0.3.9';
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasframework",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "Canvas-based cross-platform UI framework (Material & Cupertino)",
   "type": "module",
   "main": "./index.js",