Highlight links

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();
   }

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;
     }

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);

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_));
     }

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_) {

LayoutNode.js

@@ -14,6 +14,7 @@ class LayoutNode {
       this.links.push({
         to: nodesByGraphNode.get(link.to),
         label: link.label,
+        highlight: link.highlight,
       });
     }
   }

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);
+}