hlad/dve
SHA256
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

crosshair

Browse source 
Signed-off-by: K1 <git@karoh.net>
This commit is contained in:
K1 2026-05-02 18:36:55 +02:00
parent 1bb6f70c92
commit 5094fd1fb2
2 changed files with 103 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

75
dve.js
View file

@ -10,10 +10,14 @@ const mapCounts = [2, 4, 6, 9];
let syncing = false;
let urlUpdateTimer = null;
let activeMouseMap = null;
let activeMousePoint = null;
let activeMouseLatLng = null;
let TILE_SERVERS = [];
let maps = [];
let layers = [];
let crosshairs = [];
function fillDropdown(select) {
for (const name in TILE_SERVERS) {
@ -68,6 +72,7 @@ function sync(source) {
syncing = false;
writeUrlPosition(source);
updateCrosshairs();
}
function setLayer(map, config, currentLayer) {
@ -113,6 +118,8 @@ function setMapCount(count) {
wrapper.classList.toggle("hidden", i > count);
}
hideCrosshairs();
setTimeout(() => {
maps.forEach((map, index) => {
if (index < count) map.invalidateSize(false);
@ -120,6 +127,72 @@ function setMapCount(count) {
}, 0);
}
function isVisibleMap(map) {
return !map.getContainer().parentElement.classList.contains("hidden");
}
function createCrosshair(map) {
const crosshair = document.createElement("div");
crosshair.className = "crosshair";
map.getContainer().parentElement.appendChild(crosshair);
return crosshair;
}
function hideCrosshairs() {
activeMouseMap = null;
activeMousePoint = null;
activeMouseLatLng = null;
crosshairs.forEach(crosshair => {
crosshair.style.display = "none";
});
}
function updateCrosshairs() {
if (!activeMouseMap || !activeMousePoint || !isVisibleMap(activeMouseMap)) return;
activeMouseLatLng = activeMouseMap.containerPointToLatLng(activeMousePoint);
maps.forEach((map, index) => {
const crosshair = crosshairs[index];
if (map === activeMouseMap || !isVisibleMap(map)) {
crosshair.style.display = "none";
return;
}
const point = map.latLngToContainerPoint(activeMouseLatLng);
const size = map.getSize();
if (point.x < 0 || point.y < 0 || point.x > size.x || point.y > size.y) {
crosshair.style.display = "none";
return;
}
crosshair.style.left = point.x + "px";
crosshair.style.top = point.y + "px";
crosshair.style.display = "block";
});
}
function initCrosshair(map) {
const container = map.getContainer();
map.on("mousemove", e => {
activeMouseMap = map;
activeMousePoint = map.mouseEventToContainerPoint(e.originalEvent);
activeMouseLatLng = e.latlng;
updateCrosshairs();
});
map.on("mouseout", e => {
if (!container.contains(e.originalEvent.relatedTarget)) hideCrosshairs();
});
map.on("move", () => updateCrosshairs());
map.on("zoom", () => updateCrosshairs());
}
function init() {
const urlPosition = readUrlPosition();
const mapCountSelector = document.getElementById("mapCountSelector");
@ -137,6 +210,8 @@ function init() {
maps.push(map);
layers.push(null);
crosshairs.push(createCrosshair(map));
initCrosshair(map);
layers[i - 1] = setLayer(map, TILE_SERVERS[select.value], layers[i - 1]);