From 14139c2597626a61c440bf55ed8e7af32452f4dd Mon Sep 17 00:00:00 2001 From: kovacsv Date: Tue, 30 Nov 2021 21:55:49 +0100 Subject: [PATCH] Background color picker doesn't updated when switching between light and dark mode #177 --- website/o3dv/js/sidebar.js | 31 ++++++------- website/o3dv/js/sidebarpanels.js | 74 +++++++++++++++++++++++++------- website/o3dv/js/website.js | 59 ++++++++++--------------- 3 files changed, 94 insertions(+), 70 deletions(-) diff --git a/website/o3dv/js/sidebar.js b/website/o3dv/js/sidebar.js index 876ba50..67d0330 100644 --- a/website/o3dv/js/sidebar.js +++ b/website/o3dv/js/sidebar.js @@ -1,13 +1,13 @@ OV.Sidebar = class { - constructor (mainDiv, splitterDiv) + constructor (mainDiv, splitterDiv, settings) { this.mainDiv = mainDiv; this.splitterDiv = splitterDiv; this.panelSet = new OV.PanelSet (mainDiv); this.detailsPanel = new OV.DetailsSidebarPanel (this.panelSet.GetContentDiv ()); - this.settingsPanel = new OV.SettingsSidebarPanel (this.panelSet.GetContentDiv ()); + this.settingsPanel = new OV.SettingsSidebarPanel (this.panelSet.GetContentDiv (), settings); this.panelSet.AddPanel (this.detailsPanel); this.panelSet.AddPanel (this.settingsPanel); @@ -24,7 +24,7 @@ OV.Sidebar = class this.panelSet.ShowPanels (show); } - Init (settings, callbacks) + Init (callbacks) { this.callbacks = callbacks; @@ -42,22 +42,17 @@ OV.Sidebar = class } }); - let defaultSettings = new OV.Settings (); - this.settingsPanel.InitSettings ( - settings, - defaultSettings, - { - onBackgroundColorChange : (newVal) => { - this.callbacks.onBackgroundColorChange (newVal); - }, - onDefaultColorChange : (newVal) => { - this.callbacks.onDefaultColorChange (newVal); - }, - onThemeChange : (newVal) => { - this.callbacks.onThemeChange (newVal); - } + this.settingsPanel.Init ({ + onBackgroundColorChange : () => { + this.callbacks.onBackgroundColorChange (); + }, + onDefaultColorChange : () => { + this.callbacks.onDefaultColorChange (); + }, + onThemeChange : () => { + this.callbacks.onThemeChange (); } - ); + }); OV.InstallVerticalSplitter (this.splitterDiv, this.mainDiv, true, () => { this.callbacks.onResize (); diff --git a/website/o3dv/js/sidebarpanels.js b/website/o3dv/js/sidebarpanels.js index 4d136d9..5ac396e 100644 --- a/website/o3dv/js/sidebarpanels.js +++ b/website/o3dv/js/sidebarpanels.js @@ -200,9 +200,10 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel OV.SettingsSidebarPanel = class extends OV.SidebarPanel { - constructor (parentDiv) + constructor (parentDiv, settings) { super (parentDiv); + this.settings = settings; this.backgroundColorInput = null; this.defaultColorInput = null; this.defaultColorWarning = null; @@ -225,27 +226,31 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel this.defaultColorInput.pickr.hide (); } - InitSettings (settings, defaultSettings, callbacks) + Init (callbacks) { - this.Init (callbacks); + super.Init (callbacks); this.backgroundColorInput = this.AddColorParameter ( 'Background Color', 'Affects only the visualization.', null, ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'], - settings.backgroundColor, - this.callbacks.onBackgroundColorChange + this.settings.backgroundColor, + (newColor) => { + this.SetBackgroundColor (newColor, false); + } ); this.defaultColorInput = this.AddColorParameter ( 'Default Color', 'Appears when the model doesn\'t have materials.', 'Has no effect on the currently loaded file.', ['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8'], - settings.defaultColor, - this.callbacks.onDefaultColorChange + this.settings.defaultColor, + (newColor) => { + this.SetDefaultColor (newColor, false); + } ); - this.themeInput = this.AddThemeParameter (settings.themeId); - this.AddResetToDefaultsButton (defaultSettings); + this.themeInput = this.AddThemeParameter (this.settings.themeId); + this.AddResetToDefaultsButton (); } Update (model) @@ -259,6 +264,32 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel this.Resize (); } + SetBackgroundColor (color, setInput) + { + this.settings.backgroundColor = color; + if (setInput) { + this.backgroundColorInput.pickr.setColor ('#' + OV.ColorToHexString (color)); + } else { + this.callbacks.onBackgroundColorChange (); + } + } + + SetDefaultColor (color, setInput) + { + this.settings.defaultColor = color; + if (setInput) { + this.defaultColorInput.pickr.setColor ('#' + OV.ColorToHexString (color)); + } else { + this.callbacks.onDefaultColorChange (); + } + } + + SetThemeId (themeId) + { + this.settings.themeId = themeId; + this.callbacks.onThemeChange (); + } + AddColorParameter (title, description, warningText, predefinedColors, defaultValue, onChange) { let contentDiv = OV.AddDiv (this.contentDiv, 'ov_sidebar_settings_content'); @@ -313,7 +344,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel AddThemeParameter (defaultValue) { - function AddRadioButton (contentDiv, themeId, themeName, onChange) + function AddThemeRadioButton (obj, contentDiv, themeId, themeName, onChange) { let row = OV.AddDiv (contentDiv, 'ov_sidebar_settings_row'); let label = OV.AddDomElement (row, 'label'); @@ -324,7 +355,15 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel radio.setAttribute ('name', 'theme'); OV.AddDomElement (label, 'span', null, themeName); radio.addEventListener ('change', () => { - onChange (themeId); + obj.SetThemeId (themeId); + if (themeId === OV.Theme.Light) { + obj.SetBackgroundColor (new OV.Color (255, 255, 255), true); + obj.SetDefaultColor (new OV.Color (200, 200, 200), true); + } else if (themeId === OV.Theme.Dark) { + obj.SetBackgroundColor (new OV.Color (42, 43, 46), true); + obj.SetDefaultColor (new OV.Color (200, 200, 200), true); + } + onChange (); }); return radio; } @@ -349,22 +388,25 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel Select (result.buttons, value); } }; - result.buttons.push (AddRadioButton (buttonsDiv, OV.Theme.Light, 'Light', this.callbacks.onThemeChange)); - result.buttons.push (AddRadioButton (buttonsDiv, OV.Theme.Dark, 'Dark', this.callbacks.onThemeChange)); + result.buttons.push (AddThemeRadioButton (this, buttonsDiv, OV.Theme.Light, 'Light', this.callbacks.onThemeChange)); + result.buttons.push (AddThemeRadioButton (this, buttonsDiv, OV.Theme.Dark, 'Dark', this.callbacks.onThemeChange)); Select (result.buttons, defaultValue); return result; - } - AddResetToDefaultsButton (defaultSettings) + AddResetToDefaultsButton () { + let defaultSettings = new OV.Settings (); let resetToDefaultsButton = OV.AddDiv (this.contentDiv, 'ov_button outline ov_sidebar_button', 'Reset to Default'); resetToDefaultsButton.addEventListener ('click', () => { + this.settings.backgroundColor = defaultSettings.backgroundColor; + this.settings.defaultColor = defaultSettings.defaultColor; this.backgroundColorInput.pickr.setColor ('#' + OV.ColorToHexString (defaultSettings.backgroundColor)); this.defaultColorInput.pickr.setColor ('#' + OV.ColorToHexString (defaultSettings.defaultColor)); if (this.themeInput !== null) { + this.settings.themeId = defaultSettings.themeId; this.themeInput.select (defaultSettings.themeId); - this.callbacks.onThemeChange (defaultSettings.themeId); + this.callbacks.onThemeChange (); } }); } diff --git a/website/o3dv/js/website.js b/website/o3dv/js/website.js index 1a3dacd..7ba42e8 100644 --- a/website/o3dv/js/website.js +++ b/website/o3dv/js/website.js @@ -11,14 +11,14 @@ OV.Website = class constructor (parameters) { this.parameters = parameters; + this.settings = new OV.Settings (); this.viewer = new OV.Viewer (); this.hashHandler = new OV.HashHandler (); this.cookieHandler = new OV.CookieHandler (); this.toolbar = new OV.Toolbar (this.parameters.toolbarDiv); this.navigator = new OV.Navigator (this.parameters.navigatorDiv, this.parameters.navigatorSplitterDiv); - this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv, this.parameters.sidebarSplitterDiv); + this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv, this.parameters.sidebarSplitterDiv, this.settings); this.eventHandler = new OV.EventHandler (this.parameters.eventHandler); - this.settings = new OV.Settings (); this.modelLoader = new OV.ThreeModelLoader (); this.themeHandler = new OV.ThemeHandler (); this.highlightColor = new THREE.Color (0x8ec9f0); @@ -337,15 +337,6 @@ OV.Website = class this.themeHandler.SwitchTheme (this.settings.themeId); this.settings.SaveToCookies (this.cookieHandler); if (resetColors) { - if (this.settings.themeId === OV.Theme.Light) { - this.settings.backgroundColor = new OV.Color (255, 255, 255); - this.settings.defaultColor = new OV.Color (200, 200, 200); - } else if (this.settings.themeId === OV.Theme.Dark) { - this.settings.backgroundColor = new OV.Color (42, 43, 46); - this.settings.defaultColor = new OV.Color (200, 200, 200); - } else { - return; - } this.settings.SaveToCookies (this.cookieHandler); this.viewer.SetBackgroundColor (this.settings.backgroundColor); if (this.modelLoader.defaultMaterial !== null) { @@ -542,33 +533,29 @@ OV.Website = class InitSidebar () { - this.sidebar.Init (this.settings, - { - onBackgroundColorChange : (newVal) => { - this.settings.backgroundColor = newVal; - this.settings.SaveToCookies (this.cookieHandler); - this.viewer.SetBackgroundColor (newVal); - }, - onDefaultColorChange : (newVal) => { - this.settings.defaultColor = newVal; - this.settings.SaveToCookies (this.cookieHandler); - if (this.modelLoader.defaultMaterial !== null) { - OV.ReplaceDefaultMaterialColor (this.model, newVal); - this.modelLoader.ReplaceDefaultMaterialColor (newVal); - } - this.viewer.Render (); - }, - onThemeChange : (newVal) => { - this.SwitchTheme (newVal, true); - }, - onResize : () => { - this.Resize (); - }, - onShowHidePanels : (show) => { - this.cookieHandler.SetBoolVal ('ov_show_sidebar', show); + this.sidebar.Init ({ + onBackgroundColorChange : () => { + this.settings.SaveToCookies (this.cookieHandler); + this.viewer.SetBackgroundColor (this.settings.backgroundColor); + }, + onDefaultColorChange : () => { + this.settings.SaveToCookies (this.cookieHandler); + if (this.modelLoader.defaultMaterial !== null) { + OV.ReplaceDefaultMaterialColor (this.model, this.settings.defaultColor); + this.modelLoader.ReplaceDefaultMaterialColor (this.settings.defaultColor); } + this.viewer.Render (); + }, + onThemeChange : () => { + this.SwitchTheme (this.settings.themeId, true); + }, + onResize : () => { + this.Resize (); + }, + onShowHidePanels : (show) => { + this.cookieHandler.SetBoolVal ('ov_show_sidebar', show); } - ); + }); } InitNavigator ()