super-three 0.184.0 → 0.185.0

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

@@ -31,14 +31,14 @@ export class Tab extends EventDispatcher {
 
 		super();
 
-		this.id = title.toLowerCase();
+		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.isVisible = true;
@@ -62,11 +62,13 @@ export class Tab extends EventDispatcher {
 
 	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.isDetached || this._isActive;
+		return this._isActive;
 
 	}
 

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 ) {
 
@@ -276,6 +294,7 @@ class ValueSlider extends Value {
 
 		this.slider.step = value;
 		this.numberInput.step = value;
+		this.slider.value = parseFloat( this.numberInput.value );
 
 		return this;
 
@@ -330,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;
@@ -383,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();
 
@@ -393,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;
 

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;
 
 }
 
@@ -67,3 +61,129 @@ export function formatBytes( bytes, decimals = 2 ) {
 	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;
+
+}
+

package/examples/jsm/libs/basis/README.md

@@ -24,7 +24,6 @@ Both are dependencies of `KTX2Loader`:
 
 ```js
 const ktx2Loader = new KTX2Loader();
-ktx2Loader.setTranscoderPath( 'examples/jsm/libs/basis/' );
 ktx2Loader.detectSupport( renderer );
 ktx2Loader.load( 'diffuse.ktx2', function ( texture ) {
 

package/examples/jsm/libs/demuxer_mp4.js

@@ -1,4 +1,4 @@
-import MP4Box from 'https://cdn.jsdelivr.net/npm/mp4box@0.5.3/+esm';
+import { createFile, DataStream } from 'https://cdn.jsdelivr.net/npm/mp4box@2.3.0/+esm';
 
 // From: https://w3c.github.io/webcodecs/samples/video-decode-display/
 
@@ -47,7 +47,7 @@ export class MP4Demuxer {
     this.#setStatus = setStatus;
 
     // Configure an MP4Box File for demuxing.
-    this.#file = MP4Box.createFile();
+    this.#file = createFile();
     this.#file.onError = error => setStatus("demux", error);
     this.#file.onReady = this.#onReady.bind(this);
     this.#file.onSamples = this.#onSamples.bind(this);
@@ -68,7 +68,7 @@ export class MP4Demuxer {
     for (const entry of trak.mdia.minf.stbl.stsd.entries) {
       const box = entry.avcC || entry.hvcC || entry.vpcC || entry.av1C;
       if (box) {
-        const stream = new MP4Box.DataStream(undefined, 0, MP4Box.DataStream.BIG_ENDIAN);
+        const stream = new DataStream(undefined, 0, DataStream.BIG_ENDIAN);
         box.write(stream);
         return new Uint8Array(stream.buffer, 8);  // Remove the box header.
       }

package/examples/jsm/libs/draco/README.md

@@ -22,7 +22,6 @@ Either variation may be used with `DRACOLoader`:
 ```js
 var dracoLoader = new DRACOLoader();
 dracoLoader.setDecoderPath('path/to/decoders/');
-dracoLoader.setDecoderConfig({type: 'js'}); // (Optional) Override detection of WASM support.
 ```
 
 Further [documentation on GitHub](https://github.com/google/draco/tree/master/javascript/example#static-loading-javascript-decoder).