Contained, auto-resize group labels

Architype.js

@@ -108,7 +108,7 @@ class Architype {
 
   draw(steps) {
     this.grid_.innerHTML = '';
-    this.gridNodes_ = [];
+    this.toSize_ = [];
 
     for (let step of steps) {
       switch (step.type) {
@@ -142,11 +142,20 @@ class Architype {
 
   drawGroup(min, max, label) {
     let group = document.createElement('div');
-    group.classList.add('gridGroup');
     this.grid_.appendChild(group);
-    group.innerText = label;
+    group.classList.add('gridGroup');
     group.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
     group.style.gridRow = (min[1] + 1) + ' / ' + (max[1] + 2);
+
+    if (label != '') {
+      let labelNode = document.createElement('div');
+      this.grid_.appendChild(labelNode);
+      labelNode.classList.add('gridGroupLabel');
+      labelNode.innerText = label;
+      labelNode.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
+      labelNode.style.gridRow = min[1] + 1;
+      this.toSize_.push(labelNode);
+    }
   }
 
   drawLine(pos, cls) {
@@ -168,11 +177,11 @@ class Architype {
     node.innerText = label;
     node.style.gridColumn = pos[0] + 1;
     node.style.gridRow = pos[1] + 1;
-    this.gridNodes_.push(node);
+    this.toSize_.push(node);
   }
 
   fixSizes() {
-    for (let node of this.gridNodes_) {
+    for (let node of this.toSize_) {
       node.style.fontSize = null;
       for (let size = 20;
            size && (node.scrollWidth > node.clientWidth ||

architype.css

@@ -127,52 +127,39 @@ body {
   margin: 10px;
 }
 
+.gridNode, .gridGroup, .gridGroupLabel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  font-size: 20px;
+  border-radius: 10px;
+  overflow-wrap: anywhere;
+  overflow: hidden;
+  cursor: default;
+  user-select: none;
+}
+
 .gridNode {
   width: calc(100% - 24px);
   height: calc(100% - 24px);
-  display: flex;
-  align-items: center;
+  background: var(--background);
   justify-content: center;
-  text-align: center;
-  font-size: 20px;
-  overflow-wrap: anywhere;
-
-  border-radius: 10px;
   padding: 3px;
   border: 1px solid white;
-
-  overflow: hidden;
-
-  background: var(--background);
   z-index: 2;
-
-  cursor: default;
-  user-select: none;
 }
 
 .gridGroup {
   width: calc(100% - 10px);
   height: calc(100% - 30px);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  background: var(--background);
   justify-content: flex-start;
-  text-align: center;
-  font-size: 20px;
-  overflow-wrap: anywhere;
-
-  border-radius: 10px;
   margin-top: 20px;
   padding: 5px;
   border: 1px dashed white;
-
-  overflow: hidden;
-
-  background: var(--background);
   z-index: 1;
-
-  cursor: default;
-  user-select: none;
 }
 
 .gridGroup:empty {
@@ -180,6 +167,17 @@ body {
   margin-top: 0;
 }
 
+.gridGroupLabel {
+  width: calc(100% - 10px);
+  height: 100%;
+  justify-content: center;
+  font-size: 20px;
+  padding-top: 3px;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  z-index: 2;
+}
+
 .gridLines {
   width: 100%;
   height: 100%;