Merge pull request #7688 from belfortk/nme-popout-preview-background-color-bug

Fix for bug where Preview Area pop up does not change background color across windows

dist/preview release/what's new.md

@@ -347,8 +347,9 @@
 - 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))
+- Fix for bug where resizing the bottom of a frame 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))
 - Fix bug in PBR sheen when used with clear coat and no env texture provided ([Popov72](https://github.com/Popov72))
+- Fix for bug where Preview Area pop up does not change background color across windows ([#7377](https://github.com/BabylonJS/Babylon.js/issues/7684))([Kyle Belfort](https://github.com/belfortk))
 
 ## Breaking changes
 

nodeEditor/src/components/preview/previewManager.ts

@@ -78,6 +78,7 @@ export class PreviewManager {
 
         this._engine = new Engine(targetCanvas, true);
         this._scene = new Scene(this._engine);
+        this._scene.clearColor = this._globalState.backgroundColor;
         this._camera = new ArcRotateCamera("Camera", 0, 0.8, 4, Vector3.Zero(), this._scene);
 
         this._camera.lowerRadiusLimit = 3;

nodeEditor/src/diagram/graphCanvas.scss

@@ -207,6 +207,15 @@
                 z-index: 2;
             }
 
+            .frame-comments.has-comments{
+                display: grid;
+                grid-row: 2;
+                grid-column: 1;
+                padding-left: 10px;
+                font-style: italic;
+                word-wrap: break-word;
+            }
+
             &.selected {
                 .frame-box-border {
                   border-color: white;

nodeEditor/src/globalState.ts

@@ -5,7 +5,7 @@ import { LogEntry } from './components/log/logComponent';
 import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
 import { PreviewMeshType } from './components/preview/previewMeshType';
 import { DataStorage } from './dataStorage';
-import { Color4 } from 'babylonjs/Maths/math.color';
+import { Color4, Color3 } from 'babylonjs/Maths/math.color';
 import { GraphNode } from './diagram/graphNode';
 import { Vector2 } from 'babylonjs/Maths/math.vector';
 import { NodePort } from './diagram/nodePort';
@@ -49,9 +49,9 @@ export class GlobalState {
     hemisphericLight: boolean;
     directionalLight0: boolean;
     directionalLight1: boolean;
-    controlCamera: boolean;    
+    controlCamera: boolean;
     storeEditorData:(serializationObject: any) => void;
-    
+
     customSave?: {label: string, action: (data: string) => Promise<void>};
 
     public constructor() {