Fix color & DataTypes

App.css

@@ -58,7 +58,7 @@
   flex-shrink: 0;
   position: fixed;
   right: 0;
-  height: 100vh;
+  height: calc(100vh - 50px);
   background: #F1F1F1 0% 0% no-repeat padding-box;
 opacity: 1;
 
@@ -68,8 +68,8 @@ opacity: 1;
 
 
 .playground{
-  margin-top: 20px;
-  height: 100vh;
+  margin-top: 0px;
+  height: calc(100vh - 50px);
   display: flex;
   justify-content:center; 
 }

Systems/Environment.js

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { View, Text, StyleSheet } from 'react-native';
+
+export default class Environment {
+
+	constructor(CS) {
+		this.CoreSystem = CS;
+	}
+
+	render() {
+		return <View style={styles.container}>
+          	<View style={styles.row}>
+	          		<Text>Row</Text>
+
+          	</View>
+			<View style={styles.row}>
+	          	<View style={styles.col}>
+	          		<Text>Col</Text>
+	          	</View>
+	          	<View style={[styles.mobileView, styles.col]}>
+	         		{this.CoreSystem.render()}
+	          	</View>
+	          	<View style={styles.col}>
+	          		<Text>Col</Text>
+	          	</View>
+	        </View>
+          	<View style={styles.row}>
+	          		<Text>row</Text>
+
+          	</View>
+		</View>
+	}
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: "column"
+  },
+  mobileView: {
+    backgroundColor: 'white',
+    borderWidth: 4,
+    borderColor: 'orange',
+    flex:1,
+    alignSelf: 'stretch',
+    // iphone X
+    width:1125/3,
+    height: 2436/3 
+  },
+
+  row: {
+  	flexDirection: "row",
+  	borderWidth: 1
+  },
+  col: {
+  	flexDirection: "column",
+  	borderWidth: 1
+  }
+});

Systems/Gui.js

@@ -9,6 +9,7 @@ import SideBar from './SideBar';
 import MainBar from  './MainBar';
 import ModuleBar from './ModuleBar';
 import { ViewNode } from 'trapilib/dist/lib/systems/ViewSystem';
+import Environment from './Environment';
 
 let {
 	CoreSystem,
@@ -27,7 +28,7 @@ export default class Gui {
     this.phone = this.phoneRef;
     this.toolboxRef = React.createRef();
     this.toolbox = this.toolboxRef;
-
+    this.Environment = new Environment(this.CoreSystem);
   
     this.ToolBox = new ToolBox();
     this.MainBar = new MainBar();
@@ -39,6 +40,7 @@ export default class Gui {
       this.forceUpdate();
     })
     this.ToolBox.onUpdate( () =>{
+
       this.SideBar.tool = this.ToolBox.activeTool;
       this.forceUpdate();
     });
@@ -56,7 +58,7 @@ export default class Gui {
         this.phoneMouse = new Mouse(this.phone.current).droppable();
     }
 
-    if(this.ToolBoxMouse !== undefined){
+    if(this.ToolBoxMouse !== undefined && false){
       this.ToolBoxMouse.listen()
       .on('LeftDown',(e) => this.ToolManagement(e))
 
@@ -131,13 +133,7 @@ export default class Gui {
   
 
   mobileRender(){
-    return (	          	
-      	<div ref={this.phoneRef}>
-          <View style={styles.mobileView}>
-         		{this.CoreSystem.render()}
-          </View>
-        </div>
-        )
+    return this.Environment.render();
   }
 
   renderSideBar(){

Systems/SideBar.js

@@ -30,21 +30,7 @@ export default class SideBar{
 
 	forceUpdate(props){
     	this.__onUpdate && this.__onUpdate(props);
-  	}	
-
-  	switchTools(toolName){
-  		//will be a switch function
-  	}
-  	someFunction(){
-
   	}
-  	getStyle(style) {
-          if (typeof style === 'number') {
-            return ReactNativePropRegistry.getByID(style);
-          }
-          return style;
-     }
-
 
     editNode(text,key){
 		this.viewNode.props[key] = text;
@@ -65,7 +51,7 @@ export default class SideBar{
 
 				if(tool.selectedNode.content && tool.selectedNode.content.value) {
 					this.viewNode = tool.selectedNode.content;			
-					console.log("NEVERRRRRRRRRRRRRRRR")	
+					console.log("NEVERRRRRRRRRRRRRRRR")
 					Structure = ModuleSystem.fromViewNode(this.viewNode).Inputs;
 				}
 			}	

Systems/ToolBox.js

@@ -35,9 +35,7 @@ export default class ToolBox {
 	}
 
 	selectTool(key){
-
-		Object.keys(this.tools).forEach((key) => this.tools[key].active = false)
-
+		this.activeTool && (this.activeTool.active = false);
 		let tool = this.tools[key];
 		this.activeTool = tool;	
 		tool.active = true;

yarn.lock

@@ -5619,7 +5619,7 @@ [email protected]:
 
 "trapilib@git+http://git.onarbooks.com/Klapi/TrapiLib.git":
   version "1.0.7"
-  resolved "git+http://git.onarbooks.com/Klapi/TrapiLib.git#3287924baba9643107b341190305d1a0ca060391"
+  resolved "git+http://git.onarbooks.com/Klapi/TrapiLib.git#2f861c5ece4b3ef3c93e230b53bef63b7528ef53"
   dependencies:
     expo "^34.0.0-experiment.8"
     prop-types "^15.7.2"