@babylonjs/gui-editor 8.12.1 → 8.13.1

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

@@ -3039,7 +3039,9 @@ export class Vector3LineComponent extends React.Component<IVector3LineComponentP
     updateStateX(value: number): void;
     updateStateY(value: number): void;
     updateStateZ(value: number): void;
-    onCopyClick(): void;
+    onCopyClick(): string;
+
+
 
 }
 export {};
@@ -3156,6 +3158,9 @@ interface ITextLineComponentProps {
 export class TextLineComponent extends React.Component<ITextLineComponentProps> {
     constructor(props: ITextLineComponentProps);
     onLink(): void;
+    copyFn(): (() => string) | undefined;
+
+
 
 
 }
@@ -3163,7 +3168,8 @@ export {};
 
 }
 declare module "@babylonjs/gui-editor/lines/textInputLineComponent" {
-import * as React from "react";
+import { ReactNode, KeyboardEvent } from "react";
+import { Component } from "react";
 import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
@@ -3188,14 +3194,14 @@ export interface ITextInputLineComponentProps {
     min?: number;
     max?: number;
     placeholder?: string;
-    unit?: React.ReactNode;
+    unit?: ReactNode;
     validator?: (value: string) => boolean;
     multilines?: boolean;
     throttlePropertyChangedNotification?: boolean;
     throttlePropertyChangedNotificationDelay?: number;
     disabled?: boolean;
 }
-export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
+export class TextInputLineComponent extends Component<ITextInputLineComponentProps, {
     value: string;
     dragging: boolean;
 }> {
@@ -3210,7 +3216,9 @@ export class TextInputLineComponent extends React.Component<ITextInputLineCompon
     getCurrentNumericValue(value: string): number;
     updateValue(value: string, valueToValidate?: string): void;
     incrementValue(amount: number): void;
-    onKeyDown(event: React.KeyboardEvent): void;
+    onKeyDown(event: KeyboardEvent): void;
+
+
 
 }
 
@@ -3267,6 +3275,8 @@ export class SliderLineComponent extends React.Component<ISliderLineComponentPro
     prepareDataToRead(value: number): number;
     onCopyClick(): void;
 
+
+
 }
 export {};
 
@@ -3331,7 +3341,9 @@ export class OptionsLine extends React.Component<IOptionsLineProps, {
     raiseOnPropertyChanged(newValue: number, previousValue: number): void;
     setValue(value: string | number): void;
     updateValue(valueString: string): void;
-    onCopyClick(): void;
+    onCopyClickStr(): string;
+    private _renderFluent;
+    private _renderOriginal;
 
 }
 
@@ -3692,6 +3704,8 @@ export class FileButtonLine extends React.Component<IFileButtonLineProps> {
     constructor(props: IFileButtonLineProps);
     onChange(evt: any): void;
 
+
+
 }
 export {};
 
@@ -3795,6 +3809,8 @@ export class ColorLine extends React.Component<IColorLineProps, IColorLineCompon
     private _toColor3;
     onCopyClick(): void;
 
+
+
 }
 export {};
 
@@ -3878,6 +3894,8 @@ export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponen
     onChange(): void;
     onCopyClick(): void;
 
+
+
 }
 
 }
@@ -3893,6 +3911,8 @@ export interface IButtonLineComponentProps {
 export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
     constructor(props: IButtonLineComponentProps);
 
+
+
 }
 
 }
@@ -3909,6 +3929,432 @@ export class BooleanLineComponent extends React.Component<IBooleanLineComponentP
 
 }
 
+}
+declare module "@babylonjs/gui-editor/fluent/primitives/textarea" {
+
+import { FunctionComponent } from "react";
+import { BaseComponentProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+export type TextareaProps = BaseComponentProps<string> & {
+    placeholder?: string;
+};
+/**
+ * This is a texarea box that stops propagation of change/keydown events
+ * @param props
+ * @returns
+ */
+export const Textarea: FunctionComponent<any>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/primitives/syncedSlider" {
+import { FunctionComponent } from "react";
+import { BaseComponentProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+export type SyncedSliderProps = BaseComponentProps<number> & {
+    min?: number;
+    max?: number;
+    step?: number;
+};
+/**
+ * Component which synchronizes a slider and an input field, allowing the user to change a value using either control
+ * @param props
+ * @returns SyncedSlider component
+ */
+export const SyncedSliderInput: FunctionComponent<SyncedSliderProps>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/primitives/switch" {
+import { FunctionComponent } from "react";
+import { BaseComponentProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+export type SwitchProps = BaseComponentProps<boolean>;
+/**
+ * This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools
+ * @param props
+ * @returns Switch component
+ */
+export const Switch: FunctionComponent<SwitchProps>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/primitives/spinButton" {
+import { FunctionComponent } from "react";
+import { BaseComponentProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+export type SpinButtonProps = BaseComponentProps<number>;
+export const SpinButton: FunctionComponent<SpinButtonProps>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/primitives/link" {
+
+
+}
+declare module "@babylonjs/gui-editor/fluent/primitives/input" {
+import { FunctionComponent } from "react";
+import { BaseComponentProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+export type InputProps<T extends string | number> = BaseComponentProps<T> & {
+    step?: number;
+    placeholder?: string;
+    min?: number;
+    max?: number;
+};
+/**
+ * This is an input text box that stops propagation of change events and sets its width based on the type of input (text or number)
+ * @param props
+ * @returns
+ */
+export const Input: FunctionComponent<InputProps<string | number>>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/primitives/dropdown" {
+import { FunctionComponent } from "react";
+import { BaseComponentProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+export type AcceptedDropdownValue = string | number;
+export type DropdownOption = {
+    /**
+     * Defines the visible part of the option
+     */
+    label: string;
+    /**
+     * Defines the value part of the option
+     */
+    value: AcceptedDropdownValue;
+};
+export type DropdownProps = BaseComponentProps<AcceptedDropdownValue | undefined> & {
+    options: DropdownOption[];
+    includeUndefined?: boolean;
+};
+/**
+ * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if includeUndefined is set to true
+ * @param props
+ * @returns dropdown component
+ */
+export const Dropdown: FunctionComponent<DropdownProps>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/primitives/colorPicker" {
+import { FunctionComponent } from "react";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
+import { BaseComponentProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+export type ColorPickerProps<C extends Color3 | Color4> = {
+    isLinearMode?: boolean;
+} & BaseComponentProps<C>;
+export const ColorPickerPopup: FunctionComponent<ColorPickerProps<Color3 | Color4>>;
+type HsvKey = "h" | "s" | "v";
+export type InputHexProps = BaseComponentProps<Color3 | Color4> & {
+    label?: string;
+    linearHex?: boolean;
+    isLinearMode?: boolean;
+};
+/**
+ * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space
+ * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange
+ *
+ * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space
+ * @param props - The properties for the InputHexField component.
+ * @returns
+ */
+export const InputHexField: FunctionComponent<InputHexProps>;
+type InputHsvFieldProps = {
+    color: Color3 | Color4;
+    label: string;
+    hsvKey: HsvKey;
+    onChange: (color: Color3 | Color4) => void;
+    max: number;
+    scale?: number;
+};
+/**
+ * In the HSV (Hue, Saturation, Value) color model, Hue (H) ranges from 0 to 360 degrees, representing the color's position on the color wheel.
+ * Saturation (S) ranges from 0 to 100%, indicating the intensity or purity of the color, with 0 being shades of gray and 100 being a fully saturated color.
+ * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest.
+ * @param props - The properties for the InputHsvField component.
+ */
+export const InputHsvField: FunctionComponent<InputHsvFieldProps>;
+export {};
+
+}
+declare module "@babylonjs/gui-editor/fluent/primitives/checkbox" {
+import { FunctionComponent } from "react";
+import { BaseComponentProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+export type CheckboxProps = BaseComponentProps<boolean>;
+/**
+ * This is a primitive fluent checkbox that can both read and write checked state
+ * @param props
+ * @returns Checkbox component
+ */
+export const Checkbox: FunctionComponent<CheckboxProps>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/primitives/accordion" {
+import { FunctionComponent, PropsWithChildren } from "react";
+export type AccordionSectionProps = {
+    title: string;
+};
+export const AccordionSection: FunctionComponent<PropsWithChildren<AccordionSectionProps>>;
+export const Accordion: FunctionComponent<PropsWithChildren>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/hoc/vectorPropertyLine" {
+import { FunctionComponent } from "react";
+import { BaseComponentProps, PropertyLineProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+import { Vector4 } from "@babylonjs/core/Maths/math.vector";
+import { Vector3 } from "@babylonjs/core/Maths/math.vector";
+export type VectorPropertyLineProps<V extends Vector3 | Vector4> = BaseComponentProps<V> & PropertyLineProps & {
+    /**
+     * If passed, all sliders will use this for the min value
+     */
+    min?: number;
+    /**
+     * If passed, all sliders will use this for the max value
+     */
+    max?: number;
+    /**
+     * If passed, the UX will use the conversion functions to display/update values
+     */
+    valueConverter?: {
+        /**
+         * Will call from(val) before displaying in the UX
+         */
+        from: (val: number) => number;
+        /**
+         * Will call to(val) before calling onChange
+         */
+        to: (val: number) => number;
+    };
+};
+type RotationVectorPropertyLineProps = VectorPropertyLineProps<Vector3> & {
+    /**
+     * Display angles as degrees instead of radians
+     */
+    useDegrees?: boolean;
+};
+export const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps>;
+export const Vector3PropertyLine: FunctionComponent<VectorPropertyLineProps<Vector3>>;
+export const Vector4PropertyLine: FunctionComponent<VectorPropertyLineProps<Vector4>>;
+export {};
+
+}
+declare module "@babylonjs/gui-editor/fluent/hoc/textPropertyLine" {
+import { PropertyLineProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+import { FunctionComponent } from "react";
+type TextProps = {
+    value: string;
+    tooltip?: string;
+};
+/**
+ * Wraps text in a property line
+ * @param props - PropertyLineProps and TextProps
+ * @returns property-line wrapped text
+ */
+export const TextPropertyLine: FunctionComponent<PropertyLineProps & TextProps>;
+export {};
+
+}
+declare module "@babylonjs/gui-editor/fluent/hoc/syncedSliderLine" {
+import { PropertyLineProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+import { SyncedSliderProps } from "@babylonjs/gui-editor/fluent/primitives/syncedSlider";
+import { FunctionComponent } from "react";
+type SyncedSliderLineProps = SyncedSliderProps & PropertyLineProps;
+/**
+ * Renders a simple wrapper around the SyncedSliderInput
+ * @param props
+ * @returns
+ */
+export const SyncedSliderLine: FunctionComponent<SyncedSliderLineProps>;
+export {};
+
+}
+declare module "@babylonjs/gui-editor/fluent/hoc/switchPropertyLine" {
+import { PropertyLineProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+import { FunctionComponent } from "react";
+import { SwitchProps } from "@babylonjs/gui-editor/fluent/primitives/switch";
+/**
+ * Wraps a switch in a property line
+ * @param props - The properties for the switch and property line
+ * @returns A React element representing the property line with a switch
+ */
+export const SwitchPropertyLine: FunctionComponent<PropertyLineProps & SwitchProps>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/hoc/propertyLine" {
+import { FunctionComponent } from "react";
+export type PropertyLineProps = {
+    /**
+     * The name of the property to display in the property line.
+     */
+    label: string;
+    /**
+     * Optional description for the property, shown on hover of the info icon
+     */
+    description?: string;
+    /**
+     * Optional function returning a string to copy to clipboard.
+     */
+    onCopy?: () => string;
+    /**
+     * If supplied, an 'expand' icon will be shown which, when clicked, renders this component within the property line.
+     */
+    expandedContent?: JSX.Element;
+    /**
+     * Link to the documentation for this property, available from the info icon either linked from the description (if provided) or defalt 'docs' text
+     */
+    docLink?: string;
+};
+export const LineContainer: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export type BaseComponentProps<T> = {
+    /**
+     * The value of the property to be displayed and modified.
+     */
+    value: T;
+    /**
+     * Callback function to handle changes to the value
+     */
+    onChange: (value: T) => void;
+    /**
+     * Optional flag to disable the component, preventing any interaction.
+     */
+    disabled?: boolean;
+    /**
+     * Optional class name to apply custom styles to the component.
+     */
+    className?: string;
+};
+/**
+ * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.
+ *
+ * @param props - The properties for the PropertyLine component.
+ * @returns A React element representing the property line.
+ *
+ */
+export const PropertyLine: import("react").ForwardRefExoticComponent<PropertyLineProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export const PlaceholderPropertyLine: FunctionComponent<BaseComponentProps<any> & PropertyLineProps>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/hoc/linkPropertyLine" {
+import { PropertyLineProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+import { FunctionComponent } from "react";
+type LinkProps = {
+    value: string;
+    tooltip?: string;
+    onLink?: () => void;
+    url?: string;
+};
+/**
+ * Wraps a link in a property line
+ * @param props - PropertyLineProps and LinkProps
+ * @returns property-line wrapped link
+ */
+export const LinkPropertyLine: FunctionComponent<PropertyLineProps & LinkProps>;
+export {};
+
+}
+declare module "@babylonjs/gui-editor/fluent/hoc/inputPropertyLine" {
+import { PropertyLineProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+import { FunctionComponent } from "react";
+import { InputProps } from "@babylonjs/gui-editor/fluent/primitives/input";
+export const TextInputPropertyLine: FunctionComponent<InputProps<string> & PropertyLineProps>;
+export const FloatInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/hoc/hexLineComponent" {
+import { PropertyLineProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+import { FunctionComponent } from "react";
+import { InputHexProps } from "@babylonjs/gui-editor/fluent/primitives/colorPicker";
+/**
+ * Wraps a hex input in a property line
+ * @param props - PropertyLineProps and InputHexProps
+ * @returns property-line wrapped input hex component
+ */
+export const HexPropertyLine: FunctionComponent<InputHexProps & PropertyLineProps>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/hoc/fluentToolWrapper" {
+import { PropsWithChildren, FunctionComponent } from "react";
+
+export type ToolHostProps = {
+    /**
+     * Allows host to pass in a theme
+     */
+    customTheme?: any;
+    /**
+     * Can be set to true to disable the copy button in the tool's property lines. Default is false (copy enabled)
+     */
+    disableCopy?: boolean;
+};
+export const ToolContext: import("react").Context<{
+    readonly useFluent: boolean;
+    readonly disableCopy: boolean;
+}>;
+/**
+ * For tools which are ready to move over the fluent, wrap the root of the tool (or the panel which you want fluentized) with this component
+ * Today we will only enable fluent if the URL has the `newUX` query parameter is truthy
+ * @param props
+ * @returns
+ */
+export const FluentToolWrapper: FunctionComponent<PropsWithChildren<ToolHostProps>>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/hoc/fileUploadLine" {
+import { FunctionComponent } from "react";
+import { ButtonLineProps } from "@babylonjs/gui-editor/fluent/hoc/buttonLine";
+type FileUploadLineProps = Omit<ButtonLineProps, "onClick"> & {
+    onClick: (file: File) => void;
+    accept: string;
+};
+export const FileUploadLine: FunctionComponent<FileUploadLineProps>;
+export {};
+
+}
+declare module "@babylonjs/gui-editor/fluent/hoc/dropdownPropertyLine" {
+import { DropdownProps } from "@babylonjs/gui-editor/fluent/primitives/dropdown";
+import { PropertyLineProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+import { FunctionComponent } from "react";
+/**
+ * Wraps a dropdown in a property line
+ * @param props - PropertyLineProps and DropdownProps
+ * @returns property-line wrapped dropdown
+ */
+export const DropdownPropertyLine: FunctionComponent<PropertyLineProps & DropdownProps>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/hoc/colorPropertyLine" {
+import { FunctionComponent } from "react";
+import { PropertyLineProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+import { Color3 } from "@babylonjs/core/Maths/math.color";
+import { Color4 } from "@babylonjs/core/Maths/math.color";
+import { ColorPickerProps } from "@babylonjs/gui-editor/fluent/primitives/colorPicker";
+export type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps;
+export const Color3PropertyLine: FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps>;
+export const Color4PropertyLine: FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/hoc/checkboxPropertyLine" {
+import { PropertyLineProps } from "@babylonjs/gui-editor/fluent/hoc/propertyLine";
+import { FunctionComponent } from "react";
+import { CheckboxProps } from "@babylonjs/gui-editor/fluent/primitives/checkbox";
+/**
+ * Wraps a checkbox in a property line
+ * @param props - PropertyLineProps and CheckboxProps
+ * @returns property-line wrapped checkbox
+ */
+export const CheckboxPropertyLine: FunctionComponent<PropertyLineProps & CheckboxProps>;
+
+}
+declare module "@babylonjs/gui-editor/fluent/hoc/buttonLine" {
+import { FunctionComponent } from "react";
+export type ButtonLineProps = {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    icon?: string;
+    title?: string;
+};
+/**
+ * Wraps a button with a label in a line container
+ * @param props Button props plus a label
+ * @returns A button inside a line
+ */
+export const ButtonLine: FunctionComponent<ButtonLineProps>;
+
 }
 declare module "@babylonjs/gui-editor/components/classNames" {
 export function ClassNames(names: any, styleObject: any): string;

package/package.json

@@ -1,9 +1,9 @@
 {
     "name": "@babylonjs/gui-editor",
-    "version": "8.12.1",
-    "main": "dist/babylon.guiEditor.max.js",
-    "module": "dist/babylon.guiEditor.max.js",
-    "esnext": "dist/babylon.guiEditor.max.js",
+    "version": "8.13.1",
+    "main": "dist/babylon.guiEditor.js",
+    "module": "dist/babylon.guiEditor.js",
+    "esnext": "dist/babylon.guiEditor.js",
     "typings": "dist/babylon.guiEditor.module.d.ts",
     "files": [
         "dist/**/*.*",
@@ -11,7 +11,7 @@
         "license.md"
     ],
     "scripts": {
-        "build": "npm run clean && npm run build:dev && npm run build:prod && npm run build:declaration",
+        "build": "npm run clean && npm run build:prod && npm run build:declaration",
         "build:dev": "webpack --env development",
         "build:prod": "webpack --env production",
         "build:declaration": "build-tools -c pud --config ./config.json",
@@ -24,8 +24,8 @@
         "@types/react-dom": ">=16.0.9"
     },
     "devDependencies": {
-        "@babylonjs/core": "^8.12.1",
-        "@babylonjs/gui": "^8.12.1",
+        "@babylonjs/core": "^8.13.1",
+        "@babylonjs/gui": "^8.13.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },