2019-07-03 01:42:17 +00:00
|
|
|
class EditorGroup extends EditorEntryBase {
|
2019-07-12 01:05:04 +00:00
|
|
|
constructor(id, entries) {
|
|
|
|
|
super(id);
|
2019-07-03 01:42:17 +00:00
|
|
|
|
2019-07-09 17:57:35 +00:00
|
|
|
this.elem_.innerText = '□';
|
2019-07-03 01:42:17 +00:00
|
|
|
this.elem_.classList.add('group');
|
|
|
|
|
|
|
|
|
|
let nodeList = document.createElement('div');
|
2019-07-10 08:14:53 +00:00
|
|
|
this.nodes_ = new Editor(nodeList, [
|
|
|
|
|
[EditorNode, [1, Number.POSITIVE_INFINITY]],
|
|
|
|
|
[EditorLabel, [0, 1]],
|
|
|
|
|
]);
|
2019-07-11 04:25:06 +00:00
|
|
|
if (entries && entries.length) {
|
|
|
|
|
for (let entry of entries) {
|
|
|
|
|
this.nodes_.addNodeAfter(entry.getLabel());
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.nodes_.addNodeAfter();
|
|
|
|
|
}
|
2019-07-03 01:42:17 +00:00
|
|
|
this.elem_.appendChild(nodeList);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
afterDomAdd() {
|
2019-07-09 17:57:35 +00:00
|
|
|
this.nodes_.selectNext();
|
2019-07-11 16:23:41 +00:00
|
|
|
let node = this.nodes_.getSelected().xArchObj;
|
|
|
|
|
if (node.getLabel() == '') {
|
|
|
|
|
node.startEdit();
|
2019-07-11 16:15:53 +00:00
|
|
|
}
|
2019-07-03 01:42:17 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
serialize() {
|
2019-07-14 02:26:00 +00:00
|
|
|
return super.serialize({
|
2019-07-03 01:42:17 +00:00
|
|
|
type: 'group',
|
|
|
|
|
label: this.getLabel(),
|
2019-07-14 03:19:15 +00:00
|
|
|
labelObj: this.getLabelObj().serialize(),
|
2019-07-10 08:14:53 +00:00
|
|
|
members: this.nodes_.serialize(EditorNode),
|
2019-07-14 02:26:00 +00:00
|
|
|
});
|
2019-07-03 01:42:17 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getNodes() {
|
2019-07-10 08:14:53 +00:00
|
|
|
return this.nodes_.getEntries(EditorNode);
|
2019-07-03 01:42:17 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getLabel() {
|
2019-07-14 03:19:15 +00:00
|
|
|
let label = this.getLabelObj();
|
2019-07-10 08:14:53 +00:00
|
|
|
return label ? label.getLabel() : null;
|
2019-07-03 01:42:17 +00:00
|
|
|
}
|
|
|
|
|
|
2019-07-14 03:19:15 +00:00
|
|
|
setLabel(label, labelId) {
|
2019-07-10 08:14:53 +00:00
|
|
|
let obj = this.nodes_.getEntries(EditorLabel)[0];
|
|
|
|
|
if (obj) {
|
|
|
|
|
obj.setLabel(label);
|
|
|
|
|
} else {
|
2019-07-14 03:19:15 +00:00
|
|
|
this.nodes_.addLabelBefore(labelId);
|
2019-07-10 08:14:53 +00:00
|
|
|
this.setLabel(label);
|
|
|
|
|
}
|
2019-07-03 01:42:17 +00:00
|
|
|
}
|
|
|
|
|
|
2019-07-14 03:19:15 +00:00
|
|
|
getLabelObj() {
|
|
|
|
|
return this.nodes_.getEntries(EditorLabel)[0];
|
|
|
|
|
}
|
|
|
|
|
|
2019-07-03 01:42:17 +00:00
|
|
|
onKeyDown(e) {
|
|
|
|
|
super.onKeyDown(e);
|
|
|
|
|
|
|
|
|
|
switch (e.key) {
|
|
|
|
|
case 'Enter':
|
|
|
|
|
case 'ArrowRight':
|
|
|
|
|
case 'l':
|
|
|
|
|
this.nodes_.selectNext();
|
2019-07-09 17:57:35 +00:00
|
|
|
e.stopPropagation();
|
|
|
|
|
e.preventDefault();
|
2019-07-03 01:42:17 +00:00
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
static unserialize(ser) {
|
2019-07-14 03:24:56 +00:00
|
|
|
//// Backwards compat
|
|
|
|
|
// 3bdb240
|
|
|
|
|
ser.labelObj = ser.labelObj || {};
|
|
|
|
|
|
2019-07-12 01:05:04 +00:00
|
|
|
let group = new EditorGroup(ser.id);
|
2019-07-03 01:42:17 +00:00
|
|
|
group.nodes_.clear();
|
2019-07-10 21:35:03 +00:00
|
|
|
if (ser.label != null) {
|
2019-07-14 03:19:15 +00:00
|
|
|
group.setLabel(ser.label, ser.labelObj.id);
|
|
|
|
|
group.getLabelObj().setHighlight(ser.labelObj.highlight);
|
2019-07-10 21:35:03 +00:00
|
|
|
}
|
2019-07-10 23:46:25 +00:00
|
|
|
group.setHighlight(ser.highlight);
|
2019-07-03 01:42:17 +00:00
|
|
|
group.nodes_.unserialize(ser.members);
|
|
|
|
|
return group.getElement();
|
|
|
|
|
}
|
|
|
|
|
}
|