adding better way for inserting new guis

guiEditor/src/blockTools.ts

@@ -1,580 +1,10 @@
-import { DiscardBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/discardBlock';
-import { BonesBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/bonesBlock';
-import { InstancesBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/instancesBlock';
-import { MorphTargetsBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/morphTargetsBlock';
-import { ImageProcessingBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/imageProcessingBlock';
-import { ColorMergerBlock } from 'babylonjs/Materials/Node/Blocks/colorMergerBlock';
-import { VectorMergerBlock } from 'babylonjs/Materials/Node/Blocks/vectorMergerBlock';
-import { ColorSplitterBlock } from 'babylonjs/Materials/Node/Blocks/colorSplitterBlock';
-import { VectorSplitterBlock } from 'babylonjs/Materials/Node/Blocks/vectorSplitterBlock';
-import { RemapBlock } from 'babylonjs/Materials/Node/Blocks/remapBlock';
-import { TextureBlock } from 'babylonjs/Materials/Node/Blocks/Dual/textureBlock';
-import { ReflectionTextureBlock } from 'babylonjs/Materials/Node/Blocks/Dual/reflectionTextureBlock';
-import { LightBlock } from 'babylonjs/Materials/Node/Blocks/Dual/lightBlock';
-import { FogBlock } from 'babylonjs/Materials/Node/Blocks/Dual/fogBlock';
-import { VertexOutputBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/vertexOutputBlock';
-import { FragmentOutputBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/fragmentOutputBlock';
-import { NormalizeBlock } from 'babylonjs/Materials/Node/Blocks/normalizeBlock';
-import { AddBlock } from 'babylonjs/Materials/Node/Blocks/addBlock';
-import { ModBlock } from 'babylonjs/Materials/Node/Blocks/modBlock';
-import { ScaleBlock } from 'babylonjs/Materials/Node/Blocks/scaleBlock';
-import { TrigonometryBlock, TrigonometryBlockOperations } from 'babylonjs/Materials/Node/Blocks/trigonometryBlock';
-import { ClampBlock } from 'babylonjs/Materials/Node/Blocks/clampBlock';
-import { CrossBlock } from 'babylonjs/Materials/Node/Blocks/crossBlock';
-import { DotBlock } from 'babylonjs/Materials/Node/Blocks/dotBlock';
-import { MultiplyBlock } from 'babylonjs/Materials/Node/Blocks/multiplyBlock';
-import { TransformBlock } from 'babylonjs/Materials/Node/Blocks/transformBlock';
-import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
-import { FresnelBlock } from 'babylonjs/Materials/Node/Blocks/fresnelBlock';
-import { LerpBlock } from 'babylonjs/Materials/Node/Blocks/lerpBlock';
-import { NLerpBlock } from 'babylonjs/Materials/Node/Blocks/nLerpBlock';
-import { DivideBlock } from 'babylonjs/Materials/Node/Blocks/divideBlock';
-import { SubtractBlock } from 'babylonjs/Materials/Node/Blocks/subtractBlock';
-import { StepBlock } from 'babylonjs/Materials/Node/Blocks/stepBlock';
-import { SmoothStepBlock } from 'babylonjs/Materials/Node/Blocks/smoothStepBlock';
-import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
-import { NodeMaterialSystemValues } from 'babylonjs/Materials/Node/Enums/nodeMaterialSystemValues';
-import { AnimatedInputBlockTypes } from 'babylonjs/Materials/Node/Blocks/Input/animatedInputBlockTypes';
-import { OneMinusBlock } from 'babylonjs/Materials/Node/Blocks/oneMinusBlock';
-import { ViewDirectionBlock } from 'babylonjs/Materials/Node/Blocks/viewDirectionBlock';
-import { LightInformationBlock } from 'babylonjs/Materials/Node/Blocks/Vertex/lightInformationBlock';
-import { MaxBlock } from 'babylonjs/Materials/Node/Blocks/maxBlock';
-import { MinBlock } from 'babylonjs/Materials/Node/Blocks/minBlock';
-import { PerturbNormalBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/perturbNormalBlock';
-import { LengthBlock } from 'babylonjs/Materials/Node/Blocks/lengthBlock';
-import { DistanceBlock } from 'babylonjs/Materials/Node/Blocks/distanceBlock';
-import { FrontFacingBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/frontFacingBlock';
-import { NegateBlock } from 'babylonjs/Materials/Node/Blocks/negateBlock';
-import { PowBlock } from 'babylonjs/Materials/Node/Blocks/powBlock';
-import { Scene } from 'babylonjs/scene';
-import { RandomNumberBlock } from 'babylonjs/Materials/Node/Blocks/randomNumberBlock';
-import { ReplaceColorBlock } from 'babylonjs/Materials/Node/Blocks/replaceColorBlock';
-import { PosterizeBlock } from 'babylonjs/Materials/Node/Blocks/posterizeBlock';
-import { ArcTan2Block } from 'babylonjs/Materials/Node/Blocks/arcTan2Block';
-import { ReciprocalBlock } from 'babylonjs/Materials/Node/Blocks/reciprocalBlock';
-import { GradientBlock } from 'babylonjs/Materials/Node/Blocks/gradientBlock';
-import { WaveBlock, WaveBlockKind } from 'babylonjs/Materials/Node/Blocks/waveBlock';
-import { NodeMaterial } from 'babylonjs/Materials/Node/nodeMaterial';
-import { WorleyNoise3DBlock } from 'babylonjs/Materials/Node/Blocks/worleyNoise3DBlock';
-import { SimplexPerlin3DBlock } from 'babylonjs/Materials/Node/Blocks/simplexPerlin3DBlock';
-import { NormalBlendBlock } from 'babylonjs/Materials/Node/Blocks/normalBlendBlock';
-import { Rotate2dBlock } from 'babylonjs/Materials/Node/Blocks/rotate2dBlock';
-import { DerivativeBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/derivativeBlock';
-import { RefractBlock } from 'babylonjs/Materials/Node/Blocks/refractBlock';
-import { ReflectBlock } from 'babylonjs/Materials/Node/Blocks/reflectBlock';
-import { DesaturateBlock } from 'babylonjs/Materials/Node/Blocks/desaturateBlock';
-import { PBRMetallicRoughnessBlock } from 'babylonjs/Materials/Node/Blocks/PBR/pbrMetallicRoughnessBlock';
-import { SheenBlock } from 'babylonjs/Materials/Node/Blocks/PBR/sheenBlock';
-import { AmbientOcclusionBlock } from 'babylonjs/Materials/Node/Blocks/PBR/ambientOcclusionBlock';
-import { ReflectivityBlock } from 'babylonjs/Materials/Node/Blocks/PBR/reflectivityBlock';
-import { AnisotropyBlock } from 'babylonjs/Materials/Node/Blocks/PBR/anisotropyBlock';
-import { ReflectionBlock } from 'babylonjs/Materials/Node/Blocks/PBR/reflectionBlock';
-import { ClearCoatBlock } from 'babylonjs/Materials/Node/Blocks/PBR/clearCoatBlock';
-import { RefractionBlock } from 'babylonjs/Materials/Node/Blocks/PBR/refractionBlock';
-import { SubSurfaceBlock } from 'babylonjs/Materials/Node/Blocks/PBR/subSurfaceBlock';
-import { CurrentScreenBlock } from 'babylonjs/Materials/Node/Blocks/Dual/currentScreenBlock';
-import { ParticleTextureBlock } from 'babylonjs/Materials/Node/Blocks/Particle/particleTextureBlock';
-import { ParticleRampGradientBlock } from 'babylonjs/Materials/Node/Blocks/Particle/particleRampGradientBlock';
-import { ParticleBlendMultiplyBlock } from 'babylonjs/Materials/Node/Blocks/Particle/particleBlendMultiplyBlock';
-import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialModes';
-import { FragCoordBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/fragCoordBlock';
-import { ScreenSizeBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/screenSizeBlock';
-
 export class BlockTools {
-    public static GetBlockFromString(data: string, scene: Scene, nodeMaterial: NodeMaterial) {
+    public static GetGuiFromString(data: string) {
         switch (data) {
-            case "DesaturateBlock":
-                return new DesaturateBlock("Desaturate");
-            case "RefractBlock":
-                return new RefractBlock("Refract");
-            case "ReflectBlock":
-                return new ReflectBlock("Reflect");
-            case "DerivativeBlock":
-                return new DerivativeBlock("Derivative");
-            case "Rotate2dBlock":
-                return new Rotate2dBlock("Rotate2d");
-            case "NormalBlendBlock":
-                return new NormalBlendBlock("NormalBlend");
-            case "WorleyNoise3DBlock":
-                return new WorleyNoise3DBlock("WorleyNoise3D");
-            case "SimplexPerlin3DBlock":
-                return new SimplexPerlin3DBlock("SimplexPerlin3D");
-            case "BonesBlock":
-                return new BonesBlock("Bones");
-            case "InstancesBlock":
-                return new InstancesBlock("Instances");
-            case "MorphTargetsBlock":
-                return new MorphTargetsBlock("MorphTargets");
-            case "DiscardBlock":
-                return new DiscardBlock("Discard");
-            case "ImageProcessingBlock":
-                return new ImageProcessingBlock("ImageProcessing");
-            case "ColorMergerBlock":
-                return new ColorMergerBlock("ColorMerger");
-            case "VectorMergerBlock":
-                return new VectorMergerBlock("VectorMerger");
-            case "ColorSplitterBlock":
-                return new ColorSplitterBlock("ColorSplitter");
-            case "VectorSplitterBlock":
-                return new VectorSplitterBlock("VectorSplitter");
-            case "TextureBlock":
-                return new TextureBlock("Texture", nodeMaterial.mode === NodeMaterialModes.Particle);
-            case "ReflectionTextureBlock":
-                return new ReflectionTextureBlock("Reflection texture");
-            case "LightBlock":
-                return new LightBlock("Lights");
-            case "FogBlock":
-                return new FogBlock("Fog");
-            case "VertexOutputBlock":
-                return new VertexOutputBlock("VertexOutput");
-            case "FragmentOutputBlock":
-                return new FragmentOutputBlock("FragmentOutput");
-            case "AddBlock":
-                return new AddBlock("Add");
-            case "ClampBlock":
-                return new ClampBlock("Clamp");
-            case "ScaleBlock":
-                return new ScaleBlock("Scale");
-            case "CrossBlock":
-                return new CrossBlock("Cross");
-            case "DotBlock":
-                return new DotBlock("Dot");
-            case "PowBlock":
-                return new PowBlock("Pow");
-            case "MultiplyBlock":
-                return new MultiplyBlock("Multiply");
-            case "TransformBlock":
-                return new TransformBlock("Transform");
-            case "TrigonometryBlock":
-                return new TrigonometryBlock("Trigonometry");
-            case "RemapBlock":
-                return new RemapBlock("Remap");
-            case "NormalizeBlock":
-                return new NormalizeBlock("Normalize");
-            case "FresnelBlock":
-                return new FresnelBlock("Fresnel");
-            case "LerpBlock":
-                return new LerpBlock("Lerp");
-            case "NLerpBlock":
-                return new NLerpBlock("NLerp");
-            case "DivideBlock":
-                return new DivideBlock("Divide");
-            case "SubtractBlock":
-                return new SubtractBlock("Subtract");
-            case "ModBlock":
-                return new ModBlock("Mod");
-            case "StepBlock":
-                return new StepBlock("Step");
-            case "SmoothStepBlock":
-                return new SmoothStepBlock("Smooth step");
-            case "OneMinusBlock":
-                return new OneMinusBlock("One minus");
-            case "ReciprocalBlock":
-                return new ReciprocalBlock("Reciprocal");
-            case "ViewDirectionBlock":
-                return new ViewDirectionBlock("View direction");
-            case "LightInformationBlock":
-                let lightInformationBlock = new LightInformationBlock("Light information");
-                lightInformationBlock.light = scene.lights.length ? scene.lights[0] : null;
-                return lightInformationBlock;
-            case "MaxBlock":
-                return new MaxBlock("Max");
-            case "MinBlock":
-                return new MinBlock("Min");
-            case "LengthBlock":
-                return new LengthBlock("Length");
-            case "DistanceBlock":
-                return new DistanceBlock("Distance");
-            case "NegateBlock":
-                return new NegateBlock("Negate");
-            case "PerturbNormalBlock":
-                return new PerturbNormalBlock("Perturb normal");
-            case "RandomNumberBlock":
-                return new RandomNumberBlock("Random number");
-            case "ReplaceColorBlock":
-                return new ReplaceColorBlock("Replace color");
-            case "PosterizeBlock":
-                return new PosterizeBlock("Posterize");
-            case "ArcTan2Block":
-                return new ArcTan2Block("ArcTan2");
-            case "GradientBlock":
-                return new GradientBlock("Gradient");
-            case "FrontFacingBlock":
-                return new FrontFacingBlock("Front facing");
-            case "CosBlock": {
-                let cosBlock = new TrigonometryBlock("Cos");
-                cosBlock.operation = TrigonometryBlockOperations.Cos;
-                return cosBlock;
-            }
-            case "SinBlock": {
-                let sinBlock = new TrigonometryBlock("Sin");
-                sinBlock.operation = TrigonometryBlockOperations.Sin;
-                return sinBlock;
-            }
-            case "AbsBlock": {
-                let absBlock = new TrigonometryBlock("Abs");
-                absBlock.operation = TrigonometryBlockOperations.Abs;
-                return absBlock;
-            }
-            case "SqrtBlock": {
-                let sqrtBlock = new TrigonometryBlock("Sqrt");
-                sqrtBlock.operation = TrigonometryBlockOperations.Sqrt;
-                return sqrtBlock;
-            }
-            case "ArcCosBlock": {
-                let acosBlock = new TrigonometryBlock("ArcCos");
-                acosBlock.operation = TrigonometryBlockOperations.ArcCos;
-                return acosBlock;
-            }
-            case "ArcSinBlock": {
-                let asinBlock = new TrigonometryBlock("ArcSin");
-                asinBlock.operation = TrigonometryBlockOperations.ArcSin;
-                return asinBlock;
-            }
-            case "TanBlock": {
-                let tanBlock = new TrigonometryBlock("Tan");
-                tanBlock.operation = TrigonometryBlockOperations.Tan;
-                return tanBlock;
-            }
-            case "ArcTanBlock": {
-                let atanBlock = new TrigonometryBlock("ArcTan");
-                atanBlock.operation = TrigonometryBlockOperations.ArcTan;
-                return atanBlock;
-            }
-            case "FractBlock": {
-                let fractBlock = new TrigonometryBlock("Fract");
-                fractBlock.operation = TrigonometryBlockOperations.Fract;
-                return fractBlock;
-            }
-            case "SignBlock": {
-                let signBlock = new TrigonometryBlock("Sign");
-                signBlock.operation = TrigonometryBlockOperations.Sign;
-                return signBlock;
-            }
-            case "LogBlock": {
-                let logBlock = new TrigonometryBlock("Log");
-                logBlock.operation = TrigonometryBlockOperations.Log;
-                return logBlock;
-            }
-            case "ExpBlock": {
-                let expBlock = new TrigonometryBlock("Exp");
-                expBlock.operation = TrigonometryBlockOperations.Exp;
-                return expBlock;
-            }
-            case "Exp2Block": {
-                let exp2Block = new TrigonometryBlock("Exp2");
-                exp2Block.operation = TrigonometryBlockOperations.Exp2;
-                return exp2Block;
-            }
-            case "DegreesToRadiansBlock": {
-                let degreesToRadiansBlock = new TrigonometryBlock("Degrees to radians");
-                degreesToRadiansBlock.operation = TrigonometryBlockOperations.Radians;
-                return degreesToRadiansBlock;
-            }
-            case "RadiansToDegreesBlock": {
-                let radiansToDegreesBlock = new TrigonometryBlock("Radians to degrees");
-                radiansToDegreesBlock.operation = TrigonometryBlockOperations.Degrees;
-                return radiansToDegreesBlock;
-            }
-            case "RoundBlock": {
-                let roundBlock = new TrigonometryBlock("Round");
-                roundBlock.operation = TrigonometryBlockOperations.Round;
-                return roundBlock;
-            }
-            case "CeilingBlock": {
-                let ceilingBlock = new TrigonometryBlock("Ceiling");
-                ceilingBlock.operation = TrigonometryBlockOperations.Ceiling;
-                return ceilingBlock;
-            }
-            case "FloorBlock": {
-                let floorBlock = new TrigonometryBlock("Floor");
-                floorBlock.operation = TrigonometryBlockOperations.Floor;
-                return floorBlock;
-            }
-            case "SawToothWaveBlock": {
-                let sawToothWaveBlock = new WaveBlock("SawTooth wave");
-                sawToothWaveBlock.kind = WaveBlockKind.SawTooth;
-                return sawToothWaveBlock;
-            }
-            case "SquareWaveBlock": {
-                let squareWaveBlock = new WaveBlock("Square wave");
-                squareWaveBlock.kind = WaveBlockKind.Square;
-                return squareWaveBlock;
-            }
-            case "TriangleWaveBlock": {
-                let triangleWaveBlock = new WaveBlock("Triangle wave");
-                triangleWaveBlock.kind = WaveBlockKind.Triangle;
-                return triangleWaveBlock;
-            }
-            case "WorldMatrixBlock": {
-                let worldMatrixBlock = new InputBlock("World");
-                worldMatrixBlock.setAsSystemValue(NodeMaterialSystemValues.World);
-                return worldMatrixBlock;
-            }
-            case "WorldViewMatrixBlock": {
-                let worldViewMatrixBlock = new InputBlock("World x View");
-                worldViewMatrixBlock.setAsSystemValue(NodeMaterialSystemValues.WorldView);
-                return worldViewMatrixBlock;
-            }
-            case "WorldViewProjectionMatrixBlock": {
-                let worldViewProjectionMatrixBlock = new InputBlock("World x View x Projection");
-                worldViewProjectionMatrixBlock.setAsSystemValue(NodeMaterialSystemValues.WorldViewProjection);
-                return worldViewProjectionMatrixBlock;
-            }
-            case "ViewMatrixBlock": {
-                let viewMatrixBlock = new InputBlock("View");
-                viewMatrixBlock.setAsSystemValue(NodeMaterialSystemValues.View);
-                return viewMatrixBlock;
-            }
-            case "ViewProjectionMatrixBlock": {
-                let viewProjectionMatrixBlock = new InputBlock("View x Projection");
-                viewProjectionMatrixBlock.setAsSystemValue(NodeMaterialSystemValues.ViewProjection);
-                return viewProjectionMatrixBlock;
-            }
-            case "ProjectionMatrixBlock": {
-                let projectionMatrixBlock = new InputBlock("Projection");
-                projectionMatrixBlock.setAsSystemValue(NodeMaterialSystemValues.Projection);
-                return projectionMatrixBlock;
-            }
-            case "CameraPositionBlock": {
-                let cameraPosition = new InputBlock("Camera position");
-                cameraPosition.setAsSystemValue(NodeMaterialSystemValues.CameraPosition);
-                return cameraPosition;
-            }
-            case "FogColorBlock": {
-                let FogColor = new InputBlock("Fog color");
-                FogColor.setAsSystemValue(NodeMaterialSystemValues.FogColor);
-                return FogColor;
-            }
-            case "PositionBlock": {
-                let meshPosition = new InputBlock("position");
-                meshPosition.setAsAttribute("position");
-                return meshPosition;
-            }
-            case "ScreenPositionBlock": {
-                let meshPosition = new InputBlock("position");
-                meshPosition.setAsAttribute("position2d");
-                return meshPosition;
-            }
-            case "UVBlock": {
-                let meshUV = new InputBlock("uv");
-                meshUV.setAsAttribute("uv");
-                return meshUV;
-            }
-            case "ColorBlock": {
-                let meshColor = new InputBlock("color");
-                meshColor.setAsAttribute("color");
-                return meshColor;
-            }
-            case "NormalBlock": {
-                let meshNormal = new InputBlock("normal");
-                meshNormal.setAsAttribute("normal");
-                return meshNormal;
-            }
-            case "TangentBlock": {
-                let meshTangent = new InputBlock("tangent");
-                meshTangent.setAsAttribute("tangent");
-                return meshTangent;
-            }
-            case "MatrixIndicesBlock": {
-                let meshMatrixIndices = new InputBlock("matricesIndices");
-                meshMatrixIndices.setAsAttribute("matricesIndices");
-                return meshMatrixIndices;
-            }
-            case "MatrixWeightsBlock": {
-                let meshMatrixWeights = new InputBlock("matricesWeights");
-                meshMatrixWeights.setAsAttribute("matricesWeights");
-                return meshMatrixWeights;
-            }
-            case "TimeBlock": {
-                let timeBlock = new InputBlock("Time", undefined, NodeMaterialBlockConnectionPointTypes.Float);
-                timeBlock.animationType = AnimatedInputBlockTypes.Time;
-                return timeBlock;
-            }
-            case "DeltaTimeBlock": {
-                let deltaTimeBlock = new InputBlock("Delta time");
-                deltaTimeBlock.setAsSystemValue(NodeMaterialSystemValues.DeltaTime);
-                return deltaTimeBlock;
-            }
-            case "WorldPositionBlock": {
-                let worldPositionBlock = nodeMaterial.getInputBlockByPredicate((b) => b.isAttribute && b.name === "position");
-                if (!worldPositionBlock) {
-                    worldPositionBlock = new InputBlock("position");
-                    worldPositionBlock.setAsAttribute("position");
-                }
-
-                let worldMatrixBlock = nodeMaterial.getInputBlockByPredicate((b) => b.isSystemValue && b.systemValue === NodeMaterialSystemValues.World);
-
-                if (!worldMatrixBlock) {
-                    worldMatrixBlock = new InputBlock("World");
-                    worldMatrixBlock.setAsSystemValue(NodeMaterialSystemValues.World);
-                }
-
-                let transformBlock = new TransformBlock("World position");
-                worldPositionBlock.connectTo(transformBlock);
-                worldMatrixBlock.connectTo(transformBlock);
-
-                return transformBlock;
-            }
-            case "WorldNormalBlock": {
-                let worldNormalBlock = nodeMaterial.getInputBlockByPredicate((b) => b.isAttribute && b.name === "normal");
-                if (!worldNormalBlock) {
-                    worldNormalBlock = new InputBlock("normal");
-                    worldNormalBlock.setAsAttribute("normal");
-                }
-
-                let worldMatrixBlock = nodeMaterial.getInputBlockByPredicate((b) => b.isSystemValue && b.systemValue === NodeMaterialSystemValues.World);
-
-                if (!worldMatrixBlock) {
-                    worldMatrixBlock = new InputBlock("World");
-                    worldMatrixBlock.setAsSystemValue(NodeMaterialSystemValues.World);
-                }
-
-                let transformBlock = new TransformBlock("World normal");
-                worldNormalBlock.connectTo(transformBlock);
-                worldMatrixBlock.connectTo(transformBlock);
-
-                return transformBlock;
-            }
-            case "WorldTangentBlock": {
-                let worldTangentBlock = nodeMaterial.getInputBlockByPredicate((b) => b.isAttribute && b.name === "tangent");
-                if (!worldTangentBlock) {
-                    worldTangentBlock = new InputBlock("tangent");
-                    worldTangentBlock.setAsAttribute("tangent");
-                }
-
-                let worldMatrixBlock = nodeMaterial.getInputBlockByPredicate((b) => b.isSystemValue && b.systemValue === NodeMaterialSystemValues.World);
-
-                if (!worldMatrixBlock) {
-                    worldMatrixBlock = new InputBlock("World");
-                    worldMatrixBlock.setAsSystemValue(NodeMaterialSystemValues.World);
-                }
-
-                let transformBlock = new TransformBlock("World tangent");
-                worldTangentBlock.connectTo(transformBlock);
-                worldMatrixBlock.connectTo(transformBlock);
-
-                return transformBlock;
-            }
-            case "PBRMetallicRoughnessBlock":
-                return new PBRMetallicRoughnessBlock("PBRMetallicRoughness");
-            case "SheenBlock":
-                return new SheenBlock("Sheen");
-            case "AmbientOcclusionBlock":
-                return new AmbientOcclusionBlock("AmbientOcclusion");
-            case "ReflectivityBlock":
-                return new ReflectivityBlock("Reflectivity");
-            case "AnisotropyBlock":
-                return new AnisotropyBlock("Anisotropy");
-            case "ReflectionBlock":
-                return new ReflectionBlock("Reflection");
-            case "ClearCoatBlock":
-                return new ClearCoatBlock("ClearCoat");
-            case "RefractionBlock":
-                return new RefractionBlock("Refraction");
-            case "SubSurfaceBlock":
-                return new SubSurfaceBlock("SubSurface");
-            case "CurrentScreenBlock":
-                return new CurrentScreenBlock("CurrentScreen");
-            case "ParticleUVBlock": {
-                let uv = new InputBlock("uv");
-                uv.setAsAttribute("particle_uv");
-                return uv;
-            }
-            case "ParticleTextureBlock":
-                return new ParticleTextureBlock("ParticleTexture");
-            case "ParticleColorBlock": {
-                let color = new InputBlock("Color");
-                color.setAsAttribute("particle_color");
-                return color;
-            }
-            case "ParticleTextureMaskBlock": {
-                let u = new InputBlock("TextureMask");
-                u.setAsAttribute("particle_texturemask");
-                return u;
-            }
-            case "ParticlePositionWorldBlock": {
-                let pos = new InputBlock("PositionWorld");
-                pos.setAsAttribute("particle_positionw");
-                return pos;
-            }
-            case "ParticleRampGradientBlock":
-                return new ParticleRampGradientBlock("ParticleRampGradient");
-            case "ParticleBlendMultiplyBlock":
-                return new ParticleBlendMultiplyBlock("ParticleBlendMultiply");
-            case "FragCoordBlock":
-                return new FragCoordBlock("FragCoord");
-            case "ScreenSizeBlock":
-                return new ScreenSizeBlock("ScreenSize");
-        }
-
-        return null;
-    }
-
-    public static GetColorFromConnectionNodeType(type: NodeMaterialBlockConnectionPointTypes) {
-        let color = "#880000";
-        switch (type) {
-            case NodeMaterialBlockConnectionPointTypes.Float:
-                color = "#cb9e27";
-                break;
-            case NodeMaterialBlockConnectionPointTypes.Vector2:
-                color = "#16bcb1";
-                break;
-            case NodeMaterialBlockConnectionPointTypes.Vector3:
-            case NodeMaterialBlockConnectionPointTypes.Color3:
-                color = "#b786cb";
-                break;
-            case NodeMaterialBlockConnectionPointTypes.Vector4:
-            case NodeMaterialBlockConnectionPointTypes.Color4:
-                color = "#be5126";
-                break;
-            case NodeMaterialBlockConnectionPointTypes.Matrix:
-                color = "#591990";
-                break;
-        }
-
-        return color;
-    }
-
-    public static GetConnectionNodeTypeFromString(type: string) {
-        switch (type) {
-            case "Float":
-                return NodeMaterialBlockConnectionPointTypes.Float;
-            case "Vector2":
-                return NodeMaterialBlockConnectionPointTypes.Vector2;
-            case "Vector3":
-                return NodeMaterialBlockConnectionPointTypes.Vector3;
-            case "Vector4":
-                return NodeMaterialBlockConnectionPointTypes.Vector4;
-            case "Matrix":
-                return NodeMaterialBlockConnectionPointTypes.Matrix;
-            case "Color3":
-                return NodeMaterialBlockConnectionPointTypes.Color3;
-            case "Color4":
-                return NodeMaterialBlockConnectionPointTypes.Color4;
-        }
-
-        return NodeMaterialBlockConnectionPointTypes.AutoDetect;
-    }
-
-    public static GetStringFromConnectionNodeType(type: NodeMaterialBlockConnectionPointTypes) {
-        switch (type){
-            case NodeMaterialBlockConnectionPointTypes.Float:
-                return "Float";
-            case NodeMaterialBlockConnectionPointTypes.Vector2:
-                return "Vector2";
-            case NodeMaterialBlockConnectionPointTypes.Vector3:
-                return "Vector3";
-            case NodeMaterialBlockConnectionPointTypes.Vector4:
-                return "Vector4";
-            case NodeMaterialBlockConnectionPointTypes.Color3:
-                return "Color3";
-            case NodeMaterialBlockConnectionPointTypes.Color4:
-                return "Color4";
-            case NodeMaterialBlockConnectionPointTypes.Matrix:
-                return "Matrix";
+            case "Slider":
+                return new BABYLON.GUI.Slider("Slider");
         }
 
-        return "";
+        return BABYLON.GUI.Button.CreateSimpleButton("Button", "Click Me");
     }
 }

guiEditor/src/components/nodeList/nodeListComponent.tsx

@@ -24,144 +24,13 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
 
     private static _Tooltips: {[key: string]: string} = {
         "BonesBlock": "Provides a world matrix for each vertex, based on skeletal (bone/joint) animation",
-        "MorphTargetsBlock": "Provides the final positions, normals, tangents, and uvs based on morph targets in a mesh",
-        "AddBlock": "Adds the left and right inputs of the same type together",
-        "DistanceBlock": "Provides a distance vector based on the left and right input vectors",
-        "DivideBlock": "Divides the left input by the right input of the same type",
-        "LengthBlock": "Outputs the length of an input vector",
-        "MaxBlock": "Outputs the largest value between the left and right inputs of the same type",
-        "MinBlock": "Outputs the smallest value between the left and right inputs of the same type",
-        "MultiplyBlock": "Multiplies the left and right inputs of the same type together",
-        "NegateBlock": "Multiplies the input by -1",
-        "OneMinusBlock": "Subtracts each channel of the input value from 1 (1 - input)",
-        "RandomNumberBlock": "Provides a random number based on an input seed",
-        "ReciprocalBlock": "Quotient of 1 divided by the input",
-        "ScaleBlock": "Multiplies the input channels by a float factor",
-        "SubtractBlock": "Subtracts the right input from the left input of the same type",
-        "GradientBlock": "Returns the color in the gradient represented by the target value of the input",
-        "PosterizeBlock": "Reduces the number of values in each channel to the number in the corresponding channel of steps",
-        "ReplaceColorBlock": "Replaces a reference color in value with the color in replacement blended by distance",
-        "ColorMergerBlock": "Combines float input channels into a color",
-        "ColorSplitterBlock": "Separates color input channels into individual floats",
-        "VectorMergerBlock": "Combines up to four input floats into a vector",
-        "VectorSplitterBlock": "Separates vectors input channels into individual floats",
-        "Color3": "A color made up of red, green, and blue channel values",
-        "Color4": "A color made up of red, green, blue, and alpha channel values",
-        "DeltaTimeBlock": "A float representing the time that has passed since the last frame was rendered",
-        "Float": "A floating point number representing a value with a fractional component",
-        "TextureBlock": "A node for reading a linked or embedded texture file",
-        "TimeBlock": "A float value that represents the time that has passed since the scene was loaded",
-        "Vector2": "a vector composed of X and Y channels",
-        "Vector3": "a vector composed of X, Y, and Z channels",
-        "Vector4": "a vector composed of X, Y, Z, and W channels",
-        "LerpBlock": "Outputs a value that is a mix of the left and right inputs based on the target value",
-        "NLerpBlock": "Outputs a value that is a mix of the left and right inputs based on the target's normalized value",
-        "SmoothStepBlock": "Outputs a value based on a the input value's position on a curve between the two edge values",
-        "StepBlock": "Outputs 1 for any input value above the edge input, outputs 0 for any input value below the edge input",
-        "Matrix": "A 4x4 table of related values",
-        "ProjectionMatrixBlock": "A matrix to remap points in 3D space to 2D plane relative to the screen",
-        "ViewMatrixBlock": "A matrix to remap points in 3D space to 2D plane relative to the view of the scene camera",
-        "ViewProjectionMatrixBlock": "A matrix to remap points in 3D space to 2D view space before remapping to 2D screen space",
-        "WorldMatrixBlock": "A matrix to remap points in 3D local space to 3D world space",
-        "WorldViewProjectionMatrixBlock": "A matrix to remap points in 3D local space to 3D world space, then to 2D camera space, and ending in 2D screen space",
-        "ColorBlock": "Outputs the RGBA color of each vertex in the mesh",
-        "InstancesBlock": "Provides the world matrix for each instance to apply this material to all instances",
-        "MatrixIndicesBlock": "A Vector4 representing the vertex to bone skinning assignments",
-        "MatrixWeightsBlock": "A Vector4 representing the vertex to bone skinning weights",
-        "NormalBlock": "A Vector3 representing the normal of each vertex of the attached mesh",
-        "PositionBlock": "A Vector3 representing the position of each vertex of the attached mesh",
-        "TangentBlock": "A Vector3 representing the tangent of each vertex of the attached mesh",
-        "UVBlock": "A Vector2 representing the UV coordinates of each vertex of the attached mesh",
-        "WorldNormal": "A Vector4 representing the normal of each vertex of the attached mesh transformed into world space",
-        "WorldTangent": "A Vector4 representing the tangent of each vertex of the attached mesh transformed into world space",
-        "PerturbNormalBlock": "Creates high-frequency detail normal vectors based on a normal map, the world position, and world normal",
-        "NormalBlend": "Outputs the result of blending two normal maps together using a per-channel screen",
-        "WorldPosition": "A Vector4 representing the position of each vertex of the attached mesh transformed into world space",
-        "DiscardBlock": "A final node that will not output a pixel below the cutoff value",
-        "FragmentOutputBlock": "A mandatory final node for outputing the color of each pixel",
-        "VertexOutputBlock": "A mandatory final node for outputing the position of each vertex",
-        "ClampBlock": "Outputs values above the maximum or below minimum as maximum or minimum values respectively",
-        "NormalizeBlock": "Remaps the length of a vector or color to 1",
-        "RemapBlock": "Remaps input value between sourceMin and sourceMax to a new range between targetMin and targetMax",
-        "CeilingBlock": "Outputs fractional values as the next higher whole number",
-        "FloorBlock": "Outputs fractional values as the next lower whole number",
-        "RoundBlock": "Outputs fractional values rounded to the nearest whole number",
-        "ModBlock": "Outputs the value of one parameter modulo another",
-        "CameraPositionBlock": "Outputs a Vector3 position of the active scene camera",
-        "FogBlock": "Applies fog to the scene with an increasing opacity based on distance from the camera",
-        "FogColorBlock": "The system value for fog color pulled from the scene",
-        "ImageProcessingBlock": "Provides access to all of the Babylon image processing properties",
-        "LightBlock": "Outputs diffuse and specular contributions from one or more scene lights",
-        "LightInformationBlock": "Provides the direction, color and intensity of a selected light based on its world position",
-        "ReflectionTextureBlock": "Creates a reflection from the input texture",
-        "ViewDirectionBlock": "Outputs the direction vector of where the camera is aimed",
-        "AbsBlock": "Outputs the absolute value of the input value",
-        "ArcCosBlock": "Outputs the inverse of the cosine value based on the input value",
-        "ArcSinBlock": "Outputs the inverse of the sine value based on the input value",
-        "ArcTan2Block": "Outputs the inverse of the tangent value based on the input value",
-        "ArcTanBlock": "Outputs the inverse of the tangent value based on the input value",
-        "CosBlock": "Outputs the cosine value based on the input value",
-        "DegreesToRadiansBlock": "Converts the input degrees value to radians",
-        "Exp2Block": "Outputs the input value multiplied by itself 1 time. (Exponent of 2)",
-        "ExpBlock": "Outputs the input value multiplied by itself 9 time. (Exponent of 10)",
-        "FractBlock": "Outputs only the fractional value of a floating point number",
-        "LogBlock": "The logarithmic value based on the input value",
-        "PowBlock": "Outputs the input value multiplied by itself the number of times equal to the power input (Exponent of power)",
-        "RadiansToDegreesBlock": "Converts the input radians value to degrees",
-        "SawToothWaveBlock": "Outputs a sawtooth pattern value between -1 and 1 based on the input value",
-        "SignBlock": "returns 1 if the input is positive, 0 if input is equal to 0, or -1 if the input is negative",
-        "SinBlock": "Outputs the the sine value based on the input value",
-        "SqrtBlock": "Outputs the the square root of the input value",
-        "SquareWaveBlock": "Outputs a stepped pattern value between -1 and 1 based on the input value",
-        "TanBlock": "Outputs the the tangent value based on the input value",
-        "TriangleWaveBlock": "Outputs a sawtooth pattern value between 0 and 1 based on the input value",
-        "CrossBlock": "Outputs a vector that is perpendicular to two input vectors",
-        "DotBlock": "Outputs the cos of the angle between two vectors",
-        "FresnelBlock": "Outputs the grazing angle of the surface of the mesh, relative to a camera influenced by the bias and power inputs",
-        "TransformBlock": "Transforms a input vector based on the input matrix",
-        "DerivativeBlock": "FRAGMENT SHADER ONLY. Provides the rate of change for an input on a given axis (x,y).",
-        "DesaturateBlock": "Convert a color input into a grayscale representation.",
-        "WorldViewMatrixBlock": "A matrix to remap points in 3D local space to 3D world space, and ending in 2D camera space.",
-        "FrontFacingBlock": "Returns 1 if a mesh triangle faces the normal direction and 0 if it does not.",
-        "SimplexPerlin3DBlock": "Creates a type of gradient noise with few directional artifacts.",
-        "WorleyNoise3DBlock": "Creates a random pattern resembling cells.",
-        "ReflectBlock": "Outputs the direction of the input vector reflected across the surface normal.",
-        "RefractBlock": "Outputs a direction simulating a deflection of the input vector.",
-        "Rotate2dBlock": "Rotates UV coordinates around the W axis.",
-        "PBRMetallicRoughnessBlock": "PBR metallic/roughness material",
-        "SheenBlock": "PBR Sheen block",
-        "AmbientOcclusionBlock": "PBR Ambient occlusion block",
-        "ReflectivityBlock": "PBR Reflectivity block",
-        "AnisotropyBlock": "PBR Anisotropy block",
-        "ReflectionBlock": "PBR Reflection block",
-        "ClearCoatBlock": "PBR ClearCoat block",
-        "RefractionBlock": "PBR Refraction block",
-        "SubSurfaceBlock": "PBR SubSurface block",
-        "ScreenPositionBlock": "A Vector2 representing the position of each vertex of the screen quad (derived from UV set from the quad used to render)",
-        "CurrentScreenBlock": "The screen buffer used as input for the post process",
-        "ParticleUVBlock": "The particle uv texture coordinate",
-        "ParticleTextureBlock": "The particle texture",
-        "ParticleColorBlock": "The particle color",
-        "ParticleTextureMaskBlock": "The particle texture mask",
-        "ParticleRampGradientBlock": "The particle ramp gradient block",
-        "ParticleBlendMultiplyBlock": "The particle blend multiply block",
-        "ParticlePositionWorldBlock": "The world position of the particle",
-        "FragCoordBlock": "The gl_FragCoord predefined variable that contains the window relative coordinate (x, y, z, 1/w)",
-        "ScreenSizeBlock": "The size (in pixels) of the screen window",
     };
-    
-    private _customFrameList: {[key: string]: string};
 
     constructor(props: INodeListComponentProps) {
         super(props);
 
         this.state = { filter: "" };
 
-        let frameJson = localStorage.getItem("Custom-Frame-List");
-        if(frameJson) {
-            this._customFrameList = JSON.parse(frameJson);
-        }
-
         this._onResetRequiredObserver = this.props.globalState.onResetRequiredObservable.add(() => {
             this.forceUpdate();
         });
@@ -175,108 +44,26 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
         this.setState({ filter: filter });
     }
 
-    loadCustomFrame(file: File) {
-        Tools.ReadFile(file, async (data) => {
-            // get Frame Data from file
-            let decoder = new TextDecoder("utf-8");
-            const frameData = JSON.parse(decoder.decode(data));
-            let frameName = frameData.editorData.frames[0].name + "Custom";
-            let frameToolTip = frameData.editorData.frames[0].comments || "";
-
-            try {
-                localStorage.setItem(frameName, JSON.stringify(frameData));
-            } catch (error) {
-                this.props.globalState.onErrorMessageDialogRequiredObservable.notifyObservers("Error Saving Frame");
-                return;
-            }
-
-            let frameJson = localStorage.getItem("Custom-Frame-List");
-            let frameList:  {[key: string]: string} = {};
-            if(frameJson) {
-                frameList = JSON.parse(frameJson); 
-            }
-            frameList[frameName] = frameToolTip;
-            localStorage.setItem("Custom-Frame-List", JSON.stringify(frameList));
-                this._customFrameList = frameList;
-                this.forceUpdate();
-
-        }, undefined, true);
-    }
-
-    removeItem(value : string) : void {
-        let frameJson = localStorage.getItem("Custom-Frame-List");
-            if(frameJson) {
-                let frameList = JSON.parse(frameJson);
-                delete frameList[value];
-                localStorage.removeItem(value);
-                localStorage.setItem("Custom-Frame-List", JSON.stringify(frameList));
-                this._customFrameList = frameList;
-                this.forceUpdate();
-            }        
-    }
-
-    render() {
-
-        let customFrameNames: string[] = [];
-        for(let frame in this._customFrameList){
-            customFrameNames.push(frame);
-        }
-        
+    render() {    
         // Block types used to create the menu from
         const allBlocks: any = {
-            Custom_Gui: customFrameNames,
-            Buttons: ["Text", "Image"],
-            Controls: ["Slider"],
+            Buttons: ["Text", "ImageButton"],
+            Controls: ["Slider", "Checkbox", "ColorPicker", "VisualKeyboard"],
+            Containers: ["DisplayGrid", "Grid", "StackPanel"],
+            Shapes: ["Ellipse","Image", "Line","Rectangle" ],
+            Inputs: ["textBlock", "intputText", "inputPassword"]
         };
 
-        switch (this.props.globalState.mode) {
-            case NodeMaterialModes.Material:
-                delete allBlocks["PostProcess"];
-                delete allBlocks["Particle"];
-                delete allBlocks["Procedural__Texture"];
-                break;
-            case NodeMaterialModes.PostProcess:
-                delete allBlocks["Animation"];
-                delete allBlocks["Mesh"];
-                delete allBlocks["Particle"];
-                delete allBlocks["Procedural__Texture"];
-                break;
-            case NodeMaterialModes.ProceduralTexture:
-                delete allBlocks["Animation"];
-                delete allBlocks["Mesh"];  
-                delete allBlocks["Particle"];              
-                delete allBlocks["PostProcess"];
-                break;
-            case NodeMaterialModes.Particle:
-                delete allBlocks["Animation"];
-                delete allBlocks["Mesh"];
-                delete allBlocks["PostProcess"];            
-                delete allBlocks["Procedural__Texture"];
-                allBlocks.Output_Nodes.splice(allBlocks.Output_Nodes.indexOf("VertexOutputBlock"), 1);
-                break;
-        }
-
         // Create node menu
         var blockMenu = [];
         for (var key in allBlocks) {
             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_Gui") {
-                    return <DraggableLineWithButtonComponent key={block} data={block} tooltip={this._customFrameList[block] || ""} iconImage={deleteButton} iconTitle="Delete"
-                    onIconClick={ value => this.removeItem(value)}/>;
-                }
                 return <DraggableLineComponent key={block} data={block} tooltip={ NodeListComponent._Tooltips[block] || ""}/>;
 
             });
-
-            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);
-                }}/>;
-                blockList.push(line);
-            }         
+        
             if(blockList.length) {
                 blockMenu.push(
                     <LineContainerComponent key={key + " blocks"} title={key.replace("__", ": ").replace("_", " ")} closed={false}>

guiEditor/src/diagram/workbench.tsx

@@ -257,14 +257,12 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
 
 
 
-    appendBlock(block: BABYLON.GUI.Container | BABYLON.GUI.Control) {
-        /*let newNode = new GUINode(block, this.props.globalState, null);
-
-        newNode.appendVisual(this._graphCanvas, this);
-
-        this._nodes.push(newNode);
-
-        return newNode;*/
+    appendBlock(guiElement: BABYLON.GUI.Container | BABYLON.GUI.Control) {
+        var newGuiNode = new GUINode(this.props.globalState, guiElement);
+        newGuiNode.appendVisual(this._graphCanvas, this);
+        this._guiNodes.push(newGuiNode);
+        this.globalState.guiTexture.addControl(guiElement);  
+        return newGuiNode;
     }
 
     distributeGraph() {
@@ -355,46 +353,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
             return;
         }
 
-        // Candidate frame box
-        if (this._frameCandidate) {
-            const rootRect = this.canvasContainer.getBoundingClientRect();      
-
-            const localX = evt.pageX - rootRect.left;
-            const localY = evt.pageY - rootRect.top;
-
-            if (localX > this._selectionStartX) {
-                this._frameCandidate.style.left = `${this._selectionStartX / this.zoom}px`;
-                this._frameCandidate.style.width = `${(localX - this._selectionStartX) / this.zoom}px`;
-            } else {
-                this._frameCandidate.style.left = `${localX / this.zoom}px`;
-                this._frameCandidate.style.width = `${(this._selectionStartX - localX) / this.zoom}px`;
-            }
-
-            if (localY > this._selectionStartY) {                
-                this._frameCandidate.style.top = `${this._selectionStartY / this.zoom}px`;
-                this._frameCandidate.style.height = `${(localY - this._selectionStartY) / this.zoom}px`;
-            } else {
-                this._frameCandidate.style.top = `${localY / this.zoom}px`;
-                this._frameCandidate.style.height = `${(this._selectionStartY - localY) / this.zoom}px`;
-            }
-
-            return;
-        }        
-
-        // Candidate link
-        if (this._candidateLink) {        
-            const rootRect = this.canvasContainer.getBoundingClientRect();       
-            this._candidatePort = null; 
-            this.props.globalState.onCandidateLinkMoved.notifyObservers(new Vector2(evt.pageX, evt.pageY));
-            this._dropPointX = (evt.pageX - rootRect.left) / this.zoom;
-            this._dropPointY = (evt.pageY - rootRect.top) / this.zoom;
-
-            this._candidateLink.update(this._dropPointX, this._dropPointY, true);
-            this._candidateLinkedHasMoved = true;
-            
-            return;
-        }          
-
+        
         // Zoom with mouse + alt
         if (this._altKeyIsPressed && evt.buttons === 1) {
             if (this._oldY < 0) {
@@ -580,9 +539,11 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         
         // Create our first scene.
         var scene = new BABYLON.Scene(engine);
+        scene.clearColor = new BABYLON.Color4(0.2, 0.2, 0.3, 0.5);
+        
         // This creates and positions a free camera (non-mesh)
         var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
-        
+
         // This targets the camera to scene origin
         camera.setTarget(BABYLON.Vector3.Zero());
         

guiEditor/src/graphEditor.tsx

@@ -73,14 +73,14 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
         this._blocks.push(block);
 
         // Graph
-        const node = this._graphCanvas.appendBlock(block);
+        const node = null;// this._graphCanvas.appendBlock(block);
 
 
         return node;
     }
     
     addValueNode(type: string) {
-        let nodeType: NodeMaterialBlockConnectionPointTypes = BlockTools.GetConnectionNodeTypeFromString(type);
+        //let nodeType: NodeMaterialBlockConnectionPointTypes = BlockTools.GetConnectionNodeTypeFromString(type);
 
         //let newInputBlock = new InputBlock(type, undefined, nodeType);
         //return this.createNodeFromObject(newInputBlock);
@@ -414,63 +414,25 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
 
     emitNewBlock(event: React.DragEvent<HTMLDivElement>) {
         var data = event.dataTransfer.getData("babylonjs-material-node") as string;
-        let newNode: GUINode;
-        
-        //new code for gui editor.
 
-        if(data === "Slider")
-        {
-            this._graphCanvas.addNewSlider();
-        }
-        else {
-            this._graphCanvas.addNewButton();
-        }
-       
-        /*if (data.indexOf("Block") === -1) {
-            newNode = this.addValueNode(data);
-        } 
-        else {
-            let block = BlockTools.GetBlockFromString(data, this.props.globalState.nodeMaterial.getScene(), this.props.globalState.nodeMaterial)!;   
-            
-            if (block.isUnique) {
-                const className = block.getClassName();
-                for (var other of this._blocks) {
-                    if (other !== block && other.getClassName() === className) {
-                        this.props.globalState.onErrorMessageDialogRequiredObservable.notifyObservers(`You can only have one ${className} per graph`);                                
-                        return;
-                    }
-                }
-            } 
+        let guiElement = BlockTools.GetGuiFromString(data);
 
-            block.autoConfigure(this.props.globalState.nodeMaterial);       
-            newNode = this.createNodeFromObject(block);
-        };
+        guiElement.width = "150px"
+        guiElement.height = "40px";
+        guiElement.color = "#FFFFFFFF";
+        guiElement.background = "#138016FF";
 
-        let x = event.clientX - event.currentTarget.offsetLeft - this._graphCanvas.x;
-        let y = event.clientY - event.currentTarget.offsetTop - this._graphCanvas.y - 20;
+        let newGuiNode = this._graphCanvas.appendBlock(guiElement);
         
-        newNode.x = x / this._graphCanvas.zoom;
-        newNode.y = y / this._graphCanvas.zoom;
-        newNode.cleanAccumulation();
+        /*let x = event.clientX;// - event.currentTarget.offsetLeft - this._graphCanvas.x;
+        let y = event.clientY;// - event.currentTarget.offsetTop - this._graphCanvas.y - 20; 
 
-        this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
-        this.props.globalState.onSelectionChangedObservable.notifyObservers(newNode);
-
-        let block = newNode.block;
-
-        block.inputs.forEach((connection) => {       
-            if (connection.connectedPoint) {
-                var existingNodes = this._graphCanvas.nodes.filter((n) => { return n.block === (connection as any).connectedPoint.ownerBlock });
-                let connectedNode = existingNodes[0];
+        newGuiNode.x += (x - newGuiNode.x);
+        newGuiNode.y += y - newGuiNode.y;
+        //newGuiNode.cleanAccumulation();*/
 
-                if (connectedNode.x === 0 && connectedNode.y === 0) {
-                    connectedNode.x = x / this._graphCanvas.zoom; 
-                    connectedNode.y = y / this._graphCanvas.zoom;
-                    connectedNode.cleanAccumulation();
-                    y += 80;
-                }
-            }
-        });*/
+        this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
+        this.props.globalState.onSelectionChangedObservable.notifyObservers(newGuiNode);
 
         this.forceUpdate();
     }