@babylonjs/gui-editor 5.31.1 → 5.32.0

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

@@ -216,9 +216,6 @@ interface ICommonControlPropertyGridComponentProps {
 }
 interface ICommonControlPropertyGridComponentState {
     fontFamilyOptions: IInspectableOptions[];
-    value: number;
-    invalidFonts: string[];
-    invalidFontAlertName?: string;
 }
 export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps, ICommonControlPropertyGridComponentState> {
     private _onPropertyChangedObserver;
@@ -226,17 +223,21 @@ export class CommonControlPropertyGridComponent extends React.Component<ICommonC
     constructor(props: ICommonControlPropertyGridComponentProps);
     componentWillMount(): void;
     private _checkFontsInLayout;
+    private _addFont;
     private _getTransformedReferenceCoordinate;
     private _updateAlignment;
     private _checkAndUpdateValues;
     private _markChildrenAsDirty;
-    addVal: (newVal: {
-        label: string;
-        value: number;
-    }, prevVal: number) => void;
-    selectCustomVal(): void;
-    keepPrevVal(prevVal: number): void;
     componentWillUnmount(): void;
+    _filterFontDuplicates(array: {
+        label: string;
+        value: string;
+        id: string;
+    }[]): {
+        label: string;
+        value: string;
+        id: string;
+    }[];
     render(): JSX.Element;
 }
 export {};
@@ -1610,8 +1611,9 @@ export type ButtonProps = {
     active?: boolean;
     onClick?: () => void;
     color: "light" | "dark";
-    size: "default" | "small" | "wide";
+    size: "default" | "small" | "wide" | "smaller";
     title?: string;
+    backgroundColor?: string;
 };
 export const Button: React.FC<ButtonProps>;
 
@@ -2221,6 +2223,29 @@ export class NumericInputComponent extends React.Component<INumericInputComponen
 }
 export {};
 
+}
+declare module "@babylonjs/gui-editor/components/lines/OptionsLineComponent" {
+/// <reference types="react" />
+/**
+ * This components represents an options menu with optional
+ * customizable properties. Option IDs should be unique.
+ */
+export interface IOption {
+    label: string;
+    value: string;
+    id: string;
+}
+export interface IOptionsLineComponentProps {
+    options: IOption[];
+    addOptionPlaceholder?: string;
+    onOptionAdded?: (newOption: IOption) => void;
+    onOptionSelected: (selectedOptionValue: string) => void;
+    selectedOptionValue: string;
+    validateNewOptionValue?: (newOptionValue: string) => boolean;
+    addOptionText?: string;
+}
+export const OptionsLineComponent: (props: IOptionsLineComponentProps) => JSX.Element;
+
 }
 declare module "@babylonjs/gui-editor/components/MessageDialog" {
 import * as React from "react";
@@ -2231,6 +2256,21 @@ export interface MessageDialogProps {
 }
 export const MessageDialog: React.FC<MessageDialogProps>;
 
+}
+declare module "@babylonjs/gui-editor/components/TextInputWithSubmit" {
+/// <reference types="react" />
+export interface ITextInputProps {
+    label?: string;
+    placeholder?: string;
+    submitValue: (newValue: string) => void;
+    validateValue?: (value: string) => boolean;
+    cancelSubmit?: () => void;
+}
+/**
+ * This component represents a text input that can be submitted or cancelled on buttons
+ */
+export const TextInputWithSubmit: (props: ITextInputProps) => JSX.Element;
+
 }
 declare module "@babylonjs/gui-editor/components/Toggle" {
 /// <reference types="react" />
@@ -2786,14 +2826,9 @@ export interface IOptionsLineComponentProps {
     target: any;
     propertyName: string;
     options: IInspectableOptions[];
-    addInput?: boolean;
     noDirectUpdate?: boolean;
     onSelect?: (value: number | string) => void;
     extractValue?: (target: any) => number | string;
-    addVal?: (newVal: {
-        label: string;
-        value: number;
-    }, prevVal: number) => void;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     allowNullValue?: boolean;
     icon?: string;
@@ -2801,13 +2836,9 @@ export interface IOptionsLineComponentProps {
     className?: string;
     valuesAreStrings?: boolean;
     defaultIfNull?: number;
-    fromFontDropdown?: boolean;
-    valueProp?: number;
-    fallbackValue?: number;
 }
 export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
     value: number | string;
-    addCustom: boolean;
 }> {
     private _localChange;
     private _remapValueIn;
@@ -2816,12 +2847,10 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
     constructor(props: IOptionsLineComponentProps);
     shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
         value: number;
-        addCustom: boolean;
     }): boolean;
     raiseOnPropertyChanged(newValue: number, previousValue: number): void;
     setValue(value: string | number): void;
     updateValue(valueString: string): void;
-    updateCustomValue(): void;
     render(): JSX.Element;
 }
 
@@ -3836,25 +3865,25 @@ export class PropertyChangedEvent {
 }
 declare module "@babylonjs/gui-editor/stories/bars/CommandBarComponent.stories" {
 /// <reference types="react" />
+import { CommandBarComponent } from "@babylonjs/gui-editor/components/bars/CommandBarComponent";
+
 const _default: {
 
 };
 export default _default;
-export const Default: {};
-export const WithArtboardColor: {
-    parameters: {
-        onArtboardColorChanged: (color: string) => void;
-    };
-};
+export const Default: StoryObj<typeof CommandBarComponent>;
+export const WithArtboardColor: StoryObj<typeof CommandBarComponent>;
 
 }
 declare module "@babylonjs/gui-editor/stories/bars/CommandButtonComponent.stories" {
 /// <reference types="react" />
+import { CommandButtonComponent } from "@babylonjs/gui-editor/components/bars/CommandButtonComponent";
+
 const _default: {
 
 };
 export default _default;
-export const Default: {};
+export const Default: StoryObj<typeof CommandButtonComponent>;
 
 }
 declare module "@babylonjs/gui-editor/stories/Button.stories" {
@@ -3871,17 +3900,13 @@ export const Small: any;
 
 }
 declare module "@babylonjs/gui-editor/stories/colorPicker/ColorPicker.stories" {
-import { Color3 } from "@babylonjs/core/Maths/math.color";
 import { ColorPicker } from "@babylonjs/gui-editor/components/colorPicker/ColorPicker";
+
 const _default: {
     component: typeof ColorPicker;
 };
 export default _default;
-export const Default: {
-    args: {
-        color: Color3;
-    };
-};
+export const Default: StoryObj<typeof ColorPicker>;
 
 }
 declare module "@babylonjs/gui-editor/stories/Icon.stories" {
@@ -3910,114 +3935,67 @@ 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";
+import { FlexibleGridLayout } 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;
-                    }[];
-                }[];
-            }[];
-        };
-    };
-};
+export const Default: StoryObj<typeof FlexibleGridLayout>;
+export const TwoColumn: StoryObj<typeof FlexibleGridLayout>;
 
 }
 declare module "@babylonjs/gui-editor/stories/lines/ColorLineComponent.stories" {
-/// <reference types="react" />
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
-import { IColorLineComponentProps } from "@babylonjs/gui-editor/components/lines/ColorLineComponent";
 import { ColorLineComponent } from "@babylonjs/gui-editor/components/lines/ColorLineComponent";
+
 const _default: {
     component: typeof ColorLineComponent;
 };
 export default _default;
-export const Default: {
-    render: (args: IColorLineComponentProps) => JSX.Element;
-    args: {
-        target: {};
-        label: string;
-        propertyName: string;
-        lockObject: {
-            lock: boolean;
-        };
-        onPropertyChangedObservable: Observable<PropertyChangedEvent>;
-    };
-};
+export const Default: StoryObj<typeof ColorLineComponent>;
 
 }
 declare module "@babylonjs/gui-editor/stories/lines/ColorPickerLineComponent.stories" {
-/// <reference types="react" />
-import { Color3 } from "@babylonjs/core/Maths/math.color";
-import { IColorPickerComponentProps } from "@babylonjs/gui-editor/components/lines/ColorPickerLineComponent";
 import { ColorPickerLineComponent } from "@babylonjs/gui-editor/components/lines/ColorPickerLineComponent";
+
 const _default: {
     component: typeof ColorPickerLineComponent;
 };
 export default _default;
-export const Default: {
-    render: (args: IColorPickerComponentProps) => JSX.Element;
-    args: {
-        value: Color3;
-    };
-};
+export const Default: StoryObj<typeof ColorPickerLineComponent>;
 
 }
 declare module "@babylonjs/gui-editor/stories/lines/FileButtonLineComponent.stories" {
 import { FileButtonLineComponent } from "@babylonjs/gui-editor/components/lines/FileButtonLineComponent";
+
 const _default: {
     component: typeof FileButtonLineComponent;
 };
 export default _default;
-export const Default: {};
+export const Default: StoryObj<typeof FileButtonLineComponent>;
 
 }
 declare module "@babylonjs/gui-editor/stories/lines/NumericInputComponent.stories" {
 import { NumericInputComponent } from "@babylonjs/gui-editor/components/lines/NumericInputComponent";
+
 const _default: {
     component: typeof NumericInputComponent;
 };
 export default _default;
-export const Default: {
-    args: {
-        label: string;
-        value: number;
-    };
+export const Default: StoryObj<typeof NumericInputComponent>;
+
+}
+declare module "@babylonjs/gui-editor/stories/lines/OptionsLineComponent.stories" {
+/// <reference types="react" />
+
+const _default: {
+    component: (props: import("@babylonjs/gui-editor/components/lines/OptionsLineComponent").IOptionsLineComponentProps) => JSX.Element;
 };
+export default _default;
+const RenderComponent: (args: any) => JSX.Element;
+export const Default: StoryObj<typeof RenderComponent>;
+export const WithCustomOptions: StoryObj<typeof RenderComponent>;
+export const WithValidation: StoryObj<typeof RenderComponent>;
 
 }
 declare module "@babylonjs/gui-editor/stories/MessageDialog.stories" {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@babylonjs/gui-editor",
-    "version": "5.31.1",
+    "version": "5.32.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.31.1",
-        "@babylonjs/gui": "^5.31.1",
+        "@babylonjs/core": "^5.32.0",
+        "@babylonjs/gui": "^5.32.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "rimraf": "^3.0.2",