canvasframework 0.3.6

package/components/Stepper.js

@@ -0,0 +1,281 @@
+import Component from '../core/Component.js';
+/**
+ * Stepper (incrémenteur/décrémenteur)
+ * @class
+ * @extends Component
+ * @property {number} value - Valeur
+ * @property {number} min - Minimum
+ * @property {number} max - Maximum
+ * @property {number} step - Pas d'incrémentation
+ * @property {string} platform - Plateforme
+ * @property {Function} onChange - Callback au changement
+ * @property {number} buttonWidth - Largeur des boutons
+ * @property {boolean} decrementPressed - Bouton décrémenter pressé
+ * @property {boolean} incrementPressed - Bouton incrémenter pressé
+ */
+class Stepper extends Component {
+  /**
+   * Crée une instance de Stepper
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {number} [options.value=0] - Valeur initiale
+   * @param {number} [options.min=0] - Minimum
+   * @param {number} [options.max=100] - Maximum
+   * @param {number} [options.step=1] - Pas
+   * @param {Function} [options.onChange] - Callback au changement
+   * @param {number} [options.width=120] - Largeur
+   * @param {number} [options.height=40] - Hauteur
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.value = options.value || 0;
+    this.min = options.min !== undefined ? options.min : 0;
+    this.max = options.max !== undefined ? options.max : 100;
+    this.step = options.step || 1;
+    this.platform = framework.platform;
+    this.onChange = options.onChange;
+    this.width = options.width || 120;
+    this.height = options.height || 40;
+    this.buttonWidth = this.height;
+    
+    this.decrementPressed = false;
+    this.incrementPressed = false;
+    
+    this.onPress = this.handlePress.bind(this);
+  }
+  
+  /**
+   * Incrémente la valeur
+   */
+  increment() {
+    if (this.value + this.step <= this.max) {
+      this.value += this.step;
+      if (this.onChange) this.onChange(this.value);
+    }
+  }
+  
+  /**
+   * Décrémente la valeur
+   */
+  decrement() {
+    if (this.value - this.step >= this.min) {
+      this.value -= this.step;
+      if (this.onChange) this.onChange(this.value);
+    }
+  }
+  
+  /**
+   * Définit la valeur
+   * @param {number} value - Nouvelle valeur
+   */
+  setValue(value) {
+    this.value = Math.max(this.min, Math.min(this.max, value));
+    if (this.onChange) this.onChange(this.value);
+  }
+  
+  /**
+   * Dessine le stepper
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    if (this.platform === 'material') {
+      // Material Design Stepper
+      
+      // Bouton décrement (-)
+      const canDecrement = this.value > this.min;
+      ctx.fillStyle = this.decrementPressed ? '#E0E0E0' : '#F5F5F5';
+      ctx.strokeStyle = canDecrement ? '#6200EE' : '#CCCCCC';
+      ctx.lineWidth = 2;
+      
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.buttonWidth, this.height, 4);
+      ctx.fill();
+      ctx.stroke();
+      
+      // Icône -
+      ctx.strokeStyle = canDecrement ? '#6200EE' : '#CCCCCC';
+      ctx.lineWidth = 2;
+      ctx.lineCap = 'round';
+      ctx.beginPath();
+      ctx.moveTo(this.x + this.buttonWidth / 2 - 8, this.y + this.height / 2);
+      ctx.lineTo(this.x + this.buttonWidth / 2 + 8, this.y + this.height / 2);
+      ctx.stroke();
+      
+      // Zone centrale (valeur)
+      ctx.fillStyle = '#FFFFFF';
+      ctx.fillRect(this.x + this.buttonWidth, this.y, 
+                   this.width - (this.buttonWidth * 2), this.height);
+      
+      ctx.strokeStyle = '#E0E0E0';
+      ctx.lineWidth = 1;
+      ctx.strokeRect(this.x + this.buttonWidth, this.y, 
+                     this.width - (this.buttonWidth * 2), this.height);
+      
+      // Valeur
+      ctx.fillStyle = '#000000';
+      ctx.font = 'bold 16px Roboto, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this.value.toString(), this.x + this.width / 2, this.y + this.height / 2);
+      
+      // Bouton increment (+)
+      const canIncrement = this.value < this.max;
+      ctx.fillStyle = this.incrementPressed ? '#E0E0E0' : '#F5F5F5';
+      ctx.strokeStyle = canIncrement ? '#6200EE' : '#CCCCCC';
+      ctx.lineWidth = 2;
+      
+      ctx.beginPath();
+      this.roundRect(ctx, this.x + this.width - this.buttonWidth, this.y, 
+                     this.buttonWidth, this.height, 4);
+      ctx.fill();
+      ctx.stroke();
+      
+      // Icône +
+      ctx.strokeStyle = canIncrement ? '#6200EE' : '#CCCCCC';
+      ctx.lineWidth = 2;
+      ctx.lineCap = 'round';
+      const plusX = this.x + this.width - this.buttonWidth / 2;
+      const plusY = this.y + this.height / 2;
+      
+      ctx.beginPath();
+      ctx.moveTo(plusX - 8, plusY);
+      ctx.lineTo(plusX + 8, plusY);
+      ctx.stroke();
+      
+      ctx.beginPath();
+      ctx.moveTo(plusX, plusY - 8);
+      ctx.lineTo(plusX, plusY + 8);
+      ctx.stroke();
+      
+    } else {
+      // Cupertino (iOS) Stepper
+      
+      // Container
+      ctx.strokeStyle = '#C7C7CC';
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      this.roundRect(ctx, this.x, this.y, this.width, this.height, this.height / 2);
+      ctx.stroke();
+      
+      // Divider central
+      ctx.beginPath();
+      ctx.moveTo(this.x + this.width / 2, this.y);
+      ctx.lineTo(this.x + this.width / 2, this.y + this.height);
+      ctx.stroke();
+      
+      // Bouton décrement (-)
+      const canDecrement = this.value > this.min;
+      if (this.decrementPressed) {
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+        ctx.beginPath();
+        ctx.arc(this.x + this.width / 4, this.y + this.height / 2, 
+                this.height / 2 - 2, Math.PI / 2, Math.PI * 1.5);
+        ctx.lineTo(this.x + this.width / 2, this.y);
+        ctx.lineTo(this.x + this.width / 2, this.y + this.height);
+        ctx.closePath();
+        ctx.fill();
+      }
+      
+      ctx.strokeStyle = canDecrement ? '#007AFF' : '#C7C7CC';
+      ctx.lineWidth = 2;
+      ctx.lineCap = 'round';
+      ctx.beginPath();
+      ctx.moveTo(this.x + this.width / 4 - 10, this.y + this.height / 2);
+      ctx.lineTo(this.x + this.width / 4 + 10, this.y + this.height / 2);
+      ctx.stroke();
+      
+      // Bouton increment (+)
+      const canIncrement = this.value < this.max;
+      if (this.incrementPressed) {
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+        ctx.beginPath();
+        ctx.arc(this.x + (this.width * 3 / 4), this.y + this.height / 2, 
+                this.height / 2 - 2, Math.PI * 1.5, Math.PI / 2);
+        ctx.lineTo(this.x + this.width / 2, this.y + this.height);
+        ctx.lineTo(this.x + this.width / 2, this.y);
+        ctx.closePath();
+        ctx.fill();
+      }
+      
+      ctx.strokeStyle = canIncrement ? '#007AFF' : '#C7C7CC';
+      ctx.lineWidth = 2;
+      ctx.lineCap = 'round';
+      const plusX = this.x + (this.width * 3 / 4);
+      const plusY = this.y + this.height / 2;
+      
+      ctx.beginPath();
+      ctx.moveTo(plusX - 10, plusY);
+      ctx.lineTo(plusX + 10, plusY);
+      ctx.stroke();
+      
+      ctx.beginPath();
+      ctx.moveTo(plusX, plusY - 10);
+      ctx.lineTo(plusX, plusY + 10);
+      ctx.stroke();
+    }
+    
+    ctx.restore();
+  }
+  
+  /**
+   * Gère la pression (clic)
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @private
+   */
+  handlePress(x, y) {
+    const adjustedY = y - this.framework.scrollOffset;
+    
+    // Bouton décrement (gauche)
+    if (x >= this.x && x <= this.x + this.buttonWidth) {
+      this.decrementPressed = true;
+      this.decrement();
+      setTimeout(() => { this.decrementPressed = false; }, 150);
+    }
+    // Bouton increment (droite)
+    else if (x >= this.x + this.width - this.buttonWidth && x <= this.x + this.width) {
+      this.incrementPressed = true;
+      this.increment();
+      setTimeout(() => { this.incrementPressed = false; }, 150);
+    }
+  }
+  
+  /**
+   * 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
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {boolean} True si le point est dans le stepper
+   */
+  isPointInside(x, y) {
+    return x >= this.x && x <= this.x + this.width && 
+           y >= this.y && y <= this.y + this.height;
+  }
+}
+
+export default Stepper;

package/components/SwipeableListItem.js

@@ -0,0 +1,179 @@
+import Component from '../core/Component.js';
+
+/**
+ * Élément de liste avec support swipe et actions
+ * @class
+ * @extends Component
+ * @property {string} title - Titre
+ * @property {string} subtitle - Sous-titre
+ * @property {Array<{icon?: string, text: string, color: string, onClick: Function}>} leftActions - Actions swipe gauche
+ * @property {Array<{icon?: string, text: string, color: string, onClick: Function}>} rightActions - Actions swipe droite
+ * @property {string} bgColor - Couleur de fond
+ * @property {string} platform - Plateforme ('material' ou 'cupertino')
+ * @property {number} height - Hauteur de l'item
+ */
+class SwipeableListItem extends Component {
+  constructor(framework, options = {}) {
+    super(framework, options);
+
+    this.title = options.title || '';
+    this.subtitle = options.subtitle || '';
+    this.height = options.height || (this.subtitle ? 72 : 56);
+    this.width = options.width || framework.width;
+    this.bgColor = options.bgColor || '#FFFFFF';
+    this.platform = framework.platform;
+
+    this.leftActions = options.leftActions || [];
+    this.rightActions = options.rightActions || [];
+
+    this.dragOffset = 0;
+    this.dragging = false;
+    this.startX = 0;
+
+    this.ripples = [];
+    this.onPress = this.handlePress.bind(this);
+  }
+
+  /**
+   * Début du swipe
+   * @param {number} x
+   * @param {number} y
+   */
+  onDragStart(x, y) {
+    if (this.isPointInside(x, y)) {
+      this.dragging = true;
+      this.startX = x;
+    }
+  }
+
+  /**
+   * Déplacement pendant swipe
+   * @param {number} x
+   */
+  onDragMove(x) {
+    if (this.dragging) {
+      this.dragOffset = x - this.startX;
+      const maxOffset = Math.max(this.leftActions.length, this.rightActions.length) * 80;
+      this.dragOffset = Math.min(Math.max(this.dragOffset, -maxOffset), maxOffset);
+    }
+  }
+
+  /**
+   * Fin du swipe
+   */
+  onDragEnd() {
+    if (this.dragging) {
+      if (this.dragOffset > 80 && this.leftActions[0]) {
+        this.leftActions[0].onClick?.();
+      } else if (this.dragOffset < -80 && this.rightActions[0]) {
+        this.rightActions[0].onClick?.();
+      }
+      this.dragOffset = 0;
+      this.dragging = false;
+    }
+  }
+
+  /**
+   * Gestion du press pour ripple Material
+   * @param {number} x
+   * @param {number} y
+   */
+  handlePress(x, y) {
+    if (this.platform === 'material') {
+      const adjustedY = y - this.framework.scrollOffset;
+      this.ripples.push({
+        x: x - this.x,
+        y: adjustedY - this.y,
+        radius: 0,
+        maxRadius: Math.max(this.width, this.height) * 1.5,
+        opacity: 1
+      });
+      this.animateRipple();
+    }
+  }
+
+  animateRipple() {
+    const animate = () => {
+      let hasActive = false;
+      for (let ripple of this.ripples) {
+        if (ripple.radius < ripple.maxRadius) {
+          ripple.radius += ripple.maxRadius / 15;
+          hasActive = true;
+        }
+        if (ripple.radius >= ripple.maxRadius * 0.5) ripple.opacity -= 0.05;
+      }
+      this.ripples = this.ripples.filter(r => r.opacity > 0);
+      if (hasActive) requestAnimationFrame(animate);
+    };
+    animate();
+  }
+
+  /**
+   * Dessine l'item
+   * @param {CanvasRenderingContext2D} ctx
+   */
+  draw(ctx) {
+    ctx.save();
+
+    // Actions swipe
+    if (this.dragOffset > 0 && this.leftActions[0]) {
+      ctx.fillStyle = this.leftActions[0].color || '#388E3C';
+      ctx.fillRect(this.x, this.y, this.dragOffset, this.height);
+      ctx.fillStyle = '#FFF';
+      ctx.font = '14px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this.leftActions[0].text, this.x + this.dragOffset / 2, this.y + this.height / 2);
+    } else if (this.dragOffset < 0 && this.rightActions[0]) {
+      const offset = -this.dragOffset;
+      ctx.fillStyle = this.rightActions[0].color || '#D32F2F';
+      ctx.fillRect(this.x + this.width - offset, this.y, offset, this.height);
+      ctx.fillStyle = '#FFF';
+      ctx.textAlign = 'center';
+      ctx.fillText(this.rightActions[0].text, this.x + this.width - offset / 2, this.y + this.height / 2);
+    }
+
+    ctx.translate(this.dragOffset, 0);
+
+    // Background
+    ctx.fillStyle = this.bgColor;
+    ctx.fillRect(this.x, this.y, this.width, this.height);
+
+    // Ripple
+    if (this.platform === 'material') {
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(this.x, this.y, this.width, this.height);
+      ctx.clip();
+      for (let ripple of this.ripples) {
+        ctx.globalAlpha = ripple.opacity;
+        ctx.fillStyle = 'rgba(0,0,0,0.1)';
+        ctx.beginPath();
+        ctx.arc(this.x + ripple.x, this.y + ripple.y, ripple.radius, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.restore();
+    }
+
+    // Texte
+    ctx.fillStyle = '#000';
+    ctx.font = '16px sans-serif';
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(this.title, this.x + 16, this.y + this.height / 2);
+    if (this.subtitle) {
+      ctx.fillStyle = '#757575';
+      ctx.font = '14px sans-serif';
+      ctx.fillText(this.subtitle, this.x + 16, this.y + this.height / 2 + 12);
+    }
+
+    ctx.restore();
+  }
+
+  isPointInside(x, y) {
+    return x >= this.x && x <= this.x + this.width &&
+           y >= this.y && y <= this.y + this.height;
+  }
+}
+
+export default SwipeableListItem;

package/components/Switch.js

@@ -0,0 +1,147 @@
+import Component from '../core/Component.js';
+/**
+ * Interrupteur (toggle)
+ * @class
+ * @extends Component
+ * @property {boolean} checked - État activé
+ * @property {string} platform - Plateforme
+ * @property {number} animProgress - Progression de l'animation
+ * @property {boolean} isAnimating - En cours d'animation
+ * @property {Function} onChange - Callback au changement
+ */
+class Switch extends Component {
+  /**
+   * Crée une instance de Switch
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {boolean} [options.checked=false] - État initial
+   * @param {Function} [options.onChange] - Callback au changement
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    this.checked = options.checked || false;
+    this.platform = framework.platform;
+    this.width = 51;
+    this.height = 31;
+    this.onChange = options.onChange;
+    this.animProgress = this.checked ? 1 : 0;
+    this.isAnimating = false;
+    
+    // S'assurer que le Switch est cliquable
+    this.onClick = this.handleClick.bind(this);
+  }
+
+  /**
+   * Gère le clic sur le switch
+   * @private
+   */
+  handleClick() {
+    console.log('Switch clicked!');
+    this.checked = !this.checked;
+    if (this.onChange) this.onChange(this.checked);
+    this.animate();
+  }
+
+  /**
+   * Anime le toggle
+   * @private
+   */
+  animate() {
+    if (this.isAnimating) return;
+    
+    this.isAnimating = true;
+    const target = this.checked ? 1 : 0;
+    const step = 0.1;
+    const interval = setInterval(() => {
+      if (Math.abs(this.animProgress - target) < step) {
+        this.animProgress = target;
+        clearInterval(interval);
+        this.isAnimating = false;
+      } else {
+        this.animProgress += this.animProgress < target ? step : -step;
+      }
+    }, 16);
+  }
+
+  /**
+   * Dessine le switch
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    // Déplacer le contexte avec le scroll
+    const adjustedY = this.y;
+    
+    if (this.platform === 'material') {
+      // Material Design Switch
+      const trackColor = this.checked ? 'rgba(98, 0, 238, 0.5)' : 'rgba(0, 0, 0, 0.38)';
+      const thumbColor = this.checked ? '#6200EE' : '#FAFAFA';
+
+      // Track
+      ctx.fillStyle = trackColor;
+      ctx.beginPath();
+      ctx.arc(this.x + 15.5, adjustedY + 15.5, 7, Math.PI / 2, Math.PI * 1.5);
+      ctx.arc(this.x + 35.5, adjustedY + 15.5, 7, Math.PI * 1.5, Math.PI / 2);
+      ctx.closePath();
+      ctx.fill();
+
+      // Thumb
+      const thumbX = this.x + 15.5 + (this.animProgress * 20);
+      ctx.fillStyle = thumbColor;
+      ctx.beginPath();
+      ctx.arc(thumbX, adjustedY + 15.5, 10, 0, Math.PI * 2);
+      ctx.fill();
+
+      // Shadow for unchecked state
+      if (!this.checked) {
+        ctx.strokeStyle = 'rgba(0, 0, 0, 0.12)';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+      }
+    } else {
+      // Cupertino (iOS) Switch
+      const bgColor = this.checked ? '#34C759' : '#E9E9EA';
+
+      // Track
+      ctx.fillStyle = bgColor;
+      ctx.beginPath();
+      ctx.arc(this.x + 15.5, adjustedY + 15.5, 15.5, Math.PI / 2, Math.PI * 1.5);
+      ctx.arc(this.x + 35.5, adjustedY + 15.5, 15.5, Math.PI * 1.5, Math.PI / 2);
+      ctx.closePath();
+      ctx.fill();
+
+      // Thumb with shadow
+      const thumbX = this.x + 15.5 + (this.animProgress * 20);
+      ctx.fillStyle = '#FFFFFF';
+      ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
+      ctx.shadowBlur = 4;
+      ctx.shadowOffsetY = 2;
+      ctx.beginPath();
+      ctx.arc(thumbX, adjustedY + 15.5, 13.5, 0, Math.PI * 2);
+      ctx.fill();
+      
+      // Reset shadow
+      ctx.shadowColor = 'transparent';
+      ctx.shadowBlur = 0;
+      ctx.shadowOffsetY = 0;
+    }
+    
+    ctx.restore();
+  }
+
+  /**
+   * Vérifie si un point est dans les limites
+   * @param {number} x - Coordonnée X
+   * @param {number} y - Coordonnée Y
+   * @returns {boolean} True si le point est dans le switch
+   */
+  isPointInside(x, y) {
+    return x >= this.x && 
+           x <= this.x + this.width && 
+           y >= this.y && 
+           y <= this.y + this.height;
+  }
+}
+
+export default Switch;