canvasframework 0.5.18 → 0.5.20

package/core/Component.js

@@ -0,0 +1,243 @@
+/**
+ * Classe de base pour tous les composants
+ * @class
+ * @abstract
+ * @property {CanvasFramework} framework - Référence au framework parent
+ * @property {number} x - Position X
+ * @property {number} y - Position Y
+ * @property {number} width - Largeur
+ * @property {number} height - Hauteur
+ * @property {boolean} visible - Visibilité du composant
+ * @property {boolean} pressed - État pressé
+ * @property {boolean} hovered - État survolé
+ * @property {Function} onClick - Callback au clic
+ * @property {Function} onPress - Callback à la pression
+ */
+class Component {
+  /**
+   * Crée une instance de Component
+   * @param {CanvasFramework} framework - Framework parent
+   * @param {Object} [options={}] - Options de configuration
+   * @param {number} [options.x=0] - Position X
+   * @param {number} [options.y=0] - Position Y
+   * @param {number} [options.width=100] - Largeur
+   * @param {number} [options.height=50] - Hauteur
+   * @param {boolean} [options.visible=true] - Visibilité
+   * @param {Function} [options.onClick] - Callback au clic
+   * @param {Function} [options.onPress] - Callback à la pression
+   */
+  constructor(framework, options = {}) {
+    this.framework = framework;
+    this.x = options.x || 0;
+    this.y = options.y || 0;
+    this.width = options.width || 100;
+    this.height = options.height || 50;
+    this.visible = options.visible !== false;
+    this.pressed = false;
+    this.hovered = false;
+    this.onClick = options.onClick;
+    this.onPress = options.onPress;
+    
+    // Système dirty simple (optionnel)
+    this._dirty = true;
+    
+    // Lifecycle
+    this._mounted = false;
+
+    // Pour détecter les updates
+    this._prevProps = { ...options };
+	
+	// Système de listeners
+    this._listeners = new Map();
+  }
+
+  /**
+   * Ajoute un listener pour un événement
+   * @param {string} event - Nom de l'événement
+   * @param {Function} handler - Fonction callback
+   * @returns {Component} - Pour le chaînage
+   */
+  on(event, handler) {
+    if (!this._listeners.has(event)) {
+      this._listeners.set(event, []);
+    }
+    this._listeners.get(event).push(handler);
+    return this;
+  }
+
+  /**
+   * Retire un listener
+   * @param {string} event - Nom de l'événement
+   * @param {Function} handler - Fonction à retirer
+   * @returns {Component}
+   */
+  off(event, handler) {
+    if (!this._listeners.has(event)) return this;
+    
+    const handlers = this._listeners.get(event);
+    const index = handlers.indexOf(handler);
+    if (index > -1) {
+      handlers.splice(index, 1);
+    }
+    return this;
+  }
+
+  /**
+   * Ajoute un listener qui s'exécute une seule fois
+   * @param {string} event - Nom de l'événement
+   * @param {Function} handler - Fonction callback
+   * @returns {Component}
+   */
+  once(event, handler) {
+    const wrapper = (...args) => {
+      handler(...args);
+      this.off(event, wrapper);
+    };
+    return this.on(event, wrapper);
+  }
+
+  /**
+   * Émet un événement
+   * @param {string} event - Nom de l'événement
+   * @param {...any} args - Arguments à passer aux handlers
+   * @returns {Component}
+   */
+  emit(event, ...args) {
+    if (!this._listeners.has(event)) return this;
+    
+    const handlers = this._listeners.get(event);
+    for (let handler of handlers) {
+      try {
+        handler(...args);
+      } catch (error) {
+        console.error(`Error in ${event} handler:`, error);
+      }
+    }
+    return this;
+  }
+
+  /**
+   * Retire tous les listeners d'un événement (ou tous)
+   * @param {string} [event] - Nom de l'événement (optionnel)
+   * @returns {Component}
+   */
+  removeAllListeners(event) {
+    if (event) {
+      this._listeners.delete(event);
+    } else {
+      this._listeners.clear();
+    }
+    return this;
+  }
+
+  /**
+   * Retourne le nombre de listeners pour un événement
+   * @param {string} event - Nom de l'événement
+   * @returns {number}
+   */
+  listenerCount(event) {
+    return this._listeners.has(event) ? this._listeners.get(event).length : 0;
+  }	
+  /* =======================
+     LIFECYCLE HOOKS
+     ======================= */
+
+  onMount() {}
+  onUnmount() {}
+  onUpdate(prevProps) {}
+  onResize(width, height) {}
+
+  /* ======================= */
+
+  _mount() {
+    if (!this._mounted) {
+      this._mounted = true;
+      this.onMount();
+    }
+  }
+
+  _unmount() {
+    if (this._mounted) {
+      this.onUnmount();
+      this._mounted = false;
+    }
+  }
+
+  _update(newProps) {
+    this.onUpdate(this._prevProps);
+    this._prevProps = { ...newProps };
+    this.markDirty();
+  }
+
+  _resize(width, height) {
+    this.onResize(width, height);
+    this.markDirty();
+  }
+
+  setProps(newProps = {}) {
+    const changed = Object.keys(newProps).some(
+      key => this[key] !== newProps[key]
+    );
+
+    if (!changed) return;
+
+    Object.assign(this, newProps);
+    this._update(newProps);
+  }
+
+  measure(constraints) {
+    return {
+      width: this.width,
+      height: this.height
+    };
+  }
+
+  /**
+   * Marque le composant pour redessin
+   * Appelez cette méthode après avoir modifié une propriété
+   */
+  markDirty() {
+    this._dirty = true;
+    if (this.framework && this.framework.markComponentDirty) {
+      this.framework.markComponentDirty(this);
+    }
+  }
+
+  /**
+   * Marque le composant comme propre (appelé automatiquement après draw)
+   */
+  markClean() {
+    this._dirty = false;
+  }
+
+  /**
+   * Vérifie si le composant est dirty
+   */
+  isDirty() {
+    return this._dirty;
+  }
+
+  /**
+   * Vérifie si un point est dans les limites du composant
+   */
+  isPointInside(x, y) {
+    return x >= this.x && x <= this.x + this.width &&
+           y >= this.y && y <= this.y + this.height;
+  }
+
+  /**
+   * Méthode de dessin (à implémenter par les sous-classes)
+   */
+  draw(ctx) {
+    // À implémenter par les sous-classes
+  }
+}
+
+
+export default Component;
+
+
+
+
+
+

package/core/ThemeManager.js

@@ -0,0 +1,358 @@
+/**
+ * Gestionnaire de thèmes indépendant et fiable
+ * Gère automatiquement le light/dark mode avec persistance
+ */
+class ThemeManager {
+  constructor(framework, options = {}) {
+    this.framework = framework;
+    
+    // Thèmes par défaut (peuvent être overridés)
+    this.themes = {
+      light: options.lightTheme || {
+        // Couleurs de base
+        background: '#FFFFFF',
+        surface: '#F5F5F5',
+        surfaceVariant: '#E7E0EC',
+        
+        // Texte
+        text: '#1C1B1F',
+        textSecondary: '#49454F',
+        textDisabled: '#79747E',
+        
+        // Primaire
+        primary: '#6750A4',
+        onPrimary: '#FFFFFF',
+        primaryContainer: '#EADDFF',
+        onPrimaryContainer: '#21005D',
+        
+        // Secondaire
+        secondary: '#625B71',
+        onSecondary: '#FFFFFF',
+        secondaryContainer: '#E8DEF8',
+        onSecondaryContainer: '#1D192B',
+        
+        // Tertiaire
+        tertiary: '#7D5260',
+        onTertiary: '#FFFFFF',
+        tertiaryContainer: '#FFD8E4',
+        onTertiaryContainer: '#31111D',
+        
+        // Erreur
+        error: '#B3261E',
+        onError: '#FFFFFF',
+        errorContainer: '#F9DEDC',
+        onErrorContainer: '#410E0B',
+        
+        // Bordures et dividers
+        border: '#CAC4D0',
+        divider: '#E0E0E0',
+        outline: '#79747E',
+        outlineVariant: '#CAC4D0',
+        
+        // États
+        hover: 'rgba(103, 80, 164, 0.08)',
+        pressed: 'rgba(103, 80, 164, 0.12)',
+        focus: 'rgba(103, 80, 164, 0.12)',
+        disabled: 'rgba(28, 27, 31, 0.12)',
+        
+        // Ombres
+        shadow: 'rgba(0, 0, 0, 0.2)',
+        elevation1: 'rgba(0, 0, 0, 0.05)',
+        elevation2: 'rgba(0, 0, 0, 0.08)',
+        elevation3: 'rgba(0, 0, 0, 0.12)',
+      },
+      
+      dark: options.darkTheme || {
+        // Couleurs de base
+        background: '#1C1B1F',
+        surface: '#2B2930',
+        surfaceVariant: '#49454F',
+        
+        // Texte
+        text: '#E6E1E5',
+        textSecondary: '#CAC4D0',
+        textDisabled: '#938F99',
+        
+        // Primaire
+        primary: '#D0BCFF',
+        onPrimary: '#381E72',
+        primaryContainer: '#4F378B',
+        onPrimaryContainer: '#EADDFF',
+        
+        // Secondaire
+        secondary: '#CCC2DC',
+        onSecondary: '#332D41',
+        secondaryContainer: '#4A4458',
+        onSecondaryContainer: '#E8DEF8',
+        
+        // Tertiaire
+        tertiary: '#EFB8C8',
+        onTertiary: '#492532',
+        tertiaryContainer: '#633B48',
+        onTertiaryContainer: '#FFD8E4',
+        
+        // Erreur
+        error: '#F2B8B5',
+        onError: '#601410',
+        errorContainer: '#8C1D18',
+        onErrorContainer: '#F9DEDC',
+        
+        // Bordures et dividers
+        border: '#938F99',
+        divider: '#3D3D3D',
+        outline: '#938F99',
+        outlineVariant: '#49454F',
+        
+        // États
+        hover: 'rgba(208, 188, 255, 0.08)',
+        pressed: 'rgba(208, 188, 255, 0.12)',
+        focus: 'rgba(208, 188, 255, 0.12)',
+        disabled: 'rgba(230, 225, 229, 0.12)',
+        
+        // Ombres
+        shadow: 'rgba(0, 0, 0, 0.8)',
+        elevation1: 'rgba(0, 0, 0, 0.3)',
+        elevation2: 'rgba(0, 0, 0, 0.4)',
+        elevation3: 'rgba(0, 0, 0, 0.5)',
+      }
+    };
+    
+    // État actuel
+    this.currentMode = null; // 'light', 'dark', ou null (system)
+    this.currentTheme = null;
+    
+    // Callbacks
+    this.listeners = [];
+    
+    // Storage key
+    this.storageKey = options.storageKey || 'app-theme-mode';
+    
+    // Initialisation
+    this.init();
+  }
+  
+  /**
+   * Initialise le ThemeManager
+   */
+  init() {
+    // 1. Charger la préférence sauvegardée
+    const savedMode = this.loadPreference();
+    
+    // 2. Écouter les changements système
+    this.setupSystemListener();
+    
+    // 3. Appliquer le thème
+    if (savedMode) {
+      this.setMode(savedMode, false); // false = ne pas re-sauvegarder
+    } else {
+      this.setMode('system', false);
+    }
+  }
+  
+  /**
+   * Charge la préférence depuis le localStorage
+   */
+  loadPreference() {
+    try {
+      const saved = localStorage.getItem(this.storageKey);
+      if (saved && ['light', 'dark', 'system'].includes(saved)) {
+        return saved;
+      }
+    } catch (e) {
+      console.warn('Impossible de charger les préférences de thème:', e);
+    }
+    return null;
+  }
+  
+  /**
+   * Sauvegarde la préférence dans le localStorage
+   */
+  savePreference(mode) {
+    try {
+      localStorage.setItem(this.storageKey, mode);
+    } catch (e) {
+      console.warn('Impossible de sauvegarder les préférences de thème:', e);
+    }
+  }
+  
+  /**
+   * Configure l'écoute des changements système
+   */
+  setupSystemListener() {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    
+    const handleChange = (e) => {
+      // Ne réagir que si on est en mode 'system'
+      if (this.currentMode === 'system') {
+        this.applySystemTheme();
+      }
+    };
+    
+    // Méthode moderne
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', handleChange);
+    } else {
+      // Fallback pour anciens navigateurs
+      mediaQuery.addListener(handleChange);
+    }
+    
+    // Sauvegarder pour cleanup
+    this.systemMediaQuery = mediaQuery;
+    this.systemChangeHandler = handleChange;
+  }
+  
+  /**
+   * Applique le thème système
+   */
+  applySystemTheme() {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const theme = prefersDark ? this.themes.dark : this.themes.light;
+    this.applyTheme(theme);
+  }
+  
+  /**
+   * Définit le mode de thème
+   * @param {'light'|'dark'|'system'} mode
+   * @param {boolean} save - Sauvegarder la préférence
+   */
+  setMode(mode, save = true) {
+    if (!['light', 'dark', 'system'].includes(mode)) {
+      console.warn(`Mode invalide: ${mode}. Utilisez 'light', 'dark' ou 'system'.`);
+      return;
+    }
+    
+    this.currentMode = mode;
+    
+    // Sauvegarder si demandé
+    if (save) {
+      this.savePreference(mode);
+    }
+    
+    // Appliquer le thème correspondant
+    if (mode === 'system') {
+      this.applySystemTheme();
+    } else {
+      const theme = this.themes[mode];
+      this.applyTheme(theme);
+    }
+  }
+  
+  /**
+   * Applique un thème au framework
+   */
+  applyTheme(theme) {
+    this.currentTheme = theme;
+    
+    // Mettre à jour le framework
+    if (this.framework) {
+      this.framework.theme = theme;
+      
+      // Forcer le rendu de tous les composants
+      if (this.framework.components) {
+        this.framework.components.forEach(comp => {
+          if (comp.markDirty) {
+            comp.markDirty();
+          }
+        });
+      }
+    }
+    
+    // Notifier les listeners
+    this.notifyListeners(theme);
+  }
+  
+  /**
+   * Obtient le mode actuel
+   */
+  getMode() {
+    return this.currentMode;
+  }
+  
+  /**
+   * Obtient le thème actuel
+   */
+  getTheme() {
+    return this.currentTheme;
+  }
+  
+  /**
+   * Obtient une couleur spécifique
+   */
+  getColor(colorName) {
+    return this.currentTheme?.[colorName] || '#000000';
+  }
+  
+  /**
+   * Bascule entre light et dark
+   */
+  toggle() {
+    if (this.currentMode === 'system') {
+      // Si en mode system, basculer vers le mode opposé
+      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      this.setMode(isDark ? 'light' : 'dark');
+    } else {
+      // Basculer entre light et dark
+      this.setMode(this.currentMode === 'light' ? 'dark' : 'light');
+    }
+  }
+  
+  /**
+   * Ajoute un listener de changement de thème
+   */
+  addListener(callback) {
+    if (typeof callback === 'function') {
+      this.listeners.push(callback);
+      // Appeler immédiatement avec le thème actuel
+      callback(this.currentTheme);
+    }
+  }
+  
+  /**
+   * Retire un listener
+   */
+  removeListener(callback) {
+    const index = this.listeners.indexOf(callback);
+    if (index > -1) {
+      this.listeners.splice(index, 1);
+    }
+  }
+  
+  /**
+   * Notifie tous les listeners
+   */
+  notifyListeners(theme) {
+    this.listeners.forEach(callback => {
+      try {
+        callback(theme);
+      } catch (e) {
+        console.error('Erreur dans un listener de thème:', e);
+      }
+    });
+  }
+  
+  /**
+   * Définit un thème personnalisé
+   */
+  setCustomTheme(name, theme) {
+    this.themes[name] = theme;
+  }
+  
+  /**
+   * Nettoie les ressources
+   */
+  destroy() {
+    // Retirer l'écoute système
+    if (this.systemMediaQuery && this.systemChangeHandler) {
+      if (this.systemMediaQuery.removeEventListener) {
+        this.systemMediaQuery.removeEventListener('change', this.systemChangeHandler);
+      } else {
+        this.systemMediaQuery.removeListener(this.systemChangeHandler);
+      }
+    }
+    
+    // Vider les listeners
+    this.listeners = [];
+  }
+}
+
+export default ThemeManager;