Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
kovacsv 2022-06-25 13:52:50 +02:00
parent 79595fcdf9
commit d296302a37
3 changed files with 34 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
source/website/measuretool.js
View File

@ -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 ()

4
source/website/utils.js
View File

@ -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;
}

3
source/website/website.js
View File

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