canvasframework 0.5.18 → 0.5.20

package/components/SearchInput.js

@@ -0,0 +1,315 @@
+import Input from './Input.js';
+
+/**
+ * Champ de saisie pour la recherche
+ * @class
+ * @extends Input
+ * @property {Function} onSearch - Callback lors de la recherche
+ * @property {Function} onClear - Callback lors de l'effacement
+ * @property {boolean} showClearButton - Afficher le bouton d'effacement
+ */
+class SearchInput extends Input {
+  /**
+   * Crée une instance de SearchInput
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {Function} [options.onSearch] - Callback lors de la recherche
+   * @param {Function} [options.onClear] - Callback lors de l'effacement
+   * @param {string} [options.searchIcon] - Icône de recherche
+   */
+  constructor(framework, options = {}) {
+    super(framework, {
+      placeholder: options.placeholder || 'Rechercher...',
+      ...options
+    });
+    
+    this.onSearch = options.onSearch;
+    this.onClear = options.onClear;
+    this.searchIcon = options.searchIcon || '🔍';
+    this.clearIcon = '×';
+    this.showClearButton = false;
+    
+    // Bind des méthodes supplémentaires
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleClearClick = this.handleClearClick.bind(this);
+  }
+
+  /**
+   * Configure l'input HTML caché (surcharge)
+   */
+  setupHiddenInput() {
+    if (this.hiddenInput) return;
+    
+    // Appeler la méthode parent
+    super.setupHiddenInput();
+    
+    if (this.hiddenInput) {
+      // Ajouter l'événement keydown pour la touche Entrée
+      this.hiddenInput.addEventListener('keydown', this.handleKeyDown);
+    }
+  }
+
+  /**
+   * Gère la pression des touches
+   * @param {KeyboardEvent} e - Événement clavier
+   * @private
+   */
+  handleKeyDown(e) {
+    if (e.key === 'Enter' && this.onSearch) {
+      this.onSearch(this.value);
+    }
+  }
+
+  /**
+   * Gère le clic sur le bouton d'effacement
+   * @private
+   */
+  handleClearClick() {
+    const hadValue = this.value.length > 0;
+    this.value = '';
+    
+    if (this.hiddenInput) {
+      this.hiddenInput.value = '';
+    }
+    
+    // Appeler les callbacks
+    if (hadValue && this.onClear) {
+      this.onClear();
+    }
+    
+    // Mettre à jour l'affichage
+    this.showClearButton = false;
+    
+    // Redonner le focus
+    this.onFocus();
+  }
+
+  /**
+   * Gère la saisie (surcharge)
+   */
+  onInputUpdate() {
+    // Mettre à jour l'affichage du bouton d'effacement
+    this.showClearButton = this.value.length > 0;
+    
+    // Appeler le callback de recherche au fur et à mesure (optionnel)
+    if (this.value.length > 0 && this.onSearch) {
+      // Délai pour éviter de déclencher à chaque frappe
+      clearTimeout(this._searchTimeout);
+      this._searchTimeout = setTimeout(() => {
+        if (this.onSearch) {
+          this.onSearch(this.value);
+        }
+      }, 300);
+    }
+  }
+
+  /**
+   * Gère le clic (surcharge)
+   */
+  onClick() {
+    // Vérifier si on a cliqué sur le bouton d'effacement
+    if (this.showClearButton && this.isPointInClearButton(this.lastClickX, this.lastClickY)) {
+      this.handleClearClick();
+      return;
+    }
+    
+    // Sinon, focus normal
+    super.onFocus();
+  }
+
+  /**
+   * Gère le focus (surcharge)
+   */
+  onFocus() {
+    super.onFocus();
+    
+    // Mettre à jour l'état du bouton d'effacement
+    this.showClearButton = this.value.length > 0;
+  }
+
+  /**
+   * Gère la pression (surcharge pour capturer les coordonnées)
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   */
+  onPress(x, y) {
+    // Stocker les coordonnées du dernier clic
+    this.lastClickX = x;
+    this.lastClickY = y;
+    
+    // Appeler la méthode parent
+    super.onPress(x, y);
+  }
+
+  /**
+   * Vérifie si un point est dans le bouton d'effacement
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {boolean} True si le point est dans le bouton
+   */
+  isPointInClearButton(x, y) {
+    if (!this.showClearButton) return false;
+    
+    // Position du bouton d'effacement (à droite)
+    const clearButtonSize = this.height * 0.6;
+    const clearButtonX = this.x + this.width - clearButtonSize - 10;
+    const clearButtonY = this.y + (this.height - clearButtonSize) / 2;
+    
+    return x >= clearButtonX && 
+           x <= clearButtonX + clearButtonSize && 
+           y >= clearButtonY && 
+           y <= clearButtonY + clearButtonSize;
+  }
+
+  /**
+   * Dessine le champ de recherche (surcharge)
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    // Style selon la plateforme
+    if (this.platform === 'material') {
+      ctx.strokeStyle = this.focused ? '#6200EE' : '#CCCCCC';
+      ctx.lineWidth = this.focused ? 2 : 1;
+      ctx.beginPath();
+      ctx.moveTo(this.x, this.y + this.height);
+      ctx.lineTo(this.x + this.width, this.y + this.height);
+      ctx.stroke();
+    } else {
+      // iOS style avec coins arrondis
+      ctx.fillStyle = this.focused ? '#FFFFFF' : '#F2F2F7';
+      ctx.strokeStyle = this.focused ? '#007AFF' : '#C7C7CC';
+      ctx.lineWidth = 1;
+      
+      // Fond
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, 10);
+      ctx.fill();
+      
+      // Bordure
+      ctx.stroke();
+    }
+    
+    // Icône de recherche (à gauche)
+    ctx.fillStyle = '#999999';
+    ctx.font = `${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(this.searchIcon, this.x + 25, this.y + this.height / 2);
+    
+    // Texte
+    ctx.fillStyle = this.value ? '#000000' : '#999999';
+    ctx.font = `${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    
+    // Calculer la largeur disponible pour le texte
+    const leftPadding = 50; // Pour l'icône de recherche
+    const rightPadding = this.showClearButton ? 50 : 20; // Pour le bouton d'effacement
+    const maxTextWidth = this.width - leftPadding - rightPadding;
+    
+    const displayText = this.value || this.placeholder;
+    
+    // Tronquer le texte si nécessaire
+    let textToShow = displayText;
+    let textWidth = ctx.measureText(textToShow).width;
+    
+    if (textWidth > maxTextWidth) {
+      // Ajouter "..." à la fin
+      while (textWidth > maxTextWidth && textToShow.length > 0) {
+        textToShow = textToShow.substring(0, textToShow.length - 1);
+        textWidth = ctx.measureText(textToShow + '...').width;
+      }
+      if (textToShow.length > 0) {
+        textToShow += '...';
+      }
+    }
+    
+    // Couleur différente pour le placeholder
+    if (!this.value) {
+      ctx.fillStyle = '#999999';
+    }
+    
+    ctx.fillText(textToShow, this.x + leftPadding, this.y + this.height / 2);
+    
+    // Bouton d'effacement (si il y a du texte)
+    if (this.showClearButton) {
+      const clearButtonSize = this.height * 0.6;
+      const clearButtonX = this.x + this.width - clearButtonSize - 15;
+      const clearButtonY = this.y + (this.height - clearButtonSize) / 2;
+      
+      // Cercle de fond
+      ctx.fillStyle = '#E0E0E0';
+      ctx.beginPath();
+      ctx.arc(
+        clearButtonX + clearButtonSize / 2,
+        clearButtonY + clearButtonSize / 2,
+        clearButtonSize / 2,
+        0,
+        Math.PI * 2
+      );
+      ctx.fill();
+      
+      // Croix
+      ctx.fillStyle = '#666666';
+      ctx.font = `bold ${clearButtonSize * 0.6}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(
+        this.clearIcon,
+        clearButtonX + clearButtonSize / 2,
+        clearButtonY + clearButtonSize / 2
+      );
+    }
+    
+    // Curseur (si focus et a du texte)
+    if (this.focused && this.cursorVisible && this.value) {
+      const textWidth = ctx.measureText(this.value).width;
+      const cursorX = this.x + leftPadding + Math.min(textWidth, maxTextWidth);
+      ctx.fillStyle = '#000000';
+      ctx.fillRect(cursorX, this.y + 10, 2, this.height - 20);
+    }
+    
+    ctx.restore();
+  }
+
+  /**
+   * Vérifie si un point est dans les limites (surcharge)
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {boolean} True si le point est dans l'input
+   */
+  isPointInside(x, y) {
+    // Vérifier l'input principal
+    const inInput = x >= this.x && 
+                    x <= this.x + this.width && 
+                    y >= this.y && 
+                    y <= this.y + this.height;
+    
+    // Vérifier aussi le bouton d'effacement
+    const inClearButton = this.isPointInClearButton(x, y);
+    
+    return inInput || inClearButton;
+  }
+
+  /**
+   * Nettoie les ressources (surcharge)
+   */
+  destroy() {
+    // Nettoyer le timeout de recherche
+    if (this._searchTimeout) {
+      clearTimeout(this._searchTimeout);
+    }
+    
+    // Retirer l'écouteur keydown
+    if (this.hiddenInput) {
+      this.hiddenInput.removeEventListener('keydown', this.handleKeyDown);
+    }
+    
+    // Appeler la méthode parent
+    super.destroy();
+  }
+}
+
+export default SearchInput;

package/components/SegmentedControl.js

@@ -0,0 +1,357 @@
+import Component from '../core/Component.js';
+
+/**
+ * Segmented Control (Material + Cupertino)
+ * @class
+ * @extends Component
+ * @param {CanvasFramework} framework - Instance du framework
+ * @param {Object} [options={}] - Options de configuration
+ * @param {Array<{text: string, onClick?: Function}>} [options.buttons] - Liste des segments
+ * @param {number} [options.selectedIndex=0] - Segment sélectionné par défaut
+ * @param {number} [options.height=40] - Hauteur du contrôle
+ * @param {number} [options.spacing=1] - Espacement entre les segments
+ */
+class SegmentedControl extends Component {
+  constructor(framework, options = {}) {
+    super(framework, options);
+    
+    this.platform = framework.platform;
+    this.buttons = options.buttons || [{ text: 'One' }, { text: 'Two' }, { text: 'Three' }];
+    this.selectedIndex = options.selectedIndex || 0;
+    this.height = options.height || 40;
+    this.spacing = options.spacing || 1;
+    
+    // IMPORTANT: Lier les handlers d'événements
+    this.onPress = this.handlePress.bind(this);
+    this.onRelease = this.handleRelease.bind(this);
+    
+    // État pour les animations
+    this.ripples = [];
+    this.pressedIndex = null;
+    this._isAnimating = false;
+    
+  }
+
+  /**
+   * Gère la pression sur un segment
+   * @param {number} x - Coordonnée X du clic
+   * @param {number} y - Coordonnée Y du clic
+   * @returns {boolean} True si un segment a été cliqué
+   */
+  handlePress(x, y) {
+    const index = this.getButtonIndexAt(x, y);
+    
+    if (index !== null) {
+      // Sauvegarder l'index pressé pour l'animation
+      this.pressedIndex = index;
+      
+      // Pour Material: créer un ripple
+      if (this.platform === 'material') {
+        const btnWidth = (this.width - this.spacing * (this.buttons.length - 1)) / this.buttons.length;
+        const btnX = this.x + index * (btnWidth + this.spacing);
+        
+        this.ripples.push({
+          x: x - btnX, // Position relative au bouton
+          y: y - this.y, // Position relative au bouton
+          index: index,
+          radius: 0,
+          maxRadius: Math.max(btnWidth, this.height) * 1.5,
+          opacity: 0.3,
+          startTime: Date.now()
+        });
+        
+        // Démarrer l'animation si pas déjà en cours
+        if (!this._isAnimating) {
+          this._animate();
+        }
+      }
+      
+      // Sélectionner le segment
+      this.selectedIndex = index;
+      
+      // Forcer le redessin immédiat
+      this._requestRedraw();
+      
+      return true;
+    }
+    
+    return false;
+  }
+  
+  /**
+   * Gère le relâchement
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   */
+  handleRelease(x, y) {
+    const index = this.getButtonIndexAt(x, y);
+    
+    if (index !== null && index === this.pressedIndex) {
+      // Appeler le callback si défini
+      if (this.buttons[index].onClick) {
+        this.buttons[index].onClick(index);
+      }
+    }
+    
+    // Réinitialiser l'index pressé
+    this.pressedIndex = null;
+    
+    // Forcer le redessin
+    this._requestRedraw();
+  }
+
+  /**
+   * Anime les ripples Material
+   * @private
+   */
+  _animate() {
+    this._isAnimating = true;
+    
+    const animateFrame = () => {
+      let hasActiveRipples = false;
+      const now = Date.now();
+      
+      // Mettre à jour tous les ripples
+      for (let i = this.ripples.length - 1; i >= 0; i--) {
+        const ripple = this.ripples[i];
+        const elapsed = now - ripple.startTime;
+        
+        // Animation sur 600ms
+        const progress = Math.min(elapsed / 600, 1);
+        
+        // Équation d'easing
+        const easedProgress = 1 - Math.pow(1 - progress, 3);
+        
+        // Mettre à jour le rayon
+        ripple.radius = ripple.maxRadius * easedProgress;
+        
+        // Diminuer l'opacité après 50% de progression
+        if (progress > 0.5) {
+          ripple.opacity = 0.3 * (1 - (progress - 0.5) * 2);
+        }
+        
+        // Supprimer les ripples terminés
+        if (progress >= 1) {
+          this.ripples.splice(i, 1);
+        } else {
+          hasActiveRipples = true;
+        }
+      }
+      
+      // Redessiner si il y a des ripples actifs
+      if (hasActiveRipples) {
+        this._requestRedraw();
+        requestAnimationFrame(animateFrame);
+      } else {
+        this._isAnimating = false;
+      }
+    };
+    
+    requestAnimationFrame(animateFrame);
+  }
+
+  /**
+   * Retourne l'index du bouton sous un point donné
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {number|null} Index du segment ou null
+   * @private
+   */
+  getButtonIndexAt(x, y) {
+    // Vérifier si dans les limites verticales
+    if (y < this.y || y > this.y + this.height) {
+      return null;
+    }
+    
+    const btnWidth = (this.width - this.spacing * (this.buttons.length - 1)) / this.buttons.length;
+    
+    for (let i = 0; i < this.buttons.length; i++) {
+      const btnX = this.x + i * (btnWidth + this.spacing);
+      
+      // Vérifier si dans les limites horizontales du bouton
+      if (x >= btnX && x <= btnX + btnWidth) {
+        return i;
+      }
+    }
+    
+    return null;
+  }
+  
+  /**
+   * Force le redessin du composant
+   * @private
+   */
+  _requestRedraw() {
+    if (this.framework && this.framework.markComponentDirty) {
+      this.framework.markComponentDirty(this);
+    }
+  }
+
+  /**
+   * Dessine le SegmentedControl
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    const btnWidth = (this.width - this.spacing * (this.buttons.length - 1)) / this.buttons.length;
+    const radius = this.height / 2;
+    
+    // Dessiner tous les boutons
+    for (let i = 0; i < this.buttons.length; i++) {
+      const btn = this.buttons[i];
+      const btnX = this.x + i * (btnWidth + this.spacing);
+      
+      // Couleurs selon la plateforme et l'état
+      let backgroundColor;
+      let textColor;
+      
+      if (this.platform === 'material') {
+        // Material Design
+        if (this.selectedIndex === i) {
+          backgroundColor = '#6200EE'; // Violet Material
+          textColor = '#FFFFFF';
+        } else {
+          backgroundColor = '#E0E0E0'; // Gris clair
+          textColor = '#000000';
+        }
+        
+        // Si pressé (mais pas encore sélectionné)
+        if (this.pressedIndex === i && this.pressedIndex !== this.selectedIndex) {
+          backgroundColor = 'rgba(98, 0, 238, 0.12)'; // Violet très transparent
+        }
+      } else {
+        // iOS/Cupertino
+        if (this.selectedIndex === i) {
+          backgroundColor = '#007AFF'; // Bleu iOS
+          textColor = '#FFFFFF';
+        } else {
+          backgroundColor = '#F0F0F0'; // Gris très clair iOS
+          textColor = '#000000';
+        }
+        
+        // Si pressé
+        if (this.pressedIndex === i) {
+          backgroundColor = this.selectedIndex === i ? '#0056CC' : '#D9D9D9';
+        }
+      }
+      
+      // Dessiner le fond du bouton
+      ctx.fillStyle = backgroundColor;
+      
+      // Coins arrondis selon la position
+      ctx.beginPath();
+      
+      if (i === 0 && i === this.buttons.length - 1) {
+        // Un seul bouton - tous les coins arrondis
+        ctx.moveTo(btnX + radius, this.y);
+        ctx.lineTo(btnX + btnWidth - radius, this.y);
+        ctx.quadraticCurveTo(btnX + btnWidth, this.y, btnX + btnWidth, this.y + radius);
+        ctx.lineTo(btnX + btnWidth, this.y + this.height - radius);
+        ctx.quadraticCurveTo(btnX + btnWidth, this.y + this.height, btnX + btnWidth - radius, this.y + this.height);
+        ctx.lineTo(btnX + radius, this.y + this.height);
+        ctx.quadraticCurveTo(btnX, this.y + this.height, btnX, this.y + this.height - radius);
+        ctx.lineTo(btnX, this.y + radius);
+        ctx.quadraticCurveTo(btnX, this.y, btnX + radius, this.y);
+      } else if (i === 0) {
+        // Premier bouton - coins gauche arrondis
+        ctx.moveTo(btnX + radius, this.y);
+        ctx.lineTo(btnX + btnWidth, this.y);
+        ctx.lineTo(btnX + btnWidth, this.y + this.height);
+        ctx.lineTo(btnX + radius, this.y + this.height);
+        ctx.quadraticCurveTo(btnX, this.y + this.height, btnX, this.y + this.height - radius);
+        ctx.lineTo(btnX, this.y + radius);
+        ctx.quadraticCurveTo(btnX, this.y, btnX + radius, this.y);
+      } else if (i === this.buttons.length - 1) {
+        // Dernier bouton - coins droit arrondis
+        ctx.moveTo(btnX, this.y);
+        ctx.lineTo(btnX + btnWidth - radius, this.y);
+        ctx.quadraticCurveTo(btnX + btnWidth, this.y, btnX + btnWidth, this.y + radius);
+        ctx.lineTo(btnX + btnWidth, this.y + this.height - radius);
+        ctx.quadraticCurveTo(btnX + btnWidth, this.y + this.height, btnX + btnWidth - radius, this.y + this.height);
+        ctx.lineTo(btnX, this.y + this.height);
+      } else {
+        // Bouton du milieu - coins carrés
+        ctx.rect(btnX, this.y, btnWidth, this.height);
+      }
+      
+      ctx.closePath();
+      ctx.fill();
+      
+      // Dessiner les ripples Material
+      if (this.platform === 'material') {
+        for (const ripple of this.ripples) {
+          if (ripple.index === i) {
+            ctx.save();
+            
+            // Clip sur le bouton pour que le ripple ne dépasse pas
+            ctx.beginPath();
+            if (i === 0) {
+              ctx.moveTo(btnX + radius, this.y);
+              ctx.lineTo(btnX + btnWidth, this.y);
+              ctx.lineTo(btnX + btnWidth, this.y + this.height);
+              ctx.lineTo(btnX + radius, this.y + this.height);
+              ctx.quadraticCurveTo(btnX, this.y + this.height, btnX, this.y + this.height - radius);
+              ctx.lineTo(btnX, this.y + radius);
+              ctx.quadraticCurveTo(btnX, this.y, btnX + radius, this.y);
+            } else if (i === this.buttons.length - 1) {
+              ctx.moveTo(btnX, this.y);
+              ctx.lineTo(btnX + btnWidth - radius, this.y);
+              ctx.quadraticCurveTo(btnX + btnWidth, this.y, btnX + btnWidth, this.y + radius);
+              ctx.lineTo(btnX + btnWidth, this.y + this.height - radius);
+              ctx.quadraticCurveTo(btnX + btnWidth, this.y + this.height, btnX + btnWidth - radius, this.y + this.height);
+              ctx.lineTo(btnX, this.y + this.height);
+            } else {
+              ctx.rect(btnX, this.y, btnWidth, this.height);
+            }
+            ctx.closePath();
+            ctx.clip();
+            
+            // Dessiner le ripple
+            ctx.fillStyle = `rgba(255, 255, 255, ${ripple.opacity})`;
+            ctx.beginPath();
+            ctx.arc(btnX + ripple.x, this.y + ripple.y, ripple.radius, 0, Math.PI * 2);
+            ctx.fill();
+            
+            ctx.restore();
+          }
+        }
+      }
+      
+      // Dessiner le texte
+      ctx.fillStyle = textColor;
+      ctx.font = `500 ${this.height / 2.5}px -apple-system, Roboto, sans-serif`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(btn.text || `Button ${i + 1}`, btnX + btnWidth / 2, this.y + this.height / 2);
+    }
+    
+    // Dessiner les séparateurs (pour iOS)
+    if (this.platform === 'cupertino' && this.buttons.length > 1) {
+      ctx.strokeStyle = '#C7C7CC';
+      ctx.lineWidth = 1;
+      
+      for (let i = 1; i < this.buttons.length; i++) {
+        const separatorX = this.x + i * btnWidth + (i - 1) * this.spacing;
+        ctx.beginPath();
+        ctx.moveTo(separatorX, this.y + 8);
+        ctx.lineTo(separatorX, this.y + this.height - 8);
+        ctx.stroke();
+      }
+    }
+    
+    ctx.restore();
+  }
+
+  /**
+   * Vérifie si un point est dans le contrôle
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {boolean} True si un segment est touché
+   */
+  isPointInside(x, y) {
+    return this.getButtonIndexAt(x, y) !== null;
+  }
+}
+
+export default SegmentedControl;