babylonjs-node-render-graph-editor 8.12.1 → 8.13.1

package/babylon.nodeRenderGraphEditor.d.ts

@@ -2322,7 +2322,9 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
         updateStateX(value: number): void;
         updateStateY(value: number): void;
         updateStateZ(value: number): void;
-        onCopyClick(): void;
+        onCopyClick(): string;
+        renderFluent(): import("react/jsx-runtime").JSX.Element;
+        renderOriginal(): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -2454,7 +2456,10 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
     export class TextLineComponent extends React.Component<ITextLineComponentProps> {
         constructor(props: ITextLineComponentProps);
         onLink(): void;
-        renderContent(): import("react/jsx-runtime").JSX.Element | null;
+        copyFn(): (() => string) | undefined;
+        renderContent(isLink: boolean, tooltip: string): import("react/jsx-runtime").JSX.Element | null;
+        renderOriginal(isLink: boolean, tooltip: string): import("react/jsx-runtime").JSX.Element;
+        renderFluent(isLink: boolean, tooltip: string): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -2510,6 +2515,8 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
         updateValue(value: string, valueToValidate?: string): void;
         incrementValue(amount: number): void;
         onKeyDown(event: React.KeyboardEvent): void;
+        renderFluent(value: string, placeholder: string, step: number): import("react/jsx-runtime").JSX.Element;
+        renderOriginal(value: string, placeholder: string, step: number): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -2571,6 +2578,8 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
         onInput(newValueString: any): void;
         prepareDataToRead(value: number): number;
         onCopyClick(): void;
+        renderFluent(): import("react/jsx-runtime").JSX.Element;
+        renderOriginal(): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -2640,7 +2649,9 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
         raiseOnPropertyChanged(newValue: number, previousValue: number): void;
         setValue(value: string | number): void;
         updateValue(valueString: string): void;
-        onCopyClick(): void;
+        onCopyClickStr(): string;
+        private _renderFluent;
+        private _renderOriginal;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -3049,6 +3060,8 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
         private _uploadInputRef;
         constructor(props: IFileButtonLineProps);
         onChange(evt: any): void;
+        renderFluent(): import("react/jsx-runtime").JSX.Element;
+        renderOriginal(): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -3164,6 +3177,8 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
         private _convertToColor;
         private _toColor3;
         onCopyClick(): void;
+        renderFluent(): import("react/jsx-runtime").JSX.Element;
+        renderOriginal(): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -3252,6 +3267,8 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
         }): boolean;
         onChange(): void;
         onCopyClick(): void;
+        renderOriginal(): import("react/jsx-runtime").JSX.Element;
+        renderFluent(): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -3272,6 +3289,8 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
     }
     export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
         constructor(props: IButtonLineComponentProps);
+        renderFluent(): import("react/jsx-runtime").JSX.Element;
+        renderOriginal(): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -3296,6 +3315,513 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type TextareaProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<string> & {
+        placeholder?: string;
+    };
+    /**
+     * This is a texarea box that stops propagation of change/keydown events
+     * @param props
+     * @returns
+     */
+    export var Textarea: React.FunctionComponent<any>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type SyncedSliderProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.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 var SyncedSliderInput: React.FunctionComponent<SyncedSliderProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type SwitchProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.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 var Switch: React.FunctionComponent<SwitchProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type SpinButtonProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<number>;
+    export var SpinButton: React.FunctionComponent<SpinButtonProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+    
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type InputProps<T extends string | number> = BABYLON.NodeRenderGraphEditor.SharedUIComponents.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 var Input: React.FunctionComponent<InputProps<string | number>>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        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 = BABYLON.NodeRenderGraphEditor.SharedUIComponents.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 var Dropdown: React.FunctionComponent<DropdownProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type ColorPickerProps<C extends BABYLON.Color3 | BABYLON.Color4> = {
+        isLinearMode?: boolean;
+    } & BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<C>;
+    export var ColorPickerPopup: React.FunctionComponent<ColorPickerProps<BABYLON.Color3 | BABYLON.Color4>>;
+    type HsvKey = "h" | "s" | "v";
+    export type InputHexProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<BABYLON.Color3 | BABYLON.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 BABYLON.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 var InputHexField: React.FunctionComponent<InputHexProps>;
+    type InputHsvFieldProps = {
+        color: BABYLON.Color3 | BABYLON.Color4;
+        label: string;
+        hsvKey: HsvKey;
+        onChange: (color: BABYLON.Color3 | BABYLON.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 var InputHsvField: React.FunctionComponent<InputHsvFieldProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type CheckboxProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<boolean>;
+    /**
+     * This is a primitive fluent checkbox that can both read and write checked state
+     * @param props
+     * @returns Checkbox component
+     */
+    export var Checkbox: React.FunctionComponent<CheckboxProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type AccordionSectionProps = {
+        title: string;
+    };
+    export var AccordionSection: React.FunctionComponent<React.PropsWithChildren<AccordionSectionProps>>;
+    export var Accordion: React.FunctionComponent<React.PropsWithChildren>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type VectorPropertyLineProps<V extends BABYLON.Vector3 | BABYLON.Vector4> = BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<V> & BABYLON.NodeRenderGraphEditor.SharedUIComponents.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<BABYLON.Vector3> & {
+        /**
+         * Display angles as degrees instead of radians
+         */
+        useDegrees?: boolean;
+    };
+    export var RotationVectorPropertyLine: React.FunctionComponent<RotationVectorPropertyLineProps>;
+    export var Vector3PropertyLine: React.FunctionComponent<VectorPropertyLineProps<BABYLON.Vector3>>;
+    export var Vector4PropertyLine: React.FunctionComponent<VectorPropertyLineProps<BABYLON.Vector4>>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        type TextProps = {
+        value: string;
+        tooltip?: string;
+    };
+    /**
+     * Wraps text in a property line
+     * @param props - BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps and TextProps
+     * @returns property-line wrapped text
+     */
+    export var TextPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps & TextProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        type SyncedSliderLineProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.SyncedSliderProps & BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps;
+    /**
+     * Renders a simple wrapper around the SyncedSliderInput
+     * @param props
+     * @returns
+     */
+    export var SyncedSliderLine: React.FunctionComponent<SyncedSliderLineProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        /**
+     * 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 var SwitchPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps & BABYLON.NodeRenderGraphEditor.SharedUIComponents.SwitchProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        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 var 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 var PropertyLine: import("react").ForwardRefExoticComponent<PropertyLineProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    export var PlaceholderPropertyLine: React.FunctionComponent<BaseComponentProps<any> & PropertyLineProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        type LinkProps = {
+        value: string;
+        tooltip?: string;
+        onLink?: () => void;
+        url?: string;
+    };
+    /**
+     * Wraps a link in a property line
+     * @param props - BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps and LinkProps
+     * @returns property-line wrapped link
+     */
+    export var LinkPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps & LinkProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export var TextInputPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.InputProps<string> & BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps>;
+    export var FloatInputPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.InputProps<number> & BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        /**
+     * Wraps a hex input in a property line
+     * @param props - BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps and BABYLON.NodeRenderGraphEditor.SharedUIComponents.InputHexProps
+     * @returns property-line wrapped input hex component
+     */
+    export var HexPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.InputHexProps & BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        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 var 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 var FluentToolWrapper: React.FunctionComponent<React.PropsWithChildren<ToolHostProps>>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        type FileUploadLineProps = Omit<BABYLON.NodeRenderGraphEditor.SharedUIComponents.ButtonLineProps, "onClick"> & {
+        onClick: (file: File) => void;
+        accept: string;
+    };
+    export var FileUploadLine: React.FunctionComponent<FileUploadLineProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        /**
+     * Wraps a dropdown in a property line
+     * @param props - BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps and BABYLON.NodeRenderGraphEditor.SharedUIComponents.DropdownProps
+     * @returns property-line wrapped dropdown
+     */
+    export var DropdownPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps & BABYLON.NodeRenderGraphEditor.SharedUIComponents.DropdownProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type ColorPropertyLineProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.ColorPickerProps<BABYLON.Color3 | BABYLON.Color4> & BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps;
+    export var Color3PropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.ColorPickerProps<BABYLON.Color3> & BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps>;
+    export var Color4PropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.ColorPickerProps<BABYLON.Color4> & BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        /**
+     * Wraps a checkbox in a property line
+     * @param props - BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps and BABYLON.NodeRenderGraphEditor.SharedUIComponents.CheckboxProps
+     * @returns property-line wrapped checkbox
+     */
+    export var CheckboxPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps & BABYLON.NodeRenderGraphEditor.SharedUIComponents.CheckboxProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        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 var ButtonLine: React.FunctionComponent<ButtonLineProps>;
+
+
+
 }
 declare module BABYLON.NodeRenderGraphEditor {