From 8da7f15a54734a53d790d057005fef5b18675c1e Mon Sep 17 00:00:00 2001 From: kovacsv Date: Tue, 11 Oct 2022 18:47:59 +0200 Subject: [PATCH] Restructure navigator and sidebar callbacks. --- source/website/navigator.js | 20 +-- source/website/panelset.js | 2 +- source/website/sidebar.js | 36 +++-- source/website/sidebarsettingspanel.js | 214 +++++++++++++------------ source/website/website.js | 45 +++--- 5 files changed, 165 insertions(+), 152 deletions(-) diff --git a/source/website/navigator.js b/source/website/navigator.js index 4df09e5..092a02e 100644 --- a/source/website/navigator.js +++ b/source/website/navigator.js @@ -70,9 +70,9 @@ export class Navigator this.callbacks = callbacks; this.panelSet.Init ({ - onResize : () => { + onResizeRequested : () => { ShowDomElement (this.splitterDiv, this.panelSet.IsPanelsVisible ()); - this.callbacks.onResize (); + this.callbacks.onResizeRequested (); }, onShowHidePanels : (show) => { this.callbacks.onShowHidePanels (show); @@ -91,7 +91,7 @@ export class Navigator }, onMeshTemporarySelected : (meshInstanceId) => { this.tempSelectedMeshId = meshInstanceId; - this.callbacks.updateMeshesSelection (); + this.callbacks.onMeshSelectionChanged (); }, onMeshSelected : (meshInstanceId) => { this.SetSelection (new Selection (SelectionType.Mesh, meshInstanceId)); @@ -123,7 +123,7 @@ export class Navigator }); InstallVerticalSplitter (this.splitterDiv, this.mainDiv, false, () => { - this.callbacks.onResize (); + this.callbacks.onResizeRequested (); }); } @@ -175,19 +175,19 @@ export class Navigator ShowAllMeshes (show) { this.meshesPanel.ShowAllMeshes (show); - this.callbacks.updateMeshesVisibility (); + this.callbacks.onMeshVisibilityChanged (); } ToggleNodeVisibility (nodeId) { this.meshesPanel.ToggleNodeVisibility (nodeId); - this.callbacks.updateMeshesVisibility (); + this.callbacks.onMeshVisibilityChanged (); } ToggleMeshVisibility (meshInstanceId) { this.meshesPanel.ToggleMeshVisibility (meshInstanceId); - this.callbacks.updateMeshesVisibility (); + this.callbacks.onMeshVisibilityChanged (); } IsMeshIsolated (meshInstanceId) @@ -198,7 +198,7 @@ export class Navigator IsolateMesh (meshInstanceId) { this.meshesPanel.IsolateMesh (meshInstanceId); - this.callbacks.updateMeshesVisibility (); + this.callbacks.onMeshVisibilityChanged (); } GetSelectedMeshId () @@ -252,13 +252,13 @@ export class Navigator } } - this.callbacks.updateMeshesSelection (); + this.callbacks.onMeshSelectionChanged (); } OnSelectionChanged () { if (this.selection === null) { - this.callbacks.onModelSelected (); + this.callbacks.onSelectionCleared (); } else { if (this.selection.type === SelectionType.Material) { this.callbacks.onMaterialSelected (this.selection.materialIndex); diff --git a/source/website/panelset.js b/source/website/panelset.js index 60c2efa..c9c9519 100644 --- a/source/website/panelset.js +++ b/source/website/panelset.js @@ -120,7 +120,7 @@ export class PanelSet } this.callbacks.onShowHidePanels (this.panelsVisible); - this.callbacks.onResize (); + this.callbacks.onResizeRequested (); } ShowPanel (panel) diff --git a/source/website/sidebar.js b/source/website/sidebar.js index 6582285..fac3e33 100644 --- a/source/website/sidebar.js +++ b/source/website/sidebar.js @@ -35,9 +35,9 @@ export class Sidebar this.callbacks = callbacks; this.panelSet.Init ({ - onResize : () => { + onResizeRequested : () => { ShowDomElement (this.splitterDiv, this.panelSet.IsPanelsVisible ()); - this.callbacks.onResize (); + this.callbacks.onResizeRequested (); }, onShowHidePanels : (show) => { this.callbacks.onShowHidePanels (show); @@ -45,31 +45,37 @@ export class Sidebar }); this.settingsPanel.Init ({ - onEnvironmentMapChange : () => { - this.callbacks.onEnvironmentMapChange (); + getShadingType : () => { + return this.callbacks.getShadingType (); }, - onBackgroundColorChange : () => { - this.callbacks.onBackgroundColorChange (); + hasDefaultMaterial : () => { + return this.callbacks.hasDefaultMaterial (); }, - onDefaultColorChange : () => { - this.callbacks.onDefaultColorChange (); + onEnvironmentMapChanged : () => { + this.callbacks.onEnvironmentMapChanged (); }, - onEdgeDisplayChange : () => { - this.callbacks.onEdgeDisplayChange (); + onBackgroundColorChanged : () => { + this.callbacks.onBackgroundColorChanged (); }, - onThemeChange : () => { - this.callbacks.onThemeChange (); + onDefaultColorChanged : () => { + this.callbacks.onDefaultColorChanged (); + }, + onEdgeDisplayChanged : () => { + this.callbacks.onEdgeDisplayChanged (); + }, + onThemeChanged : () => { + this.callbacks.onThemeChanged (); } }); 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) diff --git a/source/website/sidebarsettingspanel.js b/source/website/sidebarsettingspanel.js index 7a84fb9..1eb7904 100644 --- a/source/website/sidebarsettingspanel.js +++ b/source/website/sidebarsettingspanel.js @@ -113,14 +113,14 @@ class EnvironmentMapPopup extends PopupDialog settings.backgroundIsEnvMap = true; settings.environmentMapName = envMapImage.name; } - callbacks.onEnvironmentMapChange (); + callbacks.onEnvironmentMapChanged (); }); } } else if (shadingType === ShadingType.Physical) { let checkboxDiv = AddDiv (contentDiv, 'ov_environment_map_checkbox'); let backgroundIsEnvMapCheckbox = AddCheckbox (checkboxDiv, 'use_as_background', 'Use as background image', settings.backgroundIsEnvMap, () => { settings.backgroundIsEnvMap = backgroundIsEnvMapCheckbox.checked; - callbacks.onEnvironmentMapChange (); + callbacks.onEnvironmentMapChanged (); }); for (let envMapImage of envMapImages) { @@ -135,7 +135,7 @@ class EnvironmentMapPopup extends PopupDialog } envMapImage.element.classList.add ('selected'); settings.environmentMapName = envMapImage.name; - callbacks.onEnvironmentMapChange (); + callbacks.onEnvironmentMapChanged (); }); } } @@ -147,19 +147,21 @@ class EnvironmentMapPopup extends PopupDialog class SettingsSection { - constructor (parentDiv, title) + constructor (parentDiv, title, settings) { this.parentDiv = parentDiv; this.contentDiv = AddDiv (this.parentDiv, 'ov_sidebar_settings_section'); 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 { - constructor (parentDiv) + constructor (parentDiv, settings) { - super (parentDiv, 'Model Display'); + super (parentDiv, 'Model Display', settings); this.backgroundColorPicker = null; @@ -193,16 +195,18 @@ class SettingsModelDisplaySection extends SettingsSection this.edgeSettingsDiv = null; } - Init (settings, callbacks) + Init (callbacks) { + super.Init (callbacks); + let backgroundColorDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter'); let backgroundColorInput = AddDiv (backgroundColorDiv, 'ov_color_picker'); AddDiv (backgroundColorDiv, null, 'Background Color'); 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) => { - settings.backgroundColor = new RGBAColor (r, g, b, a); - callbacks.onBackgroundColorChange (); + this.settings.backgroundColor = new RGBAColor (r, g, b, a); + this.callbacks.onBackgroundColorChanged (); }); this.environmentMapPhongDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter'); @@ -210,10 +214,10 @@ class SettingsModelDisplaySection extends SettingsSection AddDiv (this.environmentMapPhongDiv, null, 'Background Image'); this.environmentMapPhongInput.addEventListener ('click', () => { this.environmentMapPopup = new EnvironmentMapPopup (); - this.environmentMapPopup.ShowPopup (this.environmentMapPhongInput, ShadingType.Phong, settings, { - onEnvironmentMapChange : () => { - this.UpdateEnvironmentMap (settings); - callbacks.onEnvironmentMapChange (); + this.environmentMapPopup.ShowPopup (this.environmentMapPhongInput, ShadingType.Phong, this.settings, { + onEnvironmentMapChanged : () => { + this.UpdateEnvironmentMap (); + this.callbacks.onEnvironmentMapChanged (); } }); }); @@ -223,15 +227,15 @@ class SettingsModelDisplaySection extends SettingsSection AddDiv (this.environmentMapPbrDiv, null, 'Environment'); this.environmentMapPbrInput.addEventListener ('click', () => { this.environmentMapPopup = new EnvironmentMapPopup (); - this.environmentMapPopup.ShowPopup (this.environmentMapPbrInput, ShadingType.Physical, settings, { - onEnvironmentMapChange : () => { - this.UpdateEnvironmentMap (settings); - callbacks.onEnvironmentMapChange (); + this.environmentMapPopup.ShowPopup (this.environmentMapPbrInput, ShadingType.Physical, this.settings, { + onEnvironmentMapChanged : () => { + this.UpdateEnvironmentMap (); + this.callbacks.onEnvironmentMapChanged (); } }); }); - this.UpdateEnvironmentMap (settings); + this.UpdateEnvironmentMap (); let edgeParameterDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter'); 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.edgeDisplayToggle.OnChange (() => { ShowDomElement (this.edgeSettingsDiv, this.edgeDisplayToggle.GetStatus ()); - settings.showEdges = this.edgeDisplayToggle.GetStatus (); - callbacks.onShowEdgesChange (); + this.settings.showEdges = this.edgeDisplayToggle.GetStatus (); + this.callbacks.onShowEdgesChange (); }); let edgeColorRow = AddDiv (this.edgeSettingsDiv, 'ov_sidebar_settings_row'); let predefinedEdgeColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f']; 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) => { - settings.edgeColor = new RGBColor (r, g, b); - callbacks.onEdgeColorChange (); + this.settings.edgeColor = new RGBColor (r, g, b); + this.callbacks.onEdgeColorChange (); }); AddDiv (edgeColorRow, null, 'Edge Color'); @@ -263,27 +267,17 @@ class SettingsModelDisplaySection extends SettingsSection this.thresholdSliderValue.innerHTML = this.thresholdSlider.value; }); this. thresholdSlider.addEventListener ('change', () => { - settings.edgeThreshold = this.thresholdSlider.value; - callbacks.onEdgeThresholdChange (); + this.settings.edgeThreshold = this.thresholdSlider.value; + this.callbacks.onEdgeThresholdChange (); }); - this.thresholdSlider.value = settings.edgeThreshold; - this.thresholdSliderValue.innerHTML = settings.edgeThreshold; + this.thresholdSlider.value = this.settings.edgeThreshold; + this.thresholdSliderValue.innerHTML = this.settings.edgeThreshold; - this.edgeDisplayToggle.SetStatus (settings.showEdges); - ShowDomElement (this.edgeSettingsDiv, settings.showEdges); + this.edgeDisplayToggle.SetStatus (this.settings.showEdges); + ShowDomElement (this.edgeSettingsDiv, this.settings.showEdges); } - UpdateVisibility (isPhysicallyBased) - { - if (this.environmentMapPhongDiv !== null) { - ShowDomElement (this.environmentMapPhongDiv, !isPhysicallyBased); - } - if (this.environmentMapPbrDiv !== null) { - ShowDomElement (this.environmentMapPbrDiv, isPhysicallyBased); - } - } - - UpdateEnvironmentMap (settings) + UpdateEnvironmentMap () { function UpdateImage (input, image) { @@ -291,8 +285,8 @@ class SettingsModelDisplaySection extends SettingsSection } if (this.environmentMapPhongDiv !== null) { - if (settings.backgroundIsEnvMap) { - UpdateImage (this.environmentMapPhongInput, settings.environmentMapName); + if (this.settings.backgroundIsEnvMap) { + UpdateImage (this.environmentMapPhongInput, this.settings.environmentMapName); this.environmentMapPhongInput.classList.remove ('ov_environment_map_preview_no_color'); } else { this.environmentMapPhongInput.style.backgroundImage = null; @@ -300,27 +294,35 @@ class SettingsModelDisplaySection extends SettingsSection } } if (this.environmentMapPbrDiv !== null) { - UpdateImage (this.environmentMapPbrInput, settings.environmentMapName); + UpdateImage (this.environmentMapPbrInput, this.settings.environmentMapName); } } - Update (settings) + Update () { if (this.backgroundColorPicker !== null) { - this.backgroundColorPicker.setColor ('#' + RGBAColorToHexString (settings.backgroundColor)); + this.backgroundColorPicker.setColor ('#' + RGBAColorToHexString (this.settings.backgroundColor)); } 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) { - this.edgeDisplayToggle.SetStatus (settings.showEdges); - ShowDomElement (this.edgeSettingsDiv, settings.showEdges); + this.edgeDisplayToggle.SetStatus (this.settings.showEdges); + ShowDomElement (this.edgeSettingsDiv, this.settings.showEdges); - this.edgeColorPicker.setColor ('#' + RGBColorToHexString (settings.edgeColor)); - this.thresholdSlider.value = settings.edgeThreshold; - this.thresholdSliderValue.innerHTML = settings.edgeThreshold; + this.edgeColorPicker.setColor ('#' + RGBColorToHexString (this.settings.edgeColor)); + this.thresholdSlider.value = this.settings.edgeThreshold; + this.thresholdSliderValue.innerHTML = this.settings.edgeThreshold; } } @@ -343,35 +345,34 @@ class SettingsModelDisplaySection extends SettingsSection class SettingsImportParametersSection extends SettingsSection { - constructor (parentDiv) + constructor (parentDiv, settings) { - super (parentDiv, 'Import Settings'); + super (parentDiv, 'Import Settings', settings); this.defaultColorPicker = null; } - Init (settings, callbacks) + Init (callbacks) { + super.Init (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']; - let defaultColor = '#' + RGBColorToHexString (settings.defaultColor); + let defaultColor = '#' + RGBColorToHexString (this.settings.defaultColor); this.defaultColorPicker = AddColorPicker (defaultColorInput, false, defaultColor, predefinedDefaultColors, (r, g, b, a) => { - settings.defaultColor = new RGBColor (r, g, b); - callbacks.onDefaultColorChange (); + this.settings.defaultColor = new RGBColor (r, g, b); + this.callbacks.onDefaultColorChanged (); }); } - Update (settings) + Update () { if (this.defaultColorPicker !== null) { - this.defaultColorPicker.setColor ('#' + RGBColorToHexString (settings.defaultColor)); + this.defaultColorPicker.setColor ('#' + RGBColorToHexString (this.settings.defaultColor)); } - } - - UpdateVisibility (hasDefaultMaterial) - { if (this.contentDiv !== null) { + let hasDefaultMaterial = this.callbacks.hasDefaultMaterial (); ShowDomElement (this.contentDiv, hasDefaultMaterial); } } @@ -386,31 +387,33 @@ class SettingsImportParametersSection extends SettingsSection class SettingsAppearanceSection extends SettingsSection { - constructor (parentDiv) + constructor (parentDiv, settings) { - super (parentDiv, 'Appearance'); + super (parentDiv, 'Appearance', settings); this.darkModeToggle = null; } - Init (settings, callbacks) + Init (callbacks) { + super.Init (callbacks); + let darkModeParameterDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter'); this.darkModeToggle = AddToggle (darkModeParameterDiv, 'ov_sidebar_parameter_toggle'); this.darkModeToggle.OnChange (() => { - settings.themeId = (this.darkModeToggle.GetStatus () ? Theme.Dark : Theme.Light); - callbacks.onThemeChange (); + this.settings.themeId = (this.darkModeToggle.GetStatus () ? Theme.Dark : Theme.Light); + this.callbacks.onThemeChanged (); }); AddDiv (darkModeParameterDiv, null, 'Dark Mode'); - let isDarkMode = (settings.themeId === Theme.Dark); + let isDarkMode = (this.settings.themeId === Theme.Dark); this.darkModeToggle.SetStatus (isDarkMode); } - Update (settings) + Update () { if (this.darkModeToggle !== null) { - let isDarkMode = (settings.themeId === Theme.Dark); + let isDarkMode = (this.settings.themeId === Theme.Dark); this.darkModeToggle.SetStatus (isDarkMode); } } @@ -424,9 +427,9 @@ export class SidebarSettingsPanel extends SidebarPanel this.settings = settings; this.sectionsDiv = AddDiv (this.contentDiv, 'ov_sidebar_settings_sections ov_thin_scrollbar'); - this.modelDisplaySection = new SettingsModelDisplaySection (this.sectionsDiv); - this.importParametersSection = new SettingsImportParametersSection (this.sectionsDiv); - this.appearanceSection = new SettingsAppearanceSection (this.sectionsDiv); + this.modelDisplaySection = new SettingsModelDisplaySection (this.sectionsDiv, this.settings); + this.importParametersSection = new SettingsImportParametersSection (this.sectionsDiv, this.settings); + this.appearanceSection = new SettingsAppearanceSection (this.sectionsDiv, this.settings); this.resetToDefaultsButton = AddDiv (this.contentDiv, 'ov_button ov_panel_button outline', 'Reset to Default'); this.resetToDefaultsButton.addEventListener ('click', () => { @@ -459,30 +462,37 @@ export class SidebarSettingsPanel extends SidebarPanel Init (callbacks) { super.Init (callbacks); - this.modelDisplaySection.Init (this.settings, { - onEnvironmentMapChange : () => { - callbacks.onEnvironmentMapChange (); + + this.modelDisplaySection.Init ({ + getShadingType : () => { + return this.callbacks.getShadingType (); }, - onBackgroundColorChange : () => { - callbacks.onBackgroundColorChange (); + onEnvironmentMapChanged : () => { + this.callbacks.onEnvironmentMapChanged (); + }, + onBackgroundColorChanged : () => { + this.callbacks.onBackgroundColorChanged (); }, onShowEdgesChange : () => { - callbacks.onEdgeDisplayChange (); + this.callbacks.onEdgeDisplayChanged (); }, onEdgeColorChange : () => { - callbacks.onEdgeDisplayChange (); + this.callbacks.onEdgeDisplayChanged (); }, onEdgeThresholdChange : () => { - callbacks.onEdgeDisplayChange (); + this.callbacks.onEdgeDisplayChanged (); } }); - this.importParametersSection.Init (this.settings, { - onDefaultColorChange : () => { - callbacks.onDefaultColorChange (); + this.importParametersSection.Init ({ + hasDefaultMaterial : () => { + return this.callbacks.hasDefaultMaterial (); + }, + onDefaultColorChanged : () => { + this.callbacks.onDefaultColorChanged (); } }); - this.appearanceSection.Init (this.settings, { - onThemeChange : () => { + this.appearanceSection.Init ({ + onThemeChanged : () => { if (this.settings.themeId === Theme.Light) { this.settings.backgroundColor = new RGBAColor (255, 255, 255, 255); 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.defaultColor = new RGBColor (200, 200, 200); } - this.modelDisplaySection.Update (this.settings); - this.importParametersSection.Update (this.settings); - callbacks.onThemeChange (); + this.modelDisplaySection.Update (); + this.importParametersSection.Update (); + callbacks.onThemeChanged (); } }); } - UpdateSettings (isPhysicallyBased, hasDefaultMaterial) + Update () { - this.modelDisplaySection.UpdateVisibility (isPhysicallyBased); - this.importParametersSection.UpdateVisibility (hasDefaultMaterial); + this.modelDisplaySection.Update (); + this.importParametersSection.Update (); this.Resize (); } @@ -517,12 +527,12 @@ export class SidebarSettingsPanel extends SidebarPanel this.settings.edgeThreshold = defaultSettings.edgeThreshold; this.settings.themeId = defaultSettings.themeId; - this.modelDisplaySection.Update (this.settings); - this.importParametersSection.Update (this.settings); - this.appearanceSection.Update (this.settings); + this.modelDisplaySection.Update (); + this.importParametersSection.Update (); + this.appearanceSection.Update (); - this.callbacks.onEnvironmentMapChange (); - this.callbacks.onThemeChange (); + this.callbacks.onEnvironmentMapChanged (); + this.callbacks.onThemeChanged (); } Resize () diff --git a/source/website/website.js b/source/website/website.js index 78ed729..e8c5b2f 100644 --- a/source/website/website.js +++ b/source/website/website.js @@ -20,7 +20,6 @@ import { ShowSharingDialog } from './sharingdialog.js'; import { HasDefaultMaterial, ReplaceDefaultMaterialColor } from '../engine/model/modelutils.js'; import { Direction } from '../engine/geometry/geometry.js'; import { CookieGetBoolVal, CookieSetBoolVal } from './cookiehandler.js'; -import { ShadingType } from '../engine/threejs/threeutils.js'; import { MeasureTool } from './measuretool.js'; import { CloseAllDialogs } from './dialog.js'; @@ -180,7 +179,7 @@ export class Website this.viewer.SetMainObject (threeObject); this.viewer.SetUpVector (Direction.Y, false); this.navigator.FillTree (importResult); - this.UpdateSidebar (); + this.sidebar.Update (); this.FitModelToWindow (true); } @@ -331,14 +330,6 @@ export class Website 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 () { this.viewer.SetMeshesVisibility ((meshUserData) => { @@ -628,21 +619,27 @@ export class Website InitSidebar () { this.sidebar.Init ({ - onEnvironmentMapChange : () => { + getShadingType : () => { + return this.viewer.GetShadingType (); + }, + hasDefaultMaterial : () => { + return HasDefaultMaterial (this.model); + }, + onEnvironmentMapChanged : () => { this.settings.SaveToCookies (); this.UpdateEnvironmentMap (); if (this.measureTool.IsActive ()) { this.measureTool.UpdatePanel (); } }, - onBackgroundColorChange : () => { + onBackgroundColorChanged : () => { this.settings.SaveToCookies (); this.viewer.SetBackgroundColor (this.settings.backgroundColor); if (this.measureTool.IsActive ()) { this.measureTool.UpdatePanel (); } }, - onDefaultColorChange : () => { + onDefaultColorChanged : () => { this.settings.SaveToCookies (); let modelLoader = this.modelLoaderUI.GetModelLoader (); if (modelLoader.GetDefaultMaterial () !== null) { @@ -651,15 +648,15 @@ export class Website } this.viewer.Render (); }, - onEdgeDisplayChange : () => { + onEdgeDisplayChanged : () => { HandleEvent ('edge_display_changed', this.settings.showEdges ? 'on' : 'off'); this.UpdateEdgeDisplay (); }, - onThemeChange : () => { + onThemeChanged : () => { HandleEvent ('theme_changed', this.settings.themeId === Theme.Light ? 'light' : 'dark'); this.SwitchTheme (this.settings.themeId, true); }, - onResize : () => { + onResizeRequested : () => { this.Resize (); }, onShowHidePanels : (show) => { @@ -730,12 +727,6 @@ export class Website openFileBrowserDialog : () => { this.OpenFileBrowserDialog (); }, - updateMeshesVisibility : () => { - this.UpdateMeshesVisibility (); - }, - updateMeshesSelection : () => { - this.UpdateMeshesSelection (); - }, fitMeshToWindow : (meshInstanceId) => { this.FitMeshToWindow (meshInstanceId); }, @@ -748,7 +739,13 @@ export class Website getMaterialsForMesh : (meshInstanceId) => { return GetMaterialsForMesh (this.viewer, this.model, meshInstanceId); }, - onModelSelected : () => { + onMeshVisibilityChanged : () => { + this.UpdateMeshesVisibility (); + }, + onMeshSelectionChanged : () => { + this.UpdateMeshesSelection (); + }, + onSelectionCleared : () => { this.sidebar.AddObject3DProperties (this.model); }, onMeshSelected : (meshInstanceId) => { @@ -758,7 +755,7 @@ export class Website onMaterialSelected : (materialIndex) => { this.sidebar.AddMaterialProperties (this.model.GetMaterial (materialIndex)); }, - onResize : () => { + onResizeRequested : () => { this.Resize (); }, onShowHidePanels : (show) => {