Merge pull request #7682 from BabylonJS/master

Nightly

Playground/js/frame.js

@@ -153,11 +153,26 @@ run = function () {
                 xmlHttp.onreadystatechange = function () {
                     if (xmlHttp.readyState === 4) {
                         if (xmlHttp.status === 200) {
-                            var snippetCode = JSON.parse(JSON.parse(xmlHttp.responseText).jsonPayload).code;
+                            var snippet = JSON.parse(xmlHttp.responseText);
+                            var snippetCode = JSON.parse(snippet.jsonPayload).code;
                             compileAndRun(snippetCode);
 
                             var refresh = document.getElementById("refresh");
 
+                            if (snippet.name != null && snippet.name != "") {
+                                this.currentSnippetTitle = snippet.name;
+                            } else this.currentSnippetTitle = null;
+    
+                            if (snippet.description != null && snippet.description != "") {
+                                this.currentSnippetDescription = snippet.description;
+                            } else this.currentSnippetDescription = null;
+    
+                            if (snippet.tags != null && snippet.tags != "") {
+                                this.currentSnippetTags = snippet.tags;
+                            } else this.currentSnippetTags = null;
+
+                            updateMetadata.call(this);
+
                             if (refresh) {
                                 refresh.addEventListener("click", function () {
                                     compileAndRun(snippetCode);
@@ -185,6 +200,31 @@ run = function () {
         }
     };
 
+    var updateMetadata = function() {
+        var selection;
+
+        if (this.currentSnippetTitle) {
+            selection = document.querySelector('title');
+            if (selection) {
+                selection.innerText = (this.currentSnippetTitle + " | Babylon.js Playground");
+            }
+        }
+
+        if (this.currentSnippetDescription) {
+            selection = document.querySelector('meta[name="description"]');
+            if (selection) {
+                selection.setAttribute("content", this.currentSnippetDescription + " - Babylon.js Playground");
+            }
+        }
+
+        if (this.currentSnippetTags) {
+            selection = document.querySelector('meta[name="keywords"]');
+            if (selection) {
+                selection.setAttribute("content", "babylon.js, game engine, webgl, 3d," + this.currentSnippetTags);
+            }
+        }
+    }
+
     checkHash();
 
 }

Playground/js/index.js

@@ -20,4 +20,29 @@
         this.main.initialize();
     }
 }
-index = new Index();
+index = new Index();
+
+// defeinsive, in case there was an error loading babylon.js
+// This is done so that search bots will still be able to render the page, even when babylon had a problem while downloading
+if (!window.BABYLON) {
+    window.BABYLON = {
+        Vector3: function () {},
+        Vector2: function () {},
+        Mesh: function () {},
+        Matrix: function () {},
+        GLTF2: {
+            GLTFLoader: {
+                RegisterExtension: function () {}
+            }
+        },
+        SceneLoader: {
+            OnPluginActivatedObservable: {
+                add: function () {}
+            }
+        }
+    }
+    BABYLON.Vector3.Up = function () {};
+    BABYLON.Vector3.Zero = function () {};
+    BABYLON.Vector2.Zero = function () {};
+    BABYLON.Matrix.Zero = function () {};
+}

Playground/js/main.js

@@ -33,7 +33,7 @@ compileAndRun = function (parent, fpsLabel) {
         parent.menuPG.hideWaitDiv();
         globalParent = parent;
 
-        if (!BABYLON.Engine.isSupported()) {
+        if (typeof BABYLON === 'undefined' || !BABYLON.Engine || !BABYLON.Engine.isSupported()) {
             parent.utils.showError("Your browser does not support WebGL. Please, try to update it, or install a compatible one.", null);
             return;
         }
@@ -44,7 +44,7 @@ compileAndRun = function (parent, fpsLabel) {
             readOnly: false
         });
 
-        if (BABYLON.Engine.LastCreatedScene && BABYLON.Engine.LastCreatedScene.debugLayer && BABYLON.Engine.LastCreatedScene.debugLayer.isVisible()) {
+        if (typeof BABYLON !== 'undefined' && BABYLON.Engine && BABYLON.Engine.LastCreatedScene && BABYLON.Engine.LastCreatedScene.debugLayer && BABYLON.Engine.LastCreatedScene.debugLayer.isVisible()) {
             showInspector = true;
         }
 
@@ -220,7 +220,9 @@ class Main {
     constructor(parent) {
         this.parent = parent;
 
-        BABYLON.Engine.ShadersRepository = "/src/Shaders/";
+        if (typeof BABYLON !== 'undefined') {
+            BABYLON.Engine.ShadersRepository = "/src/Shaders/";
+        }
         this.snippetV3Url = "https://snippet.babylonjs.com"
         this.currentSnippetToken;
         this.currentSnippetTitle = null;
@@ -283,7 +285,9 @@ class Main {
         var handleGetZip = () => this.parent.zipTool.getZip(engine);
 
         // Display BJS version
-        if (BABYLON) this.parent.utils.setToMultipleID("mainTitle", "innerHTML", "v" + BABYLON.Engine.Version);
+        if (typeof BABYLON !== 'undefined' && BABYLON.Engine) {
+            this.parent.utils.setToMultipleID("mainTitle", "innerHTML", "v" + BABYLON.Engine.Version);
+        }
         // Run
         this.parent.utils.setToMultipleID("runButton", "click", handleRun);
         // New

dist/preview release/babylon.d.ts

@@ -56737,6 +56737,10 @@ declare module BABYLON {
          */
         get output(): NodeMaterialConnectionPoint;
         /**
+         * Gets the xyz output component
+         */
+        get xyz(): NodeMaterialConnectionPoint;
+        /**
          * Gets the matrix transform input
          */
         get transform(): NodeMaterialConnectionPoint;

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

@@ -59359,6 +59359,10 @@ declare module "babylonjs/Materials/Node/Blocks/transformBlock" {
          */
         get output(): NodeMaterialConnectionPoint;
         /**
+         * Gets the xyz output component
+         */
+        get xyz(): NodeMaterialConnectionPoint;
+        /**
          * Gets the matrix transform input
          */
         get transform(): NodeMaterialConnectionPoint;
@@ -129966,6 +129970,10 @@ declare module BABYLON {
          */
         get output(): NodeMaterialConnectionPoint;
         /**
+         * Gets the xyz output component
+         */
+        get xyz(): NodeMaterialConnectionPoint;
+        /**
          * Gets the matrix transform input
          */
         get transform(): NodeMaterialConnectionPoint;

dist/preview release/documentation.d.ts

@@ -56737,6 +56737,10 @@ declare module BABYLON {
          */
         get output(): NodeMaterialConnectionPoint;
         /**
+         * Gets the xyz output component
+         */
+        get xyz(): NodeMaterialConnectionPoint;
+        /**
          * Gets the matrix transform input
          */
         get transform(): NodeMaterialConnectionPoint;

dist/preview release/glTF2Interface/package.json

@@ -1,7 +1,7 @@
 {
     "name": "babylonjs-gltf2interface",
     "description": "A typescript declaration of babylon's gltf2 inteface.",
-    "version": "4.1.0-rc.1",
+    "version": "4.1.0-rc.2",
     "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.1.0-rc.1",
+    "version": "4.1.0-rc.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-rc.1"
+        "babylonjs": "4.1.0-rc.2"
     },
     "engines": {
         "node": "*"

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "4.1.0-rc.1",
+    "version": "4.1.0-rc.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -29,12 +29,12 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-rc.1",
-        "babylonjs-gui": "4.1.0-rc.1",
-        "babylonjs-loaders": "4.1.0-rc.1",
-        "babylonjs-materials": "4.1.0-rc.1",
-        "babylonjs-serializers": "4.1.0-rc.1",
-        "babylonjs-gltf2interface": "4.1.0-rc.1"
+        "babylonjs": "4.1.0-rc.2",
+        "babylonjs-gui": "4.1.0-rc.2",
+        "babylonjs-loaders": "4.1.0-rc.2",
+        "babylonjs-materials": "4.1.0-rc.2",
+        "babylonjs-serializers": "4.1.0-rc.2",
+        "babylonjs-gltf2interface": "4.1.0-rc.2"
     },
     "devDependencies": {
         "@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.1.0-rc.1",
+    "version": "4.1.0-rc.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "4.1.0-rc.1",
-        "babylonjs": "4.1.0-rc.1"
+        "babylonjs-gltf2interface": "4.1.0-rc.2",
+        "babylonjs": "4.1.0-rc.2"
     },
     "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.1.0-rc.1",
+    "version": "4.1.0-rc.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-rc.1"
+        "babylonjs": "4.1.0-rc.2"
     },
     "engines": {
         "node": "*"

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

@@ -196,18 +196,22 @@ declare module NODEEDITOR {
         private cleanUpResizing;
         private _onRightHandlePointerDown;
         private _onRightHandlePointerMove;
+        private _moveRightHandle;
         private _expandRight;
         private _onRightHandlePointerUp;
         private _onBottomHandlePointerDown;
         private _onBottomHandlePointerMove;
+        private _moveBottomHandle;
         private _expandBottom;
         private _onBottomHandlePointerUp;
         private _onLeftHandlePointerDown;
         private _onLeftHandlePointerMove;
+        private _moveLeftHandle;
         private _expandLeft;
         private _onLeftHandlePointerUp;
         private _onTopHandlePointerDown;
         private _onTopHandlePointerMove;
+        private _moveTopHandle;
         private _expandTop;
         private _onTopHandlePointerUp;
         dispose(): void;

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

@@ -276,18 +276,22 @@ declare module "babylonjs-node-editor/diagram/graphFrame" {
         private cleanUpResizing;
         private _onRightHandlePointerDown;
         private _onRightHandlePointerMove;
+        private _moveRightHandle;
         private _expandRight;
         private _onRightHandlePointerUp;
         private _onBottomHandlePointerDown;
         private _onBottomHandlePointerMove;
+        private _moveBottomHandle;
         private _expandBottom;
         private _onBottomHandlePointerUp;
         private _onLeftHandlePointerDown;
         private _onLeftHandlePointerMove;
+        private _moveLeftHandle;
         private _expandLeft;
         private _onLeftHandlePointerUp;
         private _onTopHandlePointerDown;
         private _onTopHandlePointerMove;
+        private _moveTopHandle;
         private _expandTop;
         private _onTopHandlePointerUp;
         dispose(): void;
@@ -1848,18 +1852,22 @@ declare module NODEEDITOR {
         private cleanUpResizing;
         private _onRightHandlePointerDown;
         private _onRightHandlePointerMove;
+        private _moveRightHandle;
         private _expandRight;
         private _onRightHandlePointerUp;
         private _onBottomHandlePointerDown;
         private _onBottomHandlePointerMove;
+        private _moveBottomHandle;
         private _expandBottom;
         private _onBottomHandlePointerUp;
         private _onLeftHandlePointerDown;
         private _onLeftHandlePointerMove;
+        private _moveLeftHandle;
         private _expandLeft;
         private _onLeftHandlePointerUp;
         private _onTopHandlePointerDown;
         private _onTopHandlePointerMove;
+        private _moveTopHandle;
         private _expandTop;
         private _onTopHandlePointerUp;
         dispose(): void;

dist/preview release/nodeEditor/package.json

@@ -4,14 +4,14 @@
     },
     "name": "babylonjs-node-editor",
     "description": "The Babylon.js node material editor.",
-    "version": "4.1.0-rc.1",
+    "version": "4.1.0-rc.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-rc.1"
+        "babylonjs": "4.1.0-rc.2"
     },
     "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.1.0-rc.1",
+    "version": "4.1.0-rc.2",
     "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.1.0-rc.1",
+    "version": "4.1.0-rc.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-rc.1"
+        "babylonjs": "4.1.0-rc.2"
     },
     "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.1.0-rc.1",
+    "version": "4.1.0-rc.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-rc.1"
+        "babylonjs": "4.1.0-rc.2"
     },
     "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.1.0-rc.1",
+    "version": "4.1.0-rc.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-rc.1",
-        "babylonjs-gltf2interface": "4.1.0-rc.1"
+        "babylonjs": "4.1.0-rc.2",
+        "babylonjs-gltf2interface": "4.1.0-rc.2"
     },
     "engines": {
         "node": "*"

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

@@ -59359,6 +59359,10 @@ declare module "babylonjs/Materials/Node/Blocks/transformBlock" {
          */
         get output(): NodeMaterialConnectionPoint;
         /**
+         * Gets the xyz output component
+         */
+        get xyz(): NodeMaterialConnectionPoint;
+        /**
          * Gets the matrix transform input
          */
         get transform(): NodeMaterialConnectionPoint;
@@ -129966,6 +129970,10 @@ declare module BABYLON {
          */
         get output(): NodeMaterialConnectionPoint;
         /**
+         * Gets the xyz output component
+         */
+        get xyz(): NodeMaterialConnectionPoint;
+        /**
          * Gets the matrix transform input
          */
         get transform(): NodeMaterialConnectionPoint;

dist/preview release/what's new.md

@@ -347,6 +347,7 @@
 - Fix for bug where round-tripped glTF imported scenes have incorrect light orientation, and duplicated parent nodes ([#7377](https://github.com/BabylonJS/Babylon.js/issues/7377))([drigax](https://github.com/drigax))
 - Fix bug in PBR sheen where the sheen effect could be a little darker than expected when using direct lighting ([Popov72](https://github.com/Popov72)
 - Fix bug in PBR shader when `reflectionTexture.linearSpecularLOD` is `true`  ([Popov72](https://github.com/Popov72))
+- Fix for bug whereResize frame bottom at times will not work for any frame in the graph ([#7377](https://github.com/BabylonJS/Babylon.js/issues/7672))([Kyle Belfort](https://github.com/belfortk))
 
 ## Breaking changes
 

nodeEditor/src/diagram/graphCanvas.scss

@@ -118,6 +118,7 @@
             &.collapsed {
                 height: auto !important;
                 width: 200px !important;
+                z-index: 3;
 
                 .frame-box-header {
                     font-size: 16px;
@@ -341,7 +342,7 @@
             height: 100%;                  
 
             .visual {
-                z-index: 3;
+                z-index: 4;
                 width: 200px;
                 position: absolute;
                 left: 0;

nodeEditor/src/diagram/graphCanvas.tsx

@@ -689,6 +689,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
 
             // No destination so let's spin a new input block
             let inputBlock = new InputBlock(NodeMaterialBlockConnectionPointTypes[this._candidateLink!.portA.connectionPoint.type], undefined, this._candidateLink!.portA.connectionPoint.type);
+            this.props.globalState.nodeMaterial.attachedBlocks.push(inputBlock);
             pointA = inputBlock.output;
             nodeA = this.appendBlock(inputBlock);
             

nodeEditor/src/diagram/graphFrame.ts

@@ -540,10 +540,16 @@ export class GraphFrame {
     }
 
     private _onRightHandlePointerMove = (evt: PointerEvent) => {
+        const slack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
+        const xLimit = (this._mouseStartPointX as number) - slack;
+        this._moveRightHandle(evt, xLimit);
+    }
+
+    private _moveRightHandle = (evt: PointerEvent, xLimit: number) => {
         // tslint:disable-next-line: no-this-assignment
         const _this = this;
-        if (_this.mouseXLimit){
-            if (_this._resizingDirection !== ResizingDirection.Right || _this._mouseStartPointX === null || _this._mouseStartPointY === null || (evt.clientX < _this.mouseXLimit)) {
+        if (_this.mouseXLimit) {
+            if (_this._resizingDirection !== ResizingDirection.Right || _this._mouseStartPointX === null || _this._mouseStartPointY === null || evt.clientX < xLimit) {
                 return;
             }
             if (_this._resizingDirection === ResizingDirection.Right ) {
@@ -571,23 +577,29 @@ export class GraphFrame {
             _this.width = parseFloat(_this.element.style.width.replace("px", ""));
             _this._ownerCanvas.hostCanvas.removeEventListener("pointerup", _this._onRightHandlePointerUp);
             _this._ownerCanvas.hostCanvas.removeEventListener("pointermove", _this._onRightHandlePointerMove);
-            this.cleanUpResizing(evt);
+            _this.cleanUpResizing(evt);
         }
     }
 
     private _onBottomHandlePointerDown = (evt: PointerEvent) => {
         // tslint:disable-next-line: no-this-assignment
         const _this = this;
-        this.initResizing(evt)
+        this.initResizing(evt);
         _this._resizingDirection = ResizingDirection.Bottom;
-        _this._ownerCanvas.hostCanvas.addEventListener("pointerup", _this._onBottomHandlePointerUp);
         _this._ownerCanvas.hostCanvas.addEventListener("pointermove", _this._onBottomHandlePointerMove);
+        _this._ownerCanvas.hostCanvas.addEventListener("pointerup", _this._onBottomHandlePointerUp);
     }
 
     private _onBottomHandlePointerMove = (evt: PointerEvent) => {
+        const slack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
+        const yLimit = (this._mouseStartPointY as number) - slack;
+        this._moveBottomHandle(evt, yLimit);
+    }
+
+    private _moveBottomHandle = (evt: PointerEvent, yLimit:number) => {
         // tslint:disable-next-line: no-this-assignment
         const _this = this;
-        if (_this._resizingDirection !== ResizingDirection.Bottom || _this._mouseStartPointX === null || _this._mouseStartPointY === null || (evt.clientY < (_this.y + _this._minFrameHeight))) {
+        if (_this._resizingDirection !== ResizingDirection.Bottom || _this._mouseStartPointX === null || _this._mouseStartPointY === null || evt.clientY < yLimit) {
             return;
         }
         if (_this._resizingDirection === ResizingDirection.Bottom) {
@@ -610,14 +622,14 @@ export class GraphFrame {
             _this.height = parseFloat(_this.element.style.height.replace("px", ""));
             _this._ownerCanvas.hostCanvas.removeEventListener("pointermove", _this._onBottomHandlePointerMove);
             _this._ownerCanvas.hostCanvas.removeEventListener("pointerup", _this._onBottomHandlePointerUp);
-            this.cleanUpResizing(evt);
+            _this.cleanUpResizing(evt);
         }
     }
 
     private _onLeftHandlePointerDown = (evt: PointerEvent) => {
         // tslint:disable-next-line: no-this-assignment
         const _this = this;
-        this.initResizing(evt)
+        this.initResizing(evt);
         _this._resizingDirection = ResizingDirection.Left;
         _this.mouseXLimit = evt.clientX + _this.width - _this._minFrameWidth;
         _this._ownerCanvas.hostCanvas.addEventListener("pointerup", _this._onLeftHandlePointerUp);
@@ -625,10 +637,16 @@ export class GraphFrame {
     }
 
     private _onLeftHandlePointerMove = (evt: PointerEvent) => {
+        const slack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
+        const xLimit = (this._mouseStartPointX as number) + slack;
+        this._moveLeftHandle(evt, xLimit);
+    }
+
+    private _moveLeftHandle = (evt: PointerEvent, xLimit: number) => {
         // tslint:disable-next-line: no-this-assignment
         const _this = this;
-        if (_this.mouseXLimit){
-            if (_this._resizingDirection !== ResizingDirection.Left  || _this._mouseStartPointX === null || _this._mouseStartPointY === null || (evt.clientX > _this.mouseXLimit)) {
+        if (_this.mouseXLimit) {
+            if (_this._resizingDirection !== ResizingDirection.Left  || _this._mouseStartPointX === null || _this._mouseStartPointY === null || evt.clientX > xLimit) {
                 return;
             }
             if (_this._resizingDirection === ResizingDirection.Left) {
@@ -655,8 +673,7 @@ export class GraphFrame {
             _this.width = parseFloat(_this.element.style.width.replace("px", ""));
             _this._ownerCanvas.hostCanvas.removeEventListener("pointerup", _this._onLeftHandlePointerUp);
             _this._ownerCanvas.hostCanvas.removeEventListener("pointermove", _this._onLeftHandlePointerMove);
-            this.cleanUpResizing(evt);
-
+            _this.cleanUpResizing(evt);
         }
     }
 
@@ -670,9 +687,15 @@ export class GraphFrame {
     }
 
     private _onTopHandlePointerMove = (evt: PointerEvent) => {
+        const slack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
+        const yLimit = (this._mouseStartPointY as number) + slack;
+        this._moveTopHandle(evt, yLimit);
+    }
+
+    private _moveTopHandle = (evt: PointerEvent, yLimit: number) => {
         // tslint:disable-next-line: no-this-assignment
         const _this = this;
-        if (_this._resizingDirection !== ResizingDirection.Top || _this._mouseStartPointX === null || _this._mouseStartPointY === null || (evt.clientY > (_this.y + _this.height - _this._minFrameHeight))) {
+        if (_this._resizingDirection !== ResizingDirection.Top || _this._mouseStartPointX === null || _this._mouseStartPointY === null || evt.clientY > yLimit) {
             return;
         }
         if (_this._resizingDirection === ResizingDirection.Top) {
@@ -699,7 +722,7 @@ export class GraphFrame {
             _this.height = parseFloat(_this.element.style.height.replace("px", ""));
             _this._ownerCanvas.hostCanvas.removeEventListener("pointerup", _this._onTopHandlePointerUp);
             _this._ownerCanvas.hostCanvas.removeEventListener("pointermove", _this._onTopHandlePointerMove);
-            this.cleanUpResizing(evt);
+            _this.cleanUpResizing(evt);
         }
     }
 

nodeEditor/src/diagram/graphNode.ts

@@ -197,6 +197,11 @@ export class GraphNode {
     public isOverlappingFrame(frame: GraphFrame) {
         const rect2 = this._visual.getBoundingClientRect();
         const rect1 = frame.element.getBoundingClientRect();
+
+        // Add a tiny margin
+        rect1.width -= 5;
+        rect1.height -= 5;
+
         return !(rect1.right < rect2.left || 
             rect1.left > rect2.right || 
             rect1.bottom < rect2.top || 

nodeEditor/src/diagram/properties/inputNodePropertyComponent.tsx

@@ -67,11 +67,11 @@ export class InputPropertyTabComponent extends React.Component<IPropertyComponen
                         }
                         {
                             !inputBlock.isBoolean &&
-                            <FloatLineComponent globalState={this.props.globalState} label="Min" target={inputBlock} propertyName="min"></FloatLineComponent>
+                            <FloatLineComponent globalState={this.props.globalState} label="Min" target={inputBlock} propertyName="min" onChange={() => this.forceUpdate()}></FloatLineComponent>
                         }
                         {
                             !inputBlock.isBoolean &&
-                            <FloatLineComponent globalState={this.props.globalState} label="Max" target={inputBlock} propertyName="max"></FloatLineComponent>      
+                            <FloatLineComponent globalState={this.props.globalState} label="Max" target={inputBlock} propertyName="max" onChange={() => this.forceUpdate()}></FloatLineComponent>      
                         }
                         {
                             !inputBlock.isBoolean && cantDisplaySlider &&
@@ -79,7 +79,7 @@ export class InputPropertyTabComponent extends React.Component<IPropertyComponen
                         }        
                         {
                             !inputBlock.isBoolean && !cantDisplaySlider &&
-                            <SliderLineComponent label="Value" target={inputBlock} propertyName="value" step={(inputBlock.max - inputBlock.min) / 100.0} minimum={inputBlock.min} maximum={inputBlock.max} onChange={() => {
+                            <SliderLineComponent label="Value" target={inputBlock} propertyName="value" step={Math.abs(inputBlock.max - inputBlock.min) / 100.0} minimum={Math.min(inputBlock.min, inputBlock.max)} maximum={inputBlock.max} onChange={() => {
                                 if (inputBlock.isConstant) {
                                     this.props.globalState.onRebuildRequiredObservable.notifyObservers();    
                                 }

nodeEditor/src/sharedComponents/sliderLineComponent.tsx

@@ -49,7 +49,7 @@ export class SliderLineComponent extends React.Component<ISliderLineComponentPro
         }
 
         if (currentState !== nextState.value || nextProps.minimum !== this.props.minimum || nextProps.maximum !== this.props.maximum || this._localChange) {
-            nextState.value = currentState;
+            nextState.value = Math.min(Math.max(currentState, nextProps.minimum), nextProps.maximum);
             this._localChange = false;
             return true;
         }

package.json

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

src/Engines/thinEngine.ts

@@ -132,14 +132,14 @@ export class ThinEngine {
      */
     // Not mixed with Version for tooling purpose.
     public static get NpmPackage(): string {
-        return "babylonjs@4.1.0-rc.1";
+        return "babylonjs@4.1.0-rc.2";
     }
 
     /**
      * Returns the current version of the framework
      */
     public static get Version(): string {
-        return "4.1.0-rc.1";
+        return "4.1.0-rc.2";
     }
 
     /**

src/Materials/Node/Blocks/Fragment/imageProcessingBlock.ts

@@ -129,7 +129,7 @@ export class ImageProcessingBlock extends NodeMaterialBlock {
         state._emitFunctionFromInclude("imageProcessingDeclaration", comments);
         state._emitFunctionFromInclude("imageProcessingFunctions", comments);
 
-        if (color.connectedPoint!.type === NodeMaterialBlockConnectionPointTypes.Color4) {
+        if (color.connectedPoint!.type === NodeMaterialBlockConnectionPointTypes.Color4 || (color.connectedPoint!.type === NodeMaterialBlockConnectionPointTypes.Vector4)) {
             state.compilationString += `${this._declareOutput(output, state)} = ${color.associatedVariableName};\r\n`;
         } else {
             state.compilationString += `${this._declareOutput(output, state)} = vec4(${color.associatedVariableName}, 1.0);\r\n`;

src/Materials/Node/Blocks/transformBlock.ts

@@ -31,6 +31,7 @@ export class TransformBlock extends NodeMaterialBlock {
         this.registerInput("vector", NodeMaterialBlockConnectionPointTypes.AutoDetect);
         this.registerInput("transform", NodeMaterialBlockConnectionPointTypes.Matrix);
         this.registerOutput("output", NodeMaterialBlockConnectionPointTypes.Vector4);
+        this.registerOutput("xyz", NodeMaterialBlockConnectionPointTypes.Vector3);
 
         this._inputs[0].onConnectionObservable.add((other) => {
             if (other.ownerBlock.isInput) {
@@ -66,6 +67,13 @@ export class TransformBlock extends NodeMaterialBlock {
     }
 
     /**
+     * Gets the xyz output component
+     */
+    public get xyz(): NodeMaterialConnectionPoint {
+        return this._outputs[1];
+    }
+
+    /**
      * Gets the matrix transform input
      */
     public get transform(): NodeMaterialConnectionPoint {
@@ -75,23 +83,26 @@ export class TransformBlock extends NodeMaterialBlock {
     protected _buildBlock(state: NodeMaterialBuildState) {
         super._buildBlock(state);
 
-        let output = this._outputs[0];
         let vector = this.vector;
         let transform = this.transform;
 
         if (vector.connectedPoint) {
             switch (vector.connectedPoint.type) {
                 case NodeMaterialBlockConnectionPointTypes.Vector2:
-                    state.compilationString += this._declareOutput(output, state) + ` = ${transform.associatedVariableName} * vec4(${vector.associatedVariableName}, ${this._writeFloat(this.complementZ)}, ${this._writeFloat(this.complementW)});\r\n`;
+                    state.compilationString += this._declareOutput(this.output, state) + ` = ${transform.associatedVariableName} * vec4(${vector.associatedVariableName}, ${this._writeFloat(this.complementZ)}, ${this._writeFloat(this.complementW)});\r\n`;
                     break;
                 case NodeMaterialBlockConnectionPointTypes.Vector3:
                 case NodeMaterialBlockConnectionPointTypes.Color3:
-                    state.compilationString += this._declareOutput(output, state) + ` = ${transform.associatedVariableName} * vec4(${vector.associatedVariableName}, ${this._writeFloat(this.complementW)});\r\n`;
+                    state.compilationString += this._declareOutput(this.output, state) + ` = ${transform.associatedVariableName} * vec4(${vector.associatedVariableName}, ${this._writeFloat(this.complementW)});\r\n`;
                     break;
                 default:
-                    state.compilationString += this._declareOutput(output, state) + ` = ${transform.associatedVariableName} * ${vector.associatedVariableName};\r\n`;
+                    state.compilationString += this._declareOutput(this.output, state) + ` = ${transform.associatedVariableName} * ${vector.associatedVariableName};\r\n`;
                     break;
             }
+
+            if (this.xyz.hasEndpoints) {
+                state.compilationString += this._declareOutput(this.xyz, state) + ` = ${this.output.associatedVariableName}.xyz;\r\n`;
+            }
         }
 
         return this;