super-three 0.181.0 → 0.185.0

package/examples/jsm/inspector/ui/Tab.js

@@ -1,21 +1,87 @@
-export class Tab {
+import { EventDispatcher } from 'three';
 
-	constructor( title ) {
+/**
+ * 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 {
 
-		this.id = title.toLowerCase();
+	constructor( title, options = {} ) {
+
+		super();
+
+		this.id = title.toLowerCase().replace( /\s+/g, '-' );
 		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.content.classList.add( `${this.id}-content` );
 
-		this.isActive = false;
+		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() {
+
+		if ( this.isDetached && this.isVisible ) return true;
+
+		const isProfilerVisible = this.profiler && this.profiler.panel.classList.contains( 'visible' );
+
+		if ( ! isProfilerVisible ) return false;
+
+		return this._isActive;
+
+	}
+
+	set isActive( value ) {
+
+		this._isActive = value;
 
 	}
 
+	init( /*inspector*/ ) { }
+
+	update( /*inspector*/ ) { }
+
 	setActive( isActive ) {
 
 		this.button.classList.toggle( 'active', isActive );
@@ -32,6 +98,22 @@ export class Tab {
 
 		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() {
@@ -41,6 +123,145 @@ export class Tab {
 
 		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';
+
+			}
+
+		}
+
 	}
 
 }

package/examples/jsm/inspector/ui/Values.js

@@ -53,6 +53,22 @@ class Value extends EventDispatcher {
 
 	}
 
+	show() {
+
+		this.dispatchEvent( { type: 'show' } );
+
+		return this;
+
+	}
+
+	hide() {
+
+		this.dispatchEvent( { type: 'hide' } );
+
+		return this;
+
+	}
+
 }
 
 class ValueNumber extends Value {
@@ -102,7 +118,9 @@ class ValueNumber extends Value {
 		let isDragging = false;
 		let startY, startValue;
 
-		this.input.addEventListener( 'mousedown', ( e ) => {
+		this.input.style.touchAction = 'none';
+
+		this.input.addEventListener( 'pointerdown', ( e ) => {
 
 			isDragging = true;
 			startY = e.clientY;
@@ -111,7 +129,7 @@ class ValueNumber extends Value {
 
 		} );
 
-		document.addEventListener( 'mousemove', ( e ) => {
+		document.addEventListener( 'pointermove', ( e ) => {
 
 			if ( isDragging ) {
 
@@ -144,7 +162,7 @@ class ValueNumber extends Value {
 
 		} );
 
-		document.addEventListener( 'mouseup', () => {
+		document.addEventListener( 'pointerup', () => {
 
 			if ( isDragging ) {
 
@@ -157,6 +175,14 @@ class ValueNumber extends Value {
 
 	}
 
+	setValue( val ) {
+
+		this.input.value = val;
+
+		return super.setValue( val );
+
+	}
+
 	getValue() {
 
 		return parseFloat( this.input.value );
@@ -194,6 +220,14 @@ class ValueCheckbox extends Value {
 
 	}
 
+	setValue( val ) {
+
+		this.checkbox.checked = val;
+
+		return super.setValue( val );
+
+	}
+
 	getValue() {
 
 		return this.checkbox.checked;
@@ -216,7 +250,7 @@ class ValueSlider extends Value {
 
 		const numberValue = new ValueNumber( { value, min, max, step } );
 		this.numberInput = numberValue.input;
-		this.numberInput.style.width = '60px';
+		this.numberInput.style.flexBasis = '80px';
 		this.numberInput.style.flexShrink = '0';
 
 		this.slider.value = value;
@@ -260,6 +294,7 @@ class ValueSlider extends Value {
 
 		this.slider.step = value;
 		this.numberInput.step = value;
+		this.slider.value = parseFloat( this.numberInput.value );
 
 		return this;
 
@@ -314,6 +349,32 @@ class ValueSelect extends Value {
 
 	}
 
+	setValue( val ) {
+
+		if ( Array.isArray( this.options ) ) {
+
+			this.select.value = val;
+
+		} else {
+
+			const entry = Object.entries( this.options ).find( ( [ , v ] ) => v === val );
+
+			if ( entry ) {
+
+				this.select.value = entry[ 0 ];
+
+			} else {
+
+				this.select.value = val;
+
+			}
+
+		}
+
+		return super.setValue( val );
+
+	}
+
 	getValue() {
 
 		const options = this.options;
@@ -367,9 +428,29 @@ class ValueColor extends Value {
 
 	}
 
+	setValue( val ) {
+
+		const colorHex = this._getColorHex( val );
+
+		this.colorInput.value = colorHex;
+
+		if ( this._value && this._value.isColor ) {
+
+			this._value.setHex( parseInt( colorHex.slice( 1 ), 16 ) );
+
+		} else {
+
+			this._value = val;
+
+		}
+
+		return super.setValue( val );
+
+	}
+
 	_getColorHex( color ) {
 
-		if ( color.isColor ) {
+		if ( color && color.isColor ) {
 
 			color = color.getHex();
 
@@ -377,9 +458,9 @@ class ValueColor extends Value {
 
 		if ( typeof color === 'number' ) {
 
-			color = `#${ color.toString( 16 ) }`;
+			color = '#' + color.toString( 16 ).padStart( 6, '0' );
 
-		} else if ( color[ 0 ] !== '#' ) {
+		} else if ( typeof color === 'string' && color[ 0 ] !== '#' ) {
 
 			color = '#' + color;
 
@@ -420,4 +501,41 @@ class ValueButton extends Value {
 
 }
 
-export { Value, ValueNumber, ValueCheckbox, ValueSlider, ValueSelect, ValueColor, ValueButton };
+class ValueString extends Value {
+
+	constructor( { value = '' } ) {
+
+		super();
+
+		const input = document.createElement( 'input' );
+		input.type = 'text';
+		input.value = value;
+		this.input = input;
+
+		input.addEventListener( 'input', () => {
+
+			this.dispatchChange();
+
+		} );
+
+		this.domElement.appendChild( input );
+
+	}
+
+	setValue( val ) {
+
+		this.input.value = val;
+
+		return super.setValue( val );
+
+	}
+
+	getValue() {
+
+		return this.input.value;
+
+	}
+
+}
+
+export { Value, ValueNumber, ValueString, ValueCheckbox, ValueSlider, ValueSelect, ValueColor, ValueButton };

package/examples/jsm/inspector/ui/utils.js

@@ -1,21 +1,17 @@
-export function createValueSpan( id = null ) {
+export function createValueSpan() {
 
 	const span = document.createElement( 'span' );
 	span.className = 'value';
 
-	if ( id !== null ) span.id = id;
-
 	return span;
 
 }
 
 export function setText( element, text ) {
 
-	const el = element instanceof HTMLElement ? element : document.getElementById( element );
-
-	if ( el && el.textContent !== text ) {
+	if ( element && element.textContent !== text ) {
 
-		el.textContent = text;
+		element.textContent = text;
 
 	}
 
@@ -23,9 +19,7 @@ export function setText( element, text ) {
 
 export function getText( element ) {
 
-	const el = element instanceof HTMLElement ? element : document.getElementById( element );
-
-	return el ? el.textContent : null;
+	return element ? element.textContent : null;
 
 }
 
@@ -54,3 +48,142 @@ export function splitCamelCase( str ) {
 	return str.replace( /([a-z0-9])([A-Z])/g, '$1 $2' ).trim();
 
 }
+
+export function formatBytes( bytes, decimals = 2 ) {
+
+	if ( bytes === 0 ) return '0 Bytes';
+
+	const k = 1024;
+	const dm = decimals < 0 ? 0 : decimals;
+	const sizes = [ 'Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB' ];
+	const i = Math.floor( Math.log( bytes ) / Math.log( k ) );
+
+	return parseFloat( ( bytes / Math.pow( k, i ) ).toFixed( dm ) ) + ' ' + sizes[ i ];
+
+}
+
+export function info( parentNode, text ) {
+
+	let infoIcon = parentNode.querySelector( '.info-icon' );
+
+	if ( ! infoIcon ) {
+
+		infoIcon = document.createElement( 'span' );
+		infoIcon.className = 'info-icon';
+		infoIcon.textContent = 'i';
+		parentNode.appendChild( infoIcon );
+
+	} else {
+
+		const newInfoIcon = infoIcon.cloneNode( true );
+		infoIcon.replaceWith( newInfoIcon );
+		infoIcon = newInfoIcon;
+
+	}
+
+	const showTooltip = () => {
+
+		const container = infoIcon.closest( '.three-inspector' ) || document.body;
+		let tooltip = container.querySelector( '.three-inspector-info-tooltip' );
+
+		if ( ! tooltip ) {
+
+			tooltip = document.createElement( 'div' );
+			tooltip.className = 'info-tooltip three-inspector-info-tooltip';
+			container.appendChild( tooltip );
+
+		}
+
+		const html = text.trim().replace( /### (.*?)(?:\r?\n|$)/g, '<h3>$1</h3>' )
+					   .replace( /\*\*(.*?)\*\*/g, '<strong>$1</strong>' )
+					   .replace( /\n/g, '<br/>' );
+
+		tooltip.innerHTML = html;
+
+		const rect = infoIcon.getBoundingClientRect();
+		const tooltipWidth = tooltip.getBoundingClientRect().width;
+
+		// keep the centered tooltip within the viewport so it isn't clipped near an edge
+
+		const margin = 8;
+		const half = tooltipWidth / 2;
+		const center = Math.max( margin + half, Math.min( window.innerWidth - margin - half, rect.left + rect.width / 2 ) );
+
+		tooltip.style.left = center + 'px';
+		tooltip.style.top = ( rect.top - 8 ) + 'px';
+
+		tooltip.style.opacity = '1';
+		tooltip.style.visibility = 'visible';
+
+	};
+
+	const hideTooltip = () => {
+
+		const container = infoIcon.closest( '.three-inspector' ) || document.body;
+		const tooltip = container.querySelector( '.three-inspector-info-tooltip' );
+		if ( tooltip ) {
+
+			tooltip.style.opacity = '0';
+			tooltip.style.visibility = 'hidden';
+
+		}
+
+	};
+
+	let isClickedOpen = false;
+
+	const onDocumentPointerDown = ( e ) => {
+
+		if ( ! infoIcon.contains( e.target ) ) {
+
+			isClickedOpen = false;
+			infoIcon.classList.remove( 'active' );
+			hideTooltip();
+			document.removeEventListener( 'pointerdown', onDocumentPointerDown );
+
+		}
+
+	};
+
+	infoIcon.addEventListener( 'pointerenter', () => {
+
+		showTooltip();
+
+	} );
+
+	infoIcon.addEventListener( 'pointerleave', () => {
+
+		if ( ! isClickedOpen ) {
+
+			hideTooltip();
+
+		}
+
+	} );
+
+	infoIcon.addEventListener( 'click', ( e ) => {
+
+		e.stopPropagation();
+
+		isClickedOpen = ! isClickedOpen;
+
+		if ( isClickedOpen ) {
+
+			infoIcon.classList.add( 'active' );
+			showTooltip();
+			document.addEventListener( 'pointerdown', onDocumentPointerDown );
+
+		} else {
+
+			infoIcon.classList.remove( 'active' );
+			hideTooltip();
+			document.removeEventListener( 'pointerdown', onDocumentPointerDown );
+
+		}
+
+	} );
+
+	return infoIcon;
+
+}
+