maplibre-gl-layer-control 0.9.2 → 0.9.3

package/dist/index.cjs

@@ -2898,78 +2898,173 @@ class LayerControl {
   }
   /**
    * Get user layer IDs in current map order (top to bottom in UI = high z-index to low)
+   * Includes both MapLibre layers and custom layers managed by adapters.
    */
   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));
+    const mapLibreLayers = userLayerIds.filter((id) => mapLayerIds.includes(id));
+    const customLayers = userLayerIds.filter(
+      (id) => {
+        var _a;
+        return ((_a = this.state.layerStates[id]) == null ? void 0 : _a.isCustomLayer) && !mapLayerIds.includes(id);
+      }
+    );
+    const sortedMapLibreLayers = mapLibreLayers.sort((a, b) => mapLayerIds.indexOf(b) - mapLayerIds.indexOf(a));
+    return [...customLayers, ...sortedMapLibreLayers];
+  }
+  /**
+   * Check if a layer is a MapLibre layer (not a custom layer)
+   */
+  isMapLibreLayer(layerId) {
+    return this.map.getLayer(layerId) !== void 0;
+  }
+  /**
+   * Find the next MapLibre layer ID in a direction from a given index
+   * @param layerIds Array of layer IDs
+   * @param startIndex Index to start searching from
+   * @param direction 1 for forward (toward bottom), -1 for backward (toward top)
+   * @returns MapLibre layer ID or undefined if not found
+   */
+  findNextMapLibreLayer(layerIds, startIndex, direction) {
+    for (let i = startIndex; direction === 1 ? i < layerIds.length : i >= 0; i += direction) {
+      if (this.isMapLibreLayer(layerIds[i])) {
+        return layerIds[i];
+      }
+    }
+    return void 0;
   }
   /**
    * Move a layer up in UI (higher rendering order = move to higher z-index)
    */
   moveLayerUp(layerId) {
-    var _a;
+    var _a, _b;
     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];
+    const isCustom = (_a = this.state.layerStates[layerId]) == null ? void 0 : _a.isCustomLayer;
+    if (!isCustom && this.isMapLibreLayer(layerId)) {
+      try {
+        const targetBeforeId = index >= 2 ? this.findNextMapLibreLayer(layerIds, index - 2, -1) : void 0;
         this.map.moveLayer(layerId, targetBeforeId);
+      } catch (e) {
       }
-    } catch (e) {
     }
-    this.rebuildLayerItems();
-    (_a = this.onLayerReorder) == null ? void 0 : _a.call(this, this.getUserLayerIdsInMapOrder());
+    const newLayerStates = {};
+    const orderedIds = [...layerIds];
+    [orderedIds[index], orderedIds[index - 1]] = [orderedIds[index - 1], orderedIds[index]];
+    if (this.state.layerStates["Background"]) {
+      newLayerStates["Background"] = this.state.layerStates["Background"];
+    }
+    orderedIds.forEach((id) => {
+      if (this.state.layerStates[id]) {
+        newLayerStates[id] = this.state.layerStates[id];
+      }
+    });
+    this.state.layerStates = newLayerStates;
+    this.buildLayerItems();
+    (_b = this.onLayerReorder) == null ? void 0 : _b.call(this, this.getUserLayerIdsInMapOrder());
   }
   /**
    * Move a layer to the top (highest rendering order)
    */
   moveLayerToTop(layerId) {
-    var _a;
-    try {
-      this.map.moveLayer(layerId);
-    } catch (e) {
+    var _a, _b;
+    const layerIds = this.getUserLayerIdsInMapOrder();
+    const index = layerIds.indexOf(layerId);
+    if (index <= 0) return;
+    const isCustom = (_a = this.state.layerStates[layerId]) == null ? void 0 : _a.isCustomLayer;
+    if (!isCustom && this.isMapLibreLayer(layerId)) {
+      try {
+        this.map.moveLayer(layerId);
+      } catch (e) {
+      }
+    }
+    const newLayerStates = {};
+    const orderedIds = [...layerIds];
+    orderedIds.splice(index, 1);
+    orderedIds.unshift(layerId);
+    if (this.state.layerStates["Background"]) {
+      newLayerStates["Background"] = this.state.layerStates["Background"];
     }
-    this.rebuildLayerItems();
-    (_a = this.onLayerReorder) == null ? void 0 : _a.call(this, this.getUserLayerIdsInMapOrder());
+    orderedIds.forEach((id) => {
+      if (this.state.layerStates[id]) {
+        newLayerStates[id] = this.state.layerStates[id];
+      }
+    });
+    this.state.layerStates = newLayerStates;
+    this.buildLayerItems();
+    (_b = this.onLayerReorder) == null ? void 0 : _b.call(this, this.getUserLayerIdsInMapOrder());
   }
   /**
    * Move a layer down in UI (lower rendering order = move to lower z-index)
    */
   moveLayerDown(layerId) {
-    var _a;
+    var _a, _b;
     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) {
+    const isCustom = (_a = this.state.layerStates[layerId]) == null ? void 0 : _a.isCustomLayer;
+    if (!isCustom && this.isMapLibreLayer(layerId)) {
+      const belowLayerId = this.findNextMapLibreLayer(layerIds, index + 1, 1);
+      if (belowLayerId) {
+        try {
+          this.map.moveLayer(layerId, belowLayerId);
+        } catch (e) {
+        }
+      }
     }
-    this.rebuildLayerItems();
-    (_a = this.onLayerReorder) == null ? void 0 : _a.call(this, this.getUserLayerIdsInMapOrder());
+    const newLayerStates = {};
+    const orderedIds = [...layerIds];
+    [orderedIds[index], orderedIds[index + 1]] = [orderedIds[index + 1], orderedIds[index]];
+    if (this.state.layerStates["Background"]) {
+      newLayerStates["Background"] = this.state.layerStates["Background"];
+    }
+    orderedIds.forEach((id) => {
+      if (this.state.layerStates[id]) {
+        newLayerStates[id] = this.state.layerStates[id];
+      }
+    });
+    this.state.layerStates = newLayerStates;
+    this.buildLayerItems();
+    (_b = this.onLayerReorder) == null ? void 0 : _b.call(this, this.getUserLayerIdsInMapOrder());
   }
   /**
    * Move a layer to the bottom (lowest rendering order among user layers)
    */
   moveLayerToBottom(layerId) {
-    var _a;
+    var _a, _b;
     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) {
+    const isCustom = (_a = this.state.layerStates[layerId]) == null ? void 0 : _a.isCustomLayer;
+    if (!isCustom && this.isMapLibreLayer(layerId)) {
+      const bottomLayerId = this.findNextMapLibreLayer(layerIds, layerIds.length - 1, -1);
+      if (bottomLayerId && bottomLayerId !== layerId) {
+        try {
+          this.map.moveLayer(layerId, bottomLayerId);
+        } catch (e) {
+        }
+      }
     }
-    this.rebuildLayerItems();
-    (_a = this.onLayerReorder) == null ? void 0 : _a.call(this, this.getUserLayerIdsInMapOrder());
+    const newLayerStates = {};
+    const orderedIds = [...layerIds];
+    orderedIds.splice(index, 1);
+    orderedIds.push(layerId);
+    if (this.state.layerStates["Background"]) {
+      newLayerStates["Background"] = this.state.layerStates["Background"];
+    }
+    orderedIds.forEach((id) => {
+      if (this.state.layerStates[id]) {
+        newLayerStates[id] = this.state.layerStates[id];
+      }
+    });
+    this.state.layerStates = newLayerStates;
+    this.buildLayerItems();
+    (_b = this.onLayerReorder) == null ? void 0 : _b.call(this, this.getUserLayerIdsInMapOrder());
   }
   /**
    * Remove a layer from the map
@@ -3008,23 +3103,6 @@ class LayerControl {
     }
     (_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
@@ -3181,7 +3259,7 @@ class LayerControl {
    * Apply UI order to map layers
    */
   applyUIOrderToMap() {
-    var _a;
+    var _a, _b;
     this.state.isStyleOperationInProgress = true;
     const items = this.panel.querySelectorAll(".layer-control-item");
     const uiLayerIds = [];
@@ -3192,18 +3270,26 @@ class LayerControl {
       }
     });
     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];
-      const beforeId = i > 0 ? reversedIds[i - 1] : void 0;
-      try {
-        const layer = this.map.getLayer(layerId);
-        if (layer) {
-          this.map.moveLayer(layerId, beforeId);
+      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];
+          break;
         }
+      }
+      try {
+        this.map.moveLayer(layerId, beforeId);
       } catch (e) {
       }
     }
-    (_a = this.onLayerReorder) == null ? void 0 : _a.call(this, uiLayerIds);
+    (_b = this.onLayerReorder) == null ? void 0 : _b.call(this, uiLayerIds);
     setTimeout(() => {
       this.state.isStyleOperationInProgress = false;
     }, 200);