@babylonjs/gui-editor 5.0.0-alpha.63 → 5.0.0-alpha.64

package/babylon.guiEditor.module.d.ts

@@ -674,6 +674,7 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
     import { Vector2, Vector3 } from "@babylonjs/core/Maths/math.vector";
     import { Scene } from "@babylonjs/core/scene";
     import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
+    import { Mesh } from "@babylonjs/core/Meshes/mesh";
     import { Plane } from "@babylonjs/core/Maths/math.plane";
     import { PointerInfo } from "@babylonjs/core/Events/pointerEvents";
     import { EventState } from "@babylonjs/core/Misc/observable";
@@ -681,8 +682,6 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
     export interface IWorkbenchComponentProps {
         globalState: GlobalState;
     }
-    export type FramePortData = {};
-    export const isFramePortData: (variableToCheck: any) => variableToCheck is FramePortData;
     export enum ConstraintDirection {
         NONE = 0,
         X = 2,
@@ -694,7 +693,7 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         private _setConstraintDirection;
         private _mouseStartPointX;
         private _mouseStartPointY;
-        private _textureMesh;
+        _textureMesh: Mesh;
         _scene: Scene;
         private _selectedGuiNodes;
         private _ctrlKeyIsPressed;
@@ -702,7 +701,6 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         private _constraintDirection;
         private _forcePanning;
         private _forceZooming;
-        private _forceMoving;
         private _forceSelecting;
         private _outlines;
         private _panning;
@@ -711,23 +709,30 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         private _isOverGUINode;
         private _clipboard;
         private _selectAll;
-        private _camera;
+        _camera: ArcRotateCamera;
         private _cameraRadias;
         private _cameraMaxRadiasFactor;
         private _pasted;
         private _engine;
         private _liveRenderObserver;
         private _guiRenderObserver;
+        private _mainSelection;
+        private _selectionDepth;
+        private _doubleClick;
+        private _lockMainSelection;
         get globalState(): GlobalState;
         get nodes(): Control[];
         get selectedGuiNodes(): Control[];
+        private _getParentWithDepth;
+        private _getMaxParent;
         constructor(props: IWorkbenchComponentProps);
+        determineMouseSelection(selection: Nullable<Control>): void;
         keyEvent: (evt: KeyboardEvent) => void;
         private updateHitTest;
         private updateHitTestForSelection;
         private setCameraRadius;
-        private copyToClipboard;
-        private pasteFromClipboard;
+        copyToClipboard(): void;
+        pasteFromClipboard(): void;
         CopyGUIControl(original: Control): void;
         private selectAllGUI;
         blurEvent: () => void;
@@ -739,6 +744,7 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         resizeGuiTexture(newvalue: Vector2): void;
         findNodeFromGuiElement(guiControl: Control): Control;
         appendBlock(guiElement: Control): Control;
+        private _isMainSelectionParent;
         createNewGuiNode(guiControl: Control): Control;
         private parent;
         private _convertToPixels;
@@ -748,6 +754,7 @@ 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;
         getGroundPosition(): Nullable<Vector3>;
         onDown(evt: React.PointerEvent<HTMLElement>): void;
@@ -756,7 +763,7 @@ declare module "@babylonjs/gui-editor/diagram/workbench" {
         createGUICanvas(): void;
         synchronizeLiveGUI(): void;
         addControls(scene: Scene, camera: ArcRotateCamera): void;
-        getPosition(scene: Scene, camera: ArcRotateCamera, plane: Plane): Vector3;
+        getPosition(scene: Scene, camera: ArcRotateCamera, plane: Plane, x?: number, y?: number): Vector3;
         panning(newPos: Vector3, initialPos: Vector3, inertia: number, ref: Vector3): Vector3;
         zoomWheel(p: PointerInfo, e: EventState, camera: ArcRotateCamera): number;
         zooming(delta: number, scene: Scene, camera: ArcRotateCamera, plane: Plane, ref: Vector3): void;
@@ -784,6 +791,82 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lock
         lock: boolean;
     }
 }
+declare module "@babylonjs/gui-editor/diagram/guiGizmo" {
+    import { Control } from "@babylonjs/gui/2D/controls/control";
+    import { Vector2 } from "@babylonjs/core/Maths/math.vector";
+    import * as React from "react";
+    import { GlobalState } from "@babylonjs/gui-editor/globalState";
+    export interface IGuiGizmoProps {
+        globalState: GlobalState;
+    }
+    export class GuiGizmoComponent extends React.Component<IGuiGizmoProps> {
+        scalePoints: HTMLDivElement[];
+        private _scalePointIndex;
+        private _pointerData;
+        private _htmlPoints;
+        private _matrixCache;
+        private _responsive;
+        constructor(props: IGuiGizmoProps);
+        componentDidMount(): void;
+        /**
+         * Update the gizmo's corners positions
+         * @param force should the update be forced. otherwise it will be updated only when the pointer is down
+         */
+        updateGizmo(force?: boolean): void;
+        private _resetMatrixArray;
+        /**
+         * 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
+         */
+        private _getNodeMatrix;
+        /**
+         * 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
+         */
+        private _nodeToRTTWorldMatrix;
+        private _nodeToRTTSpace;
+        private _rttToLocalNodeSpace;
+        private _rttToCanvasSpace;
+        private _plane;
+        private _mousePointerToRTTSpace;
+        /**
+         * 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
+         */
+        getScale(node: Control, relative?: boolean): Vector2;
+        getRotation(node: Control, relative?: boolean): number;
+        createBaseGizmo(): void;
+        onUp(evt?: React.PointerEvent): void;
+        private _onUp;
+        onMove(evt: React.PointerEvent): void;
+        private _initH;
+        private _initW;
+        private _initX;
+        private _initY;
+        private _onMove;
+        /**
+         * Calculate the 4 corners in node space
+         * @param node The node to use
+         */
+        private _nodeToCorners;
+        /**
+         * Computer the node's width, height, top and left, using the 4 corners
+         * @param node the node we use
+         */
+        private _updateNodeFromCorners;
+        private _rotate;
+        private _setNodeCorner;
+        private _setMousePosition;
+        render(): null;
+    }
+}
 declare module "@babylonjs/gui-editor/globalState" {
     import { Nullable } from "@babylonjs/core/types";
     import { Observable } from "@babylonjs/core/Misc/observable";
@@ -796,6 +879,7 @@ declare module "@babylonjs/gui-editor/globalState" {
     import { Scene } from "@babylonjs/core/scene";
     import { Control } from "@babylonjs/gui/2D/controls/control";
     import { LockObject } from "@babylonjs/gui-editor/sharedUiComponents/tabs/propertyGrids/lockObject";
+    import { GuiGizmoComponent } from "@babylonjs/gui-editor/diagram/guiGizmo";
     export enum DragOverLocation {
         ABOVE = 0,
         BELOW = 1,
@@ -826,6 +910,7 @@ declare module "@babylonjs/gui-editor/globalState" {
         controlCamera: boolean;
         selectionLock: boolean;
         workbench: WorkbenchComponent;
+        guiGizmo: GuiGizmoComponent;
         onPropertyChangedObservable: Observable<PropertyChangedEvent>;
         onZoomObservable: Observable<void>;
         onFitToWindowObservable: Observable<void>;
@@ -843,6 +928,7 @@ declare module "@babylonjs/gui-editor/globalState" {
         onDraggingEndObservable: Observable<void>;
         onDraggingStartObservable: Observable<void>;
         onWindowResizeObservable: Observable<void>;
+        onGizmoUpdateRequireObservable: Observable<void>;
         draggedControl: Nullable<Control>;
         draggedControlDirection: DragOverLocation;
         isSaving: boolean;
@@ -895,7 +981,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/checkBoxLineCompo
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/gui-editor/sharedUiComponents/propertyChangedEvent";
     export interface ICheckBoxLineComponentProps {
-        label: string;
+        label?: string;
         target?: any;
         propertyName?: string;
         isSelected?: () => boolean;
@@ -905,6 +991,8 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/checkBoxLineCompo
         disabled?: boolean;
         icon?: string;
         iconLabel?: string;
+        faIcons?: {
+        };
     }
     export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
         isSelected: boolean;
@@ -978,6 +1066,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/floatLineComponen
         onEnter?: (newValue: number) => void;
         icon?: string;
         iconLabel?: string;
+        defaultValue?: number;
     }
     export class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
         value: string;
@@ -1050,6 +1139,7 @@ declare module "@babylonjs/gui-editor/sharedUiComponents/lines/textInputLineComp
         iconLabel?: string;
         noUnderline?: boolean;
         numbersOnly?: boolean;
+        delayInput?: boolean;
     }
     export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
         value: string;
@@ -1269,10 +1359,10 @@ declare module "@babylonjs/gui-editor/components/propertyTab/propertyGrids/gui/c
     export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
         private _width;
         private _height;
-        private _responsive;
         constructor(props: ICommonControlPropertyGridComponentProps);
         private _updateAlignment;
         private _checkAndUpdateValues;
+        private _markChildrenAsDirty;
         render(): JSX.Element;
     }
 }
@@ -1659,7 +1749,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 | Rectangle | Line | TextBlock | Image | 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" {
@@ -1933,7 +2023,6 @@ declare module "@babylonjs/gui-editor/components/commandBarComponent" {
         private _panning;
         private _zooming;
         private _selecting;
-        private _moving;
         private _outlines;
         constructor(props: ICommandBarComponentProps);
         private updateNodeOutline;
@@ -1956,6 +2045,7 @@ declare module "@babylonjs/gui-editor/workbenchEditor" {
         private _rightWidth;
         private _toolBarIconSize;
         private _popUpWindow;
+        private _draggedItem;
         componentDidMount(): void;
         constructor(props: IGraphEditorProps);
         showWaitScreen(): void;

package/package.json

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