canvasframework 0.5.46 → 0.5.48

package/components/Accordion.js

@@ -107,7 +107,8 @@ class Accordion extends Component {
 
     animate();
   }
-addRipple() {
+  
+  addRipple() {
     const ripple = {
       x: this.width / 2,
       y: this.headerHeight / 2,

package/components/Banner.js

@@ -13,7 +13,6 @@ export default class Banner extends Component {
     this.platform = framework.platform || 'material';
 
     this.width = options.width || framework.width || window.innerWidth;
-    this.height = options.height || 64;
     this.x = options.x || 0;
     this.y = options.y || 0;
 
@@ -24,26 +23,25 @@ export default class Banner extends Component {
     this._lastUpdate = performance.now();
     this._colors = this._resolveColors();
 
-    // Bounds calculées à chaque frame
     this._actionBounds = [];
     this._dismissBounds = null;
-    
-    // Pour indiquer qu'on gère nos propres clics
-    this.selfManagedClicks = true;
 
-    // Écouter les événements directement sur le canvas
-    this._setupEventListeners();
+    this.selfManagedClicks = true;
+    this.ripples = [];
 
-    // Ref si fourni
     if (options.ref) options.ref.current = this;
+
+    this._calculateHeight();
+    this._setupEventListeners();
+	
+	this.bgColor = options.bgColor || null;
+    this.textColor = options.textColor || null;
+	this.buttonColor = options.buttonColor || null;
+	this.rippleColor = options.rippleColor || 'rgba(26,115,232,0.2)';
   }
 
-  /* ===================== Setup ===================== */
   _setupEventListeners() {
-    // Stocker les références pour pouvoir les retirer plus tard
     this._boundHandleClick = this._handleClick.bind(this);
-    
-    // Écouter les événements sur le canvas parent
     if (this.framework && this.framework.canvas) {
       this.framework.canvas.addEventListener('click', this._boundHandleClick);
       this.framework.canvas.addEventListener('touchend', this._boundHandleClick);
@@ -57,53 +55,66 @@ export default class Banner extends Component {
     }
   }
 
-  /* ===================== Lifecycle ===================== */
-  onMount() {
-    this._setupEventListeners();
-  }
+  onMount() { this._setupEventListeners(); }
+  onUnmount() { this._removeEventListeners(); }
 
-  onUnmount() {
-    this._removeEventListeners();
+  _resolveColors() {
+	  if (this.platform === 'cupertino') {
+		return {
+		  bg: this.bgColor || 'rgba(250,250,250,0.95)',
+		  fg: this.textColor || '#000',
+		  accent: this.buttonColor || '#007AFF',
+		  divider: 'rgba(60,60,67,0.15)'
+		};
+	  }
+
+	  const map = {
+		info: '#E8F0FE',
+		success: '#E6F4EA',
+		warning: '#FEF7E0',
+		error: '#FCE8E6'
+	  };
+
+	  return {
+		bg: this.bgColor || map[this.type] || map.info,
+		fg: this.textColor || '#1F1F1F',
+		accent: this.buttonColor || '#1A73E8'
+	  };
   }
 
-  /* ===================== Colors ===================== */
-  _resolveColors() {
-    if (this.platform === 'cupertino') {
-      return {
-        bg: 'rgba(250,250,250,0.95)',
-        fg: '#000',
-        accent: '#007AFF',
-        divider: 'rgba(60,60,67,0.15)'
-      };
-    }
+  _calculateHeight() {
+    const ctx = this.framework.ctx;
+    ctx.save();
+    ctx.font =
+      this.platform === 'cupertino'
+        ? '600 15px -apple-system, SF Pro Display'
+        : '400 14px Roboto, sans-serif';
 
-    // Material v3
-    const map = {
-      info: '#E8F0FE',
-      success: '#E6F4EA',
-      warning: '#FEF7E0',
-      error: '#FCE8E6'
-    };
+    const maxWidth = this.width - 32; // padding 16px de chaque côté
+    const words = this.text.split(' ');
+    let lines = [];
+    let line = '';
+
+    words.forEach(word => {
+      const test = line + word + ' ';
+      if (ctx.measureText(test).width < maxWidth) {
+        line = test;
+      } else {
+        lines.push(line);
+        line = word + ' ';
+      }
+    });
 
-    return {
-      bg: map[this.type] || map.info,
-      fg: '#1F1F1F',
-      accent: '#1A73E8'
-    };
-  }
+    lines.push(line);
+    this._lines = lines;
 
-  /* ===================== Show/Hide ===================== */
-  show() { 
-    this.visible = true; 
-    this.markDirty(); 
-  }
-  
-  hide() { 
-    this.visible = false; 
-    this.markDirty(); 
+    ctx.restore();
+    this.height = Math.max(64, lines.length * 20 + 16); // minimum 64px
   }
 
-  /* ===================== Update ===================== */
+  show() { this.visible = true; this.markDirty(); }
+  hide() { this.visible = false; this.markDirty(); }
+
   update() {
     const now = performance.now();
     const dt = Math.min((now - this._lastUpdate) / 16.6, 3);
@@ -113,27 +124,53 @@ export default class Banner extends Component {
     this.progress = Math.max(0, Math.min(1, this.progress));
 
     if (Math.abs(target - this.progress) > 0.01) this.markDirty();
-
     this._lastUpdate = now;
   }
 
-  /* ===================== Draw ===================== */
+  addRipple(x, y) {
+    if (this.platform !== 'material') return;
+
+    this.ripples.push({
+      x, y,
+      radius: 0,
+      maxRadius: Math.max(this.width, this.height),
+      opacity: 0.3
+    });
+
+    this.animateRipples();
+  }
+
+  animateRipples() {
+    const animate = () => {
+      let active = false;
+      for (let r of this.ripples) {
+        if (r.radius < r.maxRadius) {
+          r.radius += r.maxRadius / 15;
+          r.opacity -= 0.03;
+          active = true;
+        }
+      }
+      this.ripples = this.ripples.filter(r => r.opacity > 0);
+      if (active) requestAnimationFrame(animate);
+    };
+    animate();
+  }
+
   draw(ctx) {
     this.update();
     if (this.progress <= 0.01) return;
 
-    const h = this.height * this.progress;
-    const visibleHeight = h;
-
+    const visibleHeight = this.height * this.progress;
     ctx.save();
 
-    // Background
+    // Shadow pour Material
     if (this.platform === 'material') {
-      ctx.shadowColor = 'rgba(0,0,0,0.18)';
-      ctx.shadowBlur = 8;
+      ctx.shadowColor = 'rgba(0,0,0,0.12)';
+      ctx.shadowBlur = 6;
       ctx.shadowOffsetY = 2;
     }
 
+    // Background
     ctx.fillStyle = this._colors.bg;
     ctx.fillRect(this.x, this.y, this.width, visibleHeight);
     ctx.shadowColor = 'transparent';
@@ -147,20 +184,39 @@ export default class Banner extends Component {
       ctx.stroke();
     }
 
+    // Ripple Material
+    if (this.platform === 'material') {
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(this.x, this.y, this.width, visibleHeight);
+      ctx.clip();
+
+      this.ripples.forEach(r => {
+        ctx.globalAlpha = r.opacity;
+        ctx.fillStyle = this.rippleColor;
+        ctx.beginPath();
+        ctx.arc(this.x + r.x, this.y + r.y, r.radius, 0, Math.PI * 2);
+        ctx.fill();
+      });
+
+      ctx.restore();
+      ctx.globalAlpha = 1;
+    }
+
     // Text
     ctx.fillStyle = this._colors.fg;
     ctx.font =
       this.platform === 'cupertino'
-        ? '400 15px -apple-system'
+        ? '600 15px -apple-system, SF Pro Display'
         : '400 14px Roboto, sans-serif';
-    ctx.textBaseline = 'middle';
     ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+
     ctx.fillText(this.text, this.x + 16, this.y + visibleHeight / 2);
 
-    // Actions - calculer et stocker les bounds
+    // Actions
     this._actionBounds = [];
     let x = this.width - 16;
-    
     for (let i = this.actions.length - 1; i >= 0; i--) {
       const action = this.actions[i];
       const textWidth = ctx.measureText(action.label).width + 20;
@@ -171,15 +227,9 @@ export default class Banner extends Component {
       ctx.textBaseline = 'middle';
       ctx.fillText(action.label, this.x + x + textWidth / 2, this.y + visibleHeight / 2);
 
-      // Stocker la hitbox (en coordonnées écran, pas canvas)
       this._actionBounds.push({
         action: action,
-        bounds: {
-          x: this.x + x,
-          y: this.y + (visibleHeight - 44) / 2,
-          w: textWidth,
-          h: 44
-        }
+        bounds: { x: this.x + x, y: this.y + (visibleHeight - 44)/2, w: textWidth, h: 44 }
       });
 
       x -= 12;
@@ -191,152 +241,59 @@ export default class Banner extends Component {
       const cx = this.width - 28;
       const cy = this.y + visibleHeight / 2;
 
-      ctx.fillStyle =
-        this.platform === 'cupertino'
-          ? 'rgba(60,60,67,0.6)'
-          : this._colors.fg;
-
-      ctx.font =
-        this.platform === 'cupertino'
-          ? '600 16px -apple-system'
-          : '500 16px Roboto';
+      ctx.fillStyle = this.platform === 'cupertino' ? 'rgba(60,60,67,0.6)' : this._colors.fg;
+      ctx.font = this.platform === 'cupertino' ? '600 16px -apple-system' : '500 16px Roboto';
       ctx.textAlign = 'center';
       ctx.textBaseline = 'middle';
       ctx.fillText('×', cx, cy);
 
-      this._dismissBounds = {
-        x: cx - hitSize / 2,
-        y: cy - hitSize / 2,
-        w: hitSize,
-        h: hitSize
-      };
+      this._dismissBounds = { x: cx - hitSize/2, y: cy - hitSize/2, w: hitSize, h: hitSize };
     } else {
       this._dismissBounds = null;
     }
 
     ctx.restore();
-    
-    // DEBUG: Dessiner les hitboxes
-    if (this.framework && this.framework.debbug) {
-      this._drawDebugHitboxes(ctx);
-    }
-  }
-  
-  /* ===================== Debug ===================== */
-  _drawDebugHitboxes(ctx) {
-    ctx.save();
-    ctx.strokeStyle = 'red';
-    ctx.lineWidth = 1;
-    ctx.fillStyle = 'rgba(255, 0, 0, 0.1)';
-    
-    // Dessiner la hitbox principale du banner
-    const h = this.height * this.progress;
-    ctx.strokeRect(this.x, this.y, this.width, h);
-    
-    // Dessiner les hitboxes des actions
-    if (this._actionBounds && this._actionBounds.length > 0) {
-      for (const item of this._actionBounds) {
-        const b = item.bounds;
-        ctx.fillRect(b.x, b.y, b.w, b.h);
-        ctx.strokeRect(b.x, b.y, b.w, b.h);
-        
-        // Texte de debug
-        ctx.fillStyle = 'red';
-        ctx.font = '10px monospace';
-        ctx.fillText(item.action.label, b.x + 5, b.y + 12);
-      }
-    }
-    
-    // Dessiner la hitbox du dismiss button
-    if (this._dismissBounds) {
-      const b = this._dismissBounds;
-      ctx.fillRect(b.x, b.y, b.w, b.h);
-      ctx.strokeRect(b.x, b.y, b.w, b.h);
-      ctx.fillText('X', b.x + 5, b.y + 12);
-    }
-    
-    ctx.restore();
   }
 
-  /* ===================== Click Handling ===================== */
   _handleClick(event) {
     if (this.progress < 0.95) return;
-    
-    // Obtenir les coordonnées du clic/touch
-    let clientX, clientY;
-    
+
+    let clientX = event.clientX, clientY = event.clientY;
     if (event.type === 'touchend') {
       const touch = event.changedTouches[0];
       clientX = touch.clientX;
       clientY = touch.clientY;
-    } else {
-      clientX = event.clientX;
-      clientY = event.clientY;
     }
-    
-    // Convertir en coordonnées canvas SIMPLIFIÉ
+
     const canvasRect = this.framework.canvas.getBoundingClientRect();
-    
-    // Coordonnées relatives au canvas (en pixels CSS, pas en pixels canvas)
     const x = clientX - canvasRect.left;
     const y = clientY - canvasRect.top;
-    
-    console.log('Click converted:', { 
-      clientX, clientY, 
-      canvasLeft: canvasRect.left, 
-      canvasTop: canvasRect.top,
-      x, y,
-      bannerX: this.x,
-      bannerY: this.y,
-      bannerWidth: this.width,
-      bannerHeight: this.height * this.progress
-    });
-    
-    // Vérifier si on clique sur le banner (en coordonnées CSS)
-    const bannerBottom = this.y + (this.height * this.progress);
-    if (x < this.x || x > this.x + this.width || y < this.y || y > bannerBottom) {
-      console.log('Click outside banner');
-      return;
-    }
-    
-    console.log('Click INSIDE banner!');
-    
-    // Empêcher la propagation
+
+    // Ripple effect sur banner
+    if (this.platform === 'material') this.addRipple(x - this.x, y - this.y);
+
+    if (x < this.x || x > this.x + this.width || y < this.y || y > this.y + this.height) return;
+
     event.stopPropagation();
-    
-    // 1️⃣ Dismiss button
+
+    // Dismiss
     if (this.dismissible && this._dismissBounds) {
       const b = this._dismissBounds;
-      console.log('Checking dismiss bounds:', b, 'click:', {x, y});
-      if (x >= b.x && x <= b.x + b.w && 
-          y >= b.y && y <= b.y + b.h) {
-        console.log('Dismiss clicked!');
+      if (x >= b.x && x <= b.x + b.w && y >= b.y && y <= b.y + b.h) {
         this.hide();
         return;
       }
     }
-    
-    // 2️⃣ Actions
-    if (this._actionBounds && this._actionBounds.length > 0) {
-      console.log('Checking', this._actionBounds.length, 'action bounds');
+
+    // Actions
+    if (this._actionBounds.length) {
       for (const item of this._actionBounds) {
         const b = item.bounds;
-        console.log('Checking action:', item.action.label, 'bounds:', b);
-        if (x >= b.x && x <= b.x + b.w && 
-            y >= b.y && y <= b.y + b.h) {
-          console.log('Action clicked:', item.action.label);
+        if (x >= b.x && x <= b.x + b.w && y >= b.y && y <= b.y + b.h) {
           item.action.onClick?.();
           return;
         }
       }
     }
-    
-    console.log('Click on banner but not on any button');
-  }
-
-  /* ===================== Resize ===================== */
-  _resize(width) {
-    this.width = width;
-    this.markDirty();
   }
-}
+}