@babylonjs/gui-editor 5.0.0-beta.7 → 5.0.0-beta.8

package/babylon.guiEditor.module.d.ts

@@ -31,6 +31,73 @@ declare module "@babylonjs/gui-editor/tools" {
         static reorderGrid(grid: Grid, index: number, control: Control, cell: Vector2): void;
     }
 }
+declare module "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent" {
+    export class PropertyChangedEvent {
+        object: any;
+        property: string;
+        value: any;
+        initialValue: any;
+        allowNullValue?: boolean;
+    }
+}
+declare module "@babylonjs/gui-editor/diagram/coordinateHelper" {
+    import { Control } from "@babylonjs/gui/2D/controls/control";
+    import { Matrix2D } from "@babylonjs/gui/2D/math2D";
+    import { Vector2 } from "@babylonjs/core/Maths/math.vector";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { GlobalState } from "@babylonjs/gui-editor/globalState";
+    import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
+    export type DimensionProperties = "width" | "left" | "height" | "top" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom";
+    export class Rect {
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        constructor(left: number, top: number, right: number, bottom: number);
+        get center(): Vector2;
+        get width(): number;
+        get height(): number;
+    }
+    export class CoordinateHelper {
+        private static _matrixCache;
+        static globalState: GlobalState;
+        /**
+         * Get the scaling of a specific GUI control
+         * @param node the node for which we are getting the scaling
+         * @param relative should we return only the relative scaling (relative to the parent)
+         * @returns an X,Y vector of the scaling
+         */
+        static getScale(node: Control, relative?: boolean): Vector2;
+        static getRotation(node: Control, relative?: boolean): number;
+        /**
+         * This function calculates a local matrix for a node, including it's full transformation and pivot point
+         *
+         * @param node the node to calculate the matrix for
+         * @param useStoredValues should the stored (cached) values be used to calculate the matrix
+         * @returns a new matrix for the control
+         */
+        static getNodeMatrix(node: Control, storedValues?: Rect): Matrix2D;
+        /**
+         * Using the node's tree, calculate its world matrix and return it
+         * @param node the node to calculate the matrix for
+         * @param useStoredValuesIfPossible used stored valued (cached when pointer down is clicked)
+         * @returns the world matrix for this node
+         */
+        static nodeToRTTWorldMatrix(node: Control, storedValues?: Rect): Matrix2D;
+        static nodeToRTTSpace(node: Control, x: number, y: number, reference?: Vector2, storedValues?: Rect): Vector2;
+        static rttToLocalNodeSpace(node: Control, x: number, y: number, reference?: Vector2, storedValues?: Rect): Vector2;
+        static rttToCanvasSpace(x: number, y: number): Vector2;
+        static mousePointerToRTTSpace(node: Control, x?: number, y?: number): Vector2;
+        private static resetMatrixArray;
+        static computeLocalBounds(node: Control): Rect;
+        /**
+         * converts a node's dimensions to percentage, properties can be specified as a list, or can convert all
+        */
+        static convertToPercentage(guiControl: Control, properties?: DimensionProperties[], onPropertyChangedObservable?: Observable<PropertyChangedEvent>): void;
+        static round(value: number): number;
+        static convertToPixels(guiControl: Control, properties?: DimensionProperties[], onPropertyChangedObservable?: Observable<PropertyChangedEvent>): void;
+    }
+}
 declare module "@babylonjs/gui-editor/diagram/workbench" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/gui-editor/globalState";
@@ -80,8 +147,9 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         _liveGuiTextureRerender: boolean;
         private _anyControlClicked;
         private _visibleRegionContainer;
-        private _panAndZoomContainer;
         get visibleRegionContainer(): Container;
+        private _panAndZoomContainer;
+        get panAndZoomContainer(): Container;
         private _trueRootContainer;
         set trueRootContainer(value: Container);
         get trueRootContainer(): Container;
@@ -129,7 +197,6 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         isSelected(value: boolean, guiNode: Control): void;
         clicked: boolean;
         _onMove(guiControl: Control, evt: Vector2, startPos: Vector2, ignorClick?: boolean): boolean;
-        convertToPercentage(guiControl: Control, includeScale: boolean): void;
         onMove(evt: React.PointerEvent): void;
         private _screenToTexturePosition;
         private getScaledPointerPosition;
@@ -146,15 +213,6 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         render(): JSX.Element;
     }
 }
-declare module "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent" {
-    export class PropertyChangedEvent {
-        object: any;
-        property: string;
-        value: any;
-        initialValue: any;
-        allowNullValue?: boolean;
-    }
-}
 declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject" {
     /**
      * Class used to provide lock mechanism
@@ -166,55 +224,6 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lock
         lock: boolean;
     }
 }
-declare module "@babylonjs/gui-editor/diagram/coordinateHelper" {
-    import { Control } from "@babylonjs/gui/2D/controls/control";
-    import { Matrix2D } from "@babylonjs/gui/2D/math2D";
-    import { Vector2 } from "@babylonjs/core/Maths/math.vector";
-    import { GlobalState } from "@babylonjs/gui-editor/globalState";
-    export class Rect {
-        top: number;
-        left: number;
-        right: number;
-        bottom: number;
-        constructor(left: number, top: number, right: number, bottom: number);
-        get center(): Vector2;
-        get width(): number;
-        get height(): number;
-    }
-    export class CoordinateHelper {
-        private static _matrixCache;
-        static globalState: GlobalState;
-        /**
-         * Get the scaling of a specific GUI control
-         * @param node the node for which we are getting the scaling
-         * @param relative should we return only the relative scaling (relative to the parent)
-         * @returns an X,Y vector of the scaling
-         */
-        static getScale(node: Control, relative?: boolean): Vector2;
-        static getRotation(node: Control, relative?: boolean): number;
-        /**
-         * This function calculates a local matrix for a node, including it's full transformation and pivot point
-         *
-         * @param node the node to calculate the matrix for
-         * @param useStoredValues should the stored (cached) values be used to calculate the matrix
-         * @returns a new matrix for the control
-         */
-        static getNodeMatrix(node: Control, storedValues?: Rect): Matrix2D;
-        /**
-         * Using the node's tree, calculate its world matrix and return it
-         * @param node the node to calculate the matrix for
-         * @param useStoredValuesIfPossible used stored valued (cached when pointer down is clicked)
-         * @returns the world matrix for this node
-         */
-        static nodeToRTTWorldMatrix(node: Control, storedValues?: Rect): Matrix2D;
-        static nodeToRTTSpace(node: Control, x: number, y: number, reference?: Vector2, storedValues?: Rect): Vector2;
-        static rttToLocalNodeSpace(node: Control, x: number, y: number, reference?: Vector2, storedValues?: Rect): Vector2;
-        static rttToCanvasSpace(x: number, y: number): Vector2;
-        static mousePointerToRTTSpace(node: Control, x?: number, y?: number): Vector2;
-        private static resetMatrixArray;
-        static computeLocalBounds(node: Control): Rect;
-    }
-}
 declare module "@babylonjs/gui-editor/diagram/guiGizmo" {
     import { Vector2 } from "@babylonjs/core/Maths/math.vector";
     import * as React from "react";
@@ -392,7 +401,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/targetsProxy" {
      * @param setter an optional setter function to override the default setter behavior
      * @returns a proxy object that can be passed as a target into the input
      */
-    export function makeTargetsProxy(targets: any[], onPropertyChangedObservable?: Observable<PropertyChangedEvent>): {};
+    export function makeTargetsProxy<Type>(targets: Type[], onPropertyChangedObservable?: Observable<PropertyChangedEvent>, getProperty?: (target: Type, property: keyof Type) => any): any;
 }
 declare module "@babylonjs/gui-editor/sharedUiComponents/lines/checkBoxLineComponent" {
     import * as React from "react";
@@ -487,6 +496,9 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/floatLineComponen
         icon?: string;
         iconLabel?: string;
         defaultValue?: number;
+        unit?: string;
+        onUnitClicked?: () => void;
+        unitLocked?: boolean;
     }
     export class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
         value: string;
@@ -561,6 +573,9 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/textInputLineComp
         noUnderline?: boolean;
         numbersOnly?: boolean;
         delayInput?: boolean;
+        unit?: string;
+        onUnitClicked?: (unit: string) => void;
+        unitLocked?: boolean;
     }
     export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
         value: string;
@@ -785,8 +800,6 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/c
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
     export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
-        private _width;
-        private _height;
         constructor(props: ICommonControlPropertyGridComponentProps);
         private _updateAlignment;
         private _checkAndUpdateValues;
@@ -975,6 +988,9 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/i
     }
     export class ImagePropertyGridComponent extends React.Component<IImagePropertyGridComponentProps> {
         constructor(props: IImagePropertyGridComponentProps);
+        toggleAnimations(on: boolean): void;
+        getMaxCells(): number;
+        updateCellSize(): void;
         render(): JSX.Element;
     }
 }
@@ -1197,7 +1213,7 @@ declare module "@babylonjs/gui-editor/guiNodeTools" {
     import { ImageBasedSlider } from "@babylonjs/gui/2D/controls/sliders/imageBasedSlider";
     export class GUINodeTools {
         static ImageControlDefaultUrl: string;
-        static CreateControlFromString(data: string): Grid | Line | Rectangle | Image | TextBlock | Slider | ImageBasedSlider | RadioButton | InputText | ColorPicker | StackPanel | Ellipse | Checkbox | DisplayGrid;
+        static CreateControlFromString(data: string): Grid | Rectangle | Line | Image | TextBlock | Slider | ImageBasedSlider | RadioButton | InputText | ColorPicker | StackPanel | Ellipse | Checkbox | DisplayGrid;
     }
 }
 declare module "@babylonjs/gui-editor/components/propertyTab/propertyTabComponent" {
@@ -1263,13 +1279,20 @@ declare module "@babylonjs/gui-editor/sharedComponents/messageDialog" {
 declare module "@babylonjs/gui-editor/components/sceneExplorer/treeItemLabelComponent" {
     import * as React from "react";
     interface ITreeItemLabelComponentProps {
-        label: string;
+        label?: string;
         onClick?: () => void;
-        color: string;
+        onChange: (newValue: string) => void;
+        bracket: string;
+        renaming: boolean;
+        setRenaming: (renaming: boolean) => void;
     }
-    export class TreeItemLabelComponent extends React.Component<ITreeItemLabelComponentProps> {
+    interface ITreeItemLabelState {
+        value: string;
+    }
+    export class TreeItemLabelComponent extends React.Component<ITreeItemLabelComponentProps, ITreeItemLabelState> {
         constructor(props: ITreeItemLabelComponentProps);
         onClick(): void;
+        onBlur(): void;
         render(): JSX.Element;
     }
 }
@@ -1309,10 +1332,12 @@ declare module "@babylonjs/gui-editor/components/sceneExplorer/entities/gui/cont
     export class ControlTreeItemComponent extends React.Component<IControlTreeItemComponentProps, {
         isActive: boolean;
         isVisible: boolean;
+        isRenaming: boolean;
     }> {
         constructor(props: IControlTreeItemComponentProps);
         highlight(): void;
         switchVisibility(): void;
+        onRename(name: string): void;
         render(): JSX.Element;
     }
 }

package/package.json

@@ -4,14 +4,14 @@
     },
     "name": "@babylonjs/gui-editor",
     "description": "The Babylon.js GUI editor.",
-    "version": "5.0.0-beta.7",
+    "version": "5.0.0-beta.8",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "@babylonjs/core": "5.0.0-beta.7",
+        "@babylonjs/core": "5.0.0-beta.8",
         "tslib": "^2.3.1"
     },
     "files": [