maplibre-preview 1.7.2 → 1.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ab6c314ff00f531f6088b82f2d11b44206fe947f407d512f725ea5efd4df10d1
-  data.tar.gz: 2698dbd6a6c458f4c475d71b5dc549bbfde888c96357c6d18c74060b666ffca7
+  metadata.gz: 2c43caaa2de2305aa8211b7d1de99aaf7337b6162d7d99a448f73007c717591a
+  data.tar.gz: b16f170dc316e26844ffa6dd44d8401d38ba9128a9cf0dc13bd3abd1b30d0507
 SHA512:
-  metadata.gz: deefd8864adfd9cdd6189f10834bab986c11cfd50e1413eca36f57238ff3d6d3a98eda71bb370e0c14699542abcc9bb8bdde4b271f2693bd802777184539dc9f
-  data.tar.gz: 599cdcbc90b314f3bdc21a765fe6817094cec77073843896fca53b77a7e9be90d5a8ccbfe331dc969dd50fd7dcccb3e3e5721095acead56ee958833d13867a6a
+  metadata.gz: 2401ce59b8a156a2b34ddeecc36a3c6ad4ae161f41fcf998d3e2a6c788cf096f62fde591327948bdf18f1625b8eb9d0e55f226f8d758f7d6b0d8524087bc43f1
+  data.tar.gz: ad6e8ab6f576675903edda6b0859df42ef467dffff70e651eaacb36bbb8c906806b7d3bfec2d29545bcad663bcc99a114d88b912edd22caf115d5b7ecbdada0f

data/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [1.9.0] - 2026-05-14
+
+### Added
+- **Temporal parameter picker** - added a custom calendar and time picker for date/time-like style parameters
+- **Style parameter context** - show source/layer counts and localized usage hints for each detected style parameter
+
+### Changed
+- **Style parameter URL matching** - track source-specific parameterized URL rules and append only the parameters declared for the matching source
+- **Temporal parameter inputs** - use the custom picker for temporal parameters while keeping query values normalized to epoch seconds
+
+### Fixed
+- **Source metadata inspection** - fetch source metadata without pre-appending parameter values so metadata-declared parameters can be discovered reliably
+- **Parameterized tile requests** - removed the broad `/rb_tiles/` heuristic in favor of explicit source metadata and URL prefix matching
+
+## [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/css/temporal_picker.css

@@ -0,0 +1,164 @@
+.temporal-picker-popover {
+    position: fixed;
+    z-index: 1300;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    background: rgba(49, 51, 53, 0.98);
+    border: 1px solid #555555;
+    border-radius: 4px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+    color: #a9b7c6;
+    padding: 12px;
+}
+
+.temporal-picker-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.temporal-picker-title {
+    color: #ffc66d;
+    font-size: 11px;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.temporal-picker-nav {
+    display: inline-flex;
+    gap: 4px;
+}
+
+.temporal-picker-nav-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background: #3c3f41;
+    color: #a9b7c6;
+    border: 1px solid #555555;
+    border-radius: 3px;
+    font-size: 16px;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.temporal-picker-nav-button:hover {
+    background: #5a5d5f;
+    border-color: #666666;
+}
+
+.temporal-picker-calendar {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    gap: 4px;
+}
+
+.temporal-picker-weekday {
+    color: #808080;
+    font-size: 10px;
+    font-weight: bold;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.temporal-picker-day {
+    height: 28px;
+    background: transparent;
+    color: #a9b7c6;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    font-size: 11px;
+    cursor: pointer;
+}
+
+.temporal-picker-day:hover {
+    background: #4b4d4f;
+    border-color: #555555;
+}
+
+.temporal-picker-day.muted {
+    color: #666666;
+}
+
+.temporal-picker-day.today {
+    border-color: #6897bb;
+    color: #ffffff;
+}
+
+.temporal-picker-day.selected {
+    background: #6897bb;
+    border-color: #7aa8cc;
+    color: #ffffff;
+    font-weight: bold;
+}
+
+.temporal-picker-time {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    gap: 6px;
+    color: #808080;
+    font-family: 'Courier New', monospace;
+    font-size: 12px;
+}
+
+.temporal-picker-select {
+    width: 100%;
+    background: #3c3f41;
+    color: #a9b7c6;
+    border: 1px solid #555555;
+    border-radius: 3px;
+    padding: 6px 8px;
+    font-family: 'Courier New', monospace;
+    font-size: 11px;
+    color-scheme: dark;
+}
+
+.temporal-picker-select:focus {
+    outline: none;
+    border-color: #6897bb;
+    box-shadow: 0 0 0 1px #6897bb;
+}
+
+.temporal-picker-footer {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 6px;
+}
+
+.temporal-picker-button {
+    background: #3c3f41;
+    color: #a9b7c6;
+    border: 1px solid #555555;
+    border-radius: 3px;
+    padding: 6px 8px;
+    font-size: 11px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.temporal-picker-button:hover {
+    background: #5a5d5f;
+    border-color: #666666;
+}
+
+.temporal-picker-button:focus {
+    outline: none;
+    border-color: #6897bb;
+    box-shadow: 0 0 0 1px #6897bb;
+}
+
+.temporal-picker-button.primary {
+    background: #6897bb;
+    border-color: #7aa8cc;
+    color: #ffffff;
+}
+
+.temporal-picker-button.primary:hover {
+    background: #7aa8cc;
+    border-color: #8bb9dd;
+}

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;