bug fixes

guiEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -303,14 +303,22 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
     render() {
         if (this.state.currentNode) {
             return (
-                <div id="propertyTab">
-                    <div id="header">
+                <div id="propertyTab"                                 onFocus={() => {(this.props.globalState.blockKeyboardEvents = true); console.log("blocked");}}
+                onBlur={(evt) => {
+                    this.props.globalState.blockKeyboardEvents = false;
+                    console.log("not blocked");
+                }}>
+                    <div id="header" >
                         <img id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
                         <div id="title">
                             GUI EDITOR
                         </div>
                     </div>
                     {this.renderProperties()}
+                        <ButtonLineComponent label="DELETE GUI" onClick={() => {
+                           this.state.currentNode?.dispose();
+                           this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
+                        }} />
                 </div>
             );
         }

guiEditor/src/diagram/workbench.tsx

@@ -488,7 +488,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         
         // Create our first scene.
         var scene = new Scene(engine);
-        scene.clearColor = new Color4(0.2, 0.2, 0.3, 0.1);
+        scene.clearColor = new Color4(0.2, 0.2, 0.3, 1.0);
 
         // This creates and positions a free camera (non-mesh)
         var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);

guiEditor/src/workbenchEditor.tsx

@@ -58,7 +58,7 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
 
     componentDidMount() {
         if (this.props.globalState.hostDocument) {
-            this._workbenchCanvas = this.refs["graphCanvas"] as WorkbenchComponent;
+            this._workbenchCanvas = this.refs["workbenchCanvas"] as WorkbenchComponent;
         }
 
         if (navigator.userAgent.indexOf("Mobile") !== -1) {
@@ -89,7 +89,6 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
                     for (var selectedItem of selectedItems) {
                         selectedItem.dispose();
                     }
-
                     this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
                     return;
                 }
@@ -200,7 +199,7 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
         }
 
         const deltaX = evt.clientX - this._startX;
-        const rootElement = evt.currentTarget.ownerDocument!.getElementById("workbench-editor-workbench-root") as HTMLDivElement;
+        const rootElement = evt.currentTarget.ownerDocument!.getElementById("gui-editor-workbench-root") as HTMLDivElement;
 
         if (forLeft) {
             this._leftWidth += deltaX;
@@ -210,7 +209,6 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
             this._rightWidth -= deltaX;
             this._rightWidth = Math.max(250, Math.min(500, this._rightWidth));
             DataStorage.WriteNumber("RightWidth", this._rightWidth);
-            rootElement.ownerDocument!.getElementById("preview")!.style.height = this._rightWidth + "px";
         }
 
         rootElement.style.gridTemplateColumns = this.buildColumnLayout();
@@ -385,7 +383,7 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
                             event.preventDefault();
                         }}
                     >
-                        <WorkbenchComponent ref={"graphCanvas"} globalState={this.props.globalState} />
+                        <WorkbenchComponent ref={"workbenchCanvas"} globalState={this.props.globalState} />
                     </div>
 
                     <div id="rightGrab" onPointerDown={(evt) => this.onPointerDown(evt)} onPointerUp={(evt) => this.onPointerUp(evt)} onPointerMove={(evt) => this.resizeColumns(evt, false)}></div>