maplibre-gl-layer-control 0.7.0 → 0.7.1

package/dist/index.cjs

@@ -631,9 +631,13 @@ function createBackgroundGroupSymbolSVG(size = 16) {
 class LayerControl {
   constructor(options = {}) {
     __publicField(this, "map");
+    __publicField(this, "mapContainer");
     __publicField(this, "container");
     __publicField(this, "button");
     __publicField(this, "panel");
+    // Panel positioning
+    __publicField(this, "resizeHandler", null);
+    __publicField(this, "mapResizeHandler", null);
     // State management
     __publicField(this, "state");
     __publicField(this, "targetLayers");
@@ -688,6 +692,7 @@ class LayerControl {
    */
   onAdd(map) {
     this.map = map;
+    this.mapContainer = map.getContainer();
     if (Object.keys(this.state.layerStates).length === 0) {
       this.autoDetectLayers();
     }
@@ -695,17 +700,22 @@ class LayerControl {
     this.button = this.createToggleButton();
     this.panel = this.createPanel();
     this.container.appendChild(this.button);
-    this.container.appendChild(this.panel);
+    this.mapContainer.appendChild(this.panel);
     this.updateWidthDisplay();
     this.setupEventListeners();
     this.buildLayerItems();
+    if (!this.state.collapsed) {
+      requestAnimationFrame(() => {
+        this.updatePanelPosition();
+      });
+    }
     return this.container;
   }
   /**
    * Called when the control is removed from the map
    */
   onRemove() {
-    var _a;
+    var _a, _b;
     if (this.customLayerUnsubscribe) {
       this.customLayerUnsubscribe();
       this.customLayerUnsubscribe = null;
@@ -714,7 +724,16 @@ class LayerControl {
       this.customLayerRegistry.destroy();
       this.customLayerRegistry = null;
     }
-    (_a = this.container.parentNode) == null ? void 0 : _a.removeChild(this.container);
+    if (this.resizeHandler) {
+      window.removeEventListener("resize", this.resizeHandler);
+      this.resizeHandler = null;
+    }
+    if (this.mapResizeHandler) {
+      this.map.off("resize", this.mapResizeHandler);
+      this.mapResizeHandler = null;
+    }
+    (_a = this.panel.parentNode) == null ? void 0 : _a.removeChild(this.panel);
+    (_b = this.container.parentNode) == null ? void 0 : _b.removeChild(this.container);
   }
   /**
    * Auto-detect layers from the map and populate layerStates
@@ -970,6 +989,56 @@ class LayerControl {
     panel.appendChild(actionButtons);
     return panel;
   }
+  /**
+   * Detect which corner the control is positioned in
+   * @returns The position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+   */
+  getControlPosition() {
+    const parent = this.container.parentElement;
+    if (!parent) return "top-right";
+    if (parent.classList.contains("maplibregl-ctrl-top-left")) return "top-left";
+    if (parent.classList.contains("maplibregl-ctrl-top-right")) return "top-right";
+    if (parent.classList.contains("maplibregl-ctrl-bottom-left")) return "bottom-left";
+    if (parent.classList.contains("maplibregl-ctrl-bottom-right")) return "bottom-right";
+    return "top-right";
+  }
+  /**
+   * Update the panel position based on button location and control corner
+   * Positions the panel next to the button, expanding in the appropriate direction
+   */
+  updatePanelPosition() {
+    if (!this.button || !this.panel || !this.mapContainer) return;
+    const buttonRect = this.button.getBoundingClientRect();
+    const mapRect = this.mapContainer.getBoundingClientRect();
+    const position = this.getControlPosition();
+    const buttonTop = buttonRect.top - mapRect.top;
+    const buttonBottom = mapRect.bottom - buttonRect.bottom;
+    const buttonLeft = buttonRect.left - mapRect.left;
+    const buttonRight = mapRect.right - buttonRect.right;
+    const panelGap = 5;
+    this.panel.style.top = "";
+    this.panel.style.bottom = "";
+    this.panel.style.left = "";
+    this.panel.style.right = "";
+    switch (position) {
+      case "top-left":
+        this.panel.style.top = `${buttonTop + buttonRect.height + panelGap}px`;
+        this.panel.style.left = `${buttonLeft}px`;
+        break;
+      case "top-right":
+        this.panel.style.top = `${buttonTop + buttonRect.height + panelGap}px`;
+        this.panel.style.right = `${buttonRight}px`;
+        break;
+      case "bottom-left":
+        this.panel.style.bottom = `${buttonBottom + buttonRect.height + panelGap}px`;
+        this.panel.style.left = `${buttonLeft}px`;
+        break;
+      case "bottom-right":
+        this.panel.style.bottom = `${buttonBottom + buttonRect.height + panelGap}px`;
+        this.panel.style.right = `${buttonRight}px`;
+        break;
+    }
+  }
   /**
    * Create action buttons for Show All / Hide All
    */
@@ -1201,10 +1270,23 @@ class LayerControl {
   setupEventListeners() {
     this.button.addEventListener("click", () => this.toggle());
     document.addEventListener("click", (e) => {
-      if (!this.container.contains(e.target)) {
+      const target = e.target;
+      if (!this.container.contains(target) && !this.panel.contains(target)) {
         this.collapse();
       }
     });
+    this.resizeHandler = () => {
+      if (!this.state.collapsed) {
+        this.updatePanelPosition();
+      }
+    };
+    window.addEventListener("resize", this.resizeHandler);
+    this.mapResizeHandler = () => {
+      if (!this.state.collapsed) {
+        this.updatePanelPosition();
+      }
+    };
+    this.map.on("resize", this.mapResizeHandler);
     this.setupLayerChangeListeners();
   }
   /**
@@ -1254,6 +1336,7 @@ class LayerControl {
   expand() {
     this.state.collapsed = false;
     this.panel.classList.add("expanded");
+    this.updatePanelPosition();
   }
   /**
    * Collapse the panel