maplibre-gl-layer-control 0.12.0 → 0.14.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);
@@ -2157,10 +2200,10 @@ class LayerControl {
     removeBtn.title = "Remove layer from map";
     removeBtn.addEventListener("click", (e) => {
       e.stopPropagation();
-      if (confirm("Are you sure you want to remove this layer?")) {
+      this.showRemoveConfirmation(editor, () => {
         this.closeStyleEditor(layerId);
         this.removeLayer(layerId);
-      }
+      });
     });
     const closeActionBtn = document.createElement("button");
     closeActionBtn.className = "style-editor-button style-editor-button-close";
@@ -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();
+      this.showRemoveConfirmation(editor, () => {
+        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;
     }
@@ -2231,10 +2375,10 @@ class LayerControl {
     removeBtn.title = "Remove layer from map";
     removeBtn.addEventListener("click", (e) => {
       e.stopPropagation();
-      if (confirm("Are you sure you want to remove this layer?")) {
+      this.showRemoveConfirmation(editor, () => {
         this.closeStyleEditor(layerId);
         this.removeLayer(layerId);
-      }
+      });
     });
     const closeActionBtn = document.createElement("button");
     closeActionBtn.className = "style-editor-button style-editor-button-close";
@@ -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);
@@ -3097,11 +3247,57 @@ class LayerControl {
     this.buildLayerItems();
     (_b = this.onLayerReorder) == null ? void 0 : _b.call(this, this.getUserLayerIdsInMapOrder());
   }
+  /**
+   * Show inline remove confirmation instead of browser confirm() dialog.
+   * Works in Jupyter notebooks where native dialogs may not appear.
+   */
+  showRemoveConfirmation(container, onConfirm) {
+    const existing = container.querySelector(".layer-control-remove-confirm");
+    if (existing) {
+      existing.remove();
+    }
+    const confirmEl = document.createElement("div");
+    confirmEl.className = "layer-control-remove-confirm";
+    const message = document.createElement("div");
+    message.className = "layer-control-remove-confirm-message";
+    message.innerHTML = `
+      <svg class="layer-control-remove-confirm-icon" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
+      </svg>
+      <span>Remove this layer?</span>
+    `;
+    const buttons = document.createElement("div");
+    buttons.className = "layer-control-remove-confirm-buttons";
+    const cancelBtn = document.createElement("button");
+    cancelBtn.className = "layer-control-remove-confirm-btn layer-control-remove-confirm-btn-cancel";
+    cancelBtn.textContent = "Cancel";
+    cancelBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      confirmEl.remove();
+    });
+    const confirmBtn = document.createElement("button");
+    confirmBtn.className = "layer-control-remove-confirm-btn layer-control-remove-confirm-btn-confirm";
+    confirmBtn.textContent = "Remove";
+    confirmBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      confirmEl.remove();
+      onConfirm();
+    });
+    buttons.appendChild(cancelBtn);
+    buttons.appendChild(confirmBtn);
+    confirmEl.appendChild(message);
+    confirmEl.appendChild(buttons);
+    container.appendChild(confirmEl);
+    requestAnimationFrame(() => {
+      confirmEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    });
+  }
   /**
    * Remove a layer from the map
    */
   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 +3330,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 =====
   /**