sandbox

.gitignore

@@ -199,4 +199,5 @@ gui/dist/
 /Viewer/tests/tsserver.cmd
 # Local Netlify folder
 .netlify
-Playground/public/dist/
+Playground/public/dist/
+Sandbox/public/dist/

Tools/Config/config.json

@@ -62,7 +62,8 @@
         "nodeEditor"
     ],
     "apps": [
-        "playground"
+        "playground",
+        "sandbox"
     ],
     "lintModules": [
         "core",
@@ -639,66 +640,22 @@
             }
         }
     },
-    "sandbox": {
-        "libraries": [
-            {
-                "output": "babylon.sandbox.js",
-                "entry": "./legacy/legacy.ts"
-            }
-        ],
-        "build": {            
+    "playground": {
+        "distFile": "/Playground/public/dist/babylon.playground.bundle.js",
+        "build": {
             "ignoreInWorkerMode": true,
             "ignoreInTestMode": true,
-            "mainFolder": "./sandbox/",
-            "uncheckedLintImports": [
-                "react",
-                "react-dom"
-            ],
-            "umd": {
-                "packageName": "babylonjs-sandbox",
-                "webpackRoot": "SANDBOX",
-                "processDeclaration": {
-                    "filename": "babylon.sandbox.module.d.ts",
-                    "moduleName": "SANDBOX",
-                    "importsToRemove": [],
-                    "classMap": {
-                        "babylonjs": "BABYLON",
-                        "react": "React",
-                        "@babylonjs/core": "BABYLON",
-                        "@fortawesome": false
-                    }
-                }
-            },
-            "es6": {
-                "webpackBuild": true,
-                "buildDependencies": [
-                    "Tools/**/*"
-                ],
-                "packageName": "@babylonjs/sandbox",
-                "readme": "dist/preview release/sandbox/readme-es6.md",
-                "packagesFiles": [
-                    "babylon.sandbox.max.js",
-                    "babylon.sandbox.max.js.map",
-                    "babylon.sandbox.module.d.ts",
-                    "readme.md"
-                ],
-                "typings": "babylon.sandbox.module.d.ts",
-                "index": "babylon.sandbox.max.js"
-            }
+            "distOutputDirectory": "../../Playground/public/dist/",
+            "mainFolder": "./Playground/"
         }
     },
-    "playground": {
-        "distFile": "/Playground/public/dist/babylon.playground.bundle.js",
+    "sandbox": {
+        "distFile": "/sandbox/public/dist/babylon.sandbox.bundle.js",
         "build": {
             "ignoreInWorkerMode": true,
             "ignoreInTestMode": true,
-            "distOutputDirectory": "../../playground/public/dist/",
-            "mainFolder": "./Playground/",
-            "uncheckedLintImports": [
-                "react",
-                "react-dom",
-                "monaco"
-            ]
+            "distOutputDirectory": "../../sandbox/public/dist/",
+            "mainFolder": "./sandbox/"
         }
     },
     "viewer": {

Tools/Gulp/tasks/gulpTasks-apps.js

@@ -10,7 +10,7 @@ var config = require("../../Config/config.js");
 /**
  * Build a single app
  */
-var buildApp = function(libraries, settings, isMin) {
+var buildApp = function(settings, isMin) {
     // Convert Module to Namespace for globals
     var outputDirectory = settings.computed.distDirectory;
 
@@ -50,7 +50,7 @@ function buildAppLibraries(settings) {
     // Creates the required tasks.
     var tasks = [];
 
-    var buildMin = function() { return buildApp(settings.libraries, settings, true) };
+    var buildMin = function() { return buildApp(settings, true) };
 
     tasks.push(buildMin);
 

Tools/Gulp/tasks/gulpTasks-watchApps.js

@@ -14,8 +14,10 @@ gulp.task("watchApps", function startWatch() {
     var tasks = [];
 
     config.apps.map(function(module) {
+        // Convert Module to Namespace for globals
         var settings = config[module].computed;
-        if (!config[module].isCore && settings) {
+
+        if (settings) {
             var wpConfig = require(settings.webpackConfigPath);
 
             // watch on.
@@ -35,7 +37,7 @@ gulp.task("watchApps", function startWatch() {
                 return `../../../${path.relative(config.computed.rootFolder, info.resourcePath).replace(/\\/g, "/")}`;
             };
 
-            var outputDirectory = settings.localDevUMDDirectory;
+            var outputDirectory = settings.distDirectory;
             tasks.push(
                 webpackStream(wpConfig, webpack)
                     .pipe(gulp.dest(outputDirectory))

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

@@ -1,158 +0,0 @@
-/// <reference types="react" />
-declare module SANDBOX {
-    export class GlobalState {
-        currentScene: BABYLON.Scene;
-        onSceneLoaded: BABYLON.Observable<{
-            scene: BABYLON.Scene;
-            filename: string;
-        }>;
-        onError: BABYLON.Observable<{
-            scene?: BABYLON.Scene | undefined;
-            message?: string | undefined;
-        }>;
-        onEnvironmentChanged: BABYLON.Observable<string>;
-        onRequestClickInterceptor: BABYLON.Observable<void>;
-        onClickInterceptorClicked: BABYLON.Observable<void>;
-        filesInput: BABYLON.FilesInput;
-        isDebugLayerEnabled: boolean;
-        showDebugLayer(): void;
-        hideDebugLayer(): void;
-    }
-}
-declare module SANDBOX {
-    export class LocalStorageHelper {
-        static ReadLocalStorageValue(key: string, defaultValue: number): number;
-    }
-}
-declare module SANDBOX {
-    export class EnvironmentTools {
-        static SkyboxPath: string;
-        static Skyboxes: string[];
-        static SkyboxesNames: string[];
-        static LoadSkyboxPathTexture(scene: BABYLON.Scene): BABYLON.HDRCubeTexture | BABYLON.CubeTexture;
-        static HookWithEnvironmentChange(globalState: GlobalState): void;
-    }
-}
-declare module SANDBOX {
-    interface IRenderingZoneProps {
-        globalState: GlobalState;
-        assetUrl?: string;
-        cameraPosition?: BABYLON.Vector3;
-        expanded: boolean;
-    }
-    export class RenderingZone extends React.Component<IRenderingZoneProps> {
-        private _currentPluginName;
-        private _engine;
-        private _scene;
-        private _canvas;
-        constructor(props: IRenderingZoneProps);
-        initEngine(): void;
-        prepareCamera(): void;
-        handleErrors(): void;
-        prepareLighting(): void;
-        onSceneLoaded(filename: string): void;
-        loadAssetFromUrl(): void;
-        loadAsset(): void;
-        componentDidMount(): void;
-        shouldComponentUpdate(nextProps: IRenderingZoneProps): boolean;
-        render(): JSX.Element;
-    }
-}
-declare module SANDBOX {
-    interface IFooterButtonProps {
-        globalState: GlobalState;
-        enabled: boolean;
-        onClick: () => void;
-        icon: any;
-        label: string;
-    }
-    export class FooterButton extends React.Component<IFooterButtonProps> {
-        render(): JSX.Element | null;
-    }
-}
-declare module SANDBOX {
-    interface IDropUpButtonProps {
-        globalState: GlobalState;
-        enabled: boolean;
-        icon?: any;
-        label: string;
-        options: string[];
-        selectedOption?: string;
-        onOptionPicked: (option: string) => void;
-    }
-    export class DropUpButton extends React.Component<IDropUpButtonProps, {
-        isOpen: boolean;
-    }> {
-        private _onClickInterceptorClickedObserver;
-        constructor(props: IDropUpButtonProps);
-        componentWillUnmount(): void;
-        switchDropUp(): void;
-        clickOption(option: string): void;
-        render(): JSX.Element | null;
-    }
-}
-declare module SANDBOX {
-    interface IFooterFileButtonProps {
-        globalState: GlobalState;
-        enabled: boolean;
-        icon: any;
-        label: string;
-        onFilesPicked: (evt: Event, files: FileList | null) => void;
-    }
-    export class FooterFileButton extends React.Component<IFooterFileButtonProps> {
-        onFilePicked(evt: React.ChangeEvent<HTMLInputElement>): void;
-        render(): JSX.Element | null;
-    }
-}
-declare module SANDBOX {
-    interface IAnimationBarProps {
-        globalState: GlobalState;
-        enabled: boolean;
-    }
-    export class AnimationBar extends React.Component<IAnimationBarProps, {
-        groupIndex: number;
-    }> {
-        private _currentScene;
-        private _sliderSyncObserver;
-        private _currentGroup;
-        private _sliderRef;
-        private _currentPlayingState;
-        constructor(props: IAnimationBarProps);
-        getCurrentPosition(): string;
-        registerBeforeRender(newScene: BABYLON.Scene): void;
-        pause(): void;
-        play(): void;
-        sliderInput(evt: React.FormEvent<HTMLInputElement>): void;
-        render(): JSX.Element | null;
-    }
-}
-declare module SANDBOX {
-    interface IFooterProps {
-        globalState: GlobalState;
-    }
-    export class Footer extends React.Component<IFooterProps> {
-        constructor(props: IFooterProps);
-        showInspector(): void;
-        render(): JSX.Element;
-    }
-}
-declare module SANDBOX {
-    interface ISandboxProps {
-    }
-    export class Sandbox extends React.Component<ISandboxProps, {
-        isFooterVisible: boolean;
-        errorMessage: string;
-    }> {
-        private _globalState;
-        private _assetUrl?;
-        private _cameraPosition?;
-        private _logoRef;
-        private _dropTextRef;
-        private _clickInterceptorRef;
-        constructor(props: ISandboxProps);
-        checkUrl(): void;
-        componentDidUpdate(): void;
-        render(): JSX.Element;
-        static Show(hostElement: HTMLElement): void;
-    }
-}

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

@@ -1,347 +0,0 @@
-/// <reference types="react" />
-declare module "babylonjs-sandbox/globalState" {
-    import { Observable } from 'babylonjs/Misc/observable';
-    import { Scene } from 'babylonjs/scene';
-    import { FilesInput } from 'babylonjs/Misc/filesInput';
-    export class GlobalState {
-        currentScene: Scene;
-        onSceneLoaded: Observable<{
-            scene: Scene;
-            filename: string;
-        }>;
-        onError: Observable<{
-            scene?: Scene | undefined;
-            message?: string | undefined;
-        }>;
-        onEnvironmentChanged: Observable<string>;
-        onRequestClickInterceptor: Observable<void>;
-        onClickInterceptorClicked: Observable<void>;
-        filesInput: FilesInput;
-        isDebugLayerEnabled: boolean;
-        showDebugLayer(): void;
-        hideDebugLayer(): void;
-    }
-}
-declare module "babylonjs-sandbox/tools/localStorageHelper" {
-    export class LocalStorageHelper {
-        static ReadLocalStorageValue(key: string, defaultValue: number): number;
-    }
-}
-declare module "babylonjs-sandbox/tools/environmentTools" {
-    import { HDRCubeTexture } from 'babylonjs/Materials/Textures/hdrCubeTexture';
-    import { CubeTexture } from 'babylonjs/Materials/Textures/cubeTexture';
-    import { Scene } from 'babylonjs/scene';
-    import { GlobalState } from "babylonjs-sandbox/globalState";
-    export class EnvironmentTools {
-        static SkyboxPath: string;
-        static Skyboxes: string[];
-        static SkyboxesNames: string[];
-        static LoadSkyboxPathTexture(scene: Scene): HDRCubeTexture | CubeTexture;
-        static HookWithEnvironmentChange(globalState: GlobalState): void;
-    }
-}
-declare module "babylonjs-sandbox/components/renderingZone" {
-    import * as React from "react";
-    import { GlobalState } from "babylonjs-sandbox/globalState";
-    import { Vector3 } from 'babylonjs/Maths/math.vector';
-    interface IRenderingZoneProps {
-        globalState: GlobalState;
-        assetUrl?: string;
-        cameraPosition?: Vector3;
-        expanded: boolean;
-    }
-    export class RenderingZone extends React.Component<IRenderingZoneProps> {
-        private _currentPluginName;
-        private _engine;
-        private _scene;
-        private _canvas;
-        constructor(props: IRenderingZoneProps);
-        initEngine(): void;
-        prepareCamera(): void;
-        handleErrors(): void;
-        prepareLighting(): void;
-        onSceneLoaded(filename: string): void;
-        loadAssetFromUrl(): void;
-        loadAsset(): void;
-        componentDidMount(): void;
-        shouldComponentUpdate(nextProps: IRenderingZoneProps): boolean;
-        render(): JSX.Element;
-    }
-}
-declare module "babylonjs-sandbox/components/footerButton" {
-    import * as React from "react";
-    import { GlobalState } from "babylonjs-sandbox/globalState";
-    interface IFooterButtonProps {
-        globalState: GlobalState;
-        enabled: boolean;
-        onClick: () => void;
-        icon: any;
-        label: string;
-    }
-    export class FooterButton extends React.Component<IFooterButtonProps> {
-        render(): JSX.Element | null;
-    }
-}
-declare module "babylonjs-sandbox/components/dropUpButton" {
-    import * as React from "react";
-    import { GlobalState } from "babylonjs-sandbox/globalState";
-    interface IDropUpButtonProps {
-        globalState: GlobalState;
-        enabled: boolean;
-        icon?: any;
-        label: string;
-        options: string[];
-        selectedOption?: string;
-        onOptionPicked: (option: string) => void;
-    }
-    export class DropUpButton extends React.Component<IDropUpButtonProps, {
-        isOpen: boolean;
-    }> {
-        private _onClickInterceptorClickedObserver;
-        constructor(props: IDropUpButtonProps);
-        componentWillUnmount(): void;
-        switchDropUp(): void;
-        clickOption(option: string): void;
-        render(): JSX.Element | null;
-    }
-}
-declare module "babylonjs-sandbox/components/footerFileButton" {
-    import * as React from "react";
-    import { GlobalState } from "babylonjs-sandbox/globalState";
-    interface IFooterFileButtonProps {
-        globalState: GlobalState;
-        enabled: boolean;
-        icon: any;
-        label: string;
-        onFilesPicked: (evt: Event, files: FileList | null) => void;
-    }
-    export class FooterFileButton extends React.Component<IFooterFileButtonProps> {
-        onFilePicked(evt: React.ChangeEvent<HTMLInputElement>): void;
-        render(): JSX.Element | null;
-    }
-}
-declare module "babylonjs-sandbox/components/animationBar" {
-    import * as React from "react";
-    import { GlobalState } from "babylonjs-sandbox/globalState";
-    import { Scene } from 'babylonjs/scene';
-    interface IAnimationBarProps {
-        globalState: GlobalState;
-        enabled: boolean;
-    }
-    export class AnimationBar extends React.Component<IAnimationBarProps, {
-        groupIndex: number;
-    }> {
-        private _currentScene;
-        private _sliderSyncObserver;
-        private _currentGroup;
-        private _sliderRef;
-        private _currentPlayingState;
-        constructor(props: IAnimationBarProps);
-        getCurrentPosition(): string;
-        registerBeforeRender(newScene: Scene): void;
-        pause(): void;
-        play(): void;
-        sliderInput(evt: React.FormEvent<HTMLInputElement>): void;
-        render(): JSX.Element | null;
-    }
-}
-declare module "babylonjs-sandbox/components/footer" {
-    import * as React from "react";
-    import { GlobalState } from "babylonjs-sandbox/globalState";
-    interface IFooterProps {
-        globalState: GlobalState;
-    }
-    export class Footer extends React.Component<IFooterProps> {
-        constructor(props: IFooterProps);
-        showInspector(): void;
-        render(): JSX.Element;
-    }
-}
-declare module "babylonjs-sandbox/sandbox" {
-    import * as React from "react";
-    interface ISandboxProps {
-    }
-    export class Sandbox extends React.Component<ISandboxProps, {
-        isFooterVisible: boolean;
-        errorMessage: string;
-    }> {
-        private _globalState;
-        private _assetUrl?;
-        private _cameraPosition?;
-        private _logoRef;
-        private _dropTextRef;
-        private _clickInterceptorRef;
-        constructor(props: ISandboxProps);
-        checkUrl(): void;
-        componentDidUpdate(): void;
-        render(): JSX.Element;
-        static Show(hostElement: HTMLElement): void;
-    }
-}
-declare module "babylonjs-sandbox/index" {
-    export * from "babylonjs-sandbox/sandbox";
-}
-declare module "babylonjs-sandbox/legacy/legacy" {
-    export * from "babylonjs-sandbox/index";
-}
-declare module "babylonjs-sandbox" {
-    export * from "babylonjs-sandbox/legacy/legacy";
-}
-/// <reference types="react" />
-declare module SANDBOX {
-    export class GlobalState {
-        currentScene: BABYLON.Scene;
-        onSceneLoaded: BABYLON.Observable<{
-            scene: BABYLON.Scene;
-            filename: string;
-        }>;
-        onError: BABYLON.Observable<{
-            scene?: BABYLON.Scene | undefined;
-            message?: string | undefined;
-        }>;
-        onEnvironmentChanged: BABYLON.Observable<string>;
-        onRequestClickInterceptor: BABYLON.Observable<void>;
-        onClickInterceptorClicked: BABYLON.Observable<void>;
-        filesInput: BABYLON.FilesInput;
-        isDebugLayerEnabled: boolean;
-        showDebugLayer(): void;
-        hideDebugLayer(): void;
-    }
-}
-declare module SANDBOX {
-    export class LocalStorageHelper {
-        static ReadLocalStorageValue(key: string, defaultValue: number): number;
-    }
-}
-declare module SANDBOX {
-    export class EnvironmentTools {
-        static SkyboxPath: string;
-        static Skyboxes: string[];
-        static SkyboxesNames: string[];
-        static LoadSkyboxPathTexture(scene: BABYLON.Scene): BABYLON.HDRCubeTexture | BABYLON.CubeTexture;
-        static HookWithEnvironmentChange(globalState: GlobalState): void;
-    }
-}
-declare module SANDBOX {
-    interface IRenderingZoneProps {
-        globalState: GlobalState;
-        assetUrl?: string;
-        cameraPosition?: BABYLON.Vector3;
-        expanded: boolean;
-    }
-    export class RenderingZone extends React.Component<IRenderingZoneProps> {
-        private _currentPluginName;
-        private _engine;
-        private _scene;
-        private _canvas;
-        constructor(props: IRenderingZoneProps);
-        initEngine(): void;
-        prepareCamera(): void;
-        handleErrors(): void;
-        prepareLighting(): void;
-        onSceneLoaded(filename: string): void;
-        loadAssetFromUrl(): void;
-        loadAsset(): void;
-        componentDidMount(): void;
-        shouldComponentUpdate(nextProps: IRenderingZoneProps): boolean;
-        render(): JSX.Element;
-    }
-}
-declare module SANDBOX {
-    interface IFooterButtonProps {
-        globalState: GlobalState;
-        enabled: boolean;
-        onClick: () => void;
-        icon: any;
-        label: string;
-    }
-    export class FooterButton extends React.Component<IFooterButtonProps> {
-        render(): JSX.Element | null;
-    }
-}
-declare module SANDBOX {
-    interface IDropUpButtonProps {
-        globalState: GlobalState;
-        enabled: boolean;
-        icon?: any;
-        label: string;
-        options: string[];
-        selectedOption?: string;
-        onOptionPicked: (option: string) => void;
-    }
-    export class DropUpButton extends React.Component<IDropUpButtonProps, {
-        isOpen: boolean;
-    }> {
-        private _onClickInterceptorClickedObserver;
-        constructor(props: IDropUpButtonProps);
-        componentWillUnmount(): void;
-        switchDropUp(): void;
-        clickOption(option: string): void;
-        render(): JSX.Element | null;
-    }
-}
-declare module SANDBOX {
-    interface IFooterFileButtonProps {
-        globalState: GlobalState;
-        enabled: boolean;
-        icon: any;
-        label: string;
-        onFilesPicked: (evt: Event, files: FileList | null) => void;
-    }
-    export class FooterFileButton extends React.Component<IFooterFileButtonProps> {
-        onFilePicked(evt: React.ChangeEvent<HTMLInputElement>): void;
-        render(): JSX.Element | null;
-    }
-}
-declare module SANDBOX {
-    interface IAnimationBarProps {
-        globalState: GlobalState;
-        enabled: boolean;
-    }
-    export class AnimationBar extends React.Component<IAnimationBarProps, {
-        groupIndex: number;
-    }> {
-        private _currentScene;
-        private _sliderSyncObserver;
-        private _currentGroup;
-        private _sliderRef;
-        private _currentPlayingState;
-        constructor(props: IAnimationBarProps);
-        getCurrentPosition(): string;
-        registerBeforeRender(newScene: BABYLON.Scene): void;
-        pause(): void;
-        play(): void;
-        sliderInput(evt: React.FormEvent<HTMLInputElement>): void;
-        render(): JSX.Element | null;
-    }
-}
-declare module SANDBOX {
-    interface IFooterProps {
-        globalState: GlobalState;
-    }
-    export class Footer extends React.Component<IFooterProps> {
-        constructor(props: IFooterProps);
-        showInspector(): void;
-        render(): JSX.Element;
-    }
-}
-declare module SANDBOX {
-    interface ISandboxProps {
-    }
-    export class Sandbox extends React.Component<ISandboxProps, {
-        isFooterVisible: boolean;
-        errorMessage: string;
-    }> {
-        private _globalState;
-        private _assetUrl?;
-        private _cameraPosition?;
-        private _logoRef;
-        private _dropTextRef;
-        private _clickInterceptorRef;
-        constructor(props: ISandboxProps);
-        checkUrl(): void;
-        componentDidUpdate(): void;
-        render(): JSX.Element;
-        static Show(hostElement: HTMLElement): void;
-    }
-}

dist/preview release/sandbox/package.json

@@ -1,27 +0,0 @@
-{
-    "author": {
-        "name": "David CATUHE"
-    },
-    "name": "babylonjs-sandbox",
-    "description": "The Babylon.js sandbox",
-    "version": "4.2.0-alpha.23",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/BabylonJS/Babylon.js.git"
-    },
-    "license": "Apache-2.0",
-    "dependencies": {
-        "babylonjs": "4.2.0-alpha.23"
-    },
-    "files": [
-        "babylon.sandbox.max.js.map",
-        "babylon.sandbox.max.js",
-        "babylon.sandbox.js",
-        "babylon.sandbox.module.d.ts",
-        "readme.md",
-        "package.json"
-    ],
-    "engines": {
-        "node": "*"
-    }
-}

dist/preview release/sandbox/readme-es6.md

@@ -1,3 +0,0 @@
-# Babylon.js Sandbox
-
-An extension to easily create a full page viewer (ala sandbox.babylonjs.com)

dist/preview release/sandbox/readme.md

@@ -1,16 +0,0 @@
-# Babylon.js Sandbox
-
-An extension to easily create a full page viewer (ala sandbox.babylonjs.com)
-
-## Usage
-### Online method
-Call the method `Show` of the `BABYLON.Sandbox` class: 
-```
-BABYLON.Sandbox.Show({hostElement: document.getElementById("host")});
-```
-
-### Offline method
-If you don't have access to internet, the node editor should be imported manually in your HTML page :
-```
-<script src="babylon.sandbox.js" />
-``` 

sandbox/webpack.config.js

@@ -4,6 +4,18 @@ const babylonWebpackConfig = require('../Tools/WebpackPlugins/babylonWebpackConf
 
 var config = babylonWebpackConfig({
     module: "sandbox",
+    entry: "./legacy/legacy.ts",
+    output: {
+        globalObject: '(typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this)',
+        filename: "babylon.sandbox.bundle.js",
+        path: path.resolve(__dirname, "public/dist"),
+        publicPath: "./dist/",
+        libraryTarget: 'umd',
+        library: {
+           root: ["SANDBOX"],
+        },
+        umdNamedDefine: true
+    },
     resolve: {
         extensions: [".js", '.ts', ".tsx"],
     },