canvasframework 0.5.16 → 0.5.18

package/components/Select.js

@@ -1,199 +0,0 @@
-import Component from '../core/Component.js';
-import SelectDialog from '../components/SelectDialog.js';
-
-/**
- * Composant de sélection déroulante (dropdown)
- * @class
- * @extends Component
- * @param {Framework} framework - Instance du framework
- * @param {Object} [options={}] - Options de configuration
- * @param {string[]} [options.options=[]] - Liste des options
- * @param {number} [options.selectedIndex=0] - Index de l'option sélectionnée
- * @param {string} [options.placeholder='Select...'] - Texte par défaut
- * @param {number} [options.fontSize=16] - Taille de police
- * @param {Function} [options.onChange] - Callback lors du changement de sélection
- * @example
- * const select = new Select(framework, {
- *   options: ['Option 1', 'Option 2', 'Option 3'],
- *   placeholder: 'Choisissez une option',
- *   onChange: (value, index) => console.log('Selected:', value)
- * });
- */
-class Select extends Component {
-  /**
-   * @constructs Select
-   */
-  constructor(framework, options = {}) {
-    super(framework, options);
-    /** @type {string[]} */
-    this.options = options.options || [];
-    /** @type {number} */
-    this.selectedIndex = options.selectedIndex || 0;
-    /** @type {string} */
-    this.placeholder = options.placeholder || 'Select...';
-    /** @type {string} */
-    this.platform = framework.platform;
-    /** @type {number} */
-    this.fontSize = options.fontSize || 16;
-    /** @type {Function|undefined} */
-    this.onChange = options.onChange;
-    /** @type {boolean} */
-    this.isOpen = false;
-    /** @type {SelectDialog|null} */
-    this.dialog = null;
-    
-    // Définir onClick pour le Select
-    this.onClick = this.toggleMenu.bind(this);
-  }
-  
-  /**
-   * Ouvre ou ferme le menu de sélection
-   */
-  toggleMenu() {
-    if (this.isOpen && this.dialog) {
-      this.closeMenu();
-      return;
-    }
-    
-    this.openMenu();
-  }
-  
-  /**
-   * Ouvre le menu de sélection (affiche le modal)
-   */
-  openMenu() {
-    if (this.isOpen) return;
-    
-    this.dialog = new SelectDialog(this.framework, {
-      title: this.placeholder,
-      options: this.options,
-      selectedIndex: this.selectedIndex,
-      onSelect: (index, value) => {
-        this.selectedIndex = index;
-        if (this.onChange) {
-          this.onChange(value, index);
-        }
-        this.closeMenu();
-      }
-    });
-    
-    this.framework.add(this.dialog);
-    this.isOpen = true;
-  }
-  
-  /**
-   * Ferme le menu de sélection
-   */
-  closeMenu() {
-    if (this.dialog) {
-      this.dialog.hide();
-      this.dialog = null;
-    }
-    this.isOpen = false;
-  }
-  
-  /**
-   * Dessine le composant Select
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
-  draw(ctx) {
-    ctx.save();
-    
-    const selectedValue = this.options[this.selectedIndex] || this.placeholder;
-    
-    if (this.platform === 'material') {
-      // Material Design Select
-      ctx.fillStyle = this.pressed ? '#F5F5F5' : '#FFFFFF';
-      ctx.fillRect(this.x, this.y, this.width, this.height);
-      
-      ctx.strokeStyle = this.isOpen ? '#6200EE' : '#CCCCCC';
-      ctx.lineWidth = this.isOpen ? 2 : 1;
-      ctx.strokeRect(this.x, this.y, this.width, this.height);
-      
-      // Texte
-      ctx.fillStyle = selectedValue === this.placeholder ? '#999999' : '#000000';
-      ctx.font = `${this.fontSize}px Roboto, sans-serif`;
-      ctx.textAlign = 'left';
-      ctx.textBaseline = 'middle';
-      ctx.fillText(selectedValue, this.x + 15, this.y + this.height / 2);
-      
-      // Flèche
-      ctx.fillStyle = '#666666';
-      const arrowX = this.x + this.width - 20;
-      const arrowY = this.y + this.height / 2;
-      ctx.beginPath();
-      ctx.moveTo(arrowX - 5, arrowY - 3);
-      ctx.lineTo(arrowX + 5, arrowY - 3);
-      ctx.lineTo(arrowX, arrowY + 3);
-      ctx.closePath();
-      ctx.fill();
-    } else {
-      // Cupertino Select
-      ctx.fillStyle = '#FFFFFF';
-      ctx.beginPath();
-      this.roundRect(ctx, this.x, this.y, this.width, this.height, 8);
-      ctx.fill();
-      
-      ctx.strokeStyle = this.isOpen ? '#007AFF' : '#C7C7CC';
-      ctx.lineWidth = 1;
-      ctx.stroke();
-      
-      // Texte
-      ctx.fillStyle = selectedValue === this.placeholder ? '#999999' : '#000000';
-      ctx.font = `${this.fontSize}px -apple-system, sans-serif`;
-      ctx.textAlign = 'left';
-      ctx.textBaseline = 'middle';
-      ctx.fillText(selectedValue, this.x + 15, this.y + this.height / 2);
-      
-      // Chevron
-      ctx.strokeStyle = '#007AFF';
-      ctx.lineWidth = 2;
-      const chevronX = this.x + this.width - 20;
-      const chevronY = this.y + this.height / 2;
-      ctx.beginPath();
-      ctx.moveTo(chevronX - 5, chevronY - 3);
-      ctx.lineTo(chevronX, chevronY + 2);
-      ctx.lineTo(chevronX + 5, chevronY - 3);
-      ctx.stroke();
-    }
-    
-    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.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 à 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;
-  }
-}
-
-export default Select;

package/components/SelectDialog.js

@@ -1,255 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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/SliverAppBar.js

@@ -1,139 +0,0 @@
-import AppBar from './AppBar.js';
-/**
- * SliverAppBar - CanvasFramework
- * Collapse / Stretch / Parallax
- * Compatible Material & Cupertino
- * ⚠️ Ne modifie PAS AppBar
- */
-class SliverAppBar extends AppBar {
-  constructor(framework, options = {}) {
-    super(framework, {
-      ...options,
-      y: 0
-    });
-    // Heights
-    this.expandedHeight = options.expandedHeight || 240;
-    this.collapsedHeight = options.collapsedHeight ?? 56;
-    // Effects
-    this.stretch = options.stretch ?? true;
-    this.parallax = options.parallax ?? true;
-    this.parallaxFactor = options.parallaxFactor ?? 0.4;
-    // Background
-    this.backgroundImage = options.backgroundImage || null;
-    this.backgroundColor = options.backgroundColor || this.bgColor || '#FFFFFF';
-    this.backgroundOpacity = this._extractOpacity(this.backgroundColor);
-    // Overlay (au-dessus de l'image)
-    this.overlayColor = options.overlayColor || '#000000';
-    this.overlayOpacity = options.overlayOpacity ?? 0;
-    // Foreground (titre + icônes)
-    this.foregroundColor = options.foregroundColor || options.textColor || this.textColor || '#FFFFFF';
-    // SliverAppBar participe au scroll
-    this.fixed = false;
-  }
-  
-  /**
-   * Extrait l'opacité d'une couleur rgba() ou retourne 1
-   */
-  _extractOpacity(color) {
-    if (typeof color === 'string' && color.startsWith('rgba')) {
-      const match = color.match(/rgba?\([^,]+,[^,]+,[^,]+,\s*([\d.]+)\)/);
-      return match ? parseFloat(match[1]) : 1;
-    }
-    return 1;
-  }
-  
-  /**
-   * Mise à jour dynamique selon le scroll
-   */
-  updateWithScroll(scrollOffset) {
-    const scrollY = -scrollOffset;
-    const collapseRange = this.expandedHeight - this.collapsedHeight;
-    const collapse = Math.min(scrollY, collapseRange);
-    let newHeight = this.expandedHeight - collapse;
-    // Stretch (overscroll)
-    if (scrollY < 0 && this.stretch) {
-      newHeight = this.expandedHeight - scrollY;
-    }
-    this.height = Math.max(newHeight, this.collapsedHeight);
-  }
-  
-  draw(ctx) {
-    const scrollOffset = this.framework.scrollOffset || 0;
-    this.updateWithScroll(scrollOffset);
-    ctx.save();
-    // ===== Collapse progress (0 → 1)
-    const collapseProgress = Math.min(
-      1,
-      Math.max(
-        0,
-        (this.expandedHeight - this.height) /
-        (this.expandedHeight - this.collapsedHeight)
-      )
-    );
-    // ===== BACKGROUND IMAGE (en premier) =====
-    if (this.backgroundImage && this.backgroundImage.complete) {
-      let bgOffset = 0;
-      if (this.parallax) {
-        bgOffset = Math.max(0, -scrollOffset * this.parallaxFactor);
-      }
-      ctx.drawImage(
-        this.backgroundImage,
-        this.x,
-        this.y - bgOffset,
-        this.width,
-        this.height + bgOffset
-      );
-    }
-    
-    // ===== BACKGROUND COLOR (overlay coloré au-dessus de l'image) =====
-    ctx.globalAlpha = this.backgroundOpacity;
-    ctx.fillStyle = this.backgroundColor;
-    ctx.fillRect(this.x, this.y, this.width, this.height);
-    ctx.globalAlpha = 1;
-    
-    // ===== OVERLAY SUPPLÉMENTAIRE (si besoin) =====
-    if (this.overlayOpacity > 0) {
-      ctx.globalAlpha = this.overlayOpacity;
-      ctx.fillStyle = this.overlayColor;
-      ctx.fillRect(this.x, this.y, this.width, this.height);
-      ctx.globalAlpha = 1;
-    }
-    // ===== TITLE (fade with collapse) =====
-    ctx.globalAlpha = 1 - collapseProgress;
-    ctx.fillStyle = this.foregroundColor;
-    ctx.font = `bold 20px -apple-system, Roboto, sans-serif`;
-    ctx.textAlign = 'left';
-    ctx.textBaseline = 'bottom';
-    ctx.fillText(
-      this.title,
-      this.x + 16,
-      this.y + this.height - 16
-    );
-    ctx.globalAlpha = 1;
-    
-    // ===== PREVENT APPBAR BACKGROUND OVERWRITE =====
-    const originalBg = this.bgColor;
-    const originalTextColor = this.textColor;
-    const originalIconColor = this.iconColor;
-    const originalPlatform = this.platform;
-    
-    // Force transparent pour éviter que super.draw() dessine un fond
-    this.bgColor = 'rgba(0,0,0,0)';
-    // Force la couleur du texte et des icônes
-    this.textColor = this.foregroundColor;
-    this.iconColor = this.foregroundColor;
-    // Force Material pour uniformiser le comportement des couleurs
-    this.platform = 'material';
-    
-    // Icons, ripple, elevation, etc.
-    super.draw(ctx);
-    
-    // Restore
-    this.bgColor = originalBg;
-    this.textColor = originalTextColor;
-    this.iconColor = originalIconColor;
-    this.platform = originalPlatform;
-    ctx.restore();
-  }
-}
-export default SliverAppBar;