Editor/App.js

import React from 'react';
import {  StyleSheet, Text, TextInput, View , button } from 'react-native';
import GUI from './Systems/Gui';
import Mouse from './Systems/mouse';
import './App.css';


// let m1 = new Mouse();
// m1.on('LeftDown', () => console.log("M1")).listen();
// let m2 = new Mouse();
// m2.on('LeftDown', () => console.log("M2")).listen();

export default class App extends React.Component {
  
  constructor(props){
    super(props)
    // this.playgroundRef = React.createRef();
    // this.toolboxRef = React.createRef();
    this.GUI = null;
    this.state = {
        zoom:1,
        scrollPos:0
      }
    
    this.GUI = new GUI();
  
    this.GUI.onUpdate( () => this.forceUpdate())
  }
  
  componentDidMount() {
    this.GUI.onMount();
  }

  addScrollEvent(){
  /*  window.addEventListener('wheel', (e) =>{
      if(e.deltaY < 0){
        this.zoom(0.2);
      }
      else if(e.deltaY > 0){
        this.zoom(-0.2);
      }
    });*/
  } 
  
  zoom(delta){
    let z = this.state.zoom;
    z = z  + delta;
    this.setState({zoom:z});
  }
  dragPage(e){
    //!!!!!Import document.getElementById isnt working on react native
    //' let playground = document.getElementById("phone");
    /*playground.addEventListener("mousedown",() => {
      console.log("mouse down")

      playground.onmousemove = function(e){
        console.log("moving now while down")
      }
     })*/
  }
  render(){
    let customStyle = {
      zoom: this.state.zoom
    };  
    return (
      <div className="main" id="some">
        <div className="mainbar">
          {this.GUI.renderMainBar()}
        </div>
        <div style={{position: 'relative', minHeight: 0, flexGrow: 1, overflow: 'auto', display: 'flex'}}>
         
          <div className="horizontal_bars">
            <div ref={this.toolboxRef} className="toolbox">
              <div className="tool_icon_bar">{this.GUI.renderToolBox()}</div>
              <div className="moduleBar">{this.GUI.renderModuleBar()}</div>
            </div> 
            
            <div className="wrapper">
              <div className="pageNav">
                {  this.GUI.renderPageBar()}
              </div>
              <div className="wrapperPhone">
                <div style={{flex:1,overflow: 'auto'}}>
                  {/*This is a comment*/}
                  <div onClick={(e) => this.dragPage(e)} className="playground" style={{zoom:this.state.zoom}}>
                    <div className="phone">
                      {this.GUI.mobileRender()}
                    </div>
                  </div>
                </div>
                <div className="sidebar">
                  {this.GUI.renderSideBar()}
                </div>
              </div>
            </div>
          </div>         
          
                
        </div>      
      </div>
    );
  }
}


/*


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

    width: 64,
    borderWidth: 1,
    borderColor: 'red',
    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 

  },





});*/