diff --git a/architype.js b/architype.js index b30ec16..773c526 100644 --- a/architype.js +++ b/architype.js @@ -23,9 +23,35 @@ class Architype { childList: true, subtree: true, }); + + this.unserialize(JSON.parse(localStorage.getItem('currentState'))); + } + + serialize() { + return { + version: 1, + editor: this.editor_.serialize(), + }; + } + + unserialize(ser) { + if (!ser) { + return; + } + + switch (ser.version) { + case 1: + this.editor_.unserialize(ser.editor); + break; + + default: + console.log('unrecognized localStorage.currentState version', ser); + break; + } } onEdit(e) { + localStorage.setItem('currentState', JSON.stringify(this.serialize())); this.graph_ = this.buildGraph(); console.log(this.graph_); this.updateTargets(); @@ -363,6 +389,25 @@ class Editor extends List { this.container_.focus(); } + clear() { + this.container_.innerHTML = ''; + } + + serialize() { + // Doesn't have a type, only used as part of other objects + let ret = []; + for (let entry of this.getEntries()) { + ret.push(entry.serialize()); + } + return ret; + } + + unserialize(ser) { + for (let entry of ser) { + this.container_.appendChild(EditorEntryBase.unserialize(entry)); + } + } + isAllowed(type) { return this.mayAdd() && this.allowedTypes_.has(type); } @@ -490,16 +535,25 @@ class EditorEntryBase extends ListenUtils { static addBefore(container, elem) { let entry = new this(); - container.insertBefore(entry.elem_, elem); + container.insertBefore(entry.getElement(), elem); entry.afterDomAdd(); - return entry.elem_; } static addAfter(container, elem) { let entry = new this(); - container.insertBefore(entry.elem_, elem ? elem.nextSibling : null); + container.insertBefore(entry.getElement(), elem ? elem.nextSibling : null); entry.afterDomAdd(); - return entry.elem_; + } + + static unserialize(ser) { + switch (ser.type) { + case 'group': + return Group.unserialize(ser); + case 'link': + return Link.unserialize(ser); + case 'node': + return Node.unserialize(ser); + } } } @@ -524,6 +578,13 @@ class Node extends EditorEntryBase { this.input_.focus(); } + serialize() { + return { + type: 'node', + label: this.getLabel(), + }; + } + clear() { super.clear(); this.elem_.classList.remove('error'); @@ -537,6 +598,15 @@ class Node extends EditorEntryBase { return this.input_.value; } + setLabel(label) { + this.input_.value = label; + this.onInput(); + } + + getElement() { + return this.elem_; + } + isSoft() { // Nested nodes are presumed to be references to other nodes if they exist let iter = this.elem_.parentElement; @@ -599,6 +669,12 @@ class Node extends EditorEntryBase { this.elem_.focus(); } } + + static unserialize(ser) { + let node = new Node(); + node.setLabel(ser.label); + return node.getElement(); + } } class Group extends EditorEntryBase { @@ -627,6 +703,14 @@ class Group extends EditorEntryBase { this.input_.focus(); } + serialize() { + return { + type: 'group', + label: this.getLabel(), + members: this.nodes_.serialize(), + }; + } + clear() { super.clear(); this.elem_.classList.remove('error'); @@ -644,6 +728,15 @@ class Group extends EditorEntryBase { return this.input_.value; } + setLabel(label) { + this.input_.value = label; + this.onInput(); + } + + getElement() { + return this.elem_; + } + onInputKeyDown(e) { switch (e.key) { case 'Enter': @@ -704,6 +797,14 @@ class Group extends EditorEntryBase { stopEdit() { this.elem_.focus(); } + + static unserialize(ser) { + let group = new Group(); + group.setLabel(ser.label); + group.nodes_.clear(); + group.nodes_.unserialize(ser.members); + return group.getElement(); + } } class Link extends EditorEntryBase { @@ -734,6 +835,15 @@ class Link extends EditorEntryBase { this.input_.focus(); } + serialize() { + return { + type: 'link', + label: this.getLabel(), + from: this.getFrom().serialize(), + to: this.getTo().serialize(), + }; + } + clear() { super.clear(); this.elem_.classList.remove('error'); @@ -755,6 +865,15 @@ class Link extends EditorEntryBase { return this.input_.value; } + setLabel(label) { + this.input_.value = label; + this.onInput(); + } + + getElement() { + return this.elem_; + } + onInput() { this.input_.setAttribute('data-arch-value', this.input_.value); } @@ -817,6 +936,14 @@ class Link extends EditorEntryBase { stopEdit() { this.elem_.focus(); } + + static unserialize(ser) { + let link = new Link(); + link.setLabel(ser.label); + link.nodes_.clear(); + link.nodes_.unserialize([ser.from, ser.to]); + return link.getElement(); + } } new Architype(document.getElementById('architype'));