ups

App.css

@@ -15,8 +15,10 @@
     background: #F1F1F1;
     top: 0;
     width: 100%;
-    color:#707070;
-    box-shadow: 1px 1px rgb(0, 0, 0,0.16);
+    background: #F1F1F1 0% 0% no-repeat padding-box;
+    box-shadow: 0px 1px 1px #000000;
+    opacity: 0.5;
+
 }
  .horizontal_bars {
 
@@ -32,7 +34,7 @@
   z-index: 1;
   flex-shrink: 0;
   position: absolute;
-  height: 80vh;
+  height: calc(100vh - 15px);
   display: flex;
   flex-direction: row;
 
@@ -68,12 +70,30 @@
 
 
 .playground{
+  background-color:#dfdfdf;
   margin-top: 0px;
-  height: calc(100vh - 50px);
+  height: calc(100vh - 5px);
   display: flex;
-  justify-content:center; 
+  flex-direction: column;
 }
 
 .phone{
   margin:0 auto;
+}
+
+ .paegNav{
+  background-color: white;
+  margin-bottom: 10px;
+  margin-left:285px;
+ 
+  
+
+
+  height: 48px;
+  background: #F8F8F8 0% 0% no-repeat padding-box;
+  box-shadow: 0px 1px 1px -1px #000000 0.5;
+  opacity: 1;
+  width:70%;
+
+  
 }

App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {  StyleSheet, Text, TextInput, View } from 'react-native';
+import {  StyleSheet, Text, TextInput, View , button } from 'react-native';
 import GUI from './Systems/Gui';
 import Mouse from './Systems/mouse';
 import './App.css';
@@ -23,6 +23,8 @@ export default class App extends React.Component {
       }
     // this.addScrollEvent();
     this.GUI = new GUI();
+    console.log("@@@@@@@@@@@@@@@@@@###########")
+  
     this.GUI.onUpdate( () => this.forceUpdate())
   }
   
@@ -81,7 +83,9 @@ export default class App extends React.Component {
        
         {/*This is a comment*/}
         <div onClick={(e) => this.dragPage(e)} className="playground" style={{zoom:this.state.zoom}}>
+          <div className="paegNav">{  this.GUI.renderPageBar()}</div>
           <div className="phone">
+
             {this.GUI.mobileRender()}
           </div>
         </div>      

Systems/Environment.js

@@ -134,11 +134,8 @@ const styles = StyleSheet.create({
   },
   mobileView: {
     backgroundColor: 'white',
-    borderWidth: 4,
-    borderColor: 'orange',
     flex:1,
     alignSelf: 'stretch',
-    // iphone X
     width:1125/3,
     height: 2436/3 
   },

Systems/Gui.js

@@ -3,7 +3,9 @@ import ToolBox from './ToolBox';
 import Keyboard from './keyboard';
 import Mouse from './mouse';
 import React from 'react';
-import {Dimensions, StyleSheet, View, Text} from 'react-native';
+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';
@@ -14,7 +16,8 @@ import BaseSystem from './System';
 
 let {
 	CoreSystem,
-	ViewSystem
+	ViewSystem,
+
 } = Library;
 
 
@@ -54,6 +57,8 @@ export default class Gui extends BaseSystem {
     let container = cview.getDefaultContainer();
     let mainContent = new ViewNode(Math.random(), 'BaseContainer', {width: 1125/3, height: 2436/3 - 10});
     cview.setContent(mainContent, container);
+    
+
 
   }
 
@@ -157,11 +162,103 @@ export default class Gui extends BaseSystem {
       </View>
       )
   }
+
+
+
+  addFrame(routeName = Math.random().toString(36).substring(7)) {
+      let VS = new Library.View();
+      let root = VS.getRoot();
+      root.props.selected = true;
+      VS.setColumns(root, 3);
+      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)
+        return (
+          <View style={[PageButtons.page , background ] } onClick = {(e) => {
+            this.CoreSystem.goto(route)
+            this.forceUpdate()
+          }}>
+            
+            <Text style={PageButtons.text}>{route}</Text>
+          </View>
+         
+          )
+    })
+
+    return (
+      <View style={PageButtons.container}>
+       <Button 
+        color="#F1F1F1"
+        title={<Icon  name='filter'
+        color="#36BBAD"
+            />
+        }
+        />
+        {pages}
+       
+        <View style={PageButtons.addNew}  onClick = {() => this.addFrame()}>
+          <Text >Add new </Text>
+          <Icon color="#606060"  name='add'/>
+        </View>
+        
+      
+      </View>);
+
+
+  }
+
 }
 
 
 
+const PageButtons = StyleSheet.create({
+  container:{
+    flex:1,
+    paddingLeft:15,
+    flexDirection:'row',
 
+  },
+  activePage:{
+    backgroundColor:"#36BBAD",
+    color:"white"
+  },
+  text:{
+    flex:1,
+    justifyContent:"center",
+    alignItems:"center",
+    fontSize:16,
+    letterSpacing: 0,
+    color: '#D9D9D9',
+    opacity: 1,
+  },
+  page:{
+    padding:' 0 30px 0 25px',
+    borderColor:"white",
+    borderColor:'black',
+    backgroundColor:"#FFFFFF",
+    cursor:'pointer',
+    textAlign:"center",
+    position : "relative",
+    overflow:'hidden',
+    display:'inline-block',
+    width:160,
+    height:49,
+    textcolor:"white"
+  },
+  addNew:{
+    
+    textcolor:"white",
+    backgroundColor:"#D6D6D6",
+    cursor:'pointer',
+    width:160,
+    height:49,
+  }
+})
 
 
 

Systems/MainBar.js

@@ -114,7 +114,7 @@ const styles = StyleSheet.create({
 	container:{
 		flex:1,
 		paddingRight:25,
-
+		marginLeft:5,
 		flexDirection:'row',
 
 	},

Tools/InsertForm.js

@@ -34,7 +34,7 @@ export default class InsertForm extends Tool{
 
 
 	editViewNode(CS,node){
-		let View = null;
+		/*let View = null;
 		if(!node ){
 			return;
 		}
@@ -46,7 +46,7 @@ export default class InsertForm extends Tool{
 			}
 		})
 		let EditNode = new ViewNode(Math.random(),"ViewComp",{text:"Manipulationg the dom",style:styles})
-		Views[View].setContent(EditNode,node);
+		Views[View].setContent(EditNode,node);*/
 	}
 
 

Tools/add.js

@@ -49,7 +49,7 @@ export default class Add extends Tool{
 		rows.forEach((row) => {
 			View.setColumns(row,1);
 			row.props.selected = true})
-		*/
+*/		
 	}
 
 

Tools/select.js

@@ -1,10 +1,11 @@
 import Tool from '../Systems/Tool';
-import {View , Text , Button,StyleSheet} from 'react-native';
+import {View , Text , Button,StyleSheet , Image} from 'react-native';
 import React from 'react';
-import { Icon } from 'react-native-elements'
-
+//import { Icon } from 'react-native-elements'
+import Icon from "react-native-vector-icons/MaterialIcons";
 import Library from 'trapilib/dist/lib';
-
+console.log("@@@@@@@@@@@@@@@")
+console.log(Icon)
 let {
 	CoreSystem,
 	ViewSystem,
@@ -58,14 +59,14 @@ export default class Select extends Tool{
 		this.selectedNode = node;
 		let View = CS.getCurrentView();
 		this.selectedNodeParent = View.getParent(node);
-		console.log(this.selectedNodeParent)
+		
 		this.selectedNodeParent.props = {
 			...this.selectedNodeParent.props,
 			selected: true
 		}
-		//	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);	
+
+
+
 	}
 
 	render(){
@@ -80,9 +81,9 @@ export default class Select extends Tool{
 			<View>
 				<Button 
 					color="#f1f1f1"
-					title={<Icon  name='sc-telegram'
-	  				type='evilicon'
-	  				color="#606060"
+					title={<Image  name='near me'
+	  				style={{width: 20, height: 20 , color:'#606060'}}
+	  				source= {this.active ? require('../assets/select.svg') : require('../assets/outline.svg')}
 	  				containerStyle={selectStyle}
 	  				/>}
 	  				/>

assets/outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M17.27 6.73l-4.24 10.13-1.32-3.42-.32-.83-.82-.32-3.43-1.33 10.13-4.23M21 3L3 10.53v.98l6.84 2.65L12.48 21h.98L21 3z"/></svg>

assets/select.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M21 3L3 10.53v.98l6.84 2.65L12.48 21h.98L21 3z"/></svg>

package-lock.json

@@ -2359,6 +2359,11 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.201.tgz",
       "integrity": "sha512-aCTPIfY1Jvuam5b6vuWRjt1F8i4kY7zX0Qtpu5SNd6l1zjuxU9fDNpbM4o6+oJsra+TMD2o7D20GnkSIgpTr9w=="
     },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -2569,6 +2574,13 @@
         "unimodules-permissions-interface": "~2.0.1",
         "unimodules-sensors-interface": "~2.0.1",
         "uuid-js": "^0.7.5"
+      },
+      "dependencies": {
+        "react-native-svg": {
+          "version": "9.4.0",
+          "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-9.4.0.tgz",
+          "integrity": "sha512-IVJlVbS2dAPerPr927fEi4uXzrPXzlra5ddgyJXZZ2IKA2ZygyYWFZDM+vsQs+Vj20CfL8nOWszQQV57vdQgFg=="
+        }
       }
     },
     "expo-ads-admob": {
@@ -5832,9 +5844,148 @@
       "integrity": "sha512-m9nGKYfFn6ljF1abafzF5cFaD9JCzXwj7kNE9CuF+g0TgtItH70eY2uHaCV9moENTftqd5XIS3Cx0mf4WfistA=="
     },
     "react-native-svg": {
-      "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-9.4.0.tgz",
-      "integrity": "sha512-IVJlVbS2dAPerPr927fEi4uXzrPXzlra5ddgyJXZZ2IKA2ZygyYWFZDM+vsQs+Vj20CfL8nOWszQQV57vdQgFg=="
+      "version": "9.7.0",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-9.7.0.tgz",
+      "integrity": "sha512-8E1snfe2YYbfu6SP5DOoQgRhCdv7D0F4VewUAV+IgAn+IScrA/uuLB8LCodRdO+9U4Rm5dJ4yIwsVhPHRtuBkw=="
+    },
+    "react-native-vector-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-6.6.0.tgz",
+      "integrity": "sha512-MImKVx8JEvVVBnaShMr7/yTX4Y062JZMupht1T+IEgbqBj4aQeQ1z2SH4VHWKNtWtppk4kz9gYyUiMWqx6tNSw==",
+      "requires": {
+        "lodash": "^4.0.0",
+        "prop-types": "^15.6.2",
+        "yargs": "^13.2.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+        },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+        },
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "get-caller-file": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz",
+          "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==",
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+        },
+        "require-main-filename": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "y18n": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+        },
+        "yargs": {
+          "version": "13.3.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.0.tgz",
+          "integrity": "sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==",
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz",
+          "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
     },
     "react-native-view-shot": {
       "version": "2.6.0",
@@ -7046,7 +7197,7 @@
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
     },
     "trapilib": {
-      "version": "git+http://git.onarbooks.com/Klapi/TrapiLib.git#b7a4fb4a6315c275d56278db28f6e2ec9bf6792f",
+      "version": "git+http://git.onarbooks.com/Klapi/TrapiLib.git#ea3a7ef2a8066e9dc988340fce07f6127d79b0c6",
       "from": "git+http://git.onarbooks.com/Klapi/TrapiLib.git",
       "requires": {
         "expo": "^34.0.0-experiment.8",

package.json

@@ -15,6 +15,8 @@
     "react-dom": "^16.8.6",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
     "react-native-elements": "^1.1.0",
+    "react-native-svg": "^9.7.0",
+    "react-native-vector-icons": "^6.6.0",
     "react-native-web": "^0.11.4",
     "trapilib": "git+http://git.onarbooks.com/Klapi/TrapiLib.git"
   },