Initial project import

node_modules/three/examples/jsm/inspector/ui/Tab.js

@@ -0,0 +1,265 @@
+import { EventDispatcher } from 'three';
+
+/**
+ * Tab class
+ * @param {string} title - The title of the tab
+ * @param {Object} options - Options for the tab
+ * @param {boolean} [options.allowDetach=true] - Whether the tab can be detached into a separate window
+ * @param {boolean} [options.builtin=false] - Whether the tab should appear in the profiler-toggle button
+ * @param {string} [options.icon] - SVG icon HTML for the builtin button
+ *
+ * @example
+ * // Create a tab that can be detached (default behavior)
+ * const tab1 = new Tab('My Tab');
+ *
+ * // Create a tab that cannot be detached
+ * const tab2 = new Tab('Fixed Tab', { allowDetach: false });
+ *
+ * // Create a builtin tab that appears in the profiler-toggle
+ * const tab3 = new Tab('Builtin Tab', { builtin: true });
+ *
+ * // Create a builtin tab with custom icon
+ * const tab4 = new Tab('Settings', { builtin: true, icon: '<svg>...</svg>' });
+ *
+ * // Control builtin tab visibility
+ * tab3.showBuiltin(); // Show the builtin button and mini-content
+ * tab3.hideBuiltin(); // Hide the builtin button and mini-content
+ */
+export class Tab extends EventDispatcher {
+
+	constructor( title, options = {} ) {
+
+		super();
+
+		this.id = title.toLowerCase();
+		this.button = document.createElement( 'button' );
+		this.button.className = 'tab-btn';
+		this.button.textContent = title;
+
+		this.content = document.createElement( 'div' );
+		this.content.id = `${this.id}-content`;
+		this.content.className = 'profiler-content';
+
+		this._isActive = false;
+		this.isVisible = true;
+		this.isDetached = false;
+		this.detachedWindow = null;
+		this.allowDetach = options.allowDetach !== undefined ? options.allowDetach : true;
+		this.builtin = options.builtin !== undefined ? options.builtin : false;
+		this.icon = options.icon || null;
+		this.builtinButton = null; // Reference to the builtin button in profiler-toggle
+		this.miniContent = null; // Reference to the mini-panel content container
+		this.profiler = null; // Reference to the profiler instance
+		this.onVisibilityChange = null; // Callback for visibility changes
+
+	}
+
+	get inspector() {
+
+		return this.profiler.inspector;
+
+	}
+
+	get isActive() {
+
+		const isProfilerVisible = this.profiler && this.profiler.panel.classList.contains( 'visible' );
+
+		if ( ! isProfilerVisible ) return false;
+
+		return this.isDetached || this._isActive;
+
+	}
+
+	set isActive( value ) {
+
+		this._isActive = value;
+
+	}
+
+	init( /*inspector*/ ) { }
+
+	update( /*inspector*/ ) { }
+
+	setActive( isActive ) {
+
+		this.button.classList.toggle( 'active', isActive );
+		this.content.classList.toggle( 'active', isActive );
+
+		this.isActive = isActive;
+
+	}
+
+	show() {
+
+		this.content.style.display = '';
+		this.button.style.display = '';
+
+		this.isVisible = true;
+
+		// Show detached window if tab is detached
+		if ( this.isDetached && this.detachedWindow ) {
+
+			this.detachedWindow.panel.style.display = '';
+
+		}
+
+		// Notify profiler of visibility change
+		if ( this.onVisibilityChange ) {
+
+			this.onVisibilityChange();
+
+		}
+
+		this.showBuiltin();
+
+	}
+
+	hide() {
+
+		this.content.style.display = 'none';
+		this.button.style.display = 'none';
+
+		this.isVisible = false;
+
+		// Hide detached window if tab is detached
+		if ( this.isDetached && this.detachedWindow ) {
+
+			this.detachedWindow.panel.style.display = 'none';
+
+		}
+
+		// Notify profiler of visibility change
+		if ( this.onVisibilityChange ) {
+
+			this.onVisibilityChange();
+
+		}
+
+		this.hideBuiltin();
+
+	}
+
+	showBuiltin() {
+
+		if ( ! this.builtin ) return;
+
+		// Show the builtin-tabs-container
+		if ( this.profiler && this.profiler.builtinTabsContainer ) {
+
+			this.profiler.builtinTabsContainer.style.display = '';
+
+		}
+
+		// Show the button
+		if ( this.builtinButton ) {
+
+			this.builtinButton.style.display = '';
+
+		}
+
+		// Show and activate the mini-panel with content
+		if ( this.miniContent && this.profiler ) {
+
+			// Hide all other mini-panel contents
+			this.profiler.miniPanel.querySelectorAll( '.mini-panel-content' ).forEach( content => {
+
+				content.style.display = 'none';
+
+			} );
+
+			// Remove active state from all builtin buttons
+			this.profiler.builtinTabsContainer.querySelectorAll( '.builtin-tab-btn' ).forEach( btn => {
+
+				btn.classList.remove( 'active' );
+
+			} );
+
+			// Activate this tab's button
+			if ( this.builtinButton ) {
+
+				this.builtinButton.classList.add( 'active' );
+
+			}
+
+			// Move content to mini-panel if not already there
+			if ( ! this.miniContent.firstChild ) {
+
+				while ( this.content.firstChild ) {
+
+					this.miniContent.appendChild( this.content.firstChild );
+
+				}
+
+			}
+
+			// Show the mini-panel and content
+			this.miniContent.style.display = 'block';
+			this.profiler.miniPanel.classList.add( 'visible' );
+
+		}
+
+	}
+
+	hideBuiltin() {
+
+		if ( ! this.builtin ) return;
+
+		// Hide the button
+		if ( this.builtinButton ) {
+
+			this.builtinButton.style.display = 'none';
+
+		}
+
+		// Hide the mini-panel content
+		if ( this.miniContent ) {
+
+			this.miniContent.style.display = 'none';
+
+			// Move content back to main panel
+			if ( this.miniContent.firstChild ) {
+
+				while ( this.miniContent.firstChild ) {
+
+					this.content.appendChild( this.miniContent.firstChild );
+
+				}
+
+			}
+
+		}
+
+		// Deactivate button
+		if ( this.builtinButton ) {
+
+			this.builtinButton.classList.remove( 'active' );
+
+		}
+
+		// Hide mini-panel if no content is visible
+		if ( this.profiler ) {
+
+			const hasVisibleContent = Array.from( this.profiler.miniPanel.querySelectorAll( '.mini-panel-content' ) )
+				.some( content => content.style.display !== 'none' );
+
+			if ( ! hasVisibleContent ) {
+
+				this.profiler.miniPanel.classList.remove( 'visible' );
+
+			}
+
+			// Hide the builtin-tabs-container if all builtin buttons are hidden
+			const hasVisibleBuiltinButtons = Array.from( this.profiler.builtinTabsContainer.querySelectorAll( '.builtin-tab-btn' ) )
+				.some( btn => btn.style.display !== 'none' );
+
+			if ( ! hasVisibleBuiltinButtons ) {
+
+				this.profiler.builtinTabsContainer.style.display = 'none';
+
+			}
+
+		}
+
+	}
+
+}