Inspector: Add Color Grading extension and improve lifecycle API

types/three/examples/jsm/inspector/Extension.d.ts

@@ -1,3 +1,4 @@
+import { Inspector, InspectorLayoutEvent } from "./Inspector.js";
 import { Tab, TabEventMap } from "./ui/Tab.js";
 
 export interface ExtensionEventMap extends TabEventMap {}
@@ -6,4 +7,16 @@ export class Extension<TEventMap extends ExtensionEventMap = ExtensionEventMap>
     readonly isExtension: boolean;
 
     constructor(name: string);
+
+    init(inspector: Inspector): void;
+
+    serialize(): object | null;
+    deserialize(data: object): void;
+
+    save(): void;
+
+    dispose(): void;
+
+    onOrientationChange(event?: InspectorLayoutEvent): void;
+    onLayoutChange(event?: InspectorLayoutEvent): void;
 }

types/three/examples/jsm/inspector/Inspector.d.ts

@@ -1,17 +1,26 @@
+import { ColorGrading } from "./extensions/color-grading/ColorGrading.js";
 import { TSLGraphEditor } from "./extensions/tsl-graph/TSLGraphEditor.js";
 import { RendererInspector, RendererInspectorEventMap } from "./RendererInspector.js";
 import { ParametersGroup } from "./tabs/Parameters.js";
 import { Tab } from "./ui/Tab.js";
 
+export interface InspectorLayoutEvent {
+    position: "bottom" | "right";
+    isVertical: boolean;
+}
+
 export interface InspectorEventMap extends RendererInspectorEventMap {
     resize: {};
+    orientationchange: InspectorLayoutEvent;
+    layoutchange: InspectorLayoutEvent;
 }
 
 declare class Inspector extends RendererInspector<InspectorEventMap> {
     createParameters(name: string): ParametersGroup;
 
     get domElement(): HTMLDivElement;
 
+    onExtension(name: "Color Grading", callback: (extension: ColorGrading) => void): this;
     onExtension(name: "TSL Graph", callback: (extension: TSLGraphEditor) => void): this;
 
     hide(): void;
@@ -22,14 +31,16 @@ declare class Inspector extends RendererInspector<InspectorEventMap> {
 
     getSize(): { width: number; height: number };
 
+    isVertical(): boolean;
+
     setHorizontalAlign(value: "left" | "right"): this;
     setVerticalAlign(value: "top" | "bottom"): this;
 
     setActiveTab(tab: Tab): this;
     addTab(tab: Tab): this;
     removeTab(tab: Tab): this;
 
-    setActiveExtension(name: "TSL Graph", value: boolean): this;
+    setActiveExtension(name: "Color Grading" | "TSL Graph", value: boolean): this;
 }
 
 export { Inspector };

types/three/examples/jsm/inspector/extensions/color-grading/ColorGrading.d.ts

@@ -0,0 +1,31 @@
+import { ToneMapping } from "../../../../../src/constants.js";
+import { Data3DTexture } from "../../../../../src/textures/Data3DTexture.js";
+import { Extension } from "../../Extension.js";
+
+export interface ColorGradingJSON {
+    version: number;
+    lutSize: number;
+    selectedToneMapping: ToneMapping;
+    sceneGradingEnabled: boolean;
+    pipelineOrder: string[];
+    modules: { [id: string]: unknown };
+    params: { [name: string]: unknown };
+}
+
+export class ColorGrading extends Extension {
+    constructor();
+
+    lutSize: number;
+    lutTexture: Data3DTexture | null;
+    sceneGradingEnabled: boolean;
+    selectedToneMapping: ToneMapping;
+
+    generate3DLUTData(size?: number, buffer?: Float32Array | null): Float32Array;
+
+    toJSON(): ColorGradingJSON;
+
+    serialize(): ColorGradingJSON;
+    deserialize(data: ColorGradingJSON): void;
+
+    load(data: ColorGradingJSON | string): void;
+}

types/three/examples/jsm/inspector/ui/Tab.d.ts

@@ -4,4 +4,6 @@ export interface TabEventMap {}
 
 export class Tab<TEventMap extends TabEventMap = TabEventMap> extends EventDispatcher<TEventMap> {
     constructor(title: string);
+
+    dispose(): void;
 }