Sec

App.css

@@ -32,7 +32,7 @@
 }
 
  .horizontal_bars .toolbox{
-  width:150px;
+  width:200px;
   background: #B8B8B8;
   z-index: 1;
   flex-shrink: 0;
@@ -42,7 +42,7 @@
 }
 
  .horizontal_bars .sidebar{
-  width: 150px;
+  width: 200px;
   background: #B8B8B8;
   z-index: 1;
 

App.js

@@ -7,16 +7,22 @@ export default class App extends React.Component {
   
   constructor(props){
     super(props)
-    this.GUI = new GUI();
-    this.GUI.onUpdate( () => this.forceUpdate())
+    this.playgroundRef = React.createRef();
+    this.toolboxRef = React.createRef();
+    this.GUI = null;
     this.state = {
-      zoom:1,
-      scrollPos:0
-    }
+        zoom:1,
+        scrollPos:0
+      }
     this.addScrollEvent();
- 
+    this.GUI = new GUI();
+    this.GUI.onUpdate( () => this.forceUpdate())
+  }
+  componentDidMount(){
+    this.GUI = new GUI(this.playgroundRef.current,this.toolboxRef.current);
+    this.GUI.onUpdate( () => this.forceUpdate())
+    
   }
-
 
   addScrollEvent(){
     window.addEventListener('wheel', (e) =>{
@@ -53,6 +59,7 @@ export default class App extends React.Component {
      })*/
   }
   render(){
+    console.log("re render")
     let customStyle = {
       zoom: this.state.zoom
     };  
@@ -63,7 +70,7 @@ export default class App extends React.Component {
           {this.GUI.renderMainBar()}
         </div>
         <div className="horizontal_bars">
-          <div className="toolbox">
+          <div ref={this.toolboxRef} className="toolbox">
             {this.GUI.renderToolBox()}
           </div> 
           <div className="sidebar">
@@ -73,7 +80,7 @@ export default class App extends React.Component {
 
        
         {/*This is a comment*/}
-        <div onClick={(e) => this.dragPage(e)} className="playground" style={{zoom:this.state.zoom}}>
+        <div ref={this.playgroundRef} onClick={(e) => this.dragPage(e)} className="playground" style={{zoom:this.state.zoom}}>
           <div className="phone">
             {this.GUI.mobileRender()}
           </div>

Systems/Gui.js

@@ -17,9 +17,15 @@ let {
 
 
 export default class Gui {
-	constructor() {
+	constructor(phone , toolbox) {
 		this.Keyboard = new Keyboard();
-		this.Mouse = new Mouse(); 
+    this.phone = phone;
+    this.toolbox = toolbox;
+    if(this.phone){
+        this.ToolBoxMouse = new Mouse(this.toolbox);
+        this.phoneMouse = new Mouse(this.phone)
+    }
+   
 		this.CoreSystem = { render: () => null};
     this.ToolBox = new ToolBox();
     this.MainBar = new MainBar();
@@ -32,15 +38,25 @@ export default class Gui {
       }
       this.SideBar = new SideBar(SideBarProps)
       this.forceUpdate()
-   })
+      })
 
     this.MainBar.onSave( () => {
       this.saveEnv();
       this.forceUpdate()
     })
 
-    this.Mouse.listen()
-    .on('LeftDown',(e) => this.ToolManagement(e))
+    if(this.ToolBoxMouse !== undefined){
+      this.ToolBoxMouse.listen()
+      .on('LeftDown',(e) => this.ToolManagement(e))
+
+      this.phoneMouse.listen()
+      .on('LeftDown',(e) => this.ToolManagement(e))     
+    }
+
+
+
+    
+    
   }
 
 
@@ -60,6 +76,7 @@ export default class Gui {
 
 
   ToolManagement(e){
+    console.log("whattttt")
      if(this.ToolBox.activeTool === null){
 
         return null;
@@ -94,7 +111,8 @@ export default class Gui {
 	    }
   	}
 	processElement(event){
-   
+    console.log(event)
+    console.log('sdasdwd')
 	  let ViewNode = this.CoreSystem.ray({event})
 	  let NewNode = this.ToolBox.editNode(ViewNode);
     this.forceUpdate();
@@ -104,7 +122,7 @@ export default class Gui {
 
   	mobileRender(){
   		return (	          	
-        	<View style={styles.mobileView}>
+        	<View ref = {this.phoneRef} style={styles.mobileView}>
            		{this.CoreSystem.render()}
           	</View>
 	        )

Systems/SideBar.js

@@ -12,6 +12,7 @@ export default class SideBar{
 	constructor(props = {}){
 		this.props = props
 		this.__onUpdate = null;
+		console.log("sssd")
 	}
 
 	onToolUpdate(props){
@@ -40,41 +41,40 @@ export default class SideBar{
     editNode(text,node){
 
     }
-
+    //TODO Change everything :P
 	render(){
-		console.log("MAYBE HERE AGAIN SOME HOW")
 		let {
 			tool
 		} = this.props
-		let node;
 		let NodeProps = {};
 		if(tool){
-			
-			node = tool.selectedNode
-			if(node){
-				NodeProps = node.props	
+			if(tool.selectedNode){
+				NodeProps = tool.selectedNode.props	
 			}	
 		}
 		let data = Object.keys(NodeProps || {}).map((key) => {
 			return(
-				<View>
+				<View style={SideBarStyle.body}>
 					<Text>{key}</Text>
-
 					{key === 'text' ? (
 							<TextInput
 					        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
 					        onChangeText={(text) => this.editNode(text,node)}
 					        value={NodeProps[key]}
 					     	 />
-							
 						):(null)}
+
+
+
+
 				</View>
 			)
 
 		})
 		return (
-  			<View><Text>Side Bar</Text>
-  			 {data}
+  			<View style={SideBarStyle}>
+  				<Text style={SideBarStyle.title}>Side Bar</Text>
+  			 	{data}
   			</View>
   			)
 	}
@@ -82,3 +82,33 @@ export default class SideBar{
 
 
 
+
+const SelectedStyle = StyleSheet.create({
+	container:{
+		padding:5,
+		borderWidth:2,
+		borderColor:'green'
+	}
+})
+
+
+
+const SideBarStyle = StyleSheet.create({
+	container:{
+		padding:1,
+		flex:1,
+		flexDirection:'row'
+	},
+	title:{
+		fontSize:20,
+		textAlign:'center',
+		fontFamily:'halvetica',
+		color:'black',
+		borderBottomWidth:1,
+		borderBottomColor:'black'
+	},
+	body:{
+		paddingLeft:5,
+		paddingRight:5
+	}
+})

Tools/InsertForm.js

@@ -36,7 +36,7 @@ export default class InsertForm extends Tool{
 
 	editViewNode(VS,node){
 		let View = null;
-		if(!node.id){
+		if(!node ){
 			return;
 		}
 		Object.keys(VS.views).map((key) => {

Tools/select.js

@@ -36,7 +36,6 @@ const mStyle = StyleSheet.create({
 })
 
 
-
 export default class Select extends Tool{
 	constructor(props){
 		super(props)
@@ -44,25 +43,30 @@ export default class Select extends Tool{
 	}
 
 	editViewNode(VS,node){
-
-
-		if(!node.id){
+		if(!node || !node.id){
+			let unselect = StyleSheet.create({
+				container:{
+					padding:0,
+					borderWidth:0
+				}
+			})
+			if(this.selectedNode.props)
+				this.selectedNode.props.style.container = unselect.container;
+			this.selectedNode = null;
 			return;
 		}
 		this.selectedNode = node;
-		/*let View = null;
-		Object.keys(VS.views).map((key) => {
-			
-			if(VS.views[key].ViewTree.nodes[node.id]){
-				View = key;
+		let style = StyleSheet.create({
+			container:{
+				padding:5,
+				borderWidth:2
 			}
-		})*/
-		//let EditNode = new ViewNode(Math.random(),"ViewComp",{text:"Manipulationg the dom",style:styles})	
-		
-
+		})
+		node.props.style.container = style.container
+		//	let EditNode = new ViewNode(Math.random(),"ViewComp",{text:"Manipulationg the dom",style:styles})	
 		//VS.views[View].addViewNode(EditNode,node)
 		//VS.views[View].replace(node,EditNode);
-		//console.log(VS.views[View])
+		
 		
 
 		
@@ -79,3 +83,10 @@ export default class Select extends Tool{
 	}
 }
 
+const UnSelectedCont = StyleSheet.create({
+	container:{
+		padding:0,
+		borderWidth:1
+	}
+})
+