canvasframework 0.3.6

package/components/NumberInput.js

@@ -0,0 +1,271 @@
+import Component from '../core/Component.js';
+/**
+ * Champ de saisie numérique avec support multi-plateforme et validation
+ * @class
+ * @extends Component
+ * @param {Framework} framework - Instance du framework
+ * @param {Object} [options={}] - Options de configuration
+ * @param {number} [options.value=0] - Valeur initiale
+ * @param {number} [options.min] - Valeur minimale
+ * @param {number} [options.max] - Valeur maximale
+ * @param {number} [options.step=1] - Incrément/décrément
+ * @param {string} [options.placeholder='0'] - Texte par défaut
+ * @param {number} [options.fontSize=16] - Taille de police
+ * @param {Function} [options.onChange] - Callback lors du changement de valeur
+ * @param {number} [options.height] - Hauteur personnalisée (44 par défaut sur iOS)
+ * @example
+ * const numberInput = new NumberInput(framework, {
+ *   value: 10,
+ *   min: 0,
+ *   max: 100,
+ *   step: 5,
+ *   onChange: (value) => console.log('New value:', value)
+ * });
+ */
+class NumberInput extends Component {
+  /**
+   * @constructs NumberInput
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    /** @type {number|string} */
+    this.value = options.value || 0;
+    /** @type {number|undefined} */
+    this.min = options.min;
+    /** @type {number|undefined} */
+    this.max = options.max;
+    /** @type {number} */
+    this.step = options.step || 1;
+    /** @type {string} */
+    this.placeholder = options.placeholder || '0';
+    /** @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;
+    
+    // Ajuster la hauteur pour iOS
+    if (this.platform === 'cupertino') {
+      this.height = options.height || 44;
+    }
+    
+    this.onFocus = this.handleFocus.bind(this);
+    this.onBlur = this.handleBlur.bind(this);
+    
+    // CRÉER UN INPUT CACHÉ UNIQUE POUR CETTE INSTANCE
+    /** @type {string} */
+    this.hiddenInputId = `hidden-number-input-${Math.random().toString(36).substr(2, 9)}`;
+    this.setupHiddenInput();
+  }
+  
+  /**
+   * Configure l'input caché dans le DOM pour la saisie clavier
+   * @private
+   */
+  setupHiddenInput() {
+    // Créer un input caché unique pour cette instance
+    const hiddenInput = document.createElement('input');
+    hiddenInput.id = this.hiddenInputId;
+    hiddenInput.type = 'number';
+    hiddenInput.style.position = 'absolute';
+    hiddenInput.style.opacity = '0';
+    hiddenInput.style.width = '1px';
+    hiddenInput.style.height = '1px';
+    hiddenInput.style.left = '-9999px';
+    hiddenInput.style.top = '0px';
+    hiddenInput.style.fontSize = '16px'; // Forcer la taille de police
+    
+    // Appliquer les contraintes
+    if (this.min !== undefined) hiddenInput.min = this.min;
+    if (this.max !== undefined) hiddenInput.max = this.max;
+    if (this.step) hiddenInput.step = this.step;
+    
+    document.body.appendChild(hiddenInput);
+    
+    hiddenInput.addEventListener('input', (e) => {
+      if (this.focused) {
+        let newValue = parseFloat(e.target.value);
+        
+        // Gérer les valeurs vides
+        if (isNaN(newValue)) {
+          newValue = '';
+        } else {
+          // Appliquer min/max
+          if (this.min !== undefined) newValue = Math.max(this.min, newValue);
+          if (this.max !== undefined) newValue = Math.min(this.max, newValue);
+        }
+        
+        this.value = newValue;
+        
+        if (this.onChange) this.onChange(this.value);
+      }
+    });
+    
+    hiddenInput.addEventListener('blur', () => {
+      this.handleBlur();
+    });
+    
+    hiddenInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        this.handleBlur();
+      }
+    });
+    
+    /** @type {HTMLInputElement} */
+    this.hiddenInput = hiddenInput;
+  }
+  
+  /**
+   * Gère le focus sur le champ
+   */
+  handleFocus() {
+    if (!this.hiddenInput) return;
+    
+    this.focused = true;
+    this.cursorVisible = true;
+    
+    // Positionner et configurer l'input
+    const adjustedY = this.y + this.framework.scrollOffset;
+    
+    // Sur mobile, on veut forcer le clavier numérique
+    this.hiddenInput.type = 'number';
+    this.hiddenInput.inputMode = 'decimal';
+    this.hiddenInput.pattern = '[0-9]*';
+    
+    // Définir la valeur actuelle
+    this.hiddenInput.value = this.value !== null && this.value !== undefined ? this.value : '';
+    
+    // Forcer le focus avec un délai pour éviter les problèmes de rendu
+    setTimeout(() => {
+      this.hiddenInput.focus();
+    }, 50);
+  }
+  
+  /**
+   * Gère la perte de focus
+   */
+  handleBlur() {
+    this.focused = false;
+    this.cursorVisible = false;
+    
+    // S'assurer que la valeur est valide
+    if (this.hiddenInput && this.hiddenInput.value !== '') {
+      let val = parseFloat(this.hiddenInput.value);
+      if (!isNaN(val)) {
+        if (this.min !== undefined) val = Math.max(this.min, val);
+        if (this.max !== undefined) val = Math.min(this.max, val);
+        this.value = val;
+      }
+    }
+  }
+  
+  /**
+   * Gère le clic sur le champ
+   */
+  onClick() {
+    this.handleFocus();
+  }
+  
+  /**
+   * Dessine le champ de saisie
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    const displayValue = this.value !== null && this.value !== undefined ? 
+                         this.value.toString() : this.placeholder;
+    const isPlaceholder = this.value === null || this.value === undefined || this.value === '';
+    
+    if (this.platform === 'material') {
+      // Material Design NumberInput
+      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();
+      
+      // Valeur
+      ctx.fillStyle = isPlaceholder ? '#999999' : '#000000';
+      ctx.font = `${this.fontSize}px Roboto, sans-serif`;
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(displayValue, this.x + 2, this.y + this.height / 2);
+      
+    } else {
+      // Cupertino NumberInput
+      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();
+      
+      // Valeur
+      ctx.fillStyle = isPlaceholder ? '#999999' : '#000000';
+      ctx.font = `${this.fontSize}px -apple-system, sans-serif`;
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(displayValue, this.x + 10, this.y + this.height / 2);
+    }
+    
+    // Curseur
+    if (this.focused && this.cursorVisible) {
+      const textWidth = ctx.measureText(displayValue).width;
+      ctx.fillStyle = this.platform === 'material' ? '#6200EE' : '#007AFF';
+      ctx.fillRect(this.x + (this.platform === 'material' ? 2 : 10) + textWidth + 2, 
+                   this.y + 10, 2, this.height - 20);
+    }
+    
+    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;
+  }
+  
+  /**
+   * Nettoie les ressources (supprime l'input caché du DOM)
+   */
+  destroy() {
+    if (this.hiddenInput && this.hiddenInput.parentNode) {
+      this.hiddenInput.parentNode.removeChild(this.hiddenInput);
+    }
+  }
+}
+
+export default NumberInput;

package/components/ProgressBar.js

@@ -0,0 +1,88 @@
+import Component from '../core/Component.js';
+/**
+ * Barre de progression
+ * @class
+ * @extends Component
+ * @property {number} progress - Progression (0-100)
+ * @property {string} platform - Plateforme ('material' ou 'cupertino')
+ * @property {number} height - Hauteur de la barre
+ */
+class ProgressBar extends Component {
+  /**
+   * Crée une instance de ProgressBar
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {number} [options.progress=0] - Progression (0-100)
+   * @param {number} [options.height=4] - Hauteur de la barre
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.progress = options.progress || 0; // 0-100
+    this.platform = framework.platform;
+    this.height = options.height || 4;
+  }
+
+  /**
+   * Dessine la barre de progression
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    if (this.platform === 'material') {
+      // Track
+      ctx.fillStyle = '#E0E0E0';
+      ctx.fillRect(this.x, this.y, this.width, this.height);
+      
+      // Progress
+      ctx.fillStyle = '#6200EE';
+      ctx.fillRect(this.x, this.y, (this.width * this.progress) / 100, this.height);
+    } else {
+      // Cupertino
+      ctx.fillStyle = '#E5E5EA';
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, this.height / 2);
+      ctx.fill();
+      
+      ctx.fillStyle = '#007AFF';
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, (this.width * this.progress) / 100, this.height, this.height / 2);
+      ctx.fill();
+    }
+    
+    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) {
+    if (width < radius * 2) width = radius * 2;
+    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 les limites (toujours false pour ProgressBar)
+   * @returns {boolean} False (non cliquable)
+   */
+  isPointInside() {
+    return false;
+  }
+}
+
+export default ProgressBar;

package/components/RadioButton.js

@@ -0,0 +1,142 @@
+import Component from '../core/Component.js';
+
+/**
+ * Bouton radio pour les sélections uniques
+ * @class
+ * @extends Component
+ * @property {string} group - Groupe de boutons radio
+ * @property {boolean} checked - État sélectionné
+ * @property {string} label - Texte du label
+ * @property {string} platform - Plateforme
+ * @property {number} circleSize - Taille du cercle
+ * @property {number} circleRadius - Rayon du cercle
+ * @property {Function} onChange - Callback au changement
+ */
+class RadioButton extends Component {
+  /**
+   * Crée une instance de RadioButton
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {string} [options.group='default'] - Groupe de boutons
+   * @param {boolean} [options.checked=false] - État initial
+   * @param {string} [options.label=''] - Texte du label
+   * @param {Function} [options.onChange] - Callback au changement
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.group = options.group || 'default';
+    this.checked = options.checked || false;
+    this.label = options.label || '';
+    this.platform = framework.platform;
+    this.circleSize = 24; // Taille du cercle
+    this.circleRadius = 10; // Rayon du cercle
+    this.onChange = options.onChange;
+    
+    // Calculer la largeur totale incluant le label
+    this.totalWidth = this.label ? this.circleSize + 8 + this.getTextWidth(this.label) : this.circleSize;
+    this.width = this.totalWidth; // Mettre à jour la largeur totale
+    this.height = this.circleSize; // Garder la même hauteur
+    
+    // Définir onClick
+    this.onClick = this.handleClick.bind(this);
+  }
+  
+  /**
+   * Calcule la largeur du texte
+   * @param {string} text - Texte à mesurer
+   * @returns {number} Largeur du texte
+   * @private
+   */
+  getTextWidth(text) {
+    // Utiliser le contexte temporaire pour mesurer le texte
+    const ctx = this.framework.ctx;
+    ctx.save();
+    ctx.font = '16px -apple-system, sans-serif';
+    const width = ctx.measureText(text).width;
+    ctx.restore();
+    return width;
+  }
+
+  /**
+   * Gère le clic sur le bouton radio
+   * @private
+   */
+  handleClick() {
+    // Décocher les autres du même groupe
+    for (let comp of this.framework.components) {
+      if (comp instanceof RadioButton && comp.group === this.group && comp !== this) {
+        comp.checked = false;
+      }
+    }
+    this.checked = true;
+    if (this.onChange) this.onChange(this.checked);
+  }
+
+  /**
+   * Dessine le bouton radio
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    const centerX = this.x + this.circleSize / 2;
+    const centerY = this.y + this.circleSize / 2;
+    
+    if (this.platform === 'material') {
+      // Outer circle
+      ctx.strokeStyle = this.checked ? '#6200EE' : '#666666';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, this.circleRadius, 0, Math.PI * 2);
+      ctx.stroke();
+      
+      // Inner circle
+      if (this.checked) {
+        ctx.fillStyle = '#6200EE';
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, 5, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    } else {
+      // Cupertino
+      ctx.strokeStyle = this.checked ? '#007AFF' : '#C7C7CC';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, this.circleRadius, 0, Math.PI * 2);
+      ctx.stroke();
+      
+      if (this.checked) {
+        ctx.fillStyle = '#007AFF';
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, 5, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+    
+    // Label
+    if (this.label) {
+      ctx.fillStyle = '#000000';
+      ctx.font = '16px -apple-system, sans-serif';
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this.label, this.x + this.circleSize + 8, centerY);
+    }
+    
+    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 le bouton
+   */
+  isPointInside(x, y) {
+    return x >= this.x && 
+           x <= this.x + this.width && 
+           y >= this.y && 
+           y <= this.y + this.height;
+  }
+}
+
+export default RadioButton;