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

Background color picker doesn't updated when switching between light and dark mode #177

Browse Source
This commit is contained in:
kovacsv 2021-11-30 21:55:49 +01:00
parent afb724fb3b
commit 14139c2597
3 changed files with 94 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
website/o3dv/js/sidebar.js
View File

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

74
website/o3dv/js/sidebarpanels.js
View File

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

59
website/o3dv/js/website.js
View File

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