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

Restructure navigator and sidebar callbacks.

Browse Source
This commit is contained in:
kovacsv 2022-10-11 18:47:59 +02:00
parent 3b63efc4f9
commit 8da7f15a54
5 changed files with 165 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
source/website/navigator.js
View File

@ -70,9 +70,9 @@ export class Navigator
this.callbacks = callbacks; this.callbacks = callbacks;
this.panelSet.Init ({ this.panelSet.Init ({
onResize : () => { onResizeRequested : () => {
ShowDomElement (this.splitterDiv, this.panelSet.IsPanelsVisible ()); ShowDomElement (this.splitterDiv, this.panelSet.IsPanelsVisible ());
this.callbacks.onResize (); this.callbacks.onResizeRequested ();
}, },
onShowHidePanels : (show) => { onShowHidePanels : (show) => {
this.callbacks.onShowHidePanels (show); this.callbacks.onShowHidePanels (show);
@ -91,7 +91,7 @@ export class Navigator
}, },
onMeshTemporarySelected : (meshInstanceId) => { onMeshTemporarySelected : (meshInstanceId) => {
this.tempSelectedMeshId = meshInstanceId; this.tempSelectedMeshId = meshInstanceId;
this.callbacks.updateMeshesSelection (); this.callbacks.onMeshSelectionChanged ();
}, },
onMeshSelected : (meshInstanceId) => { onMeshSelected : (meshInstanceId) => {
this.SetSelection (new Selection (SelectionType.Mesh, meshInstanceId)); this.SetSelection (new Selection (SelectionType.Mesh, meshInstanceId));
@ -123,7 +123,7 @@ export class Navigator
}); });
InstallVerticalSplitter (this.splitterDiv, this.mainDiv, false, () => { InstallVerticalSplitter (this.splitterDiv, this.mainDiv, false, () => {
this.callbacks.onResize (); this.callbacks.onResizeRequested ();
}); });
} }
@ -175,19 +175,19 @@ export class Navigator
ShowAllMeshes (show) ShowAllMeshes (show)
{ {
this.meshesPanel.ShowAllMeshes (show); this.meshesPanel.ShowAllMeshes (show);
this.callbacks.updateMeshesVisibility (); this.callbacks.onMeshVisibilityChanged ();
} }
ToggleNodeVisibility (nodeId) ToggleNodeVisibility (nodeId)
{ {
this.meshesPanel.ToggleNodeVisibility (nodeId); this.meshesPanel.ToggleNodeVisibility (nodeId);
this.callbacks.updateMeshesVisibility (); this.callbacks.onMeshVisibilityChanged ();
} }
ToggleMeshVisibility (meshInstanceId) ToggleMeshVisibility (meshInstanceId)
{ {
this.meshesPanel.ToggleMeshVisibility (meshInstanceId); this.meshesPanel.ToggleMeshVisibility (meshInstanceId);
this.callbacks.updateMeshesVisibility (); this.callbacks.onMeshVisibilityChanged ();
} }
IsMeshIsolated (meshInstanceId) IsMeshIsolated (meshInstanceId)
@ -198,7 +198,7 @@ export class Navigator
IsolateMesh (meshInstanceId) IsolateMesh (meshInstanceId)
{ {
this.meshesPanel.IsolateMesh (meshInstanceId); this.meshesPanel.IsolateMesh (meshInstanceId);
this.callbacks.updateMeshesVisibility (); this.callbacks.onMeshVisibilityChanged ();
} }
GetSelectedMeshId () GetSelectedMeshId ()
@ -252,13 +252,13 @@ export class Navigator
} }
} }
this.callbacks.updateMeshesSelection (); this.callbacks.onMeshSelectionChanged ();
} }
OnSelectionChanged () OnSelectionChanged ()
{ {
if (this.selection === null) { if (this.selection === null) {
this.callbacks.onModelSelected (); this.callbacks.onSelectionCleared ();
} else { } else {
if (this.selection.type === SelectionType.Material) { if (this.selection.type === SelectionType.Material) {
this.callbacks.onMaterialSelected (this.selection.materialIndex); this.callbacks.onMaterialSelected (this.selection.materialIndex);

2
source/website/panelset.js
View File

@ -120,7 +120,7 @@ export class PanelSet
} }
this.callbacks.onShowHidePanels (this.panelsVisible); this.callbacks.onShowHidePanels (this.panelsVisible);
this.callbacks.onResize (); this.callbacks.onResizeRequested ();
} }
ShowPanel (panel) ShowPanel (panel)

36
source/website/sidebar.js
View File

@ -35,9 +35,9 @@ export class Sidebar
this.callbacks = callbacks; this.callbacks = callbacks;
this.panelSet.Init ({ this.panelSet.Init ({
onResize : () => { onResizeRequested : () => {
ShowDomElement (this.splitterDiv, this.panelSet.IsPanelsVisible ()); ShowDomElement (this.splitterDiv, this.panelSet.IsPanelsVisible ());
this.callbacks.onResize (); this.callbacks.onResizeRequested ();
}, },
onShowHidePanels : (show) => { onShowHidePanels : (show) => {
this.callbacks.onShowHidePanels (show); this.callbacks.onShowHidePanels (show);
@ -45,31 +45,37 @@ export class Sidebar
}); });
this.settingsPanel.Init ({ this.settingsPanel.Init ({
onEnvironmentMapChange : () => { getShadingType : () => {
this.callbacks.onEnvironmentMapChange (); return this.callbacks.getShadingType ();
}, },
onBackgroundColorChange : () => { hasDefaultMaterial : () => {
this.callbacks.onBackgroundColorChange (); return this.callbacks.hasDefaultMaterial ();
}, },
onDefaultColorChange : () => { onEnvironmentMapChanged : () => {
this.callbacks.onDefaultColorChange (); this.callbacks.onEnvironmentMapChanged ();
}, },
onEdgeDisplayChange : () => { onBackgroundColorChanged : () => {
this.callbacks.onEdgeDisplayChange (); this.callbacks.onBackgroundColorChanged ();
}, },
onThemeChange : () => { onDefaultColorChanged : () => {
this.callbacks.onThemeChange (); this.callbacks.onDefaultColorChanged ();
},
onEdgeDisplayChanged : () => {
this.callbacks.onEdgeDisplayChanged ();
},
onThemeChanged : () => {
this.callbacks.onThemeChanged ();
} }
}); });
InstallVerticalSplitter (this.splitterDiv, this.mainDiv, true, () => { InstallVerticalSplitter (this.splitterDiv, this.mainDiv, true, () => {
this.callbacks.onResize (); this.callbacks.onResizeRequested ();
}); });
} }
UpdateSettings (isPhysicallyBased, hasDefaultMaterial) Update ()
{ {
this.settingsPanel.UpdateSettings (isPhysicallyBased, hasDefaultMaterial); this.settingsPanel.Update ();
} }
Resize (height) Resize (height)

214
source/website/sidebarsettingspanel.js
View File

@ -113,14 +113,14 @@ class EnvironmentMapPopup extends PopupDialog
settings.backgroundIsEnvMap = true; settings.backgroundIsEnvMap = true;
settings.environmentMapName = envMapImage.name; settings.environmentMapName = envMapImage.name;
} }
callbacks.onEnvironmentMapChange (); callbacks.onEnvironmentMapChanged ();
}); });
} }
} else if (shadingType === ShadingType.Physical) { } else if (shadingType === ShadingType.Physical) {
let checkboxDiv = AddDiv (contentDiv, 'ov_environment_map_checkbox'); let checkboxDiv = AddDiv (contentDiv, 'ov_environment_map_checkbox');
let backgroundIsEnvMapCheckbox = AddCheckbox (checkboxDiv, 'use_as_background', 'Use as background image', settings.backgroundIsEnvMap, () => { let backgroundIsEnvMapCheckbox = AddCheckbox (checkboxDiv, 'use_as_background', 'Use as background image', settings.backgroundIsEnvMap, () => {
settings.backgroundIsEnvMap = backgroundIsEnvMapCheckbox.checked; settings.backgroundIsEnvMap = backgroundIsEnvMapCheckbox.checked;
callbacks.onEnvironmentMapChange (); callbacks.onEnvironmentMapChanged ();
}); });
for (let envMapImage of envMapImages) { for (let envMapImage of envMapImages) {
@ -135,7 +135,7 @@ class EnvironmentMapPopup extends PopupDialog
} }
envMapImage.element.classList.add ('selected'); envMapImage.element.classList.add ('selected');
settings.environmentMapName = envMapImage.name; settings.environmentMapName = envMapImage.name;
callbacks.onEnvironmentMapChange (); callbacks.onEnvironmentMapChanged ();
}); });
} }
} }
@ -147,19 +147,21 @@ class EnvironmentMapPopup extends PopupDialog
class SettingsSection class SettingsSection
{ {
constructor (parentDiv, title) constructor (parentDiv, title, settings)
{ {
this.parentDiv = parentDiv; this.parentDiv = parentDiv;
this.contentDiv = AddDiv (this.parentDiv, 'ov_sidebar_settings_section'); this.contentDiv = AddDiv (this.parentDiv, 'ov_sidebar_settings_section');
AddDiv (this.contentDiv, 'ov_sidebar_title', title); AddDiv (this.contentDiv, 'ov_sidebar_title', title);
this.settings = settings;
this.callbacks = null;
} }
Init (settings, callbacks) Init (callbacks)
{ {
this.callbacks = callbacks;
} }
Update (settings) Update ()
{ {
} }
@ -172,9 +174,9 @@ class SettingsSection
class SettingsModelDisplaySection extends SettingsSection class SettingsModelDisplaySection extends SettingsSection
{ {
constructor (parentDiv) constructor (parentDiv, settings)
{ {
super (parentDiv, 'Model Display'); super (parentDiv, 'Model Display', settings);
this.backgroundColorPicker = null; this.backgroundColorPicker = null;
@ -193,16 +195,18 @@ class SettingsModelDisplaySection extends SettingsSection
this.edgeSettingsDiv = null; this.edgeSettingsDiv = null;
} }
Init (settings, callbacks) Init (callbacks)
{ {
super.Init (callbacks);
let backgroundColorDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter'); let backgroundColorDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter');
let backgroundColorInput = AddDiv (backgroundColorDiv, 'ov_color_picker'); let backgroundColorInput = AddDiv (backgroundColorDiv, 'ov_color_picker');
AddDiv (backgroundColorDiv, null, 'Background Color'); AddDiv (backgroundColorDiv, null, 'Background Color');
let predefinedBackgroundColors = ['#ffffffff', '#e3e3e3ff', '#c9c9c9ff', '#898989ff', '#5f5f5fff', '#494949ff', '#383838ff', '#0f0f0fff']; let predefinedBackgroundColors = ['#ffffffff', '#e3e3e3ff', '#c9c9c9ff', '#898989ff', '#5f5f5fff', '#494949ff', '#383838ff', '#0f0f0fff'];
let defaultBackgroundColor = '#' + RGBAColorToHexString (settings.backgroundColor); let defaultBackgroundColor = '#' + RGBAColorToHexString (this.settings.backgroundColor);
this.backgroundColorPicker = AddColorPicker (backgroundColorInput, true, defaultBackgroundColor, predefinedBackgroundColors, (r, g, b, a) => { this.backgroundColorPicker = AddColorPicker (backgroundColorInput, true, defaultBackgroundColor, predefinedBackgroundColors, (r, g, b, a) => {
settings.backgroundColor = new RGBAColor (r, g, b, a); this.settings.backgroundColor = new RGBAColor (r, g, b, a);
callbacks.onBackgroundColorChange (); this.callbacks.onBackgroundColorChanged ();
}); });
this.environmentMapPhongDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter'); this.environmentMapPhongDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter');
@ -210,10 +214,10 @@ class SettingsModelDisplaySection extends SettingsSection
AddDiv (this.environmentMapPhongDiv, null, 'Background Image'); AddDiv (this.environmentMapPhongDiv, null, 'Background Image');
this.environmentMapPhongInput.addEventListener ('click', () => { this.environmentMapPhongInput.addEventListener ('click', () => {
this.environmentMapPopup = new EnvironmentMapPopup (); this.environmentMapPopup = new EnvironmentMapPopup ();
this.environmentMapPopup.ShowPopup (this.environmentMapPhongInput, ShadingType.Phong, settings, { this.environmentMapPopup.ShowPopup (this.environmentMapPhongInput, ShadingType.Phong, this.settings, {
onEnvironmentMapChange : () => { onEnvironmentMapChanged : () => {
this.UpdateEnvironmentMap (settings); this.UpdateEnvironmentMap ();
callbacks.onEnvironmentMapChange (); this.callbacks.onEnvironmentMapChanged ();
} }
}); });
}); });
@ -223,15 +227,15 @@ class SettingsModelDisplaySection extends SettingsSection
AddDiv (this.environmentMapPbrDiv, null, 'Environment'); AddDiv (this.environmentMapPbrDiv, null, 'Environment');
this.environmentMapPbrInput.addEventListener ('click', () => { this.environmentMapPbrInput.addEventListener ('click', () => {
this.environmentMapPopup = new EnvironmentMapPopup (); this.environmentMapPopup = new EnvironmentMapPopup ();
this.environmentMapPopup.ShowPopup (this.environmentMapPbrInput, ShadingType.Physical, settings, { this.environmentMapPopup.ShowPopup (this.environmentMapPbrInput, ShadingType.Physical, this.settings, {
onEnvironmentMapChange : () => { onEnvironmentMapChanged : () => {
this.UpdateEnvironmentMap (settings); this.UpdateEnvironmentMap ();
callbacks.onEnvironmentMapChange (); this.callbacks.onEnvironmentMapChanged ();
} }
}); });
}); });
this.UpdateEnvironmentMap (settings); this.UpdateEnvironmentMap ();
let edgeParameterDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter'); let edgeParameterDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter');
this.edgeDisplayToggle = AddToggle (edgeParameterDiv, 'ov_sidebar_parameter_toggle'); this.edgeDisplayToggle = AddToggle (edgeParameterDiv, 'ov_sidebar_parameter_toggle');
@ -240,18 +244,18 @@ class SettingsModelDisplaySection extends SettingsSection
this.edgeSettingsDiv = AddDiv (this.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 ());
settings.showEdges = this.edgeDisplayToggle.GetStatus (); this.settings.showEdges = this.edgeDisplayToggle.GetStatus ();
callbacks.onShowEdgesChange (); this.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 edgeColorInput = AddDiv (edgeColorRow, 'ov_color_picker'); let edgeColorInput = AddDiv (edgeColorRow, 'ov_color_picker');
let defaultEdgeColor = '#' + RGBColorToHexString (settings.edgeColor); let defaultEdgeColor = '#' + RGBColorToHexString (this.settings.edgeColor);
this.edgeColorPicker = AddColorPicker (edgeColorInput, false, defaultEdgeColor, predefinedEdgeColors, (r, g, b, a) => { this.edgeColorPicker = AddColorPicker (edgeColorInput, false, defaultEdgeColor, predefinedEdgeColors, (r, g, b, a) => {
settings.edgeColor = new RGBColor (r, g, b); this.settings.edgeColor = new RGBColor (r, g, b);
callbacks.onEdgeColorChange (); this.callbacks.onEdgeColorChange ();
}); });
AddDiv (edgeColorRow, null, 'Edge Color'); AddDiv (edgeColorRow, null, 'Edge Color');
@ -263,27 +267,17 @@ class SettingsModelDisplaySection extends SettingsSection
this.thresholdSliderValue.innerHTML = this.thresholdSlider.value; this.thresholdSliderValue.innerHTML = this.thresholdSlider.value;
}); });
this. thresholdSlider.addEventListener ('change', () => { this. thresholdSlider.addEventListener ('change', () => {
settings.edgeThreshold = this.thresholdSlider.value; this.settings.edgeThreshold = this.thresholdSlider.value;
callbacks.onEdgeThresholdChange (); this.callbacks.onEdgeThresholdChange ();
}); });
this.thresholdSlider.value = settings.edgeThreshold; this.thresholdSlider.value = this.settings.edgeThreshold;
this.thresholdSliderValue.innerHTML = settings.edgeThreshold; this.thresholdSliderValue.innerHTML = this.settings.edgeThreshold;
this.edgeDisplayToggle.SetStatus (settings.showEdges); this.edgeDisplayToggle.SetStatus (this.settings.showEdges);
ShowDomElement (this.edgeSettingsDiv, settings.showEdges); ShowDomElement (this.edgeSettingsDiv, this.settings.showEdges);
} }
UpdateVisibility (isPhysicallyBased) UpdateEnvironmentMap ()
{
if (this.environmentMapPhongDiv !== null) {
ShowDomElement (this.environmentMapPhongDiv, !isPhysicallyBased);
}
if (this.environmentMapPbrDiv !== null) {
ShowDomElement (this.environmentMapPbrDiv, isPhysicallyBased);
}
}
UpdateEnvironmentMap (settings)
{ {
function UpdateImage (input, image) function UpdateImage (input, image)
{ {
@ -291,8 +285,8 @@ class SettingsModelDisplaySection extends SettingsSection
} }
if (this.environmentMapPhongDiv !== null) { if (this.environmentMapPhongDiv !== null) {
if (settings.backgroundIsEnvMap) { if (this.settings.backgroundIsEnvMap) {
UpdateImage (this.environmentMapPhongInput, settings.environmentMapName); UpdateImage (this.environmentMapPhongInput, this.settings.environmentMapName);
this.environmentMapPhongInput.classList.remove ('ov_environment_map_preview_no_color'); this.environmentMapPhongInput.classList.remove ('ov_environment_map_preview_no_color');
} else { } else {
this.environmentMapPhongInput.style.backgroundImage = null; this.environmentMapPhongInput.style.backgroundImage = null;
@ -300,27 +294,35 @@ class SettingsModelDisplaySection extends SettingsSection
} }
} }
if (this.environmentMapPbrDiv !== null) { if (this.environmentMapPbrDiv !== null) {
UpdateImage (this.environmentMapPbrInput, settings.environmentMapName); UpdateImage (this.environmentMapPbrInput, this.settings.environmentMapName);
} }
} }
Update (settings) Update ()
{ {
if (this.backgroundColorPicker !== null) { if (this.backgroundColorPicker !== null) {
this.backgroundColorPicker.setColor ('#' + RGBAColorToHexString (settings.backgroundColor)); this.backgroundColorPicker.setColor ('#' + RGBAColorToHexString (this.settings.backgroundColor));
} }
if (this.environmentMapPbrInput !== null || this.environmentMapPhongDiv !== null) { if (this.environmentMapPbrInput !== null || this.environmentMapPhongDiv !== null) {
this.UpdateEnvironmentMap (settings); this.UpdateEnvironmentMap ();
}
let isPhysicallyBased = (this.callbacks.getShadingType () === ShadingType.Physical);
if (this.environmentMapPhongDiv !== null) {
ShowDomElement (this.environmentMapPhongDiv, !isPhysicallyBased);
}
if (this.environmentMapPbrDiv !== null) {
ShowDomElement (this.environmentMapPbrDiv, isPhysicallyBased);
} }
if (this.edgeDisplayToggle !== null) { if (this.edgeDisplayToggle !== null) {
this.edgeDisplayToggle.SetStatus (settings.showEdges); this.edgeDisplayToggle.SetStatus (this.settings.showEdges);
ShowDomElement (this.edgeSettingsDiv, settings.showEdges); ShowDomElement (this.edgeSettingsDiv, this.settings.showEdges);
this.edgeColorPicker.setColor ('#' + RGBColorToHexString (settings.edgeColor)); this.edgeColorPicker.setColor ('#' + RGBColorToHexString (this.settings.edgeColor));
this.thresholdSlider.value = settings.edgeThreshold; this.thresholdSlider.value = this.settings.edgeThreshold;
this.thresholdSliderValue.innerHTML = settings.edgeThreshold; this.thresholdSliderValue.innerHTML = this.settings.edgeThreshold;
} }
} }
@ -343,35 +345,34 @@ class SettingsModelDisplaySection extends SettingsSection
class SettingsImportParametersSection extends SettingsSection class SettingsImportParametersSection extends SettingsSection
{ {
constructor (parentDiv) constructor (parentDiv, settings)
{ {
super (parentDiv, 'Import Settings'); super (parentDiv, 'Import Settings', settings);
this.defaultColorPicker = null; this.defaultColorPicker = null;
} }
Init (settings, callbacks) Init (callbacks)
{ {
super.Init (callbacks);
let defaultColorDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter'); let defaultColorDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter');
let defaultColorInput = AddDiv (defaultColorDiv, 'ov_color_picker'); let defaultColorInput = AddDiv (defaultColorDiv, 'ov_color_picker');
AddDiv (defaultColorDiv, null, 'Default Color'); AddDiv (defaultColorDiv, null, 'Default Color');
let predefinedDefaultColors = ['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8']; let predefinedDefaultColors = ['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8'];
let defaultColor = '#' + RGBColorToHexString (settings.defaultColor); let defaultColor = '#' + RGBColorToHexString (this.settings.defaultColor);
this.defaultColorPicker = AddColorPicker (defaultColorInput, false, defaultColor, predefinedDefaultColors, (r, g, b, a) => { this.defaultColorPicker = AddColorPicker (defaultColorInput, false, defaultColor, predefinedDefaultColors, (r, g, b, a) => {
settings.defaultColor = new RGBColor (r, g, b); this.settings.defaultColor = new RGBColor (r, g, b);
callbacks.onDefaultColorChange (); this.callbacks.onDefaultColorChanged ();
}); });
} }
Update (settings) Update ()
{ {
if (this.defaultColorPicker !== null) { if (this.defaultColorPicker !== null) {
this.defaultColorPicker.setColor ('#' + RGBColorToHexString (settings.defaultColor)); this.defaultColorPicker.setColor ('#' + RGBColorToHexString (this.settings.defaultColor));
} }
}
UpdateVisibility (hasDefaultMaterial)
{
if (this.contentDiv !== null) { if (this.contentDiv !== null) {
let hasDefaultMaterial = this.callbacks.hasDefaultMaterial ();
ShowDomElement (this.contentDiv, hasDefaultMaterial); ShowDomElement (this.contentDiv, hasDefaultMaterial);
} }
} }
@ -386,31 +387,33 @@ class SettingsImportParametersSection extends SettingsSection
class SettingsAppearanceSection extends SettingsSection class SettingsAppearanceSection extends SettingsSection
{ {
constructor (parentDiv) constructor (parentDiv, settings)
{ {
super (parentDiv, 'Appearance'); super (parentDiv, 'Appearance', settings);
this.darkModeToggle = null; this.darkModeToggle = null;
} }
Init (settings, callbacks) Init (callbacks)
{ {
super.Init (callbacks);
let darkModeParameterDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter'); let darkModeParameterDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter');
this.darkModeToggle = AddToggle (darkModeParameterDiv, 'ov_sidebar_parameter_toggle'); this.darkModeToggle = AddToggle (darkModeParameterDiv, 'ov_sidebar_parameter_toggle');
this.darkModeToggle.OnChange (() => { this.darkModeToggle.OnChange (() => {
settings.themeId = (this.darkModeToggle.GetStatus () ? Theme.Dark : Theme.Light); this.settings.themeId = (this.darkModeToggle.GetStatus () ? Theme.Dark : Theme.Light);
callbacks.onThemeChange (); this.callbacks.onThemeChanged ();
}); });
AddDiv (darkModeParameterDiv, null, 'Dark Mode'); AddDiv (darkModeParameterDiv, null, 'Dark Mode');
let isDarkMode = (settings.themeId === Theme.Dark); let isDarkMode = (this.settings.themeId === Theme.Dark);
this.darkModeToggle.SetStatus (isDarkMode); this.darkModeToggle.SetStatus (isDarkMode);
} }
Update (settings) Update ()
{ {
if (this.darkModeToggle !== null) { if (this.darkModeToggle !== null) {
let isDarkMode = (settings.themeId === Theme.Dark); let isDarkMode = (this.settings.themeId === Theme.Dark);
this.darkModeToggle.SetStatus (isDarkMode); this.darkModeToggle.SetStatus (isDarkMode);
} }
} }
@ -424,9 +427,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.modelDisplaySection = new SettingsModelDisplaySection (this.sectionsDiv); this.modelDisplaySection = new SettingsModelDisplaySection (this.sectionsDiv, this.settings);
this.importParametersSection = new SettingsImportParametersSection (this.sectionsDiv); this.importParametersSection = new SettingsImportParametersSection (this.sectionsDiv, this.settings);
this.appearanceSection = new SettingsAppearanceSection (this.sectionsDiv); this.appearanceSection = new SettingsAppearanceSection (this.sectionsDiv, this.settings);
this.resetToDefaultsButton = AddDiv (this.contentDiv, 'ov_button ov_panel_button outline', 'Reset to Default'); this.resetToDefaultsButton = AddDiv (this.contentDiv, 'ov_button ov_panel_button outline', 'Reset to Default');
this.resetToDefaultsButton.addEventListener ('click', () => { this.resetToDefaultsButton.addEventListener ('click', () => {
@ -459,30 +462,37 @@ export class SidebarSettingsPanel extends SidebarPanel
Init (callbacks) Init (callbacks)
{ {
super.Init (callbacks); super.Init (callbacks);
this.modelDisplaySection.Init (this.settings, {
onEnvironmentMapChange : () => { this.modelDisplaySection.Init ({
callbacks.onEnvironmentMapChange (); getShadingType : () => {
return this.callbacks.getShadingType ();
}, },
onBackgroundColorChange : () => { onEnvironmentMapChanged : () => {
callbacks.onBackgroundColorChange (); this.callbacks.onEnvironmentMapChanged ();
},
onBackgroundColorChanged : () => {
this.callbacks.onBackgroundColorChanged ();
}, },
onShowEdgesChange : () => { onShowEdgesChange : () => {
callbacks.onEdgeDisplayChange (); this.callbacks.onEdgeDisplayChanged ();
}, },
onEdgeColorChange : () => { onEdgeColorChange : () => {
callbacks.onEdgeDisplayChange (); this.callbacks.onEdgeDisplayChanged ();
}, },
onEdgeThresholdChange : () => { onEdgeThresholdChange : () => {
callbacks.onEdgeDisplayChange (); this.callbacks.onEdgeDisplayChanged ();
} }
}); });
this.importParametersSection.Init (this.settings, { this.importParametersSection.Init ({
onDefaultColorChange : () => { hasDefaultMaterial : () => {
callbacks.onDefaultColorChange (); return this.callbacks.hasDefaultMaterial ();
},
onDefaultColorChanged : () => {
this.callbacks.onDefaultColorChanged ();
} }
}); });
this.appearanceSection.Init (this.settings, { this.appearanceSection.Init ({
onThemeChange : () => { onThemeChanged : () => {
if (this.settings.themeId === Theme.Light) { if (this.settings.themeId === Theme.Light) {
this.settings.backgroundColor = new RGBAColor (255, 255, 255, 255); this.settings.backgroundColor = new RGBAColor (255, 255, 255, 255);
this.settings.defaultColor = new RGBColor (200, 200, 200); this.settings.defaultColor = new RGBColor (200, 200, 200);
@ -490,17 +500,17 @@ export class SidebarSettingsPanel extends SidebarPanel
this.settings.backgroundColor = new RGBAColor (42, 43, 46, 255); this.settings.backgroundColor = new RGBAColor (42, 43, 46, 255);
this.settings.defaultColor = new RGBColor (200, 200, 200); this.settings.defaultColor = new RGBColor (200, 200, 200);
} }
this.modelDisplaySection.Update (this.settings); this.modelDisplaySection.Update ();
this.importParametersSection.Update (this.settings); this.importParametersSection.Update ();
callbacks.onThemeChange (); callbacks.onThemeChanged ();
} }
}); });
} }
UpdateSettings (isPhysicallyBased, hasDefaultMaterial) Update ()
{ {
this.modelDisplaySection.UpdateVisibility (isPhysicallyBased); this.modelDisplaySection.Update ();
this.importParametersSection.UpdateVisibility (hasDefaultMaterial); this.importParametersSection.Update ();
this.Resize (); this.Resize ();
} }
@ -517,12 +527,12 @@ 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.modelDisplaySection.Update (this.settings); this.modelDisplaySection.Update ();
this.importParametersSection.Update (this.settings); this.importParametersSection.Update ();
this.appearanceSection.Update (this.settings); this.appearanceSection.Update ();
this.callbacks.onEnvironmentMapChange (); this.callbacks.onEnvironmentMapChanged ();
this.callbacks.onThemeChange (); this.callbacks.onThemeChanged ();
} }
Resize () Resize ()

45
source/website/website.js
View File

@ -20,7 +20,6 @@ import { ShowSharingDialog } from './sharingdialog.js';
import { HasDefaultMaterial, ReplaceDefaultMaterialColor } from '../engine/model/modelutils.js'; import { HasDefaultMaterial, ReplaceDefaultMaterialColor } from '../engine/model/modelutils.js';
import { Direction } from '../engine/geometry/geometry.js'; import { Direction } from '../engine/geometry/geometry.js';
import { CookieGetBoolVal, CookieSetBoolVal } from './cookiehandler.js'; import { CookieGetBoolVal, CookieSetBoolVal } from './cookiehandler.js';
import { ShadingType } from '../engine/threejs/threeutils.js';
import { MeasureTool } from './measuretool.js'; import { MeasureTool } from './measuretool.js';
import { CloseAllDialogs } from './dialog.js'; import { CloseAllDialogs } from './dialog.js';
@ -180,7 +179,7 @@ export class Website
this.viewer.SetMainObject (threeObject); this.viewer.SetMainObject (threeObject);
this.viewer.SetUpVector (Direction.Y, false); this.viewer.SetUpVector (Direction.Y, false);
this.navigator.FillTree (importResult); this.navigator.FillTree (importResult);
this.UpdateSidebar (); this.sidebar.Update ();
this.FitModelToWindow (true); this.FitModelToWindow (true);
} }
@ -331,14 +330,6 @@ export class Website
this.viewer.FitSphereToWindow (boundingSphere, true); this.viewer.FitSphereToWindow (boundingSphere, true);
} }
UpdateSidebar ()
{
let shadingType = this.viewer.GetShadingType ();
let isPhysicallyBased = (shadingType === ShadingType.Physical);
let hasDefaultMaterial = HasDefaultMaterial (this.model);
this.sidebar.UpdateSettings (isPhysicallyBased, hasDefaultMaterial);
}
UpdateMeshesVisibility () UpdateMeshesVisibility ()
{ {
this.viewer.SetMeshesVisibility ((meshUserData) => { this.viewer.SetMeshesVisibility ((meshUserData) => {
@ -628,21 +619,27 @@ export class Website
InitSidebar () InitSidebar ()
{ {
this.sidebar.Init ({ this.sidebar.Init ({
onEnvironmentMapChange : () => { getShadingType : () => {
return this.viewer.GetShadingType ();
},
hasDefaultMaterial : () => {
return HasDefaultMaterial (this.model);
},
onEnvironmentMapChanged : () => {
this.settings.SaveToCookies (); this.settings.SaveToCookies ();
this.UpdateEnvironmentMap (); this.UpdateEnvironmentMap ();
if (this.measureTool.IsActive ()) { if (this.measureTool.IsActive ()) {
this.measureTool.UpdatePanel (); this.measureTool.UpdatePanel ();
} }
}, },
onBackgroundColorChange : () => { onBackgroundColorChanged : () => {
this.settings.SaveToCookies (); this.settings.SaveToCookies ();
this.viewer.SetBackgroundColor (this.settings.backgroundColor); this.viewer.SetBackgroundColor (this.settings.backgroundColor);
if (this.measureTool.IsActive ()) { if (this.measureTool.IsActive ()) {
this.measureTool.UpdatePanel (); this.measureTool.UpdatePanel ();
} }
}, },
onDefaultColorChange : () => { onDefaultColorChanged : () => {
this.settings.SaveToCookies (); this.settings.SaveToCookies ();
let modelLoader = this.modelLoaderUI.GetModelLoader (); let modelLoader = this.modelLoaderUI.GetModelLoader ();
if (modelLoader.GetDefaultMaterial () !== null) { if (modelLoader.GetDefaultMaterial () !== null) {
@ -651,15 +648,15 @@ export class Website
} }
this.viewer.Render (); this.viewer.Render ();
}, },
onEdgeDisplayChange : () => { onEdgeDisplayChanged : () => {
HandleEvent ('edge_display_changed', this.settings.showEdges ? 'on' : 'off'); HandleEvent ('edge_display_changed', this.settings.showEdges ? 'on' : 'off');
this.UpdateEdgeDisplay (); this.UpdateEdgeDisplay ();
}, },
onThemeChange : () => { onThemeChanged : () => {
HandleEvent ('theme_changed', this.settings.themeId === Theme.Light ? 'light' : 'dark'); HandleEvent ('theme_changed', this.settings.themeId === Theme.Light ? 'light' : 'dark');
this.SwitchTheme (this.settings.themeId, true); this.SwitchTheme (this.settings.themeId, true);
}, },
onResize : () => { onResizeRequested : () => {
this.Resize (); this.Resize ();
}, },
onShowHidePanels : (show) => { onShowHidePanels : (show) => {
@ -730,12 +727,6 @@ export class Website
openFileBrowserDialog : () => { openFileBrowserDialog : () => {
this.OpenFileBrowserDialog (); this.OpenFileBrowserDialog ();
}, },
updateMeshesVisibility : () => {
this.UpdateMeshesVisibility ();
},
updateMeshesSelection : () => {
this.UpdateMeshesSelection ();
},
fitMeshToWindow : (meshInstanceId) => { fitMeshToWindow : (meshInstanceId) => {
this.FitMeshToWindow (meshInstanceId); this.FitMeshToWindow (meshInstanceId);
}, },
@ -748,7 +739,13 @@ export class Website
getMaterialsForMesh : (meshInstanceId) => { getMaterialsForMesh : (meshInstanceId) => {
return GetMaterialsForMesh (this.viewer, this.model, meshInstanceId); return GetMaterialsForMesh (this.viewer, this.model, meshInstanceId);
}, },
onModelSelected : () => { onMeshVisibilityChanged : () => {
this.UpdateMeshesVisibility ();
},
onMeshSelectionChanged : () => {
this.UpdateMeshesSelection ();
},
onSelectionCleared : () => {
this.sidebar.AddObject3DProperties (this.model); this.sidebar.AddObject3DProperties (this.model);
}, },
onMeshSelected : (meshInstanceId) => { onMeshSelected : (meshInstanceId) => {
@ -758,7 +755,7 @@ export class Website
onMaterialSelected : (materialIndex) => { onMaterialSelected : (materialIndex) => {
this.sidebar.AddMaterialProperties (this.model.GetMaterial (materialIndex)); this.sidebar.AddMaterialProperties (this.model.GetMaterial (materialIndex));
}, },
onResize : () => { onResizeRequested : () => {
this.Resize (); this.Resize ();
}, },
onShowHidePanels : (show) => { onShowHidePanels : (show) => {