added width constraint on view, currently not supported by layout

bin/hide.js

@@ -11190,26 +11190,27 @@ hide_ui_Ide.prototype = {
 	}
 	,open: function(component,state,onCreate) {
 		var _this = hide_ui_View.viewClasses;
-		var pos = (__map_reserved[component] != null ? _this.getReserved(component) : _this.h[component]).position;
+		var options = (__map_reserved[component] != null ? _this.getReserved(component) : _this.h[component]).options;
 		var bestTarget = null;
 		var _g = 0;
 		var _g1 = this.views;
 		while(_g < _g1.length) {
 			var v = _g1[_g];
 			++_g;
-			if(v.get_defaultPosition() == pos) {
+			if(v.get_defaultOptions().position == options.position) {
 				if(bestTarget == null || bestTarget.width * bestTarget.height < v.container.width * v.container.height) {
 					bestTarget = v.container;
 				}
 			}
 		}
 		var index = null;
+		var width = null;
 		var target;
 		if(bestTarget != null) {
 			target = bestTarget.parent.parent;
 		} else {
 			target = this.layout.root.contentItems[0];
-			var reqKind = pos == hide_ui_DisplayPosition.Bottom ? "column" : "row";
+			var reqKind = options.position == hide_ui_DisplayPosition.Bottom ? "column" : "row";
 			if(target == null) {
 				this.layout.root.addChild({ type : "row"});
 				target = this.layout.root.contentItems[0];
@@ -11218,20 +11219,29 @@ hide_ui_Ide.prototype = {
 				var items = target.getItemsByFilter(function(r) {
 					return r.type == "component";
 				});
+				var foundViews = [];
 				var _g2 = 0;
 				var _g11 = this.views.slice();
 				while(_g2 < _g11.length) {
 					var v1 = _g11[_g2];
 					++_g2;
 					if(HxOverrides.remove(items,v1.container.parent)) {
+						foundViews.push(v1);
 						v1.container.close();
 					}
 				}
 				this.layout.root.addChild({ type : reqKind, content : config});
 				target = this.layout.root.contentItems[0];
-				if(pos == hide_ui_DisplayPosition.Left) {
+				if(options.position == hide_ui_DisplayPosition.Left) {
 					index = 0;
 				}
+				width = options.width;
+				if(width == null && foundViews.length == 1) {
+					var opt = foundViews[0].get_defaultOptions().width;
+					if(opt != null) {
+						width = (target.element.width() | 0) - opt;
+					}
+				}
 			}
 		}
 		if(onCreate != null) {
@@ -11241,6 +11251,10 @@ hide_ui_Ide.prototype = {
 			});
 		}
 		var config1 = { type : "component", componentName : component, componentState : state};
+		if(width != null) {
+			haxe_Log.trace(width,{ fileName : "Ide.hx", lineNumber : 299, className : "hide.ui.Ide", methodName : "open"});
+			config1.width = width * 100 / target.element.width() | 0;
+		}
 		if(index == null) {
 			target.addChild(config1);
 		} else {
@@ -11429,17 +11443,20 @@ var hide_ui_View = function(state) {
 };
 $hxClasses["hide.ui.View"] = hide_ui_View;
 hide_ui_View.__name__ = ["hide","ui","View"];
-hide_ui_View.register = function(cl,position) {
+hide_ui_View.register = function(cl,options) {
 	var name = Type.getClassName(cl);
 	var _this = hide_ui_View.viewClasses;
 	if(__map_reserved[name] != null ? _this.existsReserved(name) : _this.h.hasOwnProperty(name)) {
 		return null;
 	}
-	if(position == null) {
-		position = hide_ui_DisplayPosition.Center;
+	if(options == null) {
+		options = { };
+	}
+	if(options.position == null) {
+		options.position = hide_ui_DisplayPosition.Center;
 	}
 	var _this1 = hide_ui_View.viewClasses;
-	var value = { name : name, cl : cl, position : position};
+	var value = { name : name, cl : cl, options : options};
 	if(__map_reserved[name] != null) {
 		_this1.setReserved(name,value);
 	} else {
@@ -11496,11 +11513,11 @@ hide_ui_View.prototype = {
 	,get_contentHeight: function() {
 		return this.container.height;
 	}
-	,get_defaultPosition: function() {
+	,get_defaultOptions: function() {
 		var this1 = hide_ui_View.viewClasses;
 		var key = Type.getClassName(js_Boot.getClass(this));
 		var _this = this1;
-		return (__map_reserved[key] != null ? _this.getReserved(key) : _this.h[key]).position;
+		return (__map_reserved[key] != null ? _this.getReserved(key) : _this.h[key]).options;
 	}
 	,__class__: hide_ui_View
 };
@@ -20247,9 +20264,9 @@ haxe_Unserializer.DEFAULT_RESOLVER = new haxe__$Unserializer_DefaultResolver();
 haxe_Unserializer.BASE64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789%:";
 haxe_ds_ObjectMap.count = 0;
 hide_ui_View.viewClasses = new haxe_ds_StringMap();
-hide_view_About._ = hide_ui_View.register(hide_view_About,hide_ui_DisplayPosition.Bottom);
+hide_view_About._ = hide_ui_View.register(hide_view_About,{ position : hide_ui_DisplayPosition.Bottom});
 hide_view_FileTree.EXTENSIONS = new haxe_ds_StringMap();
-hide_view_FileTree._ = hide_ui_View.register(hide_view_FileTree,hide_ui_DisplayPosition.Left);
+hide_view_FileTree._ = hide_ui_View.register(hide_view_FileTree,{ width : 200, position : hide_ui_DisplayPosition.Left});
 hide_view_Image._ = hide_view_FileTree.registerExtension(hide_view_Image,["png","jpg","jpeg","gif"],{ icon : "picture-o"});
 hide_view_Script._ = (function($this) {
 	var $r;

hide/ui/Ide.hx

@@ -239,22 +239,23 @@ class Ide {
 	}
 
 	public function open( component : String, state : Dynamic, ?onCreate : View<Dynamic> -> Void ) {
-		var pos = View.viewClasses.get(component).position;
+		var options = View.viewClasses.get(component).options;
 		
 		var bestTarget : golden.Container = null;
 		for( v in views )
-			if( v.defaultPosition == pos ) {
+			if( v.defaultOptions.position == options.position ) {
 				if( bestTarget == null || bestTarget.width * bestTarget.height < v.container.width * v.container.height )
 					bestTarget = v.container;
 			}
 
 		var index : Null<Int> = null;
+		var width : Null<Int> = null;
 		var target;
 		if( bestTarget != null ) 
 			target = bestTarget.parent.parent;
 		else {
 			target = layout.root.contentItems[0];
-			var reqKind : golden.Config.ItemType = pos == Bottom ? Column : Row;
+			var reqKind : golden.Config.ItemType = options.position == Bottom ? Column : Row;
 			if( target == null ) {
 				layout.root.addChild({ type : Row });
 				target = layout.root.contentItems[0];
@@ -263,12 +264,23 @@ class Ide {
 				// require closing all and reopening (sadly)
 				var config = layout.toConfig().content;
 				var items = target.getItemsByFilter(function(r) return r.type == Component);
+				var foundViews = [];
 				for( v in views.copy() )
-					if( items.remove(v.container.parent) )
+					if( items.remove(v.container.parent) ) {
+						foundViews.push(v);
 						v.container.close();
+					}
 				layout.root.addChild({ type : reqKind, content : config });
 				target = layout.root.contentItems[0];
-				if( pos == Left ) index = 0;
+				if( options.position == Left ) index = 0;
+				width = options.width;
+
+				// when opening left/right
+				if( width == null && foundViews.length == 1 ) {
+					var opt = foundViews[0].defaultOptions.width;
+					if( opt != null )
+						width = Std.int(target.element.width()) - opt;
+				}
 			}
 		}
 		if( onCreate != null )
@@ -281,6 +293,11 @@ class Ide {
 			componentName : component,
 			componentState : state,
 		};
+
+		// not working... see https://github.com/deepstreamIO/golden-layout/issues/311
+		if( width != null )
+			config.width = Std.int(width * 100 / target.element.width());
+
 		if( index == null )
 			target.addChild(config);
 		else

hide/ui/View.hx

@@ -7,13 +7,15 @@ enum DisplayPosition {
 	Bottom;
 }
 
+typedef ViewOptions = { ?position : DisplayPosition, ?width : Int }
+
 @:keepSub @:allow(hide.ui.Ide)
 class View<T> {
 
 	var ide : Ide;
 	var container : golden.Container;
 	var state : T;
-	public var defaultPosition(get,never) : DisplayPosition;
+	public var defaultOptions(get,never) : ViewOptions;
 
 	var contentWidth(get,never) : Int;
 	var contentHeight(get,never) : Int;
@@ -74,16 +76,18 @@ class View<T> {
 
 	function get_contentWidth() return container.width;
 	function get_contentHeight() return container.height;
-	function get_defaultPosition() return viewClasses.get(Type.getClassName(Type.getClass(this))).position;
+	function get_defaultOptions() return viewClasses.get(Type.getClassName(Type.getClass(this))).options;
 
-	public static var viewClasses = new Map<String,{ name : String, cl : Class<View<Dynamic>>, position : DisplayPosition }>();
-	public static function register<T>( cl : Class<View<T>>, ?position : DisplayPosition ) {
+	public static var viewClasses = new Map<String,{ name : String, cl : Class<View<Dynamic>>, options : ViewOptions }>();
+	public static function register<T>( cl : Class<View<T>>, ?options : ViewOptions ) {
 		var name = Type.getClassName(cl);
 		if( viewClasses.exists(name) )
 			return null;
-		if( position == null )
-			position = Center;
-		viewClasses.set(name, { name : name, cl : cl, position : position });
+		if( options == null )
+			options = {}
+		if( options.position == null )
+			options.position = Center;
+		viewClasses.set(name, { name : name, cl : cl, options : options });
 		return null;
 	}
 

hide/view/About.hx

@@ -15,6 +15,6 @@ class About extends hide.ui.View<{}> {
 		');
 	}
 
-	static var _ = hide.ui.View.register(About, Bottom);
+	static var _ = hide.ui.View.register(About, { position : Bottom });
 
 }

hide/view/FileTree.hx

@@ -109,6 +109,6 @@ class FileTree extends hide.ui.View<{ root : String, opened : Array<String> }> {
 		return null;
 	}
 
-	static var _ = hide.ui.View.register(FileTree, Left);
+	static var _ = hide.ui.View.register(FileTree, { width : 200, position : Left });
 
 }

libs/golden/Container.hx

@@ -15,6 +15,7 @@ extern class Container {
 
 	public function setTitle( title : String ) : Void;
 	public function setState( state : Dynamic ) : Void;
+	public function setSize( width : Int, height : Int ) : Void;
 
 	public function close() : Bool;