Inspector: Add Color Grading extension and improve lifecycle API

examples/jsm/inspector/Extension.js

@@ -1,4 +1,5 @@
 import { Tab } from 'three/addons/inspector/ui/Tab.js';
+import { getItem, setItem } from './Inspector.js';
 
 export class Extension extends Tab {
 
@@ -10,4 +11,97 @@ export class Extension extends Tab {
 
 	}
 
+	init( inspector ) {
+
+		super.init( inspector );
+
+		if ( this._handleLayout && this._inspector ) {
+
+			this._inspector.removeEventListener( 'orientationchange', this._handleLayout );
+			this._inspector.removeEventListener( 'layoutchange', this._handleLayout );
+			this._inspector.removeEventListener( 'resize', this._handleLayout );
+			window.removeEventListener( 'resize', this._handleLayout );
+
+		}
+
+		this._inspector = inspector;
+
+		this._handleLayout = ( event ) => {
+
+			this.onOrientationChange( event );
+			this.onLayoutChange( event );
+
+		};
+
+		if ( inspector ) {
+
+			inspector.addEventListener( 'orientationchange', this._handleLayout );
+			inspector.addEventListener( 'layoutchange', this._handleLayout );
+			inspector.addEventListener( 'resize', this._handleLayout );
+
+		}
+
+		window.addEventListener( 'resize', this._handleLayout );
+
+		const data = getItem( this.name );
+
+		if ( Object.keys( data ).length > 0 ) {
+
+			this.deserialize( data );
+
+		}
+
+	}
+
+	serialize() {
+
+		return {};
+
+	}
+
+	deserialize( /* data */ ) {
+
+	}
+
+	save() {
+
+		const data = this.serialize();
+
+		if ( data === null || ( typeof data === 'object' && Object.keys( data ).length === 0 ) ) {
+
+			setItem( this.name, null );
+
+		} else {
+
+			setItem( this.name, data );
+
+		}
+
+	}
+
+	dispose() {
+
+		if ( this._handleLayout ) {
+
+			if ( this._inspector ) {
+
+				this._inspector.removeEventListener( 'orientationchange', this._handleLayout );
+				this._inspector.removeEventListener( 'layoutchange', this._handleLayout );
+				this._inspector.removeEventListener( 'resize', this._handleLayout );
+
+			}
+
+			window.removeEventListener( 'resize', this._handleLayout );
+			this._handleLayout = null;
+
+		}
+
+		this._inspector = null;
+
+	}
+
+	onOrientationChange( /* event */ ) { }
+
+	onLayoutChange( /* event */ ) { }
+
 }

examples/jsm/inspector/Inspector.js

@@ -22,6 +22,8 @@ class Inspector extends RendererInspector {
 
 		const profiler = new Profiler( this );
 		profiler.addEventListener( 'resize', ( e ) => this.dispatchEvent( e ) );
+		profiler.addEventListener( 'orientationchange', ( e ) => this.dispatchEvent( e ) );
+		profiler.addEventListener( 'layoutchange', ( e ) => this.dispatchEvent( e ) );
 
 		const parameters = new Parameters( {
 			builtin: true,
@@ -95,6 +97,12 @@ class Inspector extends RendererInspector {
 
 	}
 
+	isVertical() {
+
+		return this.profiler ? this.profiler.isVertical() : false;
+
+	}
+
 	onExtension( name, callback ) {
 
 		const extensionAdded = ( e ) => {
@@ -189,6 +197,8 @@ class Inspector extends RendererInspector {
 
 	removeTab( tab ) {
 
+		tab.dispose();
+
 		this.profiler.removeTab( tab );
 
 		return this;