nodeEditor initial build

Tools/Config/config.json

@@ -585,7 +585,7 @@
     "nodeEditor": {
         "libraries": [
             {
-                "output": "babylon.nodeEditor.bundle.js",
+                "output": "babylon.nodeEditor.js",
                 "entry": "./legacy/legacy.ts"
             }
         ],
@@ -623,13 +623,13 @@
                 "packageName": "@babylonjs/nodeEditor",
                 "readme": "dist/preview release/nodeEditor/readme-es6.md",
                 "packagesFiles": [
-                    "babylon.nodeEditor.bundle.max.js",
-                    "babylon.nodeEditor.bundle.max.js.map",
+                    "babylon.nodeEditor.max.js",
+                    "babylon.nodeEditor.max.js.map",
                     "babylon.nodeEditor.module.d.ts",
                     "readme.md"
                 ],
                 "typings": "babylon.nodeEditor.module.d.ts",
-                "index": "babylon.nodeEditor.bundle.max.js"
+                "index": "babylon.nodeEditor.max.js"
             }
         }
     },

dist/preview release/nodeEditor/babylon.nodeEditor.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+declare module NODEEDITOR {
+    export class GlobalState {
+    }
+}
+declare module NODEEDITOR {
+    interface IGraphEditorProps {
+        globalState: GlobalState;
+    }
+    export class GraphEditor extends React.Component<IGraphEditorProps> {
+        constructor(props: IGraphEditorProps);
+        render(): JSX.Element;
+    }
+}
+declare module NODEEDITOR {
+    /**
+     * Interface used to specify creation options for the node editor
+     */
+    export interface INodeEditorOptions {
+        /**
+         * Defines the DOM element that will host the node editor
+         */
+        hostElement: HTMLDivElement;
+    }
+    /**
+     * Class used to create a node editor
+     */
+    export class NodeEditor {
+        /**
+         * Show the node editor
+         * @param options defines the options to use to configure the node editor
+         */
+        static Show(options: INodeEditorOptions): void;
+    }
+}

dist/preview release/nodeEditor/babylon.nodeEditor.module.d.ts

@@ -0,0 +1,81 @@
+/// <reference types="react" />
+declare module "babylonjs-nodeEditor/globalState" {
+    export class GlobalState {
+    }
+}
+declare module "babylonjs-nodeEditor/components/graphEditor" {
+    import * as React from "react";
+    import { GlobalState } from "babylonjs-nodeEditor/globalState";
+    interface IGraphEditorProps {
+        globalState: GlobalState;
+    }
+    export class GraphEditor extends React.Component<IGraphEditorProps> {
+        constructor(props: IGraphEditorProps);
+        render(): JSX.Element;
+    }
+}
+declare module "babylonjs-nodeEditor/nodeEditor" {
+    /**
+     * Interface used to specify creation options for the node editor
+     */
+    export interface INodeEditorOptions {
+        /**
+         * Defines the DOM element that will host the node editor
+         */
+        hostElement: HTMLDivElement;
+    }
+    /**
+     * Class used to create a node editor
+     */
+    export class NodeEditor {
+        /**
+         * Show the node editor
+         * @param options defines the options to use to configure the node editor
+         */
+        static Show(options: INodeEditorOptions): void;
+    }
+}
+declare module "babylonjs-nodeEditor/index" {
+    export * from "babylonjs-nodeEditor/nodeEditor";
+}
+declare module "babylonjs-nodeEditor/legacy/legacy" {
+    export * from "babylonjs-nodeEditor/index";
+}
+declare module "babylonjs-nodeEditor" {
+    export * from "babylonjs-nodeEditor/legacy/legacy";
+}
+/// <reference types="react" />
+declare module NODEEDITOR {
+    export class GlobalState {
+    }
+}
+declare module NODEEDITOR {
+    interface IGraphEditorProps {
+        globalState: GlobalState;
+    }
+    export class GraphEditor extends React.Component<IGraphEditorProps> {
+        constructor(props: IGraphEditorProps);
+        render(): JSX.Element;
+    }
+}
+declare module NODEEDITOR {
+    /**
+     * Interface used to specify creation options for the node editor
+     */
+    export interface INodeEditorOptions {
+        /**
+         * Defines the DOM element that will host the node editor
+         */
+        hostElement: HTMLDivElement;
+    }
+    /**
+     * Class used to create a node editor
+     */
+    export class NodeEditor {
+        /**
+         * Show the node editor
+         * @param options defines the options to use to configure the node editor
+         */
+        static Show(options: INodeEditorOptions): void;
+    }
+}

inspector/README.md

@@ -9,13 +9,13 @@ Call the method `show` of the scene debugLayer:
 ```
 scene.debugLayer.show();
 ```
-This method will retrieve dynamically the library `inspector.js`, download it and add
+This method will retrieve dynamically the library `babylon.inspector.bundle.js`, download it and add
 it to the html page.
 
 ### Offline method
 If you don't have access to internet, the inspector should be imported manually in your HTML page :
 ```
-<script src="babylon.inspector.js" />
+<script src="babylon.inspector.bundle.js" />
 ``` 
 Then, call the method `show` of the scene debugLayer: 
 ```

inspector/src/index.ts

@@ -1,3 +1 @@
-require("./index.css");
-
 export * from "./inspector";

nodeEditor/README.md

@@ -4,9 +4,9 @@ An extension to easily create or update any NodeMaterial.
 
 ## Usage
 ### Online method
-Call the method `Create` of the `BABYLON.NoteMaterial` class: 
+Call the method `Show` of the `BABYLON.NoteMaterial` class: 
 ```
-BABYLON.NoteMaterial.Create();
+BABYLON.NoteMaterial.Show({hostElement: document.getElementById("host")});
 ```
 This method will retrieve dynamically the library `nodeEditor.js`, download it and add
 it to the html page.

nodeEditor/src/components/graphEditor.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { GlobalState } from '../globalState';
+
+interface IGraphEditorProps {
+    globalState: GlobalState;
+}
+
+export class GraphEditor extends React.Component<IGraphEditorProps> {
+    constructor(props: IGraphEditorProps) {
+        super(props);
+    }
+
+    render() {
+
+        return (
+            <div>
+            </div>
+        );
+    }
+}

nodeEditor/src/globalState.ts

@@ -0,0 +1,3 @@
+
+export class GlobalState {
+}

nodeEditor/src/index.ts

@@ -1,3 +1 @@
-require("./index.css");
-
 export * from "./nodeEditor";

nodeEditor/src/nodeEditor.ts

@@ -1,9 +1,34 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
+import { GlobalState } from './globalState';
+import { GraphEditor } from './components/graphEditor';
 
+/**
+ * Interface used to specify creation options for the node editor
+ */
+export interface INodeEditorOptions {
+    /**
+     * Defines the DOM element that will host the node editor
+     */
+    hostElement: HTMLDivElement
+}
+
+/**
+ * Class used to create a node editor
+ */
 export class NodeEditor {
-    public static Create() {
+    /**
+     * Show the node editor
+     * @param options defines the options to use to configure the node editor
+     */
+    public static Show(options: INodeEditorOptions) {
+        let globalState = new GlobalState();
+
+        const graphEditor = React.createElement(GraphEditor, {
+            globalState: globalState
+        });
 
+        ReactDOM.render(graphEditor, options.hostElement);
     }
 }