Just abuse classes for grid linkage

Architype.js

@@ -15,15 +15,13 @@ class Architype {
 
     document.addEventListener('keydown', (e) => { this.onKeyDown(e); });
 
-    let gridElementsById = new Map();
-
     this.editorElem_ = document.createElement('ul');
     this.container_.appendChild(this.editorElem_);
-    this.editor_ = new Editor(this.editorElem_, gridElementsById);
+    this.editor_ = new Editor(this.editorElem_);
 
     this.gridElem_ = document.createElement('div');
     this.container_.appendChild(this.gridElem_);
-    this.grid_ = new Grid(this.gridElem_, gridElementsById);
+    this.grid_ = new Grid(this.gridElem_);
 
     this.generation_ = 0;
     this.renderGeneration_ = -1;

EditorLabel.js

@@ -9,6 +9,7 @@ class EditorLabel extends EditorInputBase {
   serialize() {
     return super.serialize({
       type: 'label',
+      id: this.getId(),
     });
   }
 

Graph.js

@@ -58,6 +58,7 @@ class Graph {
       return;
     }
     this.label = item.label;
+    this.labelId = item.id;
   }
 
   processLink(item) {

Grid.js

@@ -1,10 +1,8 @@
 class Grid {
-  constructor(container, elementsById) {
+  constructor(container) {
     this.container_ = container;
     this.container_.classList.add('grid');
 
-    this.elementsById_ = elementsById;
-
     this.toSize_ = [];
     addEventListener('resize', (e) => { this.onResize(e); });
   }
@@ -15,7 +13,6 @@ class Grid {
 
   draw(steps) {
     this.container_.innerHTML = '';
-    this.elementsById_.clear();
     this.toSize_.length = 0;
 
     for (let step of steps) {
@@ -51,8 +48,6 @@ class Grid {
       }
     }
 
-    console.log(this.elementsById_);
-
     this.fixSizes();
   }
 
@@ -67,12 +62,11 @@ class Grid {
 
   drawArrow(id, pos, cls, highlight) {
     let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    getOrSet(this.elementsById_, id, []).push(svg);
+    this.container_.appendChild(svg);
     svg.classList.add('gridArrow');
-    svg.classList.add(cls);
+    svg.classList.add('grid-' + id);
     svg.style.gridColumn = pos[0] + 1;
     svg.style.gridRow = pos[1] + 1;
-    this.container_.appendChild(svg);
     svg.classList.toggle('highlight', highlight);
 
     let use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
@@ -82,9 +76,9 @@ class Grid {
 
   drawGraphLabel(id, min, max, label) {
     let elem = document.createElement('div');
-    getOrSet(this.elementsById_, id, []).push(elem);
     this.container_.appendChild(elem);
     elem.classList.add('gridGraphLabel');
+    elem.classList.add('grid-' + id);
     elem.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
     elem.style.gridRow = (min[1] + 1) + ' / ' + (max[1] + 2);
     elem.innerText = label;
@@ -93,9 +87,9 @@ class Grid {
 
   drawGroup(id, min, max, label, highlight) {
     let group = document.createElement('div');
-    getOrSet(this.elementsById_, id, []).push(group);
     this.container_.appendChild(group);
     group.classList.add('gridGroup');
+    group.classList.add('grid-' + id);
     group.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
     group.style.gridRow = (min[1] + 1) + ' / ' + (max[1] + 2);
     group.classList.toggle('highlight', highlight);
@@ -104,6 +98,7 @@ class Grid {
       let labelNode = document.createElement('div');
       this.container_.appendChild(labelNode);
       labelNode.classList.add('gridGroupLabel');
+      labelNode.classList.add('grid-' + id);
       labelNode.innerText = label;
       labelNode.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
       labelNode.style.gridRow = min[1] + 1;
@@ -113,11 +108,11 @@ class Grid {
 
   drawLine(id, pos, cls, highlight) {
     let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    getOrSet(this.elementsById_, id, []).push(svg);
+    this.container_.appendChild(svg);
     svg.classList.add('gridLines');
+    svg.classList.add('grid-' + id);
     svg.style.gridColumn = pos[0] + 1;
     svg.style.gridRow = pos[1] + 1;
-    this.container_.appendChild(svg);
     svg.classList.toggle('highlight', highlight);
 
     let use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
@@ -127,9 +122,9 @@ class Grid {
 
   drawLinkLabel(id, pos, label) {
     let elem = document.createElement('div');
-    getOrSet(this.elementsById_, id, []).push(elem);
-    elem.classList.add('gridLinkLabel');
     this.container_.appendChild(elem);
+    elem.classList.add('gridLinkLabel');
+    elem.classList.add('grid-' + id);
     elem.innerText = label;
     elem.style.gridColumn = pos[0] + 1;
     elem.style.gridRow = pos[1] + 1;
@@ -138,9 +133,9 @@ class Grid {
 
   drawNode(id, label, pos, highlight) {
     let node = document.createElement('div');
-    getOrSet(this.elementsById_, id, []).push(node);
-    node.classList.add('gridNode');
     this.container_.appendChild(node);
+    node.classList.add('gridNode');
+    node.classList.add('grid-' + id);
     node.innerText = label;
     node.classList.toggle('highlight', highlight);
     node.style.gridColumn = pos[0] + 1;

Layout.js

@@ -269,6 +269,7 @@ class Layout {
     if (this.graph_.label) {
       steps.push({
         type: 'graphLabel',
+        id: this.graph_.labelId,
         min: [0, 0],
         max: [this.size[0] - 1, 0],
         label: this.graph_.label,