maplibre-gl-layer-control 0.8.2 → 0.9.0

package/dist/index.cjs

@@ -120,6 +120,31 @@ class CustomLayerRegistry {
     }
     return null;
   }
+  /**
+   * Get the bounds of a custom layer (for zoom-to-layer).
+   * @param layerId The layer ID
+   * @returns The bounds [west, south, east, north] or null if not available
+   */
+  getBounds(layerId) {
+    const adapter = this.getAdapterForLayer(layerId);
+    if (adapter && adapter.getBounds) {
+      return adapter.getBounds(layerId);
+    }
+    return null;
+  }
+  /**
+   * Remove a custom layer through its adapter.
+   * @param layerId The layer ID to remove
+   * @returns true if the operation was handled by an adapter
+   */
+  removeLayer(layerId) {
+    const adapter = this.getAdapterForLayer(layerId);
+    if (adapter && adapter.removeLayer) {
+      adapter.removeLayer(layerId);
+      return true;
+    }
+    return false;
+  }
   /**
    * Subscribe to layer changes across all adapters.
    * @param callback Function called when layers are added or removed
@@ -670,6 +695,13 @@ class LayerControl {
     __publicField(this, "widthDragStartX", null);
     __publicField(this, "widthDragStartWidth", null);
     __publicField(this, "widthFrame", null);
+    // Context menu and drag-drop
+    __publicField(this, "contextMenuEl", null);
+    __publicField(this, "enableContextMenu");
+    __publicField(this, "enableDragAndDrop");
+    __publicField(this, "onLayerRename");
+    __publicField(this, "onLayerReorder");
+    __publicField(this, "onLayerRemove");
     this.minPanelWidth = options.panelMinWidth || 240;
     this.maxPanelWidth = options.panelMaxWidth || 420;
     this.maxPanelHeight = options.panelMaxHeight || 600;
@@ -678,16 +710,37 @@ class LayerControl {
     this.showLayerSymbol = options.showLayerSymbol !== false;
     this.excludeDrawnLayers = options.excludeDrawnLayers !== false;
     this.excludeLayerPatterns = this.wildcardPatternsToRegex(options.excludeLayers || []);
+    this.enableContextMenu = options.enableContextMenu !== false;
+    this.enableDragAndDrop = options.enableDragAndDrop !== false;
+    this.onLayerRename = options.onLayerRename;
+    this.onLayerReorder = options.onLayerReorder;
+    this.onLayerRemove = options.onLayerRemove;
     this.state = {
       collapsed: options.collapsed !== false,
-      panelWidth: options.panelWidth || 360,
+      panelWidth: options.panelWidth || 350,
       activeStyleEditor: null,
       layerStates: options.layerStates || {},
       originalStyles: /* @__PURE__ */ new Map(),
       userInteractingWithSlider: false,
       backgroundLegendOpen: false,
       backgroundLayerVisibility: /* @__PURE__ */ new Map(),
-      onlyRenderedFilter: false
+      onlyRenderedFilter: false,
+      contextMenu: {
+        visible: false,
+        targetLayerId: null,
+        x: 0,
+        y: 0
+      },
+      renamingLayerId: null,
+      customLayerNames: /* @__PURE__ */ new Map(),
+      drag: {
+        active: false,
+        layerId: null,
+        startY: 0,
+        currentY: 0,
+        placeholder: null,
+        draggedElement: null
+      }
     };
     this.targetLayers = options.layers || Object.keys(this.state.layerStates);
     this.styleEditors = /* @__PURE__ */ new Map();
@@ -721,6 +774,10 @@ class LayerControl {
     this.panel = this.createPanel();
     this.container.appendChild(this.button);
     this.mapContainer.appendChild(this.panel);
+    if (this.enableContextMenu) {
+      this.contextMenuEl = this.createContextMenu();
+      this.mapContainer.appendChild(this.contextMenuEl);
+    }
     this.updateWidthDisplay();
     this.setupEventListeners();
     if (this.basemapStyleUrl && !this.basemapLayerIds) {
@@ -777,7 +834,7 @@ class LayerControl {
    * Called when the control is removed from the map
    */
   onRemove() {
-    var _a, _b;
+    var _a, _b, _c;
     if (this.customLayerUnsubscribe) {
       this.customLayerUnsubscribe();
       this.customLayerUnsubscribe = null;
@@ -794,8 +851,13 @@ class LayerControl {
       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);
+    if (this.contextMenuEl) {
+      (_a = this.contextMenuEl.parentNode) == null ? void 0 : _a.removeChild(this.contextMenuEl);
+      this.contextMenuEl = null;
+    }
+    this.cleanupDragState();
+    (_b = this.panel.parentNode) == null ? void 0 : _b.removeChild(this.panel);
+    (_c = this.container.parentNode) == null ? void 0 : _c.removeChild(this.container);
   }
   /**
    * Auto-detect layers from the map and populate layerStates
@@ -1371,6 +1433,11 @@ class LayerControl {
     this.button.addEventListener("click", () => this.toggle());
     document.addEventListener("click", (e) => {
       const target = e.target;
+      if (this.contextMenuEl && this.state.contextMenu.visible) {
+        if (!this.contextMenuEl.contains(target)) {
+          this.hideContextMenu();
+        }
+      }
       if (!this.container.contains(target) && !this.panel.contains(target)) {
         this.collapse();
       }
@@ -1467,6 +1534,15 @@ class LayerControl {
     item.setAttribute("data-layer-id", layerId);
     const row = document.createElement("div");
     row.className = "layer-control-row";
+    if (this.enableDragAndDrop) {
+      if (layerId === "Background") {
+        const disabledHandle = this.createDisabledDragHandle();
+        row.appendChild(disabledHandle);
+      } else {
+        const dragHandle = this.createDragHandle(layerId);
+        row.appendChild(dragHandle);
+      }
+    }
     const checkbox = document.createElement("input");
     checkbox.type = "checkbox";
     checkbox.className = "layer-control-checkbox";
@@ -1474,10 +1550,11 @@ class LayerControl {
     checkbox.addEventListener("change", () => {
       this.toggleLayerVisibility(layerId, checkbox.checked);
     });
+    const displayName = this.state.customLayerNames.get(layerId) || state.name || layerId;
     const name = document.createElement("span");
     name.className = "layer-control-name";
-    name.textContent = state.name || layerId;
-    name.title = state.name || layerId;
+    name.textContent = displayName;
+    name.title = displayName;
     row.appendChild(checkbox);
     if (this.showLayerSymbol) {
       if (layerId === "Background") {
@@ -1524,6 +1601,13 @@ class LayerControl {
       }
     }
     item.appendChild(row);
+    if (this.enableContextMenu && layerId !== "Background") {
+      row.addEventListener("contextmenu", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.showContextMenu(layerId, e.clientX, e.clientY);
+      });
+    }
     this.panel.appendChild(item);
   }
   /**
@@ -2243,7 +2327,7 @@ class LayerControl {
     const contrast = this.map.getPaintProperty(layerId, "raster-contrast");
     this.createSliderControl(container, layerId, "raster-contrast", "Contrast", typeof contrast === "number" ? contrast : 0, -1, 1, 0.05);
     const hueRotate = this.map.getPaintProperty(layerId, "raster-hue-rotate");
-    this.createSliderControl(container, layerId, "raster-hue-rotate", "Hue Rotate", typeof hueRotate === "number" ? hueRotate : 0, 0, 360, 5);
+    this.createSliderControl(container, layerId, "raster-hue-rotate", "Hue Rotate", typeof hueRotate === "number" ? hueRotate : 0, 0, 350, 5);
   }
   /**
    * Add controls for symbol layers
@@ -2439,6 +2523,9 @@ class LayerControl {
         if (layerId !== "Background" && !this.state.layerStates[layerId]) {
           const layer = this.map.getLayer(layerId);
           if (layer) {
+            if (this.initialLayerIds !== null && this.initialLayerIds.has(layerId)) {
+              return;
+            }
             if (isAutoDetectMode) {
               if (this.excludeDrawnLayers && this.isDrawnLayer(layerId)) {
                 return;
@@ -2446,6 +2533,9 @@ class LayerControl {
               if (this.isExcludedByPattern(layerId)) {
                 return;
               }
+              if (!this.isUserAddedLayer(layerId)) {
+                return;
+              }
               if (useBasemapStyleDetection) {
                 if (this.basemapLayerIds.has(layerId)) {
                   return;
@@ -2559,6 +2649,543 @@ class LayerControl {
       this.checkForNewLayers();
     }
   }
+  // ===== Context Menu Methods =====
+  /**
+   * Create context menu element
+   */
+  createContextMenu() {
+    const menu = document.createElement("div");
+    menu.className = "layer-control-context-menu";
+    menu.style.display = "none";
+    const renameItem = this.createContextMenuItem("Rename", "✏️", () => {
+      if (this.state.contextMenu.targetLayerId) {
+        this.startRenaming(this.state.contextMenu.targetLayerId);
+      }
+      this.hideContextMenu();
+    });
+    const zoomItem = this.createContextMenuItem("Zoom to Layer", "🔍", () => {
+      if (this.state.contextMenu.targetLayerId) {
+        this.zoomToLayer(this.state.contextMenu.targetLayerId);
+      }
+      this.hideContextMenu();
+    });
+    const sep1 = document.createElement("div");
+    sep1.className = "context-menu-separator";
+    const moveUpItem = this.createContextMenuItem("Move Up", "↑", () => {
+      if (this.state.contextMenu.targetLayerId) {
+        this.moveLayerUp(this.state.contextMenu.targetLayerId);
+      }
+      this.hideContextMenu();
+    });
+    const moveTopItem = this.createContextMenuItem("Move to Top", "⤒", () => {
+      if (this.state.contextMenu.targetLayerId) {
+        this.moveLayerToTop(this.state.contextMenu.targetLayerId);
+      }
+      this.hideContextMenu();
+    });
+    const moveDownItem = this.createContextMenuItem("Move Down", "↓", () => {
+      if (this.state.contextMenu.targetLayerId) {
+        this.moveLayerDown(this.state.contextMenu.targetLayerId);
+      }
+      this.hideContextMenu();
+    });
+    const moveBottomItem = this.createContextMenuItem("Move to Bottom", "⤓", () => {
+      if (this.state.contextMenu.targetLayerId) {
+        this.moveLayerToBottom(this.state.contextMenu.targetLayerId);
+      }
+      this.hideContextMenu();
+    });
+    const sep2 = document.createElement("div");
+    sep2.className = "context-menu-separator";
+    const removeItem = this.createContextMenuItem("Remove Layer", "🗑️", () => {
+      if (this.state.contextMenu.targetLayerId) {
+        this.removeLayer(this.state.contextMenu.targetLayerId);
+      }
+      this.hideContextMenu();
+    }, true);
+    menu.appendChild(renameItem);
+    menu.appendChild(zoomItem);
+    menu.appendChild(sep1);
+    menu.appendChild(moveUpItem);
+    menu.appendChild(moveTopItem);
+    menu.appendChild(moveDownItem);
+    menu.appendChild(moveBottomItem);
+    menu.appendChild(sep2);
+    menu.appendChild(removeItem);
+    return menu;
+  }
+  /**
+   * Create a context menu item
+   */
+  createContextMenuItem(label, icon, onClick, isDanger = false) {
+    const item = document.createElement("div");
+    item.className = "context-menu-item" + (isDanger ? " context-menu-item-danger" : "");
+    const iconEl = document.createElement("span");
+    iconEl.className = "context-menu-item-icon";
+    iconEl.textContent = icon;
+    const labelEl = document.createElement("span");
+    labelEl.className = "context-menu-item-label";
+    labelEl.textContent = label;
+    item.appendChild(iconEl);
+    item.appendChild(labelEl);
+    item.addEventListener("click", (e) => {
+      e.stopPropagation();
+      onClick();
+    });
+    return item;
+  }
+  /**
+   * Show context menu at position
+   */
+  showContextMenu(layerId, x, y) {
+    if (!this.contextMenuEl) return;
+    this.state.contextMenu = {
+      visible: true,
+      targetLayerId: layerId,
+      x,
+      y
+    };
+    const mapRect = this.mapContainer.getBoundingClientRect();
+    let menuX = x - mapRect.left;
+    let menuY = y - mapRect.top;
+    this.contextMenuEl.style.display = "block";
+    const menuRect = this.contextMenuEl.getBoundingClientRect();
+    if (menuX + menuRect.width > mapRect.width) {
+      menuX = mapRect.width - menuRect.width - 5;
+    }
+    if (menuY + menuRect.height > mapRect.height) {
+      menuY = mapRect.height - menuRect.height - 5;
+    }
+    this.contextMenuEl.style.left = `${menuX}px`;
+    this.contextMenuEl.style.top = `${menuY}px`;
+  }
+  /**
+   * Hide context menu
+   */
+  hideContextMenu() {
+    if (!this.contextMenuEl) return;
+    this.state.contextMenu = {
+      visible: false,
+      targetLayerId: null,
+      x: 0,
+      y: 0
+    };
+    this.contextMenuEl.style.display = "none";
+  }
+  /**
+   * Start renaming a layer
+   */
+  startRenaming(layerId) {
+    var _a;
+    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
+    if (!itemEl) return;
+    const nameEl = itemEl.querySelector(".layer-control-name");
+    if (!nameEl) return;
+    this.state.renamingLayerId = layerId;
+    const currentName = this.state.customLayerNames.get(layerId) || ((_a = this.state.layerStates[layerId]) == null ? void 0 : _a.name) || layerId;
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "layer-control-name-input";
+    input.value = currentName;
+    const finishRename = () => {
+      var _a2;
+      const newName = input.value.trim() || currentName;
+      const oldName = currentName;
+      if (newName !== oldName) {
+        this.state.customLayerNames.set(layerId, newName);
+        if (this.state.layerStates[layerId]) {
+          this.state.layerStates[layerId].name = newName;
+        }
+        (_a2 = this.onLayerRename) == null ? void 0 : _a2.call(this, layerId, oldName, newName);
+      }
+      const newNameEl = document.createElement("span");
+      newNameEl.className = "layer-control-name";
+      newNameEl.textContent = newName;
+      newNameEl.title = newName;
+      input.replaceWith(newNameEl);
+      this.state.renamingLayerId = null;
+    };
+    input.addEventListener("blur", finishRename);
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        finishRename();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        const newNameEl = document.createElement("span");
+        newNameEl.className = "layer-control-name";
+        newNameEl.textContent = currentName;
+        newNameEl.title = currentName;
+        input.replaceWith(newNameEl);
+        this.state.renamingLayerId = null;
+      }
+    });
+    nameEl.replaceWith(input);
+    input.focus();
+    input.select();
+  }
+  /**
+   * Zoom to a layer's bounds
+   */
+  zoomToLayer(layerId) {
+    const layerState = this.state.layerStates[layerId];
+    if ((layerState == null ? void 0 : layerState.isCustomLayer) && this.customLayerRegistry) {
+      const bounds = this.customLayerRegistry.getBounds(layerId);
+      if (bounds) {
+        this.map.fitBounds(bounds, { padding: 50 });
+        return;
+      }
+    }
+    const layer = this.map.getLayer(layerId);
+    if (!layer) return;
+    try {
+      const sourceId = layer.source;
+      let features = sourceId ? this.map.querySourceFeatures(sourceId) : [];
+      if (features.length === 0) {
+        features = this.map.queryRenderedFeatures({ layers: [layerId] });
+      }
+      if (features.length === 0) return;
+      let minLng = Infinity, minLat = Infinity, maxLng = -Infinity, maxLat = -Infinity;
+      features.forEach((feature) => {
+        if (!feature.geometry) return;
+        const processCoords = (coords) => {
+          if (typeof coords[0] === "number") {
+            const [lng, lat] = coords;
+            minLng = Math.min(minLng, lng);
+            minLat = Math.min(minLat, lat);
+            maxLng = Math.max(maxLng, lng);
+            maxLat = Math.max(maxLat, lat);
+          } else {
+            coords.forEach(processCoords);
+          }
+        };
+        if (feature.geometry.type === "Point") {
+          processCoords(feature.geometry.coordinates);
+        } else if (feature.geometry.type === "LineString" || feature.geometry.type === "MultiPoint") {
+          feature.geometry.coordinates.forEach(processCoords);
+        } else if (feature.geometry.type === "Polygon" || feature.geometry.type === "MultiLineString") {
+          feature.geometry.coordinates.forEach((ring) => ring.forEach(processCoords));
+        } else if (feature.geometry.type === "MultiPolygon") {
+          feature.geometry.coordinates.forEach(
+            (polygon) => polygon.forEach((ring) => ring.forEach(processCoords))
+          );
+        }
+      });
+      if (minLng !== Infinity && minLat !== Infinity && maxLng !== -Infinity && maxLat !== -Infinity) {
+        this.map.fitBounds([[minLng, minLat], [maxLng, maxLat]], { padding: 50 });
+      }
+    } catch (error) {
+      console.warn(`Failed to zoom to layer ${layerId}:`, error);
+    }
+  }
+  /**
+   * Get user layer IDs in current map order (top to bottom in UI = high z-index to low)
+   */
+  getUserLayerIdsInMapOrder() {
+    const style = this.map.getStyle();
+    if (!(style == null ? void 0 : style.layers)) return [];
+    const mapLayerIds = style.layers.map((l) => l.id);
+    const userLayerIds = Object.keys(this.state.layerStates).filter((id) => id !== "Background");
+    return userLayerIds.filter((id) => mapLayerIds.includes(id)).sort((a, b) => mapLayerIds.indexOf(b) - mapLayerIds.indexOf(a));
+  }
+  /**
+   * Move a layer up in UI (higher rendering order = move to higher z-index)
+   */
+  moveLayerUp(layerId) {
+    var _a;
+    const layerIds = this.getUserLayerIdsInMapOrder();
+    const index = layerIds.indexOf(layerId);
+    if (index <= 0) return;
+    try {
+      if (index === 1) {
+        this.map.moveLayer(layerId);
+      } else {
+        const targetBeforeId = layerIds[index - 2];
+        this.map.moveLayer(layerId, targetBeforeId);
+      }
+    } catch (e) {
+    }
+    this.rebuildLayerItems();
+    (_a = this.onLayerReorder) == null ? void 0 : _a.call(this, this.getUserLayerIdsInMapOrder());
+  }
+  /**
+   * Move a layer to the top (highest rendering order)
+   */
+  moveLayerToTop(layerId) {
+    var _a;
+    try {
+      this.map.moveLayer(layerId);
+    } catch (e) {
+    }
+    this.rebuildLayerItems();
+    (_a = this.onLayerReorder) == null ? void 0 : _a.call(this, this.getUserLayerIdsInMapOrder());
+  }
+  /**
+   * Move a layer down in UI (lower rendering order = move to lower z-index)
+   */
+  moveLayerDown(layerId) {
+    var _a;
+    const layerIds = this.getUserLayerIdsInMapOrder();
+    const index = layerIds.indexOf(layerId);
+    if (index < 0 || index >= layerIds.length - 1) return;
+    const belowLayerId = layerIds[index + 1];
+    try {
+      this.map.moveLayer(layerId, belowLayerId);
+    } catch (e) {
+    }
+    this.rebuildLayerItems();
+    (_a = this.onLayerReorder) == null ? void 0 : _a.call(this, this.getUserLayerIdsInMapOrder());
+  }
+  /**
+   * Move a layer to the bottom (lowest rendering order among user layers)
+   */
+  moveLayerToBottom(layerId) {
+    var _a;
+    const layerIds = this.getUserLayerIdsInMapOrder();
+    if (layerIds.length <= 1) return;
+    const index = layerIds.indexOf(layerId);
+    if (index < 0 || index === layerIds.length - 1) return;
+    const bottomLayerId = layerIds[layerIds.length - 1];
+    try {
+      this.map.moveLayer(layerId, bottomLayerId);
+    } catch (e) {
+    }
+    this.rebuildLayerItems();
+    (_a = this.onLayerReorder) == null ? void 0 : _a.call(this, this.getUserLayerIdsInMapOrder());
+  }
+  /**
+   * Remove a layer from the map
+   */
+  removeLayer(layerId) {
+    var _a, _b;
+    const layerState = this.state.layerStates[layerId];
+    if ((layerState == null ? void 0 : layerState.isCustomLayer) && this.customLayerRegistry) {
+      this.customLayerRegistry.removeLayer(layerId);
+    } else {
+      try {
+        const layer = this.map.getLayer(layerId);
+        if (layer) {
+          const sourceId = layer.source;
+          this.map.removeLayer(layerId);
+          if (sourceId) {
+            const style = this.map.getStyle();
+            const sourceStillUsed = (_a = style == null ? void 0 : style.layers) == null ? void 0 : _a.some((l) => l.source === sourceId);
+            if (!sourceStillUsed) {
+              try {
+                this.map.removeSource(sourceId);
+              } catch (e) {
+              }
+            }
+          }
+        }
+      } catch (error) {
+        console.warn(`Failed to remove layer ${layerId}:`, error);
+      }
+    }
+    delete this.state.layerStates[layerId];
+    this.state.customLayerNames.delete(layerId);
+    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
+    if (itemEl) {
+      itemEl.remove();
+    }
+    (_b = this.onLayerRemove) == null ? void 0 : _b.call(this, layerId);
+  }
+  /**
+   * Rebuild layer items to reflect current order
+   */
+  rebuildLayerItems() {
+    const userLayerIds = this.getUserLayerIdsInMapOrder();
+    const newLayerStates = {};
+    if (this.state.layerStates["Background"]) {
+      newLayerStates["Background"] = this.state.layerStates["Background"];
+    }
+    userLayerIds.forEach((id) => {
+      if (this.state.layerStates[id]) {
+        newLayerStates[id] = this.state.layerStates[id];
+      }
+    });
+    this.state.layerStates = newLayerStates;
+    this.buildLayerItems();
+  }
+  // ===== Drag and Drop Methods =====
+  /**
+   * Create drag handle element
+   */
+  createDragHandle(layerId) {
+    const handle = document.createElement("div");
+    handle.className = "layer-control-drag-handle";
+    handle.innerHTML = `<svg viewBox="0 0 16 16" fill="currentColor">
+      <circle cx="5" cy="3" r="1.5"/>
+      <circle cx="11" cy="3" r="1.5"/>
+      <circle cx="5" cy="8" r="1.5"/>
+      <circle cx="11" cy="8" r="1.5"/>
+      <circle cx="5" cy="13" r="1.5"/>
+      <circle cx="11" cy="13" r="1.5"/>
+    </svg>`;
+    handle.title = "Drag to reorder";
+    handle.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.startDrag(layerId, e);
+    });
+    return handle;
+  }
+  /**
+   * Create a disabled drag handle for alignment (used for Background layer)
+   */
+  createDisabledDragHandle() {
+    const handle = document.createElement("div");
+    handle.className = "layer-control-drag-handle layer-control-drag-handle-disabled";
+    handle.innerHTML = `<svg viewBox="0 0 16 16" fill="currentColor">
+      <circle cx="5" cy="3" r="1.5"/>
+      <circle cx="11" cy="3" r="1.5"/>
+      <circle cx="5" cy="8" r="1.5"/>
+      <circle cx="11" cy="8" r="1.5"/>
+      <circle cx="5" cy="13" r="1.5"/>
+      <circle cx="11" cy="13" r="1.5"/>
+    </svg>`;
+    return handle;
+  }
+  /**
+   * Start dragging a layer
+   */
+  startDrag(layerId, e) {
+    var _a;
+    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
+    if (!itemEl) return;
+    const rect = itemEl.getBoundingClientRect();
+    this.state.drag = {
+      active: true,
+      layerId,
+      startY: e.clientY,
+      currentY: e.clientY,
+      placeholder: null,
+      draggedElement: null
+    };
+    this.panel.classList.add("dragging-active");
+    itemEl.classList.add("dragging");
+    const placeholder = document.createElement("div");
+    placeholder.className = "layer-control-drop-placeholder";
+    placeholder.style.height = `${rect.height}px`;
+    (_a = itemEl.parentNode) == null ? void 0 : _a.insertBefore(placeholder, itemEl);
+    this.state.drag.placeholder = placeholder;
+    const clone = itemEl.cloneNode(true);
+    clone.classList.remove("dragging");
+    clone.className = "layer-control-item layer-control-item-dragging";
+    clone.style.width = `${rect.width}px`;
+    clone.style.left = `${rect.left}px`;
+    clone.style.top = `${rect.top}px`;
+    document.body.appendChild(clone);
+    this.state.drag.draggedElement = clone;
+    const onMove = (moveE) => this.onDragMove(moveE);
+    const onEnd = (endE) => {
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerup", onEnd);
+      document.removeEventListener("pointercancel", onEnd);
+      this.endDrag(endE);
+    };
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", onEnd);
+    document.addEventListener("pointercancel", onEnd);
+  }
+  /**
+   * Handle drag move
+   */
+  onDragMove(e) {
+    var _a, _b;
+    if (!this.state.drag.active || !this.state.drag.draggedElement) return;
+    const placeholder = this.state.drag.placeholder;
+    if (!placeholder) return;
+    const deltaY = e.clientY - this.state.drag.startY;
+    const clone = this.state.drag.draggedElement;
+    const currentTop = parseFloat(clone.style.top) || 0;
+    clone.style.top = `${currentTop + deltaY}px`;
+    this.state.drag.startY = e.clientY;
+    this.state.drag.currentY = e.clientY;
+    const items = Array.from(this.panel.querySelectorAll(".layer-control-item:not(.dragging)")).filter((item) => item.dataset.layerId !== "Background");
+    for (const item of items) {
+      const itemRect = item.getBoundingClientRect();
+      if (e.clientY >= itemRect.top && e.clientY <= itemRect.bottom) {
+        const itemMiddle = itemRect.top + itemRect.height / 2;
+        if (e.clientY < itemMiddle) {
+          if (placeholder.nextSibling !== item) {
+            (_a = item.parentNode) == null ? void 0 : _a.insertBefore(placeholder, item);
+          }
+        } else {
+          if (placeholder.previousSibling !== item) {
+            (_b = item.parentNode) == null ? void 0 : _b.insertBefore(placeholder, item.nextSibling);
+          }
+        }
+        break;
+      }
+    }
+  }
+  /**
+   * End dragging
+   */
+  endDrag(_e) {
+    var _a;
+    if (!this.state.drag.active) return;
+    const layerId = this.state.drag.layerId;
+    const placeholder = this.state.drag.placeholder;
+    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
+    if (itemEl && placeholder) {
+      (_a = placeholder.parentNode) == null ? void 0 : _a.insertBefore(itemEl, placeholder);
+      itemEl.classList.remove("dragging");
+    }
+    this.cleanupDragState();
+    this.applyUIOrderToMap();
+  }
+  /**
+   * Clean up drag state
+   */
+  cleanupDragState() {
+    if (this.state.drag.draggedElement) {
+      this.state.drag.draggedElement.remove();
+    }
+    if (this.state.drag.placeholder) {
+      this.state.drag.placeholder.remove();
+    }
+    this.panel.classList.remove("dragging-active");
+    this.panel.querySelectorAll(".layer-control-item.dragging").forEach((el) => {
+      el.classList.remove("dragging");
+    });
+    this.state.drag = {
+      active: false,
+      layerId: null,
+      startY: 0,
+      currentY: 0,
+      placeholder: null,
+      draggedElement: null
+    };
+  }
+  /**
+   * Apply UI order to map layers
+   */
+  applyUIOrderToMap() {
+    var _a;
+    const items = this.panel.querySelectorAll(".layer-control-item");
+    const uiLayerIds = [];
+    items.forEach((item) => {
+      const layerId = item.dataset.layerId;
+      if (layerId && layerId !== "Background") {
+        uiLayerIds.push(layerId);
+      }
+    });
+    const reversedIds = [...uiLayerIds].reverse();
+    for (let i = 0; i < reversedIds.length; i++) {
+      const layerId = reversedIds[i];
+      const beforeId = i > 0 ? reversedIds[i - 1] : void 0;
+      try {
+        const layer = this.map.getLayer(layerId);
+        if (layer) {
+          this.map.moveLayer(layerId, beforeId);
+        }
+      } catch (e) {
+      }
+    }
+    (_a = this.onLayerReorder) == null ? void 0 : _a.call(this, uiLayerIds);
+  }
 }
 exports.CustomLayerRegistry = CustomLayerRegistry;
 exports.LayerControl = LayerControl;