diff --git a/Editor.js b/Editor.js index 16975f1..8597af0 100644 --- a/Editor.js +++ b/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) { diff --git a/EditorEntryBase.js b/EditorEntryBase.js index 771f4b5..2fb789c 100644 --- a/EditorEntryBase.js +++ b/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) { diff --git a/EditorInputBase.js b/EditorInputBase.js index c3abfc1..b4ea8c1 100644 --- a/EditorInputBase.js +++ b/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(); diff --git a/EditorNode.js b/EditorNode.js index ecd1f46..72c4306 100644 --- a/EditorNode.js +++ b/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); diff --git a/README.md b/README.md index 854c68c..e903af0 100644 --- a/README.md +++ b/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