babylonjs-editor 4.1.0 → 4.3.0

package/index.d.ts

@@ -57,6 +57,7 @@ declare module 'babylonjs-editor' {
     export { Dialog, IDialogProps } from "babylonjs-editor/renderer/editor/gui/dialog";
     export { Confirm, IConfirmProps } from "babylonjs-editor/renderer/editor/gui/confirm";
     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";
 }
@@ -688,6 +689,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.
@@ -1274,11 +1279,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.
                 */
@@ -1384,6 +1384,18 @@ declare module 'babylonjs-editor/renderer/editor/assets/materials' {
                 * @param event the original mouse event.
                 */
             onContextMenu(item: IAssetComponentItem, e: React.MouseEvent<HTMLImageElement, MouseEvent>): void;
+            /**
+                * Called on the user starts dragging the item.
+                * @param ev defines the reference to the drag event.
+                */
+            onDragStart(ev: React.DragEvent<HTMLImageElement>, item: IAssetComponentItem): void;
+            /**
+                * Called on the user drops the asset in a supported inspector field.
+                * @param ev defiens the reference to the event object.
+                * @param object defines the reference to the object being modified in the inspector.
+                * @param property defines the property of the object to assign the asset instance.
+                */
+            onDropInInspector(ev: React.DragEvent<HTMLElement>, object: any, property: string): Promise<void>;
             /**
                 * Called on the user drops an asset in editor. (typically the preview canvas).
                 * @param item the item being dropped.
@@ -1519,11 +1531,11 @@ 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>);
             ctorNames: string[];
@@ -1784,6 +1796,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.
@@ -2407,7 +2423,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.
@@ -2437,6 +2456,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.
@@ -2450,6 +2471,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.
@@ -2553,7 +2592,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.
                 */
@@ -2566,6 +2605,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.
@@ -2966,6 +3009,11 @@ declare module 'babylonjs-editor/renderer/editor/project/typings' {
         * 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.
@@ -3003,6 +3051,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
@@ -3098,6 +3157,10 @@ declare module 'babylonjs-editor/renderer/editor/project/typings' {
                 * 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.
                 */
@@ -3194,6 +3257,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
                 */
@@ -3330,6 +3397,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 {
             /**
@@ -3344,6 +3412,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.
                 */
@@ -3410,6 +3482,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.
                 */
@@ -3491,6 +3567,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.
                 */
@@ -3513,6 +3601,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.
@@ -3754,11 +3846,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.
                 */
@@ -3779,7 +3871,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.
                 */
@@ -3837,6 +3929,62 @@ declare module 'babylonjs-editor/renderer/editor/gui/icon' {
     }
 }
 
+declare module 'babylonjs-editor/renderer/editor/scene/import-tools' {
+    import { Nullable } from "babylonjs-editor/shared/types";
+    import { IParticleSystem, ISceneLoaderAsyncResult, Material, Node, Scene, Skeleton, TransformNode } from "babylonjs";
+    import { Editor } from "babylonjs-editor/renderer/editor/editor";
+    export interface ISceneImporterToolsConfiguration {
+            /**
+                * Defines the reference to the editor.
+                */
+            editor: Editor;
+            /**
+                * Defines wether or not the scene to configure its nodes are coming from a GLTF file.
+                */
+            isGltf: boolean;
+            /**
+                * Defines the relative path (from workspace) to the scene's file.
+                */
+            relativePath: string;
+            /**
+                * Defines the absolute path to the scene's file.
+                */
+            absolutePath: string;
+            /**
+                * Defines the result of the scene loader containing the meshes, skeletons etc.
+                */
+            result: ISceneLoaderAsyncResult;
+    }
+    export class SceneImporterTools {
+            /**
+                * Configures the given scene loader result contained in the given scene (id, material files etc.).
+                * @param scene defines the reference to the scene containing the elements to configure.
+                * @param configuration defines the configuration containing the information for the elements to configure.
+                */
+            static Configure(scene: Scene, configuration: ISceneImporterToolsConfiguration): Promise<Node>;
+            /**
+                * Configures the given imported particle systems.
+                */
+            static ConfigureParticleSystems(particleSystems: IParticleSystem[]): void;
+            /**
+                * Configures the given imported skeletons.
+                */
+            static ConfigureSkeletons(skeletons: Skeleton[], scene: Scene): void;
+            /**
+                * Configures the given imported transform nodes.
+                */
+            static ConfigureTransformNodes(transformNodes: TransformNode[], parent: Nullable<TransformNode>): void;
+            /**
+                * Configures the given imported transform nodes.
+                */
+            static ConfigureMeshes(configuration: ISceneImporterToolsConfiguration, parent: TransformNode): Promise<void>;
+            /**
+                * Configures the given imported material.
+                */
+            static ConfigureMaterial(material: Material, configuration: ISceneImporterToolsConfiguration, force?: boolean): Promise<Material>;
+    }
+}
+
 declare module 'babylonjs-editor/renderer/editor/project/packer/packer' {
     import { DirectoryTree } from "directory-tree";
     import { Nullable } from "babylonjs-editor/shared/types";
@@ -4405,6 +4553,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.
@@ -5000,7 +5152,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]>>>;
+            static ExecuteFunction<TClass extends Record<any, any>, TFunction extends FunctionPropertyNames<TClass>>(config: IWorkerConfiguration, fnName: TFunction, ...parameters: Parameters<TClass[TFunction]>): Promise<Awaitable<ReturnType<TClass[TFunction]>>>;
     }
 }
 
@@ -5388,6 +5540,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";
@@ -5663,6 +5868,84 @@ 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/scene/icons' {
     import { UtilityLayerRenderer, Observable } from "babylonjs";
     import { Editor } from "babylonjs-editor/renderer/editor/editor";
@@ -5704,3 +5987,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.0",
+    "version": "4.3.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.9.0",
+        "babylonjs-gui": "5.9.0",
+        "babylonjs-inspector": "5.9.0",
+        "babylonjs-loaders": "5.9.0",
+        "babylonjs-materials": "5.9.0",
+        "babylonjs-node-editor": "5.9.0",
+        "babylonjs-post-process": "5.9.0",
+        "babylonjs-procedural-textures": "5.9.0",
+        "babylonjs-serializers": "5.9.0",
         "@blueprintjs/core": "3.28.1",
         "@blueprintjs/select": "3.13.2",
         "react": "16.12.0",