more cells edit

bin/cdb.css

@@ -175,9 +175,14 @@
 }
 .cdb .cdb-sheet td.t_color {
   text-align: center;
+  position: relative;
 }
-.cdb .cdb-sheet td.t_color .modal {
-  opacity: 0.;
+.cdb .cdb-sheet td.t_color ._hide-modal {
+  opacity: 0;
+}
+.cdb .cdb-sheet td.t_color .sp-replacer {
+  visibility: hidden;
+  position: absolute;
 }
 .cdb .cdb-sheet td.t_color .color {
   display: inline-block;
@@ -188,10 +193,11 @@
 }
 .cdb .cdb-sheet .flagValues {
   position: absolute;
-  background-color: white;
+  background-color: #333;
   width: 150px;
   padding: 5px;
-  border: 1px solid #333;
+  border: 1px solid #666;
+  z-index: 100;
 }
 .cdb .cdb-sheet .flagValues label {
   display: block;
@@ -199,10 +205,11 @@
   padding: 1px;
 }
 .cdb .cdb-sheet .flagValues label input {
-  float: right;
+  float: left;
+  margin-right: 5px;
 }
 .cdb .cdb-sheet .flagValues label:hover {
-  background-color: #eee;
+  background-color: #262d35;
 }
 .cdb .cdb-sheet span.error {
   color: #C44;
@@ -217,6 +224,7 @@
 }
 .cdb .cdb-sheet tr.props > td > div {
   display: inline-block;
+  max-width: 600px;
 }
 .cdb .cdb-sheet tr.props .cdb-sheet {
   width: auto;
@@ -227,6 +235,10 @@
 .cdb .cdb-sheet tr.props .cdb-sheet th {
   width: 200px;
 }
+.cdb .cdb-sheet tr.props .cdb-sheet td,
+.cdb .cdb-sheet tr.props .cdb-sheet td > input {
+  text-align: left;
+}
 .cdb .cdb-sheet td.t_file .preview .previewContent {
   display: none;
   position: absolute;

bin/cdb.less

@@ -195,8 +195,13 @@
 
 		td.t_color {
 			text-align : center;
-			.modal {
-				opacity : 0.;
+			position: relative;
+			._hide-modal {
+				opacity : 0;
+			}
+			.sp-replacer {
+				visibility: hidden;
+				position: absolute;
 			}
 			.color {
 				display : inline-block;
@@ -209,20 +214,22 @@
 
 		.flagValues {
 			position : absolute;
-			background-color : white;
+			background-color : #333;
 			width : 150px;
 			padding : 5px;
-			border : 1px solid #333;
+			border : 1px solid #666;
+			z-index: 100;
 			label {
 				display : block;
 				clear : both;
 				input {
-					float : right;
+					float : left;
+					margin-right: 5px;
 				}
 				padding : 1px;
 			}
 			label:hover {
-				background-color : #eee;
+				background-color : #262d35;
 			}
 		}
 
@@ -238,12 +245,16 @@
 				text-align: right;
 				&> div {
 					display: inline-block;
+					max-width: 600px;
 				}
 			}
 			.cdb-sheet {
 				th {
 					width: 200px;
 				}
+				td, td > input {
+					text-align: left;
+				}
 				width : auto;
 				min-width: 400px;
 				border-right: 1px solid #333;

bin/style.css

@@ -63,6 +63,10 @@ body .select2-container--default .select2-selection--single {
 body .select2-container--default .select2-selection--single .select2-selection__rendered {
   padding-left: 2px;
   color: #aaa;
+  line-height: inherit;
+}
+body .select2-container--default .select2-selection--single .select2-selection__arrow {
+  display: none;
 }
 body .select2-container--default .select2-results__option[aria-selected=true] {
   background-color: #444;
@@ -158,6 +162,15 @@ input[type=checkbox]:checked:after {
   max-height: 100%;
   overflow: auto;
 }
+.hide-modal {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+  background-color: rgba(0, 0, 0, 0.2);
+}
 ::-webkit-scrollbar {
   width: 5px;
   height: 5px;

bin/style.less

@@ -54,6 +54,10 @@ body .select2-container--default {
 		.select2-selection__rendered {
 			padding-left: 2px;
 			color: #aaa;
+			line-height: inherit;
+		}
+		.select2-selection__arrow {
+			display: none;
 		}
 	}
 	.select2-results__option[aria-selected=true] {
@@ -159,6 +163,16 @@ input[type=checkbox] {
 	overflow : auto;
 }
 
+.hide-modal {
+	position: fixed;
+	top:0px;
+	left:0px;
+	width: 100%;
+	height: 100%;
+	z-index: 99;
+	background-color: rgba(0,0,0,0.2);
+}
+
 ::-webkit-scrollbar {
 	width: 5px;
 	height: 5px;

hide/Ide.hx

@@ -1,6 +1,7 @@
 package hide;
 import hide.ui.Props;
 
+@:expose
 class Ide {
 
 	public var currentProps(get,never) : Props;

hide/comp/ColorPicker.hx

@@ -14,6 +14,12 @@ class ColorPicker extends Component {
 			showAlpha : alpha,
 			showButtons: false,
 			preferredFormat: alpha ? "hex8" : "hex",
+			hide : function() {
+				onClose();
+			},
+			show : function() {
+				onOpen();
+			},
 			change : function(color) {
 				innerValue = Std.parseInt("0x"+color.toHex8()) & mask;
 				onChange(false);
@@ -35,6 +41,20 @@ class ColorPicker extends Component {
 		};
 	}
 
+	public function open() {
+		(untyped root.spectrum)("show");
+	}
+
+	public function close() {
+		(untyped root.spectrum)("hide");
+	}
+
+	public dynamic function onOpen() {
+	}
+
+	public dynamic function onClose() {
+	}
+
 	public dynamic function onChange(dragging) {
 	}
 

hide/comp/cdb/Cell.hx

@@ -155,7 +155,7 @@ class Cell extends Component {
 			else if( ext == "png" || ext == "jpg" || ext == "jpeg" || ext == "gif" )
 				html = '<span class="preview">$html<div class="previewContent"><div class="label"></div><img src="$url" onload="$(this).parent().find(\'.label\').text(this.width+\'x\'+this.height)"/></div></span>';
 			if( v != "" )
-				html += ' <input type="submit" value="open" onclick="_.openFile(\'$path\')"/>';
+				html += ' <input type="submit" value="open" onclick="hide.Ide.inst.openFile(\'$path\')"/>';
 			html;
 		case TTilePos:
 			return tileHtml(v);
@@ -195,11 +195,15 @@ class Cell extends Component {
 		switch( column.type ) {
 		case TInt, TFloat, TString, TId, TCustom(_), TDynamic:
 			var str = value == null ? "" : editor.base.valToString(column.type, value);
-			var textHeight = root.wrapInner("<span>").find("span").height();
+			var textSpan = root.wrapInner("<span>").find("span");
+			var textHeight = textSpan.height();
+			var textWidth = textSpan.width();
 			var longText = textHeight > 25;
 			root.empty();
 			root.addClass("edit");
 			var i = new Element(longText ? "<textarea>" : "<input>").appendTo(root);
+			if( table.displayMode == Properties || table.displayMode == AllProperties )
+				i.css({ width : Math.ceil(textWidth - 3) + "px" });
 			if( longText ) {
 				root.addClass("edit_long");
 				i.css({ height : Math.ceil(textHeight - 1) + "px" });
@@ -272,8 +276,88 @@ class Cell extends Component {
 				closeEdit();
 			});
 			s.on("select2:close", function(_) closeEdit());
-		case TColor, TEnum(_), TFile, TFlags(_), TLayer(_), TTileLayer, TTilePos:
+		case TEnum(values):
+			root.empty();
+			root.addClass("edit");
+			var s = new Element("<select>");
+			var elts = [for( i in 0...values.length ){ id : ""+i, ico : null, text : values[i] }];
+			if( column.opt )
+				elts.unshift( { id : "-1", ico : null, text : "--- None ---" } );
+			root.append(s);
+
+			var props : Dynamic = { data : elts };
+			(untyped s.select2)(props);
+			(untyped s.select2)("val", currentValue == null ? "" : currentValue);
+			(untyped s.select2)("open");
+
+			s.change(function(e) {
+				var val = Std.parseInt(s.val());
+				if( val < 0 ) val = null;
+				setValue(val);
+				closeEdit();
+			});
+			s.keydown(function(e) {
+				switch( e.keyCode ) {
+				case K.LEFT, K.RIGHT:
+					s.blur();
+					return;
+				case K.TAB:
+					s.blur();
+					editor.cursor.move(e.shiftKey? -1:1, 0, false, false);
+					var c = editor.cursor.getCell();
+					if( c != this ) c.edit();
+					e.preventDefault();
+				default:
+				}
+				e.stopPropagation();
+			});
+			s.on("select2:close", function(_) closeEdit());
+		case TColor:
+			var modal = new Element("<div>").addClass("hide-modal").appendTo(root);
+			var e = new Element("<input>");
+			root.append(e);
+			var color = new ColorPicker(e);
+			color.value = currentValue;
+			color.open();
+			color.onChange = function(drag) {
+				root.find(".color").css({backgroundColor : '#'+StringTools.hex(color.value,6) });
+			};
+			color.onClose = function() {
+				setValue(color.value);
+				e.remove();
+				closeEdit();
+			};
+			modal.click(function(_) color.close());
+		case TFile:
+			ide.chooseFile(["*"], function(file) {
+				if( file != null ) {
+					setValue(file);
+					refresh();
+				}
+			});
+		case TFlags(values):
+			var div = new Element("<div>").addClass("flagValues");
+			div.click(function(e) e.stopPropagation()).dblclick(function(e) e.stopPropagation());
+			var val = currentValue;
+			for( i in 0...values.length ) {
+				var f = new Element("<input>").attr("type", "checkbox").prop("checked", val & (1 << i) != 0).change(function(e) {
+					val &= ~(1 << i);
+					if( e.getThis().prop("checked") ) val |= 1 << i;
+					e.stopPropagation();
+				});
+				new Element("<label>").text(values[i]).appendTo(div).prepend(f);
+			}
+			root.empty();
+			var modal = new Element("<div>").addClass("hide-modal").appendTo(root);
+			root.append(div);
+			modal.click(function(e) {
+				setValue(val);
+				refresh();
+			});
+		case TTilePos:
 			throw "TODO "+column.type;
+		case TLayer(_), TTileLayer:
+			// no edit
 		case TImage:
 			// deprecated
 		}