misc/architype
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Individual highlighting for link and group labels

Browse Source
This commit is contained in:
Ian Gulliver
2019-07-14 03:19:15 +00:00
parent f3823812c7
commit 3bdb240987
11 changed files with 95 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
Editor.js
View File

@@ -74,55 +74,59 @@ class Editor extends List {
return null;
}
addLabelBefore() {
addLabelBefore(...rest) {
if (this.mayAdd(EditorLabel)) {
return EditorLabel.addBefore(this.container_, this.getSelected());
return EditorLabel.addBefore(this.container_, this.getSelected(), ...rest);
}
return null;
}
addLabelAfter() {
addLabelAfter(...rest) {
if (this.mayAdd(EditorLabel)) {
return EditorLabel.addAfter(this.container_, this.getSelected());
return EditorLabel.addAfter(this.container_, this.getSelected(), ...rest);
}
return null;
}
addLinkAfter() {
addLinkAfter(...rest) {
if (this.mayAdd(EditorLink)) {
return EditorLink.addAfter(this.container_, this.getSelected(),
this.queryEntries('.highlight', EditorNode));
this.queryEntries('.highlight', EditorNode),
...rest);
}
return null;
}
addLinkBefore() {
addLinkBefore(...rest) {
if (this.mayAdd(EditorLink)) {
return EditorLink.addBefore(this.container_, this.getSelected(),
this.queryEntries('.highlight', EditorNode));
this.queryEntries('.highlight', EditorNode),
...rest);
}
return null;
}
addGroupAfter() {
addGroupAfter(...rest) {
if (this.mayAdd(EditorGroup)) {
return EditorGroup.addAfter(this.container_, this.getSelected(),
this.queryEntries('.highlight', EditorNode));
this.queryEntries('.highlight', EditorNode),
...rest);
}
return null;
}
addGroupBefore() {
addGroupBefore(...rest) {
if (this.mayAdd(EditorGroup)) {
return EditorGroup.addBefore(this.container_, this.getSelected(),
this.queryEntries('.highlight', EditorNode));
this.queryEntries('.highlight', EditorNode),
...rest);
}
return null;
}
addHelpAfter() {
addHelpAfter(...rest) {
if (this.mayAdd(EditorHelp)) {
return EditorHelp.addAfter(this.container_, this.getSelected());
return EditorHelp.addAfter(this.container_, this.getSelected(), ...rest);
}
return null;
}

14
EditorGroup.js
View File

@@ -32,6 +32,7 @@ class EditorGroup extends EditorEntryBase {
return super.serialize({
type: 'group',
label: this.getLabel(),
labelObj: this.getLabelObj().serialize(),
members: this.nodes_.serialize(EditorNode),
});
}
@@ -41,20 +42,24 @@ class EditorGroup extends EditorEntryBase {
}
getLabel() {
let label = this.nodes_.getEntries(EditorLabel)[0];
let label = this.getLabelObj();
return label ? label.getLabel() : null;
}
setLabel(label) {
setLabel(label, labelId) {
let obj = this.nodes_.getEntries(EditorLabel)[0];
if (obj) {
obj.setLabel(label);
} else {
this.nodes_.addLabelBefore();
this.nodes_.addLabelBefore(labelId);
this.setLabel(label);
}
}
getLabelObj() {
return this.nodes_.getEntries(EditorLabel)[0];
}
onKeyDown(e) {
super.onKeyDown(e);
@@ -73,7 +78,8 @@ class EditorGroup extends EditorEntryBase {
let group = new EditorGroup(ser.id);
group.nodes_.clear();
if (ser.label != null) {
group.setLabel(ser.label);
group.setLabel(ser.label, ser.labelObj.id);
group.getLabelObj().setHighlight(ser.labelObj.highlight);
}
group.setHighlight(ser.highlight);
group.nodes_.unserialize(ser.members);

17
EditorLink.js
View File

@@ -25,10 +25,12 @@ class EditorLink extends EditorEntryBase {
}
}
// TODO: factor out common base code with EditorGroup
serialize() {
return super.serialize({
type: 'link',
label: this.getLabel(),
labelObj: this.getLabelObj().serialize(),
from: this.getFrom().serialize(),
to: this.getTo().serialize(),
});
@@ -43,20 +45,24 @@ class EditorLink extends EditorEntryBase {
}
getLabel() {
let label = this.nodes_.getEntries(EditorLabel)[0];
let label = this.getLabelObj();
return label ? label.getLabel() : null;
}
setLabel(label) {
let obj = this.nodes_.getEntries(EditorLabel)[0];
setLabel(label, labelId) {
let obj = this.getLabelObj();
if (obj) {
obj.setLabel(label);
} else {
this.nodes_.addLabelBefore();
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();
@@ -97,7 +103,8 @@ class EditorLink extends EditorEntryBase {
let link = new EditorLink(ser.id);
link.nodes_.clear();
if (ser.label != null) {
link.setLabel(ser.label);
link.setLabel(ser.label, ser.labelObj.id);
link.getLabelObj().setHighlight(ser.labelObj.highlight);
}
link.setHighlight(ser.highlight);
link.nodes_.unserialize([ser.from, ser.to]);

1
GraphGroup.js
View File

@@ -28,6 +28,7 @@ class GraphGroup {
let group = new GraphGroup();
group.id = item.id;
group.label = item.label;
group.labelId = item.labelObj.id;
group.nodeLabels = new Set();
for (let member of item.members) {
if (member.label == '') {

3
GraphLink.js
View File

@@ -11,11 +11,13 @@ class GraphLink {
to: to,
id: this.id,
label: this.label,
labelId: this.labelId,
});
to.linksIn.push({
from: from,
id: this.id,
label: this.label,
labelId: this.labelId,
});
}
}
@@ -31,6 +33,7 @@ class GraphLink {
let link = new GraphLink();
link.id = item.id;
link.label = item.label;
link.labelId = item.labelObj.id;
link.fromLabel = item.from.label;
link.toLabel = item.to.label;
if (link.fromLabel == '' || link.toLabel == '') {

31
Grid.js
View File

@@ -30,7 +30,11 @@ class Grid {
break;
case 'group':
this.drawGroup(step.id, step.min, step.max, step.label);
this.drawGroup(step.id, step.min, step.max);
break;
case 'groupLabel':
this.drawGroupLabel(step.id, step.min, step.max, step.label);
break;
case 'line':
@@ -85,7 +89,7 @@ class Grid {
this.toSize_.push(elem);
}
drawGroup(id, min, max, label) {
drawGroup(id, min, max) {
let group = document.createElement('div');
this.container_.appendChild(group);
group.classList.add('gridGroup');
@@ -93,19 +97,18 @@ class Grid {
this.maybeHighlight(group, id);
group.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
group.style.gridRow = (min[1] + 1) + ' / ' + (max[1] + 2);
}
if (label != '') {
// TODO: split this into its own draw step type
let labelNode = document.createElement('div');
this.container_.appendChild(labelNode);
labelNode.classList.add('gridGroupLabel');
labelNode.classList.add('grid-' + id);
this.maybeHighlight(labelNode, id);
labelNode.innerText = label;
labelNode.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
labelNode.style.gridRow = min[1] + 1;
this.toSize_.push(labelNode);
}
drawGroupLabel(id, min, max, label) {
let elem = document.createElement('div');
this.container_.appendChild(elem);
elem.classList.add('gridGroupLabel');
elem.classList.add('grid-' + id);
this.maybeHighlight(elem, id);
elem.innerText = label;
elem.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
elem.style.gridRow = min[1] + 1;
this.toSize_.push(elem);
}
drawLine(id, pos, cls) {

8
Layout.js
View File

@@ -227,6 +227,7 @@ class Layout {
to: link.to,
id: link.id,
label: link.label,
labelId: link.labelId,
});
}
}
@@ -238,7 +239,7 @@ class Layout {
for (let link of links) {
this.links_.push(
new LayoutLink(link.from, link.to, link.id, link.label,
new LayoutLink(link.from, link.to, link.id, link.label, link.labelId,
this.nodesByPos_, this.linksByPos_,
this.labelsByPos_));
}
@@ -283,10 +284,7 @@ class Layout {
}
for (let group of this.groups_) {
let step = group.getStep();
if (step) {
steps.push(step);
}
steps.push(...group.getSteps());
}
for (let link of this.links_) {

21
LayoutGroup.js
View File

@@ -80,19 +80,30 @@ class LayoutGroup {
pos[1] >= min[1] && pos[1] <= max[1]);
}
getStep() {
getSteps() {
if (!this.graphGroup_) {
return null;
return [];
}
let [min, max] = this.getMinMax();
return {
let steps = [{
type: 'group',
min: min,
max: max,
id: this.graphGroup_.id,
label: this.graphGroup_.label,
};
}];
if (this.label) {
steps.push({
type: 'groupLabel',
min: [min[0], min[1]],
max: [max[0], min[1]],
id: this.graphGroup_.labelId,
label: this.graphGroup_.label,
});
}
return steps;
}
hasGraphGroup() {

6
LayoutLink.js
View File

@@ -1,9 +1,11 @@
class LayoutLink {
constructor(from, to, id, label, nodesByPos, linksByPos, labelsByPos) {
constructor(from, to, id, label, labelId, nodesByPos, linksByPos,
labelsByPos) {
this.from_ = from;
this.to_ = to;
this.id_ = id;
this.label_ = label;
this.labelId_ = labelId;
this.nodesByPos_ = nodesByPos;
this.linksByPos_ = linksByPos;
this.labelsByPos_ = labelsByPos;
@@ -261,7 +263,7 @@ class LayoutLink {
if (this.labelPos_) {
steps.push({
type: 'linkLabel',
id: this.id_,
id: this.labelId_,
pos: this.labelPos_,
label: this.label_,
});

1
LayoutNode.js
View File

@@ -21,6 +21,7 @@ class LayoutNode {
to: nodesByGraphNode.get(link.to),
id: link.id,
label: link.label,
labelId: link.labelId,
});
}
}

13
architype.css
View File

@@ -279,7 +279,6 @@ body {
justify-content: flex-start;
border: 1px dashed var(--line);
z-index: 1;
pointer-events: none;
}
.gridGroup.highlight {
@@ -288,8 +287,8 @@ body {
}
.gridGroupLabel {
width: calc(100% - 10px);
height: calc(100% - 10px);
max-width: 90%;
max-height: 90%;
justify-content: center;
font-size: 20px;
overflow: hidden;
@@ -297,6 +296,10 @@ body {
z-index: 1;
}
.gridGroupLabel.highlight {
color: var(--focus);
}
.gridLines {
width: 100%;
height: 100%;
@@ -319,6 +322,10 @@ body {
padding: 3px;
}
.gridLinkLabel.highlight {
color: var(--focus);
}
.gridArrow {
width: 100%;
height: 100%;