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

dist/preview release/inspector/babylon.inspector.bundle.max.js

@@ -48317,21 +48317,21 @@ var CameraTreeItemComponent = /** @class */ (function (_super) {
     };
     CameraTreeItemComponent.prototype.componentDidMount = function () {
         var _this = this;
-        var camera = this.props.camera;
-        var scene = camera.getScene();
-        this._onActiveCameraObserver = scene.onActiveCameraChanged.add(function () {
+        var scene = this.props.camera.getScene();
+        this._onBeforeRenderObserver = scene.onBeforeRenderObservable.add(function () {
+            var camera = _this.props.camera;
             // This will deactivate the previous camera when the camera is changed. Multiple camera's cycle frequently so only do this for single cameras
-            if (_this.state.isActive && scene.activeCameras.length <= 1) {
+            if (_this.state.isActive && scene.activeCameras.length <= 1 && scene.activeCamera !== camera) {
                 camera.detachControl(scene.getEngine().getRenderingCanvas());
             }
             _this.setState({ isActive: scene.activeCamera === camera });
         });
     };
     CameraTreeItemComponent.prototype.componentWillUnmount = function () {
-        if (this._onActiveCameraObserver) {
+        if (this._onBeforeRenderObserver) {
             var camera = this.props.camera;
             var scene = camera.getScene();
-            scene.onActiveCameraChanged.remove(this._onActiveCameraObserver);
+            scene.onBeforeRenderObservable.remove(this._onBeforeRenderObserver);
         }
     };
     CameraTreeItemComponent.prototype.render = function () {

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

@@ -1488,7 +1488,7 @@ declare module INSPECTOR {
     export class CameraTreeItemComponent extends React.Component<ICameraTreeItemComponentProps, {
         isActive: boolean;
     }> {
-        private _onActiveCameraObserver;
+        private _onBeforeRenderObserver;
         constructor(props: ICameraTreeItemComponentProps);
         setActive(): void;
         componentDidMount(): void;

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

@@ -1908,7 +1908,7 @@ declare module "babylonjs-inspector/components/sceneExplorer/entities/cameraTree
     export class CameraTreeItemComponent extends React.Component<ICameraTreeItemComponentProps, {
         isActive: boolean;
     }> {
-        private _onActiveCameraObserver;
+        private _onBeforeRenderObserver;
         constructor(props: ICameraTreeItemComponentProps);
         setActive(): void;
         componentDidMount(): void;
@@ -3822,7 +3822,7 @@ declare module INSPECTOR {
     export class CameraTreeItemComponent extends React.Component<ICameraTreeItemComponentProps, {
         isActive: boolean;
     }> {
-        private _onActiveCameraObserver;
+        private _onBeforeRenderObserver;
         constructor(props: ICameraTreeItemComponentProps);
         setActive(): void;
         componentDidMount(): void;

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

@@ -170,6 +170,7 @@ declare module NODEEDITOR {
         private _altKeyIsPressed;
         private _ctrlKeyIsPressed;
         private _oldY;
+        _frameIsMoving: boolean;
         gridSize: number;
         readonly globalState: GlobalState;
         readonly nodes: GraphNode[];

dist/preview release/nodeEditor/babylon.nodeEditor.max.js

@@ -53411,6 +53411,7 @@ var GraphCanvasComponent = /** @class */ (function (_super) {
         _this._altKeyIsPressed = false;
         _this._ctrlKeyIsPressed = false;
         _this._oldY = -1;
+        _this._frameIsMoving = false;
         props.globalState.onSelectionChangedObservable.add(function (selection) {
             if (!selection) {
                 _this._selectedNodes = [];
@@ -54193,6 +54194,7 @@ var GraphFrame = /** @class */ (function () {
         this._mouseStartPointY = evt.clientY;
         this._headerElement.setPointerCapture(evt.pointerId);
         this._ownerCanvas.globalState.onSelectionChangedObservable.notifyObservers(this);
+        this._ownerCanvas._frameIsMoving = true;
     };
     GraphFrame.prototype._onUp = function (evt) {
         evt.stopPropagation();
@@ -54204,6 +54206,7 @@ var GraphFrame = /** @class */ (function () {
         this._mouseStartPointX = null;
         this._mouseStartPointY = null;
         this._headerElement.releasePointerCapture(evt.pointerId);
+        this._ownerCanvas._frameIsMoving = false;
     };
     GraphFrame.prototype._onMove = function (evt) {
         if (this._mouseStartPointX === null || this._mouseStartPointY === null || evt.ctrlKey) {
@@ -54456,6 +54459,9 @@ var GraphNode = /** @class */ (function () {
         return this._links.filter(function (link) { return link.portA.connectionPoint === point || link.portB.connectionPoint === point; });
     };
     GraphNode.prototype._refreshFrames = function () {
+        if (this._ownerCanvas._frameIsMoving) {
+            return;
+        }
         // Frames
         for (var _i = 0, _a = this._ownerCanvas.frames; _i < _a.length; _i++) {
             var frame = _a[_i];

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

@@ -254,6 +254,7 @@ declare module "babylonjs-node-editor/diagram/graphCanvas" {
         private _altKeyIsPressed;
         private _ctrlKeyIsPressed;
         private _oldY;
+        _frameIsMoving: boolean;
         gridSize: number;
         readonly globalState: GlobalState;
         readonly nodes: GraphNode[];
@@ -1595,6 +1596,7 @@ declare module NODEEDITOR {
         private _altKeyIsPressed;
         private _ctrlKeyIsPressed;
         private _oldY;
+        _frameIsMoving: boolean;
         gridSize: number;
         readonly globalState: GlobalState;
         readonly nodes: GraphNode[];

inspector/src/components/sceneExplorer/entities/cameraTreeItemComponent.tsx

@@ -17,7 +17,7 @@ interface ICameraTreeItemComponentProps {
 }
 
 export class CameraTreeItemComponent extends React.Component<ICameraTreeItemComponentProps, { isActive: boolean }> {
-    private _onActiveCameraObserver: Nullable<Observer<Scene>>;
+    private _onBeforeRenderObserver: Nullable<Observer<Scene>>;
 
     constructor(props: ICameraTreeItemComponentProps) {
         super(props);
@@ -35,28 +35,29 @@ export class CameraTreeItemComponent extends React.Component<ICameraTreeItemComp
         scene.activeCamera = camera;
         camera.attachControl(scene.getEngine().getRenderingCanvas()!, true);
 
-
         this.setState({ isActive: true });
     }
 
-    componentDidMount() {
-        const camera = this.props.camera;
-        const scene = camera.getScene();
-        this._onActiveCameraObserver = scene.onActiveCameraChanged.add(() => {
+    componentDidMount() {        
+        const scene = this.props.camera.getScene();
+
+        this._onBeforeRenderObserver = scene.onBeforeRenderObservable.add(() => {
+            const camera = this.props.camera;
             // This will deactivate the previous camera when the camera is changed. Multiple camera's cycle frequently so only do this for single cameras
-            if (this.state.isActive && scene.activeCameras.length <= 1) {
+            if (this.state.isActive && scene.activeCameras.length <= 1 && scene.activeCamera !== camera) {
                 camera.detachControl(scene.getEngine().getRenderingCanvas()!);
             }
             this.setState({ isActive: scene.activeCamera === camera });
-        });
+            
+        })
     }
 
     componentWillUnmount() {
-        if (this._onActiveCameraObserver) {
+        if (this._onBeforeRenderObserver) {
             const camera = this.props.camera;
             const scene = camera.getScene();
 
-            scene.onActiveCameraChanged.remove(this._onActiveCameraObserver);
+            scene.onBeforeRenderObservable.remove(this._onBeforeRenderObserver);
         }
     }
 

nodeEditor/src/diagram/graphCanvas.tsx

@@ -56,6 +56,8 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     private _ctrlKeyIsPressed = false;
     private _oldY = -1;
 
+    public _frameIsMoving = false;
+
     public get gridSize() {
         return this._gridSize;
     }

nodeEditor/src/diagram/graphFrame.ts

@@ -175,6 +175,8 @@ export class GraphFrame {
         
         this._headerElement.setPointerCapture(evt.pointerId);
         this._ownerCanvas.globalState.onSelectionChangedObservable.notifyObservers(this);
+
+        this._ownerCanvas._frameIsMoving = true;
     }    
 
     private _onUp(evt: PointerEvent) {
@@ -188,6 +190,8 @@ export class GraphFrame {
         this._mouseStartPointX = null;
         this._mouseStartPointY = null;
         this._headerElement.releasePointerCapture(evt.pointerId);
+
+        this._ownerCanvas._frameIsMoving = false;
     }
 
     private _onMove(evt: PointerEvent) {

nodeEditor/src/diagram/graphNode.ts

@@ -195,6 +195,10 @@ export class GraphNode {
     }
     
     private _refreshFrames() {       
+        if (this._ownerCanvas._frameIsMoving) {
+            return;
+        }
+        
         // Frames
         for (var frame of this._ownerCanvas.frames) {
             frame.syncNode(this);