From 281d49c75049e6034e20aa492b0b1c44eee3486f Mon Sep 17 00:00:00 2001 From: kovacsv Date: Thu, 28 Oct 2021 14:08:58 +0200 Subject: [PATCH] Move open/close arrow to the left of navigator group items. --- source/core/core.js | 5 ++++ website/o3dv/js/featureset.js | 2 +- website/o3dv/js/navigator.js | 21 +++++++++++--- website/o3dv/js/navigatoritems.js | 27 +++++++++++++++--- website/o3dv/js/treeview.js | 47 ++++++++++++++++++++----------- 5 files changed, 77 insertions(+), 25 deletions(-) diff --git a/source/core/core.js b/source/core/core.js index 17f93e9..d5f371d 100644 --- a/source/core/core.js +++ b/source/core/core.js @@ -3,6 +3,11 @@ OV = }; +OV.IsDefined = function (val) +{ + return val !== undefined && val !== null; +}; + OV.ValueOrDefault = function (val, def) { if (val === undefined || val === null) { diff --git a/website/o3dv/js/featureset.js b/website/o3dv/js/featureset.js index 13f41b9..5e65cc5 100644 --- a/website/o3dv/js/featureset.js +++ b/website/o3dv/js/featureset.js @@ -1,4 +1,4 @@ OV.FeatureSet = { - + NavigatorTree : false }; diff --git a/website/o3dv/js/navigator.js b/website/o3dv/js/navigator.js index 0b8ef28..c6af28d 100644 --- a/website/o3dv/js/navigator.js +++ b/website/o3dv/js/navigator.js @@ -234,10 +234,23 @@ OV.Navigator = class function AddModelNodeToTree (navigator, model, node, parentItem) { for (let childNode of node.GetChildNodes ()) { - let nodeItem = new OV.TreeViewGroupItem (OV.GetNodeName (childNode.GetName ()), 'meshes'); - parentItem.AddChild (nodeItem); - nodeItem.ShowChildren (true, null); - AddModelNodeToTree (navigator, model, childNode, nodeItem); + if (OV.FeatureSet.NavigatorTree) { + const nodeName = OV.GetNodeName (childNode.GetName ()); + const nodeId = childNode.GetId (); + let nodeItem = new OV.NodeItem (nodeName, nodeId, { + onShowHide : (selectedNodeId) => { + console.log ('sh'); + }, + onFitToWindow : (selectedNodeId) => { + console.log ('fit'); + } + }); + parentItem.AddChild (nodeItem); + nodeItem.ShowChildren (true, null); + AddModelNodeToTree (navigator, model, childNode, nodeItem); + } else { + AddModelNodeToTree (navigator, model, childNode, parentItem); + } } for (let meshIndex of node.GetMeshIndices ()) { diff --git a/website/o3dv/js/navigatoritems.js b/website/o3dv/js/navigatoritems.js index 720ce9a..14f51c4 100644 --- a/website/o3dv/js/navigatoritems.js +++ b/website/o3dv/js/navigatoritems.js @@ -3,9 +3,8 @@ OV.MaterialItem = class extends OV.TreeViewButtonItem constructor (name, materialIndex, callbacks) { super (name); - this.materialIndex = materialIndex; - this.OnNameClick (() => { - callbacks.onSelected (this.materialIndex); + this.OnClick (() => { + callbacks.onSelected (materialIndex); }); } }; @@ -31,7 +30,7 @@ OV.MeshItem = class extends OV.TreeViewButtonItem }); this.AddButton (this.showHideButton); - this.OnNameClick (() => { + this.OnClick (() => { callbacks.onSelected (this.meshInstanceId); }); } @@ -57,6 +56,26 @@ OV.MeshItem = class extends OV.TreeViewButtonItem } }; +OV.NodeItem = class extends OV.TreeViewGroupButtonItem +{ + constructor (name, nodeId, callbacks) + { + super (name, null); + + this.fitToWindowButton = new OV.TreeViewButton ('fit'); + this.fitToWindowButton.OnClick (() => { + callbacks.onFitToWindow (nodeId); + }); + this.AddButton (this.fitToWindowButton); + + this.showHideButton = new OV.TreeViewButton ('visible'); + this.showHideButton.OnClick (() => { + callbacks.onShowHide (nodeId); + }); + this.AddButton (this.showHideButton); + } +}; + OV.NavigatorItems = class { constructor () diff --git a/website/o3dv/js/treeview.js b/website/o3dv/js/treeview.js index ca1ac19..bf0240e 100644 --- a/website/o3dv/js/treeview.js +++ b/website/o3dv/js/treeview.js @@ -23,7 +23,10 @@ OV.TreeViewButton = class OnClick (clickHandler) { - this.mainElement.click (clickHandler); + this.mainElement.click ((ev) => { + ev.stopPropagation (); + clickHandler (ev); + }); } AddDomElements (parentDiv) @@ -42,15 +45,21 @@ OV.TreeViewItem = class this.nameElement = $('
').addClass ('ov_tree_item_name').html (this.name).appendTo (this.mainElement); } - AddDomElements (parentDiv) + OnClick (onClick) { - this.mainElement.appendTo (parentDiv); + this.mainElement.css ('cursor', 'pointer'); + this.mainElement.click (onClick); } SetParent (parent) { this.parent = parent; } + + AddDomElements (parentDiv) + { + this.mainElement.appendTo (parentDiv); + } }; OV.TreeViewSingleItem = class extends OV.TreeViewItem @@ -84,18 +93,10 @@ OV.TreeViewButtonItem = class extends OV.TreeViewSingleItem constructor (name) { super (name); - this.onNameClick = null; - this.mainElement.addClass ('clickable'); this.buttonsDiv = $('
').addClass ('ov_tree_item_button_container').insertBefore (this.nameElement); } - OnNameClick (onNameClick) - { - this.nameElement.css ('cursor', 'pointer'); - this.nameElement.click (onNameClick); - } - AddButton (button) { button.AddDomElements (this.buttonsDiv); @@ -107,16 +108,16 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem constructor (name, iconPath) { super (name); - this.iconPath = iconPath; this.showChildren = false; this.childrenDiv = null; this.openButtonIcon = 'arrow_down'; this.closeButtonIcon = 'arrow_up'; - OV.CreateSvgIcon (this.iconPath, 'ov_tree_item_icon').insertBefore (this.nameElement); - let buttonContainer = $('
').addClass ('ov_tree_item_button_container').insertBefore (this.nameElement); - this.openCloseButton = OV.AddSvgIcon (buttonContainer, this.openButtonIcon, 'ov_tree_item_button'); + this.openCloseButton = OV.CreateSvgIcon (this.openButtonIcon, 'ov_tree_item_icon').insertBefore (this.nameElement); + if (OV.IsDefined (iconPath)) { + OV.CreateSvgIcon (iconPath, 'ov_tree_item_icon').insertBefore (this.nameElement); + } } ShowChildren (show, onComplete) @@ -140,7 +141,7 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem this.childrenDiv = $('
').addClass ('ov_tree_view_children').insertAfter (this.mainElement); this.mainElement.addClass ('clickable'); this.ShowChildren (this.showChildren, null); - this.mainElement.click ((ev) => { + this.OnClick ((ev) => { this.showChildren = !this.showChildren; this.ShowChildren (this.showChildren, null); }); @@ -156,6 +157,20 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem } }; +OV.TreeViewGroupButtonItem = class extends OV.TreeViewGroupItem +{ + constructor (name, iconPath) + { + super (name, iconPath); + this.buttonsDiv = $('
').addClass ('ov_tree_item_button_container').insertBefore (this.nameElement); + } + + AddButton (button) + { + button.AddDomElements (this.buttonsDiv); + } +}; + OV.TreeView = class { constructor (parentDiv)