Merge pull request #9061 from BabylonJS/master

Nightly

dist/preview release/babylon.max.js

@@ -39851,7 +39851,7 @@ var ThinEngine = /** @class */ (function () {
          */
         // Not mixed with Version for tooling purpose.
         get: function () {
-            return "babylonjs@4.2.0-beta.6";
+            return "babylonjs@4.2.0-beta.9";
         },
         enumerable: false,
         configurable: true
@@ -39861,7 +39861,7 @@ var ThinEngine = /** @class */ (function () {
          * Returns the current version of the framework
          */
         get: function () {
-            return "4.2.0-beta.6";
+            return "4.2.0-beta.9";
         },
         enumerable: false,
         configurable: true
@@ -188271,6 +188271,9 @@ _scene__WEBPACK_IMPORTED_MODULE_1__["Scene"].prototype._internalMultiPickSprites
     return pickingInfos;
 };
 _scene__WEBPACK_IMPORTED_MODULE_1__["Scene"].prototype.pickSprite = function (x, y, predicate, fastCheck, camera) {
+    if (!this._tempSpritePickingRay) {
+        return null;
+    }
     this.createPickingRayInCameraSpaceToRef(x, y, this._tempSpritePickingRay, camera);
     return this._internalPickSprites(this._tempSpritePickingRay, predicate, fastCheck, camera);
 };

dist/preview release/glTF2Interface/package.json

@@ -1,7 +1,7 @@
 {
     "name": "babylonjs-gltf2interface",
     "description": "A typescript declaration of babylon's gltf2 inteface.",
-    "version": "4.2.0-beta.6",
+    "version": "4.2.0-beta.9",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/gui/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-gui",
     "description": "The Babylon.js GUI library is an extension you can use to generate interactive user interface. It is build on top of the DynamicTexture.",
-    "version": "4.2.0-beta.6",
+    "version": "4.2.0-beta.9",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.6"
+        "babylonjs": "4.2.0-beta.9"
     },
     "engines": {
         "node": "*"

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "4.2.0-beta.6",
+    "version": "4.2.0-beta.9",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -29,12 +29,12 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.6",
-        "babylonjs-gui": "4.2.0-beta.6",
-        "babylonjs-loaders": "4.2.0-beta.6",
-        "babylonjs-materials": "4.2.0-beta.6",
-        "babylonjs-serializers": "4.2.0-beta.6",
-        "babylonjs-gltf2interface": "4.2.0-beta.6"
+        "babylonjs": "4.2.0-beta.9",
+        "babylonjs-gui": "4.2.0-beta.9",
+        "babylonjs-loaders": "4.2.0-beta.9",
+        "babylonjs-materials": "4.2.0-beta.9",
+        "babylonjs-serializers": "4.2.0-beta.9",
+        "babylonjs-gltf2interface": "4.2.0-beta.9"
     },
     "peerDependencies": {
         "@types/react": ">=16.7.3",

dist/preview release/loaders/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-loaders",
     "description": "The Babylon.js file loaders library is an extension you can use to load different 3D file types into a Babylon scene.",
-    "version": "4.2.0-beta.6",
+    "version": "4.2.0-beta.9",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "4.2.0-beta.6",
-        "babylonjs": "4.2.0-beta.6"
+        "babylonjs-gltf2interface": "4.2.0-beta.9",
+        "babylonjs": "4.2.0-beta.9"
     },
     "engines": {
         "node": "*"

dist/preview release/materialsLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-materials",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.2.0-beta.6",
+    "version": "4.2.0-beta.9",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.6"
+        "babylonjs": "4.2.0-beta.9"
     },
     "engines": {
         "node": "*"

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

@@ -936,6 +936,7 @@ declare module NODEEDITOR {
         onDelete: () => void;
         onUpdateStep: () => void;
         onCheckForReOrder: () => void;
+        onCopy?: () => void;
     }
     export class GradientStepComponent extends React.Component<IGradientStepComponentProps, {
         gradient: number;
@@ -965,6 +966,7 @@ declare module NODEEDITOR {
         componentWillUnmount(): void;
         forceRebuild(): void;
         deleteStep(step: BABYLON.GradientBlockColorStep): void;
+        copyStep(step: BABYLON.GradientBlockColorStep): void;
         addNewStep(): void;
         checkForReOrder(): void;
         render(): JSX.Element;

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

@@ -1151,6 +1151,7 @@ declare module "babylonjs-node-editor/diagram/properties/gradientStepComponent"
         onDelete: () => void;
         onUpdateStep: () => void;
         onCheckForReOrder: () => void;
+        onCopy?: () => void;
     }
     export class GradientStepComponent extends React.Component<IGradientStepComponentProps, {
         gradient: number;
@@ -1184,6 +1185,7 @@ declare module "babylonjs-node-editor/diagram/properties/gradientNodePropertyCom
         componentWillUnmount(): void;
         forceRebuild(): void;
         deleteStep(step: GradientBlockColorStep): void;
+        copyStep(step: GradientBlockColorStep): void;
         addNewStep(): void;
         checkForReOrder(): void;
         render(): JSX.Element;
@@ -2852,6 +2854,7 @@ declare module NODEEDITOR {
         onDelete: () => void;
         onUpdateStep: () => void;
         onCheckForReOrder: () => void;
+        onCopy?: () => void;
     }
     export class GradientStepComponent extends React.Component<IGradientStepComponentProps, {
         gradient: number;
@@ -2881,6 +2884,7 @@ declare module NODEEDITOR {
         componentWillUnmount(): void;
         forceRebuild(): void;
         deleteStep(step: BABYLON.GradientBlockColorStep): void;
+        copyStep(step: BABYLON.GradientBlockColorStep): void;
         addNewStep(): void;
         checkForReOrder(): void;
         render(): JSX.Element;

dist/preview release/nodeEditor/package.json

@@ -4,14 +4,14 @@
     },
     "name": "babylonjs-node-editor",
     "description": "The Babylon.js node material editor.",
-    "version": "4.2.0-beta.6",
+    "version": "4.2.0-beta.9",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.6"
+        "babylonjs": "4.2.0-beta.9"
     },
     "files": [
         "babylon.nodeEditor.max.js.map",

dist/preview release/package.json

@@ -7,7 +7,7 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "4.2.0-beta.6",
+    "version": "4.2.0-beta.9",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/postProcessesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-post-process",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.2.0-beta.6",
+    "version": "4.2.0-beta.9",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.6"
+        "babylonjs": "4.2.0-beta.9"
     },
     "engines": {
         "node": "*"

dist/preview release/proceduralTexturesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-procedural-textures",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.2.0-beta.6",
+    "version": "4.2.0-beta.9",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.6"
+        "babylonjs": "4.2.0-beta.9"
     },
     "engines": {
         "node": "*"

dist/preview release/serializers/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-serializers",
     "description": "The Babylon.js serializers library is an extension you can use to serialize Babylon scenes.",
-    "version": "4.2.0-beta.6",
+    "version": "4.2.0-beta.9",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.6",
-        "babylonjs-gltf2interface": "4.2.0-beta.6"
+        "babylonjs": "4.2.0-beta.9",
+        "babylonjs-gltf2interface": "4.2.0-beta.9"
     },
     "engines": {
         "node": "*"

nodeEditor/src/components/propertyTab/propertyTab.scss

@@ -237,7 +237,7 @@
     .gradient-step {
         display: grid;
         grid-template-rows: 100%;
-        grid-template-columns: 30px 30px 40px auto 20px 5px;
+        grid-template-columns: 30px 30px 40px auto 20px 30px;
         padding-top: 5px;
         padding-left: 5px;
         padding-bottom: 5px;
@@ -270,17 +270,42 @@
             margin-right: 5px;
 
             input {
-                width: unset;
+                width: 90%;
             }
         }
 
-        .gradient-delete {            
+        .gradient-copy {            
             grid-row: 1;
             grid-column: 5;
             display: grid;
             align-content: center;
             justify-content: center;
+ 
+            .img {
+                height: 20px;
+                width: 20px;
+            }
+            .img:hover {
+                cursor: pointer;
+            }
+
         }
+        .gradient-delete {            
+            grid-row: 1;
+            grid-column: 6;
+            display: grid;
+            align-content: center;
+            justify-content: center;;
+            .img {
+                height: 20px;
+                width: 20px;
+            }
+            .img:hover {
+                cursor: pointer;
+            }
+
+        }
+
     }
 
     .floatLine {

nodeEditor/src/diagram/properties/gradientNodePropertyComponent.tsx

@@ -53,6 +53,16 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
         }
     }
 
+    copyStep(step: GradientBlockColorStep) {
+        let gradientBlock = this.props.block as GradientBlock;
+
+        let newStep = new GradientBlockColorStep(1.0, step.color);
+        gradientBlock.colorSteps.push(newStep);
+        gradientBlock.colorStepsUpdated();
+        this.forceRebuild();
+        this.forceUpdate();
+    }
+
     addNewStep() {
         let gradientBlock = this.props.block as GradientBlock;
 
@@ -130,7 +140,7 @@ export class GradientPropertyTabComponent extends React.Component<IPropertyCompo
                                 <GradientStepComponent globalState={this.props.globalState}
                                 onCheckForReOrder={() => this.checkForReOrder()}
                                 onUpdateStep={() => this.forceRebuild()}
-                                key={"step-" + i} lineIndex={i} step={c} onDelete={() => this.deleteStep(c)}/>
+                                key={"step-" + i} lineIndex={i} step={c} onCopy={() => this.copyStep(c)} onDelete={() => this.deleteStep(c)}/>
                             );
                         })
                     }

nodeEditor/src/diagram/properties/gradientStepComponent.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { GlobalState } from '../../globalState';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { Color3 } from 'babylonjs/Maths/math.color';
 import { GradientBlockColorStep } from 'babylonjs/Materials/Node/Blocks/gradientBlock';
 import { ColorPickerLineComponent } from '../../sharedComponents/colorPickerComponent';
 
+const deleteButton = require('../../../imgs/delete.svg');
+const copyIcon: string = require('../../sharedComponents/copy.svg');
+
 interface IGradientStepComponentProps {
     globalState: GlobalState;
     step: GradientBlockColorStep;
@@ -13,6 +14,7 @@ interface IGradientStepComponentProps {
     onDelete: () => void;
     onUpdateStep: () => void;
     onCheckForReOrder: () => void;
+    onCopy?: () => void;
 }
 
 export class GradientStepComponent extends React.Component<IGradientStepComponentProps, {gradient: number}> {
@@ -44,7 +46,6 @@ export class GradientStepComponent extends React.Component<IGradientStepComponen
 
     render() {
         let step = this.props.step;
-
         return (
             <div className="gradient-step">
                 <div className="step">
@@ -65,8 +66,11 @@ export class GradientStepComponent extends React.Component<IGradientStepComponen
                         onPointerUp={evt => this.onPointerUp()}
                         onChange={evt => this.updateStep(parseFloat(evt.target.value))} />
                 </div>
-                <div className="gradient-delete" onClick={() => this.props.onDelete()}>
-                    <FontAwesomeIcon icon={faTrash} />
+                <div className="gradient-copy" onClick={() => {if(this.props.onCopy) this.props.onCopy()}} title="Copy Step">
+                    <img className="img" src={copyIcon} />
+                </div>
+                <div className="gradient-delete" onClick={() => this.props.onDelete()} title={"Delete Step"}>
+                    <img className="img" src={deleteButton}/>
                 </div>
             </div>
         )

package.json

@@ -7,7 +7,7 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "4.2.0-beta.6",
+    "version": "4.2.0-beta.9",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -113,4 +113,4 @@
         "xhr2": "^0.2.0",
         "xmlbuilder": "15.1.1"
     }
-}
+}

src/Engines/thinEngine.ts

@@ -157,14 +157,14 @@ export class ThinEngine {
      */
     // Not mixed with Version for tooling purpose.
     public static get NpmPackage(): string {
-        return "babylonjs@4.2.0-beta.6";
+        return "babylonjs@4.2.0-beta.9";
     }
 
     /**
      * Returns the current version of the framework
      */
     public static get Version(): string {
-        return "4.2.0-beta.6";
+        return "4.2.0-beta.9";
     }
 
     /**

src/Sprites/spriteSceneComponent.ts

@@ -171,9 +171,13 @@ Scene.prototype._internalMultiPickSprites = function(ray: Ray, predicate?: (spri
 };
 
 Scene.prototype.pickSprite = function(x: number, y: number, predicate?: (sprite: Sprite) => boolean, fastCheck?: boolean, camera?: Camera): Nullable<PickingInfo> {
-    this.createPickingRayInCameraSpaceToRef(x, y, this._tempSpritePickingRay!, camera);
+    if (!this._tempSpritePickingRay) {
+        return null;
+    }
+
+    this.createPickingRayInCameraSpaceToRef(x, y, this._tempSpritePickingRay, camera);
 
-    return this._internalPickSprites(this._tempSpritePickingRay!, predicate, fastCheck, camera);
+    return this._internalPickSprites(this._tempSpritePickingRay, predicate, fastCheck, camera);
 };
 
 Scene.prototype.pickSpriteWithRay = function(ray: Ray, predicate?: (sprite: Sprite) => boolean, fastCheck?: boolean, camera?: Camera): Nullable<PickingInfo> {