Reworked way to open and init windowed plugins.

Author: julien-moreau

.gitignore

@@ -131,16 +131,9 @@ build
 declaration
 electron-packages
 dist
-vscode-extension/.build
-vscode-extension/.declaration
-vscode-extension/*.vsix
 photoshop-extension/.build
 photoshop-extension/.declaration
-
-# Files
-babylonjs-editor-extensions.d.ts
-babylonjs-editor-extensions-es6.d.ts
-css/editor.bundle.css
+module/index.d.ts
 
 # Tests
 !test/**/

.npmignore

@@ -21,7 +21,7 @@ npm install
 ```
 
 ## Building
-Building Editor)
+Building Editor
 
 ```bash
 npm run build

README.md

@@ -0,0 +1,19 @@
+{
+    "name": "babylonjs-editor",
+    "version": "3.2.1-beta.4",
+    "description": "Babylon.js Editor is a Web Application helping artists to work with Babylon.js",
+    "productName": "Babylon.js Editor",
+    "typings": "index.d.ts",
+    "repository": {
+        "url": "https://github.com/BabylonJS/Editor/"
+    },
+    "author": {
+        "name": "Julien Moreau-Mathis",
+        "url": "https://medium.com/@Luaacro"
+    },
+    "scripts": {},
+    "readme": "https://github.com/BabylonJS/Editor/blob/master/README.md",
+    "license": "(Apache-2.0)",
+    "devDependencies": {},
+    "dependencies": {}
+}

module/.npmignore

@@ -35,31 +35,32 @@
     "@types/raphael": "2.1.30",
     "@types/react": "16.9.19",
     "@types/react-dom": "16.9.5",
+    "dts-bundle": "^0.7.3",
     "electron": "8.1.0",
     "electron-builder": "22.5.1",
     "electron-rebuild": "1.10.1",
     "rimraf": "3.0.2"
   },
   "dependencies": {
-    "@babylonjs/core": "4.2.0-alpha.15",
-    "@babylonjs/gui": "4.2.0-alpha.15",
-    "@babylonjs/loaders": "4.2.0-alpha.15",
-    "@babylonjs/materials": "4.2.0-alpha.15",
-    "@babylonjs/post-processes": "4.2.0-alpha.15",
-    "@babylonjs/procedural-textures": "4.2.0-alpha.15",
+    "@babylonjs/core": "4.2.0-alpha.16",
+    "@babylonjs/gui": "4.2.0-alpha.16",
+    "@babylonjs/loaders": "4.2.0-alpha.16",
+    "@babylonjs/materials": "4.2.0-alpha.16",
+    "@babylonjs/post-processes": "4.2.0-alpha.16",
+    "@babylonjs/procedural-textures": "4.2.0-alpha.16",
     "@blueprintjs/core": "3.26.0",
     "@blueprintjs/select": "3.12.2",
     "adm-zip": "0.4.14",
     "antd": "4.2.0",
-    "babylonjs": "4.2.0-alpha.15",
-    "babylonjs-gui": "4.2.0-alpha.15",
-    "babylonjs-inspector": "4.2.0-alpha.15",
-    "babylonjs-loaders": "4.2.0-alpha.15",
-    "babylonjs-materials": "4.2.0-alpha.15",
-    "babylonjs-node-editor": "4.2.0-alpha.15",
-    "babylonjs-post-process": "4.2.0-alpha.15",
-    "babylonjs-procedural-textures": "4.2.0-alpha.15",
-    "babylonjs-serializers": "4.2.0-alpha.15",
+    "babylonjs": "4.2.0-alpha.16",
+    "babylonjs-gui": "4.2.0-alpha.16",
+    "babylonjs-inspector": "4.2.0-alpha.16",
+    "babylonjs-loaders": "4.2.0-alpha.16",
+    "babylonjs-materials": "4.2.0-alpha.16",
+    "babylonjs-node-editor": "4.2.0-alpha.16",
+    "babylonjs-post-process": "4.2.0-alpha.16",
+    "babylonjs-procedural-textures": "4.2.0-alpha.16",
+    "babylonjs-serializers": "4.2.0-alpha.16",
     "cannon": "0.6.2",
     "ccapture.js": "1.1.0",
     "chalk": "4.0.0",

module/package.json

@@ -0,0 +1,7 @@
+const dts = require("dts-bundle");
+
+dts.bundle({
+    name: "babylonjs-editor",
+    main: "./declaration/src/src/renderer/editor/index.d.ts",
+    out: "../../../../../module/index.d.ts",
+});

package-lock.json

@@ -125,7 +125,7 @@ export class TextureAssets extends AbstractAssets {
         const file = FilesStore.GetFileFromBaseName(name);
         if (!file) { return; }
 
-        await this.editor.addWindowedPlugin("texture-viewer", undefined, { path: file.path });
+        await this.editor.addWindowedPlugin("texture-viewer", undefined, file.path);
     }
 
     /**

package.json

@@ -11,7 +11,6 @@ import { AbstractMesh, Node, IParticleSystem } from "babylonjs";
 
 import { Editor } from "../editor";
 
-import { IPCTools } from "../tools/ipc";
 import { Tools } from "../tools/tools";
 import { ExecTools } from "../tools/exec";
 
@@ -334,10 +333,8 @@ export class MainToolbar extends React.Component<IToolbarProps, IToolbarState> {
      * Called on the user wants to show the workspace settings.
      */
     private async _handleWorkspaceSettings(): Promise<void> {
-        const popupId = await this._editor.addWindowedPlugin("workspace-settings");
+        const popupId = await this._editor.addWindowedPlugin("workspace-settings", undefined, WorkSpace.Path);
         if (!popupId) { return; }
-
-        IPCTools.SendWindowMessage(popupId, "workspace-path", { path: WorkSpace.Path! });
     }
 
     /**

script/dts.js

@@ -504,9 +504,9 @@ export class Editor {
      * Adds a new plugin handled by its own window.
      * @param name the name of the plugin to load.
      * @param windowId the id of the window that is possibly already opened.
-     * @param initData optional data to send for the initialization of the plugin.
+     * @param args optional arguments to pass the plugn's .init function.
      */
-    public async addWindowedPlugin(name: string, windowId?: Undefinable<number>, initData?: Undefinable<any>): Promise<Nullable<number>> {
+    public async addWindowedPlugin(name: string, windowId?: Undefinable<number>, ...args: any[]): Promise<Nullable<number>> {
         // Check if the provided window id exists. If exists, just restore.
         if (windowId) {
             const index = this._pluginWindows.indexOf(windowId);
@@ -536,13 +536,9 @@ export class Editor {
         this._pluginWindows.push(popupId);
 
         await Tools.Wait(100);
-        await IPCTools.SendWindowMessage(popupId, "pluginName", { name });
+        await IPCTools.SendWindowMessage(popupId, "pluginName", { name, args });
         await Tools.Wait(100);
 
-        if (initData !== undefined) {
-            IPCTools.SendWindowMessage(popupId, "init", initData);
-        }
-
         return popupId;
     }
 

src/renderer/editor/assets/textures.tsx

@@ -72,6 +72,11 @@ export class KeyMapper extends React.Component<IKeyMapperProps, IKeyMapperState>
 export class KeyMapperController extends dat.controllers.Controller {
     private _title: HTMLSpanElement;
 
+    private _keyMapper: KeyMapper;
+    private _refHandler = {
+        getKeyMapper: (ref: KeyMapper) => this._keyMapper = ref,
+    };
+
     /**
      * Constructor.
      * @param object the object to modify.
@@ -92,7 +97,7 @@ export class KeyMapperController extends dat.controllers.Controller {
         this.domElement.appendChild(div);
 
         // Render mapper
-        ReactDOM.render(<KeyMapper onChange={(k) => object[property] = k} mappedKey={object[property]} />, div);
+        ReactDOM.render(<KeyMapper ref={this._refHandler.getKeyMapper} onChange={(k) => object[property] = k} mappedKey={object[property]} />, div);
     }
 
     /**
@@ -103,6 +108,14 @@ export class KeyMapperController extends dat.controllers.Controller {
         this._title.innerHTML = name;
         return this;
     }
+
+    /**
+     * Updates the current display of the controller.
+     */
+    public updateDisplay(): KeyMapperController {
+        this._keyMapper?.setState({ mappedKey: this.object[this.property] });
+        return this;
+    }
 }
 
 dat.GUI.prototype.addKeyMapper = function(object: any, property: string): KeyMapperController {

src/renderer/editor/components/main-toolbar.tsx

@@ -13,6 +13,8 @@ export class VectorController extends dat.controllers.Controller {
     private __onChange: (v: IVector) => void;
     private __onFinishChange: (v: IVector) => void;
 
+    private _numberControllers: dat.GUIController[] = [];
+
     /**
      * Constructor.
      * @param title defines the title of the controller.
@@ -68,6 +70,14 @@ export class VectorController extends dat.controllers.Controller {
         return this;
     }
 
+    /**
+     * Updates the current display of the controller.
+     */
+    public updateDisplay(): VectorController {
+        this._numberControllers.forEach((c) => c.updateDisplay());
+        return this;
+    }
+
     /**
      * Adds a new number controller.
      */
@@ -88,6 +98,8 @@ export class VectorController extends dat.controllers.Controller {
         c.domElement.style.width = "calc(100% - 25px)";
         c.onChange(() => this.__onChange && this.__onChange(this.vector));
         c.onFinishChange(() => this.__onFinishChange && this.__onFinishChange(this.vector));
+
+        this._numberControllers.push(c);
         dummyController.domElement.appendChild(c.domElement);
     }
 }

src/renderer/editor/editor.tsx

@@ -1,14 +1,31 @@
 import { ipcRenderer, remote } from "electron";
+
 import { IPCResponses, IPCRequests } from "../../shared/ipc";
+import { Undefinable } from "../../shared/types";
 
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
+export interface IWindowedPluginInitialization {
+    /**
+     * Defines the name of the plugin to require.
+     */
+    name: string;
+    /**
+     * Defines the option array of arguments to pass the the ".init" function of the plugin.
+     */
+    args?: Undefinable<any[]>;
+}
+
 export default class WindowedPlugin {
+    private _ref: any;
+    private _refHandler = {
+        getRef: (ref: any) => this._ref = ref,
+    }
     /**
      * Constructor.
      */
-    constructor() {
+    public constructor() {
         this._init();
     }
 
@@ -22,16 +39,18 @@ export default class WindowedPlugin {
         });
 
         // Get plugin name
-        const pluginName = await new Promise<string>((resolve) => {
-            ipcRenderer.once(IPCResponses.SendWindowMessage, (_, data) => data.id === "pluginName" && resolve(data.name));
+        const data = await new Promise<any>((resolve) => {
+            ipcRenderer.once(IPCResponses.SendWindowMessage, (_, data) => data.id === "pluginName" && resolve(data));
         });
 
         // Load plugin!
         try {
-            const plugin = require(`./${pluginName}`);
+            const plugin = require(`./${data.name}`);
             document.title = plugin.title;
 
-            ReactDOM.render(<plugin.default />, document.getElementById("BABYLON-EDITOR-PLUGIN"));
+            ReactDOM.render(<plugin.default ref={this._refHandler.getRef} />, document.getElementById("BABYLON-EDITOR-PLUGIN"), () => {
+                this._ref?.init?.apply(this._ref, data.args ?? []);
+            });
             ipcRenderer.send(IPCResponses.SendWindowMessage, -1, { id: "pluginName" });
         } catch (e) {
             /* Catch silently */

src/renderer/editor/gui/augmentations/key-mapper.tsx

@@ -1,7 +1,3 @@
-import { ipcRenderer } from "electron";
-
-import { IPCRequests } from "../../../shared/ipc";
-
 import { Engine, Scene, ArcRotateCamera, Vector3, Material, Mesh, Texture, HemisphericLight } from "babylonjs";
 import "babylonjs-materials";
 
@@ -21,8 +17,6 @@ export default class MeshViewerWindow extends React.Component {
      */
     public constructor(props: any) {
         super(props);
-
-        this._bindEvents();
     }
 
     /**
@@ -61,10 +55,11 @@ export default class MeshViewerWindow extends React.Component {
     }
 
     /**
-     * Binds the ipc events.
+     * Inits the plugin.
+     * @param data the initialization data containing the material definition etc.
      */
-    private _bindEvents(): void {
-        ipcRenderer.on(IPCRequests.SendWindowMessage, (_ , data) => data.id === "init" && this._parseMaterial(data.rootUrl, data.json, data.environmentTexture));
+    public init(data: { rootUrl: string, json: any, environmentTexture: any }): void {
+        this._parseMaterial(data.rootUrl, data.json, data.environmentTexture);
     }
 
     /**

src/renderer/editor/gui/augmentations/vector.ts

@@ -1,7 +1,3 @@
-import { ipcRenderer } from "electron";
-
-import { IPCRequests } from "../../../shared/ipc";
-
 import { Engine, Scene, ArcRotateCamera, Vector3, SceneLoader, PointLight, Mesh, Texture, PBRMaterial, CubeTexture, Color3 } from "babylonjs";
 import { GridMaterial } from "babylonjs-materials";
 import "babylonjs-loaders";
@@ -21,8 +17,6 @@ export default class MeshViewerWindow extends React.Component {
      */
     public constructor(props: any) {
         super(props);
-
-        this._bindEvents();
     }
 
     /**
@@ -55,10 +49,11 @@ export default class MeshViewerWindow extends React.Component {
     }
 
     /**
-     * Binds the ipc events.
+     * Inits the plugin.
+     * @param data the initialization data containing the mesh to load etc.
      */
-    private _bindEvents(): void {
-        ipcRenderer.on(IPCRequests.SendWindowMessage, (_ , data) => data.id === "init" && this._loadMesh(data.rootUrl, data.name));
+    public init(data: { rootUrl: string, name: string }): void {
+        this._loadMesh(data.rootUrl, data.name);
     }
 
     /**

src/renderer/windows/index.tsx

@@ -38,6 +38,14 @@ export default class NodeMaterialEditorWindow extends React.Component {
         return <div id="node-material-editor" style={{ width: "100%", height: "100%" }}></div>;
     }
 
+    /**
+     * Inits the plugin.
+     * @param data the initialization data containing the material definition etc.
+     */
+    public init(data: { json: any, lights: any[], editorData: any }): void {
+        this._setMaterial(data.json, data.editorData, data.lights);
+    }
+
     /**
      * Binds the ipc events.
      */