From 312d0c444704ee75c6995b49da9ef917e3622b20 Mon Sep 17 00:00:00 2001 From: kovacsv Date: Wed, 10 Nov 2021 15:58:14 +0100 Subject: [PATCH] Modify meshes button generation. --- website/o3dv/css/controls.css | 5 ++ website/o3dv/css/themes.css | 2 + website/o3dv/js/navigatorpanels.js | 114 +++++++++++++++++------------ website/o3dv/js/themehandler.js | 1 + 4 files changed, 76 insertions(+), 46 deletions(-) diff --git a/website/o3dv/css/controls.css b/website/o3dv/css/controls.css index 778eb43..215951a 100644 --- a/website/o3dv/css/controls.css +++ b/website/o3dv/css/controls.css @@ -29,6 +29,11 @@ div.ov_svg_icon.selected color: var(--ov_selected_icon_color); } +div.ov_svg_icon.disabled +{ + color: var(--ov_disabled_icon_color); +} + div.ov_thin_scrollbar { scrollbar-color: var(--ov_border_color) transparent; diff --git a/website/o3dv/css/themes.css b/website/o3dv/css/themes.css index f51f7a7..a137218 100644 --- a/website/o3dv/css/themes.css +++ b/website/o3dv/css/themes.css @@ -11,6 +11,7 @@ --ov_icon_color: #263238; --ov_light_icon_color: #838383; --ov_selected_icon_color: #3393bd; + --ov_disabled_icon_color: #cccccc; --ov_hover_color: #c9e5f8; --ov_hover_text_color: #3393bd; --ov_logo_text_color: #15334a; @@ -35,6 +36,7 @@ --ov_icon_color_dark: #fafafa; --ov_light_icon_color_dark: #bababa; --ov_selected_icon_color_dark: #3393bd; + --ov_disabled_icon_color_dark: #888888; --ov_hover_color_dark: #667c86; --ov_hover_text_color_dark: #fafafa; --ov_logo_text_color_dark: #fafafa; diff --git a/website/o3dv/js/navigatorpanels.js b/website/o3dv/js/navigatorpanels.js index 8ee4e66..045c020 100644 --- a/website/o3dv/js/navigatorpanels.js +++ b/website/o3dv/js/navigatorpanels.js @@ -409,89 +409,111 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel FillButtons (importResult) { - function CreateButton (parentDiv, name, icon, extraClasses, onClick) + function CreateButton (parentDiv, button, extraClasses, onClick) { - let button = $('
').addClass ('ov_navigator_button').attr ('alt', name).attr ('title', name).appendTo (parentDiv); + button.div = $('
').addClass ('ov_navigator_button').attr ('alt', button.name).attr ('title', button.name).appendTo (parentDiv); if (OV.IsDefined (extraClasses)) { - button.addClass (extraClasses); + button.div.addClass (extraClasses); } - let buttonIcon = OV.AddSvgIcon (button, icon); - button.click (() => { + button.iconDiv = OV.AddSvgIcon (button.div, button.icon); + button.div.click (() => { onClick (); }); - return buttonIcon; } - function CreateRadioButton (parentDiv, buttons, onClick) + function UpdateButtonsStatus (buttons, isHierarchical) { - function UpdateSelection (buttonDivs, selectedButtonDiv) - { - for (let buttonDiv of buttonDivs) { - buttonDiv.removeClass ('selected'); - } - selectedButtonDiv.addClass ('selected'); + if (isHierarchical) { + buttons.flatList.iconDiv.removeClass ('selected'); + buttons.treeView.iconDiv.addClass ('selected'); + } else { + buttons.flatList.iconDiv.addClass ('selected'); + buttons.treeView.iconDiv.removeClass ('selected'); } - - let buttonDivs = []; - for (let buttonIndex = 0; buttonIndex < buttons.length; buttonIndex++) { - const button = buttons[buttonIndex]; - let buttonDiv = CreateButton (parentDiv, button.name, button.icon, button.extraClasses, () => { - UpdateSelection (buttonDivs, buttonDiv); - onClick (buttonIndex); - }); - buttonDivs.push (buttonDiv); - } - - UpdateSelection (buttonDivs, buttonDivs[0]); } - let viewButtons = [ - { + let buttons = { + flatList : { name : 'Flat list', - icon : 'flat_list' + icon : 'flat_list', + div : null, + iconDiv : null }, - { + treeView : { name : 'Tree view', - icon : 'tree_view' + icon : 'tree_view', + div : null, + iconDiv : null + }, + expandAll : { + name : 'Expand all', + icon : 'expand', + div : null, + iconDiv : null + }, + collapseAll : { + name : 'Collapse all', + icon : 'collapse', + div : null, + iconDiv : null + }, + showHideMeshes : { + name : 'Show/hide meshes', + icon : 'visible', + div : null, + iconDiv : null + }, + fitToWindow : { + name : 'Fit meshes to window', + icon : 'fit', + div : null, + iconDiv : null } - ]; + }; - CreateRadioButton (this.buttonsDiv, viewButtons, (buttonIndex) => { - if (buttonIndex === 0) { - if (!this.isHierarchical) { - return; - } - this.isHierarchical = false; - } else if (buttonIndex === 1) { - if (this.isHierarchical) { - return; - } - this.isHierarchical = true; + CreateButton (this.buttonsDiv, buttons.flatList, null, () => { + if (!this.isHierarchical) { + return; } + this.isHierarchical = false; this.ClearMeshTree (); this.FillMeshTree (importResult.model); + UpdateButtonsStatus (buttons, this.isHierarchical); + this.callbacks.onSelectionRemoved (); + }); + + CreateButton (this.buttonsDiv, buttons.treeView, null, () => { + if (this.isHierarchical) { + return; + } + this.isHierarchical = true; + this.ClearMeshTree (); + this.FillMeshTree (importResult.model); + UpdateButtonsStatus (buttons, this.isHierarchical); this.callbacks.onSelectionRemoved (); }); $('
').addClass ('ov_navigator_buttons_separator').appendTo (this.buttonsDiv); - CreateButton (this.buttonsDiv, 'Expand all', 'expand', null, () => { + CreateButton (this.buttonsDiv, buttons.expandAll, null, () => { this.rootItem.ExpandAll (true); }); - CreateButton (this.buttonsDiv, 'Collapse all', 'collapse', null, () => { + CreateButton (this.buttonsDiv, buttons.collapseAll, null, () => { this.rootItem.ExpandAll (false); }); - this.showHideButton = CreateButton (this.buttonsDiv, 'Show/hide meshes', 'visible', 'right', () => { + this.showHideButton = CreateButton (this.buttonsDiv, buttons.showHideMeshes, 'right', () => { let nodeId = this.rootItem.GetNodeId (); this.callbacks.onNodeShowHide (nodeId); }); - CreateButton (this.buttonsDiv, 'Fit meshes to window', 'fit', 'right', () => { + CreateButton (this.buttonsDiv, buttons.fitToWindow, 'right', () => { let nodeId = this.rootItem.GetNodeId (); this.callbacks.onNodeFitToWindow (nodeId); }); + + UpdateButtonsStatus (buttons, this.isHierarchical); } FillMeshTree (model) diff --git a/website/o3dv/js/themehandler.js b/website/o3dv/js/themehandler.js index cb56623..2bfae18 100644 --- a/website/o3dv/js/themehandler.js +++ b/website/o3dv/js/themehandler.js @@ -12,6 +12,7 @@ OV.ThemeHandler = class { '--ov_icon_color': {}, '--ov_light_icon_color': {}, '--ov_selected_icon_color': {}, + '--ov_disabled_icon_color': {}, '--ov_hover_color': {}, '--ov_hover_text_color': {}, '--ov_logo_text_color': {},