review key dispatching (dom based), started cdb.ObjEditor

hide/Ide.hx

@@ -135,7 +135,7 @@ class Ide {
 
 		// Listen to FileTree dnd
 		new Element(window.window.document).on("dnd_stop.vakata.jstree", function(e, data) {
-			var nodeIds : Array<String> = cast data.data.nodes;			
+			var nodeIds : Array<String> = cast data.data.nodes;
 			if(data.data.jstree == null) return;
 			for( v in views ) {
 				var ft = Std.instance(v, hide.view.FileTree);
@@ -162,9 +162,7 @@ class Ide {
 		// dispatch global keys based on mouse position
 		new Element(body).keydown(function(e) {
 			var view = getViewAt(mouseX, mouseY);
-			if(view != null) {
-				view.keys.processEvent(e);
-			}
+			if(view != null) view.processKeyEvent(e);
 		});
 
 		var stage = new hxd.Stage(js.Browser.document.createCanvasElement(), true);

hide/comp/cdb/Editor.hx

@@ -8,21 +8,22 @@ class Editor extends Component {
 	var sheet : cdb.Sheet;
 	var existsCache : Map<String,{ t : Float, r : Bool }> = new Map();
 	var tables : Array<Table> = [];
-	var keys : hide.ui.Keys;
 	var searchBox : Element;
+	var displayMode : Table.DisplayMode;
 	var clipboard : {
 		text : String,
 		data : {},
 		schema : Array<cdb.Data.Column>,
 	};
 	public var cursor : Cursor;
+	public var keys : hide.ui.Keys;
 	public var undo : hide.ui.UndoHistory;
 
-	public function new(root, sheet, keys) {
+	public function new(root, sheet) {
 		super(root);
 		this.undo = new hide.ui.UndoHistory();
 		this.sheet = sheet;
-		this.keys = keys;
+		keys = new hide.ui.Keys(root);
 		keys.addListener(onKey);
 		keys.register("search", function() {
 			searchBox.show();
@@ -54,6 +55,7 @@ class Editor extends Component {
 		keys.register("cdb.gotoReference", gotoReference);
 		base = sheet.base;
 		cursor = new Cursor(this);
+		if( displayMode == null ) displayMode = Table;
 		refresh();
 	}
 
@@ -174,7 +176,7 @@ class Editor extends Component {
 
 		var content = new Element("<table>");
 		tables = [];
-		new Table(this, sheet, content);
+		new Table(this, sheet, content, displayMode);
 		content.appendTo(root);
 
 		if( cursor.table != null ) {

hide/comp/cdb/ObjEditor.hx

@@ -0,0 +1,13 @@
+package hide.comp.cdb;
+
+class ObjEditor extends Editor {
+
+    public function new( root : Element, sheet : cdb.Sheet, obj : {} ) {
+        var sheetData = Reflect.copy(@:privateAccess sheet.sheet);
+        sheetData.lines = [obj];
+        var pseudoSheet = new cdb.Sheet(sheet.base, sheetData);
+        this.displayMode = Properties;
+        super(root, pseudoSheet);
+    }
+
+}

hide/comp/cdb/SubTable.hx

@@ -7,7 +7,6 @@ class SubTable extends Table {
 	public var cell : Cell;
 
 	public function new(editor, cell:Cell) {
-
 		this.editor = editor;
 		this.cell = cell;
 
@@ -27,7 +26,11 @@ class SubTable extends Table {
 		insertedTR.insertAfter(cell.line.root);
 		cell.root.text("...");
 
-		super(editor, sheet, root);
+		var mode : Table.DisplayMode = switch( cell.column.type ) {
+		case TProperties: Properties;
+		default: Table;
+		};
+		super(editor, sheet, root, mode);
 	}
 
 	public function makeSubSheet() {
@@ -94,83 +97,4 @@ class SubTable extends Table {
 		cell.refresh();
 	}
 
-	override function refresh() {
-		switch( cell.column.type ) {
-		case TProperties:
-			refreshProperties();
-		default:
-			super.refresh();
-		}
-	}
-
-	function refreshProperties() {
-		root.empty();
-
-		lines = [];
-
-		var available = [];
-		var props = sheet.lines[0];
-		for( c in sheet.columns ) {
-			if( c.opt && !Reflect.hasField(props,c.name) ) {
-				available.push(c);
-				continue;
-			}
-
-			var v = Reflect.field(props, c.name);
-			var l = new Element("<tr>").appendTo(root);
-			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 cell = new Cell(td, line, c);
-			lines.push(line);
-
-			td.click(function(e) {
-				editor.cursor.clickCell(cell, e.shiftKey);
-				e.stopPropagation();
-			});
-
-			th.mousedown(function(e) {
-				if( e.which == 3 ) {
-					editor.popupColumn(this, c);
-					editor.cursor.clickCell(cell, false);
-					e.preventDefault();
-					return;
-				}
-			});
-
-			cell.root.dblclick(function(_) cell.edit());
-		}
-
-		// add/edit properties
-
-		/*
-		var end = J("<tr>").appendTo(content);
-		end = J("<td>").attr("colspan", "2").appendTo(end);
-		var sel = J("<select>").appendTo(end);
-		J("<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);
-		sel.change(function(e) {
-			e.stopPropagation();
-			var v = sel.val();
-			if( v == "" )
-				return;
-			sel.val("");
-			if( v == "new" ) {
-				newColumn(sheet.name);
-				return;
-			}
-			for( c in available )
-				if( c.name == v ) {
-					Reflect.setField(props, c.name, base.getDefault(c, true));
-					save();
-					refresh();
-					return;
-				}
-		});*/
-
-	}
-
 }

hide/comp/cdb/Table.hx

@@ -1,14 +1,21 @@
 package hide.comp.cdb;
 import js.jquery.Helper.*;
 
+enum DisplayMode {
+	Table;
+	Properties;
+}
+
 class Table extends Component {
 
 	public var editor : Editor;
 	public var sheet : cdb.Sheet;
 	public var lines : Array<Line>;
+	var displayMode : DisplayMode;
 
-	public function new(editor, sheet, root) {
+	public function new(editor, sheet, root, mode) {
 		super(root);
+		this.displayMode = mode;
 		this.editor = editor;
 		this.sheet = sheet;
 		@:privateAccess editor.tables.push(this);
@@ -26,7 +33,16 @@ class Table extends Component {
 	}
 
 	public function refresh() {
+		root.empty();
+		switch( displayMode ) {
+		case Table:
+			refreshTable();
+		case Properties:
+			refreshProperties();
+		}
+	}
 
+	function refreshTable() {
 		var cols = J("<tr>").addClass("head");
 		J("<th>").addClass("start").appendTo(cols);
 		lines = [for( index in 0...sheet.lines.length ) {
@@ -91,7 +107,6 @@ class Table extends Component {
 			}
 		}
 
-		root.empty();
 		root.append(cols);
 
 		var snext = 0;
@@ -144,6 +159,73 @@ class Table extends Component {
 		}
 	}
 
+	function refreshProperties() {
+		lines = [];
+
+		var available = [];
+		var props = sheet.lines[0];
+		for( c in sheet.columns ) {
+			if( c.opt && !Reflect.hasField(props,c.name) ) {
+				available.push(c);
+				continue;
+			}
+
+			var v = Reflect.field(props, c.name);
+			var l = new Element("<tr>").appendTo(root);
+			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 cell = new Cell(td, line, c);
+			lines.push(line);
+
+			td.click(function(e) {
+				editor.cursor.clickCell(cell, e.shiftKey);
+				e.stopPropagation();
+			});
+
+			th.mousedown(function(e) {
+				if( e.which == 3 ) {
+					editor.popupColumn(this, c);
+					editor.cursor.clickCell(cell, false);
+					e.preventDefault();
+					return;
+				}
+			});
+
+			cell.root.dblclick(function(_) cell.edit());
+		}
+
+		// add/edit properties
+
+		/*
+		var end = J("<tr>").appendTo(content);
+		end = J("<td>").attr("colspan", "2").appendTo(end);
+		var sel = J("<select>").appendTo(end);
+		J("<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);
+		sel.change(function(e) {
+			e.stopPropagation();
+			var v = sel.val();
+			if( v == "" )
+				return;
+			sel.val("");
+			if( v == "new" ) {
+				newColumn(sheet.name);
+				return;
+			}
+			for( c in available )
+				if( c.name == v ) {
+					Reflect.setField(props, c.name, base.getDefault(c, true));
+					save();
+					refresh();
+					return;
+				}
+		});*/
+	}
+
 	function toggleList( cell : Cell ) {
 		var line = cell.line;
 		var cur = line.subTable;

hide/prefab/l3d/Instance.hx

@@ -66,6 +66,7 @@ class Instance extends Object3D {
 			</div>
 		'),this);
 
+		new hide.comp.cdb.ObjEditor(props.find(".group .content"), sheet, props);
 		//ctx.properties.addProps([for(c in sheet.columns) {t: getPropType(c), name: c.name}], this.props);
 		#end
 	}

hide/ui/Keys.hx

@@ -2,24 +2,30 @@ package hide.ui;
 
 class Keys {
 
-	var config : Props;
 	var keys = new Map<String,Void->Void>();
+	var parent : js.html.Element;
 	var listeners = new Array<js.jquery.Event -> Bool>();
-	// allow a sub set to hierarchise and prevent leaks wrt refresh
-	public var subKeys : Array<Keys> = [];
 
-	public function new( config : Props ) {
-		this.config = config;
+	public function new( parent : Element ) {
+		if( parent != null ) {
+			this.parent = parent[0];
+			parent.attr("haskeys","true");
+			Reflect.setField(this.parent,"__keys",this);
+		}
+	}
+
+	public function remove() {
+		if( parent != null ) {
+			Reflect.deleteField(parent,"__keys");
+			parent.removeAttribute("haskeys");
+		}
 	}
 
 	public function addListener( l ) {
 		listeners.push(l);
 	}
 
-	public function processEvent( e : js.jquery.Event ) {
-		var active = js.Browser.document.activeElement;
-		if( active != null && active.nodeName == "INPUT" ) return;
-
+	public function processEvent( e : js.jquery.Event, config : Props ) {
 		var parts = [];
 		if( e.altKey )
 			parts.push("Alt");
@@ -40,34 +46,39 @@ class Keys {
 		}
 
 		var key = parts.join("-");
-		if( triggerKey(e, key) ) {
+		if( triggerKey(e, key, config) ) {
 			e.stopPropagation();
 			e.preventDefault();
+			return true;
 		}
+
+		return false;
 	}
 
-	public function triggerKey( e : js.jquery.Event, key : String ) {
-		for( s in subKeys )
-			if( s.triggerKey(e, key) )
-				return true;
+	public function triggerKey( e : js.jquery.Event, key : String, config : Props ) {
 		for( l in listeners )
 			if( l(e) )
 				return true;
-		var callb = keys.get(key);
-		if( callb != null ) {
-			callb();
-			return true;
+		for( k in keys.keys() ) {
+			var keyCode = config.get("key."+k);
+			if( keyCode == null ) {
+				trace("Key not defined " + k);
+				continue;
+			}
+			if( keyCode == key ) {
+				keys.get(k)();
+				return true;
+			}
 		}
 		return false;
 	}
 
 	public function register( name : String, callb : Void -> Void ) {
-		var key = config.get("key." + name);
-		if( key == null ) {
-			trace("Key not defined " + name);
-			return;
-		}
-		keys.set(key, callb);
+		keys.set(name, callb);
+	}
+
+	public static function get( e : Element ) : Keys {
+		return Reflect.field(e[0], "__keys");
 	}
 
 }

hide/ui/View.hx

@@ -50,7 +50,7 @@ class View<T> extends hide.comp.Component {
 	}
 
 	function get_keys() {
-		if( keys == null ) keys = new Keys(props);
+		if( keys == null ) keys = new Keys(null);
 		return keys;
 	}
 
@@ -86,6 +86,22 @@ class View<T> extends hide.comp.Component {
 		container.setTitle(getTitle());
 	}
 
+	public function processKeyEvent( e : js.jquery.Event ) {
+		var active = js.Browser.document.activeElement;
+		if( active != null && active.nodeName == "INPUT" ) {
+			e.stopPropagation();
+			return true;
+		}
+		for( el in root.find("[haskeys=true]").add(root).elements() ) {
+			var keys = hide.ui.Keys.get(el);
+			if( keys == null ) continue;
+			if( keys.processEvent(e,props) )
+				return true;
+		}
+		// global keys
+		return keys.processEvent(e,props);
+	}
+
 	public function setContainer(cont) {
 		this.container = cont;
 		@:privateAccess ide.views.push(this);
@@ -102,7 +118,7 @@ class View<T> extends hide.comp.Component {
 			destroy();
 		});
 		container.getElement().keydown(function(e) {
-			keys.processEvent(e);
+			processKeyEvent(e);
 		});
 
 		container.on("tab", function(e) {

hide/view/CdbTable.hx

@@ -20,9 +20,7 @@ class CdbTable extends hide.ui.View<{ path : String }> {
 			return;
 		}
 		root.addClass("hide-scroll");
-		var keys = new hide.ui.Keys(props);
-		this.keys.subKeys = [keys];
-		editor = new hide.comp.cdb.Editor(root, sheet, keys);
+		editor = new hide.comp.cdb.Editor(root, sheet);
 		editor.save = function() {
 			ide.saveDatabase();
 		};