canvasframework 0.3.6

package/components/Text.js

@@ -0,0 +1,141 @@
+import Component from '../core/Component.js';
+/**
+ * Composant texte
+ * @class
+ * @extends Component
+ * @property {string} text - Texte à afficher
+ * @property {number} fontSize - Taille de police
+ * @property {string} color - Couleur
+ * @property {string} align - Alignement ('left', 'center', 'right')
+ * @property {boolean} bold - Gras
+ * @property {number|null} maxWidth - Largeur maximale
+ * @property {boolean} wrap - Retour à la ligne
+ * @property {number} lineHeight - Hauteur de ligne
+ * @property {string[]|null} wrappedLines - Lignes après wrap
+ */
+class Text extends Component {
+  /**
+   * Crée une instance de Text
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {string} [options.text=''] - Texte
+   * @param {number} [options.fontSize=16] - Taille de police
+   * @param {string} [options.color='#000000'] - Couleur
+   * @param {string} [options.align='left'] - Alignement
+   * @param {boolean} [options.bold=false] - Gras
+   * @param {number} [options.maxWidth] - Largeur maximale
+   * @param {boolean} [options.wrap=false] - Retour à la ligne
+   * @param {number} [options.lineHeight] - Hauteur de ligne
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.text = options.text || '';
+    this.fontSize = options.fontSize || 16;
+    this.color = options.color || '#000000';
+    this.align = options.align || 'left';
+    this.bold = options.bold || false;
+    this.maxWidth = options.maxWidth || null; // Nouvelle option: largeur maximale
+    this.wrap = options.wrap || false; // Nouvelle option: retour à la ligne
+    this.lineHeight = options.lineHeight || this.fontSize * 1.2;
+    
+    // Calculer la hauteur en fonction du texte
+    if (this.wrap && this.maxWidth && this.text) {
+      this.calculateWrappedHeight();
+    }
+  }
+  
+  /**
+   * Calcule la hauteur avec wrap
+   * @private
+   */
+  calculateWrappedHeight() {
+    // Cette méthode sera appelée dans draw quand on a le contexte
+    // Pour l'instant, on initialise juste
+    this.wrappedLines = null;
+  }
+
+  /**
+   * Dessine le texte
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    ctx.fillStyle = this.color;
+    ctx.font = `${this.bold ? 'bold ' : ''}${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
+    ctx.textAlign = this.align;
+    ctx.textBaseline = 'top';
+    
+    let lines = [this.text];
+    
+    // Si wrap est activé et on a une largeur max, on divise le texte
+    if (this.wrap && this.maxWidth && this.text) {
+      lines = this.wrapText(ctx, this.text, this.maxWidth);
+    } else if (this.maxWidth && this.text) {
+      // Sinon, on tronque le texte avec des points de suspension
+      const ellipsis = '...';
+      let text = this.text;
+      while (ctx.measureText(text).width > this.maxWidth && text.length > 3) {
+        text = text.substring(0, text.length - 1);
+      }
+      if (text !== this.text && text.length > 3) {
+        text = text.substring(0, text.length - 3) + ellipsis;
+      }
+      lines = [text];
+    }
+    
+    // Calculer la position x en fonction de l'alignement
+    const x = this.align === 'center' ? this.x + (this.maxWidth || this.width) / 2 :
+               this.align === 'right' ? this.x + (this.maxWidth || this.width) : this.x;
+    
+    // Dessiner chaque ligne
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const y = this.y + (i * this.lineHeight);
+      ctx.fillText(line, x, y);
+    }
+    
+    // Ajuster la hauteur si on a plusieurs lignes
+    if (lines.length > 1) {
+      this.height = lines.length * this.lineHeight;
+    }
+    
+    ctx.restore();
+  }
+
+  /**
+   * Divise le texte en plusieurs lignes
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   * @param {string} text - Texte à diviser
+   * @param {number} maxWidth - Largeur maximale
+   * @returns {string[]} Tableau de lignes
+   * @private
+   */
+  wrapText(ctx, text, maxWidth) {
+    const words = text.split(' ');
+    const lines = [];
+    let currentLine = words[0];
+    
+    for (let i = 1; i < words.length; i++) {
+      const word = words[i];
+      const width = ctx.measureText(currentLine + " " + word).width;
+      if (width < maxWidth) {
+        currentLine += " " + word;
+      } else {
+        lines.push(currentLine);
+        currentLine = word;
+      }
+    }
+    lines.push(currentLine);
+    return lines;
+  }
+
+  /**
+   * Vérifie si un point est dans les limites
+   * @returns {boolean} False (non cliquable)
+   */
+  isPointInside() {
+    return false;
+  }
+}
+
+export default Text;

package/components/TextField.js

@@ -0,0 +1,331 @@
+import Component from '../core/Component.js';
+/**
+ * Champ de texte avancé avec label flottant, validation et messages d'erreur
+ * @class
+ * @extends Component
+ * @param {Framework} framework - Instance du framework
+ * @param {Object} [options={}] - Options de configuration
+ * @param {string} [options.label=''] - Label du champ
+ * @param {string} [options.value=''] - Valeur initiale
+ * @param {string} [options.placeholder=''] - Placeholder
+ * @param {string} [options.helperText=''] - Texte d'aide
+ * @param {string} [options.errorText=''] - Texte d'erreur
+ * @param {boolean} [options.error=false] - État d'erreur
+ * @param {number} [options.fontSize=16] - Taille de police
+ * @param {Function} [options.onChange] - Callback lors du changement
+ * @param {number} [options.height=80] - Hauteur totale (inclut label + input + helper)
+ * @example
+ * const textField = new TextField(framework, {
+ *   label: 'Email',
+ *   placeholder: 'Entrez votre email',
+ *   helperText: 'Nous ne partagerons jamais votre email',
+ *   onChange: (value) => validateEmail(value)
+ * });
+ */
+class TextField extends Component {
+  /**
+   * @constructs TextField
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    /** @type {string} */
+    this.label = options.label || '';
+    /** @type {string} */
+    this.value = options.value || '';
+    /** @type {string} */
+    this.placeholder = options.placeholder || '';
+    /** @type {string} */
+    this.helperText = options.helperText || '';
+    /** @type {string} */
+    this.errorText = options.errorText || '';
+    /** @type {boolean} */
+    this.error = options.error || false;
+    /** @type {string} */
+    this.platform = framework.platform;
+    /** @type {boolean} */
+    this.focused = false;
+    /** @type {number} */
+    this.fontSize = options.fontSize || 16;
+    /** @type {Function|undefined} */
+    this.onChange = options.onChange;
+    /** @type {number} */
+    this.labelY = this.value ? -10 : 20; // Position du label
+    /** @type {number} */
+    this.labelFontSize = this.value ? 12 : 16;
+    /** @type {boolean} */
+    this.cursorVisible = true;
+    
+    // Hauteur pour inclure label + input + helper
+    this.height = options.height || 80;
+    
+    this.onFocus = this.handleFocus.bind(this);
+    this.onBlur = this.handleBlur.bind(this);
+    
+    this.setupHiddenInput();
+    
+    // Animation du curseur
+    /** @type {number} */
+    this.cursorInterval = setInterval(() => {
+      if (this.focused) this.cursorVisible = !this.cursorVisible;
+    }, 500);
+  }
+  
+  /**
+   * Configure l'input caché dans le DOM
+   * @private
+   */
+  setupHiddenInput() {
+    let hiddenInput = document.getElementById('hidden-textfield-input');
+    if (!hiddenInput) {
+      hiddenInput = document.createElement('input');
+      hiddenInput.id = 'hidden-textfield-input';
+      hiddenInput.type = 'text';
+      hiddenInput.style.position = 'fixed';
+      hiddenInput.style.opacity = '0';
+      hiddenInput.style.pointerEvents = 'none';
+      hiddenInput.style.top = '-100px';
+      document.body.appendChild(hiddenInput);
+      
+      hiddenInput.addEventListener('input', (e) => {
+        if (this.focused) {
+          this.value = e.target.value;
+          if (this.onChange) this.onChange(this.value);
+          this.animateLabel();
+        }
+      });
+      
+      hiddenInput.addEventListener('blur', () => {
+        this.handleBlur();
+      });
+    }
+    /** @type {HTMLInputElement} */
+    this.hiddenInput = hiddenInput;
+  }
+  
+  /**
+   * Anime le label (flottant)
+   * @private
+   */
+  animateLabel() {
+    const shouldFloat = this.focused || this.value;
+    const targetY = shouldFloat ? -10 : 20;
+    const targetSize = shouldFloat ? 12 : 16;
+    
+    const animate = () => {
+      const diffY = targetY - this.labelY;
+      const diffSize = targetSize - this.labelFontSize;
+      
+      if (Math.abs(diffY) < 0.5 && Math.abs(diffSize) < 0.5) {
+        this.labelY = targetY;
+        this.labelFontSize = targetSize;
+        return;
+      }
+      
+      this.labelY += diffY * 0.2;
+      this.labelFontSize += diffSize * 0.2;
+      
+      requestAnimationFrame(animate);
+    };
+    
+    animate();
+  }
+  
+  /**
+   * Gère le focus sur le champ
+   */
+  handleFocus() {
+    this.focused = true;
+    this.cursorVisible = true;
+    if (this.hiddenInput) {
+      this.hiddenInput.value = this.value;
+      const adjustedY = this.y + this.framework.scrollOffset;
+      this.hiddenInput.style.top = `${adjustedY}px`;
+      this.hiddenInput.focus();
+    }
+    this.animateLabel();
+  }
+  
+  /**
+   * Gère la perte de focus
+   */
+  handleBlur() {
+    this.focused = false;
+    this.cursorVisible = false;
+    this.animateLabel();
+  }
+  
+  /**
+   * Gère le clic sur le champ
+   */
+  onClick() {
+    this.handleFocus();
+  }
+  
+  /**
+   * Dessine le champ de texte
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    const inputY = this.y + 30;
+    const inputHeight = 40;
+    
+    if (this.platform === 'material') {
+      // Material Design TextField
+      
+      // Label flottant
+      const labelColor = this.error ? '#B00020' : 
+                        (this.focused ? '#6200EE' : '#757575');
+      ctx.fillStyle = labelColor;
+      ctx.font = `${this.labelFontSize}px Roboto, sans-serif`;
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this.label, this.x, this.y + 20 + this.labelY);
+      
+      // Ligne de soulignement
+      const lineColor = this.error ? '#B00020' : 
+                       (this.focused ? '#6200EE' : '#CCCCCC');
+      ctx.strokeStyle = lineColor;
+      ctx.lineWidth = this.focused ? 2 : 1;
+      ctx.beginPath();
+      ctx.moveTo(this.x, inputY + inputHeight);
+      ctx.lineTo(this.x + this.width, inputY + inputHeight);
+      ctx.stroke();
+      
+      // Valeur ou placeholder
+      const displayText = this.value || (this.focused ? '' : this.placeholder);
+      ctx.fillStyle = this.value ? '#000000' : '#999999';
+      ctx.font = `${this.fontSize}px Roboto, sans-serif`;
+      ctx.textBaseline = 'middle';
+      ctx.fillText(displayText, this.x, inputY + inputHeight / 2);
+      
+      // Curseur
+      if (this.focused && this.cursorVisible) {
+        const textWidth = ctx.measureText(this.value).width;
+        ctx.fillStyle = '#6200EE';
+        ctx.fillRect(this.x + textWidth + 2, inputY + 10, 2, inputHeight - 20);
+      }
+      
+      // Helper text ou error text
+      const helperColor = this.error ? '#B00020' : '#757575';
+      const helperMessage = this.error ? this.errorText : this.helperText;
+      
+      if (helperMessage) {
+        ctx.fillStyle = helperColor;
+        ctx.font = '12px Roboto, sans-serif';
+        ctx.fillText(helperMessage, this.x, inputY + inputHeight + 20);
+      }
+      
+    } else {
+      // Cupertino style (label au-dessus)
+      
+      if (this.label) {
+        ctx.fillStyle = '#000000';
+        ctx.font = 'bold 14px -apple-system, sans-serif';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'top';
+        ctx.fillText(this.label, this.x, this.y);
+      }
+      
+      // Input box
+      ctx.strokeStyle = this.error ? '#FF3B30' : 
+                       (this.focused ? '#007AFF' : '#C7C7CC');
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, inputY, this.width, inputHeight, 8);
+      ctx.stroke();
+      
+      // Valeur ou placeholder
+      const displayText = this.value || this.placeholder;
+      ctx.fillStyle = this.value ? '#000000' : '#999999';
+      ctx.font = `${this.fontSize}px -apple-system, sans-serif`;
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(displayText, this.x + 10, inputY + inputHeight / 2);
+      
+      // Curseur
+      if (this.focused && this.cursorVisible) {
+        const textWidth = ctx.measureText(this.value).width;
+        ctx.fillStyle = '#007AFF';
+        ctx.fillRect(this.x + 10 + textWidth + 2, inputY + 10, 2, inputHeight - 20);
+      }
+      
+      // Helper/Error text
+      if (this.error && this.errorText) {
+        ctx.fillStyle = '#FF3B30';
+        ctx.font = '12px -apple-system, sans-serif';
+        ctx.fillText(this.errorText, this.x, inputY + inputHeight + 8);
+      } else if (this.helperText) {
+        ctx.fillStyle = '#8E8E93';
+        ctx.font = '12px -apple-system, sans-serif';
+        ctx.fillText(this.helperText, this.x, inputY + inputHeight + 8);
+      }
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Dessine un rectangle avec des 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.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);
+    ctx.closePath();
+  }
+  
+  /**
+   * Vérifie si un point est à l'intérieur du composant
+   * @param {number} x - Position X
+   * @param {number} y - Position Y
+   * @returns {boolean} True si le point est à l'intérieur
+   */
+  isPointInside(x, y) {
+      return x >= this.x && x <= this.x + this.width && 
+             y >= this.y && y <= this.y + this.height;
+  }
+  
+  /**
+   * Définit une erreur sur le champ
+   * @param {string} errorText - Texte d'erreur à afficher
+   */
+  setError(errorText) {
+    this.error = true;
+    this.errorText = errorText;
+  }
+  
+  /**
+   * Efface l'erreur du champ
+   */
+  clearError() {
+    this.error = false;
+    this.errorText = '';
+  }
+  
+  /**
+   * Nettoie les ressources (arrête l'animation du curseur)
+   */
+  destroy() {
+    if (this.cursorInterval) {
+      clearInterval(this.cursorInterval);
+    }
+  }
+}
+
+export default TextField;

package/components/Toast.js

@@ -0,0 +1,236 @@
+import Component from '../core/Component.js';
+/**
+ * Toast (notification temporaire)
+ * @class
+ * @extends Component
+ * @property {string} text - Message
+ * @property {number} duration - Durée d'affichage
+ * @property {number} fontSize - Taille de police
+ * @property {number} padding - Padding interne
+ * @property {number} opacity - Opacité
+ * @property {string} platform - Plateforme
+ * @property {boolean} isVisible - Visibilité
+ * @property {number} targetY - Position Y cible
+ * @property {number} minWidth - Largeur minimale
+ * @property {number} maxWidth - Largeur maximale
+ * @property {boolean} animating - En cours d'animation
+ */
+class Toast extends Component {
+  /**
+   * Crée une instance de Toast
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {string} [options.text=''] - Message
+   * @param {number} [options.duration=3000] - Durée en ms
+   * @param {number} [options.x] - Position X (auto-centré)
+   * @param {number} [options.y] - Position Y (en bas)
+   */
+  constructor(framework, options = {}) {
+    super(framework, {
+      x: 0,
+      y: framework.height, // Commence hors écran en bas
+      width: framework.width,
+      height: 60, // Hauteur fixe pour le toast
+      ...options
+    });
+    
+    this.text = options.text || '';
+    this.duration = options.duration || 3000;
+    this.fontSize = 16;
+    this.padding = 20;
+    this.opacity = 0;
+    this.platform = framework.platform;
+    this.isVisible = false;
+    
+    // Position cible (en bas, légèrement remonté)
+    this.targetY = framework.height - 100;
+    
+    // Calculer la largeur minimale
+    this.minWidth = 200;
+    this.maxWidth = Math.min(600, framework.width - 40);
+    
+    // Animation
+    this.animating = false;
+    
+    // NE PAS appeler show() ici - laissé à l'appelant
+  }
+
+  /**
+   * Affiche le toast
+   */
+  show() {
+    this.isVisible = true;
+    this.visible = true;
+    this.animateIn();
+    
+    // Auto-dismiss après la durée
+    setTimeout(() => {
+      if (this.isVisible) {
+        this.hide();
+      }
+    }, this.duration);
+  }
+
+  /**
+   * Cache le toast
+   */
+  hide() {
+    this.animateOut();
+  }
+
+  /**
+   * Anime l'entrée
+   * @private
+   */
+  animateIn() {
+    if (this.animating) return;
+    this.animating = true;
+    
+    const animate = () => {
+      this.opacity += 0.1;
+      this.y -= (this.y - this.targetY) * 0.2;
+      
+      if (this.opacity >= 1 && Math.abs(this.y - this.targetY) < 1) {
+        this.opacity = 1;
+        this.y = this.targetY;
+        this.animating = false;
+        return;
+      }
+      
+      requestAnimationFrame(animate);
+    };
+    
+    animate();
+  }
+
+  /**
+   * Anime la sortie
+   * @private
+   */
+  animateOut() {
+    if (this.animating) return;
+    this.animating = true;
+    
+    const animate = () => {
+      this.opacity -= 0.1;
+      this.y += 5;
+      
+      if (this.opacity <= 0) {
+        this.opacity = 0;
+        this.isVisible = false;
+        this.visible = false;
+        this.animating = false;
+        this.framework.remove(this);
+        return;
+      }
+      
+      requestAnimationFrame(animate);
+    };
+    
+    animate();
+  }
+
+  /**
+   * Dessine le toast
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    if (!this.isVisible || this.opacity <= 0) return;
+    
+    ctx.save();
+    ctx.globalAlpha = this.opacity;
+    
+    // Calculer la largeur en fonction du texte
+    ctx.font = `${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
+    const textWidth = ctx.measureText(this.text).width;
+    const toastWidth = Math.min(
+      this.maxWidth,
+      Math.max(this.minWidth, textWidth + this.padding * 2)
+    );
+    
+    // Position centrée horizontalement
+    const toastX = (this.framework.width - toastWidth) / 2;
+    const toastY = this.y;
+    
+    if (this.platform === 'material') {
+      // Material Toast
+      ctx.fillStyle = '#323232';
+      ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
+      ctx.shadowBlur = 15;
+      ctx.shadowOffsetY = 4;
+      ctx.beginPath();
+      this.roundRect(ctx, toastX, toastY, toastWidth, this.height, 8);
+      ctx.fill();
+    } else {
+      // Cupertino Toast
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.85)';
+      ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
+      ctx.shadowBlur = 20;
+      ctx.shadowOffsetY = 4;
+      ctx.beginPath();
+      this.roundRect(ctx, toastX, toastY, toastWidth, this.height, 14);
+      ctx.fill();
+    }
+    
+    ctx.shadowColor = 'transparent';
+    ctx.shadowBlur = 0;
+    
+    // Texte
+    ctx.fillStyle = '#FFFFFF';
+    ctx.font = `${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    
+    // Tronquer le texte si nécessaire
+    let displayText = this.text;
+    if (textWidth > toastWidth - this.padding * 2) {
+      // Trouver où couper le texte
+      let truncated = this.text;
+      for (let i = this.text.length; i > 0; i--) {
+        truncated = this.text.substring(0, i) + '...';
+        if (ctx.measureText(truncated).width <= toastWidth - this.padding * 2) {
+          displayText = truncated;
+          break;
+        }
+      }
+    }
+    
+    ctx.fillText(displayText, toastX + toastWidth / 2, toastY + 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.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);
+    ctx.closePath();
+  }
+
+  /**
+   * Vérifie si un point est dans les limites
+   * @returns {boolean} False (non cliquable)
+   */
+  isPointInside() {
+    return false; // Non cliquable
+  }
+}
+
+export default Toast;