From 8832ddb9167cca9852204773ecfbcf726f928537 Mon Sep 17 00:00:00 2001 From: kovacsv Date: Sat, 10 Jul 2021 13:00:59 +0200 Subject: [PATCH] Preparation for multiple side bar panels. --- tools/config.json | 2 + website/embed.html | 2 + website/index.html | 2 + website/o3dv/navigator.js | 10 +- website/o3dv/propertysidebarpanel.js | 156 ++++++++++++++++++++++++ website/o3dv/sidebar.js | 171 +++------------------------ website/o3dv/sidebarpanel.js | 37 ++++++ website/o3dv/website.js | 2 +- 8 files changed, 223 insertions(+), 159 deletions(-) create mode 100644 website/o3dv/propertysidebarpanel.js create mode 100644 website/o3dv/sidebarpanel.js diff --git a/tools/config.json b/tools/config.json index 2ff3718..8979558 100644 --- a/tools/config.json +++ b/tools/config.json @@ -77,6 +77,8 @@ "website/o3dv/cookiedialog.js", "website/o3dv/modeldata.js", "website/o3dv/navigator.js", + "website/o3dv/sidebarpanel.js", + "website/o3dv/propertysidebarpanel.js", "website/o3dv/sidebar.js", "website/o3dv/hashhandler.js", "website/o3dv/website.css", diff --git a/website/embed.html b/website/embed.html index f265780..a297989 100644 --- a/website/embed.html +++ b/website/embed.html @@ -91,6 +91,8 @@ + + diff --git a/website/index.html b/website/index.html index 579c67d..2c71af3 100644 --- a/website/index.html +++ b/website/index.html @@ -91,6 +91,8 @@ + + diff --git a/website/o3dv/navigator.js b/website/o3dv/navigator.js index bda2ada..f5c8712 100644 --- a/website/o3dv/navigator.js +++ b/website/o3dv/navigator.js @@ -108,10 +108,10 @@ OV.NavigatorInfoPanel = class OV.Navigator = class { - constructor (parentDiv, sidebar) + constructor (parentDiv, propertiesPanel) { this.parentDiv = parentDiv; - this.sidebar = sidebar; + 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); @@ -317,7 +317,7 @@ OV.Navigator = class } }); let model = this.callbacks.getModel (); - this.sidebar.AddElementProperties (model); + this.propertiesPanel.AddElementProperties (model); } else { if (this.selection.type === OV.SelectionType.Material) { let usedByMeshes = this.callbacks.getMeshesForMaterial (this.selection.index); @@ -331,7 +331,7 @@ OV.Navigator = class }); let model = this.callbacks.getModel (); let material = model.GetMaterial (this.selection.index); - this.sidebar.AddMaterialProperties (material); + this.propertiesPanel.AddMaterialProperties (material); } else if (this.selection.type === OV.SelectionType.Mesh) { let usedMaterials = this.callbacks.getMaterialsForMesh (this.selection.index); this.infoPanel.FillWithModelInfo (usedMaterials, { @@ -341,7 +341,7 @@ OV.Navigator = class }); let model = this.callbacks.getModel (); let mesh = model.GetMesh (this.selection.index); - this.sidebar.AddElementProperties (mesh); + this.propertiesPanel.AddElementProperties (mesh); } } this.Resize (); diff --git a/website/o3dv/propertysidebarpanel.js b/website/o3dv/propertysidebarpanel.js new file mode 100644 index 0000000..c27cc62 --- /dev/null +++ b/website/o3dv/propertysidebarpanel.js @@ -0,0 +1,156 @@ +OV.PropertySidebarPanel = class extends OV.SidebarPanel +{ + constructor (parentDiv) + { + super (parentDiv); + this.titleDiv = null; + this.contentDiv = null; + } + + AddPropertyGroup (table, propertyGroup) + { + let row = $('
').addClass ('ov_property_table_row group').appendTo (table); + row.html (propertyGroup.name).attr ('title', propertyGroup.name); + } + + AddProperty (table, property) + { + let row = $('
').addClass ('ov_property_table_row').appendTo (table); + let nameColum = $('
').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row); + let valueColumn = $('
').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row); + nameColum.html (property.name + ':').attr ('title', property.name); + this.DisplayPropertyValue (property, valueColumn); + return row; + } + + AddPropertyInGroup (table, property) + { + let row = this.AddProperty (table, property); + row.addClass ('ingroup'); + } + + AddCalculatedProperty (table, name, calculateValue) + { + let row = $('
').addClass ('ov_property_table_row').appendTo (table); + let nameColum = $('
').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row); + let valueColumn = $('
').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row); + nameColum.html (name + ':').attr ('title', name); + + let obj = this; + let calculateButton = $('
').addClass ('ov_property_table_button').html ('Calculate...').appendTo (valueColumn); + calculateButton.click (function () { + valueColumn.empty (); + valueColumn.html ('Please wait...'); + OV.RunTaskAsync (function () { + let propertyValue = calculateValue (); + if (propertyValue === null) { + valueColumn.html ('-'); + } else { + obj.DisplayPropertyValue (propertyValue, valueColumn); + } + }); + }); + } + + DisplayPropertyValue (property, targetDiv) + { + targetDiv.empty (); + let valueText = null; + if (property.type === OV.PropertyType.Text) { + valueText = property.value; + } else if (property.type === OV.PropertyType.Integer) { + valueText = property.value.toLocaleString (); + } else if (property.type === OV.PropertyType.Number) { + valueText = property.value.toLocaleString (undefined, { + minimumFractionDigits: 2, + maximumFractionDigits: 2 + }); + } else if (property.type === OV.PropertyType.Boolean) { + valueText = property.value ? 'Yes' : 'No'; + } else if (property.type === OV.PropertyType.Percent) { + valueText = parseInt (property.value * 100, 10).toString () + '%'; + } else if (property.type === OV.PropertyType.Color) { + let hexString = '#' + OV.ColorToHexString (property.value); + let colorCircle = OV.CreateInlineColorCircle (property.value); + colorCircle.appendTo (targetDiv); + $('').html (hexString).appendTo (targetDiv); + } + if (valueText !== null) { + targetDiv.html (valueText).attr ('title', valueText); + } + } + + AddElementProperties (element) + { + this.Clear (); + let table = $('
').addClass ('ov_property_table').appendTo (this.contentDiv); + let boundingBox = OV.GetBoundingBox (element); + let size = OV.SubCoord3D (boundingBox.max, boundingBox.min); + this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Vertex Count', element.VertexCount ())); + this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Triangle Count', element.TriangleCount ())); + this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size X', size.x)); + this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size Y', size.y)); + this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size Z', size.z)); + this.AddCalculatedProperty (table, 'Volume', function () { + const volume = OV.CalculateVolume (element); + if (volume === null) { + return null; + } + return new OV.Property (OV.PropertyType.Number, null, volume); + }); + this.AddCalculatedProperty (table, 'Surface Area', function () { + const volume = OV.CalculateSurfaceArea (element); + if (volume === null) { + return null; + } + return new OV.Property (OV.PropertyType.Number, null, volume); + }); + if (element.PropertyGroupCount () > 0) { + let customTable = $('
').addClass ('ov_property_table ov_property_table_custom').appendTo (this.contentDiv); + for (let i = 0; i < element.PropertyGroupCount (); i++) { + const propertyGroup = element.GetPropertyGroup (i); + this.AddPropertyGroup (customTable, propertyGroup); + for (let j = 0; j < propertyGroup.PropertyCount (); j++) { + const property = propertyGroup.GetProperty (j); + this.AddPropertyInGroup (customTable, property); + } + } + } + this.Resize (); + } + + AddMaterialProperties (material) + { + function AddTextureMap (obj, table, name, map) + { + if (map === null || map.name === null) { + return; + } + let fileName = OV.GetFileName (map.name); + obj.AddProperty (table, new OV.Property (OV.PropertyType.Text, name, fileName)); + } + + this.Clear (); + let table = $('
').addClass ('ov_property_table').appendTo (this.contentDiv); + this.AddProperty (table, new OV.Property (OV.PropertyType.Color, 'Color', material.diffuse)); + this.AddProperty (table, new OV.Property (OV.PropertyType.Percent, 'Opacity', material.opacity)); + AddTextureMap (this, table, 'Diffuse Map', material.diffuseMap); + AddTextureMap (this, table, 'Specular Map', material.specularMap); + AddTextureMap (this, table, 'Bump Map', material.bumpMap); + AddTextureMap (this, table, 'Normal Map', material.normalMap); + AddTextureMap (this, table, 'Emissive Map', material.emissiveMap); + this.Resize (); + } + + Resize () + { + let titleHeight = this.titleDiv.outerHeight (true); + let height = this.parentDiv.height (); + this.contentDiv.outerHeight (height - titleHeight, true); + } + + Clear () + { + this.contentDiv.empty (); + } +}; diff --git a/website/o3dv/sidebar.js b/website/o3dv/sidebar.js index f914dc3..fa4a81b 100644 --- a/website/o3dv/sidebar.js +++ b/website/o3dv/sidebar.js @@ -1,26 +1,31 @@ +OV.SidebarPanelId = +{ + Properties : 0 +}; + OV.Sidebar = class { constructor (parentDiv) { this.parentDiv = parentDiv; - this.callbacks = null; this.visible = true; this.titleDiv = null; this.contentDiv = null; + this.panels = [ + new OV.PropertySidebarPanel (this.parentDiv) + ]; + } + GetPanel (id) + { + return this.panels[id]; } Init (callbacks) { - this.callbacks = callbacks; - this.titleDiv = $('
').addClass ('ov_sidebar_title').appendTo (this.parentDiv); - this.contentDiv = $('
').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (this.parentDiv); - let titleTextDiv = $('
').addClass ('ov_sidebar_title_text').html ('Details').appendTo (this.titleDiv); - let titleImg = $('').addClass ('ov_sidebar_title_img').attr ('src', 'assets/images/sidebar/close.svg').appendTo (this.titleDiv); - let obj = this; - titleImg.click (function () { - obj.callbacks.onClose (); - }); + for (let i = 0; i < this.panels.length; i++) { + this.panels[i].Init ('Details', callbacks); + } } Show (show) @@ -38,150 +43,10 @@ OV.Sidebar = class return this.visible; } - AddPropertyGroup (table, propertyGroup) - { - let row = $('
').addClass ('ov_property_table_row group').appendTo (table); - row.html (propertyGroup.name).attr ('title', propertyGroup.name); - } - - AddProperty (table, property) - { - let row = $('
').addClass ('ov_property_table_row').appendTo (table); - let nameColum = $('
').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row); - let valueColumn = $('
').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row); - nameColum.html (property.name + ':').attr ('title', property.name); - this.DisplayPropertyValue (property, valueColumn); - return row; - } - - AddPropertyInGroup (table, property) - { - let row = this.AddProperty (table, property); - row.addClass ('ingroup'); - } - - AddCalculatedProperty (table, name, calculateValue) - { - let row = $('
').addClass ('ov_property_table_row').appendTo (table); - let nameColum = $('
').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row); - let valueColumn = $('
').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row); - nameColum.html (name + ':').attr ('title', name); - - let obj = this; - let calculateButton = $('
').addClass ('ov_property_table_button').html ('Calculate...').appendTo (valueColumn); - calculateButton.click (function () { - valueColumn.empty (); - valueColumn.html ('Please wait...'); - OV.RunTaskAsync (function () { - let propertyValue = calculateValue (); - if (propertyValue === null) { - valueColumn.html ('-'); - } else { - obj.DisplayPropertyValue (propertyValue, valueColumn); - } - }); - }); - } - - DisplayPropertyValue (property, targetDiv) - { - targetDiv.empty (); - let valueText = null; - if (property.type === OV.PropertyType.Text) { - valueText = property.value; - } else if (property.type === OV.PropertyType.Integer) { - valueText = property.value.toLocaleString (); - } else if (property.type === OV.PropertyType.Number) { - valueText = property.value.toLocaleString (undefined, { - minimumFractionDigits: 2, - maximumFractionDigits: 2 - }); - } else if (property.type === OV.PropertyType.Boolean) { - valueText = property.value ? 'Yes' : 'No'; - } else if (property.type === OV.PropertyType.Percent) { - valueText = parseInt (property.value * 100, 10).toString () + '%'; - } else if (property.type === OV.PropertyType.Color) { - let hexString = '#' + OV.ColorToHexString (property.value); - let colorCircle = OV.CreateInlineColorCircle (property.value); - colorCircle.appendTo (targetDiv); - $('').html (hexString).appendTo (targetDiv); - } - if (valueText !== null) { - targetDiv.html (valueText).attr ('title', valueText); - } - } - - AddElementProperties (element) - { - this.Clear (); - let table = $('
').addClass ('ov_property_table').appendTo (this.contentDiv); - let boundingBox = OV.GetBoundingBox (element); - let size = OV.SubCoord3D (boundingBox.max, boundingBox.min); - this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Vertex Count', element.VertexCount ())); - this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Triangle Count', element.TriangleCount ())); - this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size X', size.x)); - this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size Y', size.y)); - this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size Z', size.z)); - this.AddCalculatedProperty (table, 'Volume', function () { - const volume = OV.CalculateVolume (element); - if (volume === null) { - return null; - } - return new OV.Property (OV.PropertyType.Number, null, volume); - }); - this.AddCalculatedProperty (table, 'Surface Area', function () { - const volume = OV.CalculateSurfaceArea (element); - if (volume === null) { - return null; - } - return new OV.Property (OV.PropertyType.Number, null, volume); - }); - if (element.PropertyGroupCount () > 0) { - let customTable = $('
').addClass ('ov_property_table ov_property_table_custom').appendTo (this.contentDiv); - for (let i = 0; i < element.PropertyGroupCount (); i++) { - const propertyGroup = element.GetPropertyGroup (i); - this.AddPropertyGroup (customTable, propertyGroup); - for (let j = 0; j < propertyGroup.PropertyCount (); j++) { - const property = propertyGroup.GetProperty (j); - this.AddPropertyInGroup (customTable, property); - } - } - } - this.Resize (); - } - - AddMaterialProperties (material) - { - function AddTextureMap (obj, table, name, map) - { - if (map === null || map.name === null) { - return; - } - let fileName = OV.GetFileName (map.name); - obj.AddProperty (table, new OV.Property (OV.PropertyType.Text, name, fileName)); - } - - this.Clear (); - let table = $('
').addClass ('ov_property_table').appendTo (this.contentDiv); - this.AddProperty (table, new OV.Property (OV.PropertyType.Color, 'Color', material.diffuse)); - this.AddProperty (table, new OV.Property (OV.PropertyType.Percent, 'Opacity', material.opacity)); - AddTextureMap (this, table, 'Diffuse Map', material.diffuseMap); - AddTextureMap (this, table, 'Specular Map', material.specularMap); - AddTextureMap (this, table, 'Bump Map', material.bumpMap); - AddTextureMap (this, table, 'Normal Map', material.normalMap); - AddTextureMap (this, table, 'Emissive Map', material.emissiveMap); - this.Resize (); - } - Resize () { - let titleHeight = this.titleDiv.outerHeight (true); - let height = this.parentDiv.height (); - this.contentDiv.outerHeight (height - titleHeight, true); - } - - Clear () - { - this.contentDiv.empty (); + for (let i = 0; i < this.panels.length; i++) { + this.panels[i].Resize (); + } } }; diff --git a/website/o3dv/sidebarpanel.js b/website/o3dv/sidebarpanel.js new file mode 100644 index 0000000..d3455c8 --- /dev/null +++ b/website/o3dv/sidebarpanel.js @@ -0,0 +1,37 @@ +OV.SidebarPanel = class +{ + constructor (parentDiv) + { + this.parentDiv = parentDiv; + this.panelDiv = $('
').appendTo (this.parentDiv); + this.titleDiv = null; + this.contentDiv = null; + this.visible = true; + } + + Init (title, callbacks) + { + this.titleDiv = $('
').addClass ('ov_sidebar_title').appendTo (this.panelDiv); + this.contentDiv = $('
').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv); + let titleTextDiv = $('
').addClass ('ov_sidebar_title_text').html (title).appendTo (this.titleDiv); + let titleImg = $('').addClass ('ov_sidebar_title_img').attr ('src', 'assets/images/sidebar/close.svg').appendTo (this.titleDiv); + titleImg.click (function () { + callbacks.onClose (); + }); + } + + Show (show) + { + this.visible = show; + if (this.visible) { + this.panelDiv.show (); + } else { + this.panelDiv.hide (); + } + } + + IsVisible () + { + return this.visible; + } +}; diff --git a/website/o3dv/website.js b/website/o3dv/website.js index 1e635b9..b6ef774 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); + this.navigator = new OV.Navigator (this.parameters.navigatorDiv, this.sidebar.GetPanel (OV.SidebarPanelId.Properties)); this.viewerSettings = new OV.ViewerSettings (); this.importSettings = new OV.ImportSettings (); this.modelLoader = new OV.ThreeModelLoader ();