leaflet-theme-control 0.1.3 → 0.1.4

package/README.md

@@ -8,13 +8,13 @@ A Leaflet control for switching between visual themes using CSS filters. Perfect
 
 - **Multiple themes**: Light, Dark, Grayscale, Custom
 - **Theme Editor**: Customize filters with live preview sliders (optional)
-- ♿ **Accessibility**: Adaptable themes for better visibility
+- **Accessibility**: Adaptable themes for better visibility
 - **CSS Filters**: No need for multiple tile sources
 - **Persistent**: Saves user preference in localStorage
 - **System Detection**: Automatically detects OS dark mode preference
 - **i18n Ready**: Customizable labels with auto-update on language change
 - **Lightweight**: Zero dependencies (except Leaflet)
-- ⚡ **Performance**: Instant theme switching without reloading tiles
+- **Performance**: Instant theme switching without reloading tiles
 
 ## Installation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet-theme-control",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A Leaflet control for switching between visual themes (light, dark, grayscale, custom, etc.) using CSS filters",
   "main": "src/leaflet-theme-control.js",
   "module": "src/leaflet-theme-control.js",

package/src/leaflet-theme-control.js

@@ -51,6 +51,16 @@ export class ThemeControl extends Control {
       })
     }
 
+    // Store original themes for reset functionality in editor
+    // This ensures reset uses user-provided values, not DEFAULT_THEMES
+    this.originalThemes = {}
+    for (const [key, theme] of Object.entries(this.options.themes)) {
+      this.originalThemes[key] = {
+        filter: theme.filter,
+        controlStyle: theme.controlStyle,
+      }
+    }
+
     this.root = document.documentElement
     this.savedTheme = localStorage.getItem(this.options.storageKey)
 

package/src/leaflet-theme-editor.js

@@ -593,16 +593,16 @@ export class ThemeEditor {
     delete this.customFilters[themeKey]
     this._saveCustomFilters()
 
-    // Restore default filter and controlStyle from DEFAULT_THEMES
+    // Restore original filter and controlStyle from user-provided themes
     // but KEEP user-defined properties like applyToSelectors
-    const defaultTheme = DEFAULT_THEMES[themeKey]
+    const originalTheme = this.themeControl.originalThemes[themeKey]
     const currentTheme = this.themeControl.options.themes[themeKey]
 
-    if (defaultTheme && currentTheme) {
+    if (originalTheme && currentTheme) {
       // Only reset the editable properties (filter, controlStyle)
       // Keep other properties like applyToSelectors, icon, label, className
-      currentTheme.filter = defaultTheme.filter
-      currentTheme.controlStyle = defaultTheme.controlStyle
+      currentTheme.filter = originalTheme.filter
+      currentTheme.controlStyle = originalTheme.controlStyle
     }
     else if (!currentTheme) {
       // Theme doesn't exist - this shouldn't happen
@@ -610,8 +610,8 @@ export class ThemeEditor {
       return
     }
     else {
-      // For custom themes not in DEFAULT_THEMES, we can't reset
-      console.warn(`Theme "${themeKey}" has no default in DEFAULT_THEMES, cannot reset filter values`)
+      // For themes not in originalThemes, we can't reset
+      console.warn(`Theme "${themeKey}" has no original values, cannot reset filter values`)
     }
 
     // Reapply theme if it's currently active

package/types/index.d.ts

@@ -130,6 +130,28 @@ declare module "leaflet" {
     panelZIndex?: number;
   }
 
+  /**
+   * Theme editor for customizing theme filters.
+   * Only available when enableEditor is true.
+   */
+  class ThemeEditor {
+    /**
+     * Opens the theme selector panel.
+     */
+    openThemeSelector(): void;
+
+    /**
+     * Opens the theme editor for a specific theme.
+     * @param themeKey - The key of the theme to edit
+     */
+    openThemeEditor(themeKey: string): void;
+
+    /**
+     * Closes the editor panel.
+     */
+    close(): void;
+  }
+
   /**
    * Leaflet control for switching between visual themes.
    *
@@ -156,6 +178,11 @@ declare module "leaflet" {
   class ThemeControl extends Control {
     options: ThemeControlOptions;
 
+    /**
+     * Theme editor instance (only available when enableEditor is true).
+     */
+    editor?: ThemeEditor;
+
     /**
      * Creates a new ThemeControl instance.
      * @param options - Configuration options