leaflet-theme-control 0.1.3 → 0.1.5

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.5",
   "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",
@@ -38,31 +38,31 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/kristjanesperanto/leaflet-theme-control.git"
+    "url": "git+https://github.com/KristjanESPERANTO/leaflet-theme-control.git"
   },
   "bugs": {
-    "url": "https://github.com/kristjanesperanto/leaflet-theme-control/issues"
+    "url": "https://github.com/KristjanESPERANTO/leaflet-theme-control/issues"
   },
-  "homepage": "https://kristjanesperanto.github.io/leaflet-theme-control/",
+  "homepage": "https://KristjanESPERANTO.github.io/leaflet-theme-control/",
   "peerDependencies": {
     "leaflet": ">=2.0.0-alpha.1"
   },
   "devDependencies": {
-    "@eslint/css": "^0.14.1",
-    "@eslint/js": "^9.39.2",
+    "@eslint/css": "^1.0.0",
+    "@eslint/js": "^10.0.1",
     "@eslint/markdown": "^7.5.1",
-    "@stylistic/eslint-plugin": "^5.6.1",
+    "@stylistic/eslint-plugin": "^5.10.0",
     "commit-and-tag-version": "^12.6.1",
-    "eslint": "^9.39.2",
-    "eslint-plugin-import-x": "^4.16.1",
-    "eslint-plugin-jsdoc": "^61.5.0",
-    "globals": "^16.5.0",
-    "happy-dom": "^20.0.11",
+    "eslint": "^10.0.3",
+    "eslint-plugin-import-x": "^4.16.2",
+    "eslint-plugin-jsdoc": "^62.8.0",
+    "globals": "^17.4.0",
+    "happy-dom": "^20.8.4",
     "leaflet": "^2.0.0-alpha.1",
-    "lint-staged": "^16.2.7",
-    "prettier": "^3.7.4",
+    "lint-staged": "^16.4.0",
+    "prettier": "^3.8.1",
     "simple-git-hooks": "^2.13.1",
-    "vitest": "^4.0.16"
+    "vitest": "^4.1.0"
   },
   "scripts": {
     "test": "npm run lint && vitest run",

package/src/leaflet-theme-control.js

@@ -33,22 +33,19 @@ export class ThemeControl extends Control {
   initialize(options) {
     Util.setOptions(this, options)
 
-    // Create deep copies of themes to avoid mutating DEFAULT_THEMES
-    // This is necessary because spread operator only does shallow copies
-    if (this.options.themes) {
-      // User provided custom themes - create deep copies of each theme
-      const themesCopy = {}
-      Object.keys(this.options.themes).forEach((key) => {
-        themesCopy[key] = { ...this.options.themes[key] }
-      })
-      this.options.themes = themesCopy
-    }
-    else {
-      // No themes provided - use copies of DEFAULT_THEMES
-      this.options.themes = {}
-      Object.keys(DEFAULT_THEMES).forEach((key) => {
-        this.options.themes[key] = { ...DEFAULT_THEMES[key] }
-      })
+    // Create shallow copies of themes to avoid mutating the source objects
+    this.options.themes = this._shallowCopyThemes(
+      this.options.themes || DEFAULT_THEMES,
+    )
+
+    // 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
@@ -250,32 +247,12 @@ export class ThemeControl extends Control {
     const controlStyle = theme.controlStyle || 'light'
     this.root.setAttribute('data-control-style', controlStyle)
 
-    // Remove all theme classes from root
-    Object.values(this.options.themes).forEach((t) => {
-      if (t.className) {
-        this.root.classList.remove(t.className)
-      }
-    })
-
-    // Add current theme class to root
-    if (theme.className) {
-      this.root.classList.add(theme.className)
-    }
-
-    // Also apply theme class to control container if map exists
+    // Apply theme classes to root and control container
+    this._applyThemeClasses(this.root, theme)
     if (this.map) {
       const controlContainer = this.map.getContainer().querySelector('.leaflet-control-container')
       if (controlContainer) {
-        // Remove all theme classes from control container
-        Object.values(this.options.themes).forEach((t) => {
-          if (t.className) {
-            controlContainer.classList.remove(t.className)
-          }
-        })
-        // Add current theme class
-        if (theme.className) {
-          controlContainer.classList.add(theme.className)
-        }
+        this._applyThemeClasses(controlContainer, theme)
       }
     }
 
@@ -336,6 +313,29 @@ export class ThemeControl extends Control {
     }
   }
 
+  /**
+   * Shallow-copy each theme object from the given source.
+   * @param {object} source - Theme map to copy
+   * @returns {object} New object with copied themes
+   */
+  _shallowCopyThemes(source) {
+    return Object.fromEntries(
+      Object.entries(source).map(([key, theme]) => [key, { ...theme }]),
+    )
+  }
+
+  /**
+   * Remove all theme classes from an element, then add the active one.
+   * @param {HTMLElement} el - Target element
+   * @param {object} theme - Currently active theme config
+   */
+  _applyThemeClasses(el, theme) {
+    for (const t of Object.values(this.options.themes)) {
+      if (t.className) el.classList.remove(t.className)
+    }
+    if (theme.className) el.classList.add(theme.className)
+  }
+
   getCurrentTheme() {
     return this.currentTheme
   }

package/src/leaflet-theme-editor.js

@@ -1,6 +1,48 @@
 import { DomEvent, DomUtil } from 'leaflet'
 import { DEFAULT_THEMES } from './leaflet-theme-control-themes.js'
 
+/** Default editor UI labels (allocated once, reused on every _getLabel call) */
+const DEFAULT_LABELS = {
+  selectTheme: 'Select Theme',
+  customize: 'Customize',
+  close: 'Close',
+  back: 'Back',
+  resetToDefault: 'Reset to Default',
+  customizeTheme: 'Customize this theme',
+  customBadge: 'Custom',
+  controlStyle: 'Control Style',
+  lightControls: 'Light',
+  darkControls: 'Dark',
+  invert: 'Invert',
+  hueRotate: 'Hue Rotate',
+  saturate: 'Saturate',
+  brightness: 'Brightness',
+  contrast: 'Contrast',
+  sepia: 'Sepia',
+  grayscaleFilter: 'Grayscale',
+  themeButton: 'Theme',
+}
+
+/**
+ * Filter definitions: key → { cssName, regex, defaultValue }
+ * Used by both _parseFilterString and _isThemeModified.
+ */
+const FILTER_DEFS = [
+  { key: 'invert', css: 'invert', default: 0 },
+  { key: 'hueRotate', css: 'hue-rotate', default: 0, unit: 'deg' },
+  { key: 'saturate', css: 'saturate', default: 1 },
+  { key: 'brightness', css: 'brightness', default: 1 },
+  { key: 'contrast', css: 'contrast', default: 1 },
+  { key: 'sepia', css: 'sepia', default: 0 },
+  { key: 'grayscale', css: 'grayscale', default: 0 },
+]
+
+// Pre-compiled regexes (one per filter, built from FILTER_DEFS)
+const FILTER_REGEXES = FILTER_DEFS.map(({ css, unit }) => {
+  const unitPattern = unit ? unit : ''
+  return new RegExp(`${css}\\(([\\d.]+)${unitPattern}\\)`)
+})
+
 /**
  * ThemeEditor - UI for selecting and editing themes
  *
@@ -16,6 +58,9 @@ export class ThemeEditor {
     this.currentView = 'selector' // 'selector' or 'editor'
     this.editingTheme = null
 
+    // AbortController for automatic event cleanup
+    this._abortController = new AbortController()
+
     // Storage key for custom filters
     this.storageKey = `${themeControl.options.storageKey}-custom-filters`
 
@@ -117,12 +162,12 @@ export class ThemeEditor {
 
     this.panel = panel
 
-    // Close on ESC key
-    this._onKeyDown = (e) => {
+    // Close on ESC key (listener lives for the lifetime of the panel)
+    document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape' && this.isOpen) {
         this.close()
       }
-    }
+    }, { signal: this._abortController.signal })
 
     return panel
   }
@@ -133,29 +178,7 @@ export class ThemeEditor {
       return this.themeControl.options.getEditorLabels(key)
     }
 
-    // Default labels
-    const labels = {
-      selectTheme: 'Select Theme',
-      customize: 'Customize',
-      close: 'Close',
-      back: 'Back',
-      resetToDefault: 'Reset to Default',
-      customizeTheme: 'Customize this theme',
-      customBadge: 'Custom',
-      controlStyle: 'Control Style',
-      lightControls: 'Light',
-      darkControls: 'Dark',
-      invert: 'Invert',
-      hueRotate: 'Hue Rotate',
-      saturate: 'Saturate',
-      brightness: 'Brightness',
-      contrast: 'Contrast',
-      sepia: 'Sepia',
-      grayscaleFilter: 'Grayscale',
-      themeButton: 'Theme',
-    }
-
-    return labels[key] || key
+    return DEFAULT_LABELS[key] || key
   }
 
   openThemeSelector() {
@@ -166,9 +189,6 @@ export class ThemeEditor {
     this.panel.style.display = 'block'
     this._renderThemeSelector()
 
-    // Add keyboard listener
-    document.addEventListener('keydown', this._onKeyDown)
-
     // Focus first interactive element
     setTimeout(() => {
       const firstBtn = this.panel.querySelector('.theme-select-btn')
@@ -202,9 +222,6 @@ export class ThemeEditor {
     this.panel.style.display = 'none'
     this.currentView = 'selector'
     this.editingTheme = null
-
-    // Remove keyboard listener
-    document.removeEventListener('keydown', this._onKeyDown)
   }
 
   _isThemeModified(themeKey) {
@@ -244,11 +261,8 @@ export class ThemeEditor {
       this.close()
     }
 
-    // Remove keyboard listener (in case close() wasn't called)
-    if (this._onKeyDown) {
-      document.removeEventListener('keydown', this._onKeyDown)
-      this._onKeyDown = null
-    }
+    // Abort all event listeners
+    this._abortController.abort()
 
     // Remove panel from DOM
     if (this.panel && this.panel.parentNode) {
@@ -454,13 +468,13 @@ export class ThemeEditor {
     body.appendChild(this._createControlStyleSelector(controlStyle))
 
     // Filter sliders
-    body.appendChild(this._createSlider('invert', filterValues.invert || 0, 0, 1, 0.1))
-    body.appendChild(this._createSlider('hueRotate', filterValues.hueRotate || 0, 0, 360, 1, '°'))
-    body.appendChild(this._createSlider('saturate', filterValues.saturate || 1, 0, 2, 0.1))
-    body.appendChild(this._createSlider('brightness', filterValues.brightness || 1, 0, 2, 0.1))
-    body.appendChild(this._createSlider('contrast', filterValues.contrast || 1, 0, 2, 0.1))
-    body.appendChild(this._createSlider('sepia', filterValues.sepia || 0, 0, 1, 0.1))
-    body.appendChild(this._createSlider('grayscale', filterValues.grayscale || 0, 0, 1, 0.1))
+    body.appendChild(this._createSlider('invert', filterValues.invert ?? 0, 0, 1, 0.1))
+    body.appendChild(this._createSlider('hueRotate', filterValues.hueRotate ?? 0, 0, 360, 1, '°'))
+    body.appendChild(this._createSlider('saturate', filterValues.saturate ?? 1, 0, 2, 0.1))
+    body.appendChild(this._createSlider('brightness', filterValues.brightness ?? 1, 0, 2, 0.1))
+    body.appendChild(this._createSlider('contrast', filterValues.contrast ?? 1, 0, 2, 0.1))
+    body.appendChild(this._createSlider('sepia', filterValues.sepia ?? 0, 0, 1, 0.1))
+    body.appendChild(this._createSlider('grayscale', filterValues.grayscale ?? 0, 0, 1, 0.1))
 
     return body
   }
@@ -593,16 +607,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 +624,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
@@ -631,64 +645,32 @@ export class ThemeEditor {
   }
 
   _buildFilterString(values) {
+    const EPS = 0.01
     const parts = []
 
-    if (values.invert > 0) parts.push(`invert(${values.invert})`)
-    if (values.hueRotate !== 0) parts.push(`hue-rotate(${values.hueRotate}deg)`)
-    if (values.saturate !== 1) parts.push(`saturate(${values.saturate})`)
-    if (values.brightness !== 1) parts.push(`brightness(${values.brightness})`)
-    if (values.contrast !== 1) parts.push(`contrast(${values.contrast})`)
-    if (values.sepia > 0) parts.push(`sepia(${values.sepia})`)
-    if (values.grayscale > 0) parts.push(`grayscale(${values.grayscale})`)
+    if (values.invert > EPS) parts.push(`invert(${values.invert})`)
+    if (Math.abs(values.hueRotate) > EPS) parts.push(`hue-rotate(${values.hueRotate}deg)`)
+    if (Math.abs(values.saturate - 1) > EPS) parts.push(`saturate(${values.saturate})`)
+    if (Math.abs(values.brightness - 1) > EPS) parts.push(`brightness(${values.brightness})`)
+    if (Math.abs(values.contrast - 1) > EPS) parts.push(`contrast(${values.contrast})`)
+    if (values.sepia > EPS) parts.push(`sepia(${values.sepia})`)
+    if (values.grayscale > EPS) parts.push(`grayscale(${values.grayscale})`)
 
     return parts.join(' ')
   }
 
   _parseFilterString(filterString) {
-    if (!filterString) {
-      return {
-        invert: 0,
-        hueRotate: 0,
-        saturate: 1,
-        brightness: 1,
-        contrast: 1,
-        sepia: 0,
-        grayscale: 0,
+    const values = {}
+    for (let i = 0; i < FILTER_DEFS.length; i++) {
+      const { key, default: def } = FILTER_DEFS[i]
+      if (filterString) {
+        const match = filterString.match(FILTER_REGEXES[i])
+        values[key] = match ? parseFloat(match[1]) : def
+      }
+      else {
+        values[key] = def
       }
     }
-
-    const values = {
-      invert: 0,
-      hueRotate: 0,
-      saturate: 1,
-      brightness: 1,
-      contrast: 1,
-      sepia: 0,
-      grayscale: 0,
-    }
-
-    // Parse each filter function
-    const invertMatch = filterString.match(/invert\(([\d.]+)\)/)
-    if (invertMatch) values.invert = parseFloat(invertMatch[1])
-
-    const hueMatch = filterString.match(/hue-rotate\(([\d.]+)deg\)/)
-    if (hueMatch) values.hueRotate = parseFloat(hueMatch[1])
-
-    const saturateMatch = filterString.match(/saturate\(([\d.]+)\)/)
-    if (saturateMatch) values.saturate = parseFloat(saturateMatch[1])
-
-    const brightnessMatch = filterString.match(/brightness\(([\d.]+)\)/)
-    if (brightnessMatch) values.brightness = parseFloat(brightnessMatch[1])
-
-    const contrastMatch = filterString.match(/contrast\(([\d.]+)\)/)
-    if (contrastMatch) values.contrast = parseFloat(contrastMatch[1])
-
-    const sepiaMatch = filterString.match(/sepia\(([\d.]+)\)/)
-    if (sepiaMatch) values.sepia = parseFloat(sepiaMatch[1])
-
-    const grayscaleMatch = filterString.match(/grayscale\(([\d.]+)\)/)
-    if (grayscaleMatch) values.grayscale = parseFloat(grayscaleMatch[1])
-
     return values
   }
 }

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