maplibre-gl-layer-control 0.12.0 → 0.13.0

package/dist/index.cjs

@@ -132,6 +132,18 @@ class CustomLayerRegistry {
     }
     return null;
   }
+  /**
+   * Get native MapLibre layer IDs for a custom layer.
+   * @param layerId The custom layer ID
+   * @returns Array of native layer IDs, or null if not available
+   */
+  getNativeLayerIds(layerId) {
+    const adapter = this.getAdapterForLayer(layerId);
+    if (adapter && adapter.getNativeLayerIds) {
+      return adapter.getNativeLayerIds(layerId);
+    }
+    return null;
+  }
   /**
    * Remove a custom layer through its adapter.
    * @param layerId The layer ID to remove
@@ -686,6 +698,7 @@ class LayerControl {
     __publicField(this, "customLayerRegistry", null);
     __publicField(this, "customLayerUnsubscribe", null);
     __publicField(this, "removedCustomLayerIds", /* @__PURE__ */ new Set());
+    __publicField(this, "nativeLayerGroups", /* @__PURE__ */ new Map());
     __publicField(this, "basemapStyleUrl", null);
     __publicField(this, "basemapLayerIds", null);
     __publicField(this, "widthSliderEl", null);
@@ -1083,6 +1096,7 @@ class LayerControl {
    */
   isDrawnLayer(layerId) {
     const drawnLayerPatterns = [
+      // Drawing libraries
       /^gm[-_\s]/i,
       // Geoman (gm-main-*, gm_*, Gm Temporary...)
       /^gl-draw[-_]/i,
@@ -1093,8 +1107,15 @@ class LayerControl {
       // Terra Draw
       /^maplibre-gl-draw[-_]/i,
       // MapLibre GL Draw
-      /^draw[-_]layer/i
+      /^draw[-_]layer/i,
       // Generic draw layers
+      // maplibre-gl-components internal layers
+      /^measure-/i,
+      // MeasureControl (measure-{id}-fill, measure-{id}-line)
+      /^pmtiles-source-/i,
+      // PMTilesLayerControl (managed via adapter)
+      /^stac-search-footprints/i
+      // StacSearchControl footprint layers
     ];
     return drawnLayerPatterns.some((pattern) => pattern.test(layerId));
   }
@@ -2094,10 +2115,32 @@ class LayerControl {
    * Open style editor for a layer
    */
   openStyleEditor(layerId) {
+    var _a;
     const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
     if (!itemEl) return;
     const layerState = this.state.layerStates[layerId];
     if (layerState == null ? void 0 : layerState.isCustomLayer) {
+      const nativeLayerIds = (_a = this.customLayerRegistry) == null ? void 0 : _a.getNativeLayerIds(layerId);
+      if (nativeLayerIds && nativeLayerIds.length > 0) {
+        for (const nativeId of nativeLayerIds) {
+          if (!this.state.originalStyles.has(nativeId)) {
+            const nativeLayer = this.map.getLayer(nativeId);
+            if (nativeLayer) {
+              cacheOriginalLayerStyle(this.map, nativeId, this.state.originalStyles);
+            }
+          }
+        }
+        const editor3 = this.createNativeSubLayerStyleEditor(layerId, nativeLayerIds);
+        if (editor3) {
+          itemEl.appendChild(editor3);
+          this.styleEditors.set(layerId, editor3);
+          this.state.activeStyleEditor = layerId;
+          setTimeout(() => {
+            editor3.scrollIntoView({ behavior: "smooth", block: "nearest" });
+          }, 50);
+          return;
+        }
+      }
       const editor2 = this.createCustomLayerInfoPanel(layerId);
       itemEl.appendChild(editor2);
       this.styleEditors.set(layerId, editor2);
@@ -2176,6 +2219,106 @@ class LayerControl {
     editor.appendChild(actions);
     return editor;
   }
+  /**
+   * Create a combined style editor for custom layers with native MapLibre sublayers.
+   * Groups controls by sublayer type (fill, line, circle, etc.).
+   */
+  createNativeSubLayerStyleEditor(layerId, nativeLayerIds) {
+    const layersByType = /* @__PURE__ */ new Map();
+    for (const nativeId of nativeLayerIds) {
+      const layer = this.map.getLayer(nativeId);
+      if (layer) {
+        const type = layer.type;
+        if (!layersByType.has(type)) {
+          layersByType.set(type, []);
+        }
+        layersByType.get(type).push(nativeId);
+      }
+    }
+    if (layersByType.size === 0) return null;
+    const editor = document.createElement("div");
+    editor.className = "layer-control-style-editor";
+    const header = document.createElement("div");
+    header.className = "style-editor-header";
+    const title = document.createElement("span");
+    title.className = "style-editor-title";
+    title.textContent = "Edit Style";
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "style-editor-close";
+    closeBtn.innerHTML = "×";
+    closeBtn.title = "Close";
+    closeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.closeStyleEditor(layerId);
+    });
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+    editor.appendChild(header);
+    const controls = document.createElement("div");
+    controls.className = "style-editor-controls";
+    const typeLabels = {
+      fill: "Fill",
+      line: "Line",
+      circle: "Circle",
+      symbol: "Symbol",
+      raster: "Raster"
+    };
+    for (const [type, ids] of layersByType) {
+      if (layersByType.size > 1) {
+        const sectionHeader = document.createElement("div");
+        sectionHeader.className = "style-editor-section-header";
+        sectionHeader.textContent = typeLabels[type] || type;
+        controls.appendChild(sectionHeader);
+      }
+      const primaryId = ids[0];
+      this.addStyleControlsForNativeGroup(controls, ids, primaryId, type);
+    }
+    const actions = document.createElement("div");
+    actions.className = "style-editor-actions";
+    const resetBtn = document.createElement("button");
+    resetBtn.className = "style-editor-button style-editor-button-reset";
+    resetBtn.textContent = "Reset";
+    resetBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      for (const nativeId of nativeLayerIds) {
+        restoreOriginalStyle(this.map, nativeId, this.state.originalStyles);
+      }
+      this.closeStyleEditor(layerId);
+      this.openStyleEditor(layerId);
+    });
+    const removeBtn = document.createElement("button");
+    removeBtn.className = "style-editor-button style-editor-button-remove";
+    removeBtn.textContent = "Remove";
+    removeBtn.title = "Remove layer from map";
+    removeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (confirm("Are you sure you want to remove this layer?")) {
+        this.closeStyleEditor(layerId);
+        this.removeLayer(layerId);
+      }
+    });
+    const closeActionBtn = document.createElement("button");
+    closeActionBtn.className = "style-editor-button style-editor-button-close";
+    closeActionBtn.textContent = "Close";
+    closeActionBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.closeStyleEditor(layerId);
+    });
+    actions.appendChild(resetBtn);
+    actions.appendChild(removeBtn);
+    actions.appendChild(closeActionBtn);
+    editor.appendChild(controls);
+    editor.appendChild(actions);
+    return editor;
+  }
+  /**
+   * Add style controls for a group of native layers of the same type.
+   * Changes to any control are applied to all layers in the group.
+   */
+  addStyleControlsForNativeGroup(container, layerIds, primaryLayerId, layerType) {
+    this.nativeLayerGroups.set(primaryLayerId, layerIds);
+    this.addStyleControlsForLayerType(container, primaryLayerId, layerType);
+  }
   /**
    * Close style editor for a layer
    */
@@ -2185,6 +2328,7 @@ class LayerControl {
       editor.remove();
       this.styleEditors.delete(layerId);
     }
+    this.nativeLayerGroups.clear();
     if (this.state.activeStyleEditor === layerId) {
       this.state.activeStyleEditor = null;
     }
@@ -2413,7 +2557,10 @@ class LayerControl {
     colorInput.addEventListener("input", () => {
       const color = colorInput.value;
       hexDisplay.value = color;
-      this.map.setPaintProperty(layerId, property, color);
+      const targetIds = this.nativeLayerGroups.get(layerId) || [layerId];
+      for (const id of targetIds) {
+        this.map.setPaintProperty(id, property, color);
+      }
     });
     inputWrapper.appendChild(colorInput);
     inputWrapper.appendChild(hexDisplay);
@@ -2446,7 +2593,10 @@ class LayerControl {
     slider.addEventListener("input", () => {
       const value = parseFloat(slider.value);
       valueDisplay.textContent = formatNumericValue(value, step);
-      this.map.setPaintProperty(layerId, property, value);
+      const targetIds = this.nativeLayerGroups.get(layerId) || [layerId];
+      for (const id of targetIds) {
+        this.map.setPaintProperty(id, property, value);
+      }
     });
     inputWrapper.appendChild(slider);
     inputWrapper.appendChild(valueDisplay);
@@ -3102,6 +3252,7 @@ class LayerControl {
    */
   removeLayer(layerId) {
     var _a, _b;
+    this.state.isStyleOperationInProgress = true;
     const layerState = this.state.layerStates[layerId];
     if ((layerState == null ? void 0 : layerState.isCustomLayer) && this.customLayerRegistry) {
       this.removedCustomLayerIds.add(layerId);
@@ -3134,6 +3285,9 @@ class LayerControl {
       itemEl.remove();
     }
     (_b = this.onLayerRemove) == null ? void 0 : _b.call(this, layerId);
+    setTimeout(() => {
+      this.state.isStyleOperationInProgress = false;
+    }, 200);
   }
   // ===== Drag and Drop Methods =====
   /**