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

Add reset to defaults button to settings panel.

Browse Source
This commit is contained in:
kovacsv 2021-07-13 06:42:30 +02:00
parent fec23eb236
commit ec4bc495a2
6 changed files with 89 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
source/external/threemodelloader.js vendored
View File

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

8
source/viewer/viewer.js
View File

@ -132,14 +132,6 @@ OV.ViewerGeometry = class
}
};
OV.ViewerSettings = class
{
constructor ()
{
this.backgroundColor = new OV.Color (255, 255, 255);
}
};
OV.Viewer = class
{
constructor ()

30
website/o3dv/settingssidebarpanel.js
View File

@ -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)
{
$('<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);
});
}
};

14
website/o3dv/sharingdialog.js
View File

@ -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;

8
website/o3dv/website.css
View File

@ -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;

80
website/o3dv/website.js
View File

@ -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 = $('<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);