feat: add current position display to Surface view

webui/src/views/Surface.svelte

@@ -18,6 +18,9 @@
   let y: string = urlParams.get("y");
   let viewMode = "link";
 
+  let currentX = NaN;
+  let currentY = NaN;
+
   let loaded = false;
   let viewHeight = 0;
   let viewWidth = 0;
@@ -109,6 +112,16 @@
       svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
     }
 
+    view.on("mousemove", (ev: MouseEvent) => {
+      // not using offsetXY because `translate` transforms on .inner mess it up
+      const viewBBox = (view.node() as HTMLElement).getBoundingClientRect();
+      const [x, y] = d3
+        .zoomTransform(d3.select(".points").node() as HTMLElement)
+        .invert([ev.clientX - viewBBox.left, ev.clientY - viewBBox.top]);
+      currentX = xScale.invert(x);
+      currentY = yScale.invert(y);
+    });
+
     d3.select(".view").call(zoom);
     loaded = true;
   });
@@ -130,6 +143,23 @@
         <!-- <option value="preview">{$i18n.t("Preview")}</option> -->
       </select>
     </div>
+    <div class="position">
+      {$i18n.t("Current position")}:
+      <div class="label">
+        <em>X:</em>
+        {x} = {(Math.round(currentX * 100) / 100).toLocaleString("en", {
+          useGrouping: false,
+          minimumFractionDigits: 2,
+        })}
+      </div>
+      <div class="label">
+        <em>Y:</em>
+        {y} = {(Math.round(currentY * 100) / 100).toLocaleString("en", {
+          useGrouping: false,
+          minimumFractionDigits: 2,
+        })}
+      </div>
+    </div>
   </div>
   <div
     class="view"
@@ -175,12 +205,22 @@
     gap: 2em;
     padding: 1em;
     border-bottom: 1px solid var(--foreground);
+    align-items: center;
 
     .axis-selector {
       display: flex;
       gap: 1em;
       align-items: center;
     }
+
+    .position {
+      display: flex;
+      gap: 1em;
+      em {
+        font-weight: bold;
+        font-style: normal;
+      }
+    }
   }
 
   .view {