Merge pull request #9464 from sebavan/sharedUiControls

First try symlinked shared ui components

.gitignore

@@ -205,3 +205,7 @@ Playground/dist/
 Playground/temp/
 Sandbox/public/dist/
 ktx2Decoder/dist/
+
+# Symlinks
+inspector/src/sharedUiComponents/**/*
+nodeEditor/src/sharedUiComponents/**/*

.vscode/settings.json

@@ -58,5 +58,6 @@
     },
     "editor.tabSize": 4,
     "typescript.tsdk": "node_modules\\typescript\\lib",
-    "typescript.preferences.importModuleSpecifier": "relative"
+    "typescript.preferences.importModuleSpecifier": "relative",
+    "cmake.configureOnOpen": false
 }

Tools/Config/config.js

@@ -23,6 +23,10 @@ const tempTypingsFilePath = path.join(tempFolder, tempTypingsFileName);
 
 const tscPath = path.resolve(rootFolder, "node_modules/typescript/bin/tsc");
 
+const sharedUiComponentsFilesGlob = config.build.sharedUiComponentsSrc + "/**/*";
+const sharedUiComponentsSrcPath = path.join(rootFolder, config.build.sharedUiComponentsSrc);
+const es6SharedUiComponentsSrcPath = path.join(sourceES6Folder, config.build.sharedUiComponentsSrc);
+
 config.computed = {
     rootFolder,
     tempFolder,
@@ -39,7 +43,10 @@ config.computed = {
     tempTypingsFileName,
     tempTypingsAMDFilePath,
     tempTypingsFilePath,
-    tscPath
+    tscPath,
+    sharedUiComponentsFilesGlob,
+    sharedUiComponentsSrcPath,
+    es6SharedUiComponentsSrcPath,
 }
 
 config.additionalNpmPackages.forEach(package => {
@@ -90,7 +97,7 @@ allModules.map(function(module) {
     const packageJSONPath = settings.build.packageJSON ? 
         path.join(rootFolder, settings.build.packageJSON) : 
         path.join(distDirectory, 'package.json');
-
+    
     settings.computed = {
         mainDirectory,
         distDirectory,

Tools/Config/config.json

@@ -36,7 +36,8 @@
             "BABYLON"
         ],
         "typedocJSON": "../../.temp/babylon.typedoc.json",
-        "typedocValidationBaseline": "../../dist/preview release/typedocValidationBaseline.json"
+        "typedocValidationBaseline": "../../dist/preview release/typedocValidationBaseline.json",
+        "sharedUiComponentsSrc": "sharedUiComponents"
     },
     "modules": [
         "core",
@@ -47,8 +48,7 @@
         "serializers",
         "gui",
         "inspector",
-        "nodeEditor",
-        "uiControls"
+        "nodeEditor"
     ],
     "es6modules": [
         "core",
@@ -60,8 +60,7 @@
         "gui",
         "inspector",
         "viewer",
-        "nodeEditor",
-        "uiControls"
+        "nodeEditor"
     ],
     "apps": [
         "playground",
@@ -545,6 +544,7 @@
                 "re-resizable",
                 "glTF"
             ],
+            "sharedUiComponents": "src/sharedUiComponents/",
             "umd": {
                 "packageName": "babylonjs-inspector",
                 "webpackRoot": "INSPECTOR",
@@ -608,6 +608,7 @@
                 "glTF",
                 "file-saver"
             ],
+            "sharedUiComponents": "src/sharedUiComponents/",
             "umd": {
                 "packageName": "babylonjs-node-editor",
                 "webpackRoot": "NODEEDITOR",
@@ -643,55 +644,6 @@
             }
         }
     },
-    "uiControls": {
-        "libraries": [
-            {
-                "output": "babylon.uiControls.js",
-                "entry": "./legacy/legacy.ts"
-            }
-        ],
-        "build": {            
-            "ignoreInWorkerMode": true,
-            "ignoreInTestMode": true,
-            "mainFolder": "./uiControls/",
-            "uncheckedLintImports": [
-                "react",
-                "react-dom"
-            ],
-            "umd": {
-                "packageName": "babylonjs-ui-controls",
-                "webpackRoot": "UICONTROLS",
-                "processDeclaration": {
-                    "filename": "babylon.uiControls.module.d.ts",
-                    "moduleName": "UICONTROLS",
-                    "importsToRemove": [],
-                    "classMap": {
-                        "babylonjs": "BABYLON",
-                        "react": "React",
-                        "@babylonjs/core": "BABYLON",
-                        "@fortawesome": false,
-                        "react-contextmenu": false
-                    }
-                }
-            },
-            "es6": {
-                "webpackBuild": true,
-                "buildDependencies": [
-                    "Tools/**/*"
-                ],
-                "packageName": "@babylonjs/ui-controls",
-                "readme": "dist/preview release/uiControls/readme-es6.md",
-                "packagesFiles": [
-                    "babylon.uiControls.max.js",
-                    "babylon.uiControls.max.js.map",
-                    "babylon.uiControls.module.d.ts",
-                    "readme.md"
-                ],
-                "typings": "babylon.uiControls.module.d.ts",
-                "index": "babylon.uiControls.max.js"
-            }
-        }
-    },
     "ktx2Decoder": {
         "tempFileName": "babylon.ktx2Decoder.js",
         "distFile": "/dist/preview release/babylon.ktx2Decoder.js",

Tools/Gulp/gulpfile.js

@@ -21,6 +21,7 @@ require("./tasks/gulpTasks-remapPaths");
 require("./tasks/gulpTasks-npmPackages");
 require("./tasks/gulpTasks-dependencies");
 require("./tasks/gulpTasks-testsES6");
+require("./tasks/gulpTasks-symlink");
 
 /**
  * Temp cleanup after upgrade.
@@ -52,44 +53,44 @@ gulp.task("cleanup", function(cb) {
 /**
  * Full TsLint.
  */
-gulp.task("tsLint", gulp.series("typescript-libraries-tsLint"));
+gulp.task("tsLint", gulp.series("generate-symlinks", "typescript-libraries-tsLint"));
 
 /**
  * Full ImportLint.
  */
-gulp.task("importLint", gulp.series("typescript-libraries-importLint"));
+gulp.task("importLint", gulp.series("generate-symlinks", "typescript-libraries-importLint"));
 
 /**
  * Full Lint.
  */
-gulp.task("fullLint", gulp.series("tsLint", "importLint", "circularDependencies"));
+gulp.task("fullLint", gulp.series("generate-symlinks", "tsLint", "importLint", "circularDependencies"));
 
 /**
  * Validate compile the code and check the comments and style case convention through typedoc
  */
-gulp.task("typedoc-check", gulp.series("core", "gui", "loaders", "serializers", "typedoc-generate", "typedoc-validate"));
+gulp.task("typedoc-check", gulp.series("generate-symlinks", "core", "gui", "loaders", "serializers", "typedoc-generate", "typedoc-validate"));
 
 /**
  * Combine Webserver and Watch as long as vscode does not handle multi tasks.
  */
-gulp.task("run", gulp.series("cleanup", "watchCore", "watchLibraries", "watchApps", "webserver"));
+gulp.task("run", gulp.series("generate-symlinks", "cleanup", "watchCore", "watchLibraries", "watchApps", "webserver"));
 
 /**
  * Do it all (Build).
  */
-gulp.task("typescript-all", gulp.series("typescript-libraries", "typescript-es6", "typescript-apps", "netlify-cleanup"));
+gulp.task("typescript-all", gulp.series("generate-symlinks", "typescript-libraries", "typescript-es6", "typescript-apps", "netlify-cleanup"));
 
 /**
  * Do it all (tests).
  */
-gulp.task("tests-all", gulp.series("tests-unit", "tests-modules", "deployAndTests-es6Modules", "tests-validation-virtualscreen", "tests-validation-browserstack"));
+gulp.task("tests-all", gulp.series("generate-symlinks", "tests-unit", "tests-modules", "deployAndTests-es6Modules", "tests-validation-virtualscreen", "tests-validation-browserstack"));
 
 /**
  * Get Ready to test Npm Packages.
  */
-gulp.task("npmPackages", gulp.series("npmPackages-all"));
+gulp.task("npmPackages", gulp.series("generate-symlinks", "npmPackages-all"));
 
 /**
  * The default task, concat and min the main BJS files.
  */
-gulp.task("default", gulp.series("cleanup", "tsLint", "importLint", "circularDependencies", "typescript-all", "documentation", "typedoc-all", "tests-all"));
+gulp.task("default", gulp.series("generate-symlinks", "cleanup", "tsLint", "importLint", "circularDependencies", "typescript-all", "documentation", "typedoc-all", "tests-all"));

Tools/Gulp/tasks/gulpTasks-librariesES6.js

@@ -4,6 +4,7 @@ var path = require("path");
 var fs = require("fs-extra");
 var shelljs = require("shelljs");
 var concat = require('gulp-concat');
+var symlinkDir = require('symlink-dir');
 
 // Gulp Helpers
 var rmDir = require("../../NodeHelpers/rmDir");
@@ -78,6 +79,11 @@ var dep = function(settings) {
             const dependencyPath = path.join(config.computed.rootFolder, pathName);
             copyPaths.push(dependencyPath);
         }
+
+        if (settings.build.sharedUiComponents) {
+            const dependencyPath = path.join(config.computed.rootFolder, config.computed.sharedUiComponentsFilesGlob);
+            copyPaths.push(dependencyPath);
+        }
     }
 
     return gulp.src(copyPaths, { base: config.computed.rootFolder })
@@ -265,6 +271,23 @@ var copyWebpackDist = function(settings, module) {
 }
 
 /**
+ * Generate our required symlinked for the shared components.
+ */
+var generateSharedUiComponents = function(settings, done) {
+    if (!settings.build.sharedUiComponents) {
+        done();
+        return;
+    }
+
+    var es6SrcSharedUiComponents = config.computed.es6SharedUiComponentsSrcPath;
+    var es6SharedUiComponents = path.resolve(settings.computed.sourceES6Directory, settings.build.sharedUiComponents);
+
+    symlinkDir(es6SrcSharedUiComponents, es6SharedUiComponents).then(() => {
+        done();
+    });
+};
+
+/**
  * Dynamic es 6 module creation.
  */
 function buildES6Library(settings, module) {
@@ -278,6 +301,7 @@ function buildES6Library(settings, module) {
     }
     var copySource = function() { return source(settings); };
     var dependencies = function() { return dep(settings); };
+    var sharedUiComponents = function(cb) { return generateSharedUiComponents(settings, cb); };
     var adaptSourceImportPaths = function() { return modifySourcesImports(settings); };
     var adaptSourceConstants = function() { return modifySourcesConstants(settings); };
     var adaptTsConfigImportPaths = function(cb) { return modifyTsConfig(settings, cb); };
@@ -298,7 +322,7 @@ function buildES6Library(settings, module) {
         ];
     }
 
-    tasks.push(...cleanAndShaderTasks, copySource, dependencies, adaptSourceImportPaths, adaptSourceConstants, adaptTsConfigImportPaths, ...buildSteps);
+    tasks.push(...cleanAndShaderTasks, copySource, dependencies, sharedUiComponents, adaptSourceImportPaths, adaptSourceConstants, adaptTsConfigImportPaths, ...buildSteps);
 
     return gulp.series.apply(this, tasks);
 }

Tools/Gulp/tasks/gulpTasks-symlink.js

@@ -0,0 +1,52 @@
+// Import Dependencies.
+var gulp = require("gulp");
+var symlinkDir = require('symlink-dir')
+var path = require('path')
+
+// Import Build Config
+var config = require("../../Config/config.js");
+
+/**
+ * Generate our required symlinked for the shared components.
+ */
+var generateSharedUiComponents = function(settings, done) {
+    if (!settings.build.sharedUiComponents) {
+        done();
+        return;
+    }
+
+    var sharedUiComponents = config.computed.sharedUiComponentsSrcPath;
+    var umdSharedUiComponents = path.resolve(settings.computed.mainDirectory, settings.build.sharedUiComponents);
+
+    symlinkDir(sharedUiComponents, umdSharedUiComponents).then(() => {
+        done();
+    });
+};
+
+/**
+ * Dynamic build SymLinks.
+ */
+function buildSymLinks(settings) {
+    // Creates the required tasks.
+    var tasks = [];
+
+    var sharedUiComponents = function(cb) { return generateSharedUiComponents(settings, cb); };
+
+    tasks.push(sharedUiComponents);
+
+    return gulp.series.apply(this, tasks);
+}
+
+/**
+ * Dynamic symlinks creation.
+ */
+config.modules.map(function(module) {
+    const settings = config[module];
+    gulp.task(module + "-symlinks", buildSymLinks(settings));
+});
+
+/**
+ * Build all es 6 libs.
+ */
+gulp.task("generate-symlinks", gulp.series(config.modules.map((module) => module + "-symlinks")));
+

inspector/src/components/actionTabs/lines/colorPickerComponent.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Color4, Color3 } from 'babylonjs/Maths/math.color';
-import { ColorPicker } from '../../controls/colorPicker/colorPicker';
+import { ColorPicker } from '../../../sharedUiComponents/colorPicker/colorPicker';
 
 export interface IColorPickerComponentProps {
     value: Color4 | Color3;

inspector/src/components/actionTabs/tabs/propertyGrids/materials/textures/toolBar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IToolData, IToolType, IMetadata } from './textureEditorComponent';
 import { Color3, Color4 } from 'babylonjs/Maths/math.color';
-import { ColorPicker } from '../../../../../controls/colorPicker/colorPicker';
+import { ColorPicker } from '../../../../../../sharedUiComponents/colorPicker/colorPicker';
 
 export interface ITool extends IToolData {
     instance: IToolType;

inspector/src/components/controls/colorPicker/colorComponentEntry.tsx

@@ -1,53 +0,0 @@
-import * as React from "react";
-
-export interface IColorComponentEntryProps {
-    value: number,
-    label: string,
-    max?: number,
-    min?: number,
-    onChange: (value: number) => void
-}
-
-export class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
-    constructor(props: IColorComponentEntryProps) {
-        super(props);
-    }
-
-    updateValue(valueString: string) {
-        if (/[^0-9\.\-]/g.test(valueString)) {
-            return;
-        }
-
-        let valueAsNumber = parseInt(valueString);
-
-        if (isNaN(valueAsNumber)) {
-            return;
-        }
-        if(this.props.max != undefined && (valueAsNumber > this.props.max)) {
-            valueAsNumber = this.props.max;
-        }
-        if(this.props.min != undefined && (valueAsNumber < this.props.min)) {
-            valueAsNumber = this.props.min;
-        }
-
-        this.props.onChange(valueAsNumber);
-    }
-
-    public render() {
-        return (
-            <div className="color-picker-component">
-                <div className="color-picker-component-value">
-                    <input type="number" step={1} className="numeric-input"
-                        value={this.props.value} 
-                        onChange={(evt) => this.updateValue(evt.target.value)} />
-                </div>                        
-                <div className="color-picker-component-label">
-                    {
-                        this.props.label
-                    }
-                </div>
-            </div>
-        )
-    }
-
-}

inspector/src/components/controls/colorPicker/colorPicker.scss

@@ -1,181 +0,0 @@
-.color-picker-container {
-    width: 320px;
-    height: 300px;
-    background-color: white;
-    display: grid;    
-    grid-template-columns: 100%;
-    grid-template-rows: 50% 50px 60px 40px 1fr;
-    font-family: "acumin-pro-condensed";
-    font-weight: normal;   
-    font-size: 14px;
-    
-    .color-picker-saturation {
-        grid-row: 1;
-        grid-column: 1;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 100%;
-        position: relative;
-        cursor: pointer;
-    
-        .color-picker-saturation-white {
-            grid-row: 1;
-            grid-column: 1;
-
-            background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));
-            background: linear-gradient(to right, #fff, rgba(255,255,255,0));
-        }
-
-        .color-picker-saturation-black {
-            grid-row: 1;
-            grid-column: 1;
-
-            background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));
-            background: linear-gradient(to top, #000, rgba(0,0,0,0));
-        }
-
-        .color-picker-saturation-cursor {
-            pointer-events: none;
-            width: 4px;
-            height: 4px;
-            box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);
-            border-radius: 50%;
-            transform: translate(-2px, -2px);
-            position: absolute;
-        }
-    }
-
-    .color-picker-hue {
-        grid-row: 2;
-        grid-column: 1;
-        display: grid;
-        margin: 10px;
-        grid-template-columns: 24% 76%;
-        grid-template-rows: 100%;
-
-        .color-picker-hue-color {
-            grid-row: 1;
-            grid-column: 1;
-            align-self: center;
-            justify-self: center;
-            width: 30px;
-            height: 30px;
-            border-radius: 15px;
-            border: 1px solid black;
-        }
-
-        .color-picker-hue-slider {
-            grid-row: 1;
-            grid-column: 2;
-            align-self: center;
-            height: 16px;
-            position: relative;
-            cursor: pointer;
-            
-            background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
-                    33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
-            background: -webkit-linear-gradient(to right, #f00 0%, #ff0
-                17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);                
-
-            .color-picker-hue-cursor {
-                pointer-events: none;
-                width: 8px;
-                height: 18px;
-                transform: translate(-4px, -2px);
-                background-color: rgb(248, 248, 248);
-                box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
-                position: absolute;
-            }
-        }
-    }
-
-    .color-picker-component {
-        display: grid;
-        margin: 5px;
-        grid-template-columns: 100%;
-        grid-template-rows: 50% 50%;
-
-        .color-picker-component-value {
-            justify-self: center;
-            align-self: center;
-            grid-row: 1;
-            grid-column: 1;
-            margin-bottom: 4px;
-
-            input {
-                width: 50px;
-            }
-        }
-
-        .color-picker-component-label {
-            justify-self: center;
-            align-self: center;
-            grid-row: 2;
-            grid-column: 1;
-            color:black;
-        }
-    }
-
-    .color-picker-rgb {
-        grid-row: 3;
-        grid-column: 1;
-        display: grid;
-        margin: 10px;
-        grid-template-columns: 20% 6.66% 20% 6.66% 20% 6.66% 20%;
-        grid-template-rows: 100%;
-    }
-
-    .red {
-        grid-row: 1;
-        grid-column: 1;
-    }
-
-    .green {
-        grid-row: 1;
-        grid-column: 3;
-    }
-
-    .blue {
-        grid-row: 1;
-        grid-column: 5;
-    }
-
-    .alpha {
-        grid-row: 1;
-        grid-column: 7;
-
-        &.grayed {
-            opacity: 0.5;
-        }
-    }
-
-    .color-picker-hex {
-        grid-row: 4;
-        grid-column: 1;
-        display: grid;       
-        grid-template-columns: 20% 80%;
-        grid-template-rows: 100%;
-
-        .color-picker-hex-label {
-            justify-self: center;
-            align-self: center;
-            grid-row: 1;
-            grid-column: 1;
-            margin-left: 10px;
-            color:black;
-        }
-
-        .color-picker-hex-value {
-            justify-self: left;
-            align-self: center;
-            grid-row: 1;
-            grid-column: 2;
-            margin-left: 10px;
-            margin-right: 10px;
-
-            input {
-                width: 70px;
-            }
-        }
-    }
-}

inspector/src/components/controls/colorPicker/hexColor.tsx

@@ -1,45 +0,0 @@
-import * as React from "react";
-
-export interface IHexColorProps {
-    value: string,
-    expectedLength: number,
-    onChange: (value: string) => void
-}
-
-export class HexColor extends React.Component<IHexColorProps, {hex: string}> {
-    constructor(props: IHexColorProps) {
-        super(props);
-
-        this.state = {hex: this.props.value.replace("#", "")}
-    }
-
-    shouldComponentUpdate(nextProps: IHexColorProps, nextState: {hex: string}) {
-        if (nextProps.value!== this.props.value) {
-            nextState.hex = nextProps.value.replace("#", "");
-        }
-
-        return true;
-    }
-
-    updateHexValue(valueString: string) {
-        if (valueString != "" && /^[0-9A-Fa-f]+$/g.test(valueString) == false) {
-            return;
-        }
-    
-        this.setState({hex: valueString});
-
-        if(valueString.length !== this.props.expectedLength) {
-            return;
-        }
-       
-        this.props.onChange("#" + valueString);
-    }
-
-    public render() {
-        return (
-            <input type="string" className="hex-input" value={this.state.hex} 
-                onChange={evt => this.updateHexValue(evt.target.value)}/>   
-        )
-    }
-
-}

inspector/tsconfig.json

@@ -1,6 +1,7 @@
 {
     "extends": "../tsconfigRules",
     "compilerOptions": {
+        "preserveSymlinks": false,
         "jsx": "react",
         "baseUrl": "./src/",
         "rootDir": "./src/",

inspector/webpack.config.js

@@ -5,6 +5,7 @@ const babylonWebpackConfig = require('../Tools/WebpackPlugins/babylonWebpackConf
 var config = babylonWebpackConfig({
     module: "inspector",
     resolve: {
+        symlinks: false,
         extensions: [".js", '.ts', ".tsx"],
         alias: {
             "re-resizable$": __dirname + "/../node_modules/re-resizable/lib/index.es5.js"

nodeEditor/src/sharedComponents/colorPicker/colorPicker.tsx

@@ -1,220 +0,0 @@
-import * as React from "react";
-import { Color3, Color4 } from "babylonjs/Maths/math.color";
-import { ColorComponentEntry } from './colorComponentEntry';
-import { HexColor } from './hexColor';
-
-require("./colorPicker.scss");
-
-/**
- * Interface used to specify creation options for color picker
- */
-export interface IColorPickerProps {
-    color: Color3 | Color4,
-    debugMode?: boolean,
-    onColorChanged?: (color: Color3 | Color4) => void
-}
-
-/**
- * Interface used to specify creation options for color picker
- */
-export interface IColorPickerState {
-    color: Color3;
-    alpha: number;
-}
-
-/**
- * Class used to create a color picker
- */
-export class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
-    private _saturationRef: React.RefObject<HTMLDivElement>;
-    private _hueRef: React.RefObject<HTMLDivElement>;
-    private _isSaturationPointerDown: boolean;
-    private _isHuePointerDown: boolean;
-
-    constructor(props: IColorPickerProps) {
-        super(props);
-        if (this.props.color instanceof Color4) {
-            this.state = {color: new Color3(this.props.color.r, this.props.color.g, this.props.color.b), alpha: this.props.color.a};
-        } else {
-            this.state = {color : this.props.color.clone(), alpha: 1};
-        }
-        this._saturationRef = React.createRef();
-        this._hueRef = React.createRef();
-    }
-
-    onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>) {
-        this._evaluateSaturation(evt);
-        this._isSaturationPointerDown = true;
-
-        evt.currentTarget.setPointerCapture(evt.pointerId);
-    }
-    
-    onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>) {
-        this._isSaturationPointerDown = false;
-        evt.currentTarget.releasePointerCapture(evt.pointerId);
-    }
-
-    onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>) {
-        if (!this._isSaturationPointerDown) {
-            return;
-        }
-        this._evaluateSaturation(evt);
-    }
-
-    onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>) {
-        this._evaluateHue(evt);
-        this._isHuePointerDown = true;
-
-        evt.currentTarget.setPointerCapture(evt.pointerId);
-    }
-    
-    onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>) {
-        this._isHuePointerDown = false;
-        evt.currentTarget.releasePointerCapture(evt.pointerId);
-    }
-
-    onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>) {
-        if (!this._isHuePointerDown) {
-            return;
-        }
-        this._evaluateHue(evt);
-    }
-
-    private _evaluateSaturation(evt: React.PointerEvent<HTMLDivElement>) {
-        let left = evt.nativeEvent.offsetX;
-        let top = evt.nativeEvent.offsetY;
-      
-        const saturation =  Math.min(1, Math.max(0.0001, left / this._saturationRef.current!.clientWidth));
-        const value = Math.min(1, Math.max(0.0001, 1 - (top / this._saturationRef.current!.clientHeight)));
-
-        if (this.props.debugMode) {
-            console.log("Saturation: " + saturation);
-            console.log("Value: " + value);
-        }
-
-        let hsv = this.state.color.toHSV();
-        Color3.HSVtoRGBToRef(hsv.r, saturation, value, this.state.color);
-        this.setState({color: this.state.color});
-    }
-
-    private _evaluateHue(evt: React.PointerEvent<HTMLDivElement>) {
-        let left = evt.nativeEvent.offsetX;
-      
-        const hue = 360 * Math.min(0.9999, Math.max(0.0001, left / this._hueRef.current!.clientWidth));
-
-        if (this.props.debugMode) {
-            console.log("Hue: " + hue);
-        }
-
-        let hsv = this.state.color.toHSV();
-        Color3.HSVtoRGBToRef(hue, Math.max(hsv.g, 0.0001), hsv.b, this.state.color);
-        this.setState({color: this.state.color});
-    }
-
-    componentDidUpdate() {
-        this.raiseOnColorChanged();
-    }
-
-    raiseOnColorChanged() {
-        if (!this.props.onColorChanged) {
-            return;
-        }
-
-        if (this.props.color instanceof Color4) {
-            let newColor4 = Color4.FromColor3(this.state.color, this.state.alpha);
-
-            this.props.onColorChanged(newColor4);
-
-            return;
-        }
-
-        this.props.onColorChanged(this.state.color.clone());
-    } 
-
-    public render() {
-        let colorHex = this.state.color.toHexString();
-        let hsv = this.state.color.toHSV();
-        let colorRef = new Color3();
-        Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef)
-        let colorHexRef = colorRef.toHexString();
-        let hasAlpha = this.props.color instanceof Color4;
-
-        return (
-            <div className="color-picker-container">
-                <div className="color-picker-saturation"  
-                    onPointerMove={e => this.onSaturationPointerMove(e)}               
-                    onPointerDown={e => this.onSaturationPointerDown(e)}
-                    onPointerUp={e => this.onSaturationPointerUp(e)}
-                    ref={this._saturationRef}
-                    style={{
-                        background: colorHexRef
-                    }}>
-                    <div className="color-picker-saturation-white">
-                    </div>
-                    <div className="color-picker-saturation-black">
-                    </div>
-                    <div className="color-picker-saturation-cursor" style={{
-                        top: `${ -(hsv.b * 100) + 100 }%`,
-                        left: `${ hsv.g * 100 }%`,
-                    }}>
-                    </div>
-                </div>
-                <div className="color-picker-hue">
-                    <div className="color-picker-hue-color" style={{
-                        background: colorHex
-                    }}>
-                    </div>
-                    <div className="color-picker-hue-slider"                    
-                        ref={this._hueRef}
-                        onPointerMove={e => this.onHuePointerMove(e)}               
-                        onPointerDown={e => this.onHuePointerDown(e)}
-                        onPointerUp={e => this.onHuePointerUp(e)}
-                    >                    
-                        <div className="color-picker-hue-cursor" style={{
-                            left: `${ (hsv.r / 360.0) * 100 }%`,
-                            border: `1px solid ` + colorHexRef
-                        }}>                    
-                        </div>
-                    </div>
-                </div>
-                <div className="color-picker-rgb">
-                    <div className="red">
-                        <ColorComponentEntry label="R" min={0} max={255} value={this.state.color.r * 255 | 0} onChange={value => {
-                            this.state.color.r = value / 255.0;
-                            this.forceUpdate();
-                        }}/>
-                    </div>   
-                    <div className="green">
-                        <ColorComponentEntry label="G" min={0} max={255}  value={this.state.color.g * 255 | 0} onChange={value => {
-                            this.state.color.g = value / 255.0;
-                            this.forceUpdate();
-                        }}/>
-                    </div>  
-                    <div className="blue">
-                        <ColorComponentEntry label="B" min={0} max={255}  value={this.state.color.b * 255 | 0} onChange={value => {
-                            this.state.color.b = value / 255.0;
-                            this.forceUpdate();
-                        }}/>
-                    </div>        
-                    <div className={"alpha" + (hasAlpha ? "" : " grayed")}>
-                        <ColorComponentEntry label="A" min={0} max={255} value={this.state.alpha * 255 | 0} onChange={value => {
-                                this.setState({alpha: value / 255.0});
-                                this.forceUpdate();
-                        }}/>
-                    </div>   
-                </div>  
-                <div className="color-picker-hex">
-                    <div className="color-picker-hex-label">
-                        Hex
-                    </div>
-                    <div className="color-picker-hex-value">     
-                        <HexColor expectedLength={6} value={colorHex} onChange={value => {
-                            this.setState({color: Color3.FromHexString(value)});
-                        }}/>            
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-

nodeEditor/src/sharedComponents/colorPickerComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Color4, Color3 } from 'babylonjs/Maths/math.color';
 import { GlobalState } from '../globalState';
-import { ColorPicker } from './colorPicker/colorPicker';
+import { ColorPicker } from '../sharedUiComponents/colorPicker/colorPicker';
 
 export interface IColorPickerComponentProps {
     value: Color4 | Color3;

nodeEditor/tsconfig.json

@@ -1,6 +1,7 @@
 {
     "extends": "../tsconfigRules",
     "compilerOptions": {
+        "preserveSymlinks": false,
         "jsx": "react",
         "baseUrl": "./src/",
         "rootDir": "./src/",

nodeEditor/webpack.config.js

@@ -5,6 +5,7 @@ const babylonWebpackConfig = require('../Tools/WebpackPlugins/babylonWebpackConf
 var config = babylonWebpackConfig({
     module: "nodeEditor",
     resolve: {
+        symlinks: false,
         extensions: [".js", '.ts', ".tsx"],
     },
     moduleRules: [

package.json

@@ -98,6 +98,7 @@
         "split.js": "^1.5.11",
         "style-loader": "^1.2.1",
         "svg-url-loader": "^6.0.0",
+        "symlink-dir": "^4.1.0",
         "through2": "~3.0.1",
         "ts-loader": "^7.0.5",
         "tslib": ">=1.10.0",

inspector/src/components/controls/colorPicker/colorPicker.tsx

@@ -48,7 +48,7 @@ export class ColorPicker extends React.Component<IColorPickerProps, IColorPicker
 
         evt.currentTarget.setPointerCapture(evt.pointerId);
     }
-    
+
     onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>) {
         this._isSaturationPointerDown = false;
         evt.currentTarget.releasePointerCapture(evt.pointerId);

uiControls/README-ES6.md

@@ -1 +0,0 @@
-UI controls

uiControls/README.md

@@ -1,3 +0,0 @@
-# Babylon.js UI controls
-
-A project to host all common controls used by our editors / tools

uiControls/src/colorPicker.tsx

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-/**
- * Interface used to specify creation options for color picker
- */
-export interface IColorPickerProps {
-}
-
-/**
- * Class used to create a color picker
- */
-export class ColorPicker extends React.Component<IColorPickerProps> {
-
-    constructor(props: IColorPickerProps) {
-        super(props);
-    }
-
-    public render() {
-        return (
-            <div />
-        );
-    }
-}
-

uiControls/src/index.ts

@@ -1 +0,0 @@
-export * from "./colorPicker";

uiControls/src/legacy/legacy.ts

@@ -1,9 +0,0 @@
-import * as UIControls 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.UIControls = UIControls;
-}
-
-export * from "../index";

uiControls/tsconfig.json

@@ -1,12 +0,0 @@
-{
-    "extends": "../tsconfigRules",
-    "compilerOptions": {
-        "jsx": "react",
-        "baseUrl": "./src/",
-        "rootDir": "./src/",
-        "paths": {
-        }
-    },
-    "exclude": [
-    ]
-}

uiControls/webpack.config.js

@@ -1,45 +0,0 @@
-const path = require("path");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const babylonWebpackConfig = require('../Tools/WebpackPlugins/babylonWebpackConfig');
-
-var config = babylonWebpackConfig({
-    module: "uiControls",
-    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']
-        },
-    {
-        test: /\.svg$/,
-        use: [
-          {
-            loader: 'svg-url-loader',
-            options: {
-              limit: 10000,
-            },
-          },
-        ],
-      }],
-    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;