diff --git a/source/external/threemodelloader.js b/source/external/threemodelloader.js index 34033d3..c487277 100644 --- a/source/external/threemodelloader.js +++ b/source/external/threemodelloader.js @@ -41,17 +41,6 @@ OV.ThreeModelLoader = class this.OnFilesLoaded (settings); }); } - - ReloadFiles (settings) - { - if (this.inProgress) { - return; - } - - this.inProgress = true; - this.callbacks.onLoadStart (); - this.OnFilesLoaded (settings); - } OnFilesLoaded (settings) { @@ -91,4 +80,11 @@ OV.ThreeModelLoader = class { return this.importer; } + + ReplaceDefaultMaterialColor (defaultColor) + { + if (this.defaultMaterial !== null) { + this.defaultMaterial.color = new THREE.Color (defaultColor.r / 255.0, defaultColor.g / 255.0, defaultColor.b / 255.0); + } + } }; diff --git a/source/viewer/viewer.js b/source/viewer/viewer.js index 6a72b02..b9aebc5 100644 --- a/source/viewer/viewer.js +++ b/source/viewer/viewer.js @@ -132,14 +132,6 @@ OV.ViewerGeometry = class } }; -OV.ViewerSettings = class -{ - constructor () - { - this.backgroundColor = new OV.Color (255, 255, 255); - } -}; - OV.Viewer = class { constructor () diff --git a/website/o3dv/settingssidebarpanel.js b/website/o3dv/settingssidebarpanel.js index 1c5f97e..4bf5580 100644 --- a/website/o3dv/settingssidebarpanel.js +++ b/website/o3dv/settingssidebarpanel.js @@ -3,6 +3,8 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel constructor (parentDiv) { super (parentDiv); + this.backgroundColorInput = null; + this.defaultColorInput = null; } GetTitle () @@ -10,23 +12,37 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel return 'Settings'; } - InitSettings (settings) + InitSettings (settings, defaultSettings, callbacks) { - this.AddColorParameters (settings.backgroundColor, 'Background Color', 'Changing the background color affects only the visualization.'); - this.AddColorParameters (settings.defaultColor, 'Default Color', 'Default color is used when no material was defined in the file.'); + this.backgroundColorInput = this.AddColorParameters ('Background Color', 'Changing the background color affects only the visualization.', settings.backgroundColor, callbacks.onBackgroundColorChange); + this.defaultColorInput = this.AddColorParameters ('Default Color', 'Default color is used when no material was defined in the file.', settings.defaultColor, callbacks.onDefaultColorChange); + + this.AddResetToDefaultsButton (defaultSettings, callbacks); } - AddColorParameters (params, title, description) + AddColorParameters (title, description, defaultValue, onChange) { $('
').addClass ('ov_sidebar_subtitle').html (title).appendTo (this.contentDiv); let contentDiv = $('
').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv); let colorColumn = $('
').addClass ('ov_sidebar_small_column').appendTo (contentDiv); $('
').addClass ('ov_sidebar_column').html (description).appendTo (contentDiv); let colorInput = $('').attr ('type', 'color').addClass ('ov_sidebar_color').appendTo (colorColumn); - colorInput.val ('#' + OV.ColorToHexString (params.defaultValue)); + colorInput.val ('#' + OV.ColorToHexString (defaultValue)); colorInput.change (() => { let colorStr = colorInput.val ().substr (1); - params.onChange (OV.HexStringToColor (colorStr)); + onChange (OV.HexStringToColor (colorStr)); }); - } + return colorInput; + } + + AddResetToDefaultsButton (defaultSettings, callbacks) + { + let resetToDefaultsButton = $('
').addClass ('ov_sidebar_settings_button').html ('Reset to Defaults').appendTo (this.contentDiv); + resetToDefaultsButton.click (() => { + this.backgroundColorInput.val ('#' + OV.ColorToHexString (defaultSettings.backgroundColor)); + this.defaultColorInput.val ('#' + OV.ColorToHexString (defaultSettings.defaultColor)); + callbacks.onBackgroundColorChange (defaultSettings.backgroundColor); + callbacks.onDefaultColorChange (defaultSettings.defaultColor); + }); + } }; diff --git a/website/o3dv/sharingdialog.js b/website/o3dv/sharingdialog.js index 1c4cd6e..06d4f50 100644 --- a/website/o3dv/sharingdialog.js +++ b/website/o3dv/sharingdialog.js @@ -1,4 +1,4 @@ -OV.ShowSharingDialog = function (importer, viewerSettings, importSettings, camera) +OV.ShowSharingDialog = function (importer, settings, camera) { function AddCheckboxLine (parentDiv, text, id, onChange) { @@ -71,7 +71,7 @@ OV.ShowSharingDialog = function (importer, viewerSettings, importSettings, camer sharingLinkInput.val (GetSharingLink (sharingLinkParams)); } - function AddEmbeddingCodeTab (parentDiv, viewerSettings, importSettings, embeddingCodeParams) + function AddEmbeddingCodeTab (parentDiv, settings, embeddingCodeParams) { let section = $('
').addClass ('ov_dialog_section').css ('margin-top', '20px').appendTo (parentDiv); $('
').html ('Embedding Code').addClass ('ov_dialog_inner_title').appendTo (section); @@ -85,15 +85,15 @@ OV.ShowSharingDialog = function (importer, viewerSettings, importSettings, camer }); if (OV.FeatureSet.SettingsPanel) { AddCheckboxLine (optionsSection, 'Use overridden background color', 'embed_background', (checked) => { - embeddingCodeParams.background = checked ? viewerSettings.backgroundColor : null; + embeddingCodeParams.background = checked ? settings.backgroundColor : null; embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams)); }); - embeddingCodeParams.background = viewerSettings.backgroundColor; + embeddingCodeParams.background = settings.backgroundColor; AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', (checked) => { - embeddingCodeParams.color = checked ? importSettings.defaultColor : null; + embeddingCodeParams.color = checked ? settings.defaultColor : null; embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams)); }); - embeddingCodeParams.color = importSettings.defaultColor; + embeddingCodeParams.color = settings.defaultColor; } embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams)); } @@ -135,7 +135,7 @@ OV.ShowSharingDialog = function (importer, viewerSettings, importSettings, camer ]); AddSharingLinkTab (contentDiv, sharingLinkParams); - AddEmbeddingCodeTab (contentDiv, viewerSettings, importSettings, embeddingCodeParams); + AddEmbeddingCodeTab (contentDiv, settings, embeddingCodeParams); dialog.Show (); return dialog; diff --git a/website/o3dv/website.css b/website/o3dv/website.css index eddad15..c3d338c 100644 --- a/website/o3dv/website.css +++ b/website/o3dv/website.css @@ -318,6 +318,14 @@ div.ov_sidebar_content input.ov_sidebar_color height: 18px; } +div.ov_sidebar_content div.ov_sidebar_settings_button +{ + color: #3393bd; + text-align: right; + margin-top: 25px; + cursor: pointer; +} + div.ov_tree_view { user-select: none; diff --git a/website/o3dv/website.js b/website/o3dv/website.js index 0f504a0..8104dfe 100644 --- a/website/o3dv/website.js +++ b/website/o3dv/website.js @@ -1,3 +1,24 @@ +OV.WebsiteSettings = class +{ + constructor () + { + this.backgroundColor = new OV.Color (255, 255, 255); + this.defaultColor = new OV.Color (200, 200, 200); + } + + LoadFromCookies (cookieHandler) + { + this.backgroundColor = cookieHandler.GetColorVal ('ov_background_color', new OV.Color (255, 255, 255)); + this.defaultColor = cookieHandler.GetColorVal ('ov_default_color', new OV.Color (200, 200, 200)); + } + + SaveToCookies (cookieHandler) + { + cookieHandler.SetColorVal ('ov_background_color', this.backgroundColor); + cookieHandler.SetColorVal ('ov_default_color', this.defaultColor); + } +}; + OV.Website = class { constructor (parameters) @@ -9,8 +30,7 @@ OV.Website = class this.toolbar = new OV.Toolbar (this.parameters.toolbarDiv); this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv); this.navigator = new OV.Navigator (this.parameters.navigatorDiv); - this.viewerSettings = new OV.ViewerSettings (); - this.importSettings = new OV.ImportSettings (); + this.settings = new OV.WebsiteSettings (); this.modelLoader = new OV.ThreeModelLoader (); this.highlightMaterial = new THREE.MeshPhongMaterial ({ color : 0x8ec9f0, @@ -23,7 +43,8 @@ OV.Website = class Load () { - this.InitSettings (); + this.settings.LoadFromCookies (this.cookieHandler); + this.InitViewer (); this.InitToolbar (); this.InitDragAndDrop (); @@ -171,18 +192,12 @@ OV.Website = class LoadModelFromFileList (files) { - this.modelLoader.LoadFromFileList (files, this.importSettings); + let importSettings = new OV.ImportSettings (); + importSettings.defaultColor = this.settings.defaultColor; + this.modelLoader.LoadFromFileList (files, importSettings); this.ClearHashIfNotOnlyUrlList (); } - ReloadFiles () - { - if (this.model === null) { - return; - } - this.modelLoader.ReloadFiles (this.importSettings); - } - ClearHashIfNotOnlyUrlList () { let importer = this.modelLoader.GetImporter (); @@ -201,7 +216,7 @@ OV.Website = class return; } let importSettings = new OV.ImportSettings (); - importSettings.defaultColor = this.importSettings.defaultColor; + importSettings.defaultColor = this.settings.defaultColor; let defaultColor = this.hashHandler.GetDefaultColorFromHash (); if (defaultColor !== null) { importSettings.defaultColor = defaultColor; @@ -213,17 +228,11 @@ OV.Website = class } } - InitSettings () - { - this.viewerSettings.backgroundColor = this.cookieHandler.GetColorVal ('ov_background_color', new OV.Color (255, 255, 255)); - this.importSettings.defaultColor = this.cookieHandler.GetColorVal ('ov_default_color', new OV.Color (200, 200, 200)); - } - InitViewer () { let canvas = $('').appendTo (this.parameters.viewerDiv); this.viewer.Init (canvas.get (0)); - this.viewer.SetBackgroundColor (this.viewerSettings.backgroundColor); + this.viewer.SetBackgroundColor (this.settings.backgroundColor); this.ShowViewer (false); } @@ -310,7 +319,7 @@ OV.Website = class exportDialog.Show (this.model, this.viewer); }); AddButton (this.toolbar, 'share', 'Share model', true, () => { - this.dialog = OV.ShowSharingDialog (importer, this.viewerSettings, this.importSettings, this.viewer.GetCamera ()); + this.dialog = OV.ShowSharingDialog (importer, this.settings, this.viewer.GetCamera ()); }); this.parameters.fileInput.on ('change', (ev) => { @@ -440,28 +449,27 @@ OV.Website = class }); } - settingsPanel.InitSettings ({ - backgroundColor : { - defaultValue : this.viewerSettings.backgroundColor, - onChange : (newVal) => { - this.viewerSettings.backgroundColor = newVal; + let defaultSettings = new OV.WebsiteSettings (); + settingsPanel.InitSettings ( + this.settings, + defaultSettings, + { + onBackgroundColorChange : (newVal) => { + this.settings.backgroundColor = newVal; + this.settings.SaveToCookies (this.cookieHandler); this.viewer.SetBackgroundColor (newVal); - this.cookieHandler.SetColorVal ('ov_background_color', newVal); - } - }, - defaultColor : { - defaultValue : this.importSettings.defaultColor, - onChange : (newVal) => { - this.importSettings.defaultColor = newVal; - this.cookieHandler.SetColorVal ('ov_default_color', newVal); + }, + onDefaultColorChange : (newVal) => { + this.settings.defaultColor = newVal; + this.settings.SaveToCookies (this.cookieHandler); if (this.modelLoader.defaultMaterial !== null) { OV.ReplaceDefaultMaterialColor (this.model, newVal); - this.modelLoader.defaultMaterial.color = new THREE.Color (newVal.r / 255.0, newVal.g / 255.0, newVal.b / 255.0); + this.modelLoader.ReplaceDefaultMaterialColor (newVal); } this.viewer.Render (); } } - }); + ); let show = this.cookieHandler.GetBoolVal ('ov_show_sidebar', true); ShowSidebar (this.sidebar, this.cookieHandler, sidebarPanels, show ? sidebarPanels[0].panelId : null);