Chanmges

Systems/Gui.js

@@ -8,7 +8,7 @@ import Library from 'trapilib/dist/lib';
 import SideBar from './SideBar';
 import MainBar from  './MainBar';
 import ModuleBar from './ModuleBar';
-
+import { ViewNode } from 'trapilib/dist/lib/systems/ViewSystem';
 
 let {
 	CoreSystem,
@@ -18,27 +18,26 @@ let {
 
 export default class Gui {
 	constructor() {
-    this.ModuleBar = new ModuleBar();
+    this.CoreSystem = new CoreSystem();
+
+    this.ModuleBar = new ModuleBar(this.CoreSystem); // Add CoreSystem deps
+
 		this.Keyboard = new Keyboard();
     this.phoneRef = React.createRef();
     this.phone = this.phoneRef;
     this.toolboxRef = React.createRef();
     this.toolbox = this.toolboxRef;
 
-   
-		this.CoreSystem = { render: () => null};
+  
     this.ToolBox = new ToolBox();
     this.MainBar = new MainBar();
  		this.load();
     this.__onUpdate = null;
-    this.SideBar = new SideBar();
+    this.SideBar = new SideBar(this.CoreSystem);
     this.ToolBox.onUpdate( () =>{
-      let SideBarProps = {
-          tool:this.ToolBox.activeTool
-      }
-      this.SideBar = new SideBar(SideBarProps)
-      this.forceUpdate()
-      })
+      this.SideBar.tool = this.ToolBox.activeTool;
+      this.forceUpdate();
+    });
 
     this.MainBar.onSave( () => {
       this.saveEnv();
@@ -52,7 +51,7 @@ export default class Gui {
     if(this.phone){
         // thats fine
         this.ToolBoxMouse = new Mouse(this.toolbox.current);
-        this.phoneMouse = new Mouse(this.phone.current);
+        this.phoneMouse = new Mouse(this.phone.current).droppable();
     }
 
     if(this.ToolBoxMouse !== undefined){
@@ -61,6 +60,7 @@ export default class Gui {
 
       this.phoneMouse.listen()
       .on('LeftDown',(e) => this.ToolManagement(e))     
+      .on('Drop', (e) => this.dropContent(e))
     }
   }
 
@@ -98,67 +98,75 @@ export default class Gui {
   }
 
 	load() {
-	    this.CoreSystem = new CoreSystem();
-      this.ToolBox = new ToolBox(this.CoreSystem);
-	    try{
-        let env = localStorage.getItem('environment');
-        if( env === null){
-          this.CoreSystem.import(JSON.parse(jsLoad));
-        }else{
-          this.CoreSystem.import(JSON.parse(env));
-        }
-	      
-	      this.forceUpdate();
-	    } catch(e) {
-	      console.log(e);
-	    }
-  	}
+    this.ToolBox = new ToolBox(this.CoreSystem);
+    try{
+      let env = localStorage.getItem('environment');
+      if( env === null){
+        this.CoreSystem.import(JSON.parse(jsLoad));
+      }else{
+        this.CoreSystem.import(JSON.parse(env));
+      }
+      
+      this.forceUpdate();
+    } catch(e) {
+      console.log(e);
+    }
+	}
+
 	processElement(event){
-    console.log(event)
-    console.log('sdasdwd')
 	  let Node = this.CoreSystem.ray({event});
 	  let NewNode = this.ToolBox.editNode(Node);
     this.forceUpdate();
-   }
+  }
 
+  dropContent({event, data}) {
+    data = JSON.parse(data);
+    let Node = this.CoreSystem.ray({event});
+    // Node.content 
+    Node.props.selected = true;
+    console.log(Node, data);
+    let node = new ViewNode(Math.random(), data.ctor, {}, data.namespace);
+    Node.content = node;
+    console.log(node);
+
+    this.forceUpdate();
+  }
   
 
-  	mobileRender(){
-  		return (	          	
-        	<div ref={this.phoneRef}>
-            <View style={styles.mobileView}>
-           		{this.CoreSystem.render()}
-            </View>
-          </div>
-	        )
-  	}
-
-  	renderSideBar(){
-  		 return this.SideBar.render();
-  	}
-
-    renderMainBar(){
-      return this.MainBar.render();
-    }
+  mobileRender(){
+    return (	          	
+      	<div ref={this.phoneRef}>
+          <View style={styles.mobileView}>
+         		{this.CoreSystem.render()}
+          </View>
+        </div>
+        )
+  }
+
+  renderSideBar(){
+    return this.SideBar.render();
+  }
+
+  renderMainBar(){
+    return this.MainBar.render();
+  }
 
-  	renderToolBox(){
-  		return (
-  			<div ref = {this.toolboxRef}>
+  renderToolBox(){
+  	return (
+  		<div ref = {this.toolboxRef}>
         <View style={styles.toolbarView}>
           		{this.ToolBox.render()}
         </View>
-	     	</div>)
-  	}
-
-    renderModuleBar(){
-      return (
-        <View>
-          {this.ModuleBar.render()}
-        </View>
-        )
-    }
-
+     	</div>)
+  }
 
+  renderModuleBar(){
+    return (
+      <View>
+        {this.ModuleBar.render()}
+      </View>
+      )
+  }
 }
 
 

Systems/ModuleBar.js

@@ -5,13 +5,37 @@ import { TextInput } from 'react-native';
 
 
 export default class ModuleBar {
-	constructor(){
+	constructor(CS){
+		this.CoreSystem = CS;
+	}
+
+	selectModule(mod, namespace) {
+		this.selectedModule = mod;
+		this.selectedModuleNamespace = namespace;
+	}
 
+	dragStart(ev, data) {
+		ev.nativeEvent.dataTransfer.setData("MyObject", JSON.stringify(data));
 	}
 
+
+
 	render(){
-		return(
-			<Text> This is the Module Bar</Text>
-			)
+		let list = this.CoreSystem.ModuleSystem.list();
+		let Render = Object.keys(list).map((key, index) => {
+			let items = Object.keys(list[key]).map((name,ind) => {
+				return <View key={name} onClick={() => this.selectModule(list[key][name], key)}>
+					<Text draggable={true} onDragStart={(ev) => this.dragStart(ev, {
+						namespace: key,
+						ctor: name
+					})}>{name}</Text>
+				</View>
+			});
+			return  <View key={key}>
+						<Text>{key}</Text>
+						{items}
+					</View>;
+		})
+		return Render;
 	}
 }

Systems/SideBar.js

@@ -9,15 +9,12 @@ let {
 } = Library; 
 
 export default class SideBar{
-	constructor(props = {}){
-		this.props = props
-		this.__onUpdate = null;
-		console.log("sssd")
+	constructor(CoreSystem){
+		this.CoreSystem = CoreSystem;
 	}
 
 	onToolUpdate(props){
 		this.__onUpdate = fn
-		this.props = props;
 	}
 
 	forceUpdate(props){
@@ -43,13 +40,16 @@ export default class SideBar{
     }
     //TODO Change everything :P
 	render(){
-		let {
-			tool
-		} = this.props
+		let tool = this.tool;
+		let ModuleSystem = this.CoreSystem.ModuleSystem;
 		let NodeProps = {};
 		if(tool){
-			if(tool.selectedNode){
-				NodeProps = tool.selectedNode.props	
+			if(tool.selectedNode && tool.selectedNode.content && tool.selectedNode.content.value){
+				let ctor = tool.selectedNode.content.value
+				let namespace = tool.selectedNode.content.namespace
+				// give ViewNode
+				NodeProps = ModuleSystem.constructors[namespace][ctor].propTypes;
+				console.log(NodeProps);
 			}	
 		}
 		let data = Object.keys(NodeProps || {}).map((key) => {

Systems/mouse.js

@@ -8,23 +8,40 @@ export default class Mouse extends EventSystem{
 		this.container = container;
 	}
 
+	handler(e) {
+		switch(e.button){
+			case 0:
+				this.emit('LeftDown',e);
+				break;
+			case 2:
+				this.emit('RightDown',e);
+				break;
 
+			default:
+				console.log('sss')
+				break;
+		}
+	}
+	dropHandler(event) {
+		let data = event.dataTransfer.getData('MyObject');
+		this.emit('Drop', {
+			event,
+			data
+		});
+	}
+	droppable(droppable = true) {
+		this.isDroppable = droppable;
+		return this;
+	}
+
+	cancel(e) { e.preventDefault();	}
 	listen(){
 		console.log(this)
-		this.container.addEventListener('mousedown',(e) => {
-			switch(e.button){
-				case 0:
-					this.emit('LeftDown',e);
-					break;
-				case 2:
-					this.emit('RightDown',e);
-					break;
-
-				default:
-					console.log('sss')
-					break;
-			}
-		})
+		this.container.addEventListener('mousedown', this.handler.bind(this));
+		if(this.isDroppable) {
+			this.container.addEventListener('dragover', this.cancel);
+			this.container.addEventListener('drop', this.dropHandler.bind(this));
+		}
 		return this;
 	}
 }

Tools/select.js

@@ -65,11 +65,7 @@ export default class Select extends Tool{
 		}
 		//	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);
-		
-		
-
-		
+		//VS.views[View].replace(node,EditNode);	
 	}
 
 	render(){

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "expo": "^33.0.0",
+    "prop-types": "^15.7.2",
     "react": "16.8.3",
     "react-dom": "^16.8.6",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",

yarn.lock

@@ -1883,9 +1883,9 @@ [email protected]:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 electron-to-chromium@^1.3.191:
-  version "1.3.225"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.225.tgz#c6786475b5eb5f491ade01a78b82ba2c5bfdf72b"
-  integrity sha512-7W/L3jw7HYE+tUPbcVOGBmnSrlUmyZ/Uyg24QS7Vx0a9KodtNrN0r0Q/LyGHrcYMtw2rv7E49F/vTXwlV/fuaA==
+  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==
 
 encodeurl@~1.0.2:
   version "1.0.2"
@@ -3311,9 +3311,9 @@ [email protected]:
   integrity sha512-IPA5T6/GhlE6dedSk7Cd7YfuORnYjN0VD5iJVFn1Q81RJjpj++Hen5kJbKcg547vXsQ1TddV15qOA/zeIfOCLw==
 
 jest-serializer@^24.0.0-alpha.6:
-  version "24.4.0"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.4.0.tgz#f70c5918c8ea9235ccb1276d232e459080588db3"
-  integrity sha512-k//0DtglVstc1fv+GY/VHDIjrtNjdYvYjMlbLUed4kxrE92sIUewOi5Hj3vrpB8CXfkJntRPDRjCrCvUhBdL8Q==
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
+  integrity sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==
 
 [email protected]:
   version "24.0.0-alpha.6"
@@ -3323,11 +3323,11 @@ [email protected]:
     merge-stream "^1.0.1"
 
 jest-worker@^24.0.0-alpha.6:
-  version "24.6.0"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.6.0.tgz#7f81ceae34b7cde0c9827a6980c35b7cdc0161b3"
-  integrity sha512-jDwgW5W9qGNvpI1tNnvajh0a5IE/PuGLFmHk6aR/BZFz8tSgGw17GsDPXAJ6p91IvYDjOw8GpFbvvZGAK+DPQQ==
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
+  integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
   dependencies:
-    merge-stream "^1.0.1"
+    merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
 js-levenshtein@^1.1.3:
@@ -3588,6 +3588,11 @@ merge-stream@^1.0.1:
   dependencies:
     readable-stream "^2.0.1"
 
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
 merge@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145"
@@ -4547,7 +4552,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -5028,9 +5033,9 @@ ret@~0.1.10:
   integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
 rimraf@^2.5.4, rimraf@^2.6.1:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.0.tgz#eb43198c5e2fb83b9323abee63bd87836f9a7c85"
-  integrity sha512-4Liqw7ccABzsWV5BzeZeGRSq7KWIgQYzOcmRDEwSX4WAawlQpcAFXZ1Kid72XYrjSnK5yxOS6Gez/iGusYE/Pw==
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
   dependencies:
     glob "^7.1.3"
 
@@ -5579,10 +5584,11 @@ [email protected]:
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
 "trapilib@git+http://git.onarbooks.com/Klapi/TrapiLib.git":
-  version "1.0.6"
-  resolved "git+http://git.onarbooks.com/Klapi/TrapiLib.git#4bc08b99a4baed2a1ac19a054ff10f992a89d7c9"
+  version "1.0.7"
+  resolved "git+http://git.onarbooks.com/Klapi/TrapiLib.git#9c2388ba540ef72db55fc47c9b59a61ad0db4331"
   dependencies:
     expo "^34.0.0-experiment.8"
+    prop-types "^15.7.2"
     react "16.8.3"
     react-dom "^16.8.6"
     react-native "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz"