canvasframework 0.3.6

package/components/SelectDialog.js

@@ -0,0 +1,255 @@
+import Modal from '../components/Modal.js';
+/**
+ * Modal pour la sélection d'une option parmi une liste
+ * @class
+ * @extends Modal
+ * @param {Framework} framework - Instance du framework
+ * @param {Object} [options={}] - Options de configuration
+ * @param {string} [options.title='Sélectionner une option'] - Titre du modal
+ * @param {string[]} [options.options=[]] - Liste des options
+ * @param {number} [options.selectedIndex=0] - Index de l'option sélectionnée par défaut
+ * @param {Function} [options.onSelect] - Callback lors de la sélection
+ * @example
+ * const dialog = new SelectDialog(framework, {
+ *   title: 'Choisir une couleur',
+ *   options: ['Rouge', 'Vert', 'Bleu'],
+ *   selectedIndex: 1,
+ *   onSelect: (index, value) => console.log('Selected:', value)
+ * });
+ */
+class SelectDialog extends Modal {
+  /**
+   * @constructs SelectDialog
+   */
+  constructor(framework, options = {}) {
+    // Calculer la hauteur en fonction du nombre d'options
+    const optionsCount = options.options?.length || 0;
+    const itemHeight = 50;
+    const dialogHeight = Math.min(
+      400, // Hauteur max
+      Math.max(200, optionsCount * itemHeight + 100) // Hauteur min + espace pour titre
+    );
+    
+    // Appeler le constructeur parent
+    super(framework, {
+      title: options.title || 'Sélectionner une option',
+      width: Math.min(350, framework.width - 40),
+      height: dialogHeight,
+      showCloseButton: true,
+      closeOnOverlayClick: true,
+      padding: 0, // Pas de padding, on gère nous-même
+      ...options
+    });
+    
+    /** @type {string[]} */
+    this.options = options.options || [];
+    /** @type {number} */
+    this.selectedIndex = options.selectedIndex || 0;
+    /** @type {Function|undefined} */
+    this.onSelect = options.onSelect;
+    /** @type {number} */
+    this.itemHeight = itemHeight;
+    /** @type {number} */
+    this.hoveredIndex = -1;
+    
+    // Désactiver les animations
+    this.opacity = 1;
+    this.scale = 1;
+    this.isVisible = true;
+    this.visible = true;
+    
+    // AJOUTER: Définir onPress et onMove pour que le framework les appelle
+    this.onPress = this.handlePress.bind(this);
+    this.onMove = this.handleMove.bind(this);
+  }
+  
+  /**
+   * Dessine le modal de sélection
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    if (!this.isVisible) return;
+    
+    ctx.save();
+    ctx.globalAlpha = this.opacity;
+    
+    // Overlay sombre
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.fillRect(0, 0, this.framework.width, this.framework.height);
+    
+    // Calculer la position du modal (centré)
+    const modalX = (this.framework.width - this.modalWidth) / 2;
+    const modalY = (this.framework.height - this.modalHeight) / 2;
+    
+    // Fond du modal
+    ctx.fillStyle = '#FFFFFF';
+    ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
+    ctx.shadowBlur = 20;
+    ctx.shadowOffsetY = 10;
+    
+    ctx.beginPath();
+    this.roundRect(ctx, modalX, modalY, this.modalWidth, this.modalHeight, 12);
+    ctx.fill();
+    
+    ctx.shadowColor = 'transparent';
+    
+    // Titre
+    if (this.title) {
+      ctx.fillStyle = '#000000';
+      ctx.font = 'bold 18px -apple-system, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this.title, modalX + this.modalWidth / 2, modalY + 30);
+      
+      // Ligne de séparation sous le titre
+      ctx.strokeStyle = '#E0E0E0';
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(modalX, modalY + 50);
+      ctx.lineTo(modalX + this.modalWidth, modalY + 50);
+      ctx.stroke();
+    }
+    
+    // Zone de contenu (avec scroll si nécessaire)
+    const contentX = modalX;
+    const contentY = modalY + 55; // Après le titre et la ligne
+    const contentHeight = this.modalHeight - 55;
+    
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(contentX, contentY, this.modalWidth, contentHeight);
+    ctx.clip();
+    
+    // Options
+    for (let i = 0; i < this.options.length; i++) {
+      const optionY = contentY + i * this.itemHeight;
+      
+      // Si l'option est en dehors de la zone visible, passer à la suivante
+      if (optionY + this.itemHeight < contentY || optionY > contentY + contentHeight) {
+        continue;
+      }
+      
+      // Option sélectionnée
+      if (i === this.selectedIndex) {
+        ctx.fillStyle = this.framework.platform === 'material' ? 'rgba(98, 0, 238, 0.1)' : 'rgba(0, 122, 255, 0.1)';
+        ctx.fillRect(contentX, optionY, this.modalWidth, this.itemHeight);
+      }
+      
+      // Effet hover
+      if (this.hoveredIndex === i) {
+        ctx.fillStyle = '#F5F5F5';
+        ctx.fillRect(contentX, optionY, this.modalWidth, this.itemHeight);
+      }
+      
+      // Texte de l'option
+      ctx.fillStyle = i === this.selectedIndex ? 
+        (this.framework.platform === 'material' ? '#6200EE' : '#007AFF') : 
+        '#000000';
+      ctx.font = i === this.selectedIndex ? 'bold 16px -apple-system, sans-serif' : '16px -apple-system, sans-serif';
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this.options[i], contentX + 20, optionY + this.itemHeight / 2);
+      
+      // Divider entre les options
+      if (i < this.options.length - 1) {
+        ctx.strokeStyle = '#E0E0E0';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(contentX + 20, optionY + this.itemHeight);
+        ctx.lineTo(contentX + this.modalWidth - 20, optionY + this.itemHeight);
+        ctx.stroke();
+      }
+    }
+    
+    ctx.restore();
+    ctx.restore();
+  }
+  
+  /**
+   * Gère le clic dans le modal
+   * @param {number} x - Position X du clic
+   * @param {number} y - Position Y du clic
+   */
+  handlePress(x, y) {
+    // POUR LES MODALS: utiliser les coordonnées brutes car le modal est un composant FIXE
+    // Les modals ne sont pas affectés par le scroll
+    
+    const modalX = (this.framework.width - this.modalWidth) / 2;
+    const modalY = (this.framework.height - this.modalHeight) / 2;
+    const contentY = modalY + 55;
+    
+    // Vérifier si une option a été cliquée
+    for (let i = 0; i < this.options.length; i++) {
+      const optionY = contentY + i * this.itemHeight;
+      
+      // IMPORTANT: Pas d'ajustement de scroll pour les modals
+      if (y >= optionY && y <= optionY + this.itemHeight &&
+          x >= modalX && x <= modalX + this.modalWidth) {
+        
+        this.selectedIndex = i;
+        if (this.onSelect) {
+          this.onSelect(i, this.options[i]);
+        }
+        this.hide();
+        return;
+      }
+    }
+    
+    // Sinon, laisser le parent gérer (bouton de fermeture, overlay)
+    super.handlePress(x, y);
+  }
+  
+  /**
+   * Gère le survol dans le modal
+   * @param {number} x - Position X actuelle
+   * @param {number} y - Position Y actuelle
+   */
+  handleMove(x, y) {
+    const modalX = (this.framework.width - this.modalWidth) / 2;
+    const modalY = (this.framework.height - this.modalHeight) / 2;
+    const contentY = modalY + 55;
+    
+    this.hoveredIndex = -1;
+    
+    // Vérifier si on survole une option
+    for (let i = 0; i < this.options.length; i++) {
+      const optionY = contentY + i * this.itemHeight;
+      
+      // IMPORTANT: Pas d'ajustement de scroll pour les modals
+      if (y >= optionY && y <= optionY + this.itemHeight &&
+          x >= modalX && x <= modalX + this.modalWidth) {
+        this.hoveredIndex = i;
+        break;
+      }
+    }
+  }
+  
+  /**
+   * Vérifie si un point est à l'intérieur du modal
+   * @param {number} x - Position X
+   * @param {number} y - Position Y
+   * @returns {boolean} True si le point est à l'intérieur du modal
+   */
+  isPointInside(x, y) {
+    const modalX = (this.framework.width - this.modalWidth) / 2;
+    const modalY = (this.framework.height - this.modalHeight) / 2;
+    
+    // Les modals sont des composants fixes, donc pas d'ajustement de scroll
+    return x >= modalX && 
+           x <= modalX + this.modalWidth && 
+           y >= modalY && 
+           y <= modalY + this.modalHeight;
+  }
+  
+  /**
+   * Affiche le modal
+   */
+  show() {
+    this.isVisible = true;
+    this.visible = true;
+    this.opacity = 1;
+    this.scale = 1;
+  }
+}
+
+export default SelectDialog;

package/components/Slider.js

@@ -0,0 +1,113 @@
+import Component from '../core/Component.js';
+
+class Slider extends Component {
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.min = options.min || 0;
+    this.max = options.max || 100;
+    this.value = options.value || 50;
+    this.platform = framework.platform;
+    this.onChange = options.onChange;
+    this.dragging = false;
+    
+    // Animation state
+    this.thumbScale = 1.0;
+    this.targetScale = 1.0;
+    
+    this.onPress = this.handlePress.bind(this);
+    this.onMove = this.handleMove.bind(this);
+    this.onClick = this.handleClick.bind(this);
+  }
+
+  handlePress(x, y) {
+    this.dragging = true;
+    this.targetScale = 1.5; // Agrandissement de 50%
+    this.updateValue(x);
+    return true;
+  }
+
+  handleMove(x, y) {
+    if (this.dragging) {
+      this.updateValue(x);
+    }
+  }
+
+  handleClick() {
+    this.dragging = false;
+    this.targetScale = 1.0; // Retour à la taille normale
+  }
+
+  updateValue(x) {
+    const relativeX = Math.max(0, Math.min(this.width, x - this.x));
+    const newValue = this.min + (relativeX / this.width) * (this.max - this.min);
+    
+    if (newValue !== this.value) {
+      this.value = newValue;
+      if (this.onChange) this.onChange(this.value);
+    }
+  }
+
+  draw(ctx) {
+    ctx.save();
+    
+    // Animation du scale
+    this.thumbScale += (this.targetScale - this.thumbScale) * 0.2;
+    
+    const progress = (this.value - this.min) / (this.max - this.min);
+    const thumbX = this.x + progress * this.width;
+
+    // Track
+    ctx.strokeStyle = this.platform === 'material' ? '#E0E0E0' : '#C7C7CC';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(this.x, this.y + this.height / 2);
+    ctx.lineTo(this.x + this.width, this.y + this.height / 2);
+    ctx.stroke();
+
+    // Track rempli
+    const trackColor = this.platform === 'material' ? '#6200EE' : '#007AFF';
+    ctx.strokeStyle = trackColor;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(this.x, this.y + this.height / 2);
+    ctx.lineTo(thumbX, this.y + this.height / 2);
+    ctx.stroke();
+
+    // Curseur avec animation
+    const baseRadius = 8;
+    const currentRadius = baseRadius * this.thumbScale;
+    
+    // Effet d'ombre pendant le drag
+    if (this.dragging) {
+      ctx.shadowColor = trackColor;
+      ctx.shadowBlur = 10;
+    }
+    
+    ctx.fillStyle = trackColor;
+    ctx.beginPath();
+    ctx.arc(thumbX, this.y + this.height / 2, currentRadius, 0, Math.PI * 2);
+    ctx.fill();
+    
+    if (this.dragging) {
+      ctx.shadowColor = 'transparent';
+      ctx.shadowBlur = 0;
+    }
+
+    ctx.restore();
+  }
+
+  isPointInside(x, y) {
+    const progress = (this.value - this.min) / (this.max - this.min);
+    const thumbX = this.x + progress * this.width;
+    const thumbY = this.y + this.height / 2;
+    const maxRadius = 8 * 1.5 + 5; // Rayon max + marge
+    
+    // Zone de clic plus large pour faciliter l'utilisation
+    const distance = Math.sqrt((x - thumbX) ** 2 + (y - thumbY) ** 2);
+    return distance <= maxRadius || 
+           (x >= this.x && x <= this.x + this.width && 
+            y >= this.y && y <= this.y + this.height);
+  }
+}
+
+export default Slider;

package/components/Snackbar.js

@@ -0,0 +1,243 @@
+import Component from '../core/Component.js';
+/**
+ * Snackbar (notification avec action)
+ * @class
+ * @extends Component
+ * @property {string} message - Message
+ * @property {string|null} actionText - Texte de l'action
+ * @property {Function} onAction - Callback de l'action
+ * @property {number} duration - Durée d'affichage
+ * @property {string} platform - Plateforme
+ * @property {number} padding - Padding interne
+ * @property {number} minWidth - Largeur minimale
+ * @property {number} maxWidth - Largeur maximale
+ * @property {number} targetY - Position Y cible
+ * @property {number} opacity - Opacité
+ * @property {boolean} isVisible - Visibilité
+ * @property {Object|null} actionRect - Rectangle de l'action
+ * @property {boolean} actionHovered - Action survolée
+ */
+class Snackbar extends Component {
+  /**
+   * Crée une instance de Snackbar
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {string} [options.message=''] - Message
+   * @param {string} [options.actionText] - Texte de l'action
+   * @param {Function} [options.onAction] - Callback de l'action
+   * @param {number} [options.duration=4000] - Durée en ms
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.message = options.message || '';
+    this.actionText = options.actionText || null;
+    this.onAction = options.onAction;
+    this.duration = options.duration || 4000;
+    this.platform = framework.platform;
+    
+    // Dimensions
+    this.height = 48;
+    this.padding = 16;
+    this.minWidth = 344;
+    this.maxWidth = Math.min(672, framework.width - 32);
+    
+    // Calculer la largeur
+    const ctx = framework.ctx;
+    ctx.font = '14px -apple-system, Roboto, sans-serif';
+    const messageWidth = ctx.measureText(this.message).width;
+    const actionWidth = this.actionText ? ctx.measureText(this.actionText).width + 40 : 0;
+    this.width = Math.min(this.maxWidth, Math.max(this.minWidth, messageWidth + actionWidth + this.padding * 3));
+    
+    // Position (centré en bas)
+    this.x = (framework.width - this.width) / 2;
+    this.y = framework.height; // Commence hors écran
+    this.targetY = framework.height - this.height - 37;
+    
+    this.opacity = 0;
+    this.isVisible = false;
+    
+    // Zone du bouton d'action
+    this.actionRect = null;
+    
+    this.onPress = this.handlePress.bind(this);
+  }
+  
+  /**
+   * Affiche la snackbar
+   */
+  show() {
+    this.isVisible = true;
+    this.visible = true;
+    this.animateIn();
+    
+    // Auto-hide après duration
+    setTimeout(() => {
+      if (this.isVisible) {
+        this.hide();
+      }
+    }, this.duration);
+  }
+  
+  /**
+   * Cache la snackbar
+   */
+  hide() {
+    this.animateOut();
+  }
+  
+  /**
+   * Anime l'entrée
+   * @private
+   */
+  animateIn() {
+    const animate = () => {
+      if (this.y > this.targetY) {
+        this.y -= (this.y - this.targetY) * 0.2;
+        this.opacity = Math.min(1, this.opacity + 0.1);
+        requestAnimationFrame(animate);
+      } else {
+        this.y = this.targetY;
+        this.opacity = 1;
+      }
+    };
+    animate();
+  }
+  
+  /**
+   * Anime la sortie
+   * @private
+   */
+  animateOut() {
+    const animate = () => {
+      if (this.opacity > 0) {
+        this.y += 5;
+        this.opacity -= 0.1;
+        requestAnimationFrame(animate);
+      } else {
+        this.isVisible = false;
+        this.visible = false;
+        this.framework.remove(this);
+      }
+    };
+    animate();
+  }
+  
+  /**
+   * Dessine la snackbar
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    if (!this.isVisible || this.opacity <= 0) return;
+    
+    ctx.save();
+    ctx.globalAlpha = this.opacity;
+    
+    // Background
+    ctx.fillStyle = this.platform === 'material' ? '#323232' : 'rgba(0, 0, 0, 0.9)';
+    ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
+    ctx.shadowBlur = 8;
+    ctx.shadowOffsetY = 4;
+    
+    ctx.beginPath();
+    this.roundRect(ctx, this.x, this.y, this.width, this.height, 4);
+    ctx.fill();
+    
+    ctx.shadowColor = 'transparent';
+    
+    // Message
+    ctx.fillStyle = '#FFFFFF';
+    ctx.font = '14px -apple-system, Roboto, sans-serif';
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(this.message, this.x + this.padding, this.y + this.height / 2);
+    
+    // Bouton d'action
+    if (this.actionText) {
+      const ctx2 = this.framework.ctx;
+      ctx2.font = '14px -apple-system, Roboto, sans-serif';
+      const actionWidth = ctx2.measureText(this.actionText).width;
+      const actionX = this.x + this.width - actionWidth - this.padding * 2;
+      const actionY = this.y;
+      
+      this.actionRect = {
+        x: actionX,
+        y: actionY,
+        width: actionWidth + this.padding * 2,
+        height: this.height
+      };
+      
+      // Highlight si hover
+      if (this.actionHovered) {
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
+        ctx.fillRect(actionX, actionY, actionWidth + this.padding * 2, this.height);
+      }
+      
+      // Texte du bouton
+      const actionColor = this.platform === 'material' ? '#BB86FC' : '#0A84FF';
+      ctx.fillStyle = actionColor;
+      ctx.font = 'bold 14px -apple-system, Roboto, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText(this.actionText, actionX + (actionWidth + this.padding * 2) / 2, this.y + this.height / 2);
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Gère la pression (clic)
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @private
+   */
+  handlePress(x, y) {
+    if (this.actionRect && this.actionText) {
+      if (x >= this.actionRect.x && 
+          x <= this.actionRect.x + this.actionRect.width &&
+          y >= this.actionRect.y && 
+          y <= this.actionRect.y + this.actionRect.height) {
+        if (this.onAction) {
+          this.onAction();
+        }
+        this.hide();
+      }
+    }
+  }
+  
+  /**
+   * 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
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {boolean} True si le point est dans la snackbar
+   */
+  isPointInside(x, y) {
+    return this.isVisible && 
+           x >= this.x && x <= this.x + this.width && 
+           y >= this.y && y <= this.y + this.height;
+  }
+}
+
+export default Snackbar;