maplibre-gl-components 0.25.0 → 0.25.2

package/dist/{ControlGrid-C6BgPi2T.js → ControlGrid-BvZW0xA8.js}

@@ -921,17 +921,18 @@ var MF = [
   _options;
   _colorbarOptions;
   _colorbars;
+  _stackOrientation = "vertical";
   _state;
   _eventHandlers = /* @__PURE__ */ new Map();
   _map;
   _handleZoom;
   _zoomVisible = !0;
   constructor(e) {
-    const { colorbars: t, position: n, ...i } = e ?? {};
+    const { colorbars: t, position: n, stackOrientation: i, ...s } = e ?? {};
     this._options = {
       ...TF,
-      ...i
-    }, this._colorbarOptions = t, this._colorbars = this._resolveColorbars(), this._state = this._createState();
+      ...s
+    }, this._colorbarOptions = t, i && (this._stackOrientation = i), this._colorbars = this._resolveColorbars(), this._state = this._createState();
   }
   onAdd(e) {
     return this._map = e, this._container = this._createContainer(), this._render(), this._handleZoom = () => this._checkZoomVisibility(), this._map.on("zoom", this._handleZoom), this._checkZoomVisibility(), this._container;
@@ -946,11 +947,11 @@ var MF = [
     this._state.visible && (this._options.visible = !1, this._state = this._createState(), this._updateDisplayState(), this._emit("hide"));
   }
   update(e) {
-    const { colorbars: t, position: n, ...i } = e;
+    const { colorbars: t, position: n, stackOrientation: i, ...s } = e;
     this._options = {
       ...this._options,
-      ...i
-    }, t !== void 0 && (this._colorbarOptions = t), this._colorbars = this._resolveColorbars(), this._state = this._createState(), this._render(), this._emit("update");
+      ...s
+    }, i !== void 0 && (this._stackOrientation = i), t !== void 0 && (this._colorbarOptions = t), this._colorbars = this._resolveColorbars(), this._state = this._createState(), this._render(), this._emit("update");
   }
   getState() {
     return { ...this._state };
@@ -1099,17 +1100,17 @@ var MF = [
   _render() {
     if (!this._container) return;
     this._container.innerHTML = "";
-    const e = this._hasVisibleColorbars();
+    const e = this._hasVisibleColorbars(), t = this._stackOrientation === "horizontal";
     Object.assign(this._container.style, {
       display: e ? "flex" : "none",
-      flexDirection: "column",
-      alignItems: "stretch",
+      flexDirection: t ? "row" : "column",
+      alignItems: t ? "flex-end" : "stretch",
       gap: "8px",
       background: "transparent",
       boxShadow: "none",
       padding: "0"
-    }), this._colorbars.forEach((t, n) => {
-      this._isColorbarVisible(t, n) && this._container?.appendChild(this._createColorbarElement(t));
+    }), this._colorbars.forEach((n, i) => {
+      this._isColorbarVisible(n, i) && this._container?.appendChild(this._createColorbarElement(n));
     });
   }
 }, BF = {
@@ -11676,7 +11677,8 @@ var TU = class {
   fontSize: 12,
   fontColor: "#333",
   minzoom: 0,
-  maxzoom: 24
+  maxzoom: 24,
+  stackOrientation: "vertical"
 }, BU = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="none"><defs><linearGradient id="cbg" x1="0" y1="1" x2="0" y2="0"><stop offset="0%" stop-color="#440154"/><stop offset="25%" stop-color="#31688e"/><stop offset="50%" stop-color="#21918c"/><stop offset="75%" stop-color="#90d743"/><stop offset="100%" stop-color="#fde725"/></linearGradient></defs><rect x="8" y="2" width="8" height="20" rx="2" fill="url(#cbg)" stroke="currentColor" stroke-width="1.5"/></svg>', RU = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>', kU = class {
   _container;
   _button;
@@ -11689,7 +11691,7 @@ var TU = class {
   _handleResize;
   _zoomVisible = !0;
   _colorbar;
-  _colorbars = [];
+  _positionControls = /* @__PURE__ */ new Map();
   _colorbarEntries = [];
   _colorbarSelect;
   _colormapSelect;
@@ -11698,6 +11700,7 @@ var TU = class {
   _labelInput;
   _unitsInput;
   _orientationSelect;
+  _stackSelect;
   _positionSelect;
   _addBtn;
   _updateBtn;
@@ -11726,7 +11729,8 @@ var TU = class {
       colorbarPosition: "bottom-right",
       hasColorbar: !1,
       selectedColorbarIndex: -1,
-      colorbars: []
+      colorbars: [],
+      stackOrientation: this._options.stackOrientation
     };
   }
   onAdd(e) {
@@ -11773,14 +11777,11 @@ var TU = class {
     };
   }
   setState(e) {
-    this._map && this._colorbars.forEach((s) => {
+    this._map && this._positionControls.forEach((s) => {
       this._map.removeControl(s);
-    });
+    }), this._positionControls.clear();
     const t = (e.colorbars ?? []).map((s) => ({ ...s }));
-    this._colorbars = [], this._colorbarEntries = t, this._map && t.forEach((s) => {
-      const r = this._createColorbar(s);
-      this._map.addControl(r, s.colorbarPosition), this._colorbars.push(r);
-    });
+    this._colorbarEntries = t, this._state.stackOrientation = e.stackOrientation ?? this._state.stackOrientation, this._map && new Set(t.map((s) => s.colorbarPosition)).forEach((s) => this._syncPositionControl(s));
     const n = typeof e.selectedColorbarIndex == "number" && e.selectedColorbarIndex >= 0 && e.selectedColorbarIndex < t.length ? e.selectedColorbarIndex : t.length > 0 ? t.length - 1 : -1, i = n >= 0 ? t[n] : {
       mode: e.mode ?? this._state.mode,
       colormap: e.colormap ?? this._state.colormap,
@@ -11800,7 +11801,7 @@ var TU = class {
       hasColorbar: t.length > 0,
       selectedColorbarIndex: n,
       colorbars: t.map((s) => ({ ...s }))
-    }, this._colorbar = n >= 0 ? this._colorbars[n] : void 0, this._applyEntryToForm(i), this._state.collapsed ? this._hidePanel() : this._showPanel(), this._container && (this._container.style.display = this._state.visible && this._zoomVisible ? "" : "none"), this._updateButtonStates(), this._emit("colorbarupdate"), this;
+    }, this._colorbar = n >= 0 ? this._positionControls.get(t[n].colorbarPosition) : void 0, this._applyEntryToForm(i), this._stackSelect && (this._stackSelect.value = this._state.stackOrientation), this._state.collapsed ? this._hidePanel() : this._showPanel(), this._container && (this._container.style.display = this._state.visible && this._zoomVisible ? "" : "none"), this._updateButtonStates(), this._emit("colorbarupdate"), this;
   }
   _createContainer() {
     const e = document.createElement("div");
@@ -11831,9 +11832,9 @@ var TU = class {
       this._modeCustomRadio.checked && this._setMode("custom");
     }), o.appendChild(this._modeCustomRadio), o.appendChild(document.createTextNode(" Custom Colors")), r.appendChild(o), s.appendChild(r), n.appendChild(s), this._namedSection = document.createElement("div");
     const l = this._createField("Colormap");
-    this._colormapSelect = document.createElement("select"), this._colormapSelect.className = "colorbar-gui-select", Wx().forEach((w) => {
-      const S = document.createElement("option");
-      S.value = w, S.textContent = w, S.selected = w === this._state.colormap, this._colormapSelect.appendChild(S);
+    this._colormapSelect = document.createElement("select"), this._colormapSelect.className = "colorbar-gui-select", Wx().forEach((S) => {
+      const R = document.createElement("option");
+      R.value = S, R.textContent = S, R.selected = S === this._state.colormap, this._colormapSelect.appendChild(R);
     }), this._colormapSelect.addEventListener("change", () => {
       this._state.colormap = this._colormapSelect.value, this._updatePreview();
     }), l.appendChild(this._colormapSelect), this._namedSection.appendChild(l), n.appendChild(this._namedSection), this._customSection = document.createElement("div");
@@ -11863,9 +11864,9 @@ or #440154, #21918c, #fde725`, this._customColorsTextarea.addEventListener("inpu
     const y = document.createElement("div");
     y.className = "colorbar-gui-row";
     const x = this._createField("Orientation");
-    this._orientationSelect = document.createElement("select"), this._orientationSelect.className = "colorbar-gui-select", ["horizontal", "vertical"].forEach((w) => {
-      const S = document.createElement("option");
-      S.value = w, S.textContent = w.charAt(0).toUpperCase() + w.slice(1), S.selected = w === this._state.orientation, this._orientationSelect.appendChild(S);
+    this._orientationSelect = document.createElement("select"), this._orientationSelect.className = "colorbar-gui-select", ["horizontal", "vertical"].forEach((S) => {
+      const R = document.createElement("option");
+      R.value = S, R.textContent = S.charAt(0).toUpperCase() + S.slice(1), R.selected = S === this._state.orientation, this._orientationSelect.appendChild(R);
     }), this._orientationSelect.addEventListener("change", () => {
       this._state.orientation = this._orientationSelect.value;
     }), x.appendChild(this._orientationSelect), y.appendChild(x);
@@ -11887,14 +11888,27 @@ or #440154, #21918c, #fde725`, this._customColorsTextarea.addEventListener("inpu
         value: "bottom-right",
         label: "Bottom Right"
       }
-    ].forEach((w) => {
-      const S = document.createElement("option");
-      S.value = w.value, S.textContent = w.label, S.selected = w.value === this._state.colorbarPosition, this._positionSelect.appendChild(S);
+    ].forEach((S) => {
+      const R = document.createElement("option");
+      R.value = S.value, R.textContent = S.label, R.selected = S.value === this._state.colorbarPosition, this._positionSelect.appendChild(R);
     }), this._positionSelect.addEventListener("change", () => {
       this._state.colorbarPosition = this._positionSelect.value;
-    }), v.appendChild(this._positionSelect), y.appendChild(v), n.appendChild(y), this._addBtn = document.createElement("button"), this._addBtn.type = "button", this._addBtn.className = "colorbar-gui-add-btn", this._addBtn.textContent = "Add Colorbar", this._addBtn.addEventListener("click", () => this._addColorbar()), n.appendChild(this._addBtn);
-    const b = document.createElement("button");
-    return b.type = "button", b.className = "colorbar-gui-add-btn", b.textContent = "Update Selected Colorbar", b.style.display = this._state.hasColorbar ? "" : "none", b.addEventListener("click", () => this._updateColorbar()), n.appendChild(b), this._updateBtn = b, this._removeBtn = document.createElement("button"), this._removeBtn.type = "button", this._removeBtn.className = "colorbar-gui-remove-btn", this._removeBtn.textContent = "Remove Colorbar", this._removeBtn.style.display = this._state.hasColorbar ? "" : "none", this._removeBtn.addEventListener("click", () => this._removeColorbar()), n.appendChild(this._removeBtn), e.appendChild(n), e;
+    }), v.appendChild(this._positionSelect), y.appendChild(v), n.appendChild(y);
+    const b = this._createField("Stack multiple colorbars");
+    this._stackSelect = document.createElement("select"), this._stackSelect.className = "colorbar-gui-select", [{
+      value: "vertical",
+      label: "Vertically"
+    }, {
+      value: "horizontal",
+      label: "Horizontally"
+    }].forEach((S) => {
+      const R = document.createElement("option");
+      R.value = S.value, R.textContent = S.label, R.selected = S.value === this._state.stackOrientation, this._stackSelect.appendChild(R);
+    }), this._stackSelect.addEventListener("change", () => {
+      this._state.stackOrientation = this._stackSelect.value, this._applyStackOrientation(), this._emit("colorbarupdate");
+    }), b.appendChild(this._stackSelect), n.appendChild(b), this._addBtn = document.createElement("button"), this._addBtn.type = "button", this._addBtn.className = "colorbar-gui-add-btn", this._addBtn.textContent = "Add Colorbar", this._addBtn.addEventListener("click", () => this._addColorbar()), n.appendChild(this._addBtn);
+    const w = document.createElement("button");
+    return w.type = "button", w.className = "colorbar-gui-add-btn", w.textContent = "Update Selected Colorbar", w.style.display = this._state.hasColorbar ? "" : "none", w.addEventListener("click", () => this._updateColorbar()), n.appendChild(w), this._updateBtn = w, this._removeBtn = document.createElement("button"), this._removeBtn.type = "button", this._removeBtn.className = "colorbar-gui-remove-btn", this._removeBtn.textContent = "Remove Colorbar", this._removeBtn.style.display = this._state.hasColorbar ? "" : "none", this._removeBtn.addEventListener("click", () => this._removeColorbar()), n.appendChild(this._removeBtn), e.appendChild(n), e;
   }
   _createField(e) {
     const t = document.createElement("div");
@@ -11943,9 +11957,9 @@ or #440154, #21918c, #fde725`, this._customColorsTextarea.addEventListener("inpu
   _applyEntryToForm(e) {
     this._state.mode = e.mode, this._state.colormap = e.colormap, this._state.customColors = e.customColors, this._state.vmin = e.vmin, this._state.vmax = e.vmax, this._state.label = e.label, this._state.units = e.units, this._state.orientation = e.orientation, this._state.colorbarPosition = e.colorbarPosition, this._modeNamedRadio && (this._modeNamedRadio.checked = e.mode === "named"), this._modeCustomRadio && (this._modeCustomRadio.checked = e.mode === "custom"), this._namedSection && (this._namedSection.style.display = e.mode === "named" ? "" : "none"), this._customSection && (this._customSection.style.display = e.mode === "custom" ? "" : "none"), this._colormapSelect && (this._colormapSelect.value = e.colormap), this._customColorsTextarea && (this._customColorsTextarea.value = e.customColors), this._vminInput && (this._vminInput.value = String(e.vmin)), this._vmaxInput && (this._vmaxInput.value = String(e.vmax)), this._labelInput && (this._labelInput.value = e.label), this._unitsInput && (this._unitsInput.value = e.units), this._orientationSelect && (this._orientationSelect.value = e.orientation), this._positionSelect && (this._positionSelect.value = e.colorbarPosition), this._updatePreview();
   }
-  _createColorbar(e) {
+  _buildColorbarItem(e) {
     const t = e.mode === "custom" ? e.customColors.split(/[,\n]+/).map((n) => n.trim()).filter((n) => n.length > 0) : e.colormap;
-    return new LF({
+    return {
       colormap: Array.isArray(t) && t.length === 0 ? [
         "#440154",
         "#21918c",
@@ -11955,8 +11969,36 @@ or #440154, #21918c, #fde725`, this._customColorsTextarea.addEventListener("inpu
       vmax: e.vmax,
       label: e.label,
       units: e.units,
-      orientation: e.orientation,
-      position: e.colorbarPosition
+      orientation: e.orientation
+    };
+  }
+  _entriesAtPosition(e) {
+    return this._colorbarEntries.filter((t) => t.colorbarPosition === e);
+  }
+  _syncPositionControl(e) {
+    if (!this._map) return;
+    const t = this._entriesAtPosition(e).map((s) => this._buildColorbarItem(s)), n = this._positionControls.get(e);
+    if (t.length === 0) {
+      n && (this._map.removeControl(n), this._positionControls.delete(e));
+      return;
+    }
+    if (n) {
+      n.update({
+        colorbars: t,
+        stackOrientation: this._state.stackOrientation
+      });
+      return;
+    }
+    const i = new LF({
+      colorbars: t,
+      position: e,
+      stackOrientation: this._state.stackOrientation
+    });
+    this._map.addControl(i, e), this._positionControls.set(e, i);
+  }
+  _applyStackOrientation() {
+    this._positionControls.forEach((e) => {
+      e.update({ stackOrientation: this._state.stackOrientation });
     });
   }
   _selectColorbar(e) {
@@ -11964,7 +12006,7 @@ or #440154, #21918c, #fde725`, this._customColorsTextarea.addEventListener("inpu
       this._state.selectedColorbarIndex = -1, this._colorbar = void 0, this._updateButtonStates();
       return;
     }
-    e >= this._colorbarEntries.length || (this._state.selectedColorbarIndex = e, this._colorbar = this._colorbars[e], this._applyEntryToForm(this._colorbarEntries[e]), this._updateButtonStates());
+    e >= this._colorbarEntries.length || (this._state.selectedColorbarIndex = e, this._colorbar = this._positionControls.get(this._colorbarEntries[e].colorbarPosition), this._applyEntryToForm(this._colorbarEntries[e]), this._updateButtonStates());
   }
   _renderColorbarSelect() {
     if (!this._colorbarSelect) return;
@@ -11977,30 +12019,32 @@ or #440154, #21918c, #fde725`, this._customColorsTextarea.addEventListener("inpu
   }
   _addColorbar() {
     if (!this._map) return;
-    const e = this._getFormEntry(), t = this._createColorbar(e);
-    this._map.addControl(t, e.colorbarPosition), this._colorbars.push(t), this._colorbarEntries.push(e), this._colorbar = t, this._state.hasColorbar = !0, this._state.selectedColorbarIndex = this._colorbars.length - 1, this._state.colorbars = this._colorbarEntries.map((n) => ({ ...n })), this._updateButtonStates(), this._emit("colorbaradd");
+    const e = this._getFormEntry();
+    this._colorbarEntries.push(e), this._syncPositionControl(e.colorbarPosition), this._colorbar = this._positionControls.get(e.colorbarPosition), this._state.hasColorbar = !0, this._state.selectedColorbarIndex = this._colorbarEntries.length - 1, this._state.colorbars = this._colorbarEntries.map((t) => ({ ...t })), this._updateButtonStates(), this._emit("colorbaradd");
   }
   _updateColorbar() {
     if (!this._map) return;
     const e = this._state.selectedColorbarIndex;
-    if (e < 0 || e >= this._colorbars.length) {
+    if (e < 0 || e >= this._colorbarEntries.length) {
       this._addColorbar();
       return;
     }
-    const t = this._getFormEntry();
-    this._map.removeControl(this._colorbars[e]);
-    const n = this._createColorbar(t);
-    this._map.addControl(n, t.colorbarPosition), this._colorbars[e] = n, this._colorbarEntries[e] = t, this._colorbar = n, this._state.colorbars = this._colorbarEntries.map((i) => ({ ...i })), this._emit("colorbarupdate"), this._updateButtonStates();
+    const t = this._colorbarEntries[e].colorbarPosition, n = this._getFormEntry();
+    this._colorbarEntries[e] = n, t !== n.colorbarPosition && this._syncPositionControl(t), this._syncPositionControl(n.colorbarPosition), this._colorbar = this._positionControls.get(n.colorbarPosition), this._state.colorbars = this._colorbarEntries.map((i) => ({ ...i })), this._emit("colorbarupdate"), this._updateButtonStates();
   }
   _removeColorbar() {
     if (!this._map) return;
     const e = this._state.selectedColorbarIndex;
-    e < 0 || e >= this._colorbars.length || (this._map.removeControl(this._colorbars[e]), this._colorbars.splice(e, 1), this._colorbarEntries.splice(e, 1), this._state.hasColorbar = this._colorbars.length > 0, this._state.selectedColorbarIndex = this._state.hasColorbar ? Math.min(e, this._colorbars.length - 1) : -1, this._colorbar = this._state.selectedColorbarIndex >= 0 ? this._colorbars[this._state.selectedColorbarIndex] : void 0, this._state.colorbars = this._colorbarEntries.map((t) => ({ ...t })), this._state.selectedColorbarIndex >= 0 && this._applyEntryToForm(this._colorbarEntries[this._state.selectedColorbarIndex]), this._updateButtonStates(), this._emit("colorbarremove"));
+    if (e < 0 || e >= this._colorbarEntries.length) return;
+    const [t] = this._colorbarEntries.splice(e, 1);
+    this._syncPositionControl(t.colorbarPosition), this._state.hasColorbar = this._colorbarEntries.length > 0, this._state.selectedColorbarIndex = this._state.hasColorbar ? Math.min(e, this._colorbarEntries.length - 1) : -1;
+    const n = this._state.selectedColorbarIndex;
+    this._colorbar = n >= 0 ? this._positionControls.get(this._colorbarEntries[n].colorbarPosition) : void 0, this._state.colorbars = this._colorbarEntries.map((i) => ({ ...i })), n >= 0 && this._applyEntryToForm(this._colorbarEntries[n]), this._updateButtonStates(), this._emit("colorbarremove");
   }
   _removeAllColorbars() {
-    this._map && (this._colorbars.forEach((e) => {
+    this._map && this._positionControls.forEach((e) => {
       this._map.removeControl(e);
-    }), this._colorbars = [], this._colorbarEntries = [], this._colorbar = void 0, this._state.hasColorbar = !1, this._state.selectedColorbarIndex = -1, this._state.colorbars = [], this._updateButtonStates());
+    }), this._positionControls.clear(), this._colorbarEntries = [], this._colorbar = void 0, this._state.hasColorbar = !1, this._state.selectedColorbarIndex = -1, this._state.colorbars = [], this._updateButtonStates();
   }
   _updateButtonStates() {
     this._addBtn && (this._addBtn.textContent = "Add Colorbar");