Editor/App.js

import React from 'react';
import {  StyleSheet, Text, TextInput, View } 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.addScrollEvent();
    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(){
    console.log("re render")
    let customStyle = {
      zoom: this.state.zoom
    };  
    return (
      <div className="main" id="some">
       
        <div className="mainbar">
          {this.GUI.renderMainBar()}
        </div>
        <div className="horizontal_bars">
          <div ref={this.toolboxRef} className="toolbox">
            {this.GUI.renderToolBox()}
          </div> 
          <div className="sidebar">
            {this.GUI.renderSideBar()}
          </div>
        </div>

       
        {/*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>
    );
  }
}


/*


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 

  },


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




});*/