babylonjs-editor 4.5.0 → 5.4.0-alpha.2

package/declaration/src/editor/layout/preview/import/progress.d.ts

@@ -0,0 +1,11 @@
+import { Component, ReactNode } from "react";
+export interface IEditorPreviewConvertProgressProps {
+    absolutePath: string;
+}
+export interface IEditorPreviewConvertProgressState {
+    value: number;
+}
+export declare class EditorPreviewConvertProgress extends Component<IEditorPreviewConvertProgressProps, IEditorPreviewConvertProgressState> {
+    constructor(props: IEditorPreviewConvertProgressProps);
+    render(): ReactNode;
+}

package/declaration/src/editor/layout/preview/import/sound.d.ts

@@ -0,0 +1,2 @@
+import { Editor } from "../../../main";
+export declare function applySoundAsset(editor: Editor, object: any, absolutePath: string): Promise<import("../../../../ui/dialog").DialogReturnType | undefined>;

package/declaration/src/editor/layout/preview/import/texture.d.ts

@@ -0,0 +1,17 @@
+import { CubeTexture, Texture, ColorGradingTexture } from "babylonjs";
+import { Editor } from "../../../main";
+/**
+ * Applies the texture asset located at the given absolute path to the given object.
+ * @param editor defines the reference to the editor.
+ * @param object defines the reference to the object where to apply the texture. The type of the object is tested.
+ * @param absolutePath defines the absolute path to the texture asset file (.png, .env, .jpg, etc.).
+ */
+export declare function applyTextureAssetToObject(editor: Editor, object: any, absolutePath: string): void;
+/**
+ * Applies the given texture to the given object. Tries to determine the correct slot to apply the texture.
+ * If fails, asks to choose the slot (albedo, bump, etc.).
+ * @param editor defines the reference to the editor.
+ * @param object defines the reference to the object where to apply the texture. The type of the object is tested.
+ * @param texture defines the reference to the texture instance to apply on the object.
+ */
+export declare function applyTextureToObject(editor: Editor, object: any, texture: Texture | CubeTexture | ColorGradingTexture): void;

package/declaration/src/editor/layout/preview/play.d.ts

@@ -0,0 +1,91 @@
+import { Component, ReactNode } from "react";
+import { Scene } from "babylonjs";
+import { Editor } from "../../main";
+export interface IEditorPreviewPlayComponentProps {
+    /**
+     * The editor reference.
+     */
+    editor: Editor;
+    /**
+     * Defines wether or not the play button is enabled in the preview.
+     */
+    enabled: boolean;
+    /**
+     * Called on the user wants to restart the game / application (aka. refresh the page of the game / application).
+     */
+    onRestart: () => void;
+}
+export interface IEditorPreviewPlayComponentState {
+    /**
+     * Defines wether or not the player is being prepared.
+     */
+    preparingPlay: boolean;
+    /**
+     * Defines wether or not the game / application is currently loading.
+     */
+    loading: boolean;
+    /**
+     * Defines wether or not the game / application is playing in the editor.
+     */
+    playing: boolean;
+}
+export declare class EditorPreviewPlayComponent extends Component<IEditorPreviewPlayComponentProps, IEditorPreviewPlayComponentState> {
+    /**
+     * Defines the reference to the scene that is reserved for the game / application when playing.
+     * This scene is used to be renderer directly in the preview panel of the editor and is disposed when the
+     * game / application is stopped.
+     */
+    scene: Scene | null;
+    private _srcWatcher;
+    private _temporaryDirectory;
+    private _compiledScriptExports;
+    constructor(props: IEditorPreviewPlayComponentProps);
+    render(): ReactNode;
+    componentDidMount(): void;
+    triggerPlayScene(): void;
+    componentDidUpdate(_: Readonly<IEditorPreviewPlayComponentProps>, prevState: Readonly<IEditorPreviewPlayComponentState>): void;
+    /**
+     * Gets wether or not everything is ready to play the current scene of the game / application.
+     */
+    get canPlayScene(): boolean;
+    /**
+     * Sets the game / application to play or stop.
+     * If the game / application is not playing, it will start it.
+     * If the game / application is playing, it will stop it.
+     */
+    playOrStopApplication(): Promise<void>;
+    /**
+     * Restarts the game / application.
+     * This will just clean the current scene instance (event receivers, etc.) and reload the same scene.
+     */
+    restart(): Promise<void>;
+    /**
+     * Stops the game / application.
+     * It will dispose the scene and reset the state.
+     */
+    stop(): void;
+    /**
+     * Starts the game / application.
+     * The play process consists on:
+     * - the exporting the final scene without optimizations (to save export time)
+     * - compiling the scripts map using esbuild (located at projectAbsoluteDir/src/scripts.ts)
+     * - store the output of esbuild and put it in the temporary directory of the project (.bjseditor folder)
+     * - require the compiled script and use babylonjs-editor-tools to render the scene.
+     */
+    play(noExportScene?: boolean, noCompile?: boolean): Promise<void>;
+    /**
+     * The script that is required and executed is a bundled version of the "src/scripts.ts" file.
+     * Here we use esbuild to bundle the scripts and transform the imports to use the correct paths.
+     * @see compilePlayScript for more information.
+     */
+    private _compileScripts;
+    private _createAndLoadScene;
+    private _requireCompiledScripts;
+    /**
+     * Watches all the src directory of the project to detect changes in the scripts.
+     * If a change is detected, it will restart the game / application.
+     * TODO: change only those one that changed.
+     */
+    private _watchSrcDirectory;
+    private _closeWatchSrcDirectory;
+}

package/declaration/src/editor/layout/preview/stats/row.d.ts

@@ -0,0 +1,5 @@
+export interface IStatRowProps {
+    label: string;
+    value?: number;
+}
+export declare function StatRow(props: IStatRowProps): import("react/jsx-runtime").JSX.Element;

package/declaration/src/editor/layout/preview/stats/stats.d.ts

@@ -0,0 +1,17 @@
+import { Observable } from "babylonjs";
+import { Editor } from "../../../main";
+import { StatsValuesType } from "./types";
+export declare class Stats {
+    /**
+     * Defines the observable called when the stats values have been updated.
+     */
+    onValuesChangedObservable: Observable<StatsValuesType>;
+    private _editor;
+    private _intervalId;
+    private _values;
+    private _engineInstrumentation;
+    private _sceneInstrumentation;
+    constructor(editor: Editor);
+    dispose(): void;
+    private _computeStats;
+}

package/declaration/src/editor/layout/preview/stats/types.d.ts

@@ -0,0 +1,28 @@
+export type StatsValuesType = {
+    averageFPS?: number;
+    instantaneousFPS?: number;
+    averageFrameTime?: number;
+    instantaneousFrameTime?: number;
+    activeFaces?: number;
+    activeIndices?: number;
+    activeBones?: number;
+    activeParticles?: number;
+    activeMeshes?: number;
+    drawCalls?: number;
+    totalVertices?: number;
+    totalMeshes?: number;
+    totalMaterials?: number;
+    totalTextures?: number;
+    totalLights?: number;
+    gpuFrameTime?: number;
+    gpuFrameTimeAvarage?: number;
+    absoluteFPS?: number;
+    render?: number;
+    frameTotal?: number;
+    interFrame?: number;
+    meshSelection?: number;
+    renderTargets?: number;
+    animations?: number;
+    particles?: number;
+    physics?: number;
+};

package/declaration/src/editor/layout/preview.d.ts

@@ -0,0 +1,140 @@
+import { Component, ReactNode } from "react";
+import { AbstractEngine, Camera, ISceneLoaderAsyncResult, Scene } from "babylonjs";
+import { Editor } from "../main";
+import { EditorCamera } from "../nodes/camera";
+import { EditorPreviewGizmo } from "./preview/gizmo";
+import { EditorPreviewIcons } from "./preview/icons";
+import { EditorPreviewAxisHelper } from "./preview/axis";
+import { EditorPreviewPlayComponent } from "./preview/play";
+import { Stats } from "./preview/stats/stats";
+import { StatsValuesType } from "./preview/stats/types";
+export interface IEditorPreviewProps {
+    /**
+     * The editor reference.
+     */
+    editor: Editor;
+}
+export interface IEditorPreviewState {
+    /**
+     * Defines the information message drawn over the preview to tell the user what is happening.
+     */
+    informationMessage: ReactNode;
+    isFocused: boolean;
+    rightClickedObject?: any;
+    pickingEnabled: boolean;
+    showStatsValues: boolean;
+    statsValues?: StatsValuesType;
+    playEnabled: boolean;
+    playSceneLoadingProgress: number;
+    activeGizmo: "position" | "rotation" | "scaling" | "none";
+    /**
+     * Defines the fixed dimensions of the preview canvas.
+     * "fit" means the canvas will fit the entire panel container.
+     */
+    fixedDimensions: "720p" | "1080p" | "4k" | "fit";
+}
+export declare class EditorPreview extends Component<IEditorPreviewProps, IEditorPreviewState> {
+    /**
+     * The engine of the preview.
+     */
+    engine: AbstractEngine;
+    /**
+     * The scene of the preview.
+     */
+    scene: Scene;
+    /**
+     * The camera of the preview.
+     */
+    camera: EditorCamera;
+    /**
+     * The gizmo manager of the preview
+     */
+    gizmo: EditorPreviewGizmo;
+    /**
+     * The helper drawn over the scene to help visualizing and selecting nodes like lights, cameras, particle systems, etc.
+     */
+    icons: EditorPreviewIcons;
+    /**
+     * The helper drawn over the scene to help visualizing the axis according to the current camera view.
+     */
+    axis: EditorPreviewAxisHelper;
+    /**
+     * The play component of the preview.
+     */
+    play: EditorPreviewPlayComponent;
+    /**
+     * The current statistics of the preview.
+     * This is used to display the FPS and other values.
+     */
+    statistics: Stats;
+    /**
+     * Defines the reference to the canvas drawn in the preview.
+     */
+    canvas: HTMLCanvasElement | null;
+    private _renderScene;
+    private _mouseDownPosition;
+    private _objectUnderPointer;
+    private _workingCanvas;
+    private _mainView;
+    /** @internal */
+    _previewCamera: Camera | null;
+    constructor(props: IEditorPreviewProps);
+    render(): ReactNode;
+    /**
+     * Sets whether or not to render the scene.
+     * @param render defines whether or not to render the scene.
+     */
+    setRenderScene(render: boolean): void;
+    /**
+     * Resizes the engine.
+     */
+    resize(): void;
+    /**
+     * Resets the preview component by re-creating the engine and an empty scene.
+     */
+    reset(): Promise<void>;
+    /**
+     * Sets the fixed dimensions of the renderer. This is particularly useful to test the rendering
+     * performances and the aspect ratio of the scene in case it'll be renderer in fullscreen.
+     */
+    setFixedDimensions(fixedDimensions: "720p" | "1080p" | "4k" | "fit"): void;
+    /**
+     * Tries to focused the given object or the first one selected in the graph.
+     */
+    focusObject(object?: any): void;
+    /**
+     * Sets the given camera active as a preview.
+     * This helps to visualize what the selected camera sees when being manipulated
+     * using gizmos for example.
+     * When "null", the preview is removed.
+     * @param camera the camera to activate the preview
+     */
+    setCameraPreviewActive(camera: Camera | null): void;
+    private _onGotIconsRef;
+    private _onGotCanvasRef;
+    private _createWebgpuEngine;
+    /** @internal */
+    _handleMouseLeave(): void;
+    private _mouseMoveTimeoutId;
+    private _handleMouseMove;
+    private _handleMouseDown;
+    private _handleDoubleClick;
+    private _handleMouseUp;
+    private _getPickingInfo;
+    private _resetPointerContextInfo;
+    private _highlightCurrentMeshUnderPointer;
+    private _restoreCurrentMeshUnderPointer;
+    private _getToolbar;
+    private _getEditToolbar;
+    private _switchToCamera;
+    /**
+     * Sets the currently active gizmo. Set "none" to deactivate the gizmo.
+     * @param gizmo defines the type of gizmo to activate.
+     */
+    setActiveGizmo(gizmo: "position" | "rotation" | "scaling" | "none"): void;
+    importSceneFile(absolutePath: string, useCloudConverter: boolean): Promise<ISceneLoaderAsyncResult | null>;
+    private _handleDrop;
+    private _handleGraphNodesDropped;
+    private _handleSpritesDropped;
+    private _handleAssetsDropped;
+}

package/declaration/src/editor/layout/ragdoll/editor.d.ts

@@ -0,0 +1,23 @@
+import { Component, ReactNode } from "react";
+import { IRagDollConfiguration } from "babylonjs-editor-tools";
+import { Editor } from "../../main";
+import { RagdollEditorPreview } from "./preview";
+import { RagdollEditorInspector } from "./inspector";
+export interface IRagdollEditorProps {
+    editor: Editor;
+    absolutePath: string;
+    configuration: IRagDollConfiguration;
+}
+export interface IIRagdollEditorPropsState {
+    loading: boolean;
+    assetRelativePath?: string;
+}
+export declare class RagdollEditor extends Component<IRagdollEditorProps, IIRagdollEditorPropsState> {
+    preview: RagdollEditorPreview;
+    inspector: RagdollEditorInspector;
+    constructor(props: IRagdollEditorProps);
+    render(): ReactNode;
+    componentDidMount(): void;
+    save(): Promise<void>;
+    loadAsset(relativePath: string): Promise<void>;
+}

package/declaration/src/editor/layout/ragdoll/empty.d.ts

@@ -0,0 +1,5 @@
+import { RagdollEditor } from "./editor";
+export interface IRagdollEditorEmptyStateProps {
+    ragdollEditor: RagdollEditor;
+}
+export declare function RagdollEditorEmptyState(props: IRagdollEditorEmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/declaration/src/editor/layout/ragdoll/inspector.d.ts

@@ -0,0 +1,28 @@
+import { Component, ReactNode } from "react";
+import { Skeleton, Mesh, TransformNode } from "babylonjs";
+import { IRagDollConfiguration, IRagdollRuntimeConfiguration } from "babylonjs-editor-tools";
+import { RagdollEditor } from "./editor";
+export interface IRagdollEditorInspectorProps {
+    ragdollEditor: RagdollEditor;
+    configuration: IRagDollConfiguration;
+}
+export interface IRagdollEditorInspectorState {
+    selectedSkeleton?: Skeleton;
+    selectedRootNode?: Mesh | TransformNode;
+    isRagdollApplied: boolean;
+    selectedConfiguration?: IRagdollRuntimeConfiguration;
+}
+export declare class RagdollEditorInspector extends Component<IRagdollEditorInspectorProps, IRagdollEditorInspectorState> {
+    private _selectedSkeleton;
+    private _selectedRootNode;
+    private _lastRootNodeScaling;
+    constructor(props: IRagdollEditorInspectorProps);
+    render(): ReactNode;
+    private _getRagdollInspector;
+    private _handleApplyOrStopRagdollPreview;
+    private _getConfigurationListInspector;
+    private _handleAddConfiguration;
+    private _handleRemoveConfiguration;
+    private _getConfigurationInspector;
+    private _handleChange;
+}

package/declaration/src/editor/layout/ragdoll/preview.d.ts

@@ -0,0 +1,27 @@
+import { Component, ReactNode } from "react";
+import { Engine, Scene, ArcRotateCamera, Ragdoll, GroundMesh, TransformNode } from "babylonjs";
+import { Editor } from "../../main";
+import { RagdollEditor } from "./editor";
+export interface IRagdollEditorPreviewProps {
+    editor: Editor;
+    ragdollEditor: RagdollEditor;
+}
+export interface IRagdollEditorPreviewState {
+}
+export declare class RagdollEditorPreview extends Component<IRagdollEditorPreviewProps, IRagdollEditorPreviewState> {
+    private _canvasRef;
+    engine: Engine;
+    scene: Scene;
+    camera: ArcRotateCamera;
+    ground: GroundMesh;
+    scalingNode: TransformNode;
+    ragdoll: Ragdoll | null;
+    private _light;
+    private _viewer;
+    constructor(props: IRagdollEditorPreviewProps);
+    render(): ReactNode;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    resetViewer(): void;
+    loadFromRelativePath(relativePath: string): Promise<void>;
+}

package/declaration/src/editor/layout/ragdoll/toolbar.d.ts

@@ -0,0 +1,5 @@
+import { RagdollEditor } from "./editor";
+export interface INavMeshEditorToolbarProps {
+    ragdollEditor: RagdollEditor;
+}
+export declare function RagdollEditorToolbar(props: INavMeshEditorToolbarProps): import("react/jsx-runtime").JSX.Element;

package/declaration/src/editor/layout/toolbar.d.ts

@@ -0,0 +1,18 @@
+import { Component, ReactNode } from "react";
+import { Editor } from "../main";
+export interface IEditorToolbarProps {
+    editor: Editor;
+}
+export declare class EditorToolbar extends Component<IEditorToolbarProps> {
+    private _nodeCommands;
+    private _meshCommands;
+    private _lightCommands;
+    private _cameraCommands;
+    private _spriteCommands;
+    constructor(props: IEditorToolbarProps);
+    render(): ReactNode;
+    private _getToolbar;
+    private _handleOpenProject;
+    private _handleOpenVisualStudioCode;
+    private _handleToggleMarketplace;
+}

package/declaration/src/editor/layout.d.ts

@@ -0,0 +1,84 @@
+import { Component, ReactNode } from "react";
+import { Observable } from "babylonjs";
+import { Editor } from "./main";
+import { EditorGraph } from "./layout/graph";
+import { EditorPreview } from "./layout/preview";
+import { EditorConsole } from "./layout/console";
+import { EditorInspector } from "./layout/inspector";
+import { EditorAnimation } from "./layout/animation";
+import { EditorAssetsBrowser } from "./layout/assets-browser";
+export interface IEditorLayoutProps {
+    /**
+     * The editor reference.
+     */
+    editor: Editor;
+}
+export interface IEditorLayoutTabOptions {
+    id?: string;
+    title: string;
+    neighborId?: "inspector" | "assets-browser";
+    enableClose?: boolean;
+    setAsActiveTab?: boolean;
+}
+export declare class EditorLayout extends Component<IEditorLayoutProps> {
+    /**
+     * The preview of the editor.
+     */
+    preview: EditorPreview;
+    /**
+     * The console of the editor.
+     */
+    console: EditorConsole;
+    /**
+     * The inspector of the editor.
+     */
+    inspector: EditorInspector;
+    /**
+     * The graph of the editor.
+     */
+    graph: EditorGraph;
+    /**
+     * The assets browser of the editor.
+     */
+    assets: EditorAssetsBrowser;
+    /**
+     * The animation editor of the editor.
+     */
+    animations: EditorAnimation;
+    /**
+     * Observable for when the layout has changed.
+     */
+    onLayoutChanged: Observable<void>;
+    private _layoutRef;
+    private _model;
+    private _components;
+    private _layoutVersion;
+    constructor(props: IEditorLayoutProps);
+    render(): ReactNode;
+    componentDidCatch(): void;
+    private _layoutFactory;
+    private _saveLayout;
+    /**
+     * Returns whether or not the tab identified by the given id is maximized.
+     * @param tabId defines the id of the tab to check.
+     */
+    isTabMaximized(tabId: string): boolean;
+    /**
+     * Makes the tab identified by the given id active.
+     * If the tab is hidden, makes it visible and selected.
+     * @param tabId defines the id of the tab to make active.
+     */
+    selectTab(tabId: "graph" | "preview" | "assets-browser" | "console" | "inspector" | (string & {})): void;
+    /**
+     * Adds a new tab to the layout.
+     * @param component defines the reference to the React component to draw in.
+     * @param options defines the options of the tab such as the title etc.
+     */
+    addLayoutTab(component: ReactNode, options: IEditorLayoutTabOptions): void;
+    /**
+     * Removes the tab identified by the given id from the layout. The react component mounted in the tab will be unmounted
+     * before the tab is removed completely to ensure proper resource cleanup.
+     * @param tabId defines the id of the tab to remove from the layout.
+     */
+    removeLayoutTab(tabId: string): void;
+}

package/declaration/src/editor/main.d.ts

@@ -0,0 +1,102 @@
+import { Component, ReactNode } from "react";
+import { EditorProjectPackageManager } from "../project/typings";
+import { CommandPalette } from "./dialogs/command-palette/command-palette";
+import { EditorLayout } from "./layout";
+import "./nodes/camera";
+import "./nodes/scene-link";
+export declare function createEditor(): void;
+export interface IEditorProps {
+    /**
+     * The path of the project.
+     */
+    projectPath: string | null;
+    /**
+     * Defines the path to the currently edited scene path.
+     */
+    editedScenePath?: string | null;
+}
+export interface IEditorState {
+    /**
+     * The path of the project.
+     */
+    projectPath: string | null;
+    /**
+     * The path of the last opened scene.
+     */
+    lastOpenedScenePath: string | null;
+    /**
+     * Defines the list of all plugins to load.
+     */
+    plugins: string[];
+    /**
+     * Defines the current package manager being used by the editor.
+     */
+    packageManager?: EditorProjectPackageManager;
+    /**
+     * Defines wether or not compressed textures are enabled.
+     */
+    compressedTexturesEnabled: boolean;
+    /**
+     * Defines wether or not compressed textures are enabled in the preview.
+     */
+    compressedTexturesEnabledInPreview: boolean;
+    /**
+     * Defines wether or not experimental features are enabled.
+     */
+    enableExperimentalFeatures: boolean;
+    /**
+     * Defines the list of tabs that are currently opened in the layout.
+     */
+    openedTabs: string[];
+    /**
+     * Defines if the project is being edited.
+     */
+    editProject: boolean;
+    /**
+     * Defines if the preferences are being edited.
+     */
+    editPreferences: boolean;
+    /**
+     * Defines if the project generator dialog is opened.
+     */
+    generateProject: boolean;
+    /**
+     * Defines wether or not NodeJS is available.
+     */
+    nodeJSAvailable: boolean;
+    /**
+     * Defines wether or not Visual Studio Code is available.
+     */
+    visualStudioCodeAvailable: boolean;
+}
+export declare class Editor extends Component<IEditorProps, IEditorState> {
+    /**
+     * The layout of the editor.
+     */
+    layout: EditorLayout;
+    /**
+     * The command palette of the editor.
+     */
+    commandPalette: CommandPalette;
+    /**
+     * Defines the path to the editor application.
+     * This comes from electron `app.getAppPath();`
+     */
+    path: string | null;
+    constructor(props: IEditorProps);
+    render(): ReactNode;
+    componentDidMount(): Promise<void>;
+    /**
+     * Opens the project located at the given absolute path.
+     * @param absolutePath defines the absolute path to the project to open.
+     */
+    openProject(absolutePath: string): Promise<void>;
+    /**
+     * Closes the current editor window after asking for confirmation.
+     */
+    close(): void;
+    /**
+     * Quits the app after asking for confirmation.
+     */
+    quitApp(): void;
+}

package/declaration/src/editor/menu.d.ts

@@ -0,0 +1,4 @@
+export declare function setupEditorMenu(options: {
+    enableExperimentalFeatures: boolean;
+    openedTabs: string[];
+}): void;

package/declaration/src/editor/nodes/camera-pan-input.d.ts

@@ -0,0 +1,30 @@
+import { FreeCamera, ICameraInput } from "babylonjs";
+/**
+ * FreeCamera input to pan the camera using Alt + Left Mouse Button.
+ */
+export declare class EditorFreeCameraPanInput implements ICameraInput<FreeCamera> {
+    camera: FreeCamera;
+    private _scene;
+    private _canvas;
+    private _isPanning;
+    private _lastClientX;
+    private _lastClientY;
+    private _detachedMouseInput;
+    panSensitivityMultiplier: number;
+    private static readonly _panMinDistance;
+    private static readonly _panMaxDistance;
+    private static readonly _panMaxPixelDelta;
+    private static readonly _defaultFov;
+    private _pointerDownListener;
+    private _pointerMoveListener;
+    private _pointerUpListener;
+    private _pointerCancelListener;
+    getClassName(): string;
+    getSimpleName(): string;
+    attachControl(noPreventDefaultOrElement?: any, maybeNoPreventDefault?: boolean): void;
+    detachControl(): void;
+    checkInputs(): void;
+    private _beginPan;
+    private _updatePan;
+    private _endPan;
+}