Adjust text color to canvas background color.
This commit is contained in:
parent
4a363b2d23
commit
7a05c62e50
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user