diff --git a/EditorLink.js b/EditorLink.js index 0812c6e..2f97541 100644 --- a/EditorLink.js +++ b/EditorLink.js @@ -26,6 +26,7 @@ class EditorLink extends EditorEntryBase { label: this.getLabel(), from: this.getFrom().serialize(), to: this.getTo().serialize(), + highlight: this.elem_.classList.contains('highlight'), }; } @@ -52,6 +53,10 @@ class EditorLink extends EditorEntryBase { } } + setHighlight(highlight) { + this.elem_.classList.toggle('highlight', highlight); + } + onKeyDown(e) { super.onKeyDown(e); @@ -63,6 +68,13 @@ class EditorLink extends EditorEntryBase { e.stopPropagation(); e.preventDefault(); break; + + case ' ': + this.elem_.classList.toggle('highlight'); + this.elem_.setAttribute('data-arch-value', ''); + e.stopPropagation(); + e.preventDefault(); + break; } } @@ -72,6 +84,7 @@ class EditorLink extends EditorEntryBase { if (ser.label != null) { link.setLabel(ser.label); } + link.setHighlight(ser.highlight); link.nodes_.unserialize([ser.from, ser.to]); return link.getElement(); } diff --git a/GraphLink.js b/GraphLink.js index cfd3a2d..8369a4e 100644 --- a/GraphLink.js +++ b/GraphLink.js @@ -10,10 +10,12 @@ class GraphLink { from.links.push({ to: to, label: this.label, + highlight: this.highlight, }); to.linksIn.push({ from: from, label: this.label, + highlight: this.highlight, }); } } @@ -30,6 +32,7 @@ class GraphLink { link.label = item.label; link.fromLabel = item.from.label; link.toLabel = item.to.label; + link.highlight = item.highlight; if (link.fromLabel == '' || link.toLabel == '') { return null; } diff --git a/Grid.js b/Grid.js index 11f289a..f9618bd 100644 --- a/Grid.js +++ b/Grid.js @@ -22,7 +22,7 @@ class Grid { break; case 'arrow': - this.drawArrow(step.pos, step.cls); + this.drawArrow(step.pos, step.cls, step.highlight); break; case 'graphLabel': @@ -34,7 +34,7 @@ class Grid { break; case 'line': - this.drawLine(step.pos, step.cls); + this.drawLine(step.pos, step.cls, step.highlight); break; case 'linkLabel': @@ -59,13 +59,14 @@ class Grid { size[0] + ')))'; } - drawArrow(pos, cls) { + drawArrow(pos, cls, highlight) { let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.classList.add('gridArrow'); svg.classList.add(cls); svg.style.gridColumn = pos[0] + 1; svg.style.gridRow = pos[1] + 1; this.container_.appendChild(svg); + svg.classList.toggle('highlight', highlight); let use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); svg.appendChild(use); @@ -100,12 +101,13 @@ class Grid { } } - drawLine(pos, cls) { + drawLine(pos, cls, highlight) { let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.classList.add('gridLines'); svg.style.gridColumn = pos[0] + 1; svg.style.gridRow = pos[1] + 1; this.container_.appendChild(svg); + svg.classList.toggle('highlight', highlight); let use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); svg.appendChild(use); diff --git a/Layout.js b/Layout.js index a1d8e56..aa08ed2 100644 --- a/Layout.js +++ b/Layout.js @@ -226,6 +226,7 @@ class Layout { from: from, to: link.to, label: link.label, + highlight: link.highlight, }); } } @@ -237,7 +238,7 @@ class Layout { for (let link of links) { this.links_.push( - new LayoutLink(link.from, link.to, link.label, + new LayoutLink(link.from, link.to, link.label, link.highlight, this.nodesByPos_, this.linksByPos_, this.labelsByPos_)); } diff --git a/LayoutLink.js b/LayoutLink.js index 00c6194..b3521d0 100644 --- a/LayoutLink.js +++ b/LayoutLink.js @@ -1,8 +1,9 @@ class LayoutLink { - constructor(from, to, label, nodesByPos, linksByPos, labelsByPos) { + constructor(from, to, label, highlight, nodesByPos, linksByPos, labelsByPos) { this.from_ = from; this.to_ = to; this.label_ = label; + this.highlight_ = highlight; this.nodesByPos_ = nodesByPos; this.linksByPos_ = linksByPos; this.labelsByPos_ = labelsByPos; @@ -223,6 +224,7 @@ class LayoutLink { type: 'line', pos: Array.from(this.path[0]), cls: 's' + this.getOutPoint(this.path[0], this.path[1]), + highlight: this.highlight_, }); for (let i = 1; i < this.path.length - 1; ++i) { @@ -232,6 +234,7 @@ class LayoutLink { type: 'line', pos: Array.from(this.path[i]), cls: `i${inPoint}o${outPoint}`, + highlight: this.highlight_, }); } @@ -242,12 +245,14 @@ class LayoutLink { type: 'line', pos: Array.from(this.path[this.path.length - 1]), cls: 's' + endInPoint, + highlight: this.highlight_, }); steps.push({ type: 'arrow', pos: Array.from(this.path[this.path.length - 1]), cls: 'a' + endInPoint, + highlight: this.highlight_, }); if (this.labelPos_) { diff --git a/LayoutNode.js b/LayoutNode.js index 8850519..9e565c3 100644 --- a/LayoutNode.js +++ b/LayoutNode.js @@ -14,6 +14,7 @@ class LayoutNode { this.links.push({ to: nodesByGraphNode.get(link.to), label: link.label, + highlight: link.highlight, }); } } diff --git a/architype.css b/architype.css index 3f4fa3e..94f82ec 100644 --- a/architype.css +++ b/architype.css @@ -100,6 +100,14 @@ body { background-color: var(--link); } +.editor li.link.highlight { + background: repeating-linear-gradient( + -45deg, + transparent 0 10px, + rgba(255,0,0,0.3) 10px 20px + ), var(--link); +} + .editor li.label { background-color: var(--label); } @@ -241,6 +249,10 @@ body { --line-color: white; } +.gridLines.highlight { + --line-color: var(--focus); +} + .gridLinkLabel { max-width: 80%; max-height: 80%; @@ -257,3 +269,7 @@ body { z-index: 4; --arrow-color: white; } + +.gridArrow.highlight { + --arrow-color: var(--focus); +}