diff --git a/architype.css b/architype.css index 2a4856d..90e007f 100644 --- a/architype.css +++ b/architype.css @@ -44,4 +44,6 @@ body { #definition li input { background-color: rgba(255,255,255,0.8); border: 1px solid black; + padding: 4px; + font-family: 'Courier', monospace; } diff --git a/architype.js b/architype.js index e3ad6d3..3e189d2 100644 --- a/architype.js +++ b/architype.js @@ -96,11 +96,13 @@ class Editor { addNodeAfter() { let node = Node.addAfter(this.container_, this.getSelected()); this.select(node); + this.startEdit(); } addNodeBefore() { let node = Node.addBefore(this.container_, this.getSelected()); this.select(node); + this.startEdit(); } onKeyDown(e) { @@ -130,10 +132,12 @@ class Editor { switch (e.key) { case 'n': this.addNodeAfter(); + e.preventDefault(); break; case 'N': this.addNodeBefore(); + e.preventDefault(); break; } @@ -180,10 +184,6 @@ class Editor { case 'Enter': this.startEdit(); break; - - default: - console.log(e); - break; } } } @@ -195,6 +195,7 @@ class Node { this.input_ = document.createElement('input'); this.input_.type = 'text'; + this.input_.placeholder = 'node name'; this.elem_.appendChild(this.input_); this.elem_.classList.add('node'); @@ -209,6 +210,9 @@ class Node { stopEdit() { this.input_.blur(); + if (this.input_.value.length == 0) { + this.elem_.remove(); + } } isEditing() {