maplibre-preview 1.7.2 → 1.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ab6c314ff00f531f6088b82f2d11b44206fe947f407d512f725ea5efd4df10d1
-  data.tar.gz: 2698dbd6a6c458f4c475d71b5dc549bbfde888c96357c6d18c74060b666ffca7
+  metadata.gz: 61c7dd8ecf3753aa43ba5272cc06dab258cbb643824e74336e21e07680795cd6
+  data.tar.gz: 6a008af2ffe1b2f3331dc752ab36041767299cc38271f9f9433567f268952198
 SHA512:
-  metadata.gz: deefd8864adfd9cdd6189f10834bab986c11cfd50e1413eca36f57238ff3d6d3a98eda71bb370e0c14699542abcc9bb8bdde4b271f2693bd802777184539dc9f
-  data.tar.gz: 599cdcbc90b314f3bdc21a765fe6817094cec77073843896fca53b77a7e9be90d5a8ccbfe331dc969dd50fd7dcccb3e3e5721095acead56ee958833d13867a6a
+  metadata.gz: c75eede1968d1ddfaa8c388de5c827bf6f8e27f5bcc628938aca1c61f7ccf2896cb70f9a498f6262f352a4c1a211881a87ac09133da2445cd3e6c02f6fa42aac
+  data.tar.gz: 435d1192991bacd4730d547eb3f580f99c8d287fabb29e221432a44b309c6b73e25c198f6abea453e0a9ab0ba5d4de6b83adff1fcd4e68cbd73ec03c67e9f22e

data/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.8.0] - 2026-05-14
+
+### Added
+- **Movable overlay windows** - added `OverlayLayoutManager` for shared drag, edge clamping, snapping and persisted positions of movable map UI panels
+- **Window layout reset** - added `Reset window layout` action in Map Settings to clear saved panel positions from local storage and restore defaults
+
+### Changed
+- **Panel layout foundation** - moved Map Settings, Style Controls, Style Parameters, Performance, Elevation Profile and Tile Boundaries to the shared overlay layout manager
+- **Default panel positions** - kept static map controls attached to map edges and placed Map Settings in the top-left default position
+
+### Fixed
+- **Overlay visibility** - fixed managed panel z-index so map settings, filter controls and static MapLibre controls remain visible
+- **Elevation profile frame** - fixed profile window positioning and sizing while dragging near the bottom edge
+
 ## [1.7.2] - 2026-05-14
 
 ### Changed

data/lib/maplibre-preview/public/js/overlay_layout.js

@@ -0,0 +1,415 @@
+class OverlayLayoutManager {
+    constructor(options = {}) {
+        this.storageKey = options.storageKey || 'maplibre-preview:overlay-layout:v3';
+        this.snapThreshold = options.snapThreshold || 32;
+        this.mobileBreakpoint = options.mobileBreakpoint || 768;
+        this.edgeGap = options.edgeGap || 10;
+        this.getReservedBounds = options.getReservedBounds || (() => ({}));
+        this.panels = new Map();
+        this.state = this.loadState();
+        this.drag = null;
+        this.zIndex = 1100;
+        this.resizeHandler = () => this.refreshBounds();
+        window.addEventListener('resize', this.resizeHandler);
+    }
+
+    registerPanel(config) {
+        const element = this.resolveElement(config.element);
+        if (!element) return null;
+
+        const id = config.id || element.id;
+        if (!id) return null;
+
+        const existing = this.panels.get(id);
+        if (existing) this.unregisterPanel(id);
+
+        const panel = {
+            id,
+            element,
+            handle: this.resolveHandle(element, config.handleSelector),
+            defaultAnchor: config.defaultAnchor || 'left',
+            defaultOffset: config.defaultOffset || {x: 0, y: 0},
+            snap: config.snap !== false,
+            lockSizeOnDrag: config.lockSizeOnDrag === true,
+            movable: config.movable !== false,
+            cleanup: []
+        };
+
+        element.dataset.overlayPanelId = id;
+        element.classList.add('overlay-managed-panel');
+        this.panels.set(id, panel);
+
+        if (panel.movable && panel.handle) {
+            this.prepareHandle(panel);
+        }
+
+        this.applyStoredOrDefaultPosition(panel);
+        return panel;
+    }
+
+    unregisterPanel(id) {
+        const panel = this.panels.get(id);
+        if (!panel) return;
+
+        panel.cleanup.forEach(fn => fn());
+        panel.element.classList.remove('overlay-managed-panel', 'overlay-dragging');
+        panel.element.removeAttribute('data-overlay-panel-id');
+        this.panels.delete(id);
+    }
+
+    movePanelTo(id, anchor) {
+        const panel = this.panels.get(id);
+        if (!panel) return;
+
+        const nextState = {mode: 'anchor', anchor, offset: {x: 0, y: 0}};
+        this.setPanelState(panel, nextState);
+    }
+
+    resetPanel(id) {
+        const panel = this.panels.get(id);
+        if (!panel) return;
+
+        delete this.state[id];
+        this.persistState();
+        this.applyStoredOrDefaultPosition(panel);
+    }
+
+    resetLayout() {
+        this.state = {};
+        this.clearStoredState();
+        this.panels.forEach(panel => this.applyStoredOrDefaultPosition(panel));
+    }
+
+    refreshPanel(id) {
+        const panel = this.panels.get(id);
+        if (!panel) return;
+        if (this.drag?.panel?.id === id) return;
+
+        const panelState = this.state[id] || this.defaultState(panel);
+        this.applyPanelState(panel, panelState);
+    }
+
+    refreshBounds() {
+        if (this.drag) return;
+        this.panels.forEach(panel => this.refreshPanel(panel.id));
+    }
+
+    destroy() {
+        window.removeEventListener('resize', this.resizeHandler);
+        [...this.panels.keys()].forEach(id => this.unregisterPanel(id));
+    }
+
+    resolveElement(elementOrSelector) {
+        if (!elementOrSelector) return null;
+        return typeof elementOrSelector === 'string'
+            ? document.querySelector(elementOrSelector)
+            : elementOrSelector;
+    }
+
+    resolveHandle(element, selector) {
+        return selector ? element.querySelector(selector) : element;
+    }
+
+    prepareHandle(panel) {
+        const pointerDown = event => this.onPointerDown(event, panel);
+        const keyDown = event => this.onHandleKeyDown(event, panel);
+
+        panel.handle.classList.add('overlay-panel-handle');
+        panel.handle.tabIndex = panel.handle.tabIndex >= 0 ? panel.handle.tabIndex : 0;
+        if (!panel.handle.querySelector('button, input, select, textarea, a')) {
+            panel.handle.setAttribute('role', panel.handle.getAttribute('role') || 'button');
+        }
+        panel.handle.setAttribute('aria-label', panel.handle.getAttribute('aria-label') || `Move ${panel.id} panel`);
+        panel.handle.addEventListener('pointerdown', pointerDown);
+        panel.handle.addEventListener('keydown', keyDown);
+        panel.cleanup.push(() => panel.handle.removeEventListener('pointerdown', pointerDown));
+        panel.cleanup.push(() => panel.handle.removeEventListener('keydown', keyDown));
+    }
+
+    onPointerDown(event, panel) {
+        if (event.button !== 0 || !panel.movable || this.isInteractiveTarget(event.target)) return;
+
+        const rect = panel.element.getBoundingClientRect();
+        const pointerMove = moveEvent => this.onPointerMove(moveEvent);
+        const pointerUp = upEvent => this.onPointerUp(upEvent);
+
+        if (panel.lockSizeOnDrag) {
+            panel.element.style.width = `${Math.round(rect.width)}px`;
+            panel.element.style.height = `${Math.round(rect.height)}px`;
+        }
+
+        this.drag = {
+            panel,
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+            originX: rect.left,
+            originY: rect.top,
+            pointerMove,
+            pointerUp
+        };
+
+        panel.element.classList.add('overlay-dragging');
+        this.bringToFront(panel);
+        try {
+            panel.handle.setPointerCapture?.(event.pointerId);
+        } catch (e) {
+            // Some synthetic pointer events do not create an active pointer capture target.
+        }
+
+        panel.handle.addEventListener('pointermove', pointerMove);
+        panel.handle.addEventListener('pointerup', pointerUp);
+        panel.handle.addEventListener('pointercancel', pointerUp);
+        event.preventDefault();
+    }
+
+    onPointerMove(event) {
+        if (!this.drag || event.pointerId !== this.drag.pointerId) return;
+
+        const nextX = this.drag.originX + event.clientX - this.drag.startX;
+        const nextY = this.drag.originY + event.clientY - this.drag.startY;
+        const position = this.clampPosition(this.drag.panel, nextX, nextY);
+
+        this.applyPosition(this.drag.panel, position.x, position.y);
+    }
+
+    onPointerUp(event) {
+        if (!this.drag || event.pointerId !== this.drag.pointerId) return;
+
+        const panel = this.drag.panel;
+        const rect = panel.element.getBoundingClientRect();
+        const nextState = this.stateFromPosition(panel, rect.left, rect.top);
+        this.cleanupDrag();
+        this.setPanelState(panel, nextState);
+    }
+
+    cleanupDrag() {
+        if (!this.drag) return null;
+
+        const drag = this.drag;
+        try {
+            drag.panel.handle.releasePointerCapture?.(drag.pointerId);
+        } catch (e) {
+            // Pointer capture may already be released by the browser.
+        }
+        drag.panel.handle.removeEventListener('pointermove', drag.pointerMove);
+        drag.panel.handle.removeEventListener('pointerup', drag.pointerUp);
+        drag.panel.handle.removeEventListener('pointercancel', drag.pointerUp);
+        drag.panel.element.classList.remove('overlay-dragging');
+        this.drag = null;
+        return drag;
+    }
+
+    onHandleKeyDown(event, panel) {
+        if (event.key === 'Escape' && this.drag) {
+            this.cleanupDrag();
+            this.refreshPanel(panel.id);
+            return;
+        }
+
+        if (!event.shiftKey || !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) return;
+
+        const rect = panel.element.getBoundingClientRect();
+        const step = event.altKey ? 32 : 8;
+        const delta = {
+            ArrowLeft: [-step, 0],
+            ArrowRight: [step, 0],
+            ArrowUp: [0, -step],
+            ArrowDown: [0, step]
+        }[event.key];
+        const position = this.clampPosition(panel, rect.left + delta[0], rect.top + delta[1]);
+
+        this.setPanelState(panel, {mode: 'free', x: position.x, y: position.y});
+        event.preventDefault();
+    }
+
+    isInteractiveTarget(target) {
+        return target?.closest?.('button, input, select, textarea, a, label, [data-overlay-ignore-drag="true"]');
+    }
+
+    bringToFront(panel) {
+        this.zIndex += 1;
+        panel.element.style.zIndex = String(this.zIndex);
+    }
+
+    loadState() {
+        try {
+            return JSON.parse(localStorage.getItem(this.storageKey) || '{}');
+        } catch (e) {
+            console.warn('OverlayLayoutManager: could not load layout state', e);
+            return {};
+        }
+    }
+
+    persistState() {
+        try {
+            localStorage.setItem(this.storageKey, JSON.stringify(this.state));
+        } catch (e) {
+            console.warn('OverlayLayoutManager: could not persist layout state', e);
+        }
+    }
+
+    clearStoredState() {
+        try {
+            localStorage.removeItem(this.storageKey);
+        } catch (e) {
+            console.warn('OverlayLayoutManager: could not clear layout state', e);
+        }
+    }
+
+    defaultState(panel) {
+        const offset = typeof panel.defaultOffset === 'function'
+            ? panel.defaultOffset(panel)
+            : panel.defaultOffset;
+
+        return {
+            mode: 'anchor',
+            anchor: panel.defaultAnchor,
+            offset: {...offset}
+        };
+    }
+
+    applyStoredOrDefaultPosition(panel) {
+        const panelState = this.state[panel.id] || this.defaultState(panel);
+        this.applyPanelState(panel, panelState);
+    }
+
+    setPanelState(panel, panelState) {
+        this.state[panel.id] = panelState;
+        this.persistState();
+        this.applyPanelState(panel, panelState);
+    }
+
+    applyPanelState(panel, panelState) {
+        const responsiveState = this.isConstrainedViewport() && panelState.mode === 'free'
+            ? this.defaultState(panel)
+            : panelState;
+        const position = responsiveState.mode === 'free'
+            ? this.clampPosition(panel, responsiveState.x, responsiveState.y)
+            : this.positionForAnchor(panel, responsiveState.anchor, responsiveState.offset || {x: 0, y: 0});
+
+        this.applyPosition(panel, position.x, position.y);
+    }
+
+    applyPosition(panel, x, y) {
+        panel.element.style.position = 'fixed';
+        panel.element.style.left = `${Math.round(x)}px`;
+        panel.element.style.top = `${Math.round(y)}px`;
+        panel.element.style.right = 'auto';
+        panel.element.style.bottom = 'auto';
+        panel.element.style.transform = 'none';
+    }
+
+    positionForAnchor(panel, anchor, offset) {
+        const rect = this.panelRect(panel);
+        const viewport = this.viewportBounds();
+        const centerX = (viewport.width - rect.width) / 2;
+        const centerY = (viewport.height - viewport.reservedBottom - rect.height) / 2;
+        let x = centerX;
+        let y = centerY;
+
+        if (anchor === 'left') {
+            x = this.edgeGap + (offset.x || 0);
+            y = centerY + (offset.y || 0);
+        } else if (anchor === 'right') {
+            x = viewport.width - rect.width - this.edgeGap + (offset.x || 0);
+            y = centerY + (offset.y || 0);
+        } else if (anchor === 'top') {
+            x = centerX + (offset.x || 0);
+            y = this.edgeGap + (offset.y || 0);
+        } else if (anchor === 'bottom') {
+            x = centerX + (offset.x || 0);
+            y = viewport.height - viewport.reservedBottom - rect.height - this.edgeGap + (offset.y || 0);
+        } else if (anchor === 'top-left') {
+            x = this.edgeGap + (offset.x || 0);
+            y = this.edgeGap + (offset.y || 0);
+        } else if (anchor === 'top-right') {
+            x = viewport.width - rect.width - this.edgeGap + (offset.x || 0);
+            y = this.edgeGap + (offset.y || 0);
+        } else if (anchor === 'bottom-left') {
+            x = this.edgeGap + (offset.x || 0);
+            y = viewport.height - viewport.reservedBottom - rect.height - this.edgeGap + (offset.y || 0);
+        } else if (anchor === 'bottom-right') {
+            x = viewport.width - rect.width - this.edgeGap + (offset.x || 0);
+            y = viewport.height - viewport.reservedBottom - rect.height - this.edgeGap + (offset.y || 0);
+        }
+
+        return this.clampPosition(panel, x, y);
+    }
+
+    stateFromPosition(panel, x, y) {
+        if (this.isConstrainedViewport()) {
+            return {mode: 'anchor', anchor: this.nearestAnchor(panel, x, y).anchor, offset: {x: 0, y: 0}};
+        }
+
+        const nearest = this.nearestAnchor(panel, x, y);
+        if (!panel.snap || nearest.distance > this.snapThreshold) {
+            const clamped = this.clampPosition(panel, x, y);
+            return {mode: 'free', x: clamped.x, y: clamped.y};
+        }
+
+        const rect = this.panelRect(panel);
+        const viewport = this.viewportBounds();
+        const centerX = (viewport.width - rect.width) / 2;
+        const centerY = (viewport.height - viewport.reservedBottom - rect.height) / 2;
+        const offset = {x: 0, y: 0};
+
+        if (nearest.anchor === 'left' || nearest.anchor === 'right') {
+            offset.y = y - centerY;
+        } else {
+            offset.x = x - centerX;
+        }
+
+        return {mode: 'anchor', anchor: nearest.anchor, offset};
+    }
+
+    nearestAnchor(panel, x, y) {
+        const rect = this.panelRect(panel);
+        const viewport = this.viewportBounds();
+        const distances = [
+            ['left', x],
+            ['right', viewport.width - (x + rect.width)],
+            ['top', y],
+            ['bottom', viewport.height - viewport.reservedBottom - (y + rect.height)]
+        ].map(([anchor, distance]) => ({anchor, distance: Math.abs(distance)}));
+
+        return distances.sort((a, b) => a.distance - b.distance)[0];
+    }
+
+    clampPosition(panel, x, y) {
+        const rect = this.panelRect(panel);
+        const viewport = this.viewportBounds();
+        const minX = this.edgeGap;
+        const minY = this.edgeGap;
+        const maxX = Math.max(minX, viewport.width - rect.width - this.edgeGap);
+        const maxY = Math.max(minY, viewport.height - viewport.reservedBottom - rect.height - this.edgeGap);
+
+        return {
+            x: Math.min(maxX, Math.max(minX, x)),
+            y: Math.min(maxY, Math.max(minY, y))
+        };
+    }
+
+    panelRect(panel) {
+        const rect = panel.element.getBoundingClientRect();
+        return {
+            width: rect.width || panel.element.offsetWidth || 1,
+            height: rect.height || panel.element.offsetHeight || 1
+        };
+    }
+
+    viewportBounds() {
+        const reserved = this.getReservedBounds() || {};
+        return {
+            width: window.innerWidth,
+            height: window.innerHeight,
+            reservedBottom: Math.max(0, Number(reserved.bottom || 0))
+        };
+    }
+
+    isConstrainedViewport() {
+        return window.innerWidth < this.mobileBreakpoint;
+    }
+}
+
+window.OverlayLayoutManager = OverlayLayoutManager;

data/lib/maplibre-preview/public/js/tilegrid.js

@@ -44,6 +44,13 @@ class TileGridManager {
         `;
 
         document.getElementById('map-container').appendChild(this.panelContainer);
+        window.overlayLayoutManager?.registerPanel({
+            id: 'tilegrid',
+            element: this.panelContainer,
+            handleSelector: '.tilegrid-title',
+            defaultAnchor: 'right',
+            defaultOffset: {x: 0, y: 0}
+        });
     }
 
     setupEventListeners() {
@@ -114,6 +121,7 @@ class TileGridManager {
         
         if (this.panelContainer) {
             this.panelContainer.style.display = this.isVisible ? 'block' : 'none';
+            this.isVisible && window.overlayLayoutManager?.refreshPanel('tilegrid');
         }
 
         const btn = document.getElementById('tilegrid-mode-btn');
@@ -163,6 +171,7 @@ class TileGridManager {
         }
 
         if (this.panelContainer && this.panelContainer.parentNode) {
+            window.overlayLayoutManager?.unregisterPanel('tilegrid');
             this.panelContainer.parentNode.removeChild(this.panelContainer);
         }
 

data/lib/maplibre-preview/version.rb

@@ -1,3 +1,3 @@
 module MapLibrePreview
-  VERSION = '1.7.2'
+  VERSION = '1.8.0'
 end

data/lib/maplibre-preview/views/maplibre_layout.slim

@@ -10,6 +10,7 @@ html
     script[src="#{base_path}/vendor/maplibre-gl/maplibre-gl.js"]
     script[src="#{base_path}/vendor/maplibre-contour/index.min.js"]
     script[src="#{base_path}/vendor/d3/d3.v7.min.js"]
+    script[src="#{base_path}/js/overlay_layout.js"]
     script[src="#{base_path}/js/filters.js"]
     script[src="#{base_path}/js/contour.js"]
     script[src="#{base_path}/js/tilegrid.js"]
@@ -174,7 +175,7 @@ html
       | .controls a { color: #6897bb; text-decoration: none; margin-right: 15px; }
       | .controls a:hover { text-decoration: underline; }
       | .layer-controls-wrapper {
-      |   position: absolute; top: 50%; left: 10px; transform: translateY(-50%); z-index: 1000;
+      |   position: static; z-index: 1000;
       |   display: flex; align-items: flex-start; gap: 0;
       | }
       | .layer-controls {
@@ -204,6 +205,22 @@ html
       | .control-section-header {
       |   display: flex; align-items: center; justify-content: space-between; gap: 8px;
       | }
+      | .overlay-managed-panel {
+      |   z-index: 1000; will-change: left, top;
+      | }
+      | .overlay-dragging {
+      |   cursor: grabbing;
+      |   user-select: none;
+      |   transition: none !important;
+      | }
+      | .overlay-panel-handle {
+      |   cursor: grab; touch-action: none; user-select: none;
+      |   -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
+      | }
+      | .overlay-panel-handle:focus-visible {
+      |   outline: 1px solid #6897bb;
+      |   outline-offset: 2px;
+      | }
       | .control-section-title {
       |   color: #ffc66d; font-size: 11px; font-weight: bold; line-height: 1.2;
       |   text-transform: uppercase;
@@ -330,13 +347,21 @@ html
       |   color: #a9b7c6; overflow: hidden;
       | }
       | .style-parameters-header {
-      |   display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
+      |   display: flex; align-items: center; gap: 12px;
       |   width: 100%; background: transparent; color: inherit; border: none;
-      |   padding: 10px 12px; cursor: pointer; text-align: left;
+      |   padding: 10px 12px; text-align: left;
       | }
       | .style-parameters-header:hover {
       |   background: rgba(75, 77, 79, 0.95);
       | }
+      | .style-parameters-toggle {
+      |   display: inline-flex; align-items: center; justify-content: center;
+      |   width: 22px; height: 22px; background: transparent; color: #a9b7c6;
+      |   border: 1px solid transparent; border-radius: 2px; cursor: pointer;
+      | }
+      | .style-parameters-toggle:hover {
+      |   background: #4b4d4f; border-color: #555555;
+      | }
       | .style-parameters-title {
       |   color: #ffc66d; font-size: 11px; font-weight: bold; line-height: 1.2;
       |   text-transform: uppercase;
@@ -487,6 +512,10 @@ html
       |   transition: width 0.3s ease; width: 0%;
       | }
       | /* MapLibre Controls */
+      | .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right,
+      | .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right {
+      |   z-index: 1000 !important;
+      | }
       | .maplibregl-ctrl-scale, .maplibregl-ctrl-group, .maplibregl-ctrl-terrain, .maplibregl-ctrl-globe {
       |   background: rgba(60, 63, 65, 0.95) !important; border: 1px solid #555555 !important;
       |   border-radius: 4px !important;
@@ -512,10 +541,12 @@ html
       |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555;
       |   border-radius: 6px; padding: 12px; width: 70vw; max-width: 800px;
       |   backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      |   overflow: hidden;
       | }
       | .profile-header {
-      |   display: flex; justify-content: space-between; align-items: center;
+      |   display: flex; justify-content: flex-start; align-items: center;
       |   margin-bottom: 8px; border-bottom: 1px solid #555555; padding-bottom: 8px;
+      |   gap: 8px;
       | }
       | .profile-title { color: #ffc66d; font-weight: bold; font-size: 12px; }
       | .profile-close {
@@ -523,6 +554,7 @@ html
       |   font-size: 14px; padding: 0; width: 16px; height: 16px;
       |   display: flex; align-items: center; justify-content: center;
       |   border-radius: 2px; transition: all 0.2s ease;
+      |   margin-left: auto;
       | }
       | .profile-close:hover { background: #4b4d4f; color: #a9b7c6; }
       | .profile-stats {
@@ -567,7 +599,7 @@ html
       |   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
       | }
       | .tilegrid-header {
-      |   display: flex; justify-content: space-between; align-items: center;
+      |   display: flex; justify-content: flex-start; align-items: center; gap: 8px;
       |   margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #555555;
       | }
       | .tilegrid-title {
@@ -578,6 +610,7 @@ html
       |   font-size: 14px; padding: 0; width: 16px; height: 16px;
       |   display: flex; align-items: center; justify-content: center;
       |   border-radius: 2px; transition: all 0.2s ease;
+      |   margin-left: auto;
       | }
       | .tilegrid-close:hover {
       |   background: #4b4d4f; color: #a9b7c6;

data/lib/maplibre-preview/views/maplibre_map.slim

@@ -35,6 +35,7 @@ ruby:
                   span.setting-value id="terrain-exaggeration-value" 1.0x
                 input.setting-range id="terrain-exaggeration-slider" type="range" min="0" max="3" step="0.1" value="1" oninput="setTerrainExaggeration(this.value)"
               button.control-button onclick="toggleAntialias()" id="antialias-btn" Antialias
+              button.control-button onclick="resetOverlayLayout()" id="overlay-layout-reset-btn" Reset window layout
 
             #settings-debug-panel.control-panel.settings-panel
               button.control-button onclick="toggleMapCache()" id="map-cache-btn" Cache
@@ -78,12 +79,13 @@ ruby:
   #map.map-layer data-style-url="#{style_url}"
 
   #style-parameters-panel.style-parameters-overlay.collapsed style="display: none;"
-    button.style-parameters-header type="button" onclick="toggleStyleParametersPanel()" id="style-parameters-toggle" aria-expanded="false"
+    .style-parameters-header
       span.style-parameters-title Style parameters
       span.style-parameters-summary
         span#style-parameters-count 0
         span params
-      span.style-parameters-toggle-icon ▲
+      button.style-parameters-toggle type="button" onclick="toggleStyleParametersPanel()" id="style-parameters-toggle" aria-expanded="false" title="Collapse/Expand Style parameters"
+        span.style-parameters-toggle-icon ▲
     .style-parameters-body
       #style-parameter-fields.style-parameter-fields
       .style-parameter-actions
@@ -150,6 +152,7 @@ javascript:
     let currentProfile = null;
     let contourManager = null;
     let tileGridManager = null;
+    let overlayLayoutManager = null;
     let originalStyle = null;
     let styleParameterDefinitions = new Map();
     let styleParameterValues = {};
@@ -328,6 +331,7 @@ javascript:
         });
 
         layoutBottomOverlays();
+        overlayLayoutManager?.refreshPanel('style-parameters');
     };
 
     const toggleStyleParametersPanel = () => {
@@ -338,6 +342,7 @@ javascript:
         const isCollapsed = panel.classList.toggle('collapsed');
         toggle?.setAttribute('aria-expanded', String(!isCollapsed));
         layoutBottomOverlays();
+        overlayLayoutManager?.refreshPanel('style-parameters');
     };
 
     const initializeStyleParameters = async (style) => {
@@ -392,7 +397,7 @@ javascript:
 
     const patchRequestUrl = (resourceUrl) => shouldPatchRequestUrl(resourceUrl) ? appendStyleParametersToUrl(resourceUrl) : resourceUrl;
 
-    const BOTTOM_OVERLAY_IDS = ['style-parameters-panel', 'loading-indicator', 'profile-overlay'];
+    const BOTTOM_OVERLAY_IDS = ['loading-indicator'];
     const BOTTOM_OVERLAY_BASE_OFFSET = 20;
     const BOTTOM_OVERLAY_GAP = 12;
 
@@ -419,6 +424,69 @@ javascript:
                 element.style.bottom = `${bottomOffset}px`;
                 bottomOffset += element.offsetHeight + BOTTOM_OVERLAY_GAP;
             });
+            overlayLayoutManager?.refreshBounds();
+        });
+    };
+
+    const getSystemReservedBottom = () => {
+        const loading = document.getElementById('loading-indicator');
+        return isVisibleBottomOverlay(loading) ? loading.offsetHeight + BOTTOM_OVERLAY_BASE_OFFSET + BOTTOM_OVERLAY_GAP : 0;
+    };
+
+    const leftControlStackOffset = (sectionName) => {
+        const mapSettings = document.getElementById('map-settings-wrapper');
+        const styleControls = document.getElementById('style-controls-wrapper');
+        const gap = 12;
+        const mapHeight = mapSettings?.getBoundingClientRect().height || mapSettings?.offsetHeight || 0;
+        const styleHeight = styleControls?.getBoundingClientRect().height || styleControls?.offsetHeight || 0;
+
+        return {
+            x: 0,
+            y: sectionName === 'map-settings' ? -((styleHeight + gap) / 2) : ((mapHeight + gap) / 2)
+        };
+    };
+
+    const initializeOverlayLayout = () => {
+        if (!window.OverlayLayoutManager) return;
+
+        overlayLayoutManager?.destroy();
+        overlayLayoutManager = new OverlayLayoutManager({
+            storageKey: 'maplibre-preview:overlay-layout:v3',
+            snapThreshold: 32,
+            mobileBreakpoint: 768,
+            edgeGap: 10,
+            getReservedBounds: () => ({bottom: getSystemReservedBottom()})
+        });
+        window.overlayLayoutManager = overlayLayoutManager;
+        window.resetOverlayLayout = () => overlayLayoutManager.resetLayout();
+
+        overlayLayoutManager.registerPanel({
+            id: 'map-settings',
+            element: '#map-settings-wrapper',
+            handleSelector: '.control-section-title',
+            defaultAnchor: 'top-left',
+            defaultOffset: {x: 0, y: 0}
+        });
+        overlayLayoutManager.registerPanel({
+            id: 'style-controls',
+            element: '#style-controls-wrapper',
+            handleSelector: '.control-section-title',
+            defaultAnchor: 'left',
+            defaultOffset: () => leftControlStackOffset('style-controls')
+        });
+        overlayLayoutManager.registerPanel({
+            id: 'style-parameters',
+            element: '#style-parameters-panel',
+            handleSelector: '.style-parameters-title',
+            defaultAnchor: 'bottom',
+            defaultOffset: {x: 0, y: 0}
+        });
+        overlayLayoutManager.registerPanel({
+            id: 'performance',
+            element: '#performance-panel',
+            handleSelector: '.performance-content',
+            defaultAnchor: 'top',
+            defaultOffset: {x: 0, y: -10}
         });
     };
 
@@ -648,6 +716,7 @@ javascript:
             });
             filters.init();
             createLayerButtons();
+            overlayLayoutManager?.refreshBounds();
         } catch (e) {
             console.warn('Filter initialization failed:', e);
         }
@@ -947,7 +1016,19 @@ javascript:
 
         [header, stats, chart].forEach(el => overlay.appendChild(el));
         document.getElementById('map-container').appendChild(overlay);
-        setTimeout(() => drawSimpleProfileChart(profile), 10);
+        overlayLayoutManager?.registerPanel({
+            id: 'profile',
+            element: overlay,
+            handleSelector: '.profile-title',
+            defaultAnchor: 'bottom',
+            defaultOffset: {x: 0, y: -16},
+            snap: false,
+            lockSizeOnDrag: true
+        });
+        setTimeout(() => {
+            drawSimpleProfileChart(profile);
+            overlayLayoutManager?.refreshPanel('profile');
+        }, 10);
         layoutBottomOverlays();
     };
 
@@ -1025,6 +1106,7 @@ javascript:
     };
 
     const hideProfile = () => {
+        overlayLayoutManager?.unregisterPanel('profile');
         document.getElementById('profile-overlay')?.remove();
         layoutBottomOverlays();
         map.getLayer('profile-line') && (map.removeLayer('profile-line'), map.removeSource('profile-line'));
@@ -1491,4 +1573,5 @@ javascript:
     window.tileGridManager = null;
     window.addEventListener('resize', layoutBottomOverlays);
 
+    initializeOverlayLayout();
     initializeMap();

data/spec/maplibre_preview_spec.rb

@@ -14,6 +14,7 @@ RSpec.describe MapLibrePreview do
       expect(last_response.body).to include('maplibre-gl')
       expect(last_response.body).to include('maplibre-contour')
       expect(last_response.body).to include('d3')
+      expect(last_response.body).to include('overlay_layout')
     end
 
     it 'renders map cache toggle wiring' do
@@ -38,6 +39,13 @@ RSpec.describe MapLibrePreview do
       expect(last_response.body).to include('id="style-parameter-fields"')
       expect(last_response.body).to include('id="style-parameters-apply"')
       expect(last_response.body).to include('id="style-parameters-reset"')
+      expect(last_response.body).to include('OverlayLayoutManager')
+      expect(last_response.body).to include('overlayLayoutManager')
+      expect(last_response.body).to include('resetOverlayLayout')
+      expect(last_response.body).to include('id="overlay-layout-reset-btn"')
+      expect(last_response.body).to include('Reset window layout')
+      expect(last_response.body).to include('maplibre-preview:overlay-layout:v3')
+      expect(last_response.body).not_to include('overlay-panel-dock-actions')
       expect(last_response.body).to include('mapCacheDisabled')
       expect(last_response.body).to include('basemapOpacity')
       expect(last_response.body).to include('terrainExaggeration')
@@ -60,7 +68,7 @@ RSpec.describe MapLibrePreview do
     end
 
     it 'serves all required JavaScript modules' do
-      %w[/js/filters.js /js/contour.js /js/tilegrid.js /vendor/maplibre-gl/maplibre-gl.js /vendor/maplibre-contour/index.min.js /vendor/d3/d3.v7.min.js].each do |js_file|
+      %w[/js/overlay_layout.js /js/filters.js /js/contour.js /js/tilegrid.js /vendor/maplibre-gl/maplibre-gl.js /vendor/maplibre-contour/index.min.js /vendor/d3/d3.v7.min.js].each do |js_file|
         get js_file
         expect(last_response).to be_ok
         expect(last_response.content_type).to include('javascript')
@@ -88,6 +96,7 @@ RSpec.describe MapLibrePreview do
       expect(body).to include('/vendor/maplibre-gl/maplibre-gl.js')
       expect(body).to include('/vendor/maplibre-contour/index.min.js')
       expect(body).to include('/vendor/d3/d3.v7.min.js')
+      expect(body).to include('/js/overlay_layout.js')
       expect(body).not_to include('unpkg.com')
       expect(body).not_to include('d3js.org')
     end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: maplibre-preview
 version: !ruby/object:Gem::Version
-  version: 1.7.2
+  version: 1.8.0
 platform: ruby
 authors:
 - Alexander Ludov
@@ -203,6 +203,7 @@ files:
 - lib/maplibre-preview.rb
 - lib/maplibre-preview/public/js/contour.js
 - lib/maplibre-preview/public/js/filters.js
+- lib/maplibre-preview/public/js/overlay_layout.js
 - lib/maplibre-preview/public/js/tilegrid.js
 - lib/maplibre-preview/public/vendor/d3/d3.v7.min.js
 - lib/maplibre-preview/public/vendor/maplibre-contour/index.min.js