canvasframework 0.3.6

package/components/AppBar.js

@@ -0,0 +1,225 @@
+import Component from '../core/Component.js';
+/**
+ * Barre d'application supérieure
+ * @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 {
+  /**
+   * Crée une instance de AppBar
+   * @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 {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 {number} [options.elevation=4] - Élévation (Material)
+   */
+  constructor(framework, options = {}) {
+    super(framework, {
+      x: 0,
+      y: 0,
+      width: framework.width,
+      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
+    this.onPress = this.handlePress.bind(this);
+  }
+
+  /**
+   * Dessine l'AppBar
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    // Ombre (Material uniquement)
+    if (this.platform === 'material' && this.elevation > 0) {
+      ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
+      ctx.shadowBlur = this.elevation * 2;
+      ctx.shadowOffsetY = this.elevation / 2;
+    }
+    
+    // Background
+    ctx.fillStyle = this.bgColor;
+    ctx.fillRect(this.x, this.y, this.width, this.height);
+    
+    ctx.shadowColor = 'transparent';
+    
+    // Bordure inférieure (iOS uniquement)
+    if (this.platform === 'cupertino') {
+      ctx.strokeStyle = '#C6C6C8';
+      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.stroke();
+    }
+    
+    // Titre
+    ctx.fillStyle = this.textColor;
+    ctx.font = `${this.platform === 'material' ? 'bold ' : ''}20px -apple-system, Roboto, sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(this.title, this.width / 2, 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 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);
+    }
+    
+    ctx.restore();
+  }
+
+  /**
+   * Dessine l'icône menu
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   * @param {number} x - Position X
+   * @param {number} y - Position Y
+   * @private
+   */
+  drawMenuIcon(ctx, x, y) {
+    ctx.strokeStyle = this.textColor;
+    ctx.lineWidth = 2;
+    ctx.lineCap = 'round';
+    for (let i = 0; i < 3; i++) {
+      ctx.beginPath();
+      ctx.moveTo(x, y - 8 + i * 8);
+      ctx.lineTo(x + 24, y - 8 + i * 8);
+      ctx.stroke();
+    }
+  }
+
+  /**
+   * 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;
+    ctx.lineWidth = 2;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    ctx.moveTo(x + 16, y - 10);
+    ctx.lineTo(x + 6, y);
+    ctx.lineTo(x + 16, y + 10);
+    ctx.stroke();
+  }
+
+  /**
+   * 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;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.arc(x + 8, y - 2, 8, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(x + 14, y + 4);
+    ctx.lineTo(x + 20, y + 10);
+    ctx.stroke();
+  }
+
+  /**
+   * Dessine l'icône plus
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   * @param {number} x - Position X
+   * @param {number} y - Position Y
+   * @private
+   */
+  drawMoreIcon(ctx, x, y) {
+    ctx.fillStyle = this.textColor;
+    for (let i = 0; i < 3; i++) {
+      ctx.beginPath();
+      ctx.arc(x + 12, y - 10 + i * 10, 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;
+      }
+    }
+    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) {
+      if (this.leftIcon && x >= 0 && x <= 56) {
+        if (this.onLeftClick) this.onLeftClick();
+        return true;
+      }
+      if (this.rightIcon && x >= this.width - 56 && x <= this.width) {
+        if (this.onRightClick) this.onRightClick();
+        return true;
+      }
+    }
+    return false;
+  }
+}
+
+export default AppBar;

package/components/Avatar.js

@@ -0,0 +1,202 @@
+import Component from '../core/Component.js';
+/**
+ * Avatar (photo de profil)
+ * @class
+ * @extends Component
+ * @property {string|null} imageUrl - URL de l'image
+ * @property {string} initials - Initiales
+ * @property {number} size - Taille
+ * @property {string} bgColor - Couleur de fond
+ * @property {string} textColor - Couleur du texte
+ * @property {number} borderWidth - Épaisseur de la bordure
+ * @property {string} borderColor - Couleur de la bordure
+ * @property {string|null} status - Statut ('online', 'offline', 'away', 'busy')
+ * @property {ImageComponent|null} imageComponent - Composant image interne
+ */
+class Avatar extends Component {
+  /**
+   * Crée une instance de Avatar
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {string} [options.imageUrl] - URL de l'image
+   * @param {string} [options.initials='??'] - Initiales
+   * @param {number} [options.size=48] - Taille
+   * @param {string} [options.bgColor] - Couleur de fond (auto générée)
+   * @param {string} [options.textColor='#FFFFFF'] - Couleur du texte
+   * @param {number} [options.borderWidth=0] - Épaisseur de la bordure
+   * @param {string} [options.borderColor='#FFFFFF'] - Couleur de la bordure
+   * @param {string} [options.status] - Statut
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.imageUrl = options.imageUrl || null;
+    this.initials = options.initials || '??';
+    this.size = options.size || 48;
+    this.bgColor = options.bgColor || this.generateColor(this.initials);
+    this.textColor = options.textColor || '#FFFFFF';
+    this.borderWidth = options.borderWidth || 0;
+    this.borderColor = options.borderColor || '#FFFFFF';
+    this.status = options.status || null; // 'online', 'offline', 'away', 'busy'
+    
+    this.width = this.size;
+    this.height = this.size;
+    
+    // Image component interne
+    this.imageComponent = null;
+    if (this.imageUrl) {
+      this.imageComponent = new ImageComponent(framework, {
+        x: this.x,
+        y: this.y,
+        width: this.size,
+        height: this.size,
+        src: this.imageUrl,
+        fit: 'cover',
+        borderRadius: this.size / 2
+      });
+    }
+  }
+  
+  /**
+   * Génère une couleur basée sur le texte
+   * @param {string} text - Texte pour générer la couleur
+   * @returns {string} Couleur hexadécimale
+   * @private
+   */
+  generateColor(text) {
+    // Générer une couleur basée sur le texte (pour cohérence)
+    let hash = 0;
+    for (let i = 0; i < text.length; i++) {
+      hash = text.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    
+    const colors = [
+      '#E91E63', '#9C27B0', '#673AB7', '#3F51B5',
+      '#2196F3', '#00BCD4', '#009688', '#4CAF50',
+      '#FF9800', '#FF5722', '#795548', '#607D8B'
+    ];
+    
+    return colors[Math.abs(hash) % colors.length];
+  }
+  
+  /**
+   * Dessine l'avatar
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    const centerX = this.x + this.size / 2;
+    const centerY = this.y + this.size / 2;
+    const radius = this.size / 2;
+    
+    // Bordure
+    if (this.borderWidth > 0) {
+      ctx.fillStyle = this.borderColor;
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    
+    // Clipping circulaire
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, radius - this.borderWidth, 0, Math.PI * 2);
+    ctx.clip();
+    
+    if (this.imageComponent && this.imageComponent.loaded) {
+      // Dessiner l'image
+      this.imageComponent.x = this.x + this.borderWidth;
+      this.imageComponent.y = this.y + this.borderWidth;
+      this.imageComponent.width = this.size - this.borderWidth * 2;
+      this.imageComponent.height = this.size - this.borderWidth * 2;
+      this.imageComponent.draw(ctx);
+    } else {
+      // Background coloré
+      ctx.fillStyle = this.bgColor;
+      ctx.fillRect(this.x, this.y, this.size, this.size);
+      
+      // Initiales
+      ctx.fillStyle = this.textColor;
+      ctx.font = `bold ${this.size / 2.5}px -apple-system, sans-serif`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this.initials.toUpperCase(), centerX, centerY);
+    }
+    
+    ctx.restore();
+    
+    // Indicateur de statut
+    if (this.status) {
+      const statusSize = this.size / 4;
+      const statusX = this.x + this.size - statusSize;
+      const statusY = this.y + this.size - statusSize;
+      
+      let statusColor;
+      switch (this.status) {
+        case 'online': statusColor = '#4CAF50'; break;
+        case 'offline': statusColor = '#9E9E9E'; break;
+        case 'away': statusColor = '#FF9800'; break;
+        case 'busy': statusColor = '#F44336'; break;
+        default: statusColor = '#9E9E9E';
+      }
+      
+      // Bordure blanche autour du statut
+      ctx.fillStyle = '#FFFFFF';
+      ctx.beginPath();
+      ctx.arc(statusX, statusY, statusSize / 2 + 1, 0, Math.PI * 2);
+      ctx.fill();
+      
+      // Cercle de statut
+      ctx.fillStyle = statusColor;
+      ctx.beginPath();
+      ctx.arc(statusX, statusY, statusSize / 2, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Change l'image de l'avatar
+   * @param {string} url - Nouvelle URL d'image
+   */
+  setImage(url) {
+    this.imageUrl = url;
+    if (url) {
+      this.imageComponent = new ImageComponent(this.framework, {
+        x: this.x,
+        y: this.y,
+        width: this.size,
+        height: this.size,
+        src: url,
+        fit: 'cover',
+        borderRadius: this.size / 2
+      });
+    } else {
+      this.imageComponent = null;
+    }
+  }
+  
+  /**
+   * Change le statut
+   * @param {string} status - Nouveau statut
+   */
+  setStatus(status) {
+    this.status = status;
+  }
+  
+  /**
+   * 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 l'avatar
+   */
+  isPointInside(x, y) {
+    const adjustedY = y - this.framework.scrollOffset;
+    const dx = x - (this.x + this.size / 2);
+    const dy = adjustedY - (this.y + this.size / 2);
+    return Math.sqrt(dx * dx + dy * dy) <= this.size / 2;
+  }
+}
+
+export default Avatar;

package/components/BottomNavigationBar.js

@@ -0,0 +1,205 @@
+import Component from '../core/Component.js';
+/**
+ * Barre de navigation inférieure
+ * @class
+ * @extends Component
+ * @property {Array} items - Items de navigation
+ * @property {number} selectedIndex - Index sélectionné
+ * @property {Function} onChange - Callback au changement
+ * @property {string} platform - Plateforme
+ * @property {string} bgColor - Couleur de fond
+ * @property {string} selectedColor - Couleur sélectionnée
+ * @property {string} unselectedColor - Couleur non sélectionnée
+ */
+class BottomNavigationBar extends Component {
+  /**
+   * Crée une instance de BottomNavigationBar
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {Array} [options.items=[]] - Items [{icon, label}]
+   * @param {number} [options.selectedIndex=0] - Index sélectionné
+   * @param {Function} [options.onChange] - Callback au changement
+   * @param {number} [options.height] - Hauteur (auto selon platform)
+   * @param {string} [options.bgColor] - Couleur de fond (auto selon platform)
+   * @param {string} [options.selectedColor] - Couleur sélectionnée (auto selon platform)
+   * @param {string} [options.unselectedColor='#757575'] - Couleur non sélectionnée
+   */
+  constructor(framework, options = {}) {
+    super(framework, {
+      x: 0,
+      y: framework.height - (options.height || 56),
+      width: framework.width,
+      height: options.height || 56,
+      ...options
+    });
+    this.items = options.items || [];
+    this.selectedIndex = options.selectedIndex || 0;
+    this.onChange = options.onChange;
+    this.platform = framework.platform;
+    this.bgColor = options.bgColor || '#FFFFFF';
+    this.selectedColor = options.selectedColor || (framework.platform === 'material' ? '#6200EE' : '#007AFF');
+    this.unselectedColor = options.unselectedColor || '#757575';
+    
+    // IMPORTANT: Définir onPress pour que le framework l'appelle
+    this.onPress = this.handlePress.bind(this);
+  }
+
+  /**
+   * Dessine la barre de navigation
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    // Ombre/bordure supérieure
+    if (this.platform === 'material') {
+      ctx.shadowColor = 'rgba(0, 0, 0, 0.1)';
+      ctx.shadowBlur = 8;
+      ctx.shadowOffsetY = -2;
+    } else {
+      ctx.strokeStyle = '#C6C6C8';
+      ctx.lineWidth = 0.5;
+      ctx.beginPath();
+      ctx.moveTo(this.x, this.y);
+      ctx.lineTo(this.x + this.width, this.y);
+      ctx.stroke();
+    }
+    
+    // Background
+    ctx.fillStyle = this.bgColor;
+    ctx.fillRect(this.x, this.y, this.width, this.height);
+    
+    ctx.shadowColor = 'transparent';
+    
+    // Items
+    const itemWidth = this.width / this.items.length;
+    for (let i = 0; i < this.items.length; i++) {
+      const item = this.items[i];
+      const itemX = this.x + i * itemWidth;
+      const isSelected = i === this.selectedIndex;
+      const color = isSelected ? this.selectedColor : this.unselectedColor;
+      
+      // Icône
+      this.drawIcon(ctx, item.icon, itemX + itemWidth / 2, this.y + 16, color);
+      
+      // Label
+      ctx.fillStyle = color;
+      ctx.font = `${isSelected ? 'bold ' : ''}12px -apple-system, Roboto, sans-serif`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'top';
+      ctx.fillText(item.label, itemX + itemWidth / 2, this.y + 36);
+    }
+    
+    ctx.restore();
+  }
+
+  /**
+   * Dessine une icône
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   * @param {string} icon - Type d'icône
+   * @param {number} x - Position X
+   * @param {number} y - Position Y
+   * @param {string} color - Couleur
+   * @private
+   */
+  drawIcon(ctx, icon, x, y, color) {
+    ctx.strokeStyle = color;
+    ctx.fillStyle = color;
+    ctx.lineWidth = 2;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    
+    switch(icon) {
+      case 'home':
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineTo(x - 10, y + 8);
+        ctx.lineTo(x - 10, y + 16);
+        ctx.lineTo(x + 10, y + 16);
+        ctx.lineTo(x + 10, y + 8);
+        ctx.closePath();
+        ctx.stroke();
+        break;
+      
+      case 'search':
+        ctx.beginPath();
+        ctx.arc(x - 2, y + 4, 6, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(x + 3, y + 9);
+        ctx.lineTo(x + 8, y + 14);
+        ctx.stroke();
+        break;
+      
+      case 'favorite':
+        ctx.beginPath();
+        ctx.moveTo(x, y + 2);
+        ctx.lineTo(x + 6, y + 14);
+        ctx.lineTo(x - 6, y + 14);
+        ctx.closePath();
+        ctx.beginPath();
+        ctx.moveTo(x, y + 14);
+        ctx.lineTo(x + 10, y + 6);
+        ctx.lineTo(x + 4, y + 6);
+        ctx.lineTo(x, y);
+        ctx.lineTo(x - 4, y + 6);
+        ctx.lineTo(x - 10, y + 6);
+        ctx.closePath();
+        ctx.fill();
+        break;
+      
+      case 'person':
+        ctx.beginPath();
+        ctx.arc(x, y + 4, 5, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(x, y + 16, 8, Math.PI, 0, true);
+        ctx.stroke();
+        break;
+      
+      case 'settings':
+        ctx.beginPath();
+        ctx.arc(x, y + 8, 4, 0, Math.PI * 2);
+        ctx.stroke();
+        for (let i = 0; i < 4; i++) {
+          const angle = (i * Math.PI / 2) - Math.PI / 4;
+          ctx.beginPath();
+          ctx.moveTo(x + Math.cos(angle) * 6, y + 8 + Math.sin(angle) * 6);
+          ctx.lineTo(x + Math.cos(angle) * 10, y + 8 + Math.sin(angle) * 10);
+          ctx.stroke();
+        }
+        break;
+    }
+  }
+
+  /**
+   * 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 barre
+   */
+  isPointInside(x, y) {
+     return y >= this.y && y <= this.y + this.height;
+  }
+
+  /**
+   * Gère la pression (clic)
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @private
+   */
+  handlePress(x, y) {
+    // Calculer quel item a été cliqué
+    const itemWidth = this.width / this.items.length;
+    const index = Math.floor(x / itemWidth);
+    
+    if (index >= 0 && index < this.items.length && index !== this.selectedIndex) {
+      this.selectedIndex = index;
+      if (this.onChange) {
+        this.onChange(index, this.items[index]);
+      }
+    }
+  }
+}
+
+export default BottomNavigationBar;