@babylonjs/gui-editor 5.26.0 → 5.27.0

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

@@ -1540,7 +1540,7 @@ export class HexColor extends React.Component<IHexColorProps, {
 
 }
 declare module "@babylonjs/gui-editor/components/bars/CommandBarComponent" {
-import * as React from "react";
+import { FC } from "react";
 export interface ICommandBarComponentProps {
     onSaveButtonClicked?: () => void;
     onSaveToSnippetButtonClicked?: () => void;
@@ -1551,8 +1551,11 @@ export interface ICommandBarComponentProps {
     onPanButtonClicked?: () => void;
     onZoomButtonClicked?: () => void;
     onFitButtonClicked?: () => void;
+    onArtboardColorChanged?: (newColor: string) => void;
+    artboardColor?: string;
+    artboardColorPickerColor?: string;
 }
-export const CommandBarComponent: React.FC<ICommandBarComponentProps>;
+export const CommandBarComponent: FC<ICommandBarComponentProps>;
 
 }
 declare module "@babylonjs/gui-editor/components/bars/CommandButtonComponent" {
@@ -1615,6 +1618,96 @@ declare module "@babylonjs/gui-editor/components/classNames" {
 export function ClassNames(names: any, styleObject: any): string;
 export function JoinClassNames(styleObject: any, ...names: string[]): string;
 
+}
+declare module "@babylonjs/gui-editor/components/colorPicker/ColorComponentEntry" {
+import * as React from "react";
+import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
+export interface IColorComponentEntryProps {
+    value: number;
+    label: string;
+    max?: number;
+    min?: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+    lockObject: LockObject;
+}
+export class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
+    constructor(props: IColorComponentEntryProps);
+    updateValue(valueString: string): void;
+    lock(): void;
+    unlock(): void;
+    render(): JSX.Element;
+}
+
+}
+declare module "@babylonjs/gui-editor/components/colorPicker/ColorPicker" {
+import * as React from "react";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
+import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
+/**
+ * Interface used to specify creation options for color picker
+ */
+export interface IColorPickerProps {
+    color: Color3 | Color4;
+    linearhint?: boolean;
+    debugMode?: boolean;
+    onColorChanged?: (color: Color3 | Color4) => void;
+    lockObject: LockObject;
+    backgroundColor?: string;
+}
+/**
+ * Interface used to specify creation options for color picker
+ */
+export interface IColorPickerState {
+    color: Color3;
+    alpha: number;
+}
+/**
+ * Class used to create a color picker
+ */
+export class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
+    private _saturationRef;
+    private _hueRef;
+    private _isSaturationPointerDown;
+    private _isHuePointerDown;
+    constructor(props: IColorPickerProps);
+    shouldComponentUpdate(nextProps: IColorPickerProps, nextState: IColorPickerState): boolean;
+    onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+    onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+    onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
+    onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+    onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+    onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
+    private _evaluateSaturation;
+    private _evaluateHue;
+    componentDidUpdate(): void;
+    raiseOnColorChanged(): void;
+    render(): JSX.Element;
+}
+
+}
+declare module "@babylonjs/gui-editor/components/colorPicker/HexColor" {
+import * as React from "react";
+import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
+export interface IHexColorProps {
+    value: string;
+    expectedLength: number;
+    onChange: (value: string) => void;
+    lockObject: LockObject;
+}
+export class HexColor extends React.Component<IHexColorProps, {
+    hex: string;
+}> {
+    constructor(props: IHexColorProps);
+    shouldComponentUpdate(nextProps: IHexColorProps, nextState: {
+        hex: string;
+    }): boolean;
+    lock(): void;
+    unlock(): void;
+    updateHexValue(valueString: string): void;
+    render(): JSX.Element;
+}
+
 }
 declare module "@babylonjs/gui-editor/components/Icon" {
 /// <reference types="react" />
@@ -1634,6 +1727,85 @@ export type LabelProps = {
 };
 export const Label: React.FC<LabelProps>;
 
+}
+declare module "@babylonjs/gui-editor/components/lines/ColorLineComponent" {
+import * as React from "react";
+import { Observable } from "@babylonjs/core/Misc/observable";
+import { Color4 } from "@babylonjs/core/Maths/math.color";
+import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
+import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
+export interface IColorLineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    onPropertyChangedObservable: Observable<PropertyChangedEvent>;
+    onChange?: () => void;
+    isLinear?: boolean;
+    icon?: string;
+    iconLabel?: string;
+    disableAlpha?: boolean;
+    lockObject: LockObject;
+}
+interface IColorLineComponentState {
+    isExpanded: boolean;
+    color: Color4;
+}
+export class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
+    constructor(props: IColorLineComponentProps);
+    shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
+    getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): Color4;
+    setColorFromString(colorString: string): void;
+    setColor(newColor: Color4): void;
+    switchExpandState(): void;
+    updateStateR(value: number): void;
+    updateStateG(value: number): void;
+    updateStateB(value: number): void;
+    updateStateA(value: number): void;
+    copyToClipboard(): void;
+    private _convertToColor;
+    private _toColor3;
+    render(): JSX.Element;
+}
+export {};
+
+}
+declare module "@babylonjs/gui-editor/components/lines/ColorPickerLineComponent" {
+import * as React from "react";
+import { Color4, Color3 } from "@babylonjs/core/Maths/math.color";
+import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
+export interface IColorPickerComponentProps {
+    value: Color4 | Color3;
+    linearHint?: boolean;
+    onColorChanged: (newOne: string) => void;
+    icon?: string;
+    iconLabel?: string;
+    shouldPopRight?: boolean;
+    lockObject?: LockObject;
+    backgroundColor?: string;
+}
+interface IColorPickerComponentState {
+    pickerEnabled: boolean;
+    color: Color3 | Color4;
+    hex: string;
+}
+export class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
+    private _floatRef;
+    private _floatHostRef;
+    private _coverRef;
+    constructor(props: IColorPickerComponentProps);
+    syncPositions(): void;
+    shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
+    getHexString(props?: Readonly<IColorPickerComponentProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): string;
+    componentDidUpdate(): void;
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
+export {};
+
 }
 declare module "@babylonjs/gui-editor/components/lines/FileButtonLineComponent" {
 import * as React from "react";
@@ -1653,6 +1825,40 @@ export class FileButtonLineComponent extends React.Component<IFileButtonLineComp
     render(): JSX.Element;
 }
 
+}
+declare module "@babylonjs/gui-editor/components/lines/NumericInputComponent" {
+import * as React from "react";
+import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
+interface INumericInputComponentProps {
+    label: string;
+    value: number;
+    step?: number;
+    onChange: (value: number) => void;
+    precision?: number;
+    icon?: string;
+    iconLabel?: string;
+    lockObject: LockObject;
+}
+export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
+    value: string;
+}> {
+    static defaultProps: {
+        step: number;
+    };
+    private _localChange;
+    constructor(props: INumericInputComponentProps);
+    componentWillUnmount(): void;
+    shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
+        value: string;
+    }): boolean;
+    updateValue(valueString: string): void;
+    onBlur(): void;
+    incrementValue(amount: number): void;
+    onKeyDown(evt: React.KeyboardEvent<HTMLInputElement>): void;
+    render(): JSX.Element;
+}
+export {};
+
 }
 declare module "@babylonjs/gui-editor/components/MessageDialog" {
 import * as React from "react";
@@ -3265,6 +3471,11 @@ const _default: {
 };
 export default _default;
 export const Default: {};
+export const WithArtboardColor: {
+    parameters: {
+        onArtboardColorChanged: (color: string) => void;
+    };
+};
 
 }
 declare module "@babylonjs/gui-editor/stories/bars/CommandButtonComponent.stories" {
@@ -3288,6 +3499,20 @@ export const Default: any;
 export const Wide: any;
 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;
+    };
+};
+
 }
 declare module "@babylonjs/gui-editor/stories/Icon.stories" {
 /// <reference types="react" />
@@ -3311,6 +3536,47 @@ const _default: {
 export default _default;
 export const Default: any;
 
+}
+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>;
+    };
+};
+
+}
+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;
+    };
+};
+
 }
 declare module "@babylonjs/gui-editor/stories/lines/FileButtonLineComponent.stories" {
 import { FileButtonLineComponent } from "@babylonjs/gui-editor/components/lines/FileButtonLineComponent";
@@ -3320,6 +3586,20 @@ const _default: {
 export default _default;
 export const Default: {};
 
+}
+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;
+    };
+};
+
 }
 declare module "@babylonjs/gui-editor/stories/MessageDialog.stories" {
 /// <reference types="react" />

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@babylonjs/gui-editor",
-    "version": "5.26.0",
+    "version": "5.27.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.26.0",
-        "@babylonjs/gui": "^5.26.0",
+        "@babylonjs/core": "^5.27.0",
+        "@babylonjs/gui": "^5.27.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "rimraf": "^3.0.2",