TrapiLib/App.js

import React , { useState } from 'react';
import { StyleSheet, Text, View as Div, TextInput, Button } from 'react-native';
import RoutingSystem from './lib/systems/RoutingSystem.js';
import ViewSystem, { View, Node, ViewNode, RowNode, ColNode } from './lib/systems/ViewSystem.js';
import CoreSystem from './lib/systems/CoreSystem.js';

/*********** Custom View Tree ****/
import { Tree } from './lib/helpers/tree';

import FormComp from './modules/Form';

import  TextComp  from './modules/Text';
import RootComp from './modules/RootComp';
import ImageComp from './modules/Image';
import ButtonComp from './modules/Button';


const CustomStyle = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'red'
  },
  text:{
    color:'blue'
  }
})

const RootStyle = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'blue'
  },
  text:{
    color:'black'
  }
})
let RootNode = new ViewNode("A","RootComp",{text:"This is the   asd asd asd asd asd asd sda asdaasdasd asd  asdasd asd asd  dasasdasd asd  adsasd asd asd  asdasd asd asd asd asd asd asd asd asd sda asdaasdasd asd  asdasd asd asd  dasasdasd asd  adsasd asd asd  asdasd asd asd asd asd asd asd asd asd sda asdaasdasd asd  asdasd asd asd  dasasdasd asd  adsasd asd asd  asdasd asd asd asd asd asd asd asd asd sda asdStarting point!!!Try add on me ",style:RootStyle});

let TestNode = new ViewNode("H","Text",{style:CustomStyle,text:"Edited  Text Node Will be here"})

let ImageNode = new ViewNode("asdasd","Image");

// let Row1 = new RowNode("RootRow");
// let Col11 = new ColNode("Col11");
// let Col12 = new ColNode("Col12");
// let Row2 = new RowNode("RootRow2");
// let Col21 = new ColNode("Col21");
// let Col22 = new ColNode("Col22");
// Col21.content = RootNode;
// Col12.content = TestNode;

let nodeA = new Node("A", {justifyContent: 'flex-end', stretchContainer: true, selected: true});
let nodeB = new Node("B", {justifyContent: 'flex-end' , selected: true}, ImageNode);
let nodeC = new Node("C", {alignSelf: 'flex-end' , selected: true}, ImageNode);
let nodeD = new Node("D");
let nodeE = new Node("E", {alignSelf: 'flex-end' , selected: true}, ImageNode);

let VS = new View();
let root = VS.defaultContainer;

VS
.addViewNode(nodeA, root)
.addViewNode(nodeB, nodeA)
.addViewNode(nodeC, nodeA)
.addViewNode(nodeD, nodeA);
let datata = VS.export();

let VS2 = new View();
VS2
.addViewNode(nodeE, VS2.defaultContainer)
.import(datata, nodeE.id);

// let rowss = VS.setRows(root, 1)[0];
// VS.setColumns(rowss, 2);
// root.props.selected = true;


// let cols = VS.getChildren(rowss);
// VS.setRows(cols[0], 3);
// VS.setRows(cols[1], 2);
// VS.setRows(cols[2], 2);
// cols.forEach((col) => col.props.selected = true);

// cols.forEach((col) => VS.getRows(col).forEach((r) => {VS.setColumns(r,1);r.props.selected = true}));
// cols.forEach((col) => VS.getRows(col).forEach((r) => VS.getColumns(r).forEach((c) => c.props.selected = true)));

// let ee = VS.getRows(cols[1]);
// VS.setColumns(ee[0], 1);
// let cc = VS.getColumns(ee[0]);
// cc[0].content = ImageNode;

// cols[0].content = RootNode;
// cols[1].content = RootNode;
// cols[2].content = ImageNode;
// console.log("ASDASDASDA -> ", cols);
// VS.addViewNode(Row1);
// VS.addViewNode(Col11,Row1);
// VS.addViewNode(Col12,Row1);
// VS.addViewNode(Row2,Col11);
// VS.addViewNode(Col21,Row2);
// VS.addViewNode(Col22,Row2);
// VS.addViewNode(RootNode);
/*VS.addViewNode(NodeB,RootNode)
VS.addViewNode(NodeE,RootNode)
VS.addViewNode(NodeD,NodeB)
VS.addViewNode(NodeK,NodeB)


console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@")
console.log(VS)

//VS.replace(NodeB,TestNode)
VS.replace(NodeK,EditNode)
*/

//***************//


/*********************** Custom View tree Ends ************/

//**************************************  Routing Ends

let CS = new CoreSystem()
.addPage('test', VS2, 'VS1')
.setHome('test');


let data = CS.export();
console.log("Original");
console.log(data);
let js = JSON.stringify(data);
console.log("String");
console.log(js);
let NCS = new CoreSystem()
let againdata = JSON.parse(js);
console.log("Again");
console.log(againdata)
NCS.import(againdata);

window.onclick = (event) => {
  console.log("Mouse event --- ", event);

  let res = NCS.ray({event}); // returns ViewNode
  console.log(res);
}


const useForceUpdate = (text) => useState(text)[1];
export default function App() {
  let [text, setText] = useState('');
  let forceUpdate = useForceUpdate(text);
  let currentView =  NCS.render();
  let currentView2 = CS.render();
  // console.log(currentView)
  return (
    <Div style={styles.container}>
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(txt) => setText(txt)}
        value={text}
      />
      <Button title={'Change Route'} onPress={() => {
        //VS.setColumns(root, text);
        // CS.goto(text);
        // NCS.goto(text);
        //forceUpdate(text)
      }}></Button>

       <Text>Open up App.js to start working on your app!</Text>
        <Text>Open up App.js to start working on your app!</Text>

      {React.createElement(ButtonComp)}
         <Text>Open up App.js to start working on your app!</Text>

        <Text>here i s</Text>
      {React.createElement(TextComp)}
      <Text>sdadada</Text>
      {React.createElement(RootComp)}
      <Div style={{width: 200, height:400}}>
        {React.createElement(ImageComp)}
      </Div>
      <Div style={{width: 200, height:400}}>
      {React.createElement(FormComp)}
      </Div>
      <Text>Open up App.js to start working on your app!</Text>
      
      <Div style={{width:500, height:600}}>
        {currentView}
      </Div>
      <Div>
        <Text>------------------</Text>
        <Text>------------------</Text>
      </Div>
      <Div style={{width:500, height:600}}>
        {currentView2}
      </Div>
    </Div>
  );
}


const ImageStyle = StyleSheet.create({
  ImageCont:{
    width:250,
    height:250
  }
})



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});