//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, TouchableOpacity } 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.disabledTools = true; this.CoreSystem = new CoreSystem(true); this.CoreSystem.onUpdate(() => { this.forceUpdate(); }) this.Keyboard = new Keyboard().listen(); this.Keyboard.on('s', () => { this.ToolBox.selectTool('Select'); this.forceUpdate(); }); 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.disabledTools = !this.ToolBox.activeTool; this.CoreSystem.ActionSystem.toggle(!this.disabledTools); this.SideBar.tool = this.ToolBox.activeTool; this.forceUpdate(); }); this.ModuleBar.onUpdate(() => 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.disabledTools){ this.processElement(e) } } load() { try{ let env = localStorage.getItem('environment'); if( env === null){ // this.CoreSystem.import(JSON.parse(jsLoad)); this.CoreSystem.fresh(); }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 (
{this.ToolBox.render()}
) } renderModuleBar(){ return ( {this.ModuleBar.render()} ) } removeFrame(routeName) { this.CoreSystem.removePage(routeName); this.forceUpdate(); } addFrame(routeName) { if(!routeName) routeName = "Page " + (Object.keys(this.CoreSystem.Routing.topology.nodes).length + 1); 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.CoreSystem.goto(routeName); 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 ( { console.log(e); this.CoreSystem.goto(route); this.forceUpdate() }}> {route} {view !== currentView && { this.removeFrame(route); e.stopPropagation(); return false; }}>X} ) }) return ( {pages} this.addFrame()}> Add new ); } } const PageButtons = StyleSheet.create({ container:{ flex:1, flexDirection:'row', width:40 }, activePage:{ backgroundColor:"#36BBAD" }, text:{ fontSize:14, letterSpacing: 0, color: '#D9D9D9', opacity: 1, fontFamily: 'light' }, selectedText: { color: "#FFFFFF" }, page:{ borderRightWidth:"1px", borderColor:"#B4b4b4", backgroundColor:"#F8F8F8", cursor:'pointer', overflow:'hidden', width:160, height:48, }, addNew:{ 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, fontFamily: 'thin' } }) //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 = ``; 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', } });