@babylonjs/node-editor 5.0.0-alpha.6 → 5.0.0-alpha.63

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,8 +77,15 @@ 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';
     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): 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 | 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" | "";
@@ -170,16 +178,10 @@ declare module "@babylonjs/node-editor/serializationTools" {
         static AddFrameToMaterial(serializationObject: any, globalState: GlobalState, currentMaterial: NodeMaterial): void;
     }
 }
-declare module "@babylonjs/node-editor/stringTools" {
-    import { NodeMaterialBlockConnectionPointTypes } from '@babylonjs/core/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
+declare module "@babylonjs/node-editor/sharedUiComponents/stringTools" {
     export class StringTools {
         private static _SaveAs;
         private static _Click;
-        /**
-         * Gets the base math type of node material block connection point.
-         * @param type Type to parse.
-         */
-        static GetBaseType(type: NodeMaterialBlockConnectionPointTypes): string;
         /**
          * Download a string into a file that will be saved locally by the browser
          * @param content defines the string to download locally as a file
@@ -363,6 +365,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;
@@ -426,8 +429,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;
@@ -439,12 +442,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";
@@ -515,6 +518,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;
@@ -572,10 +576,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;
@@ -584,7 +590,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;
@@ -690,7 +696,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;
@@ -740,6 +746,7 @@ declare module "@babylonjs/node-editor/sharedUiComponents/colorPicker/colorPicke
      */
     export interface IColorPickerProps {
         color: Color3 | Color4;
+        linearhint?: boolean;
         debugMode?: boolean;
         onColorChanged?: (color: Color3 | Color4) => void;
     }
@@ -759,6 +766,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;
@@ -774,7 +782,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;
@@ -801,7 +809,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 {
@@ -814,16 +822,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;
@@ -834,7 +842,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;
@@ -883,7 +891,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;
@@ -934,7 +942,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;
@@ -947,16 +955,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>;
@@ -1018,7 +1023,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;
@@ -1071,10 +1076,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;
@@ -1129,6 +1136,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;
@@ -1140,8 +1148,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;
     }
@@ -1183,7 +1193,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;
@@ -1215,9 +1225,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;
@@ -1242,6 +1252,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);
@@ -1250,7 +1261,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;
@@ -1297,12 +1308,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, {
@@ -1337,6 +1348,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";
@@ -1349,10 +1410,12 @@ declare module "@babylonjs/node-editor/diagram/propertyLedger" {
 declare module "@babylonjs/node-editor/diagram/display/inputDisplayManager" {
     import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
     import { NodeMaterialBlock } from '@babylonjs/core/Materials/Node/nodeMaterialBlock';
+    import { NodeMaterialBlockConnectionPointTypes } from '@babylonjs/core/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
     export class InputDisplayManager implements IDisplayManager {
         getHeaderClass(block: NodeMaterialBlock): "" | "constant" | "inspector";
         shouldDisplayPortLabels(block: NodeMaterialBlock): boolean;
         getHeaderText(block: NodeMaterialBlock): string;
+        static GetBaseType(type: NodeMaterialBlockConnectionPointTypes): string;
         getBackgroundColor(block: NodeMaterialBlock): string;
         updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
     }
@@ -1482,6 +1545,30 @@ 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/displayLedger" {
     export class DisplayLedger {
         static RegisteredControls: {
@@ -1501,6 +1588,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;
@@ -1548,7 +1637,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;
@@ -1584,10 +1673,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>;
@@ -1600,16 +1689,18 @@ 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>;
         onGetNodeFromBlock: (block: NodeMaterialBlock) => GraphNode;
         onGridSizeChanged: Observable<void>;
         onExposePortOnFrameObservable: Observable<GraphNode>;
         previewType: PreviewType;
         previewFile: File;
+        particleSystemBlendMode: number;
         listOfCustomPreviewFiles: File[];
         rotatePreview: boolean;
         backgroundColor: Color4;
@@ -1652,6 +1743,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);
@@ -1691,18 +1783,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[];
@@ -1769,10 +1864,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 {
@@ -1783,6 +1878,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;
@@ -1900,6 +1996,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;
     }
 }
@@ -1912,8 +2009,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";
@@ -1958,7 +2055,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;
@@ -2013,11 +2110,22 @@ declare module "@babylonjs/node-editor/index" {
 declare module "@babylonjs/node-editor/legacy/legacy" {
     export * from "@babylonjs/node-editor/index";
 }
+declare module "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent" {
+    export class PropertyChangedEvent {
+        object: any;
+        property: string;
+        value: any;
+        initialValue: any;
+        allowNullValue?: boolean;
+    }
+}
 declare module "@babylonjs/node-editor/sharedUiComponents/lines/booleanLineComponent" {
     import * as React from "react";
     export interface IBooleanLineComponentProps {
         label: string;
         value: boolean;
+        icon?: string;
+        iconLabel?: string;
     }
     export class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {
         constructor(props: IBooleanLineComponentProps);
@@ -2029,97 +2137,43 @@ 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/fileButtonLineComponent" {
-    import * as React from "react";
-    interface IFileButtonLineComponentProps {
-        label: string;
-        onClick: (file: File) => void;
-        accept: string;
-    }
-    export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
-        private static _IDGenerator;
-        private _id;
-        private uploadInputRef;
-        constructor(props: IFileButtonLineComponentProps);
-        onChange(evt: any): void;
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/node-editor/sharedUiComponents/lines/fileMultipleButtonLineComponent" {
-    import * as React from "react";
-    interface IFileMultipleButtonLineComponentProps {
-        label: string;
-        onClick: (event: any) => void;
-        accept: string;
-    }
-    export class FileMultipleButtonLineComponent extends React.Component<IFileMultipleButtonLineComponentProps> {
-        private static _IDGenerator;
-        private _id;
-        private uploadInputRef;
-        constructor(props: IFileMultipleButtonLineComponentProps);
-        onChange(evt: any): void;
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/node-editor/sharedUiComponents/lines/iconButtonLineComponent" {
-    import * as React from 'react';
-    export interface IIconButtonLineComponentProps {
-        icon: string;
-        onClick: () => void;
-        tooltip: string;
-        active?: boolean;
-    }
-    export class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {
-        constructor(props: IIconButtonLineComponentProps);
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/node-editor/sharedUiComponents/lines/indentedTextLineComponent" {
-    import * as React from "react";
-    interface IIndentedTextLineComponentProps {
-        value?: string;
-        color?: string;
-        underline?: boolean;
-        onLink?: () => void;
-        url?: string;
-        additionalClass?: string;
-    }
-    export class IndentedTextLineComponent extends React.Component<IIndentedTextLineComponentProps> {
-        constructor(props: IIndentedTextLineComponentProps);
-        onLink(): void;
-        renderContent(): JSX.Element;
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/node-editor/sharedUiComponents/lines/linkButtonComponent" {
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/checkBoxLineComponent" {
     import * as React from "react";
-    interface ILinkButtonComponentProps {
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
+    export interface ICheckBoxLineComponentProps {
         label: string;
-        buttonLabel: string;
-        url?: string;
-        onClick: () => void;
-        onIconClick?: () => void;
-    }
-    export class LinkButtonComponent extends React.Component<ILinkButtonComponentProps> {
-        constructor(props: ILinkButtonComponentProps);
-        onLink(): void;
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/node-editor/sharedUiComponents/lines/messageLineComponent" {
-    import * as React from "react";
-    interface IMessageLineComponentProps {
-        text: string;
-        color?: string;
+        target?: any;
+        propertyName?: string;
+        isSelected?: () => boolean;
+        onSelect?: (value: boolean) => void;
+        onValueChanged?: () => void;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        disabled?: boolean;
+        icon?: string;
+        iconLabel?: string;
     }
-    export class MessageLineComponent extends React.Component<IMessageLineComponentProps> {
-        constructor(props: IMessageLineComponentProps);
+    export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
+        isSelected: boolean;
+        isDisabled?: boolean;
+    }> {
+        private static _UniqueIdSeed;
+        private _uniqueId;
+        private _localChange;
+        constructor(props: ICheckBoxLineComponentProps);
+        shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
+            isSelected: boolean;
+            isDisabled: boolean;
+        }): boolean;
+        onChange(): void;
         render(): JSX.Element;
     }
 }
@@ -2131,6 +2185,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;
@@ -2148,37 +2204,480 @@ declare module "@babylonjs/node-editor/sharedUiComponents/lines/numericInputComp
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/node-editor/sharedUiComponents/lines/radioLineComponent" {
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/colorPickerComponent" {
     import * as React from "react";
-    import { Observable } from "@babylonjs/core/Misc/observable";
-    interface IRadioButtonLineComponentProps {
-        onSelectionChangedObservable: Observable<RadioButtonLineComponent>;
-        label: string;
-        isSelected: () => boolean;
-        onSelect: () => void;
+    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;
     }
-    export class RadioButtonLineComponent extends React.Component<IRadioButtonLineComponentProps, {
-        isSelected: boolean;
-    }> {
-        private _onSelectionChangedObserver;
-        constructor(props: IRadioButtonLineComponentProps);
+    interface IColorPickerComponentState {
+        pickerEnabled: boolean;
+        color: Color3 | Color4;
+        hex: string;
+    }
+    export class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
+        private _floatRef;
+        private _floatHostRef;
+        constructor(props: IColorPickerComponentProps);
+        syncPositions(): void;
+        shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
+        componentDidUpdate(): void;
         componentDidMount(): void;
-        componentWillUnmount(): void;
-        onChange(): void;
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/node-editor/sharedUiComponents/lines/textLineComponent" {
+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/textInputLineComponent" {
     import * as React from "react";
-    interface ITextLineComponentProps {
-        label?: string;
+    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;
-        color?: string;
-        underline?: boolean;
-        onLink?: () => void;
+        onChange?: (value: string) => void;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        icon?: string;
+        iconLabel?: string;
+        noUnderline?: boolean;
+        numbersOnly?: boolean;
+    }
+    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/color3LineComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
+    import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
+    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, {
+        isExpanded: boolean;
+        color: Color3 | Color4;
+        colorText: string;
+    }> {
+        private _localChange;
+        constructor(props: IColor3LineComponentProps);
+        private convertToColor3;
+        shouldComponentUpdate(nextProps: IColor3LineComponentProps, nextState: {
+            color: Color3 | Color4;
+            colorText: string;
+        }): boolean;
+        setPropertyValue(newColor: Color3 | Color4, newColorText: string): void;
+        onChange(newValue: string): void;
+        switchExpandState(): void;
+        raiseOnPropertyChanged(previousValue: Color3 | Color4): void;
+        updateStateR(value: number): void;
+        updateStateG(value: number): void;
+        updateStateB(value: number): void;
+        copyToClipboard(): void;
+        convert(colorString: string): void;
+        private _colorStringSaved;
+        private _colorPickerOpen;
+        private _colorString;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/color4LineComponent" {
+    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 {
+        label: string;
+        target: any;
+        propertyName: string;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        onChange?: () => void;
+        isLinear?: boolean;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class Color4LineComponent extends React.Component<IColor4LineComponentProps, {
+        isExpanded: boolean;
+        color: Color4;
+    }> {
+        private _localChange;
+        constructor(props: IColor4LineComponentProps);
+        shouldComponentUpdate(nextProps: IColor4LineComponentProps, nextState: {
+            color: Color4;
+        }): boolean;
+        setPropertyValue(newColor: Color4): void;
+        onChange(newValue: string): 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;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/draggableLineComponent" {
+    import * as React from "react";
+    export interface IButtonLineComponentProps {
+        data: string;
+        tooltip: string;
+    }
+    export class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
+        constructor(props: IButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/fileButtonLineComponent" {
+    import * as React from "react";
+    interface IFileButtonLineComponentProps {
+        label: string;
+        onClick: (file: File) => void;
+        accept: string;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
+        private static _IDGenerator;
+        private _id;
+        private uploadInputRef;
+        constructor(props: IFileButtonLineComponentProps);
+        onChange(evt: any): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/fileMultipleButtonLineComponent" {
+    import * as React from "react";
+    interface IFileMultipleButtonLineComponentProps {
+        label: string;
+        onClick: (event: any) => void;
+        accept: string;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class FileMultipleButtonLineComponent extends React.Component<IFileMultipleButtonLineComponentProps> {
+        private static _IDGenerator;
+        private _id;
+        private uploadInputRef;
+        constructor(props: IFileMultipleButtonLineComponentProps);
+        onChange(evt: any): void;
+        render(): JSX.Element;
+    }
+}
+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;
+        propertyName?: string;
+        minimum: number;
+        maximum: number;
+        step: number;
+        directValue?: number;
+        useEuler?: boolean;
+        onChange?: (value: number) => void;
+        onInput?: (value: number) => void;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        decimalCount?: number;
+        margin?: boolean;
+        icon?: string;
+        iconLabel?: string;
+        lockObject?: LockObject;
+    }
+    export class SliderLineComponent extends React.Component<ISliderLineComponentProps, {
+        value: number;
+    }> {
+        private _localChange;
+        constructor(props: ISliderLineComponentProps);
+        shouldComponentUpdate(nextProps: ISliderLineComponentProps, nextState: {
+            value: number;
+        }): boolean;
+        onChange(newValueString: any): void;
+        onInput(newValueString: any): void;
+        prepareDataToRead(value: number): number;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/floatLineComponent" {
+    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 IFloatLineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        lockObject?: LockObject;
+        onChange?: (newValue: number) => void;
+        isInteger?: boolean;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        additionalClass?: string;
+        step?: string;
+        digits?: number;
+        useEuler?: boolean;
+        min?: number;
+        max?: number;
+        smallUI?: boolean;
+        onEnter?: (newValue: number) => void;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
+        value: string;
+    }> {
+        private _localChange;
+        private _store;
+        constructor(props: IFloatLineComponentProps);
+        componentWillUnmount(): void;
+        shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: {
+            value: string;
+        }): boolean;
+        raiseOnPropertyChanged(newValue: number, previousValue: number): void;
+        updateValue(valueString: string): void;
+        lock(): void;
+        unlock(): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/hexLineComponent" {
+    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 IHexLineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        lockObject?: LockObject;
+        onChange?: (newValue: number) => void;
+        isInteger?: boolean;
+        replaySourceReplacement?: string;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        additionalClass?: string;
+        step?: string;
+        digits?: number;
+        useEuler?: boolean;
+        min?: number;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class HexLineComponent extends React.Component<IHexLineComponentProps, {
+        value: string;
+    }> {
+        private _localChange;
+        private _store;
+        private _propertyChange;
+        constructor(props: IHexLineComponentProps);
+        componentWillUnmount(): void;
+        shouldComponentUpdate(nextProps: IHexLineComponentProps, nextState: {
+            value: string;
+        }): boolean;
+        raiseOnPropertyChanged(newValue: number, previousValue: number): void;
+        convertToHexString(valueString: string): string;
+        updateValue(valueString: string, raisePropertyChanged: boolean): void;
+        lock(): void;
+        unlock(): void;
+        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";
+    export interface IIconButtonLineComponentProps {
+        icon: string;
+        onClick: () => void;
+        tooltip: string;
+        active?: boolean;
+    }
+    export class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {
+        constructor(props: IIconButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/indentedTextLineComponent" {
+    import * as React from "react";
+    interface IIndentedTextLineComponentProps {
+        value?: string;
+        color?: string;
+        underline?: boolean;
+        onLink?: () => void;
+        url?: string;
+        additionalClass?: string;
+    }
+    export class IndentedTextLineComponent extends React.Component<IIndentedTextLineComponentProps> {
+        constructor(props: IIndentedTextLineComponentProps);
+        onLink(): void;
+        renderContent(): JSX.Element;
+        render(): JSX.Element;
+    }
+}
+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;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/linkButtonComponent" {
+    import * as React from "react";
+    interface ILinkButtonComponentProps {
+        label: string;
+        buttonLabel: string;
+        url?: string;
+        onClick: () => void;
+        onIconClick?: () => void;
+    }
+    export class LinkButtonComponent extends React.Component<ILinkButtonComponentProps> {
+        constructor(props: ILinkButtonComponentProps);
+        onLink(): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/messageLineComponent" {
+    import * as React from "react";
+    interface IMessageLineComponentProps {
+        text: string;
+        color?: string;
+    }
+    export class MessageLineComponent extends React.Component<IMessageLineComponentProps> {
+        constructor(props: IMessageLineComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/optionsLineComponent" {
+    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 interface IOptionsLineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        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;
+    }> {
+        private _localChange;
+        private remapValueIn;
+        private remapValueOut;
+        constructor(props: IOptionsLineComponentProps);
+        shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
+            value: number;
+        }): boolean;
+        raiseOnPropertyChanged(newValue: number, previousValue: number): void;
+        updateValue(valueString: string): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/popup" {
+    export class Popup {
+        static CreatePopup(title: string, windowVariableName: string, width?: number, height?: number): HTMLDivElement | null;
+        private static _CopyStyles;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/radioLineComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    interface IRadioButtonLineComponentProps {
+        onSelectionChangedObservable: Observable<RadioButtonLineComponent>;
+        label: string;
+        isSelected: () => boolean;
+        onSelect: () => void;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class RadioButtonLineComponent extends React.Component<IRadioButtonLineComponentProps, {
+        isSelected: boolean;
+    }> {
+        private _onSelectionChangedObserver;
+        constructor(props: IRadioButtonLineComponentProps);
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        onChange(): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/textLineComponent" {
+    import * as React from "react";
+    interface ITextLineComponentProps {
+        label?: string;
+        value?: string;
+        color?: string;
+        underline?: boolean;
+        onLink?: () => void;
         url?: string;
         ignoreValue?: boolean;
         additionalClass?: string;
+        icon?: string;
+        iconLabel?: string;
+        tooltip?: string;
     }
     export class TextLineComponent extends React.Component<ITextLineComponentProps> {
         constructor(props: ITextLineComponentProps);
@@ -2195,12 +2694,389 @@ 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);
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/vector2LineComponent" {
+    import * as React from "react";
+    import { Vector2 } from "@babylonjs/core/Maths/math.vector";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
+    interface IVector2LineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        step?: number;
+        onChange?: (newvalue: Vector2) => void;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class Vector2LineComponent extends React.Component<IVector2LineComponentProps, {
+        isExpanded: boolean;
+        value: Vector2;
+    }> {
+        static defaultProps: {
+            step: number;
+        };
+        private _localChange;
+        constructor(props: IVector2LineComponentProps);
+        shouldComponentUpdate(nextProps: IVector2LineComponentProps, nextState: {
+            isExpanded: boolean;
+            value: Vector2;
+        }): boolean;
+        switchExpandState(): void;
+        raiseOnPropertyChanged(previousValue: Vector2): void;
+        updateStateX(value: number): void;
+        updateStateY(value: number): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/vector3LineComponent" {
+    import * as React from "react";
+    import { Vector3 } from "@babylonjs/core/Maths/math.vector";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
+    interface IVector3LineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        step?: number;
+        onChange?: (newvalue: Vector3) => void;
+        useEuler?: boolean;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        noSlider?: boolean;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class Vector3LineComponent extends React.Component<IVector3LineComponentProps, {
+        isExpanded: boolean;
+        value: Vector3;
+    }> {
+        static defaultProps: {
+            step: number;
+        };
+        private _localChange;
+        constructor(props: IVector3LineComponentProps);
+        getCurrentValue(): any;
+        shouldComponentUpdate(nextProps: IVector3LineComponentProps, nextState: {
+            isExpanded: boolean;
+            value: Vector3;
+        }): boolean;
+        switchExpandState(): void;
+        raiseOnPropertyChanged(previousValue: Vector3): void;
+        updateVector3(): void;
+        updateStateX(value: number): void;
+        updateStateY(value: number): void;
+        updateStateZ(value: number): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/lines/vector4LineComponent" {
+    import * as React from "react";
+    import { Vector4 } from "@babylonjs/core/Maths/math.vector";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
+    interface IVector4LineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        step?: number;
+        onChange?: (newvalue: Vector4) => void;
+        useEuler?: boolean;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class Vector4LineComponent extends React.Component<IVector4LineComponentProps, {
+        isExpanded: boolean;
+        value: Vector4;
+    }> {
+        static defaultProps: {
+            step: number;
+        };
+        private _localChange;
+        constructor(props: IVector4LineComponentProps);
+        getCurrentValue(): any;
+        shouldComponentUpdate(nextProps: IVector4LineComponentProps, nextState: {
+            isExpanded: boolean;
+            value: Vector4;
+        }): boolean;
+        switchExpandState(): void;
+        raiseOnPropertyChanged(previousValue: Vector4): void;
+        updateVector4(): void;
+        updateStateX(value: number): void;
+        updateStateY(value: number): void;
+        updateStateZ(value: number): void;
+        updateStateW(value: number): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/commonControlPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
+    import { Control } from "@babylonjs/gui/2D/controls/control";
+    import { LockObject } from "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    interface ICommonControlPropertyGridComponentProps {
+        control: Control;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
+        constructor(props: ICommonControlPropertyGridComponentProps);
+        renderGridInformation(): JSX.Element | null;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/checkboxPropertyGridComponent" {
+    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";
+    import { Checkbox } from "@babylonjs/gui/2D/controls/checkbox";
+    interface ICheckboxPropertyGridComponentProps {
+        checkbox: Checkbox;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class CheckboxPropertyGridComponent extends React.Component<ICheckboxPropertyGridComponentProps> {
+        constructor(props: ICheckboxPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/colorPickerPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
+    import { ColorPicker } from "@babylonjs/gui/2D/controls/colorpicker";
+    import { LockObject } from "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    interface IColorPickerPropertyGridComponentProps {
+        colorPicker: ColorPicker;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class ColorPickerPropertyGridComponent extends React.Component<IColorPickerPropertyGridComponentProps> {
+        constructor(props: IColorPickerPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/controlPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
+    import { Control } from "@babylonjs/gui/2D/controls/control";
+    import { LockObject } from "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    interface IControlPropertyGridComponentProps {
+        control: Control;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class ControlPropertyGridComponent extends React.Component<IControlPropertyGridComponentProps> {
+        constructor(props: IControlPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/ellipsePropertyGridComponent" {
+    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";
+    import { Ellipse } from "@babylonjs/gui/2D/controls/ellipse";
+    interface IEllipsePropertyGridComponentProps {
+        ellipse: Ellipse;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class EllipsePropertyGridComponent extends React.Component<IEllipsePropertyGridComponentProps> {
+        constructor(props: IEllipsePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/gridPropertyGridComponent" {
+    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";
+    import { Grid } from "@babylonjs/gui/2D/controls/grid";
+    interface IGridPropertyGridComponentProps {
+        grid: Grid;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class GridPropertyGridComponent extends React.Component<IGridPropertyGridComponentProps> {
+        constructor(props: IGridPropertyGridComponentProps);
+        renderRows(): JSX.Element[];
+        renderColumns(): JSX.Element[];
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/imageBasedSliderPropertyGridComponent" {
+    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";
+    import { ImageBasedSlider } from "@babylonjs/gui/2D/controls/sliders/imageBasedSlider";
+    interface IImageBasedSliderPropertyGridComponentProps {
+        imageBasedSlider: ImageBasedSlider;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class ImageBasedSliderPropertyGridComponent extends React.Component<IImageBasedSliderPropertyGridComponentProps> {
+        constructor(props: IImageBasedSliderPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/imagePropertyGridComponent" {
+    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";
+    import { Image } from "@babylonjs/gui/2D/controls/image";
+    interface IImagePropertyGridComponentProps {
+        image: Image;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class ImagePropertyGridComponent extends React.Component<IImagePropertyGridComponentProps> {
+        constructor(props: IImagePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/inputTextPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
+    import { InputText } from "@babylonjs/gui/2D/controls/inputText";
+    import { LockObject } from "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    interface IInputTextPropertyGridComponentProps {
+        inputText: InputText;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class InputTextPropertyGridComponent extends React.Component<IInputTextPropertyGridComponentProps> {
+        constructor(props: IInputTextPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/linePropertyGridComponent" {
+    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";
+    import { Line } from "@babylonjs/gui/2D/controls/line";
+    interface ILinePropertyGridComponentProps {
+        line: Line;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class LinePropertyGridComponent extends React.Component<ILinePropertyGridComponentProps> {
+        constructor(props: ILinePropertyGridComponentProps);
+        onDashChange(value: string): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/radioButtonPropertyGridComponent" {
+    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";
+    import { RadioButton } from "@babylonjs/gui/2D/controls/radioButton";
+    interface IRadioButtonPropertyGridComponentProps {
+        radioButton: RadioButton;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class RadioButtonPropertyGridComponent extends React.Component<IRadioButtonPropertyGridComponentProps> {
+        constructor(props: IRadioButtonPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/rectanglePropertyGridComponent" {
+    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";
+    import { Rectangle } from "@babylonjs/gui/2D/controls/rectangle";
+    interface IRectanglePropertyGridComponentProps {
+        rectangle: Rectangle;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class RectanglePropertyGridComponent extends React.Component<IRectanglePropertyGridComponentProps> {
+        constructor(props: IRectanglePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/scrollViewerPropertyGridComponent" {
+    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";
+    import { ScrollViewer } from "@babylonjs/gui/2D/controls/scrollViewers/scrollViewer";
+    interface IScrollViewerPropertyGridComponentProps {
+        scrollViewer: ScrollViewer;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class ScrollViewerPropertyGridComponent extends React.Component<IScrollViewerPropertyGridComponentProps> {
+        constructor(props: IScrollViewerPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/sliderPropertyGridComponent" {
+    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";
+    import { Slider } from "@babylonjs/gui/2D/controls/sliders/slider";
+    interface ISliderPropertyGridComponentProps {
+        slider: Slider;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class SliderPropertyGridComponent extends React.Component<ISliderPropertyGridComponentProps> {
+        constructor(props: ISliderPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/stackPanelPropertyGridComponent" {
+    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";
+    import { StackPanel } from "@babylonjs/gui/2D/controls/stackPanel";
+    interface IStackPanelPropertyGridComponentProps {
+        stackPanel: StackPanel;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class StackPanelPropertyGridComponent extends React.Component<IStackPanelPropertyGridComponentProps> {
+        constructor(props: IStackPanelPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/gui/textBlockPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedUiComponents/propertyChangedEvent";
+    import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock";
+    import { LockObject } from "@babylonjs/node-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    interface ITextBlockPropertyGridComponentProps {
+        textBlock: TextBlock;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class TextBlockPropertyGridComponent extends React.Component<ITextBlockPropertyGridComponentProps> {
+        constructor(props: ITextBlockPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+}
 declare module "@babylonjs/node-editor" {
     export * from "@babylonjs/node-editor/legacy/legacy";
 }