canvasframework 0.5.16 → 0.5.18

package/features/PullToRefresh.js

@@ -1,328 +0,0 @@
-import Component from '../core/Component.js';
-
-/**
- * Composant Pull-to-Refresh complètement autonome
- * Intercepte les événements touch/mouse directement
- * @class
- * @extends Component
- */
-class PullToRefresh extends Component {
-  constructor(framework, options = {}) {
-    super(framework, {
-      x: 0,
-      y: -100,
-      width: framework.width,
-      height: 100
-    });
-    
-    this.framework = framework;
-    this.onRefresh = options.onRefresh;
-    this.state = 'idle';
-    this.pullDistance = 0;
-    this.refreshThreshold = options.refreshThreshold || 80;
-    this.isRefreshing = false;
-    
-    // ✅ Propres gestionnaires d'événements
-    this.myIsDragging = false;
-    this.startY = 0;
-    this.currentY = 0;
-    this.canPull = false; // Seulement si on commence en haut
-    
-    // ✅ Installer nos propres écouteurs d'événements
-    this.setupOwnEventListeners();
-  }
-  
-  /**
-   * Configure les écouteurs d'événements propres au composant
-   */
-  setupOwnEventListeners() {
-    const canvas = this.framework.canvas;
-    
-    // Touch events
-    this.handleTouchStartBound = this.handleOwnTouchStart.bind(this);
-    this.handleTouchMoveBound = this.handleOwnTouchMove.bind(this);
-    this.handleTouchEndBound = this.handleOwnTouchEnd.bind(this);
-    
-    canvas.addEventListener('touchstart', this.handleTouchStartBound, { passive: false });
-    canvas.addEventListener('touchmove', this.handleTouchMoveBound, { passive: false });
-    canvas.addEventListener('touchend', this.handleTouchEndBound, { passive: false });
-    
-    // Mouse events (pour desktop)
-    this.handleMouseDownBound = this.handleOwnMouseDown.bind(this);
-    this.handleMouseMoveBound = this.handleOwnMouseMove.bind(this);
-    this.handleMouseUpBound = this.handleOwnMouseUp.bind(this);
-    
-    canvas.addEventListener('mousedown', this.handleMouseDownBound);
-    canvas.addEventListener('mousemove', this.handleMouseMoveBound);
-    canvas.addEventListener('mouseup', this.handleMouseUpBound);
-  }
-  
-  /**
-   * Gère le début du touch
-   */
-  handleOwnTouchStart(e) {
-    const scrollOffset = this.framework.scrollOffset || 0;
-    
-    // ✅ On peut pull SEULEMENT si on est en haut (scrollOffset === 0)
-    if (Math.abs(scrollOffset) < 1) {
-      this.canPull = true;
-      const touch = e.touches[0];
-      this.startY = touch.clientY;
-      this.currentY = touch.clientY;
-      this.myIsDragging = false;
-    } else {
-      this.canPull = false;
-    }
-  }
-  
-  /**
-   * Gère le mouvement du touch
-   */
-  handleOwnTouchMove(e) {
-    if (!this.canPull) return;
-    
-    const touch = e.touches[0];
-    this.currentY = touch.clientY;
-    const deltaY = this.currentY - this.startY;
-    
-    // ✅ Si on tire vers le bas (deltaY > 0)
-    if (deltaY > 10) {
-      this.myIsDragging = true;
-      this.state = 'pulling';
-      
-      // ✅ Effet de résistance (plus on tire, plus c'est dur)
-      this.pullDistance = Math.min(deltaY * 0.5, this.refreshThreshold * 1.5);
-      
-      // ✅ Empêcher le scroll du framework si on est en train de pull
-      if (deltaY > 20) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    }
-  }
-  
-  /**
-   * Gère la fin du touch
-   */
-  handleOwnTouchEnd(e) {
-    if (!this.canPull) return;
-    
-    if (this.myIsDragging && this.state === 'pulling') {
-      if (this.pullDistance >= this.refreshThreshold) {
-        this.triggerRefresh();
-      } else {
-        this.reset();
-      }
-    }
-    
-    this.myIsDragging = false;
-    this.canPull = false;
-  }
-  
-  /**
-   * Gère le début du clic souris
-   */
-  handleOwnMouseDown(e) {
-    const scrollOffset = this.framework.scrollOffset || 0;
-    
-    if (Math.abs(scrollOffset) < 1) {
-      this.canPull = true;
-      this.startY = e.clientY;
-      this.currentY = e.clientY;
-      this.myIsDragging = false;
-    } else {
-      this.canPull = false;
-    }
-  }
-  
-  /**
-   * Gère le mouvement de la souris
-   */
-  handleOwnMouseMove(e) {
-    if (!this.canPull) return;
-    
-    this.currentY = e.clientY;
-    const deltaY = this.currentY - this.startY;
-    
-    if (deltaY > 10) {
-      this.myIsDragging = true;
-      this.state = 'pulling';
-      this.pullDistance = Math.min(deltaY * 0.5, this.refreshThreshold * 1.5);
-      
-      if (deltaY > 20) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    }
-  }
-  
-  /**
-   * Gère le relâchement de la souris
-   */
-  handleOwnMouseUp(e) {
-    if (!this.canPull) return;
-    
-    if (this.myIsDragging && this.state === 'pulling') {
-      if (this.pullDistance >= this.refreshThreshold) {
-        this.triggerRefresh();
-      } else {
-        this.reset();
-      }
-    }
-    
-    this.myIsDragging = false;
-    this.canPull = false;
-  }
-  
-  /**
-   * Déclenche le rafraîchissement
-   */
-  async triggerRefresh() {
-    if (this.isRefreshing) return;
-    
-    console.log('🔄 Refresh déclenché!');
-    this.state = 'refreshing';
-    this.isRefreshing = true;
-    this.pullDistance = 60;
-    
-    if (this.onRefresh) {
-      try {
-        await this.onRefresh();
-      } catch (error) {
-        console.error('Erreur refresh:', error);
-      }
-    }
-    
-    setTimeout(() => {
-      this.reset();
-    }, 300);
-  }
-  
-  /**
-   * Réinitialise l'état
-   */
-  reset() {
-    console.log('🔄 Reset PullToRefresh');
-    
-    // Animation de retour élastique
-    const animate = () => {
-      if (this.pullDistance > 0) {
-        this.pullDistance *= 0.8;
-        if (this.pullDistance < 1) {
-          this.pullDistance = 0;
-          this.state = 'idle';
-          this.isRefreshing = false;
-        }
-        requestAnimationFrame(animate);
-      } else {
-        this.state = 'idle';
-        this.isRefreshing = false;
-      }
-    };
-    animate();
-  }
-  
-  /**
-   * Nettoie les écouteurs d'événements
-   */
-  destroy() {
-    const canvas = this.framework.canvas;
-    
-    canvas.removeEventListener('touchstart', this.handleTouchStartBound);
-    canvas.removeEventListener('touchmove', this.handleTouchMoveBound);
-    canvas.removeEventListener('touchend', this.handleTouchEndBound);
-    
-    canvas.removeEventListener('mousedown', this.handleMouseDownBound);
-    canvas.removeEventListener('mousemove', this.handleMouseMoveBound);
-    canvas.removeEventListener('mouseup', this.handleMouseUpBound);
-  }
-  
-  /**
-   * Dessine le composant
-   */
-  draw(ctx) {
-    // ✅ Ne rien dessiner si pullDistance <= 0
-    if (this.pullDistance <= 0) return;
-    
-    ctx.save();
-    
-    const progress = Math.min(1, this.pullDistance / this.refreshThreshold);
-    const displayHeight = Math.min(this.pullDistance, 230);
-    
-    // Background
-    ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
-    ctx.fillRect(0, 0, this.width, displayHeight);
-    
-    // Séparateur
-    ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
-    ctx.lineWidth = 1;
-    ctx.beginPath();
-    ctx.moveTo(0, displayHeight);
-    ctx.lineTo(this.width, displayHeight);
-    ctx.stroke();
-    
-    const centerX = this.width / 2;
-    const centerY = Math.min(displayHeight / 0.6, 90);
-    const spinnerRadius = 16;
-    
-    if (this.state === 'refreshing' || this.isRefreshing) {
-      // Spinner animé
-      const rotation = (Date.now() / 1000) * Math.PI * 2;
-      ctx.strokeStyle = '#6200EE';
-      ctx.lineWidth = 3;
-      ctx.lineCap = 'round';
-      ctx.beginPath();
-      ctx.arc(centerX, centerY, spinnerRadius, rotation, rotation + Math.PI * 1.5);
-      ctx.stroke();
-      
-      if (displayHeight > 35) {
-        ctx.fillStyle = '#666666';
-        ctx.font = '14px -apple-system, sans-serif';
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-        ctx.fillText('Actualisation...', centerX, centerY + 28);
-      }
-      
-    } else if (this.state === 'pulling') {
-      // Cercle de progression
-      ctx.strokeStyle = progress >= 1 ? '#6200EE' : '#CCCCCC';
-      ctx.lineWidth = 3;
-      ctx.lineCap = 'round';
-      ctx.beginPath();
-      ctx.arc(centerX, centerY, spinnerRadius, -Math.PI / 2, (-Math.PI / 2) + (Math.PI * 2 * progress));
-      ctx.stroke();
-      
-      // Flèche
-      ctx.save();
-      ctx.translate(centerX, centerY);
-      ctx.rotate(progress >= 1 ? Math.PI : 0);
-      
-      ctx.beginPath();
-      ctx.moveTo(0, -8);
-      ctx.lineTo(-5, -3);
-      ctx.lineTo(5, -3);
-      ctx.closePath();
-      ctx.fillStyle = progress >= 1 ? '#6200EE' : '#999999';
-      ctx.fill();
-      
-      ctx.restore();
-      
-      if (displayHeight > 35) {
-        ctx.fillStyle = '#666666';
-        ctx.font = '14px -apple-system, sans-serif';
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-        
-        if (progress >= 1) {
-          ctx.fillText('Relâchez pour actualiser', centerX, centerY + 28);
-        } else {
-          ctx.fillText('Tirez pour actualiser', centerX, centerY + 28);
-        }
-      }
-    }
-    
-    ctx.restore();
-  }
-}
-
-export default PullToRefresh;

package/features/Row.js

@@ -1,40 +0,0 @@
-import LayoutComponent from './LayoutComponent.js';
-
-class Row extends LayoutComponent {
-  constructor(framework, options = {}) {
-    super(framework, options);
-    this.align = options.align || 'start'; // start | center | end
-  }
-
-  layout() {
-    let x = this.x;
-    let maxHeight = 0;
-
-    for (const child of this.children) {
-      child.x = x;
-
-      if (this.align === 'center') {
-        child.y = this.y + (this.height - child.height) / 2;
-      } else if (this.align === 'end') {
-        child.y = this.y + this.height - child.height;
-      } else {
-        child.y = this.y;
-      }
-
-      x += child.width + this.spacing;
-      maxHeight = Math.max(maxHeight, child.height);
-    }
-
-    this.width = x - this.x - this.spacing;
-    if (!this.height) this.height = maxHeight;
-
-    // Layout récursif automatique des enfants
-    for (const child of this.children) {
-      if (typeof child.layoutRecursive === 'function') {
-        child.layoutRecursive();
-      }
-    }
-  }
-}
-
-export default Row;

package/features/SignaturePad.js

@@ -1,257 +0,0 @@
-import Component from '../core/Component.js';
-
-/**
- * Pad de signature électronique
- * @class
- * @extends Component
- */
-class SignaturePad extends Component {
-  constructor(framework, options = {}) {
-    super(framework, {
-      width: options.width || 300,
-      height: options.height || 200,
-      ...options
-    });
-    
-    this.points = [];
-    this.isDrawing = false;
-    this.strokeColor = options.strokeColor || '#000000';
-    this.strokeWidth = options.strokeWidth || 3; // Plus épais par défaut
-    this.backgroundColor = options.backgroundColor || '#FFFFFF';
-    this.onSignatureChange = options.onSignatureChange;
-    this.lastPoint = null;
-    
-    // Canvas interne pour stocker la signature
-    this.signatureCanvas = document.createElement('canvas');
-    this.signatureCanvas.width = this.width;
-    this.signatureCanvas.height = this.height;
-    this.signatureCtx = this.signatureCanvas.getContext('2d');
-    
-    // IMPORTANT: Configurer le contexte UNE SEULE FOIS
-    this.signatureCtx.strokeStyle = this.strokeColor;
-    this.signatureCtx.fillStyle = this.strokeColor;
-    this.signatureCtx.lineWidth = this.strokeWidth;
-    this.signatureCtx.lineCap = 'round';
-    this.signatureCtx.lineJoin = 'round';
-    
-    // Initialiser le canvas
-    this.clearSignature();
-    
-    // Bind des méthodes
-    this.handlePress = this.handlePress.bind(this);
-    this.handleMove = this.handleMove.bind(this);
-    this.handleRelease = this.handleRelease.bind(this);
-    
-    // IMPORTANT: Définir les handlers pour le framework
-    this.onPress = this.handlePress;
-    this.onMove = this.handleMove;
-    this.onRelease = this.handleRelease;
-  }
-
-  /**
-   * Gère le début du dessin
-   */
-  handlePress(x, y) {
-    if (!this.isPointInside(x, y)) return false;
-    
-    this.isDrawing = true;
-    const relativeX = x - this.x;
-    const relativeY = (y - this.framework.scrollOffset) - this.y;
-    
-    // Stocker le point
-    this.lastPoint = { x: relativeX, y: relativeY };
-    this.points.push([{ x: relativeX, y: relativeY }]);
-    
-    // Dessiner un point initial
-    this.signatureCtx.fillStyle = this.strokeColor;
-    this.signatureCtx.beginPath();
-    this.signatureCtx.arc(relativeX, relativeY, this.strokeWidth / 2, 0, Math.PI * 2);
-    this.signatureCtx.fill();
-    
-    return true;
-  }
-
-  /**
-   * Gère le dessin
-   */
-  handleMove(x, y) {
-    if (!this.isDrawing) return false;
-    
-    const relativeX = x - this.x;
-    const relativeY = (y - this.framework.scrollOffset) - this.y;
-    
-    // S'assurer que les coordonnées sont dans les limites
-    if (relativeX < 0 || relativeX > this.width || 
-        relativeY < 0 || relativeY > this.height) {
-      return false;
-    }
-    
-    // OPTIMISATION: Dessiner directement sans vérifications lourdes
-    this.signatureCtx.beginPath();
-    this.signatureCtx.moveTo(this.lastPoint.x, this.lastPoint.y);
-    this.signatureCtx.lineTo(relativeX, relativeY);
-    this.signatureCtx.stroke();
-    
-    // Ajouter le point (simplifié)
-    if (this.points.length > 0) {
-      this.points[this.points.length - 1].push({ x: relativeX, y: relativeY });
-    }
-    
-    // Mettre à jour le dernier point
-    this.lastPoint = { x: relativeX, y: relativeY };
-    
-    return true;
-  }
-
-  /**
-   * Gère la fin du dessin
-   */
-  handleRelease(x, y) {
-    if (this.isDrawing) {
-      this.isDrawing = false;
-      this.lastPoint = null;
-      
-      // Callback seulement à la fin
-      if (this.onSignatureChange) {
-        this.onSignatureChange(this.points);
-      }
-      
-      return true;
-    }
-    return false;
-  }
-
-  /**
-   * Efface la signature
-   */
-  clear() {
-    this.points = [];
-    this.clearSignature();
-    
-    if (this.onSignatureChange) {
-      this.onSignatureChange([]);
-    }
-  }
-
-  /**
-   * Efface le canvas interne
-   */
-  clearSignature() {
-    this.signatureCtx.fillStyle = this.backgroundColor;
-    this.signatureCtx.fillRect(0, 0, this.width, this.height);
-    
-    // Réinitialiser le style du trait
-    this.signatureCtx.strokeStyle = this.strokeColor;
-    this.signatureCtx.fillStyle = this.strokeColor;
-    this.signatureCtx.lineWidth = this.strokeWidth;
-    this.signatureCtx.lineCap = 'round';
-    this.signatureCtx.lineJoin = 'round';
-  }
-
-  /**
-   * Récupère la signature comme Data URL
-   */
-  getSignatureAsDataURL(type = 'image/png', quality = 1.0) {
-    return this.signatureCanvas.toDataURL(type, quality);
-  }
-
-  /**
-   * Récupère la signature comme blob
-   */
-  getSignatureAsBlob(callback, type = 'image/png', quality = 1.0) {
-    this.signatureCanvas.toBlob(callback, type, quality);
-  }
-
-  /**
-   * Vérifie si la signature est vide
-   */
-  isEmpty() {
-    return this.points.length === 0 || this.points.every(stroke => stroke.length === 0);
-  }
-
-  /**
-   * Dessine le composant
-   */
-  draw(ctx) {
-    ctx.save();
-    
-    // Fond du pad avec bordure visible
-    ctx.fillStyle = this.backgroundColor;
-    ctx.strokeStyle = '#2196F3'; // Bleu pour voir le pad
-    ctx.lineWidth = 2;
-    
-    // Rectangle avec bordure
-    ctx.fillRect(this.x, this.y, this.width, this.height);
-    ctx.strokeRect(this.x, this.y, this.width, this.height);
-    
-    // Ligne de signature (guide)
-    ctx.strokeStyle = '#DDDDDD';
-    ctx.lineWidth = 1;
-    ctx.setLineDash([5, 5]);
-    ctx.beginPath();
-    ctx.moveTo(this.x + 20, this.y + this.height - 40);
-    ctx.lineTo(this.x + this.width - 20, this.y + this.height - 40);
-    ctx.stroke();
-    ctx.setLineDash([]);
-    
-    // Texte indicatif
-    if (this.isEmpty()) {
-      ctx.fillStyle = '#999999';
-      ctx.font = '16px Arial';
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-      ctx.fillText('Signez ici', this.x + this.width / 2, this.y + this.height / 2);
-    }
-    
-    // Dessiner la signature depuis le canvas interne
-    ctx.drawImage(this.signatureCanvas, this.x, this.y);
-    
-    // Indicateur de dessin en cours
-    if (this.isDrawing && this.lastPoint) {
-      ctx.fillStyle = 'rgba(33, 150, 243, 0.3)';
-      ctx.beginPath();
-      ctx.arc(
-        this.x + this.lastPoint.x, 
-        this.y + this.lastPoint.y, 
-        this.strokeWidth * 3, 
-        0, 
-        Math.PI * 2
-      );
-      ctx.fill();
-    }
-    
-    // DEBUG: Afficher les coordonnées
-    ctx.fillStyle = '#666666';
-    ctx.font = '10px Arial';
-    ctx.textAlign = 'left';
-    ctx.fillText(
-      `x:${this.x} y:${this.y} ${this.width}x${this.height}`, 
-      this.x + 5, 
-      this.y + 15
-    );
-    
-    ctx.restore();
-  }
-
-  /**
-   * Vérifie si un point est dans les limites
-   */
-  isPointInside(x, y) {
-    const adjustedY = y - this.framework.scrollOffset;
-    return x >= this.x && 
-           x <= this.x + this.width && 
-           adjustedY >= this.y && 
-           adjustedY <= this.y + this.height;
-  }
-
-  /**
-   * Nettoie les ressources
-   */
-  destroy() {
-    this.signatureCanvas.width = 0;
-    this.signatureCanvas.height = 0;
-    super.destroy && super.destroy();
-  }
-}
-
-export default SignaturePad;