canvasframework 0.5.16 → 0.5.18

package/utils/IndexedDBManager.js

@@ -1,273 +0,0 @@
-/**
- * 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

@@ -1,308 +0,0 @@
-/**
- * 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

@@ -1,60 +0,0 @@
-
-// 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;
-  }
-}