babylonjs-gui-editor 5.0.0-rc.9 → 5.0.2

package/babylon.guiEditor.d.ts

@@ -0,0 +1,2046 @@
+
+declare module BABYLON.GuiEditor {
+    interface ICommandBarComponentProps {
+        globalState: GlobalState;
+    }
+    export class CommandBarComponent extends React.Component<ICommandBarComponentProps> {
+        private _sizeOption;
+        private _stopUpdating;
+        constructor(props: ICommandBarComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface ICommandButtonComponentProps {
+        tooltip: string;
+        shortcut?: string;
+        icon: string;
+        iconLabel?: string;
+        isActive: boolean;
+        onClick: () => void;
+        altStyle?: boolean;
+        disabled?: boolean;
+    }
+    export class CommandButtonComponent extends React.Component<ICommandButtonComponentProps> {
+        constructor(props: ICommandButtonComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface ICommandDropdownComponentProps {
+        globalState: GlobalState;
+        icon?: string;
+        tooltip: string;
+        defaultValue?: string;
+        items: {
+            label: string;
+            icon?: string;
+            fileButton?: 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(): 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(): 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[];
+    }> {
+        constructor(props: ILogComponentProps);
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        render(): JSX.Element;
+    }
+
+
+    interface IParentingPropertyGridComponentProps {
+        control: BABYLON.GUI.Control;
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class ParentingPropertyGridComponent extends React.Component<IParentingPropertyGridComponentProps> {
+        constructor(props: IParentingPropertyGridComponentProps);
+        private _columnNumber;
+        private _rowNumber;
+        updateGridPosition(): void;
+        getCellInfo(): void;
+        private _changeCell;
+        render(): JSX.Element;
+    }
+
+
+    interface IButtonPropertyGridComponentProps {
+        rectangles: BABYLON.GUI.Rectangle[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+        onAddComponent: (newComponent: string) => void;
+    }
+    export class ButtonPropertyGridComponent extends React.Component<IButtonPropertyGridComponentProps> {
+        constructor(props: IButtonPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface ICheckboxPropertyGridComponentProps {
+        checkboxes: BABYLON.GUI.Checkbox[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class CheckboxPropertyGridComponent extends React.Component<ICheckboxPropertyGridComponentProps> {
+        constructor(props: ICheckboxPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IColorPickerPropertyGridComponentProps {
+        colorPickers: BABYLON.GUI.ColorPicker[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class ColorPickerPropertyGridComponent extends React.Component<IColorPickerPropertyGridComponentProps> {
+        constructor(props: IColorPickerPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface ICommonControlPropertyGridComponentProps {
+        controls: BABYLON.GUI.Control[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+        hideDimensions?: boolean;
+    }
+    export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
+        private _onPropertyChangedObserver;
+        constructor(props: ICommonControlPropertyGridComponentProps);
+        private _getTransformedReferenceCoordinate;
+        private _updateAlignment;
+        private _checkAndUpdateValues;
+        private _markChildrenAsDirty;
+        componentWillUnmount(): void;
+        render(): JSX.Element;
+    }
+
+
+    interface IContainerPropertyGridComponentProps {
+        containers: BABYLON.GUI.Container[];
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class ContainerPropertyGridComponent extends React.Component<IContainerPropertyGridComponentProps> {
+        render(): JSX.Element;
+    }
+
+
+    interface IControlPropertyGridComponentProps {
+        controls: BABYLON.GUI.Control[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class ControlPropertyGridComponent extends React.Component<IControlPropertyGridComponentProps> {
+        constructor(props: IControlPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IDisplayGridPropertyGridComponentProps {
+        displayGrids: BABYLON.GUI.DisplayGrid[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class DisplayGridPropertyGridComponent extends React.Component<IDisplayGridPropertyGridComponentProps> {
+        constructor(props: IDisplayGridPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IEllipsePropertyGridComponentProps {
+        ellipses: BABYLON.GUI.Ellipse[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class EllipsePropertyGridComponent extends React.Component<IEllipsePropertyGridComponentProps> {
+        constructor(props: IEllipsePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IGridPropertyGridComponentProps {
+        grids: BABYLON.GUI.Grid[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class GridPropertyGridComponent extends React.Component<IGridPropertyGridComponentProps> {
+        constructor(props: IGridPropertyGridComponentProps);
+        private _removingColumn;
+        private _removingRow;
+        private _previousGrid;
+        private _rowDefinitions;
+        private _rowEditFlags;
+        private _columnEditFlags;
+        private _columnDefinitions;
+        private _editedRow;
+        private _editedColumn;
+        private _rowChild;
+        private _columnChild;
+        renderRows(): JSX.Element[];
+        setRowValues(): void;
+        setColumnValues(): void;
+        renderColumns(): JSX.Element[];
+        resizeRow(): void;
+        resizeColumn(): void;
+        checkValue(value: string, percent: boolean): string;
+        checkPercentage(value: string): boolean;
+        resetValues(): void;
+        render(): JSX.Element;
+    }
+
+
+    interface IImageBasedSliderPropertyGridComponentProps {
+        imageBasedSliders: BABYLON.GUI.ImageBasedSlider[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class ImageBasedSliderPropertyGridComponent extends React.Component<IImageBasedSliderPropertyGridComponentProps> {
+        constructor(props: IImageBasedSliderPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IImagePropertyGridComponentProps {
+        images: BABYLON.GUI.Image[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    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(): JSX.Element;
+    }
+
+
+    interface IInputTextPropertyGridComponentProps {
+        inputTexts: BABYLON.GUI.InputText[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class InputTextPropertyGridComponent extends React.Component<IInputTextPropertyGridComponentProps> {
+        constructor(props: IInputTextPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface ILinePropertyGridComponentProps {
+        lines: BABYLON.GUI.Line[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class LinePropertyGridComponent extends React.Component<ILinePropertyGridComponentProps> {
+        constructor(props: ILinePropertyGridComponentProps);
+        onDashChange(value: string): void;
+        render(): JSX.Element;
+    }
+
+
+    interface IRadioButtonPropertyGridComponentProps {
+        radioButtons: BABYLON.GUI.RadioButton[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class RadioButtonPropertyGridComponent extends React.Component<IRadioButtonPropertyGridComponentProps> {
+        constructor(props: IRadioButtonPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IRectanglePropertyGridComponentProps {
+        rectangles: BABYLON.GUI.Rectangle[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class RectanglePropertyGridComponent extends React.Component<IRectanglePropertyGridComponentProps> {
+        constructor(props: IRectanglePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IScrollViewerPropertyGridComponentProps {
+        scrollViewers: BABYLON.GUI.ScrollViewer[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class ScrollViewerPropertyGridComponent extends React.Component<IScrollViewerPropertyGridComponentProps> {
+        constructor(props: IScrollViewerPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface ISliderGenericPropertyGridComponentProps {
+        sliders: BABYLON.GUI.Slider[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class SliderGenericPropertyGridComponent extends React.Component<ISliderGenericPropertyGridComponentProps> {
+        constructor(props: ISliderGenericPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface ISliderPropertyGridComponentProps {
+        sliders: (Slider | BABYLON.GUI.ImageBasedSlider)[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class SliderPropertyGridComponent extends React.Component<ISliderPropertyGridComponentProps> {
+        constructor(props: ISliderPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IStackPanelPropertyGridComponentProps {
+        stackPanels: BABYLON.GUI.StackPanel[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class StackPanelPropertyGridComponent extends React.Component<IStackPanelPropertyGridComponentProps> {
+        constructor(props: IStackPanelPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface ITextBlockPropertyGridComponentProps {
+        textBlocks: BABYLON.GUI.TextBlock[];
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+    }
+    export class TextBlockPropertyGridComponent extends React.Component<ITextBlockPropertyGridComponentProps> {
+        constructor(props: ITextBlockPropertyGridComponentProps);
+        render(): 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;
+        save(saveCallback: () => void): void;
+        saveLocally: () => void;
+        saveToSnippetServerHelper: (content: string, adt: BABYLON.GUI.AdvancedDynamicTexture) => Promise<string>;
+        saveToSnippetServer: () => Promise<void>;
+        loadFromSnippet(): void;
+        renderNode(nodes: BABYLON.GUI.Control[]): JSX.Element;
+        /**
+         * returns the class name of a list of controls if they share a class, or an empty string if not
+         * @param nodes
+         */
+        getControlsCommonClassName(nodes: BABYLON.GUI.Control[]): string;
+        renderProperties(nodes: BABYLON.GUI.Control[]): JSX.Element | undefined;
+        renderControlIcon(nodes: BABYLON.GUI.Control[]): string;
+        render(): JSX.Element | null;
+    }
+
+
+    interface IControlTreeItemComponentProps {
+        control: BABYLON.GUI.Control;
+        extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
+        onClick: () => void;
+        globalState: GlobalState;
+        isHovered: boolean;
+        isDragOver: boolean;
+        dragOverLocation: DragOverLocation;
+    }
+    export class ControlTreeItemComponent extends React.Component<IControlTreeItemComponentProps, {
+        isActive: boolean;
+        isVisible: boolean;
+        isRenaming: boolean;
+    }> {
+        constructor(props: IControlTreeItemComponentProps);
+        highlight(): void;
+        switchVisibility(): void;
+        onRename(name: string): void;
+        render(): JSX.Element;
+    }
+
+
+    interface IExtensionsComponentProps {
+        target: any;
+        extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
+    }
+    export class ExtensionsComponent extends React.Component<IExtensionsComponentProps, {
+        popupVisible: boolean;
+    }> {
+        private _popup;
+        private _extensionRef;
+        constructor(props: IExtensionsComponentProps);
+        showPopup(): void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        render(): JSX.Element | null;
+    }
+
+
+    interface ISceneExplorerFilterComponentProps {
+        onFilter: (filter: string) => void;
+    }
+    export class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
+        constructor(props: ISceneExplorerFilterComponentProps);
+        render(): JSX.Element;
+    }
+    interface ISceneExplorerComponentProps {
+        scene?: BABYLON.Scene;
+        noCommands?: boolean;
+        noHeader?: boolean;
+        noExpand?: boolean;
+        noClose?: boolean;
+        extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
+        globalState: GlobalState;
+        popupMode?: boolean;
+        onPopup?: () => void;
+        onClose?: () => void;
+    }
+    export class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
+        filter: BABYLON.Nullable<string>;
+        selectedEntity: any;
+        scene: BABYLON.Nullable<BABYLON.Scene>;
+    }> {
+        private _onSelectionChangeObserver;
+        private _onParrentingChangeObserver;
+        private _onNewSceneObserver;
+        private _onPropertyChangedObservable;
+        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(): JSX.Element | null;
+        onClose(): void;
+        onPopup(): void;
+        render(): JSX.Element;
+    }
+
+
+    export interface ITreeItemComponentProps {
+        items?: BABYLON.Nullable<any[]>;
+        label: string;
+        offset: number;
+        filter: BABYLON.Nullable<string>;
+        forceSubitems?: boolean;
+        globalState: GlobalState;
+        entity?: any;
+        selectedEntities: any[];
+        extensibilityGroups?: BABYLON.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(): JSX.Element | null;
+        render(): JSX.Element;
+    }
+
+
+    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(): JSX.Element;
+    }
+
+
+    export interface ITreeItemSelectableComponentProps {
+        entity: any;
+        selectedEntities: any[];
+        mustExpand?: boolean;
+        offset: number;
+        globalState: GlobalState;
+        extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
+        filter: BABYLON.Nullable<string>;
+    }
+    export interface ITreeItemSelectableComponentState {
+        dragOver: boolean;
+        isSelected: boolean;
+        isHovered: boolean;
+        dragOverLocation: DragOverLocation;
+    }
+    export class TreeItemSelectableComponent extends React.Component<ITreeItemSelectableComponentProps, ITreeItemSelectableComponentState> {
+        private _onSelectionChangedObservable;
+        private _onDraggingEndObservable;
+        private _onDraggingStartObservable;
+        /** 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): (JSX.Element | null)[] | null;
+        render(): JSX.Element | (JSX.Element | null)[] | null;
+        dragOver(event: React.DragEvent<HTMLDivElement>): void;
+        updateDragOverLocation(event: React.DragEvent<HTMLDivElement>): void;
+        drop(): void;
+    }
+
+
+    export var ControlTypes: {
+        className: string;
+        icon: string;
+    }[];
+
+
+    interface IArtBoardProps {
+        globalState: GlobalState;
+    }
+    interface IArtBoardState {
+        bounds: Rect;
+    }
+    export class ArtBoardComponent extends React.Component<IArtBoardProps, IArtBoardState> {
+        constructor(props: IArtBoardProps);
+        update(): void;
+        render(): JSX.Element;
+    }
+
+
+    export type DimensionProperties = "width" | "left" | "height" | "top" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" | "fontSize";
+    export class Rect {
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        constructor(left: number, top: number, right: number, bottom: number);
+        clone(): Rect;
+        get center(): BABYLON.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): BABYLON.Vector2;
+        static GetRotation(node: BABYLON.GUI.Control, relative?: boolean): number;
+        /**
+         * 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?: BABYLON.Vector2, storedValues?: Rect, stopAt?: BABYLON.GUI.Control): BABYLON.Vector2;
+        static RttToLocalNodeSpace(node: BABYLON.GUI.Control, x: number, y: number, reference?: BABYLON.Vector2, storedValues?: Rect): BABYLON.Vector2;
+        static RttToCanvasSpace(x: number, y: number): BABYLON.Vector2;
+        static MousePointerToRTTSpace(node: BABYLON.GUI.Control, x?: number, y?: number): BABYLON.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?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>): void;
+        static Round(value: number): number;
+        static ConvertToPixels(guiControl: BABYLON.GUI.Control, properties?: DimensionProperties[], onPropertyChangedObservable?: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>): void;
+    }
+
+
+    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
+         * @param force should the update be forced. otherwise it will be updated only when the pointer is down
+         */
+        updateGizmo(): void;
+        private _onUp;
+        private _onMove;
+        private _rotate;
+        private _dragLocalBounds;
+        private _updateNodeFromLocalBounds;
+        private _beginDraggingScalePoint;
+        private _beginRotate;
+        render(): JSX.Element;
+    }
+
+
+    /// <reference types="react" />
+    interface IGizmoLineProps {
+        globalState: GlobalState;
+        control: BABYLON.GUI.Line;
+    }
+    export function GizmoLine(props: IGizmoLineProps): JSX.Element;
+
+
+    /// <reference types="react" />
+    export enum ScalePointPosition {
+        Top = -1,
+        Left = -1,
+        Center = 0,
+        Right = 1,
+        Bottom = 1
+    }
+    export interface IScalePoint {
+        position: BABYLON.Vector2;
+        horizontalPosition: ScalePointPosition;
+        verticalPosition: ScalePointPosition;
+        rotation: number;
+        isPivot: boolean;
+        defaultRotation: number;
+    }
+    interface IGizmoScalePointProps {
+        scalePoint: IScalePoint;
+        clickable: boolean;
+        key: number;
+        onDrag: () => void;
+        onRotate: () => void;
+        onUp: () => void;
+        overrideCursor?: string;
+        canRotate: boolean;
+    }
+    export function GizmoScalePoint(props: IGizmoScalePointProps): JSX.Element;
+
+
+    export interface IGizmoWrapperProps {
+        globalState: GlobalState;
+    }
+    export class GizmoWrapper extends React.Component<IGizmoWrapperProps> {
+        observer: BABYLON.Nullable<BABYLON.Observer<void>>;
+        componentWillMount(): void;
+        componentWillUnmount(): void;
+        render(): JSX.Element;
+    }
+
+
+    export interface IWorkbenchComponentProps {
+        globalState: GlobalState;
+    }
+    export enum ConstraintDirection {
+        NONE = 0,
+        X = 2,
+        Y = 3
+    }
+    export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps> {
+        private _rootContainer;
+        private _setConstraintDirection;
+        private _mouseStartPoint;
+        _scene: BABYLON.Scene;
+        private _constraintDirection;
+        private _panning;
+        private _isOverGUINode;
+        private _engine;
+        private _liveRenderObserver;
+        private _guiRenderObserver;
+        private _doubleClick;
+        _liveGuiTextureRerender: boolean;
+        private _controlsHit;
+        private _pointerTravelDistance;
+        private _processSelectionOnUp;
+        private _visibleRegionContainer;
+        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 _nextLiveGuiRender;
+        private _liveGuiRerenderDelay;
+        private _defaultGUISize;
+        private _initialPanningOffset;
+        private _panningOffset;
+        private _zoomFactor;
+        private _zoomModeIncrement;
+        private _guiSize;
+        get guiSize(): BABYLON.ISize;
+        set guiSize(value: BABYLON.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;
+        loadFromSnippet(snippetId: string): Promise<void>;
+        loadToEditor(): void;
+        updateNodeOutlines(): void;
+        appendBlock(guiElement: BABYLON.GUI.Control): BABYLON.GUI.Control;
+        private parent;
+        private _reorderGrid;
+        private _isNotChildInsert;
+        private _adjustParentingIndex;
+        isSelected(value: boolean, guiNode: BABYLON.GUI.Control): void;
+        clicked: boolean;
+        _onMove(guiControl: BABYLON.GUI.Control, evt: BABYLON.Vector2, startPos: BABYLON.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;
+        createGUICanvas(): void;
+        synchronizeLiveGUI(): void;
+        addControls(scene: BABYLON.Scene): void;
+        panning(): void;
+        moveControls(moveHorizontal: boolean, amount: number): void;
+        zoomWheel(event: React.WheelEvent): void;
+        zooming(delta: number): void;
+        zeroIfClose(vec: BABYLON.Vector3): void;
+        render(): JSX.Element;
+    }
+
+
+    /// <reference types="react" />
+    export enum DragOverLocation {
+        ABOVE = 0,
+        BELOW = 1,
+        CENTER = 2,
+        NONE = 3
+    }
+    export enum GUIEditorTool {
+        SELECT = 0,
+        PAN = 1,
+        ZOOM = 2
+    }
+    export class GlobalState {
+        liveGuiTexture: BABYLON.Nullable<BABYLON.GUI.AdvancedDynamicTexture>;
+        guiTexture: BABYLON.GUI.AdvancedDynamicTexture;
+        hostElement: HTMLElement;
+        hostDocument: HTMLDocument;
+        hostWindow: Window;
+        selectedControls: BABYLON.GUI.Control[];
+        onSelectionChangedObservable: BABYLON.Observable<void>;
+        onResizeObservable: BABYLON.Observable<BABYLON.ISize>;
+        onBuiltObservable: BABYLON.Observable<void>;
+        onResetRequiredObservable: BABYLON.Observable<void>;
+        onUpdateRequiredObservable: BABYLON.Observable<void>;
+        onLogRequiredObservable: BABYLON.Observable<LogEntry>;
+        onErrorMessageDialogRequiredObservable: BABYLON.Observable<string>;
+        onIsLoadingChanged: BABYLON.Observable<boolean>;
+        onSelectionBoxMoved: BABYLON.Observable<ClientRect | DOMRect>;
+        onNewSceneObservable: BABYLON.Observable<BABYLON.Nullable<BABYLON.Scene>>;
+        onGuiNodeRemovalObservable: BABYLON.Observable<BABYLON.GUI.Control>;
+        onPopupClosedObservable: BABYLON.Observable<void>;
+        private _backgroundColor;
+        private _outlines;
+        keys: KeyboardManager;
+        /** DO NOT USE: in the process of removing */
+        blockKeyboardEvents: boolean;
+        onOutlineChangedObservable: BABYLON.Observable<void>;
+        controlCamera: boolean;
+        selectionLock: boolean;
+        workbench: WorkbenchComponent;
+        onPropertyChangedObservable: BABYLON.Observable<BABYLON.SharedUIComponents.PropertyChangedEvent>;
+        private _tool;
+        onToolChangeObservable: BABYLON.Observable<void>;
+        get tool(): GUIEditorTool;
+        set tool(newTool: GUIEditorTool);
+        onFitControlsToWindowObservable: BABYLON.Observable<void>;
+        onReframeWindowObservable: BABYLON.Observable<void>;
+        onLoadObservable: BABYLON.Observable<File>;
+        onSaveObservable: BABYLON.Observable<void>;
+        onSnippetLoadObservable: BABYLON.Observable<void>;
+        onSnippetSaveObservable: BABYLON.Observable<void>;
+        onResponsiveChangeObservable: BABYLON.Observable<boolean>;
+        onParentingChangeObservable: BABYLON.Observable<BABYLON.Nullable<BABYLON.GUI.Control>>;
+        onDropObservable: BABYLON.Observable<void>;
+        onPropertyGridUpdateRequiredObservable: BABYLON.Observable<void>;
+        onDraggingEndObservable: BABYLON.Observable<void>;
+        onDraggingStartObservable: BABYLON.Observable<void>;
+        onWindowResizeObservable: BABYLON.Observable<void>;
+        onGizmoUpdateRequireObservable: BABYLON.Observable<void>;
+        onArtBoardUpdateRequiredObservable: BABYLON.Observable<void>;
+        onBackgroundColorChangeObservable: BABYLON.Observable<void>;
+        onPointerMoveObservable: BABYLON.Observable<import("react").PointerEvent<HTMLCanvasElement>>;
+        onPointerUpObservable: BABYLON.Observable<BABYLON.Nullable<PointerEvent | import("react").PointerEvent<HTMLCanvasElement>>>;
+        draggedControl: BABYLON.Nullable<BABYLON.GUI.Control>;
+        draggedControlDirection: DragOverLocation;
+        onCopyObservable: BABYLON.Observable<(content: string) => void>;
+        onCutObservable: BABYLON.Observable<(content: string) => void>;
+        onPasteObservable: BABYLON.Observable<string>;
+        isSaving: boolean;
+        lockObject: BABYLON.SharedUIComponents.LockObject;
+        storeEditorData: (serializationObject: any) => void;
+        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(): BABYLON.Color3;
+        set backgroundColor(value: BABYLON.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;
+    }
+
+
+    /**
+     * 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?: BABYLON.Observable<any>;
+    }
+    /**
+     * Class used to create a gui editor
+     */
+    export class GUIEditor {
+        private static _CurrentState;
+        /**
+         * Show the gui editor
+         * @param options defines the options to use to configure the gui editor
+         */
+        static Show(options: IGUIEditorOptions): Promise<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;
+    }
+
+
+
+
+    type Key = "control" | "shift" | "alt" | "space" | "meta";
+    export class KeyboardManager {
+        private _hostElement;
+        private _kdListener;
+        private _kuListener;
+        private _moveListener;
+        private _focusOutListener;
+        private _keys;
+        onKeyPressedObservable: BABYLON.Observable<Key>;
+        constructor(hostElement: HTMLElement | HTMLDocument);
+        private _keyEvent;
+        private _updateModifierKeys;
+        private _setKeyDown;
+        private _clearKeys;
+        isKeyDown(key: Key): boolean;
+        dispose(): void;
+    }
+
+
+    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;
+        };
+    }
+
+
+    interface IPortalProps {
+        globalState: GlobalState;
+    }
+    export class Portal extends React.Component<IPortalProps> {
+        render(): React.ReactPortal;
+    }
+
+
+    interface IMessageDialogComponentProps {
+        globalState: GlobalState;
+    }
+    export class MessageDialogComponent extends React.Component<IMessageDialogComponentProps, {
+        message: string;
+        isError: boolean;
+    }> {
+        constructor(props: IMessageDialogComponentProps);
+        render(): JSX.Element | null;
+    }
+
+
+    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): BABYLON.Vector2;
+        static ReorderGrid(grid: BABYLON.GUI.Grid, index: number, control: BABYLON.GUI.Control, cell: BABYLON.Vector2): void;
+    }
+
+
+    interface IGraphEditorProps {
+        globalState: GlobalState;
+    }
+    interface IGraphEditorState {
+        showPreviewPopUp: boolean;
+    }
+    export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
+        private _moveInProgress;
+        private _leftWidth;
+        private _rightWidth;
+        private _popUpWindow;
+        private _draggedItem;
+        private _rootRef;
+        componentDidMount(): 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;
+        createPopupWindow: (title: string, windowVariableName: string, width?: number, height?: number) => Window | null;
+        copyStyles: (sourceDoc: HTMLDocument, targetDoc: HTMLDocument) => void;
+        render(): JSX.Element;
+        onCreate(value: string): BABYLON.GUI.Control;
+        createToolbar(): JSX.Element;
+    }
+
+
+    export interface IColorComponentEntryProps {
+        value: number;
+        label: string;
+        max?: number;
+        min?: number;
+        onChange: (value: number) => void;
+        disabled?: boolean;
+    }
+    export class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
+        constructor(props: IColorComponentEntryProps);
+        updateValue(valueString: string): void;
+        render(): JSX.Element;
+    }
+
+
+    /**
+     * Interface used to specify creation options for color picker
+     */
+    export interface IColorPickerProps {
+        color: BABYLON.Color3 | BABYLON.Color4;
+        linearhint?: boolean;
+        debugMode?: boolean;
+        onColorChanged?: (color: BABYLON.Color3 | BABYLON.Color4) => void;
+    }
+    /**
+     * Interface used to specify creation options for color picker
+     */
+    export interface IColorPickerState {
+        color: BABYLON.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;
+    }
+
+
+    export interface IHexColorProps {
+        value: string;
+        expectedLength: number;
+        onChange: (value: string) => 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 interface IBooleanLineComponentProps {
+        label: string;
+        value: boolean;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {
+        constructor(props: IBooleanLineComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    export interface IButtonLineComponentProps {
+        label: string;
+        onClick: () => void;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
+        constructor(props: IButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    export interface ICheckBoxLineComponentProps {
+        label?: string;
+        target?: any;
+        propertyName?: string;
+        isSelected?: () => boolean;
+        onSelect?: (value: boolean) => void;
+        onValueChanged?: () => void;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+        disabled?: boolean;
+        icon?: string;
+        iconLabel?: string;
+        faIcons?: {
+            enabled: any;
+            disabled: any;
+        };
+        large?: boolean;
+    }
+    export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
+        isSelected: boolean;
+        isDisabled?: boolean;
+        isConflict: boolean;
+    }> {
+        private _localChange;
+        constructor(props: ICheckBoxLineComponentProps);
+        shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
+            isSelected: boolean;
+            isDisabled: boolean;
+            isConflict: boolean;
+        }): boolean;
+        onChange(): void;
+        render(): JSX.Element;
+    }
+
+
+    export interface IColor3LineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+        isLinear?: boolean;
+        icon?: string;
+        lockObject?: LockObject;
+        iconLabel?: string;
+        onValueChange?: (value: string) => void;
+    }
+    export class Color3LineComponent extends React.Component<IColor3LineComponentProps> {
+        render(): JSX.Element;
+    }
+
+
+    export interface IColor4LineComponentProps {
+        label: string;
+        target?: any;
+        propertyName: string;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+        onChange?: () => void;
+        isLinear?: boolean;
+        icon?: string;
+        iconLabel?: string;
+        lockObject?: LockObject;
+    }
+    export class Color4LineComponent extends React.Component<IColor4LineComponentProps> {
+        render(): JSX.Element;
+    }
+
+
+    export interface IColorLineComponentProps {
+        label: string;
+        target?: any;
+        propertyName: string;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+        onChange?: () => void;
+        isLinear?: boolean;
+        icon?: string;
+        iconLabel?: string;
+        lockObject?: LockObject;
+        disableAlpha?: boolean;
+    }
+    interface IColorLineComponentState {
+        isExpanded: boolean;
+        color: BABYLON.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;
+        }>): BABYLON.Color4;
+        setColorFromString(colorString: string): void;
+        setColor(newColor: BABYLON.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 interface IColorPickerComponentProps {
+        value: BABYLON.Color4 | BABYLON.Color3;
+        linearHint?: boolean;
+        onColorChanged: (newOne: string) => void;
+        icon?: string;
+        iconLabel?: string;
+        shouldPopRight?: boolean;
+    }
+    interface IColorPickerComponentState {
+        pickerEnabled: boolean;
+        color: BABYLON.Color3 | BABYLON.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 interface IButtonLineComponentProps {
+        data: string;
+        tooltip: string;
+    }
+    export class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
+        constructor(props: IButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IFileButtonLineComponentProps {
+        label: string;
+        onClick: (file: File) => void;
+        accept: string;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
+        private static _IDGenerator;
+        private _id;
+        private _uploadInputRef;
+        constructor(props: IFileButtonLineComponentProps);
+        onChange(evt: any): void;
+        render(): JSX.Element;
+    }
+
+
+    interface IFileMultipleButtonLineComponentProps {
+        label: string;
+        onClick: (event: any) => void;
+        accept: string;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class FileMultipleButtonLineComponent extends React.Component<IFileMultipleButtonLineComponentProps> {
+        private static _IDGenerator;
+        private _id;
+        private _uploadInputRef;
+        constructor(props: IFileMultipleButtonLineComponentProps);
+        onChange(evt: any): void;
+        render(): JSX.Element;
+    }
+
+
+    interface IFloatLineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        lockObject?: LockObject;
+        onChange?: (newValue: number) => void;
+        isInteger?: boolean;
+        onPropertyChangedObservable?: BABYLON.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;
+    }> {
+        private _localChange;
+        private _store;
+        constructor(props: IFloatLineComponentProps);
+        componentWillUnmount(): void;
+        getValueString(value: any): string;
+        shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: {
+            value: string;
+            dragging: boolean;
+        }): boolean;
+        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;
+    }
+
+
+    interface IHexLineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        lockObject?: LockObject;
+        onChange?: (newValue: number) => void;
+        isInteger?: boolean;
+        replaySourceReplacement?: string;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+        additionalClass?: string;
+        step?: string;
+        digits?: number;
+        useEuler?: boolean;
+        min?: number;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class HexLineComponent extends React.Component<IHexLineComponentProps, {
+        value: string;
+    }> {
+        private _localChange;
+        private _store;
+        private _propertyChange;
+        constructor(props: IHexLineComponentProps);
+        componentWillUnmount(): void;
+        shouldComponentUpdate(nextProps: IHexLineComponentProps, nextState: {
+            value: string;
+        }): boolean;
+        raiseOnPropertyChanged(newValue: number, previousValue: number): void;
+        convertToHexString(valueString: string): string;
+        updateValue(valueString: string, raisePropertyChanged: boolean): void;
+        lock(): void;
+        unlock(): void;
+        render(): JSX.Element;
+    }
+
+
+    export interface IIconButtonLineComponentProps {
+        icon: string;
+        onClick: () => void;
+        tooltip: string;
+        active?: boolean;
+    }
+    export class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {
+        constructor(props: IIconButtonLineComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IIconComponentProps {
+        icon: string;
+        label?: string;
+    }
+    export class IconComponent extends React.Component<IIconComponentProps> {
+        render(): JSX.Element;
+    }
+
+
+    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;
+    }
+
+
+    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;
+        render(): JSX.Element;
+    }
+
+
+    export interface ISelectedLineContainer {
+        selectedLineContainerTitles: Array<string>;
+        selectedLineContainerTitlesNoFocus: Array<string>;
+    }
+
+
+    interface ILineContainerComponentProps {
+        selection?: ISelectedLineContainer;
+        title: string;
+        children: any[] | any;
+        closed?: boolean;
+    }
+    export class LineContainerComponent extends React.Component<ILineContainerComponentProps, {
+        isExpanded: boolean;
+        isHighlighted: boolean;
+    }> {
+        constructor(props: ILineContainerComponentProps);
+        switchExpandedState(): void;
+        renderHeader(): JSX.Element;
+        componentDidMount(): void;
+        render(): JSX.Element;
+    }
+
+
+    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;
+    }
+
+
+    interface IMessageLineComponentProps {
+        text: string;
+        color?: string;
+        icon?: any;
+    }
+    export class MessageLineComponent extends React.Component<IMessageLineComponentProps> {
+        constructor(props: IMessageLineComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface INumericInputComponentProps {
+        label: string;
+        value: number;
+        step?: number;
+        onChange: (value: number) => void;
+        precision?: number;
+        icon?: string;
+        iconLabel?: string;
+    }
+    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 var Null_Value: number;
+    export interface IOptionsLineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        options: BABYLON.IInspectableOptions[];
+        noDirectUpdate?: boolean;
+        onSelect?: (value: number) => void;
+        extractValue?: () => number;
+        onPropertyChangedObservable?: BABYLON.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;
+    }
+
+
+    export class Popup {
+        static CreatePopup(title: string, windowVariableName: string, width?: number, height?: number): HTMLDivElement | null;
+        private static _CopyStyles;
+    }
+
+
+    interface IRadioButtonLineComponentProps {
+        onSelectionChangedObservable: BABYLON.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;
+    }
+
+
+    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?: BABYLON.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 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?: BABYLON.Observable<PropertyChangedEvent>, getProperty?: (target: Type, property: keyof Type) => any): any;
+
+
+    export interface ITextInputLineComponentProps {
+        label?: string;
+        lockObject?: LockObject;
+        target?: any;
+        propertyName?: string;
+        value?: string;
+        onChange?: (value: string) => void;
+        onPropertyChangedObservable?: BABYLON.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;
+    }
+
+
+    interface ITextLineComponentProps {
+        label?: string;
+        value?: string;
+        color?: string;
+        underline?: boolean;
+        onLink?: () => void;
+        url?: string;
+        ignoreValue?: boolean;
+        additionalClass?: string;
+        icon?: string;
+        iconLabel?: string;
+        tooltip?: string;
+    }
+    export class TextLineComponent extends React.Component<ITextLineComponentProps> {
+        constructor(props: ITextLineComponentProps);
+        onLink(): void;
+        renderContent(): JSX.Element | null;
+        render(): JSX.Element;
+    }
+
+
+    /// <reference types="react" />
+    interface IUnitButtonProps {
+        unit: string;
+        locked?: boolean;
+        onClick?: (unit: string) => void;
+    }
+    export function UnitButton(props: IUnitButtonProps): JSX.Element;
+
+
+    interface IValueLineComponentProps {
+        label: string;
+        value: number;
+        color?: string;
+        fractionDigits?: number;
+        units?: string;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class ValueLineComponent extends React.Component<IValueLineComponentProps> {
+        constructor(props: IValueLineComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IVector2LineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        step?: number;
+        onChange?: (newvalue: BABYLON.Vector2) => void;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class Vector2LineComponent extends React.Component<IVector2LineComponentProps, {
+        isExpanded: boolean;
+        value: BABYLON.Vector2;
+    }> {
+        static defaultProps: {
+            step: number;
+        };
+        private _localChange;
+        constructor(props: IVector2LineComponentProps);
+        shouldComponentUpdate(nextProps: IVector2LineComponentProps, nextState: {
+            isExpanded: boolean;
+            value: BABYLON.Vector2;
+        }): boolean;
+        switchExpandState(): void;
+        raiseOnPropertyChanged(previousValue: BABYLON.Vector2): void;
+        updateStateX(value: number): void;
+        updateStateY(value: number): void;
+        render(): JSX.Element;
+    }
+
+
+    interface IVector3LineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        step?: number;
+        onChange?: (newvalue: BABYLON.Vector3) => void;
+        useEuler?: boolean;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+        noSlider?: boolean;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class Vector3LineComponent extends React.Component<IVector3LineComponentProps, {
+        isExpanded: boolean;
+        value: BABYLON.Vector3;
+    }> {
+        static defaultProps: {
+            step: number;
+        };
+        private _localChange;
+        constructor(props: IVector3LineComponentProps);
+        getCurrentValue(): any;
+        shouldComponentUpdate(nextProps: IVector3LineComponentProps, nextState: {
+            isExpanded: boolean;
+            value: BABYLON.Vector3;
+        }): boolean;
+        switchExpandState(): void;
+        raiseOnPropertyChanged(previousValue: BABYLON.Vector3): void;
+        updateVector3(): void;
+        updateStateX(value: number): void;
+        updateStateY(value: number): void;
+        updateStateZ(value: number): void;
+        render(): JSX.Element;
+    }
+
+
+    interface IVector4LineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        step?: number;
+        onChange?: (newvalue: BABYLON.Vector4) => void;
+        useEuler?: boolean;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+        icon?: string;
+        iconLabel?: string;
+    }
+    export class Vector4LineComponent extends React.Component<IVector4LineComponentProps, {
+        isExpanded: boolean;
+        value: BABYLON.Vector4;
+    }> {
+        static defaultProps: {
+            step: number;
+        };
+        private _localChange;
+        constructor(props: IVector4LineComponentProps);
+        getCurrentValue(): any;
+        shouldComponentUpdate(nextProps: IVector4LineComponentProps, nextState: {
+            isExpanded: boolean;
+            value: BABYLON.Vector4;
+        }): boolean;
+        switchExpandState(): void;
+        raiseOnPropertyChanged(previousValue: BABYLON.Vector4): void;
+        updateVector4(): void;
+        updateStateX(value: number): void;
+        updateStateY(value: number): void;
+        updateStateZ(value: number): void;
+        updateStateW(value: number): void;
+        render(): JSX.Element;
+    }
+
+
+    export class PropertyChangedEvent {
+        object: any;
+        property: string;
+        value: any;
+        initialValue: any;
+        allowNullValue?: boolean;
+    }
+
+
+    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;
+    }
+
+
+    interface ICheckboxPropertyGridComponentProps {
+        checkbox: BABYLON.GUI.Checkbox;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class CheckboxPropertyGridComponent extends React.Component<ICheckboxPropertyGridComponentProps> {
+        constructor(props: ICheckboxPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IColorPickerPropertyGridComponentProps {
+        colorPicker: BABYLON.GUI.ColorPicker;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class ColorPickerPropertyGridComponent extends React.Component<IColorPickerPropertyGridComponentProps> {
+        constructor(props: IColorPickerPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface ICommonControlPropertyGridComponentProps {
+        controls?: BABYLON.GUI.Control[];
+        control?: BABYLON.GUI.Control;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
+        constructor(props: ICommonControlPropertyGridComponentProps);
+        renderGridInformation(control: BABYLON.GUI.Control): JSX.Element | null;
+        render(): JSX.Element | undefined;
+    }
+
+
+    interface IControlPropertyGridComponentProps {
+        control: BABYLON.GUI.Control;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class ControlPropertyGridComponent extends React.Component<IControlPropertyGridComponentProps> {
+        constructor(props: IControlPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IEllipsePropertyGridComponentProps {
+        ellipse: BABYLON.GUI.Ellipse;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class EllipsePropertyGridComponent extends React.Component<IEllipsePropertyGridComponentProps> {
+        constructor(props: IEllipsePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IGridPropertyGridComponentProps {
+        grid: BABYLON.GUI.Grid;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class GridPropertyGridComponent extends React.Component<IGridPropertyGridComponentProps> {
+        constructor(props: IGridPropertyGridComponentProps);
+        renderRows(): JSX.Element[];
+        renderColumns(): JSX.Element[];
+        render(): JSX.Element;
+    }
+
+
+    interface IImageBasedSliderPropertyGridComponentProps {
+        imageBasedSlider: BABYLON.GUI.ImageBasedSlider;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class ImageBasedSliderPropertyGridComponent extends React.Component<IImageBasedSliderPropertyGridComponentProps> {
+        constructor(props: IImageBasedSliderPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IImagePropertyGridComponentProps {
+        image: BABYLON.GUI.Image;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class ImagePropertyGridComponent extends React.Component<IImagePropertyGridComponentProps> {
+        constructor(props: IImagePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IInputTextPropertyGridComponentProps {
+        inputText: BABYLON.GUI.InputText;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class InputTextPropertyGridComponent extends React.Component<IInputTextPropertyGridComponentProps> {
+        constructor(props: IInputTextPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface ILinePropertyGridComponentProps {
+        line: BABYLON.GUI.Line;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class LinePropertyGridComponent extends React.Component<ILinePropertyGridComponentProps> {
+        constructor(props: ILinePropertyGridComponentProps);
+        onDashChange(value: string): void;
+        render(): JSX.Element;
+    }
+
+
+    interface IRadioButtonPropertyGridComponentProps {
+        radioButtons: BABYLON.GUI.RadioButton[];
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class RadioButtonPropertyGridComponent extends React.Component<IRadioButtonPropertyGridComponentProps> {
+        constructor(props: IRadioButtonPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IRectanglePropertyGridComponentProps {
+        rectangle: BABYLON.GUI.Rectangle;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class RectanglePropertyGridComponent extends React.Component<IRectanglePropertyGridComponentProps> {
+        constructor(props: IRectanglePropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IScrollViewerPropertyGridComponentProps {
+        scrollViewer: BABYLON.GUI.ScrollViewer;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class ScrollViewerPropertyGridComponent extends React.Component<IScrollViewerPropertyGridComponentProps> {
+        constructor(props: IScrollViewerPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface ISliderPropertyGridComponentProps {
+        slider: BABYLON.GUI.Slider;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class SliderPropertyGridComponent extends React.Component<ISliderPropertyGridComponentProps> {
+        constructor(props: ISliderPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface IStackPanelPropertyGridComponentProps {
+        stackPanel: BABYLON.GUI.StackPanel;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class StackPanelPropertyGridComponent extends React.Component<IStackPanelPropertyGridComponentProps> {
+        constructor(props: IStackPanelPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    interface ITextBlockPropertyGridComponentProps {
+        textBlock: BABYLON.GUI.TextBlock;
+        lockObject: LockObject;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class TextBlockPropertyGridComponent extends React.Component<ITextBlockPropertyGridComponentProps> {
+        constructor(props: ITextBlockPropertyGridComponentProps);
+        render(): JSX.Element;
+    }
+
+
+    /**
+     * Class used to provide lock mechanism
+     */
+    export class LockObject {
+        /**
+         * Gets or set if the lock is engaged
+         */
+        lock: boolean;
+    }
+
+
+
+}
+
+
+