Fix measured values visibility in case of transparent or image background.

source/website/measuretool.js

@@ -3,6 +3,7 @@ import { AddDiv, ClearDomElement } from '../engine/viewer/domutils.js';
 import { AddSvgIconElement, IsDarkTextNeededForColor } from './utils.js';
 
 import * as THREE from 'three';
+import { ColorComponentToFloat, RGBColor } from '../engine/model/color.js';
 
 function GetFaceWorldNormal (intersection)
 {
@@ -193,6 +194,21 @@ export class MeasureTool
 
     UpdatePanel ()
     {
+        function BlendBackgroundWithPageBackground (backgroundColor)
+        {
+            let bodyStyle = window.getComputedStyle (document.body, null);
+            let bgColors = bodyStyle.backgroundColor.match (/\d+/g);
+            if (bgColors.length < 3) {
+                return new RGBColor (backgroundColor.r, backgroundColor.g, backgroundColor.b);
+            }
+            let alpha = ColorComponentToFloat (backgroundColor.a);
+            return new RGBColor (
+                parseInt (bgColors[0], 10) * (1.0 - alpha) + backgroundColor.r * alpha,
+                parseInt (bgColors[1], 10) * (1.0 - alpha) + backgroundColor.g * alpha,
+                parseInt (bgColors[2], 10) * (1.0 - alpha) + backgroundColor.b * alpha
+            );
+        }
+
         function AddValue (panel, icon, title, value)
         {
             let svgIcon = AddSvgIconElement (panel, icon, 'left_inline');
@@ -201,11 +217,18 @@ export class MeasureTool
         }
 
         ClearDomElement (this.panel);
-        if (IsDarkTextNeededForColor (this.settings.backgroundColor.r, this.settings.backgroundColor.g, this.settings.backgroundColor.b)) {
+        if (this.settings.backgroundIsEnvMap) {
+            this.panel.style.color = '#ffffff';
+            this.panel.style.backgroundColor = 'rgba(0,0,0,0.5)';
+        } else {
+            let blendedColor = BlendBackgroundWithPageBackground (this.settings.backgroundColor);
+            if (IsDarkTextNeededForColor (blendedColor)) {
                 this.panel.style.color = '#000000';
             } else {
                 this.panel.style.color = '#ffffff';
             }
+            this.panel.style.backgroundColor = 'transparent';
+        }
         if (this.markers.length === 0) {
             this.panel.innerHTML = 'Select a point.';
         } else if (this.markers.length === 1) {
@@ -233,9 +256,9 @@ export class MeasureTool
         }
         let canvas = this.viewer.GetCanvas ();
         let rect = canvas.getBoundingClientRect ();
-        this.panel.style.left = rect.left + 'px';
+        this.panel.style.left = (rect.left + 1) + 'px';
-        this.panel.style.top = rect.top + 'px';
+        this.panel.style.top = (rect.top + 1) + 'px';
-        this.panel.style.width = (rect.right - rect.left) + 'px';
+        this.panel.style.width = (rect.right - rect.left - 2) + 'px';
     }
 
     ClearMarkers ()

source/website/utils.js

@@ -156,9 +156,9 @@ export function CreateInlineColorCircle (color)
     return circleDiv;
 }
 
-export function IsDarkTextNeededForColor (r, g, b)
+export function IsDarkTextNeededForColor (color)
 {
-    let intensity = r * 0.299 + g * 0.587 + b * 0.114;
+    let intensity = color.r * 0.299 + color.g * 0.587 + color.b * 0.114;
     return intensity > 186.0;
 }
 

source/website/website.js

@@ -623,6 +623,9 @@ export class Website
             onEnvironmentMapChange : () => {
                 this.settings.SaveToCookies ();
                 this.UpdateEnvironmentMap ();
+                if (this.measureTool.IsActive ()) {
+                    this.measureTool.UpdatePanel ();
+                }
             },
             onBackgroundColorChange : () => {
                 this.settings.SaveToCookies ();