@plastic-software/three 0.180.0 → 0.181.2

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

@@ -0,0 +1,166 @@
+import { Tab } from '../ui/Tab.js';
+import { List } from '../ui/List.js';
+import { Item } from '../ui/Item.js';
+
+import { RendererUtils, NoToneMapping, LinearSRGBColorSpace } from 'three/webgpu';
+
+class Viewer extends Tab {
+
+	constructor() {
+
+		super( 'Viewer' );
+
+		const nodeList = new List( 'Viewer', 'Name' );
+		nodeList.setGridStyle( '150px minmax(200px, 2fr)' );
+		nodeList.domElement.style.minWidth = '600px';
+
+		const scrollWrapper = document.createElement( 'div' );
+		scrollWrapper.className = 'list-scroll-wrapper';
+		scrollWrapper.appendChild( nodeList.domElement );
+		this.content.appendChild( scrollWrapper );
+
+		const nodes = new Item( 'Nodes' );
+		nodeList.add( nodes );
+
+		//
+
+		this.itemLibrary = new Map();
+		this.folderLibrary = new Map();
+		this.currentDataList = [];
+		this.nodeList = nodeList;
+		this.nodes = nodes;
+
+	}
+
+	getFolder( name ) {
+
+		let folder = this.folderLibrary.get( name );
+
+		if ( folder === undefined ) {
+
+			folder = new Item( name );
+
+			this.folderLibrary.set( name, folder );
+			this.nodeList.add( folder );
+
+		}
+
+		return folder;
+
+	}
+
+	addNodeItem( canvasData ) {
+
+		let item = this.itemLibrary.get( canvasData.id );
+
+		if ( item === undefined ) {
+
+			const name = canvasData.name;
+			const domElement = canvasData.canvasTarget.domElement;
+
+			item = new Item( domElement, name );
+			item.itemRow.children[ 1 ].style[ 'justify-content' ] = 'flex-start';
+			this.itemLibrary.set( canvasData.id, item );
+
+		}
+
+		return item;
+
+	}
+
+	update( renderer, canvasDataList ) {
+
+		if ( ! this.isActive ) return;
+
+		//
+
+		const previousDataList = [ ...this.currentDataList ];
+
+		// remove old
+
+		for ( const canvasData of previousDataList ) {
+
+			if ( this.itemLibrary.has( canvasData.id ) && canvasDataList.indexOf( canvasData ) === - 1 ) {
+
+				const item = this.itemLibrary.get( canvasData.id );
+				const parent = item.parent;
+
+				parent.remove( item );
+
+				if ( this.folderLibrary.has( parent.data[ 0 ] ) && parent.children.length === 0 ) {
+
+					parent.parent.remove( parent );
+
+					this.folderLibrary.delete( parent.data[ 0 ] );
+
+				}
+
+				this.itemLibrary.delete( canvasData.id );
+
+			}
+
+		}
+
+		//
+
+		const indexes = {};
+
+		for ( const canvasData of canvasDataList ) {
+
+			const item = this.addNodeItem( canvasData );
+			const previousCanvasTarget = renderer.getCanvasTarget();
+
+			const path = canvasData.path;
+
+			if ( path ) {
+
+				const folder = this.getFolder( path );
+
+				if ( indexes[ path ] === undefined ) {
+
+					indexes[ path ] = 0;
+
+				}
+
+				if ( folder.parent === null || item.parent !== folder || folder.children.indexOf( item ) !== indexes[ path ] ) {
+
+					folder.add( item );
+
+				}
+
+				indexes[ path ] ++;
+
+			} else {
+
+				if ( ! item.parent ) {
+
+					this.nodes.add( item );
+
+				}
+
+			}
+
+			this.currentDataList = canvasDataList;
+
+			//
+
+			const state = RendererUtils.resetRendererState( renderer );
+
+			renderer.toneMapping = NoToneMapping;
+			renderer.outputColorSpace = LinearSRGBColorSpace;
+
+			renderer.setCanvasTarget( canvasData.canvasTarget );
+
+			canvasData.quad.render( renderer );
+
+			renderer.setCanvasTarget( previousCanvasTarget );
+
+			RendererUtils.restoreRendererState( renderer, state );
+
+		}
+
+	}
+
+}
+
+export { Viewer };

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

@@ -0,0 +1,95 @@
+
+export class Graph {
+
+	constructor( maxPoints = 512 ) {
+
+		this.maxPoints = maxPoints;
+		this.lines = {};
+		this.limit = 0;
+		this.limitIndex = 0;
+
+		this.domElement = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+		this.domElement.setAttribute( 'class', 'graph-svg' );
+
+	}
+
+	addLine( id, color ) {
+
+		const path = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
+		path.setAttribute( 'class', 'graph-path' );
+		path.style.stroke = `var(${color})`;
+		path.style.fill = `var(${color})`;
+		this.domElement.appendChild( path );
+
+		this.lines[ id ] = { path, color, points: [] };
+
+	}
+
+	addPoint( lineId, value ) {
+
+		const line = this.lines[ lineId ];
+		if ( ! line ) return;
+
+		line.points.push( value );
+		if ( line.points.length > this.maxPoints ) {
+
+			line.points.shift();
+
+		}
+
+		if ( value > this.limit ) {
+
+			this.limit = value;
+			this.limitIndex = 0;
+
+		}
+
+	}
+
+	resetLimit() {
+
+		this.limit = 0;
+		this.limitIndex = 0;
+
+	}
+
+	update() {
+
+		const svgWidth = this.domElement.clientWidth;
+		const svgHeight = this.domElement.clientHeight;
+		if ( svgWidth === 0 ) return;
+
+		const pointStep = svgWidth / ( this.maxPoints - 1 );
+
+		for ( const id in this.lines ) {
+
+			const line = this.lines[ id ];
+
+			let pathString = `M 0,${ svgHeight }`;
+			for ( let i = 0; i < line.points.length; i ++ ) {
+
+				const x = i * pointStep;
+				const y = svgHeight - ( line.points[ i ] / this.limit ) * svgHeight;
+				pathString += ` L ${ x },${ y }`;
+
+			}
+
+			pathString += ` L ${( line.points.length - 1 ) * pointStep},${ svgHeight } Z`;
+
+			const offset = svgWidth - ( ( line.points.length - 1 ) * pointStep );
+			line.path.setAttribute( 'transform', `translate(${ offset }, 0)` );
+			line.path.setAttribute( 'd', pathString );
+
+		}
+
+		//
+
+		if ( this.limitIndex ++ > this.maxPoints ) {
+
+			this.resetLimit();
+
+		}
+
+	}
+
+}

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

@@ -0,0 +1,170 @@
+export class Item {
+
+	constructor( ...data ) {
+
+		this.children = [];
+		this.isOpen = true;
+		this.childrenContainer = null;
+		this.parent = null;
+		this.domElement = document.createElement( 'div' );
+		this.domElement.className = 'list-item-wrapper';
+		this.itemRow = document.createElement( 'div' );
+		this.itemRow.className = 'list-item-row';
+
+		this.userData = {};
+
+		this.data = data;
+		this.data.forEach( ( cellData ) => {
+
+			const cell = document.createElement( 'div' );
+			cell.className = 'list-item-cell';
+			if ( cellData instanceof HTMLElement ) {
+
+				cell.appendChild( cellData );
+
+			} else {
+
+				cell.append( String( cellData ) );
+
+			}
+
+			this.itemRow.appendChild( cell );
+
+		} );
+
+		this.domElement.appendChild( this.itemRow );
+
+		// Bindings
+
+		this.onItemClick = this.onItemClick.bind( this );
+
+	}
+
+	onItemClick( e ) {
+
+		if ( e.target.closest( 'button, a, input, label' ) ) return;
+
+		this.toggle();
+
+	}
+
+	add( item, index = this.children.length ) {
+
+		if ( item.parent !== null ) {
+
+			item.parent.remove( item );
+
+		}
+
+		item.parent = this;
+
+		this.children.splice( index, 0, item );
+
+		this.itemRow.classList.add( 'collapsible' );
+
+		if ( ! this.childrenContainer ) {
+
+			this.childrenContainer = document.createElement( 'div' );
+			this.childrenContainer.className = 'list-children-container';
+			this.childrenContainer.classList.toggle( 'closed', ! this.isOpen );
+			this.domElement.appendChild( this.childrenContainer );
+			this.itemRow.addEventListener( 'click', this.onItemClick );
+
+		}
+
+		this.childrenContainer.insertBefore(
+			item.domElement,
+			this.childrenContainer.children[ index ] || null
+		);
+
+		this.updateToggler();
+		return this;
+
+	}
+
+	remove( item ) {
+
+		const index = this.children.indexOf( item );
+
+		if ( index !== - 1 ) {
+
+			this.children.splice( index, 1 );
+			this.childrenContainer.removeChild( item.domElement );
+
+			item.parent = null;
+
+			if ( this.children.length === 0 ) {
+
+				this.itemRow.classList.remove( 'collapsible' );
+				this.itemRow.removeEventListener( 'click', this.onItemClick );
+
+				this.childrenContainer.remove();
+				this.childrenContainer = null;
+
+			}
+
+			this.updateToggler();
+
+		}
+
+		return this;
+
+	}
+
+	updateToggler() {
+
+		const firstCell = this.itemRow.querySelector( '.list-item-cell:first-child' );
+		let toggler = this.itemRow.querySelector( '.item-toggler' );
+
+		if ( this.children.length > 0 ) {
+
+			if ( ! toggler ) {
+
+				toggler = document.createElement( 'span' );
+				toggler.className = 'item-toggler';
+				firstCell.prepend( toggler );
+
+			}
+
+			if ( this.isOpen ) {
+
+				this.itemRow.classList.add( 'open' );
+
+			}
+
+		} else if ( toggler ) {
+
+			toggler.remove();
+
+		}
+
+	}
+
+	toggle() {
+
+		this.isOpen = ! this.isOpen;
+		this.itemRow.classList.toggle( 'open', this.isOpen );
+
+		if ( this.childrenContainer ) {
+
+			this.childrenContainer.classList.toggle( 'closed', ! this.isOpen );
+
+		}
+
+		return this;
+
+	}
+
+	close() {
+
+		if ( this.isOpen ) {
+
+			this.toggle();
+
+		}
+
+		return this;
+
+	}
+
+}

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

@@ -0,0 +1,75 @@
+
+export class List {
+
+	constructor( ...headers ) {
+
+		this.headers = headers;
+		this.children = [];
+		this.domElement = document.createElement( 'div' );
+		this.domElement.className = 'list-container';
+		this.domElement.style.padding = '10px';
+		this.id = `list-${Math.random().toString( 36 ).substr( 2, 9 )}`;
+		this.domElement.dataset.listId = this.id;
+
+		this.gridStyleElement = document.createElement( 'style' );
+		this.domElement.appendChild( this.gridStyleElement );
+
+		const headerRow = document.createElement( 'div' );
+		headerRow.className = 'list-header';
+		this.headers.forEach( headerText => {
+
+			const headerCell = document.createElement( 'div' );
+			headerCell.className = 'list-header-cell';
+			headerCell.textContent = headerText;
+			headerRow.appendChild( headerCell );
+
+		} );
+		this.domElement.appendChild( headerRow );
+
+	}
+
+	setGridStyle( gridTemplate ) {
+
+		this.gridStyleElement.textContent = `
+[data-list-id="${this.id}"] > .list-header,
+[data-list-id="${this.id}"] .list-item-row {
+	grid-template-columns: ${gridTemplate};
+}
+`;
+
+	}
+
+	add( item ) {
+
+		if ( item.parent !== null ) {
+
+			item.parent.remove( item );
+
+		}
+
+		item.domElement.classList.add( 'header-wrapper', 'section-start' );
+		item.parent = this;
+
+		this.children.push( item );
+		this.domElement.appendChild( item.domElement );
+
+	}
+
+	remove( item ) {
+
+		const index = this.children.indexOf( item );
+
+		if ( index !== - 1 ) {
+
+			this.children.splice( index, 1 );
+			this.domElement.removeChild( item.domElement );
+
+			item.parent = null;
+
+		}
+
+		return this;
+
+	}
+
+}

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

@@ -0,0 +1,170 @@
+import { Style } from './Style.js';
+
+export class Profiler {
+
+	constructor() {
+
+		this.tabs = {};
+		this.activeTabId = null;
+		this.isResizing = false;
+		this.lastHeight = 350;
+
+		Style.init();
+
+		this.setupShell();
+		this.setupResizing();
+
+	}
+
+	setupShell() {
+
+		this.domElement = document.createElement( 'div' );
+		this.domElement.id = 'profiler-shell';
+
+		this.toggleButton = document.createElement( 'button' );
+		this.toggleButton.id = 'profiler-toggle';
+		this.toggleButton.innerHTML = `
+<span id="toggle-text">
+	<span id="fps-counter">-</span>
+	<span class="fps-label">FPS</span>
+</span>
+<!-- <span class="toggle-separator"></span> -->
+<span id="toggle-icon">
+	<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-device-ipad-horizontal-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11.5 20h-6.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v5.5" /><path d="M9 17h2" /><path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M20.2 20.2l1.8 1.8" /></svg>
+</span>
+`;
+		this.toggleButton.onclick = () => this.togglePanel();
+
+		this.panel = document.createElement( 'div' );
+		this.panel.id = 'profiler-panel';
+
+		const header = document.createElement( 'div' );
+		header.className = 'profiler-header';
+		this.tabsContainer = document.createElement( 'div' );
+		this.tabsContainer.className = 'profiler-tabs';
+
+		const controls = document.createElement( 'div' );
+		controls.className = 'profiler-controls';
+
+		this.maximizeBtn = document.createElement( 'button' );
+		this.maximizeBtn.id = 'maximize-btn';
+		this.maximizeBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>';
+		this.maximizeBtn.onclick = () => this.toggleMaximize();
+
+		const hideBtn = document.createElement( 'button' );
+		hideBtn.id = 'hide-panel-btn';
+		hideBtn.textContent = '-';
+		hideBtn.onclick = () => this.togglePanel();
+
+		controls.append( this.maximizeBtn, hideBtn );
+		header.append( this.tabsContainer, controls );
+
+		this.contentWrapper = document.createElement( 'div' );
+		this.contentWrapper.className = 'profiler-content-wrapper';
+
+		const resizer = document.createElement( 'div' );
+		resizer.className = 'panel-resizer';
+
+		this.panel.append( resizer, header, this.contentWrapper );
+
+		this.domElement.append( this.toggleButton, this.panel );
+
+	}
+
+	setupResizing() {
+
+		const resizer = this.panel.querySelector( '.panel-resizer' );
+
+		const onStart = ( e ) => {
+
+			this.isResizing = true;
+			this.panel.classList.add( 'resizing' );
+			const startY = e.clientY || e.touches[ 0 ].clientY;
+			const startHeight = this.panel.offsetHeight;
+
+			const onMove = ( moveEvent ) => {
+
+				if ( ! this.isResizing ) return;
+				moveEvent.preventDefault();
+				const currentY = moveEvent.clientY || moveEvent.touches[ 0 ].clientY;
+				const newHeight = startHeight - ( currentY - startY );
+				if ( newHeight > 100 && newHeight < window.innerHeight - 50 ) {
+
+					this.panel.style.height = `${newHeight}px`;
+
+				}
+
+			};
+
+			const onEnd = () => {
+
+				this.isResizing = false;
+				this.panel.classList.remove( 'resizing' );
+				document.removeEventListener( 'mousemove', onMove );
+				document.removeEventListener( 'mouseup', onEnd );
+				document.removeEventListener( 'touchmove', onMove );
+				document.removeEventListener( 'touchend', onEnd );
+				if ( ! this.panel.classList.contains( 'maximized' ) ) {
+
+					this.lastHeight = this.panel.offsetHeight;
+
+				}
+
+			};
+
+			document.addEventListener( 'mousemove', onMove );
+			document.addEventListener( 'mouseup', onEnd );
+			document.addEventListener( 'touchmove', onMove, { passive: false } );
+			document.addEventListener( 'touchend', onEnd );
+
+		};
+
+		resizer.addEventListener( 'mousedown', onStart );
+		resizer.addEventListener( 'touchstart', onStart );
+
+	}
+
+	toggleMaximize() {
+
+		if ( this.panel.classList.contains( 'maximized' ) ) {
+
+			this.panel.classList.remove( 'maximized' );
+			this.panel.style.height = `${ this.lastHeight }px`;
+			this.maximizeBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>';
+
+		} else {
+
+			this.lastHeight = this.panel.offsetHeight;
+			this.panel.classList.add( 'maximized' );
+			this.panel.style.height = '100vh';
+			this.maximizeBtn.innerHTML = '<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="8" y="8" width="12" height="12" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>';
+
+		}
+
+	}
+
+	addTab( tab ) {
+
+		this.tabs[ tab.id ] = tab;
+		tab.button.onclick = () => this.setActiveTab( tab.id );
+		this.tabsContainer.appendChild( tab.button );
+		this.contentWrapper.appendChild( tab.content );
+
+	}
+
+	setActiveTab( id ) {
+
+		if ( this.activeTabId ) this.tabs[ this.activeTabId ].setActive( false );
+		this.activeTabId = id;
+		this.tabs[ id ].setActive( true );
+
+	}
+
+	togglePanel() {
+
+		this.panel.classList.toggle( 'visible' );
+		this.toggleButton.classList.toggle( 'hidden' );
+
+	}
+
+}