Handle global label

Architype.js

@@ -139,6 +139,10 @@ class Architype {
           this.drawArrow(step.pos, step.cls);
           break;
 
+        case 'graphLabel':
+          this.drawGraphLabel(step.min, step.max, step.label);
+          break;
+
         case 'group':
           this.drawGroup(step.min, step.max, step.label);
           break;
@@ -180,6 +184,16 @@ class Architype {
     use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + cls);
   }
 
+  drawGraphLabel(min, max, label) {
+    let elem = document.createElement('div');
+    this.grid_.appendChild(elem);
+    elem.classList.add('gridGraphLabel');
+    elem.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
+    elem.style.gridRow = (min[1] + 1) + ' / ' + (max[1] + 2);
+    elem.innerText = label;
+    this.toSize_.push(elem);
+  }
+
   drawGroup(min, max, label) {
     let group = document.createElement('div');
     this.grid_.appendChild(group);
@@ -232,8 +246,9 @@ class Architype {
 
   fixSizes() {
     for (let node of this.toSize_) {
+      console.log(node, node.scrollHeight, node.clientHeight);
       node.style.fontSize = null;
-      for (let size = 20;
+      for (let size = 30;
            size && (node.scrollWidth > node.clientWidth ||
                     node.scrollHeight > node.clientHeight);
            --size) {

Editor.js

@@ -11,7 +11,6 @@ class Editor extends List {
       [EditorLabel, [0, 1]],
       [EditorHelp,  [0, Number.POSITIVE_INFINITY]],
     ]);
-    // TODO: do something with global EditorLabel
 
     this.container_.classList.add('editor');
     // Needs to accept focus to receive keydown, but shouldn't be in the normal

Graph.js

@@ -6,6 +6,7 @@ class Graph {
     this.groups = [];
     this.links = [];
     this.nodes = [];
+    this.label = null;
 
     this.processList(def.editor);
     this.removeSoftNodes();
@@ -30,6 +31,10 @@ class Graph {
         this.processGroup(item);
         break;
 
+      case 'label':
+        this.processLabel(item);
+        break;
+
       case 'link':
         this.processLink(item);
         break;
@@ -49,6 +54,13 @@ class Graph {
     this.processList(item.members, true);
   }
 
+  processLabel(item) {
+    if (item.label == '') {
+      return;
+    }
+    this.label = item.label;
+  }
+
   processLink(item) {
     let link = GraphLink.process(item);
     if (!link) {

Layout.js

@@ -164,8 +164,12 @@ class Layout {
       }
     }
 
+    if (this.graph_.label) {
+      min[0] -= 1;
+    }
+
     // Set a minimum size and center the smaller graph
-    const MIN_SIZE = 6;
+    const MIN_SIZE = 7;
     for (let i of [0, 1]) {
       let expand = MIN_SIZE - (max[i] - min[i] + 1);
       if (expand <= 0) {
@@ -254,6 +258,15 @@ class Layout {
       },
     ];
 
+    if (this.graph_.label) {
+      steps.push({
+        type: 'graphLabel',
+        min: [0, 0],
+        max: [this.size[0] - 1, 0],
+        label: this.graph_.label,
+      });
+    }
+
     let nodes = Array.from(this.nodes_);
     for (let i of [1, 0]) {
       nodes.sort((a, b) => a.pos[i] - b.pos[i]);
@@ -261,12 +274,14 @@ class Layout {
     for (let node of nodes) {
       steps.push(node.getStep());
     }
+
     for (let group of this.groups_) {
       let step = group.getStep();
       if (step) {
         steps.push(step);
       }
     }
+
     for (let link of this.links_) {
       steps.push(...link.getSteps());
     }

architype.css

@@ -172,7 +172,7 @@ body {
   padding: 10px;
 }
 
-.gridNode, .gridGroup, .gridGroupLabel, .gridLinkLabel {
+.gridNode, .gridGraphLabel, .gridGroup, .gridGroupLabel, .gridLinkLabel {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -195,6 +195,13 @@ body {
   z-index: 3;
 }
 
+.gridGraphLabel {
+  height: 100%;
+  width: 100%;
+  font-size: 30px;
+  text-align: center;
+}
+
 .gridGroup {
   width: 100%;
   height: 100%;