babylonjs-editor 4.1.1 → 4.4.0

package/index.d.ts

@@ -6,7 +6,6 @@
 //   ../../babylonjs
 //   ../../directory-tree
 //   ../../adm-zip
-//   ../../dat.gui
 //   ../../@blueprintjs/select
 //   renderer/editor/graph/node.d.ts
 //   ../../xterm
@@ -30,7 +29,6 @@ declare module 'babylonjs-editor' {
     export { MaterialAssets } from "babylonjs-editor/renderer/editor/assets/materials";
     export { TextureAssets } from "babylonjs-editor/renderer/editor/assets/textures";
     export { Inspector, IInspectorProps, IInspectorState, IObjectInspector, IObjectInspectorProps } from "babylonjs-editor/renderer/editor/components/inspector";
-    export { AbstractInspectorLegacy } from "babylonjs-editor/renderer/editor/components/inspectors/abstract-inspector-legacy";
     export { AbstractInspector } from "babylonjs-editor/renderer/editor/components/inspectors/abstract-inspector";
     export { MaterialInspector, IMaterialInspectorState } from "babylonjs-editor/renderer/editor/components/inspectors/materials/material-inspector";
     export { InspectorColor } from "babylonjs-editor/renderer/editor/gui/inspector/fields/color";
@@ -59,7 +57,6 @@ declare module 'babylonjs-editor' {
     export { Icon } from "babylonjs-editor/renderer/editor/gui/icon";
     export { SceneImporterTools, ISceneImporterToolsConfiguration } from "babylonjs-editor/renderer/editor/scene/import-tools";
     export { Packer, IPackerOptions, PackerStatus } from "babylonjs-editor/renderer/editor/project/packer/packer";
-    import "./renderer/editor/gui/augmentations/index";
 }
 
 declare module 'babylonjs-editor/renderer/editor/plugins/assets' {
@@ -260,7 +257,6 @@ declare module 'babylonjs-editor/renderer/editor/editor' {
     import { MainToolbar } from "babylonjs-editor/renderer/editor/components/main-toolbar";
     import { ToolsToolbar } from "babylonjs-editor/renderer/editor/components/tools-toolbar";
     import { Console } from "babylonjs-editor/renderer/editor/components/console";
-    import "./gui/augmentations/index";
     import "./components/inspectors/scene/scene-inspector";
     import "./components/inspectors/scene/rendering-inspector";
     import "./components/inspectors/scene/animation-groups-inspector";
@@ -615,21 +611,17 @@ declare module 'babylonjs-editor/renderer/editor/editor' {
                 * @hidden
                 */
             _applyPreferences(): Promise<void>;
+            /**
+                * @hidden
+                */
+            _applyPreferencesPlugins(): Promise<void>;
     }
 }
 
 declare module 'babylonjs-editor/renderer/editor/tools/tools' {
-    import { Engine, Scene, Node, Nullable, Camera, Mesh, Material } from "babylonjs";
+    import { Engine, Scene, Node, Camera, Mesh, Material } from "babylonjs";
     import { ICommonMetadata, IEditorPreferences, IMaterialMetadata, IMeshMetadata, ITransformNodeMetadata } from "babylonjs-editor/renderer/editor/tools/types";
     export class Tools {
-            /**
-                * Initializes the tools.
-                */
-            static Init(): Promise<void>;
-            /**
-                * Returns the current root path of the app.
-                */
-            static GetAppPath(): string;
             /**
                 * Normalizes the given path according to the current platform.
                 * @param path defines the path to normalize according to the current platform.
@@ -689,6 +681,10 @@ declare module 'babylonjs-editor/renderer/editor/tools/tools' {
                 * @param timeMs the time in milliseconds to wait.
                 */
             static Wait(timeMs: number): Promise<void>;
+            /**
+                * Waits for the next animation frame.
+                */
+            static WaitNextAnimationFrame(): Promise<void>;
             /**
                 * Returns the given array by keeping only distinct values.
                 * @param array the array to filter.
@@ -753,22 +749,6 @@ declare module 'babylonjs-editor/renderer/editor/tools/tools' {
                 * @param onProgress callback called while file is loading (if the server supports this mode).
                 */
             static LoadFile<T = string | ArrayBuffer>(url: string, useArrayBuffer: boolean, onProgress?: (data: any) => void): Promise<T>;
-            /**
-                * Opens the save dialog and returns the selected path.
-                * @param path optional path where to open the save dialog.
-                */
-            static ShowSaveDialog(path?: Nullable<string>): Promise<string>;
-            /**
-                * Opens the open-file dialog and returns the selected path.
-                * @param path the path where to start the dialog.
-                */
-            static ShowOpenFileDialog(title: string, path?: Nullable<string>): Promise<string>;
-            /**
-                * Opens the save file dialog and returns the selected path.
-                * @param title the title of the save file dialog.
-                * @param path optional path where to open the save dialog.
-                */
-            static ShowSaveFileDialog(title: Nullable<string>, path?: Nullable<string>): Promise<string>;
     }
 }
 
@@ -1212,6 +1192,12 @@ declare module 'babylonjs-editor/renderer/editor/components/assets-browser/files
                 * @param to defines the new absolute path to the file being moved.
                 */
             abstract moveFile(from: string, to: string): void | Promise<void>;
+            /**
+                * Returns wheter or not the given file can be renamed.
+                * @param from defines the previous absolute path to the file being renamed.
+                * @param to defines the new absolute path to the file being renamed.
+                */
+            canRename(_from: string, _to: string): Promise<boolean>;
             /**
                 * Called on the given file is being remvoed.
                 * @param path defines the absolute path to the file that is being removed.
@@ -1275,11 +1261,6 @@ declare module 'babylonjs-editor/renderer/editor/components/assets-browser/files
                 * Defines the reference to the assets worker.
                 */
             static AssetWorker: IWorkerConfiguration;
-            /**
-                * Defines the reference to the drag'n'dropped item.
-                * @hidden
-                */
-            static _DragAndDroppedItem: Nullable<AssetsBrowserItemHandler>;
             /**
                 * Initialzes the item handler.
                 */
@@ -1326,7 +1307,7 @@ declare module 'babylonjs-editor/renderer/editor/components/assets-browser/files
                 * @param ev defines the reference to the event object.
                 * @param pick defines the picking info generated while dropping in the preview.
                 */
-            onDropInPreview(_1: React.DragEvent<HTMLElement>, _2: PickingInfo): void;
+            onDropInPreview(_1: DragEvent, _2: PickingInfo): void;
             /**
                 * Called on the user drops the asset in a supported inspector field.
                 * @param ev defiens the reference to the event object.
@@ -1353,7 +1334,7 @@ declare module 'babylonjs-editor/renderer/editor/assets/materials' {
     import * as React from "react";
     import { Material, PickingInfo, Scene, Node } from "babylonjs";
     import { AbstractAssets, IAssetComponentItem } from "babylonjs-editor/renderer/editor/assets/abstract-assets";
-    import "./materials/augmentations";
+    import "../tools/materials/augmentations";
     export class MaterialAssets extends AbstractAssets {
             /**
                 * Defines the type of the data transfer data when drag'n'dropping asset.
@@ -1532,13 +1513,12 @@ declare module 'babylonjs-editor/renderer/editor/assets/textures' {
 }
 
 declare module 'babylonjs-editor/renderer/editor/components/inspector' {
+    import { Undefinable } from "babylonjs-editor/shared/types";
     import * as React from "react";
     import { Editor } from "babylonjs-editor/renderer/editor/editor";
     import { AbstractInspector } from "babylonjs-editor/renderer/editor/components/inspectors/abstract-inspector";
-    import { AbstractInspectorLegacy } from "babylonjs-editor/renderer/editor/components/inspectors/abstract-inspector-legacy";
-    import { Undefinable } from "babylonjs-editor/shared/types";
     export interface IObjectInspector {
-            ctor: (new (props: IObjectInspectorProps) => AbstractInspectorLegacy<any> | AbstractInspector<any, any>);
+            ctor: (new (props: IObjectInspectorProps) => AbstractInspector<any, any>);
             ctorNames: string[];
             title: string;
             isSupported?: Undefinable<(obj: any) => boolean>;
@@ -1546,7 +1526,7 @@ declare module 'babylonjs-editor/renderer/editor/components/inspector' {
                 * The reference to the inspector.
                 * @hidden
                 */
-            _ref?: Undefinable<AbstractInspectorLegacy<any>>;
+            _ref?: Undefinable<AbstractInspector<any, any>>;
             /**
                 * @hidden
                 */
@@ -1621,10 +1601,6 @@ declare module 'babylonjs-editor/renderer/editor/components/inspector' {
                 * Refreshes the inspector.
                 */
             refresh(): void;
-            /**
-                * Refreshes the current display of the current inspector.
-                */
-            refreshDisplay(): void;
             /**
                 * Resizes the inspector.
                 */
@@ -1632,150 +1608,6 @@ declare module 'babylonjs-editor/renderer/editor/components/inspector' {
     }
 }
 
-declare module 'babylonjs-editor/renderer/editor/components/inspectors/abstract-inspector-legacy' {
-    import * as React from "react";
-    import { GUI, GUIController } from "dat.gui";
-    import { Color3, Color4, BaseTexture, ISize, Material } from "babylonjs";
-    import { Nullable, Undefinable } from "babylonjs-editor/shared/types";
-    import { Editor } from "babylonjs-editor/renderer/editor/editor";
-    import { SuggestController } from "babylonjs-editor/renderer/editor/gui/augmentations/suggest";
-    import { AbstractAssets } from "babylonjs-editor/renderer/editor/assets/abstract-assets";
-    import { IAssetsProps } from "babylonjs-editor/renderer/editor/components/assets";
-    import { IObjectInspectorProps } from "babylonjs-editor/renderer/editor/components/inspector";
-    export abstract class AbstractInspectorLegacy<T> extends React.Component<IObjectInspectorProps> {
-            /**
-                * Defines the GUI reference.
-                */
-            tool: Nullable<GUI>;
-            /**
-                * Defines wether or not undo/redo should be handled by the inspector.
-                */
-            handleUndoRedo: boolean;
-            /**
-                * The editor reference.
-                */
-            protected editor: Editor;
-            /**
-                * The selected object reference.
-                */
-            protected selectedObject: T;
-            /**
-                * Defines the Id of the tool.
-                */
-            protected _id: string;
-            /**
-                * Defines the div of the tool.
-                */
-            protected _div: Nullable<HTMLDivElement>;
-            /**
-                * Constructor.
-                * @param props the component's props.
-                */
-            constructor(props: IObjectInspectorProps);
-            /**
-                * Renders the component.
-                */
-            render(): React.ReactNode;
-            /**
-                * Called on the component did mount.
-                */
-            abstract onUpdate(): void;
-            /**
-                * Called on a controller changes.
-                * @param folder the folder containing the modified controller.
-                * @param controller the controller that has been modified.
-                */
-            onControllerChange(_?: GUI, __?: GUIController): void;
-            /**
-                * Called on a controller finished changes.
-                * @param folder the folder containing the modified controller.
-                * @param controller the controller that has been modified.
-                */
-            onControllerFinishChange(_?: GUI, __?: GUIController): void;
-            /**
-                * Gets wether or not the component is mounted.
-                */
-            protected get isMounted(): boolean;
-            /**
-                * Called on the component did moubnt.
-                */
-            componentDidMount(): void;
-            /**
-                * Called on the component will unmount.
-                */
-            componentWillUnmount(): void;
-            /**
-                * Refreshes the inspector tool.
-                */
-            refresh(): void;
-            /**
-                * Refreshes the edition tool.
-                */
-            refreshDisplay(): void;
-            /**
-                * Clears the given folder.
-                */
-            clearFolder(folder: GUI): void;
-            /**
-                * Clears the whole tool.
-                */
-            clear(): void;
-            /**
-                * Resizes the edition tool.
-                * @param size defines the size of the panel.
-                */
-            resize(size?: ISize): void;
-            /**
-                * Returns the reference to the texture identified by the given editor name.
-                * @param editorName the name of the texture to find.
-                */
-            protected getTexture(editorName: string): Nullable<BaseTexture>;
-            /**
-                * Returns the reference to the material identified by the given editor name.
-                * @param name defines the name of the material to find.
-                */
-            protected getMaterial(name: string): Nullable<Material>;
-            /**
-                * Adds a new texture field to the inspector.
-                * @param parent the parent folder where to add the texture field.
-                * @param object the object to modify.
-                * @param property the property to modify in the given object.
-                * @param onChange optional callback called on the texture changed.
-                */
-            protected addTextureList(parent: GUI | undefined, object: any, property: string, onChange?: (texture: Nullable<BaseTexture>) => void): SuggestController;
-            /**
-                * Adds a new texture field to the inspector.
-                * @param parent the parent folder where to add the texture field.
-                * @param object the object to modify.
-                * @param property the property to modify in the given object.
-                * @param onChange optional callback called on the texture changed.
-                */
-            protected addMaterialList(parent: GUI | undefined, object: any, property: string, onChange?: (material: Nullable<Material>) => void): SuggestController;
-            /**
-                * Adds a color folder to edit RGB(A)
-                * @param parent the parent folder where to add the color folder.
-                * @param name the name of the color folder.
-                * @param object the base object to modify.
-                * @param property the path to the color property.
-                * @param onChange optional callback called on the color changed.
-                */
-            protected addColor(parent: GUI, name: string, object: any, property: string, onChange?: (color: Color3 | Color4) => void): GUI;
-            /**
-                * Adds a new suggest contoller containg the list of all the civen componet's assets.
-                * @param parent defines the parent folder where to add the assets list.
-                * @param componentCtor defines the reference to the constructor of the assets component to get its items.
-                * @param baseValue defines the base value of the suggest controller to display.
-                * @param object defines the reference to the object to modify.
-                * @param property defines the path to the property to modify.
-                */
-            protected addAssetsList(parent: GUI, componentCtor: (new (props: IAssetsProps) => AbstractAssets), baseValue: Undefinable<string>, object: any, property: string): SuggestController;
-            /**
-                * Called on the tool is mounted to handle onChange & onFinishChange
-                */
-            protected _handleChanged(root?: GUI): void;
-    }
-}
-
 declare module 'babylonjs-editor/renderer/editor/components/inspectors/abstract-inspector' {
     import { Nullable } from "babylonjs-editor/shared/types";
     import * as React from "react";
@@ -1797,6 +1629,10 @@ declare module 'babylonjs-editor/renderer/editor/components/inspectors/abstract-
                 * Defines the reference to the edited root object (node, sound, etc.).
                 */
             protected selectedObject: T;
+            /**
+                * @hidden
+                */
+            protected readonly _inspectorName: string;
             /**
                 * Constructor.
                 * @param props the component's props.
@@ -2056,6 +1892,10 @@ declare module 'babylonjs-editor/renderer/editor/gui/inspector/fields/number' {
                 * Defines wether or not the label should be hidden.
                 */
             noLabel?: boolean;
+            /**
+                * Defines the default value of the field in case the editor property doesn't exist.
+                */
+            defaultValue?: number;
             /**
                 * Defines wether or not automatic undo/redo should be skipped.
                 */
@@ -2420,7 +2260,10 @@ declare module 'babylonjs-editor/renderer/editor/gui/inspector/fields/vector3' {
 }
 
 declare module 'babylonjs-editor/renderer/editor/gui/inspector/notifier' {
+    import { Nullable } from "babylonjs-editor/shared/types";
     import * as React from "react";
+    import { _IDragAndDroppedItem } from "babylonjs-editor/renderer/editor/components/graph";
+    import { AssetsBrowserItemHandler } from "babylonjs-editor/renderer/editor/components/assets-browser/files/item-handler";
     export interface IInspectorNotifierChangeOptions {
             /**
                 * Defines the caller that notifies the change. This is typically used to don't listen themselves.
@@ -2450,6 +2293,8 @@ declare module 'babylonjs-editor/renderer/editor/gui/inspector/notifier' {
                 * @param caller defines the reference to the original caller.
                 */
             static Unregister(caller: any): void;
+            static _DragAndDroppedGraphItem: Nullable<_IDragAndDroppedItem>;
+            static _DragAndDroppedAssetItem: Nullable<AssetsBrowserItemHandler>;
             /**
                 * Called on the user drops the asset in a supported inspector field.
                 * @param ev defiens the reference to the event object.
@@ -2463,6 +2308,24 @@ declare module 'babylonjs-editor/renderer/editor/gui/inspector/notifier' {
 declare module 'babylonjs-editor/renderer/editor/gui/inspector/fields/color-picker' {
     import * as React from "react";
     import { Color3, Color4 } from "babylonjs";
+    export interface IColor4Like {
+            /**
+                * Defines the red component (between 0 and 1, default is 0)
+                */
+            r: number;
+            /**
+                * Defines the green component (between 0 and 1, default is 0)
+                */
+            g: number;
+            /**
+                * Defines the blue component (between 0 and 1, default is 0)
+                */
+            b: number;
+            /**
+                * Defines the alpha component (between 0 and 1, default is 1)
+                */
+            a: number;
+    }
     export interface IInspectorColorPickerProps {
             /**
                 * Defines the reference to the object to modify.
@@ -2566,7 +2429,7 @@ declare module 'babylonjs-editor/renderer/editor/gui/inspector/fields/list' {
             /**
                 * Defines the label of the field.
                 */
-            label: string;
+            label: string | JSX.Element;
             /**
                 * Defines the list of items drawn in the suggest.
                 */
@@ -2579,6 +2442,10 @@ declare module 'babylonjs-editor/renderer/editor/gui/inspector/fields/list' {
                 * Defines the optional list of all available drag'n'droppable types.
                 */
             dndHandledTypes?: string[];
+            /**
+                * Defines the optional color to apply on the border left.
+                */
+            borderLeftColor?: string;
             /**
                 * Defines the optional callback called on the value changes.
                 * @param value defines the new value of the object's property.
@@ -2974,11 +2841,17 @@ declare module 'babylonjs-editor/renderer/editor/project/files' {
 declare module 'babylonjs-editor/renderer/editor/project/typings' {
     import { Undefinable, IStringDictionary } from "babylonjs-editor/shared/types";
     import { KTXToolsType } from "babylonjs-editor/renderer/editor/tools/ktx";
+    import { IRegisteredPlugin } from "babylonjs-editor/renderer/editor/tools/types";
     /**
         * Defines the type the possible values of the physics engine type string
         * store in the workspace JSON file.
         */
     export type PhysicsEngineType = "cannon" | "oimo" | "ammo";
+    /**
+        * Defines the values of available package managers than can be used by
+        * the editor for each workspace. The default value is "npm".
+        */
+    export type PackageManagerType = "npm" | "yarn";
     export interface IWorkSpace {
             /**
                 * Defines the version of the Editor that handled the project.
@@ -3016,6 +2889,17 @@ declare module 'babylonjs-editor/renderer/editor/project/typings' {
                 * Defines the dictionary that contains the preferences of external plugins in the editor.
                 */
             pluginsPreferences?: Undefinable<IStringDictionary<any>>;
+            /**
+                * Defines the package manager used by the project.
+                * Can be npm or yarn.
+                */
+            packageManager: PackageManagerType;
+            /**
+                * Defines the custom directory where to generate the output scenes. By default,
+                * the value is the working directory of the workspace.
+                * @default "./"
+                */
+            outputSceneDirectory: string;
             /**
                 * Defines wether or not the project should be played in an isolated iFrame in the preview
                 * panel when the user clicks the "play button". This is typically useful to avoid conflicts between
@@ -3039,6 +2923,15 @@ declare module 'babylonjs-editor/renderer/editor/project/typings' {
                         */
                     keyPath?: string;
             };
+            /**
+                * Defines the options of the custom webserver.
+                */
+            customWebServer?: {
+                    /**
+                        * Defines the Url of the custom webserver where to start the game.
+                        */
+                    url: string;
+            };
             /**
                 * Defines the options of the KTX2 compression tool.
                 */
@@ -3105,12 +2998,20 @@ declare module 'babylonjs-editor/renderer/editor/project/typings' {
                             quality: "etcfast" | "etcnormal" | "etcslow";
                     };
             };
+            /**
+                * Defines the list of all registered plugins for the workspace.
+                */
+            plugins?: Undefinable<IRegisteredPlugin[]>;
     }
     export interface IProject {
             /**
                 * Defines the list of the files associated to the project.
                 */
             filesList?: string[];
+            /**
+                * Defines the list of scene's animation groups.
+                */
+            animationGroups: string[];
             /**
                 * Defines the list of scene's cameras.
                 */
@@ -3207,6 +3108,10 @@ declare module 'babylonjs-editor/renderer/editor/project/typings' {
                         */
                     graphs: Undefinable<string[]>;
             };
+            /**
+                * Defines the list of all project's cinematics.
+                */
+            cinematics: string[];
             /**
                 * Defines some useful datas
                 */
@@ -3343,6 +3248,7 @@ declare module 'babylonjs-editor/renderer/editor/project/project-exporter' {
 
 declare module 'babylonjs-editor/renderer/editor/project/project' {
     import { Nullable } from "babylonjs-editor/shared/types";
+    import { Cinematic } from "babylonjs-editor/renderer/editor/cinematic/cinematic";
     import { IProject } from "babylonjs-editor/renderer/editor/project/typings";
     export class Project {
             /**
@@ -3357,6 +3263,10 @@ declare module 'babylonjs-editor/renderer/editor/project/project' {
                 * Defines the current project datas.
                 */
             static Project: Nullable<IProject>;
+            /**
+                * Defines the list of all available cinematics for the project.
+                */
+            static Cinematics: Cinematic[];
             /**
                 * Returns the project path set when opened the editor from the OS file system.
                 */
@@ -3423,6 +3333,10 @@ declare module 'babylonjs-editor/renderer/editor/project/workspace' {
                 * @param projectPath the absolute path of the saved project.
                 */
             static WriteWorkspaceFile(projectPath: string): Promise<void>;
+            /**
+                * Returns the relative path to the directory where the output scene should be written.
+                */
+            static get OutputSceneDirectory(): string;
             /**
                 * Refreshes the list of available projects in the workspace.
                 */
@@ -3504,6 +3418,18 @@ declare module 'babylonjs-editor/renderer/editor/project/workspace' {
                 * @param editor defines the editor reference.
                 */
             static RestartTypeScriptWatcher(editor: Editor): Nullable<IEditorProcess>;
+            /**
+                * Returns wether or not the major Babylon.JS version of the project matches with the one of the editor.
+                * Checked at initialization time of the Editor.
+                * @param version defines the version of Babylon.JS being used by the editor.
+                */
+            static MatchesEditorBabylonJSMajorVersion(version: string): Promise<boolean>;
+            /**
+                * Configures the package.json file of the project to match the Babylon.JS version used in the editor.
+                * Checked at initialization time of the Editor.
+                * @param version defines the version of Babylon.JS being used by the editor.
+                */
+            static MatchBabylonJSEditorVersion(version: string): Promise<void>;
             /**
                 * Kills all the existing programs.
                 */
@@ -3526,6 +3452,10 @@ declare module 'babylonjs-editor/renderer/editor/project/scene-exporter' {
                 * Defines wether or not files are forced to be re-generated.
                 */
             forceRegenerateFiles?: boolean;
+            /**
+                * Defines wether or not all compressed textures should be regenerated.
+                */
+            forceRegenerateCompressedTextures?: boolean;
             /**
                 * Defines wether or not all compressed texture formats should be generated.
                 * Typically used when exporting final scene version.
@@ -3533,9 +3463,23 @@ declare module 'babylonjs-editor/renderer/editor/project/scene-exporter' {
             generateAllCompressedTextureFormats?: boolean;
     }
     export class SceneExporter {
+            /**
+                * Defines the list of all textures file types that are copy-able for the
+                * final assets output folder.
+                */
             static readonly CopyAbleImageTypes: string[];
             /**
-                * Defines the list of all files types that are copy-able for the
+                * Defines the list of all video file types that are copy-able for the
+                * final assets output folder.
+                */
+            static readonly CopyAbleVideoTypes: string[];
+            /**
+                * Defines the list of all 3d assets file types that are copy-able for the
+                * final assets output folder.
+                */
+            static readonly CopyAble3dAssetTypes: string[];
+            /**
+                * Defines the list of all file types that are copy-able for the
                 * final assets output folder.
                 */
             static readonly CopyAbleAssetsTypes: string[];
@@ -3767,11 +3711,11 @@ declare module 'babylonjs-editor/renderer/editor/gui/confirm' {
             /**
                 * The title of the dialog.
                 */
-            title: string;
+            title: React.ReactNode;
             /**
                 * The message of the dialog.
                 */
-            message: string;
+            message: React.ReactNode;
             /**
                 * The icon to show on top-left of the dialog.
                 */
@@ -3792,7 +3736,7 @@ declare module 'babylonjs-editor/renderer/editor/gui/confirm' {
                 * @param message the message of the dialog.
                 * @param icon the icon of the dialog to show on top-left.
                 */
-            static Show(title: string, message: string, icon?: Undefinable<IconName | JSX.Element>): Promise<boolean>;
+            static Show(title: React.ReactNode, message: React.ReactNode, icon?: Undefinable<IconName | JSX.Element>): Promise<boolean>;
             /**
                 * Renders the component.
                 */
@@ -4474,6 +4418,10 @@ declare module 'babylonjs-editor/renderer/editor/components/graph' {
                 */
             showLights: boolean;
     }
+    export interface _IDragAndDroppedItem {
+            nodeId: string;
+            onDropInInspector: (ev: React.DragEvent<HTMLElement>, object: any, property: string) => Promise<void>;
+    }
     export class Graph extends React.Component<IGraphProps, IGraphState> {
             /**
                 * Defines the last selected node in the graph.
@@ -4558,6 +4506,8 @@ declare module 'babylonjs-editor/renderer/editor/components/assets-browser' {
     import { IStringDictionary, Nullable } from "babylonjs-editor/shared/types";
     import * as React from "react";
     import { Editor } from "babylonjs-editor/renderer/editor/editor";
+    import { AssetsBrowserTree } from "babylonjs-editor/renderer/editor/components/assets-browser/tree";
+    import { AssetsBrowserFiles } from "babylonjs-editor/renderer/editor/components/assets-browser/files";
     export interface IAssetsBrowserProps {
             /**
                 * Defines the reference to the editor.
@@ -4589,6 +4539,14 @@ declare module 'babylonjs-editor/renderer/editor/components/assets-browser' {
                 * Defines the reference to the dictionary that stores all the moved assets.
                 */
             movedAssetsDictionary: IStringDictionary<string>;
+            /**
+                * @hidden
+                */
+            _tree: Nullable<AssetsBrowserTree>;
+            /**
+                * @hidden
+                */
+            _files: Nullable<AssetsBrowserFiles>;
             /**
                 * Constructor.
                 * @param props defines the component's props.
@@ -5069,99 +5027,7 @@ declare module 'babylonjs-editor/renderer/editor/workers/workers' {
                 * @param parameters defines the parameters to send to the function called in the worker.
                 * @returns the result of the function computed in the worker's context.
                 */
-            static ExecuteFunction<TClass, TFunction extends FunctionPropertyNames<TClass>>(config: IWorkerConfiguration, fnName: TFunction, ...parameters: Parameters<TClass[TFunction]>): Promise<Awaitable<ReturnType<TClass[TFunction]>>>;
-    }
-}
-
-declare module 'babylonjs-editor/renderer/editor/gui/augmentations/suggest' {
-    import { Undefinable } from "babylonjs-editor/shared/types";
-    import * as React from "react";
-    import * as dat from "dat.gui";
-    export interface _IListSuggestProps {
-            controller: SuggestController;
-    }
-    export interface _IListSuggestState {
-            list: string[];
-            value: string;
-    }
-    export class _ListSuggest extends React.Component<_IListSuggestProps, _IListSuggestState> {
-            /**
-                * Constructor.
-                * @param props the component's props.
-                */
-            constructor(props: _IListSuggestProps);
-            /**
-                * Renders the component.
-                */
-            render(): React.ReactNode;
-    }
-    /**
-        * Suggest conroller.
-        */
-    export class SuggestController extends dat.controllers.Controller {
-            /**
-                * @hidden
-                */
-            object: any;
-            /**
-                * @hidden
-                */
-            property: string;
-            /**
-                * @hidden
-                */
-            list: string[];
-            /**
-                * @hidden
-                */
-            __onChange: (r: string) => void;
-            /**
-                * @hidden
-                */
-            __onFinishChange: (r: string) => void;
-            /**
-                * @hidden
-                */
-            __renderer: Undefinable<{
-                    onShowLabel?: (item: string) => string;
-                    onShowIcon?: (item: string) => JSX.Element;
-                    onShowTooltip?: (item: string) => JSX.Element | undefined;
-                    onUpdate?: () => string[] | Promise<string[]>;
-            }>;
-            /**
-                * Constructor.
-                * @param object the object to modify.
-                * @param property the property of the object tu get and set changes.
-                * @param list the list of suggestions.
-                * @param onShowLabel optional callback called when rendering a suggestion item.
-                */
-            constructor(object: any, property: string, list?: string[], renderer?: {
-                    onShowLabel?: (item: string) => string;
-                    onShowIcon?: (item: string) => JSX.Element;
-                    onUpdate?: () => string[];
-                    tooltip?: JSX.Element;
-            });
-            /**
-                * Registers the onChange callback.
-                */
-            onChange(callback: (r: string) => void): SuggestController;
-            /**
-                * Registers the onFinishChange callback.
-                */
-            onFinishChange(callback: (r: string) => void): SuggestController;
-            /**
-                * Updates the current display of the controller.
-                */
-            updateDisplay(): SuggestController;
-            /**
-                * Sets a new name for the field.
-                * @param name the new name of the field.
-                */
-            name(name: string): SuggestController;
-            /**
-                * Disposes the component.
-                */
-            dispose(): void;
+            static ExecuteFunction<TClass extends Record<any, any>, TFunction extends FunctionPropertyNames<TClass>>(config: IWorkerConfiguration, fnName: TFunction, ...parameters: Parameters<TClass[TFunction]>): Promise<Awaitable<ReturnType<TClass[TFunction]>>>;
     }
 }
 
@@ -5457,6 +5323,59 @@ declare module 'babylonjs-editor/renderer/editor/tools/ktx' {
     }
 }
 
+declare module 'babylonjs-editor/renderer/editor/cinematic/cinematic' {
+    import { Nullable } from "babylonjs-editor/shared/types";
+    import { AnimationGroup, Scene } from "babylonjs";
+    import { ICinematic, ICinematicCamera, ICinematicTrack } from "babylonjs-editor/renderer/editor/cinematic/base";
+    export class Cinematic implements ICinematic {
+            /**
+                * @hidden
+                */
+            _animationGroup: Nullable<AnimationGroup>;
+            /**
+                * Plays the cinematic.
+                */
+            play(scene: Scene, from?: number): void;
+            /**
+                * Stops the cinematic.
+                */
+            stop(): void;
+            /**
+                * Generates the animation group and returns its reference.
+                */
+            generateAnimationGroup(scene: Scene): AnimationGroup;
+            /**
+                * Serializes the cinematic.
+                */
+            serialize(): ICinematic;
+            /**
+                * Parses the cinematic according the given parsed data.
+                * @param parsedData defines the reference to object as JSON representation of cinematic.
+                */
+            static Parse(parsedData: ICinematic): Cinematic;
+            /**
+                * Defines the name of the cinematic.
+                */
+            name: string;
+            /**
+                * Defines the number of frames computed per second.
+                */
+            framesPerSecond: number;
+            /**
+                * Defines wether or not the cinematic is embedded in the file scene file output.
+                */
+            embedInSceneFile: boolean;
+            /**
+                * Defines the reference to the camera's configuration for the cinematic.
+                */
+            camera: ICinematicCamera;
+            /**
+                * Defines the list of all cinematic tracks.
+                */
+            tracks: ICinematicTrack[];
+    }
+}
+
 declare module 'babylonjs-editor/renderer/editor/tools/process' {
     import { IPty } from "node-pty";
     import { Terminal, IDisposable } from "xterm";
@@ -5537,9 +5456,10 @@ declare module 'babylonjs-editor/renderer/editor/tools/process' {
                 * Executes the given command and returns the reference to the newly created editor process object.
                 * @param command defines the command to execute in the terminal process.
                 * @param readonly defines wether or not the terminal process is in read-only.
+                * @param cwd defines the absolute path to the working directory where to process will be executed.
                 * @returns the newly created editor process object that contains the terminal, process, etc.
                 */
-            static ExecuteCommand(command: string, readonly?: boolean): Nullable<IEditorProcess>;
+            static ExecuteCommand(command: string, readonly?: boolean, cwd?: string): Nullable<IEditorProcess>;
             /**
                 * Kills and removes the editor process identified by the given id if exists.
                 * @param id defines the id of the editor process to remove if exists.
@@ -5558,6 +5478,153 @@ declare module 'babylonjs-editor/renderer/editor/tools/process' {
     }
 }
 
+declare module 'babylonjs-editor/renderer/editor/components/assets-browser/tree' {
+    import * as React from "react";
+    import { ITreeNode } from "@blueprintjs/core";
+    import { Editor } from "babylonjs-editor/renderer/editor/editor";
+    export interface IAssetsBrowserFavorite {
+            /**
+                * Defines the id of the favorite.
+                */
+            id: string;
+            /**
+                * Defines the name of the favorite.
+                */
+            name: string;
+    }
+    export interface IAssetsBrowserTreeProps {
+            /**
+                * Defines the reference to the editor.
+                */
+            editor: Editor;
+            /**
+                * Defines the callback called on a directory has been clicked in the tree.
+                */
+            onDirectorySelected: (path: string) => void;
+            /**
+                * Defines the callback called on a favorite has been clicked in the tree.
+                */
+            onFavoriteSelected: (favorite: IAssetsBrowserFavorite) => void;
+    }
+    export interface IAssetsBrowserTreeState {
+            /**
+                * Defines the list of all available nodes in the tree.
+                */
+            nodes: ITreeNode<string>[];
+    }
+    export class AssetsBrowserTree extends React.Component<IAssetsBrowserTreeProps, IAssetsBrowserTreeState> {
+            /**
+                * Defines the id of the node for favorites "Textures".
+                */
+            static readonly TexturesFavorite: IAssetsBrowserFavorite;
+            /**
+                * Defines the id of the node for favorites "Materials".
+                */
+            static readonly MaterialsFavorite: IAssetsBrowserFavorite;
+            /**
+                * Constructor.
+                * @param props defines the component's props.
+                */
+            constructor(props: IAssetsBrowserTreeProps);
+            /**
+                * Renders the component.
+                */
+            render(): React.ReactNode;
+            /**
+                * Sets the new absolute path to the directory to read and draw its items.
+                * @param directoryPath defines the absolute path to the directory to show in the view.
+                */
+            setDirectory(directoryPath: string): Promise<void>;
+            /**
+                * Refreshes the current tree.
+                */
+            refresh(): void;
+    }
+}
+
+declare module 'babylonjs-editor/renderer/editor/components/assets-browser/files' {
+    import * as React from "react";
+    import { Editor } from "babylonjs-editor/renderer/editor/editor";
+    import { IAssetsBrowserFavorite } from "babylonjs-editor/renderer/editor/components/assets-browser/tree";
+    import { AssetsBrowserItem } from "babylonjs-editor/renderer/editor/components/assets-browser/files/item";
+    export interface IAssetsBrowserFilesProps {
+            /**
+                * Defines the reference to the editor.
+                */
+            editor: Editor;
+            /**
+                * Defines the callback called on a directory has been clicked in the tree.
+                */
+            onDirectorySelected: (path: string) => void;
+    }
+    export interface IAssetsBrowserFilesState {
+            /**
+                * Defines the current stack of opened folders.
+                */
+            pathStack: string[];
+            /**
+                * Defines the absolute path to the working directory.
+                */
+            currentDirectory: string;
+            /**
+                * Defines the current filter.
+                */
+            filter: string;
+            /**
+                * Defines the current size value for the items.
+                */
+            itemsSize: number;
+            /**
+                * Defines the list of all items drawn in the view.
+                */
+            items: React.ReactNode[];
+    }
+    export class AssetsBrowserFiles extends React.Component<IAssetsBrowserFilesProps, IAssetsBrowserFilesState> {
+            /**
+                * Defines the list of all selected items.
+                */
+            selectedItems: string[];
+            /**
+                * @hidden
+                */
+            _items: AssetsBrowserItem[];
+            /**
+                * Initializes the files component.
+                * @param editor defines the reference to the editor.
+                */
+            static Init(editor: Editor): Promise<void>;
+            /**
+                * Constructor.
+                * @param props defines the component's props.
+                */
+            constructor(props: IAssetsBrowserFilesProps);
+            /**
+                * Renders the component.
+                */
+            render(): React.ReactNode;
+            /**
+                * Sets the new favorite to read and draw its items.
+                * @param favorite defines the id of the favorite to show in the view.
+                */
+            setFavorite(favorite: IAssetsBrowserFavorite): Promise<void>;
+            /**
+                * Sets the new absolute path to the directory to read and draw its items.
+                * @param directoryPath defines the absolute path to the directory to show in the view.
+                */
+            setDirectory(directoryPath: string): Promise<void>;
+            /**
+                * Refreshes the current list of files.
+                */
+            refresh(): Promise<void>;
+            /**
+                * Calls the given function in all the selected items (if exists).
+                * @param methodName defines the name of the function to call.
+                * @hidden
+                */
+            _callSelectedItemsMethod(methodName: string, ...parameters: any[]): Promise<void>;
+    }
+}
+
 declare module 'babylonjs-editor/renderer/editor/scene/picker' {
     import { Nullable } from "babylonjs-editor/shared/types";
     import { Observable, Node, SubMesh } from "babylonjs";
@@ -5732,6 +5799,198 @@ declare module 'babylonjs-editor/renderer/editor/components/console/log' {
     }
 }
 
+declare module 'babylonjs-editor/renderer/editor/cinematic/base' {
+    import { CinematicTrackType, ICinematicAnimationGroupTrack, ICinematicPropertyGroupTrack, ICinematicPropertyTrack, ICinematicTrackGroup } from "babylonjs-editor/renderer/editor/cinematic/track";
+    export interface ICinematicCamera {
+            /**
+                * Defines the id of the camera used for the cinematic.
+                */
+            cameraId: string;
+            /**
+                * Defines the list of animation keys for camera's fov.
+                */
+            fov: ICinematicTrack;
+            /**
+                * Defines the list of animation keys for camera's position.
+                */
+            position: ICinematicTrack;
+            /**
+                * Defines the list of animation keys for camera's target.
+                */
+            target: ICinematicTrack;
+            /**
+                * Defines the list of animation keys for camera's DOF focus distance.
+                */
+            focusDistance: ICinematicTrack;
+            /**
+                * Defines the list of animation keys for camera's DOF F-Stop.
+                */
+            fStop: ICinematicTrack;
+            /**
+                * Defines the list of animation keys for camera's DOF focal length.
+                */
+            focalLength: ICinematicTrack;
+    }
+    export interface ICinematicTrack {
+            /**
+                * Defines the type of the cinematic track.
+                */
+            type: CinematicTrackType;
+            /**
+                * In case of group, defines the configuration of the group.
+                */
+            group?: ICinematicTrackGroup;
+            /**
+                * In case of property track, defines the configuration of the animated property.
+                */
+            property?: ICinematicPropertyTrack;
+            /**
+                * In case of property group track, defines the configuration of the animated property for multiple nodes.
+                */
+            propertyGroup?: ICinematicPropertyGroupTrack;
+            /**
+                * In case of animation group track, defines the configuration of the animation group.
+                */
+            animationGroup?: ICinematicAnimationGroupTrack;
+    }
+    export interface ICinematic {
+            /**
+                * Defines the name of the cinematic.
+                */
+            name: string;
+            /**
+                * Defines the number of frames computed per second for the cinematic.
+                */
+            framesPerSecond: number;
+            /**
+                * Defines wether or not the cinematic is embedded in the file scene file output.
+                */
+            embedInSceneFile?: boolean;
+            /**
+                * Defines the reference to the camera's configuration for the cinematic.
+                */
+            camera: ICinematicCamera;
+            /**
+                * Defines the list of all cinematic tracks.
+                */
+            tracks: ICinematicTrack[];
+    }
+}
+
+declare module 'babylonjs-editor/renderer/editor/components/assets-browser/files/item' {
+    import { IStringDictionary, Nullable } from "babylonjs-editor/shared/types";
+    import * as React from "react";
+    import { Editor } from "babylonjs-editor/renderer/editor/editor";
+    import { AssetsBrowserItemHandler, IItemHandler } from "babylonjs-editor/renderer/editor/components/assets-browser/files/item-handler";
+    import { AssetsBrowserMoveHandler } from "babylonjs-editor/renderer/editor/components/assets-browser/files/move/move-handler";
+    export interface IAssetsBrowserItemProps {
+            /**
+                * Defines the reference to the editor.
+                */
+            editor: Editor;
+            /**
+                * Defines the title of the item.
+                */
+            title: string;
+            /**
+                * Defines the relative path to the item.
+                */
+            relativePath: string;
+            /**
+                * Defines the absolute path to the item.
+                */
+            absolutePath: string;
+            /**
+                * Defines the type of the item (directory or file).
+                */
+            type: "file" | "directory";
+            /**
+                * Defines the size of the item.
+                */
+            size?: number;
+            /**
+                * Defines the callback called each time the item is clicked.
+                */
+            onClick: (item: AssetsBrowserItem, ev: React.MouseEvent<HTMLDivElement>) => void;
+            /**
+                * Callback called on the user double clicks an item.
+                */
+            onDoubleClick: () => void;
+            /**
+                * Defines the callback called on the item is starts being dragged.
+                */
+            onDragStart: (item: AssetsBrowserItem, ev: React.DragEvent<HTMLDivElement>) => void;
+    }
+    export interface IAssetsBrowserItemState {
+            /**
+                * Defines the color applied on the title.
+                */
+            titleColor: string;
+            /**
+                * Defines wether or not the item is selected.
+                */
+            isSelected: boolean;
+            /**
+                * Defines wether or not the file is being renamed.
+                */
+            isRenaming: boolean;
+            /**
+                * Defines the reference to the item handler.
+                */
+            itemHandler: Nullable<React.ReactNode>;
+            /**
+                * Defines the size of the item.
+                */
+            size: number;
+    }
+    export class AssetsBrowserItem extends React.Component<IAssetsBrowserItemProps, IAssetsBrowserItemState> {
+            /**
+                * @hidden
+                */
+            static _ItemHandlers: IStringDictionary<IItemHandler>;
+            /**
+                * @hidden
+                */
+            static _ItemMoveHandlers: AssetsBrowserMoveHandler[];
+            /**
+                * Registers the given item handler.
+                * @param itemHandler defines the reference to the configuration of the item handler.
+                */
+            static RegisterItemHandler(itemHandler: IItemHandler): void;
+            /**
+                * Registers the given item move handler.
+                * @param itemMoveHandler defines the reference to the item move handler.
+                */
+            static RegisterItemMoveHandler(itemMoveHandler: AssetsBrowserMoveHandler): void;
+            /**
+                * Initializes the item renderer.
+                */
+            static Init(editor: Editor): void;
+            /**
+                * @hidden
+                */
+            _itemHandlerRef: Nullable<AssetsBrowserItemHandler>;
+            /**
+                * Constructor.
+                * @param props defines the component's props.
+                */
+            constructor(props: IAssetsBrowserItemProps);
+            /**
+                * Renders the component.
+                */
+            render(): React.ReactNode;
+            /**
+                * Called on the component did mount.
+                */
+            componentDidMount(): void;
+            /**
+                * Sets wether or not the item is selected.
+                * @param isSelected defines wether or not the item is selected.
+                */
+            setSelected(isSelected: boolean): void;
+    }
+}
+
 declare module 'babylonjs-editor/renderer/editor/scene/icons' {
     import { UtilityLayerRenderer, Observable } from "babylonjs";
     import { Editor } from "babylonjs-editor/renderer/editor/editor";
@@ -5773,3 +6032,75 @@ declare module 'babylonjs-editor/renderer/editor' {
     export default Editor;
 }
 
+declare module 'babylonjs-editor/renderer/editor/cinematic/track' {
+    import { IAnimationKey } from "babylonjs";
+    import { ICinematicTrack } from "babylonjs-editor/renderer/editor/cinematic/base";
+    export enum CinematicTrackType {
+            Group = "group",
+            Property = "property",
+            PropertyGroup = "propertyGroup",
+            AnimationGroup = "animationGroup"
+    }
+    export interface ICinematicTrackGroup {
+            /**
+                * Defines the name of the group.
+                */
+            name: string;
+            /**
+                * Defines the array of tracks.
+                */
+            tracks: ICinematicTrack[];
+    }
+    export interface ICinematicAnimationGroupSlot {
+            /**
+                * Defines the position of the slot in the timeline expressed in pixels.
+                */
+            position: number;
+            /**
+                * Defines the end frame of the track in the animation group.
+                */
+            end: number;
+            /**
+                * Defines the start frame of the track in the animation group.
+                */
+            start: number;
+    }
+    export interface ICinematicAnimationGroupTrack {
+            /**
+                * Defines the name of the animation group to play.
+                */
+            name: string;
+            /**
+                * Defines the list of all animation group slots.
+                */
+            slots: ICinematicAnimationGroupSlot[];
+    }
+    export interface ICinematicPropertyTrackBase {
+            /**
+                * Define the path of the animated property.
+                */
+            propertyPath: string;
+            /**
+                * Defines the list of all animation keys.
+                */
+            keys: IAnimationKey[];
+            /**
+                * Defines the type of the property being animated (float, vector3, etc.).
+                * @see BABYLON.Animation.XType
+                */
+            animationType: number;
+    }
+    export interface ICinematicPropertyTrack extends ICinematicPropertyTrackBase {
+            /**
+                * Defines the id of the node being animated.
+                */
+            nodeId: string;
+    }
+    export interface ICinematicPropertyGroupTrack extends ICinematicPropertyTrackBase {
+            /**
+                * Defines the list of all nodes being animated.
+                */
+            nodeIds: string[];
+    }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "babylonjs-editor",
-    "version": "4.1.1",
+    "version": "4.4.0",
     "description": "Babylon.js Editor is a Web Application helping artists to work with Babylon.js",
     "productName": "Babylon.js Editor",
     "typings": "index.d.ts",
@@ -21,16 +21,16 @@
         "@types/node": "13.9.0",
         "@types/react": "16.9.19",
         "@types/react-dom": "16.9.5",
-        "typescript": "4.0.5",
-        "babylonjs": "4.2.1",
-        "babylonjs-gui": "4.2.1",
-        "babylonjs-inspector": "4.2.1",
-        "babylonjs-loaders": "4.2.1",
-        "babylonjs-materials": "4.2.1",
-        "babylonjs-node-editor": "4.2.1",
-        "babylonjs-post-process": "4.2.1",
-        "babylonjs-procedural-textures": "4.2.1",
-        "babylonjs-serializers": "4.2.1",
+        "typescript": "4.6.3",
+        "babylonjs": "5.19.0",
+        "babylonjs-gui": "5.19.0",
+        "babylonjs-inspector": "5.19.0",
+        "babylonjs-loaders": "5.19.0",
+        "babylonjs-materials": "5.19.0",
+        "babylonjs-node-editor": "5.19.0",
+        "babylonjs-post-process": "5.19.0",
+        "babylonjs-procedural-textures": "5.19.0",
+        "babylonjs-serializers": "5.19.0",
         "@blueprintjs/core": "3.28.1",
         "@blueprintjs/select": "3.13.2",
         "react": "16.12.0",