Editor/Systems/ToolBox.js

import Tool from './Tool';
import {Tools} from '../Tools/index' 
import React from 'react';
import {StyleSheet,View , Text} from 'react-native';
import Mouse from './mouse';



function log(args){
	console.log(args)
}

export default class ToolBox{
	constructor(ViewSystem){
		this.ViewSystem = ViewSystem;
		this.tools = {};
		this.loadTools();
		this.activeTool = null;
		this.__onUpdate = null;
		//this.selectTool('Select')
		
	}

	on(e) { return this.activeTool.on(e) }

	editNode(View){
		return this.activeTool.editViewNode(this.ViewSystem,View);
	}

	onUpdate(fn){
		this.__onUpdate = fn;
	}

	update(){
		this.__onUpdate && this.__onUpdate();
	}

	selectTool(key){
		let tool = this.tools[key];
		this.activeTool = tool;	
		this.update()
	}

	loadTools(){
		log("Loading Tools")
		Object.keys(Tools).map((key) => {
			if( Tools[key].prototype instanceof Tool === false ){
				throw new Error("This is not a Tool")
			}
			if(this.tools[key]){
				log("Tool already Exists: ",key);
			}
			this.tools[key] = new Tools[key]();
		})
	
	}
	render(){
			let tools = Object.keys(this.tools).map((key) => {
			let toolStyle = styles.tool;
			if(this.activeTool !== null){
				
				if(this.activeTool.constructor.name === key){
					toolStyle = styles.activeTool;
				}
			}
			return(
			<View onClick={() => this.selectTool(key) }  style={ toolStyle}>{this.tools[key].render()}</View>)});
		return tools;
	}

}
/** Must be remove from here**/
const styles = StyleSheet.create({
	tool:{
		backgroundColor: 'gray',
		padding: 10
	},
	activeTool:{
		backgroundColor:'green',
		padding: 10
	}
})