@babylonjs/gui-editor 5.12.1 → 5.13.0

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

@@ -1510,6 +1510,7 @@ export interface IButtonLineComponentProps {
     onClick: () => void;
     icon?: string;
     iconLabel?: string;
+    isDisabled?: boolean;
 }
 export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
     constructor(props: IButtonLineComponentProps);
@@ -1570,7 +1571,7 @@ export interface IColor3LineComponentProps {
     icon?: string;
     lockObject?: LockObject;
     iconLabel?: string;
-    onValueChange?: (value: string) => void;
+    onChange?: () => void;
 }
 export class Color3LineComponent extends React.Component<IColor3LineComponentProps> {
     render(): JSX.Element;
@@ -1929,6 +1930,43 @@ export class LinkButtonComponent extends React.Component<ILinkButtonComponentPro
 }
 export {};
 
+}
+declare module "@babylonjs/gui-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/gui-editor/propertyChangedEvent";
+interface IMatrixLineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    step?: number;
+    onChange?: (newValue: Matrix) => void;
+    onModeChange?: (mode: number) => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    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/gui-editor/lines/messageLineComponent" {
 import * as React from "react";
@@ -1986,24 +2024,29 @@ export interface IOptionsLineComponentProps {
     propertyName: string;
     options: IInspectableOptions[];
     noDirectUpdate?: boolean;
-    onSelect?: (value: number) => void;
-    extractValue?: () => number;
+    onSelect?: (value: number | string) => void;
+    extractValue?: (target: any) => number | string;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     allowNullValue?: boolean;
     icon?: string;
     iconLabel?: string;
+    className?: string;
+    valuesAreStrings?: boolean;
+    defaultIfNull?: number;
 }
 export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
-    value: number;
+    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;
 }
@@ -2121,6 +2164,8 @@ export interface ITextInputLineComponentProps {
     max?: number;
     placeholder?: string;
     unit?: React.ReactNode;
+    validator?: (value: string) => boolean;
+    multilines?: boolean;
 }
 export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
     value: string;
@@ -2281,14 +2326,15 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 interface IVector4LineComponentProps {
     label: string;
-    target: any;
-    propertyName: string;
+    target?: any;
+    propertyName?: string;
     step?: number;
     onChange?: (newvalue: Vector4) => void;
     useEuler?: boolean;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     icon?: string;
     iconLabel?: string;
+    value?: Vector4;
 }
 export class Vector4LineComponent extends React.Component<IVector4LineComponentProps, {
     isExpanded: boolean;
@@ -2315,6 +2361,658 @@ export class Vector4LineComponent extends React.Component<IVector4LineComponentP
 }
 export {};
 
+}
+declare module "@babylonjs/gui-editor/nodeGraphSystem/displayLedger" {
+export class DisplayLedger {
+    static RegisteredControls: {
+        [key: string]: any;
+    };
+}
+
+}
+declare module "@babylonjs/gui-editor/nodeGraphSystem/frameNodePort" {
+import { IDisplayManager } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/displayManager";
+import { Observable } from "@babylonjs/core/Misc/observable";
+import { Nullable } from "@babylonjs/core/types";
+import { IPortData } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/portData";
+import { NodePort } from "@babylonjs/gui-editor/nodeGraphSystem/nodePort";
+import { GraphNode } from "@babylonjs/gui-editor/nodeGraphSystem/graphNode";
+import { FramePortPosition } from "@babylonjs/gui-editor/nodeGraphSystem/graphFrame";
+import { StateManager } from "@babylonjs/gui-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;
+}
+
+}
+declare module "@babylonjs/gui-editor/nodeGraphSystem/graphCanvas" {
+import * as React from "react";
+import { GraphNode } from "@babylonjs/gui-editor/nodeGraphSystem/graphNode";
+import { Nullable } from "@babylonjs/core/types";
+import { NodeLink } from "@babylonjs/gui-editor/nodeGraphSystem/nodeLink";
+import { NodePort } from "@babylonjs/gui-editor/nodeGraphSystem/nodePort";
+import { GraphFrame } from "@babylonjs/gui-editor/nodeGraphSystem/graphFrame";
+import { IEditorData, IFrameData } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/nodeLocationInfo";
+import { StateManager } from "@babylonjs/gui-editor/nodeGraphSystem/stateManager";
+import { INodeData } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/nodeData";
+import { IPortData } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/portData";
+import { INodeContainer } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/nodeContainer";
+import "@babylonjs/gui-editor/nodeGraphSystem/scss/graphCanvas.scss";
+export interface IGraphCanvasComponentProps {
+    stateManager: StateManager;
+    onEmitNewNode: (nodeData: INodeData) => GraphNode;
+}
+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(data: 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;
+}
+
+}
+declare module "@babylonjs/gui-editor/nodeGraphSystem/graphFrame" {
+import { GraphNode } from "@babylonjs/gui-editor/nodeGraphSystem/graphNode";
+import { GraphCanvasComponent } from "@babylonjs/gui-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/gui-editor/nodeGraphSystem/frameNodePort";
+import { IFrameData } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/nodeLocationInfo";
+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/gui-editor/nodeGraphSystem/graphNode" {
+/// <reference types="react" />
+import { Nullable } from "@babylonjs/core/types";
+import { GraphCanvasComponent } from "@babylonjs/gui-editor/nodeGraphSystem/graphCanvas";
+import { NodePort } from "@babylonjs/gui-editor/nodeGraphSystem/nodePort";
+import { GraphFrame } from "@babylonjs/gui-editor/nodeGraphSystem/graphFrame";
+import { NodeLink } from "@babylonjs/gui-editor/nodeGraphSystem/nodeLink";
+import { StateManager } from "@babylonjs/gui-editor/nodeGraphSystem/stateManager";
+import { INodeData } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/nodeData";
+import { IPortData } from "@babylonjs/gui-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/gui-editor/nodeGraphSystem/interfaces/displayManager" {
+import { INodeData } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/nodeData";
+import { IPortData } from "@babylonjs/gui-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/gui-editor/nodeGraphSystem/interfaces/nodeContainer" {
+import { GraphNode } from "@babylonjs/gui-editor/nodeGraphSystem/graphNode";
+export interface INodeContainer {
+    nodes: GraphNode[];
+}
+
+}
+declare module "@babylonjs/gui-editor/nodeGraphSystem/interfaces/nodeData" {
+import { Nullable } from "@babylonjs/core/types";
+import { IPortData } from "@babylonjs/gui-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/gui-editor/nodeGraphSystem/interfaces/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/gui-editor/nodeGraphSystem/interfaces/portData" {
+import { Nullable } from "@babylonjs/core/types";
+import { GraphNode } from "@babylonjs/gui-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/gui-editor/nodeGraphSystem/interfaces/propertyComponentProps" {
+import { StateManager } from "@babylonjs/gui-editor/nodeGraphSystem/stateManager";
+import { INodeData } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/nodeData";
+export interface IPropertyComponentProps {
+    stateManager: StateManager;
+    nodeData: INodeData;
+}
+
+}
+declare module "@babylonjs/gui-editor/nodeGraphSystem/interfaces/selectionChangedOptions" {
+import { Nullable } from "@babylonjs/core/types";
+import { GraphFrame } from "@babylonjs/gui-editor/nodeGraphSystem/graphFrame";
+import { GraphNode } from "@babylonjs/gui-editor/nodeGraphSystem/graphNode";
+import { NodeLink } from "@babylonjs/gui-editor/nodeGraphSystem/nodeLink";
+import { NodePort } from "@babylonjs/gui-editor/nodeGraphSystem/nodePort";
+import { FramePortData } from "@babylonjs/gui-editor/nodeGraphSystem/types/framePortData";
+export interface ISelectionChangedOptions {
+    selection: Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FramePortData>;
+    forceKeepSelection?: boolean;
+    marqueeSelection?: boolean;
+}
+
+}
+declare module "@babylonjs/gui-editor/nodeGraphSystem/nodeLink" {
+import { Observable } from "@babylonjs/core/Misc/observable";
+import { FrameNodePort } from "@babylonjs/gui-editor/nodeGraphSystem/frameNodePort";
+import { NodePort } from "@babylonjs/gui-editor/nodeGraphSystem/nodePort";
+import { GraphNode } from "@babylonjs/gui-editor/nodeGraphSystem/graphNode";
+import { GraphCanvasComponent } from "@babylonjs/gui-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(): 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/gui-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 { GraphNode } from "@babylonjs/gui-editor/nodeGraphSystem/graphNode";
+import { StateManager } from "@babylonjs/gui-editor/nodeGraphSystem/stateManager";
+import { ISelectionChangedOptions } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/selectionChangedOptions";
+import { FrameNodePort } from "@babylonjs/gui-editor/nodeGraphSystem/frameNodePort";
+import { IDisplayManager } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/displayManager";
+import { IPortData } from "@babylonjs/gui-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;
+}
+
+}
+declare module "@babylonjs/gui-editor/nodeGraphSystem/propertyLedger" {
+import { ComponentClass } from "react";
+import { IPropertyComponentProps } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/propertyComponentProps";
+export class PropertyLedger {
+    static DefaultControl: ComponentClass<IPropertyComponentProps>;
+    static RegisteredControls: {
+        [key: string]: ComponentClass<IPropertyComponentProps>;
+    };
+}
+
+}
+declare module "@babylonjs/gui-editor/nodeGraphSystem/stateManager" {
+import { Vector2 } from "@babylonjs/core/Maths/math.vector";
+import { Observable } from "@babylonjs/core/Misc/observable";
+import { Nullable } from "@babylonjs/core/types";
+import { FrameNodePort } from "@babylonjs/gui-editor/nodeGraphSystem/frameNodePort";
+import { GraphFrame } from "@babylonjs/gui-editor/nodeGraphSystem/graphFrame";
+import { GraphNode } from "@babylonjs/gui-editor/nodeGraphSystem/graphNode";
+import { INodeContainer } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/nodeContainer";
+import { INodeData } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/nodeData";
+import { IPortData } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/portData";
+import { ISelectionChangedOptions } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/selectionChangedOptions";
+import { NodePort } from "@babylonjs/gui-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<NodePort | FrameNodePort>>;
+    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;
+    };
+}
+
+}
+declare module "@babylonjs/gui-editor/nodeGraphSystem/tools" {
+import { GraphNode } from "@babylonjs/gui-editor/nodeGraphSystem/graphNode";
+import { NodeLink } from "@babylonjs/gui-editor/nodeGraphSystem/nodeLink";
+import { FramePortData } from "@babylonjs/gui-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;
+
+}
+declare module "@babylonjs/gui-editor/nodeGraphSystem/typeLedger" {
+import { INodeContainer } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/nodeContainer";
+import { INodeData } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/nodeData";
+import { IPortData } from "@babylonjs/gui-editor/nodeGraphSystem/interfaces/portData";
+import { NodePort } from "@babylonjs/gui-editor/nodeGraphSystem/nodePort";
+export class TypeLedger {
+    static PortDataBuilder: (port: NodePort, nodeContainer: INodeContainer) => IPortData;
+    static NodeDataBuilder: (data: any, nodeContainer: INodeContainer) => INodeData;
+}
+
+}
+declare module "@babylonjs/gui-editor/nodeGraphSystem/types/framePortData" {
+import { GraphFrame } from "@babylonjs/gui-editor/nodeGraphSystem/graphFrame";
+import { FrameNodePort } from "@babylonjs/gui-editor/nodeGraphSystem/frameNodePort";
+export type FramePortData = {
+    frame: GraphFrame;
+    port: FrameNodePort;
+};
+export {};
+
 }
 declare module "@babylonjs/gui-editor/propertyChangedEvent" {
 export class PropertyChangedEvent {