diff --git a/source/core/core.js b/source/core/core.js index 17f93e9..742ee50 100644 --- a/source/core/core.js +++ b/source/core/core.js @@ -10,3 +10,12 @@ OV.ValueOrDefault = function (val, def) } return val; }; + +OV.EnumerateKeyValuePairs = function (arr, proc) +{ + for (let key in arr) { + if (arr.hasOwnProperty (key)) { + proc (key, arr[key]); + } + } +}; diff --git a/website/o3dv/navigator.js b/website/o3dv/navigator.js index f5c8712..ffc91a7 100644 --- a/website/o3dv/navigator.js +++ b/website/o3dv/navigator.js @@ -108,10 +108,9 @@ OV.NavigatorInfoPanel = class OV.Navigator = class { - constructor (parentDiv, propertiesPanel) + constructor (parentDiv) { this.parentDiv = parentDiv; - this.propertiesPanel = propertiesPanel; this.callbacks = null; this.titleDiv = $('
').addClass ('ov_navigator_tree_title').appendTo (parentDiv); this.treeDiv = $('
').addClass ('ov_navigator_tree_panel').addClass ('ov_thin_scrollbar').appendTo (parentDiv); @@ -316,8 +315,7 @@ OV.Navigator = class obj.SetSelection (new OV.Selection (OV.SelectionType.Material, materialIndex)); } }); - let model = this.callbacks.getModel (); - this.propertiesPanel.AddElementProperties (model); + this.callbacks.onModelSelected (); } else { if (this.selection.type === OV.SelectionType.Material) { let usedByMeshes = this.callbacks.getMeshesForMaterial (this.selection.index); @@ -329,9 +327,7 @@ OV.Navigator = class obj.SetSelection (new OV.Selection (OV.SelectionType.Mesh, meshIndex)); } }); - let model = this.callbacks.getModel (); - let material = model.GetMaterial (this.selection.index); - this.propertiesPanel.AddMaterialProperties (material); + this.callbacks.onMaterialSelected (this.selection.index); } else if (this.selection.type === OV.SelectionType.Mesh) { let usedMaterials = this.callbacks.getMaterialsForMesh (this.selection.index); this.infoPanel.FillWithModelInfo (usedMaterials, { @@ -339,9 +335,7 @@ OV.Navigator = class obj.SetSelection (new OV.Selection (OV.SelectionType.Material, materialIndex)); } }); - let model = this.callbacks.getModel (); - let mesh = model.GetMesh (this.selection.index); - this.propertiesPanel.AddElementProperties (mesh); + this.callbacks.onMeshSelected (this.selection.index); } } this.Resize (); diff --git a/website/o3dv/sidebar.js b/website/o3dv/sidebar.js index 1c48f65..d647215 100644 --- a/website/o3dv/sidebar.js +++ b/website/o3dv/sidebar.js @@ -1,9 +1,3 @@ -OV.SidebarPanelId = -{ - Details : 0, - Settings : 1 -}; - OV.Sidebar = class { constructor (parentDiv) @@ -12,10 +6,13 @@ OV.Sidebar = class this.visible = true; this.titleDiv = null; this.contentDiv = null; - this.panels = [ - new OV.DetailsSidebarPanel (this.parentDiv), - new OV.SettingsSidebarPanel (this.parentDiv) - ]; + this.panels = []; + } + + AddPanel (panel) + { + this.panels.push (panel); + return this.panels.length - 1; } GetPanel (id) @@ -25,8 +22,8 @@ OV.Sidebar = class Init (callbacks) { - for (let i = 0; i < this.panels.length; i++) { - this.panels[i].Init (callbacks); + for (let id = 0; id < this.panels.length; id++) { + this.panels[id].Init (callbacks); } } @@ -35,9 +32,9 @@ OV.Sidebar = class if (panelId !== null) { this.visible = true; this.parentDiv.show (); - for (let i = 0; i < this.panels.length; i++) { - const panel = this.panels[i]; - if (i === panelId) { + for (let id = 0; id < this.panels.length; id++) { + let panel = this.panels[id]; + if (id === panelId) { panel.Show (true); } else { panel.Show (false); @@ -59,9 +56,9 @@ OV.Sidebar = class if (!this.visible) { return null; } - for (let i = 0; i < this.panels.length; i++) { - if (this.panels[i].IsVisible ()) { - return i; + for (let id = 0; id < this.panels.length; id++) { + if (this.panels[id].IsVisible ()) { + return id; } } return null; @@ -69,8 +66,8 @@ OV.Sidebar = class Resize () { - for (let i = 0; i < this.panels.length; i++) { - this.panels[i].Resize (); - } + for (let id = 0; id < this.panels.length; id++) { + this.panels[id].Resize (); + } } }; diff --git a/website/o3dv/toolbar.js b/website/o3dv/toolbar.js index 17d5abf..d6e3a07 100644 --- a/website/o3dv/toolbar.js +++ b/website/o3dv/toolbar.js @@ -20,7 +20,6 @@ OV.ToolbarButton = class } this.buttonDiv.attr ('alt', this.imageTitle); OV.InstallTooltip (this.buttonDiv, this.imageTitle); - this.Update (); } AddClass (className) @@ -28,13 +27,14 @@ OV.ToolbarButton = class this.buttonDiv.addClass (className); } - Update () + SetSelected (selected) { + this.selected = selected; if (!this.selected) { this.buttonDiv.removeClass ('selected'); } else { this.buttonDiv.addClass ('selected'); - } + } } }; @@ -61,17 +61,15 @@ OV.Toolbar = class for (let i = 0; i < buttons.length; i++) { let currentButton = buttons[i]; if (i === buttonIndex) { - currentButton.selected = true; + currentButton.SetSelected (true); } else { - currentButton.selected = false; + currentButton.SetSelected (false); } - currentButton.Update (); } onClick (buttonIndex); }); if (selectedIndex === buttonIndex) { - button.selected = true; - button.Update (); + button.SetSelected (true); } buttons.push (button); } diff --git a/website/o3dv/website.js b/website/o3dv/website.js index c11357a..023c536 100644 --- a/website/o3dv/website.js +++ b/website/o3dv/website.js @@ -8,7 +8,7 @@ OV.Website = class this.cookieHandler = new OV.CookieHandler (); 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.sidebar.GetPanel (OV.SidebarPanelId.Details)); + this.navigator = new OV.Navigator (this.parameters.navigatorDiv); this.viewerSettings = new OV.ViewerSettings (); this.importSettings = new OV.ImportSettings (); this.modelLoader = new OV.ThreeModelLoader (); @@ -16,6 +16,7 @@ OV.Website = class color : 0x8ec9f0, side : THREE.DoubleSide }); + this.detailsPanel = null; this.model = null; this.dialog = null; } @@ -81,21 +82,6 @@ OV.Website = class } } - ShowSidebar (panelId) - { - this.sidebar.Show (panelId); - this.cookieHandler.SetBoolVal ('ov_show_sidebar', this.sidebar.IsVisible ()); - } - - ToggleSidebar (panelId) - { - if (this.sidebar.GetVisiblePanelId () !== panelId) { - this.ShowSidebar (panelId); - } else { - this.ShowSidebar (null); - } - } - ClearModel () { if (this.dialog !== null) { @@ -256,13 +242,6 @@ OV.Website = class return button; } - function AddRightButton (toolbar, imageName, imageTitle, onlyFullWidth, onClick) - { - let button = AddButton (toolbar, imageName, imageTitle, onlyFullWidth, onClick); - button.AddClass ('right'); - return button; - } - function AddRadioButton (toolbar, imageNames, imageTitles, selectedIndex, onlyFullWidth, onClick) { let imageData = []; @@ -337,16 +316,6 @@ OV.Website = class AddButton (this.toolbar, 'share', 'Share model', true, function () { obj.dialog = OV.ShowSharingDialog (importer, obj.viewerSettings, obj.importSettings, obj.viewer.GetCamera ()); }); - AddRightButton (this.toolbar, 'details', 'Details panel', true, function () { - obj.ToggleSidebar (OV.SidebarPanelId.Details); - obj.Resize (); - }); - if (OV.FeatureSet.SettingsAvailable) { - AddRightButton (this.toolbar, 'settings', 'Settings panel', true, function () { - obj.ToggleSidebar (OV.SidebarPanelId.Settings); - obj.Resize (); - }); - } this.parameters.fileInput.on ('change', function (ev) { if (ev.target.files.length > 0) { @@ -398,15 +367,57 @@ OV.Website = class InitSidebar () { + function AddSidebarButton (toolbar, imageName, imageTitle, onClick) + { + let image = 'assets/images/toolbar/' + imageName + '.svg'; + let button = toolbar.AddImageButton (image, imageTitle, onClick); + button.AddClass ('only_full_width'); + button.AddClass ('right'); + return button; + } + + function ShowSidebar (sidebar, cookieHandler, panelId) + { + sidebar.Show (panelId); + cookieHandler.SetBoolVal ('ov_show_sidebar', sidebar.IsVisible ()); + } + + function ToggleSidebar (sidebar, cookieHandler, panelId) + { + if (sidebar.GetVisiblePanelId () !== panelId) { + ShowSidebar (sidebar, cookieHandler, panelId); + } else { + ShowSidebar (sidebar, cookieHandler, null); + } + } + + const detailsPanelId = this.sidebar.AddPanel (new OV.DetailsSidebarPanel (this.parameters.sidebarDiv)); + const settingsPanelId = this.sidebar.AddPanel (new OV.SettingsSidebarPanel (this.parameters.sidebarDiv)); + + this.detailsPanel = this.sidebar.GetPanel (detailsPanelId); + let obj = this; + AddSidebarButton (this.toolbar, 'details', 'Details panel', function () { + ToggleSidebar (obj.sidebar, obj.cookieHandler, detailsPanelId); + obj.Resize (); + }); + + if (OV.FeatureSet.SettingsAvailable) { + AddSidebarButton (this.toolbar, 'settings', 'Settings panel', function () { + ToggleSidebar (obj.sidebar, obj.cookieHandler, settingsPanelId); + obj.Resize (); + }); + } + this.sidebar.Init ({ onClose : function () { - obj.ShowSidebar (null); + ShowSidebar (obj.sidebar, obj.cookieHandler, null); obj.Resize (); } }); + let show = this.cookieHandler.GetBoolVal ('ov_show_sidebar', true); - this.ShowSidebar (show ? OV.SidebarPanelId.Details : null); + ShowSidebar (this.sidebar, this.cookieHandler, show ? detailsPanelId : null); } InitNavigator () @@ -493,8 +504,14 @@ OV.Website = class getMaterialsForModel : function () { return GetMaterialsForModel (obj.model); }, - getModel : function () { - return obj.model; + onModelSelected : function () { + obj.detailsPanel.AddElementProperties (obj.model); + }, + onMeshSelected : function (meshIndex) { + obj.detailsPanel.AddElementProperties (obj.model.GetMesh (meshIndex)); + }, + onMaterialSelected : function (materialIndex) { + obj.detailsPanel.AddMaterialProperties (obj.model.GetMaterial (materialIndex)); } }); }