Add dummy properties to the sidebar.

This commit is contained in:
kovacsv 2021-06-20 09:30:40 +02:00
parent b96eaf9570
commit 25d209b00f
8 changed files with 82 additions and 53 deletions

View File

@ -72,7 +72,6 @@
"website/o3dv/exportdialog.js",
"website/o3dv/sharingdialog.js",
"website/o3dv/settingsdialog.js",
"website/o3dv/quantitiesdialog.js",
"website/o3dv/cookiedialog.js",
"website/o3dv/modeldata.js",
"website/o3dv/navigator.js",

View File

@ -86,7 +86,6 @@
<script type="text/javascript" src="o3dv/exportdialog.js"></script>
<script type="text/javascript" src="o3dv/sharingdialog.js"></script>
<script type="text/javascript" src="o3dv/settingsdialog.js"></script>
<script type="text/javascript" src="o3dv/quantitiesdialog.js"></script>
<script type="text/javascript" src="o3dv/cookiedialog.js"></script>
<script type="text/javascript" src="o3dv/modeldata.js"></script>
<script type="text/javascript" src="o3dv/navigator.js"></script>

View File

@ -86,7 +86,6 @@
<script type="text/javascript" src="o3dv/exportdialog.js"></script>
<script type="text/javascript" src="o3dv/sharingdialog.js"></script>
<script type="text/javascript" src="o3dv/settingsdialog.js"></script>
<script type="text/javascript" src="o3dv/quantitiesdialog.js"></script>
<script type="text/javascript" src="o3dv/cookiedialog.js"></script>
<script type="text/javascript" src="o3dv/modeldata.js"></script>
<script type="text/javascript" src="o3dv/navigator.js"></script>

View File

@ -113,7 +113,7 @@ OV.Navigator = class
this.parentDiv = parentDiv;
this.sidebar = sidebar;
this.callbacks = null;
this.titleDiv = $('<div>').addClass ('ov_navigator_tree_title').addClass ('ov_thin_scrollbar').appendTo (parentDiv);
this.titleDiv = $('<div>').addClass ('ov_navigator_tree_title').appendTo (parentDiv);
this.treeDiv = $('<div>').addClass ('ov_navigator_tree_panel').addClass ('ov_thin_scrollbar').appendTo (parentDiv);
this.infoDiv = $('<div>').addClass ('ov_navigator_info_panel').addClass ('ov_thin_scrollbar').appendTo (parentDiv);
this.treeView = new OV.TreeView (this.treeDiv);
@ -311,6 +311,7 @@ OV.Navigator = class
let obj = this;
if (this.selection === null) {
let usedMaterial = this.callbacks.getMaterialsForModel ();
this.sidebar.AddProperties (null);
this.infoPanel.FillWithModelInfo (usedMaterial, {
onMaterialSelect : function (materialIndex) {
obj.SetSelection (new OV.Selection (OV.SelectionType.Material, materialIndex));

View File

@ -1,29 +0,0 @@
OV.ShowQuantitiesPopup = function (parentItem, element)
{
let popup = new OV.PopupDialog ();
let contentDiv = popup.Init (parentItem);
$('<div>').addClass ('ov_popup_title').html ('Volume').appendTo (contentDiv);
let volumeDiv = $('<div>').addClass ('ov_popup_text').html ('Calculating...').appendTo (contentDiv);
$('<div>').addClass ('ov_popup_title').html ('Surface Area').appendTo (contentDiv);
let surfaceAreaDiv = $('<div>').addClass ('ov_popup_text').html ('Calculating...').appendTo (contentDiv);
OV.RunTaskAsync (function () {
const volume = OV.CalculateVolume (element);
const surfaceArea = OV.CalculateSurfaceArea (element);
let volumeString = '';
if (volume === null) {
volumeString = 'The model is not closed.';
} else {
volumeString = volume.toFixed (5);
}
let surfaceAreaString = surfaceArea.toFixed (5);
volumeDiv.html (volumeString);
surfaceAreaDiv.html (surfaceAreaString);
});
popup.Show ();
return popup;
};

View File

@ -8,10 +8,53 @@ OV.Sidebar = class
constructor (parentDiv)
{
this.parentDiv = parentDiv;
this.titleDiv = $('<div>').addClass ('ov_sidebar_title').addClass ('ov_thin_scrollbar').appendTo (parentDiv);
this.titleDiv = $('<div>').addClass ('ov_sidebar_title').appendTo (parentDiv);
this.titleDiv.html ('Details');
this.contentDiv = $('<div>').appendTo (parentDiv);
this.contentDiv = $('<div>').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (parentDiv);
}
AddProperties (properties)
{
function AddProperty (table, name, value)
{
let row = $('<tr>').appendTo (table);
let nameColum = $('<td>').addClass ('ov_property_table_name').appendTo (row);
let valueColumn = $('<td>').addClass ('ov_property_table_value').appendTo (row);
nameColum.html (name).attr ('title', name);
valueColumn.html (value).attr ('title', value);
}
this.Clear ();
let table = $('<table>').addClass ('ov_property_table').appendTo (this.contentDiv);
AddProperty (table, 'Vertex Count', '1245');
AddProperty (table, 'Triangle Count', '23466');
AddProperty (table, 'Size', '12.0 x 14.0 x 6.0');
AddProperty (table, 'Volume', '23423');
AddProperty (table, 'Surface Area', '45463');
AddProperty (table, 'Emission Texture', 'Very very long property value');
AddProperty (table, 'Very very long property name', 'Very very long property value');
AddProperty (table, 'Surface Area', '45463');
AddProperty (table, 'Surface Area', '45463');
AddProperty (table, 'Surface Area', '45463');
AddProperty (table, 'Surface Area', '45463');
AddProperty (table, 'Surface Area', '45463');
AddProperty (table, 'Surface Area', '45463');
AddProperty (table, 'Surface Area', '45463');
AddProperty (table, 'Surface Area', '45463');
AddProperty (table, 'Surface Area', '45463');
AddProperty (table, 'Surface Area', '45463');
this.Resize ();
}
Resize ()
{
let titleHeight = this.titleDiv.outerHeight (true);
let height = this.parentDiv.height ();
this.contentDiv.outerHeight (height - titleHeight, true);
}
Clear ()
{
this.contentDiv.empty ();
}
};

View File

@ -131,7 +131,7 @@ div.main_viewer
div.main_sidebar
{
width: 240px;
width: 300px;
margin: 10px 10px 10px 0px;
overflow: none;
float: right;
@ -259,6 +259,11 @@ div.ov_sidebar_title
border-bottom: 1px solid #dddddd;
}
div.ov_sidebar_content
{
overflow: auto;
}
div.ov_tree_view
{
user-select: none;
@ -566,22 +571,6 @@ div.ov_popup
border-radius: 5px;
}
div.ov_popup div.ov_popup_title
{
font-weight: bold;
margin-top: 15px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
div.ov_popup div.ov_popup_text
{
margin-bottom: 15px;
margin-left: 10px;
margin-right: 10px;
}
div.ov_popup div.ov_popup_list
{
max-height: 200px;
@ -635,6 +624,32 @@ div.ov_progress div.ov_progress_text
text-align: center;
}
table.ov_property_table
{
border-collapse: collapse;
}
table.ov_property_table td
{
padding: 4px 0px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
table.ov_property_table td.ov_property_table_name
{
width: 45%;
padding-right: 8%;
}
table.ov_property_table td.ov_property_table_value
{
width: 45%;
text-align: right;
}
div.ov_thin_scrollbar
{
scrollbar-color: #cccccc transparent;

View File

@ -61,9 +61,11 @@ OV.Website = class
let contentWidth = windowWidth - navigatorWidth - sidebarWidth - safetyMargin;
let contentHeight = windowHeight - headerHeight - safetyMargin;
this.parameters.navigatorDiv.outerHeight (contentHeight, true);
this.parameters.sidebarDiv.outerHeight (contentHeight, true);
this.parameters.introDiv.outerHeight (contentHeight, true);
this.navigator.Resize ();
this.sidebar.Resize ();
this.viewer.Resize (contentWidth, contentHeight);
}