canvasframework 0.5.16 → 0.5.18

package/components/Video.js

@@ -1,397 +0,0 @@
-import Component from '../core/Component.js';
-/**
- * Lecteur vidéo
- * @class
- * @extends Component
- * @property {string} src - URL de la vidéo
- * @property {string} poster - URL de l'image d'affiche
- * @property {boolean} playing - En cours de lecture
- * @property {string} platform - Plateforme
- * @property {boolean} showControls - Afficher les contrôles
- * @property {number|null} controlsTimeout - Timeout des contrôles
- * @property {number} currentTime - Temps actuel
- * @property {number} duration - Durée totale
- * @property {number} progress - Progression (0-100)
- * @property {number} volume - Volume (0-1)
- * @property {boolean} showVolume - Afficher le contrôle de volume
- * @property {boolean} fullscreen - Plein écran
- * @property {boolean} loaded - Vidéo chargée
- * @property {HTMLVideoElement} videoElement - Élément vidéo HTML
- * @property {number} controlsHeight - Hauteur des contrôles
- * @property {number} volumeHeight - Hauteur du contrôle de volume
- * @property {Function} onPlay - Callback à la lecture
- * @property {Function} onPause - Callback à la pause
- * @property {Function} onEnded - Callback à la fin
- * @property {Function} onFullscreen - Callback au plein écran
- */
-class Video extends Component {
-  /**
-   * Crée une instance de Video
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}] - Options de configuration
-   * @param {string} [options.src=''] - URL de la vidéo
-   * @param {string} [options.poster=''] - URL de l'image d'affiche
-   * @param {boolean} [options.playing=false] - Lecture initiale
-   * @param {boolean} [options.showControls=true] - Afficher les contrôles
-   * @param {Function} [options.onPlay] - Callback à la lecture
-   * @param {Function} [options.onPause] - Callback à la pause
-   * @param {Function} [options.onEnded] - Callback à la fin
-   * @param {Function} [options.onFullscreen] - Callback au plein écran
-   */
-  constructor(framework, options = {}) {
-    super(framework, options);
-    this.src = options.src || '';
-    this.poster = options.poster || '';
-    this.playing = false;
-    this.platform = framework.platform;
-    this.showControls = true;
-    this.controlsTimeout = null;
-    this.currentTime = 0;
-    this.duration = 0;
-    this.progress = 0;
-    this.volume = 1;
-    this.showVolume = false;
-    this.fullscreen = false;
-    this.loaded = false;
-    
-    // Éléments de contrôle
-    this.controlsHeight = 50;
-    this.volumeHeight = 100;
-    
-    // Créer l'élément vidéo HTML5
-    this.videoElement = document.createElement('video');
-    this.videoElement.style.position = 'fixed';
-    this.videoElement.style.left = '-9999px'; // Caché
-    this.videoElement.style.top = '-9999px';
-    this.videoElement.style.width = '0';
-    this.videoElement.style.height = '0';
-    this.videoElement.src = this.src;
-    this.videoElement.poster = this.poster;
-    this.videoElement.preload = 'auto';
-    this.videoElement.crossOrigin = 'anonymous'; // Important pour les vidéos externes
-    this.videoElement.controls = false; // Nous gérons nos propres contrôles
-    
-    document.body.appendChild(this.videoElement);
-    
-    // Événements de la vidéo
-    this.videoElement.addEventListener('loadedmetadata', () => {
-      this.duration = this.videoElement.duration;
-      this.loaded = true;
-    });
-    
-    this.videoElement.addEventListener('timeupdate', () => {
-      this.currentTime = this.videoElement.currentTime;
-      this.progress = (this.currentTime / this.duration) * 100;
-    });
-    
-    this.videoElement.addEventListener('ended', () => {
-      this.playing = false;
-      if (this.onEnded) this.onEnded();
-    });
-    
-    this.videoElement.addEventListener('play', () => {
-      this.playing = true;
-      if (this.onPlay) this.onPlay();
-    });
-    
-    this.videoElement.addEventListener('pause', () => {
-      this.playing = false;
-      if (this.onPause) this.onPause();
-    });
-    
-    // Événements
-    this.onPlay = options.onPlay;
-    this.onPause = options.onPause;
-    this.onEnded = options.onEnded;
-    this.onFullscreen = options.onFullscreen;
-    
-    // Définir onPress pour les contrôles
-    this.onPress = this.handlePress.bind(this);
-    this.onMove = this.handleMove.bind(this);
-  }
-
-  /**
-   * Démarre la lecture
-   */
-  play() {
-    if (this.videoElement) {
-      this.videoElement.play();
-      this.playing = true;
-      this.showControlsTemporarily();
-    }
-  }
-
-  /**
-   * Met en pause
-   */
-  pause() {
-    if (this.videoElement) {
-      this.videoElement.pause();
-      this.playing = false;
-      this.showControlsTemporarily();
-    }
-  }
-
-  /**
-   * Alterne lecture/pause
-   */
-  togglePlay() {
-    if (this.playing) {
-      this.pause();
-    } else {
-      this.play();
-    }
-  }
-
-  /**
-   * Affiche temporairement les contrôles
-   * @private
-   */
-  showControlsTemporarily() {
-    this.showControls = true;
-    clearTimeout(this.controlsTimeout);
-    this.controlsTimeout = setTimeout(() => {
-      if (this.playing) {
-        this.showControls = false;
-      }
-    }, 3000);
-  }
-
-  /**
-   * 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;
-    
-    // Montrer les contrôles
-    this.showControls = true;
-    this.showControlsTemporarily();
-    
-    // Bouton play/pause central
-    const centerX = this.x + this.width / 2;
-    const centerY = this.y + this.height / 2;
-    
-    if (x >= centerX - 30 && x <= centerX + 30 &&
-        adjustedY >= centerY - 30 && adjustedY <= centerY + 30) {
-      this.togglePlay();
-      return;
-    }
-    
-    // Barre de progression
-    if (this.showControls && this.loaded) {
-      const progressBarY = this.y + this.height - 30;
-      if (adjustedY >= progressBarY && adjustedY <= progressBarY + 10) {
-        const clickX = x - this.x;
-        this.progress = (clickX / this.width) * 100;
-        this.currentTime = (this.duration * this.progress) / 100;
-        if (this.videoElement) {
-          this.videoElement.currentTime = this.currentTime;
-        }
-        return;
-      }
-    }
-    
-    // Bouton plein écran
-    const fullscreenX = this.x + this.width - 40;
-    const fullscreenY = this.y + this.height - 40;
-    
-    if (x >= fullscreenX && x <= fullscreenX + 30 &&
-        adjustedY >= fullscreenY && adjustedY <= fullscreenY + 30) {
-      this.toggleFullscreen();
-      return;
-    }
-  }
-
-  /**
-   * Gère le mouvement
-   * @param {number} x - Coordonnée X
-   * @param {number} y - Coordonnée Y
-   * @private
-   */
-  handleMove(x, y) {
-    // Pour des interactions supplémentaires
-  }
-
-  /**
-   * Alterne le plein écran
-   */
-  toggleFullscreen() {
-    if (!document.fullscreenElement && this.videoElement.requestFullscreen) {
-      this.videoElement.requestFullscreen();
-      this.fullscreen = true;
-      if (this.onFullscreen) this.onFullscreen(true);
-    } else if (document.exitFullscreen) {
-      document.exitFullscreen();
-      this.fullscreen = false;
-      if (this.onFullscreen) this.onFullscreen(false);
-    }
-  }
-
-  /**
-   * Dessine le lecteur vidéo
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
-  draw(ctx) {
-    ctx.save();
-    
-    try {
-      // Dessiner la vidéo sur le canvas
-      if (this.loaded && this.videoElement.readyState >= 2) {
-        ctx.drawImage(this.videoElement, this.x, this.y, this.width, this.height);
-      } else {
-        // Affichage de chargement
-        ctx.fillStyle = '#000000';
-        ctx.fillRect(this.x, this.y, this.width, this.height);
-        
-        ctx.fillStyle = '#FFFFFF';
-        ctx.font = '16px Arial';
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-        ctx.fillText('Chargement de la vidéo...', 
-          this.x + this.width/2, this.y + this.height/2);
-      }
-    } catch (error) {
-      // En cas d'erreur CORS ou autre
-      ctx.fillStyle = '#000000';
-      ctx.fillRect(this.x, this.y, this.width, this.height);
-      
-      ctx.fillStyle = '#FFFFFF';
-      ctx.font = '14px Arial';
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-      ctx.fillText('Vidéo: ' + (this.src.substring(0, 30) + '...'), 
-        this.x + this.width/2, this.y + this.height/2 - 10);
-      ctx.fillText('Cliquez pour lire', 
-        this.x + this.width/2, this.y + this.height/2 + 10);
-    }
-    
-    // Overlay sombre quand en pause
-    if (!this.playing || this.showControls) {
-      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-      ctx.fillRect(this.x, this.y, this.width, this.height);
-    }
-    
-    // Bouton play/pause au centre (quand pause ou contrôles visibles)
-    if (!this.playing || this.showControls) {
-      const centerX = this.x + this.width / 2;
-      const centerY = this.y + this.height / 2;
-      
-      // Fond rond pour le bouton
-      ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
-      ctx.beginPath();
-      ctx.arc(centerX, centerY, 30, 0, Math.PI * 2);
-      ctx.fill();
-      
-      // Icône play/pause
-      ctx.fillStyle = '#FFFFFF';
-      if (this.playing) {
-        // Icône pause
-        ctx.fillRect(centerX - 8, centerY - 15, 6, 30);
-        ctx.fillRect(centerX + 2, centerY - 15, 6, 30);
-      } else {
-        // Icône play (triangle)
-        ctx.beginPath();
-        ctx.moveTo(centerX - 5, centerY - 15);
-        ctx.lineTo(centerX - 5, centerY + 15);
-        ctx.lineTo(centerX + 20, centerY);
-        ctx.closePath();
-        ctx.fill();
-      }
-    }
-    
-    // Contrôles en bas
-    if (this.showControls && this.loaded) {
-      // Overlay pour les contrôles
-      ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
-      ctx.fillRect(this.x, this.y + this.height - this.controlsHeight, 
-                   this.width, this.controlsHeight);
-      
-      // Barre de progression
-      const progressX = this.x + 10;
-      const progressY = this.y + this.height - 25;
-      const progressWidth = this.width - 60; // Réduit pour laisser place au bouton plein écran
-      
-      // Fond de la barre
-      ctx.fillStyle = '#555555';
-      ctx.fillRect(progressX, progressY, progressWidth, 4);
-      
-      // Progression actuelle
-      ctx.fillStyle = '#FF0000';
-      const currentProgressWidth = (progressWidth * this.progress) / 100;
-      ctx.fillRect(progressX, progressY, currentProgressWidth, 4);
-      
-      // Curseur de progression
-      const thumbX = progressX + currentProgressWidth;
-      ctx.fillStyle = '#FFFFFF';
-      ctx.beginPath();
-      ctx.arc(thumbX, progressY + 2, 6, 0, Math.PI * 2);
-      ctx.fill();
-      
-      // Temps
-      const currentTimeStr = this.formatTime(this.currentTime);
-      const totalTimeStr = this.formatTime(this.duration);
-      
-      ctx.fillStyle = '#FFFFFF';
-      ctx.font = '12px Arial';
-      ctx.textAlign = 'left';
-      ctx.fillText(currentTimeStr, this.x + 10, this.y + this.height - 35);
-      
-      ctx.textAlign = 'right';
-      ctx.fillText(totalTimeStr, this.x + progressWidth + 10, this.y + this.height - 35);
-      
-      // Bouton plein écran
-      const fullscreenX = this.x + this.width - 40;
-      const fullscreenY = this.y + this.height - 40;
-      
-      ctx.strokeStyle = '#FFFFFF';
-      ctx.lineWidth = 2;
-      ctx.strokeRect(fullscreenX, fullscreenY, 20, 20);
-      ctx.beginPath();
-      ctx.moveTo(fullscreenX + 5, fullscreenY + 5);
-      ctx.lineTo(fullscreenX + 5, fullscreenY + 15);
-      ctx.lineTo(fullscreenX + 15, fullscreenY + 15);
-      ctx.lineTo(fullscreenX + 15, fullscreenY + 5);
-      ctx.stroke();
-    }
-    
-    ctx.restore();
-  }
-
-  /**
-   * Formate un temps en minutes:secondes
-   * @param {number} seconds - Secondes
-   * @returns {string} Temps formaté
-   * @private
-   */
-  formatTime(seconds) {
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
-  }
-
-  /**
-   * 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 lecteur
-   */
-  isPointInside(x, y) {
-    // Le VideoPlayer est cliquable pour les contrôles
-    return x >= this.x && x <= this.x + this.width && 
-           y >= this.y && y <= this.y + this.height;
-  }
-  
-  /**
-   * Nettoie l'élément vidéo du DOM
-   */
-  remove() {
-    if (this.videoElement && this.videoElement.parentNode) {
-      this.videoElement.parentNode.removeChild(this.videoElement);
-    }
-  }
-}
-
-export default Video;

package/components/View.js

@@ -1,140 +0,0 @@
-import Component from '../core/Component.js';
-/**
- * Container avec système de layout
- * @class
- * @extends Component
- * @property {Component[]} children - Enfants
- * @property {number} padding - Padding interne
- * @property {number} gap - Espacement entre enfants
- * @property {string} direction - Direction ('column' ou 'row')
- * @property {string} align - Alignement ('start', 'center', 'end')
- * @property {string} bgColor - Couleur de fond
- * @property {number} borderRadius - Rayon des coins
- */
-class View extends Component {
-  /**
-   * Crée une instance de View
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}] - Options de configuration
-   * @param {number} [options.padding=0] - Padding interne
-   * @param {number} [options.gap=0] - Espacement entre enfants
-   * @param {string} [options.direction='column'] - Direction
-   * @param {string} [options.align='start'] - Alignement
-   * @param {string} [options.bgColor='transparent'] - Couleur de fond
-   * @param {number} [options.borderRadius=0] - Rayon des coins
-   */
-  constructor(framework, options = {}) {
-    super(framework, options);
-    this.children = [];
-    this.padding = options.padding || 0;
-    this.gap = options.gap || 0;
-    this.direction = options.direction || 'column'; // 'column' ou 'row'
-    this.align = options.align || 'start'; // 'start', 'center', 'end'
-    this.bgColor = options.bgColor || 'transparent';
-    this.borderRadius = options.borderRadius || 0;
-  }
-
-  /**
-   * Ajoute un enfant
-   * @param {Component} child - Composant enfant
-   * @returns {Component} L'enfant ajouté
-   */
-  add(child) {
-    this.children.push(child);
-    this.layout();
-    return child;
-  }
-
-  /**
-   * Organise les enfants selon le layout
-   * @private
-   */
-  layout() {
-    let currentX = this.x + this.padding;
-    let currentY = this.y + this.padding;
-    
-    for (let child of this.children) {
-      if (this.direction === 'column') {
-        child.x = currentX;
-        child.y = currentY;
-        if (this.align === 'center') {
-          child.x = this.x + (this.width - child.width) / 2;
-        } else if (this.align === 'end') {
-          child.x = this.x + this.width - child.width - this.padding;
-        }
-        currentY += child.height + this.gap;
-      } else {
-        child.x = currentX;
-        child.y = currentY;
-        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 - this.padding;
-        }
-        currentX += child.width + this.gap;
-      }
-    }
-  }
-
-  /**
-   * Dessine la vue et ses enfants
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
-  draw(ctx) {
-    ctx.save();
-    
-    if (this.bgColor !== 'transparent') {
-      ctx.fillStyle = this.bgColor;
-      if (this.borderRadius > 0) {
-        ctx.beginPath();
-        this.roundRect(ctx, this.x, this.y, this.width, this.height, this.borderRadius);
-        ctx.fill();
-      } else {
-        ctx.fillRect(this.x, this.y, this.width, this.height);
-      }
-    }
-    
-    for (let child of this.children) {
-      if (child.visible) child.draw(ctx);
-    }
-    
-    ctx.restore();
-  }
-
-  /**
-   * 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.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);
-  }
-
-  /**
-   * 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 la vue
-   */
-  isPointInside(x, y) {
-    return x >= this.x && 
-           x <= this.x + this.width && 
-           y >= this.y && 
-           y <= this.y + this.height;
-  }
-}
-
-export default View;

package/components/VirtualList.js

@@ -1,120 +0,0 @@
-import Component from '../core/Component.js';
-import ListItem from '../components/ListItem.js';
-
-/**
- * Virtual List : optimise le rendu pour les longues listes
- * @class
- * @extends Component
- */
-class VirtualList extends Component {
-  constructor(framework, options = {}) {
-    super(framework, options);
-
-    this.allItemsData = [];        // Stocke toutes les données des items (mais pas tous les objets)
-    this.visibleItems = [];        // Liste des ListItem réellement créés/dessinés
-    this.itemHeight = options.itemHeight || 56;
-    this.onItemClick = options.onItemClick;
-    this.y = options.y || 0;
-
-    this.viewportHeight = options.height || framework.height; // Hauteur visible
-    this.scrollOffset = 0; // Position de scroll
-  }
-
-  /**
-   * Ajoute un item (seule la data est stockée)
-   * @param {Object} itemOptions
-   */
-  addItem(itemOptions) {
-    this.allItemsData.push(itemOptions);
-    this.updateVisibleItems();
-  }
-
-  /**
-   * Supprime tous les items
-   */
-  clear() {
-    for (let item of this.visibleItems) {
-      this.framework.remove(item);
-    }
-    this.allItemsData = [];
-    this.visibleItems = [];
-    this.height = 0;
-  }
-
-  /**
-   * Met à jour la liste des items visibles selon scrollOffset
-   */
-  updateVisibleItems() {
-    const firstIndex = Math.floor(this.scrollOffset / this.itemHeight);
-    const lastIndex = Math.min(this.allItemsData.length - 1, Math.ceil((this.scrollOffset + this.viewportHeight) / this.itemHeight));
-
-    const newVisibleItems = [];
-
-    for (let i = firstIndex; i <= lastIndex; i++) {
-      let item = this.visibleItems.find(v => v.__virtualIndex === i);
-      if (!item) {
-        // Crée un nouvel item si pas existant
-        const data = this.allItemsData[i];
-        item = new ListItem(this.framework, {
-          ...data,
-          x: this.x,
-          y: this.y + i * this.itemHeight - this.scrollOffset,
-          width: this.width,
-          height: this.itemHeight,
-          onClick: () => {
-            if (this.onItemClick) this.onItemClick(i, data);
-            if (data.onClick) data.onClick();
-          }
-        });
-        item.__virtualIndex = i;
-        this.framework.add(item);
-      } else {
-        // Met à jour la position Y si déjà existant
-        item.y = this.y + i * this.itemHeight - this.scrollOffset;
-      }
-      newVisibleItems.push(item);
-    }
-
-    // Supprime les items qui ne sont plus visibles
-    for (let item of this.visibleItems) {
-      if (!newVisibleItems.includes(item)) {
-        this.framework.remove(item);
-      }
-    }
-
-    this.visibleItems = newVisibleItems;
-    this.height = this.allItemsData.length * this.itemHeight;
-  }
-
-  /**
-   * Scroll la liste
-   * @param {number} deltaY
-   */
-  scroll(deltaY) {
-    this.scrollOffset += deltaY;
-    if (this.scrollOffset < 0) this.scrollOffset = 0;
-    const maxScroll = Math.max(0, this.height - this.viewportHeight);
-    if (this.scrollOffset > maxScroll) this.scrollOffset = maxScroll;
-
-    this.updateVisibleItems();
-  }
-
-  /**
-   * Dessine les items visibles
-   * @param {CanvasRenderingContext2D} ctx
-   */
-  draw(ctx) {
-    for (let item of this.visibleItems) {
-      item.draw(ctx);
-    }
-  }
-
-  /**
-   * Toujours false : les ListItems gèrent leurs clics
-   */
-  isPointInside() {
-    return false;
-  }
-}
-
-export default VirtualList;