canvasframework 0.3.21 → 0.3.23

package/utils/DevToolsConsole.js

@@ -0,0 +1,201 @@
+/**
+ * Console DevTools pour CanvasFramework
+ */
+class DevToolsConsole {
+  constructor(framework) {
+    this.framework = framework;
+    this.commands = new Map();
+    this.history = [];
+    this.historyIndex = -1;
+    
+    this.setupCommands();
+    this.setupConsole();
+  }
+
+  setupCommands() {
+    this.registerCommand('help', 'Affiche cette aide', () => this.showHelp());
+    this.registerCommand('clear', 'Efface la console', () => this.clear());
+    this.registerCommand('fps', 'Toggle FPS display', () => {
+      this.framework.enableFpsDisplay(!this.framework.showFps);
+      return 'FPS display ' + (this.framework.showFps ? 'enabled' : 'disabled');
+    });
+    
+    this.registerCommand('inspect', 'Toggle inspection overlay', () => {
+      this.framework.toggleInspection();
+      return 'Inspection overlay toggled';
+    });
+    
+    this.registerCommand('components', 'List all components', () => {
+      return this.framework.components.map((comp, i) => 
+        `${i}: ${comp.constructor.name} [${comp.x},${comp.y}] ${comp.width}x${comp.height}`
+      ).join('\n');
+    });
+    
+    this.registerCommand('route', 'Show routing info', () => {
+      return `Current: ${this.framework.currentRoute}\nParams: ${JSON.stringify(this.framework.currentParams)}\nHistory: ${this.framework.history.length} entries`;
+    });
+    
+    this.registerCommand('theme', 'Toggle dark/light theme', () => {
+      this.framework.toggleDarkMode();
+      return `Theme: ${this.framework.theme === this.framework.lightTheme ? 'light' : 'dark'}`;
+    });
+    
+    this.registerCommand('perf', 'Show performance stats', () => {
+      const stats = [];
+      stats.push(`FPS: ${this.framework.fps}`);
+      stats.push(`Components: ${this.framework.components.length}`);
+      stats.push(`Dirty: ${Array.from(this.framework.dirtyComponents).length}`);
+      stats.push(`Memory: ${performance.memory ? Math.round(performance.memory.usedJSHeapSize / 1024 / 1024) + 'MB' : 'N/A'}`);
+      return stats.join('\n');
+    });
+  }
+
+  registerCommand(name, description, handler) {
+    this.commands.set(name, { description, handler });
+  }
+
+  setupConsole() {
+    // Créer la console
+    this.consoleElement = document.createElement('div');
+    this.consoleElement.style.cssText = `
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: rgba(0, 0, 0, 0.9);
+      color: #0f0;
+      font-family: monospace;
+      font-size: 12px;
+      padding: 10px;
+      z-index: 10001;
+      display: none;
+      max-height: 300px;
+      overflow-y: auto;
+      border-top: 1px solid #333;
+    `;
+
+    // Input
+    this.input = document.createElement('input');
+    this.input.type = 'text';
+    this.input.style.cssText = `
+      width: 100%;
+      background: transparent;
+      border: none;
+      color: #0f0;
+      font-family: monospace;
+      font-size: 12px;
+      outline: none;
+    `;
+    this.input.placeholder = 'Enter DevTools command (type "help" for list)...';
+
+    // Output
+    this.output = document.createElement('div');
+    this.output.style.cssText = `
+      margin-bottom: 10px;
+      white-space: pre-wrap;
+    `;
+
+    this.consoleElement.appendChild(this.output);
+    this.consoleElement.appendChild(this.input);
+    document.body.appendChild(this.consoleElement);
+
+    // Événements
+    this.input.addEventListener('keydown', this.handleInput.bind(this));
+    
+    // Hotkey pour ouvrir la console
+    document.addEventListener('keydown', (e) => {
+      if (e.key === '`' && e.ctrlKey) {
+        e.preventDefault();
+        this.toggle();
+      }
+    });
+  }
+
+  handleInput(e) {
+    if (e.key === 'Enter') {
+      const command = this.input.value.trim();
+      if (command) {
+        this.executeCommand(command);
+        this.history.push(command);
+        this.historyIndex = this.history.length;
+        this.input.value = '';
+      }
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (this.historyIndex > 0) {
+        this.historyIndex--;
+        this.input.value = this.history[this.historyIndex];
+      }
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (this.historyIndex < this.history.length - 1) {
+        this.historyIndex++;
+        this.input.value = this.history[this.historyIndex];
+      } else {
+        this.historyIndex = this.history.length;
+        this.input.value = '';
+      }
+    } else if (e.key === 'Tab') {
+      e.preventDefault();
+      this.autoComplete();
+    }
+  }
+
+  executeCommand(commandStr) {
+    const [cmd, ...args] = commandStr.split(' ');
+    const command = this.commands.get(cmd);
+    
+    if (command) {
+      try {
+        const result = command.handler(...args);
+        this.log(`> ${commandStr}\n${result !== undefined ? result : ''}`);
+      } catch (error) {
+        this.log(`> ${commandStr}\nError: ${error.message}`);
+      }
+    } else {
+      this.log(`> ${commandStr}\nUnknown command: ${cmd}. Type "help" for list.`);
+    }
+  }
+
+  autoComplete() {
+    const partial = this.input.value.trim();
+    if (!partial) return;
+    
+    const matches = Array.from(this.commands.keys())
+      .filter(cmd => cmd.startsWith(partial));
+    
+    if (matches.length === 1) {
+      this.input.value = matches[0];
+    } else if (matches.length > 1) {
+      this.log(`Suggestions: ${matches.join(', ')}`);
+    }
+  }
+
+  showHelp() {
+    const helpText = Array.from(this.commands.entries())
+      .map(([name, { description }]) => `${name.padEnd(15)} ${description}`)
+      .join('\n');
+    return `Available commands:\n${helpText}`;
+  }
+
+  log(message) {
+    this.output.textContent += message + '\n';
+    this.consoleElement.scrollTop = this.consoleElement.scrollHeight;
+  }
+
+  clear() {
+    this.output.textContent = '';
+  }
+
+  toggle() {
+    this.consoleElement.style.display = 
+      this.consoleElement.style.display === 'none' ? 'block' : 'none';
+    
+    if (this.consoleElement.style.display === 'block') {
+      this.input.focus();
+      this.log('CanvasFramework DevTools Console - Ctrl+` to close');
+    }
+  }
+}
+
+export default DevToolsConsole;

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;