Starting blocks for nodeEditor

Tools/Config/config.json

@@ -45,7 +45,8 @@
         "loaders",
         "serializers",
         "gui",
-        "inspector"
+        "inspector",
+        "nodeEditor"
     ],
     "es6modules": [
         "core",
@@ -56,7 +57,8 @@
         "serializers",
         "gui",
         "inspector",
-        "viewer"
+        "viewer",
+        "nodeEditor"
     ],
     "lintModules": [
         "core",
@@ -117,7 +119,9 @@
                             "namespace": "BABYLON.Debug"
                         }
                     ],
-                    "hiddenConsts": ["Debug"]
+                    "hiddenConsts": [
+                        "Debug"
+                    ]
                 },
                 "requiredFiles": [
                     "readme.md"
@@ -578,6 +582,57 @@
             }
         }
     },
+    "nodeEditor": {
+        "libraries": [
+            {
+                "output": "babylon.nodeEditor.bundle.js",
+                "entry": "./legacy/legacy.ts"
+            }
+        ],
+        "build": {
+            "ignoreInTestMode": true,
+            "mainFolder": "./nodeEditor/",
+            "uncheckedLintImports": [
+                "react",
+                "react-dom",
+                "re-resizable",
+                "glTF"
+            ],
+            "umd": {
+                "packageName": "babylonjs-nodeEditor",
+                "webpackRoot": "NODEEDITOR",
+                "processDeclaration": {
+                    "filename": "babylon.nodeEditor.module.d.ts",
+                    "moduleName": "NODEEDITOR",
+                    "importsToRemove": [],
+                    "classMap": {
+                        "babylonjs": "BABYLON",
+                        "react": "React",
+                        "@babylonjs/core": "BABYLON",
+                        "@fortawesome": false,
+                        "react-contextmenu": false
+                    }
+                }
+            },
+            "es6": {
+                "webpackBuild": true,
+                "buildDependencies": [
+                    "node_modules/re-resizable/lib/index.es5.js",
+                    "Tools/**/*"
+                ],
+                "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.module.d.ts",
+                    "readme.md"
+                ],
+                "typings": "babylon.nodeEditor.module.d.ts",
+                "index": "babylon.nodeEditor.bundle.max.js"
+            }
+        }
+    },
     "viewer": {
         "libraries": [
             {

bower.json

@@ -1,39 +1,38 @@
 {
-  "name": "babylonjs",
-  "description": "Babylon.js is a complete JavaScript framework for building 3D games with HTML 5 and WebGL",
-  "main": "./dist/babylon.2.5.js",
-  "homepage": "https://www.babylonjs.com",
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/BabylonJS/Babylon.js.git"
-  },
-  "authors": [
-    "David Catuhe",
-    "David Rousset"
-  ],
-  "keywords": [
-    "3D",
-    "WebGL",
-    "WebAudio",
-    "Shaders",
-    "Realtime"
-  ],
-  "license": "Apache-2.0",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "Babylon",
-    "Exporters",
-    "Loaders",
-    "Previous releases",
-    "/Tools",
-    "gulpfile.js",
-    "package.json",
-    "babylon.2.1*.*",
-    "*.md",
-    "*.yml",
-    "cannon.js",
-    "Oimo.js",
-    "poly2tri.js"
-  ]
-}
+    "name": "babylonjs",
+    "description": "Babylon.js is a complete JavaScript framework for building 3D games with HTML 5 and WebGL",
+    "main": "./dist/babylon.js",
+    "homepage": "https://www.babylonjs.com",
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/BabylonJS/Babylon.js.git"
+    },
+    "authors": [
+        "David Catuhe"
+    ],
+    "keywords": [
+        "3D",
+        "WebGL",
+        "WebAudio",
+        "Shaders",
+        "Realtime"
+    ],
+    "license": "Apache-2.0",
+    "ignore": [
+        "**/.*",
+        "node_modules",
+        "Babylon",
+        "Exporters",
+        "Loaders",
+        "Previous releases",
+        "/Tools",
+        "gulpfile.js",
+        "package.json",
+        "babylon.2.1*.*",
+        "*.md",
+        "*.yml",
+        "cannon.js",
+        "Oimo.js",
+        "poly2tri.js"
+    ]
+}

inspector/test/index.js

@@ -1,91 +0,0 @@
-/// <reference path="../../dist/preview release/babylon.d.ts"/>
-
-var Test = (function() {
-    function Test(canvasId) {
-        var _this = this;
-        var canvas = document.getElementById(canvasId);
-        this.engine = new BABYLON.Engine(canvas, true);
-        this.scene = null;
-        window.addEventListener("resize", function() {
-            _this.engine.resize();
-        });
-        this._run();
-    }
-    Test.prototype._run = function() {
-        var _this = this;
-        this._initScene();
-        this.scene.executeWhenReady(function() {
-            _this.engine.runRenderLoop(function() {
-                _this.scene.render();
-            });
-        });
-    };
-    Test.prototype._initScene = function() {
-        var scene = new BABYLON.Scene(this.engine);
-        var canvas = scene.getEngine().getRenderingCanvas();
-
-        var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 2, -2), scene);
-
-        var camera2 = new BABYLON.ArcRotateCamera("Camera2", 0, 0, 5, new BABYLON.Vector3(0, 0, 0), scene);
-
-        var camera3 = new BABYLON.ArcRotateCamera("Camera3", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
-
-        var camera4 = new BABYLON.ArcRotateCamera("Camera4", 0, 0, 15, new BABYLON.Vector3(0, 0, 0), scene);
-
-        var camera5 = new BABYLON.ArcRotateCamera("Camera5", 0, 0, 20, new BABYLON.Vector3(0, 0, 0), scene);
-
-        var camera6 = new BABYLON.ArcRotateCamera("Camera6", 0, 0, 25, new BABYLON.Vector3(0, 0, 0), scene);
-
-        scene.activeCamera = camera2;
-
-        camera2.attachControl(canvas);
-
-        var sceneRoot = new BABYLON.TransformNode("abstractmesh");
-
-        var tn = new BABYLON.TransformNode("transform node");
-
-        let DDSTexture = new BABYLON.CubeTexture("test/environment.dds", scene);
-        let DDSTexture2 = new BABYLON.Texture("test/test_1.dds", scene);
-
-        // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
-        var ground = BABYLON.Mesh.CreateGround("node_damagedHelmet_-6514", 6, 6, 2, scene);
-        ground.parent = tn;
-
-        let num = 5;
-        let angStep = 6.283185307 / num;
-        let rad = 2;
-        let p = sceneRoot;
-        for (let i = 0; i < num; i++) {
-            // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
-            let sphere = BABYLON.Mesh.CreateSphere('sphere' + i, 16, 2, scene);
-
-            // Move the sphere upward 1/2 its height        
-            sphere.position.y = 0.2;
-            sphere.position.x = Math.sin(i * angStep) * rad;
-            sphere.position.z = Math.cos(i * angStep) * rad;
-            sphere.parent = p;
-            p = sphere;
-        }
-
-        let t = 0;
-        scene.registerBeforeRender(() => {
-            ground.rotation.y += 0.01;
-            ground.position.y = Math.cos(t += 0.01);
-        });
-
-        scene.createDefaultCameraOrLight(true);
-        scene.activeCamera.attachControl(canvas);
-        
-        scene.debugLayer.show({embedMode: true});
-        //scene.debugLayer.show();
-        scene.debugLayer.onPropertyChangedObservable.add((result) => {
-            console.log(result.object);
-            console.log("Property : " + result.property);
-            console.log("New value : " + result.value);
-            console.log("Old value : " + result.initialValue);
-        });
-
-        this.scene = scene;
-    };
-    return Test;
-}());

nodeEditor/README.md

@@ -0,0 +1,18 @@
+# Babylon.js Node Editor
+
+An extension to easily create or update any NodeMaterial.
+
+## Usage
+### Online method
+Call the method `Create` of the `BABYLON.NoteMaterial` class: 
+```
+BABYLON.NoteMaterial.Create();
+```
+This method will retrieve dynamically the library `nodeEditor.js`, download it and add
+it to the html page.
+
+### Offline method
+If you don't have access to internet, the node editor should be imported manually in your HTML page :
+```
+<script src="babylon.nodeEditor.js" />
+``` 

nodeEditor/src/index.ts

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

nodeEditor/src/legacy/legacy.ts

@@ -0,0 +1,9 @@
+import { NodeEditor } from "../index";
+
+var globalObject = (typeof global !== 'undefined') ? global : ((typeof window !== 'undefined') ? window : undefined);
+if (typeof globalObject !== "undefined") {
+    (<any>globalObject).BABYLON = (<any>globalObject).BABYLON || {};
+    (<any>globalObject).BABYLON.NodeEditor = NodeEditor;
+}
+
+export * from "../index";

nodeEditor/src/nodeEditor.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+export class NodeEditor {
+    public static Create() {
+
+    }
+}
+

nodeEditor/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "extends": "../tsconfigRules",
+    "compilerOptions": {
+        "jsx": "react",
+        "baseUrl": "./src/",
+        "rootDir": "./src/",
+        "paths": {
+            "babylonjs/*": [
+                "../../dist/preview release/babylon.module.d.ts"
+            ]
+        }
+    }
+}

nodeEditor/webpack.config.js

@@ -0,0 +1,34 @@
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const babylonWebpackConfig = require('../Tools/WebpackPlugins/babylonWebpackConfig');
+
+var config = babylonWebpackConfig({
+    module: "nodeEditor",
+    resolve: {
+        extensions: [".js", '.ts', ".tsx"],
+    },
+    moduleRules: [
+        {
+            test: /\.scss$/,
+            use: [
+                // fallback to style-loader in development
+                process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
+                "css-loader",
+                "sass-loader"
+            ]
+        },
+        {
+            test: /\.css$/,
+            use: ['style-loader', 'css-loader']
+        }],
+    plugins: [
+        new MiniCssExtractPlugin({
+            // Options similar to the same options in webpackOptions.output
+            // both options are optional
+            filename: "[name].css",
+            chunkFilename: "[id].css"
+        })
+    ]
+});
+
+module.exports = config;

package.json

@@ -105,4 +105,4 @@
         "webpack-stream": "5.0.0",
         "xhr2": "^0.1.4"
     }
-}
+}