canvasframework 0.3.6

package/components/BottomSheet.js

@@ -0,0 +1,374 @@
+import Component from '../core/Component.js';
+/**
+ * Composant BottomSheet (feuille modale depuis le bas) avec drag & drop
+ * @class
+ * @extends Component
+ * @param {Framework} framework - Instance du framework
+ * @param {Object} [options={}] - Options de configuration
+ * @param {number} [options.height=framework.height * 0.6] - Hauteur du bottom sheet
+ * @param {boolean} [options.dragHandle=true] - Afficher la poignée de drag
+ * @param {boolean} [options.closeOnOverlayClick=true] - Fermer au clic sur l'overlay
+ * @param {string} [options.bgColor='#FFFFFF'] - Couleur de fond
+ * @param {number} [options.borderRadius=16] - Rayon des coins arrondis
+ * @example
+ * const bottomSheet = new BottomSheet(framework, {
+ *   height: 400,
+ *   bgColor: '#F5F5F5',
+ *   borderRadius: 20
+ * });
+ */
+class BottomSheet extends Component {
+  /**
+   * @constructs BottomSheet
+   */
+  constructor(framework, options = {}) {
+    super(framework, {
+      x: 0,
+      y: framework.height,
+      width: framework.width,
+      height: options.height || framework.height * 0.6,
+      visible: false
+    });
+    
+    /** @type {Component[]} */
+    this.children = [];
+    /** @type {boolean} */
+    this.dragHandle = options.dragHandle !== false;
+    /** @type {boolean} */
+    this.closeOnOverlayClick = options.closeOnOverlayClick !== false;
+    /** @type {string} */
+    this.bgColor = options.bgColor || '#FFFFFF';
+    /** @type {number} */
+    this.borderRadius = options.borderRadius || 16;
+    /** @type {number} */
+    this.targetY = framework.height;
+    /** @type {boolean} */
+    this.isOpen = false;
+    /** @type {boolean} */
+    this.animating = false;
+    /** @type {boolean} */
+    this.dragging = false;
+    /** @type {number} */
+    this.dragStartY = 0;
+    /** @type {number} */
+    this.dragOffset = 0;
+    /** @type {number} */
+    this.overlayOpacity = 0;
+    
+    // IMPORTANT: Supprimer les bindings ici et les gérer différemment
+    this.onPress = this.handlePress.bind(this);
+    this.onMove = this.handleMove.bind(this);
+    this.onRelease = this.handleRelease.bind(this);
+    
+    // Pour suivre le dernier clic
+    /** @type {number} */
+    this.lastClickTime = 0;
+  }
+  
+  /**
+   * Ajoute un enfant au bottom sheet
+   * @param {Component} child - Composant enfant à ajouter
+   * @returns {Component} L'enfant ajouté
+   */
+  add(child) {
+    this.children.push(child);
+    return child;
+  }
+  
+  /**
+   * Ouvre le bottom sheet avec animation
+   */
+  open() {
+    this.visible = true;
+    this.isOpen = true;
+    this.targetY = this.framework.height - this.height;
+    this.animate();
+  }
+  
+  /**
+   * Ferme le bottom sheet avec animation
+   */
+  close() {
+    this.isOpen = false;
+    this.targetY = this.framework.height;
+    this.animate(() => {
+      this.visible = false;
+    });
+  }
+  
+  /**
+   * Anime le bottom sheet vers sa position cible
+   * @param {Function} [callback] - Callback appelé à la fin de l'animation
+   * @private
+   */
+  animate(callback) {
+    if (this.animating) return;
+    this.animating = true;
+    
+    const step = () => {
+      const diff = this.targetY - this.y;
+      
+      if (Math.abs(diff) < 1) {
+        this.y = this.targetY;
+        this.overlayOpacity = this.isOpen ? 0.5 : 0;
+        this.animating = false;
+        if (callback) callback();
+        return;
+      }
+      
+      this.y += diff * 0.2;
+      
+      // Animer l'opacité de l'overlay
+      const progress = 1 - ((this.y - (this.framework.height - this.height)) / this.height);
+      this.overlayOpacity = Math.max(0, Math.min(0.5, progress * 0.5));
+      
+      requestAnimationFrame(step);
+    };
+    
+    step();
+  }
+  
+  /**
+   * Gère le clic/touch sur le bottom sheet
+   * @param {number} x - Position X du clic
+   * @param {number} y - Position Y du clic
+   */
+  handlePress(x, y) {
+    // Empêcher les doubles clics rapides
+    const now = Date.now();
+    if (now - this.lastClickTime < 300) return;
+    this.lastClickTime = now;
+    
+    // Calculer les coordonnées dans le sheet (sans scrollOffset car le sheet est fixe)
+    const adjustedY = y; // Pas d'ajustement de scroll pour le BottomSheet
+    
+    // Clic sur l'overlay (zone sombre)
+    if (adjustedY < this.y && this.closeOnOverlayClick) {
+      this.close();
+      return;
+    }
+    
+    // Début du drag sur la poignée
+    if (this.dragHandle && adjustedY >= this.y && adjustedY <= this.y + 40) {
+      this.dragging = true;
+      this.dragStartY = adjustedY;
+      this.dragOffset = 0;
+      this.framework.activeComponent = this;
+      return;
+    }
+    
+    // Vérifier les clics sur les enfants
+    const contentY = this.y + (this.dragHandle ? 40 : 16);
+    
+    // Parcourir les enfants dans l'ordre inverse (du dernier au premier)
+    for (let i = this.children.length - 1; i >= 0; i--) {
+      const child = this.children[i];
+      
+      if (!child.visible) continue;
+      
+      // Calculer les coordonnées absolues de l'enfant
+      const childAbsX = this.x + 16 + child.x;
+      const childAbsY = contentY + child.y;
+      
+      // Vérifier si le clic est dans l'enfant
+      if (adjustedY >= childAbsY && 
+          adjustedY <= childAbsY + child.height &&
+          x >= childAbsX && 
+          x <= childAbsX + child.width) {
+        
+        // Si l'enfant a un onClick, le déclencher
+        if (child.onClick) {
+          child.onClick();
+          return;
+        }
+        
+        // Si l'enfant a un onPress, le déclencher
+        if (child.onPress) {
+          // Calculer les coordonnées relatives pour l'enfant
+          const relativeX = x - childAbsX;
+          const relativeY = adjustedY - childAbsY;
+          child.onPress(relativeX, relativeY);
+          return;
+        }
+        
+        // Marquer l'enfant comme pressé pour l'effet visuel
+        child.pressed = true;
+        
+        // Si c'est un bouton, déclencher son onClick après un délai
+        if (child instanceof Button || child instanceof FAB) {
+          setTimeout(() => {
+            if (child.onClick) child.onClick();
+            child.pressed = false;
+          }, 150);
+        }
+        return;
+      }
+    }
+  }
+  
+  /**
+   * Gère le déplacement pendant le drag
+   * @param {number} x - Position X actuelle
+   * @param {number} y - Position Y actuelle
+   */
+  handleMove(x, y) {
+    if (this.dragging) {
+      const adjustedY = y; // Pas d'ajustement de scroll
+      this.dragOffset = adjustedY - this.dragStartY;
+      
+      // Limiter le drag vers le haut
+      const newY = (this.framework.height - this.height) + this.dragOffset;
+      if (newY >= this.framework.height - this.height) {
+        this.y = newY;
+        
+        // Mettre à jour l'opacité de l'overlay
+        const progress = 1 - ((this.y - (this.framework.height - this.height)) / this.height);
+        this.overlayOpacity = Math.max(0, Math.min(0.5, progress * 0.5));
+      }
+    }
+  }
+  
+  /**
+   * Gère le relâchement après un drag
+   * @param {number} x - Position X du relâchement
+   * @param {number} y - Position Y du relâchement
+   */
+  handleRelease(x, y) {
+    if (this.dragging) {
+      this.dragging = false;
+      this.framework.activeComponent = null;
+      
+      // Si on a dragué plus de 30% vers le bas, fermer
+      if (this.dragOffset > this.height * 0.3) {
+        this.close();
+      } else {
+        // Sinon, revenir à la position ouverte
+        this.targetY = this.framework.height - this.height;
+        this.animate();
+      }
+    }
+    
+    // Réinitialiser l'état pressed pour tous les enfants
+    for (let child of this.children) {
+      child.pressed = false;
+    }
+  }
+  
+  /**
+   * Dessine le bottom sheet
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    if (!this.visible) return;
+    
+    ctx.save();
+    
+    // Overlay sombre
+    ctx.fillStyle = `rgba(0, 0, 0, ${this.overlayOpacity})`;
+    ctx.fillRect(0, 0, this.framework.width, this.framework.height);
+    
+    // BottomSheet
+    ctx.fillStyle = this.bgColor;
+    ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
+    ctx.shadowBlur = 20;
+    ctx.shadowOffsetY = -5;
+    
+    ctx.beginPath();
+    this.roundRectTop(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+    ctx.fill();
+    
+    ctx.shadowColor = 'transparent';
+    
+    // Drag Handle
+    if (this.dragHandle) {
+      ctx.fillStyle = '#CCCCCC';
+      ctx.beginPath();
+      this.roundRect(ctx, this.width / 2 - 20, this.y + 12, 40, 4, 2);
+      ctx.fill();
+    }
+    
+    // Contenu (avec clipping)
+    const contentY = this.y + (this.dragHandle ? 40 : 16);
+    const contentHeight = this.height - (this.dragHandle ? 40 : 16);
+    
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(this.x, contentY, this.width, contentHeight);
+    ctx.clip();
+    
+    // Dessiner les enfants
+    for (let child of this.children) {
+      if (child.visible) {
+        const originalX = child.x;
+        const originalY = child.y;
+        
+        child.x = this.x + 16 + originalX;
+        child.y = contentY + originalY;
+        
+        child.draw(ctx);
+        
+        child.x = originalX;
+        child.y = originalY;
+      }
+    }
+    
+    ctx.restore();
+    ctx.restore();
+  }
+  
+  /**
+   * Dessine un rectangle avec seulement les coins supérieurs 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
+   */
+  roundRectTop(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);
+    ctx.lineTo(x, y + height);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+  }
+  
+  /**
+   * 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} Toujours true si visible (le composant occupe tout l'écran)
+   */
+  isPointInside(x, y) {
+    return this.visible;
+  }
+}
+
+export default BottomSheet;

package/components/Button.js

@@ -0,0 +1,225 @@
+import Component from '../core/Component.js';
+
+/**
+ * Bouton cliquable
+ * @class
+ * @extends Component
+ * @property {string} text - Texte du bouton
+ * @property {number} fontSize - Taille de la police
+ * @property {string} platform - Plateforme
+ * @property {string} bgColor - Couleur de fond
+ * @property {string} textColor - Couleur du texte
+ * @property {string} rippleColor - Couleur du ripple
+ * @property {number} elevation - Élévation (ombre)
+ * @property {Array} ripples - Effets ripple
+ */
+class Button extends Component {
+  /**
+   * Crée une instance de Button
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {string} [options.text='Button'] - Texte
+   * @param {number} [options.fontSize=16] - Taille de police
+   * @param {string} [options.bgColor] - Couleur de fond (auto selon platform)
+   * @param {string} [options.textColor] - Couleur du texte (auto selon platform)
+   * @param {number} [options.elevation=2] - Élévation (Material)
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.text = options.text || 'Button';
+    this.fontSize = options.fontSize || 16;
+    this.platform = framework.platform;
+    
+    // Couleurs selon la plateforme
+    if (this.platform === 'material') {
+      this.bgColor = options.bgColor || '#6200EE';
+      this.textColor = options.textColor || '#FFFFFF';
+      this.rippleColor = 'rgba(255, 255, 255, 0.3)';
+      this.elevation = options.elevation || 2;
+    } else {
+      this.bgColor = options.bgColor || '#007AFF';
+      this.textColor = options.textColor || '#FFFFFF';
+      this.borderRadius = 10;
+    }
+    
+    // Effet Ripple
+    this.ripples = [];
+    
+    // Bind des méthodes
+    this.onPress = this.handlePress.bind(this);
+  }
+  
+  /**
+   * Gère la pression sur le bouton
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @private
+   */
+  handlePress(x, y) {
+    // Créer un ripple au point de clic
+    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;
+        }
+      }
+      
+      // Nettoyer les ripples terminés
+      this.ripples = this.ripples.filter(r => r.opacity > 0);
+      
+      if (hasActiveRipples) {
+        requestAnimationFrame(animate);
+      }
+    };
+    
+    animate();
+  }
+
+  /**
+   * Dessine le bouton
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    if (this.platform === 'material') {
+      // Material Design
+      // Ombre (elevation)
+      if (this.elevation > 0 && !this.pressed) {
+        ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
+        ctx.shadowBlur = this.elevation * 2;
+        ctx.shadowOffsetY = this.elevation;
+      }
+      
+      ctx.fillStyle = this.pressed ? this.darkenColor(this.bgColor) : this.bgColor;
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, 4);
+      ctx.fill();
+      
+      ctx.shadowColor = 'transparent';
+      ctx.shadowBlur = 0;
+      ctx.shadowOffsetY = 0;
+      
+      // Clipping pour les ripples
+      ctx.save();
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, 4);
+      ctx.clip();
+      
+      // Dessiner les ripples
+      for (let ripple of this.ripples) {
+        ctx.globalAlpha = ripple.opacity;
+        ctx.fillStyle = this.rippleColor;
+        ctx.beginPath();
+        ctx.arc(this.x + ripple.x, this.y + ripple.y, ripple.radius, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      
+      ctx.restore();
+      
+    } else {
+      // Cupertino (iOS)
+      ctx.fillStyle = this.pressed ? this.darkenColor(this.bgColor) : this.bgColor;
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+      ctx.fill();
+    }
+    
+    // Texte
+    ctx.fillStyle = this.textColor;
+    ctx.font = `${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(this.text, this.x + this.width / 2, this.y + 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.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);
+  }
+
+  /**
+   * Assombrit une couleur
+   * @param {string} color - Couleur hexadécimale
+   * @returns {string} Couleur assombrie
+   * @private
+   */
+  darkenColor(color) {
+    const rgb = this.hexToRgb(color);
+    return `rgb(${Math.max(0, rgb.r - 30)}, ${Math.max(0, rgb.g - 30)}, ${Math.max(0, rgb.b - 30)})`;
+  }
+
+  /**
+   * Convertit une couleur hex en RGB
+   * @param {string} hex - Couleur hexadécimale
+   * @returns {{r: number, g: number, b: number}} Objet RGB
+   * @private
+   */
+  hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : { r: 0, g: 0, b: 0 };
+  }
+
+  /**
+   * 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 Button;