babylonjs-gui-editor/babylon.guiEditor.d.ts

Gui Editor

declare module BABYLON {
    interface IGraphEditorProps {
        globalState: GlobalState;
        onReady?: () => Promise<void>;
    }
    interface IGraphEditorState {
        showPreviewPopUp: boolean;
        toolbarExpand: boolean;
        message: string;
    }
    export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
        private _moveInProgress;
        private _leftWidth;
        private _rightWidth;
        private _popUpWindow;
        private _draggedItem;
        private _rootRef;
        private _onErrorMessageObserver;
        private _workbenchRef;
        componentDidMount(): void;
        componentWillUnmount(): void;
        addToolControls: (evt: KeyboardEvent) => void;
        removePressToolControls: (evt: KeyboardEvent) => void;
        constructor(props: IGraphEditorProps);
        showWaitScreen(): void;
        hideWaitScreen(): void;
        onPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
        onPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
        resizeColumns(evt: React.PointerEvent<HTMLDivElement>, forLeft?: boolean): void;
        buildColumnLayout(): string;
        handlePopUp: () => void;
        handleClosingPopUp: () => void;
        switchExpandedState(): void;
        render(): import("react/jsx-runtime").JSX.Element;
        onCreate(value: string): BABYLON.GUI.Control;
        createBlackLine(): import("react/jsx-runtime").JSX.Element;
        createToolbarHelper(ct: {
            className: string;
            icon: string;
        }[]): import("react/jsx-runtime").JSX.Element[];
        createToolbar(): import("react/jsx-runtime").JSX.Element;
    }


    export class Tools {
        static LookForItems(item: any, selectedEntities: any[], firstIteration?: boolean): boolean;
        private static _RecursiveRemoveHiddenMeshesAndHoistChildren;
        static SortAndFilter(parent: any, items: any[]): any[];
        static GetCellInfo(grid: BABYLON.GUI.Grid, control: BABYLON.GUI.Control): Vector2;
        static ReorderGrid(grid: BABYLON.GUI.Grid, index: number, control: BABYLON.GUI.Control, cell: Vector2): void;
    }


    interface IPortalProps {
        globalState: GlobalState;
    }
    export class Portal extends React.Component<React.PropsWithChildren<IPortalProps>> {
        render(): React.ReactPortal;
    }


    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;
        };
    }


    type Key = "control" | "shift" | "alt" | "space" | "meta";
    export class KeyboardManager {
        private _hostElement;
        private _kdListener;
        private _kuListener;
        private _moveListener;
        private _focusOutListener;
        private _keys;
        onKeyPressedObservable: Observable<Key>;
        constructor(hostElement: HTMLElement | HTMLDocument);
        private _keyEvent;
        private _updateModifierKeys;
        private _setKeyDown;
        private _clearKeys;
        isKeyDown(key: Key): boolean;
        dispose(): void;
    }




    export class GUINodeTools {
        static ImageControlDefaultUrl: string;
        static CreateControlFromString(data: string): BABYLON.GUI.Grid | BABYLON.GUI.Rectangle | BABYLON.GUI.StackPanel | BABYLON.GUI.Line | BABYLON.GUI.TextBlock | BABYLON.GUI.Image | BABYLON.GUI.Slider | BABYLON.GUI.ImageBasedSlider | BABYLON.GUI.RadioButton | BABYLON.GUI.InputText | BABYLON.GUI.ColorPicker | BABYLON.GUI.Ellipse | BABYLON.GUI.Checkbox | BABYLON.GUI.DisplayGrid;
    }


    /**
     * Interface used to specify creation options for the gui editor
     */
    export interface IGUIEditorOptions {
        liveGuiTexture?: BABYLON.GUI.AdvancedDynamicTexture;
        customLoad?: {
            label: string;
            action: (data: string) => Promise<string>;
        } | undefined;
        hostElement?: HTMLElement;
        customSave?: {
            label: string;
            action: (data: string) => Promise<string>;
        };
        currentSnippetToken?: string;
        customLoadObservable?: Observable<any>;
    }
    /**
     * Class used to create a gui editor
     */
    export class GUIEditor {
        private static _CurrentState;
        /** @internal */
        static _PopupWindow: Window | null;
        /**
         * Show the gui editor
         * @param options defines the options to use to configure the gui editor
         * @param embed defines whether editor is being opened from the Playground
         */
        static Show(options: IGUIEditorOptions, embed?: boolean): Promise<void>;
    }


    export enum DragOverLocation {
        ABOVE = 0,
        BELOW = 1,
        CENTER = 2,
        NONE = 3
    }
    export enum GUIEditorTool {
        SELECT = 0,
        PAN = 1,
        ZOOM = 2
    }
    export class GlobalState {
        liveGuiTexture: Nullable<BABYLON.GUI.AdvancedDynamicTexture>;
        guiTexture: BABYLON.GUI.AdvancedDynamicTexture;
        hostElement: HTMLElement;
        hostDocument: HTMLDocument;
        hostWindow: Window;
        selectedControls: BABYLON.GUI.Control[];
        onSelectionChangedObservable: Observable<void>;
        onResizeObservable: Observable<ISize>;
        onBuiltObservable: Observable<void>;
        onResetRequiredObservable: Observable<void>;
        onUpdateRequiredObservable: Observable<void>;
        onLogRequiredObservable: Observable<LogEntry>;
        onErrorMessageDialogRequiredObservable: Observable<string>;
        onIsLoadingChanged: Observable<boolean>;
        onSelectionBoxMoved: Observable<ClientRect | DOMRect>;
        onNewSceneObservable: Observable<Nullable<Scene>>;
        onGuiNodeRemovalObservable: Observable<BABYLON.GUI.Control>;
        onPopupClosedObservable: Observable<void>;
        private _backgroundColor;
        private _outlines;
        keys: KeyboardManager;
        private _fromPg;
        /** DO NOT USE: in the process of removing */
        blockKeyboardEvents: boolean;
        onOutlineChangedObservable: Observable<void>;
        controlCamera: boolean;
        selectionLock: boolean;
        workbench: WorkbenchComponent;
        onPropertyChangedObservable: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        private _tool;
        private _usePrevSelected;
        private _prevTool;
        onToolChangeObservable: Observable<void>;
        get tool(): GUIEditorTool;
        set tool(newTool: GUIEditorTool);
        get usePrevSelected(): boolean;
        set usePrevSelected(val: boolean);
        restorePreviousTool(): void;
        onFitControlsToWindowObservable: Observable<void>;
        onReframeWindowObservable: Observable<void>;
        onLoadObservable: Observable<File>;
        onSaveObservable: Observable<void>;
        onSaveSelectedControl: Observable<void>;
        onSnippetLoadObservable: Observable<void>;
        onSnippetSaveObservable: Observable<void>;
        onControlLoadObservable: Observable<File>;
        onResponsiveChangeObservable: Observable<boolean>;
        onParentingChangeObservable: Observable<Nullable<BABYLON.GUI.Control>>;
        onDropObservable: Observable<void>;
        onPropertyGridUpdateRequiredObservable: Observable<void>;
        onDraggingEndObservable: Observable<void>;
        onDraggingStartObservable: Observable<void>;
        onWindowResizeObservable: Observable<void>;
        onGizmoUpdateRequireObservable: Observable<void>;
        onArtBoardUpdateRequiredObservable: Observable<void>;
        onBackgroundColorChangeObservable: Observable<void>;
        onFontsParsedObservable: Observable<void>;
        onPointerMoveObservable: Observable<import("react").PointerEvent<HTMLCanvasElement>>;
        onPointerUpObservable: Observable<Nullable<PointerEvent | import("react").PointerEvent<HTMLCanvasElement>>>;
        draggedControl: Nullable<BABYLON.GUI.Control>;
        draggedControlDirection: DragOverLocation;
        onCopyObservable: Observable<(content: string) => void>;
        onCutObservable: Observable<(content: string) => void>;
        onPasteObservable: Observable<string>;
        isSaving: boolean;
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        storeEditorData: (serializationObject: any) => void;
        shiftKeyPressed: boolean;
        customSave?: {
            label: string;
            action: (data: string) => Promise<string>;
        };
        customLoad?: {
            label: string;
            action: (data: string) => Promise<string>;
        };
        constructor();
        /** adds copy, cut and paste listeners to the host window */
        registerEventListeners(): void;
        get backgroundColor(): Color3;
        get fromPG(): boolean;
        set fromPG(value: boolean);
        set backgroundColor(value: Color3);
        get outlines(): boolean;
        set outlines(value: boolean);
        select(control: BABYLON.GUI.Control): void;
        setSelection(controls: BABYLON.GUI.Control[]): void;
        private _findParentControlInTexture;
        deleteSelectedNodes(): void;
        isMultiSelectable(control: BABYLON.GUI.Control): boolean;
        dispose(): void;
    }


    export var ControlTypes: {
        className: string;
        icon: string;
    }[];


    export interface IWorkbenchComponentProps {
        globalState: GlobalState;
    }
    export enum ConstraintDirection {
        NONE = 0,
        X = 2,// Horizontal constraint
        Y = 3
    }
    export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps> {
        private _mouseDown;
        private _rootContainer;
        private _setConstraintDirection;
        private _mouseStartPoint;
        _scene: Scene;
        private _constraintDirection;
        private _panning;
        private _isOverGUINode;
        private _engine;
        private _guiRenderObserver;
        private _doubleClick;
        private _currLeft;
        private _currTop;
        private _controlsHit;
        private _pointerTravelDistance;
        private _processSelectionOnUp;
        private _visibleRegionContainer;
        private _centerZoomMousePosition;
        private _hasPerformedDragZoom;
        private static _addedFonts;
        static get addedFonts(): string[];
        get visibleRegionContainer(): BABYLON.GUI.Container;
        private _panAndZoomContainer;
        get panAndZoomContainer(): BABYLON.GUI.Container;
        private _trueRootContainer;
        set trueRootContainer(value: BABYLON.GUI.Container);
        get trueRootContainer(): BABYLON.GUI.Container;
        private _defaultGUISize;
        private _initialPanningOffset;
        private _panningOffset;
        private _zoomFactor;
        private _zoomModeIncrement;
        private _guiSize;
        private _pasteDisabled;
        get guiSize(): ISize;
        get pasteDisabled(): boolean;
        set guiSize(value: ISize);
        applyEditorTransformation(): void;
        removeEditorTransformation(): void;
        private _reframeWindow;
        constructor(props: IWorkbenchComponentProps);
        keyEvent: (evt: KeyboardEvent) => void;
        copyToClipboard(copyFn: (content: string) => void): void;
        cutToClipboard(copyFn: (content: string) => void): void;
        pasteFromClipboard(clipboardContents: string): boolean;
        CopyGUIControl(original: BABYLON.GUI.Control): void;
        blurEvent: () => void;
        /**
         * Adds editor observers to control and stores old data in metadata
         * @param guiControl
         */
        addEditorBehavior(guiControl: BABYLON.GUI.Control): void;
        /**
         * Removes editor behavior (observables, metadata) from control
         * @param control
         */
        removeEditorBehavior(control: BABYLON.GUI.Control): void;
        dispose(): void;
        loadFromJson(serializationObject: any): void;
        /**
         * Load BABYLON.GUI.Control from Json then select loaded BABYLON.GUI.Control
         * @param serializationObject
         */
        loadControlFromJson(serializationObject: any): void;
        loadFromSnippet(snippetId: string): Promise<void>;
        loadToEditor(): void;
        updateNodeOutlines(): void;
        appendBlock(guiElement: BABYLON.GUI.Control): BABYLON.GUI.Control;
        private parent;
        private _canClone;
        private _controlToLinkedMeshMap;
        private _observersMap;
        private _saveObservables;
        private _restoreObservables;
        private _copyEditorGUIToLiveGUI;
        private _reorderGrid;
        private _isNotChildInsert;
        private _adjustParentingIndex;
        isSelected(value: boolean, guiNode: BABYLON.GUI.Control): void;
        clicked: boolean;
        _onMove(guiControl: BABYLON.GUI.Control, evt: Vector2, startPos: Vector2): void;
        onMove(evt: React.PointerEvent): void;
        private _screenToTexturePosition;
        private getScaledPointerPosition;
        startPanning(): void;
        endPanning(): void;
        processSelection(): void;
        onDown(evt: React.PointerEvent<HTMLElement>): void;
        onUp(evt: React.PointerEvent): void;
        private _syncConnectedLines;
        private _copyLiveGUIToEditorGUI;
        createGUICanvas(embed?: boolean): void;
        synchronizeLiveGUI(): void;
        addControls(scene: Scene): void;
        panning(): void;
        moveControls(moveHorizontal: boolean, amount: number): void;
        zoomWheel(event: React.WheelEvent): void;
        private _panZoomToCenter;
        zoomDrag(event: React.MouseEvent): void;
        zooming(delta: number): void;
        zeroIfClose(vec: Vector3): void;
        render(): import("react/jsx-runtime").JSX.Element;
    }


    export interface IGizmoWrapperProps {
        globalState: GlobalState;
    }
    export class GizmoWrapper extends React.Component<IGizmoWrapperProps> {
        observer: Nullable<Observer<void>>;
        componentDidMount(): void;
        componentWillUnmount(): void;
        render(): import("react/jsx-runtime").JSX.Element;
    }


    export enum ScalePointPosition {
        Top = -1,
        Left = -1,
        Center = 0,
        Right = 1,
        Bottom = 1
    }
    export interface IScalePoint {
        position: Vector2;
        horizontalPosition: ScalePointPosition;
        verticalPosition: ScalePointPosition;
        rotation: number;
        isPivot: boolean;
        defaultRotation: number;
        id?: number;
    }
    interface IGizmoScalePointProps {
        scalePoint: IScalePoint;
        clickable: boolean;
        key: number;
        onDrag: (event?: React.PointerEvent<HTMLDivElement>, scalePoint?: IScalePoint) => void;
        onRotate: (event?: React.PointerEvent<HTMLDivElement>, scalePoint?: IScalePoint) => void;
        onUp: () => void;
        overrideCursor?: string;
        canRotate: boolean;
        allowClickOnPivot?: boolean;
    }
    export function GizmoScalePoint(props: IGizmoScalePointProps): import("react/jsx-runtime").JSX.Element;


    interface IGizmoLineProps {
        globalState: GlobalState;
        control: BABYLON.GUI.Line;
    }
    /**
     * This class represents the gizmo drawn on a line Control.
     * It is used to scale and rotate the control around a pivot point
     * @param props the properties of the gizmo
     * @returns a gizmo line
     */
    export function GizmoLine(props: IGizmoLineProps): import("react/jsx-runtime").JSX.Element;


    export interface IGuiGizmoProps {
        globalState: GlobalState;
        control: BABYLON.GUI.Control;
    }
    interface IGuiGizmoState {
        canvasBounds: Rect;
        scalePoints: IScalePoint[];
        scalePointDragging: number;
        isRotating: boolean;
    }
    export class GizmoGeneric extends React.Component<IGuiGizmoProps, IGuiGizmoState> {
        private _storedValues;
        private _localBounds;
        private _rotation;
        private _gizmoUpdateObserver;
        private _pointerUpObserver;
        private _pointerMoveObserver;
        constructor(props: IGuiGizmoProps);
        componentDidMount(): void;
        componentWillUnmount(): void;
        /**
         * Update the gizmo's positions
         */
        updateGizmo(): void;
        private _onUp;
        private _onMove;
        private _rotate;
        private _dragLocalBounds;
        private _updateNodeFromLocalBounds;
        private _beginDraggingScalePoint;
        private _beginRotate;
        render(): import("react/jsx-runtime").JSX.Element;
    }


    export type DimensionProperties = "width" | "left" | "height" | "top" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" | "fontSize" | "linkOffsetX" | "linkOffsetY";
    export class Rect {
        top: number;
        left: number;
        right: number;
        bottom: number;
        constructor(left: number, top: number, right: number, bottom: number);
        clone(): Rect;
        get center(): Vector2;
        get width(): number;
        get height(): number;
    }
    export class CoordinateHelper {
        private static _MatrixCache;
        static GlobalState: GlobalState;
        /**
         * Get the scaling of a specific GUI control
         * @param node the node for which we are getting the scaling
         * @param relative should we return only the relative scaling (relative to the parent)
         * @returns an X,Y vector of the scaling
         */
        static GetScale(node: BABYLON.GUI.Control, relative?: boolean): Vector2;
        static GetRotation(node: BABYLON.GUI.Control, relative?: boolean): number;
        static GetParentSizes(guiControl: BABYLON.GUI.Control): BABYLON.GUI.Measure;
        /**
         * This function calculates a local matrix for a node, including it's full transformation and pivot point
         *
         * @param node the node to calculate the matrix for
         * @param storedValues should the stored (cached) values be used to calculate the matrix
         * @returns a new matrix for the control
         */
        static GetNodeMatrix(node: BABYLON.GUI.Control, storedValues?: Rect): BABYLON.GUI.Matrix2D;
        /**
         * Using the node's tree, calculate its world matrix and return it
         * @param node the node to calculate the matrix for
         * @param storedValues used stored valued (cached when pointer down is clicked)
         * @param stopAt stop looking when this node is found
         * @returns the world matrix for this node
         */
        static NodeToRTTWorldMatrix(node: BABYLON.GUI.Control, storedValues?: Rect, stopAt?: BABYLON.GUI.Control): BABYLON.GUI.Matrix2D;
        static NodeToRTTSpace(node: BABYLON.GUI.Control, x: number, y: number, reference?: Vector2, storedValues?: Rect, stopAt?: BABYLON.GUI.Control): Vector2;
        static RttToLocalNodeSpace(node: BABYLON.GUI.Control, x: number, y: number, reference?: Vector2, storedValues?: Rect): Vector2;
        static RttToCanvasSpace(x: number, y: number): Vector2;
        static MousePointerToRTTSpace(_node?: BABYLON.GUI.Control, x?: number, y?: number): Vector2;
        private static _ResetMatrixArray;
        static ComputeLocalBounds(node: BABYLON.GUI.Control): Rect;
        /**
         * converts a node's dimensions to percentage, properties can be specified as a list, or can convert all
         * @param guiControl
         * @param properties
         * @param onPropertyChangedObservable
         */
        static ConvertToPercentage(guiControl: BABYLON.GUI.Control, properties?: DimensionProperties[], onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>): void;
        static Round(value: number): number;
        static ConvertToPixels(guiControl: BABYLON.GUI.Control, properties?: DimensionProperties[], onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>): void;
    }


    interface IArtBoardProps {
        globalState: GlobalState;
    }
    interface IArtBoardState {
        bounds: Rect;
    }
    export class ArtBoardComponent extends React.Component<IArtBoardProps, IArtBoardState> {
        constructor(props: IArtBoardProps);
        update(): void;
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IParentingPropertyGridComponentProps {
        control: BABYLON.GUI.Control;
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
    }
    export class ParentingPropertyGridComponent extends React.Component<IParentingPropertyGridComponentProps> {
        constructor(props: IParentingPropertyGridComponentProps);
        private _columnNumber;
        private _rowNumber;
        updateGridPosition(): void;
        getCellInfo(): void;
        private _changeCell;
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface ICommandDropdownComponentProps {
        globalState: GlobalState;
        icon?: string;
        tooltip: string;
        defaultValue?: string;
        items: {
            label: string;
            icon?: string;
            fileButton?: boolean;
            loadControlButton?: boolean;
            onClick?: () => void;
            onCheck?: (value: boolean) => void;
            storeKey?: string;
            isActive?: boolean;
            defaultValue?: boolean | string;
            subItems?: string[];
        }[];
        toRight?: boolean;
    }
    export class CommandDropdownComponent extends React.Component<ICommandDropdownComponentProps, {
        isExpanded: boolean;
        activeState: string;
    }> {
        constructor(props: ICommandDropdownComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface ICommandButtonComponentProps {
        tooltip: string;
        shortcut?: string;
        icon: string;
        iconLabel?: string;
        isActive: boolean;
        copyDeleteDisabled?: boolean;
        pasteDisabled?: boolean;
        onClick: () => void;
        altStyle?: boolean;
        disabled?: boolean;
    }
    export class CommandButtonComponent extends React.Component<ICommandButtonComponentProps> {
        constructor(props: ICommandButtonComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface ICommandBarComponentProps {
        globalState: GlobalState;
    }
    export class CommandBarComponent extends React.Component<ICommandBarComponentProps> {
        private _sizeOption;
        private _stopUpdating;
        private _lockObject;
        constructor(props: ICommandBarComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    export interface ITreeItemSelectableComponentProps {
        entity: any;
        selectedEntities: any[];
        mustExpand?: boolean;
        offset: number;
        globalState: GlobalState;
        extensibilityGroups?: IExplorerExtensibilityGroup[];
        filter: Nullable<string>;
    }
    export interface ITreeItemSelectableComponentState {
        expand: boolean;
        dragOver: boolean;
        isSelected: boolean;
        isHovered: boolean;
        dragOverLocation: DragOverLocation;
        blockDrag: boolean;
    }
    export class TreeItemSelectableComponent extends React.Component<ITreeItemSelectableComponentProps, ITreeItemSelectableComponentState> {
        private _onSelectionChangedObservable;
        private _onDraggingEndObservable;
        private _onDraggingStartObservable;
        private _thisRef;
        /** flag flipped onDragEnter if dragOver is already true
         * prevents dragLeave from immediately setting dragOver to false
         * required to make dragging work as expected
         * see: see: https://github.com/transformation-dev/matrx/tree/master/packages/dragster
         */
        private _secondDragEnter;
        constructor(props: ITreeItemSelectableComponentProps);
        switchExpandedState(): void;
        shouldComponentUpdate(nextProps: ITreeItemSelectableComponentProps, nextState: {
            isSelected: boolean;
        }): boolean;
        scrollIntoView(): void;
        componentWillUnmount(): void;
        onSelect(): void;
        renderChildren(isExpanded: boolean, offset?: boolean): (import("react/jsx-runtime").JSX.Element | null)[] | null;
        render(): import("react/jsx-runtime").JSX.Element | (import("react/jsx-runtime").JSX.Element | null)[] | null;
        dragOver(event: React.DragEvent<HTMLDivElement>): void;
        updateDragOverLocation(event: React.DragEvent<HTMLDivElement>): void;
        drop(): void;
    }


    interface ITreeItemLabelComponentProps {
        label?: string;
        onClick?: () => void;
        onChange: (newValue: string) => void;
        bracket: string;
        renaming: boolean;
        setRenaming: (renaming: boolean) => void;
    }
    interface ITreeItemLabelState {
        value: string;
    }
    export class TreeItemLabelComponent extends React.Component<ITreeItemLabelComponentProps, ITreeItemLabelState> {
        constructor(props: ITreeItemLabelComponentProps);
        onClick(): void;
        onBlur(): void;
        render(): import("react/jsx-runtime").JSX.Element;
    }


    export interface ITreeItemComponentProps {
        items?: Nullable<any[]>;
        label: string;
        offset: number;
        filter: Nullable<string>;
        forceSubitems?: boolean;
        globalState: GlobalState;
        entity?: any;
        selectedEntities: any[];
        extensibilityGroups?: IExplorerExtensibilityGroup[];
        contextMenuItems?: {
            label: string;
            action: () => void;
        }[];
    }
    export class TreeItemComponent extends React.Component<ITreeItemComponentProps, {
        isExpanded: boolean;
        mustExpand: boolean;
    }> {
        static _ContextMenuUniqueIdGenerator: number;
        constructor(props: ITreeItemComponentProps);
        switchExpandedState(): void;
        shouldComponentUpdate(nextProps: ITreeItemComponentProps, nextState: {
            isExpanded: boolean;
        }): boolean;
        expandAll(expand: boolean): void;
        renderContextMenu(): import("react/jsx-runtime").JSX.Element | null;
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface ISceneExplorerFilterComponentProps {
        onFilter: (filter: string) => void;
    }
    export class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
        constructor(props: ISceneExplorerFilterComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }
    interface ISceneExplorerComponentProps {
        scene?: Scene;
        noCommands?: boolean;
        noHeader?: boolean;
        noExpand?: boolean;
        noClose?: boolean;
        extensibilityGroups?: IExplorerExtensibilityGroup[];
        globalState: GlobalState;
        popupMode?: boolean;
        onPopup?: () => void;
        onClose?: () => void;
    }
    export class SceneExplorerComponent extends React.Component<React.PropsWithChildren<ISceneExplorerComponentProps>, {
        filter: Nullable<string>;
        selectedEntity: any;
        scene: Nullable<Scene>;
    }> {
        private _onSelectionChangeObserver;
        private _onParrentingChangeObserver;
        private _onNewSceneObserver;
        private _onPropertyChangedObservable;
        private _onUpdateRequiredObserver;
        constructor(props: ISceneExplorerComponentProps);
        componentDidMount(): void;
        componentWillUnmount(): void;
        filterContent(filter: string): void;
        findSiblings(parent: any, items: any[], target: any, goNext: boolean, data: {
            previousOne?: any;
            found?: boolean;
        }): boolean;
        processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
        renderContent(): import("react/jsx-runtime").JSX.Element | null;
        onClose(): void;
        onPopup(): void;
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IExtensionsComponentProps {
        target: any;
        extensibilityGroups?: IExplorerExtensibilityGroup[];
    }
    export class ExtensionsComponent extends React.Component<IExtensionsComponentProps, {
        popupVisible: boolean;
    }> {
        private _popup;
        private _extensionRef;
        constructor(props: IExtensionsComponentProps);
        showPopup(): void;
        componentDidMount(): void;
        componentDidUpdate(): void;
        render(): import("react/jsx-runtime").JSX.Element | null;
    }


    interface IControlTreeItemComponentProps {
        control: BABYLON.GUI.Control;
        extensibilityGroups?: IExplorerExtensibilityGroup[];
        onClick: () => void;
        globalState: GlobalState;
        isHovered: boolean;
        isDragOver: boolean;
        dragOverLocation: DragOverLocation;
        onRenamingStateChanged: (renaming: boolean) => void;
    }
    export class ControlTreeItemComponent extends React.Component<IControlTreeItemComponentProps, {
        isActive: boolean;
        isVisible: boolean;
        isRenaming: boolean;
    }> {
        private _onIsVisibleChangedObserver;
        constructor(props: IControlTreeItemComponentProps);
        componentWillUnmount(): void;
        highlight(): void;
        switchVisibility(): void;
        onRename(name: string): void;
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IPropertyTabComponentProps {
        globalState: GlobalState;
    }
    export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps> {
        private _onBuiltObserver;
        private _timerIntervalId;
        private _lockObject;
        constructor(props: IPropertyTabComponentProps);
        componentDidMount(): void;
        componentWillUnmount(): void;
        load(file: File): void;
        /**
         * Read loaded file
         * @param file
         */
        loadControl(file: File): void;
        save(saveCallback: () => void): void;
        saveLocally: () => void;
        /**
         * Save the selected control as Json with file name of guiControl
         */
        saveSelectedControlLocally: () => void;
        saveToSnippetServerHelper: (content: string, adt: BABYLON.GUI.AdvancedDynamicTexture) => Promise<string>;
        saveToSnippetServer: () => Promise<void>;
        loadFromSnippet(): void;
        renderNode(nodes: BABYLON.GUI.Control[]): import("react/jsx-runtime").JSX.Element;
        /**
         * returns the class name of a list of controls if they share a class, or an empty string if not
         * @param nodes the list of controls to check
         * @returns the class name of a list of controls if they share a class, or an empty string if not
         */
        getControlsCommonClassName(nodes: BABYLON.GUI.Control[]): string;
        renderProperties(nodes: BABYLON.GUI.Control[]): import("react/jsx-runtime").JSX.Element | undefined;
        renderControlIcon(nodes: BABYLON.GUI.Control[]): string;
        render(): import("react/jsx-runtime").JSX.Element | null;
    }


    interface ITextBlockPropertyGridComponentProps {
        textBlocks: BABYLON.GUI.TextBlock[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class TextBlockPropertyGridComponent extends React.Component<ITextBlockPropertyGridComponentProps> {
        constructor(props: ITextBlockPropertyGridComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IStackPanelPropertyGridComponentProps {
        stackPanels: BABYLON.GUI.StackPanel[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class StackPanelPropertyGridComponent extends React.Component<IStackPanelPropertyGridComponentProps> {
        constructor(props: IStackPanelPropertyGridComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface ISliderPropertyGridComponentProps {
        sliders: (Slider | BABYLON.GUI.ImageBasedSlider)[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
    }
    export class SliderPropertyGridComponent extends React.Component<ISliderPropertyGridComponentProps> {
        constructor(props: ISliderPropertyGridComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface ISliderGenericPropertyGridComponentProps {
        sliders: BABYLON.GUI.Slider[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class SliderGenericPropertyGridComponent extends React.Component<ISliderGenericPropertyGridComponentProps> {
        constructor(props: ISliderGenericPropertyGridComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IScrollViewerPropertyGridComponentProps {
        scrollViewers: BABYLON.GUI.ScrollViewer[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class ScrollViewerPropertyGridComponent extends React.Component<IScrollViewerPropertyGridComponentProps> {
        constructor(props: IScrollViewerPropertyGridComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IRectanglePropertyGridComponentProps {
        rectangles: BABYLON.GUI.Rectangle[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class RectanglePropertyGridComponent extends React.Component<IRectanglePropertyGridComponentProps> {
        constructor(props: IRectanglePropertyGridComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IRadioButtonPropertyGridComponentProps {
        radioButtons: BABYLON.GUI.RadioButton[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class RadioButtonPropertyGridComponent extends React.Component<IRadioButtonPropertyGridComponentProps> {
        constructor(props: IRadioButtonPropertyGridComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface ILinePropertyGridComponentProps {
        lines: BABYLON.GUI.Line[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class LinePropertyGridComponent extends React.Component<ILinePropertyGridComponentProps> {
        constructor(props: ILinePropertyGridComponentProps);
        onDashChange(value: string): void;
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IInputTextPropertyGridComponentProps {
        inputTexts: BABYLON.GUI.InputText[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class InputTextPropertyGridComponent extends React.Component<IInputTextPropertyGridComponentProps> {
        constructor(props: IInputTextPropertyGridComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IImagePropertyGridComponentProps {
        images: BABYLON.GUI.Image[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class ImagePropertyGridComponent extends React.Component<IImagePropertyGridComponentProps> {
        private _observers;
        constructor(props: IImagePropertyGridComponentProps);
        shouldComponentUpdate(nextProps: IImagePropertyGridComponentProps): boolean;
        updateObservers(oldImages: BABYLON.GUI.Image[], newImages: BABYLON.GUI.Image[]): void;
        componentWillUnmount(): void;
        toggleAnimations(on: boolean): void;
        getMaxCells(): number;
        updateCellSize(): void;
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IImageBasedSliderPropertyGridComponentProps {
        imageBasedSliders: BABYLON.GUI.ImageBasedSlider[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class ImageBasedSliderPropertyGridComponent extends React.Component<IImageBasedSliderPropertyGridComponentProps> {
        constructor(props: IImageBasedSliderPropertyGridComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IGridPropertyGridComponentProps {
        grids: BABYLON.GUI.Grid[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
        onUpdateRequiredObservable?: Observable<void>;
    }
    interface IGridPropertyComponentState {
        removingColumn: boolean;
        removingRow: boolean;
    }
    export class GridPropertyGridComponent extends React.Component<IGridPropertyGridComponentProps, IGridPropertyComponentState> {
        constructor(props: IGridPropertyGridComponentProps);
        private _previousGrid;
        private _rowDefinitions;
        private _rowEditFlags;
        private _columnEditFlags;
        private _columnDefinitions;
        private _editedRow;
        private _editedColumn;
        private _rowChild;
        private _columnChild;
        renderRows(): import("react/jsx-runtime").JSX.Element[];
        setRowValues(): void;
        setColumnValues(): void;
        renderColumns(): import("react/jsx-runtime").JSX.Element[];
        parsePercentage(value: string): number;
        isCloseTo(value: number, expected: number, epsilon?: number): boolean;
        adjustPercentages(definitions: string[], editFlags: boolean[]): string[];
        resizeRow(): void;
        resizeColumn(): void;
        checkValue(value: string, percent: boolean): string;
        checkPercentage(value: string): boolean;
        resetValues(): void;
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IEllipsePropertyGridComponentProps {
        ellipses: BABYLON.GUI.Ellipse[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class EllipsePropertyGridComponent extends React.Component<IEllipsePropertyGridComponentProps> {
        constructor(props: IEllipsePropertyGridComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IDisplayGridPropertyGridComponentProps {
        displayGrids: BABYLON.GUI.DisplayGrid[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class DisplayGridPropertyGridComponent extends React.Component<IDisplayGridPropertyGridComponentProps> {
        constructor(props: IDisplayGridPropertyGridComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IControlPropertyGridComponentProps {
        controls: BABYLON.GUI.Control[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class ControlPropertyGridComponent extends React.Component<IControlPropertyGridComponentProps> {
        constructor(props: IControlPropertyGridComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IContainerPropertyGridComponentProps {
        containers: BABYLON.GUI.Container[];
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
    }
    export class ContainerPropertyGridComponent extends React.Component<IContainerPropertyGridComponentProps> {
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface ICommonControlPropertyGridComponentProps {
        controls: BABYLON.GUI.Control[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        hideDimensions?: boolean;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    interface ICommonControlPropertyGridComponentState {
        fontFamilyOptions: IInspectableOptions[];
    }
    export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps, ICommonControlPropertyGridComponentState> {
        private _onPropertyChangedObserver;
        private _onFontsParsedObserver;
        private _onControlVisibilityChangedObservers;
        constructor(props: ICommonControlPropertyGridComponentProps);
        componentDidMount(): void;
        private _checkFontsInLayout;
        private _addFont;
        private _getTransformedReferenceCoordinate;
        private _updateAlignment;
        private _checkAndUpdateValues;
        private _addOrUpdateMetadata;
        private _removeFromMetadata;
        private _getCommonPropertyKeys;
        private _markChildrenAsDirty;
        componentWillUnmount(): void;
        _filterFontDuplicates(array: {
            label: string;
            value: string;
            id: string;
        }[]): {
            label: string;
            value: string;
            id: string;
        }[];
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IColorPickerPropertyGridComponentProps {
        colorPickers: BABYLON.GUI.ColorPicker[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class ColorPickerPropertyGridComponent extends React.Component<IColorPickerPropertyGridComponentProps> {
        constructor(props: IColorPickerPropertyGridComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface ICheckboxPropertyGridComponentProps {
        checkboxes: BABYLON.GUI.Checkbox[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class CheckboxPropertyGridComponent extends React.Component<ICheckboxPropertyGridComponentProps> {
        constructor(props: ICheckboxPropertyGridComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IButtonPropertyGridComponentProps {
        rectangles: BABYLON.GUI.Rectangle[];
        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
        onPropertyChangedObservable?: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
        onAddComponent: (newComponent: string) => void;
        onFontsParsedObservable?: Observable<void>;
        globalState?: GlobalState;
    }
    export class ButtonPropertyGridComponent extends React.Component<IButtonPropertyGridComponentProps> {
        constructor(props: IButtonPropertyGridComponentProps);
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface ILogComponentProps {
        globalState: GlobalState;
    }
    export class LogEntry {
        message: string;
        isError: boolean;
        constructor(message: string, isError: boolean);
    }
    export class LogComponent extends React.Component<ILogComponentProps, {
        logs: LogEntry[];
    }> {
        private _consoleRef;
        constructor(props: ILogComponentProps);
        componentDidMount(): void;
        componentDidUpdate(): void;
        render(): import("react/jsx-runtime").JSX.Element;
    }


    interface IGuiListComponentProps {
        globalState: GlobalState;
    }
    export class GuiListComponent extends React.Component<IGuiListComponentProps, {
        filter: string;
    }> {
        private _onResetRequiredObserver;
        private static _Tooltips;
        constructor(props: IGuiListComponentProps);
        componentWillUnmount(): void;
        filterContent(filter: string): void;
        render(): import("react/jsx-runtime").JSX.Element;
    }



}
declare module BABYLON.GuiEditor.SharedUIComponents {
        /**
     * Copy all styles from a document to another document or shadow root
     * @param source document to copy styles from
     * @param target document or shadow root to copy styles to
     */
    export function CopyStyles(source: Document, target: DocumentOrShadowRoot): void;
    /**
     * Merges classNames by array of strings or conditions
     * @param classNames Array of className strings or truthy conditions
     * @returns A concatenated string, suitable for the className attribute
     */
    export function MergeClassNames(classNames: ClassNameCondition[]): string;
    /**
     * className (replicating React type) or a tuple with the second member being any truthy value ["className", true]
     */
    type ClassNameCondition = string | undefined | [string, any];



}
declare module BABYLON {


}
declare module BABYLON.GuiEditor.SharedUIComponents {
        export class StringTools {
        private static _SaveAs;
        private static _Click;
        /**
         * Download a string into a file that will be saved locally by the browser
         * @param document
         * @param content defines the string to download locally as a file
         * @param filename
         */
        static DownloadAsFile(document: HTMLDocument, content: string, filename: string): void;
    }



}
declare module BABYLON {


}
declare module BABYLON.GuiEditor.SharedUIComponents {
        export class PropertyChangedEvent {
        object: any;
        property: string;
        value: any;
        initialValue: any;
        allowNullValue?: boolean;
    }



}
declare module BABYLON {


}
declare module BABYLON.GuiEditor.SharedUIComponents {
        /**
     * Create a popup window
     * @param title default title for the popup
     * @param options options for the popup
     * @returns the parent control of the popup
     */
    export function CreatePopup(title: string, options: Partial<{
        onParentControlCreateCallback?: (parentControl: HTMLDivElement) => void;
        onWindowCreateCallback?: (newWindow: Window) => void;
        width?: number;
        height?: number;
    }>): HTMLDivElement | null;



}
declare module BABYLON {


}
declare module BABYLON.GuiEditor.SharedUIComponents {
        /**
     * Class handling undo / redo operations
     */
    export class HistoryStack implements IDisposable {
        private _historyStack;
        private _redoStack;
        private _activeData;
        private readonly _maxHistoryLength;
        private _locked;
        private _dataProvider;
        private _applyUpdate;
        /**
         * Gets or sets a boolean indicating if the stack is enabled
         */
        isEnabled: boolean;
        /**
         * Constructor
         * @param dataProv