COLS & ROWS

Systems/Environment.js

@@ -5,13 +5,12 @@ import {Icon} from 'react-native-elements';
 import BaseSystem from './System';
 
 
-export default class Environment extends BaseSystem{
-
-
-	constructor(CS, phoneRef) {
+export default class Environment extends BaseSystem {
+	constructor(CS, ToolBox, phoneRef) {
     super()
 		this.phoneRef = phoneRef;
 		this.CoreSystem = CS;
+    this.ToolBox = ToolBox;
 	}
 
   addRow(){
@@ -25,14 +24,70 @@ export default class Environment extends BaseSystem{
     this.forceUpdate();  
   }
 
+  selectRow(row) {
+    this.ToolBox.selectNode(row);
+    this.forceUpdate();
+  }
+  selectCol(col) {
+    this.ToolBox.selectNode(col);
+    this.forceUpdate();
+  }
+
+  rowHolders(Rows) {
+    return Rows.map((row, index) => {
+      let dom = '',
+          ref = null;
+      try {
+        ref = this.CoreSystem.ModuleSystem.getRef(row.id);
+        dom = ref.current._reactInternalFiber.child.child.stateNode;
+      } catch(e) {}
+      console.log("DOM", ref, dom,dom.clientHeight);
+      return <View 
+          style={[{height: dom.clientHeight}, styles.rowHolderContainer]} 
+          onClick={(e) => this.selectRow(row)}>
+          <View style={styles.rowHolder}>
+            <Text style={styles.rowButton}>{index}</Text>
+          </View>
+      </View>;
+    })
+  }
+
+  colHolders(Cols) {
+    return Cols.map((col, index) => {
+      let dom = '',
+          ref = null;
+      try {
+        ref = this.CoreSystem.ModuleSystem.getRef(col.id);
+        dom = ref.current._reactInternalFiber.child.child.stateNode;
+      } catch(e) {}
+      console.log("DOM", ref, dom,dom.clientHeight);
+      return <View 
+          style={[{width: dom.clientWidth}, styles.colHolderContainer]} 
+          onClick={(e) => this.selectCol(col)}>
+          <View style={styles.colHolder}>
+            <Text style={styles.colButton}>{index}</Text>
+          </View>
+      </View>;
+    })
+  }
 
 	render() {
 		let CurrentView = this.CoreSystem.getCurrentView();
 		let defaultContainer = CurrentView.getDefaultContainer();
 		let Rows = CurrentView.getRows(defaultContainer);
+    let Cols = [];
+    // Check if selection is Row or Col and find ROW to getColumns
+    if(this.ToolBox.selectedNode){
+      let selectedRowNode = this.ToolBox.selectedNode.isRow ? 
+      this.ToolBox.selectedNode : 
+      CurrentView.getParent(this.ToolBox.selectedNode);
+      Cols = CurrentView.getColumns(selectedRowNode);
+    }
+
 		return <View style={styles.container}>
-          	<View style={[styles.row,styles.button]}>
-	          		<Button 
+          	<View style={styles.row}>
+              <View style={styles.button}>
+                <Button 
                 color="#D2691E"
                 onPress = {() => this.addRow()}
                 title={
@@ -41,23 +96,21 @@ export default class Environment extends BaseSystem{
                     containerStyle={{height:10}}
                   />}
                 />
-          	</View>
-			     <View style={styles.row}>
-	          	<View style={styles.col}>
-	          		<Text>Colasdasdasdasdasd</Text>
-	          		{Rows.map((row) => {
-	          			return <Text>Row : {row.id}</Text>
-	          		})}
+              </View>
+            </View>
+            <View style={[styles.row, styles.colHolders]}>
+              {this.colHolders(Cols)}
+            </View>
+			      <View style={styles.row}>
+	          	<View style={[styles.col, styles.rowHolders]}>
+	          		{this.rowHolders(Rows)}
 	          	</View>
 	          	<div ref={this.phoneRef}>
 	          		<View style={[styles.mobileView]}>
-	         			{this.CoreSystem.render()}
-	         		</View>
+	         			  {this.CoreSystem.render()}
+	         		  </View>
 	          	</div>
-	          	<View style={styles.col}>
-	          		<Text>Col</Text>
-	          	</View>
-	        </View>
+	          </View>
           	<View style={[styles.row,styles.button]}>
 	          	<Button 
               color="#D2691E"
@@ -68,7 +121,6 @@ export default class Environment extends BaseSystem{
                   containerStyle={{height:10}}
                 />}
               />
-
           	</View>
 		</View>
 	}
@@ -93,15 +145,40 @@ const styles = StyleSheet.create({
 
   row: {
   	flexDirection: "row",
-  	borderWidth: 1
+  	//borderWidth: 1
   },
   col: {
   	flexDirection: "column",
-  	borderWidth: 1
+  	//borderWidth: 1
   },
   button:{
     flex:1,
     justifyContent:'center',
 
+  },
+  rowHolders: {
+    padding:4
+  },
+  colHolders: {
+    padding:4,
+    justifyContent: 'flex-end'
+  },
+  rowHolderContainer: {
+    justifyContent: 'center'
+  },
+  colHolderContainer: {
+    justifyContent: 'center'
+  },
+  rowHolder: {
+    height: 50,
+    width:100,
+    backgroundColor: 'green',
+    textAlign: 'center'
+  },
+  colHolder: {
+    width:100,
+    height: 50,
+    backgroundColor: 'purple',
+    textAlign: 'center'
   }
 });

Systems/Gui.js

@@ -10,6 +10,7 @@ import MainBar from  './MainBar';
 import ModuleBar from './ModuleBar';
 import { ViewNode } from 'trapilib/dist/lib/systems/ViewSystem';
 import Environment from './Environment';
+import BaseSystem from './System';
 
 let {
 	CoreSystem,
@@ -17,46 +18,46 @@ let {
 } = Library;
 
 
-export default class Gui {
+export default class Gui extends BaseSystem {
 	constructor() {
-    this.CoreSystem = new CoreSystem();
-
-    this.ModuleBar = new ModuleBar(this.CoreSystem); // Add CoreSystem deps
-
-		this.Keyboard = new Keyboard();
+    super();
     this.phoneRef = React.createRef();
     this.phone = this.phoneRef;
     this.toolboxRef = React.createRef();
     this.toolbox = this.toolboxRef;
-    this.Environment = new Environment(this.CoreSystem, this.phoneRef);
-    this.Environment.onUpdate(() => this.forceUpdate())
-    this.ToolBox = new ToolBox();
+
+
+    this.CoreSystem = new CoreSystem();
+		this.Keyboard = new Keyboard();
+
+    this.ToolBox = new ToolBox(this.CoreSystem);
     this.MainBar = new MainBar();
- 		this.load();
-    this.__onUpdate = null;
-    this.SideBar = new SideBar(this.CoreSystem);
-    this.SideBar.tool = this.ToolBox.activeTool;
-    this.SideBar.onUpdate(() => {
-      this.forceUpdate();
-    })
-    this.ToolBox.onUpdate( () =>{
+    this.ModuleBar = new ModuleBar(this.CoreSystem); // Add CoreSystem deps
+    this.SideBar = new SideBar(this.CoreSystem, this.ToolBox);
+    this.Environment = new Environment(this.CoreSystem, this.ToolBox, this.phoneRef);
 
+    this.Environment.onUpdate(() => this.forceUpdate())
+    this.SideBar.onUpdate(() => this.forceUpdate())
+    this.ToolBox.onUpdate( () => {
       this.SideBar.tool = this.ToolBox.activeTool;
       this.forceUpdate();
     });
-
     this.MainBar.onSave( () => {
       this.saveEnv();
       this.forceUpdate()
     })    
 
+ 		this.load();
+    // Setup mainContainer
     let cview = this.CoreSystem.getCurrentView();
     let container = cview.getDefaultContainer();
     let mainContent = new ViewNode(Math.random(), 'BaseContainer', {width: 1125/3, height: 2436/3 - 10});
     cview.setContent(mainContent, container);
+
   }
 
   onMount() {
+    this.forceUpdate();
     if(this.phone){
         // thats fine
         this.ToolBoxMouse = new Mouse(this.toolbox.current);
@@ -92,17 +93,7 @@ export default class Gui {
     }
   }
 
-  onUpdate(fn){
-    // check toolbox is fine
-    this.__onUpdate = fn
-  }
-
-  forceUpdate(){
-    this.__onUpdate && this.__onUpdate();
-  }
-
 	load() {
-    this.ToolBox = new ToolBox(this.CoreSystem);
     try{
       let env = localStorage.getItem('environment');
       if( env === null){

Systems/SideBar.js

@@ -8,6 +8,7 @@ import TextEditor from '../Components/TextEditor';
 // import ColorEditor from '../Components/ColorEditor';
 import TypeHandler from '../Components/TypeHandler.js';
 
+import BaseSystem from './System';
 
 
 
@@ -19,46 +20,41 @@ let {
 	DataTypes
 } = Library; 
 
-export default class SideBar{
-	constructor(CoreSystem){
+export default class SideBar extends BaseSystem {
+	constructor(CoreSystem, ToolBox){
+		super();
 		this.CoreSystem = CoreSystem;
+		this.ToolBox = ToolBox;
 	}
 
-	onUpdate(fn){
-		this.__onUpdate = fn
-	}
-
-	forceUpdate(props){
-    	this.__onUpdate && this.__onUpdate(props);
-  	}
 
     editNode(text,key){
 		this.viewNode.props[key] = text;
 		this.forceUpdate();
     }
 	render(){
-		console.log("DO I EVER COME HEREEEEEEE")
-		let tool = this.tool;
 		let ModuleSystem = this.CoreSystem.ModuleSystem;
 		let CurrentView = this.CoreSystem.getCurrentView();
-		let Routing = this.CoreSystem.Routing;
+		
+		let selectedNode = this.ToolBox.selectedNode;
+		console.log("TOOLBOX" , this.ToolBox);
 		let Structure = {};
 		let viewNodeProps = {};
-		if (tool) {
-			console.log(tool)
-			if (tool.selectedNode && tool.selectedNode.isCol && CurrentView.has(tool.selectedNode)) {
-				this.ColNode = tool.selectedNode;
-				this.RowNode = CurrentView.getParent(this.ColNode);
 
-				if(tool.selectedNode.content && tool.selectedNode.content.value) {
-					this.viewNode = tool.selectedNode.content;			
-					console.log("NEVERRRRRRRRRRRRRRRR")
-					let ctor = ModuleSystem.get(this.viewNode.value, this.viewNode.namespace);
+		if (selectedNode) {
+			if (selectedNode.isCol && CurrentView.has(selectedNode)) {
+				this.ColNode = selectedNode;
+				this.RowNode = CurrentView.getParent(this.ColNode);
+				if(selectedNode.content && selectedNode.content.value) {
+					this.viewNode = selectedNode.content;
+					let ctor = ModuleSystem.fromViewNode(this.viewNode);
 					viewNodeProps = ModuleSystem.validateProps(ctor, this.viewNode.props);
-					console.log(viewNodeProps)
-					Structure = ModuleSystem.fromViewNode(this.viewNode).Inputs;
+					Structure = ctor.Inputs;
 				}
-			}	
+			} else if(selectedNode.isRow) {
+				this.RowNode = selectedNode;
+				console.log("SELECTTTTT", selectedNode)
+			}
 		}
 		let data = Object.keys(Structure || {}).map((key,index) => {
 			let Editor = TypeHandler(Structure[key]);
@@ -86,8 +82,7 @@ export default class SideBar{
   			<View>
   				<Text style={SideBarStyle.title}>Side Bar</Text>
   				<View>
-  					<Text>Container style</Text>
-  					{this.RowNode && <View>
+  					{this.RowNode && <View key={this.RowNode.id}>
   						<Text>Row</Text>
   						<TextEditor title="Inner Columns" 
   						text={this.RowNode && CurrentView.getColumns(this.RowNode).length +''} 
@@ -96,9 +91,10 @@ export default class SideBar{
   							this.forceUpdate();
   						}}/>
   					</View>}			
-  					<View>
+  					{this.ColNode && <View key={this.ColNode.id}>
   						<Text>Col</Text>
-  					</View>
+  						<Text>Nothing Yet</Text>
+  					</View>}
   				</View>
 
 

Systems/System.js

@@ -1,5 +1,3 @@
-
-
 import React from 'react';
 
 export default class BaseSystem{
@@ -13,7 +11,7 @@ export default class BaseSystem{
 		return this;
 	}
 
-	forceUpdate(){
-		return this.__update && this.__update();
+	forceUpdate(props){
+		return this.__update && this.__update(props);
 	}
 }

Systems/Tool.js

@@ -5,7 +5,7 @@ export default class Tool {
 		this.active = false;
 	}
  
-	editViewNode(VS,node){
+	editViewNode(CS,node){
 		console.log("You must override this function with your custom tool")
 	}
 

Systems/ToolBox.js

@@ -4,34 +4,35 @@ import React from 'react';
 import {StyleSheet,View , Text} from 'react-native';
 import Mouse from './mouse';
 
+import BaseSystem from './System';
 
 
 function log(args){
 	console.log(args)
 }
 
-export default class ToolBox {
+export default class ToolBox extends BaseSystem {
 	constructor(CoreSystem, defaultTool = 'Select'){
+		super();
 		this.CoreSystem = CoreSystem;
 		this.tools = {};
 		this.activeTool = null;
+		this.selectedNode = null;
 		this.loadTools(defaultTool);
 		this.__onUpdate = null;
-		
 	}
 
 	on(e) { return this.activeTool.on(e) }
 
-	editNode(View){
-		return this.activeTool.editViewNode(this.CoreSystem,View);
+	editNode(node){
+		this.selectedNode = node;
+		return this.activeTool.editViewNode(this.CoreSystem,node);
 	}
 
-	onUpdate(fn){
-		this.__onUpdate = fn;
-	}
-
-	update(){
-		this.__onUpdate && this.__onUpdate();
+	selectNode(node) {
+		this.selectedNode && (this.selectedNode.props.selected = false);
+		this.selectedNode = node;
+		this.selectedNode.props.selected = true;
 	}
 
 	selectTool(key){
@@ -39,7 +40,7 @@ export default class ToolBox {
 		let tool = this.tools[key];
 		this.activeTool = tool;	
 		tool.active = true;
-		this.update()
+		this.forceUpdate()
 	}
 
 	loadTools(defaultTool){
@@ -57,6 +58,7 @@ export default class ToolBox {
 			this.activeTool = this.tools[defaultTool];
 		}	
 	}
+
 	render(){
 		let tools = Object.keys(this.tools).map((key) => {
 			let toolStyle = styles.tool;

Tools/select.js

@@ -56,8 +56,7 @@ export default class Select extends Tool{
 			selected: true
 		}
 		this.selectedNode = node;
-		let viewName = CS.Routing.getCurrentView();
-		let View = CS.ViewSystem.getView(viewName);
+		let View = CS.getCurrentView();
 		this.selectedNodeParent = View.getParent(node);
 		console.log(this.selectedNodeParent)
 		this.selectedNodeParent.props = {

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#2714a22f7569beeef4c5e4783d370cc2e37c1875"
+  resolved "git+http://git.onarbooks.com/Klapi/TrapiLib.git#ea3a7ef2a8066e9dc988340fce07f6127d79b0c6"
   dependencies:
     expo "^34.0.0-experiment.8"
     prop-types "^15.7.2"