Drawing protocol for line and group

Architype.js

@@ -116,8 +116,16 @@ class Architype {
           this.drawGrid(step.size);
           break;
 
+        case 'group':
+          this.drawGroup(step.min, step.max, step.label);
+          break;
+
+        case 'line':
+          this.drawLine(step.pos, step.cls);
+          break;
+
         case 'node':
-          this.drawGridNode(step.label, step.pos);
+          this.drawNode(step.label, step.pos);
           break;
       }
     }
@@ -132,7 +140,28 @@ class Architype {
         size[0] + ')))';
   }
 
-  drawGridNode(label, pos) {
+  drawGroup(min, max, label) {
+    let group = document.createElement('div');
+    group.classList.add('gridGroup');
+    this.grid_.appendChild(group);
+    group.innerText = label;
+    group.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
+    group.style.gridRow = (min[1] + 1) + ' / ' + (max[1] + 2);
+  }
+
+  drawLine(pos, cls) {
+    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.grid_.appendChild(svg);
+
+    let use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+    svg.appendChild(use);
+    use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + cls);
+  }
+
+  drawNode(label, pos) {
     let node = document.createElement('div');
     node.classList.add('gridNode');
     this.grid_.appendChild(node);
@@ -153,18 +182,6 @@ class Architype {
       }
     }
   }
-
-  addLine(pos, cls) {
-    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.grid_.appendChild(svg);
-
-    let use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
-    svg.appendChild(use);
-    use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + cls);
-  }
 }
 
 <!--# include file="Editor.js" -->

architype.css

@@ -133,6 +133,7 @@ body {
   justify-content: center;
   text-align: center;
   font-size: 20px;
+  word-break: break-all;
 
   border-radius: 10px;
   padding: 3px;
@@ -140,10 +141,37 @@ body {
 
   overflow: hidden;
 
+  background: var(--background);
+  z-index: 2;
+}
+
+.gridGroup {
+  width: 100%;
+  height: calc(100% - 20px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+  font-size: 20px;
+  word-break: break-all;
+
+  border-radius: 10px;
+  margin-top: 20px;
+  padding: 3px;
+  border: 1px dashed white;
+
+  overflow: hidden;
+
   background: var(--background);
   z-index: 1;
 }
 
+.gridGroup:empty {
+  height: 100%;
+  margin-top: 0;
+}
+
 .gridLines {
   width: 100%;
   height: 100%;