canvasframework 0.3.6

package/components/Input.js

@@ -0,0 +1,309 @@
+import Component from '../core/Component.js';
+
+/**
+ * Champ de saisie texte
+ * @class
+ * @extends Component
+ * @property {string} placeholder - Texte d'indication
+ * @property {string} value - Valeur
+ * @property {number} fontSize - Taille de police
+ * @property {boolean} focused - Focus actif
+ * @property {string} platform - Plateforme
+ * @property {boolean} cursorVisible - Curseur visible
+ * @property {number} cursorPosition - Position du curseur
+ * @property {HTMLInputElement} hiddenInput - Input HTML caché
+ */
+class Input extends Component {
+  static activeInput = null;
+  static allInputs = new Set();
+  static globalClickHandler = null;
+  
+  /**
+   * Crée une instance de Input
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {string} [options.placeholder=''] - Texte d'indication
+   * @param {string} [options.value=''] - Valeur initiale
+   * @param {number} [options.fontSize=16] - Taille de police
+   * @param {Function} [options.onFocus] - Callback au focus
+   * @param {Function} [options.onBlur] - Callback au blur
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.placeholder = options.placeholder || '';
+    this.value = options.value || '';
+    this.fontSize = options.fontSize || 16;
+    this.focused = false;
+    this.platform = framework.platform;
+    this.cursorVisible = true;
+    this.cursorPosition = this.value.length;
+    
+    // Gestion du focus
+    this.onFocus = this.onFocus.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+    
+    // Enregistrer cet input
+    Input.allInputs.add(this);
+    
+    // Animation du curseur
+    this.cursorInterval = setInterval(() => {
+      if (this.focused) this.cursorVisible = !this.cursorVisible;
+    }, 500);
+    
+    // Écouter les clics partout pour détecter quand on clique ailleurs
+    this.setupGlobalClickHandler();
+  }
+
+  /**
+   * Écoute les clics globaux pour détecter les clics hors input
+   */
+  setupGlobalClickHandler() {
+    // On crée un gestionnaire unique pour tous les inputs
+    if (!Input.globalClickHandler) {
+      Input.globalClickHandler = (e) => {
+        // Vérifier si on a cliqué en dehors de TOUS les inputs
+        let clickedOnInput = false;
+        
+        for (let input of Input.allInputs) {
+          if (input.hiddenInput && e.target === input.hiddenInput) {
+            clickedOnInput = true;
+            break;
+          }
+        }
+        
+        // Si on n'a pas cliqué sur un input, détruire tous les inputs HTML
+        if (!clickedOnInput) {
+          Input.removeAllHiddenInputs();
+        }
+      };
+      
+      // Attacher l'écouteur avec capture pour qu'il se déclenche tôt
+      document.addEventListener('click', Input.globalClickHandler, true);
+      document.addEventListener('touchstart', Input.globalClickHandler, true);
+    }
+  }
+
+  /**
+   * Configure l'input HTML caché
+   * @private
+   */
+  setupHiddenInput() {
+    if (this.hiddenInput) return;
+    
+    // Créer un input HTML caché unique pour cette instance
+    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';
+    this.hiddenInput.style.zIndex = '9999';
+    document.body.appendChild(this.hiddenInput);
+    
+    this.hiddenInput.addEventListener('input', (e) => {
+      if (this.focused) {
+        this.value = e.target.value;
+        this.cursorPosition = this.value.length;
+      }
+    });
+    
+    this.hiddenInput.addEventListener('blur', () => {
+      this.focused = false;
+      this.cursorVisible = false;
+      
+      // Détruire l'input HTML après un court délai
+      setTimeout(() => {
+        this.destroyHiddenInput();
+      }, 100);
+    });
+  }
+
+  /**
+   * Gère le focus
+   */
+  onFocus() {
+    // Si c'est déjà l'input actif, ne rien faire
+    if (Input.activeInput === this) {
+      return;
+    }
+    
+    // D'abord, détruire TOUS les autres inputs HTML
+    Input.removeAllHiddenInputs();
+    
+    // Désactiver tous les autres inputs visuellement
+    for (let input of Input.allInputs) {
+      if (input !== this) {
+        input.focused = false;
+        input.cursorVisible = false;
+      }
+    }
+    
+    // Activer celui-ci
+    this.focused = true;
+    this.cursorVisible = true;
+    Input.activeInput = this;
+    
+    // Créer l'input HTML si nécessaire
+    this.setupHiddenInput();
+    
+    if (this.hiddenInput) {
+      this.hiddenInput.value = this.value;
+      // Positionner l'input au bon endroit pour le scroll du clavier
+      const adjustedY = this.y + this.framework.scrollOffset;
+      this.hiddenInput.style.top = `${adjustedY}px`;
+      
+      // Focus avec un petit délai
+      setTimeout(() => {
+        if (this.hiddenInput && this.focused) {
+          this.hiddenInput.focus();
+          // Positionner le curseur à la fin
+          this.hiddenInput.setSelectionRange(this.value.length, this.value.length);
+        }
+      }, 50);
+    }
+  }
+
+  /**
+   * Gère le blur
+   */
+  onBlur() {
+    this.focused = false;
+    this.cursorVisible = false;
+  }
+
+  /**
+   * Détruit l'input HTML
+   */
+  destroyHiddenInput() {
+    if (this.hiddenInput && this.hiddenInput.parentNode) {
+      this.hiddenInput.parentNode.removeChild(this.hiddenInput);
+      this.hiddenInput = null;
+    }
+  }
+
+  /**
+   * Gère le clic
+   */
+  onClick() {
+    this.onFocus();
+  }
+  
+  /**
+   * Méthode statique pour détruire tous les inputs HTML
+   */
+  static removeAllHiddenInputs() {
+    // Désactiver tous les inputs visuels
+    for (let input of Input.allInputs) {
+      input.focused = false;
+      input.cursorVisible = false;
+      
+      // Détruire l'input HTML
+      if (input.hiddenInput && input.hiddenInput.parentNode) {
+        input.hiddenInput.parentNode.removeChild(input.hiddenInput);
+        input.hiddenInput = null;
+      }
+    }
+    
+    Input.activeInput = null;
+  }
+  
+  /**
+   * 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 l'input
+   */
+  isPointInside(x, y) {
+    return x >= this.x && 
+           x <= this.x + this.width && 
+           y >= this.y && 
+           y <= this.y + this.height;
+  }
+
+  /**
+   * Dessine l'input
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    if (this.platform === 'material') {
+      // Material Design Input
+      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 {
+      // Cupertino Input
+      ctx.strokeStyle = this.focused ? '#007AFF' : '#C7C7CC';
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, 8);
+      ctx.stroke();
+    }
+    
+    // Texte
+    ctx.fillStyle = this.value ? '#000000' : '#999999';
+    ctx.font = `${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    const displayText = this.value || this.placeholder;
+    ctx.fillText(displayText, this.x + 10, this.y + this.height / 2);
+    
+    // Curseur
+    if (this.focused && this.cursorVisible && this.value) {
+      const textWidth = ctx.measureText(this.value).width;
+      ctx.fillStyle = '#000000';
+      ctx.fillRect(this.x + 10 + textWidth, this.y + 10, 2, this.height - 20);
+    }
+    
+    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);
+  }
+
+  /**
+   * Nettoie les ressources
+   */
+  destroy() {
+    this.destroyHiddenInput();
+    
+    if (this.cursorInterval) {
+      clearInterval(this.cursorInterval);
+    }
+    
+    Input.allInputs.delete(this);
+    
+    // Si c'était le dernier input, retirer le gestionnaire global
+    if (Input.allInputs.size === 0 && Input.globalClickHandler) {
+      document.removeEventListener('click', Input.globalClickHandler, true);
+      document.removeEventListener('touchstart', Input.globalClickHandler, true);
+      Input.globalClickHandler = null;
+    }
+    
+    super.destroy && super.destroy();
+  }
+}
+
+export default Input;

package/components/List.js

@@ -0,0 +1,94 @@
+import Component from '../core/Component.js';
+import ListItem from '../components/ListItem.js';
+/**
+ * Conteneur pour les éléments de liste (ListItems) avec défilement automatique
+ * @class
+ * @extends Component
+ * @param {Framework} framework - Instance du framework
+ * @param {Object} [options={}] - Options de configuration
+ * @param {number} [options.itemHeight=56] - Hauteur de chaque item en pixels
+ * @param {Function} [options.onItemClick] - Callback appelé lors du clic sur un item
+ * @param {number} [options.y=0] - Position Y de départ
+ * @example
+ * const list = new List(framework, {
+ *   itemHeight: 64,
+ *   onItemClick: (index, itemOptions) => console.log('Item clicked:', index)
+ * });
+ */
+class List extends Component {
+  /**
+   * @constructs List
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    /** @type {ListItem[]} */
+    this.items = [];
+    /** @type {number} */
+    this.itemHeight = options.itemHeight || 56;
+    /** @type {Function|undefined} */
+    this.onItemClick = options.onItemClick;
+    /** @type {number} */
+    this.y = options.y || 0; // Position Y de départ
+  }
+  
+  /**
+   * Ajoute un item à la liste
+   * @param {Object} itemOptions - Options pour l'item
+   * @param {string} itemOptions.text - Texte à afficher
+   * @param {Function} [itemOptions.onClick] - Callback spécifique à l'item
+   * @param {Object} [itemOptions.style] - Style optionnel pour l'item
+   * @returns {ListItem} L'item créé
+   */
+  addItem(itemOptions) {
+    const item = new ListItem(this.framework, {
+      ...itemOptions,
+      x: this.x,
+      y: this.y + (this.items.length * this.itemHeight),
+      width: this.width,
+      height: this.itemHeight, // IMPORTANT: définir la hauteur
+      onClick: () => {
+        if (this.onItemClick) {
+          this.onItemClick(this.items.length, itemOptions);
+        }
+        if (itemOptions.onClick) {
+          itemOptions.onClick();
+        }
+      }
+    });
+    
+    this.items.push(item);
+    this.framework.add(item); // Ajouter chaque item au framework
+    this.height = this.items.length * this.itemHeight; // Mettre à jour la hauteur totale
+    
+    return item;
+  }
+  
+  /**
+   * Vide la liste et supprime tous les items du framework
+   */
+  clear() {
+    for (let item of this.items) {
+      this.framework.remove(item);
+    }
+    this.items = [];
+    this.height = 0;
+  }
+  
+  /**
+   * Dessine le composant (les items se dessinent eux-mêmes)
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    // Les items se dessinent eux-mêmes
+  }
+  
+  /**
+   * Vérifie si un point est à l'intérieur du composant
+   * @returns {boolean} Toujours false (les ListItems gèrent leurs propres clics)
+   */
+  isPointInside() {
+    return false; // Les ListItems gèrent leurs propres clics
+  }
+}
+
+export default List;

package/components/ListItem.js

@@ -0,0 +1,223 @@
+import Component from '../core/Component.js';
+/**
+ * Élément de liste
+ * @class
+ * @extends Component
+ * @property {string} title - Titre
+ * @property {string} subtitle - Sous-titre
+ * @property {string|null} leftIcon - Icône gauche
+ * @property {string|null} leftImage - Image gauche (URL)
+ * @property {string|null} rightIcon - Icône droite
+ * @property {string|null} rightText - Texte droite
+ * @property {boolean} divider - Afficher un diviseur
+ * @property {string} platform - Plateforme
+ * @property {string} bgColor - Couleur de fond
+ * @property {Array} ripples - Effets ripple (Material)
+ */
+class ListItem extends Component {
+  /**
+   * Crée une instance de ListItem
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {string} [options.title=''] - Titre
+   * @param {string} [options.subtitle=''] - Sous-titre
+   * @param {string} [options.leftIcon] - Icône gauche
+   * @param {string} [options.leftImage] - URL image gauche
+   * @param {string} [options.rightIcon] - Icône droite
+   * @param {string} [options.rightText] - Texte droite
+   * @param {boolean} [options.divider=true] - Diviseur
+   * @param {string} [options.bgColor='#FFFFFF'] - Couleur de fond
+   * @param {number} [options.height] - Hauteur (auto selon contenu)
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.title = options.title || '';
+    this.subtitle = options.subtitle || '';
+    this.leftIcon = options.leftIcon || null;
+    this.leftImage = options.leftImage || null; // URL d'image
+    this.rightIcon = options.rightIcon || null;
+    this.rightText = options.rightText || '';
+    this.divider = options.divider !== false;
+    this.platform = framework.platform;
+    this.height = options.height || (this.subtitle ? 72 : 56);
+    this.width = options.width || framework.width;
+    this.bgColor = options.bgColor || '#FFFFFF';
+    this.ripples = []; // Pour l'effet ripple Material
+    
+    this.onPress = this.handlePress.bind(this);
+  }
+  
+  /**
+   * Gère la pression (clic)
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @private
+   */
+  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();
+    }
+  }
+  
+  /**
+   * Anime les effets 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;
+        }
+        
+        if (ripple.radius >= ripple.maxRadius * 0.5) {
+          ripple.opacity -= 0.05;
+        }
+      }
+      
+      this.ripples = this.ripples.filter(r => r.opacity > 0);
+      
+      if (hasActiveRipples) {
+        requestAnimationFrame(animate);
+      }
+    };
+    
+    animate();
+  }
+  
+  /**
+   * Dessine l'élément de liste
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    // Background
+    ctx.fillStyle = this.pressed ? '#F5F5F5' : this.bgColor;
+    ctx.fillRect(this.x, this.y, this.width, this.height);
+    
+    // Ripple effect (Material)
+    if (this.platform === 'material' && this.ripples.length > 0) {
+      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();
+    }
+    
+    let leftOffset = 16;
+    
+    // Left Icon ou Image
+    if (this.leftIcon) {
+      ctx.fillStyle = '#757575';
+      ctx.font = '24px sans-serif';
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this.leftIcon, this.x + leftOffset, this.y + this.height / 2);
+      leftOffset += 48;
+    } else if (this.leftImage) {
+      // Circle pour l'avatar
+      ctx.fillStyle = '#E0E0E0';
+      ctx.beginPath();
+      ctx.arc(this.x + leftOffset + 20, this.y + this.height / 2, 20, 0, Math.PI * 2);
+      ctx.fill();
+      
+      // TODO: Charger vraie image
+      ctx.fillStyle = '#757575';
+      ctx.font = '14px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText('👤', this.x + leftOffset + 20, this.y + this.height / 2);
+      
+      leftOffset += 56;
+    }
+    
+    // Title et Subtitle
+    const textX = this.x + leftOffset;
+    const centerY = this.y + this.height / 2;
+    
+    if (this.subtitle) {
+      // Title
+      ctx.fillStyle = '#000000';
+      ctx.font = '16px -apple-system, Roboto, sans-serif';
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'bottom';
+      ctx.fillText(this.title, textX, centerY - 2);
+      
+      // Subtitle
+      ctx.fillStyle = '#757575';
+      ctx.font = '14px -apple-system, Roboto, sans-serif';
+      ctx.textBaseline = 'top';
+      ctx.fillText(this.subtitle, textX, centerY + 2);
+    } else {
+      // Title seul (centré verticalement)
+      ctx.fillStyle = '#000000';
+      ctx.font = '16px -apple-system, Roboto, sans-serif';
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this.title, textX, centerY);
+    }
+    
+    // Right Text ou Icon
+    if (this.rightText) {
+      ctx.fillStyle = '#757575';
+      ctx.font = '14px -apple-system, Roboto, sans-serif';
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this.rightText, this.x + this.width - 16, centerY);
+    } else if (this.rightIcon) {
+      ctx.fillStyle = '#757575';
+      ctx.font = '20px sans-serif';
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this.rightIcon, this.x + this.width - 16, centerY);
+    }
+    
+    // Divider
+    if (this.divider) {
+      ctx.strokeStyle = '#E0E0E0';
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(this.x + leftOffset, this.y + this.height);
+      ctx.lineTo(this.x + this.width, this.y + this.height);
+      ctx.stroke();
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * 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 l'élément
+   */
+  isPointInside(x, y) {
+    return x >= this.x && 
+           x <= this.x + this.width && 
+           y >= this.y && 
+           y <= this.y + this.height;
+  }
+}
+
+export default ListItem;