canvasframework 0.5.16 → 0.5.18

package/components/Stepper.js

@@ -1,281 +0,0 @@
-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

@@ -1,327 +0,0 @@
-import Component from '../core/Component.js';
-
-/**
- * Élément de liste avec support swipe et actions
- * @class
- * @extends Component
- */
-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.startY = 0;
-    this.hasMoved = false;
-
-    this.ripples = [];
-    this.animationFrame = null;
-    this.lastAnimationTime = 0;
-
-    // 🔹 Binding des handlers
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-    this.handleMouseUp = this.handleMouseUp.bind(this);
-    this.handleTouchStart = this.handleTouchStart.bind(this);
-    this.handleTouchMove = this.handleTouchMove.bind(this);
-    this.handleTouchEnd = this.handleTouchEnd.bind(this);
-
-    console.log('🏗️ SwipeableListItem créé', {
-      hasCanvas: !!this.framework.canvas,
-      x: this.x,
-      y: this.y,
-      width: this.width,
-      height: this.height
-    });
-
-    // 🔹 Enregistrer les événements
-    this.setupEventListeners();
-  }
-
-  /**
-   * Configure les écouteurs d'événements
-   * @private
-   */
-  setupEventListeners() {
-    if (!this.framework.canvas) {
-      console.error('❌ Pas de canvas trouvé dans le framework');
-      return;
-    }
-
-    const canvas = this.framework.canvas;
-
-    // Événements souris
-    canvas.addEventListener('mousedown', this.handleMouseDown);
-    canvas.addEventListener('mousemove', this.handleMouseMove);
-    canvas.addEventListener('mouseup', this.handleMouseUp);
-
-    // Événements tactiles
-    canvas.addEventListener('touchstart', this.handleTouchStart, { passive: false });
-    canvas.addEventListener('touchmove', this.handleTouchMove, { passive: false });
-    canvas.addEventListener('touchend', this.handleTouchEnd);
-
-    console.log('✅ Événements configurés');
-  }
-
-  /**
-   * Nettoyer les événements lors de la destruction
-   */
-  destroy() {
-    if (this.framework.canvas) {
-      const canvas = this.framework.canvas;
-      canvas.removeEventListener('mousedown', this.handleMouseDown);
-      canvas.removeEventListener('mousemove', this.handleMouseMove);
-      canvas.removeEventListener('mouseup', this.handleMouseUp);
-      canvas.removeEventListener('touchstart', this.handleTouchStart);
-      canvas.removeEventListener('touchmove', this.handleTouchMove);
-      canvas.removeEventListener('touchend', this.handleTouchEnd);
-    }
-
-    if (this.animationFrame) {
-      cancelAnimationFrame(this.animationFrame);
-      this.animationFrame = null;
-    }
-
-    if (super.destroy) {
-      super.destroy();
-    }
-  }
-
-  /**
-   * Obtenir les coordonnées depuis un événement
-   * @private
-   */
-  getCoordinates(event) {
-    const rect = this.framework.canvas.getBoundingClientRect();
-    if (event.touches && event.touches.length > 0) {
-      return {
-        x: event.touches[0].clientX - rect.left,
-        y: event.touches[0].clientY - rect.top
-      };
-    }
-    return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top
-    };
-  }
-
-  /**
-   * Handler mousedown
-   * @private
-   */
-  handleMouseDown(event) {
-    const coords = this.getCoordinates(event);
-    this.onDragStart(coords.x, coords.y);
-  }
-
-  /**
-   * Handler mousemove
-   * @private
-   */
-  handleMouseMove(event) {
-    if (!this.dragging) return;
-    const coords = this.getCoordinates(event);
-    this.onDragMove(coords.x, coords.y);
-    this.requestRender();
-  }
-
-  /**
-   * Handler mouseup
-   * @private
-   */
-  handleMouseUp(event) {
-    if (!this.dragging) return;
-    this.onDragEnd();
-    this.requestRender();
-  }
-
-  /**
-   * Handler touchstart
-   * @private
-   */
-  handleTouchStart(event) {
-    const coords = this.getCoordinates(event);
-    if (this.isPointInside(coords.x, coords.y)) {
-      event.preventDefault();
-      this.onDragStart(coords.x, coords.y);
-    }
-  }
-
-  /**
-   * Handler touchmove
-   * @private
-   */
-  handleTouchMove(event) {
-    if (!this.dragging) return;
-    event.preventDefault();
-    const coords = this.getCoordinates(event);
-    this.onDragMove(coords.x, coords.y);
-    this.requestRender();
-  }
-
-  /**
-   * Handler touchend
-   * @private
-   */
-  handleTouchEnd(event) {
-    if (!this.dragging) return;
-    event.preventDefault();
-    this.onDragEnd();
-    this.requestRender();
-  }
-
-  /**
-   * Demander un redessin
-   * @private
-   */
-  requestRender() {
-    if (this.framework && this.framework.requestRender) {
-      this.framework.requestRender();
-    }
-  }
-
-  /**
-   * Début du swipe
-   * @param {number} x
-   * @param {number} y
-   */
-  onDragStart(x, y) {
-    const inside = this.isPointInside(x, y);
-    
-    if (inside) {
-      this.dragging = true;
-      this.startX = x;
-      this.startY = y;
-      this.hasMoved = false;
-    } else {
-      console.log('❌ Point en dehors des limites');
-    }
-  }
-
-  /**
-   * Déplacement pendant swipe
-   * @param {number} x
-   * @param {number} y
-   */
-  onDragMove(x, y) {
-    if (this.dragging) {
-      const deltaX = x - this.startX;
-      const deltaY = Math.abs(y - this.startY);
-
-
-      // Swipe horizontal seulement si déplacement > 5px
-      if (Math.abs(deltaX) > 5 || this.hasMoved) {
-        this.hasMoved = true;
-        this.dragOffset = deltaX;
-
-        // Limiter le déplacement
-        const maxOffset = Math.max(
-          this.leftActions.length * 80,
-          this.rightActions.length * 80
-        );
-        this.dragOffset = Math.min(Math.max(this.dragOffset, -maxOffset), maxOffset);
-
-      }
-    }
-  }
-
-  /**
-   * Fin du swipe
-   */
-  onDragEnd() {
-    if (this.dragging) {
-
-      if (this.hasMoved) {
-        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;
-      this.hasMoved = false;
-    }
-  }
-
-  /**
-   * Dessine l'item
-   * @param {CanvasRenderingContext2D} ctx
-   */
-  draw(ctx) {
-    ctx.save();
-
-    // Actions swipe (arrière-plan)
-    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 = 'bold 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.font = 'bold 14px sans-serif';
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-      ctx.fillText(this.rightActions[0].text, this.x + this.width - offset / 2, this.y + this.height / 2);
-    }
-
-    // Déplacement du contenu principal
-    ctx.translate(this.dragOffset, 0);
-
-    // Background
-    ctx.fillStyle = this.bgColor;
-    ctx.fillRect(this.x, this.y, this.width, this.height);
-
-    // Texte principal
-    ctx.fillStyle = '#000';
-    ctx.font = '16px -apple-system, Roboto, sans-serif';
-    ctx.textAlign = 'left';
-    ctx.textBaseline = this.subtitle ? 'top' : 'middle';
-    const titleY = this.subtitle ? this.y + 16 : this.y + this.height / 2;
-    ctx.fillText(this.title, this.x + 16, titleY);
-
-    // Sous-titre
-    if (this.subtitle) {
-      ctx.fillStyle = '#757575';
-      ctx.font = '14px -apple-system, Roboto, sans-serif';
-      ctx.fillText(this.subtitle, this.x + 16, this.y + 38);
-    }
-
-    // Bordure inférieure
-    ctx.strokeStyle = '#E0E0E0';
-    ctx.lineWidth = 1;
-    ctx.beginPath();
-    ctx.moveTo(this.x, this.y + this.height);
-    ctx.lineTo(this.x + this.width, this.y + this.height);
-    ctx.stroke();
-
-    ctx.restore();
-  }
-
- isPointInside(x, y) {
-  const inside = x >= this.x && x <= this.x + this.width &&
-                 y >= this.y && y <= this.y + this.height;
-  
-  return inside;
-}
-}
-
-export default SwipeableListItem;