maplibre-gl-layer-control 0.17.2 → 0.17.4

package/dist/index.cjs

@@ -724,6 +724,7 @@ class LayerControl {
     __publicField(this, "onLayerRename");
     __publicField(this, "onLayerReorder");
     __publicField(this, "onLayerRemove");
+    __publicField(this, "onLayerStyleChange");
     __publicField(this, "onBackgroundVisibilityChange");
     __publicField(this, "onBackgroundOpacityChange");
     // Background-layer visibility presets
@@ -746,6 +747,7 @@ class LayerControl {
     this.onLayerRename = options.onLayerRename;
     this.onLayerReorder = options.onLayerReorder;
     this.onLayerRemove = options.onLayerRemove;
+    this.onLayerStyleChange = options.onLayerStyleChange;
     this.onBackgroundVisibilityChange = options.onBackgroundVisibilityChange;
     this.onBackgroundOpacityChange = options.onBackgroundOpacityChange;
     this.enableBackgroundPresets = options.enableBackgroundPresets !== false;
@@ -1590,7 +1592,7 @@ class LayerControl {
       if (!state) {
         return;
       }
-      if (this.targetLayers.length === 0 || this.targetLayers.includes(layerId)) {
+      if (layerId === "Background" || this.targetLayers.length === 0 || this.targetLayers.includes(layerId)) {
         this.addLayerItem(layerId, state);
       }
     });
@@ -2637,7 +2639,7 @@ class LayerControl {
     actions.className = "style-editor-actions";
     const removeBtn = document.createElement("button");
     removeBtn.className = "style-editor-button style-editor-button-remove";
-    removeBtn.textContent = "Remove";
+    removeBtn.textContent = "Remove Layer";
     removeBtn.title = "Remove layer from map";
     removeBtn.addEventListener("click", (e) => {
       e.stopPropagation();
@@ -2718,18 +2720,33 @@ class LayerControl {
     actions.className = "style-editor-actions";
     const resetBtn = document.createElement("button");
     resetBtn.className = "style-editor-button style-editor-button-reset";
-    resetBtn.textContent = "Reset";
+    resetBtn.textContent = "Reset Style";
     resetBtn.addEventListener("click", (e) => {
       e.stopPropagation();
       for (const nativeId of nativeLayerIds) {
         restoreOriginalStyle(this.map, nativeId, this.state.originalStyles);
       }
+      if (this.onLayerStyleChange) {
+        editor.querySelectorAll("[data-property]").forEach((el) => {
+          const control = el;
+          const property = control.dataset.property;
+          const sourceId = control.dataset.layerId;
+          if (!property || !sourceId) return;
+          const value = this.map.getPaintProperty(sourceId, property);
+          if (value !== void 0) {
+            this.notifyLayerStyleChange(
+              property,
+              typeof value === "number" ? value : normalizeColor(value)
+            );
+          }
+        });
+      }
       this.closeStyleEditor(layerId);
       this.openStyleEditor(layerId);
     });
     const removeBtn = document.createElement("button");
     removeBtn.className = "style-editor-button style-editor-button-remove";
-    removeBtn.textContent = "Remove";
+    removeBtn.textContent = "Remove Layer";
     removeBtn.title = "Remove layer from map";
     removeBtn.addEventListener("click", (e) => {
       e.stopPropagation();
@@ -2805,14 +2822,14 @@ class LayerControl {
     actions.className = "style-editor-actions";
     const resetBtn = document.createElement("button");
     resetBtn.className = "style-editor-button style-editor-button-reset";
-    resetBtn.textContent = "Reset";
+    resetBtn.textContent = "Reset Style";
     resetBtn.addEventListener("click", (e) => {
       e.stopPropagation();
       this.resetLayerStyle(layerId);
     });
     const removeBtn = document.createElement("button");
     removeBtn.className = "style-editor-button style-editor-button-remove";
-    removeBtn.textContent = "Remove";
+    removeBtn.textContent = "Remove Layer";
     removeBtn.title = "Remove layer from map";
     removeBtn.addEventListener("click", (e) => {
       e.stopPropagation();
@@ -3160,6 +3177,86 @@ class LayerControl {
       );
     }
   }
+  /**
+   * Notify the host that a paint property changed through the style editor.
+   * Reports the layer the active style editor belongs to (`activeStyleEditor`),
+   * not the internal native sub-layer id a control may edit, so consumers can
+   * map the change back to their own layer model.
+   */
+  notifyLayerStyleChange(property, value) {
+    const layerId = this.state.activeStyleEditor;
+    if (layerId && this.onLayerStyleChange) {
+      this.onLayerStyleChange(layerId, property, value);
+    }
+  }
+  /**
+   * Re-read an open style editor's controls from the current map paint so they
+   * reflect changes made elsewhere (e.g. an external sidebar writing the same
+   * paint properties). Setting input `.value` programmatically does not
+   * dispatch an `input` event, so this never re-triggers
+   * {@link LayerControlOptions.onLayerStyleChange}. The control the user is
+   * actively dragging (the focused input) is left untouched so the refresh
+   * does not fight an in-progress drag.
+   *
+   * @param layerId Restrict the refresh to one layer's editor. Defaults to the
+   *   currently active editor. No-op when that editor is not open.
+   */
+  refreshStyleEditor(layerId) {
+    const targetId = layerId ?? this.state.activeStyleEditor;
+    if (!targetId) return;
+    const editor = this.styleEditors.get(targetId);
+    if (editor) {
+      this.syncStyleEditorControlsFromMap(editor);
+    }
+  }
+  /**
+   * Update every slider/color control in a style editor from the layer's
+   * current map paint. Each control records the layer it reads from in
+   * `dataset.layerId` (see createSliderControl/createColorControl).
+   */
+  syncStyleEditorControlsFromMap(editor) {
+    const active = document.activeElement;
+    const sliders = editor.querySelectorAll(
+      ".style-control-slider"
+    );
+    sliders.forEach((slider) => {
+      var _a;
+      if (slider === active) return;
+      const property = slider.dataset.property;
+      const sourceId = slider.dataset.layerId;
+      if (!property || !sourceId) return;
+      const value = this.map.getPaintProperty(sourceId, property);
+      if (typeof value === "number") {
+        slider.value = String(value);
+        const valueDisplay = (_a = slider.parentElement) == null ? void 0 : _a.querySelector(
+          ".style-control-value"
+        );
+        if (valueDisplay) {
+          const step = parseFloat(slider.step);
+          valueDisplay.textContent = formatNumericValue(value, step);
+        }
+      }
+    });
+    const colorPickers = editor.querySelectorAll(
+      ".style-control-color-picker"
+    );
+    colorPickers.forEach((picker) => {
+      var _a;
+      if (picker === active) return;
+      const property = picker.dataset.property;
+      const sourceId = picker.dataset.layerId;
+      if (!property || !sourceId) return;
+      const value = this.map.getPaintProperty(sourceId, property);
+      if (value !== void 0) {
+        const hexColor = normalizeColor(value);
+        picker.value = hexColor;
+        const hexDisplay = (_a = picker.parentElement) == null ? void 0 : _a.querySelector(
+          ".style-control-color-value"
+        );
+        if (hexDisplay) hexDisplay.value = hexColor;
+      }
+    });
+  }
   /**
    * Create a color control
    */
@@ -3176,6 +3273,7 @@ class LayerControl {
     colorInput.className = "style-control-color-picker";
     colorInput.value = initialValue;
     colorInput.dataset.property = property;
+    colorInput.dataset.layerId = layerId;
     const hexDisplay = document.createElement("input");
     hexDisplay.type = "text";
     hexDisplay.className = "style-control-color-value";
@@ -3188,6 +3286,7 @@ class LayerControl {
       for (const id of targetIds) {
         this.map.setPaintProperty(id, property, color);
       }
+      this.notifyLayerStyleChange(property, color);
     });
     inputWrapper.appendChild(colorInput);
     inputWrapper.appendChild(hexDisplay);
@@ -3214,6 +3313,7 @@ class LayerControl {
     slider.step = String(step);
     slider.value = String(initialValue);
     slider.dataset.property = property;
+    slider.dataset.layerId = layerId;
     const valueDisplay = document.createElement("span");
     valueDisplay.className = "style-control-value";
     valueDisplay.textContent = formatNumericValue(initialValue, step);
@@ -3224,6 +3324,7 @@ class LayerControl {
       for (const id of targetIds) {
         this.map.setPaintProperty(id, property, value);
       }
+      this.notifyLayerStyleChange(property, value);
     });
     inputWrapper.appendChild(slider);
     inputWrapper.appendChild(valueDisplay);
@@ -3257,6 +3358,7 @@ class LayerControl {
               const step = parseFloat(slider.step);
               valueDisplay.textContent = formatNumericValue(value, step);
             }
+            this.notifyLayerStyleChange(property, value);
           }
         }
       });
@@ -3275,8 +3377,9 @@ class LayerControl {
               ".style-control-color-value"
             );
             if (hexDisplay) {
-              hexDisplay.textContent = hexColor;
+              hexDisplay.value = hexColor;
             }
+            this.notifyLayerStyleChange(property, hexColor);
           }
         }
       });
@@ -3353,6 +3456,7 @@ class LayerControl {
       const isAutoDetectMode = this.targetLayers.length === 0 || this.targetLayers.length === 1 && this.targetLayers[0] === "Background" || this.targetLayers.every(
         (id) => id === "Background" || this.state.layerStates[id]
       );
+      let layersAdded = false;
       const newLayers = [];
       const useBasemapStyleDetection = this.basemapLayerIds !== null && this.basemapLayerIds.size > 0;
       const useInitialLayerDetection = !useBasemapStyleDetection && this.initialLayerIds !== null && this.initialLayerIds.size > 0;
@@ -3432,7 +3536,10 @@ class LayerControl {
             opacity,
             name: this.generateFriendlyName(layerId)
           };
-          this.addLayerItem(layerId, this.state.layerStates[layerId]);
+          if (this.targetLayers.length > 0 && !this.targetLayers.includes(layerId)) {
+            this.targetLayers.push(layerId);
+          }
+          layersAdded = true;
         });
       }
       if (this.customLayerRegistry) {
@@ -3448,7 +3555,10 @@ class LayerControl {
                 isCustomLayer: true,
                 customLayerType: this.customLayerRegistry.getSymbolType(layerId) || void 0
               };
-              this.addLayerItem(layerId, this.state.layerStates[layerId]);
+              if (this.targetLayers.length > 0 && !this.targetLayers.includes(layerId)) {
+                this.targetLayers.push(layerId);
+              }
+              layersAdded = true;
             }
           }
         });
@@ -3469,6 +3579,9 @@ class LayerControl {
           }
         });
       }
+      if (layersAdded) {
+        this.buildLayerItems();
+      }
     } catch (error) {
       console.warn("Failed to check for new layers:", error);
     }