Grid Id tracking

Architype.js

@@ -15,13 +15,15 @@ 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_);
+    this.editor_ = new Editor(this.editorElem_, gridElementsById);
 
     this.gridElem_ = document.createElement('div');
     this.container_.appendChild(this.gridElem_);
-    this.grid_ = new Grid(this.gridElem_);
+    this.grid_ = new Grid(this.gridElem_, gridElementsById);
 
     this.generation_ = 0;
     this.renderGeneration_ = -1;
@@ -291,4 +293,6 @@ class Architype {
 <!--# include file="Grid.js" -->
 <!--# include file="IdSource.js" -->
 
+<!--# include file="utils.js" -->
+
 new Architype(document.getElementById('architype'));

Grid.js

@@ -1,8 +1,10 @@
 class Grid {
-  constructor(container) {
+  constructor(container, elementsById) {
     this.container_ = container;
     this.container_.classList.add('grid');
 
+    this.elementsById_ = elementsById;
+
     this.toSize_ = [];
     addEventListener('resize', (e) => { this.onResize(e); });
   }
@@ -13,7 +15,8 @@ class Grid {
 
   draw(steps) {
     this.container_.innerHTML = '';
-    this.toSize_ = [];
+    this.elementsById_.clear();
+    this.toSize_.length = 0;
 
     for (let step of steps) {
       switch (step.type) {
@@ -22,23 +25,24 @@ class Grid {
           break;
 
         case 'arrow':
-          this.drawArrow(step.pos, step.cls, step.highlight);
+          this.drawArrow(step.id, step.pos, step.cls, step.highlight);
           break;
 
         case 'graphLabel':
-          this.drawGraphLabel(step.min, step.max, step.label);
+          this.drawGraphLabel(step.id, step.min, step.max, step.label);
           break;
 
         case 'group':
-          this.drawGroup(step.min, step.max, step.label, step.highlight);
+          this.drawGroup(step.id, step.min, step.max, step.label,
+                         step.highlight);
           break;
 
         case 'line':
-          this.drawLine(step.pos, step.cls, step.highlight);
+          this.drawLine(step.id, step.pos, step.cls, step.highlight);
           break;
 
         case 'linkLabel':
-          this.drawLinkLabel(step.pos, step.label);
+          this.drawLinkLabel(step.id, step.pos, step.label);
           break;
 
         case 'node':
@@ -47,6 +51,8 @@ class Grid {
       }
     }
 
+    console.log(this.elementsById_);
+
     this.fixSizes();
   }
 
@@ -59,8 +65,9 @@ class Grid {
         size[0] + ')))';
   }
 
-  drawArrow(pos, cls, highlight) {
+  drawArrow(id, pos, cls, highlight) {
     let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    getOrSet(this.elementsById_, id, []).push(svg);
     svg.classList.add('gridArrow');
     svg.classList.add(cls);
     svg.style.gridColumn = pos[0] + 1;
@@ -73,8 +80,9 @@ class Grid {
     use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + cls);
   }
 
-  drawGraphLabel(min, max, label) {
+  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.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
@@ -83,8 +91,9 @@ class Grid {
     this.toSize_.push(elem);
   }
 
-  drawGroup(min, max, label, highlight) {
+  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.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
@@ -102,8 +111,9 @@ class Grid {
     }
   }
 
-  drawLine(pos, cls, highlight) {
+  drawLine(id, pos, cls, highlight) {
     let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    getOrSet(this.elementsById_, id, []).push(svg);
     svg.classList.add('gridLines');
     svg.style.gridColumn = pos[0] + 1;
     svg.style.gridRow = pos[1] + 1;
@@ -115,8 +125,9 @@ class Grid {
     use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + cls);
   }
 
-  drawLinkLabel(pos, label) {
+  drawLinkLabel(id, pos, label) {
     let elem = document.createElement('div');
+    getOrSet(this.elementsById_, id, []).push(elem);
     elem.classList.add('gridLinkLabel');
     this.container_.appendChild(elem);
     elem.innerText = label;
@@ -127,6 +138,7 @@ 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.innerText = label;

LayoutLink.js

@@ -226,6 +226,7 @@ class LayoutLink {
 
     steps.push({
       type: 'line',
+      id: this.id_,
       pos: Array.from(this.path[0]),
       cls: 's' + this.getOutPoint(this.path[0], this.path[1]),
       highlight: this.highlight_,
@@ -236,9 +237,9 @@ class LayoutLink {
       let outPoint = this.getOutPoint(this.path[i], this.path[i + 1]);
       steps.push({
         type: 'line',
+        id: this.id_,
         pos: Array.from(this.path[i]),
         cls: `i${inPoint}o${outPoint}`,
-        id: this.id_,
         highlight: this.highlight_,
       });
     }
@@ -248,6 +249,7 @@ class LayoutLink {
 
     steps.push({
       type: 'line',
+      id: this.id_,
       pos: Array.from(this.path[this.path.length - 1]),
       cls: 's' + endInPoint,
       highlight: this.highlight_,
@@ -255,6 +257,7 @@ class LayoutLink {
 
     steps.push({
       type: 'arrow',
+      id: this.id_,
       pos: Array.from(this.path[this.path.length - 1]),
       cls: 'a' + endInPoint,
       highlight: this.highlight_,
@@ -263,6 +266,7 @@ class LayoutLink {
     if (this.labelPos_) {
       steps.push({
         type: 'linkLabel',
+        id: this.id_,
         pos: this.labelPos_,
         label: this.label_,
       });

LayoutNode.js

@@ -19,6 +19,7 @@ class LayoutNode {
     for (let link of this.graphNode_.links) {
       this.links.push({
         to: nodesByGraphNode.get(link.to),
+        id: link.id,
         label: link.label,
         highlight: link.highlight,
       });