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

Preparation for multiple side bar panels.

Browse Source
This commit is contained in:
kovacsv 2021-07-10 13:00:59 +02:00
parent e8ed3fe9b9
commit 8832ddb916
8 changed files with 223 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tools/config.json
View File

@ -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",

2
website/embed.html
View File

@ -91,6 +91,8 @@
<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>
<script type="text/javascript" src="o3dv/sidebarpanel.js"></script>
<script type="text/javascript" src="o3dv/propertysidebarpanel.js"></script>
<script type="text/javascript" src="o3dv/sidebar.js"></script>
<script type="text/javascript" src="o3dv/hashhandler.js"></script>
<link rel="stylesheet" type="text/css" href="o3dv/website.css">

2
website/index.html
View File

@ -91,6 +91,8 @@
<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>
<script type="text/javascript" src="o3dv/sidebarpanel.js"></script>
<script type="text/javascript" src="o3dv/propertysidebarpanel.js"></script>
<script type="text/javascript" src="o3dv/sidebar.js"></script>
<script type="text/javascript" src="o3dv/hashhandler.js"></script>
<link rel="stylesheet" type="text/css" href="o3dv/website.css">

10
website/o3dv/navigator.js
View File

@ -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 = $('<div>').addClass ('ov_navigator_tree_title').appendTo (parentDiv);
this.treeDiv = $('<div>').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 ();

156
website/o3dv/propertysidebarpanel.js Normal file
View File

@ -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 = $('<div>').addClass ('ov_property_table_row group').appendTo (table);
row.html (propertyGroup.name).attr ('title', propertyGroup.name);
}
AddProperty (table, property)
{
let row = $('<div>').addClass ('ov_property_table_row').appendTo (table);
let nameColum = $('<div>').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row);
let valueColumn = $('<div>').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 = $('<div>').addClass ('ov_property_table_row').appendTo (table);
let nameColum = $('<div>').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row);
let valueColumn = $('<div>').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row);
nameColum.html (name + ':').attr ('title', name);
let obj = this;
let calculateButton = $('<div>').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);
$('<span>').html (hexString).appendTo (targetDiv);
}
if (valueText !== null) {
targetDiv.html (valueText).attr ('title', valueText);
}
}
AddElementProperties (element)
{
this.Clear ();
let table = $('<div>').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 = $('<div>').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 = $('<div>').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 ();
}
};

171
website/o3dv/sidebar.js
View File

@ -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 = $('<div>').addClass ('ov_sidebar_title').appendTo (this.parentDiv);
this.contentDiv = $('<div>').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (this.parentDiv);
let titleTextDiv = $('<div>').addClass ('ov_sidebar_title_text').html ('Details').appendTo (this.titleDiv);
let titleImg = $('<img>').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 = $('<div>').addClass ('ov_property_table_row group').appendTo (table);
row.html (propertyGroup.name).attr ('title', propertyGroup.name);
}
AddProperty (table, property)
{
let row = $('<div>').addClass ('ov_property_table_row').appendTo (table);
let nameColum = $('<div>').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row);
let valueColumn = $('<div>').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 = $('<div>').addClass ('ov_property_table_row').appendTo (table);
let nameColum = $('<div>').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row);
let valueColumn = $('<div>').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row);
nameColum.html (name + ':').attr ('title', name);
let obj = this;
let calculateButton = $('<div>').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);
$('<span>').html (hexString).appendTo (targetDiv);
}
if (valueText !== null) {
targetDiv.html (valueText).attr ('title', valueText);
}
}
AddElementProperties (element)
{
this.Clear ();
let table = $('<div>').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 = $('<div>').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 = $('<div>').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 ();
}
}
};

37
website/o3dv/sidebarpanel.js Normal file
View File

@ -0,0 +1,37 @@
OV.SidebarPanel = class
{
constructor (parentDiv)
{
this.parentDiv = parentDiv;
this.panelDiv = $('<div>').appendTo (this.parentDiv);
this.titleDiv = null;
this.contentDiv = null;
this.visible = true;
}
Init (title, callbacks)
{
this.titleDiv = $('<div>').addClass ('ov_sidebar_title').appendTo (this.panelDiv);
this.contentDiv = $('<div>').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv);
let titleTextDiv = $('<div>').addClass ('ov_sidebar_title_text').html (title).appendTo (this.titleDiv);
let titleImg = $('<img>').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;
}
};

2
website/o3dv/website.js
View File

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