tile selector ok, multiline string input ok

bin/style.css

@@ -170,6 +170,11 @@ input[type=checkbox]:checked:after {
   height: 100%;
   z-index: 99;
   background-color: rgba(0, 0, 0, 0.2);
+  display: table;
+}
+.hide-modal > .content {
+  display: table-cell;
+  vertical-align: middle;
 }
 ::-webkit-scrollbar {
   width: 5px;
@@ -214,6 +219,38 @@ input[type=checkbox]:checked:after {
 .hide-scene-tree {
   min-height: 400px;
 }
+.hide-tileselect {
+  width: 800px;
+  height: 600px;
+  display: inline-block;
+  background-color: #111;
+  border: 1px solid #666;
+  text-align: left;
+  overflow: hidden;
+}
+.hide-tileselect .flex-scroll {
+  display: flex;
+  flex-direction: column;
+}
+.hide-tileselect .flex-scroll .scroll {
+  flex-grow: 1;
+  overflow: auto;
+}
+.hide-tileselect .flex-scroll .scroll .tile {
+  background-color: #202;
+  position: relative;
+}
+.hide-tileselect .flex-scroll .scroll .tile .valueDisp {
+  position: absolute;
+  background-color: rgba(0, 80, 128, 0.3);
+  border: 1px solid rgba(128, 128, 128, 0.5);
+  pointer-events: none;
+}
+.hide-tileselect .flex-scroll .scroll .tile .cursor {
+  position: absolute;
+  border: 1px solid #fff;
+  pointer-events: none;
+}
 .hide-range {
   display: inline-block;
 }

bin/style.less

@@ -171,6 +171,11 @@ input[type=checkbox] {
 	height: 100%;
 	z-index: 99;
 	background-color: rgba(0,0,0,0.2);
+	display: table;
+	&> .content {
+		display: table-cell;
+		vertical-align: middle;
+	}
 }
 
 ::-webkit-scrollbar {
@@ -228,6 +233,39 @@ input[type=checkbox] {
 	min-height: 400px;
 }
 
+.hide-tileselect {
+	width: 800px;
+	height: 600px;
+	display: inline-block;
+	background-color : #111;
+	border : 1px solid #666;
+	text-align: left;
+	overflow: hidden;
+	.flex-scroll {
+		display: flex;
+		flex-direction: column;
+		.scroll {
+			flex-grow: 1;
+			overflow : auto;
+			.tile {
+				background-color: #202;
+				position: relative;
+				.valueDisp {
+					position: absolute;
+					background-color: rgba(0,80,128,0.3);
+					border:1px solid rgba(128,128,128,0.5);
+					pointer-events:none;
+				}
+				.cursor {
+					position: absolute;
+					border : 1px solid #fff;
+					pointer-events:none;
+				}
+			}
+		}
+	}
+}
+
 .hide-range {
 
 	display : inline-block;

hide/comp/FileSelect.hx

@@ -7,7 +7,7 @@ class FileSelect extends Component {
 
 	public function new(extensions,?parent,?root) {
 		if( root == null )
-			root = new Element("<input type='file'>");
+			root = new Element("<input>");
 		super(parent,root);
 		root.addClass("file");
 		this.extensions = extensions;

hide/comp/Modal.hx

@@ -4,10 +4,11 @@ class Modal extends Component {
 
     public var content(default,null) : Element;
 
-    public function new(?parent,?root) {
-        super(parent,root);
-        this.root.addClass('hide-modal');
-        content = new Element("<div class='content'></div>").appendTo(this.root);
+    public function new(?parent,?el) {
+        super(parent,el);
+        element.addClass('hide-modal');
+        element.on("click dblclick keydown keyup keypressed mousedown mouseup mousewheel",function(e) e.stopPropagation());
+        content = new Element("<div class='content'></div>").appendTo(element);
     }
 
 }

hide/comp/Scrollable.hx

@@ -2,9 +2,9 @@ package hide.comp;
 
 class Scrollable extends Component {
 
-    public function new(?parent,?root) {
-        super(parent,root);
-        this.root.addClass("hide-scrollable");
+    public function new(?parent,?el) {
+        super(parent,el);
+        element.addClass("hide-scroll");
     }
 
 }

hide/comp/TextureSelect.hx

@@ -27,8 +27,11 @@ class TextureSelect extends FileSelect {
 		super.set_path(p);
 		if( p == null )
 			value = null;
-		else if( value == null || value.name != p )
-			value = Scene.getNearest(element).loadTexture("", p);
+		else if( value == null || value.name != p ) {
+			var scene = Scene.getNearest(element);
+			if( scene != null )
+				value = scene.loadTexture("", p);
+		}
 		if( p == null )
 			preview.hide();
 		else {

hide/comp/TileSelector.hx

@@ -2,49 +2,173 @@ package hide.comp;
 
 class TileSelector extends Component {
 
-    public var file(default,set) : String;
-    public var size(default,set) : Int;
-    public var value : Null<{ x : Int, y : Int, width : Int, height : Int }>;
-    public var allowRectSelect(default,set) : Bool;
-    public var allowSizeSelect(default,set) : Bool;
-
-    public function new(file,size,?parent,?root) {
-        super(parent,root);
-        this.root.addClass("hide-tileselect");
-        this.file = file;
-        this.size = size;
-    }
+	public var file(default,set) : String;
+	public var size(default,set) : Int;
+	public var value(default,set) : Null<{ x : Int, y : Int, width : Int, height : Int }>;
+	public var allowRectSelect(default,set) : Bool;
+	public var allowSizeSelect(default,set) : Bool;
+	public var allowFileChange(default,set) : Bool;
 
-    function set_file(file) {
-        this.file = file;
-        rebuild();
-        return file;
-    }
+    var valueDisp : Element;
+    var cursor : Element;
+    var image : Element;
+    var cursorPos : { x : Int, y : Int, x2 : Int, y2 : Int, down : Bool };
+    var width : Int;
+    var height : Int;
+    var zoom : Float;
 
-    function set_size(size) {
-        this.size = size;
-        rebuild();
-        return size;
-    }
+	public function new(file,size,?parent,?el) {
+		super(parent,el);
+		element.addClass("hide-tileselect");
+		this.file = file;
+		this.size = size;
+	}
 
-    function set_allowRectSelect(b) {
-        allowRectSelect = b;
-        rebuild();
-        return b;
-    }
+	function set_file(file) {
+		this.file = file;
+		rebuild();
+		return file;
+	}
 
-    function set_allowSizeSelect(b) {
-        allowSizeSelect = b;
-        rebuild();
-        return b;
-    }
+	function set_value(v) {
+		value = v;
+        if( cursorPos != null ) updateCursor();
+        return v;
+	}
+
+	function set_size(size) {
+		this.size = size;
+		rebuild();
+		return size;
+	}
+
+	function set_allowRectSelect(b) {
+		allowRectSelect = b;
+		rebuild();
+		return b;
+	}
+
+	function set_allowSizeSelect(b) {
+		allowSizeSelect = b;
+		rebuild();
+		return b;
+	}
 
-    function rebuild() {
-        root.html('<div class="tile" style="background-image:url(\'file://${ide.getPath(file)}\')"></div>');
-        root.click(function(e) e.stopPropagation());
+	function set_allowFileChange(b) {
+		allowFileChange = b;
+		rebuild();
+		return b;
+	}
+
+    function updateCursor() {
+        var k = size * zoom;
+        var width = hxd.Math.abs(cursorPos.x2 - cursorPos.x) + 1;
+        var height = hxd.Math.abs(cursorPos.y2 - cursorPos.y) + 1;
+        cursor.css({left: hxd.Math.min(cursorPos.x,cursorPos.x2)*k,top:hxd.Math.min(cursorPos.y,cursorPos.y2)*k,width:width*k,height:height*k});
+        cursor.toggle(cursorPos.x >= 0);
+        if( value != null ) {
+            valueDisp.show();
+            valueDisp.css({left:value.x*k,top:value.y*k,width:value.width*k,height:value.height*k});
+        } else
+            valueDisp.hide();
     }
 
-    public dynamic function onChange() {
+    function rescale() {
+        image.height(height*zoom).width(width*zoom);
+        image.css("background-size",(width*zoom)+"px "+(height*zoom)+"px");
+        updateCursor();
     }
 
+	function rebuild() {
+
+		element.empty();
+		element.off();
+        element.click(function(e) e.stopPropagation());
+
+		var tool = new Toolbar(element);
+		if( allowFileChange ) {
+			var tex = new hide.comp.TextureSelect(tool.element);
+			tex.path = file;
+			tex.onChange = function() this.file = tex.path;
+		}
+		if( allowSizeSelect ) {
+			var size = new Element('<span><input type="number" value="$size">px</span>').appendTo(tool.element);
+			size.find("input").on("blur",function(e:js.jquery.Event) {
+                var nsize = Std.parseInt(e.getThis().val());
+                if( this.size != nsize && nsize != null && nsize > 0 )
+				    this.size = nsize;
+			});
+		}
+		if( tool.element.children().length == 0 )
+			tool.remove();
+
+		var url = "file://" + ide.getPath(file);
+		var scroll = new Element("<div class='flex-scroll'><div class='scroll'>").appendTo(element).find(".scroll");
+		image = new Element('<div class="tile" style="background-image:url(\'$url\')"></div>').appendTo(scroll);
+
+        valueDisp = new Element('<div class="valueDisp">').appendTo(image);
+		cursor = new Element('<div class="cursor">').appendTo(image);
+        cursorPos = { x : -1, y : -1, x2 : -1, y2 : -1, down : false };
+		var i = js.Browser.document.createImageElement();
+		i.onload = function(_) {
+            width = i.width;
+            height = i.height;
+			zoom = Math.floor(hxd.Math.min(800 / width, 580 / height));
+			if( zoom <= 0 ) zoom = 1;
+			scroll.on("mousewheel", function(e:js.jquery.Event) {
+				if( !e.ctrlKey )
+					return;
+				if( untyped e.originalEvent.wheelDelta > 0 )
+					zoom++;
+				else if( zoom > 1 )
+					zoom--;
+				rescale();
+				e.preventDefault();
+			});
+			image.on("mousemove", function(e:js.jquery.Event) {
+				var k = zoom * size;
+				var x = Math.floor(e.offsetX / k);
+				var y = Math.floor(e.offsetY / k);
+				if( (x+1) * size > i.width ) x--;
+				if( (y+1) * size > i.height ) y--;
+                if( cursorPos.down ) {
+                    cursorPos.x2 = x;
+                    cursorPos.y2 = y;
+                } else {
+                    cursorPos.x = cursorPos.x2 = x;
+                    cursorPos.y = cursorPos.y2 = y;
+                }
+                updateCursor();
+			});
+            image.on("mousedown", function(e:js.jquery.Event) {
+                if( allowRectSelect )
+                    cursorPos.down = true;
+            });
+            image.on("mouseup", function(e:js.jquery.Event) {
+                cursorPos.down = false;
+                if( cursorPos.x2 >= cursorPos.x ) {
+                    value.x = cursorPos.x;
+                    value.width = cursorPos.x2 - cursorPos.x + 1;
+                } else {
+                    value.x = cursorPos.x2;
+                    value.width = cursorPos.x - cursorPos.x2 + 1;
+                }
+                if( cursorPos.y2 >= cursorPos.y ) {
+                    value.y = cursorPos.y;
+                    value.height = cursorPos.y2 - cursorPos.y + 1;
+                } else {
+                    value.y = cursorPos.y2;
+                    value.height = cursorPos.y - cursorPos.y2 + 1;
+                }
+                onChange(e.which == 3);
+                e.preventDefault();
+            });
+			rescale();
+		};
+		i.src = url;
+	}
+
+	public dynamic function onChange( rightClick : Bool ) {
+	}
+
 }

hide/comp/cdb/Cell.hx

@@ -217,6 +217,16 @@ class Cell extends Component {
 				case K.ENTER if( !e.shiftKey ):
 					closeEdit();
 					e.preventDefault();
+				case K.ENTER if( !longText ):
+					var old = currentValue;
+					var newVal = i.val() + "\n";
+					Reflect.setField(line.obj, column.name, newVal+"x");
+					refresh();
+					Reflect.setField(line.obj, column.name,old);
+					currentValue = newVal;
+					edit();
+					(cast element.find("textarea")[0] : js.html.TextAreaElement).setSelectionRange(newVal.length,newVal.length);
+					e.preventDefault();
 				case K.UP, K.DOWN if( !longText ):
 					closeEdit();
 					return;
@@ -353,7 +363,58 @@ class Cell extends Component {
 				refresh();
 			});
 		case TTilePos:
-			throw "TODO "+column.type;
+			var modal = new hide.comp.Modal(element);
+			modal.element.click(function(_) closeEdit());
+
+			var t : cdb.Types.TilePos = currentValue;
+			var file = t == null ? null : t.file;
+			var size = t == null ? 16 : t.size;
+			var pos = t == null ? { x : 0, y : 0, width : 1, height : 1 } : { x : t.x, y : t.y, width : t.width == null ? 1 : t.width, height : t.height == null ? 1 : t.height };
+			if( file == null ) {
+				var y = line.index - 1;
+				while( y >= 0 ) {
+					var o = line.table.lines[y--];
+					var v2 = Reflect.field(o.obj, column.name);
+					if( v2 != null ) {
+						file = v2.file;
+						size = v2.size;
+						break;
+					}
+				}
+			}
+
+			function setVal() {
+				var v : Dynamic = { file : file, size : size, x : pos.x, y : pos.y };
+				if( pos.width != 1 ) v.width = pos.width;
+				if( pos.height != 1 ) v.height = pos.height;
+				setValue(v);
+			}
+
+			if( file == null ) {
+				ide.chooseFile(["png","jpeg","jpg","gif"],function(path) {
+					file = path;
+					setVal();
+					closeEdit();
+					edit();
+				});
+				return;
+			}
+
+			var ts = new hide.comp.TileSelector(file,size,modal.content);
+			ts.allowRectSelect = true;
+			ts.allowSizeSelect = true;
+			ts.allowFileChange = true;
+			ts.value = pos;
+			ts.onChange = function(rightClick) {
+				if( !rightClick ) {
+					file = ts.file;
+					size = ts.size;
+					pos = ts.value;
+					setVal();
+				}
+				refresh();
+			};
+
 		case TLayer(_), TTileLayer:
 			// no edit
 		case TImage: