Open NPE from Inspector V2

packages/dev/core/src/Particles/Node/nodeParticleSystemSet.ts

@@ -36,6 +36,8 @@ export interface INodeParticleEditorOptions {
     /** Additional configuration for the NPE */
     nodeEditorConfig?: {
         backgroundColor?: Color4;
+        /** If true, the node particle system set will be disposed when the editor is closed (default: true) */
+        disposeOnClose?: boolean;
     };
 }
 

packages/dev/core/src/Rendering/utilityLayerRenderer.ts

@@ -104,15 +104,26 @@ export class UtilityLayerRenderer implements IDisposable {
      */
     public static get DefaultKeepDepthUtilityLayer(): UtilityLayerRenderer {
         if (UtilityLayerRenderer._DefaultKeepDepthUtilityLayer == null) {
-            UtilityLayerRenderer._DefaultKeepDepthUtilityLayer = new UtilityLayerRenderer(EngineStore.LastCreatedScene!);
-            UtilityLayerRenderer._DefaultKeepDepthUtilityLayer.utilityLayerScene.autoClearDepthAndStencil = false;
-            UtilityLayerRenderer._DefaultKeepDepthUtilityLayer.originalScene.onDisposeObservable.addOnce(() => {
-                UtilityLayerRenderer._DefaultKeepDepthUtilityLayer = null;
-            });
+            return UtilityLayerRenderer._CreateDefaultKeepUtilityLayerFromScene(EngineStore.LastCreatedScene!);
         }
         return UtilityLayerRenderer._DefaultKeepDepthUtilityLayer;
     }
 
+    /**
+     * Creates an utility layer, and set it as a default utility layer (Depth map of the previous scene is not cleared before drawing on top of it)
+     * @param scene associated scene
+     * @internal
+     */
+    public static _CreateDefaultKeepUtilityLayerFromScene(scene: Scene): UtilityLayerRenderer {
+        UtilityLayerRenderer._DefaultKeepDepthUtilityLayer = new UtilityLayerRenderer(scene);
+        UtilityLayerRenderer._DefaultKeepDepthUtilityLayer.utilityLayerScene.autoClearDepthAndStencil = false;
+        UtilityLayerRenderer._DefaultKeepDepthUtilityLayer.originalScene.onDisposeObservable.addOnce(() => {
+            UtilityLayerRenderer._DefaultKeepDepthUtilityLayer = null;
+        });
+
+        return UtilityLayerRenderer._DefaultKeepDepthUtilityLayer;
+    }
+
     /**
      * The scene that is rendered on top of the original scene
      */

packages/dev/inspector-v2/src/components/properties/particles/attractorList.tsx

@@ -9,6 +9,7 @@ import type { Nullable } from "core/types";
 import type { ListItem } from "shared-ui-components/fluent/primitives/list";
 
 import { GizmoManager } from "core/Gizmos/gizmoManager";
+import { UtilityLayerRenderer } from "core/Rendering/utilityLayerRenderer";
 import { StandardMaterial } from "core/Materials/standardMaterial";
 import { Color3 } from "core/Maths/math.color";
 import { Attractor } from "core/Particles/attractor";
@@ -38,7 +39,12 @@ function AttractorsToListItems(attractors: Nullable<Array<Attractor>>) {
 }
 
 const CreateGizmoManager = (scene: Scene) => {
-    const gizmoManager = new GizmoManager(scene);
+    const gizmoManager = new GizmoManager(
+        scene,
+        1,
+        UtilityLayerRenderer._CreateDefaultUtilityLayerFromScene(scene),
+        UtilityLayerRenderer._CreateDefaultKeepUtilityLayerFromScene(scene)
+    );
     gizmoManager.positionGizmoEnabled = true;
     gizmoManager.attachableMeshes = [];
     return gizmoManager;

packages/dev/inspector-v2/src/components/properties/particles/particleSystemProperties.tsx

@@ -18,6 +18,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { Tools } from "core/Misc/tools";
 import { ParticleHelper } from "core/Particles/particleHelper";
 import { ParticleSystem } from "core/Particles/particleSystem";
+import { ConvertToNodeParticleSystemSetAsync } from "core/Particles/Node/nodeParticleSystemSet.helper";
 import { BlendModeOptions, ParticleBillboardModeOptions } from "shared-ui-components/constToOptionsMaps";
 import { ButtonLine } from "shared-ui-components/fluent/hoc/buttonLine";
 import { FileUploadLine } from "shared-ui-components/fluent/hoc/fileUploadLine";
@@ -246,10 +247,22 @@ export const ParticleSystemGeneralProperties: FunctionComponent<{ particleSystem
             <BoundProperty component={NumberInputPropertyLine} label="Update Speed" target={system} propertyKey="updateSpeed" min={0} step={0.01} />
 
             <ButtonLine
-                label={system.isNodeGenerated ? "Edit in Node Particle Editor (coming soon)" : "View in Node Particle Editor (coming soon)"}
-                disabled={true}
-                onClick={() => {
-                    // Hook up once Node Particle Editor UX is wired.
+                label={system.isNodeGenerated ? "Edit in Node Particle Editor" : "View in Node Particle Editor"}
+                onClick={async () => {
+                    const scene = system.getScene();
+                    if (!scene) {
+                        return;
+                    }
+
+                    if (system.isNodeGenerated && system.source) {
+                        await system.source.editAsync({ nodeEditorConfig: { backgroundColor: scene.clearColor, disposeOnClose: false } });
+                    } else {
+                        // View: Convert the particle system to a NodeParticleSystemSet and open editor
+                        const systemSet = await ConvertToNodeParticleSystemSetAsync("source", [system]);
+                        if (systemSet) {
+                            await systemSet.editAsync({ nodeEditorConfig: { backgroundColor: scene.clearColor } });
+                        }
+                    }
                 }}
             />
 

packages/dev/inspector-v2/test/app/index.tsx

@@ -28,6 +28,8 @@ import { MultiMaterial } from "core/Materials/multiMaterial";
 import { Texture } from "core/Materials/Textures/texture";
 import { ShowInspector } from "../../src";
 
+import "node-particle-editor/legacy/legacy"; // Ensure node particle editor legacy code is imported
+
 // Register scene loader plugins.
 registerBuiltInLoaders();
 

packages/dev/inspector-v2/webpack.config.js

@@ -20,7 +20,7 @@ module.exports = (env) => {
         ),
 
         resolve: {
-            extensions: [".ts", ".tsx", ".js", ".jsx"],
+            extensions: [".ts", ".tsx", ".js", ".jsx", ".svg", ".scss"],
             alias: {
                 addons: path.resolve("../../dev/addons/dist"),
                 core: path.resolve("../../dev/core/dist"),
@@ -30,13 +30,20 @@ module.exports = (env) => {
                 "shared-ui-components": path.resolve("../../dev/sharedUiComponents/src"),
                 "inspector-v2": path.resolve("./src"),
                 serializers: path.resolve("../../dev/serializers/dist"),
+                "node-particle-editor": path.resolve("../../tools/nodeParticleEditor/dist"),
             },
         },
 
         module: {
             rules: webpackTools.getRules({
                 sideEffects: true,
-                includeCSS: false,
+                includeCSS: true,
+                extraRules: [
+                    {
+                        test: /\.svg$/,
+                        type: "asset/inline",
+                    },
+                ],
                 enableFastRefresh: !production,
                 tsOptions: {
                     configFile: "tsconfig.build.json",

packages/tools/nodeParticleEditor/src/components/preview/previewManager.ts

@@ -161,6 +161,11 @@ export class PreviewManager {
             }
         }
 
+        // Only build new systems if we found matching ones to replace
+        if (map.size === 0) {
+            return;
+        }
+
         const newSet = await this._nodeParticleSystemSet.buildAsync(scene);
         for (const [reference, emitter] of map) {
             const particleSystem = (newSet.systems as ParticleSystem[]).find((ps) => ps._blockReference === reference);
@@ -180,7 +185,7 @@ export class PreviewManager {
             this._particleSystemSet.dispose();
         }
 
-        if (this._nodeParticleSystemSet) {
+        if (this._globalState.disposeOnClose && this._nodeParticleSystemSet) {
             this._nodeParticleSystemSet.dispose();
         }
 

packages/tools/nodeParticleEditor/src/globalState.ts

@@ -23,6 +23,8 @@ export class GlobalState {
     hostDocument: Document;
     hostWindow: Window;
     stateManager: StateManager;
+    /** If true, the node particle system set will be disposed when the editor is closed (default: true) */
+    disposeOnClose: boolean = true;
     onBuildRequiredObservable = new Observable<void>();
     onResetRequiredObservable = new Observable<boolean>();
     onClearUndoStack = new Observable<void>();

packages/tools/nodeParticleEditor/src/nodeParticleEditor.ts

@@ -22,6 +22,8 @@ export interface INodeEditorOptions {
     customSave?: { label: string; action: (data: string) => Promise<void> };
     customLoadObservable?: Observable<any>;
     backgroundColor?: Color4;
+    /** If true, the node particle system set will be disposed when the editor is closed (default: true) */
+    disposeOnClose?: boolean;
 }
 
 /**
@@ -65,6 +67,7 @@ export class NodeParticleEditor {
         globalState.customSave = options.customSave;
         globalState.hostWindow = hostElement.ownerDocument.defaultView!;
         globalState.stateManager.hostDocument = globalState.hostDocument;
+        globalState.disposeOnClose = options.disposeOnClose ?? true;
         if (options.backgroundColor) {
             globalState.backgroundColor = options.backgroundColor;
         }