canvasframework 0.3.6

package/features/PullToRefresh.js

@@ -0,0 +1,328 @@
+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, 100);
+    
+    // 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

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

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

package/features/Skeleton.js

@@ -0,0 +1,84 @@
+import Component from '../core/Component.js';
+/**
+ * Composant Skeleton (placeholder animé pendant le chargement)
+ * @class
+ * @extends Component
+ * @param {Framework} framework - Instance du framework
+ * @param {Object} [options={}] - Options de configuration
+ * @param {string} [options.type='text'] - Type de skeleton ('text', 'circle', 'rectangle')
+ * @param {number} [options.animationSpeed=0.03] - Vitesse de l'animation
+ * @example
+ * const skeleton = new Skeleton(framework, {
+ *   type: 'text',
+ *   width: 200,
+ *   height: 100
+ * });
+ */
+class Skeleton extends Component {
+  /**
+   * @constructs Skeleton
+   */
+  constructor(framework, options = {}) {
+    super(framework, options);
+    /** @type {string} */
+    this.type = options.type || 'text'; // text, circle, rectangle
+    /** @type {number} */
+    this.animationSpeed = options.animationSpeed || 0.03;
+    /** @type {number} */
+    this.animationProgress = 0;
+    this.startAnimation();
+  }
+  
+  /**
+   * Démarre l'animation du skeleton
+   * @private
+   */
+  startAnimation() {
+    const animate = () => {
+      if (!this.visible) return;
+      
+      this.animationProgress += this.animationSpeed;
+      if (this.animationProgress > Math.PI * 2) {
+        this.animationProgress = 0;
+      }
+      
+      requestAnimationFrame(animate);
+    };
+    animate();
+  }
+  
+  /**
+   * Dessine le skeleton avec animation
+   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
+   */
+  draw(ctx) {
+    ctx.save();
+    
+    const brightness = 0.9 + 0.1 * Math.sin(this.animationProgress);
+    ctx.fillStyle = `rgba(240, 240, 240, ${brightness})`;
+    
+    switch(this.type) {
+      case 'circle':
+        ctx.beginPath();
+        ctx.arc(this.x + this.width/2, this.y + this.height/2, this.width/2, 0, Math.PI * 2);
+        ctx.fill();
+        break;
+      case 'text':
+        // Simuler des lignes de texte
+        const lineHeight = 20;
+        const lines = Math.floor(this.height / lineHeight);
+        
+        for (let i = 0; i < lines; i++) {
+          const lineWidth = i === lines - 1 ? this.width * 0.6 : this.width;
+          ctx.fillRect(this.x, this.y + i * lineHeight, lineWidth, 16);
+        }
+        break;
+      default:
+        ctx.fillRect(this.x, this.y, this.width, this.height);
+    }
+    
+    ctx.restore();
+  }
+}
+
+export default Skeleton;