cleaning up code for PR

nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -7,9 +7,10 @@ import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialMo
 import { Observer } from 'babylonjs/Misc/observable';
 import { Nullable } from 'babylonjs/types';
 import { DraggableLineWithButtonComponent } from '../../sharedComponents/draggableLineWithButtonComponent';
-import { LineWithFileButtonContainerComponent } from '../../sharedComponents/lineWithFileButtonContainerComponent';
+import { LineWithFileButtonComponent } from '../../sharedComponents/lineWithFileButtonComponent';
 import { Tools } from 'babylonjs';
-
+const addButton = require("../../../imgs/add.svg");
+const deleteButton = require('../../../imgs/delete.svg');
 
 require("./nodeList.scss");
 
@@ -161,7 +162,6 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
             this.customFrameList = JSON.parse(frameJson);
         }
 
-
         this._onResetRequiredObserver = this.props.globalState.onResetRequiredObservable.add(() => {
             this.forceUpdate();
         });
@@ -206,9 +206,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
                 localStorage.setItem("Custom-Frame-List", newFrameJson);
                 this.customFrameList = newframeList;
                 this.forceUpdate();
-            }
-
-        
+            }        
         }, undefined, true);
     }
 
@@ -222,8 +220,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
                 localStorage.setItem("Custom-Frame-List", JSON.stringify(frameList));
                 this.customFrameList = frameList;
                 this.forceUpdate();
-            }
-           
+            }        
     }
 
     render() {
@@ -277,22 +274,20 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
             .map((block: any, i: number) => {
                 let tooltip = NodeListComponent._Tooltips[block] || "";
 
-                if(key.indexOf("Custom") === -1) {
+                if(key != "Custom_Frames") {
                 
                    return <DraggableLineComponent key={block} data={block} tooltip={tooltip}/>;
                 }
-                return <DraggableLineWithButtonComponent key={block} data={block} tooltip={tooltip} 
+                return <DraggableLineWithButtonComponent key={block} data={block} tooltip={tooltip} iconImage={deleteButton} iconTitle="Delete"
                 onIconClick={ value => this.removeItem(value)}/>;
             });
 
-            if(key.indexOf("Custom") != -1)
-            {
-                let line =  <LineWithFileButtonContainerComponent key={key + " blocks"} title={key.replace("__", ": ").replace("_", " ")} closed={false}
-                label="Add Custom Frame" uploadName={'custom-frame-upload'}  accept=".json" onClick={(file) => {
+            if(key === "Custom_Frames") {
+                let line =  <LineWithFileButtonComponent 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(
@@ -322,6 +317,5 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
                 </div>
             </div>
         );
-
     }
 }

nodeEditor/src/graphEditor.tsx

@@ -544,36 +544,27 @@ 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: GraphNode;
-
         
         if(data.indexOf("Custom") > -1) {
             let storageData = localStorage.getItem(data);
             if(storageData) {   
                 let frameData = JSON.parse(storageData);
 
-                let x = event.clientX - event.currentTarget.offsetLeft - this._graphCanvas.x - this.NodeWidth;
-                let y = event.clientY - event.currentTarget.offsetTop - this._graphCanvas.y - 20;
-                
-                let newX= x / this._graphCanvas.zoom;
-                let newY= y / this._graphCanvas.zoom;
+                //edit position before loading.
+                let newX = (event.clientX - event.currentTarget.offsetLeft - this._graphCanvas.x - this.NodeWidth) / this._graphCanvas.zoom;
+                let newY = (event.clientY - event.currentTarget.offsetTop - this._graphCanvas.y - 20) / this._graphCanvas.zoom;;
                 let oldX = frameData.editorData.frames[0].x;
                 let oldY = frameData.editorData.frames[0].y;
                 frameData.editorData.frames[0].x = newX;
                 frameData.editorData.frames[0].y = newY;
-
                 for (var location of frameData.editorData.locations) 
                 {
-                    location.x +=  newX- oldX;
-                    location.y +=  newY- oldY;       
+                    location.x +=  newX - oldX;
+                    location.y +=  newY - oldY;       
                 }
-                SerializationTools.AddFrameToMaterial(frameData, this.props.globalState, this.props.globalState.nodeMaterial); 
-
-                
-                let newFrame = this._graphCanvas.frames[this._graphCanvas.frames.length -1];
-                newFrame.cleanAccumulation();
-                this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
-                this.props.globalState.onSelectionChangedObservable.notifyObservers(newFrame);
 
+                SerializationTools.AddFrameToMaterial(frameData, this.props.globalState, this.props.globalState.nodeMaterial); 
+                this._graphCanvas.frames[this._graphCanvas.frames.length -1].cleanAccumulation();
                 this.forceUpdate();
                 return;
             }

nodeEditor/src/sharedComponents/draggableLineWithButtonComponent.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
-const deleteButton = require('../../imgs/delete.svg');
 
 export interface IDraggableLineWithButtonComponent {
     data: string;
     tooltip: string;
+    iconImage: any;
     onIconClick: (value: string) => void;
+    iconTitle: string;
 }
 
 export class DraggableLineWithButtonComponent extends React.Component<IDraggableLineWithButtonComponent> {
@@ -21,8 +22,8 @@ export class DraggableLineWithButtonComponent extends React.Component<IDraggable
                     event.dataTransfer.setData("babylonjs-material-node", this.props.data);
                 }}>
                 {this.props.data.substr(0, this.props.data.length - 6)}
-                <div className="icon" onClick={() => { this.props.onIconClick(this.props.data); }} title="Delete">
-                    <img title="Delete" className="deleteIcon" src={deleteButton}/>
+                <div className="icon" onClick={() => { this.props.onIconClick(this.props.data); }} title={this.props.iconTitle}>
+                    <img title={this.props.iconTitle} src={this.props.iconImage}/>
                 </div>
             </div>
         );

nodeEditor/src/sharedComponents/lineWithFileButtonContainerComponent.tsx

@@ -1,23 +1,22 @@
 import * as React from "react";
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
-const addButton = require('../../imgs/add.svg');
 
-interface ILineWithFileButtonContainerComponentProps {
+interface ILineWithFileButtonComponentProps {
     title: string;
     closed?: boolean;
     label: string;
-    onClick: (file: File) => void;
+    iconImage: any;
+    onIconClick: (file: File) => void;
     accept: string;
     uploadName?: string;
 }
 
-export class LineWithFileButtonContainerComponent extends React.Component<ILineWithFileButtonContainerComponentProps, { isExpanded: boolean }> {
+export class LineWithFileButtonComponent extends React.Component<ILineWithFileButtonComponentProps, { isExpanded: boolean }> {
     private uploadRef: React.RefObject<HTMLInputElement>
-    constructor(props: ILineWithFileButtonContainerComponentProps) {
+    constructor(props: ILineWithFileButtonComponentProps) {
         super(props);
 
         let initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);
-
         this.state = { isExpanded: initialState };
         this.uploadRef = React.createRef();
     }
@@ -25,35 +24,29 @@ export class LineWithFileButtonContainerComponent extends React.Component<ILineW
     onChange(evt: any) {
         var files: File[] = evt.target.files;
         if (files && files.length) {
-            this.props.onClick(files[0]);
+            this.props.onIconClick(files[0]);
         }
-
         evt.target.value = "";
     }
 
-
     switchExpandedState(): void {
         const newState = !this.state.isExpanded;
-
         DataStorage.WriteBoolean(this.props.title, newState);
-
         this.setState({ isExpanded: newState });
     }
 
     render() {
         return (
-            <div className="nonDraggableLine withButton" title="add">
-                Add...
-                <div className="icon" title="Upload Custom Frame">
-                <img src={addButton}/>
+            <div className="nonDraggableLine withButton">
+                {this.props.label}
+                <div className="icon" title={this.props.title}>
+                <img src={this.props.iconImage}/>
                 </div>
-                <div className="buttonLine" title="Upload Custom Frame">
+                <div className="buttonLine" title={this.props.title}>
                     <label htmlFor={this.props.uploadName ? this.props.uploadName : "file-upload"} className="file-upload"/>   
                     <input ref={this.uploadRef} id={this.props.uploadName ? this.props.uploadName : "file-upload"} type="file" accept={this.props.accept} onChange={evt => this.onChange(evt)} />
                 </div>
-                
             </div>
-        );
-    
+        ); 
     }
-}
+}