added input for ranges, fixed keys handling

bin/style.css

@@ -237,7 +237,7 @@ input[type=checkbox]:checked:after {
 }
 /* Properties */
 .hide-properties {
-  flex: 0 0 260px;
+  flex: 0 0 300px;
   padding: 10px;
   overflow: auto;
   padding-bottom: 80px;
@@ -285,14 +285,28 @@ input[type=checkbox]:checked:after {
   cursor: default;
 }
 .hide-properties dd {
-  width: 160px;
+  width: 200px;
   margin-left: 10px;
 }
 .hide-properties dd input:not([type=checkbox]):not([type=number]) {
-  width: 150px;
+  width: 190px;
 }
 .hide-properties dd select {
-  width: 156px;
+  width: 197px;
+}
+.hide-properties dd .range-group input[type=range] {
+  display: inline-block;
+  width: 155px;
+}
+.hide-properties dd .range-group input[type=text] {
+  display: inline-block;
+  width: 30px;
+  margin-left: 3px;
+  border-color: transparent;
+}
+.hide-properties dd .range-group input[type=text]:hover,
+.hide-properties dd .range-group input[type=text]:active {
+  border-color: #444;
 }
 .hide-properties .group {
   margin-bottom: 5px;

bin/style.less

@@ -259,7 +259,7 @@ input[type=checkbox] {
 /* Properties */
 
 .hide-properties {
-	flex : 0 0 260px;
+	flex : 0 0 300px;
 	padding:10px;
 	overflow:auto;
 	padding-bottom:80px;
@@ -311,13 +311,29 @@ input[type=checkbox] {
 	}
 
 	dd {
-		width:160px;
+		width:200px;
 		margin-left:10px;
 		input:not([type=checkbox]):not([type=number]) {
-			width:150px;
+			width:190px;
 		}
 		select {
-			width:156px;
+			width:197px;
+		}
+
+		.range-group {
+			input[type=range] {
+				display : inline-block;
+				width: 155px;
+			}
+			input[type=text] {
+				display : inline-block;
+				width: 30px;
+				margin-left:3px;
+				border-color: transparent;
+			}
+			input[type=text]:hover, input[type=text]:active {
+				border-color: #444;
+			}
 		}
 	}
 

hide/comp/PropsEditor.hx

@@ -38,7 +38,10 @@ class PropsEditor extends Component {
 
 		e.find("input[type=checkbox]").wrap("<div class='checkbox-wrapper'></div>");
 
-		e.find("input[type=range]").not("[step]").attr("step", "any");
+		for( s in e.find("input[type=range]").not("[step]").elements() ) {
+			var range = Std.parseFloat(s.attr("max")) - Std.parseFloat(s.attr("min"));
+			s.attr("step", ""+hxd.Math.fmt(range/200));
+		}
 
 		// -- reload states ---
 		for( h in e.find(".section > h1").elements() )
@@ -155,8 +158,35 @@ class PropsField extends Component {
 			}
 		}
 
-		if( f.is("[type=range]") )
+		var inputView = null;
+		if( f.is("[type=range]") ) {
+			f.wrap('<div class="range-group"/>');
+			var p = f.parent();
+			var original = current;
+			p.parent().prev("dt").contextmenu(function(e) {
+				e.preventDefault();
+				new ContextMenu([
+					{ label : "Reset", click : function() { f.val(original); f.change(); } },
+					{ label : "Cancel", click : function() {} },
+				]);
+				return false;
+			});
+			inputView = new Element('<input type="text">').appendTo(p);
+			inputView.val(current);
+			inputView.keyup(function(e) {
+				if( e.keyCode == 13 || e.keyCode == 27 ) {
+					inputView.blur();
+					inputView.val(current);
+					return;
+				}
+				var v = Std.parseFloat(inputView.val());
+				if( !Math.isNaN(v) ) {
+					f.val(v);
+					f.change();
+				}
+			});
 			f.on("input", function(_) { tempChange = true; f.change(); });
+		}
 
 		f.val(current);
 		f.keyup(function(e) {
@@ -190,6 +220,9 @@ class PropsField extends Component {
 				beforeTempChange = null;
 			}
 
+			if( inputView != null )
+				inputView.val(newVal);
+
 			if( tempChange ) {
 				tempChange = false;
 				if( beforeTempChange == null ) beforeTempChange = { value : current };
@@ -199,6 +232,8 @@ class PropsField extends Component {
 					var f = resolveField();
 					f.current = Reflect.field(f.context, fname);
 					f.root.val(f.current);
+					if( inputView != null )
+						f.root.parent().find("input[type=text]").val(f.current);
 					f.onChange(true);
 				});
 			}

hide/ui/Ide.hx

@@ -61,6 +61,7 @@ class Ide {
 			window.close(true);
 		});
 
+		// handle commandline parameters
 		nw.App.on("open", function(cmd) {
 			~/"([^"]+)"/g.map(cmd, function(r) {
 				var file = r.matched(1);
@@ -72,6 +73,17 @@ class Ide {
 		// handle cancel on type=file
 		var body = window.window.document.body;
 		body.onfocus = function(_) haxe.Timer.delay(function() new Element(body).find("input[type=file]").change().remove(), 200);
+
+		// dispatch global keys based on mouse position
+		new Element(body).keydown(function(e) {
+			for( v in views ) {
+				var c = v.root.offset();
+				if( mouseX >= c.left && mouseY >= c.top && mouseX <= c.left + v.root.outerWidth() && mouseY <= c.top + v.root.outerHeight() ) {
+					v.keys.processEvent(e);
+					break;
+				}
+			}
+		});
 	}
 
 	function onWindowChange() {

hide/ui/Keys.hx

@@ -14,12 +14,12 @@ class Keys {
 		if( active != null && active.nodeName == "INPUT" ) return;
 
 		var parts = [];
-		if( e.shiftKey )
-			parts.push("Shift");
-		if( e.ctrlKey )
-			parts.push("Ctrl");
 		if( e.altKey )
 			parts.push("Alt");
+		if( e.ctrlKey )
+			parts.push("Ctrl");
+		if( e.shiftKey )
+			parts.push("Shift");
 		if( e.keyCode >= 'A'.code && e.keyCode <= 'Z'.code )
 			parts.push(String.fromCharCode(e.keyCode));
 		else if( e.keyCode >= 96 && e.keyCode <= 105 )
@@ -42,7 +42,10 @@ class Keys {
 
 		var key = parts.join("-");
 		var callb = keys.get(key);
-		if( callb != null ) callb();
+		if( callb != null ) {
+			callb();
+			e.stopPropagation();
+		}
 	}
 
 	public function register( name : String, callb : Void -> Void ) {