@gnsx/three 0.185.15 → 0.186.0

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

@@ -45,8 +45,8 @@ class Timeline extends Tab {
 		this.baseTriangles = 0;
 		this.currentFrame = null;
 		this.isHierarchicalView = true;
-		this.callBlocks = new WeakMap();
-		this.fallbackBlocks = [];
+		this.activeBlocks = new Map();
+		this.domPool = [];
 		this.originalBackend = null;
 		this.originalMethods = new Map();
 		this.renderer = null;
@@ -507,8 +507,24 @@ class Timeline extends Tab {
 		this.timelineTrack.style.margin = '10px';
 		this.timelineTrack.style.marginTop = '8px';
 		this.timelineTrack.style.backgroundColor = 'var(--background-color)';
+		this.timelineTrack.style.position = 'relative';
 		mainArea.appendChild( this.timelineTrack );
 
+		this.timelineContent = document.createElement( 'div' );
+		this.timelineContent.style.position = 'relative';
+		this.timelineContent.style.width = '100%';
+		this.timelineTrack.appendChild( this.timelineContent );
+
+		this.timelineTrack.addEventListener( 'scroll', () => {
+
+			if ( ! this.isRecording && this.frames.length > 0 ) {
+
+				this.updateVisibleBlocks();
+
+			}
+
+		} );
+
 		container.appendChild( mainArea );
 		this.content.appendChild( container );
 
@@ -708,7 +724,9 @@ class Timeline extends Tab {
 	clear() {
 
 		this.frames = [];
-		this.timelineTrack.innerHTML = '';
+		this.clearActiveBlocks();
+		this.timelineContent.innerHTML = '';
+		this.timelineContent.style.height = '0px';
 		this.playhead.style.display = 'none';
 		this.frameInfo.textContent = '';
 		this.baseTriangles = 0;
@@ -1235,7 +1253,7 @@ class Timeline extends Tab {
 
 			if ( details[ key ] !== undefined ) {
 
-				parts.push( `<span style="opacity: 0.5">${key}:</span> <span style="color: var(--text-secondary); opacity: 1">${details[ key ]}</span>` );
+				parts.push( `<span class="timeline-detail-key">${key}:</span> <span class="timeline-detail-value">${details[ key ]}</span>` );
 
 			}
 
@@ -1243,7 +1261,7 @@ class Timeline extends Tab {
 
 		if ( parts.length === 0 ) return '';
 
-		return `<span style="font-size: 11px; margin-left: 8px; color: var(--text-secondary); opacity: 1;">{ ${parts.join( '<span style="opacity: 0.5">, </span>' )} }</span>`;
+		return `<span class="timeline-detail-block">{ ${parts.join( '<span class="timeline-detail-sep">, </span>' )} }</span>`;
 
 	}
 
@@ -1331,16 +1349,18 @@ class Timeline extends Tab {
 		this.renderTimelineTrack( frame );
 
 		// Update UI texts
-		const isCompact = this.profiler.panel.offsetWidth < 800;
+		const panelWidth = this.content.offsetWidth;
+
+		const isCompact = panelWidth < 800;
 		const frameLabel = isCompact ? '' : 'Frame: ';
 		const fpsSuffix = isCompact ? '' : ' FPS';
 		const callsSuffix = isCompact ? '' : ' calls';
 		const trianglesSuffix = isCompact ? '' : ' triangles';
 
-		const group = ( c, text ) => `<span style="display:inline-flex;align-items:center;margin-left:12px;flex-shrink:0;"><span style="width:6px;height:6px;border-radius:50%;background-color:${c};margin-right:6px;flex-shrink:0;"></span>${text}</span>`;
+		const group = ( type, text ) => `<span class="timeline-info-group"><span class="timeline-info-dot ${type}"></span>${text}</span>`;
 		const maxTriangles = Math.max( this.baseTriangles, frame.triangles || 0 );
 		const trianglesText = isCompact ? ( frame.triangles || 0 ) : ( frame.triangles || 0 ) + ' / ' + maxTriangles + trianglesSuffix;
-		this.frameInfo.innerHTML = frameLabel + frame.id + group( 'var(--color-fps)', ( frame.fps || 0 ).toFixed( 1 ) + fpsSuffix ) + group( 'var(--color-call)', frame.calls.length + callsSuffix ) + group( 'var(--color-red)', trianglesText );
+		this.frameInfo.innerHTML = frameLabel + frame.id + group( 'fps', ( frame.fps || 0 ).toFixed( 1 ) + fpsSuffix ) + group( 'call', frame.calls.length + callsSuffix ) + group( 'red', trianglesText );
 
 		// Update playhead position
 		const rect = this.graphSlider.getBoundingClientRect();
@@ -1373,98 +1393,205 @@ class Timeline extends Tab {
 
 	}
 
-	getCallBlock( call, fallbackIndex, instanceIndex = 0 ) {
+	createBlock() {
+
+		const block = document.createElement( 'div' );
+		block.style.display = 'flex';
+		block.style.alignItems = 'center';
+		block.style.padding = '4px 8px';
+		block.style.backgroundColor = 'rgba(255, 255, 255, 0.03)';
+		block.style.fontFamily = 'monospace';
+		block.style.fontSize = '12px';
+		block.style.color = 'var(--text-primary)';
+		block.style.overflow = 'hidden';
+		block.style.position = 'absolute';
+		block.style.left = '0';
+		block.style.right = '0';
+		block.style.height = '24px';
+		block.style.boxSizing = 'border-box';
+
+		block.arrow = document.createElement( 'span' );
+		block.arrow.style.fontSize = '10px';
+		block.arrow.style.marginRight = '8px';
+		block.arrow.style.cursor = 'pointer';
+		block.arrow.style.width = '35px';
+		block.arrow.style.textAlign = 'center';
+		block.arrow.style.flexShrink = '0';
+		block.arrow.style.whiteSpace = 'nowrap';
+		block.appendChild( block.arrow );
+
+		block.titleSpan = document.createElement( 'span' );
+		block.titleSpan.style.flex = '1';
+		block.titleSpan.style.minWidth = '0';
+		block.titleSpan.style.overflow = 'hidden';
+		block.titleSpan.style.textOverflow = 'ellipsis';
+		block.titleSpan.style.whiteSpace = 'nowrap';
+		block.appendChild( block.titleSpan );
+
+		block.addEventListener( 'click', ( e ) => {
+
+			if ( ! block._groupId ) return;
+
+			e.stopPropagation();
+
+			if ( this.collapsedGroups.has( block._groupId ) ) {
+
+				this.collapsedGroups.delete( block._groupId );
 
-		const target = call.target;
-		let block;
+			} else {
 
-		if ( target && typeof target === 'object' ) {
+				this.collapsedGroups.add( block._groupId );
 
-			let blocks = this.callBlocks.get( target );
+			}
 
-			if ( ! blocks ) {
+			this.renderTimelineTrack( this.frames[ this.selectedFrameIndex ] );
 
-				blocks = [];
-				this.callBlocks.set( target, blocks );
+		} );
+
+		return block;
+
+	}
+
+	clearActiveBlocks() {
+
+		if ( this.activeBlocks ) {
+
+			for ( const block of this.activeBlocks.values() ) {
+
+				block.remove();
+				this.domPool.push( block );
 
 			}
 
-			block = blocks[ instanceIndex ];
+			this.activeBlocks.clear();
 
-		} else {
+		}
 
-			block = this.fallbackBlocks[ fallbackIndex ];
+	}
+
+	updateVisibleBlocks() {
+
+		if ( ! this.flatList || this.flatList.length === 0 ) {
+
+			this.clearActiveBlocks();
+			return;
 
 		}
 
-		if ( ! block ) {
+		const ROW_HEIGHT = 26;
+		const BUFFER_ROWS = 5;
 
-			block = document.createElement( 'div' );
-			block.style.display = 'flex';
-			block.style.alignItems = 'center';
-			block.style.padding = '4px 8px';
-			block.style.margin = '2px 0';
-			block.style.backgroundColor = 'rgba(255, 255, 255, 0.03)';
-			block.style.fontFamily = 'monospace';
-			block.style.fontSize = '12px';
-			block.style.color = 'var(--text-primary)';
-			block.style.overflow = 'hidden';
+		const scrollTop = this.timelineTrack.scrollTop;
+		const viewportHeight = this.timelineTrack.clientHeight;
 
-			block.arrow = document.createElement( 'span' );
-			block.arrow.style.fontSize = '10px';
-			block.arrow.style.marginRight = '8px';
-			block.arrow.style.cursor = 'pointer';
-			block.arrow.style.width = '35px';
-			block.arrow.style.textAlign = 'center';
-			block.arrow.style.flexShrink = '0';
-			block.arrow.style.whiteSpace = 'nowrap';
-			block.appendChild( block.arrow );
+		let startIndex = Math.floor( scrollTop / ROW_HEIGHT ) - BUFFER_ROWS;
+		let endIndex = Math.ceil( ( scrollTop + viewportHeight ) / ROW_HEIGHT ) + BUFFER_ROWS;
 
-			block.titleSpan = document.createElement( 'span' );
-			block.titleSpan.style.flex = '1';
-			block.titleSpan.style.minWidth = '0';
-			block.titleSpan.style.overflow = 'hidden';
-			block.titleSpan.style.textOverflow = 'ellipsis';
-			block.titleSpan.style.whiteSpace = 'nowrap';
-			block.appendChild( block.titleSpan );
+		startIndex = Math.max( 0, startIndex );
+		endIndex = Math.min( this.flatList.length - 1, endIndex );
 
-			block.addEventListener( 'click', ( e ) => {
+		const nextActiveBlocks = new Map();
 
-				if ( ! block._groupId ) return;
+		for ( const [ index, block ] of this.activeBlocks.entries() ) {
 
-				e.stopPropagation();
+			if ( index < startIndex || index > endIndex ) {
 
-				if ( this.collapsedGroups.has( block._groupId ) ) {
+				block.remove();
+				this.domPool.push( block );
 
-					this.collapsedGroups.delete( block._groupId );
+			} else {
 
-				} else {
+				nextActiveBlocks.set( index, block );
 
-					this.collapsedGroups.add( block._groupId );
+			}
+
+		}
+
+		this.activeBlocks = nextActiveBlocks;
+
+		for ( let i = startIndex; i <= endIndex; i ++ ) {
+
+			let block = this.activeBlocks.get( i );
+
+			if ( ! block ) {
+
+				block = this.domPool.pop() || this.createBlock();
+				this.timelineContent.appendChild( block );
+				this.activeBlocks.set( i, block );
+
+			}
+
+			const item = this.flatList[ i ];
+			const call = item.call;
+
+			block.style.top = ( i * ROW_HEIGHT ) + 'px';
+			block.style.marginLeft = ( item.indent * 24 ) + 'px';
+			block.style.borderLeft = '4px solid ' + this.getColorForMethod( call.method );
+			block._groupId = item.groupId;
+
+			const directInfoIcon = block.querySelector( ':scope > .info-icon' );
+			if ( directInfoIcon ) {
+
+				directInfoIcon.remove();
+
+			}
+
+			block.titleSpan.textContent = '';
+
+			const methodSpan = document.createElement( 'span' );
+			methodSpan.textContent = call.method;
+			block.titleSpan.appendChild( methodSpan );
+
+			if ( call.details ) {
+
+				let tooltipText = `### ${call.method}\n`;
+				for ( const key in call.details ) {
+
+					if ( call.details[ key ] !== undefined ) {
+
+						tooltipText += `**${key}**: ${call.details[ key ]}\n`;
+
+					}
 
 				}
 
-				this.renderTimelineTrack( this.frames[ this.selectedFrameIndex ] );
+				const infoIcon = info( block.titleSpan, tooltipText );
+				infoIcon.style.flexShrink = '0';
+				infoIcon.style.marginLeft = '6px';
+				infoIcon.style.display = 'inline-flex';
+				infoIcon.style.verticalAlign = 'middle';
 
-			} );
+			}
 
-			if ( target && typeof target === 'object' ) {
+			const detailsAndCountSpan = document.createElement( 'span' );
+			let detailsAndCountHTML = ( call.formatedDetails ? call.formatedDetails : '' );
+			if ( call.count > 1 ) {
 
-				this.callBlocks.get( target )[ instanceIndex ] = block;
+				detailsAndCountHTML += ` <span class="timeline-call-count">( ${call.count} )</span>`;
 
-			} else {
+			}
+
+			if ( detailsAndCountHTML ) {
 
-				this.fallbackBlocks[ fallbackIndex ] = block;
+				detailsAndCountSpan.innerHTML = detailsAndCountHTML;
+				block.titleSpan.appendChild( detailsAndCountSpan );
 
 			}
 
-		}
+			if ( item.groupId ) {
 
-		block.style.cursor = 'default';
-		block._groupId = null;
-		block.arrow.style.display = 'none';
+				block.style.cursor = 'pointer';
+				block.arrow.style.display = 'inline-block';
+				block.arrow.textContent = item.isCollapsed ? '[ + ]' : '[ - ]';
 
-		return block;
+			} else {
+
+				block.style.cursor = 'default';
+				block.arrow.style.display = 'none';
+
+			}
+
+		}
 
 	}
 
@@ -1472,25 +1599,23 @@ class Timeline extends Tab {
 
 		if ( this.isRecording ) return;
 
+		this.flatList = [];
+
 		if ( ! frame || frame.calls.length === 0 ) {
 
-			this.timelineTrack.innerHTML = '';
+			this.clearActiveBlocks();
+			this.timelineContent.innerHTML = '';
+			this.timelineContent.style.height = '0px';
 			return;
 
 		}
 
-		// Track collapsed states
 		if ( ! this.collapsedGroups ) {
 
 			this.collapsedGroups = new Set();
 
 		}
 
-		let blockIndex = 0;
-		const trackChildren = this.timelineTrack.children;
-		let childIndex = 0;
-		const instanceCounts = new WeakMap();
-
 		if ( this.isHierarchicalView ) {
 
 			const groupedCalls = [];
@@ -1516,15 +1641,12 @@ class Timeline extends Tab {
 			}
 
 			let currentIndent = 0;
-			const indentSize = 24;
-
-			// Stack to keep track of parent elements and their collapsed state
-			const elementStack = [ { element: this.timelineTrack, isCollapsed: false, id: '', beginCount: 0 } ];
+			const elementStack = [ { isCollapsed: false, id: '', beginCount: 0 } ];
+			const instanceCounts = new WeakMap();
 
 			for ( let i = 0; i < groupedCalls.length; i ++ ) {
 
 				const call = groupedCalls[ i ];
-
 				let instanceIndex = 0;
 
 				if ( call.target && typeof call.target === 'object' ) {
@@ -1534,90 +1656,35 @@ class Timeline extends Tab {
 
 				}
 
-				const block = this.getCallBlock( call, blockIndex ++, instanceIndex );
-				block.style.marginLeft = ( currentIndent * indentSize ) + 'px';
-				block.style.borderLeft = '4px solid ' + this.getColorForMethod( call.method );
-
-				// Clean up any old info-icon directly under block
-				const directInfoIcon = block.querySelector( ':scope > .info-icon' );
-				if ( directInfoIcon ) {
-
-					directInfoIcon.remove();
-
-				}
-
-				// Build titleSpan content
-				block.titleSpan.textContent = '';
-
-				const methodSpan = document.createElement( 'span' );
-				methodSpan.textContent = call.method;
-				block.titleSpan.appendChild( methodSpan );
-
-				if ( call.details ) {
-
-					let tooltipText = `### ${call.method}\n`;
-					for ( const key in call.details ) {
-
-						if ( call.details[ key ] !== undefined ) {
-
-							tooltipText += `**${key}**: ${call.details[ key ]}\n`;
-
-						}
-
-					}
-
-					const infoIcon = info( block.titleSpan, tooltipText );
-					infoIcon.style.flexShrink = '0';
-					infoIcon.style.marginLeft = '6px';
-					infoIcon.style.display = 'inline-flex';
-					infoIcon.style.verticalAlign = 'middle';
-
-				}
-
-				const detailsAndCountSpan = document.createElement( 'span' );
-				let detailsAndCountHTML = ( call.formatedDetails ? call.formatedDetails : '' );
-				if ( call.count > 1 ) {
-
-					detailsAndCountHTML += ` <span style="opacity: 0.5">( ${call.count} )</span>`;
+				const currentParent = elementStack[ elementStack.length - 1 ];
 
-				}
+				let groupId = null;
+				let isCollapsed = false;
 
-				if ( detailsAndCountHTML ) {
+				if ( call.method.startsWith( 'begin' ) ) {
 
-					detailsAndCountSpan.innerHTML = detailsAndCountHTML;
-					block.titleSpan.appendChild( detailsAndCountSpan );
+					const beginIndex = currentParent.beginCount ++;
+					groupId = currentParent.id + '/' + call.method + '-' + beginIndex;
+					isCollapsed = this.collapsedGroups.has( groupId );
 
 				}
 
-				const currentParent = elementStack[ elementStack.length - 1 ];
-
-				// Only add to DOM if parent is not collapsed
 				if ( ! currentParent.isCollapsed ) {
 
-					if ( trackChildren[ childIndex ] !== block ) {
-
-						this.timelineTrack.insertBefore( block, trackChildren[ childIndex ] );
-
-					}
-
-					childIndex ++;
+					this.flatList.push( {
+						call,
+						indent: currentIndent,
+						groupId,
+						isCollapsed,
+						instanceIndex
+					} );
 
 				}
 
 				if ( call.method.startsWith( 'begin' ) ) {
 
-					const beginIndex = currentParent.beginCount ++;
-					const groupId = currentParent.id + '/' + call.method + '-' + beginIndex;
-					const isCollapsed = this.collapsedGroups.has( groupId );
-
-					block._groupId = groupId;
-					block.style.cursor = 'pointer';
-
-					block.arrow.style.display = 'inline-block';
-					block.arrow.textContent = isCollapsed ? '[ + ]' : '[ - ]';
-
 					currentIndent ++;
-					elementStack.push( { element: block, isCollapsed: currentParent.isCollapsed || isCollapsed, id: groupId, beginCount: 0 } );
+					elementStack.push( { isCollapsed: currentParent.isCollapsed || isCollapsed, id: groupId, beginCount: 0 } );
 
 				} else if ( call.method.startsWith( 'finish' ) ) {
 
@@ -1649,36 +1716,21 @@ class Timeline extends Tab {
 
 				const call = sortedCalls[ i ];
 
-				const block = this.getCallBlock( call, blockIndex ++ );
-				block.style.marginLeft = '0px';
-				block.style.borderLeft = '4px solid ' + this.getColorForMethod( call.method );
-
-				const infoIcon = block.querySelector( '.info-icon' );
-				if ( infoIcon ) {
-
-					infoIcon.remove();
-
-				}
-
-				block.titleSpan.innerHTML = call.method + ( call.count > 1 ? ` <span style="opacity: 0.5">( ${call.count} )</span>` : '' );
-
-				if ( trackChildren[ childIndex ] !== block ) {
-
-					this.timelineTrack.insertBefore( block, trackChildren[ childIndex ] );
-
-				}
-
-				childIndex ++;
+				this.flatList.push( {
+					call,
+					indent: 0,
+					groupId: null,
+					isCollapsed: false,
+					instanceIndex: 0
+				} );
 
 			}
 
 		}
 
-		while ( this.timelineTrack.children.length > childIndex ) {
-
-			this.timelineTrack.removeChild( this.timelineTrack.lastChild );
-
-		}
+		const ROW_HEIGHT = 26;
+		this.timelineContent.style.height = ( this.flatList.length * ROW_HEIGHT ) + 'px';
+		this.updateVisibleBlocks();
 
 	}