canvasframework 0.5.18 → 0.5.19

package/components/Accordion.js

@@ -0,0 +1,265 @@
+import Component from '../core/Component.js';
+
+/**
+ * Accordion (section extensible) avec styles Material & Cupertino + Ripple centré Android
+ * @class
+ * @extends Component
+ */
+class Accordion extends Component {
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.title = options.title || '';
+    this.content = options.content || '';
+    this.icon = options.icon || null;
+    this.expanded = options.expanded || false;
+    this.platform = framework.platform;
+    this.headerHeight = 56;
+    this.contentPadding = 16;
+    this.bgColor = options.bgColor || '#FFFFFF';
+    this.borderColor = options.borderColor || '#E0E0E0';
+    this.onToggle = options.onToggle;
+    this.animating = false;
+    this.animProgress = this.expanded ? 1 : 0;
+
+    this.calculateContentHeight();
+    this.height = this.headerHeight + (this.expanded ? this.contentHeight : 0);
+
+    // Pour les ripples Material
+    this.ripples = [];
+    this.rippleColor = 'rgba(1,0,0,0.2)';
+
+    // Clic
+    this.onClick = () => {
+      if (this.animating) return;
+
+      // Ripple centré Material
+      if (this.platform === 'material') {
+        this.addRipple();
+      }
+
+      this.toggle();
+    };
+  }
+
+  calculateContentHeight() {
+    const ctx = this.framework.ctx;
+    ctx.save();
+    ctx.font = '14px -apple-system, sans-serif';
+    const maxWidth = this.width - this.contentPadding * 2;
+    const lines = this.wrapText(ctx, this.content, maxWidth);
+    ctx.restore();
+    const lineHeight = 20;
+    this.contentHeight = lines.length * lineHeight + this.contentPadding * 2;
+  }
+
+  wrapText(ctx, text, maxWidth) {
+    const words = text.split(' ');
+    const lines = [];
+    let currentLine = words[0] || '';
+    for (let i = 1; i < words.length; i++) {
+      const word = words[i];
+      const width = ctx.measureText(currentLine + ' ' + word).width;
+      if (width < maxWidth) currentLine += ' ' + word;
+      else {
+        lines.push(currentLine);
+        currentLine = word;
+      }
+    }
+    lines.push(currentLine);
+    return lines;
+  }
+
+  toggle() {
+    if (this.animating) return;
+    this.expanded = !this.expanded;
+    if (this.onToggle) this.onToggle(this.expanded);
+    this.animate();
+  }
+
+  animate() {
+    if (this.animating) return;
+    this.animating = true;
+    const target = this.expanded ? 1 : 0;
+    const step = 0.1;
+
+    const doAnimate = () => {
+      if (Math.abs(this.animProgress - target) < 0.01) {
+        this.animProgress = target;
+        this.height = this.headerHeight + this.contentHeight * this.animProgress;
+        this.animating = false;
+        return;
+      }
+      this.animProgress += this.animProgress < target ? step : -step;
+      this.height = this.headerHeight + this.contentHeight * this.animProgress;
+      requestAnimationFrame(doAnimate);
+    };
+    doAnimate();
+  }
+
+  addRipple() {
+    const ripple = {
+      x: this.width / 2,
+      y: this.headerHeight / 2,
+      radius: 0,
+      maxRadius: Math.max(this.width, this.headerHeight) * 1.5,
+      opacity: 0.3
+    };
+    this.ripples.push(ripple);
+    this.animateRipples();
+  }
+
+  animateRipples() {
+    const animate = () => {
+      let active = false;
+      for (let ripple of this.ripples) {
+        if (ripple.radius < ripple.maxRadius) {
+          ripple.radius += ripple.maxRadius / 15;
+          ripple.opacity -= 0.03;
+          active = true;
+        }
+      }
+      this.ripples = this.ripples.filter(r => r.opacity > 0);
+      if (active) requestAnimationFrame(animate);
+    };
+    animate();
+  }
+
+  draw(ctx) {
+    ctx.save();
+
+    let headerBg = '#FFFFFF';
+    let headerTextColor = '#000000';
+    let borderColor = this.borderColor;
+    let shadowBlur = 0;
+    let chevronWidth = 2;
+
+    if (this.platform === 'material') {
+      headerBg = '#F5F5F5';
+      headerTextColor = '#212121';
+      shadowBlur = 4;
+      chevronWidth = 3;
+    } else if (this.platform === 'cupertino') {
+      headerBg = '#FFFFFF';
+      headerTextColor = '#000000';
+      borderColor = '#C7C7CC';
+      chevronWidth = 1.5;
+    }
+
+    // Ombre Material
+    if (shadowBlur > 0) {
+      ctx.shadowColor = 'rgba(0,0,0,0.2)';
+      ctx.shadowBlur = shadowBlur;
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 2;
+    }
+
+    // Background
+    ctx.fillStyle = this.bgColor;
+    ctx.fillRect(this.x, this.y, this.width, this.height);
+
+    // Bordure Cupertino
+    if (this.platform === 'cupertino') {
+      ctx.strokeStyle = borderColor;
+      ctx.lineWidth = 1;
+      ctx.strokeRect(this.x, this.y, this.width, this.height);
+    }
+
+    // Header
+    ctx.fillStyle = headerBg;
+    ctx.fillRect(this.x, this.y, this.width, this.headerHeight);
+
+    // Ripple centré Material
+    if (this.platform === 'material' && this.ripples.length) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(this.x, this.y, this.width, this.headerHeight);
+      ctx.clip();
+      for (let ripple of this.ripples) {
+        ctx.globalAlpha = ripple.opacity;
+        ctx.fillStyle = this.rippleColor;
+        ctx.beginPath();
+        ctx.arc(this.x + ripple.x, this.y + ripple.y, ripple.radius, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.restore();
+      ctx.globalAlpha = 1;
+    }
+
+    // Icône
+    if (this.icon) {
+      ctx.font = '20px sans-serif';
+      ctx.fillStyle = '#666666';
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this.icon, this.x + 16, this.y + this.headerHeight / 2);
+    }
+
+    // Titre
+    ctx.fillStyle = headerTextColor;
+    ctx.font =
+      this.platform === 'material'
+        ? 'bold 16px Roboto, sans-serif'
+        : 'bold 16px -apple-system, sans-serif';
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    const titleX = this.icon ? this.x + 56 : this.x + 16;
+    ctx.fillText(this.title, titleX, this.y + this.headerHeight / 2);
+
+    // Chevron
+    const chevronX = this.x + this.width - 30;
+    const chevronY = this.y + this.headerHeight / 2;
+    const chevronRotation = this.animProgress * Math.PI;
+    ctx.save();
+    ctx.translate(chevronX, chevronY);
+    ctx.rotate(chevronRotation);
+    ctx.strokeStyle = '#666666';
+    ctx.lineWidth = chevronWidth;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    ctx.moveTo(-6, -3);
+    ctx.lineTo(0, 3);
+    ctx.lineTo(6, -3);
+    ctx.stroke();
+    ctx.restore();
+
+    // Contenu
+    if (this.animProgress > 0) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(this.x, this.y + this.headerHeight, this.width, this.contentHeight * this.animProgress);
+      ctx.clip();
+
+      ctx.strokeStyle = borderColor;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(this.x, this.y + this.headerHeight);
+      ctx.lineTo(this.x + this.width, this.y + this.headerHeight);
+      ctx.stroke();
+
+      ctx.fillStyle = '#666666';
+      ctx.font = '14px -apple-system, sans-serif';
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'top';
+      const contentX = this.x + this.contentPadding;
+      const contentY = this.y + this.headerHeight + this.contentPadding;
+      const maxWidth = this.width - this.contentPadding * 2;
+      const lines = this.wrapText(ctx, this.content, maxWidth);
+      const lineHeight = 20;
+      lines.forEach((line, index) => {
+        ctx.fillText(line, contentX, contentY + index * lineHeight);
+      });
+
+      ctx.restore();
+    }
+
+    ctx.restore();
+  }
+
+  isPointInside(x, y) {
+    return x >= this.x && x <= this.x + this.width &&
+           y >= this.y && y <= this.y + this.headerHeight;
+  }
+}
+
+export default Accordion;

package/components/AndroidDatePickerDialog.js

@@ -0,0 +1,406 @@
+import Component from '../core/Component.js';
+/**
+ * Dialog de sélection de date Android
+ * @class
+ * @extends Component
+ * @property {Date} selectedDate - Date sélectionnée
+ * @property {Function} onChange - Callback au changement
+ * @property {number} currentMonth - Mois courant
+ * @property {number} currentYear - Année courante
+ * @property {number|null} hoveredDay - Jour survolé
+ * @property {number} dialogWidth - Largeur du dialog
+ * @property {number} dialogHeight - Hauteur du dialog
+ * @property {number} headerHeight - Hauteur de l'en-tête
+ * @property {number} daySize - Taille d'un jour
+ * @property {number} opacity - Opacité
+ * @property {boolean} isVisible - Visibilité
+ */
+class AndroidDatePickerDialog extends Component {
+  /**
+   * Crée une instance de AndroidDatePickerDialog
+   * @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, {
+      x: 0,
+      y: 0,
+      width: framework.width,
+      height: framework.height,
+      visible: false
+    });
+  
+    this.selectedDate = options.selectedDate || new Date();
+    this.onChange = options.onChange;
+    this.currentMonth = this.selectedDate.getMonth();
+    this.currentYear = this.selectedDate.getFullYear();
+    this.hoveredDay = null;
+  
+    // Options de personnalisation
+    this.headerBgColor = options.headerBgColor || '#6200EE';
+    this.selectedColor = options.selectedColor || '#6200EE';
+    this.buttonColor = options.buttonColor || '#6200EE';
+    this.todayColor = options.todayColor || '#6200EE';
+    this.textColor = options.textColor || '#000000';
+    this.dayNamesColor = options.dayNamesColor || '#666666';
+  
+    this.dialogWidth = Math.min(320, framework.width - 40);
+    this.dialogHeight = 420;
+    this.headerHeight = 100;
+    this.daySize = (this.dialogWidth - 40) / 7;
+  
+    this.opacity = 0;
+    this.isVisible = false;
+  
+    this.onPress = this.handlePress.bind(this);
+  }
+  
+  /**
+   * Affiche le dialog
+   */
+  show() {
+    this.isVisible = true;
+    this.visible = true;
+    const fadeIn = () => {
+      this.opacity += 0.1;
+      if (this.opacity < 1) requestAnimationFrame(fadeIn);
+    };
+    fadeIn();
+  }
+  
+  /**
+   * Cache le dialog
+   */
+  hide() {
+    const fadeOut = () => {
+      this.opacity -= 0.1;
+      if (this.opacity > 0) {
+        requestAnimationFrame(fadeOut);
+      } else {
+        this.isVisible = false;
+        this.visible = false;
+        this.framework.remove(this);
+      }
+    };
+    fadeOut();
+  }
+  
+  /**
+   * Obtient le nombre de jours dans un mois
+   * @param {number} month - Mois (0-11)
+   * @param {number} year - Année
+   * @returns {number} Nombre de jours
+   * @private
+   */
+  getDaysInMonth(month, year) {
+    return new Date(year, month + 1, 0).getDate();
+  }
+  
+  /**
+   * Obtient le premier jour de la semaine d'un mois
+   * @param {number} month - Mois (0-11)
+   * @param {number} year - Année
+   * @returns {number} Jour de la semaine (0-6)
+   * @private
+   */
+  getFirstDayOfMonth(month, year) {
+    return new Date(year, month, 1).getDay();
+  }
+  
+  /**
+   * Passe au mois précédent
+   * @private
+   */
+  previousMonth() {
+    this.currentMonth--;
+    if (this.currentMonth < 0) {
+      this.currentMonth = 11;
+      this.currentYear--;
+    }
+  }
+  
+  /**
+   * Passe au mois suivant
+   * @private
+   */
+  nextMonth() {
+    this.currentMonth++;
+    if (this.currentMonth > 11) {
+      this.currentMonth = 0;
+      this.currentYear++;
+    }
+  }
+  
+  /**
+   * Sélectionne un jour
+   * @param {number} day - Jour à sélectionner
+   * @private
+   */
+  selectDate(day) {
+    this.selectedDate = new Date(this.currentYear, this.currentMonth, day);
+  }
+  
+  /**
+   * Dessine le dialog
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    if (this.opacity <= 0 || !this.isVisible) return;
+    
+    ctx.save();
+    ctx.globalAlpha = this.opacity;
+    
+    // Overlay
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.fillRect(0, 0, this.framework.width, this.framework.height);
+    
+    const dialogX = (this.framework.width - this.dialogWidth) / 2;
+    const dialogY = (this.framework.height - this.dialogHeight) / 2;
+    
+    // Dialog background
+    ctx.fillStyle = '#FFFFFF';
+    ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
+    ctx.shadowBlur = 20;
+    ctx.beginPath();
+    this.roundRect(ctx, dialogX, dialogY, this.dialogWidth, this.dialogHeight, 4);
+    ctx.fill();
+    
+    ctx.shadowColor = 'transparent';
+    
+    // Header coloré
+    ctx.fillStyle = this.headerBgColor;
+    ctx.beginPath();
+    this.roundRect(ctx, dialogX, dialogY, this.dialogWidth, this.headerHeight, 4);
+    ctx.rect(dialogX, dialogY + this.headerHeight - 4, this.dialogWidth, 4);
+    ctx.fill();
+    
+    // Année (petit)
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
+    ctx.font = '16px Roboto, sans-serif';
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+    ctx.fillText(this.currentYear.toString(), dialogX + 20, dialogY + 20);
+    
+    // Date sélectionnée (grand)
+    const monthNames = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin',
+                       'Juil', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'];
+    const dayNames = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];
+    const selectedDay = dayNames[this.selectedDate.getDay()];
+    const selectedMonth = monthNames[this.selectedDate.getMonth()];
+    const selectedDayNum = this.selectedDate.getDate();
+    
+    ctx.fillStyle = '#ffffff';
+    ctx.font = 'bold 32px Roboto, sans-serif';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(`${selectedDay}, ${selectedMonth} ${selectedDayNum}`, 
+                 dialogX + 20, dialogY + this.headerHeight / 2 + 15);
+    
+    // Navigation mois
+    const navY = dialogY + this.headerHeight + 20;
+    
+    // Bouton mois précédent
+    ctx.fillStyle = '#666666';
+    ctx.font = '20px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('◀', dialogX + 30, navY);
+    
+    // Mois et année actuel
+    const monthNamesLong = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
+                           'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
+    ctx.font = 'bold 16px Roboto, sans-serif';
+    ctx.fillText(`${monthNamesLong[this.currentMonth]} ${this.currentYear}`, 
+                 dialogX + this.dialogWidth / 2, navY);
+    
+    // Bouton mois suivant
+    ctx.fillText('▶', dialogX + this.dialogWidth - 30, navY);
+    
+    // Jours de la semaine
+    const dayNamesShort = ['D', 'L', 'M', 'M', 'J', 'V', 'S'];
+    ctx.fillStyle = '#666666';
+    ctx.font = 'bold 12px Roboto, sans-serif';
+    
+    for (let i = 0; i < 7; i++) {
+      const dayX = dialogX + 20 + i * this.daySize + this.daySize / 2;
+      const dayY = navY + 40;
+      ctx.fillText(dayNamesShort[i], dayX, dayY);
+    }
+    
+    // Grille de jours
+    const daysInMonth = this.getDaysInMonth(this.currentMonth, this.currentYear);
+    const firstDay = this.getFirstDayOfMonth(this.currentMonth, this.currentYear);
+    
+    let dayNumber = 1;
+    const startY = navY + 60;
+    
+    for (let week = 0; week < 6; week++) {
+      for (let day = 0; day < 7; day++) {
+        const index = week * 7 + day;
+        
+        if (index >= firstDay && dayNumber <= daysInMonth) {
+          const dayX = dialogX + 20 + day * this.daySize;
+          const dayY = startY + week * this.daySize;
+          
+          const isSelected = this.selectedDate.getDate() === dayNumber &&
+                           this.selectedDate.getMonth() === this.currentMonth &&
+                           this.selectedDate.getFullYear() === this.currentYear;
+          
+          const today = new Date();
+          const isToday = dayNumber === today.getDate() &&
+                         this.currentMonth === today.getMonth() &&
+                         this.currentYear === today.getFullYear();
+          
+          // Cercle sélectionné
+          if (isSelected) {
+            ctx.fillStyle = '#6200EE';
+            ctx.beginPath();
+            ctx.arc(dayX + this.daySize / 2, dayY + this.daySize / 2, 
+                   this.daySize / 2 - 2, 0, Math.PI * 2);
+            ctx.fill();
+          }
+          
+          // Cercle aujourd'hui
+          if (isToday && !isSelected) {
+            ctx.strokeStyle = '#6200EE';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.arc(dayX + this.daySize / 2, dayY + this.daySize / 2, 
+                   this.daySize / 2 - 2, 0, Math.PI * 2);
+            ctx.stroke();
+          }
+          
+          // Numéro
+          ctx.fillStyle = isSelected ? '#FFFFFF' : '#212121';
+          ctx.font = '14px Roboto, sans-serif';
+          ctx.textAlign = 'center';
+          ctx.textBaseline = 'middle';
+          ctx.fillText(dayNumber.toString(), dayX + this.daySize / 2, dayY + this.daySize / 2);
+          
+          dayNumber++;
+        }
+      }
+      
+      if (dayNumber > daysInMonth) break;
+    }
+    
+    // Boutons d'action
+    const btnY = dialogY + this.dialogHeight - 30;
+    
+    // Annuler
+    ctx.fillStyle = '#6200EE';
+    ctx.font = 'bold 14px Roboto, sans-serif';
+    ctx.textAlign = 'right';
+    ctx.fillText('ANNULER', dialogX + this.dialogWidth - 120, btnY);
+    
+    // OK
+    ctx.fillText('OK', dialogX + this.dialogWidth - 20, btnY);
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Gère la pression (clic)
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @private
+   */
+  handlePress(x, y) {
+    const dialogX = (this.framework.width - this.dialogWidth) / 2;
+    const dialogY = (this.framework.height - this.dialogHeight) / 2;
+    
+    // Boutons navigation
+    const navY = dialogY + this.headerHeight + 20;
+    
+    if (y >= navY - 15 && y <= navY + 15) {
+      if (x >= dialogX + 10 && x <= dialogX + 50) {
+        this.previousMonth();
+        return;
+      }
+      if (x >= dialogX + this.dialogWidth - 50 && x <= dialogX + this.dialogWidth - 10) {
+        this.nextMonth();
+        return;
+      }
+    }
+    
+    // Sélection d'un jour
+    const startY = navY + 60;
+    const daysInMonth = this.getDaysInMonth(this.currentMonth, this.currentYear);
+    const firstDay = this.getFirstDayOfMonth(this.currentMonth, this.currentYear);
+    
+    let dayNumber = 1;
+    for (let week = 0; week < 6; week++) {
+      for (let day = 0; day < 7; day++) {
+        const index = week * 7 + day;
+        if (index >= firstDay && dayNumber <= daysInMonth) {
+          const dayX = dialogX + 20 + day * this.daySize;
+          const dayY = startY + week * this.daySize;
+          
+          if (x >= dayX && x <= dayX + this.daySize && 
+              y >= dayY && y <= dayY + this.daySize) {
+            this.selectDate(dayNumber);
+            return;
+          }
+          dayNumber++;
+        }
+      }
+      if (dayNumber > daysInMonth) break;
+    }
+    
+    // Boutons d'action
+    const btnY = dialogY + this.dialogHeight - 30;
+    if (y >= btnY - 20 && y <= btnY + 20) {
+      // Annuler
+      if (x >= dialogX + this.dialogWidth - 180 && x <= dialogX + this.dialogWidth - 80) {
+        this.hide();
+        return;
+      }
+      // OK
+      if (x >= dialogX + this.dialogWidth - 70 && x <= dialogX + this.dialogWidth) {
+        if (this.onChange) this.onChange(this.selectedDate);
+        this.hide();
+        return;
+      }
+    }
+    
+    // Clic sur overlay pour fermer
+    if (x < dialogX || x > dialogX + this.dialogWidth || 
+        y < dialogY || y > dialogY + this.dialogHeight) {
+      this.hide();
+    }
+  }
+  
+  /**
+   * 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} True si visible
+   */
+  isPointInside() {
+    return this.isVisible;
+  }
+}
+
+export default AndroidDatePickerDialog;