raintee-maputils 1.0.36 → 1.0.37

package/dist/index.js

@@ -7195,325 +7195,78 @@ class CustomOptionsControl {
     }
 }
 
-// 自定义控件类：ToggleControl（带搜索过滤功能）
+// 自定义控件类：ToggleControl
 class CustomToggleControl {
     /**
      * 构造函数
      * @param {Object} options
-     * @param {string} options.name - 控件名称
-     * @param {string} options.field - 控制的字段名
-     * @param {boolean} options.defaultValue - 默认值
-     * @param {string} options.svgIcon - SVG 图标字符串
-     * @param {Function} [options.onToggle] - 状态切换回调
-     * @param {Array} [options.options] - 可选项目数组 [{id, name, icon?}]
-     * @param {Function} [options.onOptionSelect] - 选项选择回调
-     * @param {boolean} [options.showSearch] - 是否显示搜索框，默认 true
+     * @param {string} options.name - 控件名称（用于识别，可选展示）
+     * @param {string} options.field - 控制的字段名，对应 map.SourceMap[field]
+     * @param {boolean} options.defaultValue - 默认值（当 field 未定义时使用）
+     * @param {string} options.svgIcon - SVG 图标字符串，例如 '<svg>...</svg>'
+     * @param {Function} [options.onToggle] - 可选的回调函数，状态切换后调用，参数为最新的布尔值
      */
-    constructor({
-        name,
-        field,
-        defaultValue = false,
-        svgIcon,
-        onToggle,
-        options = [],
-        onOptionSelect,
-        showSearch = true
-    }) {
+    constructor({ name, field, defaultValue = false, svgIcon, onToggle }) {
         this.name = name;
         this.field = field;
         this.defaultValue = defaultValue;
         this.svgIcon = svgIcon;
-        this.onToggle = onToggle;
-        this.options = options; // 可选项目
-        this.onOptionSelect = onOptionSelect; // 选项选择回调
-        this.showSearch = showSearch; // 是否显示搜索框
+        this.onToggle = onToggle; // ✅ 新增：回调函数
 
-        // 控件状态
+        // 控件容器
         this._container = null;
         this._button = null;
-        this._dropdown = null;
-        this._searchInput = null;
-        this._optionsList = null;
-        this.isActive = false;
-        this.isDropdownOpen = false;
-        this.filteredOptions = [...options]; // 过滤后的选项
-
-        // 绑定事件处理函数
-        this._boundHandleClickOutside = this._handleClickOutside.bind(this);
+        this.isActive = false; // 当前是否为激活状态（高亮/true）
     }
 
     // Mapbox 要求的 onAdd 方法
     onAdd(map) {
         this.map = map;
 
-        // 创建外层容器
+        // 创建外层容器 div
         this._container = document.createElement('div');
-        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group custom-toggle-control';
+        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
 
-        // 创建主按钮
+        // 创建 button 元素
         this._button = document.createElement('button');
         this._button.type = 'button';
         this._button.innerHTML = this.svgIcon;
-        this._button.title = this.name;
 
         // 设置按钮样式
-        this._setupButtonStyles();
+        this._button.style.cursor = 'pointer';
+        this._button.style.border = 'none';
+        this._button.style.background = 'none';
+        this._button.style.padding = '0';
+        this._button.style.display = 'flex';
+        this._button.style.alignItems = 'center';
+        this._button.style.justifyContent = 'center';
 
         // 初始化状态
         this.updateStatus();
 
-        // 绑定事件
-        this._button.addEventListener('click', (e) => {
-            e.stopPropagation();
+        // 绑定点击事件
+        this._button.addEventListener('click', () => {
             this.toggle();
         });
 
         this._container.appendChild(this._button);
 
-        // 创建下拉菜单（如果有选项）
-        if (this.options.length > 0) {
-            this._createDropdown();
-        }
-
         return this._container;
     }
 
-    // 设置按钮样式
-    _setupButtonStyles() {
-        Object.assign(this._button.style, {
-            cursor: 'pointer',
-            border: 'none',
-            background: 'none',
-            padding: '8px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: '4px',
-            transition: 'all 0.2s ease'
-        });
-    }
-
-    // 创建下拉菜单
-    _createDropdown() {
-        // 创建下拉容器
-        this._dropdown = document.createElement('div');
-        this._dropdown.className = 'custom-toggle-dropdown';
-        Object.assign(this._dropdown.style, {
-            position: 'absolute',
-            top: '100%',
-            right: '0',
-            backgroundColor: 'white',
-            border: '1px solid #ccc',
-            borderRadius: '4px',
-            boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
-            zIndex: '1000',
-            minWidth: '200px',
-            maxWidth: '300px',
-            display: 'none',
-            marginTop: '4px'
-        });
-
-        // 创建搜索框（如果需要）
-        if (this.showSearch && this.options.length > 5) {
-            this._createSearchBox();
-        }
-
-        // 创建选项列表
-        this._createOptionsList();
-
-        this._container.appendChild(this._dropdown);
-    }
-
-    // 创建搜索框
-    _createSearchBox() {
-        const searchContainer = document.createElement('div');
-        Object.assign(searchContainer.style, {
-            padding: '8px',
-            borderBottom: '1px solid #eee'
-        });
-
-        this._searchInput = document.createElement('input');
-        this._searchInput.type = 'text';
-        this._searchInput.placeholder = '搜索...';
-        this._searchInput.style.cssText = `
-            width: 100%;
-            padding: 6px 8px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            fontSize: 12px;
-            outline: none;
-            box-sizing: border-box;
-        `;
-
-        // 绑定搜索事件
-        this._searchInput.addEventListener('input', (e) => {
-            this._filterOptions(e.target.value);
-        });
-
-        // 阻止下拉菜单关闭
-        this._searchInput.addEventListener('click', (e) => {
-            e.stopPropagation();
-        });
-
-        searchContainer.appendChild(this._searchInput);
-        this._dropdown.appendChild(searchContainer);
-    }
-
-    // 创建选项列表
-    _createOptionsList() {
-        this._optionsList = document.createElement('div');
-        Object.assign(this._optionsList.style, {
-            maxHeight: '200px',
-            overflowY: 'auto',
-            padding: '4px 0'
-        });
-
-        this._renderOptionsList();
-        this._dropdown.appendChild(this._optionsList);
-    }
-
-    // 渲染选项列表
-    _renderOptionsList() {
-        if (!this._optionsList) return;
-
-        this._optionsList.innerHTML = '';
-
-        this.filteredOptions.forEach(option => {
-            const optionItem = document.createElement('div');
-            optionItem.className = 'custom-toggle-option';
-            optionItem.dataset.id = option.id;
-
-            Object.assign(optionItem.style, {
-                padding: '8px 12px',
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '8px',
-                fontSize: '13px',
-                transition: 'background-color 0.2s'
-            });
-
-            // 添加图标（如果有）
-            if (option.icon) {
-                const icon = document.createElement('span');
-                icon.innerHTML = option.icon;
-                icon.style.fontSize = '14px';
-                optionItem.appendChild(icon);
-            }
-
-            // 添加文本
-            const text = document.createElement('span');
-            text.textContent = option.name;
-            optionItem.appendChild(text);
-
-            // 绑定点击事件
-            optionItem.addEventListener('click', (e) => {
-                e.stopPropagation();
-                this._selectOption(option);
-            });
-
-            // 鼠标悬停效果
-            optionItem.addEventListener('mouseenter', () => {
-                optionItem.style.backgroundColor = '#f5f5f5';
-            });
-
-            optionItem.addEventListener('mouseleave', () => {
-                optionItem.style.backgroundColor = 'transparent';
-            });
-
-            this._optionsList.appendChild(optionItem);
-        });
-
-        // 如果没有匹配的选项
-        if (this.filteredOptions.length === 0) {
-            const noResults = document.createElement('div');
-            noResults.textContent = '无匹配项';
-            Object.assign(noResults.style, {
-                padding: '12px',
-                textAlign: 'center',
-                color: '#999',
-                fontSize: '12px'
-            });
-            this._optionsList.appendChild(noResults);
-        }
-    }
-
-    // 过滤选项
-    _filterOptions(searchTerm) {
-        const term = searchTerm.toLowerCase().trim();
-
-        if (!term) {
-            this.filteredOptions = [...this.options];
-        } else {
-            this.filteredOptions = this.options.filter(option =>
-                option.name.toLowerCase().includes(term) ||
-                (option.id && option.id.toString().toLowerCase().includes(term))
-            );
-        }
-
-        this._renderOptionsList();
-    }
-
-    // 选择选项
-    _selectOption(option) {
-        // 调用选项选择回调
-        if (this.onOptionSelect) {
-            this.onOptionSelect(option);
-        }
-
-        // 关闭下拉菜单
-        this.closeDropdown();
-    }
-
-    // 切换下拉菜单显示状态
-    toggle() {
-        if (this.isDropdownOpen) {
-            this.closeDropdown();
-        } else {
-            this.openDropdown();
-        }
-    }
-
-    // 打开下拉菜单
-    openDropdown() {
-        if (!this._dropdown || this.options.length === 0) return;
-
-        this.isDropdownOpen = true;
-        this._dropdown.style.display = 'block';
-
-        // 添加全局点击监听
-        document.addEventListener('click', this._boundHandleClickOutside);
-
-        // 聚焦搜索框
-        if (this._searchInput) {
-            setTimeout(() => {
-                this._searchInput.focus();
-                this._searchInput.value = '';
-                this._filterOptions('');
-            }, 100);
-        }
-    }
-
-    // 关闭下拉菜单
-    closeDropdown() {
-        if (!this._dropdown) return;
-
-        this.isDropdownOpen = false;
-        this._dropdown.style.display = 'none';
-
-        // 移除全局点击监听
-        document.removeEventListener('click', this._boundHandleClickOutside);
-    }
-
-    // 处理外部点击
-    _handleClickOutside(event) {
-        if (!this._container.contains(event.target)) {
-            this.closeDropdown();
+    // Mapbox 要求的 onRemove 方法
+    onRemove() {
+        if (this._container && this._container.parentNode) {
+            this._container.parentNode.removeChild(this._container);
         }
+        this.map = null;
+        this._container = null;
+        this._button = null;
     }
 
-    // 更新控件状态
+    // 更新控件状态（根据当前 field 值）
     updateStatus() {
+        // 从 map.SourceMap 中获取当前 field 的值，如果不存在则使用 defaultValue
         let currentValue = this.defaultValue;
 
         if (
@@ -7524,22 +7277,21 @@ class CustomToggleControl {
             currentValue = this.map.SourceMap[this.field];
         }
 
-        this.isActive = currentValue;
+        this.isActive = currentValue; // true 表示激活，false 表示未激活
 
         // 更新按钮样式
         if (this.isActive) {
             this._button.style.opacity = '1';
             this._button.style.filter = 'none';
-            this._button.style.backgroundColor = '#e6f3ff';
         } else {
-            this._button.style.opacity = '0.7';
+            this._button.style.opacity = '0.4';
             this._button.style.filter = 'grayscale(100%)';
-            this._button.style.backgroundColor = 'transparent';
         }
     }
 
-    // 切换状态（保持原有功能）
-    toggleState() {
+    // 切换状态
+    toggle() {
+        // 获取当前值
         let currentValue = this.defaultValue;
 
         if (
@@ -7550,34 +7302,22 @@ class CustomToggleControl {
             currentValue = this.map.SourceMap[this.field];
         }
 
+        // 切换值
         const newValue = !currentValue;
 
+        // 更新到 map.SourceMap 中
         if (this.map && this.map.SourceMap) {
             this.map.SourceMap[this.field] = newValue;
         }
 
+        // 更新内部状态
         this.isActive = newValue;
-        this.updateStatus();
 
-        if (this.onToggle) {
-            this.onToggle(newValue);
-        }
-    }
-
-    // Mapbox 要求的 onRemove 方法
-    onRemove() {
-        this.closeDropdown();
-
-        if (this._container && this._container.parentNode) {
-            this._container.parentNode.removeChild(this._container);
-        }
+        // 更新 UI 样式
+        this.updateStatus();
 
-        this.map = null;
-        this._container = null;
-        this._button = null;
-        this._dropdown = null;
-        this._searchInput = null;
-        this._optionsList = null;
+        // ✅ 调用回调函数（如果传入了 onToggle），并传入最新的值
+        this.onToggle?.(newValue); // 安全调用，仅当函数存在时才执行
     }
 }