canvasframework 0.5.57 → 0.5.59

package/components/Paginatedcontainer.js

@@ -0,0 +1,840 @@
+import Component from '../core/Component.js';
+
+/**
+ * Conteneur avec pagination manuelle - l'utilisateur définit le contenu de chaque page
+ * @class
+ * @extends Component
+ * 
+ * Exemple d'utilisation:
+ * const container = new PaginatedContainer(framework, { pageHeight: 400, width: 600 });
+ * container.addPage([child1, child2, child3]); // Page 1
+ * container.addPage([child4, child5]);         // Page 2
+ * container.addPage([child6]);                 // Page 3
+ * 
+ * Material: Boutons Material You avec numéros de page
+ * Cupertino: Boutons iOS style avec compteur
+ */
+class PaginatedContainer extends Component {
+  /**
+   * Crée une instance de PaginatedContainer
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {number} [options.pageHeight=400] - Hauteur d'une page
+   * @param {number} [options.padding=16] - Padding interne
+   * @param {number} [options.gap=12] - Espacement entre composants
+   * @param {string} [options.bgColor='#FFFFFF'] - Couleur de fond
+   * @param {number} [options.elevation=2] - Élévation (Material)
+   * @param {number} [options.borderRadius=8] - Rayon des coins
+   * @param {boolean} [options.showNavigation=true] - Afficher navigation
+   * @param {string} [options.navPosition='bottom'] - Position nav: 'top', 'bottom', 'both'
+   * @param {Function} [options.onPageChange] - Callback changement de page
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    
+    this.platform = framework.platform;
+    this.pageHeight = options.pageHeight || 400;
+    this.padding = options.padding || 16;
+    this.gap = options.gap || 12;
+    this.bgColor = options.bgColor || '#FFFFFF';
+    this.elevation = options.elevation !== undefined ? options.elevation : 2;
+    this.borderRadius = options.borderRadius !== undefined ? options.borderRadius : 8;
+    this.showNavigation = options.showNavigation !== false;
+    this.navPosition = options.navPosition || 'bottom';
+    this.onPageChange = options.onPageChange || (() => {});
+    
+    // Navigation
+    this.navHeight = this.platform === 'material' ? 56 : 50;
+    this.currentPage = 0;
+    
+    // Pages - tableau de tableaux d'enfants
+    this.pages = [];
+    
+    // Calcul hauteur totale
+    const navTopHeight = (this.showNavigation && this.navPosition !== 'bottom') ? this.navHeight : 0;
+    const navBottomHeight = (this.showNavigation && this.navPosition !== 'top') ? this.navHeight : 0;
+    this.height = navTopHeight + this.pageHeight + navBottomHeight;
+    
+    // Couleurs selon plateforme
+    if (this.platform === 'material') {
+      this.navColor = '#F5F5F5';
+      this.borderColor = '#E0E0E0';
+      this.activeColor = '#6200EE';
+      this.inactiveColor = '#757575';
+      this.shadowColor = 'rgba(0,0,0,0.15)';
+      this.buttonBgColor = '#FFFFFF';
+      this.buttonDisabledColor = '#F5F5F5';
+    } else {
+      this.navColor = '#F2F2F7';
+      this.borderColor = '#C6C6C8';
+      this.activeColor = '#007AFF';
+      this.inactiveColor = '#8E8E93';
+      this.shadowColor = 'rgba(0,0,0,0.1)';
+      this.buttonBgColor = '#FFFFFF';
+      this.buttonDisabledColor = '#E5E5EA';
+    }
+    
+    // Élévation
+    this._applyElevationStyles();
+    
+    // Navigation buttons
+    this.navButtons = [];
+    this.hoveredButton = null;
+    this.pressedButton = null;
+	
+	// Pour l'effet ripple
+	  this.rippleButton = null;
+	  this.rippleTimer = null;
+  }
+  
+  /**
+   * Applique les styles d'élévation
+   * @private
+   */
+  _applyElevationStyles() {
+    const elevationStyles = {
+      0: { blur: 0, offsetY: 0, spread: 0, opacity: 0 },
+      1: { blur: 2, offsetY: 1, spread: 0, opacity: 0.1 },
+      2: { blur: 4, offsetY: 2, spread: 1, opacity: 0.15 },
+      3: { blur: 8, offsetY: 4, spread: 2, opacity: 0.2 },
+      4: { blur: 16, offsetY: 8, spread: 3, opacity: 0.25 },
+      5: { blur: 24, offsetY: 12, spread: 4, opacity: 0.3 }
+    };
+    
+    const style = elevationStyles[Math.min(this.elevation, 5)] || elevationStyles[0];
+    
+    this.shadowBlur = style.blur;
+    this.shadowOffsetY = style.offsetY;
+    this.shadowSpread = style.spread;
+    this.shadowOpacity = style.opacity;
+    
+    this._updateShadowColor();
+  }
+  
+  /**
+   * Met à jour la couleur de l'ombre
+   * @private
+   */
+  _updateShadowColor() {
+    const rgbMatch = this.shadowColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (rgbMatch) {
+      const r = rgbMatch[1];
+      const g = rgbMatch[2];
+      const b = rgbMatch[3];
+      this._computedShadowColor = `rgba(${r}, ${g}, ${b}, ${this.shadowOpacity})`;
+    } else {
+      this._computedShadowColor = this.shadowColor;
+    }
+  }
+  
+  /**
+   * Ajoute une nouvelle page avec ses enfants
+   * @param {Component[]} children - Tableau de composants pour cette page
+   * @returns {number} Index de la page ajoutée
+   */
+  addPage(children = []) {
+    const pageIndex = this.pages.length;
+    this.pages.push(children);
+    this.updateNavButtons();
+    this.updateChildrenPositions();
+    return pageIndex;
+  }
+  
+  /**
+   * Définit le contenu d'une page spécifique
+   * @param {number} pageIndex - Index de la page
+   * @param {Component[]} children - Tableau de composants
+   */
+  setPage(pageIndex, children = []) {
+    if (pageIndex >= 0) {
+      // Étendre le tableau si nécessaire
+      while (this.pages.length <= pageIndex) {
+        this.pages.push([]);
+      }
+      this.pages[pageIndex] = children;
+      this.updateNavButtons();
+      if (pageIndex === this.currentPage) {
+        this.updateChildrenPositions();
+      }
+    }
+  }
+  
+  /**
+   * Récupère le contenu d'une page
+   * @param {number} pageIndex - Index de la page
+   * @returns {Component[]} Tableau des enfants de cette page
+   */
+  getPage(pageIndex) {
+    return this.pages[pageIndex] || [];
+  }
+  
+  /**
+   * Retire une page
+   * @param {number} pageIndex - Index de la page à retirer
+   */
+  removePage(pageIndex) {
+    if (pageIndex >= 0 && pageIndex < this.pages.length) {
+      this.pages.splice(pageIndex, 1);
+      
+      // Ajuster la page courante si nécessaire
+      if (this.currentPage >= this.pages.length && this.pages.length > 0) {
+        this.currentPage = this.pages.length - 1;
+      }
+      
+      this.updateNavButtons();
+      this.updateChildrenPositions();
+    }
+  }
+  
+  /**
+   * Nombre total de pages
+   * @returns {number}
+   */
+  get totalPages() {
+    return this.pages.length;
+  }
+  
+  /**
+   * Met à jour les positions de tous les enfants de la page courante
+   * @private
+   */
+  updateChildrenPositions() {
+    if (this.currentPage >= this.pages.length) return;
+    
+    const navTopHeight = (this.showNavigation && this.navPosition !== 'bottom') ? this.navHeight : 0;
+    const pageY = this.y + navTopHeight;
+    
+    const currentPageChildren = this.pages[this.currentPage];
+    let currentY = pageY + this.padding;
+    
+    for (const child of currentPageChildren) {
+      // Positionner l'enfant
+      child.x = this.x + this.padding;
+      child.y = currentY;
+      
+      // Ajuster la largeur si nécessaire (prend toute la largeur disponible)
+      if (!child.width || child.width === 0) {
+        child.width = this.width - (this.padding * 2);
+      }
+      
+      // Incrémenter Y pour le prochain enfant
+      currentY += (child.height || 0) + this.gap;
+    }
+  }
+  
+  /**
+   * Change de page
+   * @param {number} pageIndex - Index de la nouvelle page
+   */
+  goToPage(pageIndex) {
+    if (pageIndex >= 0 && pageIndex < this.totalPages && pageIndex !== this.currentPage) {
+      this.currentPage = pageIndex;
+      this.updateChildrenPositions();
+      this.updateNavButtons();
+      this.onPageChange(this.currentPage, this.totalPages);
+      if (this.framework && this.framework.redraw) {
+        this.framework.redraw();
+      }
+    }
+  }
+  
+  /**
+   * Page suivante
+   */
+  nextPage() {
+    if (this.currentPage < this.totalPages - 1) {
+      this.goToPage(this.currentPage + 1);
+    }
+  }
+  
+  /**
+   * Page précédente
+   */
+  previousPage() {
+    if (this.currentPage > 0) {
+      this.goToPage(this.currentPage - 1);
+    }
+  }
+  
+  /**
+   * Met à jour les boutons de navigation
+   * @private
+   */
+  updateNavButtons() {
+    this.navButtons = [];
+    
+    if (!this.showNavigation || this.totalPages === 0) return;
+    
+    const buttonSize = this.platform === 'material' ? 40 : 36;
+    const navTopHeight = (this.showNavigation && this.navPosition !== 'bottom') ? this.navHeight : 0;
+    
+    // Position des boutons
+    const leftX = this.x + 16;
+    const rightX = this.x + this.width - 16 - buttonSize;
+    
+    // Navigation du bas (par défaut)
+    if (this.navPosition === 'bottom' || this.navPosition === 'both') {
+      const navBottomY = this.y + navTopHeight + this.pageHeight;
+      const buttonY = navBottomY + (this.navHeight - buttonSize) / 2;
+      
+      this.navButtons.push({
+        x: leftX,
+        y: buttonY,
+        size: buttonSize,
+        action: 'prev',
+        disabled: this.currentPage === 0
+      });
+      
+      this.navButtons.push({
+        x: rightX,
+        y: buttonY,
+        size: buttonSize,
+        action: 'next',
+        disabled: this.currentPage === this.totalPages - 1
+      });
+    }
+    
+    // Navigation du haut
+    if (this.navPosition === 'top' || this.navPosition === 'both') {
+      const navTopY = this.y;
+      const buttonY = navTopY + (this.navHeight - buttonSize) / 2;
+      
+      this.navButtons.push({
+        x: leftX,
+        y: buttonY,
+        size: buttonSize,
+        action: 'prev',
+        disabled: this.currentPage === 0
+      });
+      
+      this.navButtons.push({
+        x: rightX,
+        y: buttonY,
+        size: buttonSize,
+        action: 'next',
+        disabled: this.currentPage === this.totalPages - 1
+      });
+    }
+  }
+  
+  /**
+   * Dessine l'ombre
+   * @private
+   */
+  drawShadow(ctx) {
+    if (this.elevation === 0) return;
+    
+    ctx.save();
+    
+    ctx.shadowColor = this._computedShadowColor;
+    ctx.shadowBlur = this.shadowBlur;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = this.shadowOffsetY;
+    
+    ctx.fillStyle = this.bgColor;
+    
+    if (this.borderRadius > 0) {
+      ctx.beginPath();
+      const spread = this.shadowSpread;
+      this.roundRect(
+        ctx,
+        this.x - spread / 2,
+        this.y - spread / 2,
+        this.width + spread,
+        this.height + spread,
+        this.borderRadius + spread / 2
+      );
+      ctx.fill();
+    } else {
+      const spread = this.shadowSpread;
+      ctx.fillRect(
+        this.x - spread / 2,
+        this.y - spread / 2,
+        this.width + spread,
+        this.height + spread
+      );
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Dessine la navigation Material
+   * @private
+   */
+  drawMaterialNavigation(ctx, navY) {
+    // Background navigation
+    ctx.fillStyle = this.navColor;
+    ctx.fillRect(this.x, navY, this.width, this.navHeight);
+    
+    // Ligne de séparation
+    ctx.strokeStyle = this.borderColor;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(this.x, navY);
+    ctx.lineTo(this.x + this.width, navY);
+    ctx.stroke();
+    
+    // Boutons navigation
+    this.drawMaterialButtons(ctx, navY);
+    
+    // Compteur de pages (centré)
+    ctx.fillStyle = this.inactiveColor;
+    ctx.font = '14px Roboto, sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(
+      `Page ${this.currentPage + 1} / ${this.totalPages}`,
+      this.x + this.width / 2,
+      navY + this.navHeight / 2
+    );
+  }
+  
+	/**
+	 * Dessine les boutons Material avec effet ripple (taille doublée)
+	 * @private
+	 */
+	drawMaterialButtons(ctx, navY) {
+	  const now = Date.now();
+	  
+	  for (const btn of this.navButtons) {
+		// Ne dessiner que les boutons de cette barre de navigation
+		const isThisNav = Math.abs(btn.y - (navY + (this.navHeight - btn.size) / 2)) < 1;
+		if (!isThisNav) continue;
+		
+		const isHovered = this.hoveredButton === btn.action;
+		const isPressed = this.rippleButton === btn.action;
+		
+		ctx.save();
+		
+		// Centre du bouton
+		const centerX = btn.x + btn.size / 2;
+		const centerY = btn.y + btn.size / 2;
+		const buttonRadius = btn.size / 2;
+		
+		// Masque circulaire (garde le ripple à l'intérieur du bouton)
+		ctx.beginPath();
+		ctx.arc(centerX, centerY, buttonRadius, 0, Math.PI * 2);
+		ctx.clip();
+		
+		// Background du bouton
+		if (btn.disabled) {
+		  ctx.fillStyle = this.buttonDisabledColor;
+		} else {
+		  ctx.fillStyle = this.buttonBgColor;
+		}
+		ctx.beginPath();
+		ctx.arc(centerX, centerY, buttonRadius, 0, Math.PI * 2);
+		ctx.fill();
+		
+		// EFFET RIPPLE - TAILLE DOUBLÉE
+		if (isPressed && !btn.disabled && this.rippleStartTime) {
+		  const elapsed = now - this.rippleStartTime;
+		  
+		  if (elapsed < 300) { // Pendant les 300ms
+			// Progression de l'animation (0 à 1)
+			const progress = elapsed / 300;
+			
+			// 🌟 TAILLE DOUBLÉE: le ripple atteint le DIAMÈTRE complet (btn.size)
+			// Au lieu de rayon (btn.size/2), on utilise le diamètre
+			const maxRippleRadius = btn.size; // Double de la taille normale
+			const rippleRadius = maxRippleRadius * Math.min(progress, 1);
+			
+			// Opacité: forte au début, faible à la fin
+			const opacity = 0.5 * (1 - progress * 0.7);
+			
+			// Cercle ripple (plus grand que le bouton, mais clipé)
+			ctx.fillStyle = this.hexToRgba(this.activeColor, opacity);
+			ctx.beginPath();
+			ctx.arc(centerX, centerY, rippleRadius, 0, Math.PI * 2);
+			ctx.fill();
+			
+			// Forcer un redessin
+			if (this.framework && this.framework.redraw) {
+			  setTimeout(() => {
+				this.framework.redraw();
+			  }, 16);
+			}
+		  }
+		}
+		
+		// Effet hover
+		if (isHovered && !btn.disabled && !isPressed) {
+		  ctx.fillStyle = this.hexToRgba(this.activeColor, 0.1);
+		  ctx.beginPath();
+		  ctx.arc(centerX, centerY, buttonRadius, 0, Math.PI * 2);
+		  ctx.fill();
+		}
+		
+		ctx.restore();
+		
+		// Bordure et icône (sans clip)
+		ctx.save();
+		
+		// Bordure
+		ctx.strokeStyle = btn.disabled ? '#E0E0E0' : this.borderColor;
+		ctx.lineWidth = 1;
+		ctx.beginPath();
+		ctx.arc(centerX, centerY, buttonRadius, 0, Math.PI * 2);
+		ctx.stroke();
+		
+		// Icône
+		ctx.fillStyle = btn.disabled ? '#BDBDBD' : this.activeColor;
+		ctx.font = '28px Roboto, sans-serif';
+		ctx.textAlign = 'center';
+		ctx.textBaseline = 'middle';
+		ctx.fillText(
+		  btn.action === 'prev' ? '‹' : '›',
+		  centerX,
+		  centerY
+		);
+		
+		ctx.restore();
+	  }
+	}
+  
+  /**
+   * Dessine la navigation Cupertino (iOS)
+   * @private
+   */
+  drawCupertinoNavigation(ctx, navY) {
+    // Background
+    ctx.fillStyle = this.navColor;
+    ctx.fillRect(this.x, navY, this.width, this.navHeight);
+    
+    // Ligne de séparation
+    ctx.strokeStyle = this.borderColor;
+    ctx.lineWidth = 0.5;
+    ctx.beginPath();
+    ctx.moveTo(this.x, navY);
+    ctx.lineTo(this.x + this.width, navY);
+    ctx.stroke();
+    
+    // Boutons navigation
+    this.drawCupertinoButtons(ctx, navY);
+    
+    // Compteur de pages (centré)
+    ctx.fillStyle = this.inactiveColor;
+    ctx.font = '15px -apple-system, BlinkMacSystemFont, sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(
+      `Page ${this.currentPage + 1} / ${this.totalPages}`,
+      this.x + this.width / 2,
+      navY + this.navHeight / 2
+    );
+  }
+  
+  /**
+   * Dessine les boutons Cupertino (iOS)
+   * @private
+   */
+  drawCupertinoButtons(ctx, navY) {
+    for (const btn of this.navButtons) {
+      // Ne dessiner que les boutons de cette barre de navigation
+      const isThisNav = Math.abs(btn.y - (navY + (this.navHeight - btn.size) / 2)) < 1;
+      if (!isThisNav) continue;
+      
+      const isPressed = this.pressedButton === btn.action;
+      
+      ctx.save();
+      
+      // Background iOS style
+      if (btn.disabled) {
+        ctx.fillStyle = this.buttonDisabledColor;
+      } else {
+        ctx.fillStyle = this.buttonBgColor;
+      }
+      
+      // Rectangle arrondi (iOS style)
+      const padding = 2;
+      ctx.beginPath();
+      this.roundRect(
+        ctx,
+        btn.x + padding,
+        btn.y + padding,
+        btn.size - padding * 2,
+        btn.size - padding * 2,
+        (btn.size - padding * 2) / 2
+      );
+      ctx.fill();
+      
+      // Bordure légère
+      if (!btn.disabled) {
+        ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
+        ctx.lineWidth = 0.5;
+        ctx.stroke();
+      }
+      
+      // Effet pressed
+      if (isPressed && !btn.disabled) {
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+        ctx.fill();
+      }
+      
+      // Icône chevron iOS
+      const chevronColor = btn.disabled ? this.inactiveColor : this.activeColor;
+      this.drawChevron(
+        ctx,
+        btn.x + btn.size / 2,
+        btn.y + btn.size / 2,
+        btn.action === 'prev' ? 'left' : 'right',
+        chevronColor
+      );
+      
+      ctx.restore();
+    }
+  }
+  
+  /**
+   * Dessine un chevron iOS
+   * @private
+   */
+  drawChevron(ctx, cx, cy, direction, color) {
+    const size = 10;
+    
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2.5;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    
+    ctx.beginPath();
+    if (direction === 'left') {
+      ctx.moveTo(cx + size / 2, cy - size / 2);
+      ctx.lineTo(cx - size / 2, cy);
+      ctx.lineTo(cx + size / 2, cy + size / 2);
+    } else {
+      ctx.moveTo(cx - size / 2, cy - size / 2);
+      ctx.lineTo(cx + size / 2, cy);
+      ctx.lineTo(cx - size / 2, cy + size / 2);
+    }
+    ctx.stroke();
+    ctx.restore();
+  }
+  
+  /**
+   * Dessine le composant - UNIQUEMENT LA PAGE COURANTE
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    // Ombre
+    if (this.platform === 'material') {
+      this.drawShadow(ctx);
+    }
+    
+    // Background principal
+    ctx.fillStyle = this.bgColor;
+    if (this.borderRadius > 0) {
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+      ctx.fill();
+    } else {
+      ctx.fillRect(this.x, this.y, this.width, this.height);
+    }
+    
+    // Navigation du haut
+    if (this.showNavigation && (this.navPosition === 'top' || this.navPosition === 'both')) {
+      if (this.platform === 'material') {
+        this.drawMaterialNavigation(ctx, this.y);
+      } else {
+        this.drawCupertinoNavigation(ctx, this.y);
+      }
+    }
+    
+    // Zone de contenu avec clipping
+    const navTopHeight = (this.showNavigation && this.navPosition !== 'bottom') ? this.navHeight : 0;
+    const pageY = this.y + navTopHeight;
+    
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(this.x, pageY, this.width, this.pageHeight);
+    ctx.clip();
+    
+    // Dessiner UNIQUEMENT les enfants de la page courante
+    if (this.currentPage < this.pages.length) {
+      const currentPageChildren = this.pages[this.currentPage];
+      for (const child of currentPageChildren) {
+        if (child.visible !== false && child.draw) {
+          child.draw(ctx);
+        }
+      }
+    }
+    
+    ctx.restore();
+    
+    // Navigation du bas
+    if (this.showNavigation && (this.navPosition === 'bottom' || this.navPosition === 'both')) {
+      const navBottomY = this.y + navTopHeight + this.pageHeight;
+      if (this.platform === 'material') {
+        this.drawMaterialNavigation(ctx, navBottomY);
+      } else {
+        this.drawCupertinoNavigation(ctx, navBottomY);
+      }
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Gère le survol (pour hover effect)
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   */
+  handleHover(x, y) {
+    if (!this.showNavigation) return;
+    
+    let newHovered = null;
+    
+    for (const btn of this.navButtons) {
+      if (btn.disabled) continue;
+      
+      const margin = 10;
+      if (x >= (btn.x - margin) &&
+          x <= (btn.x + btn.size + margin) &&
+          y >= (btn.y - margin) &&
+          y <= (btn.y + btn.size + margin)) {
+        newHovered = btn.action;
+        break;
+      }
+    }
+    
+    if (newHovered !== this.hoveredButton) {
+      this.hoveredButton = newHovered;
+      if (this.framework && this.framework.redraw) {
+        this.framework.redraw();
+      }
+    }
+  }
+  
+  /**
+   * Override setPosition pour mettre à jour les enfants
+   */
+  setPosition(x, y) {
+    super.setPosition(x, y);
+    this.updateChildrenPositions();
+    this.updateNavButtons();
+  }
+  
+  /**
+   * Utilitaire: Convertit hex en rgba
+   * @private
+   */
+  hexToRgba(hex, alpha) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (result) {
+      return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;
+    }
+    return `rgba(0, 0, 0, ${alpha})`;
+  }
+  
+  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();
+  }
+  
+  isPointInside(x, y) {
+  const isInside = x >= this.x &&
+                   x <= this.x + this.width &&
+                   y >= this.y &&
+                   y <= this.y + this.height;
+  
+  if (isInside) {
+    if (this.navButtons && this.navButtons.length >= 2) {
+      const leftButton = this.navButtons[0];
+      const rightButton = this.navButtons[1];
+      
+      const tolerance = 40;
+      
+      // Bouton gauche
+      if (Math.abs(x - leftButton.x) < tolerance && 
+          Math.abs(y - leftButton.y) < tolerance) {
+        
+        if (!leftButton.disabled) {
+          console.log("🎯 Ripple sur bouton gauche"); // LOG DE DEBUG
+          
+          // EFFET RIPPLE
+          this.rippleButton = 'prev';
+          this.rippleStartTime = Date.now();
+          
+          // Redessiner immédiatement
+          if (this.framework && this.framework.redraw) {
+            this.framework.redraw();
+          }
+          
+          // Action après un petit délai
+          setTimeout(() => {
+            if (this.currentPage > 0) {
+              this.currentPage--;
+              this.updateChildrenPositions();
+              this.updateNavButtons();
+            }
+          }, 100);
+          
+          // Reset ripple après animation
+          setTimeout(() => {
+            this.rippleButton = null;
+            this.rippleStartTime = null;
+            if (this.framework && this.framework.redraw) {
+              this.framework.redraw();
+            }
+          }, 350);
+        }
+        return true;
+      }
+      
+      // Bouton droit
+      if (Math.abs(x - rightButton.x) < tolerance && 
+          Math.abs(y - rightButton.y) < tolerance) {
+        
+        if (!rightButton.disabled) {
+          console.log("🎯 Ripple sur bouton droit"); // LOG DE DEBUG
+          
+          // EFFET RIPPLE
+          this.rippleButton = 'next';
+          this.rippleStartTime = Date.now();
+          
+          // Redessiner immédiatement
+          if (this.framework && this.framework.redraw) {
+            this.framework.redraw();
+          }
+          
+          // Action après un petit délai
+          setTimeout(() => {
+            if (this.currentPage < this.totalPages - 1) {
+              this.currentPage++;
+              this.updateChildrenPositions();
+              this.updateNavButtons();
+            }
+          }, 100);
+          
+          // Reset ripple après animation
+          setTimeout(() => {
+            this.rippleButton = null;
+            this.rippleStartTime = null;
+            if (this.framework && this.framework.redraw) {
+              this.framework.redraw();
+            }
+          }, 350);
+        }
+        return true;
+      }
+    }
+  }
+  
+  return isInside;
+}
+}
+
+export default PaginatedContainer;

package/core/CanvasFramework.js

@@ -60,6 +60,7 @@ import FloatedCamera from '../components/FloatedCamera.js';
 import TimePicker from '../components/TimePicker.js';
 import QRCodeReader from '../components/QRCodeReader.js';
 import QRCodeGenerator from '../components/QRCodeGenerator.js';
+import PaginatedContainer from '../components/PaginatedContainer.js';
 
 // Utils
 import SafeArea from '../utils/SafeArea.js';
@@ -374,7 +375,12 @@ class CanvasFramework {
 		};
 		this._firstRenderDone = false;
 		this._startupStartTime = startTime;
+		// Dans le constructeur, après this.scrollFriction = 0.95;
+		this.scrollFriction = 0.95;
 
+		// ✅ AJOUTER
+		this.overscrollDistance = 0;
+		this.isOverscrollAnimating = false;
 		// ✅ Créer automatiquement le canvas
 		this.canvas = document.createElement('canvas');
 		this.canvas.id = canvasId || `canvas-${Date.now()}`;
@@ -620,6 +626,7 @@ class CanvasFramework {
         if (this.optimizations.useSpatialPartitioning) {
             this._initSpatialPartitioning();
         }
+
     }
 
 	/**
@@ -688,7 +695,7 @@ class CanvasFramework {
      * Crée le Worker pour le calcul du scroll
      */
     createScrollWorker() {
-        const workerCode = `
+		const workerCode = `
 			let state = {
 				scrollOffset: 0,
 				scrollVelocity: 0,
@@ -697,7 +704,10 @@ class CanvasFramework {
 				maxScroll: 0,
 				height: 0,
 				lastTouchY: 0,
-				components: []
+				components: [],
+				overscrollDistance: 0,
+				maxOverscroll: 150,  // ✅ Limite maximale
+				overscrollResistance: 0.3
 			};
 
 			const FIXED_COMPONENT_TYPES = [
@@ -708,13 +718,11 @@ class CanvasFramework {
 
 			const calculateMaxScroll = () => {
 				let maxY = 0;
-				
 				for (const comp of state.components) {
 					if (FIXED_COMPONENT_TYPES.includes(comp.type) || !comp.visible) continue;
 					const bottom = comp.y + comp.height;
 					if (bottom > maxY) maxY = bottom;
 				}
-				
 				return Math.max(0, maxY - state.height + 50);
 			};
 
@@ -722,7 +730,29 @@ class CanvasFramework {
 				if (Math.abs(state.scrollVelocity) > 0.1 && !state.isDragging) {
 					state.scrollOffset += state.scrollVelocity;
 					state.maxScroll = calculateMaxScroll();
-					state.scrollOffset = Math.max(Math.min(state.scrollOffset, 0), -state.maxScroll);
+					
+					// ✅ CORRIGER: Limiter l'overscroll pendant l'inertie
+					if (state.scrollOffset > 0) {
+						// Limiter à maxOverscroll
+						if (state.scrollOffset > state.maxOverscroll) {
+							state.scrollOffset = state.maxOverscroll;
+							state.scrollVelocity = 0;
+						}
+						state.overscrollDistance = state.scrollOffset;
+						state.scrollVelocity *= 0.85;
+					} else if (state.scrollOffset < -state.maxScroll) {
+						const excess = Math.abs(state.scrollOffset + state.maxScroll);
+						// Limiter à maxOverscroll
+						if (excess > state.maxOverscroll) {
+							state.scrollOffset = -state.maxScroll - state.maxOverscroll;
+							state.scrollVelocity = 0;
+						}
+						state.overscrollDistance = state.scrollOffset + state.maxScroll;
+						state.scrollVelocity *= 0.85;
+					} else {
+						state.overscrollDistance = 0;
+					}
+					
 					state.scrollVelocity *= state.scrollFriction;
 				} else {
 					state.scrollVelocity = 0;
@@ -731,20 +761,82 @@ class CanvasFramework {
 				return {
 					scrollOffset: state.scrollOffset,
 					scrollVelocity: state.scrollVelocity,
-					maxScroll: state.maxScroll
+					maxScroll: state.maxScroll,
+					overscrollDistance: state.overscrollDistance
 				};
 			};
 
 			const handleTouchMove = (deltaY) => {
 				if (state.isDragging) {
-					state.scrollOffset += deltaY;
 					state.maxScroll = calculateMaxScroll();
-					state.scrollOffset = Math.max(Math.min(state.scrollOffset, 0), -state.maxScroll);
+					const wouldBeOffset = state.scrollOffset + deltaY;
+					
+					let actualDelta = deltaY;
+					
+					// ✅ CORRIGER: Appliquer les limites d'overscroll
+					if (wouldBeOffset > 0) {
+						// Overscroll en haut
+						const currentOverscroll = state.scrollOffset > 0 ? state.scrollOffset : 0;
+						
+						// Si on a déjà atteint la limite, ne plus bouger
+						if (currentOverscroll >= state.maxOverscroll) {
+							actualDelta = 0;
+							state.overscrollDistance = state.maxOverscroll;
+						} else {
+							// Calculer la résistance progressive
+							const overscrollRatio = currentOverscroll / state.maxOverscroll;
+							const resistance = state.overscrollResistance * (1 - overscrollRatio * 0.7);
+							
+							actualDelta = deltaY * resistance;
+							
+							// S'assurer qu'on ne dépasse pas la limite
+							const newOverscroll = currentOverscroll + actualDelta;
+							if (newOverscroll > state.maxOverscroll) {
+								actualDelta = state.maxOverscroll - currentOverscroll;
+							}
+							
+							state.overscrollDistance = currentOverscroll + actualDelta;
+						}
+					} else if (wouldBeOffset < -state.maxScroll) {
+						// Overscroll en bas
+						const currentOverscroll = state.scrollOffset < -state.maxScroll 
+							? Math.abs(state.scrollOffset + state.maxScroll) 
+							: 0;
+						
+						// Si on a déjà atteint la limite, ne plus bouger
+						if (currentOverscroll >= state.maxOverscroll) {
+							actualDelta = 0;
+							state.overscrollDistance = -state.maxOverscroll;
+						} else {
+							// Calculer la résistance progressive
+							const overscrollRatio = currentOverscroll / state.maxOverscroll;
+							const resistance = state.overscrollResistance * (1 - overscrollRatio * 0.7);
+							
+							actualDelta = deltaY * resistance;
+							
+							// S'assurer qu'on ne dépasse pas la limite
+							const newOverscroll = currentOverscroll + Math.abs(actualDelta);
+							if (newOverscroll > state.maxOverscroll) {
+								actualDelta = deltaY > 0 
+									? state.maxOverscroll - currentOverscroll 
+									: -(state.maxOverscroll - currentOverscroll);
+							}
+							
+							state.overscrollDistance = -(currentOverscroll + Math.abs(actualDelta));
+						}
+					} else {
+						// Scroll normal
+						state.overscrollDistance = 0;
+					}
+					
+					state.scrollOffset += actualDelta;
 					state.scrollVelocity = deltaY;
+					
 					return {
 						scrollOffset: state.scrollOffset,
 						scrollVelocity: state.scrollVelocity,
-						maxScroll: state.maxScroll
+						maxScroll: state.maxScroll,
+						overscrollDistance: state.overscrollDistance
 					};
 				}
 				return null;
@@ -755,16 +847,14 @@ class CanvasFramework {
 
 				switch (type) {
 					case 'INIT':
-						state = {
-							...state,
-							...payload
-						};
+						state = { ...state, ...payload };
 						state.maxScroll = calculateMaxScroll();
 						self.postMessage({ 
 							type: 'INITIALIZED', 
 							payload: { 
 								scrollOffset: state.scrollOffset,
-								maxScroll: state.maxScroll 
+								maxScroll: state.maxScroll,
+								overscrollDistance: 0
 							}
 						});
 						break;
@@ -817,12 +907,43 @@ class CanvasFramework {
 					case 'SET_SCROLL_OFFSET':
 						state.scrollOffset = payload.scrollOffset;
 						state.maxScroll = calculateMaxScroll();
-						state.scrollOffset = Math.max(Math.min(state.scrollOffset, 0), -state.maxScroll);
+						state.overscrollDistance = 0;
+						self.postMessage({ 
+							type: 'SCROLL_UPDATED', 
+							payload: { 
+								scrollOffset: state.scrollOffset,
+								maxScroll: state.maxScroll,
+								overscrollDistance: 0
+							}
+						});
+						break;
+
+					case 'ANIMATE_RETURN':
+						state.maxScroll = calculateMaxScroll();
+						
+						if (state.scrollOffset > 0) {
+							state.scrollOffset *= 0.75;
+							state.overscrollDistance = state.scrollOffset;
+						} else if (state.scrollOffset < -state.maxScroll) {
+							const diff = state.scrollOffset + state.maxScroll;
+							state.scrollOffset = -state.maxScroll + (diff * 0.75);
+							state.overscrollDistance = diff * 0.75;
+						}
+						
+						const shouldContinue = Math.abs(state.overscrollDistance) > 1;
+						
+						if (!shouldContinue) {
+							state.scrollOffset = Math.max(Math.min(state.scrollOffset, 0), -state.maxScroll);
+							state.overscrollDistance = 0;
+						}
+						
 						self.postMessage({ 
 							type: 'SCROLL_UPDATED', 
 							payload: { 
 								scrollOffset: state.scrollOffset,
-								maxScroll: state.maxScroll 
+								maxScroll: state.maxScroll,
+								overscrollDistance: state.overscrollDistance,
+								shouldContinue
 							}
 						});
 						break;
@@ -834,7 +955,8 @@ class CanvasFramework {
 								scrollOffset: state.scrollOffset,
 								scrollVelocity: state.scrollVelocity,
 								maxScroll: state.maxScroll,
-								isDragging: state.isDragging
+								isDragging: state.isDragging,
+								overscrollDistance: state.overscrollDistance
 							}
 						});
 						break;
@@ -842,64 +964,71 @@ class CanvasFramework {
 			};
 		`;
 
-        const blob = new Blob([workerCode], {
-            type: 'application/javascript'
-        });
-        return new Worker(URL.createObjectURL(blob));
-    }
+		const blob = new Blob([workerCode], { type: 'application/javascript' });
+		return new Worker(URL.createObjectURL(blob));
+	}
 
     /**
      * Gère les messages du Scroll Worker
      */
     handleScrollWorkerMessage(e) {
-        const {
-            type,
-            payload
-        } = e.data;
+    const { type, payload } = e.data;
 
-        switch (type) {
-            case 'SCROLL_UPDATED':
-                this.scrollOffset = payload.scrollOffset;
-                this.scrollVelocity = payload.scrollVelocity;
-                // ✅ CORRECTION IMPORTANTE : Vider le cache dirty pendant le scroll
-                if (Math.abs(payload.scrollVelocity) > 0.5) {
-                    this.dirtyComponents.clear();
-                }
-                // Mettre à jour le cache
-                this._cachedMaxScroll = payload.maxScroll;
-                this._maxScrollDirty = false;
-
-                // Marquer les composants comme sales pour mise à jour visuelle
-                if (Math.abs(payload.scrollVelocity) > 0) {
-                    this.components.forEach(comp => {
-                        if (!this.isFixedComponent(comp)) {
-                            this.markComponentDirty(comp);
-                        }
-                    });
-                }
-                break;
+    switch (type) {
+        case 'SCROLL_UPDATED':
+            this.scrollOffset = payload.scrollOffset;
+            this.scrollVelocity = payload.scrollVelocity;
+            
+            // ✅ AJOUTER
+            this.overscrollDistance = payload.overscrollDistance || 0;
+            
+            if (Math.abs(payload.scrollVelocity) > 0.5) {
+                this.dirtyComponents.clear();
+            }
+            
+            this._cachedMaxScroll = payload.maxScroll;
+            this._maxScrollDirty = false;
 
-            case 'MAX_SCROLL_UPDATED':
-                this._cachedMaxScroll = payload.maxScroll;
-                this._maxScrollDirty = false;
-                break;
+            if (Math.abs(payload.scrollVelocity) > 0) {
+                this.components.forEach(comp => {
+                    if (!this.isFixedComponent(comp)) {
+                        this.markComponentDirty(comp);
+                    }
+                });
+            }
+            
+            // ✅ AJOUTER: Continuer l'animation de retour si nécessaire
+            if (payload.shouldContinue !== undefined && payload.shouldContinue) {
+                requestAnimationFrame(() => {
+                    this.scrollWorker.postMessage({ type: 'ANIMATE_RETURN' });
+                });
+            } else if (payload.shouldContinue === false) {
+                this.isOverscrollAnimating = false;
+            }
+            break;
 
-            case 'INITIALIZED':
-                this.scrollOffset = payload.scrollOffset;
-                this._cachedMaxScroll = payload.maxScroll;
-                this._maxScrollDirty = false;
-                break;
+        case 'MAX_SCROLL_UPDATED':
+            this._cachedMaxScroll = payload.maxScroll;
+            this._maxScrollDirty = false;
+            break;
 
-            case 'STATE':
-                // Synchroniser l'état local
-                this.scrollOffset = payload.scrollOffset;
-                this.scrollVelocity = payload.scrollVelocity;
-                this.isDragging = payload.isDragging;
-                this._cachedMaxScroll = payload.maxScroll;
-                this._maxScrollDirty = false;
-                break;
-        }
+        case 'INITIALIZED':
+            this.scrollOffset = payload.scrollOffset;
+            this._cachedMaxScroll = payload.maxScroll;
+            this._maxScrollDirty = false;
+            this.overscrollDistance = 0; // ✅ AJOUTER
+            break;
+
+        case 'STATE':
+            this.scrollOffset = payload.scrollOffset;
+            this.scrollVelocity = payload.scrollVelocity;
+            this.isDragging = payload.isDragging;
+            this._cachedMaxScroll = payload.maxScroll;
+            this._maxScrollDirty = false;
+            this.overscrollDistance = payload.overscrollDistance || 0; // ✅ AJOUTER
+            break;
     }
+}
 
     /**
      * Initialise le Scroll Worker avec les données actuelles
@@ -2311,23 +2440,29 @@ class CanvasFramework {
     }
 
     handleTouchEnd(e) {
-        e.preventDefault();
-        const touch = e.changedTouches[0];
-        const pos = this.getTouchPos(touch);
+		e.preventDefault();
+		const touch = e.changedTouches[0];
+		const pos = this.getTouchPos(touch);
 
-        if (!this.isDragging) {
-            this.checkComponentsAtPosition(pos.x, pos.y, 'end');
-        } else {
-            this.isDragging = false;
-            this.scrollWorker.postMessage({
-                type: 'SET_DRAGGING',
-                payload: {
-                    isDragging: false,
-                    lastVelocity: this.scrollVelocity
-                }
-            });
-        }
-    }
+		if (!this.isDragging) {
+			this.checkComponentsAtPosition(pos.x, pos.y, 'end');
+		} else {
+			this.isDragging = false;
+			this.scrollWorker.postMessage({
+				type: 'SET_DRAGGING',
+				payload: {
+					isDragging: false,
+					lastVelocity: this.scrollVelocity
+				}
+			});
+			
+			// ✅ AJOUTER: Démarrer l'animation de retour
+			if (!this.isOverscrollAnimating) {
+				this.isOverscrollAnimating = true;
+				this.scrollWorker.postMessage({ type: 'ANIMATE_RETURN' });
+			}
+		}
+	}
 
     handleMouseDown(e) {
         this.isDragging = false;
@@ -2375,21 +2510,26 @@ class CanvasFramework {
         }
     }
 
-    handleMouseUp(e) {
-        if (!this.isDragging) {
-            this.checkComponentsAtPosition(e.clientX, e.clientY, 'end');
-        } else {
-            this.isDragging = false;
-            this.scrollWorker.postMessage({
-                type: 'SET_DRAGGING',
-                payload: {
-                    isDragging: false,
-                    lastVelocity: this.scrollVelocity
-                }
-            });
+   handleMouseUp(e) {
+    if (!this.isDragging) {
+        this.checkComponentsAtPosition(e.clientX, e.clientY, 'end');
+    } else {
+        this.isDragging = false;
+        this.scrollWorker.postMessage({
+            type: 'SET_DRAGGING',
+            payload: {
+                isDragging: false,
+                lastVelocity: this.scrollVelocity
+            }
+        });
+        
+        // ✅ AJOUTER: Démarrer l'animation de retour
+        if (!this.isOverscrollAnimating) {
+            this.isOverscrollAnimating = true;
+            this.scrollWorker.postMessage({ type: 'ANIMATE_RETURN' });
         }
     }
-
+}
 
     getTouchPos(touch) {
         const rect = this.canvas.getBoundingClientRect();
@@ -2988,6 +3128,46 @@ class CanvasFramework {
 			this.renderFull();
 		}
 	}
+	
+	/**
+	 * Dessine l'effet d'overscroll (overlay gris)
+	 */
+	drawOverscrollEffect() {console.log('dessine');
+		if (Math.abs(this.overscrollDistance) < 1) return;
+		
+		const ctx = this.ctx;
+		ctx.save();
+		
+		// Calculer l'opacité (max 0.4 pour Android)
+		const maxOverscroll = 150;
+		const opacity = Math.min(Math.abs(this.overscrollDistance) / maxOverscroll, 1) * 0.4;
+		
+		// Hauteur de l'overlay
+		const overlayHeight = Math.min(Math.abs(this.overscrollDistance) * 1.2, 250);
+		
+		let gradient;
+		
+		// Overscroll en haut
+		if (this.overscrollDistance > 0) {
+			gradient = ctx.createLinearGradient(0, 0, 0, overlayHeight);
+			gradient.addColorStop(0, `rgba(100, 100, 100, ${opacity})`);
+			gradient.addColorStop(1, 'rgba(100, 100, 100, 0)');
+			
+			ctx.fillStyle = gradient;
+			ctx.fillRect(0, 0, this.width, overlayHeight);
+		}
+		// Overscroll en bas
+		else if (this.overscrollDistance < 0) {
+			gradient = ctx.createLinearGradient(0, this.height - overlayHeight, 0, this.height);
+			gradient.addColorStop(0, 'rgba(100, 100, 100, 0)');
+			gradient.addColorStop(1, `rgba(100, 100, 100, ${opacity})`);
+			
+			ctx.fillStyle = gradient;
+			ctx.fillRect(0, this.height - overlayHeight, this.width, overlayHeight);
+		}
+		
+		ctx.restore();
+	}
 
 	/**
 	 * Rendu normal (sans transition)

package/core/UIBuilder.js

@@ -60,6 +60,7 @@ import FloatedCamera from '../components/FloatedCamera.js';
 import TimePicker from '../components/TimePicker.js';
 import QRCodeReader from '../components/QRCodeReader.js';
 import QRCodeGenerator from '../components/QRCodeGenerator.js';
+import PaginatedContainer from '../components/PaginatedContainer.js';
 
 // Features
 import PullToRefresh from '../features/PullToRefresh.js';
@@ -145,6 +146,7 @@ const Components = {
   Column,
   Positioned,
   Banner,
+  PaginatedContainer,
   Chart,
   QRCodeGenerator,
   Stack

package/index.js

@@ -67,6 +67,7 @@ export { default as FloatedCamera } from './components/FloatedCamera.js';
 export { default as TimePicker } from './components/TimePicker.js';
 export { default as QRCodeReader } from './components/QRCodeReader.js';
 export { default as QRCodeGenerator } from './components/QRCodeGenerator.js';
+export { default as PaginatedContainer } from './components/PaginatedContainer.js';
 
 // Utils
 export { default as SafeArea } from './utils/SafeArea.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasframework",
-  "version": "0.5.57",
+  "version": "0.5.59",
   "repository": {
     "type": "git",
     "url": "https://github.com/beyons/CanvasFramework.git"