more cdb edition: props add/remove & style, del lines/cells, auto save

bin/cdb.css

@@ -91,6 +91,7 @@
 .cdb .cdb-sheet th {
   font-weight: bold;
   text-align: center;
+  padding: 1px 10px;
   border-bottom: 1px solid #666;
   border-left: 1px solid #555;
   background-color: #222;
@@ -205,6 +206,26 @@
 .cdb .cdb-sheet span.error {
   color: #C44;
 }
+.cdb .cdb-sheet tr.props {
+  background-color: #111;
+}
+.cdb .cdb-sheet tr.props > td {
+  border: none;
+  padding: 0;
+  text-align: right;
+}
+.cdb .cdb-sheet tr.props > td > div {
+  display: inline-block;
+}
+.cdb .cdb-sheet tr.props .cdb-sheet {
+  width: auto;
+  min-width: 400px;
+  border-right: 1px solid #333;
+  margin-bottom: 15px;
+}
+.cdb .cdb-sheet tr.props .cdb-sheet th {
+  width: 200px;
+}
 .cdb .cdb-sheet td.t_file .preview .previewContent {
   display: none;
   position: absolute;

bin/cdb.less

@@ -101,6 +101,7 @@
 		tr.head, th {
 			font-weight: bold;
 			text-align: center;
+			padding: 1px 10px;
 			border-bottom : 1px solid #666;
 			border-left: 1px solid #555;
 			background-color : #222;
@@ -229,6 +230,27 @@
 			color : #C44;
 		}
 
+		tr.props {
+			background-color: #111;
+			&> td {
+				border : none;
+				padding : 0;
+				text-align: right;
+				&> div {
+					display: inline-block;
+				}
+			}
+			.cdb-sheet {
+				th {
+					width: 200px;
+				}
+				width : auto;
+				min-width: 400px;
+				border-right: 1px solid #333;
+				margin-bottom: 15px;
+			}
+		}
+
 		td.t_file {
 			.preview {
 				.previewContent {

bin/style.css

@@ -77,6 +77,7 @@ input[type=range]:focus {
 }
 input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
+  appearance: none;
   outline: 1px solid #aaa;
   height: 6px;
   width: 6px;

bin/style.less

@@ -4,6 +4,7 @@ body {
 	background-color : black;
 }
 
+//:focus { outline: none; }
 
 a {
 	text-decoration : none;
@@ -72,6 +73,7 @@ input[type=range] {
 	}
 	&::-webkit-slider-thumb {
 		-webkit-appearance: none;
+		appearance: none;
 		outline: 1px solid #aaa;
 		height: 6px;
 		width: 6px;
@@ -647,7 +649,7 @@ input[type=checkbox] {
 				width: 4px;
 				margin-left: -4px;
 			}
-			
+
 			// .preview-left::after {
 			// 	background: url(http://placehold.it/16x16) no-repeat;
 			// }

hide/comp/cdb/Cell.hx

@@ -65,7 +65,7 @@ class Cell extends Component {
 		case TId:
 			v == "" ? '<span class="error">#MISSING</span>' : (editor.base.getSheet(sheet.name).index.get(v).obj == obj ? v : '<span class="error">#DUP($v)</span>');
 		case TString, TLayer(_):
-			v == "" ? "&nbsp;" : StringTools.htmlEscape(v);
+			v == "" ? "&nbsp;" : StringTools.htmlEscape(v).split("\n").join("<br/>");
 		case TRef(sname):
 			if( v == "" )
 				'<span class="error">#MISSING</span>';
@@ -209,7 +209,8 @@ class Cell extends Component {
 				switch( e.keyCode ) {
 				case K.ESCAPE:
 					refresh();
-				case K.ENTER:
+					table.editor.root.focus();
+				case K.ENTER if( !e.shiftKey ):
 					closeEdit();
 					e.preventDefault();
 				case K.UP, K.DOWN if( !longText ):
@@ -317,19 +318,7 @@ class Cell extends Component {
 		if( undo == null )
 			undo = [];
 		currentValue = value;
-		var mainLine = line;
-		while( true ) {
-			var sub = Std.instance(mainLine.table, SubTable);
-			if( sub == null ) break;
-			mainLine = sub.cell.line;
-		}
-		var prev = Reflect.field(line.obj, column.name);
-		undo.push({ ref : { mainSheet : mainLine.table.sheet, mainObj : mainLine.obj, obj : line.obj, sheet : line.table.sheet }, v : SetField(line.obj, column.name, prev) });
-		if( value == null )
-			Reflect.deleteField(line.obj, column.name);
-		else
-			Reflect.setField(line.obj, column.name, value);
-		table.sheet.updateValue(column, line.index, prev);
+		undo.push(editor.changeObject(line,column,value));
 		editor.addChanges(undo);
 	}
 
@@ -337,6 +326,7 @@ class Cell extends Component {
 		var str = root.find("input,textarea").val();
 		if( str != null ) setRawValue(str);
 		refresh();
+		table.editor.root.focus();
 	}
 
 }

hide/comp/cdb/Cursor.hx

@@ -50,7 +50,7 @@ class Cursor {
 			update();
 			return;
 		}
-		if( dx < 0 && x >= 0 )
+		if( dx < 0 && (table.displayMode == Table ? x >= 0 : x > 0) )
 			x--;
 		if( dy < 0 && y > 0 )
 			y--;

hide/comp/cdb/Editor.hx

@@ -31,9 +31,10 @@ class Editor extends Component {
 			searchBox.find("input").focus().select();
 		});
 		keys.register("copy", onCopy);
+		keys.register("delete", onDelete);
 		keys.register("cdb.showReferences", showReferences);
-		keys.register("undo", function() if( undo.undo() ) { refresh(); save(); });
-		keys.register("redo", function() if( undo.redo() ) { refresh(); save(); });
+		keys.register("undo", function() if( undo.undo() ) refresh());
+		keys.register("redo", function() if( undo.redo() ) refresh());
 		for( k in ["cdb.editCell","rename"] )
 			keys.register(k, function() {
 				var c = cursor.getCell();
@@ -125,6 +126,52 @@ class Editor extends Component {
 		ide.setClipboard(clipboard.text);
 	}
 
+	function onDelete() {
+		var sel = cursor.getSelection();
+		if( sel == null )
+			return;
+		var changes : Array<cdb.Database.Change> = [];
+		if( cursor.x < 0 ) {
+			// delete lines
+			var y = sel.y2;
+			while( y >= sel.y1 ) {
+				var line = cursor.table.lines[y];
+				changes.push({ ref : line.getChangeRef(), v : InsertIndex(line.table.sheet.lines,line.index,line.obj) });
+				line.table.sheet.lines.splice(line.index, 1);
+				y--;
+			}
+			cursor.set(cursor.table, -1, sel.y1, null, false);
+		} else {
+			// delete cells
+			for( y in sel.y1...sel.y2+1 ) {
+				var line = cursor.table.lines[y];
+				for( x in sel.x1...sel.x2+1 ) {
+					var c = line.columns[x];
+					var old = Reflect.field(line.obj, c.name);
+					var def = base.getDefault(c,false);
+					if( old == def )
+						continue;
+					changes.push(changeObject(line,c,def));
+				}
+			}
+		}
+		if( changes.length > 0 ) {
+			addChanges(changes);
+			refresh();
+		}
+	}
+
+	public function changeObject( line : Line, column : cdb.Data.Column, value : Dynamic ) {
+		var prev = Reflect.field(line.obj, column.name);
+		var change : cdb.Database.Change = { ref : line.getChangeRef(), v : SetField(line.obj, column.name, prev) };
+		if( value == null )
+			Reflect.deleteField(line.obj, column.name);
+		else
+			Reflect.setField(line.obj, column.name, value);
+		line.table.sheet.updateValue(column, line.index, prev);
+		return change;
+	}
+
 	function showReferences() {
 		if( cursor.table == null ) return;
 		// todo : port from old cdb
@@ -151,6 +198,8 @@ class Editor extends Component {
 
 	function refresh() {
 
+		base.sync();
+
 		root.empty();
 		root.addClass('cdb');
 

hide/comp/cdb/Line.hx

@@ -6,15 +6,27 @@ class Line extends Component {
 	public var table : Table;
 	public var obj(get, never) : Dynamic;
 	public var cells : Array<Cell>;
+	public var columns : Array<cdb.Data.Column>;
 	public var subTable : SubTable;
 
-	public function new(table, index, root) {
+	public function new(table, columns, index, root) {
 		super(root);
 		this.table = table;
 		this.index = index;
+		this.columns = columns;
 		cells = [];
 	}
 
+	public function getChangeRef() : cdb.Database.ChangeRef {
+		var mainLine = this;
+		while( true ) {
+			var sub = Std.instance(mainLine.table, SubTable);
+			if( sub == null ) break;
+			mainLine = sub.cell.line;
+		}
+		return { mainSheet : mainLine.table.sheet, mainObj : mainLine.obj, obj : obj, sheet : table.sheet };
+	}
+
 	inline function get_obj() return table.sheet.lines[index];
 
 }

hide/comp/cdb/SubTable.hx

@@ -15,9 +15,23 @@ class SubTable extends Table {
 		if( line.subTable != null ) throw "assert";
 		line.subTable = this;
 
+		var mode : Table.DisplayMode = switch( cell.column.type ) {
+		case TProperties: Properties;
+		default: Table;
+		};
+
 		insertedTR = new Element("<tr>").addClass(cell.column.type == TProperties ? "props" : "list");
-		new Element("<td>").appendTo(insertedTR);
-		var group = new Element("<td>").attr("colspan", "" + cell.table.sheet.columns.length).appendTo(insertedTR);
+		var group;
+		if( mode == Properties ) {
+			var count = cell.columnIndex + 1;
+			group = new Element("<td>").attr("colspan",""+(count+1)).appendTo(insertedTR);
+			var remain = cell.table.sheet.columns.length - count;
+			if( remain > 0 )
+				new Element("<td>").attr("colspan", "" + remain).appendTo(insertedTR);
+		} else {
+			new Element("<td>").appendTo(insertedTR);
+			group = new Element("<td>").attr("colspan",""+cell.table.sheet.columns.length).appendTo(insertedTR);
+		}
 		slider = new Element("<div>").appendTo(group);
 		slider.hide();
 		var root = new Element("<table>");
@@ -26,10 +40,6 @@ class SubTable extends Table {
 		insertedTR.insertAfter(cell.line.root);
 		cell.root.text("...");
 
-		var mode : Table.DisplayMode = switch( cell.column.type ) {
-		case TProperties: Properties;
-		default: Table;
-		};
 		super(editor, sheet, root, mode);
 	}
 

hide/comp/cdb/Table.hx

@@ -50,7 +50,7 @@ class Table extends Component {
 			var l = J("<tr>");
 			var head = J("<td>").addClass("start").text("" + index);
 			head.appendTo(l);
-			var line = new Line(this, index, l);
+			var line = new Line(this, sheet.columns, index, l);
 			l.mousedown(function(e) {
 				if( e.which == 3 ) {
 					head.click();
@@ -177,7 +177,7 @@ class Table extends Component {
 			var th = new Element("<th>").text(c.name).appendTo(l);
 			var td = new Element("<td>").addClass("c").appendTo(l);
 
-			var line = new Line(this, lines.length, l);
+			var line = new Line(this, [c], lines.length, l);
 			var cell = new Cell(td, line, c);
 			lines.push(line);
 
@@ -199,32 +199,37 @@ class Table extends Component {
 		}
 
 		// add/edit properties
-		/*
 		var end = new Element("<tr>").appendTo(root);
 		end = new Element("<td>").attr("colspan", "2").appendTo(end);
 		var sel = new Element("<select>").appendTo(end);
 		new Element("<option>").attr("value", "").text("--- Choose ---").appendTo(sel);
 		for( c in available )
 			J("<option>").attr("value",c.name).text(c.name).appendTo(sel);
-		J("<option>").attr("value","new").text("New property...").appendTo(sel);
+		J("<option>").attr("value","$new").text("New property...").appendTo(sel);
 		sel.change(function(e) {
-			e.stopPropagation();
 			var v = sel.val();
 			if( v == "" )
 				return;
 			sel.val("");
-			if( v == "new" ) {
-				newColumn(sheet.name);
+			editor.root.focus();
+			if( v == "$new" ) {
+				editor.newColumn(sheet);
 				return;
 			}
 			for( c in available )
 				if( c.name == v ) {
-					Reflect.setField(props, c.name, base.getDefault(c, true));
-					save();
+					var val = editor.base.getDefault(c, true);
+					Reflect.setField(props, c.name, val);
+					editor.undo.change(Custom(function(undo) {
+						if( undo )
+							Reflect.deleteField(props, c.name);
+						else
+							Reflect.setField(props,c.name, val);
+					}));
 					refresh();
 					return;
 				}
-		});*/
+		});
 	}
 
 	function toggleList( cell : Cell ) {

hide/view/CdbTable.hx

@@ -21,6 +21,10 @@ class CdbTable extends hide.ui.View<{ path : String }> {
 		}
 		root.addClass("hide-scroll");
 		editor = new hide.comp.cdb.Editor(root, sheet);
+		editor.undo = undo;
+		undo.onChange = function() {
+			editor.save();
+		};
 		editor.save = function() {
 			ide.saveDatabase();
 		};