crosshair

Signed-off-by: K1 <git@karoh.net>

dve.css

@@ -53,3 +53,31 @@ html, body {
   top: auto;
   bottom: 10px;
 }
+
+.crosshair {
+  position: absolute;
+  display: none;
+  width: 24px;
+  height: 24px;
+  z-index: 999;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+}
+.crosshair::before,
+.crosshair::after {
+  content: "";
+  position: absolute;
+  background: #000;
+}
+.crosshair::before {
+  left: 11px;
+  top: 0;
+  width: 2px;
+  height: 24px;
+}
+.crosshair::after {
+  left: 0;
+  top: 11px;
+  width: 24px;
+  height: 2px;
+}

dve.js

@@ -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]);