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 {Dimensions, StyleSheet, View, Text , Button
} from 'react-native';
import { Icon } from 'react-native-elements'
import Library from 'trapilib/dist/lib';
import SideBar from './SideBar';
import MainBar from  './MainBar';
import ModuleBar from './ModuleBar';
import { ViewNode, Node } from 'trapilib/dist/lib/systems/ViewSystem';
import Environment from './Environment';
import BaseSystem from './System';

let {
	CoreSystem,
	ViewSystem,

} = Library;


export default class Gui extends BaseSystem {
	constructor() {
    super();
    this.phoneRef = React.createRef();
    this.phone = this.phoneRef;
    this.toolboxRef = React.createRef();
    this.toolbox = this.toolboxRef;


    this.CoreSystem = new CoreSystem();
		this.Keyboard = new Keyboard();

    this.ToolBox = new ToolBox(this.CoreSystem);
    this.MainBar = new MainBar(this.CoreSystem);
    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.onUpdate(() => 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: 375, height: 667});
    cview.setContent(mainContent, container);
  }

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

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

      this.phoneMouse.listen()
      .on('LeftDown',(e) => this.ToolManagement(e))
      .on('Drop', (e) => this.dropContent(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){
    if(this.ToolBox.activeTool !== null){
      this.processElement(e)
    }
  }

	load() {
    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){
	  let Node = this.CoreSystem.ray({event});
	  let NewNode = this.ToolBox.editNode(Node);
    this.forceUpdate();
  }

  dropContent({event, data}) {
    data = JSON.parse(data);
    let targetNode = this.CoreSystem.ray({event});
    // targetNode.content
    targetNode.props.selected = true;
  
    let node = new ViewNode(Math.random(), data.ctor, {}, data.namespace);
    let containerNode = new Node(Math.random(), {}, node);
    let View = this.CoreSystem.getCurrentView();
    View.addViewNode(containerNode, targetNode);
 

    this.forceUpdate();
  }


  mobileRender(){
    return this.Environment.render();
  }

  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>
      )
  }



  addFrame(routeName = Math.random().toString(36).substring(7)) {
      let VS = new Library.View();
      let container = VS.getDefaultContainer();
      container.props.selected = true;
      let mainContent = new ViewNode(Math.random(), 'BaseContainer', {width: 375, height: 667});
      VS.setContent(mainContent, container);

      this.CoreSystem.addPage(routeName,VS);
      this.forceUpdate()
  }
  renderPageBar(){
    let currentView = this.CoreSystem.Routing.getCurrentView();
    let pages = Object.keys(this.CoreSystem.Routing.topology.nodes).map((route,index) => {
        let view = this.CoreSystem.Routing.getView(route)
        let background = view === currentView ?  PageButtons.activePage :(null)
        let textColor = view === currentView ?  PageButtons.selectedText :(null)
        return (
          <View style={[PageButtons.page , background ] } onClick = {(e) => {
            this.CoreSystem.goto(route)
            this.forceUpdate()
          }}>
            <View style = {{  flex:1,
                              justifyContent:'center',
                              alignItems:'center'}}>

              <Text style={[PageButtons.text, textColor]}>{route}</Text>
            </View>
          </View>

          )
    })

    return (
      <View style={PageButtons.container}>
       <View style={{borderRightWidth:"1px",
                      borderColor:"#B4b4b4",
                      background:'white', paddingTop: 4}}>
         <Button
          color="white"
          title={<Icon name='filter' color="#36BBAD" />
            }
          />
        </View>
        {pages}

        <View style={PageButtons.addNew}  onClick = {() => this.addFrame()}>
          <View style=  {PageButtons.addNewContainer}>
            <Text style={PageButtons.addNewText}>Add new </Text>
            <Icon color="white"  name='add' iconStyle={{fontSize: 12, paddingTop: 8}}/>
          </View>
        </View>


      </View>);


  }

}



const PageButtons = StyleSheet.create({
  container:{
    flex:1,
    flexDirection:'row',
    width:40
  },
  activePage:{
    backgroundColor:"#36BBAD",
    color:"white"
  },
  text:{
    fontSize:14,
    letterSpacing: 0,
    color: '#D9D9D9',
    opacity: 1,
  },
  selectedText: {
    color: "#FFFFFF"
  },
  page:{
    borderRightWidth:"1px",
		borderColor:"#B4b4b4",
    backgroundColor:"#F8F8F8",
    cursor:'pointer',
    textAlign:"center",
    overflow:'hidden',
    width:160,
    height:48,
  },
  addNew:{

    color:"white",
    backgroundColor:"#D6D6D6",
    cursor:'pointer',
    width:160,
    height:48,
  },

  addNewContainer:{
    flex:1,
    flexDirection:'row',
    justifyContent:"center",
    alignItems:'center'
  },

  addNewText:{
    fontSize:14,
    letterSpacing: 0,
    color: 'white',
    opacity: 1,
  }
})




//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 MudleBarStyle = StyleSheet.create({
  container:{
    backgroundColor:'red'
  }
})

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',
    flex:1,
    alignSelf: 'stretch',
  },


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




});