Simplify navigator code.
This commit is contained in:
kovacsv
parent
50d733eba3
commit
b96eaf9570
@ -1,173 +0,0 @@
|
||||
OV.InfoPanel = class
|
||||
{
|
||||
constructor (parentDiv)
|
||||
{
|
||||
this.mainDiv = $('<div>').addClass ('ov_info_panel_main').appendTo (parentDiv);
|
||||
this.treeView = new OV.TreeView (this.mainDiv);
|
||||
this.detailsItem = new OV.TreeViewGroupItem ('Details', 'assets/images/tree/details.svg');
|
||||
this.detailsItem.ShowChildren (!OV.IsSmallHeight (), null);
|
||||
this.treeView.AddItem (this.detailsItem);
|
||||
let childrenDiv = this.detailsItem.CreateChildrenDiv ();
|
||||
childrenDiv.addClass ('ov_info_panel_content');
|
||||
this.popup = null;
|
||||
}
|
||||
|
||||
SetOpenCloseHandler (openCloseHandler)
|
||||
{
|
||||
this.detailsItem.SetAnimated (false);
|
||||
this.detailsItem.SetOpenCloseHandler (openCloseHandler);
|
||||
}
|
||||
|
||||
FillWithMaterialInfo (info, callbacks)
|
||||
{
|
||||
function AddRow (container, name, fillValue)
|
||||
{
|
||||
let row = $('<div>').addClass ('ov_info_box_row').appendTo (container);
|
||||
$('<div>').addClass ('ov_info_box_row_name').html (name).appendTo (row);
|
||||
let value = $('<div>').addClass ('ov_info_box_row_value').appendTo (row);
|
||||
fillValue (value);
|
||||
}
|
||||
|
||||
function AddTextRow (container, name, value)
|
||||
{
|
||||
AddRow (container, name, function (valueDiv) {
|
||||
valueDiv.html (value).attr ('title', value);
|
||||
});
|
||||
}
|
||||
|
||||
function AddTextureRow (container, textureName)
|
||||
{
|
||||
AddRow (container, textureName.type, function (valueDiv) {
|
||||
valueDiv.html (textureName.name).attr ('title', textureName.path);
|
||||
});
|
||||
}
|
||||
|
||||
this.Clear ();
|
||||
if (info === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
let contentDiv = this.detailsItem.GetChildrenDiv ();
|
||||
|
||||
let infoContainer = $('<div>').addClass ('ov_info_box').appendTo (contentDiv);
|
||||
AddRow (infoContainer, 'Color', function (valueDiv) {
|
||||
let colorString = '#' + OV.ColorToHexString (info.diffuse);
|
||||
$('<div>').addClass ('ov_info_box_rgbbox').css ('background', colorString).attr ('title', colorString).appendTo (valueDiv);
|
||||
$('<div>').addClass ('ov_info_box_rgbtext').html (colorString).attr ('title', colorString).appendTo (valueDiv);
|
||||
});
|
||||
let opacityString = parseInt (Math.round (info.opacity * 100.0), 10) + '%';
|
||||
AddTextRow (infoContainer, 'Opacity', opacityString);
|
||||
|
||||
if (info.textureNames.length > 0) {
|
||||
let texturesContainer = $('<div>').addClass ('ov_info_box').appendTo (contentDiv);
|
||||
$('<div>').addClass ('ov_info_box_title').html ('Textures').appendTo (texturesContainer);
|
||||
let texturesContent = $('<div>').addClass ('ov_info_box_details').appendTo (texturesContainer);
|
||||
for (let i = 0; i < info.textureNames.length; i++) {
|
||||
let textureName = info.textureNames[i];
|
||||
AddTextureRow (texturesContent, textureName);
|
||||
}
|
||||
}
|
||||
|
||||
let meshItems = [];
|
||||
for (let i = 0; i < info.usedByMeshes.length; i++) {
|
||||
let meshInfo = info.usedByMeshes[i];
|
||||
meshItems.push ({
|
||||
name : OV.GetMeshName (meshInfo.name)
|
||||
});
|
||||
}
|
||||
|
||||
let obj = this;
|
||||
let meshesText = 'Meshes (' + meshItems.length + ')';
|
||||
this.CreateButton (contentDiv, meshesText, function (button) {
|
||||
if (meshItems.length === 0) {
|
||||
return;
|
||||
}
|
||||
obj.popup = OV.ShowListPopup (button, meshItems, {
|
||||
onHoverStart : function (index) {
|
||||
const meshItem = info.usedByMeshes[index];
|
||||
callbacks.onMeshHover (meshItem.index);
|
||||
},
|
||||
onHoverStop : function (index) {
|
||||
callbacks.onMeshHover (null);
|
||||
},
|
||||
onClick : function (index) {
|
||||
const meshItem = info.usedByMeshes[index];
|
||||
callbacks.onMeshSelect (meshItem.index);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
FillWithModelInfo (info, callbacks)
|
||||
{
|
||||
function AddCounter (parent, name, value)
|
||||
{
|
||||
let infoBox = $('<div>').addClass ('ov_info_box_column').css ('width', '50%').appendTo (parent);
|
||||
$('<div>').addClass ('ov_info_box_title').html (name).appendTo (infoBox);
|
||||
$('<div>').addClass ('ov_info_box_content_big').html (value.toLocaleString ('en-US')).appendTo (infoBox);
|
||||
}
|
||||
|
||||
this.Clear ();
|
||||
if (info === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
let contentDiv = this.detailsItem.GetChildrenDiv ();
|
||||
|
||||
let counterContainer = $('<div>').addClass ('ov_info_box').appendTo (contentDiv);
|
||||
AddCounter (counterContainer, 'Vertices', info.element.VertexCount ());
|
||||
AddCounter (counterContainer, 'Triangles', info.element.TriangleCount ());
|
||||
|
||||
let sizeContainer = $('<div>').addClass ('ov_info_box').appendTo (contentDiv);
|
||||
$('<div>').addClass ('ov_info_box_title').html ('Size').appendTo (sizeContainer);
|
||||
let size = OV.SubCoord3D (info.boundingBox.max, info.boundingBox.min);
|
||||
let sizeString = size.x.toFixed (1) + ' x ' + size.y.toFixed (1) + ' x ' + size.z.toFixed (1);
|
||||
$('<div>').addClass ('ov_info_box_content').html (sizeString).attr ('title', sizeString).appendTo (sizeContainer);
|
||||
|
||||
let materialItems = [];
|
||||
for (let i = 0; i < info.usedMaterials.length; i++) {
|
||||
let usedMaterial = info.usedMaterials[i];
|
||||
materialItems.push ({
|
||||
name : OV.GetMaterialName (usedMaterial.name),
|
||||
color : OV.ColorToHexString (usedMaterial.diffuse)
|
||||
});
|
||||
}
|
||||
|
||||
let obj = this;
|
||||
if (OV.FeatureSet.CalculateQuantities) {
|
||||
this.CreateButton (contentDiv, 'Calculate Quantities', function (button) {
|
||||
obj.popup = OV.ShowQuantitiesPopup (button, info.element);
|
||||
});
|
||||
}
|
||||
|
||||
let materialsText = 'Materials (' + materialItems.length + ')';
|
||||
this.CreateButton (contentDiv, materialsText, function (button) {
|
||||
obj.popup = OV.ShowListPopup (button, materialItems, {
|
||||
onClick : function (index) {
|
||||
let usedMaterial = info.usedMaterials[index];
|
||||
callbacks.onMaterialSelect (usedMaterial.index);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
CreateButton (parentDiv, buttonText, onClick)
|
||||
{
|
||||
let button = $('<div>').addClass ('ov_info_box_button').appendTo (parentDiv);
|
||||
$('<div>').addClass ('ov_info_box_button_text').html (buttonText).appendTo (button);
|
||||
$('<img>').addClass ('ov_info_box_button_icon').attr ('src', 'assets/images/tree/arrow_right.svg').appendTo (button);
|
||||
button.click (function () {
|
||||
onClick (button);
|
||||
});
|
||||
}
|
||||
|
||||
Clear ()
|
||||
{
|
||||
if (this.popup !== null) {
|
||||
this.popup.Hide ();
|
||||
this.popup = null;
|
||||
}
|
||||
let contentDiv = this.detailsItem.GetChildrenDiv ();
|
||||
contentDiv.empty ();
|
||||
}
|
||||
};
|
||||
@ -21,16 +21,16 @@ OV.NavigatorInfoPanel = class
|
||||
this.popup = null;
|
||||
}
|
||||
|
||||
FillWithMaterialInfo (info, callbacks)
|
||||
FillWithMaterialInfo (usedByMeshes, callbacks)
|
||||
{
|
||||
this.Clear ();
|
||||
if (info === null) {
|
||||
if (usedByMeshes === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
let meshItems = [];
|
||||
for (let i = 0; i < info.usedByMeshes.length; i++) {
|
||||
let meshInfo = info.usedByMeshes[i];
|
||||
for (let i = 0; i < usedByMeshes.length; i++) {
|
||||
let meshInfo = usedByMeshes[i];
|
||||
meshItems.push ({
|
||||
name : OV.GetMeshName (meshInfo.name)
|
||||
});
|
||||
@ -44,30 +44,30 @@ OV.NavigatorInfoPanel = class
|
||||
}
|
||||
obj.popup = OV.ShowListPopup (button, meshItems, {
|
||||
onHoverStart : function (index) {
|
||||
const meshItem = info.usedByMeshes[index];
|
||||
const meshItem = usedByMeshes[index];
|
||||
callbacks.onMeshHover (meshItem.index);
|
||||
},
|
||||
onHoverStop : function (index) {
|
||||
callbacks.onMeshHover (null);
|
||||
},
|
||||
onClick : function (index) {
|
||||
const meshItem = info.usedByMeshes[index];
|
||||
const meshItem = usedByMeshes[index];
|
||||
callbacks.onMeshSelect (meshItem.index);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
FillWithModelInfo (info, callbacks)
|
||||
FillWithModelInfo (usedMaterials, callbacks)
|
||||
{
|
||||
this.Clear ();
|
||||
if (info === null) {
|
||||
if (usedMaterials === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
let materialItems = [];
|
||||
for (let i = 0; i < info.usedMaterials.length; i++) {
|
||||
let usedMaterial = info.usedMaterials[i];
|
||||
for (let i = 0; i < usedMaterials.length; i++) {
|
||||
let usedMaterial = usedMaterials[i];
|
||||
materialItems.push ({
|
||||
name : OV.GetMaterialName (usedMaterial.name),
|
||||
color : OV.ColorToHexString (usedMaterial.diffuse)
|
||||
@ -75,17 +75,11 @@ OV.NavigatorInfoPanel = class
|
||||
}
|
||||
|
||||
let obj = this;
|
||||
if (OV.FeatureSet.CalculateQuantities) {
|
||||
this.CreateButton (this.parentDiv, 'Calculate Quantities', function (button) {
|
||||
obj.popup = OV.ShowQuantitiesPopup (button, info.element);
|
||||
});
|
||||
}
|
||||
|
||||
let materialsText = 'Materials (' + materialItems.length + ')';
|
||||
this.CreateButton (this.parentDiv, materialsText, function (button) {
|
||||
obj.popup = OV.ShowListPopup (button, materialItems, {
|
||||
onClick : function (index) {
|
||||
let usedMaterial = info.usedMaterials[index];
|
||||
let usedMaterial = usedMaterials[index];
|
||||
callbacks.onMaterialSelect (usedMaterial.index);
|
||||
}
|
||||
});
|
||||
@ -114,9 +108,10 @@ OV.NavigatorInfoPanel = class
|
||||
|
||||
OV.Navigator = class
|
||||
{
|
||||
constructor (parentDiv)
|
||||
constructor (parentDiv, sidebar)
|
||||
{
|
||||
this.parentDiv = parentDiv;
|
||||
this.sidebar = sidebar;
|
||||
this.callbacks = null;
|
||||
this.titleDiv = $('<div>').addClass ('ov_navigator_tree_title').addClass ('ov_thin_scrollbar').appendTo (parentDiv);
|
||||
this.treeDiv = $('<div>').addClass ('ov_navigator_tree_panel').addClass ('ov_thin_scrollbar').appendTo (parentDiv);
|
||||
@ -315,16 +310,16 @@ OV.Navigator = class
|
||||
{
|
||||
let obj = this;
|
||||
if (this.selection === null) {
|
||||
let modelInfo = this.callbacks.getModelInformation ();
|
||||
this.infoPanel.FillWithModelInfo (modelInfo, {
|
||||
let usedMaterial = this.callbacks.getMaterialsForModel ();
|
||||
this.infoPanel.FillWithModelInfo (usedMaterial, {
|
||||
onMaterialSelect : function (materialIndex) {
|
||||
obj.SetSelection (new OV.Selection (OV.SelectionType.Material, materialIndex));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (this.selection.type === OV.SelectionType.Material) {
|
||||
let materialInfo = this.callbacks.getMaterialInformation (this.selection.index);
|
||||
this.infoPanel.FillWithMaterialInfo (materialInfo, {
|
||||
let usedByMeshes = this.callbacks.getMeshesForMaterial (this.selection.index);
|
||||
this.infoPanel.FillWithMaterialInfo (usedByMeshes, {
|
||||
onMeshHover : function (meshIndex) {
|
||||
obj.SetTempSelectedMeshIndex (meshIndex);
|
||||
},
|
||||
@ -333,8 +328,8 @@ OV.Navigator = class
|
||||
}
|
||||
});
|
||||
} else if (this.selection.type === OV.SelectionType.Mesh) {
|
||||
let meshInfo = this.callbacks.getMeshInformation (this.selection.index);
|
||||
this.infoPanel.FillWithModelInfo (meshInfo, {
|
||||
let usedByMeshes = this.callbacks.getMaterialsForMesh (this.selection.index);
|
||||
this.infoPanel.FillWithModelInfo (usedByMeshes, {
|
||||
onMaterialSelect : function (materialIndex) {
|
||||
obj.SetSelection (new OV.Selection (OV.SelectionType.Material, materialIndex));
|
||||
}
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
OV.PropertyType =
|
||||
{
|
||||
Text : 1
|
||||
};
|
||||
|
||||
OV.Sidebar = class
|
||||
{
|
||||
constructor (parentDiv)
|
||||
@ -5,5 +10,8 @@ OV.Sidebar = class
|
||||
this.parentDiv = parentDiv;
|
||||
this.titleDiv = $('<div>').addClass ('ov_sidebar_title').addClass ('ov_thin_scrollbar').appendTo (parentDiv);
|
||||
this.titleDiv.html ('Details');
|
||||
this.contentDiv = $('<div>').appendTo (parentDiv);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
@ -7,8 +7,8 @@ OV.Website = class
|
||||
this.hashHandler = new OV.HashHandler ();
|
||||
this.cookieHandler = new OV.CookieHandler ();
|
||||
this.toolbar = new OV.Toolbar (this.parameters.toolbarDiv);
|
||||
this.navigator = new OV.Navigator (this.parameters.navigatorDiv);
|
||||
this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv);
|
||||
this.navigator = new OV.Navigator (this.parameters.navigatorDiv, this.sidebar);
|
||||
this.importSettings = new OV.ImportSettings ();
|
||||
this.modelLoader = new OV.ThreeModelLoader ();
|
||||
this.highlightMaterial = new THREE.MeshPhongMaterial ({
|
||||
@ -372,58 +372,19 @@ OV.Website = class
|
||||
return userData;
|
||||
}
|
||||
|
||||
function GetBoundingBoxInfo (boundingBox)
|
||||
function GetMeshesForMaterial (viewer, model, materialIndex)
|
||||
{
|
||||
if (boundingBox === null) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
min : new OV.Coord3D (boundingBox.min.x, boundingBox.min.y, boundingBox.min.z),
|
||||
max : new OV.Coord3D (boundingBox.max.x, boundingBox.max.y, boundingBox.max.z)
|
||||
};
|
||||
}
|
||||
|
||||
function GetMaterialInfo (viewer, model, materialIndex)
|
||||
{
|
||||
function AddTexture (textureNames, type, texture)
|
||||
{
|
||||
if (texture === null) {
|
||||
return;
|
||||
}
|
||||
textureNames.push ({
|
||||
type : type,
|
||||
name : OV.GetFileName (texture.name),
|
||||
path : texture.name
|
||||
});
|
||||
}
|
||||
|
||||
let material = model.GetMaterial (materialIndex);
|
||||
let materialInfo = {
|
||||
name : material.name,
|
||||
ambient : material.ambient.Clone (),
|
||||
diffuse : material.diffuse.Clone (),
|
||||
specular : material.specular.Clone (),
|
||||
opacity : material.opacity,
|
||||
textureNames : [],
|
||||
usedByMeshes : []
|
||||
};
|
||||
|
||||
AddTexture (materialInfo.textureNames, 'Base', material.diffuseMap);
|
||||
AddTexture (materialInfo.textureNames, 'Specular', material.specularMap);
|
||||
AddTexture (materialInfo.textureNames, 'Bump', material.bumpMap);
|
||||
AddTexture (materialInfo.textureNames, 'Normal', material.normalMap);
|
||||
AddTexture (materialInfo.textureNames, 'Emissive', material.emissiveMap);
|
||||
|
||||
let usedByMeshes = [];
|
||||
viewer.EnumerateMeshesUserData (function (meshUserData) {
|
||||
if (meshUserData.originalMaterials.indexOf (materialIndex) !== -1) {
|
||||
const mesh = model.GetMesh (meshUserData.originalMeshIndex);
|
||||
materialInfo.usedByMeshes.push ({
|
||||
usedByMeshes.push ({
|
||||
index : meshUserData.originalMeshIndex,
|
||||
name : mesh.GetName ()
|
||||
});
|
||||
}
|
||||
});
|
||||
return materialInfo;
|
||||
return usedByMeshes;
|
||||
}
|
||||
|
||||
function GetMaterialReferenceInfo (model, materialIndex)
|
||||
@ -436,50 +397,27 @@ OV.Website = class
|
||||
};
|
||||
}
|
||||
|
||||
function GetMeshInfo (viewer, model, meshIndex)
|
||||
function GetMaterialsForMesh (viewer, model, meshIndex)
|
||||
{
|
||||
let result = {
|
||||
element : null,
|
||||
usedMaterials : null,
|
||||
boundingBox : null
|
||||
};
|
||||
|
||||
let mesh = model.GetMesh (meshIndex);
|
||||
result.element = mesh;
|
||||
|
||||
let usedMaterials = [];
|
||||
let userData = GetMeshUserData (viewer, meshIndex);
|
||||
result.usedMaterials = [];
|
||||
for (let i = 0; i < userData.originalMaterials.length; i++) {
|
||||
const materialIndex = userData.originalMaterials[i];
|
||||
result.usedMaterials.push (GetMaterialReferenceInfo (model, materialIndex));
|
||||
usedMaterials.push (GetMaterialReferenceInfo (model, materialIndex));
|
||||
}
|
||||
result.usedMaterials.sort (function (a, b) {
|
||||
usedMaterials.sort (function (a, b) {
|
||||
return a.index - b.index;
|
||||
});
|
||||
|
||||
let boundingBox = viewer.GetBoundingBox (function (meshUserData) {
|
||||
return meshUserData.originalMeshIndex === meshIndex;
|
||||
});
|
||||
result.boundingBox = GetBoundingBoxInfo (boundingBox);
|
||||
return result;
|
||||
return usedMaterials;
|
||||
}
|
||||
|
||||
function GetModelInfo (model, viewer)
|
||||
function GetMaterialsForModel (model)
|
||||
{
|
||||
let result = {
|
||||
element : model,
|
||||
usedMaterials : null,
|
||||
boundingBox : null
|
||||
};
|
||||
let boundingBox = viewer.GetBoundingBox (function (meshUserData) {
|
||||
return true;
|
||||
});
|
||||
result.usedMaterials = [];
|
||||
let usedMaterials = [];
|
||||
for (let materialIndex = 0; materialIndex < model.MaterialCount (); materialIndex++) {
|
||||
result.usedMaterials.push (GetMaterialReferenceInfo (model, materialIndex));
|
||||
usedMaterials.push (GetMaterialReferenceInfo (model, materialIndex));
|
||||
}
|
||||
result.boundingBox = GetBoundingBoxInfo (boundingBox);
|
||||
return result;
|
||||
return usedMaterials;
|
||||
}
|
||||
|
||||
let obj = this;
|
||||
@ -496,14 +434,14 @@ OV.Website = class
|
||||
fitMeshToWindow : function (meshIndex) {
|
||||
obj.FitMeshToWindow (meshIndex);
|
||||
},
|
||||
getMaterialInformation : function (materialIndex) {
|
||||
return GetMaterialInfo (obj.viewer, obj.model, materialIndex);
|
||||
getMeshesForMaterial : function (materialIndex) {
|
||||
return GetMeshesForMaterial (obj.viewer, obj.model, materialIndex);
|
||||
},
|
||||
getMeshInformation : function (meshIndex) {
|
||||
return GetMeshInfo (obj.viewer, obj.model, meshIndex);
|
||||
getMaterialsForMesh : function (meshIndex) {
|
||||
return GetMaterialsForMesh (obj.viewer, obj.model, meshIndex);
|
||||
},
|
||||
getModelInformation : function () {
|
||||
return GetModelInfo (obj.model, obj.viewer);
|
||||
getMaterialsForModel : function () {
|
||||
return GetMaterialsForModel (obj.model);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user