removing extra ui on side bars

guiEditor/src/components/nodeList/nodeListComponent.tsx

@@ -224,26 +224,8 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
         
         // Block types used to create the menu from
         const allBlocks: any = {
-            Custom_Frames: customFrameNames,
-            Animation: ["BonesBlock", "MorphTargetsBlock"],
-            Color_Management: ["ReplaceColorBlock", "PosterizeBlock", "GradientBlock", "DesaturateBlock"],
-            Conversion_Blocks: ["ColorMergerBlock", "ColorSplitterBlock", "VectorMergerBlock", "VectorSplitterBlock"],
-            Inputs: ["Float", "Vector2", "Vector3", "Vector4", "Color3", "Color4", "TextureBlock", "ReflectionTextureBlock", "TimeBlock", "DeltaTimeBlock", "FragCoordBlock", "ScreenSizeBlock"],
-            Interpolation: ["LerpBlock", "StepBlock", "SmoothStepBlock", "NLerpBlock"],
-            Math__Standard: ["AddBlock", "DivideBlock", "MaxBlock", "MinBlock", "ModBlock", "MultiplyBlock", "NegateBlock", "OneMinusBlock", "ReciprocalBlock", "ScaleBlock", "SignBlock", "SqrtBlock", "SubtractBlock"],
-            Math__Scientific: ["AbsBlock", "ArcCosBlock", "ArcSinBlock", "ArcTanBlock", "ArcTan2Block", "CosBlock", "DegreesToRadiansBlock", "ExpBlock", "Exp2Block", "FractBlock", "LogBlock", "PowBlock", "RadiansToDegreesBlock", "SawToothWaveBlock", "SinBlock", "SquareWaveBlock", "TanBlock", "TriangleWaveBlock"],
-            Math__Vector: ["CrossBlock", "DerivativeBlock", "DistanceBlock", "DotBlock", "FresnelBlock", "LengthBlock", "ReflectBlock", "RefractBlock", "Rotate2dBlock", "TransformBlock", ],
-            Matrices: ["Matrix", "WorldMatrixBlock", "WorldViewMatrixBlock", "WorldViewProjectionMatrixBlock", "ViewMatrixBlock", "ViewProjectionMatrixBlock", "ProjectionMatrixBlock"],
-            Mesh: ["InstancesBlock", "PositionBlock", "UVBlock", "ColorBlock", "NormalBlock", "PerturbNormalBlock", "NormalBlendBlock" , "TangentBlock", "MatrixIndicesBlock", "MatrixWeightsBlock", "WorldPositionBlock", "WorldNormalBlock", "WorldTangentBlock", "FrontFacingBlock"],
-            Noises: ["RandomNumberBlock", "SimplexPerlin3DBlock", "WorleyNoise3DBlock"],
-            Output_Nodes: ["VertexOutputBlock", "FragmentOutputBlock", "DiscardBlock"],
-            Particle: ["ParticleBlendMultiplyBlock", "ParticleColorBlock", "ParticlePositionWorldBlock", "ParticleRampGradientBlock", "ParticleTextureBlock", "ParticleTextureMaskBlock", "ParticleUVBlock"],
-            PBR: ["PBRMetallicRoughnessBlock", "AmbientOcclusionBlock", "AnisotropyBlock", "ClearCoatBlock", "ReflectionBlock", "ReflectivityBlock", "RefractionBlock", "SheenBlock", "SubSurfaceBlock"],
-            PostProcess: ["ScreenPositionBlock", "CurrentScreenBlock"],
-            Procedural__Texture: ["ScreenPositionBlock"],
-            Range: ["ClampBlock", "RemapBlock", "NormalizeBlock"],
-            Round: ["RoundBlock", "CeilingBlock", "FloorBlock"],
-            Scene: ["FogBlock", "CameraPositionBlock", "FogColorBlock", "ImageProcessingBlock", "LightBlock", "LightInformationBlock", "ViewDirectionBlock"],
+            Custom_Gui: customFrameNames,
+            Buttons: ["Text", "Image"],
         };
 
         switch (this.props.globalState.mode) {
@@ -279,7 +261,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
             var blockList = (allBlocks as any)[key].filter((b: string) => !this.state.filter || b.toLowerCase().indexOf(this.state.filter.toLowerCase()) !== -1)
             .sort((a: string, b: string) => a.localeCompare(b))
             .map((block: any, i: number) => {
-                if(key === "Custom_Frames") {
+                if(key === "Custom_Gui") {
                     return <DraggableLineWithButtonComponent key={block} data={block} tooltip={this._customFrameList[block] || ""} iconImage={deleteButton} iconTitle="Delete"
                     onIconClick={ value => this.removeItem(value)}/>;
                 }
@@ -287,7 +269,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
 
             });
 
-            if(key === "Custom_Frames") {
+            if(key === "Custom_Gui") {
                 let line =  <LineWithFileButtonComponent key="add..."title={"Add Custom Frame"} closed={false}
                 label="Add..." uploadName={'custom-frame-upload'} iconImage={addButton} accept=".json" onIconClick={(file) => {
                     this.loadCustomFrame(file);

guiEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -362,32 +362,14 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                 <div id="header">
                     <img id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
                     <div id="title">
-                        NODE MATERIAL EDITOR
+                        GUI EDITOR
                     </div>
                 </div>
                 <div>
                     <LineContainerComponent title="GENERAL">
-                        <OptionsLineComponent ref={this._modeSelect} label="Mode" target={this} getSelection={(target) => this.props.globalState.mode} options={modeList} onSelect={(value) => this.changeMode(value)} />
                         <TextLineComponent label="Version" value={Engine.Version}/>
                         <TextLineComponent label="Help" value="doc.babylonjs.com" underline={true} onLink={() => window.open('https://doc.babylonjs.com/how_to/node_material', '_blank')}/>
                         <TextInputLineComponent label="Comment" multilines={true} value={this.props.globalState.nodeMaterial!.comment} target={this.props.globalState.nodeMaterial} propertyName="comment" globalState={this.props.globalState}/>
-                        <ButtonLineComponent label="Reset to default" onClick={() => {
-                            switch (this.props.globalState.mode) {
-                                case NodeMaterialModes.Material:
-                                    this.props.globalState.nodeMaterial!.setToDefault();
-                                    break;
-                                case NodeMaterialModes.PostProcess:
-                                    this.props.globalState.nodeMaterial!.setToDefaultPostProcess();
-                                    break;
-                                case NodeMaterialModes.Particle:
-                                    this.props.globalState.nodeMaterial!.setToDefaultParticle();
-                                    break;
-                                case NodeMaterialModes.ProceduralTexture:
-                                    this.props.globalState.nodeMaterial!.setToDefaultProceduralTexture();
-                                    break;
-                            }
-                            this.props.globalState.onResetRequiredObservable.notifyObservers();
-                        }} />
                     </LineContainerComponent>
                     <LineContainerComponent title="UI">
                         <ButtonLineComponent label="Zoom to fit" onClick={() => {
@@ -398,12 +380,6 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                         }} />
                     </LineContainerComponent>
                     <LineContainerComponent title="OPTIONS">
-                        <CheckBoxLineComponent label="Embed textures when saving"
-                            isSelected={() => DataStorage.ReadBoolean("EmbedTextures", true)}
-                            onSelect={(value: boolean) => {
-                                DataStorage.WriteBoolean("EmbedTextures", value);
-                            }}
-                        />
                         <SliderLineComponent label="Grid size" minimum={0} maximum={100} step={5}
                             decimalCount={0} globalState={this.props.globalState}
                             directValue={gridSize}
@@ -422,46 +398,9 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                         />
                     </LineContainerComponent>
                     <LineContainerComponent title="FILE">
-                        <FileButtonLineComponent label="Load" onClick={(file) => this.load(file)} accept=".json" />
-                        <ButtonLineComponent label="Save" onClick={() => {
-                            this.save();
-                        }} />
                         <ButtonLineComponent label="Generate code" onClick={() => {
                             StringTools.DownloadAsFile(this.props.globalState.hostDocument, this.props.globalState.nodeMaterial!.generateCode(), "code.txt");
                         }} />
-                        <ButtonLineComponent label="Export shaders" onClick={() => {
-                            StringTools.DownloadAsFile(this.props.globalState.hostDocument, this.props.globalState.nodeMaterial!.compiledShaders, "shaders.txt");
-                        }} />
-                        {
-                            this.props.globalState.customSave &&
-                            <ButtonLineComponent label={this.props.globalState.customSave!.label} onClick={() => {
-                                this.customSave();
-                            }} />
-                        }
-                        <FileButtonLineComponent label="Load Frame" uploadName={'frame-upload'} onClick={(file) => this.loadFrame(file)} accept=".json" />
-                    </LineContainerComponent>
-                    {
-                        !this.props.globalState.customSave &&
-                        <LineContainerComponent title="SNIPPET">
-                            {
-                                this.props.globalState.nodeMaterial!.snippetId &&
-                                <TextLineComponent label="Snippet ID" value={this.props.globalState.nodeMaterial!.snippetId} />
-                            }
-                            <ButtonLineComponent label="Load from snippet server" onClick={() => this.loadFromSnippet()} />
-                            <ButtonLineComponent label="Save to snippet server" onClick={() => {
-                                this.saveToSnippetServer();
-                            }} />
-                        </LineContainerComponent>
-                    }
-                    <LineContainerComponent title="INPUTS">
-                    {
-                        this.props.globalState.nodeMaterial.getInputBlocks().map((ib) => {
-                            if (!ib.isUniform || ib.isSystemValue || !ib.name) {
-                                return null;
-                            }
-                            return this.renderInputBlock(ib);
-                        })
-                    }
                     </LineContainerComponent>
                 </div>
             </div>

guiEditor/src/graphEditor.tsx

@@ -881,8 +881,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
                     {/* Property tab */}
                     <div className="right-panel">
                         <PropertyTabComponent globalState={this.props.globalState} />
-                        {!this.state.showPreviewPopUp ? <PreviewMeshControlComponent globalState={this.props.globalState} togglePreviewAreaComponent={this.handlePopUp} /> : null }
-                        {!this.state.showPreviewPopUp ? <PreviewAreaComponent globalState={this.props.globalState} width={this._rightWidth} /> : null}
+                       
                     </div>
 
                     <LogComponent globalState={this.props.globalState} />