@babylonjs/gui-editor 5.23.0 → 5.25.0

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

@@ -140,11 +140,14 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
 import { Rectangle } from "@babylonjs/gui/2D/controls/rectangle";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface IButtonPropertyGridComponentProps {
     rectangles: Rectangle[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     onAddComponent: (newComponent: string) => void;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class ButtonPropertyGridComponent extends React.Component<IButtonPropertyGridComponentProps> {
     constructor(props: IButtonPropertyGridComponentProps);
@@ -159,10 +162,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
 import { Checkbox } from "@babylonjs/gui/2D/controls/checkbox";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface ICheckboxPropertyGridComponentProps {
     checkboxes: Checkbox[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class CheckboxPropertyGridComponent extends React.Component<ICheckboxPropertyGridComponentProps> {
     constructor(props: ICheckboxPropertyGridComponentProps);
@@ -177,10 +183,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { ColorPicker } from "@babylonjs/gui/2D/controls/colorpicker";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface IColorPickerPropertyGridComponentProps {
     colorPickers: ColorPicker[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class ColorPickerPropertyGridComponent extends React.Component<IColorPickerPropertyGridComponentProps> {
     constructor(props: IColorPickerPropertyGridComponentProps);
@@ -195,19 +204,36 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { Control } from "@babylonjs/gui/2D/controls/control";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
+import { IInspectableOptions } from "@babylonjs/core/Misc/iInspectable";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface ICommonControlPropertyGridComponentProps {
     controls: Control[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     hideDimensions?: boolean;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
-export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
+interface ICommonControlPropertyGridComponentState {
+    fontFamilyOptions: IInspectableOptions[];
+    value: number;
+}
+export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps, ICommonControlPropertyGridComponentState> {
     private _onPropertyChangedObserver;
+    private _onFontsParsedObserver;
     constructor(props: ICommonControlPropertyGridComponentProps);
+    componentWillMount(): void;
+    private _checkFontsInLayout;
     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;
     render(): JSX.Element;
 }
@@ -235,10 +261,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { Control } from "@babylonjs/gui/2D/controls/control";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface IControlPropertyGridComponentProps {
     controls: Control[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class ControlPropertyGridComponent extends React.Component<IControlPropertyGridComponentProps> {
     constructor(props: IControlPropertyGridComponentProps);
@@ -253,10 +282,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
 import { DisplayGrid } from "@babylonjs/gui/2D/controls/displayGrid";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface IDisplayGridPropertyGridComponentProps {
     displayGrids: DisplayGrid[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class DisplayGridPropertyGridComponent extends React.Component<IDisplayGridPropertyGridComponentProps> {
     constructor(props: IDisplayGridPropertyGridComponentProps);
@@ -271,10 +303,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
 import { Ellipse } from "@babylonjs/gui/2D/controls/ellipse";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface IEllipsePropertyGridComponentProps {
     ellipses: Ellipse[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class EllipsePropertyGridComponent extends React.Component<IEllipsePropertyGridComponentProps> {
     constructor(props: IEllipsePropertyGridComponentProps);
@@ -289,10 +324,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
 import { Grid } from "@babylonjs/gui/2D/controls/grid";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface IGridPropertyGridComponentProps {
     grids: Grid[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
     onUpdateRequiredObservable?: Observable<void>;
 }
 export class GridPropertyGridComponent extends React.Component<IGridPropertyGridComponentProps> {
@@ -328,10 +366,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
 import { ImageBasedSlider } from "@babylonjs/gui/2D/controls/sliders/imageBasedSlider";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface IImageBasedSliderPropertyGridComponentProps {
     imageBasedSliders: ImageBasedSlider[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class ImageBasedSliderPropertyGridComponent extends React.Component<IImageBasedSliderPropertyGridComponentProps> {
     constructor(props: IImageBasedSliderPropertyGridComponentProps);
@@ -346,10 +387,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
 import { Image } from "@babylonjs/gui/2D/controls/image";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface IImagePropertyGridComponentProps {
     images: Image[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class ImagePropertyGridComponent extends React.Component<IImagePropertyGridComponentProps> {
     private _observers;
@@ -371,10 +415,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { InputText } from "@babylonjs/gui/2D/controls/inputText";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface IInputTextPropertyGridComponentProps {
     inputTexts: InputText[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class InputTextPropertyGridComponent extends React.Component<IInputTextPropertyGridComponentProps> {
     constructor(props: IInputTextPropertyGridComponentProps);
@@ -389,10 +436,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
 import { Line } from "@babylonjs/gui/2D/controls/line";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface ILinePropertyGridComponentProps {
     lines: Line[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class LinePropertyGridComponent extends React.Component<ILinePropertyGridComponentProps> {
     constructor(props: ILinePropertyGridComponentProps);
@@ -408,10 +458,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
 import { RadioButton } from "@babylonjs/gui/2D/controls/radioButton";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface IRadioButtonPropertyGridComponentProps {
     radioButtons: RadioButton[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class RadioButtonPropertyGridComponent extends React.Component<IRadioButtonPropertyGridComponentProps> {
     constructor(props: IRadioButtonPropertyGridComponentProps);
@@ -426,10 +479,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
 import { Rectangle } from "@babylonjs/gui/2D/controls/rectangle";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface IRectanglePropertyGridComponentProps {
     rectangles: Rectangle[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class RectanglePropertyGridComponent extends React.Component<IRectanglePropertyGridComponentProps> {
     constructor(props: IRectanglePropertyGridComponentProps);
@@ -444,10 +500,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
 import { ScrollViewer } from "@babylonjs/gui/2D/controls/scrollViewers/scrollViewer";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface IScrollViewerPropertyGridComponentProps {
     scrollViewers: ScrollViewer[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class ScrollViewerPropertyGridComponent extends React.Component<IScrollViewerPropertyGridComponentProps> {
     constructor(props: IScrollViewerPropertyGridComponentProps);
@@ -462,10 +521,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
 import { Slider } from "@babylonjs/gui/2D/controls/sliders/slider";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface ISliderGenericPropertyGridComponentProps {
     sliders: Slider[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class SliderGenericPropertyGridComponent extends React.Component<ISliderGenericPropertyGridComponentProps> {
     constructor(props: ISliderGenericPropertyGridComponentProps);
@@ -499,10 +561,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
 import { StackPanel } from "@babylonjs/gui/2D/controls/stackPanel";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface IStackPanelPropertyGridComponentProps {
     stackPanels: StackPanel[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class StackPanelPropertyGridComponent extends React.Component<IStackPanelPropertyGridComponentProps> {
     constructor(props: IStackPanelPropertyGridComponentProps);
@@ -517,10 +582,13 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 import { PropertyChangedEvent } from "@babylonjs/gui-editor/propertyChangedEvent";
 import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock";
 import { LockObject } from "@babylonjs/gui-editor/tabs/propertyGrids/lockObject";
+import { GlobalState } from "@babylonjs/gui-editor/globalState";
 interface ITextBlockPropertyGridComponentProps {
     textBlocks: TextBlock[];
     lockObject: LockObject;
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onFontsParsedObservable?: Observable<void>;
+    globalState?: GlobalState;
 }
 export class TextBlockPropertyGridComponent extends React.Component<ITextBlockPropertyGridComponentProps> {
     constructor(props: ITextBlockPropertyGridComponentProps);
@@ -847,7 +915,7 @@ export class CoordinateHelper {
     static NodeToRTTSpace(node: Control, x: number, y: number, reference?: Vector2, storedValues?: Rect, stopAt?: Control): 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;
+    static MousePointerToRTTSpace(_node?: Control, x?: number, y?: number): Vector2;
     private static _ResetMatrixArray;
     static ComputeLocalBounds(node: Control): Rect;
     /**
@@ -982,6 +1050,7 @@ export enum ConstraintDirection {
     Y = 3
 }
 export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps> {
+    private _mouseDown;
     private _rootContainer;
     private _setConstraintDirection;
     private _mouseStartPoint;
@@ -994,12 +1063,14 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
     private _guiRenderObserver;
     private _doubleClick;
     _liveGuiTextureRerender: boolean;
+    private _currLeft;
+    private _currTop;
     private _controlsHit;
     private _pointerTravelDistance;
     private _processSelectionOnUp;
     private _visibleRegionContainer;
-    private _currLeft;
-    private _currTop;
+    private static _addedFonts;
+    static get addedFonts(): string[];
     get visibleRegionContainer(): Container;
     private _panAndZoomContainer;
     get panAndZoomContainer(): Container;
@@ -1065,6 +1136,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
     panning(): void;
     moveControls(moveHorizontal: boolean, amount: number): void;
     zoomWheel(event: React.WheelEvent): void;
+    zoomDrag(event: React.MouseEvent): void;
     zooming(delta: number): void;
     zeroIfClose(vec: Vector3): void;
     render(): JSX.Element;
@@ -1127,10 +1199,13 @@ export class GlobalState {
     workbench: WorkbenchComponent;
     onPropertyChangedObservable: Observable<PropertyChangedEvent>;
     private _tool;
+    private _usePrevSelected;
     private _prevTool;
     onToolChangeObservable: Observable<void>;
     get tool(): GUIEditorTool;
     set tool(newTool: GUIEditorTool);
+    get usePrevSelected(): boolean;
+    set usePrevSelected(val: boolean);
     restorePreviousTool(): void;
     onFitControlsToWindowObservable: Observable<void>;
     onReframeWindowObservable: Observable<void>;
@@ -1148,6 +1223,7 @@ export class GlobalState {
     onGizmoUpdateRequireObservable: Observable<void>;
     onArtBoardUpdateRequiredObservable: Observable<void>;
     onBackgroundColorChangeObservable: Observable<void>;
+    onFontsParsedObservable: Observable<void>;
     onPointerMoveObservable: Observable<import("react").PointerEvent<HTMLCanvasElement>>;
     onPointerUpObservable: Observable<Nullable<PointerEvent | import("react").PointerEvent<HTMLCanvasElement>>>;
     draggedControl: Nullable<Control>;
@@ -2063,9 +2139,14 @@ 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;
@@ -2073,9 +2154,12 @@ export interface IOptionsLineComponentProps {
     className?: string;
     valuesAreStrings?: boolean;
     defaultIfNull?: number;
+    fromFontDropdown?: boolean;
+    valueProp?: number;
 }
 export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
     value: number | string;
+    addCustom: boolean;
 }> {
     private _localChange;
     private _remapValueIn;
@@ -2084,10 +2168,12 @@ 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;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@babylonjs/gui-editor",
-    "version": "5.23.0",
+    "version": "5.25.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.23.0",
-        "@babylonjs/gui": "^5.23.0",
+        "@babylonjs/core": "^5.25.0",
+        "@babylonjs/gui": "^5.25.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "rimraf": "^3.0.2",