Merge branch 'master' of https://github.com/BabylonJS/Babylon.js

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/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);
         }
     }