canvasframework 0.3.22 → 0.3.24

package/components/SliverAppBar.js

@@ -0,0 +1,139 @@
+import AppBar from './AppBar.js';
+/**
+ * SliverAppBar - CanvasFramework
+ * Collapse / Stretch / Parallax
+ * Compatible Material & Cupertino
+ * ⚠️ Ne modifie PAS AppBar
+ */
+class SliverAppBar extends AppBar {
+  constructor(framework, options = {}) {
+    super(framework, {
+      ...options,
+      y: 0
+    });
+    // Heights
+    this.expandedHeight = options.expandedHeight || 240;
+    this.collapsedHeight = options.collapsedHeight ?? 56;
+    // Effects
+    this.stretch = options.stretch ?? true;
+    this.parallax = options.parallax ?? true;
+    this.parallaxFactor = options.parallaxFactor ?? 0.4;
+    // Background
+    this.backgroundImage = options.backgroundImage || null;
+    this.backgroundColor = options.backgroundColor || this.bgColor || '#FFFFFF';
+    this.backgroundOpacity = this._extractOpacity(this.backgroundColor);
+    // Overlay (au-dessus de l'image)
+    this.overlayColor = options.overlayColor || '#000000';
+    this.overlayOpacity = options.overlayOpacity ?? 0;
+    // Foreground (titre + icônes)
+    this.foregroundColor = options.foregroundColor || options.textColor || this.textColor || '#FFFFFF';
+    // SliverAppBar participe au scroll
+    this.fixed = false;
+  }
+  
+  /**
+   * Extrait l'opacité d'une couleur rgba() ou retourne 1
+   */
+  _extractOpacity(color) {
+    if (typeof color === 'string' && color.startsWith('rgba')) {
+      const match = color.match(/rgba?\([^,]+,[^,]+,[^,]+,\s*([\d.]+)\)/);
+      return match ? parseFloat(match[1]) : 1;
+    }
+    return 1;
+  }
+  
+  /**
+   * Mise à jour dynamique selon le scroll
+   */
+  updateWithScroll(scrollOffset) {
+    const scrollY = -scrollOffset;
+    const collapseRange = this.expandedHeight - this.collapsedHeight;
+    const collapse = Math.min(scrollY, collapseRange);
+    let newHeight = this.expandedHeight - collapse;
+    // Stretch (overscroll)
+    if (scrollY < 0 && this.stretch) {
+      newHeight = this.expandedHeight - scrollY;
+    }
+    this.height = Math.max(newHeight, this.collapsedHeight);
+  }
+  
+  draw(ctx) {
+    const scrollOffset = this.framework.scrollOffset || 0;
+    this.updateWithScroll(scrollOffset);
+    ctx.save();
+    // ===== Collapse progress (0 → 1)
+    const collapseProgress = Math.min(
+      1,
+      Math.max(
+        0,
+        (this.expandedHeight - this.height) /
+        (this.expandedHeight - this.collapsedHeight)
+      )
+    );
+    // ===== BACKGROUND IMAGE (en premier) =====
+    if (this.backgroundImage && this.backgroundImage.complete) {
+      let bgOffset = 0;
+      if (this.parallax) {
+        bgOffset = Math.max(0, -scrollOffset * this.parallaxFactor);
+      }
+      ctx.drawImage(
+        this.backgroundImage,
+        this.x,
+        this.y - bgOffset,
+        this.width,
+        this.height + bgOffset
+      );
+    }
+    
+    // ===== BACKGROUND COLOR (overlay coloré au-dessus de l'image) =====
+    ctx.globalAlpha = this.backgroundOpacity;
+    ctx.fillStyle = this.backgroundColor;
+    ctx.fillRect(this.x, this.y, this.width, this.height);
+    ctx.globalAlpha = 1;
+    
+    // ===== OVERLAY SUPPLÉMENTAIRE (si besoin) =====
+    if (this.overlayOpacity > 0) {
+      ctx.globalAlpha = this.overlayOpacity;
+      ctx.fillStyle = this.overlayColor;
+      ctx.fillRect(this.x, this.y, this.width, this.height);
+      ctx.globalAlpha = 1;
+    }
+    // ===== TITLE (fade with collapse) =====
+    ctx.globalAlpha = 1 - collapseProgress;
+    ctx.fillStyle = this.foregroundColor;
+    ctx.font = `bold 20px -apple-system, Roboto, sans-serif`;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'bottom';
+    ctx.fillText(
+      this.title,
+      this.x + 16,
+      this.y + this.height - 16
+    );
+    ctx.globalAlpha = 1;
+    
+    // ===== PREVENT APPBAR BACKGROUND OVERWRITE =====
+    const originalBg = this.bgColor;
+    const originalTextColor = this.textColor;
+    const originalIconColor = this.iconColor;
+    const originalPlatform = this.platform;
+    
+    // Force transparent pour éviter que super.draw() dessine un fond
+    this.bgColor = 'rgba(0,0,0,0)';
+    // Force la couleur du texte et des icônes
+    this.textColor = this.foregroundColor;
+    this.iconColor = this.foregroundColor;
+    // Force Material pour uniformiser le comportement des couleurs
+    this.platform = 'material';
+    
+    // Icons, ripple, elevation, etc.
+    super.draw(ctx);
+    
+    // Restore
+    this.bgColor = originalBg;
+    this.textColor = originalTextColor;
+    this.iconColor = originalIconColor;
+    this.platform = originalPlatform;
+    ctx.restore();
+  }
+}
+export default SliverAppBar;

package/core/CanvasFramework.js

@@ -52,6 +52,8 @@ import InputTags from '../components/InputTags.js';
 import InputDatalist from '../components/InputDatalist.js';
 import Banner from '../components/Banner.js';
 import Chart from '../components/Chart.js';
+import SliverAppBar from '../components/SliverAppBar.js';
+import AudioPlayer from '../components/AudioPlayer.js';
 
 // Utils
 import SafeArea from '../utils/SafeArea.js';
@@ -71,6 +73,12 @@ import AnimationEngine from '../utils/AnimationEngine.js';
 import CryptoManager from '../utils/CryptoManager.js';
 import NotificationManager from '../utils/NotificationManager.js';
 
+// DevTools
+import DevTools from '../utils/DevTools.js';
+import InspectionOverlay from '../utils/InspectionOverlay.js';
+import DevToolsConsole from '../utils/DevToolsConsole.js';
+
+
 // Features
 import PullToRefresh from '../features/PullToRefresh.js';
 import Skeleton from '../features/Skeleton.js';
@@ -126,6 +134,7 @@ const FIXED_COMPONENT_TYPES = new Set([
   FAB,
   Toast,
   Banner,
+  SliverAppBar,
   BottomSheet,
   ContextMenu,
   OpenStreetMap,
@@ -243,6 +252,96 @@ class CanvasFramework {
     this.setupEventListeners();
     this.setupHistoryListener();
     this.startRenderLoop();
+	
+	this.devTools = new DevTools(this);
+    this.inspectionOverlay = new InspectionOverlay(this);
+    
+    // MODIFICATION: Vérifier explicitement l'option enableDevTools
+    const shouldEnableDevTools = options.enableDevTools === true;
+    
+    if (shouldEnableDevTools) {
+        this.enableDevTools();
+        console.log('DevTools enabled. Press Ctrl+Shift+D to toggle.');
+    }
+  }
+  
+  /**
+   * Active ou désactive les DevTools
+   * @param {boolean} enabled - true pour activer, false pour désactiver
+   */
+  enableDevTools(enabled = true) {
+	if (enabled) {
+		// Créer le DevTools s'il n'existe pas
+		if (!this.devTools) {
+			this.devTools = new DevTools(this);
+		}
+			
+		// Attacher seulement si pas déjà fait
+		if (!this.devTools._isAttached) {
+			this.devTools.attachToFramework();
+			this.devTools._isAttached = true;
+		}
+		
+		// Afficher le bouton
+		if (this.devTools.toggleBtn) {
+			this.devTools.toggleBtn.style.display = 'block';
+		}
+	} else {
+		// Désactiver complètement
+		if (this.devTools) {
+			// Détacher du framework
+			if (this.devTools.detachFromFramework) {
+				this.devTools.detachFromFramework();
+			} else if (this.devTools.cleanup) {
+				this.devTools.cleanup();
+			}
+				
+			// Supprimer de la page DOM
+			if (this.devTools.container && this.devTools.container.parentNode) {
+				this.devTools.container.parentNode.removeChild(this.devTools.container);
+			}
+				
+			if (this.devTools.toggleBtn && this.devTools.toggleBtn.parentNode) {
+				this.devTools.toggleBtn.parentNode.removeChild(this.devTools.toggleBtn);
+			}
+			
+			this.devTools._isAttached = false;
+		}
+	 }
+  }
+  
+  /**
+   * Bascule l'overlay d'inspection
+   */
+  toggleInspection() {
+    this.inspectionOverlay.toggle();
+  }
+  
+  /**
+   * Exécute une commande DevTools
+   */
+  devToolsCommand(command, ...args) {
+    switch (command) {
+      case 'inspect':
+        this.inspectionOverlay.enable();
+        break;
+      case 'performance':
+        this.devTools.switchTab('performance');
+        this.devTools.toggle();
+        break;
+      case 'components':
+        this.devTools.switchTab('components');
+        this.devTools.toggle();
+        break;
+      case 'highlight':
+        if (args[0]) {
+          this.devTools.highlightComponent(args[0]);
+        }
+        break;
+      case 'reflow':
+        this.components.forEach(comp => comp.markDirty());
+        break;
+    }
   }
 
   wrapContext(ctx, theme) {

package/core/UIBuilder.js

@@ -53,6 +53,8 @@ import InputTags from '../components/InputTags.js';
 import InputDatalist from '../components/InputDatalist.js';
 import Banner from '../components/Banner.js';
 import Chart from '../components/Chart.js';
+import SliverAppBar from '../components/SliverAppBar.js';
+import AudioPlayer from '../components/AudioPlayer.js';
 
 // Features
 import PullToRefresh from '../features/PullToRefresh.js';
@@ -92,6 +94,7 @@ const Components = {
   Modal,
   Drawer,
   AppBar,
+  SliverAppBar,
   Chip,
   Stepper,
   Accordion,
@@ -116,6 +119,7 @@ const Components = {
   Divider,
   FileUpload,
   Table,
+  AudioPlayer,
   TreeView,
   SearchInput,
   ImageCarousel,

package/index.js

@@ -60,6 +60,8 @@ export { default as InputTags } from './components/InputTags.js';
 export { default as InputDatalist } from './components/InputDatalist.js';
 export { default as Banner } from './components/Banner.js';
 export { default as Chart } from './components/Chart.js';
+export { default as SliverAppBar } from './components/SliverAppBar.js';
+export { default as AudioPlayer } from './components/AudioPlayer.js';
 
 // Utils
 export { default as SafeArea } from './utils/SafeArea.js';
@@ -78,6 +80,7 @@ export { default as WebSocketClient } from './utils/WebSocketClient.js';
 export { default as AnimationEngine } from './utils/AnimationEngine.js';
 export { default as CryptoManager } from './utils/CryptoManager.js';
 export { default as NotificationManager } from './utils/NotificationManager.js';
+export { default as DevTools } from './utils/DevTools.js';
 
 // Features
 export { default as PullToRefresh } from './features/PullToRefresh.js';
@@ -101,7 +104,7 @@ export { default as FeatureFlags } from './manager/FeatureFlags.js';
 
 // Version du framework
 
-export const VERSION = '0.3.21';
+export const VERSION = '0.3.24';
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasframework",
-  "version": "0.3.22",
+  "version": "0.3.24",
   "description": "Canvas-based cross-platform UI framework (Material & Cupertino)",
   "type": "module",
   "main": "./index.js",