menu finished

css/menu.css

@@ -0,0 +1,26 @@
+#menu {
+	position: absolute;
+	z-index: 1;
+	border: 1px solid #666;
+	background-color: #fff;	
+}
+
+#menu button {
+	display: block;
+	background-color: transparent;
+	border: none;
+	margin: 0;
+	padding: 3px 6px;
+	width: 120px;
+}
+
+#menu button:hover {
+	font-weight: bold;
+}
+
+#menu span {
+	display: block;
+	border-top: 1px solid #666;
+	margin-top: 4px;
+	padding-top: 4px;
+}

css/style.css

@@ -1,6 +1,7 @@
 @import url(ui.css);
 @import url(item.css);
 @import url(shape.css);
+@import url(menu.css);
 
 * {
 	font-family: source sans pro, sans-serif;
@@ -57,14 +58,3 @@ ul {
 #tip.hidden {
 	opacity: 0;
 }
-
-#menu {
-	position: absolute;
-	z-index: 1;
-}
-
-#menu button {
-	display: block;
-	background-color: #fff;
-	border: none;
-}

index.html

@@ -183,9 +183,12 @@ <h3>Help</h3>
 		</div>
 
 		<div id="menu">
-			<button data-command="InsertSibling"></button>
 			<button data-command="InsertChild"></button>
+			<button data-command="InsertSibling"></button>
 			<button data-command="Delete"></button>
+			<span></span>
+			<button data-command="Edit"></button>
+			<button data-command="Value"></button>
 		</div>
 
 		<script>

my-mind.js

@@ -616,12 +616,14 @@ MM.Item.prototype.startEditing = function() {
 
 	this._dom.text.addEventListener("input", this);
 	this._dom.text.addEventListener("keydown", this);
+	this._dom.text.addEventListener("blur", this);
 	return this;
 }
 
 MM.Item.prototype.stopEditing = function() {
 	this._dom.text.removeEventListener("input", this);
 	this._dom.text.removeEventListener("keydown", this);
+	this._dom.text.removeEventListener("blur", this);
 
 	this._dom.text.blur();
 	this._dom.text.contentEditable = false;
@@ -641,6 +643,10 @@ MM.Item.prototype.handleEvent = function(e) {
 			if (e.keyCode == 9) { e.preventDefault(); } /* TAB has a special meaning in this app, do not use it to change focus */
 		break;
 
+		case "blur":
+			MM.Command.Finish.execute();
+		break;
+
 		case "click":
 			if (this._collapsed) { this.expand(); } else { this.collapse(); }
 			MM.App.select(this);
@@ -1318,9 +1324,18 @@ MM.Menu = {
 	_port: null,
 
 	open: function(x, y) {
-		this._dom.node.style.left = x+"px";
-		this._dom.node.style.top = y+"px";
 		this._dom.node.style.display = "";
+		var w = this._dom.node.offsetWidth;
+		var h = this._dom.node.offsetHeight;
+
+		var left = x;
+		var top = y;
+
+		if (left > this._port.offsetWidth / 2) { left -= w; }
+		if (top > this._port.offsetHeight / 2) { top -= h; }
+
+		this._dom.node.style.left = left+"px";
+		this._dom.node.style.top = top+"px";
 	},
 
 	close: function() {
@@ -1333,11 +1348,17 @@ MM.Menu = {
 			return;
 		}
 
-		e.stopPropagation();
+		e.stopPropagation(); /* no dragdrop, no blur of activeElement */
+		e.preventDefault(); /* we do not want to focus the button */
 
 		var command = e.target.getAttribute("data-command");
 		if (!command) { return; }
-		MM.Command[command].execute();
+
+		command = MM.Command[command];
+		if (!command.isValid()) { return; }
+
+		command.execute();
+		this.close();
 	},
 
 	init: function(port) {
@@ -4289,7 +4310,7 @@ MM.Mouse.handleEvent = function(e) {
 			var item = MM.App.map.getItemFor(e.target);
 			if (item == MM.App.current && MM.App.editing) { return; }
 
-			document.activeElement && document.activeElement.blur(); /* blur the panel FIXME only if activeElement is in the UI? */
+			document.activeElement && document.activeElement.blur();
 			this._startDrag(e, item);
 		break;
 

src/item.js

@@ -338,12 +338,14 @@ MM.Item.prototype.startEditing = function() {
 
 	this._dom.text.addEventListener("input", this);
 	this._dom.text.addEventListener("keydown", this);
+	this._dom.text.addEventListener("blur", this);
 	return this;
 }
 
 MM.Item.prototype.stopEditing = function() {
 	this._dom.text.removeEventListener("input", this);
 	this._dom.text.removeEventListener("keydown", this);
+	this._dom.text.removeEventListener("blur", this);
 
 	this._dom.text.blur();
 	this._dom.text.contentEditable = false;
@@ -363,6 +365,10 @@ MM.Item.prototype.handleEvent = function(e) {
 			if (e.keyCode == 9) { e.preventDefault(); } /* TAB has a special meaning in this app, do not use it to change focus */
 		break;
 
+		case "blur":
+			MM.Command.Finish.execute();
+		break;
+
 		case "click":
 			if (this._collapsed) { this.expand(); } else { this.collapse(); }
 			MM.App.select(this);

src/menu.js

@@ -3,9 +3,18 @@ MM.Menu = {
 	_port: null,
 
 	open: function(x, y) {
-		this._dom.node.style.left = x+"px";
-		this._dom.node.style.top = y+"px";
 		this._dom.node.style.display = "";
+		var w = this._dom.node.offsetWidth;
+		var h = this._dom.node.offsetHeight;
+
+		var left = x;
+		var top = y;
+
+		if (left > this._port.offsetWidth / 2) { left -= w; }
+		if (top > this._port.offsetHeight / 2) { top -= h; }
+
+		this._dom.node.style.left = left+"px";
+		this._dom.node.style.top = top+"px";
 	},
 
 	close: function() {
@@ -18,11 +27,17 @@ MM.Menu = {
 			return;
 		}
 
-		e.stopPropagation();
+		e.stopPropagation(); /* no dragdrop, no blur of activeElement */
+		e.preventDefault(); /* we do not want to focus the button */
 
 		var command = e.target.getAttribute("data-command");
 		if (!command) { return; }
-		MM.Command[command].execute();
+
+		command = MM.Command[command];
+		if (!command.isValid()) { return; }
+
+		command.execute();
+		this.close();
 	},
 
 	init: function(port) {

src/mouse.js

@@ -43,7 +43,7 @@ MM.Mouse.handleEvent = function(e) {
 			var item = MM.App.map.getItemFor(e.target);
 			if (item == MM.App.current && MM.App.editing) { return; }
 
-			document.activeElement && document.activeElement.blur(); /* blur the panel FIXME only if activeElement is in the UI? */
+			document.activeElement && document.activeElement.blur();
 			this._startDrag(e, item);
 		break;