canvasframework 0.3.6

package/components/ImageCarousel.js

@@ -0,0 +1,193 @@
+import Component from '../core/Component.js';
+
+/**
+ * Carousel / Slider d'images avec swipe horizontal et lazy load
+ * Compatible Material et Cupertino
+ * @class
+ * @extends Component
+ */
+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);
+
+    this.images = options.images || [];
+    this.currentIndex = 0;
+    this.scrollX = 0;
+    this.height = options.height || 200;
+    this.spacing = options.spacing || 16;
+    this.borderRadius = options.borderRadius || 8;
+
+    this.pageIndicatorSize = options.pageIndicatorSize || 8;
+    this.pageIndicatorColor = options.pageIndicatorColor || '#6200EE';
+
+    this.platform = framework.platform;
+    this.startX = 0;
+    this.isDragging = false;
+    this.velocity = 0;
+
+    this.onSwipeEnd = options.onSwipeEnd || null;
+    this.onImageClick = options.onImageClick || null;
+
+    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.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;
+  }
+
+  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;
+  }
+
+  onTouchEnd() {
+    if (!this.isDragging) return;
+
+    // momentum scroll
+    const momentumThreshold = this.width / 3;
+    let targetIndex = this.currentIndex;
+
+    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);
+    }
+
+    this.currentIndex = targetIndex;
+    this.scrollX = -this.currentIndex * (this.width + this.spacing);
+
+    this.isDragging = false;
+    this.velocity = 0;
+
+    if (this.onSwipeEnd) this.onSwipeEnd(this.currentIndex);
+  }
+
+  animateScroll() {
+    const animate = () => {
+      if (!this.isDragging) {
+        // inertia effect
+        if (Math.abs(this.velocity) > 0.1) {
+          this.scrollX += this.velocity;
+          this.velocity *= 0.95; // friction
+
+          // 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;
+        } else {
+          // snap to nearest
+          const target = -this.currentIndex * (this.width + this.spacing);
+          this.scrollX += (target - this.scrollX) * 0.2;
+        }
+      }
+
+      requestAnimationFrame(animate);
+    };
+    animate();
+  }
+
+  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
+      if (!this.loadedImages[i]) {
+        const img = new Image();
+        img.src = this.images[i];
+        img.onload = () => { this.loadedImages[i] = img; };
+      }
+
+      ctx.save();
+      ctx.beginPath();
+      this.roundRect(ctx, imgX, this.y, this.width, this.height, this.borderRadius);
+      ctx.clip();
+
+      if (this.loadedImages[i]) {
+        ctx.drawImage(this.loadedImages[i], imgX, this.y, this.width, this.height);
+      } else {
+        ctx.fillStyle = '#E0E0E0';
+        ctx.fillRect(imgX, this.y, this.width, this.height);
+        ctx.fillStyle = '#BDBDBD';
+        ctx.font = '20px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText('🖼', imgX + this.width / 2, this.y + this.height / 2);
+      }
+      ctx.restore();
+    }
+
+    // Pagination Material
+    if (this.platform === 'material') {
+      const dotY = this.y + this.height + 12;
+      const totalWidth = this.images.length * this.pageIndicatorSize * 2;
+      const startDotX = this.x + (this.width - totalWidth) / 2;
+
+      for (let i = 0; i < this.images.length; i++) {
+        ctx.beginPath();
+        ctx.arc(startDotX + i * this.pageIndicatorSize * 2, dotY, this.pageIndicatorSize / 2, 0, Math.PI * 2);
+        ctx.fillStyle = i === this.currentIndex ? this.pageIndicatorColor : '#E0E0E0';
+        ctx.fill();
+      }
+    }
+
+    ctx.restore();
+  }
+
+  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);
+  }
+
+  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/ImageComponent.js

@@ -0,0 +1,223 @@
+import Component from '../core/Component.js';
+/**
+ * Composant d'image
+ * @class
+ * @extends Component
+ * @property {string} src - URL de l'image
+ * @property {string} fit - Mode d'ajustement ('cover', 'contain', 'fill', 'none')
+ * @property {number} borderRadius - Rayon des coins
+ * @property {string} placeholder - Couleur de placeholder
+ * @property {boolean} loaded - Image chargée
+ * @property {boolean} loading - En cours de chargement
+ * @property {boolean} error - Erreur de chargement
+ * @property {HTMLImageElement} img - Élément image HTML
+ */
+class ImageComponent extends Component {
+  /**
+   * Crée une instance de ImageComponent
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {string} [options.src=''] - URL de l'image
+   * @param {string} [options.fit='cover'] - Mode d'ajustement
+   * @param {number} [options.borderRadius=0] - Rayon des coins
+   * @param {string} [options.placeholder='#E0E0E0'] - Couleur de placeholder
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.src = options.src || '';
+    this.fit = options.fit || 'cover'; // cover, contain, fill, none
+    this.borderRadius = options.borderRadius || 0;
+    this.placeholder = options.placeholder || '#E0E0E0';
+    this.loaded = false;
+    this.loading = false;
+    this.error = false;
+    
+    // Créer l'élément image
+    this.img = null;
+    if (this.src) {
+      this.loadImage();
+    }
+  }
+  
+  /**
+   * Charge l'image
+   * @private
+   */
+  loadImage() {
+    if (this.loading) return;
+    
+    this.loading = true;
+    this.img = new Image();
+    this.img.crossOrigin = 'anonymous';
+    
+    this.img.onload = () => {
+      this.loaded = true;
+      this.loading = false;
+      this.error = false;
+    };
+    
+    this.img.onerror = () => {
+      this.loaded = false;
+      this.loading = false;
+      this.error = true;
+    };
+    
+    this.img.src = this.src;
+  }
+  
+  /**
+   * Change l'URL de l'image
+   * @param {string} newSrc - Nouvelle URL
+   */
+  setSrc(newSrc) {
+    this.src = newSrc;
+    this.loaded = false;
+    this.error = false;
+    this.loadImage();
+  }
+  
+  /**
+   * Dessine l'image
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    // Clipping avec borderRadius
+    if (this.borderRadius > 0) {
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
+      ctx.clip();
+    }
+    
+    if (this.loaded && this.img) {
+      // Dessiner l'image selon le mode fit
+      const imgRatio = this.img.width / this.img.height;
+      const boxRatio = this.width / this.height;
+      
+      let drawWidth, drawHeight, drawX, drawY;
+      
+      switch (this.fit) {
+        case 'cover':
+          if (imgRatio > boxRatio) {
+            drawHeight = this.height;
+            drawWidth = drawHeight * imgRatio;
+            drawX = this.x - (drawWidth - this.width) / 2;
+            drawY = this.y;
+          } else {
+            drawWidth = this.width;
+            drawHeight = drawWidth / imgRatio;
+            drawX = this.x;
+            drawY = this.y - (drawHeight - this.height) / 2;
+          }
+          break;
+          
+        case 'contain':
+          if (imgRatio > boxRatio) {
+            drawWidth = this.width;
+            drawHeight = drawWidth / imgRatio;
+            drawX = this.x;
+            drawY = this.y + (this.height - drawHeight) / 2;
+          } else {
+            drawHeight = this.height;
+            drawWidth = drawHeight * imgRatio;
+            drawX = this.x + (this.width - drawWidth) / 2;
+            drawY = this.y;
+          }
+          break;
+          
+        case 'fill':
+          drawX = this.x;
+          drawY = this.y;
+          drawWidth = this.width;
+          drawHeight = this.height;
+          break;
+          
+        case 'none':
+          drawX = this.x + (this.width - this.img.width) / 2;
+          drawY = this.y + (this.height - this.img.height) / 2;
+          drawWidth = this.img.width;
+          drawHeight = this.img.height;
+          break;
+          
+        default:
+          drawX = this.x;
+          drawY = this.y;
+          drawWidth = this.width;
+          drawHeight = this.height;
+      }
+      
+      ctx.drawImage(this.img, drawX, drawY, drawWidth, drawHeight);
+      
+    } else if (this.loading) {
+      // Placeholder avec spinner
+      ctx.fillStyle = this.placeholder;
+      ctx.fillRect(this.x, this.y, this.width, this.height);
+      
+      // Petit spinner au centre
+      const centerX = this.x + this.width / 2;
+      const centerY = this.y + this.height / 2;
+      const spinnerSize = Math.min(40, this.width / 3, this.height / 3);
+      
+      ctx.strokeStyle = '#999999';
+      ctx.lineWidth = 3;
+      ctx.lineCap = 'round';
+      const rotation = (Date.now() / 10) % 360 * (Math.PI / 180);
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, spinnerSize / 2, rotation, rotation + Math.PI * 1.5);
+      ctx.stroke();
+      
+    } else if (this.error) {
+      // Placeholder avec icône d'erreur
+      ctx.fillStyle = this.placeholder;
+      ctx.fillRect(this.x, this.y, this.width, this.height);
+      
+      ctx.fillStyle = '#999999';
+      ctx.font = '48px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText('⚠️', this.x + this.width / 2, this.y + this.height / 2);
+      
+    } else {
+      // Placeholder simple
+      ctx.fillStyle = this.placeholder;
+      ctx.fillRect(this.x, this.y, this.width, this.height);
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Dessine un rectangle avec 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.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();
+  }
+  
+  /**
+   * Vérifie si un point est dans les limites
+   * @returns {boolean} False (non cliquable par défaut)
+   */
+  isPointInside() {
+    return false; // Non cliquable par défaut
+  }
+}
+
+export default ImageComponent;