Adjust text color to canvas background color.

This commit is contained in:
kovacsv 2022-02-20 22:51:57 +01:00
parent 4a363b2d23
commit 7a05c62e50
4 changed files with 29 additions and 9 deletions

View File

@ -1,6 +1,6 @@
import { BigEps, IsEqualEps, RadDeg } from '../engine/geometry/geometry.js';
import { AddDiv, ClearDomElement } from '../engine/viewer/domutils.js';
import { AddSvgIconElement } from './utils.js';
import { AddSvgIconElement, IsDarkTextNeededForColor } from './utils.js';
function GetFaceWorldNormal (intersection)
{
@ -91,9 +91,10 @@ function CalculateMarkerValues (aMarker, bMarker)
export class MeasureTool
{
constructor (viewer)
constructor (viewer, settings)
{
this.viewer = viewer;
this.settings = settings;
this.isActive = false;
this.markers = [];
this.tempMarker = null;
@ -120,7 +121,7 @@ export class MeasureTool
this.isActive = isActive;
this.button.SetSelected (isActive);
if (this.isActive) {
this.panel = AddDiv (document.body, 'ov_measure_panel', 'hejj');
this.panel = AddDiv (document.body, 'ov_measure_panel');
this.UpdatePanel ();
this.Resize ();
} else {
@ -192,13 +193,17 @@ export class MeasureTool
{
function AddValue (panel, icon, title, value)
{
const precision = 5;
let svgIcon = AddSvgIconElement (panel, icon, 'left_inline');
svgIcon.title = title;
AddDiv (panel, 'ov_measure_value', value.toFixed (precision));
AddDiv (panel, 'ov_measure_value', value);
}
ClearDomElement (this.panel);
if (IsDarkTextNeededForColor (this.settings.backgroundColor)) {
this.panel.style.color = '#000000';
} else {
this.panel.style.color = '#ffffff';
}
if (this.markers.length === 0) {
this.panel.innerHTML = 'Select a point.';
} else if (this.markers.length === 1) {
@ -207,14 +212,14 @@ export class MeasureTool
let calcResult = CalculateMarkerValues (this.markers[0], this.markers[1]);
if (calcResult.pointsDistance !== null) {
AddValue (this.panel, 'measure', 'Distance of points', calcResult.pointsDistance);
AddValue (this.panel, 'measure', 'Distance of points', calcResult.pointsDistance.toFixed (3));
}
if (calcResult.parallelFacesDistance !== null) {
AddValue (this.panel, 'measure', 'Distance of parallel faces', calcResult.parallelFacesDistance);
AddValue (this.panel, 'measure', 'Distance of parallel faces', calcResult.parallelFacesDistance.toFixed (3));
}
if (calcResult.facesAngle !== null) {
let degreeValue = calcResult.facesAngle * RadDeg;
AddValue (this.panel, 'measure', 'Angle of faces', degreeValue);
AddValue (this.panel, 'measure', 'Angle of faces', degreeValue.toFixed (1) + '\xB0');
}
}
}

View File

@ -156,6 +156,12 @@ export function CreateInlineColorCircle (color)
return circleDiv;
}
export function IsDarkTextNeededForColor (color)
{
let intensity = color.r * 0.299 + color.g * 0.587 + color.b * 0.114;
return intensity > 186.0;
}
export function InstallVerticalSplitter (splitterDiv, resizedDiv, flipped, onResize)
{
let originalWidth = null;

View File

@ -37,7 +37,7 @@ export class Website
this.parameters = parameters;
this.settings = new Settings ();
this.viewer = new Viewer ();
this.measureTool = new MeasureTool (this.viewer);
this.measureTool = new MeasureTool (this.viewer, this.settings);
this.hashHandler = new HashHandler ();
this.toolbar = new Toolbar (this.parameters.toolbarDiv);
this.navigator = new Navigator (this.parameters.navigatorDiv, this.parameters.navigatorSplitterDiv);

View File

@ -274,11 +274,20 @@ div.ov_bottom_floating_panel div.ov_floating_panel_button
div.ov_measure_panel
{
padding: 10px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: absolute;
left : 0px;
top : 0px;
}
div.ov_measure_panel div.ov_svg_icon
{
color: inherit;
}
div.ov_measure_panel div.ov_measure_value
{
float: left;