babylonjs-node-editor 5.28.0 → 5.29.0

package/babylon.nodeEditor.d.ts

@@ -1239,6 +1239,405 @@ declare module BABYLON.NodeEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the DraggableIcon component.
+     */
+    export interface IDraggableIconProps {
+        /**
+         * Icon source
+         */
+        src: string;
+        /**
+         * Object that will be passed to the drag event
+         */
+        item: BABYLON.NodeEditor.SharedUIComponents.TabDrag;
+        /**
+         * Type of drag event
+         */
+        type: BABYLON.NodeEditor.SharedUIComponents.ElementTypes;
+    }
+    /**
+     * An icon that can be dragged by the user
+     */
+    export var DraggableIcon: React.FC<IDraggableIconProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the Column component.
+     */
+    export interface IFlexibleColumnProps {
+        /**
+         * Width of column
+         */
+        width: string;
+    }
+    /**
+     * This component represents a single column in the layout. It receives a width
+     * that it occupies and the content to display
+     * @param props
+     * @returns
+     */
+    export var FlexibleColumn: React.FC<IFlexibleColumnProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the DragHandler component.
+     */
+    export interface IFlexibleDragHandlerProps {
+        /**
+         * The size of the containing element. Used to calculate the percentage of
+         * space occupied by the component
+         */
+        containerSize: {
+            width: number;
+            height: number;
+        };
+    }
+    /**
+     * This component receives the drop events and updates the layout accordingly
+     */
+    export var FlexibleDragHandler: React.FC<IFlexibleDragHandlerProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the FlexibleDropZone component.
+     */
+    export interface IFlexibleDropZoneProps {
+        /**
+         * The row number of the component in the layout
+         */
+        rowNumber: number;
+        /**
+         * The column number of the component in the layout
+         */
+        columnNumber: number;
+    }
+    /**
+     * This component contains the drag and drop zone for the resize bars that
+     * allow redefining width and height of layout elements
+     */
+    export var FlexibleDropZone: React.FC<IFlexibleDropZoneProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the GridContainer component.
+     */
+    export interface IFlexibleGridContainerProps {
+    }
+    /**
+     * Component responsible for mapping the layout to the actual components
+     */
+    export var FlexibleGridContainer: React.FC<IFlexibleGridContainerProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the BABYLON.NodeEditor.SharedUIComponents.Layout component.
+     */
+    export interface IFlexibleGridLayoutProps {
+        /**
+         * A definition of the layout which can be changed by the user
+         */
+        layoutDefinition: BABYLON.NodeEditor.SharedUIComponents.Layout;
+    }
+    /**
+     * This component represents a grid layout that can be resized and rearranged
+     * by the user.
+     */
+    export var FlexibleGridLayout: React.FC<IFlexibleGridLayoutProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the ResizeBar component.
+     */
+    export interface IFlexibleRowResizerProps {
+        /**
+         * Row number of the component that is being resized
+         */
+        rowNumber: number;
+        /**
+         * Column number of the component being resized
+         */
+        columnNumber: number;
+        /**
+         * If the resizing happens in row or column direction
+         */
+        direction: BABYLON.NodeEditor.SharedUIComponents.ResizeDirections;
+    }
+    /**
+     * The item that will be sent to the drag event
+     */
+    export type ResizeItem = {
+        /**
+         * If the resizing happens in row or column direction
+         */
+        direction: BABYLON.NodeEditor.SharedUIComponents.ResizeDirections;
+        /**
+         * The row number of the component that is being resized
+         */
+        rowNumber: number;
+        /**
+         * the column number of the component being resized
+         */
+        columnNumber: number;
+    };
+    /**
+     * A component that renders a bar that the user can drag to resize.
+     */
+    export var FlexibleResizeBar: React.FC<IFlexibleRowResizerProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the FlexibleTab component.
+     */
+    export interface IFlexibleTabProps {
+        /**
+         * The tab's title.
+         */
+        title: string;
+        /**
+         * If the tab is currently selected or not
+         */
+        selected: boolean;
+        /**
+         * What happens when the user clicks on the tab
+         */
+        onClick: () => void;
+        /**
+         * The object that will be sent to the drag event
+         */
+        item: BABYLON.NodeEditor.SharedUIComponents.TabDrag;
+        /**
+         * What happens when the user drops another tab after this one
+         */
+        onTabDroppedAction: (item: BABYLON.NodeEditor.SharedUIComponents.TabDrag) => void;
+    }
+    /**
+     * A component that renders a tab that the user can click
+     * to activate or drag to reorder. It also listens for
+     * drop events if the user wants to drop another tab
+     * after it.
+     */
+    export var FlexibleTab: React.FC<IFlexibleTabProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the TabsContainer component.
+     */
+    export interface IFlexibleTabsContainerProps {
+        /**
+         * The tabs to display
+         */
+        tabs: BABYLON.NodeEditor.SharedUIComponents.LayoutTab[];
+        /**
+         * Row index of component in layout
+         */
+        rowIndex: number;
+        /**
+         * Column index of component in layout
+         */
+        columnIndex: number;
+        /**
+         * Which tab is selected in the layout
+         */
+        selectedTab?: string;
+    }
+    /**
+     * This component contains a set of tabs of which only one is visible at a time.
+     * The tabs can also be dragged from and to different containers.
+     */
+    export var FlexibleTabsContainer: React.FC<IFlexibleTabsContainerProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /// <reference types="react" />
+    export var LayoutContext: import("react").Context<{
+        /**
+         * The layout object
+         */
+        layout: BABYLON.NodeEditor.SharedUIComponents.Layout;
+        /**
+         * Function to set the layout object in the context
+         */
+        setLayout: (layout: BABYLON.NodeEditor.SharedUIComponents.Layout) => void;
+    }>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        export type LayoutTab = {
+        /**
+         * Tab id
+         */
+        id: string;
+        /**
+         * React component rendered by tab
+         */
+        component: React.ComponentType;
+    };
+    export type LayoutTabsRow = {
+        /**
+         * row id
+         */
+        id: string;
+        /**
+         * row height in its containing column
+         */
+        height: string;
+        /**
+         * selected tab in row
+         */
+        selectedTab: string;
+        /**
+         * list of tabs contained in row
+         */
+        tabs: LayoutTab[];
+    };
+    export type LayoutColumn = {
+        /**
+         * column id
+         */
+        id: string;
+        /**
+         * column width in the grid
+         */
+        width: string;
+        /**
+         * column rows
+         */
+        rows: LayoutTabsRow[];
+    };
+    export type Layout = {
+        /**
+         * layout columns
+         */
+        columns?: LayoutColumn[];
+    };
+    export type TabDrag = {
+        /**
+         * row number of the tab being dragged
+         */
+        rowNumber: number;
+        /**
+         * column number of the tab being dragged
+         */
+        columnNumber: number;
+        /**
+         * the tabs being dragged
+         */
+        tabs: {
+            /**
+             * id of tab being dragged
+             */
+            id: string;
+        }[];
+    };
+    export enum ElementTypes {
+        RESIZE_BAR = "0",
+        TAB = "1",
+        TAB_GROUP = "2",
+        NONE = "2"
+    }
+    export enum ResizeDirections {
+        ROW = "row",
+        COLUMN = "column"
+    }
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Given a column and row number in the layout, return the corresponding column/row
+     * @param layout
+     * @param column
+     * @param row
+     * @returns
+     */
+    export const getPosInLayout: (layout: BABYLON.NodeEditor.SharedUIComponents.Layout, column: number, row?: number | undefined) => LayoutColumn;
+    /**
+     * Remove a row in position row, column from the layout, and redistribute heights of remaining rows
+     * @param layout
+     * @param column
+     * @param row
+     */
+    export const removeLayoutRowAndRedistributePercentages: (layout: BABYLON.NodeEditor.SharedUIComponents.Layout, column: number, row: number) => void;
+    /**
+     * Add a percentage string to a number
+     */
+    export const addPercentageStringToNumber: (p1: string, p2: number) => number;
+    /**
+     * Parses a percentage string into a number
+     * @param p the percentage string
+     */
+    export const parsePercentage: (p: string) => number;
+
+
+
 }
 declare module BABYLON.NodeEditor {
 

package/babylon.nodeEditor.module.d.ts

@@ -1558,6 +1558,362 @@ export type LabelProps = {
 };
 export const Label: React.FC<LabelProps>;
 
+}
+declare module "babylonjs-node-editor/components/layout/DraggableIcon" {
+import { FC } from "react";
+import { ElementTypes, TabDrag } from "babylonjs-node-editor/components/layout/types";
+/**
+ * Arguments for the DraggableIcon component.
+ */
+export interface IDraggableIconProps {
+    /**
+     * Icon source
+     */
+    src: string;
+    /**
+     * Object that will be passed to the drag event
+     */
+    item: TabDrag;
+    /**
+     * Type of drag event
+     */
+    type: ElementTypes;
+}
+/**
+ * An icon that can be dragged by the user
+ */
+export const DraggableIcon: FC<IDraggableIconProps>;
+
+}
+declare module "babylonjs-node-editor/components/layout/FlexibleColumn" {
+import { FC } from "react";
+/**
+ * Arguments for the Column component.
+ */
+export interface IFlexibleColumnProps {
+    /**
+     * Width of column
+     */
+    width: string;
+}
+/**
+ * This component represents a single column in the layout. It receives a width
+ * that it occupies and the content to display
+ * @param props
+ * @returns
+ */
+export const FlexibleColumn: FC<IFlexibleColumnProps>;
+
+}
+declare module "babylonjs-node-editor/components/layout/FlexibleDragHandler" {
+import { FC } from "react";
+/**
+ * Arguments for the DragHandler component.
+ */
+export interface IFlexibleDragHandlerProps {
+    /**
+     * The size of the containing element. Used to calculate the percentage of
+     * space occupied by the component
+     */
+    containerSize: {
+        width: number;
+        height: number;
+    };
+}
+/**
+ * This component receives the drop events and updates the layout accordingly
+ */
+export const FlexibleDragHandler: FC<IFlexibleDragHandlerProps>;
+
+}
+declare module "babylonjs-node-editor/components/layout/FlexibleDropZone" {
+import { FC } from "react";
+/**
+ * Arguments for the FlexibleDropZone component.
+ */
+export interface IFlexibleDropZoneProps {
+    /**
+     * The row number of the component in the layout
+     */
+    rowNumber: number;
+    /**
+     * The column number of the component in the layout
+     */
+    columnNumber: number;
+}
+/**
+ * This component contains the drag and drop zone for the resize bars that
+ * allow redefining width and height of layout elements
+ */
+export const FlexibleDropZone: FC<IFlexibleDropZoneProps>;
+
+}
+declare module "babylonjs-node-editor/components/layout/FlexibleGridContainer" {
+import { FC } from "react";
+/**
+ * Arguments for the GridContainer component.
+ */
+export interface IFlexibleGridContainerProps {
+}
+/**
+ * Component responsible for mapping the layout to the actual components
+ */
+export const FlexibleGridContainer: FC<IFlexibleGridContainerProps>;
+
+}
+declare module "babylonjs-node-editor/components/layout/FlexibleGridLayout" {
+import { FC } from "react";
+import { Layout } from "babylonjs-node-editor/components/layout/types";
+/**
+ * Arguments for the Layout component.
+ */
+export interface IFlexibleGridLayoutProps {
+    /**
+     * A definition of the layout which can be changed by the user
+     */
+    layoutDefinition: Layout;
+}
+/**
+ * This component represents a grid layout that can be resized and rearranged
+ * by the user.
+ */
+export const FlexibleGridLayout: FC<IFlexibleGridLayoutProps>;
+
+}
+declare module "babylonjs-node-editor/components/layout/FlexibleResizeBar" {
+import { FC } from "react";
+import { ResizeDirections } from "babylonjs-node-editor/components/layout/types";
+/**
+ * Arguments for the ResizeBar component.
+ */
+export interface IFlexibleRowResizerProps {
+    /**
+     * Row number of the component that is being resized
+     */
+    rowNumber: number;
+    /**
+     * Column number of the component being resized
+     */
+    columnNumber: number;
+    /**
+     * If the resizing happens in row or column direction
+     */
+    direction: ResizeDirections;
+}
+/**
+ * The item that will be sent to the drag event
+ */
+export type ResizeItem = {
+    /**
+     * If the resizing happens in row or column direction
+     */
+    direction: ResizeDirections;
+    /**
+     * The row number of the component that is being resized
+     */
+    rowNumber: number;
+    /**
+     * the column number of the component being resized
+     */
+    columnNumber: number;
+};
+/**
+ * A component that renders a bar that the user can drag to resize.
+ */
+export const FlexibleResizeBar: FC<IFlexibleRowResizerProps>;
+
+}
+declare module "babylonjs-node-editor/components/layout/FlexibleTab" {
+import { FC } from "react";
+import { TabDrag } from "babylonjs-node-editor/components/layout/types";
+/**
+ * Arguments for the FlexibleTab component.
+ */
+export interface IFlexibleTabProps {
+    /**
+     * The tab's title.
+     */
+    title: string;
+    /**
+     * If the tab is currently selected or not
+     */
+    selected: boolean;
+    /**
+     * What happens when the user clicks on the tab
+     */
+    onClick: () => void;
+    /**
+     * The object that will be sent to the drag event
+     */
+    item: TabDrag;
+    /**
+     * What happens when the user drops another tab after this one
+     */
+    onTabDroppedAction: (item: TabDrag) => void;
+}
+/**
+ * A component that renders a tab that the user can click
+ * to activate or drag to reorder. It also listens for
+ * drop events if the user wants to drop another tab
+ * after it.
+ */
+export const FlexibleTab: FC<IFlexibleTabProps>;
+
+}
+declare module "babylonjs-node-editor/components/layout/FlexibleTabsContainer" {
+import { FC } from "react";
+import { LayoutTab } from "babylonjs-node-editor/components/layout/types";
+/**
+ * Arguments for the TabsContainer component.
+ */
+export interface IFlexibleTabsContainerProps {
+    /**
+     * The tabs to display
+     */
+    tabs: LayoutTab[];
+    /**
+     * Row index of component in layout
+     */
+    rowIndex: number;
+    /**
+     * Column index of component in layout
+     */
+    columnIndex: number;
+    /**
+     * Which tab is selected in the layout
+     */
+    selectedTab?: string;
+}
+/**
+ * This component contains a set of tabs of which only one is visible at a time.
+ * The tabs can also be dragged from and to different containers.
+ */
+export const FlexibleTabsContainer: FC<IFlexibleTabsContainerProps>;
+
+}
+declare module "babylonjs-node-editor/components/layout/LayoutContext" {
+/// <reference types="react" />
+import { Layout } from "babylonjs-node-editor/components/layout/types";
+export const LayoutContext: import("react").Context<{
+    /**
+     * The layout object
+     */
+    layout: Layout;
+    /**
+     * Function to set the layout object in the context
+     */
+    setLayout: (layout: Layout) => void;
+}>;
+
+}
+declare module "babylonjs-node-editor/components/layout/types" {
+import { ComponentType } from "react";
+export type LayoutTab = {
+    /**
+     * Tab id
+     */
+    id: string;
+    /**
+     * React component rendered by tab
+     */
+    component: ComponentType;
+};
+export type LayoutTabsRow = {
+    /**
+     * row id
+     */
+    id: string;
+    /**
+     * row height in its containing column
+     */
+    height: string;
+    /**
+     * selected tab in row
+     */
+    selectedTab: string;
+    /**
+     * list of tabs contained in row
+     */
+    tabs: LayoutTab[];
+};
+export type LayoutColumn = {
+    /**
+     * column id
+     */
+    id: string;
+    /**
+     * column width in the grid
+     */
+    width: string;
+    /**
+     * column rows
+     */
+    rows: LayoutTabsRow[];
+};
+export type Layout = {
+    /**
+     * layout columns
+     */
+    columns?: LayoutColumn[];
+};
+export type TabDrag = {
+    /**
+     * row number of the tab being dragged
+     */
+    rowNumber: number;
+    /**
+     * column number of the tab being dragged
+     */
+    columnNumber: number;
+    /**
+     * the tabs being dragged
+     */
+    tabs: {
+        /**
+         * id of tab being dragged
+         */
+        id: string;
+    }[];
+};
+export enum ElementTypes {
+    RESIZE_BAR = "0",
+    TAB = "1",
+    TAB_GROUP = "2",
+    NONE = "2"
+}
+export enum ResizeDirections {
+    ROW = "row",
+    COLUMN = "column"
+}
+
+}
+declare module "babylonjs-node-editor/components/layout/utils" {
+import { Layout } from "babylonjs-node-editor/components/layout/types";
+/**
+ * Given a column and row number in the layout, return the corresponding column/row
+ * @param layout
+ * @param column
+ * @param row
+ * @returns
+ */
+export const getPosInLayout: (layout: Layout, column: number, row?: number | undefined) => import("babylonjs-node-editor/components/layout/types").LayoutTabsRow | import("./types").LayoutColumn;
+/**
+ * Remove a row in position row, column from the layout, and redistribute heights of remaining rows
+ * @param layout
+ * @param column
+ * @param row
+ */
+export const removeLayoutRowAndRedistributePercentages: (layout: Layout, column: number, row: number) => void;
+/**
+ * Add a percentage string to a number
+ */
+export const addPercentageStringToNumber: (p1: string, p2: number) => number;
+/**
+ * Parses a percentage string into a number
+ * @param p the percentage string
+ */
+export const parsePercentage: (p: string) => number;
+
 }
 declare module "babylonjs-node-editor/components/lines/ColorLineComponent" {
 import * as React from "react";
@@ -4860,6 +5216,405 @@ declare module BABYLON.NodeEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the DraggableIcon component.
+     */
+    export interface IDraggableIconProps {
+        /**
+         * Icon source
+         */
+        src: string;
+        /**
+         * Object that will be passed to the drag event
+         */
+        item: BABYLON.NodeEditor.SharedUIComponents.TabDrag;
+        /**
+         * Type of drag event
+         */
+        type: BABYLON.NodeEditor.SharedUIComponents.ElementTypes;
+    }
+    /**
+     * An icon that can be dragged by the user
+     */
+    export var DraggableIcon: React.FC<IDraggableIconProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the Column component.
+     */
+    export interface IFlexibleColumnProps {
+        /**
+         * Width of column
+         */
+        width: string;
+    }
+    /**
+     * This component represents a single column in the layout. It receives a width
+     * that it occupies and the content to display
+     * @param props
+     * @returns
+     */
+    export var FlexibleColumn: React.FC<IFlexibleColumnProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the DragHandler component.
+     */
+    export interface IFlexibleDragHandlerProps {
+        /**
+         * The size of the containing element. Used to calculate the percentage of
+         * space occupied by the component
+         */
+        containerSize: {
+            width: number;
+            height: number;
+        };
+    }
+    /**
+     * This component receives the drop events and updates the layout accordingly
+     */
+    export var FlexibleDragHandler: React.FC<IFlexibleDragHandlerProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the FlexibleDropZone component.
+     */
+    export interface IFlexibleDropZoneProps {
+        /**
+         * The row number of the component in the layout
+         */
+        rowNumber: number;
+        /**
+         * The column number of the component in the layout
+         */
+        columnNumber: number;
+    }
+    /**
+     * This component contains the drag and drop zone for the resize bars that
+     * allow redefining width and height of layout elements
+     */
+    export var FlexibleDropZone: React.FC<IFlexibleDropZoneProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the GridContainer component.
+     */
+    export interface IFlexibleGridContainerProps {
+    }
+    /**
+     * Component responsible for mapping the layout to the actual components
+     */
+    export var FlexibleGridContainer: React.FC<IFlexibleGridContainerProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the BABYLON.NodeEditor.SharedUIComponents.Layout component.
+     */
+    export interface IFlexibleGridLayoutProps {
+        /**
+         * A definition of the layout which can be changed by the user
+         */
+        layoutDefinition: BABYLON.NodeEditor.SharedUIComponents.Layout;
+    }
+    /**
+     * This component represents a grid layout that can be resized and rearranged
+     * by the user.
+     */
+    export var FlexibleGridLayout: React.FC<IFlexibleGridLayoutProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the ResizeBar component.
+     */
+    export interface IFlexibleRowResizerProps {
+        /**
+         * Row number of the component that is being resized
+         */
+        rowNumber: number;
+        /**
+         * Column number of the component being resized
+         */
+        columnNumber: number;
+        /**
+         * If the resizing happens in row or column direction
+         */
+        direction: BABYLON.NodeEditor.SharedUIComponents.ResizeDirections;
+    }
+    /**
+     * The item that will be sent to the drag event
+     */
+    export type ResizeItem = {
+        /**
+         * If the resizing happens in row or column direction
+         */
+        direction: BABYLON.NodeEditor.SharedUIComponents.ResizeDirections;
+        /**
+         * The row number of the component that is being resized
+         */
+        rowNumber: number;
+        /**
+         * the column number of the component being resized
+         */
+        columnNumber: number;
+    };
+    /**
+     * A component that renders a bar that the user can drag to resize.
+     */
+    export var FlexibleResizeBar: React.FC<IFlexibleRowResizerProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the FlexibleTab component.
+     */
+    export interface IFlexibleTabProps {
+        /**
+         * The tab's title.
+         */
+        title: string;
+        /**
+         * If the tab is currently selected or not
+         */
+        selected: boolean;
+        /**
+         * What happens when the user clicks on the tab
+         */
+        onClick: () => void;
+        /**
+         * The object that will be sent to the drag event
+         */
+        item: BABYLON.NodeEditor.SharedUIComponents.TabDrag;
+        /**
+         * What happens when the user drops another tab after this one
+         */
+        onTabDroppedAction: (item: BABYLON.NodeEditor.SharedUIComponents.TabDrag) => void;
+    }
+    /**
+     * A component that renders a tab that the user can click
+     * to activate or drag to reorder. It also listens for
+     * drop events if the user wants to drop another tab
+     * after it.
+     */
+    export var FlexibleTab: React.FC<IFlexibleTabProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Arguments for the TabsContainer component.
+     */
+    export interface IFlexibleTabsContainerProps {
+        /**
+         * The tabs to display
+         */
+        tabs: BABYLON.NodeEditor.SharedUIComponents.LayoutTab[];
+        /**
+         * Row index of component in layout
+         */
+        rowIndex: number;
+        /**
+         * Column index of component in layout
+         */
+        columnIndex: number;
+        /**
+         * Which tab is selected in the layout
+         */
+        selectedTab?: string;
+    }
+    /**
+     * This component contains a set of tabs of which only one is visible at a time.
+     * The tabs can also be dragged from and to different containers.
+     */
+    export var FlexibleTabsContainer: React.FC<IFlexibleTabsContainerProps>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /// <reference types="react" />
+    export var LayoutContext: import("react").Context<{
+        /**
+         * The layout object
+         */
+        layout: BABYLON.NodeEditor.SharedUIComponents.Layout;
+        /**
+         * Function to set the layout object in the context
+         */
+        setLayout: (layout: BABYLON.NodeEditor.SharedUIComponents.Layout) => void;
+    }>;
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        export type LayoutTab = {
+        /**
+         * Tab id
+         */
+        id: string;
+        /**
+         * React component rendered by tab
+         */
+        component: React.ComponentType;
+    };
+    export type LayoutTabsRow = {
+        /**
+         * row id
+         */
+        id: string;
+        /**
+         * row height in its containing column
+         */
+        height: string;
+        /**
+         * selected tab in row
+         */
+        selectedTab: string;
+        /**
+         * list of tabs contained in row
+         */
+        tabs: LayoutTab[];
+    };
+    export type LayoutColumn = {
+        /**
+         * column id
+         */
+        id: string;
+        /**
+         * column width in the grid
+         */
+        width: string;
+        /**
+         * column rows
+         */
+        rows: LayoutTabsRow[];
+    };
+    export type Layout = {
+        /**
+         * layout columns
+         */
+        columns?: LayoutColumn[];
+    };
+    export type TabDrag = {
+        /**
+         * row number of the tab being dragged
+         */
+        rowNumber: number;
+        /**
+         * column number of the tab being dragged
+         */
+        columnNumber: number;
+        /**
+         * the tabs being dragged
+         */
+        tabs: {
+            /**
+             * id of tab being dragged
+             */
+            id: string;
+        }[];
+    };
+    export enum ElementTypes {
+        RESIZE_BAR = "0",
+        TAB = "1",
+        TAB_GROUP = "2",
+        NONE = "2"
+    }
+    export enum ResizeDirections {
+        ROW = "row",
+        COLUMN = "column"
+    }
+
+
+
+}
+declare module BABYLON.NodeEditor {
+
+}
+declare module BABYLON.NodeEditor.SharedUIComponents {
+        /**
+     * Given a column and row number in the layout, return the corresponding column/row
+     * @param layout
+     * @param column
+     * @param row
+     * @returns
+     */
+    export const getPosInLayout: (layout: BABYLON.NodeEditor.SharedUIComponents.Layout, column: number, row?: number | undefined) => LayoutColumn;
+    /**
+     * Remove a row in position row, column from the layout, and redistribute heights of remaining rows
+     * @param layout
+     * @param column
+     * @param row
+     */
+    export const removeLayoutRowAndRedistributePercentages: (layout: BABYLON.NodeEditor.SharedUIComponents.Layout, column: number, row: number) => void;
+    /**
+     * Add a percentage string to a number
+     */
+    export const addPercentageStringToNumber: (p1: string, p2: number) => number;
+    /**
+     * Parses a percentage string into a number
+     * @param p the percentage string
+     */
+    export const parsePercentage: (p: string) => number;
+
+
+
 }
 declare module BABYLON.NodeEditor {
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "babylonjs-node-editor",
-    "version": "5.28.0",
+    "version": "5.29.0",
     "main": "babylon.nodeEditor.js",
     "types": "babylon.nodeEditor.module.d.ts",
     "files": [
@@ -14,7 +14,7 @@
         "clean": "rimraf dist && rimraf babylon*.*"
     },
     "dependencies": {
-        "babylonjs": "^5.28.0"
+        "babylonjs": "^5.29.0"
     },
     "devDependencies": {
         "@dev/build-tools": "1.0.0",