added Color component, allow custom min/max Slider values

h2d/comp/Color.hx

@@ -0,0 +1,63 @@
+package h2d.comp;
+
+class Color extends Component {
+	
+	var input : h2d.Interactive;
+	public var value(default, set) : Int;
+	
+	public function new(?parent) {
+		super("color", parent);
+		input = new h2d.Interactive(0, 0, bg);
+		var active = false;
+		input.onPush = function(_) {
+			active = true;
+		};
+		input.onOver = function(_) {
+			addClass(":hover");
+		};
+		input.onOut = function(_) {
+			active = false;
+			removeClass(":hover");
+		};
+		input.onRelease = function(_) {
+			if( active ) selectColor();
+		};
+		value = 0;
+	}
+	
+	function set_value(v) {
+		needRebuild = true;
+		return value = v;
+	}
+	
+	override function resize( ctx : Context ) {
+		super.resize(ctx);
+		if( !ctx.measure ) {
+			input.width = width - (style.marginLeft + style.marginRight);
+			input.height = height - (style.marginTop + style.marginBottom);
+			bg.fillRectColor(extLeft() - style.marginLeft, extTop() - style.marginTop, contentWidth, contentHeight, 0xFF000000 | value);
+		}
+	}
+	
+	function selectColor() {
+		var p : Component = this;
+		while( p.parentComponent != null )
+			p = p.parentComponent;
+		var b = new Box(p);
+		b.setClass("modal", true);
+		var pick = new ColorPicker(b);
+		pick.color = value;
+		pick.addStyleString("dock:full");
+		pick.onChange = function(c) {
+			value = c;
+			onChange(c);
+		};
+		pick.onClose = function() {
+			b.remove();
+		};
+	}
+	
+	public dynamic function onChange( color : Int ) {
+	}
+	
+}

h2d/comp/Parser.hx

@@ -45,6 +45,8 @@ class Parser {
 			c = new ItemList(parent);
 		case "input":
 			c = new Input(parent);
+		case "color":
+			c = new Color(parent);
 		case "colorpicker":
 			c = new ColorPicker(parent);
 		case "gradienteditor":
@@ -74,6 +76,9 @@ class Parser {
 				case "input":
 					var c : Input = cast c;
 					c.value = v;
+				case "color":
+					var c : Color = cast c;
+					c.value = Std.parseInt(v);
 				default:
 				}
 			case "onclick":
@@ -101,6 +106,10 @@ class Parser {
 					var c : Input = cast c;
 					var s = makeScript(c,v);
 					c.onChange = function(_) s();
+				case "color":
+					var c : Color = cast c;
+					var s = makeScript(c,v);
+					c.onChange = function(_) s();
 				default:
 				}
 			case "style":
@@ -125,6 +134,20 @@ class Parser {
 				c.x = Std.parseFloat(v);
 			case "y":
 				c.y = Std.parseFloat(v);
+			case "min":
+				switch( c.name ) {
+				case "slider":
+					var c : Slider = cast c;
+					c.minValue = Std.parseFloat(v);
+				default:
+				}
+			case "max":
+				switch( c.name ) {
+				case "slider":
+					var c : Slider = cast c;
+					c.maxValue = Std.parseFloat(v);
+				default:
+				}
 			case n:
 				throw "Unknown attrib " + n;
 			}

h2d/comp/Slider.hx

@@ -4,6 +4,8 @@ class Slider extends Component {
 	
 	var cursor : Button;
 	var input : h2d.Interactive;
+	public var minValue : Float = 0.;
+	public var maxValue : Float = 1.;
 	public var value(default, set) : Float;
 	
 	@:access(h2d.comp.Button)
@@ -29,12 +31,12 @@ class Slider extends Component {
 	}
 	
 	function pixelToVal( e : hxd.Event ) {
-		return Std.int(e.relX - (style.borderSize + cursor.width * 0.5) ) / (input.width - (style.borderSize * 2 + cursor.width));
+		return (Std.int(e.relX - (style.borderSize + cursor.width * 0.5) ) / (input.width - (style.borderSize * 2 + cursor.width))) * (maxValue - minValue) + minValue;
 	}
 	
 	function gotoValue( v : Float ) {
-		if( v < 0 ) v = 0;
-		if( v > 1 ) v = 1;
+		if( v < minValue ) v = minValue;
+		if( v > maxValue ) v = maxValue;
 		if( v == value )
 			return;
 		var dv = Math.abs(value - v);
@@ -51,8 +53,8 @@ class Slider extends Component {
 	}
 	
 	function set_value(v:Float) {
-		if( v < 0 ) v = 0;
-		if( v > 1 ) v = 1;
+		if( v < minValue ) v = minValue;
+		if( v > maxValue ) v = maxValue;
 		value = v;
 		needRebuild = true;
 		return v;
@@ -65,7 +67,7 @@ class Slider extends Component {
 			input.height = cursor.height - (cursor.style.marginTop + cursor.style.marginBottom);
 			input.x = cursor.style.marginLeft - style.borderSize - cursor.width * 0.5;
 			input.y = cursor.style.marginTop;
-			cursor.style.offsetX = contentWidth * value - cursor.width * 0.5;
+			cursor.style.offsetX = contentWidth * (value - minValue) / (maxValue - minValue) - cursor.width * 0.5;
 		}
 	}
 

h2d/css/default.css

@@ -7,6 +7,12 @@
 	background-color : transparent;
 }
 
+div.modal {
+	layout : dock;
+	dock : full;
+	background-color : rgba(0,0,0,0.8);
+}
+
 button {
 	background-color : gradient(#434343, #4B4B4B, #383838, #3A3A3A);
 	border : 1px solid gradient(#A0A0A0,#909090,#707070,#606060);
@@ -95,6 +101,17 @@ input:focus {
 	cursor-color : white;
 }
 
+color {
+	width : 16px;
+	height : 16px;
+	padding : 1px;
+	border : 1px solid gradient(#A0A0A0,#909090,#707070,#606060);
+}
+
+color:hover {
+	border : 1px solid gradient(#C0C0C0,#B0B0B0,#888888,#707070);
+}
+
 colorpicker {
 	width : 200px;
 	height : 320px;