From 9bd56ecc04909ae70d0197059891ef52e7dbdf6c Mon Sep 17 00:00:00 2001
From: Ian Gulliver <ian@flamingcow.tv>
Date: Sat, 25 May 2019 04:33:31 +0000
Subject: [PATCH] Allow field editing.

---
 architype.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 58 insertions(+), 4 deletions(-)

diff --git a/architype.js b/architype.js
index 9a163eb..e3ad6d3 100644
--- a/architype.js
+++ b/architype.js
@@ -80,6 +80,19 @@ class Editor {
     });
   }
 
+  startEdit() {
+    this.getSelected().xArchObj.startEdit();
+  }
+
+  stopEdit() {
+    this.getSelected().xArchObj.stopEdit();
+  }
+
+  isEditing() {
+    let sel = this.getSelected();
+    return sel && sel.xArchObj.isEditing();
+  }
+
   addNodeAfter() {
     let node = Node.addAfter(this.container_, this.getSelected());
     this.select(node);
@@ -91,6 +104,28 @@ class Editor {
   }
 
   onKeyDown(e) {
+    if (this.isEditing()) {
+      switch (e.key) {
+        case 'Enter':
+        case 'Escape':
+          this.stopEdit();
+          // Do not allow other actions below to run
+          return;
+
+        case 'ArrowUp':
+        case 'ArrowDown':
+        case 'PageUp':
+        case 'PageDown':
+          this.stopEdit();
+          // Allow other actions below to run
+          break;
+
+        default:
+          // Most keystrokes just go into the input field
+          return;
+      }
+    }
+
     // Keys that work with an empty list
     switch (e.key) {
       case 'n':
@@ -138,10 +173,17 @@ class Editor {
         this.selectFirst();
         break;
 
-      case 'G': // vi compat
       case 'End':
         this.selectLast();
         break;
+
+      case 'Enter':
+        this.startEdit();
+        break;
+
+      default:
+        console.log(e);
+        break;
     }
   }
 }
@@ -151,9 +193,9 @@ class Node {
     this.elem_ = document.createElement('li');
     this.elem_.innerText = 'Node: ';
 
-    let input = document.createElement('input');
-    input.type = 'text';
-    this.elem_.appendChild(input);
+    this.input_ = document.createElement('input');
+    this.input_.type = 'text';
+    this.elem_.appendChild(this.input_);
 
     this.elem_.classList.add('node');
 
@@ -161,6 +203,18 @@ class Node {
     this.elem_.xArchObj = this;
   }
 
+  startEdit() {
+    this.input_.focus();
+  }
+
+  stopEdit() {
+    this.input_.blur();
+  }
+
+  isEditing() {
+    return document.activeElement == this.input_;
+  }
+
   static addBefore(container, elem) {
     let node = new Node();
     container.insertBefore(node.elem_, elem);