Draw group borders

Layout.js

@@ -51,11 +51,11 @@ class Layout {
     this.groups_ = [];
     for (let group of this.graph_.groups) {
       let nodes = this.nodesFromGraphNodes(group.nodes);
-      this.groups_.push(new LayoutGroup(nodes));
+      this.groups_.push(new LayoutGroup(group, nodes));
     }
     for (let subgraph of this.graph_.nodesBySubgraph.values()) {
       let nodes = this.nodesFromGraphNodes(subgraph);
-      this.groups_.push(new LayoutGroup(nodes));
+      this.groups_.push(new LayoutGroup(null, nodes));
     }
   }
 
@@ -133,10 +133,11 @@ class Layout {
   fixOrigin() {
     let min = [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER];
     let max = [Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER];
-    for (let node of this.nodes_) {
+    for (let group of this.groups_) {
+      let [groupMin, groupMax] = group.getMinMax();
       for (let i of [0, 1]) {
-        min[i] = Math.min(min[i], node.pos[i]);
-        max[i] = Math.max(max[i], node.pos[i]);
+        min[i] = Math.min(min[i], groupMin[i]);
+        max[i] = Math.max(max[i], groupMax[i]);
       }
     }
     // Offset is negative minimum, e.g min -1 means +1 to all values
@@ -164,11 +165,13 @@ class Layout {
       nodes.sort((a, b) => a.pos[i] - b.pos[i]);
     }
     for (let node of nodes) {
-      steps.push({
-        type: 'node',
-        pos: node.pos,
-        label: node.graphNode.label,
-      });
+      steps.push(node.getStep());
+    }
+    for (let group of this.groups_) {
+      let step = group.getStep();
+      if (step) {
+        steps.push(step);
+      }
     }
 
     return steps;

LayoutGroup.js

@@ -1,5 +1,6 @@
 class LayoutGroup {
-  constructor(nodes) {
+  constructor(graphGroup, nodes) {
+    this.graphGroup_ = graphGroup;
     this.nodes = new Set(nodes);
     this.tension = 0;
   }
@@ -49,4 +50,34 @@ class LayoutGroup {
       }
     }
   }
+
+  getMinMax() {
+    let min = [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER];
+    let max = [Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER];
+    for (let node of this.nodes) {
+      for (let i of [0, 1]) {
+        min[i] = Math.min(min[i], node.pos[i]);
+        max[i] = Math.max(max[i], node.pos[i]);
+      }
+    }
+    if (this.graphGroup_ && this.graphGroup_.label) {
+      // Room for the label
+      --min[1];
+    }
+    return [min, max];
+  }
+
+  getStep() {
+    if (!this.graphGroup_) {
+      return null;
+    }
+
+    let [min, max] = this.getMinMax();
+    return {
+      type: 'group',
+      min: min,
+      max: max,
+      label: this.graphGroup_.label,
+    };
+  }
 }

LayoutNode.js

@@ -1,6 +1,6 @@
 class LayoutNode {
   constructor(graphNode, nodesByPos, pos) {
-    this.graphNode = graphNode;
+    this.graphNode_ = graphNode;
     this.nodesByPos_ = nodesByPos;
     this.pos = pos;
 
@@ -9,7 +9,7 @@ class LayoutNode {
 
   resolveAffinity(nodesByGraphNode) {
     this.affinity_ = [];
-    for (let aff of this.graphNode.affinity) {
+    for (let aff of this.graphNode_.affinity) {
       this.affinity_.push({
         node: nodesByGraphNode.get(aff.node),
         distanceToWeight: aff.distanceToWeight,
@@ -65,4 +65,12 @@ class LayoutNode {
   restorePos() {
     this.moveTo(this.savedPos_);
   }
+
+  getStep() {
+    return {
+      type: 'node',
+      pos: this.pos,
+      label: this.graphNode_.label,
+    };
+  }
 }

architype.css

@@ -133,7 +133,7 @@ body {
   justify-content: center;
   text-align: center;
   font-size: 20px;
-  word-break: break-all;
+  overflow-wrap: anywhere;
 
   border-radius: 10px;
   padding: 3px;
@@ -154,11 +154,11 @@ body {
   justify-content: flex-start;
   text-align: center;
   font-size: 20px;
-  word-break: break-all;
+  overflow-wrap: anywhere;
 
   border-radius: 10px;
   margin-top: 20px;
-  padding: 3px;
+  padding: 5px;
   border: 1px dashed white;
 
   overflow: hidden;