Add ctrl-enter to edit a node and all references

Editor.js

@@ -18,6 +18,8 @@ class Editor extends List {
     // tab flow.
     this.container_.tabIndex = 99999;
     this.container_.addEventListener('keydown', e => { this.onKeyDown(e); });
+    this.container_.addEventListener('updateNodesRequest',
+                                     e => { this.onUpdateNodesRequest(e); });
     this.container_.focus();
   }
 
@@ -162,6 +164,19 @@ class Editor extends List {
     }
     return null;
   }
+
+  updateNodes(oldLabel, newLabel) {
+    let nodes = this.queryEntries('[data-arch-class="EditorNode"]', EditorNode);
+    for (let node of nodes) {
+      if (node.getLabel() == oldLabel) {
+        node.setLabel(newLabel);
+      }
+    }
+  }
+
+  onUpdateNodesRequest(e) {
+    this.updateNodes(e.detail.oldLabel, e.detail.newLabel);
+  }
   
   onKeyDown(e) {
     switch (e.key) {

EditorEntryBase.js

@@ -11,6 +11,7 @@ class EditorEntryBase extends ListenUtils {
     this.listen(this.elem_, 'keydown', (e) => this.onKeyDown(e));
 
     this.elem_.xArchObj = this;
+    this.elem_.setAttribute('data-arch-class', this.constructor.name);
   }
 
   serialize(base) {

EditorInputBase.js

@@ -5,10 +5,11 @@ class EditorInputBase extends EditorEntryBase {
     this.input_ = document.createElement('input');
     this.input_.type = 'text';
     this.listen(this.input_, 'keydown', (e) => this.onInputKeyDown(e));
-    this.listen(this.input_, 'input', (e) => this.onInput(e));
+    this.listen(this.input_, 'input', () => this.onInput());
     this.listen(this.input_, 'blur', (e) => this.onBlur(e));
     this.elem_.appendChild(this.input_);
 
+    this.lastLabel_ = '';
     this.lastSnapshotLabel_ = '';
 
     if (label) {
@@ -33,15 +34,16 @@ class EditorInputBase extends EditorEntryBase {
   setLabel(label) {
     this.input_.value = label;
     this.lastSnapshotLabel_ = label;
-    this.onInput();
+    this.updateLabel();
   }
 
   wantFocus() {
     return this.getLabel() == '';
   }
 
-  onInput() {
-    this.requestRender();
+  updateLabel() {
+    this.lastLabel_ = this.getLabel();
+
     let objs = document.getElementsByClassName('grid-' + this.getId());
     if (objs.length == 1) {
       objs[0].innerText = this.getLabel();
@@ -49,6 +51,11 @@ class EditorInputBase extends EditorEntryBase {
     }
   }
 
+  onInput() {
+    this.updateLabel();
+    this.requestRender();
+  }
+
   onBlur() {
     if (this.getLabel() != this.lastSnapshotLabel_) {
       this.lastSnapshotLabel_ = this.getLabel();
@@ -95,6 +102,7 @@ class EditorInputBase extends EditorEntryBase {
     switch (e.key) {
       case 'ArrowRight':
       case 'Enter':
+        this.ctrlKey_ = e.ctrlKey;
         this.startEdit();
         e.stopPropagation();
         e.preventDefault();

EditorNode.js

@@ -22,6 +22,22 @@ class EditorNode extends EditorInputBase {
     return false;
   }
 
+  updateLabel() {
+    if (this.ctrlKey_) {
+      this.elem_.dispatchEvent(new CustomEvent(
+          'updateNodesRequest',
+          {
+            bubbles: true,
+            detail: {
+              oldLabel: this.lastLabel_,
+              newLabel: this.getLabel(),
+            },
+          }));
+    }
+
+    super.updateLabel();
+  }
+
   static unserialize(ser) {
     let node = new EditorNode(ser.id);
     node.setLabel(ser.label);

README.md

@@ -27,6 +27,8 @@ The screen is divided into two panels:
 * A *link* connects nodes together. All links in Architype are directional,
   i.e. they have an arrow at exactly one end.
 * A *group* is a collection of nodes that are shown physically together.
+* A *tag* is a collection of nodes that are shown with a common highlight, e.g.
+  color.
 * A *label* is an optional description of another object, e.g. a link or a
   group.
 
@@ -46,6 +48,7 @@ expectation across contexts in the UI.
 * `↑` `k` Move up the current list
 * `→` `l` `⏎` Enter (edit) the current list or item
 * `←` `h` `␛` Exit the current list or item
+* `ctrl` + `⏎` Enter (edit) the current node and all references to it
 
 `` ` `` (backtick) is mapped to `␛` for convenience on some keyboards, e.g.
 iPads. This makes it impossible to use a backtick in a node or label, which is
@@ -57,6 +60,8 @@ considered a reasonable tradeoff.
 * `shift` + `n` Create new node above the current line
 * `g` Create new group below the current line
 * `shift` + `g` Create new group above the current line
+* `t` Create new tag below the current line
+* `shift` + `t` Create new tag above the current line
 * `i` Create new link below the current line
 * `shift` + `i` Create new link above the current line
 * `a` Create new label below the current line