Add basic information to the sidebar.

This commit is contained in:
kovacsv 2021-06-20 11:31:39 +02:00
parent d6db051ac6
commit ea77b98642
12 changed files with 71 additions and 28 deletions

View File

@ -27,6 +27,7 @@
<script type="text/javascript" src="../source/io/fileutils.js"></script>
<script type="text/javascript" src="../source/model/material.js"></script>
<script type="text/javascript" src="../source/model/triangle.js"></script>
<script type="text/javascript" src="../source/model/property.js"></script>
<script type="text/javascript" src="../source/model/element.js"></script>
<script type="text/javascript" src="../source/model/mesh.js"></script>
<script type="text/javascript" src="../source/model/meshbuffer.js"></script>

View File

@ -28,6 +28,7 @@
<script type="text/javascript" src="../source/io/fileutils.js"></script>
<script type="text/javascript" src="../source/model/material.js"></script>
<script type="text/javascript" src="../source/model/triangle.js"></script>
<script type="text/javascript" src="../source/model/property.js"></script>
<script type="text/javascript" src="../source/model/element.js"></script>
<script type="text/javascript" src="../source/model/mesh.js"></script>
<script type="text/javascript" src="../source/model/meshbuffer.js"></script>

View File

@ -27,6 +27,7 @@
<script type="text/javascript" src="../source/io/fileutils.js"></script>
<script type="text/javascript" src="../source/model/material.js"></script>
<script type="text/javascript" src="../source/model/triangle.js"></script>
<script type="text/javascript" src="../source/model/property.js"></script>
<script type="text/javascript" src="../source/model/element.js"></script>
<script type="text/javascript" src="../source/model/mesh.js"></script>
<script type="text/javascript" src="../source/model/meshbuffer.js"></script>

View File

@ -27,6 +27,7 @@
<script type="text/javascript" src="../source/io/fileutils.js"></script>
<script type="text/javascript" src="../source/model/material.js"></script>
<script type="text/javascript" src="../source/model/triangle.js"></script>
<script type="text/javascript" src="../source/model/property.js"></script>
<script type="text/javascript" src="../source/model/element.js"></script>
<script type="text/javascript" src="../source/model/mesh.js"></script>
<script type="text/javascript" src="../source/model/meshbuffer.js"></script>

18
source/model/property.js Normal file
View File

@ -0,0 +1,18 @@
OV.PropertyType =
{
Text : 1,
Integer : 2,
Number : 3,
Percent : 4,
Color : 5
};
OV.Property = class
{
constructor (type, name, value)
{
this.type = type;
this.name = name;
this.value = value;
}
};

View File

@ -22,6 +22,7 @@
"source/io/fileutils.js",
"source/model/material.js",
"source/model/triangle.js",
"source/model/property.js",
"source/model/element.js",
"source/model/mesh.js",
"source/model/meshbuffer.js",

View File

@ -35,6 +35,7 @@
<script type="text/javascript" src="../source/io/fileutils.js"></script>
<script type="text/javascript" src="../source/model/material.js"></script>
<script type="text/javascript" src="../source/model/triangle.js"></script>
<script type="text/javascript" src="../source/model/property.js"></script>
<script type="text/javascript" src="../source/model/element.js"></script>
<script type="text/javascript" src="../source/model/mesh.js"></script>
<script type="text/javascript" src="../source/model/meshbuffer.js"></script>

View File

@ -35,6 +35,7 @@
<script type="text/javascript" src="../source/io/fileutils.js"></script>
<script type="text/javascript" src="../source/model/material.js"></script>
<script type="text/javascript" src="../source/model/triangle.js"></script>
<script type="text/javascript" src="../source/model/property.js"></script>
<script type="text/javascript" src="../source/model/element.js"></script>
<script type="text/javascript" src="../source/model/mesh.js"></script>
<script type="text/javascript" src="../source/model/meshbuffer.js"></script>

View File

@ -311,16 +311,16 @@ OV.Navigator = class
let obj = this;
if (this.selection === null) {
let usedMaterials = this.callbacks.getMaterialsForModel ();
this.sidebar.AddProperties (null);
this.infoPanel.FillWithModelInfo (usedMaterials, {
onMaterialSelect : function (materialIndex) {
obj.SetSelection (new OV.Selection (OV.SelectionType.Material, materialIndex));
}
});
let model = this.callbacks.getModel ();
this.sidebar.AddElementProperties (model);
} else {
if (this.selection.type === OV.SelectionType.Material) {
let usedByMeshes = this.callbacks.getMeshesForMaterial (this.selection.index);
this.sidebar.AddProperties (null);
this.infoPanel.FillWithMaterialInfo (usedByMeshes, {
onMeshHover : function (meshIndex) {
obj.SetTempSelectedMeshIndex (meshIndex);
@ -329,14 +329,19 @@ 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.sidebar.AddMaterialProperties (material);
} else if (this.selection.type === OV.SelectionType.Mesh) {
let usedMaterials = this.callbacks.getMaterialsForMesh (this.selection.index);
this.sidebar.AddProperties (null);
this.infoPanel.FillWithModelInfo (usedMaterials, {
onMaterialSelect : function (materialIndex) {
obj.SetSelection (new OV.Selection (OV.SelectionType.Material, materialIndex));
}
});
let model = this.callbacks.getModel ();
let mesh = model.GetMesh (this.selection.index);
this.sidebar.AddElementProperties (mesh);
}
}
this.Resize ();

View File

@ -1,8 +1,3 @@
OV.PropertyType =
{
Text : 1
};
OV.Sidebar = class
{
constructor (parentDiv)
@ -45,37 +40,51 @@ OV.Sidebar = class
AddProperties (properties)
{
function AddProperty (table, name, value)
function AddProperty (table, property)
{
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);
nameColum.html (property.name).attr ('title', property.name);
let valueText = null;
if (property.type === OV.PropertyType.Integer) {
valueText = property.value.toLocaleString ();
} else if (property.type === OV.PropertyType.Percent) {
valueText = parseInt (property.value * 100, 10).toString () + '%';
} else if (property.type === OV.PropertyType.Color) {
valueText = '#' + OV.ColorToHexString (property.value);
}
if (valueText !== null) {
valueColumn.html (valueText).attr ('title', valueText);
}
}
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');
for (let i = 0; i < properties.length; i++) {
let property = properties[i];
AddProperty (table, property);
}
this.Resize ();
}
AddElementProperties (element)
{
let properties = [];
properties.push (new OV.Property (OV.PropertyType.Integer, 'Vertex Count', element.VertexCount ()));
properties.push (new OV.Property (OV.PropertyType.Integer, 'Triangle Count', element.TriangleCount ()));
this.AddProperties (properties);
}
AddMaterialProperties (material)
{
let properties = [];
properties.push (new OV.Property (OV.PropertyType.Color, 'Color', material.diffuse));
properties.push (new OV.Property (OV.PropertyType.Percent, 'Opacity', material.opacity));
this.AddProperties (properties);
}
Resize ()
{
let titleHeight = this.titleDiv.outerHeight (true);

View File

@ -651,6 +651,7 @@ div.ov_progress div.ov_progress_text
table.ov_property_table
{
width: 100%;
border-collapse: collapse;
}

View File

@ -477,6 +477,9 @@ OV.Website = class
},
getMaterialsForModel : function () {
return GetMaterialsForModel (obj.model);
},
getModel : function () {
return obj.model;
}
});
}