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

Reorganize settings panel into sections.

Browse Source
This commit is contained in:
kovacsv 2022-01-22 09:04:56 +01:00
parent c3f75a23b4
commit 04120897ac
5 changed files with 176 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
source/website/panelset.js
View File

@ -11,6 +11,11 @@ export class Panel
this.visible = false; this.visible = false;
} }
GetName ()
{
return null;
}
GetIcon () GetIcon ()
{ {
return null; return null;

17
source/website/sidebarpanel.js
View File

@ -8,12 +8,14 @@ export class SidebarPanel extends Panel
super (parentDiv); super (parentDiv);
this.callbacks = null; this.callbacks = null;
this.titleDiv = AddDiv (this.panelDiv, 'ov_sidebar_title'); this.titleDiv = null;
this.contentDiv = AddDiv (this.panelDiv, 'ov_sidebar_content ov_thin_scrollbar'); if (this.HasTitle ()) {
this.titleDiv = AddDiv (this.panelDiv, 'ov_sidebar_title');
AddDiv (this.titleDiv, 'ov_sidebar_title_text', this.GetName ());
this.titleDiv.setAttribute ('title', this.GetName ());
}
let panelName = this.GetName (); this.contentDiv = AddDiv (this.panelDiv, 'ov_sidebar_content ov_thin_scrollbar');
AddDiv (this.titleDiv, 'ov_sidebar_title_text', this.GetName ());
this.titleDiv.setAttribute ('title', panelName);
} }
GetName () GetName ()
@ -21,6 +23,11 @@ export class SidebarPanel extends Panel
return null; return null;
} }
HasTitle ()
{
return true;
}
Clear () Clear ()
{ {
ClearDomElement (this.contentDiv); ClearDomElement (this.contentDiv);

350
source/website/sidebarsettingspanel.js
View File

@ -1,10 +1,9 @@
import { Color, ColorToHexString } from '../engine/model/color.js'; import { Color, ColorToHexString } from '../engine/model/color.js';
import { AddDiv, AddDomElement, AddRangeSlider, AddToggle, ShowDomElement, GetDomElementOuterHeight, SetDomElementOuterHeight } from '../engine/viewer/domutils.js'; import { AddDiv, AddDomElement, AddRangeSlider, AddToggle, ShowDomElement, GetDomElementOuterHeight, SetDomElementOuterHeight } from '../engine/viewer/domutils.js';
import { FeatureSet } from './featureset.js';
import { Settings, Theme } from './settings.js'; import { Settings, Theme } from './settings.js';
import { SidebarPanel } from './sidebarpanel.js'; import { SidebarPanel } from './sidebarpanel.js';
export function AddColorPicker (parentDiv, defaultColor, predefinedColors, onChange) function AddColorPicker (parentDiv, defaultColor, predefinedColors, onChange)
{ {
let pickr = Pickr.create ({ let pickr = Pickr.create ({
el : parentDiv, el : parentDiv,
@ -41,111 +40,75 @@ export function AddColorPicker (parentDiv, defaultColor, predefinedColors, onCha
return pickr; return pickr;
} }
export class SettingsColorSection class SettingsSection
{ {
constructor (parentDiv) constructor (parentDiv, title)
{ {
this.parentDiv = parentDiv; this.parentDiv = parentDiv;
this.contentDiv = null; this.contentDiv = AddDiv (this.parentDiv, 'ov_sidebar_settings_section');
this.pickr = null; AddDiv (this.contentDiv, 'ov_sidebar_title', title);
} }
Init (title, description, color, predefinedColors, onChange) Init (settings, callbacks)
{ {
this.contentDiv = AddDiv (this.parentDiv, 'ov_sidebar_settings_content');
let titleDiv = AddDiv (this.contentDiv, 'ov_sidebar_subtitle');
let colorInput = AddDiv (titleDiv, 'ov_color_picker');
AddDiv (titleDiv, 'ov_sidebar_subtitle', title);
this.pickr = AddColorPicker (colorInput, color, predefinedColors, (color) => {
onChange (color);
});
AddDiv (this.contentDiv, 'ov_sidebar_settings_padded', description);
} }
Show (show) Update (settings)
{ {
ShowDomElement (this.contentDiv, show);
}
Update (color)
{
if (this.pickr === null) {
return;
}
this.pickr.setColor ('#' + ColorToHexString (color));
} }
Clear () Clear ()
{ {
if (this.pickr === null) {
return;
}
this.pickr.hide ();
} }
} }
export class SettingsGridDisplaySection class SettingsModelDisplaySection extends SettingsSection
{ {
constructor (parentDiv) constructor (parentDiv)
{ {
this.parentDiv = parentDiv; super (parentDiv, 'Model Display');
this.gridDisplayToggle = null;
}
Init (showGrid, onChange) this.backgroundColorPicker = null;
{
let contentDiv = AddDiv (this.parentDiv, 'ov_sidebar_settings_content');
let titleDiv = AddDiv (contentDiv, 'ov_sidebar_subtitle');
this.showGridToggle = AddToggle (titleDiv, 'ov_sidebar_subtitle_toggle');
this.showGridToggle.OnChange (() => {
onChange (this.showGridToggle.GetStatus ());
});
AddDiv (titleDiv, 'ov_sidebar_subtitle_text', 'Show Grid');
this.showGridToggle.SetStatus (showGrid);
}
Update (showGrid)
{
if (this.showGridToggle === null) {
return;
}
this.showGridToggle.SetStatus (showGrid);
}
}
export class SettingsEdgeDisplaySection
{
constructor (parentDiv)
{
this.parentDiv = parentDiv;
this.edgeDisplayToggle = null; this.edgeDisplayToggle = null;
this.pickr = null; this.edgeColorPicker = null;
this.thresholdSlider = null; this.thresholdSlider = null;
this.thresholdSliderValue = null; this.thresholdSliderValue = null;
this.edgeSettingsDiv = null; this.edgeSettingsDiv = null;
} }
Init (showEdges, edgeColor, edgeThreshold, callbacks) Init (settings, callbacks)
{ {
let contentDiv = AddDiv (this.parentDiv, 'ov_sidebar_settings_content'); let backgroundColorDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter');
let titleDiv = AddDiv (contentDiv, 'ov_sidebar_subtitle'); 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, (color) => {
settings.backgroundColor = color;
callbacks.onBackgroundColorChange ();
});
this.edgeDisplayToggle = AddToggle (titleDiv, 'ov_sidebar_subtitle_toggle'); let edgeParameterDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter');
AddDiv (titleDiv, 'ov_sidebar_subtitle_text', 'Show Edges'); this.edgeDisplayToggle = AddToggle (edgeParameterDiv, 'ov_sidebar_parameter_toggle');
AddDiv (edgeParameterDiv, 'ov_sidebar_parameter_text', 'Show Edges');
this.edgeSettingsDiv = AddDiv (contentDiv, 'ov_sidebar_settings_padded'); this.edgeSettingsDiv = AddDiv (this.contentDiv, 'ov_sidebar_settings_padded');
this.edgeDisplayToggle.OnChange (() => { this.edgeDisplayToggle.OnChange (() => {
ShowDomElement (this.edgeSettingsDiv, this.edgeDisplayToggle.GetStatus ()); ShowDomElement (this.edgeSettingsDiv, this.edgeDisplayToggle.GetStatus ());
callbacks.onShowEdgesChange (this.edgeDisplayToggle.GetStatus () ? true : false); settings.showEdges = this.edgeDisplayToggle.GetStatus ();
callbacks.onShowEdgesChange ();
}); });
let edgeColorRow = AddDiv (this.edgeSettingsDiv, 'ov_sidebar_settings_row'); let edgeColorRow = AddDiv (this.edgeSettingsDiv, 'ov_sidebar_settings_row');
let predefinedEdgeColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f']; let predefinedEdgeColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'];
let colorInput = AddDiv (edgeColorRow, 'ov_color_picker'); let edgeColorInput = AddDiv (edgeColorRow, 'ov_color_picker');
this.pickr = AddColorPicker (colorInput, edgeColor, predefinedEdgeColors, (color) => { this.edgeColorPicker = AddColorPicker (edgeColorInput, settings.edgeColor, predefinedEdgeColors, (color) => {
callbacks.onEdgeColorChange (color); settings.edgeColor = color;
callbacks.onEdgeColorChange ();
}); });
AddDiv (edgeColorRow, null, 'Edge Color'); AddDiv (edgeColorRow, null, 'Edge Color');
@ -157,73 +120,115 @@ export class SettingsEdgeDisplaySection
this.thresholdSliderValue.innerHTML = this.thresholdSlider.value; this.thresholdSliderValue.innerHTML = this.thresholdSlider.value;
}); });
this. thresholdSlider.addEventListener ('change', () => { this. thresholdSlider.addEventListener ('change', () => {
callbacks.onEdgeThresholdChange (this.thresholdSlider.value); settings.edgeThreshold = this.thresholdSlider.value;
callbacks.onEdgeThresholdChange ();
}); });
this.thresholdSlider.value = edgeThreshold; this.thresholdSlider.value = settings.edgeThreshold;
this.thresholdSliderValue.innerHTML = edgeThreshold; this.thresholdSliderValue.innerHTML = settings.edgeThreshold;
this.edgeDisplayToggle.SetStatus (showEdges); this.edgeDisplayToggle.SetStatus (settings.showEdges);
this.ShowEdgeSettings (showEdges); ShowDomElement (this.edgeSettingsDiv, settings.showEdges);
} }
Update (showEdges, edgeColor, edgeThreshold) Update (settings)
{ {
if (this.edgeDisplayToggle === null) { if (this.backgroundColorPicker !== null) {
return; this.backgroundColorPicker.setColor ('#' + ColorToHexString (settings.backgroundColor));
} }
this.edgeDisplayToggle.SetStatus (showEdges); if (this.edgeDisplayToggle !== null) {
this.ShowEdgeSettings (showEdges); this.edgeDisplayToggle.SetStatus (settings.showEdges);
ShowDomElement (this.edgeSettingsDiv, settings.showEdges);
this.pickr.setColor ('#' + ColorToHexString (edgeColor)); this.edgeColorPicker.setColor ('#' + ColorToHexString (settings.edgeColor));
this.thresholdSlider.value = edgeThreshold; this.thresholdSlider.value = settings.edgeThreshold;
this.thresholdSliderValue.innerHTML = edgeThreshold; this.thresholdSliderValue.innerHTML = settings.edgeThreshold;
} }
ShowEdgeSettings (show)
{
ShowDomElement (this.edgeSettingsDiv, show);
} }
Clear () Clear ()
{ {
if (this.pickr === null) { if (this.backgroundColorPicker !== null) {
return; this.backgroundColorPicker.hide ();
}
if (this.edgeColorPicker !== null) {
this.edgeColorPicker.hide ();
} }
this.pickr.hide ();
} }
} }
export class SettingsThemeSection class SettingsImportParametersSection extends SettingsSection
{ {
constructor (parentDiv) constructor (parentDiv)
{ {
this.parentDiv = parentDiv; super (parentDiv, 'Import Settings');
this.defaultColorPicker = null;
}
Init (settings, callbacks)
{
let defaultColorDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter');
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, (color) => {
settings.defaultColor = color;
callbacks.onDefaultColorChange ();
});
}
Update (settings)
{
if (this.defaultColorPicker !== null) {
this.defaultColorPicker.setColor ('#' + ColorToHexString (settings.defaultColor));
}
}
UpdateVisibility (hasDefaultMaterial)
{
if (this.contentDiv !== null) {
ShowDomElement (this.contentDiv, hasDefaultMaterial);
}
}
Clear ()
{
if (this.defaultColorPicker !== null) {
this.defaultColorPicker.hide ();
}
}
}
class SettingsAppearanceSection extends SettingsSection
{
constructor (parentDiv)
{
super (parentDiv, 'Appearance');
this.darkModeToggle = null; this.darkModeToggle = null;
} }
Init (themeId, onChange) Init (settings, callbacks)
{ {
let contentDiv = AddDiv (this.parentDiv, 'ov_sidebar_settings_content'); let darkModeParameterDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter');
let titleDiv = AddDiv (contentDiv, 'ov_sidebar_subtitle');
this.darkModeToggle = AddToggle (titleDiv, 'ov_sidebar_subtitle_toggle'); this.darkModeToggle = AddToggle (darkModeParameterDiv, 'ov_sidebar_parameter_toggle');
this.darkModeToggle.OnChange (() => { this.darkModeToggle.OnChange (() => {
onChange (this.darkModeToggle.GetStatus () ? Theme.Dark : Theme.Light); settings.themeId = (this.darkModeToggle.GetStatus () ? Theme.Dark : Theme.Light);
callbacks.onThemeChange ();
}); });
AddDiv (titleDiv, 'ov_sidebar_subtitle_text', 'Dark Mode'); AddDiv (darkModeParameterDiv, null, 'Dark Mode');
let isDarkMode = (themeId === Theme.Dark); let isDarkMode = (settings.themeId === Theme.Dark);
this.darkModeToggle.SetStatus (isDarkMode); this.darkModeToggle.SetStatus (isDarkMode);
} }
Update (themeId) Update (settings)
{ {
if (this.darkModeToggle === null) { if (this.darkModeToggle !== null) {
return; let isDarkMode = (settings.themeId === Theme.Dark);
this.darkModeToggle.SetStatus (isDarkMode);
} }
let isDarkMode = (themeId === Theme.Dark);
this.darkModeToggle.SetStatus (isDarkMode);
} }
} }
@ -235,14 +240,9 @@ export class SidebarSettingsPanel extends SidebarPanel
this.settings = settings; this.settings = settings;
this.sectionsDiv = AddDiv (this.contentDiv, 'ov_sidebar_settings_sections ov_thin_scrollbar'); this.sectionsDiv = AddDiv (this.contentDiv, 'ov_sidebar_settings_sections ov_thin_scrollbar');
this.backgroundColorSection = new SettingsColorSection (this.sectionsDiv); this.modelDisplaySection = new SettingsModelDisplaySection (this.sectionsDiv);
this.defaultColorSection = new SettingsColorSection (this.sectionsDiv); this.importParametersSection = new SettingsImportParametersSection (this.sectionsDiv);
this.gridDisplaySection = null; this.appearanceSection = new SettingsAppearanceSection (this.sectionsDiv);
if (FeatureSet.ShowGrid) {
this.gridDisplaySection = new SettingsGridDisplaySection (this.sectionsDiv);
}
this.edgeDisplaySection = new SettingsEdgeDisplaySection (this.sectionsDiv);
this.themeSection = new SettingsThemeSection (this.sectionsDiv);
this.resetToDefaultsButton = AddDiv (this.contentDiv, 'ov_button ov_sidebar_button outline', 'Reset to Default'); this.resetToDefaultsButton = AddDiv (this.contentDiv, 'ov_button ov_sidebar_button outline', 'Reset to Default');
this.resetToDefaultsButton.addEventListener ('click', () => { this.resetToDefaultsButton.addEventListener ('click', () => {
@ -255,6 +255,11 @@ export class SidebarSettingsPanel extends SidebarPanel
return 'Settings'; return 'Settings';
} }
HasTitle ()
{
return false;
}
GetIcon () GetIcon ()
{ {
return 'settings'; return 'settings';
@ -262,96 +267,55 @@ export class SidebarSettingsPanel extends SidebarPanel
Clear () Clear ()
{ {
this.backgroundColorSection.Clear (); this.modelDisplaySection.Clear ();
this.defaultColorSection.Clear (); this.importParametersSection.Clear ();
this.edgeDisplaySection.Clear (); this.appearanceSection.Clear ();
} }
Init (callbacks) Init (callbacks)
{ {
super.Init (callbacks); super.Init (callbacks);
this.backgroundColorSection.Init ( this.modelDisplaySection.Init (this.settings, {
'Background Color', onBackgroundColorChange : () => {
'Affects only the visualization.', callbacks.onBackgroundColorChange ();
this.settings.backgroundColor, },
['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'], onShowEdgesChange : () => {
(newColor) => { callbacks.onEdgeDisplayChange ();
this.SetBackgroundColor (newColor, false); },
onEdgeColorChange : () => {
callbacks.onEdgeDisplayChange ();
},
onEdgeThresholdChange : () => {
callbacks.onEdgeDisplayChange ();
} }
); });
this.defaultColorSection.Init ( this.importParametersSection.Init (this.settings, {
'Default Color', onDefaultColorChange : () => {
'Appears when the model doesn\'t have materials.', callbacks.onDefaultColorChange ();
this.settings.defaultColor,
['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8'],
(newColor) => {
this.SetDefaultColor (newColor, false);
} }
); });
if (this.gridDisplaySection !== null) { this.appearanceSection.Init (this.settings, {
this.gridDisplaySection.Init (this.settings.showGrid, (showGrid) => { onThemeChange : () => {
this.settings.showGrid = showGrid; if (this.settings.themeId === Theme.Light) {
callbacks.onGridDisplayChange (); this.settings.backgroundColor = new Color (255, 255, 255);
}); this.settings.defaultColor = new Color (200, 200, 200);
} } else if (this.settings.themeId === Theme.Dark) {
this.edgeDisplaySection.Init ( this.settings.backgroundColor = new Color (42, 43, 46);
this.settings.showEdges, this.settings.defaultColor = new Color (200, 200, 200);
this.settings.edgeColor,
this.settings.edgeThreshold,
{
onShowEdgesChange : (showEdges) => {
this.settings.showEdges = showEdges;
callbacks.onEdgeDisplayChange ();
},
onEdgeColorChange : (edgeColor) => {
this.settings.edgeColor = edgeColor;
callbacks.onEdgeDisplayChange ();
},
onEdgeThresholdChange : (edgeThreshold) => {
this.settings.edgeThreshold = edgeThreshold;
callbacks.onEdgeDisplayChange ();
} }
this.modelDisplaySection.Update (this.settings);
this.importParametersSection.Update (this.settings);
callbacks.onThemeChange ();
} }
);
this.themeSection.Init (this.settings.themeId, (themeId) => {
this.settings.themeId = themeId;
if (themeId === Theme.Light) {
this.SetBackgroundColor (new Color (255, 255, 255), true);
this.SetDefaultColor (new Color (200, 200, 200), true);
} else if (themeId === Theme.Dark) {
this.SetBackgroundColor (new Color (42, 43, 46), true);
this.SetDefaultColor (new Color (200, 200, 200), true);
}
callbacks.onThemeChange ();
}); });
} }
UpdateSettings (hasDefaultMaterial) UpdateSettings (hasDefaultMaterial)
{ {
this.defaultColorSection.Show (hasDefaultMaterial); this.importParametersSection.UpdateVisibility (hasDefaultMaterial);
this.Resize (); this.Resize ();
} }
SetBackgroundColor (color, setInput)
{
this.settings.backgroundColor = color;
if (setInput) {
this.backgroundColorSection.Update (color);
} else {
this.callbacks.onBackgroundColorChange ();
}
}
SetDefaultColor (color, setInput)
{
this.settings.defaultColor = color;
if (setInput) {
this.defaultColorSection.Update (color);
} else {
this.callbacks.onDefaultColorChange ();
}
}
ResetToDefaults () ResetToDefaults ()
{ {
let defaultSettings = new Settings (); let defaultSettings = new Settings ();
@ -364,25 +328,17 @@ export class SidebarSettingsPanel extends SidebarPanel
this.settings.edgeThreshold = defaultSettings.edgeThreshold; this.settings.edgeThreshold = defaultSettings.edgeThreshold;
this.settings.themeId = defaultSettings.themeId; this.settings.themeId = defaultSettings.themeId;
this.backgroundColorSection.Update (defaultSettings.backgroundColor); this.modelDisplaySection.Update (this.settings);
this.defaultColorSection.Update (defaultSettings.defaultColor); this.importParametersSection.Update (this.settings);
if (this.gridDisplaySection !== null) { this.appearanceSection.Update (this.settings);
this.gridDisplaySection.Update (defaultSettings.showGrid);
}
this.edgeDisplaySection.Update (defaultSettings.showEdges, defaultSettings.edgeColor, defaultSettings.edgeThreshold);
this.themeSection.Update (defaultSettings.themeId);
if (this.gridDisplaySection !== null) {
this.callbacks.onGridDisplayChange ();
}
this.callbacks.onThemeChange (); this.callbacks.onThemeChange ();
} }
Resize () Resize ()
{ {
let titleHeight = GetDomElementOuterHeight (this.titleDiv);
let resetButtonHeight = GetDomElementOuterHeight (this.resetToDefaultsButton); let resetButtonHeight = GetDomElementOuterHeight (this.resetToDefaultsButton);
let height = this.parentDiv.offsetHeight; let height = this.parentDiv.offsetHeight;
SetDomElementOuterHeight (this.sectionsDiv, height - titleHeight - resetButtonHeight); SetDomElementOuterHeight (this.sectionsDiv, height - resetButtonHeight);
} }
} }

20
website/css/sidebar.css
View File

@ -1,4 +1,3 @@
div.ov_sidebar_title div.ov_sidebar_title
{ {
font-weight: bold; font-weight: bold;
@ -22,28 +21,20 @@ div.ov_sidebar_title div.ov_sidebar_title_img
cursor: pointer; cursor: pointer;
} }
div.ov_sidebar_subtitle div.ov_sidebar_parameter
{ {
margin: 10px 0px;
overflow: hidden; overflow: hidden;
} }
div.ov_sidebar_subtitle div.ov_sidebar_subtitle_toggle div.ov_sidebar_parameter div.ov_sidebar_parameter_toggle
{ {
margin-right: 10px; margin-right: 10px;
margin-top: 3px; margin-top: 3px;
float: left; float: left;
} }
div.ov_sidebar_subtitle div.ov_sidebar_subtitle_icon div.ov_sidebar_parameter div.ov_sidebar_parameter_text
{
width: 30px;
height: 18px;
margin-top: 2px;
margin-right: 10px;
float: left;
}
div.ov_sidebar_subtitle div.ov_sidebar_subtitle_text
{ {
float: left; float: left;
} }
@ -55,11 +46,10 @@ div.ov_sidebar_content
div.ov_sidebar_section div.ov_sidebar_section
{ {
margin: 10px 0px;
overflow: auto; overflow: auto;
} }
div.ov_sidebar_content div.ov_sidebar_settings_content div.ov_sidebar_content div.ov_sidebar_settings_section
{ {
margin-bottom: 20px; margin-bottom: 20px;
overflow: auto; overflow: auto;

2
website/css/website.css
View File

@ -99,7 +99,7 @@ div.intro div.intro_big_text
div.main div.main
{ {
overflow: auto; overflow: hidden;
display: none; display: none;
} }