canvasframework 0.5.18 → 0.5.20

package/utils/IndexedDBManager.js

@@ -0,0 +1,273 @@
+/**
+ * Gestionnaire IndexedDB pour stockage de grandes quantités de données
+ * @class
+ * @property {string} dbName - Nom de la base
+ * @property {number} version - Version
+ * @property {IDBDatabase} db - Instance DB
+ */
+class IndexedDBManager {
+  /**
+   * Crée une instance de IndexedDBManager
+   * @param {string} dbName - Nom de la base
+   * @param {number} [version=1] - Version
+   */
+  constructor(dbName, version = 1) {
+    this.dbName = dbName;
+    this.version = version;
+    this.db = null;
+    this.stores = new Map();
+  }
+
+  /**
+   * Initialise la base de données
+   * @param {Object} schema - Schéma {storeName: {keyPath, indexes}}
+   * @returns {Promise<IndexedDBManager>} Instance
+   */
+  async init(schema) {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.dbName, this.version);
+
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve(this);
+      };
+
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+
+        for (let storeName in schema) {
+          const config = schema[storeName];
+          
+          // Créer l'object store s'il n'existe pas
+          if (!db.objectStoreNames.contains(storeName)) {
+            const store = db.createObjectStore(storeName, {
+              keyPath: config.keyPath || 'id',
+              autoIncrement: config.autoIncrement || false
+            });
+
+            // Créer les indexes
+            if (config.indexes) {
+              for (let indexName in config.indexes) {
+                const indexConfig = config.indexes[indexName];
+                store.createIndex(
+                  indexName,
+                  indexConfig.keyPath || indexName,
+                  { unique: indexConfig.unique || false }
+                );
+              }
+            }
+          }
+        }
+      };
+    });
+  }
+
+  /**
+   * Ajoute un élément
+   * @param {string} storeName - Nom du store
+   * @param {*} item - Élément à ajouter
+   * @returns {Promise<*>} Clé générée
+   */
+  async add(storeName, item) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readwrite');
+      const store = transaction.objectStore(storeName);
+      const request = store.add(item);
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Met à jour un élément
+   * @param {string} storeName - Nom du store
+   * @param {*} item - Élément à mettre à jour
+   * @returns {Promise<*>} Clé
+   */
+  async put(storeName, item) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readwrite');
+      const store = transaction.objectStore(storeName);
+      const request = store.put(item);
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Récupère un élément par sa clé
+   * @param {string} storeName - Nom du store
+   * @param {*} key - Clé
+   * @returns {Promise<*>} Élément
+   */
+  async get(storeName, key) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readonly');
+      const store = transaction.objectStore(storeName);
+      const request = store.get(key);
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Récupère tous les éléments
+   * @param {string} storeName - Nom du store
+   * @returns {Promise<Array>} Liste des éléments
+   */
+  async getAll(storeName) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readonly');
+      const store = transaction.objectStore(storeName);
+      const request = store.getAll();
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Cherche par index
+   * @param {string} storeName - Nom du store
+   * @param {string} indexName - Nom de l'index
+   * @param {*} value - Valeur à chercher
+   * @returns {Promise<Array>} Résultats
+   */
+  async getByIndex(storeName, indexName, value) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readonly');
+      const store = transaction.objectStore(storeName);
+      const index = store.index(indexName);
+      const request = index.getAll(value);
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Query avec filtre
+   * @param {string} storeName - Nom du store
+   * @param {Function} predicate - Fonction de filtre
+   * @returns {Promise<Array>} Résultats
+   */
+  async query(storeName, predicate) {
+    const all = await this.getAll(storeName);
+    return all.filter(predicate);
+  }
+
+  /**
+   * Supprime un élément
+   * @param {string} storeName - Nom du store
+   * @param {*} key - Clé
+   * @returns {Promise<void>}
+   */
+  async delete(storeName, key) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readwrite');
+      const store = transaction.objectStore(storeName);
+      const request = store.delete(key);
+
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Vide un store
+   * @param {string} storeName - Nom du store
+   * @returns {Promise<void>}
+   */
+  async clear(storeName) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readwrite');
+      const store = transaction.objectStore(storeName);
+      const request = store.clear();
+
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Compte les éléments
+   * @param {string} storeName - Nom du store
+   * @returns {Promise<number>} Nombre d'éléments
+   */
+  async count(storeName) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readonly');
+      const store = transaction.objectStore(storeName);
+      const request = store.count();
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  /**
+   * Ajoute plusieurs éléments (batch)
+   * @param {string} storeName - Nom du store
+   * @param {Array} items - Éléments
+   * @returns {Promise<void>}
+   */
+  async bulkAdd(storeName, items) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readwrite');
+      const store = transaction.objectStore(storeName);
+
+      items.forEach(item => store.add(item));
+
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  /**
+   * Supprime plusieurs éléments
+   * @param {string} storeName - Nom du store
+   * @param {Array} keys - Clés
+   * @returns {Promise<void>}
+   */
+  async bulkDelete(storeName, keys) {
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([storeName], 'readwrite');
+      const store = transaction.objectStore(storeName);
+
+      keys.forEach(key => store.delete(key));
+
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  /**
+   * Ferme la connexion
+   */
+  close() {
+    if (this.db) {
+      this.db.close();
+      this.db = null;
+    }
+  }
+
+  /**
+   * Supprime la base de données
+   * @returns {Promise<void>}
+   */
+  async destroy() {
+    this.close();
+    
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.deleteDatabase(this.dbName);
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+}
+
+export default IndexedDBManager;

package/utils/InspectionOverlay.js

@@ -0,0 +1,308 @@
+/**
+ * Overlay d'inspection pour CanvasFramework
+ */
+ 
+class InspectionOverlay {
+  constructor(framework) {
+    this.framework = framework;
+    this.isEnabled = false;
+    this.hoveredComp = null;
+    this.selectedComp = null;
+    this.showGrid = false;
+    this.showBounds = true;
+    this.showMetrics = true;
+    this.gridSize = 50;
+    
+    this.setup();
+  }
+
+  setup() {
+    // Créer le canvas overlay
+    this.overlayCanvas = document.createElement('canvas');
+    this.overlayCanvas.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      z-index: 9998;
+    `;
+    
+    this.overlayCtx = this.overlayCanvas.getContext('2d');
+    
+    // Redimensionner avec le canvas principal
+    this.syncWithMainCanvas();
+    
+    // Événements
+    this.framework.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
+    this.framework.canvas.addEventListener('click', this.handleClick.bind(this));
+    
+    window.addEventListener('resize', this.syncWithMainCanvas.bind(this));
+  }
+
+  syncWithMainCanvas() {
+    const rect = this.framework.canvas.getBoundingClientRect();
+    this.overlayCanvas.width = rect.width * (window.devicePixelRatio || 1);
+    this.overlayCanvas.height = rect.height * (window.devicePixelRatio || 1);
+    this.overlayCanvas.style.width = rect.width + 'px';
+    this.overlayCanvas.style.height = rect.height + 'px';
+    
+    if (this.overlayCtx) {
+      this.overlayCtx.scale(window.devicePixelRatio || 1, window.devicePixelRatio || 1);
+    }
+  }
+
+  handleMouseMove(e) {
+    if (!this.isEnabled) return;
+    
+    const rect = this.framework.canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    
+    // Trouver le composant sous la souris
+    this.hoveredComp = this.findComponentAt(x, y);
+    this.render();
+  }
+
+  handleClick(e) {
+    if (!this.isEnabled) return;
+    
+    if (this.hoveredComp) {
+      this.selectedComp = this.hoveredComp;
+      
+      // Ouvrir DevTools si disponible
+      if (window.devTools) {
+        window.devTools.selectComponent(this.selectedComp);
+        window.devTools.switchTab('properties');
+      }
+    }
+  }
+
+  findComponentAt(x, y) {
+    const adjustedY = y - this.framework.scrollOffset;
+    
+    for (let i = this.framework.components.length - 1; i >= 0; i--) {
+      const comp = this.framework.components[i];
+      if (comp.visible && comp.isPointInside(x, adjustedY)) {
+        return comp;
+      }
+    }
+    return null;
+  }
+
+  render() {
+    if (!this.isEnabled) return;
+    
+    this.overlayCtx.clearRect(0, 0, 
+      this.overlayCanvas.width / (window.devicePixelRatio || 1),
+      this.overlayCanvas.height / (window.devicePixelRatio || 1)
+    );
+    
+    // Grille
+    if (this.showGrid) {
+      this.drawGrid();
+    }
+    
+    // Tous les composants
+    if (this.showBounds) {
+      this.drawAllComponents();
+    }
+    
+    // Composant survolé
+    if (this.hoveredComp) {
+      this.drawHoveredComponent();
+    }
+    
+    // Composant sélectionné
+    if (this.selectedComp) {
+      this.drawSelectedComponent();
+    }
+    
+    // Métriques
+    if (this.showMetrics) {
+      this.drawMetrics();
+    }
+  }
+
+  drawGrid() {
+    this.overlayCtx.save();
+    this.overlayCtx.strokeStyle = 'rgba(100, 100, 100, 0.3)';
+    this.overlayCtx.lineWidth = 1;
+    
+    // Lignes verticales
+    for (let x = 0; x < this.overlayCanvas.width; x += this.gridSize) {
+      this.overlayCtx.beginPath();
+      this.overlayCtx.moveTo(x, 0);
+      this.overlayCtx.lineTo(x, this.overlayCanvas.height);
+      this.overlayCtx.stroke();
+    }
+    
+    // Lignes horizontales
+    for (let y = 0; y < this.overlayCanvas.height; y += this.gridSize) {
+      this.overlayCtx.beginPath();
+      this.overlayCtx.moveTo(0, y);
+      this.overlayCtx.lineTo(this.overlayCanvas.width, y);
+      this.overlayCtx.stroke();
+    }
+    
+    this.overlayCtx.restore();
+  }
+
+  drawAllComponents() {
+    this.framework.components.forEach(comp => {
+      if (!comp.visible) return;
+      
+      const isFixed = this.framework.isFixedComponent(comp);
+      const y = isFixed ? comp.y : comp.y + this.framework.scrollOffset;
+      
+      this.overlayCtx.save();
+      this.overlayCtx.strokeStyle = 'rgba(0, 150, 255, 0.2)';
+      this.overlayCtx.lineWidth = 1;
+      this.overlayCtx.strokeRect(comp.x, y, comp.width, comp.height);
+      this.overlayCtx.restore();
+    });
+  }
+
+  drawHoveredComponent() {
+    const comp = this.hoveredComp;
+    const isFixed = this.framework.isFixedComponent(comp);
+    const y = isFixed ? comp.y : comp.y + this.framework.scrollOffset;
+    
+    this.overlayCtx.save();
+    
+    // Fond semi-transparent
+    this.overlayCtx.fillStyle = 'rgba(100, 200, 255, 0.1)';
+    this.overlayCtx.fillRect(comp.x, y, comp.width, comp.height);
+    
+    // Bordure
+    this.overlayCtx.strokeStyle = '#4ec9b0';
+    this.overlayCtx.lineWidth = 2;
+    this.overlayCtx.strokeRect(comp.x, y, comp.width, comp.height);
+    
+    // Infos
+    this.overlayCtx.fillStyle = '#4ec9b0';
+    this.overlayCtx.font = '12px monospace';
+    this.overlayCtx.fillText(
+      `${comp.constructor.name} (${comp.width}x${comp.height})`,
+      comp.x,
+      y - 5
+    );
+    
+    this.overlayCtx.restore();
+  }
+
+  drawSelectedComponent() {
+    const comp = this.selectedComp;
+    if (!comp.visible) return;
+    
+    const isFixed = this.framework.isFixedComponent(comp);
+    const y = isFixed ? comp.y : comp.y + this.framework.scrollOffset;
+    
+    this.overlayCtx.save();
+    
+    // Bordure rouge pointillée
+    this.overlayCtx.strokeStyle = '#ff5555';
+    this.overlayCtx.lineWidth = 2;
+    this.overlayCtx.setLineDash([5, 3]);
+    this.overlayCtx.strokeRect(comp.x - 2, y - 2, comp.width + 4, comp.height + 4);
+    
+    // Mesures
+    this.overlayCtx.strokeStyle = '#ff5555';
+    this.overlayCtx.lineWidth = 1;
+    
+    // Largeur
+    this.overlayCtx.beginPath();
+    this.overlayCtx.moveTo(comp.x, y - 20);
+    this.overlayCtx.lineTo(comp.x + comp.width, y - 20);
+    this.overlayCtx.moveTo(comp.x, y - 25);
+    this.overlayCtx.lineTo(comp.x, y - 15);
+    this.overlayCtx.moveTo(comp.x + comp.width, y - 25);
+    this.overlayCtx.lineTo(comp.x + comp.width, y - 15);
+    this.overlayCtx.stroke();
+    
+    this.overlayCtx.fillStyle = '#ff5555';
+    this.overlayCtx.font = '10px monospace';
+    this.overlayCtx.textAlign = 'center';
+    this.overlayCtx.fillText(
+      `${comp.width}px`,
+      comp.x + comp.width / 2,
+      y - 25
+    );
+    
+    // Hauteur
+    this.overlayCtx.beginPath();
+    this.overlayCtx.moveTo(comp.x - 20, y);
+    this.overlayCtx.lineTo(comp.x - 20, y + comp.height);
+    this.overlayCtx.moveTo(comp.x - 25, y);
+    this.overlayCtx.lineTo(comp.x - 15, y);
+    this.overlayCtx.moveTo(comp.x - 25, y + comp.height);
+    this.overlayCtx.lineTo(comp.x - 15, y + comp.height);
+    this.overlayCtx.stroke();
+    
+    this.overlayCtx.save();
+    this.overlayCtx.translate(comp.x - 30, y + comp.height / 2);
+    this.overlayCtx.rotate(-Math.PI / 2);
+    this.overlayCtx.fillText(
+      `${comp.height}px`,
+      0,
+      0
+    );
+    this.overlayCtx.restore();
+    
+    this.overlayCtx.restore();
+  }
+
+  drawMetrics() {
+    this.overlayCtx.save();
+    this.overlayCtx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+    this.overlayCtx.fillRect(10, 10, 200, 90);
+    
+    this.overlayCtx.fillStyle = '#fff';
+    this.overlayCtx.font = '12px monospace';
+    this.overlayCtx.textAlign = 'left';
+    
+    this.overlayCtx.fillText(`Composants: ${this.framework.components.length}`, 20, 30);
+    this.overlayCtx.fillText(`FPS: ${this.framework.fps}`, 20, 50);
+    this.overlayCtx.fillText(`Scroll: ${Math.round(this.framework.scrollOffset)}px`, 20, 70);
+    this.overlayCtx.fillText(`Route: ${this.framework.currentRoute}`, 20, 90);
+    
+    if (this.hoveredComp) {
+      this.overlayCtx.fillText(
+        `Survol: ${this.hoveredComp.constructor.name}`,
+        20,
+        110
+      );
+    }
+    
+    this.overlayCtx.restore();
+  }
+
+  enable() {
+    this.isEnabled = true;
+    document.body.appendChild(this.overlayCanvas);
+    this.render();
+  }
+
+  disable() {
+    this.isEnabled = false;
+    if (this.overlayCanvas.parentNode) {
+      this.overlayCanvas.parentNode.removeChild(this.overlayCanvas);
+    }
+  }
+
+  toggle() {
+    if (this.isEnabled) {
+      this.disable();
+    } else {
+      this.enable();
+    }
+  }
+
+  setOptions(options) {
+    Object.assign(this, options);
+    if (this.isEnabled) {
+      this.render();
+    }
+  }
+}
+
+export default InspectionOverlay;

package/utils/NotificationManager.js

@@ -0,0 +1,60 @@
+
+// NotificationManager.js
+export default class NotificationManager {
+  constructor(defaults = {}) {
+    this.defaults = {
+      icon: defaults.icon || null,
+      silent: defaults.silent || false,
+      requireInteraction: defaults.requireInteraction || false,
+    };
+
+    // Vérifier si l'API est disponible
+    this.isSupported = "Notification" in window;
+  }
+
+  // Demander la permission si nécessaire
+  async requestPermission() {
+    if (!this.isSupported) return false;
+    if (Notification.permission === "granted") return true;
+    if (Notification.permission !== "denied") {
+      const permission = await Notification.requestPermission();
+      return permission === "granted";
+    }
+    return false;
+  }
+
+  // Créer une notification
+  async notify(title, options = {}) {
+    if (!this.isSupported) {
+      console.warn("Notifications API non supportée");
+      return null;
+    }
+
+    const hasPermission = await this.requestPermission();
+    if (!hasPermission) return null;
+
+    const notifOptions = {
+      ...this.defaults,
+      ...options,
+    };
+
+    const notification = new Notification(title, notifOptions);
+
+    // Callbacks
+    if (options.onClick) {
+      notification.onclick = options.onClick;
+    }
+    if (options.onClose) {
+      notification.onclose = options.onClose;
+    }
+
+    // Auto-close après duration (si défini)
+    if (options.duration && options.duration > 0) {
+      setTimeout(() => {
+        notification.close();
+      }, options.duration);
+    }
+
+    return notification;
+  }
+}