super-three 0.181.0 → 0.185.0

package/examples/jsm/inspector/extensions/tsl-graph/TSLGraphLoader.js

@@ -0,0 +1,281 @@
+import { FileLoader, error } from 'three';
+
+import * as THREE from 'three';
+import * as TSL from 'three/tsl';
+
+const _library = {
+	'three/tsl': { ...TSL }
+};
+
+const STORAGE_PREFIX = 'tsl-graph';
+const STORAGE_CODE = 'tsl-graph-code';
+
+function _storageKey( graphId ) {
+
+	return `${STORAGE_PREFIX}:${graphId}`;
+
+}
+
+class TSLGraphLoaderApplier {
+
+	constructor( tslGraphFns ) {
+
+		this.tslGraphFns = tslGraphFns;
+
+	}
+
+	apply( scene ) {
+
+		const tslGraphFns = this.tslGraphFns;
+
+		scene.traverse( ( object ) => {
+
+			if ( object.material && object.material.userData.graphId ) {
+
+				if ( tslGraphFns[ object.material.userData.graphId ] ) {
+
+					tslGraphFns[ object.material.userData.graphId ]( object.material );
+
+					object.material.needsUpdate = true;
+
+				}
+
+			}
+
+		} );
+
+	}
+
+}
+
+export class TSLGraphLoader extends FileLoader {
+
+	constructor( manager ) {
+
+		super( manager );
+
+	}
+
+	load( url, onLoad, onProgress, onError ) {
+
+		super.load( url, ( text ) => {
+
+			let json;
+
+			try {
+
+				json = JSON.parse( text );
+
+			} catch ( e ) {
+
+				if ( onError ) onError( e );
+
+				return;
+
+			}
+
+			const applier = this.parse( json );
+
+			if ( onLoad ) onLoad( applier );
+
+		}, onProgress, onError );
+
+	}
+
+	parseMaterial( json ) {
+
+		const baseFn = 'tslGraph';
+
+		const imports = {};
+		const materials = [ this._generateMaterialCode( json, baseFn, imports ) ];
+		const code = this._generateCode( materials, imports );
+
+		const tslFunction = new Function( code )()( THREE, imports );
+
+		return tslFunction;
+
+	}
+
+	parseMaterials( json ) {
+
+		const imports = {};
+		const materials = [];
+
+		for ( const [ name, material ] of Object.entries( json ) ) {
+
+			materials.push( this._generateMaterialCode( material, name, imports ) );
+
+		}
+
+		const code = this._generateCode( materials, imports );
+
+		const tslFunction = new Function( code )()( THREE, imports );
+
+		return tslFunction;
+
+	}
+
+	parse( json ) {
+
+		let result;
+
+		if ( json.material && json.material.code ) {
+
+			result = this.parseMaterial( json.material );
+
+		} else if ( json.materials ) {
+
+			result = this.parseMaterials( json.materials );
+
+		} else if ( json.codes && json.graphs ) {
+
+			result = this.parseMaterials( json.codes.materials );
+
+			TSLGraphLoader.setGraphs( json );
+
+		}
+
+		return new TSLGraphLoaderApplier( result );
+
+	}
+
+	_generateMaterialCode( json, name = 'tslGraph', imports = {} ) {
+
+		const code = json.code.replace( 'function tslGraph', `materials[ '${ name }' ] = function` ).replace( /\n|^/g, '\n\t' );
+
+		for ( const importData of json.imports ) {
+
+			if ( _library[ importData.from ] ) {
+
+				for ( const importName of importData.imports ) {
+
+					if ( _library[ importData.from ][ importName ] ) {
+
+						imports[ importName ] = _library[ importData.from ][ importName ];
+
+					} else {
+
+						error( `TSLGraph: Import ${ importName } not found in ${ importData.from }.` );
+
+					}
+
+				}
+
+			} else {
+
+				error( `TSLGraph: Library ${ importData.from } not found.` );
+
+			}
+
+		}
+
+		return code;
+
+	}
+
+	_generateCode( materials, imports ) {
+
+		const fnCode = `return ( THREE, { ${ Object.keys( imports ).join( ', ' ) } } ) => {\n\n\tconst materials = {};\n${ materials.join( '\n' ) }\n\n\treturn materials;\n\n}`;
+
+		return fnCode;
+
+	}
+
+	static get hasGraphs() {
+
+		return Object.keys( TSLGraphLoader.getCodes().materials ).length > 0;
+
+	}
+
+	static getCodes() {
+
+		const code = window.localStorage.getItem( STORAGE_CODE );
+
+		return code ? JSON.parse( code ) : { materials: {} };
+
+	}
+
+	static setCodes( codes ) {
+
+		window.localStorage.setItem( STORAGE_CODE, JSON.stringify( codes ) );
+
+	}
+
+	static setGraph( graphId, graphData ) {
+
+		window.localStorage.setItem( _storageKey( graphId ), JSON.stringify( graphData ) );
+
+	}
+
+	static getGraph( graphId ) {
+
+		const raw = window.localStorage.getItem( _storageKey( graphId ) );
+
+		if ( ! raw ) return null;
+
+		try {
+
+			return JSON.parse( raw );
+
+		} catch ( e ) {
+
+			error( 'TSLGraph: Invalid graph JSON in localStorage, ignoring.', e );
+			return null;
+
+		}
+
+	}
+
+	static deleteGraph( graphId ) {
+
+		window.localStorage.removeItem( _storageKey( graphId ) );
+
+	}
+
+	static setGraphs( json ) {
+
+		if ( ! json.codes || ! json.graphs ) {
+
+			throw new Error( 'TSLGraphLoader: Invalid import file structure.' );
+
+		}
+
+		TSLGraphLoader.clearGraphs();
+
+		// Save imported graph visualizations
+		for ( const [ id, graphData ] of Object.entries( json.graphs ) ) {
+
+			TSLGraphLoader.setGraph( id, graphData );
+
+		}
+
+		// Fully overwrite codes
+		TSLGraphLoader.setCodes( json.codes );
+
+		return json;
+
+	}
+
+	static clearGraphs() {
+
+		const keysToRemove = [];
+		for ( let i = 0; i < window.localStorage.length; i ++ ) {
+
+			const key = window.localStorage.key( i );
+			if ( key.startsWith( STORAGE_PREFIX ) ) {
+
+				keysToRemove.push( key );
+
+			}
+
+		}
+
+		for ( const key of keysToRemove ) {
+
+			window.localStorage.removeItem( key );
+
+		}
+
+	}
+
+}

package/examples/jsm/inspector/tabs/Console.js

@@ -2,25 +2,45 @@ import { Tab } from '../ui/Tab.js';
 
 class Console extends Tab {
 
-	constructor() {
+	constructor( options = {} ) {
 
-		super( 'Console' );
+		super( 'Console', options );
 
 		this.filters = { info: true, warn: true, error: true };
 		this.filterText = '';
 
+		this.unreadErrors = 0;
+		this.unreadWarns = 0;
+
+		this.tabBadgeContainer = document.createElement( 'span' );
+		this.tabBadgeContainer.className = 'tab-badge-container';
+
+		this.tabErrorBadge = document.createElement( 'span' );
+		this.tabErrorBadge.className = 'tab-badge error';
+		this.tabErrorBadge.style.display = 'none';
+
+		this.tabWarnBadge = document.createElement( 'span' );
+		this.tabWarnBadge.className = 'tab-badge warn';
+		this.tabWarnBadge.style.display = 'none';
+
+		this.tabBadgeContainer.appendChild( this.tabErrorBadge );
+		this.tabBadgeContainer.appendChild( this.tabWarnBadge );
+		this.button.appendChild( this.tabBadgeContainer );
+
 		this.buildHeader();
 
 		this.logContainer = document.createElement( 'div' );
-		this.logContainer.id = 'console-log';
+		this.logContainer.classList.add( 'console-log' );
 		this.content.appendChild( this.logContainer );
 
+		this.lastMessage = null;
+
 	}
 
 	buildHeader() {
 
 		const header = document.createElement( 'div' );
-		header.className = 'console-header';
+		header.className = 'toolbar';
 
 		const filterInput = document.createElement( 'input' );
 		filterInput.type = 'text';
@@ -33,8 +53,14 @@ class Console extends Tab {
 
 		} );
 
-		const filtersGroup = document.createElement( 'div' );
-		filtersGroup.className = 'console-filters-group';
+		const copyButton = document.createElement( 'button' );
+		copyButton.className = 'console-copy-button';
+		copyButton.title = 'Copy all';
+		copyButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+		copyButton.addEventListener( 'click', () => this.copyAll( copyButton ) );
+
+		const buttonsGroup = document.createElement( 'div' );
+		buttonsGroup.className = 'console-buttons-group';
 
 		Object.keys( this.filters ).forEach( type => {
 
@@ -50,14 +76,18 @@ class Console extends Tab {
 			const checkmark = document.createElement( 'span' );
 			checkmark.className = 'checkmark';
 
+			const labelText = document.createElement( 'span' );
+			labelText.className = 'checkbox-text';
+			labelText.textContent = type.charAt( 0 ).toUpperCase() + type.slice( 1 );
+
 			label.appendChild( checkbox );
 			label.appendChild( checkmark );
-			label.append( type.charAt( 0 ).toUpperCase() + type.slice( 1 ) );
-			filtersGroup.appendChild( label );
+			label.appendChild( labelText );
+			buttonsGroup.appendChild( label );
 
 		} );
 
-		filtersGroup.addEventListener( 'change', ( e ) => {
+		buttonsGroup.addEventListener( 'change', ( e ) => {
 
 			const type = e.target.dataset.type;
 			if ( type in this.filters ) {
@@ -69,8 +99,10 @@ class Console extends Tab {
 
 		} );
 
+		buttonsGroup.appendChild( copyButton );
+
 		header.appendChild( filterInput );
-		header.appendChild( filtersGroup );
+		header.appendChild( buttonsGroup );
 		this.content.appendChild( header );
 
 	}
@@ -92,6 +124,32 @@ class Console extends Tab {
 
 	}
 
+	copyAll( button ) {
+
+		const win = this.logContainer.ownerDocument.defaultView;
+		const selection = win.getSelection();
+		const selectedText = selection.toString();
+		const textInConsole = selectedText && this.logContainer.contains( selection.anchorNode );
+
+		let text;
+		if ( textInConsole ) {
+
+			text = selectedText;
+
+		} else {
+
+			const messages = this.logContainer.querySelectorAll( '.log-message:not(.hidden)' );
+			text = Array.from( messages ).map( msg => msg.dataset.rawText ).join( '\n' );
+
+		}
+
+		navigator.clipboard.writeText( text );
+
+		button.classList.add( 'copied' );
+		setTimeout( () => button.classList.remove( 'copied' ), 350 );
+
+	}
+
 	_getIcon( type, subType ) {
 
 		let icon;
@@ -138,10 +196,6 @@ class Console extends Tab {
 			const parts = fullPrefix.slice( 0, - 2 ).split( '.' );
 			const shortPrefix = ( parts.length > 1 ? parts[ parts.length - 1 ] : parts[ 0 ] ) + ':';
 
-			const icon = this._getIcon( type, shortPrefix.split( ':' )[ 0 ].toLowerCase() );
-
-			fragment.appendChild( document.createTextNode( icon + ' ' ) );
-
 			const prefixSpan = document.createElement( 'span' );
 			prefixSpan.className = 'log-prefix';
 			prefixSpan.textContent = shortPrefix;
@@ -176,24 +230,186 @@ class Console extends Tab {
 
 	}
 
+	setActive( isActive ) {
+
+		super.setActive( isActive );
+
+		if ( isActive ) {
+
+			this.clearUnread();
+
+		}
+
+	}
+
+	clearUnread() {
+
+		this.unreadErrors = 0;
+		this.unreadWarns = 0;
+		this.updateBadges();
+
+	}
+
+	updateBadges() {
+
+		if ( ! this.profiler ) return;
+
+		const errorBadge = this.profiler.toggleButton.querySelector( '.console-badge.error' );
+		const warnBadge = this.profiler.toggleButton.querySelector( '.console-badge.warn' );
+
+		if ( errorBadge ) {
+
+			if ( this.unreadErrors > 0 ) {
+
+				errorBadge.textContent = this.unreadErrors > 99 ? '+99' : this.unreadErrors;
+				errorBadge.style.display = '';
+
+			} else {
+
+				errorBadge.style.display = 'none';
+
+			}
+
+		}
+
+		if ( warnBadge ) {
+
+			if ( this.unreadWarns > 0 ) {
+
+				warnBadge.textContent = this.unreadWarns > 99 ? '+99' : this.unreadWarns;
+				warnBadge.style.display = '';
+
+			} else {
+
+				warnBadge.style.display = 'none';
+
+			}
+
+		}
+
+		if ( this.tabErrorBadge ) {
+
+			if ( this.unreadErrors > 0 ) {
+
+				this.tabErrorBadge.textContent = this.unreadErrors > 99 ? '+99' : this.unreadErrors;
+				this.tabErrorBadge.style.display = '';
+
+			} else {
+
+				this.tabErrorBadge.style.display = 'none';
+
+			}
+
+		}
+
+		if ( this.tabWarnBadge ) {
+
+			if ( this.unreadWarns > 0 ) {
+
+				this.tabWarnBadge.textContent = this.unreadWarns > 99 ? '+99' : this.unreadWarns;
+				this.tabWarnBadge.style.display = '';
+
+			} else {
+
+				this.tabWarnBadge.style.display = 'none';
+
+			}
+
+		}
+
+	}
+
 	addMessage( type, text ) {
 
-		const msg = document.createElement( 'div' );
-		msg.className = `log-message ${type}`;
-		msg.dataset.type = type;
-		msg.dataset.rawText = text;
+		if ( this.lastMessage && this.lastMessage.type === type && this.lastMessage.text === text ) {
+
+			this.lastMessage.count ++;
+			this.lastMessage.countBadge.textContent = this.lastMessage.count;
+			this.lastMessage.countBadge.style.display = '';
+
+		} else {
+
+			const msg = document.createElement( 'div' );
+			msg.className = `log-message ${type}`;
+			msg.dataset.type = type;
+			msg.dataset.rawText = text;
+
+			const countBadge = document.createElement( 'span' );
+			countBadge.className = 'log-count-badge';
+			countBadge.style.display = 'none';
+			msg.appendChild( countBadge );
 
-		msg.appendChild( this._formatMessage( type, text ) );
+			let icon = null;
+			const prefixMatch = text.match( /^([\w\.]+:\s)/ );
+			if ( prefixMatch ) {
 
-		const showByType = this.filters[ type ];
-		const showByText = text.toLowerCase().includes( this.filterText );
-		msg.classList.toggle( 'hidden', ! ( showByType && showByText ) );
+				const fullPrefix = prefixMatch[ 0 ];
+				const parts = fullPrefix.slice( 0, - 2 ).split( '.' );
+				const shortPrefix = ( parts.length > 1 ? parts[ parts.length - 1 ] : parts[ 0 ] ) + ':';
+				icon = this._getIcon( type, shortPrefix.split( ':' )[ 0 ].toLowerCase() );
+
+			}
+
+			if ( icon ) {
+
+				const iconSpan = document.createElement( 'span' );
+				iconSpan.className = 'log-icon';
+				iconSpan.textContent = icon;
+				msg.appendChild( iconSpan );
+
+			}
+
+			const body = document.createElement( 'span' );
+			body.className = 'log-body';
+			body.appendChild( this._formatMessage( type, text ) );
+			msg.appendChild( body );
+
+			const showByType = this.filters[ type ];
+			const showByText = text.toLowerCase().includes( this.filterText );
+			msg.classList.toggle( 'hidden', ! ( showByType && showByText ) );
+
+			this.logContainer.appendChild( msg );
+
+			if ( this.logContainer.children.length > 200 ) {
+
+				const firstChild = this.logContainer.firstChild;
+				this.logContainer.removeChild( firstChild );
+				if ( this.lastMessage && this.lastMessage.element === firstChild ) {
+
+					this.lastMessage = null;
+
+				}
+
+			}
+
+			this.lastMessage = {
+				type,
+				text,
+				count: 1,
+				element: msg,
+				countBadge
+			};
+
+		}
 
-		this.logContainer.appendChild( msg );
 		this.logContainer.scrollTop = this.logContainer.scrollHeight;
-		if ( this.logContainer.children.length > 200 ) {
 
-			this.logContainer.removeChild( this.logContainer.firstChild );
+		// Update unread counts if the console is not active/visible
+		const isUnread = ! this.isActive;
+
+		if ( isUnread ) {
+
+			if ( type === 'error' ) {
+
+				this.unreadErrors ++;
+				this.updateBadges();
+
+			} else if ( type === 'warn' ) {
+
+				this.unreadWarns ++;
+				this.updateBadges();
+
+			}
 
 		}