debounce

mrdoob · May 23, 2024 · 05d155b · 05d155b
1 parent e712cda
commit 05d155b
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/editor/css/main.css b/editor/css/main.css
@@ -76,18 +76,17 @@ textarea, input { outline: none; } /* osx */
 
 .TabbedPanel .Tabs {
 	position: relative;
-	z-index: 1; /** above Panel **/
+	z-index: 1; /** Above .Panels **/
 	display: block;
 	width: 100%;
 	white-space: pre;
 	overflow: hidden;
 }
 
-	.TabbedPanel .Tabs:hover {
+	.TabbedPanel .Tabs.entered {
 		overflow-x: auto;
 	}
 
-
 	.TabbedPanel .Tabs .Tab {
 		padding: 10px 9px;
 		text-transform: uppercase;
@@ -309,6 +308,7 @@ select {
 
 #resizer {
 	position: absolute;
+	z-index: 2; /* Above #sidebar */
 	top: 32px;
 	right: 350px;
 	width: 5px;

diff --git a/editor/js/libs/ui.js b/editor/js/libs/ui.js
@@ -187,7 +187,7 @@ properties.forEach( function ( property ) {
 
 // events
 
-const events = [ 'KeyUp', 'KeyDown', 'MouseOver', 'MouseOut', 'Click', 'DblClick', 'Change', 'Input' ];
+const events = [ 'KeyUp', 'KeyDown', 'MouseOver', 'MouseOut', 'MouseLeave', 'MouseEnter', 'Click', 'DblClick', 'Change', 'Input' ];
 
 events.forEach( function ( event ) {
 
@@ -1080,6 +1080,34 @@ class UITabbedPanel extends UIDiv {
 
 		this.selected = '';
 
+		//
+
+		let delayHoveringTimer = null;
+
+		this.tabsDiv.onMouseEnter( () => {
+
+			if ( delayHoveringTimer !== null ) {
+
+				clearTimeout( delayHoveringTimer );
+
+			}
+
+			delayHoveringTimer = setTimeout( () => this.tabsDiv.addClass( 'entered' ), 200 );
+
+		} );
+
+		this.tabsDiv.onMouseLeave( () => {
+
+			if ( delayHoveringTimer !== null ) {
+
+				clearTimeout( delayHoveringTimer );
+
+			}
+
+			this.tabsDiv.removeClass( 'entered' );
+
+		} );
+
 	}
 
 	select( id ) {