maplibre-gl-layer-control 0.16.0 → 0.17.0

package/dist/index.mjs

@@ -689,6 +689,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");
@@ -701,13 +702,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);
@@ -733,9 +727,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;
@@ -816,7 +810,6 @@ class LayerControl {
       this.contextMenuEl = this.createContextMenu();
       this.mapContainer.appendChild(this.contextMenuEl);
     }
-    this.updateWidthDisplay();
     this.setupEventListeners();
     if (this.basemapStyleUrl && !this.basemapLayerIds) {
       this.fetchBasemapStyle().then(() => {
@@ -1216,7 +1209,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");
     }
@@ -1383,6 +1378,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
@@ -1431,7 +1435,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");
@@ -1440,135 +1445,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)
    */
@@ -1580,7 +1458,6 @@ class LayerControl {
       this.state.panelWidth = clamped;
       const px = `${clamped}px`;
       this.panel.style.width = px;
-      this.updateWidthDisplay();
     };
     if (immediate) {
       applyWidth();
@@ -1594,34 +1471,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
    */
@@ -1720,7 +1569,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);
       }
@@ -2501,7 +2364,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);
@@ -4318,18 +4182,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;
         }
       }