From 39ac3f27502f6afe0a4252740647c0671054d563 Mon Sep 17 00:00:00 2001
From: franmagn <franmagn@stud.ntnu.no>
Date: Tue, 4 Nov 2025 17:35:56 +0100
Subject: [PATCH] style(#47): :lipstick: add background to the labels

add background to make the labels visible even while displaying black or white datasets
---
 src/MeasurementControl/measurementsPanel.css | 17 +++++++++++++++++
 src/MeasurementControl/measurementsPanel.js  | 12 +++---------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/MeasurementControl/measurementsPanel.css b/src/MeasurementControl/measurementsPanel.css
index e767c65..74f4e9c 100644
--- a/src/MeasurementControl/measurementsPanel.css
+++ b/src/MeasurementControl/measurementsPanel.css
@@ -305,4 +305,21 @@
   pointer-events: none; 
 }
 
+/* On-canvas measurement label styling for improved contrast */
+.measurement-canvas-label {
+  position: absolute;
+  transform: translate(-50%, -100%);
+  pointer-events: none;
+  color: #000;
+  background: rgba(255,255,255,0.95);
+  padding: 2px 6px;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
+  border: 1px solid rgba(0,0,0,0.08);
+  font-weight: 600;
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 2100;
+}
+
 
diff --git a/src/MeasurementControl/measurementsPanel.js b/src/MeasurementControl/measurementsPanel.js
index 16e4152..cb77cba 100644
--- a/src/MeasurementControl/measurementsPanel.js
+++ b/src/MeasurementControl/measurementsPanel.js
@@ -54,8 +54,8 @@ export function initMeasurementsPanel(viewer) {
         }
       })
       targetContainer = panel.querySelector('#measurements_list')
+      }
     }
-  }
   if (!targetContainer) {
     console.warn(
       'Measurements list container not found and dynamic injection failed'
@@ -186,13 +186,6 @@ export function initMeasurementsPanel(viewer) {
     if (!lbl) {
       lbl = document.createElement('div')
       lbl.className = 'measurement-canvas-label'
-      lbl.style.position = 'absolute'
-      lbl.style.transform = 'translate(-50%, -100%)'
-      lbl.style.pointerEvents = 'none'
-      lbl.style.color = 'white'
-      lbl.style.fontWeight = 'bold'
-      lbl.style.textShadow = '0 0 4px rgba(0,0,0,0.9)'
-      lbl.style.fontSize = '12px'
       overlay.appendChild(lbl)
       overlayMap.set(measurement.uuid, lbl)
     }
@@ -218,7 +211,8 @@ export function initMeasurementsPanel(viewer) {
           el.style.display = 'none'
         } else {
           el.style.display = ''
-          el.style.transform = `translate(${Math.round(pos.x)}px, ${Math.round(pos.y)}px)`
+          el.style.left = Math.round(pos.x) + 'px'
+          el.style.top = Math.round(pos.y) + 'px'
         }
       } catch (e) {
         // ignore