Add reset to defaults button to settings panel.

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);
+        }
+    }
 };

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 ()

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.backgroundColorInput = this.AddColorParameters ('Background Color', 'Changing the background color affects only the visualization.', settings.backgroundColor, callbacks.onBackgroundColorChange);
-        this.AddColorParameters (settings.defaultColor, 'Default Color', 'Default color is used when no material was defined in the file.');
+        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)
     {
         $('<div>').addClass ('ov_sidebar_subtitle').html (title).appendTo (this.contentDiv);
         let contentDiv = $('<div>').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv);
         let colorColumn = $('<div>').addClass ('ov_sidebar_small_column').appendTo (contentDiv);
         $('<div>').addClass ('ov_sidebar_column').html (description).appendTo (contentDiv);
         let colorInput = $('<input>').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 = $('<div>').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);
+        });
+    }
 };

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 = $('<div>').addClass ('ov_dialog_section').css ('margin-top', '20px').appendTo (parentDiv);
         $('<div>').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;

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;

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.settings = new OV.WebsiteSettings ();
-        this.importSettings = new OV.ImportSettings ();
         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 = $('<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 ({
+        let defaultSettings = new OV.WebsiteSettings ();
-            backgroundColor : {
+        settingsPanel.InitSettings (
-                defaultValue : this.viewerSettings.backgroundColor,
+            this.settings,
-                onChange : (newVal) => {
+            defaultSettings,
-                    this.viewerSettings.backgroundColor = newVal;
+            {
+                onBackgroundColorChange : (newVal) => {
+                    this.settings.backgroundColor = newVal;
+                    this.settings.SaveToCookies (this.cookieHandler);
                     this.viewer.SetBackgroundColor (newVal);
-                    this.cookieHandler.SetColorVal ('ov_background_color', newVal);
+                },
-                }
+                onDefaultColorChange : (newVal) => {
-            },
+                    this.settings.defaultColor = newVal;
-            defaultColor : {
+                    this.settings.SaveToCookies (this.cookieHandler);
-                defaultValue : this.importSettings.defaultColor,
-                onChange : (newVal) => {
-                    this.importSettings.defaultColor = newVal;
-                    this.cookieHandler.SetColorVal ('ov_default_color', newVal);
                     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);