Up

App.css

@@ -28,12 +28,11 @@
 }
 
  .horizontal_bars .toolbox{
-  width:306px;
   background: #F1F1F1;
   z-index: 1;
   flex-shrink: 0;
   position: fixed;
-  height: 100vh;
+  height: calc( 100vh - 50px );
   display: flex;
   flex-direction: row;
 
@@ -47,7 +46,9 @@
 }
 
 .horizontal_bars .toolbox .moduleBar{
-  padding:10px;
+  padding: 10px;
+  overflow-y: scroll;
+  overflow-x: hidden;
 }
 
  .horizontal_bars .sidebar{

App.js

@@ -21,7 +21,7 @@ export default class App extends React.Component {
         zoom:1,
         scrollPos:0
       }
-    this.addScrollEvent();
+    // this.addScrollEvent();
     this.GUI = new GUI();
     this.GUI.onUpdate( () => this.forceUpdate())
   }

Components/TextEditor.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import {View , Text, TextInput, Button,StyleSheet} from 'react-native';
+import { Icon } from 'react-native-elements'
+
+export default function TextEditor(props) {
+	let [text, setText] = useState(props.text || '');
+	let title = props.title || "Input";
+	return (
+			<View style={styles.container}>
+				<Text style={styles.title}>{title}</Text>
+				<TextInput style={styles.defaultInput} 
+					onChangeText={(text) => {
+						props.onChange && props.onChange(text);
+						setText(text);
+					}}
+    				value={text}/>
+			</View>
+		);
+}
+
+const styles = StyleSheet.create({
+	container:{
+		padding:0,
+		borderWidth:1
+	},
+	defaultInput: {
+
+	},
+	title: {
+
+	}
+})
+

Systems/Gui.js

@@ -34,6 +34,7 @@ export default class Gui {
  		this.load();
     this.__onUpdate = null;
     this.SideBar = new SideBar(this.CoreSystem);
+    this.SideBar.tool = this.ToolBox.activeTool;
     this.SideBar.onUpdate(() => {
       this.forceUpdate();
     })
@@ -45,9 +46,7 @@ export default class Gui {
     this.MainBar.onSave( () => {
       this.saveEnv();
       this.forceUpdate()
-    })
-
-    
+    })    
   }
 
   onMount() {
@@ -82,13 +81,10 @@ export default class Gui {
 
 
   ToolManagement(e){
-    console.log("whattttt")
-     if(this.ToolBox.activeTool === null){
-
-        return null;
-      }else{
-        this.processElement(e)
-      }
+    console.log("whattttt", this)
+    if(this.ToolBox.activeTool !== null){
+      this.processElement(e)
+    }
   }
 
 

Systems/ModuleBar.js

@@ -38,14 +38,15 @@ export default class ModuleBar {
 					</View>
 
 					<View style= {ModPrev.ContentCont} key={name} onClick={() => this.selectModule(list[key][name], key)}>
-						
-						<View style = {ModPrev.content} draggable={true} onDragStart={(ev) => this.dragStart(ev, {
+						<View style = {ModPrev.content}>
+						<Text draggable={true} onDragStart={(ev) => this.dragStart(ev, {
 							namespace: key,
 							ctor: name
 						})}>
 						{React.createElement(list[key][name])}
-						</View>
+						</Text>
 						
+						</View>
 					</View>
 				</View>)
 			});
@@ -91,7 +92,8 @@ const ModPrev = StyleSheet.create({
 	ContentCont:{
 		backgroundColor:'#F8F8F8',
 		width:216,
-		height:99
+		height:99,
+
 	},
 	content:{
 		flex:1,

Systems/SideBar.js

@@ -2,6 +2,9 @@ import React from 'react';
 import {StyleSheet, View, Text} from 'react-native';
 import Library from 'trapilib/dist/lib';
 import { TextInput } from 'react-native';
+
+import TextEditor from '../Components/TextEditor';
+
 let {
 	CoreSystem,
 	ViewSystem,
@@ -46,13 +49,22 @@ export default class SideBar{
 		console.log("@@@@@@@@@@@@@")
 		console.log(tool)
 		let ModuleSystem = this.CoreSystem.ModuleSystem;
+		let CurrentView = this.CoreSystem.getCurrentView();
+		let Routing = this.CoreSystem.Routing;
 		let Structure = {};
 		if(tool){
-			if(tool.selectedNode && tool.selectedNode.content && tool.selectedNode.content.value){
-				this.viewNode = tool.selectedNode.content;
-				// give ViewNode
-				Structure = ModuleSystem.fromViewNode(this.viewNode).Inputs;
-				console.log(Structure);
+			if(tool.selectedNode && tool.selectedNode.isCol)
+			{
+				this.ColNode = tool.selectedNode;
+				this.RowNode = CurrentView.getParent(this.ColNode);
+				console.log("ROWNODE" , this.RowNode);
+				console.log("ColNode" , this.ColNode);
+				console.log("viewNode" , this.viewNode);
+
+				if(tool.selectedNode.content && tool.selectedNode.content.value){
+					this.viewNode = tool.selectedNode.content;				
+					Structure = ModuleSystem.fromViewNode(this.viewNode).Inputs;
+				}
 			}	
 		}
 		let data = Object.keys(Structure || {}).map((key) => {
@@ -70,9 +82,26 @@ export default class SideBar{
 			)
 
 		})
+		console.log("ROW NODE DATA DATA" , this.RowNode , this.RowNode && CurrentView.getColumns(this.RowNode).length);
 		return (
-  			<View style={SideBarStyle}>
+  			<View>
   				<Text style={SideBarStyle.title}>Side Bar</Text>
+  				<View>
+  					<Text>Container style</Text>
+  					{this.RowNode && <View>
+  						<Text>Row</Text>
+  						<TextEditor title="Inner Columns" 
+  						text={this.RowNode && CurrentView.getColumns(this.RowNode).length +''} 
+  						onChange={(cols) => {
+  							console.log(cols, "COLS");
+  							CurrentView.setColumns(this.RowNode, parseInt(cols))
+  							this.forceUpdate();
+  						}}/>
+  					</View>}			
+  					<View>
+  						<Text>Col</Text>
+  					</View>
+  				</View>
   			 	{data}
   			</View>
   			)

Systems/ToolBox.js

@@ -10,12 +10,12 @@ function log(args){
 	console.log(args)
 }
 
-export default class ToolBox{
-	constructor(CoreSystem){
+export default class ToolBox {
+	constructor(CoreSystem, defaultTool = 'Select'){
 		this.CoreSystem = CoreSystem;
 		this.tools = {};
-		this.loadTools();
 		this.activeTool = null;
+		this.loadTools(defaultTool);
 		this.__onUpdate = null;
 		//this.selectTool('Select')
 		
@@ -41,7 +41,7 @@ export default class ToolBox{
 		this.update()
 	}
 
-	loadTools(){
+	loadTools(defaultTool){
 		log("Loading Tools")
 		Object.keys(Tools).map((key) => {
 			if( Tools[key].prototype instanceof Tool === false ){
@@ -52,7 +52,9 @@ export default class ToolBox{
 			}
 			this.tools[key] = new Tools[key]();
 		})
-	
+		if(defaultTool && this.tools[defaultTool]) {
+			this.activeTool = this.tools[defaultTool];
+		}	
 	}
 	render(){
 			let tools = Object.keys(this.tools).map((key) => {

yarn.lock

@@ -920,9 +920,9 @@
     "@types/lodash" "*"
 
 "@types/lodash@*":
-  version "4.14.136"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.136.tgz#413e85089046b865d960c9ff1d400e04c31ab60f"
-  integrity sha512-0GJhzBdvsW2RUccNHOBkabI8HZVdOXmXbXhuKlDEd5Vv12P7oAVGfomGp3Ne21o5D/qu1WmthlNKFaoZJJeErA==
+  version "4.14.137"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.137.tgz#8a4804937dc6462274ffcc088df8f14fc1b368e2"
+  integrity sha512-g4rNK5SRKloO+sUGbuO7aPtwbwzMgjK+bm9BBhLD7jGUiGR7zhwYEhSln/ihgYQBeIJ5j7xjyaYzrWTcu3UotQ==
 
 "@types/qs@^6.5.1":
   version "6.5.3"
@@ -1213,9 +1213,9 @@ babel-plugin-module-resolver@^3.1.1:
     resolve "^1.4.0"
 
 babel-plugin-react-native-web@^0.11.2:
-  version "0.11.6"
-  resolved "https://registry.yarnpkg.com/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.11.6.tgz#111c0754435c8280659108fd3d2fe7e774da928d"
-  integrity sha512-F+fFARfXRPVy4DH+cThRyTXPEt6XVXPzDsapygx1E4QBguhjqPNbfjUNdfrNQfkvSk1ukH0DWu6SQe4lK7GLDA==
+  version "0.11.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.11.7.tgz#15b578c0731bd7d65d334f9c759d95e8e4a602e2"
+  integrity sha512-CxE7uhhqkzAFkwV2X7+Mc/UVPujQQDtja/EGxCXRJvdYRi72QTmaJYKbK1lV9qgTZuB+TDguU89coaA9Z1BNbg==
 
 babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0:
   version "7.0.0-beta.0"
@@ -1883,9 +1883,9 @@ [email protected]:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 electron-to-chromium@^1.3.191:
-  version "1.3.230"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.230.tgz#2d0618cb6f724391d5fd0926dde84d6c67cbcda9"
-  integrity sha512-r0RljY5DZi9RX4v8mjHxJkDWnQe+nsrkGlHtrDF2uvZcvAkw+iglvlQi1794gZhwRtJoDOomMJlDHL2LfXSCZA==
+  version "1.3.232"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.232.tgz#3d812f5082b26b852bd4e98818cd86f10b6ff128"
+  integrity sha512-11F8S49B+8AJy5V540BofxvJ1tWP4wZZ0sOre6KF32evS1YSHXiUB7+TQ/mjrfzg1lirnlA8XDdU8CDcJrBCbA==
 
 encodeurl@~1.0.2:
   version "1.0.2"
@@ -4575,9 +4575,9 @@ pump@^3.0.0:
     once "^1.3.1"
 
 qs@^6.5.0:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
-  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.8.0.tgz#87b763f0d37ca54200334cd57bb2ef8f68a1d081"
+  integrity sha512-tPSkj8y92PfZVbinY1n84i1Qdx75lZjMQYx9WZhnkofyxzw2r7Ho39G3/aEvSUdebxpnnM4LZJCtvE/Aq3+s9w==
 
 query-string@^6.2.0:
   version "6.8.2"
@@ -4745,9 +4745,9 @@ [email protected]:
   integrity sha512-yO9vWi/11m2hEJl8FrW1SMeVzFfPtMKh20MUInGqlsL0H8Ya2JGGlFfrBzx1KiFR2hFb5OdsTLYNtcVZtJ6pLQ==
 
 react-native-web@^0.11.4, react-native-web@^0.11.5:
-  version "0.11.6"
-  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.11.6.tgz#7766c1550331c8724b2d5fe5d1b9ad83efe32c91"
-  integrity sha512-Hqf4mnvuuaEPzcnXyk3UkU2pX4L+UpUzFNakg4diiMq/+dCLDYTAJwQerC69YLoB7ItpWIby1LHUx0uVn3opzg==
+  version "0.11.7"
+  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.11.7.tgz#d173d5a9b58db23b6d442c4bc4c81e9939adac23"
+  integrity sha512-w1KAxX2FYLS2GAi3w3BnEZg/IUu7FdgHnLmFKHplRnHMV3u1OPB2EVA7ndNdfu7ds4Rn2OZjSXoNh6F61g3gkA==
   dependencies:
     array-find-index "^1.0.2"
     create-react-class "^15.6.2"
@@ -5585,7 +5585,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#f5204ea1c6b16f8695d3f208bfb0f411da2e7cf8"
+  resolved "git+http://git.onarbooks.com/Klapi/TrapiLib.git#79d1bb06e4fb96e48856511e666816d841e5340b"
   dependencies:
     expo "^34.0.0-experiment.8"
     prop-types "^15.7.2"