Ups

lib/Module.js

@@ -18,17 +18,24 @@ export default class Module extends React.Component{
 			return true;
 		});
 		//console.log("GEN EV: " , eventName, EventSystem);
+		this._containerStyle = {
+			margin: 10
+		}
 	}
 	
 	componentWillMount() {
 
 	}
 
+	setContainerStyle(style) { 
+		this._containerStyle = style;
+	}
+
 	display() {
 		throw new Error("You must extend this base Module and override display method!");
 	}
 	render() { 
-		return <View ModuleID={this.props.ModuleID} style={{}} MY_WRAPPER_FROM_BASE_MODULE={true}>
+		return <View ModuleID={this.props.ModuleID} style={[{overflow:'hidden'},this._containerStyle]} MY_WRAPPER_FROM_BASE_MODULE={true}>
 			{this.display()}
 		</View>
 		// throw new Error("You must extend this base Module and override render method!");

lib/systems/CoreSystem.js

@@ -10,7 +10,7 @@ export default class CoreSystem {
 		this.Routing = new RoutingSystem();
 		this.ModuleSystem = new ModuleSystem();
 		this.EventSystem = new EventSystem();
-		this.ViewSystem    = new ViewSystem(this.ModuleSystem, this.EventSystem);
+		this.ViewSystem    = new ViewSystem(this);
 		this.loadFonts()
 		this.__loadModules(Modules);
 	}

lib/systems/ViewSystem.js

@@ -29,10 +29,11 @@ export class Node extends TreeNode {
 }
 
 export default class ViewSystem {
-	constructor(MS, ES) {
+	constructor(CS) {
 		this.views = {};
-		this.ModuleSystem = MS;
-		this.EventSystem = ES;
+		this.CoreSystem = CS;
+		this.ModuleSystem = CS.ModuleSystem;
+		this.EventSystem = CS.EventSystem;
 	}
 
 	getNode(ViewId, NodeId) {
@@ -54,7 +55,7 @@ export default class ViewSystem {
 	}
 
 	render(name) {
-		return this.views[name].render(this.ModuleSystem, this.EventSystem);
+		return this.views[name].render(this.CoreSystem);
 	}
 
 	export() {
@@ -109,9 +110,9 @@ export class View {
 		return this.getNode(node.id);
 	}
 
-	render(MS, ES) {
+	render(CS) {
 		let node = this.ViewTree.root;
-		return (<Renderer ModuleSystem={MS} EventSystem={ES} node={node} tree={this.ViewTree}/>);	
+		return (<Renderer CoreSystem={CS} node={node} tree={this.ViewTree}/>);	
 	}
 
 	addViewNode(node,parentNode = null){
@@ -249,17 +250,17 @@ export class View {
 
 
 let Renderer = (props) => {
-	let { node , tree, ModuleSystem, EventSystem } = props;
+	let { node , tree, CoreSystem } = props;
 	let childrens = tree.getChildren(node);
 	let childrenReact = childrens.map(child => {
 		return(
 		<Renderer node = {child}
 				tree={tree}
 				key={child.id} 
-				ModuleSystem={ModuleSystem}
-				EventSystem={EventSystem} />)
+				CoreSystem={CoreSystem} />)
 	});
-		
+	let ModuleSystem = CoreSystem.ModuleSystem;
+	let EventSystem = CoreSystem.EventSystem;
 	let viewNode = node.content;
 	let ViewNodeReact;
 	// IF CONTENT
@@ -273,7 +274,8 @@ let Renderer = (props) => {
 			{ 
 				...viewNode.props,
 				ModuleID: viewNode.id,
-				EventSystem: EventSystem
+				EventSystem: EventSystem,
+				CoreSystem: CoreSystem
 			},
 			[], // children
 			viewNode.namespace,

modules/BaseHolder/index.js

@@ -59,8 +59,7 @@ export default class BaseHolder extends React.Component {
 						alignContent,
 						flexDirection,
 						flexWrap,
-						flexFlow,
-						padding: 10
+						flexFlow
 		    	 	}
 		    	 	]}>
 					{children}
@@ -80,10 +79,10 @@ const styles = StyleSheet.create({
 	}, 
 	stretchToContent: {
 		position: 'absolute',
-		top: 10,
-		left: 10,
-		bottom: 10,
-		right: 10,
+		top: 0,
+		left: 0,
+		bottom: 0,
+		right: 0,
 		// borderColor: 'red',
 		// borderWidth: 1
 	},
@@ -111,7 +110,7 @@ BaseHolder.Inputs = {
 	width: new Types.Integer(),
 	height: new Types.Integer(),
 	stretchContainer: new Types.Bool().default(false),
-	overflow: new Types.Text().default('hidden'),
+	overflow: new Types.Text().default('visible'),
 	justifyContent: new Types.Text().default("flex-start"),
 	alignItems: new Types.Text(),
 	alignContent: new Types.Text(),

modules/Image/index.js

@@ -7,7 +7,7 @@ let image = require('./assets/default.jpg')
 export default class ImageComp extends Module {
 	constructor(props) {
 		super(props);
-
+		this.setContainerStyle({ marginLeft: 0, marginRight: 0});
 	}
 
 	display() {
@@ -17,11 +17,10 @@ export default class ImageComp extends Module {
 			resizeMode,
 			source
 		} = this.props;
-		if(!width) width = 100;
-		if(!height) height = 100;
-		if(!resizeMode) resizeMode = 'cover';
+		console.log(width);
+		if(!width) width = "100%";
 		return 	<Image
-			          style={{width, height}}
+			          style={{width, height, paddingTop: height ? '0' : '56.25%'}}
 			          resizeMode={resizeMode}
 			          source={source || image}
 			        />
@@ -31,7 +30,7 @@ export default class ImageComp extends Module {
 
 ImageComp.Inputs = {
 	source: new Types.Text(),
-	width: new Types.Integer().require().default(70),
-	height: new Types.Integer().require().default(70),
+	width: new Types.Integer(),
+	height: new Types.Integer(),
 	resizeMode: new Types.Text().require().default('cover')
 }