canvasframework 0.5.18 → 0.5.20

package/components/IOSDatePickerWheel.js

@@ -0,0 +1,430 @@
+import Component from '../core/Component.js';
+
+/**
+ * Sélecteur de date iOS (style roue)
+ * @class
+ * @extends Component
+ * @property {Date} selectedDate - Date sélectionnée
+ * @property {Function} onChange - Callback au changement
+ * @property {number} monthWheel - Mois sélectionné
+ * @property {number} dayWheel - Jour sélectionné
+ * @property {number} yearWheel - Année sélectionnée
+ * @property {number} wheelHeight - Hauteur de la roue
+ * @property {number} itemHeight - Hauteur d'un item
+ * @property {number} visibleItems - Nombre d'items visibles
+ */
+class IOSDatePickerWheel extends Component {
+  /**
+   * Crée une instance de IOSDatePickerWheel
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {Date} [options.selectedDate=new Date()] - Date initiale
+   * @param {Function} [options.onChange] - Callback au changement
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.selectedDate = options.selectedDate || new Date();
+    this.onChange = options.onChange;
+    
+    // Roues de sélection
+    this.monthWheel = this.selectedDate.getMonth();
+    this.dayWheel = this.selectedDate.getDate();
+    this.yearWheel = this.selectedDate.getFullYear();
+    
+    this.wheelHeight = 200;
+    this.itemHeight = 40;
+    this.visibleItems = 5;
+  
+    // État interne
+    this.dragging = false;
+    this.dragStartY = 0;
+    this.dragWheel = null;
+    this.lastY = 0;
+    
+    // Configuration des limites
+    this._setupLimits();
+    
+    // Setup des handlers
+    this._setupEventHandlers();
+    
+    // Dimensions
+    if (!options.width) {
+      this.width = framework.width - 40;
+    }
+    
+    if (!options.height) {
+      this.height = this.wheelHeight;
+    }
+  }
+  
+  /**
+   * Configure les limites pour chaque roue
+   * @private
+   */
+  _setupLimits() {
+    // Mois: 0-11 (Janvier à Décembre)
+    this.monthMin = 0;
+    this.monthMax = 11;
+    
+    // Jour: 1-31 (selon le mois et l'année, on ajustera dynamiquement)
+    this.dayMin = 1;
+    this.dayMax = 31;
+    
+    // Année: 1900-2100 par défaut
+    this.yearMin = 1900;
+    this.yearMax = 2100;
+    
+    // Mettre à jour les limites du jour en fonction du mois et de l'année
+    this._updateDayLimits();
+  }
+  
+  /**
+   * Met à jour les limites du jour en fonction du mois et de l'année
+   * @private
+   */
+  _updateDayLimits() {
+    // Nombre de jours dans le mois actuel
+    const daysInMonth = new Date(this.yearWheel, this.monthWheel + 1, 0).getDate();
+    this.dayMax = daysInMonth;
+    
+    // Ajuster le jour sélectionné si nécessaire
+    if (this.dayWheel > daysInMonth) {
+      this.dayWheel = daysInMonth;
+      this._updateSelectedDate();
+    }
+  }
+  
+  /**
+   * Configure les gestionnaires d'événements
+   * @private
+   */
+  _setupEventHandlers() {
+    // Handler press
+    this.onPress = (x, y) => {
+      // Vérifier si dans le composant
+      const inside = (x >= this.x && x <= this.x + this.width && 
+                     y >= this.y && y <= this.y + this.wheelHeight);
+      
+      if (!inside) {
+        return false;
+      }
+      
+      // Activer le drag
+      this.dragging = true;
+      this.dragStartY = y;
+      this.lastY = y;
+      
+      // Déterminer la roue
+      const wheelWidth = this.width / 3;
+      if (x < this.x + wheelWidth) {
+        this.dragWheel = 0; // Mois
+      } else if (x < this.x + wheelWidth * 2) {
+        this.dragWheel = 1; // Jour
+      } else {
+        this.dragWheel = 2; // Année
+      }
+      
+      // Prendre le contrôle
+      this.framework.activeComponent = this;
+      
+      // Ajouter l'écouteur global pour les mouvements
+      this._addGlobalMoveListener();
+      
+      // Forcer le redessin
+      this._requestRedraw();
+      
+      return true;
+    };
+    
+    // Handler release
+    this.onRelease = (x, y) => {
+      if (this.dragging) {
+        this.dragging = false;
+        this.dragWheel = null;
+        
+        // Retirer l'écouteur global
+        this._removeGlobalMoveListener();
+        
+        // Relâcher le contrôle
+        if (this.framework.activeComponent === this) {
+          this.framework.activeComponent = null;
+        }
+        
+        this._requestRedraw();
+      }
+    };
+    
+    // Handler move du framework
+    this.onMove = (x, y) => {
+      // Laissé vide, on utilise l'écouteur global
+    };
+  }
+  
+  /**
+   * Ajoute un écouteur global pour les mouvements
+   * @private
+   */
+  _addGlobalMoveListener() {
+    const canvas = this.framework.canvas;
+    
+    // Sauvegarder les anciens handlers
+    this._savedMouseMove = canvas.onmousemove;
+    this._savedTouchMove = canvas.ontouchmove;
+    
+    // Overrider les handlers
+    canvas.onmousemove = (e) => {
+      if (this.dragging) {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        const rect = canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        
+        this._handleGlobalMove(x, y);
+        return false;
+      }
+      
+      // Appeler le handler original si on ne drag pas
+      if (this._savedMouseMove) {
+        return this._savedMouseMove(e);
+      }
+    };
+    
+    canvas.ontouchmove = (e) => {
+      if (this.dragging && e.touches.length > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        const touch = e.touches[0];
+        const rect = canvas.getBoundingClientRect();
+        const x = touch.clientX - rect.left;
+        const y = touch.clientY - rect.top;
+        
+        this._handleGlobalMove(x, y);
+        return false;
+      }
+      
+      if (this._savedTouchMove) {
+        return this._savedTouchMove(e);
+      }
+    };
+  }
+  
+  /**
+   * Retire l'écouteur global
+   * @private
+   */
+  _removeGlobalMoveListener() {
+    const canvas = this.framework.canvas;
+    
+    if (this._savedMouseMove) {
+      canvas.onmousemove = this._savedMouseMove;
+      this._savedMouseMove = null;
+    }
+    
+    if (this._savedTouchMove) {
+      canvas.ontouchmove = this._savedTouchMove;
+      this._savedTouchMove = null;
+    }
+  }
+  
+  /**
+   * Gestionnaire de mouvement global
+   * @private
+   */
+  _handleGlobalMove(x, y) {
+    if (!this.dragging) return;
+    
+    // Calculer le delta
+    const deltaY = y - this.lastY;
+    this.lastY = y;
+    
+    // Appliquer le scroll si mouvement significatif
+    if (Math.abs(deltaY) > 0.5) {
+      const direction = deltaY > 0 ? 1 : -1;
+      
+      // Appliquer le déplacement selon la roue avec limites
+      if (this.dragWheel === 0) {
+        // Mois - avec bouclage
+        let newMonth = this.monthWheel - direction;
+        if (newMonth < this.monthMin) newMonth = this.monthMax;
+        if (newMonth > this.monthMax) newMonth = this.monthMin;
+        this.monthWheel = newMonth;
+        
+        // Mettre à jour les limites du jour après changement de mois
+        this._updateDayLimits();
+      } 
+      else if (this.dragWheel === 1) {
+        // Jour - avec bouclage
+        let newDay = this.dayWheel - direction;
+        if (newDay < this.dayMin) newDay = this.dayMax;
+        if (newDay > this.dayMax) newDay = this.dayMin;
+        this.dayWheel = newDay;
+      } 
+      else if (this.dragWheel === 2) {
+        // Année - avec limites strictes
+        let newYear = this.yearWheel - direction;
+        if (newYear < this.yearMin) newYear = this.yearMin;
+        if (newYear > this.yearMax) newYear = this.yearMax;
+        this.yearWheel = newYear;
+        
+        // Mettre à jour les limites du jour après changement d'année
+        this._updateDayLimits();
+      }
+      
+      // Mettre à jour la date
+      this._updateSelectedDate();
+      
+      // Forcer le redessin
+      this._requestRedraw();
+    }
+  }
+  
+  /**
+   * Met à jour la date sélectionnée
+   * @private
+   */
+  _updateSelectedDate() {
+    // Créer la nouvelle date
+    const newDate = new Date(this.yearWheel, this.monthWheel, this.dayWheel);
+    
+    // Vérifier si la date a changé
+    if (newDate.getTime() !== this.selectedDate.getTime()) {
+      this.selectedDate = newDate;
+      
+      // Appeler le callback
+      if (this.onChange) {
+        this.onChange(this.selectedDate);
+      }
+    }
+  }
+  
+  /**
+   * Force le redessin du composant
+   * @private
+   */
+  _requestRedraw() {
+    if (this.framework.markComponentDirty) {
+      this.framework.markComponentDirty(this);
+    }
+  }
+  
+  /**
+   * Vérifie si un point est dans les limites du composant
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {boolean} True si le point est dans le composant
+   */
+  isPointInside(x, y) {
+    // Pas de scrollOffset car le Modal est fixe
+    return x >= this.x && 
+           x <= this.x + this.width && 
+           y >= this.y && 
+           y <= this.y + this.wheelHeight;
+  }
+  
+  /**
+   * Dessine le sélecteur de date
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    const wheelWidth = this.width / 3;
+    
+    // Fond
+    ctx.fillStyle = '#F9F9F9';
+    ctx.fillRect(this.x, this.y, this.width, this.wheelHeight);
+    
+    // Bande de sélection
+    const selectionY = this.y + this.wheelHeight / 2 - this.itemHeight / 2;
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+    ctx.fillRect(this.x, selectionY, this.width, this.itemHeight);
+    
+    // Lignes de séparation
+    ctx.strokeStyle = '#C7C7CC';
+    ctx.lineWidth = 0.5;
+    ctx.beginPath();
+    ctx.moveTo(this.x, selectionY);
+    ctx.lineTo(this.x + this.width, selectionY);
+    ctx.moveTo(this.x, selectionY + this.itemHeight);
+    ctx.lineTo(this.x + this.width, selectionY + this.itemHeight);
+    ctx.stroke();
+    
+    // Dividers verticaux
+    ctx.beginPath();
+    ctx.moveTo(this.x + wheelWidth, this.y);
+    ctx.lineTo(this.x + wheelWidth, this.y + this.wheelHeight);
+    ctx.moveTo(this.x + wheelWidth * 2, this.y);
+    ctx.lineTo(this.x + wheelWidth * 2, this.y + this.wheelHeight);
+    ctx.stroke();
+    
+    // Mois (avec bouclage)
+    const monthNames = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
+                       'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
+    this._drawWheel(ctx, this.x, monthNames, this.monthWheel, this.monthMin, this.monthMax);
+    
+    // Jour (avec ajustement dynamique)
+    const daysInMonth = new Date(this.yearWheel, this.monthWheel + 1, 0).getDate();
+    const days = Array.from({length: daysInMonth}, (_, i) => (i + 1).toString());
+    this._drawWheel(ctx, this.x + wheelWidth, days, this.dayWheel - 1, 0, daysInMonth - 1);
+    
+    // Année (avec limites fixes)
+    const years = Array.from({length: this.yearMax - this.yearMin + 1}, 
+                           (_, i) => (this.yearMin + i).toString());
+    const yearIndex = this.yearWheel - this.yearMin;
+    this._drawWheel(ctx, this.x + wheelWidth * 2, years, yearIndex, 0, years.length - 1);
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Dessine une roue de sélection avec limites
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   * @param {number} x - Position X
+   * @param {string[]} items - Items à afficher
+   * @param {number} selectedIndex - Index sélectionné
+   * @param {number} minIndex - Index minimum
+   * @param {number} maxIndex - Index maximum
+   * @private
+   */
+  _drawWheel(ctx, x, items, selectedIndex, minIndex = 0, maxIndex = items.length - 1) {
+    const wheelWidth = this.width / 3;
+    const centerY = this.y + this.wheelHeight / 2;
+    
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(x, this.y, wheelWidth, this.wheelHeight);
+    ctx.clip();
+    
+    for (let i = -2; i <= 2; i++) {
+      const index = selectedIndex + i;
+      if (index >= minIndex && index <= maxIndex) {
+        const itemY = centerY + i * this.itemHeight;
+        const distance = Math.abs(itemY - centerY);
+        const scale = 1 - (distance / this.wheelHeight);
+        const opacity = Math.max(0.3, scale);
+        
+        ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`;
+        ctx.font = `${i === 0 ? 'bold ' : ''}${18 + scale * 2}px -apple-system, sans-serif`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(items[index - minIndex], x + wheelWidth / 2, itemY);
+      }
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Nettoie le composant
+   * @private
+   */
+  _unmount() {
+    this._removeGlobalMoveListener();
+    super._unmount();
+  }
+}
+
+export default IOSDatePickerWheel;

package/components/ImageCarousel.js

@@ -0,0 +1,219 @@
+import Component from '../core/Component.js';
+
+/**
+ * Carousel / Slider d'images avec swipe horizontal et lazy load
+ * Compatible Material et Cupertino
+ * Tout le scroll est géré par le composant
+ */
+class ImageCarousel extends Component {
+  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.isDragging = false;
+    this.lastX = 0;
+    this.velocity = 0;
+
+    this.onSwipeEnd = options.onSwipeEnd || null;
+    this.onImageClick = options.onImageClick || null;
+
+    this.loadedImages = Array(this.images.length).fill(null);
+
+    this._setupEventHandlers();
+    this.animateScroll();
+  }
+
+  // --------------------------
+  // 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();
+      }
+    });
+
+    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();
+      }
+    });
+
+    canvas.addEventListener('mouseup', () => this._endDrag());
+    canvas.addEventListener('mouseleave', () => this._endDrag());
+  }
+
+  _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.onSwipeEnd) this.onSwipeEnd(this.currentIndex);
+    }
+  }
+
+  _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;
+  }
+
+  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;
+  }
+
+  _requestRedraw() {
+    if (this.framework.markComponentDirty) this.framework.markComponentDirty(this);
+  }
+
+  // --------------------------
+  // Animation / Inertie
+  // --------------------------
+  animateScroll() {
+    const animate = () => {
+      if (!this.isDragging) {
+        // inertia
+        if (Math.abs(this.velocity) > 0.1) {
+          this.scrollX += this.velocity;
+          this.velocity *= 0.95;
+
+          this._clampScroll();
+        } else {
+          // 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);
+
+      // lazy load
+      if (!this.loadedImages[i]) {
+        const img = new Image();
+        img.src = this.images[i];
+        img.onload = () => { this.loadedImages[i] = img; this._requestRedraw(); };
+      }
+
+      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);
+  }
+}
+
+export default ImageCarousel;