Factor common Editor{Group,Link} code out into EditorSublistBase

This commit is contained in:
Ian Gulliver
2019-07-14 19:45:42 +00:00
parent 5527cd52d4
commit ab5210e924
4 changed files with 67 additions and 99 deletions

View File

@@ -227,6 +227,7 @@ class Editor extends List {
<!--# include file="EditorEntryBase.js" -->
<!--# include file="EditorInputBase.js" -->
<!--# include file="EditorSublistBase.js" -->
<!--# include file="EditorGroup.js" -->
<!--# include file="EditorHelp.js" -->
<!--# include file="EditorLabel.js" -->

View File

@@ -1,15 +1,10 @@
class EditorGroup extends EditorEntryBase {
class EditorGroup extends EditorSublistBase {
constructor(id, entries) {
super(id);
this.elem_.innerText = '□';
this.elem_.classList.add('group');
let nodeList = document.createElement('div');
this.nodes_ = new Editor(nodeList, [
super(id, '□', 'group', [
[EditorNode, [1, Number.POSITIVE_INFINITY]],
[EditorLabel, [0, 1]],
]);
if (entries && entries.length) {
for (let entry of entries) {
this.nodes_.addNodeAfter(entry.getLabel());
@@ -17,22 +12,11 @@ class EditorGroup extends EditorEntryBase {
} else {
this.nodes_.addNodeAfter();
}
this.elem_.appendChild(nodeList);
}
afterDomAdd() {
this.nodes_.selectNext();
let node = this.nodes_.getSelected().xArchObj;
if (node.getLabel() == '') {
node.startEdit();
}
}
serialize() {
return super.serialize({
type: 'group',
label: this.getLabel(),
labelObj: this.getLabelObj() ? this.getLabelObj().serialize() : null,
members: this.nodes_.serialize(EditorNode),
});
}
@@ -41,39 +25,6 @@ class EditorGroup extends EditorEntryBase {
return this.nodes_.getEntries(EditorNode);
}
getLabel() {
let label = this.getLabelObj();
return label ? label.getLabel() : null;
}
setLabel(label, labelId) {
let obj = this.nodes_.getEntries(EditorLabel)[0];
if (obj) {
obj.setLabel(label);
} else {
this.nodes_.addLabelBefore(labelId);
this.setLabel(label);
}
}
getLabelObj() {
return this.nodes_.getEntries(EditorLabel)[0];
}
onKeyDown(e) {
super.onKeyDown(e);
switch (e.key) {
case 'Enter':
case 'ArrowRight':
case 'l':
this.nodes_.selectNext();
e.stopPropagation();
e.preventDefault();
break;
}
}
static unserialize(ser) {
//// Backwards compat
// 3bdb240

View File

@@ -1,36 +1,19 @@
class EditorLink extends EditorEntryBase {
class EditorLink extends EditorSublistBase {
constructor(id, entries) {
super(id);
this.elem_.innerText = '↓';
this.elem_.classList.add('link');
let nodeList = document.createElement('div');
this.nodes_ = new Editor(nodeList, [
super(id, '↓', 'link', [
[EditorNode, [2, 2]],
[EditorLabel, [0, 1]],
]);
this.nodes_.addNodeAfter(
entries && entries[0] ? entries[0].getLabel() : null);
this.nodes_.addNodeAfter(
entries && entries[1] ? entries[1].getLabel() : null);
this.elem_.appendChild(nodeList);
}
afterDomAdd() {
this.nodes_.selectNext();
let node = this.nodes_.getSelected().xArchObj;
if (node.getLabel() == '') {
node.startEdit();
}
}
// TODO: factor out common base code with EditorGroup
serialize() {
return super.serialize({
type: 'link',
label: this.getLabel(),
labelObj: this.getLabelObj() ? this.getLabelObj().serialize() : null,
from: this.getFrom().serialize(),
to: this.getTo().serialize(),
});
@@ -44,25 +27,6 @@ class EditorLink extends EditorEntryBase {
return this.nodes_.getEntries(EditorNode)[1];
}
getLabel() {
let label = this.getLabelObj();
return label ? label.getLabel() : null;
}
setLabel(label, labelId) {
let obj = this.getLabelObj();
if (obj) {
obj.setLabel(label);
} else {
this.nodes_.addLabelBefore(labelId);
this.setLabel(label);
}
}
getLabelObj() {
return this.nodes_.getEntries(EditorLabel)[0];
}
flip() {
let entries = this.nodes_.getEntries(EditorNode);
let fromElem = entries[0].getElement();
@@ -83,14 +47,6 @@ class EditorLink extends EditorEntryBase {
super.onKeyDown(e);
switch (e.key) {
case 'Enter':
case 'ArrowRight':
case 'l':
this.nodes_.selectNext();
e.stopPropagation();
e.preventDefault();
break;
case 'f':
this.flip();
e.stopPropagation();

60
EditorSublistBase.js Normal file
View File

@@ -0,0 +1,60 @@
class EditorSublistBase extends EditorEntryBase {
constructor(id, icon, cls, limits) {
super(id);
this.elem_.innerText = icon;
this.elem_.classList.add(cls);
let nodeList = document.createElement('div');
this.nodes_ = new Editor(nodeList, limits);
this.elem_.appendChild(nodeList);
}
afterDomAdd() {
this.nodes_.selectNext();
let node = this.nodes_.getSelected().xArchObj;
if (node.getLabel() == '') {
node.startEdit();
}
}
serialize(base) {
super.serialize(base);
base.label = this.getLabel();
base.labelObj = this.getLabelObj() ? this.getLabelObj().serialize() : null;
return base;
}
getLabel() {
let label = this.getLabelObj();
return label ? label.getLabel() : null;
}
setLabel(label, labelId) {
let obj = this.nodes_.getEntries(EditorLabel)[0];
if (obj) {
obj.setLabel(label);
} else {
this.nodes_.addLabelBefore(labelId);
this.setLabel(label);
}
}
getLabelObj() {
return this.nodes_.getEntries(EditorLabel)[0];
}
onKeyDown(e) {
super.onKeyDown(e);
switch (e.key) {
case 'Enter':
case 'ArrowRight':
case 'l':
this.nodes_.selectNext();
e.stopPropagation();
e.preventDefault();
break;
}
}
}