canvasframework 0.3.9 → 0.3.11

package/components/AppBar.js

@@ -1,17 +1,9 @@
 import Component from '../core/Component.js';
+
 /**
- * Barre d'application supérieure
+ * Barre d'application supérieure (Material & Cupertino)
  * @class
  * @extends Component
- * @property {string} title - Titre
- * @property {string|null} leftIcon - Icône gauche ('menu' ou 'back')
- * @property {string|null} rightIcon - Icône droite ('search' ou 'more')
- * @property {Function} onLeftClick - Callback au clic gauche
- * @property {Function} onRightClick - Callback au clic droit
- * @property {string} platform - Plateforme
- * @property {string} bgColor - Couleur de fond
- * @property {string} textColor - Couleur du texte
- * @property {number} elevation - Élévation (ombre)
  */
 class AppBar extends Component {
   /**
@@ -19,13 +11,13 @@ class AppBar extends Component {
    * @param {CanvasFramework} framework - Framework parent
    * @param {Object} [options={}] - Options de configuration
    * @param {string} [options.title=''] - Titre
-   * @param {string} [options.leftIcon] - Icône gauche
-   * @param {string} [options.rightIcon] - Icône droite
+   * @param {string} [options.leftIcon] - Icône gauche ('menu' ou 'back')
+   * @param {string} [options.rightIcon] - Icône droite ('search' ou 'more')
    * @param {Function} [options.onLeftClick] - Callback gauche
    * @param {Function} [options.onRightClick] - Callback droit
    * @param {number} [options.height] - Hauteur (auto selon platform)
-   * @param {string} [options.bgColor] - Couleur de fond (auto selon platform)
-   * @param {string} [options.textColor] - Couleur du texte (auto selon platform)
+   * @param {string} [options.bgColor] - Couleur de fond
+   * @param {string} [options.textColor] - Couleur du texte
    * @param {number} [options.elevation=4] - Élévation (Material)
    */
   constructor(framework, options = {}) {
@@ -36,17 +28,31 @@ class AppBar extends Component {
       height: options.height || (framework.platform === 'material' ? 56 : 44),
       ...options
     });
+    
     this.title = options.title || '';
     this.leftIcon = options.leftIcon || null;
     this.rightIcon = options.rightIcon || null;
     this.onLeftClick = options.onLeftClick;
     this.onRightClick = options.onRightClick;
     this.platform = framework.platform;
-    this.bgColor = options.bgColor || (framework.platform === 'material' ? '#6200EE' : '#F8F8F8');
-    this.textColor = options.textColor || (framework.platform === 'material' ? '#FFFFFF' : '#000000');
-    this.elevation = options.elevation !== undefined ? options.elevation : 4;
     
-    // IMPORTANT: Définir onPress pour que le framework appelle handlePress
+    // Couleurs selon la plateforme
+    if (this.platform === 'material') {
+      this.bgColor = options.bgColor || '#6200EE';
+      this.textColor = options.textColor || '#FFFFFF';
+      this.elevation = options.elevation !== undefined ? options.elevation : 4;
+    } else {
+      // iOS : Transparent ou blanc avec blur effect (simulé)
+      this.bgColor = options.bgColor || 'rgba(248, 248, 248, 0.95)';
+      this.textColor = options.textColor || '#000000';
+      this.elevation = 0;
+    }
+    
+    // Ripple effect (Material uniquement)
+    this.ripples = [];
+    this.leftPressed = false;
+    this.rightPressed = false;
+    
     this.onPress = this.handlePress.bind(this);
   }
 
@@ -69,50 +75,123 @@ class AppBar extends Component {
     ctx.fillRect(this.x, this.y, this.width, this.height);
     
     ctx.shadowColor = 'transparent';
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetY = 0;
     
     // Bordure inférieure (iOS uniquement)
     if (this.platform === 'cupertino') {
-      ctx.strokeStyle = '#C6C6C8';
+      ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
       ctx.lineWidth = 0.5;
       ctx.beginPath();
-      ctx.moveTo(this.x, this.y + this.height);
-      ctx.lineTo(this.x + this.width, this.y + this.height);
+      ctx.moveTo(this.x, this.y + this.height - 0.5);
+      ctx.lineTo(this.x + this.width, this.y + this.height - 0.5);
       ctx.stroke();
     }
     
+    // Ripples pour les boutons (Material)
+    if (this.platform === 'material') {
+      this.drawRipples(ctx);
+    }
+    
+    // Overlay pressed pour iOS
+    if (this.platform === 'cupertino') {
+      if (this.leftPressed && this.leftIcon) {
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+        ctx.beginPath();
+        ctx.arc(28, this.y + this.height / 2, 20, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      if (this.rightPressed && this.rightIcon) {
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+        ctx.beginPath();
+        ctx.arc(this.width - 28, this.y + this.height / 2, 20, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+    
     // Titre
     ctx.fillStyle = this.textColor;
+    const titleAlign = this.platform === 'material' && this.leftIcon ? 'left' : 'center';
+    const titleX = titleAlign === 'left' ? 72 : this.width / 2;
     ctx.font = `${this.platform === 'material' ? 'bold ' : ''}20px -apple-system, Roboto, sans-serif`;
-    ctx.textAlign = 'center';
+    ctx.textAlign = titleAlign;
     ctx.textBaseline = 'middle';
-    ctx.fillText(this.title, this.width / 2, this.y + this.height / 2);
+    ctx.fillText(this.title, titleX, this.y + this.height / 2);
     
-    // Icône gauche (hamburger menu ou back)
-    if (this.leftIcon === 'menu') {
-      this.drawMenuIcon(ctx, 16, this.y + this.height / 2);
-    } else if (this.leftIcon === 'back') {
-      this.drawBackIcon(ctx, 16, this.y + this.height / 2);
+    // Icône gauche
+    if (this.leftIcon) {
+      const iconColor = this.platform === 'cupertino' ? '#007AFF' : this.textColor;
+      if (this.leftIcon === 'menu') {
+        this.drawMenuIcon(ctx, 16, this.y + this.height / 2, iconColor);
+      } else if (this.leftIcon === 'back') {
+        this.drawBackIcon(ctx, 16, this.y + this.height / 2, iconColor);
+      }
     }
     
     // Icône droite
-    if (this.rightIcon === 'search') {
-      this.drawSearchIcon(ctx, this.width - 36, this.y + this.height / 2);
-    } else if (this.rightIcon === 'more') {
-      this.drawMoreIcon(ctx, this.width - 36, this.y + this.height / 2);
+    if (this.rightIcon) {
+      const iconColor = this.platform === 'cupertino' ? '#007AFF' : this.textColor;
+      if (this.rightIcon === 'search') {
+        this.drawSearchIcon(ctx, this.width - 36, this.y + this.height / 2, iconColor);
+      } else if (this.rightIcon === 'more') {
+        this.drawMoreIcon(ctx, this.width - 36, this.y + this.height / 2, iconColor);
+      }
     }
     
     ctx.restore();
   }
 
   /**
-   * Dessine l'icône menu
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   * @param {number} x - Position X
-   * @param {number} y - Position Y
+   * Dessine les ripples
+   * @private
+   */
+  drawRipples(ctx) {
+    for (let ripple of this.ripples) {
+      ctx.save();
+      ctx.globalAlpha = ripple.opacity;
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+      ctx.beginPath();
+      ctx.arc(ripple.x, ripple.y, ripple.radius, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.restore();
+    }
+  }
+
+  /**
+   * Anime les effets ripple
    * @private
    */
-  drawMenuIcon(ctx, x, y) {
-    ctx.strokeStyle = this.textColor;
+  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'icône menu (hamburger)
+   * @private
+   */
+  drawMenuIcon(ctx, x, y, color) {
+    ctx.strokeStyle = color;
     ctx.lineWidth = 2;
     ctx.lineCap = 'round';
     for (let i = 0; i < 3; i++) {
@@ -125,13 +204,10 @@ class AppBar extends Component {
 
   /**
    * Dessine l'icône retour
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   * @param {number} x - Position X
-   * @param {number} y - Position Y
    * @private
    */
-  drawBackIcon(ctx, x, y) {
-    ctx.strokeStyle = this.textColor;
+  drawBackIcon(ctx, x, y, color) {
+    ctx.strokeStyle = color;
     ctx.lineWidth = 2;
     ctx.lineCap = 'round';
     ctx.lineJoin = 'round';
@@ -144,14 +220,12 @@ class AppBar extends Component {
 
   /**
    * Dessine l'icône recherche
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   * @param {number} x - Position X
-   * @param {number} y - Position Y
    * @private
    */
-  drawSearchIcon(ctx, x, y) {
-    ctx.strokeStyle = this.textColor;
+  drawSearchIcon(ctx, x, y, color) {
+    ctx.strokeStyle = color;
     ctx.lineWidth = 2;
+    ctx.lineCap = 'round';
     ctx.beginPath();
     ctx.arc(x + 8, y - 2, 8, 0, Math.PI * 2);
     ctx.stroke();
@@ -162,58 +236,78 @@ class AppBar extends Component {
   }
 
   /**
-   * Dessine l'icône plus
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   * @param {number} x - Position X
-   * @param {number} y - Position Y
+   * Dessine l'icône plus (3 dots)
    * @private
    */
-  drawMoreIcon(ctx, x, y) {
-    ctx.fillStyle = this.textColor;
+  drawMoreIcon(ctx, x, y, color) {
+    ctx.fillStyle = color;
+    const spacing = this.platform === 'material' ? 10 : 8;
     for (let i = 0; i < 3; i++) {
       ctx.beginPath();
-      ctx.arc(x + 12, y - 10 + i * 10, 2, 0, Math.PI * 2);
+      ctx.arc(x + 12, y - spacing + i * spacing, 2, 0, Math.PI * 2);
       ctx.fill();
     }
   }
 
   /**
    * Vérifie si un point est dans les zones cliquables
-   * @param {number} x - Coordonnée X
-   * @param {number} y - Coordonnée Y
-   * @returns {boolean} True si le point est dans une zone cliquable
    */
   isPointInside(x, y) {
-    // Zones cliquables pour les icônes
     if (y >= this.y && y <= this.y + this.height) {
-      if (this.leftIcon && x >= 0 && x <= 56) {
-        return true;
-      }
-      if (this.rightIcon && x >= this.width - 56 && x <= this.width) {
-        return true;
-      }
+      if (this.leftIcon && x >= 0 && x <= 56) return true;
+      if (this.rightIcon && x >= this.width - 56 && x <= this.width) return true;
     }
     return false;
   }
 
   /**
    * Gère la pression (clic)
-   * @param {number} x - Coordonnée X
-   * @param {number} y - Coordonnée Y
-   * @returns {boolean} True si un clic a été traité
    * @private
    */
   handlePress(x, y) {
-    // Ajuster y avec le scrollOffset si nécessaire
     const adjustedY = y;
     
-    // Détecter quelle zone a été cliquée
     if (adjustedY >= this.y && adjustedY <= this.y + this.height) {
+      // Bouton gauche
       if (this.leftIcon && x >= 0 && x <= 56) {
+        // Ripple effect (Material)
+        if (this.platform === 'material') {
+          this.ripples.push({
+            x: 28,
+            y: this.y + this.height / 2,
+            radius: 0,
+            maxRadius: 28,
+            opacity: 1
+          });
+          this.animateRipple();
+        } else {
+          // iOS pressed state
+          this.leftPressed = true;
+          setTimeout(() => { this.leftPressed = false; }, 150);
+        }
+        
         if (this.onLeftClick) this.onLeftClick();
         return true;
       }
+      
+      // Bouton droit
       if (this.rightIcon && x >= this.width - 56 && x <= this.width) {
+        // Ripple effect (Material)
+        if (this.platform === 'material') {
+          this.ripples.push({
+            x: this.width - 28,
+            y: this.y + this.height / 2,
+            radius: 0,
+            maxRadius: 28,
+            opacity: 1
+          });
+          this.animateRipple();
+        } else {
+          // iOS pressed state
+          this.rightPressed = true;
+          setTimeout(() => { this.rightPressed = false; }, 150);
+        }
+        
         if (this.onRightClick) this.onRightClick();
         return true;
       }