maplibre-gl-layer-control 0.16.0 → 0.17.0

package/README.md

@@ -14,7 +14,7 @@ A comprehensive layer control for MapLibre GL with advanced styling capabilities
 - ✅ **Layer visibility toggle** - Checkbox control for each layer
 - ✅ **Layer opacity control** - Smooth opacity slider with type-aware property mapping; **double-click the slider to type an exact percentage (0-100%)**
 - ✅ **Layer symbols** - Visual type indicators (colored shapes) next to layer names, auto-detected from layer paint properties
-- ✅ **Resizable panel** - **Drag either edge of the panel to resize it**, plus a width slider and keyboard support
+- ✅ **Resizable panel** - **Drag either edge of the panel to resize it**; double-click an edge to reset to the default width. The panel also grows to fill the available height so long layer lists only scroll once they exceed the map.
 - ✅ **Advanced style editor** - Per-layer-type styling controls:
   - **Fill layers**: color, opacity, outline-color
   - **Line layers**: color, width, opacity, blur
@@ -73,7 +73,7 @@ map.on('load', () => {
     layers: ['my-layer'], // LayerControl auto-detects opacity, visibility, and generates friendly names
     panelWidth: 340,
     panelMinWidth: 240,
-    panelMaxWidth: 450
+    panelMaxWidth: 960
   });
 
   // Option 2: Auto-detect with basemapStyleUrl (recommended for reliable basemap detection)
@@ -93,7 +93,7 @@ map.on('load', () => {
   //   collapsed: false,
   //   panelWidth: 340,
   //   panelMinWidth: 240,
-  //   panelMaxWidth: 450
+  //   panelMaxWidth: 960
   // });
 
   // Option 4: Manually specify layer states (for full control over names)
@@ -167,8 +167,8 @@ function MapComponent() {
 | `layerStates` | `Record<string, LayerState>` | `undefined` | Manual layer state configuration |
 | `panelWidth` | `number` | `320` | Initial panel width in pixels |
 | `panelMinWidth` | `number` | `240` | Minimum panel width |
-| `panelMaxWidth` | `number` | `420` | Maximum panel width |
-| `panelMaxHeight` | `number` | `600` | Maximum panel height (scrollable when exceeded) |
+| `panelMaxWidth` | `number` | `960` | Maximum panel width |
+| `panelMaxHeight` | `number` | `undefined` | Maximum panel height in pixels. Omit to fill the available vertical space (scrollable only when the layer list is taller than the map) |
 | `showStyleEditor` | `boolean` | `true` | Show gear icon for style editor |
 | `showOpacitySlider` | `boolean` | `true` | Show opacity slider for layers |
 | `showLayerSymbol` | `boolean` | `true` | Show layer type symbols (colored icons) next to layer names |

package/dist/index.cjs

@@ -691,6 +691,7 @@ class LayerControl {
     __publicField(this, "minPanelWidth");
     __publicField(this, "maxPanelWidth");
     __publicField(this, "initialPanelWidth");
+    /** Explicit max panel height; null means fill available vertical space */
     __publicField(this, "maxPanelHeight");
     __publicField(this, "showStyleEditor");
     __publicField(this, "showOpacitySlider");
@@ -703,13 +704,6 @@ class LayerControl {
     __publicField(this, "nativeLayerGroups", /* @__PURE__ */ new Map());
     __publicField(this, "basemapStyleUrl", null);
     __publicField(this, "basemapLayerIds", null);
-    __publicField(this, "widthSliderEl", null);
-    __publicField(this, "widthThumbEl", null);
-    __publicField(this, "widthValueEl", null);
-    __publicField(this, "isWidthSliderActive", false);
-    __publicField(this, "widthDragRectWidth", null);
-    __publicField(this, "widthDragStartX", null);
-    __publicField(this, "widthDragStartWidth", null);
     __publicField(this, "widthFrame", null);
     // Exact-opacity input popup
     __publicField(this, "opacityInputEl", null);
@@ -735,9 +729,9 @@ class LayerControl {
     __publicField(this, "backgroundPresetStorageKey");
     __publicField(this, "onBackgroundPresetsChange");
     this.minPanelWidth = options.panelMinWidth || 240;
-    this.maxPanelWidth = options.panelMaxWidth || 420;
+    this.maxPanelWidth = options.panelMaxWidth || 960;
     this.initialPanelWidth = options.panelWidth || 350;
-    this.maxPanelHeight = options.panelMaxHeight || 600;
+    this.maxPanelHeight = options.panelMaxHeight ?? null;
     this.showStyleEditor = options.showStyleEditor !== false;
     this.showOpacitySlider = options.showOpacitySlider !== false;
     this.showLayerSymbol = options.showLayerSymbol !== false;
@@ -818,7 +812,6 @@ class LayerControl {
       this.contextMenuEl = this.createContextMenu();
       this.mapContainer.appendChild(this.contextMenuEl);
     }
-    this.updateWidthDisplay();
     this.setupEventListeners();
     if (this.basemapStyleUrl && !this.basemapLayerIds) {
       this.fetchBasemapStyle().then(() => {
@@ -1218,7 +1211,9 @@ class LayerControl {
     const panel = document.createElement("div");
     panel.className = "layer-control-panel";
     panel.style.width = `${this.state.panelWidth}px`;
-    panel.style.maxHeight = `${this.maxPanelHeight}px`;
+    if (this.maxPanelHeight != null) {
+      panel.style.maxHeight = `${this.maxPanelHeight}px`;
+    }
     if (!this.state.collapsed) {
       panel.classList.add("expanded");
     }
@@ -1385,6 +1380,15 @@ class LayerControl {
         this.panel.style.right = `${buttonRight}px`;
         break;
     }
+    const edgeMargin = 8;
+    const isTopAnchored = position === "top-left" || position === "top-right";
+    const occupiedFromEdge = isTopAnchored ? buttonTop + buttonRect.height + panelGap : buttonBottom + buttonRect.height + panelGap;
+    const availableHeight = Math.max(
+      120,
+      Math.round(mapRect.height - occupiedFromEdge - edgeMargin)
+    );
+    const maxHeight = this.maxPanelHeight != null ? Math.min(this.maxPanelHeight, availableHeight) : availableHeight;
+    this.panel.style.maxHeight = `${maxHeight}px`;
   }
   /**
    * Create action buttons for Show All / Hide All
@@ -1433,7 +1437,8 @@ class LayerControl {
     });
   }
   /**
-   * Create the panel header with title and width control
+   * Create the panel header with the title. Panel width is adjusted by
+   * dragging either edge of the panel (see createResizeHandle).
    */
   createPanelHeader() {
     const header = document.createElement("div");
@@ -1442,135 +1447,8 @@ class LayerControl {
     title.className = "layer-control-panel-title";
     title.textContent = "Layers";
     header.appendChild(title);
-    const widthControl = this.createWidthControl();
-    header.appendChild(widthControl);
     return header;
   }
-  /**
-   * Create the width control slider
-   */
-  createWidthControl() {
-    const widthControl = document.createElement("label");
-    widthControl.className = "layer-control-width-control";
-    widthControl.title = "Adjust layer panel width";
-    const widthLabel = document.createElement("span");
-    widthLabel.textContent = "Width";
-    widthControl.appendChild(widthLabel);
-    const widthSlider = document.createElement("div");
-    widthSlider.className = "layer-control-width-slider";
-    widthSlider.setAttribute("role", "slider");
-    widthSlider.setAttribute("aria-valuemin", String(this.minPanelWidth));
-    widthSlider.setAttribute("aria-valuemax", String(this.maxPanelWidth));
-    widthSlider.setAttribute("aria-valuenow", String(this.state.panelWidth));
-    widthSlider.setAttribute("aria-valuestep", "10");
-    widthSlider.setAttribute("aria-label", "Layer panel width");
-    widthSlider.tabIndex = 0;
-    const widthTrack = document.createElement("div");
-    widthTrack.className = "layer-control-width-track";
-    const widthThumb = document.createElement("div");
-    widthThumb.className = "layer-control-width-thumb";
-    widthSlider.appendChild(widthTrack);
-    widthSlider.appendChild(widthThumb);
-    this.widthSliderEl = widthSlider;
-    this.widthThumbEl = widthThumb;
-    const widthValue = document.createElement("span");
-    widthValue.className = "layer-control-width-value";
-    this.widthValueEl = widthValue;
-    widthControl.appendChild(widthSlider);
-    widthControl.appendChild(widthValue);
-    this.updateWidthDisplay();
-    this.setupWidthSliderEvents(widthSlider);
-    return widthControl;
-  }
-  /**
-   * Setup event listeners for width slider
-   */
-  setupWidthSliderEvents(widthSlider) {
-    widthSlider.addEventListener("pointerdown", (event) => {
-      event.preventDefault();
-      const rect = widthSlider.getBoundingClientRect();
-      this.widthDragRectWidth = rect.width || 1;
-      this.widthDragStartX = event.clientX;
-      this.widthDragStartWidth = this.state.panelWidth;
-      this.isWidthSliderActive = true;
-      widthSlider.setPointerCapture(event.pointerId);
-      this.updateWidthFromPointer(event, true);
-    });
-    widthSlider.addEventListener("pointermove", (event) => {
-      if (!this.isWidthSliderActive) return;
-      this.updateWidthFromPointer(event);
-    });
-    const endPointerDrag = (event) => {
-      if (!this.isWidthSliderActive) return;
-      if (event.pointerId !== void 0) {
-        try {
-          widthSlider.releasePointerCapture(event.pointerId);
-        } catch (error) {
-        }
-      }
-      this.isWidthSliderActive = false;
-      this.widthDragRectWidth = null;
-      this.widthDragStartX = null;
-      this.widthDragStartWidth = null;
-      this.updateWidthDisplay();
-    };
-    widthSlider.addEventListener("pointerup", endPointerDrag);
-    widthSlider.addEventListener("pointercancel", endPointerDrag);
-    widthSlider.addEventListener("lostpointercapture", endPointerDrag);
-    widthSlider.addEventListener("keydown", (event) => {
-      let handled = true;
-      const step = event.shiftKey ? 20 : 10;
-      switch (event.key) {
-        case "ArrowLeft":
-        case "ArrowDown":
-          this.applyPanelWidth(this.state.panelWidth - step, true);
-          break;
-        case "ArrowRight":
-        case "ArrowUp":
-          this.applyPanelWidth(this.state.panelWidth + step, true);
-          break;
-        case "Home":
-          this.applyPanelWidth(this.minPanelWidth, true);
-          break;
-        case "End":
-          this.applyPanelWidth(this.maxPanelWidth, true);
-          break;
-        case "PageUp":
-          this.applyPanelWidth(this.state.panelWidth + 50, true);
-          break;
-        case "PageDown":
-          this.applyPanelWidth(this.state.panelWidth - 50, true);
-          break;
-        default:
-          handled = false;
-      }
-      if (handled) {
-        event.preventDefault();
-        this.updateWidthDisplay();
-      }
-    });
-  }
-  /**
-   * Update panel width from pointer event
-   */
-  updateWidthFromPointer(event, resetBaseline = false) {
-    if (!this.widthSliderEl) return;
-    const sliderWidth = this.widthDragRectWidth || this.widthSliderEl.getBoundingClientRect().width || 1;
-    const widthRange = this.maxPanelWidth - this.minPanelWidth;
-    let width;
-    if (resetBaseline) {
-      const rect = this.widthSliderEl.getBoundingClientRect();
-      const relative = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0;
-      const clampedRatio = Math.min(1, Math.max(0, relative));
-      width = this.minPanelWidth + clampedRatio * widthRange;
-      this.widthDragStartWidth = width;
-      this.widthDragStartX = event.clientX;
-    } else {
-      const delta = event.clientX - (this.widthDragStartX || event.clientX);
-      width = (this.widthDragStartWidth || this.state.panelWidth) + delta / sliderWidth * widthRange;
-    }
-    this.applyPanelWidth(width, this.isWidthSliderActive);
-  }
   /**
    * Apply panel width (clamped to min/max)
    */
@@ -1582,7 +1460,6 @@ class LayerControl {
       this.state.panelWidth = clamped;
       const px = `${clamped}px`;
       this.panel.style.width = px;
-      this.updateWidthDisplay();
     };
     if (immediate) {
       applyWidth();
@@ -1596,34 +1473,6 @@ class LayerControl {
       this.widthFrame = null;
     });
   }
-  /**
-   * Update width display (value label and thumb position)
-   */
-  updateWidthDisplay() {
-    if (this.widthValueEl) {
-      this.widthValueEl.textContent = `${this.state.panelWidth}px`;
-    }
-    if (this.widthSliderEl) {
-      this.widthSliderEl.setAttribute(
-        "aria-valuenow",
-        String(this.state.panelWidth)
-      );
-      const ratio = (this.state.panelWidth - this.minPanelWidth) / (this.maxPanelWidth - this.minPanelWidth || 1);
-      if (this.widthThumbEl) {
-        const sliderWidth = this.widthSliderEl.clientWidth;
-        if (sliderWidth === 0) {
-          requestAnimationFrame(() => this.updateWidthDisplay());
-          return;
-        }
-        const thumbWidth = this.widthThumbEl.offsetWidth || 14;
-        const padding = 16;
-        const available = Math.max(0, sliderWidth - padding - thumbWidth);
-        const clampedRatio = Math.min(1, Math.max(0, ratio));
-        const leftPx = 8 + available * clampedRatio;
-        this.widthThumbEl.style.left = `${leftPx}px`;
-      }
-    }
-  }
   /**
    * Setup main event listeners
    */
@@ -1722,7 +1571,21 @@ class LayerControl {
     const existingItems = this.panel.querySelectorAll(".layer-control-item");
     existingItems.forEach((item) => item.remove());
     this.styleEditors.clear();
-    Object.entries(this.state.layerStates).forEach(([layerId, state]) => {
+    const orderedLayerIds = this.getUserLayerIdsInMapOrder();
+    const captured = new Set(orderedLayerIds);
+    for (const layerId of Object.keys(this.state.layerStates)) {
+      if (layerId !== "Background" && !captured.has(layerId)) {
+        orderedLayerIds.push(layerId);
+      }
+    }
+    if (this.state.layerStates["Background"]) {
+      orderedLayerIds.push("Background");
+    }
+    orderedLayerIds.forEach((layerId) => {
+      const state = this.state.layerStates[layerId];
+      if (!state) {
+        return;
+      }
       if (this.targetLayers.length === 0 || this.targetLayers.includes(layerId)) {
         this.addLayerItem(layerId, state);
       }
@@ -2503,7 +2366,8 @@ class LayerControl {
     const styleLayers = this.map.getStyle().layers || [];
     return styleLayers.filter((layer) => {
       if (this.isUserAddedLayer(layer.id)) return false;
-      if (this.excludeDrawnLayers && this.isDrawnLayer(layer.id)) return false;
+      if (this.excludeDrawnLayers && this.isDrawnLayer(layer.id))
+        return false;
       if (this.isExcludedByPattern(layer.id)) return false;
       return true;
     }).map((layer) => layer.id);
@@ -4320,18 +4184,17 @@ class LayerControl {
         uiLayerIds.push(layerId);
       }
     });
-    const reversedIds = [...uiLayerIds].reverse();
     const style = this.map.getStyle();
     const mapLibreLayerIds = new Set(((_a = style == null ? void 0 : style.layers) == null ? void 0 : _a.map((l) => l.id)) || []);
-    for (let i = 0; i < reversedIds.length; i++) {
-      const layerId = reversedIds[i];
+    for (let i = 0; i < uiLayerIds.length; i++) {
+      const layerId = uiLayerIds[i];
       if (!mapLibreLayerIds.has(layerId)) {
         continue;
       }
       let beforeId = void 0;
       for (let j = i - 1; j >= 0; j--) {
-        if (mapLibreLayerIds.has(reversedIds[j])) {
-          beforeId = reversedIds[j];
+        if (mapLibreLayerIds.has(uiLayerIds[j])) {
+          beforeId = uiLayerIds[j];
           break;
         }
       }