102 lines
2.6 KiB
JavaScript
102 lines
2.6 KiB
JavaScript
import { createHUDPanel } from "./hud-panels.js";
|
|
|
|
const LEGEND_MODES = {
|
|
cables: { title: "海缆" },
|
|
satellites: { title: "卫星" },
|
|
countryBoundaries: { title: "国界" },
|
|
computeCenters: { title: "算力" },
|
|
vessels: { title: "船只" },
|
|
bgp: { title: "BGP" },
|
|
};
|
|
|
|
let currentLegendMode = "cables";
|
|
let legendPanel = null;
|
|
let legendItemsByMode = {
|
|
cables: [],
|
|
satellites: [],
|
|
countryBoundaries: [],
|
|
computeCenters: [],
|
|
vessels: [],
|
|
bgp: [],
|
|
};
|
|
|
|
export function initLegend() {
|
|
const collapseBtn = document.getElementById("legend-collapse");
|
|
const legend = document.getElementById("legend");
|
|
if (collapseBtn && legend) {
|
|
legendPanel = createHUDPanel({
|
|
panel: legend,
|
|
header: ".legend-bar",
|
|
body: "#legend-body",
|
|
collapseBtn,
|
|
preferredDirection: "down",
|
|
expandLabel: "展开图例",
|
|
collapseLabel: "折叠图例",
|
|
});
|
|
|
|
collapseBtn.addEventListener("click", (e) => {
|
|
e.stopPropagation();
|
|
legendPanel?.setCollapsed(!(legendPanel?.isCollapsed() ?? false));
|
|
});
|
|
}
|
|
|
|
syncCurrentLabel(currentLegendMode);
|
|
renderLegend(currentLegendMode);
|
|
}
|
|
|
|
export function setLegendMode(mode) {
|
|
const nextMode = LEGEND_MODES[mode] ? mode : "cables";
|
|
currentLegendMode = nextMode;
|
|
syncCurrentLabel(nextMode);
|
|
renderLegend(nextMode);
|
|
}
|
|
|
|
export function getLegendMode() {
|
|
return currentLegendMode;
|
|
}
|
|
|
|
export function refreshLegend() {
|
|
renderLegend(currentLegendMode);
|
|
}
|
|
|
|
export function setLegendItems(mode, items) {
|
|
if (!LEGEND_MODES[mode]) return;
|
|
legendItemsByMode[mode] = Array.isArray(items) ? items : [];
|
|
if (mode === currentLegendMode) {
|
|
renderLegend(currentLegendMode);
|
|
}
|
|
}
|
|
|
|
function syncCurrentLabel(mode) {
|
|
const nextLabel = LEGEND_MODES[mode]?.title || LEGEND_MODES.cables.title;
|
|
[document.getElementById("legend-current-label"), document.getElementById("mobile-situation-legend-mode")]
|
|
.forEach((labelEl) => {
|
|
if (labelEl) {
|
|
labelEl.textContent = nextLabel;
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderLegend(mode) {
|
|
const items = legendItemsByMode[mode] || [];
|
|
const html = items
|
|
.map(
|
|
(item) => `
|
|
<div class="legend-item">
|
|
<span class="legend-dot legend-dot--${item.shape || "dot"}" style="background:${item.color}; color:${item.color}"></span>
|
|
<span class="legend-label">${item.label}</span>
|
|
</div>`,
|
|
)
|
|
.join("");
|
|
|
|
const desktopList = document.querySelector("#legend .legend-list");
|
|
if (desktopList) {
|
|
desktopList.innerHTML = html;
|
|
}
|
|
|
|
const mobileList = document.getElementById("mobile-situation-legend-list");
|
|
if (mobileList) {
|
|
mobileList.innerHTML = html;
|
|
}
|
|
}
|