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

Lower the jquery dependency of navigator.

Browse Source
This commit is contained in:
kovacsv 2021-11-27 10:37:02 +01:00
parent 86b86f09e6
commit 289e7cfff7
12 changed files with 198 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
source/viewer/domutils.js
View File

@ -1,19 +1,19 @@
OV.GetIntegerFromStyle = function (parameter)
{
return Math.round (parseFloat (parameter));
};
OV.GetInnerDimensions = function (element, outerWidth, outerHeight)
{
function GetInt (parameter)
{
return Math.round (parseFloat (parameter));
}
let style = getComputedStyle (element);
let width = outerWidth -
GetInt (style.borderLeftWidth) - GetInt (style.borderRightWidth) -
GetInt (style.marginLeft) - GetInt (style.marginRight) -
GetInt (style.paddingLeft) - GetInt (style.paddingRight);
OV.GetIntegerFromStyle (style.borderLeftWidth) - OV.GetIntegerFromStyle (style.borderRightWidth) -
OV.GetIntegerFromStyle (style.marginLeft) - OV.GetIntegerFromStyle (style.marginRight) -
OV.GetIntegerFromStyle (style.paddingLeft) - OV.GetIntegerFromStyle (style.paddingRight);
let height = outerHeight -
GetInt (style.borderTopWidth) - GetInt (style.borderBottomWidth) -
GetInt (style.marginTop) - GetInt (style.marginBottom) -
GetInt (style.paddingTop) - GetInt (style.paddingBottom);
OV.GetIntegerFromStyle (style.borderTopWidth) - OV.GetIntegerFromStyle (style.borderBottomWidth) -
OV.GetIntegerFromStyle (style.marginTop) - OV.GetIntegerFromStyle (style.marginBottom) -
OV.GetIntegerFromStyle (style.paddingTop) - OV.GetIntegerFromStyle (style.paddingBottom);
return {
width : width,
height : height
@ -46,16 +46,6 @@ OV.ClearDomElement = function (element)
}
};
OV.CreateDiv = function (className, innerHTML)
{
return OV.CreateDomElement ('div', className, innerHTML);
};
OV.AddDiv = function (parentElement, className, innerHTML)
{
return OV.AddDomElement (parentElement, 'div', className, innerHTML);
};
OV.InsertDomElementBefore = function (newElement, existingElement)
{
existingElement.parentNode.insertBefore (newElement, existingElement);
@ -75,3 +65,34 @@ OV.HideDomElement = function (element)
{
element.style.display = 'none';
};
OV.IsDomElementVisible = function (element)
{
return element.style.display !== 'none';
};
OV.GetDomElementOuterHeight = function (element)
{
let style = getComputedStyle (element);
return element.offsetHeight + OV.GetIntegerFromStyle (style.marginTop) + OV.GetIntegerFromStyle (style.marginBottom);
};
OV.SetDomElementWidth = function (element, width)
{
element.style.width = width.toString () + 'px';
};
OV.SetDomElementHeight = function (element, height)
{
element.style.height = height.toString () + 'px';
};
OV.CreateDiv = function (className, innerHTML)
{
return OV.CreateDomElement ('div', className, innerHTML);
};
OV.AddDiv = function (parentElement, className, innerHTML)
{
return OV.AddDomElement (parentElement, 'div', className, innerHTML);
};

7
website/o3dv/css/navigator.css
View File

@ -35,12 +35,17 @@ div.ov_navigator_tree_title
text-overflow: ellipsis;
overflow: hidden;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid var(--ov_border_color);
}
div.ov_navigator_tree_title.nomargin
{
margin-bottom: 0px;
}
div.ov_navigator_tree_panel
{
margin-top: 10px;
overflow: auto;
}

2
website/o3dv/js/exportdialog.js
View File

@ -218,7 +218,7 @@ OV.ExportDialog = class
let fileLink = OV.AddDomElement (fileList, 'a', 'ov_dialog_file_link');
fileLink.setAttribute ('href', url);
fileLink.setAttribute ('download', file.GetName ());
OV.AddSvgIcon (fileLink, 'file_download', 'ov_file_link_img');
OV.AddSvgIconElement (fileLink, 'file_download', 'ov_file_link_img');
OV.AddDiv (fileLink, 'ov_dialog_file_link_text', file.GetName ());
}

4
website/o3dv/js/modal.js
View File

@ -226,12 +226,12 @@ OV.ListPopup = class extends OV.PopupDialog
{
let listItemDiv = OV.AddDiv (this.listDiv, 'ov_popup_list_item');
if (item.icon) {
OV.AddSvgIcon (listItemDiv, item.icon, 'left_inline');
OV.AddSvgIconElement (listItemDiv, item.icon, 'left_inline');
}
if (item.color) {
let iconDiv = OV.AddDiv (listItemDiv, 'ov_popup_list_item_icon');
let colorCircle = OV.CreateInlineColorCircle (item.color);
colorCircle.appendTo (iconDiv);
iconDiv.appendChild (colorCircle);
}
OV.AddDiv (listItemDiv, 'ov_popup_list_item_name', item.name);
listItemDiv.addEventListener ('click', callbacks.onClick);

2
website/o3dv/js/navigator.js
View File

@ -38,7 +38,7 @@ OV.Navigator = class
this.mainDiv = mainDiv;
this.splitterDiv = splitterDiv;
this.panelSet = new OV.PanelSet (mainDiv);
this.panelSet = new OV.PanelSet (mainDiv.get (0));
this.callbacks = null;
this.selection = null;
this.tempSelectedMeshId = null;

101
website/o3dv/js/navigatorpanels.js
View File

@ -6,10 +6,10 @@ OV.NavigatorPopupButton = class
this.callbacks = null;
this.popup = null;
this.button = $('<div>').addClass ('ov_navigator_info_button').appendTo (this.parentDiv);
this.buttonText = $('<div>').addClass ('ov_navigator_info_button_text').appendTo (this.button);
OV.AddSvgIcon (this.button, 'arrow_right', 'ov_navigator_info_button_icon');
this.button.click (() => {
this.button = OV.AddDiv (this.parentDiv, 'ov_navigator_info_button');
this.buttonText = OV.AddDiv (this.button, 'ov_navigator_info_button_text');
OV.AddSvgIconElement (this.button, 'arrow_right', 'ov_navigator_info_button_icon');
this.button.addEventListener ('click', () => {
this.OnButtonClick ();
});
}
@ -49,7 +49,7 @@ OV.NavigatorMeshesPopupButton = class extends OV.NavigatorPopupButton
}
let meshesText = 'Meshes (' + this.meshInfoArray.length + ')';
this.buttonText.html (meshesText);
this.buttonText.innerHTML = meshesText;
}
OnButtonClick ()
@ -72,7 +72,7 @@ OV.NavigatorMeshesPopupButton = class extends OV.NavigatorPopupButton
this.popup = OV.ShowListPopup (meshItems, {
calculatePosition : (contentDiv) => {
return OV.CalculatePopupPositionToElementBottomRight (this.button.get (0), contentDiv);
return OV.CalculatePopupPositionToElementBottomRight (this.button, contentDiv);
},
onHoverStart : (index) => {
const meshData = this.meshInfoArray[index];
@ -105,7 +105,7 @@ OV.NavigatorMaterialsPopupButton = class extends OV.NavigatorPopupButton
}
let materialsText = 'Materials (' + this.materialInfoArray.length + ')';
this.buttonText.html (materialsText);
this.buttonText.innerHTML = materialsText;
}
OnButtonClick ()
@ -129,7 +129,7 @@ OV.NavigatorMaterialsPopupButton = class extends OV.NavigatorPopupButton
this.popup = OV.ShowListPopup (materialItems, {
calculatePosition : (contentDiv) => {
return OV.CalculatePopupPositionToElementBottomRight (this.button.get (0), contentDiv);
return OV.CalculatePopupPositionToElementBottomRight (this.button, contentDiv);
},
onClick : (index) => {
let usedMaterial = this.materialInfoArray[index];
@ -146,12 +146,13 @@ OV.NavigatorPanel = class extends OV.Panel
super (parentDiv);
this.callbacks = null;
this.titleDiv = $('<div>').addClass ('ov_navigator_tree_title').appendTo (this.panelDiv);
this.treeDiv = $('<div>').addClass ('ov_navigator_tree_panel').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv);
this.treeView = new OV.TreeView (this.treeDiv.get (0));
this.titleDiv = OV.AddDiv (this.panelDiv, 'ov_navigator_tree_title');
this.treeDiv = OV.AddDiv (this.panelDiv, 'ov_navigator_tree_panel ov_thin_scrollbar');
this.treeView = new OV.TreeView (this.treeDiv);
let panelName = this.GetName ();
this.titleDiv.html (panelName).attr ('title', panelName);
this.titleDiv.innerHTML = panelName;
this.titleDiv.setAttribute ('title', panelName);
}
Clear ()
@ -194,9 +195,9 @@ OV.NavigatorFilesPanel = class extends OV.NavigatorPanel
Resize ()
{
let titleHeight = this.titleDiv.outerHeight (true);
let height = this.parentDiv.height ();
this.treeDiv.outerHeight (height - titleHeight, true);
let titleHeight = OV.GetDomElementOuterHeight (this.titleDiv);
let height = this.parentDiv.offsetHeight;
OV.SetDomElementHeight (this.treeDiv, height - titleHeight);
}
Clear ()
@ -250,7 +251,7 @@ OV.NavigatorMaterialsPanel = class extends OV.NavigatorPanel
this.callbacks = null;
this.materialIndexToItem = new Map ();
this.popupDiv = $('<div>').addClass ('ov_navigator_info_panel').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv);
this.popupDiv = OV.AddDiv (this.panelDiv, 'ov_navigator_info_panel');
this.meshesButton = new OV.NavigatorMeshesPopupButton (this.popupDiv);
}
@ -266,10 +267,10 @@ OV.NavigatorMaterialsPanel = class extends OV.NavigatorPanel
Resize ()
{
let titleHeight = this.titleDiv.outerHeight (true);
let popupHeight = this.popupDiv.outerHeight (true);
let height = this.parentDiv.height ();
this.treeDiv.outerHeight (height - titleHeight - popupHeight, true);
let titleHeight = OV.GetDomElementOuterHeight (this.titleDiv);
let popupHeight = OV.GetDomElementOuterHeight (this.popupDiv);
let height = this.parentDiv.offsetHeight;
OV.SetDomElementHeight (this.treeDiv, height - titleHeight - popupHeight);
}
Clear ()
@ -336,12 +337,14 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel
this.meshInstanceIdToItem = new Map ();
this.rootItem = null;
this.showTree = false;
this.buttins = null;
this.buttons = null;
this.titleDiv.classList.add ('nomargin');
this.treeView.AddClass ('tight');
this.buttonsDiv = $('<div>').addClass ('ov_navigator_buttons').insertBefore (this.treeDiv);
this.buttonsDiv = OV.CreateDiv ('ov_navigator_buttons');
OV.InsertDomElementBefore (this.buttonsDiv, this.treeDiv);
this.popupDiv = $('<div>').addClass ('ov_navigator_info_panel').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv);
this.popupDiv = OV.AddDiv (this.panelDiv, 'ov_navigator_info_panel');
this.materialsButton = new OV.NavigatorMaterialsPopupButton (this.popupDiv);
}
@ -357,17 +360,17 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel
Resize ()
{
let titleHeight = this.titleDiv.outerHeight (true);
let buttonsHeight = this.buttonsDiv.outerHeight (true);
let popupHeight = this.popupDiv.outerHeight (true);
let height = this.parentDiv.height ();
this.treeDiv.outerHeight (height - titleHeight - buttonsHeight - popupHeight);
let titleHeight = this.titleDiv.offsetHeight;
let buttonsHeight = OV.GetDomElementOuterHeight (this.buttonsDiv);
let popupHeight = OV.GetDomElementOuterHeight (this.popupDiv);
let height = this.parentDiv.offsetHeight;
OV.SetDomElementHeight (this.treeDiv, height - titleHeight - buttonsHeight - popupHeight);
}
Clear ()
{
this.ClearMeshTree ();
this.buttonsDiv.empty ();
OV.ClearDomElement (this.buttonsDiv);
this.buttons = null;
}
@ -409,14 +412,16 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel
FillButtons (importResult)
{
function CreateButton (parentDiv, button, extraClasses, onClick)
function CreateButton (parentDiv, button, className, onClick)
{
button.div = $('<div>').addClass ('ov_navigator_button').attr ('alt', button.name).attr ('title', button.name).appendTo (parentDiv);
if (OV.IsDefined (extraClasses)) {
button.div.addClass (extraClasses);
button.div = OV.AddDiv (parentDiv, 'ov_navigator_button');
button.div.setAttribute ('alt', button.name);
button.div.setAttribute ('title', button.name);
if (className) {
button.div.classList.add (className);
}
button.iconDiv = OV.AddSvgIcon (button.div, button.icon);
button.div.click (() => {
button.iconDiv = OV.AddSvgIconElement (button.div, button.icon);
button.div.addEventListener ('click', () => {
onClick ();
});
}
@ -424,20 +429,20 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel
function UpdateButtonsStatus (buttons, showTree, isHierarchical)
{
if (showTree) {
buttons.flatList.iconDiv.removeClass ('selected');
buttons.treeView.iconDiv.addClass ('selected');
buttons.flatList.iconDiv.classList.remove ('selected');
buttons.treeView.iconDiv.classList.add ('selected');
} else {
buttons.flatList.iconDiv.addClass ('selected');
buttons.treeView.iconDiv.removeClass ('selected');
buttons.flatList.iconDiv.classList.add ('selected');
buttons.treeView.iconDiv.classList.remove ('selected');
}
if (showTree && isHierarchical) {
buttons.separator.show ();
buttons.expandAll.div.show ();
buttons.collapseAll.div.show ();
OV.ShowDomElement (buttons.separator);
OV.ShowDomElement (buttons.expandAll.div);
OV.ShowDomElement (buttons.collapseAll.div);
} else {
buttons.separator.hide ();
buttons.expandAll.div.hide ();
buttons.collapseAll.div.hide ();
OV.HideDomElement (buttons.separator);
OV.HideDomElement (buttons.expandAll.div);
OV.HideDomElement (buttons.collapseAll.div);
}
}
@ -528,7 +533,7 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel
UpdateView (this, importResult, isHierarchical);
});
this.buttons.separator = $('<div>').addClass ('ov_navigator_buttons_separator').appendTo (this.buttonsDiv);
this.buttons.separator = OV.AddDiv (this.buttonsDiv, 'ov_navigator_buttons_separator');
CreateButton (this.buttonsDiv, this.buttons.expandAll, null, () => {
this.rootItem.ExpandAll (true);
@ -596,9 +601,9 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel
let rootItem = new OV.NodeItem (null, nodeId, {
onVisibilityChanged : (isVisible) => {
if (isVisible) {
OV.SetSvgIconImage (panel.buttons.showHideMeshes.iconDiv, 'visible');
OV.SetSvgIconImageElement (panel.buttons.showHideMeshes.iconDiv, 'visible');
} else {
OV.SetSvgIconImage (panel.buttons.showHideMeshes.iconDiv, 'hidden');
OV.SetSvgIconImageElement (panel.buttons.showHideMeshes.iconDiv, 'hidden');
}
}
});

49
website/o3dv/js/panelset.js
View File

@ -3,7 +3,8 @@ OV.Panel = class
constructor (parentDiv)
{
this.parentDiv = parentDiv;
this.panelDiv = $('<div>').appendTo (parentDiv).hide ();
this.panelDiv = OV.AddDiv (parentDiv);
OV.HideDomElement (this.panelDiv);
this.visible = false;
}
@ -12,11 +13,6 @@ OV.Panel = class
return null;
}
GetPanelDiv ()
{
return this.panelDiv;
}
IsVisible ()
{
return this.visible;
@ -30,9 +26,9 @@ OV.Panel = class
this.visible = show;
if (this.visible) {
this.panelDiv.show ();
OV.ShowDomElement (this.panelDiv);
} else {
this.panelDiv.hide ();
OV.HideDomElement (this.panelDiv);
}
}
@ -52,8 +48,8 @@ OV.PanelSet = class
constructor (parentDiv)
{
this.parentDiv = parentDiv;
this.menuDiv = $('<div>').addClass ('ov_panel_set_menu').appendTo (parentDiv);
this.contentDiv = $('<div>').addClass ('ov_panel_set_content').addClass ('ov_thin_scrollbar').appendTo (parentDiv);
this.menuDiv = OV.AddDiv (parentDiv, 'ov_panel_set_menu');
this.contentDiv = OV.AddDiv (parentDiv, 'ov_panel_set_content ov_thin_scrollbar');
this.panels = [];
this.panelButtons = [];
this.panelsVisible = true;
@ -75,10 +71,11 @@ OV.PanelSet = class
AddPanel (panel)
{
this.panels.push (panel);
let button = OV.AddSvgIcon (this.menuDiv, panel.GetIcon (), 'ov_panel_set_menu_button');
button.attr ('alt', panel.GetName ()).attr ('title', panel.GetName ());
let button = OV.AddSvgIconElement (this.menuDiv, panel.GetIcon (), 'ov_panel_set_menu_button');
button.setAttribute ('alt', panel.GetName ());
button.setAttribute ('title', panel.GetName ());
this.panelButtons.push (button);
button.click (() => {
button.addEventListener ('click', () => {
if (panel === this.GetVisiblePanel ()) {
this.ShowPanels (false);
} else {
@ -107,18 +104,18 @@ OV.PanelSet = class
this.panelsVisible = show;
this.requestedPanelsVisible = show;
if (this.panelsVisible) {
this.contentDiv.show ();
this.parentDiv.outerWidth (this.menuDiv.outerWidth (true) + this.panelsPrevWidth, true);
OV.ShowDomElement (this.contentDiv);
OV.SetDomElementWidth (this.parentDiv, this.menuDiv.offsetWidth + this.panelsPrevWidth);
} else {
for (let panelButton of this.panelButtons) {
panelButton.removeClass ('selected');
panelButton.classList.remove ('selected');
}
for (let panel of this.panels) {
panel.Show (false);
}
this.panelsPrevWidth = this.contentDiv.outerWidth (true);
this.parentDiv.outerWidth (this.menuDiv.outerWidth (true), true);
this.contentDiv.hide ();
this.panelsPrevWidth = this.contentDiv.offsetWidth;
OV.SetDomElementWidth (this.parentDiv, this.menuDiv.offsetWidth);
OV.HideDomElement (this.contentDiv);
}
this.callbacks.onShowHidePanels (this.panelsVisible);
@ -134,10 +131,10 @@ OV.PanelSet = class
let panelButton = this.GetPanelButton (panel);
for (let otherPanelButton of this.panelButtons) {
if (otherPanelButton !== panelButton) {
otherPanelButton.removeClass ('selected');
otherPanelButton.classList.remove ('selected');
}
}
panelButton.addClass ('selected');
panelButton.classList.add ('selected');
for (let otherPanel of this.panels) {
if (otherPanel !== panel) {
@ -164,7 +161,7 @@ OV.PanelSet = class
SetPanelIcon (panel, icon)
{
let panelButton = this.GetPanelButton (panel);
OV.SetSvgIconImage (panelButton, icon);
OV.SetSvgIconImageElement (panelButton, icon);
}
GetPanelButton (panel)
@ -179,9 +176,9 @@ OV.PanelSet = class
this.ShowPanels (this.requestedPanelsVisible);
return;
}
let height = this.parentDiv.height ();
this.menuDiv.outerHeight (height, true);
this.contentDiv.outerHeight (height, true);
let height = this.parentDiv.offsetHeight;
OV.SetDomElementHeight (this.menuDiv, height);
OV.SetDomElementHeight (this.contentDiv, height);
if (this.panelsVisible) {
for (let panel of this.panels) {
if (panel.IsVisible ()) {
@ -193,7 +190,7 @@ OV.PanelSet = class
IsParentVisible ()
{
return this.parentDiv.is (':visible');
return OV.IsDomElementVisible (this.parentDiv);
}
Clear ()

2
website/o3dv/js/sidebar.js
View File

@ -4,7 +4,7 @@ OV.Sidebar = class
{
this.mainDiv = mainDiv;
this.splitterDiv = splitterDiv;
this.panelSet = new OV.PanelSet (mainDiv);
this.panelSet = new OV.PanelSet (mainDiv.get (0));
this.detailsPanel = new OV.DetailsSidebarPanel (this.panelSet.GetContentDiv ());
this.settingsPanel = new OV.SettingsSidebarPanel (this.panelSet.GetContentDiv ());

112
website/o3dv/js/sidebarpanels.js
View File

@ -1,4 +1,3 @@
OV.SidebarPanel = class extends OV.Panel
{
constructor (parentDiv)
@ -6,12 +5,12 @@ OV.SidebarPanel = class extends OV.Panel
super (parentDiv);
this.callbacks = null;
this.titleDiv = $('<div>').addClass ('ov_sidebar_title').appendTo (this.panelDiv);
this.contentDiv = $('<div>').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv);
$('<div>').addClass ('ov_sidebar_title_text').html (this.GetName ()).appendTo (this.titleDiv);
this.titleDiv = OV.AddDiv (this.panelDiv, 'ov_sidebar_title');
this.contentDiv = OV.AddDiv (this.panelDiv, 'ov_sidebar_content ov_thin_scrollbar');
let panelName = this.GetName ();
this.titleDiv.html (panelName).attr ('title', panelName);
OV.AddDiv (this.titleDiv, 'ov_sidebar_title_text', this.GetName ());
this.titleDiv.setAttribute ('title', panelName);
}
GetName ()
@ -21,7 +20,7 @@ OV.SidebarPanel = class extends OV.Panel
Clear ()
{
this.contentDiv.empty ();
OV.ClearDomElement (this.contentDiv);
}
Init (callbacks)
@ -50,7 +49,7 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
AddObject3DProperties (object3D)
{
this.Clear ();
let table = $('<div>').addClass ('ov_property_table').appendTo (this.contentDiv);
let table = OV.AddDiv (this.contentDiv, 'ov_property_table');
let boundingBox = OV.GetBoundingBox (object3D);
let size = OV.SubCoord3D (boundingBox.max, boundingBox.min);
this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Vertices', object3D.VertexCount ()));
@ -73,7 +72,7 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
return new OV.Property (OV.PropertyType.Number, null, volume);
});
if (object3D.PropertyGroupCount () > 0) {
let customTable = $('<div>').addClass ('ov_property_table ov_property_table_custom').appendTo (this.contentDiv);
let customTable = OV.AddDiv (this.contentDiv, 'ov_property_table ov_property_table_custom');
for (let i = 0; i < object3D.PropertyGroupCount (); i++) {
const propertyGroup = object3D.GetPropertyGroup (i);
this.AddPropertyGroup (customTable, propertyGroup);
@ -98,7 +97,7 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
}
this.Clear ();
let table = $('<div>').addClass ('ov_property_table').appendTo (this.contentDiv);
let table = OV.AddDiv (this.contentDiv, 'ov_property_table');
let typeString = null;
if (material.type === OV.MaterialType.Phong) {
typeString = 'Phong';
@ -127,16 +126,16 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
AddPropertyGroup (table, propertyGroup)
{
let row = $('<div>').addClass ('ov_property_table_row group').appendTo (table);
row.html (propertyGroup.name).attr ('title', propertyGroup.name);
let row = OV.AddDiv (table, 'ov_property_table_row group', propertyGroup.name);
row.setAttribute ('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);
let row = OV.AddDiv (table, 'ov_property_table_row');
let nameColumn = OV.AddDiv (row, 'ov_property_table_cell ov_property_table_name', property.name + ':');
let valueColumn = OV.AddDiv (row, 'ov_property_table_cell ov_property_table_value');
nameColumn.setAttribute ('title', property.name);
this.DisplayPropertyValue (property, valueColumn);
return row;
}
@ -144,24 +143,24 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
AddPropertyInGroup (table, property)
{
let row = this.AddProperty (table, property);
row.addClass ('ingroup');
row.classList.add ('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 row = OV.AddDiv (table, 'ov_property_table_row');
let nameColumn = OV.AddDiv (row, 'ov_property_table_cell ov_property_table_name', name + ':');
let valueColumn = OV.AddDiv (row, 'ov_property_table_cell ov_property_table_value');
nameColumn.setAttribute ('title', name);
let calculateButton = $('<div>').addClass ('ov_property_table_button').html ('Calculate...').appendTo (valueColumn);
calculateButton.click (() => {
valueColumn.empty ();
valueColumn.html ('Please wait...');
let calculateButton = OV.AddDiv (valueColumn, 'ov_property_table_button', 'Calculate...');
calculateButton.addEventListener ('click', () => {
OV.ClearDomElement (valueColumn);
valueColumn.innerHTML = 'Please wait...';
OV.RunTaskAsync (() => {
let propertyValue = calculateValue ();
if (propertyValue === null) {
valueColumn.html ('-');
valueColumn.innerHTML = '-';
} else {
this.DisplayPropertyValue (propertyValue, valueColumn);
}
@ -171,7 +170,7 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
DisplayPropertyValue (property, targetDiv)
{
targetDiv.empty ();
OV.ClearDomElement (targetDiv);
let valueText = null;
if (property.type === OV.PropertyType.Text) {
valueText = property.value;
@ -189,11 +188,12 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
} 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);
targetDiv.appendChild (colorCircle);
OV.AddDomElement (targetDiv, 'span', null, hexString);
}
if (valueText !== null) {
targetDiv.html (valueText).attr ('title', valueText);
targetDiv.innerHTML = valueText;
targetDiv.setAttribute ('title', valueText);
}
}
};
@ -252,21 +252,21 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
{
let hasDefaultMaterial = OV.HasDefaultMaterial (model);
if (!hasDefaultMaterial) {
this.defaultColorInput.warning.show ();
OV.ShowDomElement (this.defaultColorInput.warning);
} else {
this.defaultColorInput.warning.hide ();
OV.HideDomElement (this.defaultColorInput.warning);
}
this.Resize ();
}
AddColorParameter (title, description, warningText, predefinedColors, defaultValue, onChange)
{
let contentDiv = $('<div>').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv);
let titleDiv = $('<div>').addClass ('ov_sidebar_subtitle').appendTo (contentDiv);
let colorInput = $('<div>').addClass ('color-picker').appendTo (titleDiv);
$('<span>').html (title).appendTo (titleDiv);
let contentDiv = OV.AddDiv (this.contentDiv, 'ov_sidebar_settings_content');
let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle');
let colorInput = OV.AddDiv (titleDiv, 'color-picker');
OV.AddDomElement (titleDiv, 'span', null, title);
const pickr = Pickr.create ({
el : colorInput.get (0),
el : colorInput,
theme : 'monolith',
position : 'left-start',
swatches : predefinedColors,
@ -297,12 +297,13 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
);
onChange (ovColor);
});
$('<div>').addClass ('ov_sidebar_settings_padded').html (description).appendTo (contentDiv);
OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded', description);
let warningDiv = null;
if (warningText !== null) {
warningDiv = $('<div>').addClass ('ov_sidebar_settings_padded').appendTo (contentDiv);
OV.AddSvgIcon (warningDiv, 'warning', 'left_inline light');
$('<div>').addClass ('ov_sidebar_settings_warning').html (warningText).appendTo (warningDiv);
warningDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded');
let icon = OV.AddSvgIconElement (warningDiv, 'warning', 'left_inline');
icon.classList.add ('light');
OV.AddDiv (warningDiv, 'ov_sidebar_settings_warning', warningText);
}
return {
pickr : pickr,
@ -314,11 +315,15 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
{
function AddRadioButton (contentDiv, themeId, themeName, onChange)
{
let row = $('<div>').addClass ('ov_sidebar_settings_row').appendTo (contentDiv);
let label = $('<label>').attr ('for', themeId.toString ()).appendTo (row);
let radio = $('<input>').addClass ('ov_radio_button').attr ('type', 'radio').attr ('id', themeId.toString ()).attr ('name', 'theme').appendTo (label);
$('<span>').html (themeName).appendTo (label);
radio.change (() => {
let row = OV.AddDiv (contentDiv, 'ov_sidebar_settings_row');
let label = OV.AddDomElement (row, 'label');
label.setAttribute ('for', themeId.toString ());
let radio = OV.AddDomElement (label, 'input', 'ov_radio_button');
radio.setAttribute ('type', 'radio');
radio.setAttribute ('id', themeId.toString ());
radio.setAttribute ('name', 'theme');
OV.AddDomElement (label, 'span', null, themeName);
radio.addEventListener ('change', () => {
onChange (themeId);
});
return radio;
@ -328,15 +333,16 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
{
for (let i = 0; i < radioButtons.length; i++) {
let radioButton = radioButtons[i];
radioButton.prop ('checked', radioButton.attr ('id') === defaultValue.toString ());
radioButton.checked = radioButton.getAttribute ('id') === defaultValue.toString ();
}
}
let contentDiv = $('<div>').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv);
let titleDiv = $('<div>').addClass ('ov_sidebar_subtitle').appendTo (contentDiv);
OV.AddSvgIcon (titleDiv, 'theme', 'ov_sidebar_subtitle_icon');
$('<div>').html ('Appearance').appendTo (titleDiv);
let buttonsDiv = $('<div>').addClass ('ov_sidebar_settings_padded').appendTo (contentDiv);
let contentDiv = OV.AddDiv (this.contentDiv, 'ov_sidebar_settings_content');
let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle');
OV.AddSvgIconElement (titleDiv, 'theme', 'ov_sidebar_subtitle_icon');
OV.AddDiv (titleDiv, null, 'Appearance');
let buttonsDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded');
let result = {
buttons : [],
select: (value) => {
@ -352,8 +358,8 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
AddResetToDefaultsButton (defaultSettings)
{
let resetToDefaultsButton = $('<div>').addClass ('ov_button').addClass ('outline').addClass ('ov_sidebar_button').html ('Reset to Default').appendTo (this.contentDiv);
resetToDefaultsButton.click (() => {
let resetToDefaultsButton = OV.AddDiv (this.contentDiv, 'ov_button outline ov_sidebar_button', 'Reset to Default');
resetToDefaultsButton.addEventListener ('click', () => {
this.backgroundColorInput.pickr.setColor ('#' + OV.ColorToHexString (defaultSettings.backgroundColor));
this.callbacks.onBackgroundColorChange (defaultSettings.backgroundColor);
this.defaultColorInput.pickr.setColor ('#' + OV.ColorToHexString (defaultSettings.defaultColor));

7
website/o3dv/js/treeview.js
View File

@ -126,7 +126,8 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
this.openButtonIcon = 'arrow_down';
this.closeButtonIcon = 'arrow_right';
this.openCloseButton = OV.CreateSvgIcon (this.openButtonIcon, 'ov_tree_item_icon').insertBefore (this.nameElement);
this.openCloseButton = OV.CreateSvgIconElement (this.openButtonIcon, 'ov_tree_item_icon');
OV.InsertDomElementBefore (this.openCloseButton, this.nameElement);
}
AddChild (child)
@ -169,10 +170,10 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
return;
}
if (show) {
OV.SetSvgIconImage (this.openCloseButton, this.openButtonIcon);
OV.SetSvgIconImageElement (this.openCloseButton, this.openButtonIcon);
$(this.childrenDiv).slideDown (400, onComplete);
} else {
OV.SetSvgIconImage (this.openCloseButton, this.closeButtonIcon);
OV.SetSvgIconImageElement (this.openCloseButton, this.closeButtonIcon);
$(this.childrenDiv).slideUp (400, onComplete);
}
}

28
website/o3dv/js/utils.js
View File

@ -108,29 +108,6 @@ OV.DownloadArrayBufferAsFile = function (arrayBuffer, fileName)
OV.DownloadUrlAsFile (url, fileName);
};
OV.CreateSvgIcon = function (iconName, extraClass)
{
let div = $('<div>').addClass ('ov_svg_icon');
$('<i>').addClass ('icon').addClass ('icon-' + iconName).appendTo (div);
if (extraClass !== undefined && extraClass !== null) {
div.addClass (extraClass);
}
return div;
};
OV.AddSvgIcon = function (parent, iconName, extraClass)
{
let div = OV.CreateSvgIcon (iconName, extraClass);
div.appendTo (parent);
return div;
};
OV.SetSvgIconImage = function (icon, iconName)
{
let iconChild = icon.children (':first');
iconChild.removeClass ().addClass ('icon').addClass ('icon-' + iconName);
};
OV.CreateSvgIconElement = function (iconName, className)
{
let iconDiv = OV.CreateDiv ('ov_svg_icon');
@ -174,7 +151,10 @@ OV.CreateInlineColorCircle = function (color)
Math.max (0, color.b - 50)
);
let darkerColorHexString = '#' + OV.ColorToHexString (darkerColor);
return $('<div>').addClass ('ov_color_circle').css ('background', hexString).css ('border', '1px solid ' + darkerColorHexString);
let circleDiv = OV.CreateDiv ('ov_color_circle');
circleDiv.style.background = hexString;
circleDiv.style.border = '1px solid ' + darkerColorHexString;
return circleDiv;
};
OV.InstallVerticalSplitter = function (splitterDiv, resizedDiv, flipped, onResize)

4
website/o3dv/js/website.js
View File

@ -340,8 +340,8 @@ OV.Website = class
InitViewer ()
{
let canvas = $('<canvas>').appendTo (this.parameters.viewerDiv);
this.viewer.Init (canvas.get (0));
let canvas = OV.AddDomElement (this.parameters.viewerDiv.get (0), 'canvas');
this.viewer.Init (canvas);
this.viewer.SetBackgroundColor (this.settings.backgroundColor);
this.viewer.SetEnvironmentMap ([
'assets/envmaps/grayclouds/posx.jpg',