From 76dd260801ef8caec38f435c340a79a6dadc65b4 Mon Sep 17 00:00:00 2001 From: kovacsv Date: Tue, 11 Oct 2022 20:07:41 +0200 Subject: [PATCH] Background settings is visible with orthographic camera, but it doesn't work #306 --- source/website/sidebar.js | 7 ++- source/website/sidebarsettingspanel.js | 68 ++++++++++++++++++++------ source/website/website.js | 6 ++- 3 files changed, 62 insertions(+), 19 deletions(-) diff --git a/source/website/sidebar.js b/source/website/sidebar.js index fac3e33..858b802 100644 --- a/source/website/sidebar.js +++ b/source/website/sidebar.js @@ -48,6 +48,9 @@ export class Sidebar getShadingType : () => { return this.callbacks.getShadingType (); }, + getCameraMode : () => { + return this.callbacks.getCameraMode (); + }, hasDefaultMaterial : () => { return this.callbacks.hasDefaultMaterial (); }, @@ -73,9 +76,9 @@ export class Sidebar }); } - Update () + UpdateControlsVisibility () { - this.settingsPanel.Update (); + this.settingsPanel.UpdateControlsVisibility (); } Resize (height) diff --git a/source/website/sidebarsettingspanel.js b/source/website/sidebarsettingspanel.js index 1eb7904..42e5604 100644 --- a/source/website/sidebarsettingspanel.js +++ b/source/website/sidebarsettingspanel.js @@ -6,6 +6,7 @@ import { PopupDialog } from './dialog.js'; import { Settings, Theme } from './settings.js'; import { SidebarPanel } from './sidebarpanel.js'; import { ShadingType } from '../engine/threejs/threeutils.js'; +import { CameraMode } from '../engine/viewer/viewer.js'; function AddColorPicker (parentDiv, opacity, defaultColor, predefinedColors, onChange) { @@ -117,11 +118,14 @@ class EnvironmentMapPopup extends PopupDialog }); } } 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.onEnvironmentMapChanged (); - }); + let isPerspective = (callbacks.getCameraMode () === CameraMode.Perspective); + if (isPerspective) { + 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.onEnvironmentMapChanged (); + }); + } for (let envMapImage of envMapImages) { envMapImage.element = AddDomElement (contentDiv, 'img', 'ov_environment_map_preview'); @@ -143,6 +147,11 @@ class EnvironmentMapPopup extends PopupDialog contentDiv.classList.add ('sidebar'); this.Open (); } + + Update () + { + + } } class SettingsSection @@ -166,6 +175,11 @@ class SettingsSection } + UpdateVisibility () + { + + } + Clear () { @@ -215,6 +229,9 @@ class SettingsModelDisplaySection extends SettingsSection this.environmentMapPhongInput.addEventListener ('click', () => { this.environmentMapPopup = new EnvironmentMapPopup (); this.environmentMapPopup.ShowPopup (this.environmentMapPhongInput, ShadingType.Phong, this.settings, { + getCameraMode : () => { + return this.callbacks.getCameraMode (); + }, onEnvironmentMapChanged : () => { this.UpdateEnvironmentMap (); this.callbacks.onEnvironmentMapChanged (); @@ -228,6 +245,9 @@ class SettingsModelDisplaySection extends SettingsSection this.environmentMapPbrInput.addEventListener ('click', () => { this.environmentMapPopup = new EnvironmentMapPopup (); this.environmentMapPopup.ShowPopup (this.environmentMapPbrInput, ShadingType.Physical, this.settings, { + getCameraMode : () => { + return this.callbacks.getCameraMode (); + }, onEnvironmentMapChanged : () => { this.UpdateEnvironmentMap (); this.callbacks.onEnvironmentMapChanged (); @@ -308,14 +328,6 @@ class SettingsModelDisplaySection extends SettingsSection 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 (this.settings.showEdges); ShowDomElement (this.edgeSettingsDiv, this.settings.showEdges); @@ -326,6 +338,18 @@ class SettingsModelDisplaySection extends SettingsSection } } + UpdateVisibility () + { + let isPhysicallyBased = (this.callbacks.getShadingType () === ShadingType.Physical); + if (this.environmentMapPhongDiv !== null) { + let isPerspective = (this.callbacks.getCameraMode () === CameraMode.Perspective); + ShowDomElement (this.environmentMapPhongDiv, !isPhysicallyBased && isPerspective); + } + if (this.environmentMapPbrDiv !== null) { + ShowDomElement (this.environmentMapPbrDiv, isPhysicallyBased); + } + } + Clear () { if (this.environmentMapPopup !== null) { @@ -371,6 +395,10 @@ class SettingsImportParametersSection extends SettingsSection if (this.defaultColorPicker !== null) { this.defaultColorPicker.setColor ('#' + RGBColorToHexString (this.settings.defaultColor)); } + } + + UpdateVisibility () + { if (this.contentDiv !== null) { let hasDefaultMaterial = this.callbacks.hasDefaultMaterial (); ShowDomElement (this.contentDiv, hasDefaultMaterial); @@ -417,6 +445,11 @@ class SettingsAppearanceSection extends SettingsSection this.darkModeToggle.SetStatus (isDarkMode); } } + + UpdateVisibility () + { + + } } export class SidebarSettingsPanel extends SidebarPanel @@ -467,6 +500,9 @@ export class SidebarSettingsPanel extends SidebarPanel getShadingType : () => { return this.callbacks.getShadingType (); }, + getCameraMode : () => { + return this.callbacks.getCameraMode (); + }, onEnvironmentMapChanged : () => { this.callbacks.onEnvironmentMapChanged (); }, @@ -507,10 +543,10 @@ export class SidebarSettingsPanel extends SidebarPanel }); } - Update () + UpdateControlsVisibility () { - this.modelDisplaySection.Update (); - this.importParametersSection.Update (); + this.modelDisplaySection.UpdateVisibility (); + this.importParametersSection.UpdateVisibility (); this.Resize (); } diff --git a/source/website/website.js b/source/website/website.js index e8c5b2f..c88b7bb 100644 --- a/source/website/website.js +++ b/source/website/website.js @@ -179,7 +179,7 @@ export class Website this.viewer.SetMainObject (threeObject); this.viewer.SetUpVector (Direction.Y, false); this.navigator.FillTree (importResult); - this.sidebar.Update (); + this.sidebar.UpdateControlsVisibility (); this.FitModelToWindow (true); } @@ -561,6 +561,7 @@ export class Website } else if (buttonIndex === 1) { this.viewer.SetCameraMode (CameraMode.Orthographic); } + this.sidebar.UpdateControlsVisibility (); }); AddSeparator (this.toolbar, ['only_full_width', 'only_on_model']); let measureToolButton = AddPushButton (this.toolbar, 'measure', 'Measure', ['only_full_width', 'only_on_model'], (isSelected) => { @@ -622,6 +623,9 @@ export class Website getShadingType : () => { return this.viewer.GetShadingType (); }, + getCameraMode : () => { + return this.viewer.GetCameraMode (); + }, hasDefaultMaterial : () => { return HasDefaultMaterial (this.model); },