@babylonjs/node-editor 5.12.1 → 5.13.2

package/dist/babylon.nodeEditor.module.d.ts

@@ -367,12 +367,12 @@ declare module "@babylonjs/node-editor/components/propertyTab/propertyTabCompone
 import * as React from "react";
 import { GlobalState } from "@babylonjs/node-editor/globalState";
 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 { FrameNodePort } from "@babylonjs/node-editor/diagram/frameNodePort";
-import { NodePort } from "@babylonjs/node-editor/diagram/nodePort";
 import "@babylonjs/node-editor/components/propertyTab/propertyTab.scss";
+import { GraphNode } from "@babylonjs/node-editor/nodeGraphSystem/graphNode";
+import { GraphFrame } from "@babylonjs/node-editor/nodeGraphSystem/graphFrame";
+import { NodePort } from "@babylonjs/node-editor/nodeGraphSystem/nodePort";
+import { FrameNodePort } from "@babylonjs/node-editor/nodeGraphSystem/frameNodePort";
 interface IPropertyTabComponentProps {
     globalState: GlobalState;
 }
@@ -403,640 +403,383 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
 export {};
 
 }
-declare module "@babylonjs/node-editor/diagram/display/clampDisplayManager" {
-import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
+declare module "@babylonjs/node-editor/globalState" {
+import { NodeMaterial } from "@babylonjs/core/Materials/Node/nodeMaterial";
+import { Observable } from "@babylonjs/core/Misc/observable";
+import { LogEntry } from "@babylonjs/node-editor/components/log/logComponent";
+import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
+import { PreviewType } from "@babylonjs/node-editor/components/preview/previewType";
+import { Color4 } from "@babylonjs/core/Maths/math.color";
+import { NodeMaterialModes } from "@babylonjs/core/Materials/Node/Enums/nodeMaterialModes";
+import { GraphNode } from "@babylonjs/node-editor/nodeGraphSystem/graphNode";
+import { GraphFrame } from "@babylonjs/node-editor/nodeGraphSystem/graphFrame";
+import { Nullable } from "@babylonjs/core/types";
+import { LockObject } from "@babylonjs/node-editor/tabs/propertyGrids/lockObject";
+import { StateManager } from "@babylonjs/node-editor/nodeGraphSystem/stateManager";
+export class GlobalState {
+    nodeMaterial: NodeMaterial;
+    hostElement: HTMLElement;
+    hostDocument: Document;
+    hostWindow: Window;
+    stateManager: StateManager;
+    onBuiltObservable: Observable<void>;
+    onResetRequiredObservable: Observable<boolean>;
+    onZoomToFitRequiredObservable: Observable<void>;
+    onReOrganizedRequiredObservable: Observable<void>;
+    onLogRequiredObservable: Observable<LogEntry>;
+    onIsLoadingChanged: Observable<boolean>;
+    onPreviewCommandActivated: Observable<boolean>;
+    onLightUpdated: Observable<void>;
+    onPreviewBackgroundChanged: Observable<void>;
+    onBackFaceCullingChanged: Observable<void>;
+    onDepthPrePassChanged: Observable<void>;
+    onAnimationCommandActivated: Observable<void>;
+    onImportFrameObservable: Observable<any>;
+    onPopupClosedObservable: Observable<void>;
+    onGetNodeFromBlock: (block: NodeMaterialBlock) => GraphNode;
+    previewType: PreviewType;
+    previewFile: File;
+    particleSystemBlendMode: number;
+    listOfCustomPreviewFiles: File[];
+    rotatePreview: boolean;
+    backgroundColor: Color4;
+    backFaceCulling: boolean;
+    depthPrePass: boolean;
+    lockObject: LockObject;
+    hemisphericLight: boolean;
+    directionalLight0: boolean;
+    directionalLight1: boolean;
+    controlCamera: boolean;
+    _mode: NodeMaterialModes;
+    /** Gets the mode */
+    get mode(): NodeMaterialModes;
+    /** Sets the mode */
+    set mode(m: NodeMaterialModes);
+    customSave?: {
+        label: string;
+        action: (data: string) => Promise<void>;
+    };
+    constructor();
+    storeEditorData(serializationObject: any, frame?: Nullable<GraphFrame>): void;
+}
+
+}
+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 { IInspectorOptions } from "@babylonjs/core/Debug/debugLayer";
+import "@babylonjs/node-editor/main.scss";
+import { GraphNode } from "@babylonjs/node-editor/nodeGraphSystem/graphNode";
+import { IEditorData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeLocationInfo";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
+interface IGraphEditorProps {
+    globalState: GlobalState;
+}
+interface IGraphEditorState {
+    showPreviewPopUp: boolean;
+}
+interface IInternalPreviewAreaOptions extends IInspectorOptions {
+    popup: boolean;
+    original: boolean;
+    explorerWidth?: string;
+    inspectorWidth?: string;
+    embedHostWidth?: string;
+}
+export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
+    static readonly NodeWidth: number;
+    private _graphCanvasRef;
+    private _diagramContainerRef;
+    private _graphCanvas;
+    private _diagramContainer;
+    private _startX;
+    private _moveInProgress;
+    private _leftWidth;
+    private _rightWidth;
+    private _previewManager;
+    private _copiedNodes;
+    private _copiedFrames;
+    private _mouseLocationX;
+    private _mouseLocationY;
+    private _onWidgetKeyUpPointer;
+    private _previewHost;
+    private _popUpWindow;
+    appendBlock(dataToAppend: NodeMaterialBlock | INodeData, recursion?: boolean): GraphNode;
+    addValueNode(type: string): GraphNode;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    constructor(props: IGraphEditorProps);
+    reconnectNewNodes(nodeIndex: number, newNodes: GraphNode[], sourceNodes: GraphNode[], done: boolean[]): void;
+    pasteSelection(copiedNodes: GraphNode[], currentX: number, currentY: number, selectNew?: boolean): GraphNode[] | undefined;
+    zoomToFit(): void;
+    buildMaterial(autoConfigure?: boolean): void;
+    build(ignoreEditorData?: boolean): void;
+    loadGraph(): void;
+    showWaitScreen(): void;
+    hideWaitScreen(): void;
+    reOrganize(editorData?: Nullable<IEditorData>, isImportingAFrame?: boolean): void;
+    onPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+    onPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+    onWheel(this: any, evt: WheelEvent): void;
+    resizeColumns(evt: React.PointerEvent<HTMLDivElement>, forLeft?: boolean): void;
+    buildColumnLayout(): string;
+    emitNewBlock(blockType: string, targetX: number, targetY: number): void;
+    dropNewBlock(event: React.DragEvent<HTMLDivElement>): void;
+    handlePopUp: () => void;
+    handleClosingPopUp: () => void;
+    initiatePreviewArea: (canvas?: HTMLCanvasElement) => void;
+    createPopUp: () => void;
+    createPopupWindow: (title: string, windowVariableName: string, width?: number, height?: number) => Window | null;
+    createPreviewMeshControlHost: (options: IInternalPreviewAreaOptions, parentControl: Nullable<HTMLElement>) => void;
+    createPreviewHost: (options: IInternalPreviewAreaOptions, parentControl: Nullable<HTMLElement>) => void;
+    fixPopUpStyles: (document: Document) => void;
+    render(): JSX.Element;
+}
+export {};
+
+}
+declare module "@babylonjs/node-editor/graphSystem/blockNodeData" {
 import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
+import { INodeContainer } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeContainer";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
+import { IPortData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/portData";
+export class BlockNodeData implements INodeData {
+    data: NodeMaterialBlock;
+    private _inputs;
+    private _outputs;
+    get uniqueId(): number;
+    get name(): string;
+    getClassName(): string;
+    get isInput(): boolean;
+    get inputs(): IPortData[];
+    get outputs(): IPortData[];
+    get comments(): string;
+    set comments(value: string);
+    getPortByName(name: string): IPortData | null;
+    dispose(): void;
+    getWarningMessage(): "" | "For optimization reasons, this block will be promoted to the vertex shader. You can force it to render in the fragment shader by setting its target to Fragment";
+    constructor(data: NodeMaterialBlock, nodeContainer: INodeContainer);
+}
+
+}
+declare module "@babylonjs/node-editor/graphSystem/connectionPointPortData" {
+import { NodeMaterialConnectionPoint } from "@babylonjs/core/Materials/Node/nodeMaterialBlockConnectionPoint";
+import { NodeMaterialConnectionPointCompatibilityStates } from "@babylonjs/core/Materials/Node/nodeMaterialBlockConnectionPoint";
+import { Nullable } from "@babylonjs/core/types";
+import { GraphNode } from "@babylonjs/node-editor/nodeGraphSystem/graphNode";
+import { INodeContainer } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeContainer";
+import { IPortData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/portData";
+import { PortDataDirection } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/portData";
+export class ConnectionPointPortData implements IPortData {
+    private _connectedPort;
+    private _nodeContainer;
+    data: NodeMaterialConnectionPoint;
+    get name(): string;
+    get internalName(): string;
+    get isExposedOnFrame(): boolean;
+    set isExposedOnFrame(value: boolean);
+    get exposedPortPosition(): number;
+    set exposedPortPosition(value: number);
+    get isConnected(): boolean;
+    get connectedPort(): Nullable<IPortData>;
+    set connectedPort(value: Nullable<IPortData>);
+    get direction(): PortDataDirection;
+    get ownerData(): import("@babylonjs/core/Materials/Node/nodeMaterialBlock").NodeMaterialBlock;
+    get needDualDirectionValidation(): boolean;
+    get hasEndpoints(): boolean;
+    get endpoints(): IPortData[];
+    constructor(connectionPoint: NodeMaterialConnectionPoint, nodeContainer: INodeContainer);
+    updateDisplayName(newName: string): void;
+    connectTo(port: IPortData): void;
+    disconnectFrom(port: IPortData): void;
+    checkCompatibilityState(port: IPortData): 0 | NodeMaterialConnectionPointCompatibilityStates.TypeIncompatible | NodeMaterialConnectionPointCompatibilityStates.TargetIncompatible | NodeMaterialConnectionPointCompatibilityStates.HierarchyIssue;
+    getCompatibilityIssueMessage(issue: number, targetNode: GraphNode, targetPort: IPortData): "" | "Cannot connect two different connection types" | "Source block can only work in fragment shader whereas destination block is currently aimed for the vertex shader" | "Source block cannot be connected with one of its ancestors";
+}
+
+}
+declare module "@babylonjs/node-editor/graphSystem/display/clampDisplayManager" {
+import { IDisplayManager } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/displayManager";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
 export class ClampDisplayManager implements IDisplayManager {
     getHeaderClass(): string;
     shouldDisplayPortLabels(): boolean;
-    getHeaderText(block: NodeMaterialBlock): string;
+    getHeaderText(nodeData: INodeData): string;
     getBackgroundColor(): string;
-    updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    updatePreviewContent(nodeData: INodeData, 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";
+declare module "@babylonjs/node-editor/graphSystem/display/conditionalDisplayManager" {
+import { IDisplayManager } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/displayManager";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
 export class ConditionalDisplayManager implements IDisplayManager {
     getHeaderClass(): string;
     shouldDisplayPortLabels(): boolean;
-    getHeaderText(block: NodeMaterialBlock): string;
+    getHeaderText(nodeData: INodeData): string;
     getBackgroundColor(): string;
     updatePreviewContent(): void;
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/display/discardDisplayManager" {
-import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
-import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
+declare module "@babylonjs/node-editor/graphSystem/display/discardDisplayManager" {
+import { IDisplayManager } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/displayManager";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
 export class DiscardDisplayManager implements IDisplayManager {
     getHeaderClass(): string;
     shouldDisplayPortLabels(): boolean;
-    getHeaderText(block: NodeMaterialBlock): string;
+    getHeaderText(nodeData: INodeData): string;
     getBackgroundColor(): string;
-    updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
-}
-
-}
-declare module "@babylonjs/node-editor/diagram/display/displayManager" {
-import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
-export interface IDisplayManager {
-    getHeaderClass(block: NodeMaterialBlock): string;
-    shouldDisplayPortLabels(block: NodeMaterialBlock): boolean;
-    updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
-    getBackgroundColor(block: NodeMaterialBlock): string;
-    getHeaderText(block: NodeMaterialBlock): string;
+    updatePreviewContent(nodeData: INodeData, 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";
+declare module "@babylonjs/node-editor/graphSystem/display/elbowDisplayManager" {
+import { IDisplayManager } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/displayManager";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
 export class ElbowDisplayManager implements IDisplayManager {
     getHeaderClass(): string;
     shouldDisplayPortLabels(): boolean;
-    getHeaderText(block: NodeMaterialBlock): string;
-    getBackgroundColor(block: NodeMaterialBlock): string;
-    updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    getHeaderText(nodeData: INodeData): string;
+    getBackgroundColor(nodeData: INodeData): string;
+    updatePreviewContent(nodeData: INodeData, contentArea: HTMLDivElement): void;
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/display/gradientDisplayManager" {
-import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
-import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
+declare module "@babylonjs/node-editor/graphSystem/display/gradientDisplayManager" {
+import { IDisplayManager } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/displayManager";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
 export class GradientDisplayManager implements IDisplayManager {
     getHeaderClass(): string;
     shouldDisplayPortLabels(): boolean;
-    getHeaderText(block: NodeMaterialBlock): string;
-    getBackgroundColor(block: NodeMaterialBlock): string;
-    updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    getHeaderText(nodeData: INodeData): string;
+    getBackgroundColor(nodeData: INodeData): string;
+    updatePreviewContent(nodeData: INodeData, 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";
+declare module "@babylonjs/node-editor/graphSystem/display/imageSourceDisplayManager" {
+import { IDisplayManager } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/displayManager";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
 export class ImageSourceDisplayManager implements IDisplayManager {
     private _previewCanvas;
     private _previewImage;
     getHeaderClass(): string;
     shouldDisplayPortLabels(): boolean;
-    getHeaderText(block: NodeMaterialBlock): string;
+    getHeaderText(nodeData: INodeData): string;
     getBackgroundColor(): string;
-    updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    updatePreviewContent(nodeData: INodeData, contentArea: HTMLDivElement): void;
 }
 
 }
-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";
+declare module "@babylonjs/node-editor/graphSystem/display/inputDisplayManager" {
 import { NodeMaterialBlockConnectionPointTypes } from "@babylonjs/core/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes";
+import { IDisplayManager } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/displayManager";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
 export class InputDisplayManager implements IDisplayManager {
-    getHeaderClass(block: NodeMaterialBlock): "" | "constant" | "inspector";
+    getHeaderClass(nodeData: INodeData): "" | "constant" | "inspector";
     shouldDisplayPortLabels(): boolean;
-    getHeaderText(block: NodeMaterialBlock): string;
+    getHeaderText(nodeData: INodeData): string;
     static GetBaseType(type: NodeMaterialBlockConnectionPointTypes): string;
-    getBackgroundColor(block: NodeMaterialBlock): string;
-    updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    getBackgroundColor(nodeData: INodeData): string;
+    updatePreviewContent(nodeData: INodeData, contentArea: HTMLDivElement): void;
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/display/outputDisplayManager" {
-import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
-import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
+declare module "@babylonjs/node-editor/graphSystem/display/outputDisplayManager" {
+import { IDisplayManager } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/displayManager";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
 export class OutputDisplayManager implements IDisplayManager {
     getHeaderClass(): string;
     shouldDisplayPortLabels(): boolean;
-    getHeaderText(block: NodeMaterialBlock): string;
+    getHeaderText(nodeData: INodeData): string;
     getBackgroundColor(): string;
-    updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    updatePreviewContent(nodeData: INodeData, contentArea: HTMLDivElement): void;
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/display/pbrDisplayManager" {
-import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
-import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
+declare module "@babylonjs/node-editor/graphSystem/display/pbrDisplayManager" {
+import { IDisplayManager } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/displayManager";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
 export class PBRDisplayManager implements IDisplayManager {
     getHeaderClass(): string;
     shouldDisplayPortLabels(): boolean;
-    getHeaderText(block: NodeMaterialBlock): string;
+    getHeaderText(nodeData: INodeData): string;
     getBackgroundColor(): string;
-    updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    updatePreviewContent(nodeData: INodeData, contentArea: HTMLDivElement): void;
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/display/remapDisplayManager" {
-import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
-import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
+declare module "@babylonjs/node-editor/graphSystem/display/remapDisplayManager" {
+import { IDisplayManager } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/displayManager";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
 export class RemapDisplayManager implements IDisplayManager {
     getHeaderClass(): string;
     shouldDisplayPortLabels(): boolean;
-    getHeaderText(block: NodeMaterialBlock): string;
+    getHeaderText(nodeData: INodeData): string;
     getBackgroundColor(): string;
     private _extractInputValue;
-    updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    updatePreviewContent(nodeData: INodeData, contentArea: HTMLDivElement): void;
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/display/textureDisplayManager" {
-import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
-import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
+declare module "@babylonjs/node-editor/graphSystem/display/textureDisplayManager" {
+import { IDisplayManager } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/displayManager";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
 export class TextureDisplayManager implements IDisplayManager {
     private _previewCanvas;
     private _previewImage;
     getHeaderClass(): string;
     shouldDisplayPortLabels(): boolean;
-    getHeaderText(block: NodeMaterialBlock): string;
-    getBackgroundColor(block: NodeMaterialBlock): string;
-    updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    getHeaderText(nodeData: INodeData): string;
+    getBackgroundColor(nodeData: INodeData): string;
+    updatePreviewContent(nodeData: INodeData, contentArea: HTMLDivElement): void;
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/display/trigonometryDisplayManager" {
-import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
-import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
+declare module "@babylonjs/node-editor/graphSystem/display/trigonometryDisplayManager" {
+import { IDisplayManager } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/displayManager";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
 export class TrigonometryDisplayManager implements IDisplayManager {
     getHeaderClass(): string;
     shouldDisplayPortLabels(): boolean;
-    getHeaderText(block: NodeMaterialBlock): string;
+    getHeaderText(nodeData: INodeData): string;
     getBackgroundColor(): string;
-    updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    updatePreviewContent(nodeData: INodeData, contentArea: HTMLDivElement): void;
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/displayLedger" {
-export class DisplayLedger {
-    static RegisteredControls: {
-        [key: string]: any;
-    };
+declare module "@babylonjs/node-editor/graphSystem/properties/colorMergerPropertyComponent" {
+import * as React from "react";
+import { IPropertyComponentProps } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/propertyComponentProps";
+export class ColorMergerPropertyTabComponent extends React.Component<IPropertyComponentProps> {
+    constructor(props: IPropertyComponentProps);
+    render(): JSX.Element;
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/frameNodePort" {
-import { NodePort } from "@babylonjs/node-editor/diagram/nodePort";
-import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
-import { FramePortPosition } from "@babylonjs/node-editor/diagram/graphFrame";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { Nullable } from "@babylonjs/core/types";
-import { NodeMaterialConnectionPoint } from "@babylonjs/core/Materials/Node/nodeMaterialBlockConnectionPoint";
-export class FrameNodePort extends NodePort {
-    connectionPoint: NodeMaterialConnectionPoint;
-    node: GraphNode;
-    private _parentFrameId;
-    private _isInput;
-    private _framePortPosition;
-    private _framePortId;
-    private _onFramePortPositionChangedObservable;
-    get parentFrameId(): number;
-    get onFramePortPositionChangedObservable(): Observable<FrameNodePort>;
-    get isInput(): boolean;
-    get framePortId(): number;
-    get framePortPosition(): FramePortPosition;
-    set framePortPosition(position: FramePortPosition);
-    constructor(portContainer: HTMLElement, connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number);
-    static CreateFrameNodePortElement(connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number): FrameNodePort;
+declare module "@babylonjs/node-editor/graphSystem/properties/conditionalNodePropertyComponent" {
+import * as React from "react";
+import { IPropertyComponentProps } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/propertyComponentProps";
+export class ConditionalPropertyTabComponent extends React.Component<IPropertyComponentProps> {
+    constructor(props: IPropertyComponentProps);
+    render(): JSX.Element;
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/graphCanvas" {
+declare module "@babylonjs/node-editor/graphSystem/properties/frameNodePortPropertyComponent" {
 import * as React from "react";
 import { GlobalState } from "@babylonjs/node-editor/globalState";
-import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
-import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
-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 { GraphFrame } from "@babylonjs/node-editor/diagram/graphFrame";
-import { IEditorData, IFrameData } from "@babylonjs/node-editor/nodeLocationInfo";
-import { FrameNodePort } from "@babylonjs/node-editor/diagram/frameNodePort";
-import "@babylonjs/node-editor/diagram/graphCanvas.scss";
-export interface IGraphCanvasComponentProps {
+import { StateManager } from "@babylonjs/node-editor/nodeGraphSystem/stateManager";
+import { GraphFrame } from "@babylonjs/node-editor/nodeGraphSystem/graphFrame";
+import { FrameNodePort } from "@babylonjs/node-editor/nodeGraphSystem/frameNodePort";
+export interface IFrameNodePortPropertyTabComponentProps {
+    stateManager: StateManager;
     globalState: GlobalState;
-    onEmitNewBlock: (block: NodeMaterialBlock) => GraphNode;
-}
-export type FramePortData = {
+    frameNodePort: FrameNodePort;
     frame: GraphFrame;
-    port: FrameNodePort;
-};
-export const isFramePortData: (variableToCheck: any) => variableToCheck is FramePortData;
-export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentProps> {
-    private readonly _minZoom;
-    private readonly _maxZoom;
-    private _hostCanvas;
-    private _graphCanvas;
-    private _selectionContainer;
-    private _frameContainer;
-    private _svgCanvas;
-    private _rootContainer;
-    private _nodes;
-    private _links;
-    private _mouseStartPointX;
-    private _mouseStartPointY;
-    private _dropPointX;
-    private _dropPointY;
-    private _selectionStartX;
-    private _selectionStartY;
-    private _candidateLinkedHasMoved;
-    private _x;
-    private _y;
-    private _zoom;
-    private _selectedNodes;
-    private _selectedLink;
-    private _selectedPort;
-    private _candidateLink;
-    private _candidatePort;
-    private _gridSize;
-    private _selectionBox;
-    private _selectedFrames;
-    private _frameCandidate;
-    private _frames;
-    private _altKeyIsPressed;
-    private _multiKeyIsPressed;
-    private _oldY;
-    _frameIsMoving: boolean;
-    _isLoading: boolean;
-    get gridSize(): number;
-    set gridSize(value: number);
-    get globalState(): GlobalState;
-    get nodes(): GraphNode[];
-    get links(): NodeLink[];
-    get frames(): GraphFrame[];
-    get zoom(): number;
-    set zoom(value: number);
-    get x(): number;
-    set x(value: number);
-    get y(): number;
-    set y(value: number);
-    get selectedNodes(): GraphNode[];
-    get selectedLink(): Nullable<NodeLink>;
-    get selectedFrames(): GraphFrame[];
-    get selectedPort(): Nullable<NodePort>;
-    get canvasContainer(): HTMLDivElement;
-    get hostCanvas(): HTMLDivElement;
-    get svgCanvas(): HTMLElement;
-    get selectionContainer(): HTMLDivElement;
-    get frameContainer(): HTMLDivElement;
-    private _selectedFrameAndNodesConflict;
-    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;
-    onKeyUp(): void;
-    findNodeFromBlock(block: NodeMaterialBlock): GraphNode;
-    reset(): void;
-    connectPorts(pointA: NodeMaterialConnectionPoint, pointB: NodeMaterialConnectionPoint): void;
-    removeLink(link: NodeLink): void;
-    appendBlock(block: NodeMaterialBlock): GraphNode;
-    distributeGraph(): void;
-    componentDidMount(): void;
-    onMove(evt: React.PointerEvent): void;
-    onDown(evt: React.PointerEvent<HTMLElement>): void;
-    onUp(evt: React.PointerEvent): void;
-    onWheel(evt: React.WheelEvent): void;
-    zoomToFit(): void;
-    processCandidatePort(): void;
-    connectNodes(nodeA: GraphNode, pointA: NodeMaterialConnectionPoint, nodeB: GraphNode, pointB: NodeMaterialConnectionPoint): void;
-    processEditorData(editorData: IEditorData): void;
-    addFrame(frameData: IFrameData): void;
-    render(): JSX.Element;
-}
-
-}
-declare module "@babylonjs/node-editor/diagram/graphFrame" {
-import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
-import { GraphCanvasComponent } from "@babylonjs/node-editor/diagram/graphCanvas";
-import { Nullable } from "@babylonjs/core/types";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { IFrameData } from "@babylonjs/node-editor/nodeLocationInfo";
-import { Color3 } from "@babylonjs/core/Maths/math.color";
-import { FrameNodePort } from "@babylonjs/node-editor/diagram/frameNodePort";
-export enum FramePortPosition {
-    Top = 0,
-    Middle = 1,
-    Bottom = 2
-}
-export class GraphFrame {
-    private readonly _collapsedWidth;
-    private static _FrameCounter;
-    private static _FramePortCounter;
-    private _name;
-    private _color;
-    private _x;
-    private _y;
-    private _gridAlignedX;
-    private _gridAlignedY;
-    private _width;
-    private _height;
-    element: HTMLDivElement;
-    private _borderElement;
-    private _headerElement;
-    private _headerTextElement;
-    private _headerCollapseElement;
-    private _headerCloseElement;
-    private _commentsElement;
-    private _portContainer;
-    private _outputPortContainer;
-    private _inputPortContainer;
-    private _nodes;
-    private _ownerCanvas;
-    private _mouseStartPointX;
-    private _mouseStartPointY;
-    private _onSelectionChangedObserver;
-    private _onGraphNodeRemovalObserver;
-    private _onExposePortOnFrameObserver;
-    private _onNodeLinkDisposedObservers;
-    private _isCollapsed;
-    private _frameInPorts;
-    private _frameOutPorts;
-    private _controlledPorts;
-    private _exposedInPorts;
-    private _exposedOutPorts;
-    private _id;
-    private _comments;
-    private _frameIsResizing;
-    private _resizingDirection;
-    private _minFrameHeight;
-    private _minFrameWidth;
-    private _mouseXLimit;
-    onExpandStateChanged: Observable<GraphFrame>;
-    private readonly _closeSVG;
-    private readonly _expandSVG;
-    private readonly _collapseSVG;
-    get id(): number;
-    get isCollapsed(): boolean;
-    private _createInputPort;
-    private _markFramePortPositions;
-    private _createFramePorts;
-    private _removePortFromExposedWithNode;
-    private _removePortFromExposedWithLink;
-    private _createInputPorts;
-    private _createOutputPorts;
-    redrawFramePorts(): void;
-    set isCollapsed(value: boolean);
-    get nodes(): GraphNode[];
-    get ports(): FrameNodePort[];
-    get name(): string;
-    set name(value: string);
-    get color(): Color3;
-    set color(value: Color3);
-    get x(): number;
-    set x(value: number);
-    get y(): number;
-    set y(value: number);
-    get width(): number;
-    set width(value: number);
-    get height(): number;
-    set height(value: number);
-    get comments(): string;
-    set comments(comments: string);
-    constructor(candidate: Nullable<HTMLDivElement>, canvas: GraphCanvasComponent, doNotCaptureNodes?: boolean);
-    refresh(): void;
-    addNode(node: GraphNode): void;
-    removeNode(node: GraphNode): void;
-    syncNode(node: GraphNode): void;
-    cleanAccumulation(): void;
-    private _onDown;
-    move(newX: number, newY: number, align?: boolean): void;
-    private _onUp;
-    _moveFrame(offsetX: number, offsetY: number): void;
-    private _onMove;
-    moveFramePortUp(nodePort: FrameNodePort): void;
-    private _movePortUp;
-    moveFramePortDown(nodePort: FrameNodePort): void;
-    private _movePortDown;
-    private _initResizing;
-    private _cleanUpResizing;
-    private _updateMinHeightWithComments;
-    private _isResizingTop;
-    private _isResizingRight;
-    private _isResizingBottom;
-    private _isResizingLeft;
-    private _onRightHandlePointerDown;
-    private _onRightHandlePointerMove;
-    private _moveRightHandle;
-    private _onRightHandlePointerUp;
-    private _onBottomHandlePointerDown;
-    private _onBottomHandlePointerMove;
-    private _moveBottomHandle;
-    private _onBottomHandlePointerUp;
-    private _onLeftHandlePointerDown;
-    private _onLeftHandlePointerMove;
-    private _moveLeftHandle;
-    private _onLeftHandlePointerUp;
-    private _onTopHandlePointerDown;
-    private _onTopHandlePointerMove;
-    private _moveTopHandle;
-    private _onTopHandlePointerUp;
-    private _onTopRightHandlePointerDown;
-    private _onTopRightHandlePointerMove;
-    private _moveTopRightHandle;
-    private _onTopRightHandlePointerUp;
-    private _onBottomRightHandlePointerDown;
-    private _onBottomRightHandlePointerMove;
-    private _moveBottomRightHandle;
-    private _onBottomRightHandlePointerUp;
-    private _onBottomLeftHandlePointerDown;
-    private _onBottomLeftHandlePointerMove;
-    private _moveBottomLeftHandle;
-    private _onBottomLeftHandlePointerUp;
-    private _onTopLeftHandlePointerDown;
-    private _onTopLeftHandlePointerMove;
-    private _moveTopLeftHandle;
-    private _onTopLeftHandlePointerUp;
-    private _expandLeft;
-    private _expandTop;
-    private _expandRight;
-    private _expandBottom;
-    dispose(): void;
-    private _serializePortData;
-    serialize(saveCollapsedState: boolean): IFrameData;
-    export(): void;
-    adjustPorts(): void;
-    static Parse(serializationData: IFrameData, canvas: GraphCanvasComponent, map?: {
-        [key: number]: number;
-    }): GraphFrame;
-}
-
-}
-declare module "@babylonjs/node-editor/diagram/graphNode" {
-/// <reference types="react" />
-import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-import { Nullable } from "@babylonjs/core/types";
-import { NodeMaterialConnectionPoint } from "@babylonjs/core/Materials/Node/nodeMaterialBlockConnectionPoint";
-import { GraphCanvasComponent } from "@babylonjs/node-editor/diagram/graphCanvas";
-import { NodeLink } from "@babylonjs/node-editor/diagram/nodeLink";
-import { NodePort } from "@babylonjs/node-editor/diagram/nodePort";
-import { GraphFrame } from "@babylonjs/node-editor/diagram/graphFrame";
-export class GraphNode {
-    block: NodeMaterialBlock;
-    private _visual;
-    private _headerContainer;
-    private _promotionWarning;
-    private _header;
-    private _connections;
-    private _inputsContainer;
-    private _outputsContainer;
-    private _content;
-    private _comments;
-    private _inputPorts;
-    private _outputPorts;
-    private _links;
-    private _x;
-    private _y;
-    private _gridAlignedX;
-    private _gridAlignedY;
-    private _mouseStartPointX;
-    private _mouseStartPointY;
-    private _globalState;
-    private _onSelectionChangedObserver;
-    private _onSelectionBoxMovedObserver;
-    private _onFrameCreatedObserver;
-    private _onUpdateRequiredObserver;
-    private _ownerCanvas;
-    private _isSelected;
-    private _displayManager;
-    private _isVisible;
-    private _enclosingFrameId;
-    get isVisible(): boolean;
-    set isVisible(value: boolean);
-    private _upateNodePortNames;
-    get outputPorts(): NodePort[];
-    get inputPorts(): NodePort[];
-    get links(): NodeLink[];
-    get gridAlignedX(): number;
-    get gridAlignedY(): number;
-    get x(): number;
-    set x(value: number);
-    get y(): number;
-    set y(value: number);
-    get width(): number;
-    get height(): number;
-    get id(): number;
-    get name(): string;
-    get isSelected(): boolean;
-    get enclosingFrameId(): number;
-    set enclosingFrameId(value: number);
-    set isSelected(value: boolean);
-    setIsSelected(value: boolean, marqueeSelection: boolean): void;
-    constructor(block: NodeMaterialBlock, globalState: GlobalState);
-    isOverlappingFrame(frame: GraphFrame): boolean;
-    getPortForConnectionPoint(point: NodeMaterialConnectionPoint): NodePort | null;
-    getLinksForConnectionPoint(point: NodeMaterialConnectionPoint): NodeLink[];
-    private _refreshFrames;
-    _refreshLinks(): void;
-    refresh(): void;
-    private _onDown;
-    cleanAccumulation(useCeil?: boolean): void;
-    private _onUp;
-    private _onMove;
-    renderProperties(): Nullable<JSX.Element>;
-    appendVisual(root: HTMLDivElement, owner: GraphCanvasComponent): void;
-    dispose(): void;
-}
-
-}
-declare module "@babylonjs/node-editor/diagram/nodeLink" {
-import { GraphCanvasComponent } from "@babylonjs/node-editor/diagram/graphCanvas";
-import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
-import { NodePort } from "@babylonjs/node-editor/diagram/nodePort";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { FrameNodePort } from "@babylonjs/node-editor/diagram/frameNodePort";
-export class NodeLink {
-    private _graphCanvas;
-    private _portA;
-    private _portB?;
-    private _nodeA;
-    private _nodeB?;
-    private _path;
-    private _selectionPath;
-    private _onSelectionChangedObserver;
-    private _isVisible;
-    onDisposedObservable: Observable<NodeLink>;
-    get isVisible(): boolean;
-    set isVisible(value: boolean);
-    get portA(): NodePort | FrameNodePort;
-    get portB(): NodePort | FrameNodePort | undefined;
-    get nodeA(): GraphNode;
-    get nodeB(): GraphNode | undefined;
-    update(endX?: number, endY?: number, straight?: boolean): void;
-    constructor(graphCanvas: GraphCanvasComponent, portA: NodePort, nodeA: GraphNode, portB?: NodePort, nodeB?: GraphNode);
-    onClick(evt: MouseEvent): void;
-    dispose(notify?: boolean): void;
-}
-
-}
-declare module "@babylonjs/node-editor/diagram/nodePort" {
-import { NodeMaterialConnectionPoint } from "@babylonjs/core/Materials/Node/nodeMaterialBlockConnectionPoint";
-import { GlobalState, ISelectionChangedOptions } from "@babylonjs/node-editor/globalState";
-import { Nullable } from "@babylonjs/core/types";
-import { Observer } from "@babylonjs/core/Misc/observable";
-import { Vector2 } from "@babylonjs/core/Maths/math.vector";
-import { IDisplayManager } from "@babylonjs/node-editor/diagram/display/displayManager";
-import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
-import { FrameNodePort } from "@babylonjs/node-editor/diagram/frameNodePort";
-export class NodePort {
-    connectionPoint: NodeMaterialConnectionPoint;
-    node: GraphNode;
-    protected _element: HTMLDivElement;
-    protected _img: HTMLImageElement;
-    protected _globalState: GlobalState;
-    protected _portLabelElement: Element;
-    protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;
-    protected _onSelectionChangedObserver: Nullable<Observer<Nullable<ISelectionChangedOptions>>>;
-    protected _exposedOnFrame: boolean;
-    delegatedPort: Nullable<FrameNodePort>;
-    get element(): HTMLDivElement;
-    get portName(): string;
-    set portName(newName: string);
-    get disabled(): boolean;
-    hasLabel(): boolean;
-    get exposedOnFrame(): boolean;
-    set exposedOnFrame(value: boolean);
-    get exposedPortPosition(): number;
-    set exposedPortPosition(value: number);
-    private _isConnectedToNodeOutsideOfFrame;
-    refresh(): void;
-    constructor(portContainer: HTMLElement, connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState);
-    dispose(): void;
-    static CreatePortElement(connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, globalState: GlobalState): NodePort;
-}
-
-}
-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/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/frameNodePortPropertyComponent" {
-import * as React from "react";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-import { GraphFrame } from "@babylonjs/node-editor/diagram/graphFrame";
-import { FrameNodePort } from "@babylonjs/node-editor/diagram/frameNodePort";
-export interface IFrameNodePortPropertyTabComponentProps {
-    globalState: GlobalState;
-    frameNodePort: FrameNodePort;
-    frame: GraphFrame;
-}
-export class FrameNodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps, {
+}
+export class FrameNodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps, {
     port: FrameNodePort;
 }> {
     private _onFramePortPositionChangedObserver;
@@ -1047,10 +790,10 @@ export class FrameNodePortPropertyTabComponent extends React.Component<IFrameNod
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/properties/framePropertyComponent" {
+declare module "@babylonjs/node-editor/graphSystem/properties/framePropertyComponent" {
 import * as React from "react";
-import { GraphFrame } from "@babylonjs/node-editor/diagram/graphFrame";
 import { GlobalState } from "@babylonjs/node-editor/globalState";
+import { GraphFrame } from "@babylonjs/node-editor/nodeGraphSystem/graphFrame";
 export interface IFramePropertyTabComponentProps {
     globalState: GlobalState;
     frame: GraphFrame;
@@ -1064,10 +807,10 @@ export class FramePropertyTabComponent extends React.Component<IFramePropertyTab
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/properties/genericNodePropertyComponent" {
+declare module "@babylonjs/node-editor/graphSystem/properties/genericNodePropertyComponent" {
 import * as React from "react";
-import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
 import { Scene } from "@babylonjs/core/scene";
+import { IPropertyComponentProps } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/propertyComponentProps";
 export class GenericPropertyComponent extends React.Component<IPropertyComponentProps> {
     constructor(props: IPropertyComponentProps);
     render(): JSX.Element;
@@ -1088,10 +831,10 @@ export class GenericPropertyTabComponent extends React.Component<IPropertyCompon
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/properties/gradientNodePropertyComponent" {
+declare module "@babylonjs/node-editor/graphSystem/properties/gradientNodePropertyComponent" {
 import * as React from "react";
 import { GradientBlockColorStep } from "@babylonjs/core/Materials/Node/Blocks/gradientBlock";
-import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
+import { IPropertyComponentProps } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/propertyComponentProps";
 export class GradientPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     private _onValueChangedObserver;
     constructor(props: IPropertyComponentProps);
@@ -1106,12 +849,12 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/properties/gradientStepComponent" {
+declare module "@babylonjs/node-editor/graphSystem/properties/gradientStepComponent" {
 import * as React from "react";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
 import { GradientBlockColorStep } from "@babylonjs/core/Materials/Node/Blocks/gradientBlock";
+import { StateManager } from "@babylonjs/node-editor/nodeGraphSystem/stateManager";
 interface IGradientStepComponentProps {
-    globalState: GlobalState;
+    stateManager: StateManager;
     step: GradientBlockColorStep;
     lineIndex: number;
     onDelete: () => void;
@@ -1131,10 +874,10 @@ export class GradientStepComponent extends React.Component<IGradientStepComponen
 export {};
 
 }
-declare module "@babylonjs/node-editor/diagram/properties/imageSourcePropertyTabComponent" {
+declare module "@babylonjs/node-editor/graphSystem/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";
+import { IPropertyComponentProps } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/propertyComponentProps";
 export class ImageSourcePropertyTabComponent extends React.Component<IPropertyComponentProps, {
     isEmbedded: boolean;
 }> {
@@ -1158,10 +901,10 @@ export class ImageSourcePropertyTabComponent extends React.Component<IPropertyCo
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/properties/inputNodePropertyComponent" {
+declare module "@babylonjs/node-editor/graphSystem/properties/inputNodePropertyComponent" {
 import * as React from "react";
 import { GlobalState } from "@babylonjs/node-editor/globalState";
-import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
+import { IPropertyComponentProps } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/propertyComponentProps";
 export class InputPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     private _onValueChangedObserver;
     constructor(props: IPropertyComponentProps);
@@ -1173,28 +916,28 @@ export class InputPropertyTabComponent extends React.Component<IPropertyComponen
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/properties/lightInformationPropertyTabComponent" {
+declare module "@babylonjs/node-editor/graphSystem/properties/lightInformationPropertyTabComponent" {
 import * as React from "react";
-import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
+import { IPropertyComponentProps } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/propertyComponentProps";
 export class LightInformationPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     render(): JSX.Element;
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/properties/lightPropertyTabComponent" {
+declare module "@babylonjs/node-editor/graphSystem/properties/lightPropertyTabComponent" {
 import * as React from "react";
-import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
+import { IPropertyComponentProps } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/propertyComponentProps";
 export class LightPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     render(): JSX.Element;
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/properties/nodePortPropertyComponent" {
+declare module "@babylonjs/node-editor/graphSystem/properties/nodePortPropertyComponent" {
 import * as React from "react";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-import { NodePort } from "@babylonjs/node-editor/diagram/nodePort";
+import { StateManager } from "@babylonjs/node-editor/nodeGraphSystem/stateManager";
+import { NodePort } from "@babylonjs/node-editor/nodeGraphSystem/nodePort";
 export interface IFrameNodePortPropertyTabComponentProps {
-    globalState: GlobalState;
+    stateManager: StateManager;
     nodePort: NodePort;
 }
 export class NodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps> {
@@ -1206,24 +949,15 @@ export class NodePortPropertyTabComponent extends React.Component<IFrameNodePort
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/properties/propertyComponentProps" {
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
-export interface IPropertyComponentProps {
-    globalState: GlobalState;
-    block: NodeMaterialBlock;
-}
-
-}
-declare module "@babylonjs/node-editor/diagram/properties/texturePropertyTabComponent" {
+declare module "@babylonjs/node-editor/graphSystem/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 { IPropertyComponentProps } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/propertyComponentProps";
 type ReflectionTexture = ReflectionTextureBlock | ReflectionBlock | RefractionBlock;
 type AnyTexture = TextureBlock | ReflectionTexture | CurrentScreenBlock | ParticleTextureBlock;
 export class TexturePropertyTabComponent extends React.Component<IPropertyComponentProps, {
@@ -1252,207 +986,63 @@ export class TexturePropertyTabComponent extends React.Component<IPropertyCompon
 export {};
 
 }
-declare module "@babylonjs/node-editor/diagram/properties/transformNodePropertyComponent" {
+declare module "@babylonjs/node-editor/graphSystem/properties/transformNodePropertyComponent" {
 import * as React from "react";
-import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
+import { IPropertyComponentProps } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/propertyComponentProps";
 export class TransformPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     constructor(props: IPropertyComponentProps);
     render(): JSX.Element;
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/properties/trigonometryNodePropertyComponent" {
+declare module "@babylonjs/node-editor/graphSystem/properties/trigonometryNodePropertyComponent" {
 import * as React from "react";
-import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
+import { IPropertyComponentProps } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/propertyComponentProps";
 export class TrigonometryPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     constructor(props: IPropertyComponentProps);
     render(): JSX.Element;
 }
 
 }
-declare module "@babylonjs/node-editor/diagram/properties/vectorMergerPropertyComponent" {
+declare module "@babylonjs/node-editor/graphSystem/properties/vectorMergerPropertyComponent" {
 import * as React from "react";
-import { IPropertyComponentProps } from "@babylonjs/node-editor/diagram/properties/propertyComponentProps";
+import { IPropertyComponentProps } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/propertyComponentProps";
 export class VectorMergerPropertyTabComponent 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";
-export class PropertyLedger {
-    static RegisteredControls: {
-        [key: string]: ComponentClass<IPropertyComponentProps>;
-    };
-}
+declare module "@babylonjs/node-editor/graphSystem/registerDefaultInput" {
+import { StateManager } from "@babylonjs/node-editor/nodeGraphSystem/stateManager";
+export const RegisterDefaultInput: (stateManager: StateManager) => void;
 
 }
-declare module "@babylonjs/node-editor/globalState" {
-import { NodeMaterial } from "@babylonjs/core/Materials/Node/nodeMaterial";
-import { Nullable } from "@babylonjs/core/types";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { LogEntry } from "@babylonjs/node-editor/components/log/logComponent";
-import { NodeMaterialBlock } from "@babylonjs/core/Materials/Node/nodeMaterialBlock";
-import { PreviewType } from "@babylonjs/node-editor/components/preview/previewType";
-import { Color4 } from "@babylonjs/core/Maths/math.color";
-import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
-import { Vector2 } from "@babylonjs/core/Maths/math.vector";
-import { NodePort } from "@babylonjs/node-editor/diagram/nodePort";
-import { NodeLink } from "@babylonjs/node-editor/diagram/nodeLink";
-import { GraphFrame } from "@babylonjs/node-editor/diagram/graphFrame";
-import { FrameNodePort } from "@babylonjs/node-editor/diagram/frameNodePort";
-import { FramePortData } from "@babylonjs/node-editor/diagram/graphCanvas";
-import { NodeMaterialModes } from "@babylonjs/core/Materials/Node/Enums/nodeMaterialModes";
-export class ISelectionChangedOptions {
-    selection: Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FramePortData>;
-    forceKeepSelection?: boolean;
-    marqueeSelection?: boolean;
-}
-export class GlobalState {
-    nodeMaterial: NodeMaterial;
-    hostElement: HTMLElement;
-    hostDocument: HTMLDocument;
-    hostWindow: Window;
-    onNewNodeCreatedObservable: Observable<GraphNode>;
-    onSelectionChangedObservable: Observable<Nullable<ISelectionChangedOptions>>;
-    onRebuildRequiredObservable: Observable<boolean>;
-    onBuiltObservable: Observable<void>;
-    onResetRequiredObservable: Observable<void>;
-    onUpdateRequiredObservable: Observable<Nullable<NodeMaterialBlock>>;
-    onZoomToFitRequiredObservable: Observable<void>;
-    onReOrganizedRequiredObservable: Observable<void>;
-    onLogRequiredObservable: Observable<LogEntry>;
-    onErrorMessageDialogRequiredObservable: Observable<string>;
-    onIsLoadingChanged: Observable<boolean>;
-    onPreviewCommandActivated: Observable<boolean>;
-    onLightUpdated: Observable<void>;
-    onPreviewBackgroundChanged: Observable<void>;
-    onBackFaceCullingChanged: Observable<void>;
-    onDepthPrePassChanged: Observable<void>;
-    onAnimationCommandActivated: Observable<void>;
-    onCandidateLinkMoved: Observable<Nullable<Vector2>>;
-    onSelectionBoxMoved: Observable<ClientRect | DOMRect>;
-    onFrameCreatedObservable: Observable<GraphFrame>;
-    onCandidatePortSelectedObservable: Observable<Nullable<NodePort | FrameNodePort>>;
-    onImportFrameObservable: Observable<any>;
-    onGraphNodeRemovalObservable: Observable<GraphNode>;
-    onPopupClosedObservable: Observable<void>;
-    onNewBlockRequiredObservable: Observable<{
-        type: string;
-        targetX: number;
-        targetY: number;
-        needRepositioning?: boolean | undefined;
-    }>;
-    onGetNodeFromBlock: (block: NodeMaterialBlock) => GraphNode;
-    onGridSizeChanged: Observable<void>;
-    onExposePortOnFrameObservable: Observable<GraphNode>;
-    previewType: PreviewType;
-    previewFile: File;
-    particleSystemBlendMode: number;
-    listOfCustomPreviewFiles: File[];
-    rotatePreview: boolean;
-    backgroundColor: Color4;
-    backFaceCulling: boolean;
-    depthPrePass: boolean;
-    blockKeyboardEvents: boolean;
-    hemisphericLight: boolean;
-    directionalLight0: boolean;
-    directionalLight1: boolean;
-    controlCamera: boolean;
-    storeEditorData: (serializationObject: any, frame?: Nullable<GraphFrame>) => void;
-    _mode: NodeMaterialModes;
-    /** Gets the mode */
-    get mode(): NodeMaterialModes;
-    /** Sets the mode */
-    set mode(m: NodeMaterialModes);
-    customSave?: {
-        label: string;
-        action: (data: string) => Promise<void>;
-    };
-    constructor();
-}
+declare module "@babylonjs/node-editor/graphSystem/registerElbowSupport" {
+import { StateManager } from "@babylonjs/node-editor/nodeGraphSystem/stateManager";
+export const RegisterElbowSupport: (stateManager: StateManager) => void;
 
 }
-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 { IEditorData } from "@babylonjs/node-editor/nodeLocationInfo";
-import { GraphNode } from "@babylonjs/node-editor/diagram/graphNode";
-import { IInspectorOptions } from "@babylonjs/core/Debug/debugLayer";
-import "@babylonjs/node-editor/main.scss";
-interface IGraphEditorProps {
-    globalState: GlobalState;
-}
-interface IGraphEditorState {
-    showPreviewPopUp: boolean;
-}
-interface IInternalPreviewAreaOptions extends IInspectorOptions {
-    popup: boolean;
-    original: boolean;
-    explorerWidth?: string;
-    inspectorWidth?: string;
-    embedHostWidth?: string;
+declare module "@babylonjs/node-editor/graphSystem/registerExportData" {
+import { StateManager } from "@babylonjs/node-editor/nodeGraphSystem/stateManager";
+export const RegisterExportData: (stateManager: StateManager) => void;
+
 }
-export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
-    static readonly NodeWidth: number;
-    private _graphCanvasRef;
-    private _diagramContainerRef;
-    private _graphCanvas;
-    private _diagramContainer;
-    private _startX;
-    private _moveInProgress;
-    private _leftWidth;
-    private _rightWidth;
-    private _blocks;
-    private _previewManager;
-    private _copiedNodes;
-    private _copiedFrames;
-    private _mouseLocationX;
-    private _mouseLocationY;
-    private _onWidgetKeyUpPointer;
-    private _previewHost;
-    private _popUpWindow;
-    /**
-     * Creates a node and recursivly creates its parent nodes from it's input
-     * @param block
-     * @param recursion
-     */
-    createNodeFromObject(block: NodeMaterialBlock, recursion?: boolean): GraphNode;
-    addValueNode(type: string): GraphNode;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    constructor(props: IGraphEditorProps);
-    reconnectNewNodes(nodeIndex: number, newNodes: GraphNode[], sourceNodes: GraphNode[], done: boolean[]): void;
-    pasteSelection(copiedNodes: GraphNode[], currentX: number, currentY: number, selectNew?: boolean): GraphNode[] | undefined;
-    zoomToFit(): void;
-    buildMaterial(autoConfigure?: boolean): void;
-    build(): void;
-    loadGraph(): void;
-    showWaitScreen(): void;
-    hideWaitScreen(): void;
-    reOrganize(editorData?: Nullable<IEditorData>, isImportingAFrame?: boolean): void;
-    onPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
-    onPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
-    onWheel(this: any, evt: WheelEvent): void;
-    resizeColumns(evt: React.PointerEvent<HTMLDivElement>, forLeft?: boolean): void;
-    buildColumnLayout(): string;
-    emitNewBlock(blockType: string, targetX: number, targetY: number): void;
-    dropNewBlock(event: React.DragEvent<HTMLDivElement>): void;
-    handlePopUp: () => void;
-    handleClosingPopUp: () => void;
-    initiatePreviewArea: (canvas?: HTMLCanvasElement) => void;
-    createPopUp: () => void;
-    createPopupWindow: (title: string, windowVariableName: string, width?: number, height?: number) => Window | null;
-    createPreviewMeshControlHost: (options: IInternalPreviewAreaOptions, parentControl: Nullable<HTMLElement>) => void;
-    createPreviewHost: (options: IInternalPreviewAreaOptions, parentControl: Nullable<HTMLElement>) => void;
-    fixPopUpStyles: (document: Document) => void;
-    render(): JSX.Element;
+declare module "@babylonjs/node-editor/graphSystem/registerNodePortDesign" {
+import { StateManager } from "@babylonjs/node-editor/nodeGraphSystem/stateManager";
+export const RegisterNodePortDesign: (stateManager: StateManager) => void;
+
 }
-export {};
+declare module "@babylonjs/node-editor/graphSystem/registerToDisplayLedger" {
+export const RegisterToDisplayManagers: () => void;
+
+}
+declare module "@babylonjs/node-editor/graphSystem/registerToPropertyLedger" {
+export const RegisterToPropertyTabManagers: () => void;
+
+}
+declare module "@babylonjs/node-editor/graphSystem/registerToTypeLedger" {
+export const RegisterTypeLedger: () => void;
 
 }
 declare module "@babylonjs/node-editor/index" {
@@ -1490,35 +1080,6 @@ export class NodeEditor {
     static Show(options: INodeEditorOptions): void;
 }
 
-}
-declare module "@babylonjs/node-editor/nodeLocationInfo" {
-export interface INodeLocationInfo {
-    blockId: number;
-    x: number;
-    y: number;
-}
-export interface IFrameData {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    color: number[];
-    name: string;
-    isCollapsed: boolean;
-    blocks: number[];
-    comments: string;
-}
-export interface IEditorData {
-    locations: INodeLocationInfo[];
-    x: number;
-    y: number;
-    zoom: number;
-    frames?: IFrameData[];
-    map?: {
-        [key: number]: number;
-    };
-}
-
 }
 declare module "@babylonjs/node-editor/portal" {
 import * as React from "react";
@@ -1536,7 +1097,7 @@ declare module "@babylonjs/node-editor/serializationTools" {
 import { NodeMaterial } from "@babylonjs/core/Materials/Node/nodeMaterial";
 import { GlobalState } from "@babylonjs/node-editor/globalState";
 import { Nullable } from "@babylonjs/core/types";
-import { GraphFrame } from "@babylonjs/node-editor/diagram/graphFrame";
+import { GraphFrame } from "@babylonjs/node-editor/nodeGraphSystem/graphFrame";
 export class SerializationTools {
     static UpdateLocations(material: NodeMaterial, globalState: GlobalState, frame?: Nullable<GraphFrame>): void;
     static Serialize(material: NodeMaterial, globalState: GlobalState, frame?: Nullable<GraphFrame>): string;
@@ -1544,19 +1105,6 @@ export class SerializationTools {
     static AddFrameToMaterial(serializationObject: any, globalState: GlobalState, currentMaterial: NodeMaterial): void;
 }
 
-}
-declare module "@babylonjs/node-editor/sharedComponents/buttonLineComponent" {
-import * as React from "react";
-export interface IButtonLineComponentProps {
-    label: string;
-    onClick: () => void;
-    isDisabled?: boolean;
-}
-export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
-    constructor(props: IButtonLineComponentProps);
-    render(): JSX.Element;
-}
-
 }
 declare module "@babylonjs/node-editor/sharedComponents/checkBoxLineComponent" {
 import * as React from "react";
@@ -1589,1536 +1137,1954 @@ export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponen
 }
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/color3LineComponent" {
+declare module "@babylonjs/node-editor/sharedComponents/colorPickerComponent" {
+import * as React from "react";
+import { Color4, Color3 } from "@babylonjs/core/Maths/math.color";
+import { GlobalState } from "@babylonjs/node-editor/globalState";
+export interface IColorPickerComponentProps {
+    value: Color4 | Color3;
+    onColorChanged: (newOne: string) => void;
+    globalState: GlobalState;
+}
+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;
+    setPickerState(enabled: boolean): void;
+    render(): JSX.Element;
+}
+export {};
+
+}
+declare module "@babylonjs/node-editor/sharedComponents/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/sharedComponents/draggableLineWithButtonComponent" {
+import * as React from "react";
+export interface IDraggableLineWithButtonComponent {
+    data: string;
+    tooltip: string;
+    iconImage: any;
+    onIconClick: (value: string) => void;
+    iconTitle: string;
+    lenSuffixToRemove?: number;
+}
+export class DraggableLineWithButtonComponent extends React.Component<IDraggableLineWithButtonComponent> {
+    constructor(props: IDraggableLineWithButtonComponent);
+    render(): JSX.Element;
+}
+
+}
+declare module "@babylonjs/node-editor/sharedComponents/fileButtonLineComponent" {
+import * as React from "react";
+interface IFileButtonLineComponentProps {
+    label: string;
+    onClick: (file: File) => void;
+    accept: string;
+    uploadName?: string;
+}
+export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
+    private _uploadRef;
+    constructor(props: IFileButtonLineComponentProps);
+    onChange(evt: any): void;
+    render(): JSX.Element;
+}
+export {};
+
+}
+declare module "@babylonjs/node-editor/sharedComponents/floatLineComponent" {
+import * as React from "react";
+import { Observable } from "@babylonjs/core/Misc/observable";
+import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedComponents/propertyChangedEvent";
+import { GlobalState } from "@babylonjs/node-editor/globalState";
+interface IFloatLineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    onChange?: (newValue: number) => void;
+    isInteger?: boolean;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    additionalClass?: string;
+    step?: string;
+    digits?: number;
+    globalState: GlobalState;
+    min?: number;
+    max?: number;
+    smallUI?: boolean;
+    onEnter?: (newValue: number) => void;
+}
+export class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
+    value: string;
+}> {
+    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;
+}
+export {};
+
+}
+declare module "@babylonjs/node-editor/sharedComponents/lineContainerComponent" {
+import * as React from "react";
+interface ILineContainerComponentProps {
+    title: string;
+    children: any[] | any;
+    closed?: boolean;
+}
+export class LineContainerComponent extends React.Component<ILineContainerComponentProps, {
+    isExpanded: boolean;
+}> {
+    constructor(props: ILineContainerComponentProps);
+    switchExpandedState(): void;
+    renderHeader(): JSX.Element;
+    render(): JSX.Element;
+}
+export {};
+
+}
+declare module "@babylonjs/node-editor/sharedComponents/lineWithFileButtonComponent" {
+import * as React from "react";
+interface ILineWithFileButtonComponentProps {
+    title: string;
+    closed?: boolean;
+    label: string;
+    iconImage: any;
+    onIconClick: (file: File) => void;
+    accept: string;
+    uploadName?: string;
+}
+export class LineWithFileButtonComponent extends React.Component<ILineWithFileButtonComponentProps, {
+    isExpanded: boolean;
+}> {
+    private _uploadRef;
+    constructor(props: ILineWithFileButtonComponentProps);
+    onChange(evt: any): void;
+    switchExpandedState(): void;
+    render(): JSX.Element;
+}
+export {};
+
+}
+declare module "@babylonjs/node-editor/sharedComponents/messageDialog" {
+import * as React from "react";
+import { GlobalState } from "@babylonjs/node-editor/globalState";
+interface IMessageDialogComponentProps {
+    globalState: GlobalState;
+}
+export class MessageDialogComponent extends React.Component<IMessageDialogComponentProps, {
+    message: string;
+    isError: boolean;
+}> {
+    constructor(props: IMessageDialogComponentProps);
+    render(): JSX.Element | null;
+}
+export {};
+
+}
+declare module "@babylonjs/node-editor/sharedComponents/numericInputComponent" {
+import * as React from "react";
+import { GlobalState } from "@babylonjs/node-editor/globalState";
+interface INumericInputComponentProps {
+    label: string;
+    value: number;
+    step?: number;
+    onChange: (value: number) => void;
+    globalState: GlobalState;
+}
+export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
+    value: string;
+}> {
+    static defaultProps: {
+        step: number;
+    };
+    private _localChange;
+    constructor(props: INumericInputComponentProps);
+    shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
+        value: string;
+    }): boolean;
+    updateValue(evt: any): void;
+    render(): JSX.Element;
+}
+export {};
+
+}
+declare module "@babylonjs/node-editor/sharedComponents/popup" {
+export class Popup {
+    static CreatePopup(title: string, windowVariableName: string, width?: number, height?: number): HTMLDivElement | null;
+    static _CopyStyles(sourceDoc: HTMLDocument, targetDoc: HTMLDocument): void;
+}
+
+}
+declare module "@babylonjs/node-editor/sharedComponents/propertyChangedEvent" {
+export class PropertyChangedEvent {
+    object: any;
+    property: string;
+    value: any;
+    initialValue: any;
+}
+
+}
+declare module "@babylonjs/node-editor/sharedComponents/sliderLineComponent" {
 import * as React from "react";
 import { Observable } from "@babylonjs/core/Misc/observable";
-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 {
+interface ISliderLineComponentProps {
     label: string;
-    target: any;
-    propertyName: 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>;
-    onChange?: () => void;
+    decimalCount?: number;
     globalState: GlobalState;
 }
-interface IColor3LineComponentState {
-    isExpanded: boolean;
-}
-export class Color3LineComponent extends React.Component<IColor3LineComponentProps, IColor3LineComponentState> {
-    constructor(props: IColor3LineComponentProps);
-    onChange(newValue: string): void;
-    switchExpandState(): void;
-    updateColor(newValue: Color3 | Color4): void;
-    modifyColor(modifier: (previous: Color3 | Color4) => void): void;
-    getCurrentColor(): Color3 | Color4;
-    copyToClipboard(): void;
+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;
 }
 export {};
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/color4LineComponent" {
+declare module "@babylonjs/node-editor/sharedComponents/textLineComponent" {
 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/sharedComponents/propertyChangedEvent";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-export interface IColor4LineComponentProps {
+interface ITextLineComponentProps {
     label: string;
-    target: any;
-    propertyName: string;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    onChange?: () => void;
-    globalState: GlobalState;
+    value: string;
+    color?: string;
+    underline?: boolean;
+    onLink?: () => void;
 }
-export class Color4LineComponent extends React.Component<IColor4LineComponentProps, {
-    isExpanded: boolean;
-}> {
-    constructor(props: IColor4LineComponentProps);
-    onChange(newValue: string): void;
-    switchExpandState(): void;
-    updateColor(newValue: Color4): void;
-    modifyColor(modifier: (previous: Color4) => void): void;
-    getCurrentColor(): Color4;
-    copyToClipboard(): void;
+export class TextLineComponent extends React.Component<ITextLineComponentProps> {
+    constructor(props: ITextLineComponentProps);
+    onLink(): void;
+    renderContent(): JSX.Element;
     render(): JSX.Element;
 }
+export {};
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/colorPickerComponent" {
+declare module "@babylonjs/node-editor/sharedComponents/textureLineComponent" {
 import * as React from "react";
-import { Color4, Color3 } from "@babylonjs/core/Maths/math.color";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-export interface IColorPickerComponentProps {
-    value: Color4 | Color3;
-    onColorChanged: (newOne: string) => void;
-    globalState: GlobalState;
+import { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture";
+interface ITextureLineComponentProps {
+    texture: BaseTexture;
+    width: number;
+    height: number;
+    globalState?: any;
+    hideChannelSelect?: boolean;
 }
-interface IColorPickerComponentState {
-    pickerEnabled: boolean;
-    color: Color3 | Color4;
-    hex: string;
+export interface ITextureLineComponentState {
+    displayRed: boolean;
+    displayGreen: boolean;
+    displayBlue: boolean;
+    displayAlpha: boolean;
+    face: number;
 }
-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;
+export class TextureLineComponent extends React.Component<ITextureLineComponentProps, ITextureLineComponentState> {
+    private _canvasRef;
+    constructor(props: ITextureLineComponentProps);
+    shouldComponentUpdate(): boolean;
     componentDidMount(): void;
-    setPickerState(enabled: boolean): void;
+    componentDidUpdate(): void;
+    updatePreview(): void;
+    static UpdatePreview(previewCanvas: HTMLCanvasElement, texture: BaseTexture, width: number, options: ITextureLineComponentState, onReady?: () => void, globalState?: any): Promise<void>;
     render(): JSX.Element;
 }
 export {};
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/draggableLineComponent" {
+declare module "@babylonjs/node-editor/colorPicker/colorComponentEntry" {
 import * as React from "react";
-export interface IButtonLineComponentProps {
-    data: string;
-    tooltip: string;
+export interface IColorComponentEntryProps {
+    value: number;
+    label: string;
+    max?: number;
+    min?: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
 }
-export class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
-    constructor(props: IButtonLineComponentProps);
+export class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
+    constructor(props: IColorComponentEntryProps);
+    updateValue(valueString: string): void;
     render(): JSX.Element;
 }
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/draggableLineWithButtonComponent" {
+declare module "@babylonjs/node-editor/colorPicker/colorPicker" {
 import * as React from "react";
-export interface IDraggableLineWithButtonComponent {
-    data: string;
-    tooltip: string;
-    iconImage: any;
-    onIconClick: (value: string) => void;
-    iconTitle: string;
-    lenSuffixToRemove?: number;
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
+import "@babylonjs/node-editor/colorPicker/colorPicker.scss";
+/**
+ * Interface used to specify creation options for color picker
+ */
+export interface IColorPickerProps {
+    color: Color3 | Color4;
+    linearhint?: boolean;
+    debugMode?: boolean;
+    onColorChanged?: (color: Color3 | Color4) => void;
 }
-export class DraggableLineWithButtonComponent extends React.Component<IDraggableLineWithButtonComponent> {
-    constructor(props: IDraggableLineWithButtonComponent);
+/**
+ * Interface used to specify creation options for color picker
+ */
+export interface IColorPickerState {
+    color: Color3;
+    alpha: number;
+}
+/**
+ * Class used to create a color picker
+ */
+export class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
+    private _saturationRef;
+    private _hueRef;
+    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;
+    onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+    onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+    onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
+    private _evaluateSaturation;
+    private _evaluateHue;
+    componentDidUpdate(): void;
+    raiseOnColorChanged(): void;
     render(): JSX.Element;
 }
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/fileButtonLineComponent" {
+declare module "@babylonjs/node-editor/colorPicker/hexColor" {
 import * as React from "react";
-interface IFileButtonLineComponentProps {
-    label: string;
-    onClick: (file: File) => void;
-    accept: string;
-    uploadName?: string;
+export interface IHexColorProps {
+    value: string;
+    expectedLength: number;
+    onChange: (value: string) => void;
 }
-export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
-    private _uploadRef;
-    constructor(props: IFileButtonLineComponentProps);
-    onChange(evt: any): void;
+export class HexColor extends React.Component<IHexColorProps, {
+    hex: string;
+}> {
+    constructor(props: IHexColorProps);
+    shouldComponentUpdate(nextProps: IHexColorProps, nextState: {
+        hex: string;
+    }): boolean;
+    updateHexValue(valueString: string): void;
     render(): JSX.Element;
 }
-export {};
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/floatLineComponent" {
-import * as React from "react";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedComponents/propertyChangedEvent";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-interface IFloatLineComponentProps {
-    label: string;
-    target: any;
-    propertyName: string;
-    onChange?: (newValue: number) => void;
-    isInteger?: boolean;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    additionalClass?: string;
-    step?: string;
-    digits?: number;
-    globalState: GlobalState;
-    min?: number;
-    max?: number;
-    smallUI?: boolean;
-    onEnter?: (newValue: number) => void;
+declare module "@babylonjs/node-editor/components/Button" {
+/// <reference types="react" />
+export type ButtonProps = {
+    disabled?: boolean;
+    active?: boolean;
+    onClick?: () => void;
+    color: "light" | "dark";
+    size: "default" | "small" | "wide";
+    title?: string;
+};
+export const Button: React.FC<ButtonProps>;
+
 }
-export class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
-    value: string;
-}> {
-    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;
+declare module "@babylonjs/node-editor/components/classNames" {
+export function ClassNames(names: any, styleObject: any): string;
+
+}
+declare module "@babylonjs/node-editor/components/Icon" {
+/// <reference types="react" />
+export type IconProps = {
+    color?: "dark" | "light";
+    icon: string;
+};
+export const Icon: React.FC<IconProps>;
+
+}
+declare module "@babylonjs/node-editor/components/Label" {
+import { ReactChild } from "react";
+export type LabelProps = {
+    text: string;
+    children?: ReactChild;
+    color?: "dark" | "light";
+};
+export const Label: React.FC<LabelProps>;
+
 }
-export {};
+declare module "@babylonjs/node-editor/components/Toggle" {
+/// <reference types="react" />
+export type ToggleProps = {
+    toggled: "on" | "mixed" | "off";
+    onToggle?: () => void;
+    padded?: boolean;
+    color?: "dark" | "light";
+};
+export const Toggle: React.FC<ToggleProps>;
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/lineContainerComponent" {
+declare module "@babylonjs/node-editor/lines/booleanLineComponent" {
 import * as React from "react";
-interface ILineContainerComponentProps {
-    title: string;
-    children: any[] | any;
-    closed?: boolean;
+export interface IBooleanLineComponentProps {
+    label: string;
+    value: boolean;
+    icon?: string;
+    iconLabel?: string;
 }
-export class LineContainerComponent extends React.Component<ILineContainerComponentProps, {
-    isExpanded: boolean;
-}> {
-    constructor(props: ILineContainerComponentProps);
-    switchExpandedState(): void;
-    renderHeader(): JSX.Element;
+export class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {
+    constructor(props: IBooleanLineComponentProps);
     render(): JSX.Element;
 }
-export {};
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/lineWithFileButtonComponent" {
+declare module "@babylonjs/node-editor/lines/buttonLineComponent" {
 import * as React from "react";
-interface ILineWithFileButtonComponentProps {
-    title: string;
-    closed?: boolean;
+export interface IButtonLineComponentProps {
     label: string;
-    iconImage: any;
-    onIconClick: (file: File) => void;
-    accept: string;
-    uploadName?: string;
+    onClick: () => void;
+    icon?: string;
+    iconLabel?: string;
+    isDisabled?: boolean;
 }
-export class LineWithFileButtonComponent extends React.Component<ILineWithFileButtonComponentProps, {
-    isExpanded: boolean;
-}> {
-    private _uploadRef;
-    constructor(props: ILineWithFileButtonComponentProps);
-    onChange(evt: any): void;
-    switchExpandedState(): void;
+export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
+    constructor(props: IButtonLineComponentProps);
     render(): JSX.Element;
 }
-export {};
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/matrixLineComponent" {
+declare module "@babylonjs/node-editor/lines/checkBoxLineComponent" {
 import * as React from "react";
-import { Vector3, Vector4 } from "@babylonjs/core/Maths/math.vector";
-import { Matrix } from "@babylonjs/core/Maths/math.vector";
 import { Observable } from "@babylonjs/core/Misc/observable";
-import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedComponents/propertyChangedEvent";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-interface IMatrixLineComponentProps {
-    label: string;
-    target: any;
-    propertyName: string;
-    step?: number;
-    onChange?: (newValue: Matrix) => void;
-    onModeChange?: (mode: number) => void;
+import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
+
+export interface ICheckBoxLineComponentProps {
+    label?: string;
+    target?: any;
+    propertyName?: string;
+    isSelected?: () => boolean;
+    onSelect?: (value: boolean) => void;
+    onValueChanged?: () => void;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    mode?: number;
-    globalState: GlobalState;
+    disabled?: boolean;
+    icon?: string;
+    iconLabel?: string;
+    faIcons?: {
+        enabled: any;
+        disabled: any;
+    };
+    large?: boolean;
 }
-export class MatrixLineComponent extends React.Component<IMatrixLineComponentProps, {
-    value: Matrix;
-    mode: number;
-    angle: number;
+export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
+    isSelected: boolean;
+    isDisabled?: boolean;
+    isConflict: boolean;
 }> {
     private _localChange;
-    constructor(props: IMatrixLineComponentProps);
-    shouldComponentUpdate(nextProps: IMatrixLineComponentProps, nextState: {
-        value: Matrix;
-        mode: number;
-        angle: number;
+    constructor(props: ICheckBoxLineComponentProps);
+    shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
+        isSelected: boolean;
+        isDisabled: boolean;
+        isConflict: boolean;
     }): boolean;
-    raiseOnPropertyChanged(previousValue: Vector3): void;
-    updateMatrix(): void;
-    updateRow(value: Vector4, row: number): void;
-    updateBasedOnMode(value: number): void;
+    onChange(): void;
     render(): JSX.Element;
 }
-export {};
-
-}
-declare module "@babylonjs/node-editor/sharedComponents/messageDialog" {
-import * as React from "react";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-interface IMessageDialogComponentProps {
-    globalState: GlobalState;
-}
-export class MessageDialogComponent extends React.Component<IMessageDialogComponentProps, {
-    message: string;
-    isError: boolean;
-}> {
-    constructor(props: IMessageDialogComponentProps);
-    render(): JSX.Element | null;
-}
-export {};
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/numericInputComponent" {
+declare module "@babylonjs/node-editor/lines/color3LineComponent" {
 import * as React from "react";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-interface INumericInputComponentProps {
+import { Observable } from "@babylonjs/core/Misc/observable";
+import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
+import { LockObject } from "@babylonjs/node-editor/tabs/propertyGrids/lockObject";
+export interface IColor3LineComponentProps {
     label: string;
-    value: number;
-    step?: number;
-    onChange: (value: number) => void;
-    globalState: GlobalState;
+    target: any;
+    propertyName: string;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    isLinear?: boolean;
+    icon?: string;
+    lockObject?: LockObject;
+    iconLabel?: string;
+    onChange?: () => void;
 }
-export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
-    value: string;
-}> {
-    static defaultProps: {
-        step: number;
-    };
-    private _localChange;
-    constructor(props: INumericInputComponentProps);
-    shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
-        value: string;
-    }): boolean;
-    updateValue(evt: any): void;
+export class Color3LineComponent extends React.Component<IColor3LineComponentProps> {
     render(): JSX.Element;
 }
-export {};
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/optionsLineComponent" {
+declare module "@babylonjs/node-editor/lines/color4LineComponent" {
 import * as React from "react";
 import { Observable } from "@babylonjs/core/Misc/observable";
-import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedComponents/propertyChangedEvent";
-import { IInspectableOptions } from "@babylonjs/core/Misc/iInspectable";
-interface IOptionsLineComponentProps {
+import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
+import { LockObject } from "@babylonjs/node-editor/tabs/propertyGrids/lockObject";
+export interface IColor4LineComponentProps {
     label: string;
-    target: any;
-    className?: string;
-    propertyName?: string;
-    options: IInspectableOptions[];
-    noDirectUpdate?: boolean;
-    onSelect?: (value: number | string) => void;
+    target?: any;
+    propertyName: string;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    valuesAreStrings?: boolean;
-    defaultIfNull?: number;
-    getSelection?: (target: any) => number;
+    onChange?: () => void;
+    isLinear?: boolean;
+    icon?: string;
+    iconLabel?: string;
+    lockObject?: LockObject;
 }
-export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
-    value: number | string;
-}> {
-    private _localChange;
-    private _getValue;
-    constructor(props: IOptionsLineComponentProps);
-    setValue(value: string | number): void;
-    shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
-        value: number;
-    }): boolean;
-    raiseOnPropertyChanged(newValue: number | string, previousValue: number | string): void;
-    updateValue(valueString: string): void;
+export class Color4LineComponent extends React.Component<IColor4LineComponentProps> {
     render(): JSX.Element;
 }
-export {};
-
-}
-declare module "@babylonjs/node-editor/sharedComponents/popup" {
-export class Popup {
-    static CreatePopup(title: string, windowVariableName: string, width?: number, height?: number): HTMLDivElement | null;
-    static _CopyStyles(sourceDoc: HTMLDocument, targetDoc: HTMLDocument): void;
-}
-
-}
-declare module "@babylonjs/node-editor/sharedComponents/propertyChangedEvent" {
-export class PropertyChangedEvent {
-    object: any;
-    property: string;
-    value: any;
-    initialValue: any;
-}
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/sliderLineComponent" {
+declare module "@babylonjs/node-editor/lines/colorLineComponent" {
 import * as React from "react";
 import { Observable } from "@babylonjs/core/Misc/observable";
-import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedComponents/propertyChangedEvent";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-interface ISliderLineComponentProps {
+import { Color4 } from "@babylonjs/core/Maths/math.color";
+import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
+import { LockObject } from "@babylonjs/node-editor/tabs/propertyGrids/lockObject";
+export interface IColorLineComponentProps {
     label: string;
     target?: any;
-    propertyName?: string;
-    minimum: number;
-    maximum: number;
-    step: number;
-    directValue?: number;
-    useEuler?: boolean;
-    onChange?: (value: number) => void;
-    onInput?: (value: number) => void;
+    propertyName: string;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    decimalCount?: number;
-    globalState: GlobalState;
+    onChange?: () => void;
+    isLinear?: boolean;
+    icon?: string;
+    iconLabel?: string;
+    lockObject?: LockObject;
+    disableAlpha?: boolean;
 }
-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;
+interface IColorLineComponentState {
+    isExpanded: boolean;
+    color: Color4;
+}
+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;
+    setColorFromString(colorString: string): void;
+    setColor(newColor: Color4): void;
+    switchExpandState(): void;
+    updateStateR(value: number): void;
+    updateStateG(value: number): void;
+    updateStateB(value: number): void;
+    updateStateA(value: number): void;
+    copyToClipboard(): void;
+    private _convertToColor;
+    private _toColor3;
     render(): JSX.Element;
 }
 export {};
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/textInputLineComponent" {
+declare module "@babylonjs/node-editor/lines/colorPickerComponent" {
 import * as React from "react";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { PropertyChangedEvent } from "@babylonjs/node-editor/sharedComponents/propertyChangedEvent";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-interface ITextInputLineComponentProps {
-    label: string;
-    globalState: GlobalState;
-    target?: any;
-    propertyName?: string;
-    value?: string;
-    multilines?: boolean;
-    onChange?: (value: string) => void;
-    validator?: (value: string) => boolean;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+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 TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
-    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;
+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;
+    getHexString(props?: Readonly<IColorPickerComponentProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): string;
+    componentDidUpdate(): void;
+    componentDidMount(): void;
     render(): JSX.Element;
 }
 export {};
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/textLineComponent" {
+declare module "@babylonjs/node-editor/lines/draggableLineComponent" {
 import * as React from "react";
-interface ITextLineComponentProps {
-    label: string;
-    value: string;
-    color?: string;
-    underline?: boolean;
-    onLink?: () => void;
+export interface IButtonLineComponentProps {
+    data: string;
+    tooltip: string;
 }
-export class TextLineComponent extends React.Component<ITextLineComponentProps> {
-    constructor(props: ITextLineComponentProps);
-    onLink(): void;
-    renderContent(): JSX.Element;
+export class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
+    constructor(props: IButtonLineComponentProps);
     render(): JSX.Element;
 }
-export {};
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/textureLineComponent" {
+declare module "@babylonjs/node-editor/lines/fileButtonLineComponent" {
 import * as React from "react";
-import { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture";
-interface ITextureLineComponentProps {
-    texture: BaseTexture;
-    width: number;
-    height: number;
-    globalState?: any;
-    hideChannelSelect?: boolean;
-}
-export interface ITextureLineComponentState {
-    displayRed: boolean;
-    displayGreen: boolean;
-    displayBlue: boolean;
-    displayAlpha: boolean;
-    face: number;
+interface IFileButtonLineComponentProps {
+    label: string;
+    onClick: (file: File) => void;
+    accept: string;
+    icon?: string;
+    iconLabel?: string;
 }
-export class TextureLineComponent extends React.Component<ITextureLineComponentProps, ITextureLineComponentState> {
-    private _canvasRef;
-    constructor(props: ITextureLineComponentProps);
-    shouldComponentUpdate(): boolean;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    updatePreview(): void;
-    static UpdatePreview(previewCanvas: HTMLCanvasElement, texture: BaseTexture, width: number, options: ITextureLineComponentState, onReady?: () => void, globalState?: any): Promise<void>;
+export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
+    private static _IDGenerator;
+    private _id;
+    private _uploadInputRef;
+    constructor(props: IFileButtonLineComponentProps);
+    onChange(evt: any): void;
     render(): JSX.Element;
 }
 export {};
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/vector2LineComponent" {
+declare module "@babylonjs/node-editor/lines/fileMultipleButtonLineComponent" {
 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/sharedComponents/propertyChangedEvent";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-interface IVector2LineComponentProps {
+interface IFileMultipleButtonLineComponentProps {
     label: string;
-    target: any;
-    propertyName: string;
-    step?: number;
-    onChange?: (newvalue: Vector2) => void;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    globalState: GlobalState;
+    onClick: (event: any) => void;
+    accept: string;
+    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;
+export class FileMultipleButtonLineComponent extends React.Component<IFileMultipleButtonLineComponentProps> {
+    private static _IDGenerator;
+    private _id;
+    private _uploadInputRef;
+    constructor(props: IFileMultipleButtonLineComponentProps);
+    onChange(evt: any): void;
     render(): JSX.Element;
 }
 export {};
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/vector3LineComponent" {
+declare module "@babylonjs/node-editor/lines/floatLineComponent" {
 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/sharedComponents/propertyChangedEvent";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-interface IVector3LineComponentProps {
+import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
+import { LockObject } from "@babylonjs/node-editor/tabs/propertyGrids/lockObject";
+interface IFloatLineComponentProps {
     label: string;
     target: any;
     propertyName: string;
-    step?: number;
-    onChange?: (newvalue: Vector3) => void;
+    lockObject?: LockObject;
+    onChange?: (newValue: number) => void;
+    isInteger?: boolean;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    globalState: GlobalState;
+    additionalClass?: string;
+    step?: string;
+    digits?: number;
+    useEuler?: boolean;
+    min?: number;
+    max?: number;
+    smallUI?: boolean;
+    onEnter?: (newValue: number) => void;
+    icon?: string;
+    iconLabel?: string;
+    defaultValue?: number;
+    arrows?: boolean;
+    unit?: React.ReactNode;
+    onDragStart?: (newValue: number) => void;
+    onDragStop?: (newValue: number) => void;
 }
-export class Vector3LineComponent extends React.Component<IVector3LineComponentProps, {
-    isExpanded: boolean;
-    value: Vector3;
+export class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
+    value: string;
+    dragging: boolean;
 }> {
-    static defaultProps: {
-        step: number;
-    };
     private _localChange;
-    constructor(props: IVector3LineComponentProps);
-    shouldComponentUpdate(nextProps: IVector3LineComponentProps, nextState: {
-        isExpanded: boolean;
-        value: Vector3;
+    private _store;
+    constructor(props: IFloatLineComponentProps);
+    componentWillUnmount(): void;
+    getValueString(value: any): string;
+    shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: {
+        value: string;
+        dragging: boolean;
     }): boolean;
-    switchExpandState(): void;
-    raiseOnPropertyChanged(previousValue: Vector3): void;
-    updateVector3(): void;
-    updateStateX(value: number): void;
-    updateStateY(value: number): void;
-    updateStateZ(value: number): void;
+    raiseOnPropertyChanged(newValue: number, previousValue: number): void;
+    updateValue(valueString: string): void;
+    lock(): void;
+    unlock(): void;
+    incrementValue(amount: number): void;
+    onKeyDown(event: React.KeyboardEvent): void;
     render(): JSX.Element;
 }
 export {};
 
 }
-declare module "@babylonjs/node-editor/sharedComponents/vector4LineComponent" {
+declare module "@babylonjs/node-editor/lines/hexLineComponent" {
 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/sharedComponents/propertyChangedEvent";
-import { GlobalState } from "@babylonjs/node-editor/globalState";
-interface IVector4LineComponentProps {
+import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
+import { LockObject } from "@babylonjs/node-editor/tabs/propertyGrids/lockObject";
+interface IHexLineComponentProps {
     label: string;
-    target?: any;
-    propertyName?: string;
-    value?: Vector4;
-    step?: number;
-    onChange?: (newvalue: Vector4) => void;
+    target: any;
+    propertyName: string;
+    lockObject?: LockObject;
+    onChange?: (newValue: number) => void;
+    isInteger?: boolean;
+    replaySourceReplacement?: string;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    globalState: GlobalState;
+    additionalClass?: string;
+    step?: string;
+    digits?: number;
+    useEuler?: boolean;
+    min?: number;
+    icon?: string;
+    iconLabel?: string;
 }
-export class Vector4LineComponent extends React.Component<IVector4LineComponentProps, {
-    isExpanded: boolean;
-    value: Vector4;
+export class HexLineComponent extends React.Component<IHexLineComponentProps, {
+    value: string;
 }> {
-    static defaultProps: {
-        step: number;
-    };
     private _localChange;
-    constructor(props: IVector4LineComponentProps);
-    shouldComponentUpdate(nextProps: IVector4LineComponentProps, nextState: {
-        isExpanded: boolean;
-        value: Vector4;
+    private _store;
+    private _propertyChange;
+    constructor(props: IHexLineComponentProps);
+    componentWillUnmount(): void;
+    shouldComponentUpdate(nextProps: IHexLineComponentProps, nextState: {
+        value: string;
     }): 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;
+    raiseOnPropertyChanged(newValue: number, previousValue: number): void;
+    convertToHexString(valueString: string): string;
+    updateValue(valueString: string, raisePropertyChanged: boolean): void;
+    lock(): void;
+    unlock(): void;
     render(): JSX.Element;
 }
 export {};
 
 }
-declare module "@babylonjs/node-editor/colorPicker/colorComponentEntry" {
+declare module "@babylonjs/node-editor/lines/iconButtonLineComponent" {
 import * as React from "react";
-export interface IColorComponentEntryProps {
-    value: number;
-    label: string;
-    max?: number;
-    min?: number;
-    onChange: (value: number) => void;
-    disabled?: boolean;
+export interface IIconButtonLineComponentProps {
+    icon: string;
+    onClick: () => void;
+    tooltip: string;
+    active?: boolean;
 }
-export class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
-    constructor(props: IColorComponentEntryProps);
-    updateValue(valueString: string): void;
+export class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {
+    constructor(props: IIconButtonLineComponentProps);
     render(): JSX.Element;
 }
 
 }
-declare module "@babylonjs/node-editor/colorPicker/colorPicker" {
+declare module "@babylonjs/node-editor/lines/iconComponent" {
 import * as React from "react";
-import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
-import "@babylonjs/node-editor/colorPicker/colorPicker.scss";
-/**
- * Interface used to specify creation options for color picker
- */
-export interface IColorPickerProps {
-    color: Color3 | Color4;
-    linearhint?: boolean;
-    debugMode?: boolean;
-    onColorChanged?: (color: Color3 | Color4) => void;
-}
-/**
- * Interface used to specify creation options for color picker
- */
-export interface IColorPickerState {
-    color: Color3;
-    alpha: number;
+interface IIconComponentProps {
+    icon: string;
+    label?: string;
 }
-/**
- * Class used to create a color picker
- */
-export class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
-    private _saturationRef;
-    private _hueRef;
-    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;
-    onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
-    onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
-    onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
-    private _evaluateSaturation;
-    private _evaluateHue;
-    componentDidUpdate(): void;
-    raiseOnColorChanged(): void;
+export class IconComponent extends React.Component<IIconComponentProps> {
     render(): JSX.Element;
 }
+export {};
 
 }
-declare module "@babylonjs/node-editor/colorPicker/hexColor" {
+declare module "@babylonjs/node-editor/lines/indentedTextLineComponent" {
 import * as React from "react";
-export interface IHexColorProps {
-    value: string;
-    expectedLength: number;
-    onChange: (value: string) => void;
+interface IIndentedTextLineComponentProps {
+    value?: string;
+    color?: string;
+    underline?: boolean;
+    onLink?: () => void;
+    url?: string;
+    additionalClass?: string;
 }
-export class HexColor extends React.Component<IHexColorProps, {
-    hex: string;
-}> {
-    constructor(props: IHexColorProps);
-    shouldComponentUpdate(nextProps: IHexColorProps, nextState: {
-        hex: string;
-    }): boolean;
-    updateHexValue(valueString: string): void;
+export class IndentedTextLineComponent extends React.Component<IIndentedTextLineComponentProps> {
+    constructor(props: IIndentedTextLineComponentProps);
+    onLink(): void;
+    renderContent(): JSX.Element;
     render(): JSX.Element;
 }
+export {};
 
 }
-declare module "@babylonjs/node-editor/components/Button" {
-/// <reference types="react" />
-export type ButtonProps = {
-    disabled?: boolean;
-    active?: boolean;
-    onClick?: () => void;
-    color: "light" | "dark";
-    size: "default" | "small" | "wide";
-    title?: string;
-};
-export const Button: React.FC<ButtonProps>;
-
+declare module "@babylonjs/node-editor/lines/inputArrowsComponent" {
+import * as React from "react";
+interface IInputArrowsComponentProps {
+    incrementValue: (amount: number) => void;
+    setDragging: (dragging: boolean) => void;
 }
-declare module "@babylonjs/node-editor/components/classNames" {
-export function ClassNames(names: any, styleObject: any): string;
-
+export class InputArrowsComponent extends React.Component<IInputArrowsComponentProps> {
+    private _arrowsRef;
+    private _drag;
+    private _releaseListener;
+    private _lockChangeListener;
+    render(): JSX.Element;
 }
-declare module "@babylonjs/node-editor/components/Icon" {
-/// <reference types="react" />
-export type IconProps = {
-    color?: "dark" | "light";
-    icon: string;
-};
-export const Icon: React.FC<IconProps>;
+export {};
 
 }
-declare module "@babylonjs/node-editor/components/Label" {
-import { ReactChild } from "react";
-export type LabelProps = {
-    text: string;
-    children?: ReactChild;
-    color?: "dark" | "light";
-};
-export const Label: React.FC<LabelProps>;
-
+declare module "@babylonjs/node-editor/lines/iSelectedLineContainer" {
+export interface ISelectedLineContainer {
+    selectedLineContainerTitles: Array<string>;
+    selectedLineContainerTitlesNoFocus: Array<string>;
 }
-declare module "@babylonjs/node-editor/components/Toggle" {
-/// <reference types="react" />
-export type ToggleProps = {
-    toggled: "on" | "mixed" | "off";
-    onToggle?: () => void;
-    padded?: boolean;
-    color?: "dark" | "light";
-};
-export const Toggle: React.FC<ToggleProps>;
 
 }
-declare module "@babylonjs/node-editor/lines/booleanLineComponent" {
+declare module "@babylonjs/node-editor/lines/lineContainerComponent" {
 import * as React from "react";
-export interface IBooleanLineComponentProps {
-    label: string;
-    value: boolean;
-    icon?: string;
-    iconLabel?: string;
+import { ISelectedLineContainer } from "@babylonjs/node-editor/lines/iSelectedLineContainer";
+interface ILineContainerComponentProps {
+    selection?: ISelectedLineContainer;
+    title: string;
+    children: any[] | any;
+    closed?: boolean;
 }
-export class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {
-    constructor(props: IBooleanLineComponentProps);
+export class LineContainerComponent extends React.Component<ILineContainerComponentProps, {
+    isExpanded: boolean;
+    isHighlighted: boolean;
+}> {
+    constructor(props: ILineContainerComponentProps);
+    switchExpandedState(): void;
+    renderHeader(): JSX.Element;
+    componentDidMount(): void;
     render(): JSX.Element;
 }
+export {};
 
 }
-declare module "@babylonjs/node-editor/lines/buttonLineComponent" {
+declare module "@babylonjs/node-editor/lines/linkButtonComponent" {
 import * as React from "react";
-export interface IButtonLineComponentProps {
+
+interface ILinkButtonComponentProps {
     label: string;
+    buttonLabel: string;
+    url?: string;
     onClick: () => void;
-    icon?: string;
-    iconLabel?: string;
+    icon?: any;
+    onIconClick?: () => void;
 }
-export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
-    constructor(props: IButtonLineComponentProps);
+export class LinkButtonComponent extends React.Component<ILinkButtonComponentProps> {
+    constructor(props: ILinkButtonComponentProps);
+    onLink(): void;
     render(): JSX.Element;
 }
+export {};
 
 }
-declare module "@babylonjs/node-editor/lines/checkBoxLineComponent" {
+declare module "@babylonjs/node-editor/lines/matrixLineComponent" {
 import * as React from "react";
+import { Vector3, Vector4 } from "@babylonjs/core/Maths/math.vector";
+import { Matrix } from "@babylonjs/core/Maths/math.vector";
 import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
-
-export interface ICheckBoxLineComponentProps {
-    label?: string;
-    target?: any;
-    propertyName?: string;
-    isSelected?: () => boolean;
-    onSelect?: (value: boolean) => void;
-    onValueChanged?: () => void;
+interface IMatrixLineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    step?: number;
+    onChange?: (newValue: Matrix) => void;
+    onModeChange?: (mode: number) => void;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    disabled?: boolean;
+    mode?: number;
+}
+export class MatrixLineComponent extends React.Component<IMatrixLineComponentProps, {
+    value: Matrix;
+    mode: number;
+    angle: number;
+}> {
+    private _localChange;
+    constructor(props: IMatrixLineComponentProps);
+    shouldComponentUpdate(nextProps: IMatrixLineComponentProps, nextState: {
+        value: Matrix;
+        mode: number;
+        angle: number;
+    }): boolean;
+    raiseOnPropertyChanged(previousValue: Vector3): void;
+    updateMatrix(): void;
+    updateRow(value: Vector4, row: number): void;
+    updateBasedOnMode(value: number): void;
+    render(): JSX.Element;
+}
+export {};
+
+}
+declare module "@babylonjs/node-editor/lines/messageLineComponent" {
+import * as React from "react";
+
+interface IMessageLineComponentProps {
+    text: string;
+    color?: string;
+    icon?: any;
+}
+export class MessageLineComponent extends React.Component<IMessageLineComponentProps> {
+    constructor(props: IMessageLineComponentProps);
+    render(): JSX.Element;
+}
+export {};
+
+}
+declare module "@babylonjs/node-editor/lines/numericInputComponent" {
+import * as React from "react";
+interface INumericInputComponentProps {
+    label: string;
+    value: number;
+    step?: number;
+    onChange: (value: number) => void;
+    precision?: number;
     icon?: string;
     iconLabel?: string;
-    faIcons?: {
-        enabled: any;
-        disabled: any;
-    };
-    large?: boolean;
 }
-export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
-    isSelected: boolean;
-    isDisabled?: boolean;
-    isConflict: boolean;
+export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
+    value: string;
 }> {
+    static defaultProps: {
+        step: number;
+    };
     private _localChange;
-    constructor(props: ICheckBoxLineComponentProps);
-    shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
-        isSelected: boolean;
-        isDisabled: boolean;
-        isConflict: boolean;
+    constructor(props: INumericInputComponentProps);
+    shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
+        value: string;
     }): boolean;
-    onChange(): void;
+    updateValue(evt: any): void;
+    onBlur(): void;
     render(): JSX.Element;
 }
+export {};
 
 }
-declare module "@babylonjs/node-editor/lines/color3LineComponent" {
+declare module "@babylonjs/node-editor/lines/optionsLineComponent" {
 import * as React from "react";
 import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
-import { LockObject } from "@babylonjs/node-editor/tabs/propertyGrids/lockObject";
-export interface IColor3LineComponentProps {
+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 | string) => void;
+    extractValue?: (target: any) => number | string;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    isLinear?: boolean;
+    allowNullValue?: boolean;
     icon?: string;
-    lockObject?: LockObject;
     iconLabel?: string;
-    onValueChange?: (value: string) => void;
+    className?: string;
+    valuesAreStrings?: boolean;
+    defaultIfNull?: number;
 }
-export class Color3LineComponent extends React.Component<IColor3LineComponentProps> {
+export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
+    value: number | string;
+}> {
+    private _localChange;
+    private _remapValueIn;
+    private _remapValueOut;
+    private _getValue;
+    constructor(props: IOptionsLineComponentProps);
+    shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
+        value: number;
+    }): boolean;
+    raiseOnPropertyChanged(newValue: number, previousValue: number): void;
+    setValue(value: string | number): void;
+    updateValue(valueString: string): void;
     render(): JSX.Element;
 }
 
 }
-declare module "@babylonjs/node-editor/lines/color4LineComponent" {
+declare module "@babylonjs/node-editor/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/lines/radioLineComponent" {
 import * as React from "react";
 import { Observable } from "@babylonjs/core/Misc/observable";
-import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
-import { LockObject } from "@babylonjs/node-editor/tabs/propertyGrids/lockObject";
-export interface IColor4LineComponentProps {
+interface IRadioButtonLineComponentProps {
+    onSelectionChangedObservable: Observable<RadioButtonLineComponent>;
     label: string;
-    target?: any;
-    propertyName: string;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    onChange?: () => void;
-    isLinear?: boolean;
+    isSelected: () => boolean;
+    onSelect: () => void;
     icon?: string;
     iconLabel?: string;
-    lockObject?: LockObject;
 }
-export class Color4LineComponent extends React.Component<IColor4LineComponentProps> {
+export class RadioButtonLineComponent extends React.Component<IRadioButtonLineComponentProps, {
+    isSelected: boolean;
+}> {
+    private _onSelectionChangedObserver;
+    constructor(props: IRadioButtonLineComponentProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onChange(): void;
     render(): JSX.Element;
 }
+export {};
 
 }
-declare module "@babylonjs/node-editor/lines/colorLineComponent" {
+declare module "@babylonjs/node-editor/lines/sliderLineComponent" {
 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/propertyChangedEvent";
 import { LockObject } from "@babylonjs/node-editor/tabs/propertyGrids/lockObject";
-export interface IColorLineComponentProps {
+interface ISliderLineComponentProps {
     label: string;
     target?: any;
-    propertyName: string;
+    propertyName?: string;
+    minimum: number;
+    maximum: number;
+    step: number;
+    directValue?: number;
+    useEuler?: boolean;
+    onChange?: (value: number) => void;
+    onInput?: (value: number) => void;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    onChange?: () => void;
-    isLinear?: boolean;
+    decimalCount?: number;
+    margin?: boolean;
     icon?: string;
     iconLabel?: string;
     lockObject?: LockObject;
-    disableAlpha?: boolean;
-}
-interface IColorLineComponentState {
-    isExpanded: boolean;
-    color: Color4;
+    unit?: React.ReactNode;
 }
-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;
-    setColorFromString(colorString: string): void;
-    setColor(newColor: Color4): void;
-    switchExpandState(): void;
-    updateStateR(value: number): void;
-    updateStateG(value: number): void;
-    updateStateB(value: number): void;
-    updateStateA(value: number): void;
-    copyToClipboard(): void;
-    private _convertToColor;
-    private _toColor3;
+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;
 }
 export {};
 
 }
-declare module "@babylonjs/node-editor/lines/colorPickerComponent" {
-import * as React from "react";
-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;
-    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;
-    getHexString(props?: Readonly<IColorPickerComponentProps> & Readonly<{
-        children?: React.ReactNode;
-    }>): string;
-    componentDidUpdate(): void;
-    componentDidMount(): void;
-    render(): JSX.Element;
-}
-export {};
+declare module "@babylonjs/node-editor/lines/targetsProxy" {
+import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
+import { Observable } from "@babylonjs/core/Misc/observable";
+export const conflictingValuesPlaceholder = "\u2014";
+/**
+ *
+ * @param targets a list of selected targets
+ * @param onPropertyChangedObservable
+ * @param getProperty
+ * @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/lines/draggableLineComponent" {
+declare module "@babylonjs/node-editor/lines/textInputLineComponent" {
 import * as React from "react";
-export interface IButtonLineComponentProps {
-    data: string;
-    tooltip: string;
+import { Observable } from "@babylonjs/core/Misc/observable";
+import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
+import { LockObject } from "@babylonjs/node-editor/tabs/propertyGrids/lockObject";
+export interface ITextInputLineComponentProps {
+    label?: string;
+    lockObject?: LockObject;
+    target?: any;
+    propertyName?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    icon?: string;
+    iconLabel?: string;
+    noUnderline?: boolean;
+    numbersOnly?: boolean;
+    delayInput?: boolean;
+    arrows?: boolean;
+    arrowsIncrement?: (amount: number) => void;
+    step?: number;
+    numeric?: boolean;
+    roundValues?: boolean;
+    min?: number;
+    max?: number;
+    placeholder?: string;
+    unit?: React.ReactNode;
+    validator?: (value: string) => boolean;
+    multilines?: boolean;
 }
-export class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
-    constructor(props: IButtonLineComponentProps);
+export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
+    value: string;
+    dragging: boolean;
+}> {
+    private _localChange;
+    constructor(props: ITextInputLineComponentProps);
+    componentWillUnmount(): void;
+    shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: {
+        value: string;
+        dragging: boolean;
+    }): boolean;
+    raiseOnPropertyChanged(newValue: string, previousValue: string): void;
+    getCurrentNumericValue(value: string): number;
+    updateValue(value: string): void;
+    incrementValue(amount: number): void;
+    onKeyDown(event: React.KeyboardEvent): void;
     render(): JSX.Element;
 }
 
 }
-declare module "@babylonjs/node-editor/lines/fileButtonLineComponent" {
+declare module "@babylonjs/node-editor/lines/textLineComponent" {
 import * as React from "react";
-interface IFileButtonLineComponentProps {
-    label: string;
-    onClick: (file: File) => void;
-    accept: string;
+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 FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
-    private static _IDGenerator;
-    private _id;
-    private _uploadInputRef;
-    constructor(props: IFileButtonLineComponentProps);
-    onChange(evt: any): void;
+export class TextLineComponent extends React.Component<ITextLineComponentProps> {
+    constructor(props: ITextLineComponentProps);
+    onLink(): void;
+    renderContent(): JSX.Element | null;
     render(): JSX.Element;
 }
 export {};
 
 }
-declare module "@babylonjs/node-editor/lines/fileMultipleButtonLineComponent" {
+declare module "@babylonjs/node-editor/lines/unitButton" {
+/// <reference types="react" />
+interface IUnitButtonProps {
+    unit: string;
+    locked?: boolean;
+    onClick?: (unit: string) => void;
+}
+export function UnitButton(props: IUnitButtonProps): JSX.Element;
+export {};
+
+}
+declare module "@babylonjs/node-editor/lines/valueLineComponent" {
 import * as React from "react";
-interface IFileMultipleButtonLineComponentProps {
+interface IValueLineComponentProps {
     label: string;
-    onClick: (event: any) => void;
-    accept: string;
+    value: number;
+    color?: string;
+    fractionDigits?: number;
+    units?: 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;
+export class ValueLineComponent extends React.Component<IValueLineComponentProps> {
+    constructor(props: IValueLineComponentProps);
     render(): JSX.Element;
 }
 export {};
 
 }
-declare module "@babylonjs/node-editor/lines/floatLineComponent" {
+declare module "@babylonjs/node-editor/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/propertyChangedEvent";
-import { LockObject } from "@babylonjs/node-editor/tabs/propertyGrids/lockObject";
-interface IFloatLineComponentProps {
+interface IVector2LineComponentProps {
     label: string;
     target: any;
     propertyName: string;
-    lockObject?: LockObject;
-    onChange?: (newValue: number) => void;
-    isInteger?: boolean;
+    step?: number;
+    onChange?: (newvalue: Vector2) => void;
     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;
-    defaultValue?: number;
-    arrows?: boolean;
-    unit?: React.ReactNode;
-    onDragStart?: (newValue: number) => void;
-    onDragStop?: (newValue: number) => void;
 }
-export class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
-    value: string;
-    dragging: boolean;
+export class Vector2LineComponent extends React.Component<IVector2LineComponentProps, {
+    isExpanded: boolean;
+    value: Vector2;
 }> {
+    static defaultProps: {
+        step: number;
+    };
     private _localChange;
-    private _store;
-    constructor(props: IFloatLineComponentProps);
-    componentWillUnmount(): void;
-    getValueString(value: any): string;
-    shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: {
-        value: string;
-        dragging: boolean;
+    constructor(props: IVector2LineComponentProps);
+    shouldComponentUpdate(nextProps: IVector2LineComponentProps, nextState: {
+        isExpanded: boolean;
+        value: Vector2;
     }): boolean;
-    raiseOnPropertyChanged(newValue: number, previousValue: number): void;
-    updateValue(valueString: string): void;
-    lock(): void;
-    unlock(): void;
-    incrementValue(amount: number): void;
-    onKeyDown(event: React.KeyboardEvent): void;
+    switchExpandState(): void;
+    raiseOnPropertyChanged(previousValue: Vector2): void;
+    updateStateX(value: number): void;
+    updateStateY(value: number): void;
     render(): JSX.Element;
 }
 export {};
 
 }
-declare module "@babylonjs/node-editor/lines/hexLineComponent" {
+declare module "@babylonjs/node-editor/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/propertyChangedEvent";
-import { LockObject } from "@babylonjs/node-editor/tabs/propertyGrids/lockObject";
-interface IHexLineComponentProps {
+interface IVector3LineComponentProps {
     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;
+    step?: number;
+    onChange?: (newvalue: Vector3) => void;
     useEuler?: boolean;
-    min?: number;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    noSlider?: boolean;
     icon?: string;
     iconLabel?: string;
 }
-export class HexLineComponent extends React.Component<IHexLineComponentProps, {
-    value: string;
+export class Vector3LineComponent extends React.Component<IVector3LineComponentProps, {
+    isExpanded: boolean;
+    value: Vector3;
 }> {
+    static defaultProps: {
+        step: number;
+    };
     private _localChange;
-    private _store;
-    private _propertyChange;
-    constructor(props: IHexLineComponentProps);
-    componentWillUnmount(): void;
-    shouldComponentUpdate(nextProps: IHexLineComponentProps, nextState: {
-        value: string;
+    constructor(props: IVector3LineComponentProps);
+    getCurrentValue(): any;
+    shouldComponentUpdate(nextProps: IVector3LineComponentProps, nextState: {
+        isExpanded: boolean;
+        value: Vector3;
     }): boolean;
-    raiseOnPropertyChanged(newValue: number, previousValue: number): void;
-    convertToHexString(valueString: string): string;
-    updateValue(valueString: string, raisePropertyChanged: boolean): void;
-    lock(): void;
-    unlock(): void;
-    render(): JSX.Element;
-}
-export {};
-
-}
-declare module "@babylonjs/node-editor/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/lines/iconComponent" {
-import * as React from "react";
-interface IIconComponentProps {
-    icon: string;
-    label?: string;
-}
-export class IconComponent extends React.Component<IIconComponentProps> {
-    render(): JSX.Element;
-}
-export {};
-
-}
-declare module "@babylonjs/node-editor/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;
-}
-export {};
-
-}
-declare module "@babylonjs/node-editor/lines/inputArrowsComponent" {
-import * as React from "react";
-interface IInputArrowsComponentProps {
-    incrementValue: (amount: number) => void;
-    setDragging: (dragging: boolean) => void;
-}
-export class InputArrowsComponent extends React.Component<IInputArrowsComponentProps> {
-    private _arrowsRef;
-    private _drag;
-    private _releaseListener;
-    private _lockChangeListener;
+    switchExpandState(): void;
+    raiseOnPropertyChanged(previousValue: Vector3): void;
+    updateVector3(): void;
+    updateStateX(value: number): void;
+    updateStateY(value: number): void;
+    updateStateZ(value: number): void;
     render(): JSX.Element;
 }
 export {};
 
 }
-declare module "@babylonjs/node-editor/lines/iSelectedLineContainer" {
-export interface ISelectedLineContainer {
-    selectedLineContainerTitles: Array<string>;
-    selectedLineContainerTitlesNoFocus: Array<string>;
-}
-
-}
-declare module "@babylonjs/node-editor/lines/lineContainerComponent" {
+declare module "@babylonjs/node-editor/lines/vector4LineComponent" {
 import * as React from "react";
-import { ISelectedLineContainer } from "@babylonjs/node-editor/lines/iSelectedLineContainer";
-interface ILineContainerComponentProps {
-    selection?: ISelectedLineContainer;
-    title: string;
-    children: any[] | any;
-    closed?: boolean;
+import { Vector4 } from "@babylonjs/core/Maths/math.vector";
+import { Observable } from "@babylonjs/core/Misc/observable";
+import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
+interface IVector4LineComponentProps {
+    label: string;
+    target?: any;
+    propertyName?: string;
+    step?: number;
+    onChange?: (newvalue: Vector4) => void;
+    useEuler?: boolean;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    icon?: string;
+    iconLabel?: string;
+    value?: Vector4;
 }
-export class LineContainerComponent extends React.Component<ILineContainerComponentProps, {
+export class Vector4LineComponent extends React.Component<IVector4LineComponentProps, {
     isExpanded: boolean;
-    isHighlighted: boolean;
+    value: Vector4;
 }> {
-    constructor(props: ILineContainerComponentProps);
-    switchExpandedState(): void;
-    renderHeader(): JSX.Element;
-    componentDidMount(): void;
+    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;
 }
 export {};
 
 }
-declare module "@babylonjs/node-editor/lines/linkButtonComponent" {
-import * as React from "react";
+declare module "@babylonjs/node-editor/nodeGraphSystem/displayLedger" {
+export class DisplayLedger {
+    static RegisteredControls: {
+        [key: string]: any;
+    };
+}
 
-interface ILinkButtonComponentProps {
-    label: string;
-    buttonLabel: string;
-    url?: string;
-    onClick: () => void;
-    icon?: any;
-    onIconClick?: () => void;
 }
-export class LinkButtonComponent extends React.Component<ILinkButtonComponentProps> {
-    constructor(props: ILinkButtonComponentProps);
-    onLink(): void;
-    render(): JSX.Element;
+declare module "@babylonjs/node-editor/nodeGraphSystem/frameNodePort" {
+import { IDisplayManager } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/displayManager";
+import { Observable } from "@babylonjs/core/Misc/observable";
+import { Nullable } from "@babylonjs/core/types";
+import { IPortData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/portData";
+import { NodePort } from "@babylonjs/node-editor/nodeGraphSystem/nodePort";
+import { GraphNode } from "@babylonjs/node-editor/nodeGraphSystem/graphNode";
+import { FramePortPosition } from "@babylonjs/node-editor/nodeGraphSystem/graphFrame";
+import { StateManager } from "@babylonjs/node-editor/nodeGraphSystem/stateManager";
+export class FrameNodePort extends NodePort {
+    portData: IPortData;
+    node: GraphNode;
+    private _parentFrameId;
+    private _isInput;
+    private _framePortPosition;
+    private _framePortId;
+    private _onFramePortPositionChangedObservable;
+    get parentFrameId(): number;
+    get onFramePortPositionChangedObservable(): Observable<FrameNodePort>;
+    get isInput(): boolean;
+    get framePortId(): number;
+    get framePortPosition(): FramePortPosition;
+    set framePortPosition(position: FramePortPosition);
+    constructor(portContainer: HTMLElement, portData: IPortData, node: GraphNode, stateManager: StateManager, isInput: boolean, framePortId: number, parentFrameId: number);
+    static CreateFrameNodePortElement(portData: IPortData, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, stateManager: StateManager, isInput: boolean, framePortId: number, parentFrameId: number): FrameNodePort;
 }
-export {};
 
 }
-declare module "@babylonjs/node-editor/lines/messageLineComponent" {
+declare module "@babylonjs/node-editor/nodeGraphSystem/graphCanvas" {
 import * as React from "react";
-
-interface IMessageLineComponentProps {
-    text: string;
-    color?: string;
-    icon?: any;
+import { GraphNode } from "@babylonjs/node-editor/nodeGraphSystem/graphNode";
+import { Nullable } from "@babylonjs/core/types";
+import { NodeLink } from "@babylonjs/node-editor/nodeGraphSystem/nodeLink";
+import { NodePort } from "@babylonjs/node-editor/nodeGraphSystem/nodePort";
+import { GraphFrame } from "@babylonjs/node-editor/nodeGraphSystem/graphFrame";
+import { IEditorData, IFrameData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeLocationInfo";
+import { StateManager } from "@babylonjs/node-editor/nodeGraphSystem/stateManager";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
+import { IPortData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/portData";
+import { INodeContainer } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeContainer";
+import "@babylonjs/node-editor/nodeGraphSystem/scss/graphCanvas.scss";
+export interface IGraphCanvasComponentProps {
+    stateManager: StateManager;
+    onEmitNewNode: (nodeData: INodeData) => GraphNode;
 }
-export class MessageLineComponent extends React.Component<IMessageLineComponentProps> {
-    constructor(props: IMessageLineComponentProps);
+export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentProps> implements INodeContainer {
+    private readonly _minZoom;
+    private readonly _maxZoom;
+    private _hostCanvas;
+    private _graphCanvas;
+    private _selectionContainer;
+    private _frameContainer;
+    private _svgCanvas;
+    private _rootContainer;
+    private _nodes;
+    private _links;
+    private _mouseStartPointX;
+    private _mouseStartPointY;
+    private _dropPointX;
+    private _dropPointY;
+    private _selectionStartX;
+    private _selectionStartY;
+    private _candidateLinkedHasMoved;
+    private _x;
+    private _y;
+    private _zoom;
+    private _selectedNodes;
+    private _selectedLink;
+    private _selectedPort;
+    private _candidateLink;
+    private _candidatePort;
+    private _gridSize;
+    private _selectionBox;
+    private _selectedFrames;
+    private _frameCandidate;
+    private _frames;
+    private _nodeDataContentList;
+    private _altKeyIsPressed;
+    private _multiKeyIsPressed;
+    private _oldY;
+    _frameIsMoving: boolean;
+    _isLoading: boolean;
+    get gridSize(): number;
+    set gridSize(value: number);
+    get stateManager(): StateManager;
+    get nodes(): GraphNode[];
+    get links(): NodeLink[];
+    get frames(): GraphFrame[];
+    get zoom(): number;
+    set zoom(value: number);
+    get x(): number;
+    set x(value: number);
+    get y(): number;
+    set y(value: number);
+    get selectedNodes(): GraphNode[];
+    get selectedLink(): Nullable<NodeLink>;
+    get selectedFrames(): GraphFrame[];
+    get selectedPort(): Nullable<NodePort>;
+    get canvasContainer(): HTMLDivElement;
+    get hostCanvas(): HTMLDivElement;
+    get svgCanvas(): HTMLElement;
+    get selectionContainer(): HTMLDivElement;
+    get frameContainer(): HTMLDivElement;
+    private _selectedFrameAndNodesConflict;
+    constructor(props: IGraphCanvasComponentProps);
+    getCachedData(): any[];
+    removeDataFromCache(data: any): void;
+    createNodeFromObject(nodeData: INodeData, onNodeCreated: (data: any) => void, recursion?: boolean): GraphNode;
+    getGridPosition(position: number, useCeil?: boolean): number;
+    getGridPositionCeil(position: number): number;
+    updateTransform(): void;
+    onKeyUp(): void;
+    findNodeFromData(data: any): GraphNode;
+    reset(): void;
+    connectPorts(pointA: IPortData, pointB: IPortData): void;
+    removeLink(link: NodeLink): void;
+    appendNode(nodeData: INodeData): GraphNode;
+    distributeGraph(): void;
+    componentDidMount(): void;
+    onMove(evt: React.PointerEvent): void;
+    onDown(evt: React.PointerEvent<HTMLElement>): void;
+    onUp(evt: React.PointerEvent): void;
+    onWheel(evt: React.WheelEvent): void;
+    zoomToFit(): void;
+    processCandidatePort(): void;
+    connectNodes(nodeA: GraphNode, pointA: IPortData, nodeB: GraphNode, pointB: IPortData): void;
+    processEditorData(editorData: IEditorData): void;
+    reOrganize(editorData?: Nullable<IEditorData>, isImportingAFrame?: boolean): void;
+    addFrame(frameData: IFrameData): void;
     render(): JSX.Element;
 }
-export {};
 
 }
-declare module "@babylonjs/node-editor/lines/numericInputComponent" {
-import * as React from "react";
-interface INumericInputComponentProps {
-    label: string;
-    value: number;
-    step?: number;
-    onChange: (value: number) => void;
-    precision?: number;
-    icon?: string;
-    iconLabel?: string;
+declare module "@babylonjs/node-editor/nodeGraphSystem/graphFrame" {
+import { GraphNode } from "@babylonjs/node-editor/nodeGraphSystem/graphNode";
+import { GraphCanvasComponent } from "@babylonjs/node-editor/nodeGraphSystem/graphCanvas";
+import { Nullable } from "@babylonjs/core/types";
+import { Observable } from "@babylonjs/core/Misc/observable";
+import { Color3 } from "@babylonjs/core/Maths/math.color";
+import { FrameNodePort } from "@babylonjs/node-editor/nodeGraphSystem/frameNodePort";
+import { IFrameData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeLocationInfo";
+export enum FramePortPosition {
+    Top = 0,
+    Middle = 1,
+    Bottom = 2
 }
-export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
-    value: string;
-}> {
-    static defaultProps: {
-        step: number;
-    };
-    private _localChange;
-    constructor(props: INumericInputComponentProps);
-    shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
-        value: string;
-    }): boolean;
-    updateValue(evt: any): void;
-    onBlur(): void;
-    render(): JSX.Element;
+export class GraphFrame {
+    private readonly _collapsedWidth;
+    private static _FrameCounter;
+    private static _FramePortCounter;
+    private _name;
+    private _color;
+    private _x;
+    private _y;
+    private _gridAlignedX;
+    private _gridAlignedY;
+    private _width;
+    private _height;
+    element: HTMLDivElement;
+    private _borderElement;
+    private _headerElement;
+    private _headerTextElement;
+    private _headerCollapseElement;
+    private _headerCloseElement;
+    private _commentsElement;
+    private _portContainer;
+    private _outputPortContainer;
+    private _inputPortContainer;
+    private _nodes;
+    private _ownerCanvas;
+    private _mouseStartPointX;
+    private _mouseStartPointY;
+    private _onSelectionChangedObserver;
+    private _onGraphNodeRemovalObserver;
+    private _onExposePortOnFrameObserver;
+    private _onNodeLinkDisposedObservers;
+    private _isCollapsed;
+    private _frameInPorts;
+    private _frameOutPorts;
+    private _controlledPorts;
+    private _exposedInPorts;
+    private _exposedOutPorts;
+    private _id;
+    private _comments;
+    private _frameIsResizing;
+    private _resizingDirection;
+    private _minFrameHeight;
+    private _minFrameWidth;
+    private _mouseXLimit;
+    onExpandStateChanged: Observable<GraphFrame>;
+    private readonly _closeSVG;
+    private readonly _expandSVG;
+    private readonly _collapseSVG;
+    get id(): number;
+    get isCollapsed(): boolean;
+    private _createInputPort;
+    private _markFramePortPositions;
+    private _createFramePorts;
+    private _removePortFromExposedWithNode;
+    private _removePortFromExposedWithLink;
+    private _createInputPorts;
+    private _createOutputPorts;
+    redrawFramePorts(): void;
+    set isCollapsed(value: boolean);
+    get nodes(): GraphNode[];
+    get ports(): FrameNodePort[];
+    get name(): string;
+    set name(value: string);
+    get color(): Color3;
+    set color(value: Color3);
+    get x(): number;
+    set x(value: number);
+    get y(): number;
+    set y(value: number);
+    get width(): number;
+    set width(value: number);
+    get height(): number;
+    set height(value: number);
+    get comments(): string;
+    set comments(comments: string);
+    constructor(candidate: Nullable<HTMLDivElement>, canvas: GraphCanvasComponent, doNotCaptureNodes?: boolean);
+    refresh(): void;
+    addNode(node: GraphNode): void;
+    removeNode(node: GraphNode): void;
+    syncNode(node: GraphNode): void;
+    cleanAccumulation(): void;
+    private _onDown;
+    move(newX: number, newY: number, align?: boolean): void;
+    private _onUp;
+    _moveFrame(offsetX: number, offsetY: number): void;
+    private _onMove;
+    moveFramePortUp(nodePort: FrameNodePort): void;
+    private _movePortUp;
+    moveFramePortDown(nodePort: FrameNodePort): void;
+    private _movePortDown;
+    private _initResizing;
+    private _cleanUpResizing;
+    private _updateMinHeightWithComments;
+    private _isResizingTop;
+    private _isResizingRight;
+    private _isResizingBottom;
+    private _isResizingLeft;
+    private _onRightHandlePointerDown;
+    private _onRightHandlePointerMove;
+    private _moveRightHandle;
+    private _onRightHandlePointerUp;
+    private _onBottomHandlePointerDown;
+    private _onBottomHandlePointerMove;
+    private _moveBottomHandle;
+    private _onBottomHandlePointerUp;
+    private _onLeftHandlePointerDown;
+    private _onLeftHandlePointerMove;
+    private _moveLeftHandle;
+    private _onLeftHandlePointerUp;
+    private _onTopHandlePointerDown;
+    private _onTopHandlePointerMove;
+    private _moveTopHandle;
+    private _onTopHandlePointerUp;
+    private _onTopRightHandlePointerDown;
+    private _onTopRightHandlePointerMove;
+    private _moveTopRightHandle;
+    private _onTopRightHandlePointerUp;
+    private _onBottomRightHandlePointerDown;
+    private _onBottomRightHandlePointerMove;
+    private _moveBottomRightHandle;
+    private _onBottomRightHandlePointerUp;
+    private _onBottomLeftHandlePointerDown;
+    private _onBottomLeftHandlePointerMove;
+    private _moveBottomLeftHandle;
+    private _onBottomLeftHandlePointerUp;
+    private _onTopLeftHandlePointerDown;
+    private _onTopLeftHandlePointerMove;
+    private _moveTopLeftHandle;
+    private _onTopLeftHandlePointerUp;
+    private _expandLeft;
+    private _expandTop;
+    private _expandRight;
+    private _expandBottom;
+    dispose(): void;
+    private _serializePortData;
+    serialize(saveCollapsedState: boolean): IFrameData;
+    export(): void;
+    adjustPorts(): void;
+    static Parse(serializationData: IFrameData, canvas: GraphCanvasComponent, map?: {
+        [key: number]: number;
+    }): GraphFrame;
 }
-export {};
 
 }
-declare module "@babylonjs/node-editor/lines/optionsLineComponent" {
-import * as React from "react";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { PropertyChangedEvent } from "@babylonjs/node-editor/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/nodeGraphSystem/graphNode" {
+/// <reference types="react" />
+import { Nullable } from "@babylonjs/core/types";
+import { GraphCanvasComponent } from "@babylonjs/node-editor/nodeGraphSystem/graphCanvas";
+import { NodePort } from "@babylonjs/node-editor/nodeGraphSystem/nodePort";
+import { GraphFrame } from "@babylonjs/node-editor/nodeGraphSystem/graphFrame";
+import { NodeLink } from "@babylonjs/node-editor/nodeGraphSystem/nodeLink";
+import { StateManager } from "@babylonjs/node-editor/nodeGraphSystem/stateManager";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
+import { IPortData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/portData";
+export class GraphNode {
+    content: INodeData;
+    private _visual;
+    private _headerContainer;
+    private _warning;
+    private _header;
+    private _connections;
+    private _inputsContainer;
+    private _outputsContainer;
+    private _content;
+    private _comments;
+    private _inputPorts;
+    private _outputPorts;
+    private _links;
+    private _x;
+    private _y;
+    private _gridAlignedX;
+    private _gridAlignedY;
+    private _mouseStartPointX;
+    private _mouseStartPointY;
+    private _stateManager;
+    private _onSelectionChangedObserver;
+    private _onSelectionBoxMovedObserver;
+    private _onFrameCreatedObserver;
+    private _onUpdateRequiredObserver;
+    private _ownerCanvas;
+    private _isSelected;
+    private _displayManager;
+    private _isVisible;
+    private _enclosingFrameId;
+    get isVisible(): boolean;
+    set isVisible(value: boolean);
+    private _upateNodePortNames;
+    get outputPorts(): NodePort[];
+    get inputPorts(): NodePort[];
+    get links(): NodeLink[];
+    get gridAlignedX(): number;
+    get gridAlignedY(): number;
+    get x(): number;
+    set x(value: number);
+    get y(): number;
+    set y(value: number);
+    get width(): number;
+    get height(): number;
+    get id(): number;
+    get name(): string;
+    get isSelected(): boolean;
+    get enclosingFrameId(): number;
+    set enclosingFrameId(value: number);
+    set isSelected(value: boolean);
+    setIsSelected(value: boolean, marqueeSelection: boolean): void;
+    constructor(content: INodeData, stateManager: StateManager);
+    isOverlappingFrame(frame: GraphFrame): boolean;
+    getPortForPortData(portData: IPortData): NodePort | null;
+    getPortDataForPortDataContent(data: any): IPortData | null;
+    getLinksForPortDataContent(data: any): NodeLink[];
+    getLinksForPortData(portData: IPortData): NodeLink[];
+    private _refreshFrames;
+    _refreshLinks(): void;
+    refresh(): void;
+    private _onDown;
+    cleanAccumulation(useCeil?: boolean): void;
+    private _onUp;
+    private _onMove;
+    renderProperties(): Nullable<JSX.Element>;
+    appendVisual(root: HTMLDivElement, owner: GraphCanvasComponent): void;
+    dispose(): void;
 }
 
 }
-declare module "@babylonjs/node-editor/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/nodeGraphSystem/interfaces/displayManager" {
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
+import { IPortData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/portData";
+export interface IDisplayManager {
+    getHeaderClass(data: INodeData): string;
+    shouldDisplayPortLabels(data: IPortData): boolean;
+    updatePreviewContent(data: INodeData, contentArea: HTMLDivElement): void;
+    getBackgroundColor(data: INodeData): string;
+    getHeaderText(data: INodeData): string;
 }
 
 }
-declare module "@babylonjs/node-editor/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/nodeGraphSystem/interfaces/nodeContainer" {
+import { GraphNode } from "@babylonjs/node-editor/nodeGraphSystem/graphNode";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
+export interface INodeContainer {
+    nodes: GraphNode[];
+    appendNode(data: INodeData): GraphNode;
 }
-export {};
 
 }
-declare module "@babylonjs/node-editor/lines/sliderLineComponent" {
-import * as React from "react";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
-import { LockObject } from "@babylonjs/node-editor/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;
-    unit?: React.ReactNode;
-}
-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;
-}
-export {};
-
+declare module "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData" {
+import { Nullable } from "@babylonjs/core/types";
+import { IPortData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/portData";
+export interface INodeData {
+    data: any;
+    name: string;
+    uniqueId: number;
+    isInput: boolean;
+    comments: string;
+    getWarningMessage: () => string;
+    getClassName: () => string;
+    dispose: () => void;
+    getPortByName: (name: string) => Nullable<IPortData>;
+    inputs: IPortData[];
+    outputs: IPortData[];
 }
-declare module "@babylonjs/node-editor/lines/targetsProxy" {
-import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
-import { Observable } from "@babylonjs/core/Misc/observable";
-export const conflictingValuesPlaceholder = "\u2014";
-/**
- *
- * @param targets a list of selected targets
- * @param onPropertyChangedObservable
- * @param getProperty
- * @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/lines/textInputLineComponent" {
-import * as React from "react";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
-import { LockObject } from "@babylonjs/node-editor/tabs/propertyGrids/lockObject";
-export interface ITextInputLineComponentProps {
-    label?: string;
-    lockObject?: LockObject;
-    target?: any;
-    propertyName?: string;
-    value?: string;
-    onChange?: (value: string) => void;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    icon?: string;
-    iconLabel?: string;
-    noUnderline?: boolean;
-    numbersOnly?: boolean;
-    delayInput?: boolean;
-    arrows?: boolean;
-    arrowsIncrement?: (amount: number) => void;
-    step?: number;
-    numeric?: boolean;
-    roundValues?: boolean;
-    min?: number;
-    max?: number;
-    placeholder?: string;
-    unit?: React.ReactNode;
-}
-export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
-    value: string;
-    dragging: boolean;
-}> {
-    private _localChange;
-    constructor(props: ITextInputLineComponentProps);
-    componentWillUnmount(): void;
-    shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: {
-        value: string;
-        dragging: boolean;
-    }): boolean;
-    raiseOnPropertyChanged(newValue: string, previousValue: string): void;
-    getCurrentNumericValue(value: string): number;
-    updateValue(value: string): void;
-    incrementValue(amount: number): void;
-    onKeyDown(event: React.KeyboardEvent): void;
-    render(): JSX.Element;
-}
-
+declare module "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeLocationInfo" {
+export interface INodeLocationInfo {
+    blockId: number;
+    x: number;
+    y: number;
 }
-declare module "@babylonjs/node-editor/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 interface IFrameData {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: number[];
+    name: string;
+    isCollapsed: boolean;
+    blocks: number[];
+    comments: string;
 }
-export class TextLineComponent extends React.Component<ITextLineComponentProps> {
-    constructor(props: ITextLineComponentProps);
-    onLink(): void;
-    renderContent(): JSX.Element | null;
-    render(): JSX.Element;
+export interface IEditorData {
+    locations: INodeLocationInfo[];
+    x: number;
+    y: number;
+    zoom: number;
+    frames?: IFrameData[];
+    map?: {
+        [key: number]: number;
+    };
 }
-export {};
 
 }
-declare module "@babylonjs/node-editor/lines/unitButton" {
-/// <reference types="react" />
-interface IUnitButtonProps {
-    unit: string;
-    locked?: boolean;
-    onClick?: (unit: string) => void;
+declare module "@babylonjs/node-editor/nodeGraphSystem/interfaces/portData" {
+import { Nullable } from "@babylonjs/core/types";
+import { GraphNode } from "@babylonjs/node-editor/nodeGraphSystem/graphNode";
+export enum PortDataDirection {
+    /** Input */
+    Input = 0,
+    /** Output */
+    Output = 1
+}
+export interface IPortData {
+    data: any;
+    name: string;
+    internalName: string;
+    isExposedOnFrame: boolean;
+    exposedPortPosition: number;
+    isConnected: boolean;
+    direction: PortDataDirection;
+    ownerData: any;
+    connectedPort: Nullable<IPortData>;
+    needDualDirectionValidation: boolean;
+    hasEndpoints: boolean;
+    endpoints: Nullable<IPortData[]>;
+    updateDisplayName: (newName: string) => void;
+    connectTo: (port: IPortData) => void;
+    disconnectFrom: (port: IPortData) => void;
+    checkCompatibilityState(port: IPortData): number;
+    getCompatibilityIssueMessage(issue: number, targetNode: GraphNode, targetPort: IPortData): string;
+}
+
+}
+declare module "@babylonjs/node-editor/nodeGraphSystem/interfaces/propertyComponentProps" {
+import { StateManager } from "@babylonjs/node-editor/nodeGraphSystem/stateManager";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
+export interface IPropertyComponentProps {
+    stateManager: StateManager;
+    nodeData: INodeData;
 }
-export function UnitButton(props: IUnitButtonProps): JSX.Element;
-export {};
 
 }
-declare module "@babylonjs/node-editor/lines/valueLineComponent" {
-import * as React from "react";
-interface IValueLineComponentProps {
-    label: string;
-    value: number;
-    color?: string;
-    fractionDigits?: number;
-    units?: string;
-    icon?: string;
-    iconLabel?: string;
+declare module "@babylonjs/node-editor/nodeGraphSystem/interfaces/selectionChangedOptions" {
+import { Nullable } from "@babylonjs/core/types";
+import { GraphFrame } from "@babylonjs/node-editor/nodeGraphSystem/graphFrame";
+import { GraphNode } from "@babylonjs/node-editor/nodeGraphSystem/graphNode";
+import { NodeLink } from "@babylonjs/node-editor/nodeGraphSystem/nodeLink";
+import { NodePort } from "@babylonjs/node-editor/nodeGraphSystem/nodePort";
+import { FramePortData } from "@babylonjs/node-editor/nodeGraphSystem/types/framePortData";
+export interface ISelectionChangedOptions {
+    selection: Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FramePortData>;
+    forceKeepSelection?: boolean;
+    marqueeSelection?: boolean;
 }
-export class ValueLineComponent extends React.Component<IValueLineComponentProps> {
-    constructor(props: IValueLineComponentProps);
-    render(): JSX.Element;
+
+}
+declare module "@babylonjs/node-editor/nodeGraphSystem/nodeLink" {
+import { Observable } from "@babylonjs/core/Misc/observable";
+import { FrameNodePort } from "@babylonjs/node-editor/nodeGraphSystem/frameNodePort";
+import { NodePort } from "@babylonjs/node-editor/nodeGraphSystem/nodePort";
+import { GraphNode } from "@babylonjs/node-editor/nodeGraphSystem/graphNode";
+import { GraphCanvasComponent } from "@babylonjs/node-editor/nodeGraphSystem/graphCanvas";
+export class NodeLink {
+    private _graphCanvas;
+    private _portA;
+    private _portB?;
+    private _nodeA;
+    private _nodeB?;
+    private _path;
+    private _selectionPath;
+    private _onSelectionChangedObserver;
+    private _isVisible;
+    onDisposedObservable: Observable<NodeLink>;
+    get isVisible(): boolean;
+    set isVisible(value: boolean);
+    get portA(): FrameNodePort | NodePort;
+    get portB(): FrameNodePort | NodePort | undefined;
+    get nodeA(): GraphNode;
+    get nodeB(): GraphNode | undefined;
+    update(endX?: number, endY?: number, straight?: boolean): void;
+    constructor(graphCanvas: GraphCanvasComponent, portA: NodePort, nodeA: GraphNode, portB?: NodePort, nodeB?: GraphNode);
+    onClick(evt: MouseEvent): void;
+    dispose(notify?: boolean): void;
 }
-export {};
 
 }
-declare module "@babylonjs/node-editor/lines/vector2LineComponent" {
-import * as React from "react";
+declare module "@babylonjs/node-editor/nodeGraphSystem/nodePort" {
+import { Nullable } from "@babylonjs/core/types";
+import { Observer } from "@babylonjs/core/Misc/observable";
 import { Vector2 } from "@babylonjs/core/Maths/math.vector";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { PropertyChangedEvent } from "@babylonjs/node-editor/propertyChangedEvent";
-interface IVector2LineComponentProps {
-    label: string;
-    target: any;
-    propertyName: string;
-    step?: number;
-    onChange?: (newvalue: Vector2) => void;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    icon?: string;
-    iconLabel?: string;
+import { GraphNode } from "@babylonjs/node-editor/nodeGraphSystem/graphNode";
+import { StateManager } from "@babylonjs/node-editor/nodeGraphSystem/stateManager";
+import { ISelectionChangedOptions } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/selectionChangedOptions";
+import { FrameNodePort } from "@babylonjs/node-editor/nodeGraphSystem/frameNodePort";
+import { IDisplayManager } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/displayManager";
+import { IPortData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/portData";
+export class NodePort {
+    portData: IPortData;
+    node: GraphNode;
+    protected _element: HTMLDivElement;
+    protected _img: HTMLImageElement;
+    protected _stateManager: StateManager;
+    protected _portLabelElement: Element;
+    protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;
+    protected _onSelectionChangedObserver: Nullable<Observer<Nullable<ISelectionChangedOptions>>>;
+    protected _exposedOnFrame: boolean;
+    delegatedPort: Nullable<FrameNodePort>;
+    get element(): HTMLDivElement;
+    get portName(): string;
+    set portName(newName: string);
+    get disabled(): boolean;
+    hasLabel(): boolean;
+    get exposedOnFrame(): boolean;
+    set exposedOnFrame(value: boolean);
+    get exposedPortPosition(): number;
+    set exposedPortPosition(value: number);
+    private _isConnectedToNodeOutsideOfFrame;
+    refresh(): void;
+    constructor(portContainer: HTMLElement, portData: IPortData, node: GraphNode, stateManager: StateManager);
+    dispose(): void;
+    static CreatePortElement(portData: IPortData, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, stateManager: StateManager): NodePort;
 }
-export class Vector2LineComponent extends React.Component<IVector2LineComponentProps, {
-    isExpanded: boolean;
-    value: Vector2;
-}> {
-    static defaultProps: {
-        step: number;
+
+}
+declare module "@babylonjs/node-editor/nodeGraphSystem/propertyLedger" {
+import { ComponentClass } from "react";
+import { IPropertyComponentProps } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/propertyComponentProps";
+export class PropertyLedger {
+    static DefaultControl: ComponentClass<IPropertyComponentProps>;
+    static RegisteredControls: {
+        [key: string]: ComponentClass<IPropertyComponentProps>;
     };
-    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;
 }
-export {};
 
 }
-declare module "@babylonjs/node-editor/lines/vector3LineComponent" {
-import * as React from "react";
-import { Vector3 } from "@babylonjs/core/Maths/math.vector";
+declare module "@babylonjs/node-editor/nodeGraphSystem/stateManager" {
+import { Vector2 } from "@babylonjs/core/Maths/math.vector";
 import { Observable } from "@babylonjs/core/Misc/observable";
-import { PropertyChangedEvent } from "@babylonjs/node-editor/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;
+import { Nullable } from "@babylonjs/core/types";
+import { FrameNodePort } from "@babylonjs/node-editor/nodeGraphSystem/frameNodePort";
+import { GraphFrame } from "@babylonjs/node-editor/nodeGraphSystem/graphFrame";
+import { GraphNode } from "@babylonjs/node-editor/nodeGraphSystem/graphNode";
+import { INodeContainer } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeContainer";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
+import { IPortData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/portData";
+import { ISelectionChangedOptions } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/selectionChangedOptions";
+import { NodePort } from "@babylonjs/node-editor/nodeGraphSystem/nodePort";
+export class StateManager {
+    data: any;
+    hostDocument: Document;
+    lockObject: any;
+    onSelectionChangedObservable: Observable<Nullable<ISelectionChangedOptions>>;
+    onFrameCreatedObservable: Observable<GraphFrame>;
+    onUpdateRequiredObservable: Observable<any>;
+    onGraphNodeRemovalObservable: Observable<GraphNode>;
+    onSelectionBoxMoved: Observable<ClientRect | DOMRect>;
+    onCandidateLinkMoved: Observable<Nullable<Vector2>>;
+    onCandidatePortSelectedObservable: Observable<Nullable<FrameNodePort | NodePort>>;
+    onNewNodeCreatedObservable: Observable<GraphNode>;
+    onRebuildRequiredObservable: Observable<boolean>;
+    onErrorMessageDialogRequiredObservable: Observable<string>;
+    onExposePortOnFrameObservable: Observable<GraphNode>;
+    onGridSizeChanged: Observable<void>;
+    onNewBlockRequiredObservable: Observable<{
+        type: string;
+        targetX: number;
+        targetY: number;
+        needRepositioning?: boolean | undefined;
+    }>;
+    exportData: (data: any) => string;
+    isElbowConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;
+    applyNodePortDesign: (data: IPortData, element: HTMLElement, img: HTMLImageElement) => void;
+    storeEditorData: (serializationObject: any, frame?: Nullable<GraphFrame>) => void;
+    getEditorDataMap: () => {
+        [key: number]: number;
+    };
+    createDefaultInputData: (rootData: any, portData: IPortData, nodeContainer: INodeContainer) => {
+        data: INodeData;
+        name: string;
     };
-    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;
 }
-export {};
 
 }
-declare module "@babylonjs/node-editor/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/propertyChangedEvent";
-interface IVector4LineComponentProps {
-    label: string;
-    target: any;
-    propertyName: string;
-    step?: number;
-    onChange?: (newvalue: Vector4) => void;
-    useEuler?: boolean;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    icon?: string;
-    iconLabel?: string;
+declare module "@babylonjs/node-editor/nodeGraphSystem/tools" {
+import { GraphNode } from "@babylonjs/node-editor/nodeGraphSystem/graphNode";
+import { NodeLink } from "@babylonjs/node-editor/nodeGraphSystem/nodeLink";
+import { FramePortData } from "@babylonjs/node-editor/nodeGraphSystem/types/framePortData";
+export const IsFramePortData: (variableToCheck: any) => variableToCheck is FramePortData;
+export const RefreshNode: (node: GraphNode, visitedNodes?: Set<GraphNode> | undefined, visitedLinks?: Set<NodeLink> | undefined) => void;
+
 }
-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/nodeGraphSystem/typeLedger" {
+import { INodeContainer } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeContainer";
+import { INodeData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/nodeData";
+import { IPortData } from "@babylonjs/node-editor/nodeGraphSystem/interfaces/portData";
+import { NodePort } from "@babylonjs/node-editor/nodeGraphSystem/nodePort";
+export class TypeLedger {
+    static PortDataBuilder: (port: NodePort, nodeContainer: INodeContainer) => IPortData;
+    static NodeDataBuilder: (data: any, nodeContainer: INodeContainer) => INodeData;
+}
+
 }
+declare module "@babylonjs/node-editor/nodeGraphSystem/types/framePortData" {
+import { GraphFrame } from "@babylonjs/node-editor/nodeGraphSystem/graphFrame";
+import { FrameNodePort } from "@babylonjs/node-editor/nodeGraphSystem/frameNodePort";
+export type FramePortData = {
+    frame: GraphFrame;
+    port: FrameNodePort;
+};
 export {};
 
 }