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

Tree view refactor.

Browse Source
This commit is contained in:
kovacsv 2021-10-26 18:07:28 +02:00
parent c1e3a33107
commit 16a122fcf0
8 changed files with 75 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
OV.ExportType =
OV.ExportType =
{
Model : 1,
Image : 2
@ -62,7 +62,7 @@ OV.ExportDialog = class
exportFormatButtonDivs : [],
formatSettingsDiv : null,
selectedFormat : null
};
};
}
Show (model, viewer)
@ -72,7 +72,7 @@ OV.ExportDialog = class
'Export Failed',
'Please load a model before exporting.',
null
);
);
this.callbacks.onDialog (messageDialog);
return;
}
@ -98,10 +98,10 @@ OV.ExportDialog = class
}
}
]);
let text = 'Select a format from the below list to export your model. Please note that the export can take several second.';
$('<div>').html (text).addClass ('ov_dialog_section').appendTo (contentDiv);
let buttonWidth = 40;
let optionsHeight = 50;
let exportFormatSelect = $('<div>').addClass ('ov_dialog_select').appendTo (contentDiv);
@ -115,7 +115,7 @@ OV.ExportDialog = class
});
}
this.OnExportFormatSelect (0);
mainDialog.Show ();
this.callbacks.onDialog (mainDialog);
}
@ -146,7 +146,7 @@ OV.ExportDialog = class
formatInput.change (() => {
this.formatParameters.selectedFormat = format;
});
}
}
}
ExportFormat (model, viewer)
@ -206,21 +206,21 @@ OV.ExportDialog = class
let text = 'You can download your exported files here.';
$('<div>').html (text).addClass ('ov_dialog_section').appendTo (contentDiv);
let fileListSection = $('<div>').addClass ('ov_dialog_section').appendTo (contentDiv);
let fileList = $('<div>').addClass ('ov_dialog_file_list').addClass ('ov_thin_scrollbar').appendTo (fileListSection);
let fileList = $('<div>').addClass ('ov_dialog_file_list').addClass ('ov_thin_scrollbar').appendTo (fileListSection);
for (let i = 0; i < files.length; i++) {
let file = files[i];
let url = OV.CreateObjectUrl (file.GetBufferContent ());
let fileLink = $('<a>').addClass ('ov_dialog_file_link').appendTo (fileList);
fileLink.attr ('href', url);
fileLink.attr ('download', file.GetName ());
OV.CreateSvgIcon (fileLink, 'file_download', 'ov_file_link_img');
OV.AddSvgIcon (fileLink, 'file_download', 'ov_file_link_img');
$('<div>').addClass ('ov_dialog_file_link_text').html (file.GetName ()).appendTo (fileLink);
}
dialog.Show ();
this.callbacks.onDialog (dialog);
}
}
};

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

@ -111,7 +111,7 @@ OV.Dialog = class
{
this.modal = new OV.Modal ();
}
GetContentDiv ()
{
return this.modal.GetContentDiv ();
@ -140,7 +140,7 @@ OV.Dialog = class
Hide ()
{
this.modal.Close ();
}
}
};
OV.ProgressDialog = class extends OV.Dialog
@ -198,7 +198,7 @@ OV.ButtonDialog = class extends OV.Dialog
for (let i = 0; i < buttons.length; i++) {
AddButton (buttons[i], buttonsInnerDiv);
}
return dialogContentDiv;
}
};
@ -238,7 +238,7 @@ OV.ListPopup = class extends OV.PopupDialog
{
let listItemDiv = $('<div>').addClass ('ov_popup_list_item').appendTo (this.listDiv);
if (item.icon) {
OV.CreateSvgIcon (listItemDiv, item.icon, 'left_inline');
OV.AddSvgIcon (listItemDiv, item.icon, 'left_inline');
}
if (item.color) {
let iconDiv = $('<div>').addClass ('ov_popup_list_item_icon').appendTo (listItemDiv);

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

@ -112,7 +112,7 @@ OV.NavigatorInfoPanel = class
{
let button = $('<div>').addClass ('ov_navigator_info_button').appendTo (parentDiv);
$('<div>').addClass ('ov_navigator_info_button_text').html (buttonText).appendTo (button);
OV.CreateSvgIcon (button, 'arrow_right', 'ov_navigator_info_button_icon');
OV.AddSvgIcon (button, 'arrow_right', 'ov_navigator_info_button_icon');
button.click (() => {
onClick (button);
});

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

@ -6,7 +6,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
this.backgroundColorInput = null;
this.defaultColorInput = null;
this.defaultColorWarning = null;
this.themeInput = null;
this.themeInput = null;
}
GetTitle ()
@ -101,7 +101,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
let warningDiv = null;
if (warningText !== null) {
warningDiv = $('<div>').addClass ('ov_sidebar_settings_padded').appendTo (contentDiv);
OV.CreateSvgIcon (warningDiv, 'warning', 'left_inline light');
OV.AddSvgIcon (warningDiv, 'warning', 'left_inline light');
$('<div>').addClass ('ov_sidebar_settings_warning').html (warningText).appendTo (warningDiv);
}
return {
@ -133,9 +133,8 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
}
let contentDiv = $('<div>').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv);
// TODO: icon
let titleDiv = $('<div>').addClass ('ov_sidebar_subtitle').appendTo (contentDiv);
OV.CreateSvgIcon (titleDiv, 'theme', 'ov_sidebar_subtitle_icon');
OV.AddSvgIcon (titleDiv, 'theme', 'ov_sidebar_subtitle_icon');
$('<div>').html ('Appearance').appendTo (titleDiv);
let buttonsDiv = $('<div>').addClass ('ov_sidebar_settings_padded').appendTo (contentDiv);
let result = {

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

@ -14,7 +14,7 @@ OV.SidebarPanel = class
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.GetTitle ()).appendTo (this.titleDiv);
let titleImg = OV.CreateSvgIcon (this.titleDiv, 'close', 'ov_sidebar_title_img');
let titleImg = OV.AddSvgIcon (this.titleDiv, 'close', 'ov_sidebar_title_img');
titleImg.click (() => {
callbacks.onClose ();
});
@ -54,6 +54,6 @@ OV.SidebarPanel = class
HidePopups ()
{
}
};

26
website/o3dv/js/toolbar.js
View File

@ -4,23 +4,23 @@ OV.ToolbarButton = class
{
this.image = image;
this.imageTitle = imageTitle;
this.onClick = onClick;
this.selected = false;
this.buttonDiv = null;
this.buttonImg = null;
}
CreateDomElement (parentDiv)
{
this.buttonDiv = $('<div>').addClass ('ov_toolbar_button').appendTo (parentDiv);
this.buttonImg = OV.CreateSvgIcon (this.buttonDiv, this.image);
if (this.onClick !== null) {
this.buttonDiv.click (this.onClick);
this.selected = false;
this.buttonDiv = $('<div>').addClass ('ov_toolbar_button');
this.buttonImg = OV.AddSvgIcon (this.buttonDiv, this.image);
if (onClick !== null) {
this.buttonDiv.click (onClick);
}
this.buttonDiv.attr ('alt', this.imageTitle);
OV.InstallTooltip (this.buttonDiv, this.imageTitle);
}
AddDomElements (parentDiv)
{
this.buttonDiv.appendTo (parentDiv);
}
AddClass (className)
{
this.buttonDiv.addClass (className);
@ -48,7 +48,7 @@ OV.ToolbarButton = class
this.buttonDiv.removeClass ('selected');
} else {
this.buttonDiv.addClass ('selected');
}
}
}
};
@ -62,7 +62,7 @@ OV.Toolbar = class
AddImageButton (image, imageTitle, onClick)
{
let button = new OV.ToolbarButton (image, imageTitle, onClick);
button.CreateDomElement (this.mainDiv);
button.AddDomElements (this.mainDiv);
return button;
}

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

@ -11,28 +11,24 @@ OV.TreeViewButton = class
constructor (imagePath)
{
this.imagePath = imagePath;
this.domElement = null;
this.clickHandler = null;
this.mainElement = OV.CreateSvgIcon (this.imagePath, 'ov_tree_item_button');
this.mainElement.attr ('src', this.imagePath);
}
SetImage (imagePath)
{
this.imagePath = imagePath;
OV.SetSvgIconImage (this.domElement, this.imagePath);
OV.SetSvgIconImage (this.mainElement, this.imagePath);
}
OnClick (clickHandler)
{
this.clickHandler = clickHandler;
this.mainElement.click (clickHandler);
}
CreateDomElement (parentDiv)
AddDomElements (parentDiv)
{
this.domElement = OV.CreateSvgIcon (parentDiv, this.imagePath, 'ov_tree_item_button');
this.domElement.attr ('src', this.imagePath);
if (this.clickHandler !== null) {
this.domElement.click (this.clickHandler);
}
this.mainElement.appendTo (parentDiv);
}
};
@ -41,29 +37,14 @@ OV.TreeViewItem = class
constructor (name)
{
this.name = name;
this.mainElement = null;
this.nameElement = null;
}
GetName ()
{
return this.name;
}
SetName (name)
{
this.name = name;
}
CreateMainElement (parentDiv)
{
this.mainElement = $('<div>').addClass ('ov_tree_item').attr ('title', this.name).appendTo (parentDiv);
}
CreateNameElement ()
{
this.mainElement = $('<div>').addClass ('ov_tree_item').attr ('title', this.name);
this.nameElement = $('<div>').addClass ('ov_tree_item_name').html (this.name).appendTo (this.mainElement);
}
}
AddDomElements (parentDiv)
{
this.mainElement.appendTo (parentDiv);
}
};
OV.TreeViewSingleItem = class extends OV.TreeViewItem
@ -92,12 +73,6 @@ OV.TreeViewSingleItem = class extends OV.TreeViewItem
{
this.parent = parent;
}
CreateDomElement (parentDiv)
{
this.CreateMainElement (parentDiv);
this.CreateNameElement ();
}
};
OV.TreeViewButtonItem = class extends OV.TreeViewSingleItem
@ -105,36 +80,21 @@ OV.TreeViewButtonItem = class extends OV.TreeViewSingleItem
constructor (name)
{
super (name);
this.buttons = [];
this.onNameClick = null;
this.mainElement.addClass ('clickable');
this.buttonsDiv = $('<div>').addClass ('ov_tree_item_button_container').insertBefore (this.nameElement);
}
OnNameClick (onNameClick)
{
this.onNameClick = onNameClick;
this.nameElement.css ('cursor', 'pointer');
this.nameElement.click (onNameClick);
}
AddButton (button)
{
this.buttons.push (button);
}
CreateDomElement (parentDiv)
{
this.CreateMainElement (parentDiv);
this.mainElement.addClass ('clickable');
let buttonContainer = $('<div>').addClass ('ov_tree_item_button_container').appendTo (this.mainElement);
for (let i = 0; i < this.buttons.length; i++) {
let button = this.buttons[i];
button.CreateDomElement (buttonContainer);
}
this.CreateNameElement ();
if (this.onNameClick !== null) {
this.nameElement.css ('cursor', 'pointer');
this.nameElement.click ((ev) => {
this.onNameClick ();
});
}
button.AddDomElements (this.buttonsDiv);
}
};
@ -144,33 +104,15 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
{
super (name);
this.iconPath = iconPath;
this.childrenDiv = null;
this.showChildren = false;
this.openCloseButton = null;
this.childrenDiv = null;
this.openButtonIcon = 'arrow_down';
this.closeButtonIcon = 'arrow_up';
this.animated = true;
this.openCloseHandler = null;
}
GetName ()
{
return this.name;
}
SetName (name)
{
this.name = name;
}
SetAnimated (animated)
{
this.animated = animated;
}
SetOpenCloseHandler (openCloseHandler)
{
this.openCloseHandler = openCloseHandler;
OV.CreateSvgIcon (this.iconPath, 'ov_tree_item_icon').insertBefore (this.nameElement);
let buttonContainer = $('<div>').addClass ('ov_tree_item_button_container').insertBefore (this.nameElement);
this.openCloseButton = OV.AddSvgIcon (buttonContainer, this.openButtonIcon, 'ov_tree_item_button');
}
ShowChildren (show, onComplete)
@ -181,24 +123,10 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
}
if (show) {
OV.SetSvgIconImage (this.openCloseButton, this.openButtonIcon);
if (this.animated) {
this.childrenDiv.slideDown (400, onComplete);
} else {
this.childrenDiv.show ();
if (onComplete) {
onComplete ();
}
}
this.childrenDiv.slideDown (400, onComplete);
} else {
OV.SetSvgIconImage (this.openCloseButton, this.closeButtonIcon);
if (this.animated) {
this.childrenDiv.slideUp (400, onComplete);
} else {
this.childrenDiv.hide ();
if (onComplete) {
onComplete ();
}
}
this.childrenDiv.slideUp (400, onComplete);
}
}
@ -211,33 +139,16 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
this.mainElement.click ((ev) => {
this.showChildren = !this.showChildren;
this.ShowChildren (this.showChildren, null);
if (this.openCloseHandler !== null) {
this.openCloseHandler ();
}
});
}
return this.childrenDiv;
}
GetChildrenDiv ()
{
return this.childrenDiv;
}
AddChild (child)
{
this.CreateChildrenDiv ();
child.SetParent (this);
child.CreateDomElement (this.childrenDiv);
}
CreateDomElement (parentDiv)
{
this.CreateMainElement (parentDiv);
OV.CreateSvgIcon (this.mainElement, this.iconPath, 'ov_tree_item_icon');
let buttonContainer = $('<div>').addClass ('ov_tree_item_button_container').appendTo (this.mainElement);
this.openCloseButton = OV.CreateSvgIcon (buttonContainer, this.openButtonIcon, 'ov_tree_item_button');
this.CreateNameElement ();
child.AddDomElements (this.childrenDiv);
}
};
@ -250,7 +161,7 @@ OV.TreeView = class
AddItem (item)
{
item.CreateDomElement (this.mainDiv);
item.AddDomElements (this.mainDiv);
}
Clear ()

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

@ -42,7 +42,7 @@ OV.InstallTooltip = function (item, text)
let itemWidth = item.outerWidth (true);
let itemHeight = item.outerHeight (true);
let tooltipWidth = tooltip.outerWidth (true);
let tooltipMargin = 10;
let left = itemOffset.left + itemWidth / 2 - tooltipWidth / 2;
if (left + tooltipWidth > windowWidth - tooltipMargin) {
@ -61,7 +61,7 @@ OV.InstallTooltip = function (item, text)
if (!OV.IsHoverEnabled ()) {
return;
}
let bodyObj = $(document.body);
let tooltip = null;
item.hover (
@ -104,9 +104,9 @@ OV.DownloadArrayBufferAsFile = function (arrayBuffer, fileName)
OV.DownloadUrlAsFile (url, fileName);
};
OV.CreateSvgIcon = function (parent, iconName, extraClass)
OV.CreateSvgIcon = function (iconName, extraClass)
{
let div = $('<div>').addClass ('ov_svg_icon').appendTo (parent);
let div = $('<div>').addClass ('ov_svg_icon');
$('<i>').addClass ('icon').addClass ('icon-' + iconName).appendTo (div);
if (extraClass !== undefined && extraClass !== null) {
div.addClass (extraClass);
@ -114,6 +114,13 @@ OV.CreateSvgIcon = function (parent, iconName, 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)
{
icon.empty ();
@ -127,7 +134,7 @@ OV.CreateHeaderButton = function (iconName, title, link)
buttonLink.attr ('target', '_blank');
buttonLink.attr ('rel', 'noopener noreferrer');
OV.InstallTooltip (buttonLink, title);
OV.CreateSvgIcon (buttonLink, iconName, 'header_button');
OV.AddSvgIcon (buttonLink, iconName, 'header_button');
return buttonLink;
};