babylonjs-gui-editor 5.28.0 → 5.30.0

package/babylon.guiEditor.d.ts

@@ -157,6 +157,8 @@ declare module BABYLON {
     interface ICommonControlPropertyGridComponentState {
         fontFamilyOptions: IInspectableOptions[];
         value: number;
+        invalidFonts: string[];
+        invalidFontAlertName?: string;
     }
     export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps, ICommonControlPropertyGridComponentState> {
         private _onPropertyChangedObserver;
@@ -1447,6 +1449,409 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /**
+     * Arguments for the DraggableIcon component.
+     */
+    export interface IDraggableIconProps {
+        /**
+         * Icon source
+         */
+        src: string;
+        /**
+         * Object that will be passed to the drag event
+         */
+        item: BABYLON.GuiEditor.SharedUIComponents.TabDrag;
+        /**
+         * Type of drag event
+         */
+        type: BABYLON.GuiEditor.SharedUIComponents.ElementTypes;
+    }
+    /**
+     * An icon that can be dragged by the user
+     */
+    export var DraggableIcon: React.FC<IDraggableIconProps>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.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 {
+
+}
+declare module BABYLON.GuiEditor.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 {
+
+}
+declare module BABYLON.GuiEditor.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 {
+
+}
+declare module BABYLON.GuiEditor.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 {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /**
+     * Arguments for the BABYLON.GuiEditor.SharedUIComponents.Layout component.
+     */
+    export interface IFlexibleGridLayoutProps {
+        /**
+         * A definition of the layout which can be changed by the user
+         */
+        layoutDefinition: BABYLON.GuiEditor.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 {
+
+}
+declare module BABYLON.GuiEditor.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.GuiEditor.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.GuiEditor.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 {
+
+}
+declare module BABYLON.GuiEditor.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.GuiEditor.SharedUIComponents.TabDrag;
+        /**
+         * What happens when the user drops another tab after this one
+         */
+        onTabDroppedAction: (item: BABYLON.GuiEditor.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 {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /**
+     * Arguments for the TabsContainer component.
+     */
+    export interface IFlexibleTabsContainerProps {
+        /**
+         * The tabs to display
+         */
+        tabs: BABYLON.GuiEditor.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 {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /// <reference types="react" />
+    export var LayoutContext: import("react").Context<{
+        /**
+         * The layout object
+         */
+        layout: BABYLON.GuiEditor.SharedUIComponents.Layout;
+        /**
+         * Function to set the layout object in the context
+         */
+        setLayout: (layout: BABYLON.GuiEditor.SharedUIComponents.Layout) => void;
+    }>;
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export type LayoutTab = {
+        /**
+         * Tab id
+         */
+        id: string;
+        /**
+         * React component rendered by tab
+         */
+        component: React.ReactElement;
+        /**
+         * Tab title
+         */
+        title: string;
+    };
+    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 {
+
+}
+declare module BABYLON.GuiEditor.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.GuiEditor.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.GuiEditor.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 {
 
@@ -2629,11 +3034,17 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
         static readonly NodeWidth = 100;
         private readonly _minZoom;
         private readonly _maxZoom;
+        private _hostCanvasRef;
         private _hostCanvas;
+        private _graphCanvasRef;
         private _graphCanvas;
+        private _selectionContainerRef;
         private _selectionContainer;
+        private _frameContainerRef;
         private _frameContainer;
+        private _svgCanvasRef;
         private _svgCanvas;
+        private _rootContainerRef;
         private _rootContainer;
         private _nodes;
         private _links;
@@ -2916,6 +3327,8 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
         private _displayManager;
         private _isVisible;
         private _enclosingFrameId;
+        addClassToVisual(className: string): void;
+        removeClassFromVisual(className: string): void;
         get isVisible(): boolean;
         set isVisible(value: boolean);
         private _upateNodePortNames;
@@ -3367,6 +3780,58 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /// <reference types="react" />
+    var _default: {
+        component: import("react").FC<BABYLON.GuiEditor.SharedUIComponents.IFlexibleGridLayoutProps>;
+    };
+    export var Default: {
+        render: (props: BABYLON.GuiEditor.SharedUIComponents.IFlexibleGridLayoutProps) => JSX.Element;
+        args: {
+            layoutDefinition: {
+                columns: {
+                    id: string;
+                    width: string;
+                    rows: {
+                        id: string;
+                        height: string;
+                        selectedTab: string;
+                        tabs: {
+                            id: string;
+                            component: JSX.Element;
+                        }[];
+                    }[];
+                }[];
+            };
+        };
+    };
+    export var TwoColumn: {
+        render: (props: BABYLON.GuiEditor.SharedUIComponents.IFlexibleGridLayoutProps) => JSX.Element;
+        args: {
+            layoutDefinition: {
+                columns: {
+                    id: string;
+                    width: string;
+                    rows: {
+                        id: string;
+                        height: string;
+                        selectedTab: string;
+                        tabs: {
+                            id: string;
+                            component: JSX.Element;
+                        }[];
+                    }[];
+                }[];
+            };
+        };
+    };
+
+
+
 }
 declare module BABYLON {