canvasframework 0.5.2 → 0.5.4

package/components/Drawer.js

@@ -45,12 +45,27 @@ class Drawer extends Component {
     // IMPORTANT: Définir les callbacks
     this.onPress = this.handlePress;
     this.onMove = this.handleMove;
+	// ✅ Se mettre automatiquement au-dessus de tous les composants
+	this.bringToFront();
+  }
+  
+  /**
+  * Met le drawer au-dessus de tous les composants
+  * @private
+  */
+  bringToFront() {
+    const index = this.framework.components.indexOf(this);
+    if (index > -1) {
+      this.framework.components.splice(index, 1);
+      this.framework.components.push(this);
+    }
   }
 
   /**
    * Ouvre le drawer
    */
   open() {
+	this.bringToFront(); // ✅ Se remettre au-dessus à chaque ouverture
     this.visible = true;
     this.targetX = 0;
     this.animate();

package/components/Tabs.js

@@ -363,30 +363,38 @@ class Tabs extends Component {
     ctx.restore();
     
     // ===== DESSINER LES ENFANTS DU TAB ACTIF =====
-    const activeChildren = this.getActiveChildren();
-    
-    for (let child of activeChildren) {
-      if (child.visible) {
-        ctx.save();
-        
-        // Sauvegarder les coordonnées originales
-        const originalX = child.x;
-        const originalY = child.y;
-        
-        // Ajuster les coordonnées pour être absolues
-        child.x = this.x + originalX;
-        child.y = this.contentY + originalY;
-        
-        // Dessiner l'enfant
-        child.draw(ctx);
-        
-        // Restaurer les coordonnées originales
-        child.x = originalX;
-        child.y = originalY;
-        
-        ctx.restore();
-      }
-    }
+    // ===== DESSINER LES ENFANTS DU TAB ACTIF =====
+	const activeChildren = this.getActiveChildren();
+	const scrollOffset = this.framework.scrollOffset || 0;
+
+	ctx.save();
+
+	// ✅ clip de la zone de contenu
+	ctx.beginPath();
+	ctx.rect(this.x, this.contentY, this.width, this.contentHeight);
+	ctx.clip();
+
+	for (let child of activeChildren) {
+	  if (!child.visible) continue;
+
+	  ctx.save();
+
+	  const originalX = child.x;
+	  const originalY = child.y;
+
+	  // ✅ appliquer le scroll
+	  child.x = this.x + originalX;
+	  child.y = this.contentY + originalY - scrollOffset;
+
+	  child.draw(ctx);
+
+	  child.x = originalX;
+	  child.y = originalY;
+
+	  ctx.restore();
+	}
+
+	ctx.restore();
   }
 
   drawRipples(ctx, tabWidth) {

package/features/Skeleton.js

@@ -1,4 +1,5 @@
 import Component from '../core/Component.js';
+
 /**
  * Composant Skeleton (placeholder animé pendant le chargement)
  * @class
@@ -6,7 +7,7 @@ import Component from '../core/Component.js';
  * @param {Framework} framework - Instance du framework
  * @param {Object} [options={}] - Options de configuration
  * @param {string} [options.type='text'] - Type de skeleton ('text', 'circle', 'rectangle')
- * @param {number} [options.animationSpeed=0.03] - Vitesse de l'animation
+ * @param {number} [options.animationDuration=1.5] - Durée de l'animation en secondes
  * @example
  * const skeleton = new Skeleton(framework, {
  *   type: 'text',
@@ -21,11 +22,14 @@ class Skeleton extends Component {
   constructor(framework, options = {}) {
     super(framework, options);
     /** @type {string} */
-    this.type = options.type || 'text'; // text, circle, rectangle
+    this.type = options.type || 'text';
+    /** @type {number} */
+    this.animationDuration = (options.animationDuration || 1.5) * 1000; // en ms
     /** @type {number} */
-    this.animationSpeed = options.animationSpeed || 0.03;
+    this.startTime = Date.now();
     /** @type {number} */
-    this.animationProgress = 0;
+    this.borderRadius = options.borderRadius || 4;
+    
     this.startAnimation();
   }
   
@@ -35,50 +39,155 @@ class Skeleton extends Component {
    */
   startAnimation() {
     const animate = () => {
-      if (!this.visible) return;
-      
-      this.animationProgress += this.animationSpeed;
-      if (this.animationProgress > Math.PI * 2) {
-        this.animationProgress = 0;
+      if (!this.visible) {
+        requestAnimationFrame(animate);
+        return;
       }
-      
       requestAnimationFrame(animate);
     };
     animate();
   }
   
   /**
-   * Dessine le skeleton avec animation
+   * Calcule la progression de l'animation (0 à 1)
+   * @private
+   * @returns {number}
+   */
+  getAnimationProgress() {
+    const elapsed = Date.now() - this.startTime;
+    const progress = (elapsed % this.animationDuration) / this.animationDuration;
+    return progress;
+  }
+  
+  /**
+   * Crée le gradient shimmer diagonal style Ionic/Material
+   * @private
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {number} x
+   * @param {number} y
+   * @param {number} width
+   * @param {number} height
+   * @returns {CanvasGradient}
+   */
+  createShimmerGradient(ctx, x, y, width, height) {
+    const progress = this.getAnimationProgress();
+    
+    // Calculer la diagonale pour l'effet
+    const diagonal = Math.sqrt(width * width + height * height);
+    
+    // Position du gradient qui se déplace
+    const offset = diagonal * 2;
+    const position = -diagonal + (offset * progress);
+    
+    // Angle à 45 degrés (de haut-gauche vers bas-droite)
+    const angle = Math.PI / 4;
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    
+    const gradient = ctx.createLinearGradient(
+      x + position * cos,
+      y + position * sin,
+      x + (position + diagonal) * cos,
+      y + (position + diagonal) * sin
+    );
+    
+    // Gradient blanc avec transparence (style Ionic/Material)
+    gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
+    gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.4)');
+    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+    
+    return gradient;
+  }
+  
+  /**
+   * Dessine un rectangle arrondi
+   * @private
+   */
+  roundRect(ctx, x, y, width, height, radius) {
+    if (width < 2 * radius) radius = width / 2;
+    if (height < 2 * radius) radius = height / 2;
+    
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.arcTo(x + width, y, x + width, y + height, radius);
+    ctx.arcTo(x + width, y + height, x, y + height, radius);
+    ctx.arcTo(x, y + height, x, y, radius);
+    ctx.arcTo(x, y, x + width, y, radius);
+    ctx.closePath();
+  }
+  
+  /**
+   * Dessine le skeleton avec l'effet shimmer Ionic/Material
    * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
    */
   draw(ctx) {
     ctx.save();
     
-    const brightness = 0.9 + 0.1 * Math.sin(this.animationProgress);
-    ctx.fillStyle = `rgba(240, 240, 240, ${brightness})`;
+    // Couleur de fond (gris clair Material)
+    const backgroundColor = '#e0e0e0';
     
     switch(this.type) {
       case 'circle':
+        // Dessiner le cercle de base
+        ctx.fillStyle = backgroundColor;
         ctx.beginPath();
         ctx.arc(this.x + this.width/2, this.y + this.height/2, this.width/2, 0, Math.PI * 2);
         ctx.fill();
+        
+        // Créer un clipping path pour le shimmer
+        ctx.beginPath();
+        ctx.arc(this.x + this.width/2, this.y + this.height/2, this.width/2, 0, Math.PI * 2);
+        ctx.clip();
+        
+        // Appliquer le shimmer
+        ctx.fillStyle = this.createShimmerGradient(ctx, this.x, this.y, this.width, this.height);
+        ctx.fillRect(this.x, this.y, this.width, this.height);
         break;
+        
       case 'text':
-        // Simuler des lignes de texte
-        const lineHeight = 20;
-        const lines = Math.floor(this.height / lineHeight);
+        const lineHeight = 16;
+        const lineSpacing = 10;
+        const totalLineHeight = lineHeight + lineSpacing;
+        const lines = Math.floor(this.height / totalLineHeight);
         
         for (let i = 0; i < lines; i++) {
           const lineWidth = i === lines - 1 ? this.width * 0.6 : this.width;
-          ctx.fillRect(this.x, this.y + i * lineHeight, lineWidth, 16);
+          const lineY = this.y + i * totalLineHeight;
+          
+          // Fond de la ligne
+          ctx.fillStyle = backgroundColor;
+          this.roundRect(ctx, this.x, lineY, lineWidth, lineHeight, this.borderRadius);
+          ctx.fill();
+          
+          // Shimmer sur la ligne
+          ctx.save();
+          this.roundRect(ctx, this.x, lineY, lineWidth, lineHeight, this.borderRadius);
+          ctx.clip();
+          
+          ctx.fillStyle = this.createShimmerGradient(ctx, this.x, lineY, lineWidth, lineHeight);
+          ctx.fillRect(this.x - 100, lineY - 100, lineWidth + 200, lineHeight + 200);
+          ctx.restore();
         }
         break;
+        
       default:
-        ctx.fillRect(this.x, this.y, this.width, this.height);
+        // Rectangle de base
+        ctx.fillStyle = backgroundColor;
+        this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+        ctx.fill();
+        
+        // Shimmer
+        ctx.save();
+        this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+        ctx.clip();
+        
+        ctx.fillStyle = this.createShimmerGradient(ctx, this.x, this.y, this.width, this.height);
+        ctx.fillRect(this.x - 100, this.y - 100, this.width + 200, this.height + 200);
+        ctx.restore();
     }
     
     ctx.restore();
   }
 }
 
-export default Skeleton;
+export default Skeleton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasframework",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "Canvas-based cross-platform UI framework (Material & Cupertino)",
   "type": "module",
   "main": "./index.js",