super-three 0.184.0 → 0.185.0

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

@@ -1,4 +1,3 @@
-
 export class Graph {
 
 	constructor( maxPoints = 512 ) {
@@ -8,20 +7,37 @@ export class Graph {
 		this.limit = 0;
 		this.limitIndex = 0;
 
-		this.domElement = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
-		this.domElement.setAttribute( 'class', 'graph-svg' );
+		this.domElement = document.createElement( 'canvas' );
+		this.domElement.setAttribute( 'class', 'graph-canvas' );
+
+		this.ctx = this.domElement.getContext( '2d' );
+
+		this.width = 0;
+		this.height = 0;
+		this.devicePixelRatio = window.devicePixelRatio || 1;
 
 	}
 
-	addLine( id, color ) {
+	resize( width, height ) {
+
+		this.width = width;
+		this.height = height;
 
-		const path = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
-		path.setAttribute( 'class', 'graph-path' );
-		path.style.stroke = color;
-		path.style.fill = color;
-		this.domElement.appendChild( path );
+		this.devicePixelRatio = window.devicePixelRatio || 1;
+		this.domElement.width = width * this.devicePixelRatio;
+		this.domElement.height = height * this.devicePixelRatio;
+
+		this.draw();
+
+	}
+
+	addLine( id, color ) {
 
-		this.lines[ id ] = { path, color, points: [] };
+		this.lines[ id ] = {
+			color: color,
+			resolved: null,
+			points: []
+		};
 
 	}
 
@@ -55,41 +71,162 @@ export class Graph {
 
 	update() {
 
-		const svgWidth = this.domElement.clientWidth;
-		const svgHeight = this.domElement.clientHeight;
-		if ( svgWidth === 0 ) return;
+		const width = this.domElement.clientWidth;
+		const height = this.domElement.clientHeight;
 
-		const pointStep = svgWidth / ( this.maxPoints - 1 );
+		if ( width === 0 || height === 0 ) return;
+
+		if ( width !== this.width || height !== this.height ) {
+
+			this.resize( width, height );
+
+		} else {
+
+			this.draw();
+
+		}
+
+		if ( this.limitIndex ++ > this.maxPoints ) {
+
+			this.resetLimit();
+
+		}
+
+	}
+
+	draw() {
+
+		const ctx = this.ctx;
+		const dpr = this.devicePixelRatio;
+		const width = this.width;
+		const height = this.height;
+
+		ctx.clearRect( 0, 0, width * dpr, height * dpr );
+
+		if ( width === 0 || height === 0 ) return;
+
+		ctx.save();
+		ctx.scale( dpr, dpr );
+
+		const pointStep = width / ( this.maxPoints - 1 );
 
 		for ( const id in this.lines ) {
 
 			const line = this.lines[ id ];
+			if ( line.points.length === 0 ) continue;
+
+			if ( ! line.resolved ) {
+
+				line.resolved = this._resolveColor( line.color );
+
+			}
+
+			const resolved = line.resolved;
+			const drawColor = resolved ? resolved.color : '#ffffff';
+			const offset = width - ( ( line.points.length - 1 ) * pointStep );
+
+			// 1. Draw fill (with opacity)
+			let fillStyle = drawColor;
+
+			if ( height > 0 ) {
 
-			let pathString = `M 0,${ svgHeight }`;
+				const gradient = ctx.createLinearGradient( 0, 0, 0, height );
+				gradient.addColorStop( 0, drawColor );
+				gradient.addColorStop( 1, ( resolved && resolved.transparent ) || 'rgba(0,0,0,0)' );
+				fillStyle = gradient;
+
+			}
+
+			ctx.fillStyle = fillStyle;
+			ctx.globalAlpha = 0.4;
+			ctx.beginPath();
+			ctx.moveTo( offset, height );
 			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 }`;
+				const x = offset + i * pointStep;
+				const y = this.limit === 0 ? height : height - ( line.points[ i ] / this.limit ) * height;
+				ctx.lineTo( x, y );
 
 			}
 
-			pathString += ` L ${( line.points.length - 1 ) * pointStep},${ svgHeight } Z`;
+			ctx.lineTo( offset + ( line.points.length - 1 ) * pointStep, height );
+			ctx.closePath();
+			ctx.fill();
+
+			// 2. Draw stroke (full opacity)
+			ctx.strokeStyle = drawColor;
+			ctx.lineWidth = 2;
+			ctx.globalAlpha = 1.0;
+			ctx.beginPath();
+			for ( let i = 0; i < line.points.length; i ++ ) {
+
+				const x = offset + i * pointStep;
+				const y = this.limit === 0 ? height : height - ( line.points[ i ] / this.limit ) * height;
+				if ( i === 0 ) {
+
+					ctx.moveTo( x, y );
+
+				} else {
 
-			const offset = svgWidth - ( ( line.points.length - 1 ) * pointStep );
-			line.path.setAttribute( 'transform', `translate(${ offset }, 0)` );
-			line.path.setAttribute( 'd', pathString );
+					ctx.lineTo( x, y );
+
+				}
+
+			}
+
+			ctx.stroke();
 
 		}
 
-		//
+		ctx.restore();
 
-		if ( this.limitIndex ++ > this.maxPoints ) {
+	}
 
-			this.resetLimit();
+	_resolveColor( color ) {
+
+		let resolved = color;
+
+		if ( color.startsWith( 'var(' ) ) {
+
+			const varName = color.slice( 4, - 1 ).trim();
+			resolved = getComputedStyle( this.domElement ).getPropertyValue( varName ).trim();
+
+			if ( ! resolved ) {
+
+				return null;
+
+			}
+
+		}
+
+		let transparentColor = 'rgba(0,0,0,0)';
+
+		if ( resolved.startsWith( '#' ) ) {
+
+			const hex = resolved.substring( 0, 7 );
+			transparentColor = hex + '00';
+
+		} else if ( resolved.startsWith( 'rgb' ) ) {
+
+			const match = resolved.match( /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)$/ );
+
+			if ( match ) {
+
+				transparentColor = `rgba(${match[ 1 ]}, ${match[ 2 ]}, ${match[ 3 ]}, 0)`;
+
+			}
 
 		}
 
+		return {
+			color: resolved,
+			transparent: transparentColor
+		};
+
+	}
+
+	dispose() {
+
 	}
 
 }

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

@@ -4,6 +4,7 @@ export class Item {
 
 		this.children = [];
 		this.isOpen = true;
+		this.isCollapsible = false;
 		this.childrenContainer = null;
 		this.parent = null;
 		this.domElement = document.createElement( 'div' );
@@ -13,23 +14,15 @@ export class Item {
 
 		this.userData = {};
 
-		this.data = data;
-		this.data.forEach( ( cellData ) => {
+		this.data = [];
+		data.forEach( ( cellData, index ) => {
 
 			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.setValue( index, cellData );
+
 		} );
 
 		this.domElement.appendChild( this.itemRow );
@@ -116,7 +109,7 @@ export class Item {
 		const firstCell = this.itemRow.querySelector( '.list-item-cell:first-child' );
 		let toggler = this.itemRow.querySelector( '.item-toggler' );
 
-		if ( this.children.length > 0 ) {
+		if ( this.children.length > 0 || this.isCollapsible ) {
 
 			if ( ! toggler ) {
 
@@ -140,6 +133,36 @@ export class Item {
 
 	}
 
+	setCollapsible( collapsible ) {
+
+		this.isCollapsible = collapsible;
+
+		if ( collapsible ) {
+
+			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 );
+
+			}
+
+		} else {
+
+			this.itemRow.classList.remove( 'collapsible' );
+
+		}
+
+		this.updateToggler();
+
+		return this;
+
+	}
+
 	toggle() {
 
 		this.isOpen = ! this.isOpen;
@@ -167,4 +190,60 @@ export class Item {
 
 	}
 
+	show() {
+
+		this.domElement.style.display = '';
+
+		return this;
+
+	}
+
+	hide() {
+
+		this.domElement.style.display = 'none';
+
+		return this;
+
+	}
+
+	setValue( index, value ) {
+
+		this.data[ index ] = value;
+
+		const cell = this.itemRow.children[ index ];
+
+		if ( cell ) {
+
+			const toggler = cell.querySelector( '.item-toggler' );
+
+			cell.innerHTML = '';
+
+			if ( toggler ) {
+
+				cell.appendChild( toggler );
+
+			}
+
+			if ( value instanceof HTMLElement ) {
+
+				cell.appendChild( value );
+
+			} else {
+
+				cell.append( String( value ) );
+
+			}
+
+		}
+
+		return this;
+
+	}
+
+	getValue( index ) {
+
+		return this.data[ index ];
+
+	}
+
 }

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

@@ -7,7 +7,7 @@ export class List {
 		this.children = [];
 		this.domElement = document.createElement( 'div' );
 		this.domElement.className = 'list-container';
-		this.domElement.style.padding = '10px';
+		this.domElement.style.padding = '5px 10px 10px 10px';
 		this.id = `list-${Math.random().toString( 36 ).slice( 2, 11 )}`;
 		this.domElement.dataset.listId = this.id;
 

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

@@ -1,5 +1,6 @@
 import { EventDispatcher } from 'three';
 import { Style } from './Style.js';
+import { Graph } from './Graph.js';
 import { getItem, setItem } from '../Inspector.js';
 
 export class Profiler extends EventDispatcher {
@@ -19,17 +20,29 @@ export class Profiler extends EventDispatcher {
 		this.maxZIndex = 1002; // Track the highest z-index for detached windows (starts at base z-index from CSS)
 		this.nextTabOriginalIndex = 0; // Track the original order of tabs as they are added
 
-		Style.init();
-
 		this.setupShell();
 		this.setupResizing();
 
+		Style.init( this.domElement );
+
 		// Setup window resize listener and update mobile status
 		this.setupWindowResizeListener();
 
 		// Setup orientation change listener for mobile devices
 		this.setupOrientationListener();
 
+		this.checkHeaderScroll();
+
+		this.panel.addEventListener( 'transitionend', ( e ) => {
+
+			if ( e.target === this.panel && ( e.propertyName === 'width' || e.propertyName === 'height' || e.propertyName === 'transform' ) ) {
+
+				this.checkHeaderScroll();
+
+			}
+
+		} );
+
 	}
 
 	getSize() {
@@ -180,6 +193,7 @@ export class Profiler extends EventDispatcher {
 
 			constrainDetachedWindows();
 			constrainMainPanel();
+			this.checkHeaderScroll();
 
 		} );
 
@@ -237,31 +251,36 @@ export class Profiler extends EventDispatcher {
 	setupShell() {
 
 		this.domElement = document.createElement( 'div' );
-		this.domElement.id = 'profiler-shell';
+
+		this.domElement.classList.add( 'three-inspector' );
 
 		this.toggleButton = document.createElement( 'button' );
-		this.toggleButton.id = 'profiler-toggle';
+		this.toggleButton.classList.add( 'profiler-toggle' );
 		this.toggleButton.innerHTML = `
-<span id="builtin-tabs-container"></span>
-<span id="toggle-text">
-	<span id="fps-counter">-</span>
+<span class="builtin-tabs-container"></span>
+<span class="toggle-text">
+	<span class="fps-counter">-</span>
 	<span class="fps-label">FPS</span>
 </span>
-<span id="toggle-icon">
+<span class="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 class="console-badge-container">
+		<span class="console-badge error" style="display: none;">0</span>
+		<span class="console-badge warn" style="display: none;">0</span>
+	</span>
 </span>
 `;
 		this.toggleButton.onclick = () => this.togglePanel();
 
-		this.builtinTabsContainer = this.toggleButton.querySelector( '#builtin-tabs-container' );
+		this.builtinTabsContainer = this.toggleButton.querySelector( '.builtin-tabs-container' );
 
 		// Create mini-panel for builtin tabs (shown when panel is hidden)
 		this.miniPanel = document.createElement( 'div' );
-		this.miniPanel.id = 'profiler-mini-panel';
+		this.miniPanel.classList.add( 'profiler-mini-panel' );
 		this.miniPanel.className = 'profiler-mini-panel';
 
 		this.panel = document.createElement( 'div' );
-		this.panel.id = 'profiler-panel';
+		this.panel.classList.add( 'profiler-panel' );
 
 		const header = document.createElement( 'div' );
 		header.className = 'profiler-header';
@@ -285,7 +304,7 @@ export class Profiler extends EventDispatcher {
 		controls.className = 'profiler-controls';
 
 		this.floatingBtn = document.createElement( 'button' );
-		this.floatingBtn.id = 'floating-btn';
+		this.floatingBtn.classList.add( 'floating-btn' );
 		this.floatingBtn.title = 'Switch to Right Side';
 		this.floatingBtn.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="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="21"></line></svg>';
 		this.floatingBtn.onclick = () => this.togglePosition();
@@ -305,12 +324,12 @@ export class Profiler extends EventDispatcher {
 		}
 
 		this.maximizeBtn = document.createElement( 'button' );
-		this.maximizeBtn.id = 'maximize-btn';
+		this.maximizeBtn.classList.add( '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.classList.add( 'hide-panel-btn' );
 		hideBtn.textContent = '-';
 		hideBtn.onclick = () => this.togglePanel();
 
@@ -337,6 +356,12 @@ export class Profiler extends EventDispatcher {
 
 		}
 
+		// Create a background performance graph for the toggle button
+		this.toggleGraph = new Graph( 80 );
+		this.toggleGraph.addLine( 'fps', '#4c4c6bff' );
+		this.toggleGraph.domElement.className = 'profiler-toggle-graph';
+		this.toggleButton.appendChild( this.toggleGraph.domElement );
+
 	}
 
 	setupResizing() {
@@ -385,6 +410,7 @@ export class Profiler extends EventDispatcher {
 				}
 
 				this.dispatchEvent( { type: 'resize' } );
+				this.checkHeaderScroll();
 
 			};
 
@@ -430,6 +456,7 @@ export class Profiler extends EventDispatcher {
 		if ( this.panel.classList.contains( 'maximized' ) ) {
 
 			this.panel.classList.remove( 'maximized' );
+			this.domElement.classList.remove( 'maximized' );
 
 			// Restore size based on current position
 			if ( this.position === 'bottom' ) {
@@ -460,6 +487,7 @@ export class Profiler extends EventDispatcher {
 			}
 
 			this.panel.classList.add( 'maximized' );
+			this.domElement.classList.add( 'maximized' );
 
 			// Maximize based on current position
 			if ( this.position === 'bottom' ) {
@@ -752,6 +780,7 @@ export class Profiler extends EventDispatcher {
 			if ( this.panel.classList.contains( 'maximized' ) ) {
 
 				this.panel.classList.remove( 'maximized' );
+				this.domElement.classList.remove( 'maximized' );
 				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>';
 
 			}
@@ -759,7 +788,7 @@ export class Profiler extends EventDispatcher {
 			// No tabs visible - set to minimum size
 			if ( this.position === 'bottom' ) {
 
-				this.panel.style.height = '38px';
+				this.panel.style.height = '32px';
 
 			} else if ( this.position === 'right' ) {
 
@@ -778,7 +807,7 @@ export class Profiler extends EventDispatcher {
 				if ( this.position === 'bottom' ) {
 
 					const currentHeight = parseInt( this.panel.style.height );
-					if ( currentHeight === 38 ) {
+					if ( currentHeight === 32 || currentHeight === 38 ) {
 
 						this.panel.style.height = `${ this.lastHeightBottom }px`;
 
@@ -800,6 +829,29 @@ export class Profiler extends EventDispatcher {
 		}
 
 		this.dispatchEvent( { type: 'resize' } );
+		this.checkHeaderScroll();
+
+	}
+
+	checkHeaderScroll() {
+
+		const header = this.panel.querySelector( '.profiler-header' );
+
+		if ( header ) {
+
+			const hasScroll = header.scrollWidth > header.clientWidth + 1;
+
+			if ( hasScroll ) {
+
+				this.panel.classList.add( 'has-horizontal-scroll' );
+
+			} else {
+
+				this.panel.classList.remove( 'has-horizontal-scroll' );
+
+			}
+
+		}
 
 	}
 
@@ -877,15 +929,15 @@ export class Profiler extends EventDispatcher {
 
 			if ( isDragging && hasMoved && previewWindow ) {
 
+				const finalX = parseInt( previewWindow.style.left ) + 200;
+				const finalY = parseInt( previewWindow.style.top ) + 20;
+
 				if ( previewWindow.parentNode ) {
 
 					previewWindow.parentNode.removeChild( previewWindow );
 
 				}
 
-				const finalX = parseInt( previewWindow.style.left ) + 200;
-				const finalY = parseInt( previewWindow.style.top ) + 20;
-
 				this.detachTab( tab, finalX, finalY );
 
 			} else if ( ! hasMoved ) {
@@ -975,7 +1027,7 @@ export class Profiler extends EventDispatcher {
 		windowPanel.appendChild( windowHeader );
 		windowPanel.appendChild( windowContent );
 
-		document.body.appendChild( windowPanel );
+		this.domElement.appendChild( windowPanel );
 
 		return windowPanel;
 
@@ -1123,13 +1175,7 @@ export class Profiler extends EventDispatcher {
 		windowPanel.style.left = `${ constrainedX }px`;
 		windowPanel.style.top = `${ constrainedY }px`;
 
-		if ( ! this.panel.classList.contains( 'visible' ) ) {
 
-			windowPanel.style.opacity = '0';
-			windowPanel.style.visibility = 'hidden';
-			windowPanel.style.pointerEvents = 'none';
-
-		}
 
 		// Hide detached window if tab is not visible
 		if ( ! tab.isVisible ) {
@@ -1189,7 +1235,7 @@ export class Profiler extends EventDispatcher {
 		windowPanel.appendChild( windowHeader );
 		windowPanel.appendChild( windowContent );
 
-		document.body.appendChild( windowPanel );
+		this.domElement.appendChild( windowPanel );
 
 		// Setup window dragging
 		this.setupDetachedWindowDrag( windowPanel, windowHeader, tab );
@@ -1484,6 +1530,8 @@ export class Profiler extends EventDispatcher {
 
 				}
 
+				this.dispatchEvent( { type: 'resize' } );
+
 			};
 
 			const onResizeEnd = () => {
@@ -1564,8 +1612,8 @@ export class Profiler extends EventDispatcher {
 
 			}
 
-			// Count only non-detached tabs that come before this one
-			if ( ! t.isDetached ) {
+			// Count only non-detached, non-builtin tabs that come before this one
+			if ( ! t.isDetached && ! t.builtin ) {
 
 				insertIndex ++;
 
@@ -1609,11 +1657,20 @@ export class Profiler extends EventDispatcher {
 
 		if ( this.tabs[ id ] ) {
 
-			this.tabs[ id ].setActive( true );
+			const tab = this.tabs[ id ];
+
+			if ( ! tab.isVisible ) {
+
+				tab.show();
+
+			}
+
+			tab.setActive( true );
 
 		}
 
 		this.saveLayout();
+		this.checkHeaderScroll();
 
 	}
 
@@ -1625,23 +1682,11 @@ export class Profiler extends EventDispatcher {
 
 		const isVisible = this.panel.classList.contains( 'visible' );
 
-		this.detachedWindows.forEach( detachedWindow => {
-
-			if ( isVisible ) {
-
-				detachedWindow.panel.style.opacity = '';
-				detachedWindow.panel.style.visibility = '';
-				detachedWindow.panel.style.pointerEvents = '';
+		if ( isVisible && this.activeTabId && this.tabs[ this.activeTabId ] ) {
 
-			} else {
-
-				detachedWindow.panel.style.opacity = '0';
-				detachedWindow.panel.style.visibility = 'hidden';
-				detachedWindow.panel.style.pointerEvents = 'none';
-
-			}
+			this.tabs[ this.activeTabId ].setActive( true );
 
-		} );
+		}
 
 		this.dispatchEvent( { type: 'resize' } );