From 3bdb240987f00671abcf51325c1eed901c5ef891 Mon Sep 17 00:00:00 2001 From: Ian Gulliver Date: Sun, 14 Jul 2019 03:19:15 +0000 Subject: [PATCH] Individual highlighting for link and group labels --- Editor.js | 32 ++++++++++++++++++-------------- EditorGroup.js | 14 ++++++++++---- EditorLink.js | 17 ++++++++++++----- GraphGroup.js | 1 + GraphLink.js | 3 +++ Grid.js | 31 +++++++++++++++++-------------- Layout.js | 8 +++----- LayoutGroup.js | 21 ++++++++++++++++----- LayoutLink.js | 6 ++++-- LayoutNode.js | 1 + architype.css | 13 ++++++++++--- 11 files changed, 95 insertions(+), 52 deletions(-) diff --git a/Editor.js b/Editor.js index 948f4c4..c875233 100644 --- a/Editor.js +++ b/Editor.js @@ -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; } diff --git a/EditorGroup.js b/EditorGroup.js index 02adda0..ac47fa3 100644 --- a/EditorGroup.js +++ b/EditorGroup.js @@ -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); diff --git a/EditorLink.js b/EditorLink.js index 8299e4d..574d340 100644 --- a/EditorLink.js +++ b/EditorLink.js @@ -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]); diff --git a/GraphGroup.js b/GraphGroup.js index 049a2f0..4d29f81 100644 --- a/GraphGroup.js +++ b/GraphGroup.js @@ -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 == '') { diff --git a/GraphLink.js b/GraphLink.js index 2ae3812..468d91c 100644 --- a/GraphLink.js +++ b/GraphLink.js @@ -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 == '') { diff --git a/Grid.js b/Grid.js index 4147887..2c8e1a6 100644 --- a/Grid.js +++ b/Grid.js @@ -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) { diff --git a/Layout.js b/Layout.js index 3319c58..1e42008 100644 --- a/Layout.js +++ b/Layout.js @@ -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_) { diff --git a/LayoutGroup.js b/LayoutGroup.js index a734bbc..709fcea 100644 --- a/LayoutGroup.js +++ b/LayoutGroup.js @@ -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() { diff --git a/LayoutLink.js b/LayoutLink.js index 91d43ee..445eeac 100644 --- a/LayoutLink.js +++ b/LayoutLink.js @@ -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_, }); diff --git a/LayoutNode.js b/LayoutNode.js index 600e5e8..62c9760 100644 --- a/LayoutNode.js +++ b/LayoutNode.js @@ -21,6 +21,7 @@ class LayoutNode { to: nodesByGraphNode.get(link.to), id: link.id, label: link.label, + labelId: link.labelId, }); } } diff --git a/architype.css b/architype.css index bba81f0..52fb589 100644 --- a/architype.css +++ b/architype.css @@ -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%;