@gnsx/three 0.185.16 → 0.186.0

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

@@ -4,11 +4,15 @@ import { Item } from '../ui/Item.js';
 import { splitPath, splitCamelCase } from '../ui/utils.js';
 import { getItem, setItem } from '../Inspector.js';
 
-import { RendererUtils, NoToneMapping, LinearSRGBColorSpace, QuadMesh, NodeMaterial, CanvasTarget, Vector2 } from '@gnsx/three/webgpu';
+import { RendererUtils, NoToneMapping, LinearSRGBColorSpace, QuadMesh, NodeMaterial, CanvasTarget, Vector2, Color } from '@gnsx/three/webgpu';
 import { renderOutput, vec2, vec3, vec4, Fn, screenUV, step, OnMaterialUpdate, uniform, float } from '@gnsx/three/tsl';
 
 const _size = /*@__PURE__*/ new Vector2();
 
+const splitIcon = '<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"><line x1="12" y1="1" x2="12" y2="23"></line><polyline points="5 8 1 12 5 16"></polyline><polyline points="19 8 23 12 19 16"></polyline></svg>';
+const fullscreenIcon = '<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"><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>';
+const backIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>';
+
 const aspectRatioUV = /*@__PURE__*/ Fn( ( [ uv, textureNode, canvasAspect ] ) => {
 
 	const textureAspect = uniform( 0 );
@@ -55,7 +59,7 @@ class Viewer extends Tab {
 		const backBtn = document.createElement( 'button' );
 		backBtn.className = 'viewer-back-btn';
 		backBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>';
-		backBtn.title = 'Back to list';
+		backBtn.title = 'Back';
 		backBtn.style.display = 'none';
 		toolbar.appendChild( backBtn );
 
@@ -73,11 +77,13 @@ class Viewer extends Tab {
 		select.appendChild( defaultOption );
 
 		toolbar.appendChild( select );
-		this.content.appendChild( toolbar );
 
 		const nodeList = new List( 'Viewer', 'Name' );
 		nodeList.setGridStyle( '150px minmax(200px, 2fr)' );
 		nodeList.domElement.style.minWidth = '400px';
+		this.nodeList = nodeList;
+
+		this.content.appendChild( toolbar );
 
 		const scrollWrapper = document.createElement( 'div' );
 		scrollWrapper.className = 'list-scroll-wrapper';
@@ -103,7 +109,6 @@ class Viewer extends Tab {
 		this.folderLibrary = new Map();
 		this.canvasNodes = new Map();
 		this.currentDataList = [];
-		this.nodeList = nodeList;
 		this.nodes = nodes;
 		this.scrollWrapper = scrollWrapper;
 		this.fullViewerContainer = fullViewerContainer;
@@ -112,8 +117,24 @@ class Viewer extends Tab {
 		this.activeFullNodeId = null;
 		this.pendingRestoreView = true;
 
+		this.splitActive = false;
+		this.splitCanvasData = null;
+		this.splitOverlay = null;
+		this.splitLine = null;
+		this.splitQuad = null;
+		this.splitMaterial = null;
+		this.splitUniforms = null;
+		this.splitCanvas = null;
+		this.splitCanvasTarget = null;
+
 		backBtn.addEventListener( 'click', () => {
 
+			if ( this.splitActive ) {
+
+				this.stopSplitMode();
+
+			}
+
 			select.value = 'list';
 			this.showListView();
 
@@ -162,8 +183,6 @@ class Viewer extends Tab {
 
 			const renderer = this.inspector.getRenderer();
 
-			if ( ! renderer || ! renderer.domElement ) return;
-
 			if ( e.isForwarded ) return;
 
 			// Block native event from reaching other document-level listeners (OrbitControls)
@@ -220,6 +239,12 @@ class Viewer extends Tab {
 		this.activeSourceCanvas = null;
 		this.activePointerIds.clear();
 
+		if ( this.splitActive ) {
+
+			this.stopSplitMode();
+
+		}
+
 	}
 
 	addNodeItem( canvasData ) {
@@ -249,6 +274,13 @@ class Viewer extends Tab {
 			viewBtn.onclick = ( e ) => {
 
 				e.stopPropagation();
+
+				if ( this.splitActive ) {
+
+					this.stopSplitMode();
+
+				}
+
 				this.select.value = canvasData.id;
 				this.showNodeView( canvasData.id );
 				this.saveLastView();
@@ -259,45 +291,60 @@ class Viewer extends Tab {
 			const fullscreenBtn = document.createElement( 'button' );
 			fullscreenBtn.className = 'node-canvas-fullscreen-btn';
 			fullscreenBtn.title = 'Fullscreen view';
-			fullscreenBtn.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"><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>';
+			fullscreenBtn.innerHTML = fullscreenIcon;
 
 			fullscreenBtn.onclick = ( e ) => {
 
 				e.stopPropagation();
-				this.select.value = canvasData.id;
-				this.showNodeView( canvasData.id );
 
-				if ( this.profiler && ! this.profiler.panel.classList.contains( 'maximized' ) ) {
+				if ( this.splitActive && this.splitCanvasData === canvasData && this.splitFullscreen ) {
 
-					this.profiler.toggleMaximize();
-					this.maximizedByFullscreenButton = true;
+					this.stopSplitMode();
 
-					if ( ! this._maximizeListenerAdded && this.profiler.maximizeBtn ) {
+				} else {
 
-						this.profiler.maximizeBtn.addEventListener( 'click', () => {
+					this.splitFullscreen = true;
+					this.startSplitMode( canvasData );
 
-							this.maximizedByFullscreenButton = false;
+				}
 
-						} );
-						this._maximizeListenerAdded = true;
+			};
 
-					}
+			// Split screen button
+			const splitBtn = document.createElement( 'button' );
+			splitBtn.className = 'node-canvas-split-btn';
+			splitBtn.title = 'Interactive split screen';
+			splitBtn.innerHTML = splitIcon;
 
-				}
+			splitBtn.onclick = ( e ) => {
 
-				this.saveLastView();
+				e.stopPropagation();
+
+				if ( this.splitActive && this.splitCanvasData === canvasData && ! this.splitFullscreen ) {
+
+					this.stopSplitMode();
+
+				} else {
+
+					this.splitFullscreen = false;
+					this.startSplitMode( canvasData );
+
+				}
 
 			};
 
 			wrapper.appendChild( domElement );
 			wrapper.appendChild( viewBtn );
 			wrapper.appendChild( fullscreenBtn );
+			wrapper.appendChild( splitBtn );
 
 			this.setupEventForwarding( domElement );
 
 			// Store elements in canvasData for access
 			canvasData.domElement = domElement;
 			canvasData.wrapperElement = wrapper;
+			canvasData.splitBtn = splitBtn;
+			canvasData.fullscreenBtn = fullscreenBtn;
 
 			item = new Item( wrapper, name );
 			item.itemRow.children[ 1 ].style[ 'justify-content' ] = 'flex-start';
@@ -441,6 +488,45 @@ class Viewer extends Tab {
 
 	}
 
+	init( inspector ) {
+
+		super.init( inspector );
+
+		const updateLayoutFromPosition = () => {
+
+			const position = inspector.profiler.position;
+			const isHorizontal = position === 'top' || position === 'bottom';
+			this.setViewMode( isHorizontal ? 'grid' : 'list' );
+
+		};
+
+		inspector.profiler.addEventListener( 'resize', updateLayoutFromPosition );
+
+		// Run initially once
+		updateLayoutFromPosition();
+
+	}
+
+	setViewMode( mode ) {
+
+		if ( this.nodeList ) {
+
+			if ( mode === 'grid' ) {
+
+				this.nodeList.domElement.style.minWidth = '0';
+
+			} else {
+
+				this.nodeList.domElement.style.minWidth = '400px';
+
+			}
+
+			this.nodeList.setViewMode( mode );
+
+		}
+
+	}
+
 	showListView() {
 
 		if ( this.activeFullNodeId ) {
@@ -514,6 +600,288 @@ class Viewer extends Tab {
 
 	}
 
+	get isActive() {
+
+		if ( this.splitActive ) return true;
+
+		return super.isActive;
+
+	}
+
+	set isActive( value ) {
+
+		super.isActive = value;
+
+	}
+
+	startSplitMode( canvasData ) {
+
+		if ( this.profiler && this.profiler.panel.classList.contains( 'visible' ) ) {
+
+			this.profiler.togglePanel();
+
+		}
+
+		this.splitActive = true;
+		this.splitCanvasData = canvasData;
+		this.splitX = 0.5;
+
+		const renderer = this.inspector.getRenderer();
+		const mainCanvas = renderer.domElement;
+		const rect = mainCanvas.getBoundingClientRect();
+		const targetParent = document.fullscreenElement || this.profiler.domElement;
+		const parentRect = targetParent.getBoundingClientRect();
+		const localLeft = rect.left - parentRect.left;
+		const localTop = rect.top - parentRect.top;
+
+		// Position target canvas on top of main canvas
+		if ( ! this.splitCanvas ) {
+
+			this.splitCanvas = document.createElement( 'canvas' );
+			this.splitCanvas.style.position = 'absolute';
+			this.splitCanvas.style.pointerEvents = 'none';
+			this.splitCanvas.style.zIndex = '998';
+
+			this.splitCanvasTarget = new CanvasTarget( this.splitCanvas );
+			this.splitCanvasTarget.setPixelRatio( window.devicePixelRatio );
+
+		}
+
+		this.splitCanvas.style.left = `${ localLeft }px`;
+		this.splitCanvas.style.top = `${ localTop }px`;
+		this.splitCanvas.style.width = `${ rect.width }px`;
+		this.splitCanvas.style.height = `${ rect.height }px`;
+
+		this.splitCanvasTarget.setSize( rect.width, rect.height );
+		renderer.backend.delete( this.splitCanvasTarget );
+
+		targetParent.appendChild( this.splitCanvas );
+
+		// Overlay divider line (only in split/non-fullscreen mode)
+		if ( ! this.splitFullscreen ) {
+
+			if ( ! this.splitOverlay ) {
+
+				const overlay = document.createElement( 'div' );
+				overlay.className = 'split-screen-overlay three-inspector';
+
+				const line = document.createElement( 'div' );
+				line.className = 'split-screen-line';
+
+				overlay.appendChild( line );
+
+				let isDragging = false;
+
+				const onPointerDown = ( e ) => {
+
+					isDragging = true;
+					line.classList.add( 'active' );
+					e.preventDefault();
+
+				};
+
+				const onPointerMove = ( e ) => {
+
+					if ( ! isDragging ) return;
+
+					const r = mainCanvas.getBoundingClientRect();
+					const localX = e.clientX - r.left;
+					const pct = Math.max( 0, Math.min( 1, localX / r.width ) );
+					this.splitX = pct;
+					line.style.left = `${ pct * 100 }%`;
+
+					if ( this.splitUniforms && this.splitUniforms.splitX ) {
+
+						this.splitUniforms.splitX.value = pct;
+
+					}
+
+				};
+
+				const onPointerUp = () => {
+
+					isDragging = false;
+					line.classList.remove( 'active' );
+
+				};
+
+				line.addEventListener( 'pointerdown', onPointerDown );
+				window.addEventListener( 'pointermove', onPointerMove );
+				window.addEventListener( 'pointerup', onPointerUp );
+
+				this.splitOverlay = overlay;
+				this.splitLine = line;
+
+			}
+
+			this.splitOverlay.style.left = `${ localLeft }px`;
+			this.splitOverlay.style.top = `${ localTop }px`;
+			this.splitOverlay.style.width = `${ rect.width }px`;
+			this.splitOverlay.style.height = `${ rect.height }px`;
+			this.splitLine.style.left = '50%';
+
+			targetParent.appendChild( this.splitOverlay );
+
+		} else {
+
+			// If we transitioned from split to fullscreen, remove the overlay slider
+			if ( this.splitOverlay && this.splitOverlay.parentElement ) {
+
+				this.splitOverlay.parentElement.removeChild( this.splitOverlay );
+
+			}
+
+		}
+
+		if ( ! this.splitUniforms ) {
+
+			this.splitUniforms = {
+				splitX: uniform( 0.5 ),
+				viewportWidth: uniform( rect.width )
+			};
+
+		}
+
+		this.splitUniforms.splitX.value = 0.5;
+		this.splitUniforms.viewportWidth.value = rect.width;
+
+		// Recreate or setup material for split screen comparison
+		const node = canvasData.node;
+		const target = node.context( { getUV: () => screenUV } );
+		const targetColor = renderOutput( vec4( vec3( target ), 1 ), NoToneMapping, renderer.outputColorSpace );
+		const targetColorCtx = targetColor.context( { inspector: true } );
+
+		let finalColor;
+
+		if ( this.splitFullscreen ) {
+
+			finalColor = targetColorCtx;
+
+		} else {
+
+			finalColor = Fn( () => {
+
+				screenUV.x.lessThan( this.splitUniforms.splitX ).discard();
+
+				return targetColorCtx;
+
+			} )();
+
+		}
+
+		if ( this.splitMaterial ) {
+
+			this.splitMaterial.dispose();
+
+		}
+
+		this.splitMaterial = new NodeMaterial();
+		this.splitMaterial.outputNode = finalColor;
+		this.splitMaterial.depthTest = false;
+		this.splitMaterial.depthWrite = false;
+
+		if ( this.splitQuad ) {
+
+			this.splitQuad.material = this.splitMaterial;
+
+		} else {
+
+			this.splitQuad = new QuadMesh( this.splitMaterial );
+
+		}
+
+		this.updateSplitButtonsState();
+
+	}
+
+	stopSplitMode() {
+
+		this.splitActive = false;
+		this.splitCanvasData = null;
+		this.splitFullscreen = false;
+
+		if ( this.splitOverlay && this.splitOverlay.parentElement ) {
+
+			this.splitOverlay.parentElement.removeChild( this.splitOverlay );
+
+		}
+
+		if ( this.splitCanvas && this.splitCanvas.parentElement ) {
+
+			this.splitCanvas.parentElement.removeChild( this.splitCanvas );
+
+		}
+
+		this.updateSplitButtonsState();
+
+	}
+
+	updateSplitButtonsState() {
+
+		if ( this.splitActive ) {
+
+			this.backBtn.style.display = '';
+
+		} else {
+
+			if ( this.select.value === 'list' ) {
+
+				this.backBtn.style.display = 'none';
+
+			} else {
+
+				this.backBtn.style.display = '';
+
+			}
+
+		}
+
+		for ( const canvasData of this.canvasNodes.values() ) {
+
+			if ( ! canvasData.splitBtn || ! canvasData.fullscreenBtn ) continue;
+
+			const isSelected = this.splitActive && this.splitCanvasData === canvasData;
+
+			if ( isSelected ) {
+
+				if ( this.splitFullscreen ) {
+
+					canvasData.fullscreenBtn.classList.add( 'active' );
+					canvasData.fullscreenBtn.innerHTML = backIcon;
+					canvasData.fullscreenBtn.title = 'Exit Fullscreen';
+
+					canvasData.splitBtn.classList.remove( 'active' );
+					canvasData.splitBtn.innerHTML = splitIcon;
+					canvasData.splitBtn.title = 'Interactive split screen';
+
+				} else {
+
+					canvasData.splitBtn.classList.add( 'active' );
+					canvasData.splitBtn.innerHTML = backIcon;
+					canvasData.splitBtn.title = 'Exit Split Screen';
+
+					canvasData.fullscreenBtn.classList.remove( 'active' );
+					canvasData.fullscreenBtn.innerHTML = fullscreenIcon;
+					canvasData.fullscreenBtn.title = 'Fullscreen view';
+
+				}
+
+			} else {
+
+				canvasData.splitBtn.classList.remove( 'active' );
+				canvasData.splitBtn.innerHTML = splitIcon;
+				canvasData.splitBtn.title = 'Interactive split screen';
+
+				canvasData.fullscreenBtn.classList.remove( 'active' );
+				canvasData.fullscreenBtn.innerHTML = fullscreenIcon;
+				canvasData.fullscreenBtn.title = 'Fullscreen view';
+
+			}
+
+		}
+
+	}
+
 	getCanvasDataByNode( renderer, node ) {
 
 		let canvasData = this.canvasNodes.get( node );
@@ -575,13 +943,92 @@ class Viewer extends Tab {
 	update( inspector ) {
 
 		const renderer = inspector.getRenderer();
+
+		if ( this.splitActive ) {
+
+			const mainCanvas = renderer.domElement;
+			const rect = mainCanvas.getBoundingClientRect();
+
+			if ( rect.width <= 0 || rect.height <= 0 ) {
+
+				return;
+
+			}
+
+			const targetParent = document.fullscreenElement || this.profiler.domElement;
+			const parentRect = targetParent.getBoundingClientRect();
+			const localLeft = rect.left - parentRect.left;
+			const localTop = rect.top - parentRect.top;
+
+			if ( this.splitCanvas.parentElement !== targetParent ) {
+
+				targetParent.appendChild( this.splitCanvas );
+
+			}
+
+			if ( this.splitOverlay && ! this.splitFullscreen && this.splitOverlay.parentElement !== targetParent ) {
+
+				targetParent.appendChild( this.splitOverlay );
+
+			}
+
+			this.splitCanvas.style.left = `${ localLeft }px`;
+			this.splitCanvas.style.top = `${ localTop }px`;
+			this.splitCanvas.style.width = `${ rect.width }px`;
+			this.splitCanvas.style.height = `${ rect.height }px`;
+
+			if ( this.splitOverlay && ! this.splitFullscreen ) {
+
+				this.splitOverlay.style.left = `${ localLeft }px`;
+				this.splitOverlay.style.top = `${ localTop }px`;
+				this.splitOverlay.style.width = `${ rect.width }px`;
+				this.splitOverlay.style.height = `${ rect.height }px`;
+
+			}
+
+			if ( this.splitCanvasTarget.width !== rect.width || this.splitCanvasTarget.height !== rect.height ) {
+
+				this.splitCanvasTarget.setSize( rect.width, rect.height );
+
+				if ( this.splitUniforms && this.splitUniforms.viewportWidth ) {
+
+					this.splitUniforms.viewportWidth.value = rect.width;
+
+				}
+
+				renderer.backend.delete( this.splitCanvasTarget );
+
+			}
+
+			// Render the split quad to the splitCanvasTarget
+			const previousCanvasTarget = renderer.getCanvasTarget();
+			const previousClearColor = renderer.getClearColor( new Color() );
+			const previousClearAlpha = renderer.getClearAlpha();
+
+			const state = RendererUtils.resetRendererState( renderer );
+
+			renderer.toneMapping = NoToneMapping;
+			renderer.outputColorSpace = LinearSRGBColorSpace;
+
+			renderer.setCanvasTarget( this.splitCanvasTarget );
+			renderer.setClearColor( 0x000000, 0 );
+
+			this.splitQuad.render( renderer );
+
+			renderer.setCanvasTarget( previousCanvasTarget );
+			renderer.setClearColor( previousClearColor, previousClearAlpha );
+
+			RendererUtils.restoreRendererState( renderer, state );
+
+		}
+
 		const nodes = inspector.getNodes();
 
 		if ( nodes.length > 0 ) {
 
 			if ( ! renderer.backend.isWebGPUBackend ) {
 
-				inspector.resolveConsoleOnce( 'warn', 'Inspector: Viewer is only available with WebGPU.' );
+				// Viewer is only available with WebGPU.
 
 				return;
 
@@ -875,6 +1322,53 @@ class Viewer extends Tab {
 
 	}
 
+	dispose() {
+
+		if ( this.splitActive ) {
+
+			this.stopSplitMode();
+
+		}
+
+		if ( this.splitCanvas ) {
+
+			if ( this.splitCanvas.parentElement ) {
+
+				this.splitCanvas.parentElement.removeChild( this.splitCanvas );
+
+			}
+
+			this.splitCanvas = null;
+
+		}
+
+		if ( this.splitCanvasTarget ) {
+
+			this.splitCanvasTarget.dispose();
+			this.splitCanvasTarget = null;
+
+		}
+
+		if ( this.splitMaterial ) {
+
+			this.splitMaterial.dispose();
+			this.splitMaterial = null;
+
+		}
+
+		for ( const canvasData of this.canvasNodes.values() ) {
+
+			canvasData.canvasTarget.dispose();
+			canvasData.material.dispose();
+
+		}
+
+		this.canvasNodes.clear();
+
+		super.dispose();
+
+	}
+
 }
 
 export { Viewer };

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

@@ -11,9 +11,6 @@ export class List {
 		this.id = `list-${Math.random().toString( 36 ).slice( 2, 11 )}`;
 		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 => {
@@ -30,12 +27,21 @@ export class List {
 
 	setGridStyle( gridTemplate ) {
 
-		this.gridStyleElement.textContent = `
-[data-list-id="${this.id}"] > .list-header,
-[data-list-id="${this.id}"] .list-item-row {
-	grid-template-columns: ${gridTemplate};
-}
-`;
+		this.domElement.style.setProperty( '--list-grid-template', gridTemplate );
+
+	}
+
+	setViewMode( mode ) {
+
+		if ( mode === 'grid' ) {
+
+			this.domElement.classList.add( 'grid-mode' );
+
+		} else {
+
+			this.domElement.classList.remove( 'grid-mode' );
+
+		}
 
 	}