canvasframework 0.6.2 → 0.7.0

package/core/CanvasFramework.js

@@ -227,11 +227,10 @@ class WorkerPool {
                             result = { state };
                             break;
                         
-                        case 'EXECUTE':
-                            const fn = new Function('state', 'args', payload.fnString);
-                            result = await fn(state, payload.args);
-                            break;
-                        
+                        // NOTE SECURITE : le type EXECUTE (new Function / eval) a ete supprime.
+                        // Il permettait l'injection de code arbitraire depuis le thread principal.
+                        // Utiliser le type COMPUTE pour transmettre des donnees, ou ajouter
+                        // des handlers specifiques dans ce switch.
                         case 'COMPUTE':
                             result = payload.data;
                             break;
@@ -301,19 +300,40 @@ class WorkerPool {
         this._processQueue();
     }
     
-    execute(type, payload) {
+    execute(type, payload, timeoutMs = 10000) {
         return new Promise((resolve, reject) => {
             const taskId = ++this.taskIdCounter;
-            
+            let timer = null;
+
+            // Timeout de tâche : évite qu'un worker gelé bloque indéfiniment
+            if (timeoutMs > 0) {
+                timer = setTimeout(() => {
+                    if (this.pendingTasks.has(taskId)) {
+                        this.pendingTasks.delete(taskId);
+                        reject(new Error(`Worker task ${taskId} timed out after ${timeoutMs}ms`));
+                    } else {
+                        // Tâche encore dans la queue
+                        const idx = this.taskQueue.findIndex(t => t.taskId === taskId);
+                        if (idx !== -1) {
+                            this.taskQueue.splice(idx, 1);
+                            reject(new Error(`Worker task ${taskId} expired in queue`));
+                        }
+                    }
+                }, timeoutMs);
+            }
+
+            const wrappedResolve = (v) => { if (timer) clearTimeout(timer); resolve(v); };
+            const wrappedReject  = (e) => { if (timer) clearTimeout(timer); reject(e); };
+
             this.taskQueue.push({
                 taskId,
                 type,
                 payload,
-                resolve,
-                reject,
+                resolve: wrappedResolve,
+                reject:  wrappedReject,
                 timestamp: Date.now()
             });
-            
+
             this._processQueue();
         });
     }
@@ -352,7 +372,30 @@ class WorkerPool {
         };
     }
     
+    /**
+     * Annule une tâche en attente dans la queue (avant qu'elle soit assignée).
+     * Les tâches déjà en cours d'exécution dans un worker ne peuvent pas être annulées.
+     * @param {number} taskId - ID retourné par execute()
+     * @returns {boolean} true si la tâche était dans la queue et a été retirée
+     */
+    cancel(taskId) {
+        const idx = this.taskQueue.findIndex(t => t.taskId === taskId);
+        if (idx !== -1) {
+            const [task] = this.taskQueue.splice(idx, 1);
+            task.reject(new Error(`Task ${taskId} cancelled`));
+            return true;
+        }
+        return false;
+    }
+
     terminateAll() {
+        // Rejeter toutes les tâches en attente avant de terminer
+        for (const task of this.taskQueue) {
+            task.reject(new Error('WorkerPool terminated'));
+        }
+        for (const task of this.pendingTasks.values()) {
+            task.reject(new Error('WorkerPool terminated'));
+        }
         this.workers.forEach(wrapper => {
             wrapper.worker.terminate();
         });
@@ -394,11 +437,24 @@ class CanvasFramework {
 		this.canvas.style.display = 'block';
 		this.canvas.style.touchAction = 'none';
 		this.canvas.style.userSelect = 'none';
+		// Accessibilité : le canvas est une région interactive
+		this.canvas.setAttribute('role', 'application');
+		this.canvas.setAttribute('aria-label', options.ariaLabel || 'Application');
+		this.canvas.setAttribute('tabindex', '0'); // permet le focus clavier
 		document.body.appendChild(this.canvas);
-        
+
+		// ✅ FIX CRITIQUE : dpr / width / height initialisés AVANT la création du contexte.
+		// WebGLCanvasAdapter reçoit dpr en option — s'il est undefined au moment
+		// de l'appel, le rendu est décalé sur les écrans haute densité (Retina, etc.).
+		this.dpr    = window.devicePixelRatio || 1;
+		this.width  = window.innerWidth;
+		this.height = window.innerHeight;
+
+		this.backgroundColor = options.backgroundColor || '#f5f5f5';
+
 		// NOUVELLE OPTION: choisir entre Canvas 2D et WebGL
-        this.useWebGL = options.useWebGL ?? false;   // utilise la valeur si fournie, sinon false
-    
+		this.useWebGL = options.useWebGL ?? false;
+
 		// Initialiser le contexte approprié
 		if (this.useWebGL) {
 		  try {
@@ -422,14 +478,6 @@ class CanvasFramework {
 		    willReadFrequently: false
 		  });
 		}
-		//this.ctx.scale(this.dpr, this.dpr);
-		
-        this.backgroundColor = options.backgroundColor || '#f5f5f5'; // Blanc par défaut
-
-        this.width = window.innerWidth;
-        this.height = window.innerHeight;
-
-        this.dpr = window.devicePixelRatio || 1;
 
         // ✅ OPTIMISATION OPTION 2: Configuration des optimisations
         this.optimizations = {
@@ -453,13 +501,16 @@ class CanvasFramework {
         };
 
         // ✅ OPTIMISATION OPTION 2: Cache des images/textes
+        // textCache est utilisé par fillTextCached() pour éviter de rasteriser
+        // le même texte plusieurs fois. Limité à 500 entrées LRU.
         this.imageCache = new Map();
-        this.textCache = new Map();
+        this.textCache  = new Map();
 
         // ✅ OPTIMISATION OPTION 2: Double buffering
+        // Desactivé en mode WebGL : l'adapter gère déjà son propre canvas off-screen.
         this._doubleBuffer = null;
         this._bufferCtx = null;
-        if (this.optimizations.useDoubleBuffering) {
+        if (this.optimizations.useDoubleBuffering && !this.useWebGL) {
             this._initDoubleBuffer();
         }
 
@@ -1906,11 +1957,10 @@ class CanvasFramework {
 	 * @param {*} args - Arguments pour la fonction
 	 * @returns {Promise} Résultat de l'exécution
 	 */
-	async executeTask(fnString, args = {}) {
-		return this.workerPool.execute('EXECUTE', {
-			fnString,
-			args
-		});
+	async executeTask(data, timeoutMs = 10000) {
+		// NOTE : le type EXECUTE (new Function) a été supprimé (sécurité).
+		// Utiliser COMPUTE pour transmettre des données au worker.
+		return this.workerPool.execute('COMPUTE', { data }, timeoutMs);
 	}
 
 	/**
@@ -3102,10 +3152,7 @@ class CanvasFramework {
 					if (isFixed) {
 						comp.draw(this.ctx);
 					} else {
-						this.ctx.save();
-						this.ctx.translate(0, 0); // Pas de scroll pendant la transition
-						comp.draw(this.ctx);
-						this.ctx.restore();
+						comp.draw(this.ctx); // pas de scroll pendant la transition
 					}
 				}
 			}
@@ -3127,10 +3174,7 @@ class CanvasFramework {
 					if (isFixed) {
 						comp.draw(this.ctx);
 					} else {
-						this.ctx.save();
-						this.ctx.translate(0, 0); // Pas de scroll pendant la transition
-						comp.draw(this.ctx);
-						this.ctx.restore();
+						comp.draw(this.ctx); // pas de scroll pendant la transition
 					}
 				}
 			}
@@ -3148,10 +3192,7 @@ class CanvasFramework {
 					if (isFixed) {
 						comp.draw(this.ctx);
 					} else {
-						this.ctx.save();
-						this.ctx.translate(0, 0);
-						comp.draw(this.ctx);
-						this.ctx.restore();
+						comp.draw(this.ctx); // pas de scroll pendant la transition
 					}
 				}
 			}
@@ -3168,10 +3209,7 @@ class CanvasFramework {
 					if (isFixed) {
 						comp.draw(this.ctx);
 					} else {
-						this.ctx.save();
-						this.ctx.translate(0, 0);
-						comp.draw(this.ctx);
-						this.ctx.restore();
+						comp.draw(this.ctx); // pas de scroll pendant la transition
 					}
 				}
 			}
@@ -3282,6 +3320,8 @@ class CanvasFramework {
             const startTime = performance.now();
 
             const animate = (currentTime) => {
+                // Stopper si le framework a été détruit pendant l'animation
+                if (this._destroyed) return;
                 const elapsed = currentTime - startTime;
                 const progress = Math.min(elapsed / duration, 1);
                 const ease = this.easeOutCubic(progress);
@@ -3321,6 +3361,10 @@ class CanvasFramework {
      * Nettoie les ressources
      */
     destroy() {
+        // Marquer comme détruit en premier : toute animation en cours
+        // (scrollTo, RAF) vérifiera ce flag avant de poster des messages.
+        this._destroyed = true;
+
         if (this.scrollWorker) {
             this.scrollWorker.terminate();
         }
@@ -3385,6 +3429,33 @@ class CanvasFramework {
         });
         this.add(toast);
         toast.show();
+        // Annoncer le message aux lecteurs d'écran
+        this.announceToScreenReader(message);
+    }
+
+    /**
+     * Envoie un message à une zone aria-live pour les lecteurs d'écran.
+     * La zone est créée une seule fois et réutilisée.
+     * @param {string} message
+     * @param {"polite"|"assertive"} [priority="polite"]
+     */
+    announceToScreenReader(message, priority = 'polite') {
+        if (!this._ariaLive) {
+            this._ariaLive = document.createElement('div');
+            Object.assign(this._ariaLive.style, {
+                position: 'absolute',
+                left: '-9999px',
+                width: '1px',
+                height: '1px',
+                overflow: 'hidden'
+            });
+            this._ariaLive.setAttribute('aria-live', priority);
+            this._ariaLive.setAttribute('aria-atomic', 'true');
+            document.body.appendChild(this._ariaLive);
+        }
+        // Vider puis repeupler pour forcer l'annonce (même texte répété)
+        this._ariaLive.textContent = '';
+        requestAnimationFrame(() => { this._ariaLive.textContent = message; });
     }
 }
 

package/core/WebGLCanvasAdapter.js

@@ -89,6 +89,12 @@ class WebGLCanvasAdapter {
     // ── Stats ─────────────────────────────────────────────────────────
     this.stats = { drawCalls: 0, glyphsCached: 0, culled: 0, instancesDrawn: 0 };
 
+    // ── Cache couleurs (initialisé ici pour éviter la création lazy dans _parseColor) ──
+    this._colorCache = new Map();
+
+    // ── Flag anti-récursion pour _rebuildAtlas ─────────────────────────
+    this._rebuilding = false;
+
     // Nettoyage périodique de l'atlas si saturation
     this._cleanupTimer = setInterval(() => this._maybeRebuildAtlas(), 30000);
   }
@@ -108,14 +114,17 @@ class WebGLCanvasAdapter {
       alpha:                  true,
       premultipliedAlpha:     false,
       antialias:              false,
-      preserveDrawingBuffer:  true,   // nécessaire pour drawImage final
+      // preserveDrawingBuffer: false (défaut) — le résultat est copié via drawImage()
+      // immédiatement après chaque draw call, donc pas besoin de préserver le buffer.
+      // Laisser à false permet au driver GPU d'utiliser le double-buffering natif.
+      preserveDrawingBuffer:  false,
       powerPreference:        'high-performance'
     });
 
     // Fallback WebGL1 si WebGL2 indispo
     this.gl = gl || this._glCanvas.getContext('webgl', {
       alpha: true, premultipliedAlpha: false,
-      antialias: false, preserveDrawingBuffer: true
+      antialias: false, preserveDrawingBuffer: false
     });
 
     if (!this.gl) throw new Error('WebGL non disponible');
@@ -265,6 +274,54 @@ class WebGLCanvasAdapter {
       this._instanceData.byteLength,
       gl.DYNAMIC_DRAW
     );
+
+    // VAO WebGL2 : enregistre le layout des attributs une seule fois.
+    // Évite de rebinder chaque attribut à chaque draw call (gain CPU mesurable).
+    if (this._isWebGL2) {
+      this._vao = gl.createVertexArray();
+      gl.bindVertexArray(this._vao);
+      this._setupAttribPointers();
+      gl.bindVertexArray(null);
+    }
+  }
+
+  /**
+   * Configure les pointeurs d'attributs vertex (appelé une fois dans le VAO,
+   * ou à chaque draw call en WebGL1).
+   * @private
+   */
+  _setupAttribPointers() {
+    const gl    = this.gl;
+    const loc   = this._loc;
+    const ext   = this._ext;
+    const stride = this._FLOATS_PER_INSTANCE * 4;
+
+    // Quad (diviseur 0 = même valeur pour toutes les instances)
+    gl.bindBuffer(gl.ARRAY_BUFFER, this._quadBuf);
+    gl.enableVertexAttribArray(loc.quad);
+    gl.vertexAttribPointer(loc.quad, 2, gl.FLOAT, false, 0, 0);
+    if (ext) ext.vertexAttribDivisorANGLE(loc.quad, 0);
+    else     gl.vertexAttribDivisor(loc.quad, 0);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this._instanceBuf);
+
+    // a_dst : vec4 @ offset 0
+    gl.enableVertexAttribArray(loc.dst);
+    gl.vertexAttribPointer(loc.dst, 4, gl.FLOAT, false, stride, 0);
+    if (ext) ext.vertexAttribDivisorANGLE(loc.dst, 1);
+    else     gl.vertexAttribDivisor(loc.dst, 1);
+
+    // a_uv  : vec4 @ offset 16
+    gl.enableVertexAttribArray(loc.uv);
+    gl.vertexAttribPointer(loc.uv, 4, gl.FLOAT, false, stride, 16);
+    if (ext) ext.vertexAttribDivisorANGLE(loc.uv, 1);
+    else     gl.vertexAttribDivisor(loc.uv, 1);
+
+    // a_color : vec4 @ offset 32
+    gl.enableVertexAttribArray(loc.color);
+    gl.vertexAttribPointer(loc.color, 4, gl.FLOAT, false, stride, 32);
+    if (ext) ext.vertexAttribDivisorANGLE(loc.color, 1);
+    else     gl.vertexAttribDivisor(loc.color, 1);
   }
 
   _setupAtlasTexture() {
@@ -373,8 +430,12 @@ class WebGLCanvasAdapter {
   /**
    * Reconstruit l'atlas depuis zéro avec uniquement les glyphes actuels.
    * Appelé quand l'atlas est saturé.
+   * Protégé contre la réentrance par _rebuilding.
    */
   _rebuildAtlas() {
+    if (this._rebuilding) return; // évite la récursion infinie
+    this._rebuilding = true;
+
     const ctx   = this._atlasCtx;
     ctx.clearRect(0, 0, this.atlasSize, this.atlasSize);
 
@@ -391,7 +452,8 @@ class WebGLCanvasAdapter {
       if (char && font) this._getGlyph(char, font);
     }
 
-    this._atlasDirty = true;
+    this._atlasDirty  = true;
+    this._rebuilding  = false;
   }
 
   _maybeRebuildAtlas() {
@@ -403,14 +465,18 @@ class WebGLCanvasAdapter {
 
   /**
    * Upload la texture atlas vers le GPU si elle a changé.
+   * Utilise texSubImage2D (mise à jour partielle) plutôt que texImage2D (ré-allocation
+   * complète) pour éviter un round-trip mémoire GPU inutile à chaque modification.
    * Appelé UNE seule fois par frame, juste avant le draw call.
    */
   _uploadAtlasIfDirty() {
     if (!this._atlasDirty) return;
     const gl = this.gl;
     gl.bindTexture(gl.TEXTURE_2D, this._atlasTex);
-    gl.texImage2D(
-      gl.TEXTURE_2D, 0, gl.RGBA,
+    // texSubImage2D met à jour les données sans réallouer le stockage GPU
+    gl.texSubImage2D(
+      gl.TEXTURE_2D, 0,
+      0, 0,               // offset x, y dans la texture
       gl.RGBA, gl.UNSIGNED_BYTE,
       this._atlasCanvas
     );
@@ -558,43 +624,29 @@ class WebGLCanvasAdapter {
     gl.bindTexture(gl.TEXTURE_2D, this._atlasTex);
     gl.uniform1i(loc.atlas, 0);
 
-    // 6. Buffer quad (commun à toutes les instances)
-    gl.bindBuffer(gl.ARRAY_BUFFER, this._quadBuf);
-    gl.enableVertexAttribArray(loc.quad);
-    gl.vertexAttribPointer(loc.quad, 2, gl.FLOAT, false, 0, 0);
-    if (ext) ext.vertexAttribDivisorANGLE(loc.quad, 0);
-    else     gl.vertexAttribDivisor(loc.quad, 0);
-
-    // 7. Buffer instances — upload uniquement les instances actives
-    const stride = this._FLOATS_PER_INSTANCE * 4; // bytes
+    // 6. Upload uniquement les instances actives dans le buffer GPU
     gl.bindBuffer(gl.ARRAY_BUFFER, this._instanceBuf);
     gl.bufferSubData(
       gl.ARRAY_BUFFER, 0,
       this._instanceData.subarray(0, this._instanceCount * this._FLOATS_PER_INSTANCE)
     );
 
-    // a_dst : vec4 @ offset 0
-    gl.enableVertexAttribArray(loc.dst);
-    gl.vertexAttribPointer(loc.dst, 4, gl.FLOAT, false, stride, 0);
-    if (ext) ext.vertexAttribDivisorANGLE(loc.dst, 1);
-    else     gl.vertexAttribDivisor(loc.dst, 1);
-
-    // a_uv  : vec4 @ offset 16
-    gl.enableVertexAttribArray(loc.uv);
-    gl.vertexAttribPointer(loc.uv, 4, gl.FLOAT, false, stride, 16);
-    if (ext) ext.vertexAttribDivisorANGLE(loc.uv, 1);
-    else     gl.vertexAttribDivisor(loc.uv, 1);
-
-    // a_color : vec4 @ offset 32
-    gl.enableVertexAttribArray(loc.color);
-    gl.vertexAttribPointer(loc.color, 4, gl.FLOAT, false, stride, 32);
-    if (ext) ext.vertexAttribDivisorANGLE(loc.color, 1);
-    else     gl.vertexAttribDivisor(loc.color, 1);
+    // 7. Lier les attributs vertex
+    if (this._vao) {
+      // WebGL2 : le VAO a déjà mémorisé le layout — un seul bind suffit
+      gl.bindVertexArray(this._vao);
+    } else {
+      // WebGL1 : rebinder les attributs manuellement à chaque draw call
+      this._setupAttribPointers();
+    }
 
     // 8. LE draw call unique — dessine N instances du quad unitaire
     if (ext) ext.drawArraysInstancedANGLE(gl.TRIANGLES, 0, 6, this._instanceCount);
     else     gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this._instanceCount);
 
+    // Libérer le VAO après usage
+    if (this._vao) gl.bindVertexArray(null);
+
     // 9. Copier le résultat WebGL sur le canvas 2D principal
     this.ctx.drawImage(this._glCanvas, 0, 0);
 
@@ -632,18 +684,14 @@ class WebGLCanvasAdapter {
 
   /**
    * Parse une couleur CSS → [r, g, b, a] normalisés [0..1]
-   * Supporte : #rgb #rrggbb rgba() rgb() et les couleurs nommées communes
+   * Supporte : #rgb #rrggbb #rrggbbaa rgba() rgb() et les couleurs nommées communes.
+   * Le cache (_colorCache) est initialisé dans le constructeur.
    */
   _parseColor(color) {
     if (!color) return [0, 0, 0, 1];
 
-    // Cache
-    if (this._colorCache) {
-      const cached = this._colorCache.get(color);
-      if (cached) return cached;
-    } else {
-      this._colorCache = new Map();
-    }
+    const cached = this._colorCache.get(color);
+    if (cached) return cached;
 
     let r = 0, g = 0, b = 0, a = 1;
 
@@ -769,6 +817,7 @@ class WebGLCanvasAdapter {
       gl.deleteTexture(this._atlasTex);
       gl.deleteBuffer(this._quadBuf);
       gl.deleteBuffer(this._instanceBuf);
+      if (this._vao) gl.deleteVertexArray(this._vao);
       gl.deleteProgram(this._program);
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasframework",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/beyons/CanvasFramework.git"

package/utils/AnimationEngine.js

@@ -17,8 +17,8 @@ class AnimationEngine {
     
     // Worker pour les calculs d'animation
     this.worker = null;
-    this.workerEnabled = true;
-    this.initWorker();
+    this.workerEnabled = false;
+    //this.initWorker();
     
     // OffscreenCanvas cache
     this.offscreenCache = new Map();