Tag label rendering

Grid.js

@@ -48,6 +48,10 @@ class Grid {
         case 'node':
           this.drawNode(step.id, step.label, step.pos, step.tags);
           break;
+
+        case 'tagLabel':
+          this.drawTagLabel(step.id, step.pos, step.label, step.tag);
+          break;
       }
     }
 
@@ -148,6 +152,18 @@ class Grid {
     this.linkToEditor(node, id, true);
   }
 
+  drawTagLabel(id, pos, label, tag) {
+    let elem = document.createElement('div');
+    this.container_.appendChild(elem);
+    elem.classList.add('gridTagLabel');
+    elem.classList.add('grid-' + id);
+    elem.innerText = label;
+    elem.style.gridColumn = pos[0] + 1;
+    elem.style.gridRow = pos[1] + 1;
+    elem.classList.add('tag' + tag);
+    this.linkToEditor(elem, id, true);
+  }
+
   linkToEditor(elem, id, copyLabel) {
     let source = document.getElementById(id);
     if (!source) {

Layout.js

@@ -183,6 +183,13 @@ class Layout {
       min[1] -= 1;
     }
 
+    for (let tag of this.tags_) {
+      if (tag.label) {
+        max[1] += 1;
+        break;
+      }
+    }
+
     // Set a minimum size and center the smaller graph
     const MIN_SIZE = 7;
     for (let i of [0, 1]) {
@@ -301,6 +308,14 @@ class Layout {
       steps.push(...link.getSteps());
     }
 
+    let nextTagLabelPos = [
+        this.size[0] - 1,
+        this.size[1] - 1,
+    ];
+    for (let tag of this.tags_) {
+      steps.push(...tag.getSteps(nextTagLabelPos));
+    }
+
     return steps;
   }
 }

LayoutTag.js

@@ -13,8 +13,18 @@ class LayoutTag {
     }
   }
 
-  getSteps() {
+  getSteps(nextLabelPos) {
     let steps = [];
+    if (this.label) {
+      steps.push({
+        type: 'tagLabel',
+        id: this.graphTag_.labelId,
+        pos: Array.from(nextLabelPos),
+        label: this.label,
+        tag: this.idx_,
+      });
+      nextLabelPos[1] -= 1;
+    }
     return steps;
   }
 }

architype.css

@@ -246,7 +246,8 @@ body {
   padding: 10px;
 }
 
-.gridNode, .gridGraphLabel, .gridGroup, .gridGroupLabel, .gridLinkLabel {
+.gridNode, .gridGraphLabel, .gridGroup, .gridGroupLabel, .gridLinkLabel,
+    .gridTagLabel {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -270,27 +271,27 @@ body {
   z-index: 3;
 }
 
-.gridNode.tag0 {
+.tag0 {
   background: var(--tag0);
 }
 
-.gridNode.tag1 {
+.tag1 {
   background: var(--tag1);
 }
 
-.gridNode.tag2 {
+.tag2 {
   background: var(--tag2);
 }
 
-.gridNode.tag3 {
+.tag3 {
   background: var(--tag3);
 }
 
-.gridNode.tag4 {
+.tag4 {
   background: var(--tag4);
 }
 
-.gridNode.tag5 {
+.tag5 {
   background: var(--tag5);
 }
 
@@ -415,3 +416,12 @@ body {
 .gridArrow.highlight {
   --arrow-color: var(--focus);
 }
+
+.gridTagLabel {
+  max-width: 80%;
+  max-height: 80%;
+  font-size: 16px;
+  z-index: 3;
+  border-radius: 4px;
+  padding: 3px;
+}