canvasframework 0.6.3 → 0.7.1

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/CanvasUtils.js

@@ -0,0 +1,141 @@
+/**
+ * Utilitaires partagés pour le dessin Canvas et la manipulation des couleurs.
+ * Importer dans chaque composant au lieu de dupliquer le code.
+ *
+ * Chemin suggéré : core/CanvasUtils.js
+ *
+ * @example
+ * import { roundRect, hexToRgba, darkenColor } from '../core/CanvasUtils.js';
+ */
+
+// ─────────────────────────────────────────
+// DESSIN
+// ─────────────────────────────────────────
+
+/**
+ * Dessine un rectangle avec coins arrondis.
+ * N'appelle PAS ctx.beginPath() — faites-le vous-même si nécessaire.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {number} x
+ * @param {number} y
+ * @param {number} width
+ * @param {number} height
+ * @param {number} radius
+ */
+export function roundRect(ctx, x, y, width, height, radius) {
+  if (radius <= 0) {
+    ctx.rect(x, y, width, height);
+    return;
+  }
+  const r = Math.min(radius, width / 2, height / 2);
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + width - r, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+  ctx.lineTo(x + width, y + height - r);
+  ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+  ctx.lineTo(x + r, y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+  ctx.lineTo(x, y + r);
+  ctx.quadraticCurveTo(x, y, x + r, y);
+  ctx.closePath();
+}
+
+/**
+ * Dessine un rectangle avec uniquement les coins supérieurs arrondis.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {number} x
+ * @param {number} y
+ * @param {number} width
+ * @param {number} height
+ * @param {number} radius
+ */
+export function roundRectTop(ctx, x, y, width, height, radius) {
+  const r = Math.min(radius, width / 2, height / 2);
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + width - r, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+  ctx.lineTo(x + width, y + height);
+  ctx.lineTo(x, y + height);
+  ctx.lineTo(x, y + r);
+  ctx.quadraticCurveTo(x, y, x + r, y);
+  ctx.closePath();
+}
+
+// ─────────────────────────────────────────
+// COULEURS
+// ─────────────────────────────────────────
+
+/**
+ * Convertit une couleur hexadécimale en objet {r, g, b}.
+ * Retourne {r:0, g:0, b:0} si la couleur est invalide.
+ *
+ * @param {string} hex - Ex : '#6750A4' ou '6750A4'
+ * @returns {{ r: number, g: number, b: number }}
+ */
+export function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : { r: 0, g: 0, b: 0 };
+}
+
+/**
+ * Convertit une couleur hexadécimale en chaîne rgba(…).
+ *
+ * @param {string} hex
+ * @param {number} alpha - Opacité entre 0 et 1
+ * @returns {string} Ex : 'rgba(103, 80, 164, 0.2)'
+ */
+export function hexToRgba(hex, alpha) {
+  const { r, g, b } = hexToRgb(hex);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+/**
+ * Assombrit une couleur (hex, rgb ou rgba).
+ *
+ * @param {string} color
+ * @param {number} [amount=30] - Valeur à soustraire sur chaque canal (0–255)
+ * @returns {string}
+ */
+export function darkenColor(color, amount = 30) {
+  if (!color || color === 'transparent') return 'rgba(0,0,0,0.1)';
+
+  if (color.startsWith('#')) {
+    const { r, g, b } = hexToRgb(color);
+    return `rgb(${Math.max(0, r - amount)}, ${Math.max(0, g - amount)}, ${Math.max(0, b - amount)})`;
+  }
+
+  // rgb() ou rgba() : ne touche pas à l'alpha
+  let channelIndex = 0;
+  return color.replace(/[\d.]+/g, (val) => {
+    if (channelIndex < 3) {
+      channelIndex++;
+      return String(Math.max(0, parseFloat(val) - amount));
+    }
+    return val;
+  });
+}
+
+/**
+ * Mélange deux couleurs hex avec un ratio donné.
+ *
+ * @param {string} hex1
+ * @param {string} hex2
+ * @param {number} [ratio=0.5] - 0 = hex1 pur, 1 = hex2 pur
+ * @returns {string} Couleur hex résultante
+ */
+export function mixColors(hex1, hex2, ratio = 0.5) {
+  const c1 = hexToRgb(hex1);
+  const c2 = hexToRgb(hex2);
+  const r = Math.round(c1.r + (c2.r - c1.r) * ratio);
+  const g = Math.round(c1.g + (c2.g - c1.g) * ratio);
+  const b = Math.round(c1.b + (c2.b - c1.b) * ratio);
+  return `#${[r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('')}`;
+}