@babylonjs/node-editor 5.0.0-alpha.8 → 5.0.0-beta.10

package/babylon.nodeEditor.module.d.ts

@@ -21,6 +21,7 @@ declare module "@babylonjs/node-editor/blockTools" {
     import { ModBlock } from '@babylonjs/core/Materials/Node/Blocks/modBlock';
     import { ScaleBlock } from '@babylonjs/core/Materials/Node/Blocks/scaleBlock';
     import { TrigonometryBlock } from '@babylonjs/core/Materials/Node/Blocks/trigonometryBlock';
+    import { ConditionalBlock } from '@babylonjs/core/Materials/Node/Blocks/conditionalBlock';
     import { ClampBlock } from '@babylonjs/core/Materials/Node/Blocks/clampBlock';
     import { CrossBlock } from '@babylonjs/core/Materials/Node/Blocks/crossBlock';
     import { DotBlock } from '@babylonjs/core/Materials/Node/Blocks/dotBlock';
@@ -76,11 +77,20 @@ declare module "@babylonjs/node-editor/blockTools" {
     import { ParticleBlendMultiplyBlock } from '@babylonjs/core/Materials/Node/Blocks/Particle/particleBlendMultiplyBlock';
     import { FragCoordBlock } from '@babylonjs/core/Materials/Node/Blocks/Fragment/fragCoordBlock';
     import { ScreenSizeBlock } from '@babylonjs/core/Materials/Node/Blocks/Fragment/screenSizeBlock';
+    import { MatrixBuilderBlock } from '@babylonjs/core/Materials/Node/Blocks/matrixBuilderBlock';
+    import { SceneDepthBlock } from '@babylonjs/core/Materials/Node/Blocks/Dual/sceneDepthBlock';
+    import { ImageSourceBlock } from '@babylonjs/core/Materials/Node/Blocks/Dual/imageSourceBlock';
+    import { CloudBlock } from '@babylonjs/core/Materials/Node/Blocks/cloudBlock';
+    import { VoronoiNoiseBlock } from '@babylonjs/core/Materials/Node/Blocks/voronoiNoiseBlock';
+    import { ScreenSpaceBlock } from '@babylonjs/core/Materials/Node/Blocks/Fragment/screenSpaceBlock';
+    import { TwirlBlock } from '@babylonjs/core/Materials/Node/Blocks/Fragment/twirlBlock';
+    import { ElbowBlock } from '@babylonjs/core/Materials/Node/Blocks/elbowBlock';
+    import { ClipPlanesBlock } from '@babylonjs/core/Materials/Node/Blocks/Dual/clipPlanesBlock';
     export class BlockTools {
-        static GetBlockFromString(data: string, scene: Scene, nodeMaterial: NodeMaterial): DesaturateBlock | RefractBlock | ReflectBlock | DerivativeBlock | Rotate2dBlock | NormalBlendBlock | WorleyNoise3DBlock | SimplexPerlin3DBlock | BonesBlock | InstancesBlock | MorphTargetsBlock | DiscardBlock | ImageProcessingBlock | ColorMergerBlock | VectorMergerBlock | ColorSplitterBlock | VectorSplitterBlock | TextureBlock | ReflectionTextureBlock | LightBlock | FogBlock | VertexOutputBlock | FragmentOutputBlock | AddBlock | ClampBlock | ScaleBlock | CrossBlock | DotBlock | PowBlock | MultiplyBlock | TransformBlock | TrigonometryBlock | RemapBlock | NormalizeBlock | FresnelBlock | LerpBlock | NLerpBlock | DivideBlock | SubtractBlock | ModBlock | StepBlock | SmoothStepBlock | OneMinusBlock | ReciprocalBlock | ViewDirectionBlock | LightInformationBlock | MaxBlock | MinBlock | LengthBlock | DistanceBlock | NegateBlock | PerturbNormalBlock | RandomNumberBlock | ReplaceColorBlock | PosterizeBlock | ArcTan2Block | GradientBlock | FrontFacingBlock | WaveBlock | InputBlock | PBRMetallicRoughnessBlock | SheenBlock | AnisotropyBlock | ReflectionBlock | ClearCoatBlock | RefractionBlock | SubSurfaceBlock | CurrentScreenBlock | ParticleTextureBlock | ParticleRampGradientBlock | ParticleBlendMultiplyBlock | FragCoordBlock | ScreenSizeBlock | null;
+        static GetBlockFromString(data: string, scene: Scene, nodeMaterial: NodeMaterial): ElbowBlock | TwirlBlock | VoronoiNoiseBlock | ScreenSpaceBlock | CloudBlock | MatrixBuilderBlock | DesaturateBlock | RefractBlock | ReflectBlock | DerivativeBlock | Rotate2dBlock | NormalBlendBlock | WorleyNoise3DBlock | SimplexPerlin3DBlock | BonesBlock | InstancesBlock | MorphTargetsBlock | DiscardBlock | ImageProcessingBlock | ColorMergerBlock | VectorMergerBlock | ColorSplitterBlock | VectorSplitterBlock | TextureBlock | ReflectionTextureBlock | LightBlock | FogBlock | VertexOutputBlock | FragmentOutputBlock | AddBlock | ClampBlock | ScaleBlock | CrossBlock | DotBlock | PowBlock | MultiplyBlock | TransformBlock | TrigonometryBlock | RemapBlock | NormalizeBlock | FresnelBlock | LerpBlock | NLerpBlock | DivideBlock | SubtractBlock | ModBlock | StepBlock | SmoothStepBlock | OneMinusBlock | ReciprocalBlock | ViewDirectionBlock | LightInformationBlock | MaxBlock | MinBlock | LengthBlock | DistanceBlock | NegateBlock | PerturbNormalBlock | RandomNumberBlock | ReplaceColorBlock | PosterizeBlock | ArcTan2Block | GradientBlock | FrontFacingBlock | WaveBlock | InputBlock | PBRMetallicRoughnessBlock | SheenBlock | AnisotropyBlock | ReflectionBlock | ClearCoatBlock | RefractionBlock | SubSurfaceBlock | CurrentScreenBlock | ParticleTextureBlock | ParticleRampGradientBlock | ParticleBlendMultiplyBlock | FragCoordBlock | ScreenSizeBlock | SceneDepthBlock | ConditionalBlock | ImageSourceBlock | ClipPlanesBlock | null;
         static GetColorFromConnectionNodeType(type: NodeMaterialBlockConnectionPointTypes): string;
         static GetConnectionNodeTypeFromString(type: string): NodeMaterialBlockConnectionPointTypes.Float | NodeMaterialBlockConnectionPointTypes.Vector2 | NodeMaterialBlockConnectionPointTypes.Vector3 | NodeMaterialBlockConnectionPointTypes.Vector4 | NodeMaterialBlockConnectionPointTypes.Color3 | NodeMaterialBlockConnectionPointTypes.Color4 | NodeMaterialBlockConnectionPointTypes.Matrix | NodeMaterialBlockConnectionPointTypes.AutoDetect;
-        static GetStringFromConnectionNodeType(type: NodeMaterialBlockConnectionPointTypes): "Float" | "Vector2" | "Vector3" | "Vector4" | "Matrix" | "Color3" | "Color4" | "";
+        static GetStringFromConnectionNodeType(type: NodeMaterialBlockConnectionPointTypes): "" | "Float" | "Vector2" | "Vector3" | "Vector4" | "Matrix" | "Color3" | "Color4";
     }
 }
 declare module "@babylonjs/node-editor/components/log/logComponent" {
@@ -357,6 +367,7 @@ declare module "@babylonjs/node-editor/diagram/graphFrame" {
         private serializePortData;
         serialize(saveCollapsedState: boolean): IFrameData;
         export(): void;
+        adjustPorts(): void;
         static Parse(serializationData: IFrameData, canvas: GraphCanvasComponent, map?: {
             [key: number]: number;
         }): GraphFrame;
@@ -420,8 +431,8 @@ declare module "@babylonjs/node-editor/diagram/nodeLink" {
         onDisposedObservable: Observable<NodeLink>;
         get isVisible(): boolean;
         set isVisible(value: boolean);
-        get portA(): FrameNodePort | NodePort;
-        get portB(): FrameNodePort | NodePort | undefined;
+        get portA(): NodePort | FrameNodePort;
+        get portB(): NodePort | FrameNodePort | undefined;
         get nodeA(): GraphNode;
         get nodeB(): GraphNode | undefined;
         update(endX?: number, endY?: number, straight?: boolean): void;
@@ -433,12 +444,12 @@ declare module "@babylonjs/node-editor/diagram/nodeLink" {
 declare module "@babylonjs/node-editor/diagram/graphCanvas" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { NodeMaterialBlock } from '@babylonjs/core/Materials/Node/nodeMaterialBlock';
+    import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
     import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
-    import { Nullable } from '@babylonjs/core/types';
+    import { Nullable } from "@babylonjs/core/types";
     import { NodeLink } from "@babylonjs/node-editor/diagram/nodeLink";
     import { NodePort } from "@babylonjs/node-editor/diagram/nodePort";
-    import { NodeMaterialConnectionPoint } from '@babylonjs/core/Materials/Node/nodeMaterialBlockConnectionPoint';
+    import { NodeMaterialConnectionPoint } from "@babylonjs/core/Materials/Node/nodeMaterialBlockConnectionPoint";
     import { GraphFrame } from "@babylonjs/node-editor/diagram/graphFrame";
     import { IEditorData, IFrameData } from "@babylonjs/node-editor/nodeLocationInfo";
     import { FrameNodePort } from "@babylonjs/node-editor/diagram/frameNodePort";
@@ -509,6 +520,7 @@ declare module "@babylonjs/node-editor/diagram/graphCanvas" {
         get selectionContainer(): HTMLDivElement;
         get frameContainer(): HTMLDivElement;
         constructor(props: IGraphCanvasComponentProps);
+        static _RefreshNode: (node: GraphNode, visitedNodes?: Set<GraphNode> | undefined, visitedLinks?: Set<NodeLink> | undefined) => void;
         getGridPosition(position: number, useCeil?: boolean): number;
         getGridPositionCeil(position: number): number;
         updateTransform(): void;
@@ -566,10 +578,12 @@ declare module "@babylonjs/node-editor/sharedComponents/floatLineComponent" {
         private _localChange;
         private _store;
         private _regExp;
+        private _onFocus;
         constructor(props: IFloatLineComponentProps);
         shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: {
             value: string;
         }): boolean;
+        componentWillUnmount(): void;
         raiseOnPropertyChanged(newValue: number, previousValue: number): void;
         updateValue(valueString: string): void;
         render(): JSX.Element;
@@ -578,7 +592,7 @@ declare module "@babylonjs/node-editor/sharedComponents/floatLineComponent" {
 declare module "@babylonjs/node-editor/components/propertyTab/properties/floatPropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IFloatPropertyTabComponentProps {
         globalState: GlobalState;
         inputBlock: InputBlock;
@@ -684,7 +698,7 @@ declare module "@babylonjs/node-editor/sharedComponents/vector2LineComponent" {
 declare module "@babylonjs/node-editor/components/propertyTab/properties/vector2PropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IVector2PropertyTabComponentProps {
         globalState: GlobalState;
         inputBlock: InputBlock;
@@ -734,6 +748,7 @@ declare module "@babylonjs/node-editor/sharedUiComponents/colorPicker/colorPicke
      */
     export interface IColorPickerProps {
         color: Color3 | Color4;
+        linearhint?: boolean;
         debugMode?: boolean;
         onColorChanged?: (color: Color3 | Color4) => void;
     }
@@ -753,6 +768,7 @@ declare module "@babylonjs/node-editor/sharedUiComponents/colorPicker/colorPicke
         private _isSaturationPointerDown;
         private _isHuePointerDown;
         constructor(props: IColorPickerProps);
+        shouldComponentUpdate(nextProps: IColorPickerProps, nextState: IColorPickerState): boolean;
         onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
         onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
         onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
@@ -768,7 +784,7 @@ declare module "@babylonjs/node-editor/sharedUiComponents/colorPicker/colorPicke
 }
 declare module "@babylonjs/node-editor/sharedComponents/colorPickerComponent" {
     import * as React from "react";
-    import { Color4, Color3 } from '@babylonjs/core/Maths/math.color';
+    import { Color4, Color3 } from "@babylonjs/core/Maths/math.color";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
     export interface IColorPickerComponentProps {
         value: Color4 | Color3;
@@ -795,7 +811,7 @@ declare module "@babylonjs/node-editor/sharedComponents/colorPickerComponent" {
 declare module "@babylonjs/node-editor/sharedComponents/color3LineComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
-    import { Color3 } from "@babylonjs/core/Maths/math.color";
+    import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
     import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedComponents/propertyChangedEvent";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
     export interface IColor3LineComponentProps {
@@ -808,16 +824,16 @@ declare module "@babylonjs/node-editor/sharedComponents/color3LineComponent" {
     }
     export class Color3LineComponent extends React.Component<IColor3LineComponentProps, {
         isExpanded: boolean;
-        color: Color3;
+        color: Color3 | Color4;
     }> {
         private _localChange;
         constructor(props: IColor3LineComponentProps);
         shouldComponentUpdate(nextProps: IColor3LineComponentProps, nextState: {
-            color: Color3;
+            color: Color3 | Color4;
         }): boolean;
         onChange(newValue: string): void;
         switchExpandState(): void;
-        raiseOnPropertyChanged(previousValue: Color3): void;
+        raiseOnPropertyChanged(previousValue: Color3 | Color4): void;
         updateStateR(value: number): void;
         updateStateG(value: number): void;
         updateStateB(value: number): void;
@@ -828,7 +844,7 @@ declare module "@babylonjs/node-editor/sharedComponents/color3LineComponent" {
 declare module "@babylonjs/node-editor/components/propertyTab/properties/color3PropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IColor3PropertyTabComponentProps {
         globalState: GlobalState;
         inputBlock: InputBlock;
@@ -877,7 +893,7 @@ declare module "@babylonjs/node-editor/sharedComponents/vector3LineComponent" {
 declare module "@babylonjs/node-editor/components/propertyTab/properties/vector3PropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IVector3PropertyTabComponentProps {
         globalState: GlobalState;
         inputBlock: InputBlock;
@@ -928,7 +944,7 @@ declare module "@babylonjs/node-editor/sharedComponents/vector4LineComponent" {
 declare module "@babylonjs/node-editor/components/propertyTab/properties/vector4PropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IVector4PropertyTabComponentProps {
         globalState: GlobalState;
         inputBlock: InputBlock;
@@ -941,16 +957,13 @@ declare module "@babylonjs/node-editor/sharedComponents/optionsLineComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedComponents/propertyChangedEvent";
-    class ListLineOption {
-        label: string;
-        value: number | string;
-    }
+    import { IInspectableOptions } from "@babylonjs/core/Misc/iInspectable";
     interface IOptionsLineComponentProps {
         label: string;
         target: any;
         className?: string;
         propertyName?: string;
-        options: ListLineOption[];
+        options: IInspectableOptions[];
         noDirectUpdate?: boolean;
         onSelect?: (value: number | string) => void;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
@@ -1012,7 +1025,7 @@ declare module "@babylonjs/node-editor/sharedComponents/matrixLineComponent" {
 declare module "@babylonjs/node-editor/components/propertyTab/properties/matrixPropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IMatrixPropertyTabComponentProps {
         globalState: GlobalState;
         inputBlock: InputBlock;
@@ -1065,10 +1078,12 @@ declare module "@babylonjs/node-editor/sharedComponents/textInputLineComponent"
         value: string;
     }> {
         private _localChange;
+        private _onFocus;
         constructor(props: ITextInputLineComponentProps);
         shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: {
             value: string;
         }): boolean;
+        componentWillUnmount(): void;
         raiseOnPropertyChanged(newValue: string, previousValue: string): void;
         updateValue(value: string, raisePropertyChanged: boolean): void;
         render(): JSX.Element;
@@ -1123,6 +1138,7 @@ declare module "@babylonjs/node-editor/sharedComponents/checkBoxLineComponent" {
 declare module "@babylonjs/node-editor/diagram/properties/genericNodePropertyComponent" {
     import * as React from "react";
     import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
+    import { Scene } from "@babylonjs/core/scene";
     export class GenericPropertyComponent extends React.Component<IPropertyComponentProps> {
         constructor(props: IPropertyComponentProps);
         render(): JSX.Element;
@@ -1134,8 +1150,10 @@ declare module "@babylonjs/node-editor/diagram/properties/genericNodePropertyCom
     export class GenericPropertyTabComponent extends React.Component<IPropertyComponentProps> {
         constructor(props: IPropertyComponentProps);
         forceRebuild(notifiers?: {
-            "rebuild"?: boolean;
-            "update"?: boolean;
+            rebuild?: boolean;
+            update?: boolean;
+            activatePreviewCommand?: boolean;
+            callback?: (scene: Scene) => void;
         }): void;
         render(): JSX.Element;
     }
@@ -1177,7 +1195,7 @@ declare module "@babylonjs/node-editor/sharedComponents/color4LineComponent" {
 declare module "@babylonjs/node-editor/components/propertyTab/properties/color4PropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IColor4PropertyTabComponentProps {
         globalState: GlobalState;
         inputBlock: InputBlock;
@@ -1209,9 +1227,9 @@ declare module "@babylonjs/node-editor/diagram/properties/transformNodePropertyC
     }
 }
 declare module "@babylonjs/node-editor/diagram/properties/gradientStepComponent" {
-    import * as React from 'react';
+    import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { GradientBlockColorStep } from '@babylonjs/core/Materials/Node/Blocks/gradientBlock';
+    import { GradientBlockColorStep } from "@babylonjs/core/Materials/Node/Blocks/gradientBlock";
     interface IGradientStepComponentProps {
         globalState: GlobalState;
         step: GradientBlockColorStep;
@@ -1236,6 +1254,7 @@ declare module "@babylonjs/node-editor/sharedComponents/buttonLineComponent" {
     export interface IButtonLineComponentProps {
         label: string;
         onClick: () => void;
+        isDisabled?: boolean;
     }
     export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
         constructor(props: IButtonLineComponentProps);
@@ -1244,7 +1263,7 @@ declare module "@babylonjs/node-editor/sharedComponents/buttonLineComponent" {
 }
 declare module "@babylonjs/node-editor/diagram/properties/gradientNodePropertyComponent" {
     import * as React from "react";
-    import { GradientBlockColorStep } from '@babylonjs/core/Materials/Node/Blocks/gradientBlock';
+    import { GradientBlockColorStep } from "@babylonjs/core/Materials/Node/Blocks/gradientBlock";
     import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
     export class GradientPropertyTabComponent extends React.Component<IPropertyComponentProps> {
         private onValueChangedObserver;
@@ -1291,12 +1310,12 @@ declare module "@babylonjs/node-editor/sharedComponents/fileButtonLineComponent"
 declare module "@babylonjs/node-editor/diagram/properties/texturePropertyTabComponent" {
     import * as React from "react";
     import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
-    import { ReflectionTextureBlock } from '@babylonjs/core/Materials/Node/Blocks/Dual/reflectionTextureBlock';
-    import { ReflectionBlock } from '@babylonjs/core/Materials/Node/Blocks/PBR/reflectionBlock';
-    import { RefractionBlock } from '@babylonjs/core/Materials/Node/Blocks/PBR/refractionBlock';
-    import { TextureBlock } from '@babylonjs/core/Materials/Node/Blocks/Dual/textureBlock';
-    import { CurrentScreenBlock } from '@babylonjs/core/Materials/Node/Blocks/Dual/currentScreenBlock';
-    import { ParticleTextureBlock } from '@babylonjs/core/Materials/Node/Blocks/Particle/particleTextureBlock';
+    import { ReflectionTextureBlock } from "@babylonjs/core/Materials/Node/Blocks/Dual/reflectionTextureBlock";
+    import { ReflectionBlock } from "@babylonjs/core/Materials/Node/Blocks/PBR/reflectionBlock";
+    import { RefractionBlock } from "@babylonjs/core/Materials/Node/Blocks/PBR/refractionBlock";
+    import { TextureBlock } from "@babylonjs/core/Materials/Node/Blocks/Dual/textureBlock";
+    import { CurrentScreenBlock } from "@babylonjs/core/Materials/Node/Blocks/Dual/currentScreenBlock";
+    import { ParticleTextureBlock } from "@babylonjs/core/Materials/Node/Blocks/Particle/particleTextureBlock";
     type ReflectionTexture = ReflectionTextureBlock | ReflectionBlock | RefractionBlock;
     type AnyTexture = TextureBlock | ReflectionTexture | CurrentScreenBlock | ParticleTextureBlock;
     export class TexturePropertyTabComponent extends React.Component<IPropertyComponentProps, {
@@ -1331,6 +1350,56 @@ declare module "@babylonjs/node-editor/diagram/properties/trigonometryNodeProper
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/node-editor/diagram/properties/conditionalNodePropertyComponent" {
+    import * as React from "react";
+    import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
+    export class ConditionalPropertyTabComponent extends React.Component<IPropertyComponentProps> {
+        constructor(props: IPropertyComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/diagram/properties/imageSourcePropertyTabComponent" {
+    import * as React from "react";
+    import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
+    import { ImageSourceBlock } from "@babylonjs/core/Materials/Node/Blocks/Dual/imageSourceBlock";
+    export class ImageSourcePropertyTabComponent extends React.Component<IPropertyComponentProps, {
+        isEmbedded: boolean;
+    }> {
+        get imageSourceBlock(): ImageSourceBlock;
+        constructor(props: IPropertyComponentProps);
+        UNSAFE_componentWillUpdate(nextProps: IPropertyComponentProps, nextState: {
+            isEmbedded: boolean;
+            loadAsCubeTexture: boolean;
+        }): void;
+        private _generateRandomForCache;
+        updateAfterTextureLoad(): void;
+        removeTexture(): void;
+        _prepareTexture(): void;
+        /**
+         * Replaces the texture of the node
+         * @param file the file of the texture to use
+         */
+        replaceTexture(file: File): void;
+        replaceTextureWithUrl(url: string): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/diagram/properties/vectorMergerPropertyComponent" {
+    import * as React from "react";
+    import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
+    export class VectorMergerPropertyTabComponent extends React.Component<IPropertyComponentProps> {
+        constructor(props: IPropertyComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/diagram/properties/colorMergerPropertyComponent" {
+    import * as React from "react";
+    import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
+    export class ColorMergerPropertyTabComponent extends React.Component<IPropertyComponentProps> {
+        constructor(props: IPropertyComponentProps);
+        render(): JSX.Element;
+    }
+}
 declare module "@babylonjs/node-editor/diagram/propertyLedger" {
     import { ComponentClass } from 'react';
     import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
@@ -1478,6 +1547,41 @@ declare module "@babylonjs/node-editor/diagram/display/pbrDisplayManager" {
         updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
     }
 }
+declare module "@babylonjs/node-editor/diagram/display/conditionalDisplayManager" {
+    import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
+    import { NodeMaterialBlock } from '@babylonjs/core/Materials/Node/nodeMaterialBlock';
+    export class ConditionalDisplayManager implements IDisplayManager {
+        getHeaderClass(block: NodeMaterialBlock): string;
+        shouldDisplayPortLabels(block: NodeMaterialBlock): boolean;
+        getHeaderText(block: NodeMaterialBlock): string;
+        getBackgroundColor(block: NodeMaterialBlock): string;
+        updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    }
+}
+declare module "@babylonjs/node-editor/diagram/display/imageSourceDisplayManager" {
+    import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
+    import { NodeMaterialBlock } from '@babylonjs/core/Materials/Node/nodeMaterialBlock';
+    export class imageSourceDisplayManager implements IDisplayManager {
+        private _previewCanvas;
+        private _previewImage;
+        getHeaderClass(block: NodeMaterialBlock): string;
+        shouldDisplayPortLabels(block: NodeMaterialBlock): boolean;
+        getHeaderText(block: NodeMaterialBlock): string;
+        getBackgroundColor(block: NodeMaterialBlock): string;
+        updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    }
+}
+declare module "@babylonjs/node-editor/diagram/display/elbowDisplayManager" {
+    import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
+    import { NodeMaterialBlock } from '@babylonjs/core/Materials/Node/nodeMaterialBlock';
+    export class ElbowDisplayManager implements IDisplayManager {
+        getHeaderClass(block: NodeMaterialBlock): string;
+        shouldDisplayPortLabels(block: NodeMaterialBlock): boolean;
+        getHeaderText(block: NodeMaterialBlock): string;
+        getBackgroundColor(block: NodeMaterialBlock): string;
+        updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    }
+}
 declare module "@babylonjs/node-editor/diagram/displayLedger" {
     export class DisplayLedger {
         static RegisteredControls: {
@@ -1497,6 +1601,8 @@ declare module "@babylonjs/node-editor/diagram/graphNode" {
     export class GraphNode {
         block: NodeMaterialBlock;
         private _visual;
+        private _headerContainer;
+        private _promotionWarning;
         private _header;
         private _connections;
         private _inputsContainer;
@@ -1544,7 +1650,7 @@ declare module "@babylonjs/node-editor/diagram/graphNode" {
         set isSelected(value: boolean);
         constructor(block: NodeMaterialBlock, globalState: GlobalState);
         isOverlappingFrame(frame: GraphFrame): boolean;
-        getPortForConnectionPoint(point: NodeMaterialConnectionPoint): Nullable<NodePort>;
+        getPortForConnectionPoint(point: NodeMaterialConnectionPoint): NodePort | null;
         getLinksForConnectionPoint(point: NodeMaterialConnectionPoint): NodeLink[];
         private _refreshFrames;
         _refreshLinks(): void;
@@ -1580,10 +1686,10 @@ declare module "@babylonjs/node-editor/globalState" {
         hostDocument: HTMLDocument;
         hostWindow: Window;
         onSelectionChangedObservable: Observable<Nullable<GraphFrame | GraphNode | NodePort | NodeLink | FramePortData>>;
-        onRebuildRequiredObservable: Observable<void>;
+        onRebuildRequiredObservable: Observable<boolean>;
         onBuiltObservable: Observable<void>;
         onResetRequiredObservable: Observable<void>;
-        onUpdateRequiredObservable: Observable<void>;
+        onUpdateRequiredObservable: Observable<Nullable<NodeMaterialBlock>>;
         onZoomToFitRequiredObservable: Observable<void>;
         onReOrganizedRequiredObservable: Observable<void>;
         onLogRequiredObservable: Observable<LogEntry>;
@@ -1596,9 +1702,9 @@ declare module "@babylonjs/node-editor/globalState" {
         onDepthPrePassChanged: Observable<void>;
         onAnimationCommandActivated: Observable<void>;
         onCandidateLinkMoved: Observable<Nullable<Vector2>>;
-        onSelectionBoxMoved: Observable<DOMRect | ClientRect>;
+        onSelectionBoxMoved: Observable<ClientRect | DOMRect>;
         onFrameCreatedObservable: Observable<GraphFrame>;
-        onCandidatePortSelectedObservable: Observable<Nullable<FrameNodePort | NodePort>>;
+        onCandidatePortSelectedObservable: Observable<Nullable<NodePort | FrameNodePort>>;
         onImportFrameObservable: Observable<any>;
         onGraphNodeRemovalObservable: Observable<GraphNode>;
         onPopupClosedObservable: Observable<void>;
@@ -1607,6 +1713,7 @@ declare module "@babylonjs/node-editor/globalState" {
         onExposePortOnFrameObservable: Observable<GraphNode>;
         previewType: PreviewType;
         previewFile: File;
+        particleSystemBlendMode: number;
         listOfCustomPreviewFiles: File[];
         rotatePreview: boolean;
         backgroundColor: Color4;
@@ -1649,6 +1756,7 @@ declare module "@babylonjs/node-editor/sharedComponents/draggableLineWithButtonC
         iconImage: any;
         onIconClick: (value: string) => void;
         iconTitle: string;
+        lenSuffixToRemove?: number;
     }
     export class DraggableLineWithButtonComponent extends React.Component<IDraggableLineWithButtonComponent> {
         constructor(props: IDraggableLineWithButtonComponent);
@@ -1688,18 +1796,21 @@ declare module "@babylonjs/node-editor/components/nodeList/nodeListComponent" {
         private _onResetRequiredObserver;
         private static _Tooltips;
         private _customFrameList;
+        private _customBlockList;
         constructor(props: INodeListComponentProps);
         componentWillUnmount(): void;
         filterContent(filter: string): void;
         loadCustomFrame(file: File): void;
         removeItem(value: string): void;
+        loadCustomBlock(file: File): void;
+        removeCustomBlock(value: string): void;
         render(): JSX.Element;
     }
 }
 declare module "@babylonjs/node-editor/components/propertyTab/inputsPropertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface IInputsPropertyTabComponentProps {
         globalState: GlobalState;
         inputs: InputBlock[];
@@ -1766,10 +1877,10 @@ declare module "@babylonjs/node-editor/diagram/properties/nodePortPropertyCompon
 declare module "@babylonjs/node-editor/components/propertyTab/propertyTabComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { Nullable } from '@babylonjs/core/types';
+    import { Nullable } from "@babylonjs/core/types";
     import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
     import { GraphFrame } from "@babylonjs/node-editor/diagram/graphFrame";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     import { FrameNodePort } from "@babylonjs/node-editor/diagram/frameNodePort";
     import { NodePort } from "@babylonjs/node-editor/diagram/nodePort";
     interface IPropertyTabComponentProps {
@@ -1780,6 +1891,7 @@ declare module "@babylonjs/node-editor/components/propertyTab/propertyTabCompone
         currentFrame: Nullable<GraphFrame>;
         currentFrameNodePort: Nullable<FrameNodePort>;
         currentNodePort: Nullable<NodePort>;
+        uploadInProgress: boolean;
     }
     export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, IPropertyTabComponentState> {
         private _onBuiltObserver;
@@ -1825,6 +1937,7 @@ declare module "@babylonjs/node-editor/sharedComponents/messageDialog" {
 }
 declare module "@babylonjs/node-editor/components/preview/previewManager" {
     import { GlobalState } from "@babylonjs/node-editor/globalState";
+    import "@babylonjs/core/Rendering/depthRendererSceneComponent";
     export class PreviewManager {
         private _nodeMaterial;
         private _onBuildObserver;
@@ -1897,6 +2010,7 @@ declare module "@babylonjs/node-editor/components/preview/previewAreaComponent"
         componentWillUnmount(): void;
         changeBackFaceCulling(value: boolean): void;
         changeDepthPrePass(value: boolean): void;
+        changeParticleSystemBlendMode(newOne: number): void;
         render(): JSX.Element;
     }
 }
@@ -1909,8 +2023,8 @@ declare module "@babylonjs/node-editor/sharedComponents/popup" {
 declare module "@babylonjs/node-editor/graphEditor" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/node-editor/globalState";
-    import { NodeMaterialBlock } from '@babylonjs/core/Materials/Node/nodeMaterialBlock';
-    import { Nullable } from '@babylonjs/core/types';
+    import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
+    import { Nullable } from "@babylonjs/core/types";
     import { IEditorData } from "@babylonjs/node-editor/nodeLocationInfo";
     import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
     import { IInspectorOptions } from "@babylonjs/core/Debug/debugLayer";
@@ -1955,7 +2069,7 @@ declare module "@babylonjs/node-editor/graphEditor" {
         reconnectNewNodes(nodeIndex: number, newNodes: GraphNode[], sourceNodes: GraphNode[], done: boolean[]): void;
         pasteSelection(copiedNodes: GraphNode[], currentX: number, currentY: number, selectNew?: boolean): GraphNode[] | undefined;
         zoomToFit(): void;
-        buildMaterial(): void;
+        buildMaterial(autoConfigure?: boolean): void;
         build(): void;
         loadGraph(): void;
         showWaitScreen(): void;
@@ -2024,6 +2138,8 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/booleanLineCompo
     export interface IBooleanLineComponentProps {
         label: string;
         value: boolean;
+        icon?: string;
+        iconLabel?: string;
     }
     export class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {
         constructor(props: IBooleanLineComponentProps);
@@ -2035,18 +2151,34 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/buttonLineCompon
     export interface IButtonLineComponentProps {
         label: string;
         onClick: () => void;
+        icon?: string;
+        iconLabel?: string;
     }
     export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
         constructor(props: IButtonLineComponentProps);
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/targetsProxy" {
+    import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    export const conflictingValuesPlaceholder = "\u2014";
+    /**
+     *
+     * @param propertyName the property that the input changes
+     * @param targets a list of selected targets
+     * @param defaultValue the value that should be returned when two targets have conflicting values
+     * @param setter an optional setter function to override the default setter behavior
+     * @returns a proxy object that can be passed as a target into the input
+     */
+    export function makeTargetsProxy<Type>(targets: Type[], onPropertyChangedObservable?: Observable<PropertyChangedEvent>, getProperty?: (target: Type, property: keyof Type) => any): any;
+}
 declare module "@babylonjs/node-editor/sharedUiComponents/lines/checkBoxLineComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
     export interface ICheckBoxLineComponentProps {
-        label: string;
+        label?: string;
         target?: any;
         propertyName?: string;
         isSelected?: () => boolean;
@@ -2054,10 +2186,15 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/checkBoxLineComp
         onValueChanged?: () => void;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
         disabled?: boolean;
+        icon?: string;
+        iconLabel?: string;
+        faIcons?: {
+        };
     }
     export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
         isSelected: boolean;
         isDisabled?: boolean;
+        isConflict: boolean;
     }> {
         private static _UniqueIdSeed;
         private _uniqueId;
@@ -2066,11 +2203,23 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/checkBoxLineComp
         shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
             isSelected: boolean;
             isDisabled: boolean;
+            isConflict: boolean;
         }): boolean;
         onChange(): void;
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject" {
+    /**
+     * Class used to provide lock mechanism
+     */
+    export class LockObject {
+        /**
+         * Gets or set if the lock is engaged
+         */
+        lock: boolean;
+    }
+}
 declare module "@babylonjs/node-editor/sharedUiComponents/lines/numericInputComponent" {
     import * as React from "react";
     interface INumericInputComponentProps {
@@ -2079,6 +2228,8 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/numericInputComp
         step?: number;
         onChange: (value: number) => void;
         precision?: number;
+        icon?: string;
+        iconLabel?: string;
     }
     export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
         value: string;
@@ -2098,10 +2249,14 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/numericInputComp
 }
 declare module "@babylonjs/node-editor/sharedUiComponents/lines/colorPickerComponent" {
     import * as React from "react";
-    import { Color4, Color3 } from '@babylonjs/core/Maths/math.color';
+    import { Color4, Color3 } from "@babylonjs/core/Maths/math.color";
     export interface IColorPickerComponentProps {
         value: Color4 | Color3;
+        linearHint?: boolean;
         onColorChanged: (newOne: string) => void;
+        icon?: string;
+        iconLabel?: string;
+        shouldPopRight?: boolean;
     }
     interface IColorPickerComponentState {
         pickerEnabled: boolean;
@@ -2114,74 +2269,135 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/colorPickerCompo
         constructor(props: IColorPickerComponentProps);
         syncPositions(): void;
         shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
+        getHexString(props?: Readonly<IColorPickerComponentProps> & Readonly<{
+            children?: React.ReactNode;
+        }>): string;
         componentDidUpdate(): void;
         componentDidMount(): void;
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/node-editor/sharedUiComponents/lines/color3LineComponent" {
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/textInputLineComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
-    import { Color3 } from '@babylonjs/core/Maths/math.color';
-    export interface IColor3LineComponentProps {
+    import { LockObject } from "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    interface ITextInputLineComponentProps {
         label: string;
-        target: any;
-        propertyName: string;
+        lockObject: LockObject;
+        target?: any;
+        propertyName?: string;
+        value?: string;
+        onChange?: (value: string) => void;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-        isLinear?: boolean;
+        icon?: string;
+        iconLabel?: string;
+        noUnderline?: boolean;
+        numbersOnly?: boolean;
+        delayInput?: boolean;
+        unit?: string;
+        onUnitClicked?: (unit: string) => void;
+        unitLocked?: boolean;
     }
-    export class Color3LineComponent extends React.Component<IColor3LineComponentProps, {
-        isExpanded: boolean;
-        color: Color3;
+    export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
+        value: string;
     }> {
         private _localChange;
-        constructor(props: IColor3LineComponentProps);
-        shouldComponentUpdate(nextProps: IColor3LineComponentProps, nextState: {
-            color: Color3;
+        constructor(props: ITextInputLineComponentProps);
+        componentWillUnmount(): void;
+        shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: {
+            value: string;
         }): boolean;
-        setPropertyValue(newColor: Color3): void;
-        onChange(newValue: string): void;
-        switchExpandState(): void;
-        raiseOnPropertyChanged(previousValue: Color3): void;
-        updateStateR(value: number): void;
-        updateStateG(value: number): void;
-        updateStateB(value: number): void;
-        copyToClipboard(): void;
+        raiseOnPropertyChanged(newValue: string, previousValue: string): void;
+        updateValue(value: string): void;
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/node-editor/sharedUiComponents/lines/color4LineComponent" {
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/colorLineComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { Color4 } from "@babylonjs/core/Maths/math.color";
     import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
-    export interface IColor4LineComponentProps {
+    import { LockObject } from "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    export interface IColorLineComponentProps {
         label: string;
-        target: any;
+        target?: any;
         propertyName: string;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
         onChange?: () => void;
         isLinear?: boolean;
+        icon?: string;
+        iconLabel?: string;
+        lockObject?: LockObject;
+        disableAlpha?: boolean;
     }
-    export class Color4LineComponent extends React.Component<IColor4LineComponentProps, {
+    interface IColorLineComponentState {
         isExpanded: boolean;
         color: Color4;
-    }> {
-        private _localChange;
-        constructor(props: IColor4LineComponentProps);
-        shouldComponentUpdate(nextProps: IColor4LineComponentProps, nextState: {
-            color: Color4;
-        }): boolean;
-        setPropertyValue(newColor: Color4): void;
-        onChange(newValue: string): void;
+        colorString: string;
+    }
+    export class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
+        constructor(props: IColorLineComponentProps);
+        shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
+        getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
+            children?: React.ReactNode;
+        }>): Color4;
+        getValueAsString(props?: Readonly<IColorLineComponentProps> & Readonly<{
+            children?: React.ReactNode;
+        }>): string;
+        setColorFromString(colorString: string): void;
+        setColor(color: Color4): void;
+        updateColor(newColor: Color4): void;
         switchExpandState(): void;
-        raiseOnPropertyChanged(previousValue: Color4): void;
         updateStateR(value: number): void;
         updateStateG(value: number): void;
         updateStateB(value: number): void;
         updateStateA(value: number): void;
         copyToClipboard(): void;
+        get colorString(): string;
+        set colorString(_: string);
+        private convertToColor;
+        private toColor3;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/color3LineComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
+    import { LockObject } from "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    export interface IColor3LineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        isLinear?: boolean;
+        icon?: string;
+        lockObject?: LockObject;
+        iconLabel?: string;
+        onValueChange?: (value: string) => void;
+    }
+    export class Color3LineComponent extends React.Component<IColor3LineComponentProps> {
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/color4LineComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
+    import { LockObject } from "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    export interface IColor4LineComponentProps {
+        label: string;
+        target?: any;
+        propertyName: string;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        onChange?: () => void;
+        isLinear?: boolean;
+        icon?: string;
+        iconLabel?: string;
+        lockObject?: LockObject;
+    }
+    export class Color4LineComponent extends React.Component<IColor4LineComponentProps> {
         render(): JSX.Element;
     }
 }
@@ -2202,6 +2418,8 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/fileButtonLineCo
         label: string;
         onClick: (file: File) => void;
         accept: string;
+        icon?: string;
+        iconLabel?: string;
     }
     export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
         private static _IDGenerator;
@@ -2218,6 +2436,8 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/fileMultipleButt
         label: string;
         onClick: (event: any) => void;
         accept: string;
+        icon?: string;
+        iconLabel?: string;
     }
     export class FileMultipleButtonLineComponent extends React.Component<IFileMultipleButtonLineComponentProps> {
         private static _IDGenerator;
@@ -2228,21 +2448,11 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/fileMultipleButt
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject" {
-    /**
-     * Class used to provide lock mechanism
-     */
-    export class LockObject {
-        /**
-         * Gets or set if the lock is engaged
-         */
-        lock: boolean;
-    }
-}
 declare module "@babylonjs/node-editor/sharedUiComponents/lines/sliderLineComponent" {
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
+    import { LockObject } from "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     interface ISliderLineComponentProps {
         label: string;
         target?: any;
@@ -2257,6 +2467,9 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/sliderLineCompon
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
         decimalCount?: number;
         margin?: boolean;
+        icon?: string;
+        iconLabel?: string;
+        lockObject?: LockObject;
     }
     export class SliderLineComponent extends React.Component<ISliderLineComponentProps, {
         value: number;
@@ -2293,6 +2506,12 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/floatLineCompone
         max?: number;
         smallUI?: boolean;
         onEnter?: (newValue: number) => void;
+        icon?: string;
+        iconLabel?: string;
+        defaultValue?: number;
+        unit?: string;
+        onUnitClicked?: () => void;
+        unitLocked?: boolean;
     }
     export class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
         value: string;
@@ -2301,6 +2520,7 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/floatLineCompone
         private _store;
         constructor(props: IFloatLineComponentProps);
         componentWillUnmount(): void;
+        getValueString(value: any): string;
         shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: {
             value: string;
         }): boolean;
@@ -2330,6 +2550,8 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/hexLineComponent
         digits?: number;
         useEuler?: boolean;
         min?: number;
+        icon?: string;
+        iconLabel?: string;
     }
     export class HexLineComponent extends React.Component<IHexLineComponentProps, {
         value: string;
@@ -2350,8 +2572,14 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/hexLineComponent
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/iSelectedLineContainer" {
+    export interface ISelectedLineContainer {
+        selectedLineContainerTitles: Array<string>;
+        selectedLineContainerTitlesNoFocus: Array<string>;
+    }
+}
 declare module "@babylonjs/node-editor/sharedUiComponents/lines/iconButtonLineComponent" {
-    import * as React from 'react';
+    import * as React from "react";
     export interface IIconButtonLineComponentProps {
         icon: string;
         onClick: () => void;
@@ -2382,17 +2610,21 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/indentedTextLine
 }
 declare module "@babylonjs/node-editor/sharedUiComponents/lines/lineContainerComponent" {
     import * as React from "react";
+    import { ISelectedLineContainer } from "@babylonjs/node-editor/sharedUiComponents/lines/iSelectedLineContainer";
     interface ILineContainerComponentProps {
+        selection?: ISelectedLineContainer;
         title: string;
         children: any[] | any;
         closed?: boolean;
     }
     export class LineContainerComponent extends React.Component<ILineContainerComponentProps, {
         isExpanded: boolean;
+        isHighlighted: boolean;
     }> {
         constructor(props: ILineContainerComponentProps);
         switchExpandedState(): void;
         renderHeader(): JSX.Element;
+        componentDidMount(): void;
         render(): JSX.Element;
     }
 }
@@ -2426,22 +2658,20 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/optionsLineCompo
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
+    import { IInspectableOptions } from "@babylonjs/core/Misc/iInspectable";
     export const Null_Value: number;
-    export class ListLineOption {
-        label: string;
-        value: number;
-        selected?: boolean;
-    }
     export interface IOptionsLineComponentProps {
         label: string;
         target: any;
         propertyName: string;
-        options: ListLineOption[];
+        options: IInspectableOptions[];
         noDirectUpdate?: boolean;
         onSelect?: (value: number) => void;
         extractValue?: () => number;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
         allowNullValue?: boolean;
+        icon?: string;
+        iconLabel?: string;
     }
     export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
         value: number;
@@ -2472,6 +2702,8 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/radioLineCompone
         label: string;
         isSelected: () => boolean;
         onSelect: () => void;
+        icon?: string;
+        iconLabel?: string;
     }
     export class RadioButtonLineComponent extends React.Component<IRadioButtonLineComponentProps, {
         isSelected: boolean;
@@ -2484,34 +2716,6 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/radioLineCompone
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/node-editor/sharedUiComponents/lines/textInputLineComponent" {
-    import * as React from "react";
-    import { Observable } from "@babylonjs/core/Misc/observable";
-    import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
-    import { LockObject } from "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
-    interface ITextInputLineComponentProps {
-        label: string;
-        lockObject: LockObject;
-        target?: any;
-        propertyName?: string;
-        value?: string;
-        onChange?: (value: string) => void;
-        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    }
-    export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
-        value: string;
-    }> {
-        private _localChange;
-        constructor(props: ITextInputLineComponentProps);
-        componentWillUnmount(): void;
-        shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: {
-            value: string;
-        }): boolean;
-        raiseOnPropertyChanged(newValue: string, previousValue: string): void;
-        updateValue(value: string): void;
-        render(): JSX.Element;
-    }
-}
 declare module "@babylonjs/node-editor/sharedUiComponents/lines/textLineComponent" {
     import * as React from "react";
     interface ITextLineComponentProps {
@@ -2523,6 +2727,9 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/textLineComponen
         url?: string;
         ignoreValue?: boolean;
         additionalClass?: string;
+        icon?: string;
+        iconLabel?: string;
+        tooltip?: string;
     }
     export class TextLineComponent extends React.Component<ITextLineComponentProps> {
         constructor(props: ITextLineComponentProps);
@@ -2539,6 +2746,8 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/valueLineCompone
         color?: string;
         fractionDigits?: number;
         units?: string;
+        icon?: string;
+        iconLabel?: string;
     }
     export class ValueLineComponent extends React.Component<IValueLineComponentProps> {
         constructor(props: IValueLineComponentProps);
@@ -2557,6 +2766,8 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/vector2LineCompo
         step?: number;
         onChange?: (newvalue: Vector2) => void;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        icon?: string;
+        iconLabel?: string;
     }
     export class Vector2LineComponent extends React.Component<IVector2LineComponentProps, {
         isExpanded: boolean;
@@ -2592,6 +2803,8 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/vector3LineCompo
         useEuler?: boolean;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
         noSlider?: boolean;
+        icon?: string;
+        iconLabel?: string;
     }
     export class Vector3LineComponent extends React.Component<IVector3LineComponentProps, {
         isExpanded: boolean;
@@ -2629,6 +2842,8 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/vector4LineCompo
         onChange?: (newvalue: Vector4) => void;
         useEuler?: boolean;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        icon?: string;
+        iconLabel?: string;
     }
     export class Vector4LineComponent extends React.Component<IVector4LineComponentProps, {
         isExpanded: boolean;
@@ -2661,14 +2876,15 @@ declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui
     import { Control } from "@babylonjs/gui/2D/controls/control";
     import { LockObject } from "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     interface ICommonControlPropertyGridComponentProps {
-        control: Control;
+        controls?: Control[];
+        control?: Control;
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
     export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
         constructor(props: ICommonControlPropertyGridComponentProps);
-        renderGridInformation(): JSX.Element | null;
-        render(): JSX.Element;
+        renderGridInformation(control: Control): JSX.Element | null;
+        render(): JSX.Element | undefined;
     }
 }
 declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/checkboxPropertyGridComponent" {
@@ -2825,7 +3041,7 @@ declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui
     import { LockObject } from "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { RadioButton } from "@babylonjs/gui/2D/controls/radioButton";
     interface IRadioButtonPropertyGridComponentProps {
-        radioButton: RadioButton;
+        radioButtons: RadioButton[];
         lockObject: LockObject;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }