canvasframework 0.3.16 → 0.3.18

package/components/Button.js

@@ -93,6 +93,14 @@ class Button extends Component {
         this.rippleColor = this.hexToRgba(baseColor, 0.3);
         this.elevation = 0;
         break;
+		
+	  default :
+		this.bgColor = options.bgColor || '#FFFFFF';
+        this.textColor = options.textColor || baseColor;
+        this.borderWidth = 0;
+        this.rippleColor = this.hexToRgba(baseColor, 0.2);
+        this.elevation = options.elevation || 4;
+        break;
     }
   }
   
@@ -127,6 +135,12 @@ class Button extends Component {
         this.textColor = options.textColor || baseColor;
         this.borderWidth = 0;
         break;
+		
+	  default :
+		this.bgColor = 'transparent';
+        this.textColor = options.textColor || baseColor;
+        this.borderWidth = 0;
+        break;
     }
   }
   

package/components/ImageCarousel.js

@@ -3,22 +3,9 @@ import Component from '../core/Component.js';
 /**
  * Carousel / Slider d'images avec swipe horizontal et lazy load
  * Compatible Material et Cupertino
- * @class
- * @extends Component
+ * Tout le scroll est géré par le composant
  */
 class ImageCarousel extends Component {
-  /**
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}]
-   * @param {Array<string>} [options.images=[]] - URLs des images
-   * @param {number} [options.height=200] - Hauteur du carousel
-   * @param {number} [options.spacing=16] - Espacement entre images
-   * @param {number} [options.borderRadius=8] - Coins arrondis
-   * @param {number} [options.pageIndicatorSize=8] - Taille des dots
-   * @param {string} [options.pageIndicatorColor='#6200EE'] - Couleur dot actif
-   * @param {Function} [options.onSwipeEnd] - Callback quand la page change
-   * @param {Function} [options.onImageClick] - Callback clic sur image
-   */
   constructor(framework, options = {}) {
     super(framework, options);
 
@@ -33,8 +20,9 @@ class ImageCarousel extends Component {
     this.pageIndicatorColor = options.pageIndicatorColor || '#6200EE';
 
     this.platform = framework.platform;
-    this.startX = 0;
+
     this.isDragging = false;
+    this.lastX = 0;
     this.velocity = 0;
 
     this.onSwipeEnd = options.onSwipeEnd || null;
@@ -42,98 +30,140 @@ class ImageCarousel extends Component {
 
     this.loadedImages = Array(this.images.length).fill(null);
 
-    // Bind swipe
-    this.framework.addEventListener('touchstart', this.onTouchStart.bind(this));
-    this.framework.addEventListener('touchmove', this.onTouchMove.bind(this));
-    this.framework.addEventListener('touchend', this.onTouchEnd.bind(this));
-
+    this._setupEventHandlers();
     this.animateScroll();
   }
 
-  onTouchStart(e) {
-    const touch = e.touches[0];
-    this.startX = touch.clientX;
-    this.isDragging = true;
-    this.velocity = 0;
-    this.lastTime = performance.now();
-    this.lastX = touch.clientX;
-  }
+  // --------------------------
+  // Event handlers
+  // --------------------------
+  _setupEventHandlers() {
+    const canvas = this.framework.canvas;
+
+    // TOUCH
+    canvas.addEventListener('touchstart', (e) => {
+      if (e.touches.length === 1 && this.isPointInsideTouch(e.touches[0])) {
+        this.isDragging = true;
+        this.lastX = e.touches[0].clientX;
+        this.velocity = 0;
+        e.preventDefault();
+      }
+    });
+
+    canvas.addEventListener('touchmove', (e) => {
+      if (this.isDragging && e.touches.length === 1) {
+        const delta = e.touches[0].clientX - this.lastX;
+        this.scrollX += delta;
+        this.velocity = delta;
+        this.lastX = e.touches[0].clientX;
+
+        this._clampScroll();
+        this._requestRedraw();
+        e.preventDefault();
+      }
+    });
 
-  onTouchMove(e) {
-    if (!this.isDragging) return;
-    const touch = e.touches[0];
-    const delta = touch.clientX - this.startX;
-    this.scrollX = -this.currentIndex * (this.width + this.spacing) + delta;
-
-    // calculer velocity
-    const now = performance.now();
-    const dt = now - this.lastTime;
-    this.velocity = (touch.clientX - this.lastX) / dt * 16; // approximation
-    this.lastTime = now;
-    this.lastX = touch.clientX;
-  }
+    canvas.addEventListener('touchend', () => this._endDrag());
+
+    // MOUSE
+    canvas.addEventListener('mousedown', (e) => {
+      if (this.isPointInside(e)) {
+        this.isDragging = true;
+        this.lastX = e.clientX;
+        this.velocity = 0;
+        e.preventDefault();
+      }
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+      if (this.isDragging) {
+        const delta = e.clientX - this.lastX;
+        this.scrollX += delta;
+        this.velocity = delta;
+        this.lastX = e.clientX;
+
+        this._clampScroll();
+        this._requestRedraw();
+      }
+    });
 
-  onTouchEnd() {
-    if (!this.isDragging) return;
+    canvas.addEventListener('mouseup', () => this._endDrag());
+    canvas.addEventListener('mouseleave', () => this._endDrag());
+  }
 
-    // momentum scroll
-    const momentumThreshold = this.width / 3;
-    let targetIndex = this.currentIndex;
+  _endDrag() {
+    if (this.isDragging) {
+      this.isDragging = false;
+      // Snap à la page la plus proche
+      const targetIndex = Math.round(-this.scrollX / (this.width + this.spacing));
+      this.currentIndex = Math.min(Math.max(targetIndex, 0), this.images.length - 1);
+      this.scrollX = -this.currentIndex * (this.width + this.spacing);
 
-    if (this.velocity < -0.5) targetIndex = Math.min(this.currentIndex + 1, this.images.length - 1);
-    else if (this.velocity > 0.5) targetIndex = Math.max(this.currentIndex - 1, 0);
-    else {
-      const deltaIndex = Math.round(-this.scrollX / (this.width + this.spacing)) - this.currentIndex;
-      if (deltaIndex > 0) targetIndex = Math.min(this.currentIndex + 1, this.images.length - 1);
-      else if (deltaIndex < 0) targetIndex = Math.max(this.currentIndex - 1, 0);
+      if (this.onSwipeEnd) this.onSwipeEnd(this.currentIndex);
     }
+  }
 
-    this.currentIndex = targetIndex;
-    this.scrollX = -this.currentIndex * (this.width + this.spacing);
+  _clampScroll() {
+    const maxScroll = 0;
+    const minScroll = -(this.images.length - 1) * (this.width + this.spacing);
+    if (this.scrollX > maxScroll) this.scrollX = maxScroll;
+    if (this.scrollX < minScroll) this.scrollX = minScroll;
+  }
 
-    this.isDragging = false;
-    this.velocity = 0;
+  isPointInsideTouch(touch) {
+    const rect = this.framework.canvas.getBoundingClientRect();
+    const x = touch.clientX - rect.left;
+    const y = touch.clientY - rect.top;
+    return this.isPointInside(x, y);
+  }
+
+  isPointInside(x, y) {
+    return x >= this.x && x <= this.x + this.width &&
+           y >= this.y && y <= this.y + this.height;
+  }
 
-    if (this.onSwipeEnd) this.onSwipeEnd(this.currentIndex);
+  _requestRedraw() {
+    if (this.framework.markComponentDirty) this.framework.markComponentDirty(this);
   }
 
+  // --------------------------
+  // Animation / Inertie
+  // --------------------------
   animateScroll() {
     const animate = () => {
       if (!this.isDragging) {
-        // inertia effect
+        // inertia
         if (Math.abs(this.velocity) > 0.1) {
           this.scrollX += this.velocity;
-          this.velocity *= 0.95; // friction
+          this.velocity *= 0.95;
 
-          // clamp
-          if (this.scrollX > 0) this.scrollX = 0;
-          const maxScroll = -(this.images.length - 1) * (this.width + this.spacing);
-          if (this.scrollX < maxScroll) this.scrollX = maxScroll;
+          this._clampScroll();
         } else {
-          // snap to nearest
+          // snap doux vers la page
           const target = -this.currentIndex * (this.width + this.spacing);
           this.scrollX += (target - this.scrollX) * 0.2;
         }
       }
-
       requestAnimationFrame(animate);
     };
     animate();
   }
 
+  // --------------------------
+  // Draw
+  // --------------------------
   draw(ctx) {
     ctx.save();
-
     const startX = this.x + this.scrollX + this.spacing / 2;
 
     for (let i = 0; i < this.images.length; i++) {
       const imgX = startX + i * (this.width + this.spacing);
 
-      // charger lazy image
+      // lazy load
       if (!this.loadedImages[i]) {
         const img = new Image();
         img.src = this.images[i];
-        img.onload = () => { this.loadedImages[i] = img; };
+        img.onload = () => { this.loadedImages[i] = img; this._requestRedraw(); };
       }
 
       ctx.save();
@@ -152,10 +182,11 @@ class ImageCarousel extends Component {
         ctx.textBaseline = 'middle';
         ctx.fillText('🖼', imgX + this.width / 2, this.y + this.height / 2);
       }
+
       ctx.restore();
     }
 
-    // Pagination Material
+    // pagination Material
     if (this.platform === 'material') {
       const dotY = this.y + this.height + 12;
       const totalWidth = this.images.length * this.pageIndicatorSize * 2;
@@ -183,11 +214,6 @@ class ImageCarousel extends Component {
     ctx.lineTo(x, y + radius);
     ctx.quadraticCurveTo(x, y, x + radius, y);
   }
-
-  isPointInside(x, y) {
-    return x >= this.x && x <= this.x + this.width &&
-           y >= this.y && y <= this.y + this.height;
-  }
 }
 
 export default ImageCarousel;

package/components/InputTags.js

@@ -414,14 +414,44 @@ class InputTags extends Component {
     
     return cursorX;
   }
+  
+  updateHeight() {
+	const maxX = this.x + this.width - 10; // marge droite
+	let currentX = this.x + 10;
+	let currentY = this.y + 10;
+	let lines = 1;
+
+	for (let i = 0; i < this.tags.length; i++) {
+	  const tagWidth = this.measureTagWidth(this.tags[i]);
+
+  	  if (currentX + tagWidth > maxX) {
+	    currentX = this.x + 10;
+	    currentY += this.tagHeight + this.tagSpacing;
+	    lines++;
+	  }
+
+	  currentX += tagWidth + this.tagSpacing;
+	}
+
+	// Ajouter la largeur du texte en cours
+	const textWidth = this.value.length * (this.fontSize * 0.6);
+	if (currentX + textWidth > maxX) {
+	  lines++;
+	}
+
+	// Mettre à jour la hauteur dynamique
+	this.height = Math.max(lines * (this.tagHeight + this.tagSpacing) + 10, 40); // 40 = minHeight
+  }
 
   /**
    * Dessine l'input
    * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
    */
   draw(ctx) {
+    this.updateHeight();
     ctx.save();
-    
+
+    // Dessin du contour
     if (this.platform === 'material') {
       ctx.strokeStyle = this.focused ? '#6200EE' : '#CCCCCC';
       ctx.lineWidth = this.focused ? 2 : 1;
@@ -436,30 +466,38 @@ class InputTags extends Component {
       this.roundRect(ctx, this.x, this.y, this.width, this.height, 8);
       ctx.stroke();
     }
-    
+
     // Position de départ pour dessiner les tags
     let currentX = this.x + 10;
-    const tagY = this.y + 10;
-    
+    let currentY = this.y + 10;
+    const maxX = this.x + this.width - 10;
+
     // Dessiner les tags
     for (let i = 0; i < this.tags.length; i++) {
-      this.drawTag(ctx, this.tags[i], currentX, tagY);
       const tagWidth = this.measureTagWidth(this.tags[i]);
+
+      // Retour à la ligne si dépassement
+      if (currentX + tagWidth > maxX) {
+        currentX = this.x + 10;
+        currentY += this.tagHeight + this.tagSpacing;
+      }
+
+      this.drawTag(ctx, this.tags[i], currentX, currentY);
       currentX += tagWidth + this.tagSpacing;
     }
-    
-    // Dessiner le texte en cours
+
+    // Dessiner le texte en cours ou placeholder
     if (this.value || (this.focused && this.tags.length === 0)) {
       ctx.fillStyle = this.value ? '#000000' : '#999999';
       ctx.font = `${this.fontSize}px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif`;
       ctx.textAlign = 'left';
       ctx.textBaseline = 'middle';
-      
+
       const displayText = this.value || this.placeholder;
-      const textY = this.y + this.height / 2;
-      
+      const textY = currentY + this.tagHeight / 2;
+
       ctx.fillText(displayText, currentX, textY);
-      
+
       // Curseur
       if (this.focused && this.cursorVisible) {
         const textWidth = ctx.measureText(this.value).width;
@@ -467,7 +505,7 @@ class InputTags extends Component {
         ctx.fillRect(currentX + textWidth, textY - this.fontSize / 2, 2, this.fontSize);
       }
     }
-    
+
     ctx.restore();
   }
 

package/components/List.js

@@ -1,24 +1,12 @@
 import Component from '../core/Component.js';
 import ListItem from '../components/ListItem.js';
+
 /**
  * Conteneur pour les éléments de liste (ListItems) avec défilement automatique
  * @class
  * @extends Component
- * @param {Framework} framework - Instance du framework
- * @param {Object} [options={}] - Options de configuration
- * @param {number} [options.itemHeight=56] - Hauteur de chaque item en pixels
- * @param {Function} [options.onItemClick] - Callback appelé lors du clic sur un item
- * @param {number} [options.y=0] - Position Y de départ
- * @example
- * const list = new List(framework, {
- *   itemHeight: 64,
- *   onItemClick: (index, itemOptions) => console.log('Item clicked:', index)
- * });
  */
 class List extends Component {
-  /**
-   * @constructs List
-   */
   constructor(framework, options = {}) {
     super(framework, options);
     /** @type {ListItem[]} */
@@ -28,37 +16,50 @@ class List extends Component {
     /** @type {Function|undefined} */
     this.onItemClick = options.onItemClick;
     /** @type {number} */
-    this.y = options.y || 0; // Position Y de départ
+    this.y = options.y || 0;
   }
   
   /**
    * Ajoute un item à la liste
-   * @param {Object} itemOptions - Options pour l'item
-   * @param {string} itemOptions.text - Texte à afficher
-   * @param {Function} [itemOptions.onClick] - Callback spécifique à l'item
-   * @param {Object} [itemOptions.style] - Style optionnel pour l'item
-   * @returns {ListItem} L'item créé
+   * @param {Object|Component} itemOptions - Options pour l'item OU instance de Component (ex: SwipeableListItem)
+   * @returns {ListItem|Component} L'item créé ou passé
    */
   addItem(itemOptions) {
-    const item = new ListItem(this.framework, {
-      ...itemOptions,
-      x: this.x,
-      y: this.y + (this.items.length * this.itemHeight),
-      width: this.width,
-      height: this.itemHeight, // IMPORTANT: définir la hauteur
-      onClick: () => {
-        if (this.onItemClick) {
-          this.onItemClick(this.items.length, itemOptions);
-        }
-        if (itemOptions.onClick) {
-          itemOptions.onClick();
+    let item;
+    
+    // 🔹 Vérifier si c'est déjà un composant instancié (SwipeableListItem)
+    if (itemOptions instanceof Component) {
+      item = itemOptions;
+      
+      // 🔹 CRITIQUE : Définir la position et taille de l'item
+      item.x = this.x;
+      item.y = this.y + (this.items.length * this.itemHeight);
+      item.width = this.width;
+      item.height = this.itemHeight;
+      
+      console.log(`📦 SwipeableListItem positionné à y=${item.y}`);
+    } else {
+      // Créer un ListItem standard
+      item = new ListItem(this.framework, {
+        ...itemOptions,
+        x: this.x,
+        y: this.y + (this.items.length * this.itemHeight),
+        width: this.width,
+        height: this.itemHeight,
+        onClick: () => {
+          if (this.onItemClick) {
+            this.onItemClick(this.items.length, itemOptions);
+          }
+          if (itemOptions.onClick) {
+            itemOptions.onClick();
+          }
         }
-      }
-    });
+      });
+    }
     
     this.items.push(item);
-    this.framework.add(item); // Ajouter chaque item au framework
-    this.height = this.items.length * this.itemHeight; // Mettre à jour la hauteur totale
+    this.framework.add(item);
+    this.height = this.items.length * this.itemHeight;
     
     return item;
   }