From d296302a3765e6f7214430f318bb162f030a2177 Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Sat, 25 Jun 2022 13:52:50 +0200
Subject: [PATCH] Fix measured values visibility in case of transparent or
 image background.

---
 source/website/measuretool.js | 35 +++++++++++++++++++++++++++++------
 source/website/utils.js       |  4 ++--
 source/website/website.js     |  3 +++
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/source/website/measuretool.js b/source/website/measuretool.js
index 36bbc97..aef4cc5 100644
--- a/source/website/measuretool.js
+++ b/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,10 +217,17 @@ export class MeasureTool
         }
 
         ClearDomElement (this.panel);
-        if (IsDarkTextNeededForColor (this.settings.backgroundColor.r, this.settings.backgroundColor.g, this.settings.backgroundColor.b)) {
-            this.panel.style.color = '#000000';
-        } else {
+        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.';
@@ -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.top = rect.top + 'px';
-        this.panel.style.width = (rect.right - rect.left) + 'px';
+        this.panel.style.left = (rect.left + 1) + 'px';
+        this.panel.style.top = (rect.top + 1) + 'px';
+        this.panel.style.width = (rect.right - rect.left - 2) + 'px';
     }
 
     ClearMarkers ()
diff --git a/source/website/utils.js b/source/website/utils.js
index da8b1e7..c30675d 100644
--- a/source/website/utils.js
+++ b/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;
 }
 
diff --git a/source/website/website.js b/source/website/website.js
index 51c49e7..a950657 100644
--- a/source/website/website.js
+++ b/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 ();