@babylonjs/gui-editor 5.28.0 → 5.30.0

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

@@ -217,6 +217,8 @@ interface ICommonControlPropertyGridComponentProps {
 interface ICommonControlPropertyGridComponentState {
     fontFamilyOptions: IInspectableOptions[];
     value: number;
+    invalidFonts: string[];
+    invalidFontAlertName?: string;
 }
 export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps, ICommonControlPropertyGridComponentState> {
     private _onPropertyChangedObserver;
@@ -1727,6 +1729,366 @@ export type LabelProps = {
 };
 export const Label: React.FC<LabelProps>;
 
+}
+declare module "@babylonjs/gui-editor/components/layout/DraggableIcon" {
+import { FC } from "react";
+import { ElementTypes, TabDrag } from "@babylonjs/gui-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/gui-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/gui-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/gui-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/gui-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/gui-editor/components/layout/FlexibleGridLayout" {
+import { FC } from "react";
+import { Layout } from "@babylonjs/gui-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/gui-editor/components/layout/FlexibleResizeBar" {
+import { FC } from "react";
+import { ResizeDirections } from "@babylonjs/gui-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/gui-editor/components/layout/FlexibleTab" {
+import { FC } from "react";
+import { TabDrag } from "@babylonjs/gui-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/gui-editor/components/layout/FlexibleTabsContainer" {
+import { FC } from "react";
+import { LayoutTab } from "@babylonjs/gui-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/gui-editor/components/layout/LayoutContext" {
+/// <reference types="react" />
+import { Layout } from "@babylonjs/gui-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/gui-editor/components/layout/types" {
+import { ReactElement } from "react";
+export type LayoutTab = {
+    /**
+     * Tab id
+     */
+    id: string;
+    /**
+     * React component rendered by tab
+     */
+    component: 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 "@babylonjs/gui-editor/components/layout/utils" {
+import { Layout } from "@babylonjs/gui-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/gui-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/gui-editor/components/lines/ColorLineComponent" {
 import * as React from "react";
@@ -2836,11 +3198,17 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     static readonly NodeWidth: number;
     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;
@@ -3128,6 +3496,8 @@ export class GraphNode {
     private _displayManager;
     private _isVisible;
     private _enclosingFrameId;
+    addClassToVisual(className: string): void;
+    removeClassFromVisual(className: string): void;
     get isVisible(): boolean;
     set isVisible(value: boolean);
     private _upateNodePortNames;
@@ -3536,6 +3906,55 @@ const _default: {
 export default _default;
 export const Default: any;
 
+}
+declare module "@babylonjs/gui-editor/stories/layout/FlexibleGridLayout.stories" {
+/// <reference types="react" />
+import { IFlexibleGridLayoutProps } from "@babylonjs/gui-editor/components/layout/FlexibleGridLayout";
+const _default: {
+    component: import("react").FC<IFlexibleGridLayoutProps>;
+};
+export default _default;
+export const Default: {
+    render: (props: IFlexibleGridLayoutProps) => JSX.Element;
+    args: {
+        layoutDefinition: {
+            columns: {
+                id: string;
+                width: string;
+                rows: {
+                    id: string;
+                    height: string;
+                    selectedTab: string;
+                    tabs: {
+                        id: string;
+                        component: JSX.Element;
+                    }[];
+                }[];
+            }[];
+        };
+    };
+};
+export const TwoColumn: {
+    render: (props: 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 "@babylonjs/gui-editor/stories/lines/ColorLineComponent.stories" {
 /// <reference types="react" />

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@babylonjs/gui-editor",
-    "version": "5.28.0",
+    "version": "5.30.0",
     "main": "dist/babylon.guiEditor.max.js",
     "module": "dist/babylon.guiEditor.max.js",
     "esnext": "dist/babylon.guiEditor.max.js",
@@ -24,8 +24,8 @@
         "@types/react-dom": ">=16.0.9"
     },
     "devDependencies": {
-        "@babylonjs/core": "^5.28.0",
-        "@babylonjs/gui": "^5.28.0",
+        "@babylonjs/core": "^5.30.0",
+        "@babylonjs/gui": "^5.30.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "rimraf": "^3.0.2",