improve devpanel (cursor position, styling)

app/src/components/SVGContent.vue

@@ -8,10 +8,15 @@
     <AudioArea v-for="audio in audioAreas" :definition="audio" :bbox="bbox"/>
     <div class="devpanel">
       <div>
-        Current position: {{ Math.round(bbox.x) }}x{{ Math.round(bbox.y) }}
+        <span>Current viewport position:</span>
+        <span>{{ Math.round(bbox.x) }}x{{ Math.round(bbox.y) }}</span>
       </div>
       <div>
-        Zoom level: {{ (Math.round(bbox.z * 1000) / 1000) }}
+        <span>Current cursor position:</span>
+        <span>{{ Math.round(mousePosition.x) }}x{{ Math.round(mousePosition.y) }}</span>
+      </div>
+      <div>
+        <span>Zoom level:</span><span>{{ (Math.round(bbox.z * 1000) / 1000) }}</span>
       </div>
       <label>
         <input v-model="showInternal" type="checkbox">
@@ -64,6 +69,10 @@ export default defineComponent({
       h: ref(0),
       z: ref(1)
     });
+    const mousePosition = reactive({
+      x: ref(0),
+      y: ref(0)
+    });
 
     onMounted(async () => {
       const element = root.value as unknown as HTMLDivElement;
@@ -181,6 +190,10 @@ export default defineComponent({
       let mouse: MouseEvent | undefined;
       window.addEventListener("mousemove", (ev) => {
         mouse = ev;
+        const transform = pz.getTransform();
+        const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width;
+        mousePosition.x = (mouse.clientX - transform.x) / currentRatio;
+        mousePosition.y = (mouse.clientY - transform.y) / currentRatio;
       });
 
       function animate() {
@@ -241,7 +254,8 @@ export default defineComponent({
       panToAnchor,
       scrolls,
       audioAreas,
-      bbox
+      bbox,
+      mousePosition
     };
   },
 });
@@ -359,4 +373,17 @@ function processStart(svg: XMLDocument): SVGRectElement | null {
   font-family: monospace;
   padding: 1em 2em;
 }
+
+.devpanel div {
+  display: flex;
+  justify-content: space-between;
+}
+
+.devpanel label {
+  float: right;
+}
+
+.devpanel div span {
+  margin: 0 .5em;
+}
 </style>