Link labels

Architype.js

@@ -129,6 +129,10 @@ class Architype {
           this.drawLine(step.pos, step.cls);
           break;
 
+        case 'linkLabel':
+          this.drawLinkLabel(step.pos, step.label);
+          break;
+
         case 'node':
           this.drawNode(step.label, step.pos);
           break;
@@ -188,6 +192,16 @@ class Architype {
     use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + cls);
   }
 
+  drawLinkLabel(pos, label) {
+    let elem = document.createElement('div');
+    elem.classList.add('gridLinkLabel');
+    this.grid_.appendChild(elem);
+    elem.innerText = label;
+    elem.style.gridColumn = pos[0] + 1;
+    elem.style.gridRow = pos[1] + 1;
+    this.toSize_.push(elem);
+  }
+
   drawNode(label, pos) {
     let node = document.createElement('div');
     node.classList.add('gridNode');

Layout.js

@@ -7,6 +7,7 @@ class Layout {
     this.nodesByPos_ = new StringMap();
     this.nodesByGraphNode_ = new Map();
     this.linksByPos_ = new StringMap();
+    this.labelsByPos_ = new StringMap();
     this.links_ = [];
 
     this.setInitialPositions();
@@ -229,7 +230,8 @@ class Layout {
     for (let link of links) {
       this.links_.push(
           new LayoutLink(link.from, link.to, link.label,
-                         this.nodesByPos_, this.linksByPos_));
+                         this.nodesByPos_, this.linksByPos_,
+                         this.labelsByPos_));
     }
 
     for (let link of this.links_) {

LayoutLink.js

@@ -1,10 +1,11 @@
 class LayoutLink {
-  constructor(from, to, label, nodesByPos, linksByPos) {
+  constructor(from, to, label, nodesByPos, linksByPos, labelsByPos) {
     this.from_ = from;
     this.to_ = to;
     this.label_ = label;
     this.nodesByPos_ = nodesByPos;
     this.linksByPos_ = linksByPos;
+    this.labelsByPos_ = labelsByPos;
     this.bfs();
   }
 
@@ -180,6 +181,39 @@ class LayoutLink {
   }
 
   drawLabel() {
+    if (this.label_ == null || this.label_ == '') {
+      return;
+    }
+
+    let minScore = Number.POSITIVE_INFINITY;
+    let labelPos = null;
+
+    for (let i = 1; i < this.path.length - 1; ++i) {
+      let pos = this.path[i];
+      let score = 0;
+
+      if (this.nodesByPos_.has(pos)) {
+        // Never overlap nodes
+        continue;
+      }
+
+      if (this.labelsByPos_.get(pos) == this.label_) {
+        // Already labeled by another link
+        return;
+      }
+
+      // TODO: cheaper if we overlap with other links with the same label?
+
+      if (score < minScore) {
+        minScore = score;
+        labelPos = pos;
+      }
+    }
+
+    if (labelPos) {
+      this.labelPos_ = labelPos;
+      this.labelsByPos_.set(this.labelPos_, this.label_);
+    }
   }
 
   getSteps() {
@@ -216,6 +250,14 @@ class LayoutLink {
       cls: 'a' + endInPoint,
     });
 
+    if (this.labelPos_) {
+      steps.push({
+        type: 'linkLabel',
+        pos: this.labelPos_,
+        label: this.label_,
+      });
+    }
+
     return steps;
   }
 }

architype.css

@@ -12,6 +12,7 @@
   --grid-background: #202020;
   --group-background: rgba(0,0,0,0.5);
   --node-background: #000000;
+  --link-label-background: rgba(0,0,0,0.8);
   --input: rgba(255,255,255,0.2);
   --input-focus: rgba(255,0,0,0.2);
 }
@@ -139,7 +140,7 @@ body {
   padding: 10px;
 }
 
-.gridNode, .gridGroup, .gridGroupLabel {
+.gridNode, .gridGroup, .gridGroupLabel, .gridLinkLabel {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -188,6 +189,16 @@ body {
   --line-color: white;
 }
 
+.gridLinkLabel {
+  max-width: 80%;
+  max-height: 80%;
+  font-size: 16px;
+  background: var(--link-label-background);
+  z-index: 3;
+  border-radius: 4px;
+  padding: 3px;
+}
+
 .gridArrow {
   width: 100%;
   height: 100%;