Merge branch 'main' into 170-add-full-name-to-acronyms-in-help

NybyDK · May 28, 2024 · 05c5e2e · 05c5e2e
2 parents 3807f37 + 69e3dcb
commit 05c5e2e
Showing 1 changed file with 22 additions and 0 deletions.
diff --git a/src/lib/components/Packet.svelte b/src/lib/components/Packet.svelte
@@ -7,10 +7,17 @@
   let transitionDuration: number;
   let animation: Animation | undefined;
   let packetElement: SVGElement | undefined;
+  let textX: number = 0;
+  let textY: number = 0;
 
   $: {
     if (animation) {
       requestAnimationFrame(() => {
+        if (packetElement) {
+          const matrix = new DOMMatrixReadOnly(getComputedStyle(packetElement).transform);
+          textX = matrix.m41;
+          textY = matrix.m42;
+        }
         if ($config.running) {
           animation?.play();
         } else {
@@ -77,13 +84,28 @@
 </script>
 
 <circle class:labeled={packet.label !== -1} bind:this={packetElement} r="5" />
+{#if packetElement}
+  <text x={textX - 50} y={textY - 15}>Label: {packet.label}</text>
+{/if}
 
 <style>
   circle {
+    cursor: default;
     fill: #da443f; /*weird red*/
   }
 
   .labeled {
     fill: #6495ed; /*light blue*/
   }
+
+  text {
+    font-size: 24px;
+    fill: white;
+    stroke: black;
+    display: none;
+  }
+
+  circle:hover + text {
+    display: block;
+  }
 </style>