From 53664a28b2220f7d36fd57383b19184b04373c79 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Fri, 12 Jun 2020 17:53:39 -0700 Subject: [PATCH 1/2] Editor: Implemented collapsable options --- editor/css/main.css | 27 +++++++++++-- editor/js/Sidebar.Scene.js | 78 ++++++++++++++++++++++++++++++++++---- editor/js/libs/ui.three.js | 12 +++--- 3 files changed, 100 insertions(+), 17 deletions(-) diff --git a/editor/css/main.css b/editor/css/main.css index 4f209f00ba69c..a23a3b981a2d0 100644 --- a/editor/css/main.css +++ b/editor/css/main.css @@ -135,9 +135,27 @@ textarea, input { outline: none; } /* osx */ /* outliner */ +#outliner .opener { + display: inline-block; + width: 14px; + height: 14px; + margin: 0px 4px; + vertical-align: top; + text-align: center; +} + + #outliner .opener.open:after { + content: '−'; + } + + #outliner .opener.closed:after { + content: '+'; + } + #outliner .option { border: 1px solid transparent; + } #outliner .option.drag { @@ -159,14 +177,15 @@ textarea, input { outline: none; } /* osx */ } #outliner .type { - position:relative; - top:-2px; - padding: 0 2px; + display: inline-block; + width: 14px; + height: 14px; color: #ddd; + text-align: center; } #outliner .type:after { - content: '■'; + content: '●'; } #outliner .Scene { diff --git a/editor/js/Sidebar.Scene.js b/editor/js/Sidebar.Scene.js index 444de95b99fc3..bfcf665ec5967 100644 --- a/editor/js/Sidebar.Scene.js +++ b/editor/js/Sidebar.Scene.js @@ -16,6 +16,8 @@ function SidebarScene( editor ) { // outliner + var nodeStates = new WeakMap(); + function buildOption( object, draggable ) { var option = document.createElement( 'div' ); @@ -23,6 +25,32 @@ function SidebarScene( editor ) { option.innerHTML = buildHTML( object ); option.value = object.id; + // opener + + if ( nodeStates.has( object ) ) { + + var state = nodeStates.get( object ); + + var opener = document.createElement( 'span' ); + opener.classList.add( 'opener' ); + + if ( object.children.length > 0 ) { + + opener.classList.add( state ? 'open' : 'closed' ); + + } + + opener.addEventListener( 'click', function () { + + nodeStates.set( object, nodeStates.get( object ) === false ); // toggle + refreshUI(); + + }, false ); + + option.insertBefore( opener, option.firstChild ); + + } + return option; } @@ -60,15 +88,15 @@ function SidebarScene( editor ) { function buildHTML( object ) { - var html = ' ' + escapeHTML( object.name ); + var html = ` ${ escapeHTML( object.name ) }`; if ( object.isMesh ) { var geometry = object.geometry; var material = object.material; - html += ' ' + escapeHTML( geometry.name ); - html += ' ' + escapeHTML( getMaterialName( material ) ); + html += ` ${ escapeHTML( geometry.name ) }`; + html += ` ${ escapeHTML( getMaterialName( material ) ) }`; } @@ -300,15 +328,25 @@ function SidebarScene( editor ) { var object = objects[ i ]; + if ( nodeStates.has( object ) === false ) { + + nodeStates.set( object, false ); + + } + var option = buildOption( object, true ); - option.style.paddingLeft = ( pad * 10 ) + 'px'; + option.style.paddingLeft = ( pad * 15 ) + 'px'; options.push( option ); - addObjects( object.children, pad + 1 ); + if ( nodeStates.get( object ) === true ) { + + addObjects( object.children, pad + 1 ); + + } } - } )( scene.children, 1 ); + } )( scene.children, 0 ); outliner.setOptions( options ); @@ -421,7 +459,33 @@ function SidebarScene( editor ) { if ( ignoreObjectSelectedSignal === true ) return; - outliner.setValue( object !== null ? object.id : null ); + if ( object !== null ) { + + let needsRefresh = false; + let parent = object.parent; + + while ( parent !== editor.scene ) { + + if ( nodeStates.get( parent ) !== true ) { + + nodeStates.set( parent, true ); + needsRefresh = true; + + } + + parent = parent.parent; + + } + + if ( needsRefresh ) refreshUI(); + + outliner.setValue( object.id ); + + } else { + + outliner.setValue( null ); + + } } ); diff --git a/editor/js/libs/ui.three.js b/editor/js/libs/ui.three.js index eb6266f1c9dcf..458524d320f33 100644 --- a/editor/js/libs/ui.three.js +++ b/editor/js/libs/ui.three.js @@ -584,16 +584,16 @@ UIOutliner.prototype.setOptions = function ( options ) { scope.options.push( div ); - div.addEventListener( 'click', onClick, false ); + div.addEventListener( 'click', onClick ); if ( div.draggable === true ) { - div.addEventListener( 'drag', onDrag, false ); - div.addEventListener( 'dragstart', onDragStart, false ); // Firefox needs this + div.addEventListener( 'drag', onDrag ); + div.addEventListener( 'dragstart', onDragStart ); // Firefox needs this - div.addEventListener( 'dragover', onDragOver, false ); - div.addEventListener( 'dragleave', onDragLeave, false ); - div.addEventListener( 'drop', onDrop, false ); + div.addEventListener( 'dragover', onDragOver ); + div.addEventListener( 'dragleave', onDragLeave ); + div.addEventListener( 'drop', onDrop ); } From a14d84458e8d62c7d6836c96b939fb5df0c29b51 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Fri, 12 Jun 2020 18:04:10 -0700 Subject: [PATCH 2/2] Editor: Tweaked outliner items padding. --- editor/js/Sidebar.Scene.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor/js/Sidebar.Scene.js b/editor/js/Sidebar.Scene.js index bfcf665ec5967..1f2e1d559a7ff 100644 --- a/editor/js/Sidebar.Scene.js +++ b/editor/js/Sidebar.Scene.js @@ -335,7 +335,7 @@ function SidebarScene( editor ) { } var option = buildOption( object, true ); - option.style.paddingLeft = ( pad * 15 ) + 'px'; + option.style.paddingLeft = ( pad * 18 ) + 'px'; options.push( option ); if ( nodeStates.get( object ) === true ) {