Editor/Systems/Gui.js

//import CoreSystem from 'core-system';
import ToolBox from './ToolBox';
import Keyboard from './keyboard';
import Mouse from './mouse';
import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
import Library from 'trapilib/dist/lib';
import SideBar from './SideBar';
import MainBar from  './MainBar';
import ModuleBar from './ModuleBar';


let {
	CoreSystem,
	ViewSystem
} = Library;


export default class Gui {
	constructor() {
    this.ModuleBar = new ModuleBar();
		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.ToolBox.onUpdate( () =>{
      let SideBarProps = {
          tool:this.ToolBox.activeTool
      }
      this.SideBar = new SideBar(SideBarProps)
      this.forceUpdate()
      })

    this.MainBar.onSave( () => {
      this.saveEnv();
      this.forceUpdate()
    })

    
  }

  onMount() {
    if(this.phone){
        // thats fine
        this.ToolBoxMouse = new Mouse(this.toolbox.current);
        this.phoneMouse = new Mouse(this.phone.current);
    }

    if(this.ToolBoxMouse !== undefined){
      this.ToolBoxMouse.listen()
      .on('LeftDown',(e) => this.ToolManagement(e))

      this.phoneMouse.listen()
      .on('LeftDown',(e) => this.ToolManagement(e))     
    }
  }


  saveEnv(){
    let env = this.CoreSystem.export();
    localStorage.setItem('environment', JSON.stringify(env));
    this.forceUpdate();
    try{
        this.CoreSystem.import(JSON.parse(js));
        this.forceUpdate();
      } catch(e) {
        console.log(e);
      }
  }


  ToolManagement(e){
    console.log("whattttt")
     if(this.ToolBox.activeTool === null){

        return null;
      }else{
        this.processElement(e)
      }
  }


  onUpdate(fn){
    this.__onUpdate = fn
  }

  forceUpdate(){
    this.__onUpdate && this.__onUpdate();
  }

	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);
	    }
  	}
	processElement(event){
    console.log(event)
    console.log('sdasdwd')
	  let Node = this.CoreSystem.ray({event});
	  let NewNode = this.ToolBox.editNode(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();
    }

  	renderToolBox(){
  		return (
  			<div ref = {this.toolboxRef}>
        <View style={styles.toolbarView}>
          		{this.ToolBox.render()}
        </View>
	     	</div>)
  	}

    renderModuleBar(){
      return (
        <View>
          {this.ModuleBar.render()}
        </View>
        )
    }


}








//const jsLoad = '{"Routing":{"topology":{"nodes":{"test":{"id":"test","routeName":"test","uri":"test","view":"VS1","defaultLink":null},"sample":{"id":"sample","routeName":"sample","uri":"sample","view":"VS2","defaultLink":null}},"links":{"test":{"out":[],"in":[]},"sample":{"out":[],"in":[]}}},"home":"test"},"Views":{"views":{"VS1":{"tree":{"nodes":{"A":{"id":"A","depth":0,"value":"RootComp","namespace":"default","props":{}},"B":{"id":"B","depth":1,"value":"ViewComp","namespace":"default","props":{"text":"ASD LOOK AT ME LOOK OO O.O (O.O)"}},"C":{"id":"C","depth":1,"value":"ViewComp","namespace":"default","props":{}}},"links":{"A":{"out":[{"to":"B","from":"A"},{"to":"C","from":"A"}],"in":[]},"B":{"out":[],"in":[{"to":"B","from":"A"}]},"C":{"out":[],"in":[{"to":"C","from":"A"}]}},"levels":[["A"],["B","C"]],"rootId":"A"}},"VS2":{"tree":{"nodes":{"P":{"id":"P","depth":0,"value":"RootComp","namespace":"default","props":{}}},"links":{"P":{"out":[],"in":[]}},"levels":[["P"]],"rootId":"P"}}}}}';


//jsLoad Test
const jsLoad = '{"Routing":{"topology":{"nodes":{"test":{"id":"test","routeName":"test","uri":"test","view":"VS1","defaultLink":null}},"links":{"test":{"out":[],"in":[]}}},"home":"test"},"Views":{"views":{"VS1":{"tree":{"nodes":{"0.5907657036474692":{"id":0.5907657036474692,"depth":0,"isRow":true,"isCol":false},"0.51066596548815":{"id":0.51066596548815,"depth":1,"isRow":false,"isCol":true},"0.8855478722619232":{"id":0.8855478722619232,"depth":1,"isRow":false,"isCol":true,"content":{"id":"A","depth":null,"value":"RootComp","namespace":"default","props":{"text":"This is the Starting point!!!Try add on me ","style":{"container":22,"text":23}}}},"0.4630979404426283":{"id":0.4630979404426283,"depth":1,"isRow":false,"isCol":true},"0.7144981784945621":{"id":0.7144981784945621,"depth":2,"isRow":true,"isCol":false},"0.0666081688424911":{"id":0.0666081688424911,"depth":2,"isRow":true,"isCol":false}},"links":{"0.5907657036474692":{"out":[{"to":0.51066596548815,"from":0.5907657036474692},{"to":0.8855478722619232,"from":0.5907657036474692},{"to":0.4630979404426283,"from":0.5907657036474692}],"in":[]},"0.51066596548815":{"out":[],"in":[{"to":0.51066596548815,"from":0.5907657036474692}]},"0.8855478722619232":{"out":[{"to":0.7144981784945621,"from":0.8855478722619232},{"to":0.0666081688424911,"from":0.8855478722619232}],"in":[{"to":0.8855478722619232,"from":0.5907657036474692}]},"0.4630979404426283":{"out":[],"in":[{"to":0.4630979404426283,"from":0.5907657036474692}]},"0.7144981784945621":{"out":[],"in":[{"to":0.7144981784945621,"from":0.8855478722619232}]},"0.0666081688424911":{"out":[],"in":[{"to":0.0666081688424911,"from":0.8855478722619232}]}},"levels":[[0.5907657036474692],[0.51066596548815,0.8855478722619232,0.4630979404426283],[0.7144981784945621,0.0666081688424911]],"rootId":0.5907657036474692}}}}}'


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row'
  },
  toolbarView: {
    justifyContent: 'space-around',
    alignItems: 'center',
    padding: 16
  },
  mainView: {
    backgroundColor: '#065b69',
    alignSelf:'stretch',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  mobileView: {
    backgroundColor: 'white',
    borderWidth: 4,
    borderColor: 'orange',

    // iphone X
    width:1125/3,
    height: 2436/3 

  },


  attributesView: {
    width:256, 
    alignSelf: 'stretch',
    flexDirection: 'column',
  }




});