Transparent background color #286

kovacsv · Jun 25, 2022 · 79595fc · 79595fc
1 parent 62af23c
commit 79595fc
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/source/engine/main.js b/source/engine/main.js
@@ -43,7 +43,7 @@ import { ArrayBufferToUtf8String, ArrayBufferToAsciiString, AsciiStringToArrayBu
 import { SetExternalLibLocation, GetExternalLibPath, LoadExternalLibrary } from './io/externallibs.js';
 import { GetFileName, GetFileExtension, RequestUrl, ReadFile, TransformFileHostUrls, IsUrl, FileSource, FileFormat } from './io/fileutils.js';
 import { TextWriter } from './io/textwriter.js';
-import { RGBColor, RGBAColor, ColorComponentFromFloat, ColorComponentToFloat, RGBColorFromFloatComponents, SRGBToLinear, LinearToSRGB, IntegerToHexString, RGBColorToHexString, HexStringToRGBColor, ArrayToRGBColor, RGBColorIsEqual } from './model/color.js';
+import { RGBColor, RGBAColor, ColorComponentFromFloat, ColorComponentToFloat, RGBColorFromFloatComponents, SRGBToLinear, LinearToSRGB, IntegerToHexString, RGBColorToHexString, RGBAColorToHexString, HexStringToRGBColor, ArrayToRGBColor, RGBColorIsEqual } from './model/color.js';
 import { GeneratorParams, Generator, GeneratorHelper, GenerateCuboid, GenerateCone, GenerateCylinder, GenerateSphere, GeneratePlatonicSolid } from './model/generator.js';
 import { TextureMap, MaterialBase, FaceMaterial, PhongMaterial, PhysicalMaterial, TextureMapIsEqual, TextureIsEqual, MaterialType } from './model/material.js';
 import { Mesh } from './model/mesh.js';
@@ -208,6 +208,7 @@ export {
     LinearToSRGB,
     IntegerToHexString,
     RGBColorToHexString,
+    RGBAColorToHexString,
     HexStringToRGBColor,
     ArrayToRGBColor,
     RGBColorIsEqual,

diff --git a/source/engine/model/color.js b/source/engine/model/color.js
@@ -98,6 +98,15 @@ export function RGBColorToHexString (color)
     return r + g + b;
 }
 
+export function RGBAColorToHexString (color)
+{
+    let r = IntegerToHexString (color.r);
+    let g = IntegerToHexString (color.g);
+    let b = IntegerToHexString (color.b);
+    let a = IntegerToHexString (color.a);
+    return r + g + b + a;
+}
+
 export function HexStringToRGBColor (hexString)
 {
     if (hexString.length !== 6) {

diff --git a/source/website/sidebarsettingspanel.js b/source/website/sidebarsettingspanel.js
@@ -1,4 +1,4 @@
-import { RGBColor, RGBColorToHexString, RGBAColor } from '../engine/model/color.js';
+import { RGBColor, RGBColorToHexString, RGBAColor, RGBAColorToHexString, ColorComponentFromFloat } from '../engine/model/color.js';
 import { AddDiv, AddDomElement, ShowDomElement, SetDomElementOuterHeight } from '../engine/viewer/domutils.js';
 import { AddRangeSlider, AddToggle, AddCheckbox } from '../website/utils.js';
 import { CalculatePopupPositionToElementTopLeft } from './dialogs.js';
@@ -7,18 +7,18 @@ import { Settings, Theme } from './settings.js';
 import { SidebarPanel } from './sidebarpanel.js';
 import { ShadingType } from '../engine/threejs/threeutils.js';
 
-function AddColorPicker (parentDiv, defaultColor, predefinedColors, onChange)
+function AddColorPicker (parentDiv, opacity, defaultColor, predefinedColors, onChange)
 {
     let pickr = Pickr.create ({
         el : parentDiv,
         theme : 'monolith',
         position : 'left-start',
         swatches : predefinedColors,
         comparison : false,
-        default : '#' + RGBColorToHexString (defaultColor),
+        default : defaultColor,
         components : {
             preview : false,
-            opacity : false,
+            opacity : opacity,
             hue : true,
             interaction: {
                 hex : false,
@@ -37,7 +37,8 @@ function AddColorPicker (parentDiv, defaultColor, predefinedColors, onChange)
         onChange (
             parseInt (rgbaColor[0], 10),
             parseInt (rgbaColor[1], 10),
-            parseInt (rgbaColor[2], 10)
+            parseInt (rgbaColor[2], 10),
+            ColorComponentFromFloat (rgbaColor[3])
         );
     });
     return pickr;
@@ -197,9 +198,10 @@ class SettingsModelDisplaySection extends SettingsSection
         let backgroundColorDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter');
         let backgroundColorInput = AddDiv (backgroundColorDiv, 'ov_color_picker');
         AddDiv (backgroundColorDiv, null, 'Background Color');
-        let predefinedBackgroundColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'];
-        this.backgroundColorPicker = AddColorPicker (backgroundColorInput, settings.backgroundColor, predefinedBackgroundColors, (r, g, b) => {
-            settings.backgroundColor = new RGBAColor (r, g, b, 255);
+        let predefinedBackgroundColors = ['#ffffffff', '#e3e3e3ff', '#c9c9c9ff', '#898989ff', '#5f5f5fff', '#494949ff', '#383838ff', '#0f0f0fff'];
+        let defaultBackgroundColor = '#' + RGBAColorToHexString (settings.backgroundColor);
+        this.backgroundColorPicker = AddColorPicker (backgroundColorInput, true, defaultBackgroundColor, predefinedBackgroundColors, (r, g, b, a) => {
+            settings.backgroundColor = new RGBAColor (r, g, b, a);
             callbacks.onBackgroundColorChange ();
         });
 
@@ -246,7 +248,8 @@ class SettingsModelDisplaySection extends SettingsSection
         let predefinedEdgeColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'];
 
         let edgeColorInput = AddDiv (edgeColorRow, 'ov_color_picker');
-        this.edgeColorPicker = AddColorPicker (edgeColorInput, settings.edgeColor, predefinedEdgeColors, (r, g, b) => {
+        let defaultEdgeColor = '#' + RGBColorToHexString (settings.edgeColor);
+        this.edgeColorPicker = AddColorPicker (edgeColorInput, false, defaultEdgeColor, predefinedEdgeColors, (r, g, b, a) => {
             settings.edgeColor = new RGBColor (r, g, b);
             callbacks.onEdgeColorChange ();
         });
@@ -304,7 +307,7 @@ class SettingsModelDisplaySection extends SettingsSection
     Update (settings)
     {
         if (this.backgroundColorPicker !== null) {
-            this.backgroundColorPicker.setColor ('#' + RGBColorToHexString (settings.backgroundColor));
+            this.backgroundColorPicker.setColor ('#' + RGBAColorToHexString (settings.backgroundColor));
         }
 
         if (this.environmentMapPbrInput !== null || this.environmentMapPhongDiv !== null) {
@@ -352,7 +355,8 @@ class SettingsImportParametersSection extends SettingsSection
         let defaultColorInput = AddDiv (defaultColorDiv, 'ov_color_picker');
         AddDiv (defaultColorDiv, null, 'Default Color');
         let predefinedDefaultColors = ['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8'];
-        this.defaultColorPicker = AddColorPicker (defaultColorInput, settings.defaultColor, predefinedDefaultColors, (r, g, b) => {
+        let defaultColor = '#' + RGBColorToHexString (settings.defaultColor);
+        this.defaultColorPicker = AddColorPicker (defaultColorInput, false, defaultColor, predefinedDefaultColors, (r, g, b, a) => {
             settings.defaultColor = new RGBColor (r, g, b);
             callbacks.onDefaultColorChange ();
         });