maplibre-gl-components 0.10.0 → 0.11.0

package/dist/{ControlGrid-EJTb0ceR.cjs → ControlGrid-CT_rvuo_.cjs}

@@ -7663,6 +7663,88 @@ const DEFAULT_OPTIONS = {
   maxzoom: 24
 };
 const WRENCH_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>`;
+const COMPASS_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29"><path d="m10.5 14 4-8 4 8z" fill="#333"/><path d="m10.5 16 4 8 4-8z" fill="#ccc"/></svg>`;
+class NorthControl {
+  constructor() {
+    __publicField(this, "_map");
+    __publicField(this, "_container");
+    __publicField(this, "_icon");
+    __publicField(this, "_rotateHandler");
+  }
+  onAdd(map) {
+    this._map = map;
+    this._container = document.createElement("div");
+    this._container.className = "maplibregl-ctrl maplibregl-ctrl-group";
+    const btn = document.createElement("button");
+    btn.className = "maplibregl-ctrl-compass";
+    btn.type = "button";
+    btn.title = "Reset bearing to north";
+    btn.setAttribute("aria-label", "Reset bearing to north");
+    this._icon = document.createElement("span");
+    this._icon.className = "maplibregl-ctrl-icon";
+    this._icon.setAttribute("aria-hidden", "true");
+    this._icon.style.backgroundImage = `url("data:image/svg+xml,${encodeURIComponent(COMPASS_SVG)}")`;
+    this._icon.style.backgroundSize = "contain";
+    this._icon.style.width = "29px";
+    this._icon.style.height = "29px";
+    this._icon.style.display = "block";
+    btn.appendChild(this._icon);
+    btn.addEventListener("click", () => {
+      var _a;
+      return (_a = this._map) == null ? void 0 : _a.resetNorth();
+    });
+    this._container.appendChild(btn);
+    this._rotateHandler = () => {
+      if (this._icon && this._map) {
+        this._icon.style.transform = `rotate(${-this._map.getBearing()}deg)`;
+      }
+    };
+    this._map.on("rotate", this._rotateHandler);
+    this._rotateHandler();
+    return this._container;
+  }
+  onRemove() {
+    var _a, _b;
+    if (this._map && this._rotateHandler) {
+      this._map.off("rotate", this._rotateHandler);
+    }
+    (_b = (_a = this._container) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(this._container);
+    this._map = void 0;
+    this._container = void 0;
+    this._icon = void 0;
+  }
+}
+const DEM_SOURCE_ID = "maplibre-gl-components-terrain-dem";
+const DEM_TILE_URL = "https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png";
+class DemTerrainControl {
+  constructor() {
+    __publicField(this, "_inner");
+  }
+  _addSource(map) {
+    if (!map.getSource(DEM_SOURCE_ID)) {
+      map.addSource(DEM_SOURCE_ID, {
+        type: "raster-dem",
+        tiles: [DEM_TILE_URL],
+        tileSize: 256,
+        encoding: "terrarium"
+      });
+    }
+  }
+  onAdd(map) {
+    if (map.isStyleLoaded()) {
+      this._addSource(map);
+    } else {
+      map.once("styledata", () => this._addSource(map));
+    }
+    this._inner = new maplibregl.TerrainControl({ source: DEM_SOURCE_ID });
+    return this._inner.onAdd(map);
+  }
+  onRemove() {
+    var _a;
+    (_a = this._inner) == null ? void 0 : _a.onRemove();
+    this._inner = void 0;
+  }
+}
 class ControlGrid {
   constructor(options) {
     __publicField(this, "_container");
@@ -7674,6 +7756,8 @@ class ControlGrid {
     __publicField(this, "_map");
     __publicField(this, "_handleZoom");
     __publicField(this, "_zoomVisible", true);
+    __publicField(this, "_floatingEntry", null);
+    __publicField(this, "_floatingPanel", null);
     this._options = { ...DEFAULT_OPTIONS, ...options };
     this._state = {
       visible: this._options.visible,
@@ -7682,20 +7766,43 @@ class ControlGrid {
       columns: this._options.columns
     };
     const initial = (options == null ? void 0 : options.controls) ?? this._options.controls ?? [];
-    initial.forEach((c) => this._children.push({ control: c, element: null }));
+    initial.forEach(
+      (c) => this._children.push({
+        control: c,
+        element: null,
+        expandable: this._isExpandable(c),
+        collapsedSnapshot: null,
+        expandHandler: null,
+        collapseHandler: null,
+        _placeholder: null
+      })
+    );
     const defaults = (options == null ? void 0 : options.defaultControls) ?? [];
     for (const name of defaults) {
       const ctrl = ControlGrid._createDefaultControl(name);
-      if (ctrl) this._children.push({ control: ctrl, element: null });
+      if (ctrl)
+        this._children.push({
+          control: ctrl,
+          element: null,
+          expandable: this._isExpandable(ctrl),
+          collapsedSnapshot: null,
+          expandHandler: null,
+          collapseHandler: null,
+          _placeholder: null
+        });
     }
     this._autoGrowRows();
   }
   static _createDefaultControl(name) {
     switch (name) {
+      case "fullscreen":
+        return new maplibregl.FullscreenControl();
       case "globe":
         return new maplibregl.GlobeControl();
+      case "north":
+        return new NorthControl();
       case "terrain":
-        return new TerrainControl({ hillshade: true });
+        return new DemTerrainControl();
       case "search":
         return new SearchControl({ collapsed: true });
       case "viewState":
@@ -7743,11 +7850,25 @@ class ControlGrid {
    */
   addControl(control) {
     if (this._children.some((e) => e.control === control)) return;
-    const entry = { control, element: null };
+    const entry = {
+      control,
+      element: null,
+      expandable: this._isExpandable(control),
+      collapsedSnapshot: null,
+      expandHandler: null,
+      collapseHandler: null,
+      _placeholder: null
+    };
     this._children.push(entry);
     this._autoGrowRows();
     if (this._map && this._gridEl) {
       entry.element = control.onAdd(this._map);
+      if (entry.expandable) {
+        entry.collapsedSnapshot = entry.element.cloneNode(
+          true
+        );
+        this._attachExpandListeners(entry);
+      }
       this._gridEl.appendChild(entry.element);
     }
     this._emit("controladd", control);
@@ -7756,11 +7877,18 @@ class ControlGrid {
    * Remove a control from the grid. The control's onRemove is called.
    */
   removeControl(control) {
-    var _a;
+    var _a, _b;
     const index = this._children.findIndex((e) => e.control === control);
     if (index === -1) return;
     const entry = this._children[index];
-    if ((_a = entry.element) == null ? void 0 : _a.parentNode) {
+    if (this._floatingEntry === entry) {
+      this._clearFloating();
+    }
+    this._detachExpandListeners(entry);
+    if ((_a = entry._placeholder) == null ? void 0 : _a.parentNode) {
+      entry._placeholder.parentNode.removeChild(entry._placeholder);
+    }
+    if ((_b = entry.element) == null ? void 0 : _b.parentNode) {
       entry.element.parentNode.removeChild(entry.element);
     }
     if (this._map) control.onRemove(this._map);
@@ -7906,30 +8034,153 @@ class ControlGrid {
   _mountChildren() {
     if (!this._map || !this._gridEl) return;
     this._children.forEach((entry) => {
-      if (entry.element) {
+      if (!entry.element) {
+        entry.element = entry.control.onAdd(this._map);
+        if (entry.expandable && !entry.collapsedSnapshot) {
+          entry.collapsedSnapshot = entry.element.cloneNode(
+            true
+          );
+        }
+        this._attachExpandListeners(entry);
+      }
+      if (this._floatingEntry === entry) {
+        this._mountAsFloating(entry);
+      } else {
         if (entry.element.parentNode !== this._gridEl) {
           this._gridEl.appendChild(entry.element);
         }
-      } else {
-        entry.element = entry.control.onAdd(this._map);
-        this._gridEl.appendChild(entry.element);
       }
     });
   }
   _unmountChildren() {
+    this._clearFloating();
     const map = this._map;
     this._children.forEach((entry) => {
-      var _a;
-      if ((_a = entry.element) == null ? void 0 : _a.parentNode) {
+      var _a, _b;
+      this._detachExpandListeners(entry);
+      if ((_a = entry._placeholder) == null ? void 0 : _a.parentNode) {
+        entry._placeholder.parentNode.removeChild(entry._placeholder);
+      }
+      entry._placeholder = null;
+      if ((_b = entry.element) == null ? void 0 : _b.parentNode) {
         entry.element.parentNode.removeChild(entry.element);
       }
       if (map) entry.control.onRemove(map);
     });
     this._children = this._children.map((e) => ({
       control: e.control,
-      element: null
+      element: null,
+      expandable: e.expandable,
+      collapsedSnapshot: null,
+      expandHandler: null,
+      collapseHandler: null,
+      _placeholder: null
     }));
   }
+  _isExpandable(control) {
+    return typeof control.on === "function";
+  }
+  _attachExpandListeners(entry) {
+    if (!entry.expandable) return;
+    const ctrl = entry.control;
+    entry.expandHandler = () => this._onChildExpand(entry);
+    entry.collapseHandler = () => this._onChildCollapse(entry);
+    ctrl.on("expand", entry.expandHandler);
+    ctrl.on("collapse", entry.collapseHandler);
+  }
+  _detachExpandListeners(entry) {
+    if (!entry.expandable) return;
+    const ctrl = entry.control;
+    if (entry.expandHandler) ctrl.off("expand", entry.expandHandler);
+    if (entry.collapseHandler) ctrl.off("collapse", entry.collapseHandler);
+    entry.expandHandler = null;
+    entry.collapseHandler = null;
+  }
+  _onChildExpand(entry) {
+    if (this._floatingEntry && this._floatingEntry !== entry) {
+      this._collapseFloatingChild();
+    }
+    if (!entry.element || !this._gridEl) return;
+    const placeholder = entry.collapsedSnapshot ? entry.collapsedSnapshot.cloneNode(true) : document.createElement("div");
+    placeholder.classList.add("maplibre-gl-control-grid-placeholder--active");
+    placeholder.addEventListener("click", () => {
+      entry.control.collapse();
+      if (this._floatingEntry === entry) {
+        this._onChildCollapse(entry);
+      }
+    });
+    entry._placeholder = placeholder;
+    this._gridEl.replaceChild(placeholder, entry.element);
+    const panel = this._ensureFloatingPanel();
+    panel.appendChild(entry.element);
+    this._floatingEntry = entry;
+  }
+  _onChildCollapse(entry) {
+    if (this._floatingEntry !== entry) return;
+    if (entry._placeholder && entry.element && this._gridEl) {
+      if (entry._placeholder.parentNode === this._gridEl) {
+        this._gridEl.replaceChild(entry.element, entry._placeholder);
+      } else {
+        this._gridEl.appendChild(entry.element);
+      }
+    }
+    entry._placeholder = null;
+    if (entry.element) {
+      entry.collapsedSnapshot = entry.element.cloneNode(true);
+    }
+    if (this._floatingPanel) {
+      this._floatingPanel.style.display = "none";
+    }
+    this._floatingEntry = null;
+  }
+  _mountAsFloating(entry) {
+    if (!this._gridEl || !entry.element) return;
+    const placeholder = entry.collapsedSnapshot ? entry.collapsedSnapshot.cloneNode(true) : document.createElement("div");
+    placeholder.classList.add("maplibre-gl-control-grid-placeholder--active");
+    placeholder.addEventListener("click", () => {
+      entry.control.collapse();
+      if (this._floatingEntry === entry) {
+        this._onChildCollapse(entry);
+      }
+    });
+    entry._placeholder = placeholder;
+    this._gridEl.appendChild(placeholder);
+    const panel = this._ensureFloatingPanel();
+    panel.appendChild(entry.element);
+  }
+  _ensureFloatingPanel() {
+    if (!this._floatingPanel) {
+      this._floatingPanel = document.createElement("div");
+      this._floatingPanel.className = "maplibre-gl-control-grid-floating-panel";
+    }
+    if (this._container && this._floatingPanel.parentNode !== this._container) {
+      this._container.appendChild(this._floatingPanel);
+    }
+    const isCollapsedWithHeader = this._state.collapsed && (this._options.title || this._options.collapsible);
+    const expandedOffset = Math.max(0, this._options.padding - 1);
+    const expandedContainerPad = Math.max(0, this._options.padding - 10);
+    const rightPad = isCollapsedWithHeader ? expandedOffset - expandedContainerPad : expandedOffset;
+    this._floatingPanel.style.right = `-${rightPad}px`;
+    this._floatingPanel.style.display = "block";
+    return this._floatingPanel;
+  }
+  _clearFloating() {
+    if (this._floatingEntry) {
+      this._floatingEntry._placeholder = null;
+    }
+    this._floatingEntry = null;
+    if (this._floatingPanel) {
+      this._floatingPanel.remove();
+      this._floatingPanel = null;
+    }
+  }
+  _collapseFloatingChild() {
+    if (!this._floatingEntry) return;
+    const ctrl = this._floatingEntry.control;
+    if (typeof ctrl.collapse === "function") {
+      ctrl.collapse();
+    }
+  }
   _render() {
     if (!this._container) return;
     const {
@@ -8158,4 +8409,4 @@ exports.terrain = terrain;
 exports.throttle = throttle;
 exports.turbo = turbo;
 exports.viridis = viridis;
-//# sourceMappingURL=ControlGrid-EJTb0ceR.cjs.map
+//# sourceMappingURL=ControlGrid-CT_rvuo_.cjs.map