fix: refine earth settings modal and hud interactions
This commit is contained in:
linkong
@@ -62,6 +62,64 @@
|
|||||||
font-size: var(--hud-title-size);
|
font-size: var(--hud-title-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hud-panel-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--hud-gap-sm);
|
||||||
|
margin-bottom: var(--hud-gap-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-panel-header .hud-panel-title {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-panel-drag-handle {
|
||||||
|
cursor: grab;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-panel-drag-handle:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-panel-close {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
min-width: 28px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
color: #d9efff;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-panel-close .material-symbols-rounded {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-panel-close:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.14);
|
||||||
|
transform: scale(1.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-panel.is-dragging {
|
||||||
|
transition: none !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
||||||
|
inset 0 -1px 0 rgba(255, 255, 255, 0.04),
|
||||||
|
0 24px 52px rgba(0, 0, 0, 0.28),
|
||||||
|
0 0 36px rgba(120, 200, 255, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-panel-hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
.hud-panel-row {
|
.hud-panel-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -145,6 +203,216 @@
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.earth-settings-modal {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 260;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-modal.is-open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(2, 8, 20, 0.38);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-sheet {
|
||||||
|
position: fixed;
|
||||||
|
top: 15vh;
|
||||||
|
right: 20vw;
|
||||||
|
bottom: 15vh;
|
||||||
|
left: 20vw;
|
||||||
|
width: auto;
|
||||||
|
max-width: none;
|
||||||
|
transform: none;
|
||||||
|
border-radius: calc(28px * var(--hud-scale));
|
||||||
|
padding: calc(20px * var(--hud-scale));
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--hud-gap-md);
|
||||||
|
overflow: hidden;
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-sheet.liquid-glass-surface:hover,
|
||||||
|
.earth-settings-sheet.liquid-glass-surface:active,
|
||||||
|
.earth-settings-sheet.liquid-glass-surface.is-pressed {
|
||||||
|
--btn-scale: 1;
|
||||||
|
--press-offset: 0px;
|
||||||
|
--glow-opacity: 0.24;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-header,
|
||||||
|
.earth-settings-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--hud-gap-md);
|
||||||
|
padding-bottom: var(--hud-gap-sm);
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-kicker {
|
||||||
|
color: #9eb7d0;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-title {
|
||||||
|
margin-top: 4px;
|
||||||
|
color: #eef7ff;
|
||||||
|
font-size: calc(1.45rem * var(--hud-scale));
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-close {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
min-width: 34px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
color: #d9efff;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-content {
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 4px;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: rgba(160, 220, 255, 0.45) transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-content::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-content::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-content::-webkit-scrollbar-thumb {
|
||||||
|
background: linear-gradient(180deg, rgba(210, 237, 255, 0.28), rgba(110, 176, 255, 0.34));
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-section {
|
||||||
|
padding: 12px 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-section-title {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
color: #9eb7d0;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 14px 16px;
|
||||||
|
border-radius: 18px;
|
||||||
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(92, 151, 218, 0.03));
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-copy {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-item-title {
|
||||||
|
color: #eef7ff;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-item-subtitle {
|
||||||
|
color: #90a6bb;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-switch input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-switch-track {
|
||||||
|
width: 48px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.14);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
position: relative;
|
||||||
|
transition: background 0.18s ease, border-color 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-switch-track::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
left: 3px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #f5fbff;
|
||||||
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
|
||||||
|
transition: transform 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-switch input:checked + .earth-settings-switch-track {
|
||||||
|
background: linear-gradient(180deg, rgba(69, 171, 255, 0.92), rgba(34, 123, 255, 0.84));
|
||||||
|
border-color: rgba(220, 243, 255, 0.36);
|
||||||
|
}
|
||||||
|
|
||||||
|
.earth-settings-switch input:checked + .earth-settings-switch-track::after {
|
||||||
|
transform: translateX(18px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 960px) {
|
||||||
|
.earth-settings-sheet {
|
||||||
|
top: 12vh;
|
||||||
|
right: 10vw;
|
||||||
|
bottom: 12vh;
|
||||||
|
left: 10vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.earth-app.layout-expanded .hud-panel-info {
|
.earth-app.layout-expanded .hud-panel-info {
|
||||||
top: var(--hud-offset);
|
top: var(--hud-offset);
|
||||||
left: var(--hud-offset);
|
left: var(--hud-offset);
|
||||||
|
|||||||
@@ -128,6 +128,12 @@
|
|||||||
<button id="zoom-out" class="liquid-glass-surface earth-zoom-btn" title="缩小">−<span class="tooltip earth-toolbar-tooltip">缩小</span></button>
|
<button id="zoom-out" class="liquid-glass-surface earth-zoom-btn" title="缩小">−<span class="tooltip earth-toolbar-tooltip">缩小</span></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<button id="settings-trigger" class="floating-btn liquid-glass-surface earth-toolbar-btn" title="设置">
|
||||||
|
<span class="icon" aria-hidden="true">
|
||||||
|
<span class="material-symbols-rounded">settings</span>
|
||||||
|
</span>
|
||||||
|
<span class="tooltip earth-toolbar-tooltip">设置</span>
|
||||||
|
</button>
|
||||||
<button id="reset-view" class="floating-btn liquid-glass-surface earth-toolbar-btn" title="重置视角">
|
<button id="reset-view" class="floating-btn liquid-glass-surface earth-toolbar-btn" title="重置视角">
|
||||||
<span class="icon" aria-hidden="true">
|
<span class="icon" aria-hidden="true">
|
||||||
<span class="material-symbols-rounded">my_location</span>
|
<span class="material-symbols-rounded">my_location</span>
|
||||||
@@ -147,8 +153,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="coordinates-display" class="hud-panel hud-panel-coordinates">
|
<div id="coordinates-display" class="hud-panel hud-panel-coordinates hud-panel-draggable" data-panel-key="coordinates-display">
|
||||||
<h3 class="hud-panel-title">坐标信息</h3>
|
<div class="hud-panel-header hud-panel-drag-handle">
|
||||||
|
<h3 class="hud-panel-title">坐标信息</h3>
|
||||||
|
<button class="hud-panel-close" type="button" data-close-panel="coordinates-display" aria-label="关闭坐标信息">
|
||||||
|
<span class="material-symbols-rounded">close</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<div class="coord-item hud-panel-row">
|
<div class="coord-item hud-panel-row">
|
||||||
<span class="coord-label hud-panel-label">经度:</span>
|
<span class="coord-label hud-panel-label">经度:</span>
|
||||||
<span id="longitude-value" class="coord-value hud-panel-value">0.00°</span>
|
<span id="longitude-value" class="coord-value hud-panel-value">0.00°</span>
|
||||||
@@ -161,8 +172,13 @@
|
|||||||
<div class="earth-mouse-coords" id="mouse-coords">鼠标位置: 无</div>
|
<div class="earth-mouse-coords" id="mouse-coords">鼠标位置: 无</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="legend" class="hud-panel hud-panel-legend">
|
<div id="legend" class="hud-panel hud-panel-legend hud-panel-draggable" data-panel-key="legend">
|
||||||
<h3 class="legend-title hud-panel-title">线缆图例</h3>
|
<div class="hud-panel-header hud-panel-drag-handle">
|
||||||
|
<h3 class="legend-title hud-panel-title">线缆图例</h3>
|
||||||
|
<button class="hud-panel-close" type="button" data-close-panel="legend" aria-label="关闭图例">
|
||||||
|
<span class="material-symbols-rounded">close</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<div class="legend-list">
|
<div class="legend-list">
|
||||||
<div class="legend-item">
|
<div class="legend-item">
|
||||||
<div class="legend-color legend-color-americas"></div>
|
<div class="legend-color legend-color-americas"></div>
|
||||||
@@ -183,8 +199,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="earth-stats" class="hud-panel hud-panel-stats">
|
<div id="earth-stats" class="hud-panel hud-panel-stats hud-panel-draggable" data-panel-key="earth-stats">
|
||||||
<h3 class="hud-panel-title">地球信息</h3>
|
<div class="hud-panel-header hud-panel-drag-handle">
|
||||||
|
<h3 class="hud-panel-title">地球信息</h3>
|
||||||
|
<button class="hud-panel-close" type="button" data-close-panel="earth-stats" aria-label="关闭地球信息">
|
||||||
|
<span class="material-symbols-rounded">close</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<div class="stats-item hud-panel-row">
|
<div class="stats-item hud-panel-row">
|
||||||
<span class="stats-label hud-panel-label">电缆系统:</span>
|
<span class="stats-label hud-panel-label">电缆系统:</span>
|
||||||
<span class="stats-value hud-panel-value" id="cable-count">0个</span>
|
<span class="stats-value hud-panel-value" id="cable-count">0个</span>
|
||||||
@@ -234,6 +255,57 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="status-message" class="earth-status-message"></div>
|
<div id="status-message" class="earth-status-message"></div>
|
||||||
<div id="tooltip" class="earth-tooltip"></div>
|
<div id="tooltip" class="earth-tooltip"></div>
|
||||||
|
<div id="settings-modal" class="earth-settings-modal" aria-hidden="true">
|
||||||
|
<div id="settings-backdrop" class="earth-settings-backdrop"></div>
|
||||||
|
<div class="earth-settings-sheet liquid-glass-surface" role="dialog" aria-modal="true" aria-labelledby="settings-title">
|
||||||
|
<div class="earth-settings-header">
|
||||||
|
<div>
|
||||||
|
<div class="earth-settings-kicker">设置</div>
|
||||||
|
<h2 id="settings-title" class="earth-settings-title">显示与视图</h2>
|
||||||
|
</div>
|
||||||
|
<button id="settings-close" class="earth-settings-close" type="button" aria-label="关闭设置">
|
||||||
|
<span class="material-symbols-rounded">close</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="earth-settings-content">
|
||||||
|
<section class="earth-settings-section">
|
||||||
|
<div class="earth-settings-section-title">视图</div>
|
||||||
|
<div class="earth-settings-list">
|
||||||
|
<label class="earth-settings-item" for="toggle-view-legend">
|
||||||
|
<div class="earth-settings-copy">
|
||||||
|
<span class="earth-settings-item-title">图例</span>
|
||||||
|
<span class="earth-settings-item-subtitle">控制左下角图例面板显示</span>
|
||||||
|
</div>
|
||||||
|
<span class="earth-settings-switch">
|
||||||
|
<input id="toggle-view-legend" type="checkbox" data-settings-panel="legend">
|
||||||
|
<span class="earth-settings-switch-track"></span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label class="earth-settings-item" for="toggle-view-coordinates">
|
||||||
|
<div class="earth-settings-copy">
|
||||||
|
<span class="earth-settings-item-title">坐标信息</span>
|
||||||
|
<span class="earth-settings-item-subtitle">控制右上角坐标信息面板显示</span>
|
||||||
|
</div>
|
||||||
|
<span class="earth-settings-switch">
|
||||||
|
<input id="toggle-view-coordinates" type="checkbox" data-settings-panel="coordinates-display">
|
||||||
|
<span class="earth-settings-switch-track"></span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label class="earth-settings-item" for="toggle-view-stats">
|
||||||
|
<div class="earth-settings-copy">
|
||||||
|
<span class="earth-settings-item-title">地球信息</span>
|
||||||
|
<span class="earth-settings-item-subtitle">控制右下角统计信息面板显示</span>
|
||||||
|
</div>
|
||||||
|
<span class="earth-settings-switch">
|
||||||
|
<input id="toggle-view-stats" type="checkbox" data-settings-panel="earth-stats">
|
||||||
|
<span class="earth-settings-switch-track"></span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="module" src="js/main.js"></script>
|
<script type="module" src="js/main.js"></script>
|
||||||
|
|||||||
177
frontend/public/earth/js/controls.js
vendored
177
frontend/public/earth/js/controls.js
vendored
@@ -26,6 +26,11 @@ export let layoutExpanded = false;
|
|||||||
let earthObj = null;
|
let earthObj = null;
|
||||||
let listeners = [];
|
let listeners = [];
|
||||||
let cleanupFns = [];
|
let cleanupFns = [];
|
||||||
|
const HUD_PANEL_IDS = [
|
||||||
|
"legend",
|
||||||
|
"coordinates-display",
|
||||||
|
"earth-stats",
|
||||||
|
];
|
||||||
|
|
||||||
function getFloatingGroups() {
|
function getFloatingGroups() {
|
||||||
return [
|
return [
|
||||||
@@ -44,6 +49,12 @@ function isFloatingMenuVisible() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isSettingsModalOpen() {
|
||||||
|
return document
|
||||||
|
.getElementById("settings-modal")
|
||||||
|
?.classList.contains("is-open");
|
||||||
|
}
|
||||||
|
|
||||||
function closeFloatingMenus() {
|
function closeFloatingMenus() {
|
||||||
getFloatingGroups().forEach((group) => {
|
getFloatingGroups().forEach((group) => {
|
||||||
group.classList.remove("open");
|
group.classList.remove("open");
|
||||||
@@ -55,6 +66,164 @@ function closeFloatingMenus() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function openSettingsModal() {
|
||||||
|
const modal = document.getElementById("settings-modal");
|
||||||
|
if (!modal) return;
|
||||||
|
closeFloatingMenus();
|
||||||
|
modal.classList.add("is-open");
|
||||||
|
modal.setAttribute("aria-hidden", "false");
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeSettingsModal() {
|
||||||
|
const modal = document.getElementById("settings-modal");
|
||||||
|
if (!modal) return;
|
||||||
|
modal.classList.remove("is-open");
|
||||||
|
modal.setAttribute("aria-hidden", "true");
|
||||||
|
}
|
||||||
|
|
||||||
|
function setHudPanelVisibility(panelId, visible) {
|
||||||
|
const panel = document.getElementById(panelId);
|
||||||
|
if (!panel) return;
|
||||||
|
panel.classList.toggle("hud-panel-hidden", !visible);
|
||||||
|
syncSettingsToggle(panelId, visible);
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncSettingsToggle(panelId, visible) {
|
||||||
|
const input = document.querySelector(
|
||||||
|
`[data-settings-panel="${panelId}"]`,
|
||||||
|
);
|
||||||
|
if (input instanceof HTMLInputElement) {
|
||||||
|
input.checked = visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncAllHudPanelToggles() {
|
||||||
|
HUD_PANEL_IDS.forEach((panelId) => {
|
||||||
|
const panel = document.getElementById(panelId);
|
||||||
|
syncSettingsToggle(panelId, !panel?.classList.contains("hud-panel-hidden"));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupSettingsControls() {
|
||||||
|
const settingsTrigger = document.getElementById("settings-trigger");
|
||||||
|
const settingsClose = document.getElementById("settings-close");
|
||||||
|
const settingsBackdrop = document.getElementById("settings-backdrop");
|
||||||
|
const settingsModal = document.getElementById("settings-modal");
|
||||||
|
|
||||||
|
bindListener(settingsTrigger, "click", () => {
|
||||||
|
openSettingsModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
bindListener(settingsClose, "click", () => {
|
||||||
|
closeSettingsModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
bindListener(settingsBackdrop, "click", () => {
|
||||||
|
closeSettingsModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
bindListener(settingsModal, "click", (event) => {
|
||||||
|
const sheet = event.target.closest(".earth-settings-sheet");
|
||||||
|
if (!sheet) {
|
||||||
|
closeSettingsModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const toggleInputs = document.querySelectorAll("[data-settings-panel]");
|
||||||
|
toggleInputs.forEach((input) => {
|
||||||
|
bindListener(input, "change", (event) => {
|
||||||
|
const target = event.currentTarget;
|
||||||
|
if (!(target instanceof HTMLInputElement)) return;
|
||||||
|
const panelId = target.dataset.settingsPanel;
|
||||||
|
if (!panelId) return;
|
||||||
|
setHudPanelVisibility(panelId, target.checked);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
syncAllHudPanelToggles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupHudPanelControls() {
|
||||||
|
const closeButtons = document.querySelectorAll("[data-close-panel]");
|
||||||
|
closeButtons.forEach((button) => {
|
||||||
|
bindListener(button, "click", (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
const target = event.currentTarget;
|
||||||
|
if (!(target instanceof HTMLElement)) return;
|
||||||
|
const panelId = target.dataset.closePanel;
|
||||||
|
if (!panelId) return;
|
||||||
|
setHudPanelVisibility(panelId, false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupDraggableHudPanels() {
|
||||||
|
const app = document.getElementById("container");
|
||||||
|
const draggablePanels = document.querySelectorAll(".hud-panel-draggable");
|
||||||
|
if (!app || draggablePanels.length === 0) return;
|
||||||
|
|
||||||
|
draggablePanels.forEach((panel) => {
|
||||||
|
const handle = panel.querySelector(".hud-panel-drag-handle");
|
||||||
|
if (!handle) return;
|
||||||
|
|
||||||
|
let isDragging = false;
|
||||||
|
let startPointerX = 0;
|
||||||
|
let startPointerY = 0;
|
||||||
|
let startLeft = 0;
|
||||||
|
let startTop = 0;
|
||||||
|
|
||||||
|
const stopDragging = () => {
|
||||||
|
isDragging = false;
|
||||||
|
panel.classList.remove("is-dragging");
|
||||||
|
document.body.style.userSelect = "";
|
||||||
|
};
|
||||||
|
|
||||||
|
const onMove = (event) => {
|
||||||
|
if (!isDragging) return;
|
||||||
|
const appRect = app.getBoundingClientRect();
|
||||||
|
const panelRect = panel.getBoundingClientRect();
|
||||||
|
const nextLeft = Math.min(
|
||||||
|
Math.max(startLeft + (event.clientX - startPointerX), 0),
|
||||||
|
appRect.width - panelRect.width,
|
||||||
|
);
|
||||||
|
const nextTop = Math.min(
|
||||||
|
Math.max(startTop + (event.clientY - startPointerY), 0),
|
||||||
|
appRect.height - panelRect.height,
|
||||||
|
);
|
||||||
|
|
||||||
|
panel.style.left = `${nextLeft}px`;
|
||||||
|
panel.style.top = `${nextTop}px`;
|
||||||
|
panel.style.right = "auto";
|
||||||
|
panel.style.bottom = "auto";
|
||||||
|
panel.style.transform = "none";
|
||||||
|
};
|
||||||
|
|
||||||
|
bindListener(handle, "pointerdown", (event) => {
|
||||||
|
if (event.target.closest(".hud-panel-close")) return;
|
||||||
|
isDragging = true;
|
||||||
|
startPointerX = event.clientX;
|
||||||
|
startPointerY = event.clientY;
|
||||||
|
const appRect = app.getBoundingClientRect();
|
||||||
|
const panelRect = panel.getBoundingClientRect();
|
||||||
|
startLeft = panelRect.left - appRect.left;
|
||||||
|
startTop = panelRect.top - appRect.top;
|
||||||
|
panel.style.left = `${startLeft}px`;
|
||||||
|
panel.style.top = `${startTop}px`;
|
||||||
|
panel.style.right = "auto";
|
||||||
|
panel.style.bottom = "auto";
|
||||||
|
panel.style.transform = "none";
|
||||||
|
panel.classList.add("is-dragging");
|
||||||
|
document.body.style.userSelect = "none";
|
||||||
|
handle.setPointerCapture?.(event.pointerId);
|
||||||
|
});
|
||||||
|
|
||||||
|
bindListener(handle, "pointermove", onMove);
|
||||||
|
bindListener(handle, "pointerup", stopDragging);
|
||||||
|
bindListener(handle, "pointercancel", stopDragging);
|
||||||
|
bindListener(handle, "lostpointercapture", stopDragging);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function clearForcedFloatingClose() {
|
function clearForcedFloatingClose() {
|
||||||
getFloatingGroups().forEach((group) => {
|
getFloatingGroups().forEach((group) => {
|
||||||
group.classList.remove("force-closed");
|
group.classList.remove("force-closed");
|
||||||
@@ -379,6 +548,9 @@ function setupTerrainControls() {
|
|||||||
const reloadBtn = document.getElementById("reload-data");
|
const reloadBtn = document.getElementById("reload-data");
|
||||||
const zoomGroup = document.getElementById("zoom-control-group");
|
const zoomGroup = document.getElementById("zoom-control-group");
|
||||||
const zoomTrigger = document.getElementById("zoom-trigger");
|
const zoomTrigger = document.getElementById("zoom-trigger");
|
||||||
|
setupSettingsControls();
|
||||||
|
setupHudPanelControls();
|
||||||
|
setupDraggableHudPanels();
|
||||||
|
|
||||||
if (trailsBtn) {
|
if (trailsBtn) {
|
||||||
trailsBtn.classList.add("active");
|
trailsBtn.classList.add("active");
|
||||||
@@ -487,6 +659,11 @@ function setupKeyboardControls() {
|
|||||||
bindListener(document, "keydown", (event) => {
|
bindListener(document, "keydown", (event) => {
|
||||||
if (event.key !== "Escape") return;
|
if (event.key !== "Escape") return;
|
||||||
|
|
||||||
|
if (isSettingsModalOpen()) {
|
||||||
|
closeSettingsModal();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (isFloatingMenuVisible()) {
|
if (isFloatingMenuVisible()) {
|
||||||
closeFloatingMenus();
|
closeFloatingMenus();
|
||||||
return;
|
return;
|
||||||
|
|||||||
@@ -49,6 +49,9 @@ function renderLegend(mode) {
|
|||||||
|
|
||||||
const config = LEGEND_MODES[mode] || LEGEND_MODES.cables;
|
const config = LEGEND_MODES[mode] || LEGEND_MODES.cables;
|
||||||
const items = legendItemsByMode[mode] || [];
|
const items = legendItemsByMode[mode] || [];
|
||||||
|
const titleEl = legend.querySelector(".legend-title");
|
||||||
|
const listEl = legend.querySelector(".legend-list");
|
||||||
|
if (!titleEl || !listEl) return;
|
||||||
const itemsHtml = items
|
const itemsHtml = items
|
||||||
.map(
|
.map(
|
||||||
(item) => `
|
(item) => `
|
||||||
@@ -60,8 +63,6 @@ function renderLegend(mode) {
|
|||||||
)
|
)
|
||||||
.join("");
|
.join("");
|
||||||
|
|
||||||
legend.innerHTML = `
|
titleEl.textContent = config.title;
|
||||||
<h3 class="legend-title hud-panel-title">${config.title}</h3>
|
listEl.innerHTML = itemsHtml;
|
||||||
<div class="legend-list">${itemsHtml}</div>
|
|
||||||
`;
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user