mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-05 10:53:59 +00:00
feat(mapillary): street-level layer core — coverage, sequences, viewer bridge, query engine
Camera-driven Mapillary coverage (z0–5 overview points from orbit, z11–14 ground-clamped sequence lines below 60 km), per-sequence image cones, an embedded MapillaryJS viewer bridge with a camera-follow mode, sprite icons for map features, and a query engine that turns a plan into a streamed z14 tile fan-out. Registers an on-globe CC BY-SA 4.0 credit while enabled. Co-Authored-By: Claude Fable 5.1 <[email protected]>
This commit is contained in:
Said TurkseverandClaude Fable 5.1 committed
1 parent
0d41b6be54
commit
fa5710bcf2
46 files changed
+9935
-32
No files matched your search
@@ -28,7 +28,7 @@ const PANEL_GROUPS = [
|
||||
},
|
||||
{
|
||||
label: 'Cameras',
|
||||
ids: ['cctv', 'alpr-cameras'],
|
||||
ids: ['cctv', 'mapillary', 'alpr-cameras'],
|
||||
},
|
||||
{
|
||||
label: 'Infrastructure',
|
||||
@@ -58,6 +58,7 @@ const PANEL_LABELS = {
|
||||
'ais-live-vessels': 'Live Vessels',
|
||||
bikeshare: 'Bike Share',
|
||||
cctv: 'Cameras',
|
||||
mapillary: 'Street Level (Mapillary)',
|
||||
'alpr-cameras': 'Mapped ALPR Cameras',
|
||||
'local-datacenters': 'Data Centers',
|
||||
'local-firms': 'Active Fires',
|
||||
|
||||
@@ -0,0 +1,586 @@
|
||||
import { makeFloating } from './floatingWindow.js';
|
||||
|
||||
const DOCK_STORAGE_KEY = 'gev:mapillary-dock:collapsed';
|
||||
const DOCK_MINIMIZED_KEY = 'gev:mapillary-dock:minimized';
|
||||
const DOCK_WINDOW_KEY = 'gev:mapillary-dock:window:v1';
|
||||
const RENDER_MODE_KEY = 'gev:mapillary:render-mode';
|
||||
const MAPILLARY_APP_URL = 'https://www.mapillary.com/app/';
|
||||
|
||||
/** Deep link to an image on mapillary.com, as the web app shares them. */
|
||||
export function mapillaryImageUrl(imageId) {
|
||||
const id = String(imageId || '').trim();
|
||||
if (!id) return MAPILLARY_APP_URL;
|
||||
return `${MAPILLARY_APP_URL}?pKey=${encodeURIComponent(id)}&focus=photo`;
|
||||
}
|
||||
|
||||
function formatDate(ms) {
|
||||
if (!Number.isFinite(ms)) return '';
|
||||
try {
|
||||
return new Date(ms).toISOString().slice(0, 10);
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Own the Mapillary dock: the AI query box, result chips, progress, the
|
||||
* street-level viewer host and its controls. Receives the layer instance and
|
||||
* application actions; never reaches into the layer's internals.
|
||||
*/
|
||||
export class MapillaryControls {
|
||||
constructor({ root, mapillary, actions }) {
|
||||
this.root = root;
|
||||
this.mapillary = mapillary;
|
||||
this.actions = actions;
|
||||
this.destroyed = false;
|
||||
this.listeners = new AbortController();
|
||||
this._unsubscribe = null;
|
||||
this._state = null;
|
||||
this._lastStage = null;
|
||||
this._elements = this._collect();
|
||||
this._bind();
|
||||
this._restoreCollapsed();
|
||||
this._restoreMinimized();
|
||||
}
|
||||
|
||||
_collect() {
|
||||
const byId = (id) => this.root?.querySelector(`#${id}`) || null;
|
||||
return {
|
||||
toggle: byId('mly-dock-toggle'),
|
||||
body: byId('mly-body'),
|
||||
statusChip: byId('mly-status-chip'),
|
||||
enableBtn: byId('mly-enable-btn'),
|
||||
minimizeBtn: byId('mly-minimize-btn'),
|
||||
minimized: byId('mly-minimized'),
|
||||
minimizedBadge: byId('mly-minimized-badge'),
|
||||
form: byId('mly-query-form'),
|
||||
input: byId('mly-query-input'),
|
||||
runBtn: byId('mly-query-run'),
|
||||
answer: byId('mly-answer'),
|
||||
progress: byId('mly-progress'),
|
||||
progressFill: byId('mly-progress-fill'),
|
||||
progressLabel: byId('mly-progress-label'),
|
||||
results: byId('mly-results'),
|
||||
chips: byId('mly-result-chips'),
|
||||
frameBtn: byId('mly-frame-btn'),
|
||||
threeDBtn: byId('mly-3d-btn'),
|
||||
threeDNote: byId('mly-3d-note'),
|
||||
photorealBtn: byId('mly-photoreal-btn'),
|
||||
sinceSelect: byId('mly-since'),
|
||||
aiHint: byId('mly-ai-hint'),
|
||||
aiModel: byId('mly-ai-model'),
|
||||
clearBtn: byId('mly-clear-btn'),
|
||||
lookBtn: byId('mly-look-btn'),
|
||||
followBtn: byId('mly-follow-btn'),
|
||||
closeBtn: byId('mly-viewer-close'),
|
||||
viewerWrap: byId('mly-viewer-wrap'),
|
||||
viewerExpand: byId('mly-viewer-expand'),
|
||||
viewerFit: byId('mly-viewer-fit'),
|
||||
imageBy: byId('mly-image-by'),
|
||||
imageWhen: byId('mly-image-when'),
|
||||
imageLink: byId('mly-image-link'),
|
||||
header: this.root?.querySelector('.mly-header') || null,
|
||||
viewer: byId('mly-viewer'),
|
||||
imageMeta: byId('mly-image-meta'),
|
||||
coverageMeta: byId('mly-coverage-meta'),
|
||||
};
|
||||
}
|
||||
|
||||
listen(target, type, handler, options = {}) {
|
||||
target?.addEventListener(type, handler, {
|
||||
...options,
|
||||
signal: this.listeners.signal,
|
||||
});
|
||||
}
|
||||
|
||||
_bind() {
|
||||
const el = this._elements;
|
||||
if (!this.root) return;
|
||||
this.mapillary.attachViewerHost?.(el.viewer);
|
||||
this.listen(el.toggle, 'click', () =>
|
||||
this.setCollapsed(!this.root.classList.contains('collapsed')),
|
||||
);
|
||||
// Portable, resizable window: drag the header, resize from the grip.
|
||||
this._floating = makeFloating(this.root, {
|
||||
handle: el.header,
|
||||
storageKey: DOCK_WINDOW_KEY,
|
||||
dragThrough: '.mly-title-btn',
|
||||
minWidth: 320,
|
||||
minHeight: 220,
|
||||
onChange: () => this.mapillary.resizeViewer?.(),
|
||||
});
|
||||
this.listen(el.viewerExpand, 'click', () =>
|
||||
this.setViewerExpanded(
|
||||
!this.root.classList.contains('mly-viewer-expanded'),
|
||||
),
|
||||
);
|
||||
this.listen(document, 'keydown', (event) => {
|
||||
if (
|
||||
event.key === 'Escape' &&
|
||||
this.root.classList.contains('mly-viewer-expanded')
|
||||
)
|
||||
this.setViewerExpanded(false);
|
||||
});
|
||||
this.listen(el.viewerFit, 'click', () => {
|
||||
const next =
|
||||
this._state?.street?.renderMode === 'fill' ? 'letterbox' : 'fill';
|
||||
this.mapillary.setViewerRenderMode?.(next);
|
||||
try {
|
||||
localStorage.setItem(RENDER_MODE_KEY, next);
|
||||
} catch {
|
||||
/* storage unavailable */
|
||||
}
|
||||
});
|
||||
try {
|
||||
const stored = localStorage.getItem(RENDER_MODE_KEY);
|
||||
if (stored === 'fill' || stored === 'letterbox')
|
||||
this.mapillary.setViewerRenderMode?.(stored);
|
||||
} catch {
|
||||
/* storage unavailable */
|
||||
}
|
||||
// MapillaryJS only tracks window resizes; the dock resizes on its own
|
||||
// (drag grip, expand, reflow), so watch the host element directly.
|
||||
if (typeof ResizeObserver === 'function' && el.viewer) {
|
||||
let queued = false;
|
||||
this._resizeObserver = new ResizeObserver(() => {
|
||||
if (queued) return;
|
||||
queued = true;
|
||||
requestAnimationFrame(() => {
|
||||
queued = false;
|
||||
this.mapillary.resizeViewer?.();
|
||||
});
|
||||
});
|
||||
this._resizeObserver.observe(el.viewer);
|
||||
}
|
||||
this.listen(el.minimizeBtn, 'click', () => this.setMinimized(true));
|
||||
this.listen(el.minimized, 'click', () => this.setMinimized(false));
|
||||
this.listen(el.enableBtn, 'click', () => this._toggleEnabled());
|
||||
this.listen(el.form, 'submit', (event) => {
|
||||
event.preventDefault();
|
||||
this._run(el.input?.value);
|
||||
});
|
||||
for (const button of this.root.querySelectorAll('[data-mly-suggestion]')) {
|
||||
this.listen(button, 'click', () => {
|
||||
if (el.input) el.input.value = button.dataset.mlySuggestion || '';
|
||||
this._run(button.dataset.mlySuggestion);
|
||||
});
|
||||
}
|
||||
this.listen(el.frameBtn, 'click', () => this.mapillary.frameResults?.());
|
||||
this.listen(el.clearBtn, 'click', () => this.mapillary.clearQuery?.());
|
||||
this.listen(el.lookBtn, 'click', async () => {
|
||||
if (!(await this._ensureEnabled())) return;
|
||||
this.setCollapsed(false);
|
||||
this.mapillary.openNearest?.();
|
||||
});
|
||||
this.listen(el.followBtn, 'click', () => {
|
||||
const next = !(this._state?.street?.follow === true);
|
||||
this.mapillary.setFollow?.(next);
|
||||
});
|
||||
this.listen(el.closeBtn, 'click', () => this.mapillary.closeViewer?.());
|
||||
this.listen(el.threeDBtn, 'click', () => {
|
||||
const next = !(this._state?.objects3d?.enabled === true);
|
||||
this.mapillary.setObjects3d?.(next);
|
||||
});
|
||||
for (const button of this.root.querySelectorAll('[data-mly-pano]')) {
|
||||
this.listen(button, 'click', () =>
|
||||
this.mapillary.setCoverageFilter?.({ pano: button.dataset.mlyPano }),
|
||||
);
|
||||
}
|
||||
this.listen(el.sinceSelect, 'change', () => {
|
||||
const value = String(el.sinceSelect.value || '0');
|
||||
let sinceMs = null;
|
||||
if (value.startsWith('year:'))
|
||||
sinceMs = Date.UTC(Number(value.slice(5)), 0, 1);
|
||||
else if (Number(value) > 0)
|
||||
sinceMs = Date.now() - Number(value) * 86_400_000;
|
||||
this.mapillary.setCoverageFilter?.({ sinceMs });
|
||||
});
|
||||
this.listen(el.photorealBtn, 'click', async () => {
|
||||
const result = await this.actions.setMapStack?.('photoreal');
|
||||
if (result?.error) this.actions.showToast?.(result.error);
|
||||
});
|
||||
// Keep the app's keyboard shortcuts from firing while typing a query.
|
||||
this.listen(el.input, 'keydown', (event) => event.stopPropagation());
|
||||
this.listen(el.input, 'keyup', (event) => event.stopPropagation());
|
||||
}
|
||||
|
||||
async _ensureEnabled() {
|
||||
if (this.actions.isEnabled?.()) return true;
|
||||
try {
|
||||
await this.actions.setEnabled?.(true);
|
||||
} catch (error) {
|
||||
this.actions.showToast?.(
|
||||
error?.message || 'Street Level could not start',
|
||||
);
|
||||
return false;
|
||||
}
|
||||
return this.actions.isEnabled?.() === true;
|
||||
}
|
||||
|
||||
async _toggleEnabled() {
|
||||
const enabled = this.actions.isEnabled?.() === true;
|
||||
try {
|
||||
await this.actions.setEnabled?.(!enabled);
|
||||
} catch (error) {
|
||||
this.actions.showToast?.(error?.message || 'Street Level toggle failed');
|
||||
}
|
||||
if (!enabled) this.setCollapsed(false);
|
||||
}
|
||||
|
||||
async _run(prompt) {
|
||||
const text = String(prompt || '').trim();
|
||||
if (!text) return;
|
||||
if (!(await this._ensureEnabled())) return;
|
||||
this.setCollapsed(false);
|
||||
this.mapillary.runQuery?.(text);
|
||||
}
|
||||
|
||||
connect() {
|
||||
this._unsubscribe?.();
|
||||
this._unsubscribe = null;
|
||||
if (this.destroyed || !this.root) return;
|
||||
this._unsubscribe = this.mapillary.subscribe?.((state) =>
|
||||
this.render(state),
|
||||
);
|
||||
if (this.mapillary.getUIState) this.render(this.mapillary.getUIState());
|
||||
}
|
||||
|
||||
_restoreCollapsed() {
|
||||
// Open by default: the typed Mapillary AI box is the front door.
|
||||
let collapsed = false;
|
||||
try {
|
||||
const stored = localStorage.getItem(DOCK_STORAGE_KEY);
|
||||
if (stored === '1') collapsed = true;
|
||||
} catch {
|
||||
/* storage unavailable */
|
||||
}
|
||||
this.setCollapsed(collapsed, { persist: false });
|
||||
}
|
||||
|
||||
_restoreMinimized() {
|
||||
let minimized = false;
|
||||
try {
|
||||
minimized = localStorage.getItem(DOCK_MINIMIZED_KEY) === '1';
|
||||
} catch {
|
||||
/* storage unavailable */
|
||||
}
|
||||
this.setMinimized(minimized, { persist: false });
|
||||
}
|
||||
|
||||
/**
|
||||
* Shrink the whole panel to a round Mapillary logo, or bring it back.
|
||||
* The logo carries the layer's on/off state and a result-count badge.
|
||||
*/
|
||||
setMinimized(minimized, { persist = true } = {}) {
|
||||
if (!this.root) return;
|
||||
const on = minimized === true;
|
||||
if (on) this.setViewerExpanded(false);
|
||||
this.root.classList.toggle('minimized', on);
|
||||
if (this._elements.minimized) this._elements.minimized.hidden = !on;
|
||||
this.root.setAttribute('aria-expanded', String(!on));
|
||||
if (!on) {
|
||||
this.setCollapsed(false, { persist });
|
||||
requestAnimationFrame(() => this.mapillary.resizeViewer?.());
|
||||
}
|
||||
if (persist) {
|
||||
try {
|
||||
localStorage.setItem(DOCK_MINIMIZED_KEY, on ? '1' : '0');
|
||||
} catch {
|
||||
/* storage unavailable */
|
||||
}
|
||||
}
|
||||
this._renderMinimized(this._state);
|
||||
}
|
||||
|
||||
isMinimized() {
|
||||
return this.root?.classList.contains('minimized') === true;
|
||||
}
|
||||
|
||||
_renderMinimized(state) {
|
||||
const el = this._elements;
|
||||
if (!el.minimized) return;
|
||||
const enabled = state?.enabled === true;
|
||||
el.minimized.classList.toggle('is-off', !enabled);
|
||||
const total = state?.features?.total || 0;
|
||||
if (el.minimizedBadge) {
|
||||
el.minimizedBadge.hidden = !(enabled && total > 0);
|
||||
el.minimizedBadge.textContent =
|
||||
total >= 1000 ? `${Math.round(total / 1000)}k` : String(total);
|
||||
}
|
||||
el.minimized.title = enabled
|
||||
? `Open Mapillary · Street Level on${total ? ` · ${total.toLocaleString()} results` : ''}`
|
||||
: 'Open Mapillary';
|
||||
}
|
||||
|
||||
/** Grow the street-level viewer to most of the screen, or shrink it back. */
|
||||
setViewerExpanded(expanded) {
|
||||
if (!this.root) return;
|
||||
const on = expanded === true;
|
||||
const wrap = this._elements.viewerWrap;
|
||||
if (on === this.root.classList.contains('mly-viewer-expanded')) return;
|
||||
this.root.classList.toggle('mly-viewer-expanded', on);
|
||||
if (wrap) {
|
||||
if (on) {
|
||||
// Lift the viewer out of the dock: the dock's backdrop-filter would
|
||||
// otherwise pin a fixed-position child inside the panel.
|
||||
this._wrapHome = { parent: wrap.parentNode, next: wrap.nextSibling };
|
||||
document.body.appendChild(wrap);
|
||||
wrap.classList.add('mly-viewer-wrap-expanded');
|
||||
} else if (this._wrapHome?.parent) {
|
||||
wrap.classList.remove('mly-viewer-wrap-expanded');
|
||||
this._wrapHome.parent.insertBefore(wrap, this._wrapHome.next);
|
||||
this._wrapHome = null;
|
||||
}
|
||||
}
|
||||
const button = this._elements.viewerExpand;
|
||||
if (button) {
|
||||
const icon = button.querySelector('.mly-btn-icon');
|
||||
const text = button.querySelector('.mly-btn-text');
|
||||
if (icon) icon.textContent = on ? '⤡' : '⤢';
|
||||
if (text) text.textContent = on ? 'SHRINK' : 'EXPAND';
|
||||
button.setAttribute('aria-pressed', String(on));
|
||||
button.setAttribute('aria-label', on ? 'Shrink' : 'Expand');
|
||||
}
|
||||
requestAnimationFrame(() => this.mapillary.resizeViewer?.());
|
||||
}
|
||||
|
||||
setCollapsed(collapsed, { persist = true } = {}) {
|
||||
if (!this.root) return;
|
||||
this.root.classList.toggle('collapsed', collapsed);
|
||||
this._elements.toggle?.setAttribute('aria-expanded', String(!collapsed));
|
||||
this._elements.toggle?.setAttribute(
|
||||
'title',
|
||||
collapsed ? 'Expand Mapillary' : 'Collapse Mapillary',
|
||||
);
|
||||
if (!collapsed) this.mapillary.resizeViewer?.();
|
||||
if (persist) {
|
||||
try {
|
||||
localStorage.setItem(DOCK_STORAGE_KEY, collapsed ? '1' : '0');
|
||||
} catch {
|
||||
/* storage unavailable */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render(state) {
|
||||
if (this.destroyed || !state || !this.root) return;
|
||||
this._state = state;
|
||||
const el = this._elements;
|
||||
const enabled = state.enabled === true;
|
||||
|
||||
el.enableBtn.textContent = enabled ? 'STREET LEVEL ON' : 'STREET LEVEL OFF';
|
||||
el.enableBtn.setAttribute('aria-pressed', String(enabled));
|
||||
|
||||
let chip = enabled ? 'ON' : 'OFF';
|
||||
let chipClass = enabled ? 'is-on' : '';
|
||||
if (state.keyRequired) {
|
||||
chip = 'KEY REQUIRED';
|
||||
chipClass = 'is-warn';
|
||||
} else if (state.query.busy) {
|
||||
chip = `AI · ${state.query.stage.toUpperCase()}`;
|
||||
chipClass = 'is-busy';
|
||||
} else if (state.coverage.loading || state.features.loading) {
|
||||
chip = 'LOADING';
|
||||
chipClass = 'is-busy';
|
||||
}
|
||||
el.statusChip.textContent = chip;
|
||||
el.statusChip.className = `mly-chip ${chipClass}`.trim();
|
||||
|
||||
if (enabled && this._wasEnabled === false) this.setCollapsed(false);
|
||||
this._wasEnabled = enabled;
|
||||
this._renderMinimized(state);
|
||||
// Imagery needs the panel: opening an image brings a minimized dock back.
|
||||
if (state.street.open && !this._wasStreetOpen && this.isMinimized())
|
||||
this.setMinimized(false);
|
||||
this._wasStreetOpen = state.street.open === true;
|
||||
|
||||
el.runBtn.disabled = state.query.busy;
|
||||
el.runBtn.textContent = state.query.busy ? '…' : 'ASK';
|
||||
el.input.disabled = false;
|
||||
el.input.placeholder = state.planner
|
||||
? 'Type a question, e.g. show me all fire hydrants in Sacramento'
|
||||
: 'Add an Anthropic key in POWER UP to enable Mapillary AI';
|
||||
if (el.aiModel)
|
||||
el.aiModel.textContent = state.plannerModel
|
||||
? `· ${state.plannerModel}`
|
||||
: '';
|
||||
if (el.aiHint) {
|
||||
el.aiHint.classList.toggle('is-warn', !state.planner);
|
||||
el.aiHint.textContent = state.planner
|
||||
? 'Type what you want to see in plain English — objects, traffic signs, coverage or a street view of any place — and press Enter. Follow-ups refine the last answer.'
|
||||
: 'Mapillary AI is off until an Anthropic key is added in POWER UP. Coverage, sequences and the viewer work without it.';
|
||||
}
|
||||
|
||||
// Imagery filters.
|
||||
const filter = state.coverage.filter || { pano: 'all', sinceMs: null };
|
||||
for (const button of this.root.querySelectorAll('[data-mly-pano]')) {
|
||||
const active = button.dataset.mlyPano === filter.pano;
|
||||
button.classList.toggle('is-active', active);
|
||||
button.setAttribute('aria-checked', String(active));
|
||||
}
|
||||
|
||||
// 3D objects.
|
||||
const objects = state.objects3d || {};
|
||||
el.threeDBtn.setAttribute('aria-pressed', String(objects.enabled === true));
|
||||
el.threeDBtn.textContent = objects.building
|
||||
? '3D OBJECTS …'
|
||||
: objects.enabled
|
||||
? '3D OBJECTS ON'
|
||||
: '3D OBJECTS OFF';
|
||||
el.threeDNote.hidden = !(
|
||||
objects.enabled &&
|
||||
(objects.error || objects.active)
|
||||
);
|
||||
el.threeDNote.textContent = objects.error
|
||||
? objects.error
|
||||
: objects.active
|
||||
? `${objects.count.toLocaleString()} objects standing in 3D · click one to open its image`
|
||||
: '';
|
||||
|
||||
el.photorealBtn.setAttribute(
|
||||
'aria-pressed',
|
||||
String(this.actions.isMapStackActive?.('photoreal') === true),
|
||||
);
|
||||
|
||||
// Answer / error line.
|
||||
const error = state.query.error || state.street.error;
|
||||
if (error) {
|
||||
el.answer.textContent = error;
|
||||
el.answer.classList.add('is-error');
|
||||
} else {
|
||||
el.answer.classList.remove('is-error');
|
||||
if (state.query.answer) el.answer.textContent = state.query.answer;
|
||||
else if (state.query.busy) el.answer.textContent = 'Planning…';
|
||||
else if (!enabled)
|
||||
el.answer.textContent =
|
||||
'Turn on Street Level to see Mapillary coverage, then ask for anything that appears in street imagery.';
|
||||
else if (state.coverage.hint) el.answer.textContent = state.coverage.hint;
|
||||
else
|
||||
el.answer.textContent =
|
||||
'Click a green sequence to see its images, or ask Mapillary AI for objects and signs.';
|
||||
}
|
||||
|
||||
// Progress bar while tiles stream.
|
||||
const { progress } = state.features;
|
||||
const showProgress = state.features.loading && progress.tiles > 0;
|
||||
el.progress.hidden = !showProgress;
|
||||
if (showProgress) {
|
||||
const pct = Math.round((progress.done / progress.tiles) * 100);
|
||||
el.progressFill.style.width = `${pct}%`;
|
||||
el.progressLabel.textContent = `${progress.done}/${progress.tiles} tiles · ${state.features.total.toLocaleString()} found`;
|
||||
}
|
||||
|
||||
// Result chips.
|
||||
const hasResults = state.features.total > 0 || state.features.hasBbox;
|
||||
el.results.hidden = !hasResults;
|
||||
if (hasResults) {
|
||||
el.chips.replaceChildren(
|
||||
...state.features.counts
|
||||
.slice(0, 8)
|
||||
.map(({ value, count, label, color }) => {
|
||||
const chipEl = document.createElement('span');
|
||||
chipEl.className = 'mly-value-chip';
|
||||
chipEl.title = value;
|
||||
const dot = document.createElement('i');
|
||||
dot.style.background = color;
|
||||
const text = document.createElement('span');
|
||||
text.textContent = label;
|
||||
const num = document.createElement('b');
|
||||
num.textContent = count.toLocaleString();
|
||||
chipEl.append(dot, text, num);
|
||||
return chipEl;
|
||||
}),
|
||||
);
|
||||
if (state.features.counts.length > 8) {
|
||||
const more = document.createElement('span');
|
||||
more.className = 'mly-value-chip';
|
||||
more.textContent = `+${state.features.counts.length - 8} classes`;
|
||||
el.chips.append(more);
|
||||
}
|
||||
}
|
||||
|
||||
// Street-level viewer.
|
||||
const { street } = state;
|
||||
el.viewerWrap.hidden = !street.open;
|
||||
this.root.classList.toggle('mly-has-viewer', street.open === true);
|
||||
if (!street.open && this.root.classList.contains('mly-viewer-expanded'))
|
||||
this.setViewerExpanded(false);
|
||||
el.followBtn.setAttribute('aria-pressed', String(street.follow === true));
|
||||
el.followBtn.textContent = street.follow
|
||||
? 'STREET COCKPIT ON'
|
||||
: 'STREET COCKPIT OFF';
|
||||
el.followBtn.disabled = !street.open;
|
||||
if (el.viewerFit) {
|
||||
const fill = street.renderMode === 'fill';
|
||||
el.viewerFit.textContent = fill ? 'FILL' : 'FIT';
|
||||
el.viewerFit.title = fill
|
||||
? 'Filling the frame (cropped) · click to show the whole image'
|
||||
: 'Showing the whole image · click to fill the frame';
|
||||
}
|
||||
if (street.open) {
|
||||
// Caption bar as on mapillary.com: "Image by …" left, date right.
|
||||
const left = [];
|
||||
if (street.loading) left.push('LOADING…');
|
||||
if (street.feature?.label)
|
||||
left.push(
|
||||
`${street.feature.label}${street.feature.imageCount ? ` · ${street.feature.imageCount} sightings` : ''}`,
|
||||
);
|
||||
if (street.highlight?.count)
|
||||
left.push(
|
||||
`${street.highlight.count} detection${street.highlight.count === 1 ? '' : 's'} outlined`,
|
||||
);
|
||||
if (street.creator) left.push(`Image by ${street.creator}`);
|
||||
const right = [];
|
||||
if (street.isPano) right.push('360°');
|
||||
if (Number.isFinite(street.bearing))
|
||||
right.push(`${Math.round(street.bearing)}°`);
|
||||
if (street.capturedAt) right.push(formatDate(street.capturedAt));
|
||||
if (el.imageBy) el.imageBy.textContent = left.join(' · ');
|
||||
if (el.imageWhen) el.imageWhen.textContent = right.join(' · ');
|
||||
if (el.imageLink) {
|
||||
el.imageLink.href = mapillaryImageUrl(street.imageId);
|
||||
el.imageLink.hidden = !street.imageId;
|
||||
}
|
||||
this.mapillary.resizeViewer?.();
|
||||
}
|
||||
|
||||
// Coverage meta line.
|
||||
const coverageBits = [];
|
||||
if (enabled && state.coverage.zoom)
|
||||
coverageBits.push(
|
||||
`coverage z${state.coverage.zoom} · ${state.coverage.sequences.toLocaleString()} sequences`,
|
||||
);
|
||||
if (state.sequence.selectedId)
|
||||
coverageBits.push(
|
||||
state.sequence.loading
|
||||
? 'loading sequence…'
|
||||
: `${state.sequence.images} images in sequence · Esc clears`,
|
||||
);
|
||||
if (state.query.usage?.model)
|
||||
coverageBits.push(
|
||||
`${state.query.usage.model} · ${state.query.usage.input_tokens ?? '?'}→${state.query.usage.output_tokens ?? '?'} tok`,
|
||||
);
|
||||
el.coverageMeta.textContent = coverageBits.join(' · ');
|
||||
|
||||
if (state.query.stage !== this._lastStage) {
|
||||
this._lastStage = state.query.stage;
|
||||
if (state.query.stage === 'done' || state.query.stage === 'error') {
|
||||
this.setCollapsed(false);
|
||||
if (this.isMinimized()) this.setMinimized(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.destroyed) return;
|
||||
this.destroyed = true;
|
||||
this.setViewerExpanded(false);
|
||||
this.listeners.abort();
|
||||
this._resizeObserver?.disconnect();
|
||||
this._resizeObserver = null;
|
||||
this._floating?.destroy();
|
||||
this._unsubscribe?.();
|
||||
this._unsubscribe = null;
|
||||
this.mapillary.attachViewerHost?.(null);
|
||||
}
|
||||
}
|
||||
@@ -44,6 +44,7 @@ export function readShellElements(document = globalThis.document) {
|
||||
_dataPanel: document.getElementById('data-panel'),
|
||||
_scenePanel: document.getElementById('scene-panel'),
|
||||
_cctvPanel: document.getElementById('cctv-panel'),
|
||||
_mapillaryDock: document.getElementById('mapillary-dock'),
|
||||
_radioPanel: document.getElementById('radio-panel'),
|
||||
_contextRadioDock: document.getElementById('context-radio-dock'),
|
||||
_contextRadioToggleBtn: document.getElementById('context-radio-toggle-btn'),
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,959 @@
|
||||
/* ── Mapillary dock ─────────────────────────── */
|
||||
#mapillary-dock {
|
||||
--mly-green: #05cb63;
|
||||
--mly-width: clamp(320px, 30vw, 460px);
|
||||
position: fixed;
|
||||
/* Sit beside the right context rail (DISPLAY / CONTEXT / CCTV), which owns
|
||||
the right-hand 330px column from 26vh down, so the two never overlap. */
|
||||
right: calc(var(--right-rail-x, 52px) + 330px + 16px);
|
||||
bottom: 3.4rem;
|
||||
z-index: 118;
|
||||
width: var(--mly-width);
|
||||
max-width: calc(100vw - 32px);
|
||||
max-height: calc(100vh - 7rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
pointer-events: auto;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
#mapillary-dock .panel-glow {
|
||||
position: absolute;
|
||||
inset: -18px;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
rgba(5, 203, 99, 0.16) 0%,
|
||||
transparent 65%
|
||||
);
|
||||
filter: blur(16px);
|
||||
opacity: 0.25;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mly-dock-inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px 14px;
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--panel-radius);
|
||||
backdrop-filter: blur(24px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.4);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.5),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.03) inset;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mly-header {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mly-title-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
padding: 2px 0;
|
||||
font: inherit;
|
||||
letter-spacing: 0.12em;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.mly-brand-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--mly-green);
|
||||
box-shadow: 0 0 10px rgba(5, 203, 99, 0.8);
|
||||
}
|
||||
|
||||
.mly-chip {
|
||||
font-size: 0.58rem;
|
||||
letter-spacing: 0.1em;
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--glass-border-hover);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.mly-chip.is-on {
|
||||
color: var(--mly-green);
|
||||
border-color: rgba(5, 203, 99, 0.55);
|
||||
}
|
||||
|
||||
.mly-chip.is-busy {
|
||||
color: var(--accent);
|
||||
border-color: rgba(0, 212, 255, 0.55);
|
||||
}
|
||||
|
||||
.mly-chip.is-warn {
|
||||
color: #ffb300;
|
||||
border-color: rgba(255, 179, 0, 0.55);
|
||||
}
|
||||
|
||||
.mly-header-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.mly-icon-btn {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: var(--btn-radius);
|
||||
border: 1px solid var(--glass-border-hover);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text-secondary);
|
||||
font: inherit;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.mly-icon-btn:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--accent);
|
||||
background: rgba(0, 212, 255, 0.14);
|
||||
}
|
||||
|
||||
/* Author display rules would otherwise beat the UA's [hidden] { display: none }. */
|
||||
.mly-viewer-wrap[hidden],
|
||||
.mly-minimized[hidden],
|
||||
.mly-minimized-badge[hidden],
|
||||
.mly-image-link[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ── Minimized: only the Mapillary logo remains ─ */
|
||||
.mly-minimized {
|
||||
position: relative;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(5, 203, 99, 0.55);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(18px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(1.4);
|
||||
color: var(--mly-green);
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
box-shadow:
|
||||
0 6px 24px rgba(0, 0, 0, 0.5),
|
||||
0 0 18px rgba(5, 203, 99, 0.35);
|
||||
transition:
|
||||
transform var(--transition-fast),
|
||||
box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.mly-minimized:hover {
|
||||
transform: scale(1.06);
|
||||
box-shadow:
|
||||
0 8px 28px rgba(0, 0, 0, 0.55),
|
||||
0 0 26px rgba(5, 203, 99, 0.6);
|
||||
}
|
||||
|
||||
.mly-minimized .mly-logo {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mly-minimized-badge {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -6px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
color: #0a0a0f;
|
||||
font-size: 0.52rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
|
||||
}
|
||||
|
||||
.mly-minimized.is-off {
|
||||
color: var(--text-secondary);
|
||||
border-color: var(--glass-border-hover);
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#mapillary-dock.minimized {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
min-width: 0 !important;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#mapillary-dock.minimized .mly-dock-inner,
|
||||
#mapillary-dock.minimized .panel-glow,
|
||||
#mapillary-dock.minimized .gev-resize-grip,
|
||||
#mapillary-dock.minimized .gev-resize-edge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mly-power {
|
||||
font: inherit;
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.1em;
|
||||
padding: 6px 10px;
|
||||
border-radius: var(--btn-radius);
|
||||
border: 1px solid var(--glass-border-hover);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.mly-power[aria-pressed='true'] {
|
||||
color: #0a0a0f;
|
||||
background: var(--mly-green);
|
||||
border-color: var(--mly-green);
|
||||
box-shadow: 0 0 14px rgba(5, 203, 99, 0.45);
|
||||
}
|
||||
|
||||
#mapillary-dock.collapsed .mly-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mly-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Everything above the viewer scrolls; the viewer itself never does. */
|
||||
.mly-scroll {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 0 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
/* Children keep their natural height; the region scrolls instead. */
|
||||
.mly-scroll > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#mapillary-dock.mly-has-viewer .mly-scroll {
|
||||
/* Let the imagery win the height fight when the window is short. */
|
||||
flex-shrink: 3;
|
||||
}
|
||||
|
||||
.mly-kicker {
|
||||
font-size: 0.56rem;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.mly-query {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.mly-query-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#mly-query-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 8px 10px;
|
||||
border-radius: var(--btn-radius);
|
||||
border: 1px solid var(--glass-border-hover);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
color: var(--text-primary);
|
||||
font: inherit;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
#mly-query-input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 2px var(--accent-dim);
|
||||
}
|
||||
|
||||
.mly-run {
|
||||
min-width: 56px;
|
||||
}
|
||||
|
||||
.mly-suggestions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.mly-suggestion {
|
||||
font: inherit;
|
||||
font-size: 0.56rem;
|
||||
letter-spacing: 0.06em;
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--glass-border);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mly-suggestion:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--glass-border-hover);
|
||||
}
|
||||
|
||||
.mly-answer {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.74rem;
|
||||
line-height: 1.4;
|
||||
color: var(--text-primary);
|
||||
min-height: 1.2em;
|
||||
}
|
||||
|
||||
.mly-answer.is-error {
|
||||
color: #ff8a80;
|
||||
}
|
||||
|
||||
.mly-progress {
|
||||
position: relative;
|
||||
height: 14px;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.mly-progress-fill {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: linear-gradient(90deg, var(--mly-green), var(--accent));
|
||||
transition: width 160ms linear;
|
||||
}
|
||||
|
||||
.mly-progress-label {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.55rem;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--text-primary);
|
||||
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.mly-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.mly-value-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.58rem;
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--glass-border);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.mly-value-chip i {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mly-value-chip b {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mly-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mly-actions .scene-btn {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.scene-btn[aria-pressed='true'] {
|
||||
color: #0a0a0f;
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.mly-viewer-wrap {
|
||||
position: relative;
|
||||
container-type: inline-size;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
min-height: 230px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--glass-border-hover);
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.mly-viewer {
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
/* Intrinsic height while the dock is auto-sized; grows when floating. */
|
||||
aspect-ratio: 16 / 10;
|
||||
}
|
||||
|
||||
#mapillary-dock.gev-floating .mly-viewer,
|
||||
.mly-viewer-wrap-expanded .mly-viewer {
|
||||
aspect-ratio: auto;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
/* Caption bar, mapillary.com style: creator left, date right. */
|
||||
.mly-image-meta {
|
||||
flex: 0 0 auto;
|
||||
padding: 6px 10px;
|
||||
font-size: 0.58rem;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-secondary);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
.mly-image-by {
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mly-image-right {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mly-image-link {
|
||||
color: var(--mly-green);
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.mly-image-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mly-viewer-tools.mly-viewer-tools-right {
|
||||
left: auto;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
/* Only the buttons catch clicks; the containers let the viewer through. */
|
||||
.mly-viewer-tools {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mly-viewer-tools > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.mly-viewer-x {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
background: rgba(10, 10, 15, 0.8);
|
||||
color: var(--text-primary);
|
||||
font: inherit;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.mly-viewer-x:hover {
|
||||
color: #0a0a0f;
|
||||
background: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.mly-viewer-wrap-expanded .mly-viewer-tools.mly-viewer-tools-right {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.mly-viewer-wrap-expanded .mly-viewer-x {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.mly-meta {
|
||||
font-size: 0.56rem;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* Match the app's chrome-hiding modes. */
|
||||
body.ui-clean-view #mapillary-dock,
|
||||
body.recording-mode #mapillary-dock {
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
body.cockpit-mode #mapillary-dock {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Not enough room beside the rail: fall back to the corner (still draggable). */
|
||||
@media (max-width: 1100px) {
|
||||
#mapillary-dock {
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
#mapillary-dock {
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
bottom: 6.4rem;
|
||||
max-height: calc(100vh - 8rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Short viewports: trim the chrome so the imagery keeps its room. */
|
||||
@media (max-height: 640px) {
|
||||
.mly-dock-inner {
|
||||
padding: 8px 10px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#mapillary-dock.mly-has-viewer .mly-ai-hint,
|
||||
#mapillary-dock.mly-has-viewer .mly-suggestions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mly-viewer-wrap {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Prominent AI entry ─────────────────────── */
|
||||
.mly-ai-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mly-ai-head .mly-kicker {
|
||||
font-size: 0.66rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.mly-ai-model {
|
||||
margin-left: auto;
|
||||
font-size: 0.52rem;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.mly-ai-pulse {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.6);
|
||||
animation: mly-pulse 2.2s ease-out infinite;
|
||||
}
|
||||
|
||||
@keyframes mly-pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.6);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 9px rgba(0, 212, 255, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(0, 212, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
#mapillary-dock #mly-query-input {
|
||||
padding: 11px 12px;
|
||||
font-size: 0.8rem;
|
||||
border: 1px solid rgba(0, 212, 255, 0.45);
|
||||
background: rgba(0, 212, 255, 0.06);
|
||||
box-shadow: 0 0 18px rgba(0, 212, 255, 0.12) inset;
|
||||
}
|
||||
|
||||
#mapillary-dock #mly-query-input::placeholder {
|
||||
color: rgba(232, 234, 237, 0.55);
|
||||
}
|
||||
|
||||
#mapillary-dock #mly-query-input:focus {
|
||||
background: rgba(0, 212, 255, 0.1);
|
||||
box-shadow:
|
||||
0 0 0 2px var(--accent-dim),
|
||||
0 0 22px rgba(0, 212, 255, 0.25);
|
||||
}
|
||||
|
||||
.mly-ask {
|
||||
min-width: 64px;
|
||||
font: inherit;
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.12em;
|
||||
border-radius: var(--btn-radius);
|
||||
border: 1px solid var(--accent);
|
||||
background: var(--accent);
|
||||
color: #0a0a0f;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.mly-ask:hover:not(:disabled) {
|
||||
box-shadow: 0 0 16px rgba(0, 212, 255, 0.5);
|
||||
}
|
||||
|
||||
.mly-ask:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.mly-ai-hint {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.66rem;
|
||||
line-height: 1.35;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.mly-ai-hint.is-warn {
|
||||
color: #ffb300;
|
||||
}
|
||||
|
||||
/* ── Imagery filters ────────────────────────── */
|
||||
.mly-filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mly-filter-label {
|
||||
font-size: 0.54rem;
|
||||
letter-spacing: 0.14em;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.mly-seg {
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--glass-border-hover);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mly-seg-btn {
|
||||
font: inherit;
|
||||
font-size: 0.56rem;
|
||||
letter-spacing: 0.08em;
|
||||
padding: 4px 9px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mly-seg-btn + .mly-seg-btn {
|
||||
border-left: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
.mly-seg-btn.is-active {
|
||||
background: rgba(5, 203, 99, 0.22);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.mly-select {
|
||||
font: inherit;
|
||||
font-size: 0.56rem;
|
||||
letter-spacing: 0.06em;
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--glass-border-hover);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.mly-select option {
|
||||
background: #0a0a0f;
|
||||
}
|
||||
|
||||
/* ── Portable, resizable windows ────────────── */
|
||||
.gev-floating-handle {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.gev-floating-dragging,
|
||||
.gev-floating-dragging * {
|
||||
cursor: grabbing !important;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.gev-floating {
|
||||
position: fixed !important;
|
||||
right: auto !important;
|
||||
bottom: auto !important;
|
||||
margin: 0 !important;
|
||||
max-width: calc(100vw - 12px) !important;
|
||||
z-index: 132 !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gev-resize-grip {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: nwse-resize;
|
||||
z-index: 6;
|
||||
opacity: 0.6;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
transparent 0 45%,
|
||||
var(--accent) 45% 55%,
|
||||
transparent 55% 70%,
|
||||
var(--accent) 70% 80%,
|
||||
transparent 80%
|
||||
);
|
||||
}
|
||||
|
||||
.gev-resize-grip:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Invisible strips along the other edges and corners. */
|
||||
.gev-resize-edge {
|
||||
position: absolute;
|
||||
z-index: 7;
|
||||
}
|
||||
|
||||
.gev-resize-edge[data-dir='n'],
|
||||
.gev-resize-edge[data-dir='s'] {
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
height: 7px;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
.gev-resize-edge[data-dir='e'],
|
||||
.gev-resize-edge[data-dir='w'] {
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
width: 7px;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.gev-resize-edge[data-dir='n'] {
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.gev-resize-edge[data-dir='s'] {
|
||||
bottom: -3px;
|
||||
}
|
||||
|
||||
.gev-resize-edge[data-dir='e'] {
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.gev-resize-edge[data-dir='w'] {
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.gev-resize-edge[data-dir='ne'],
|
||||
.gev-resize-edge[data-dir='nw'],
|
||||
.gev-resize-edge[data-dir='sw'] {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.gev-resize-edge[data-dir='ne'] {
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
|
||||
.gev-resize-edge[data-dir='nw'] {
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
|
||||
.gev-resize-edge[data-dir='sw'] {
|
||||
bottom: -3px;
|
||||
left: -3px;
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
|
||||
#mapillary-dock.gev-floating {
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
#mapillary-dock.gev-floating .mly-dock-inner {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* The CCTV panel lives in a rail until dragged; then it floats with the
|
||||
width it had (set inline when lifted), never the viewport's. */
|
||||
#cctv-panel.gev-floating {
|
||||
position: fixed !important;
|
||||
flex: none !important;
|
||||
max-height: calc(100vh - 12px) !important;
|
||||
}
|
||||
|
||||
#cctv-panel.gev-floating:not([style*='height']) {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
#cctv-panel.gev-floating .cctv-panel-inner {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
#cctv-panel.gev-floating.collapsed .cctv-panel-inner {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* ── Expanded street-level viewer ───────────── */
|
||||
.mly-viewer-tools {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
/* Above MapillaryJS's own overlays (z 10); the corners are free — its
|
||||
sequence bar is top-centre, bearing/zoom/attribution bottom-right. */
|
||||
z-index: 12;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.mly-viewer-tools .scene-btn {
|
||||
padding: 4px 8px;
|
||||
font-size: 0.56rem;
|
||||
background: rgba(10, 10, 15, 0.75);
|
||||
/* Hug the label: the playback bar MapillaryJS centres at the top needs
|
||||
the middle of narrow viewers. */
|
||||
flex: none;
|
||||
min-width: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Narrow viewer: icon-only expand button so nothing meets the playback bar. */
|
||||
@container (max-width: 380px) {
|
||||
.mly-viewer-tools .mly-btn-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mly-viewer-tools .scene-btn {
|
||||
padding: 4px 7px;
|
||||
}
|
||||
}
|
||||
|
||||
/* The dock's backdrop-filter makes it the containing block for fixed
|
||||
descendants, so the expanded viewer is re-parented to <body>. */
|
||||
.mly-viewer-wrap-expanded {
|
||||
position: fixed;
|
||||
left: 4vw;
|
||||
right: 4vw;
|
||||
top: 5vh;
|
||||
bottom: 9vh;
|
||||
z-index: 141;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: var(--font-mono);
|
||||
border-color: rgba(0, 212, 255, 0.55);
|
||||
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.mly-viewer-wrap-expanded .mly-viewer {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
.mly-viewer-wrap-expanded .mly-image-meta {
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.mly-viewer-wrap-expanded .mly-image-meta {
|
||||
font-size: 0.64rem;
|
||||
}
|
||||
|
||||
.mly-viewer-wrap-expanded .mly-viewer-tools {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.mly-viewer-wrap-expanded .mly-viewer-tools .scene-btn {
|
||||
padding: 8px 14px;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--text-primary);
|
||||
border-color: rgba(0, 212, 255, 0.6);
|
||||
background: rgba(10, 10, 15, 0.82);
|
||||
}
|
||||
|
||||
.mly-viewer-wrap-expanded .mly-viewer-tools .scene-btn::after {
|
||||
content: ' · ESC';
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
Reference in new issue
Block a user