Refactor checkin: drawing (but not iterating?)

Architype.js

@@ -15,10 +15,6 @@ class Architype {
     this.container_.appendChild(editorElem);
     this.editor_ = new Editor(editorElem);
 
-    this.targets_ = document.createElement('datalist');
-    this.targets_.id = 'arch-targets';
-    this.container_.appendChild(this.targets_);
-
     this.lines_ = document.createElement('div');
     this.lines_.innerHTML = `<!--# include file="lines.svg" -->`;
     this.lines_ = this.lines_.firstElementChild;
@@ -67,11 +63,9 @@ class Architype {
 
   onChange(e) {
     let serialized = this.serialize();
-    onmessage(serialized);
+    this.draw(render(serialized));
     localStorage.setItem('currentState', JSON.stringify(serialized));
-
-    //this.updateTargets(this.graph_);
-    //this.fixSizes(this.graph_.nodes);
+    this.fixSizes();
   }
 
   onKeyDown(e) {
@@ -104,50 +98,56 @@ class Architype {
     navigator.clipboard.writeText(lines.join('\n'));
   }
 
-  updateTargets(graph) {
-    // Lots of effort to avoid churning the datalist
+  draw(steps) {
+    console.log(steps);
 
-    let curTargets = new Map();
-    for (let option of this.targets_.options) {
-      curTargets.set(option.value, option);
-    }
-
-    for (let [label, entries] of graph.nodesByLabel.entries()) {
-      if (curTargets.has(label)) {
-        continue;
-      }
-      if (entries.length == 1 &&
-          document.activeElement.parentElement.xArchObj &&
-          document.activeElement.parentElement.xArchObj == entries[0]) {
-        // Skip an element currently being edited
-        continue;
-      }
-      let option = document.createElement('option');
-      option.value = label;
-      this.targets_.appendChild(option);
-    }
-
-    for (let [label, option] of curTargets.entries()) {
-      if (graph.nodesByLabel.has(label)) {
-        continue;
-      }
-      option.remove();
-    }
-  }
-
-  buildGrid(graph) {
     this.grid_.innerHTML = '';
+    this.gridNodes_ = [];
 
-    this.grid_.style.gridTemplateColumns =
-        'repeat(' + graph.size[0] + ',1fr)';
-    this.grid_.style.gridTemplateRows =
-        'repeat(' + graph.size[1] +
-        ',minmax(0, calc((100vw - var(--editor-width)) / ' +
-        graph.size[0] + ')))';
+    for (let step of steps) {
+      switch (step.type) {
+        case 'size':
+          this.drawGrid(step.size);
+          break;
 
-    this.drawGridNodes(graph);
+        case 'node':
+          this.drawGridNode(step.label, step.pos);
+          break;
+      }
+    }
   }
 
+  drawGrid(size) {
+    this.grid_.style.gridTemplateColumns =
+        'repeat(' + size[0] + ',1fr)';
+    this.grid_.style.gridTemplateRows =
+        'repeat(' + size[1] +
+        ',minmax(0, calc((100vw - var(--editor-width)) / ' +
+        size[0] + ')))';
+  }
+
+  drawGridNode(label, pos) {
+    let node = document.createElement('div');
+    node.classList.add('gridNode');
+    this.grid_.appendChild(node);
+    node.innerText = label;
+    node.style.gridColumn = pos[0] + 1;
+    node.style.gridRow = pos[1] + 1;
+  }
+
+  fixSizes() {
+    for (let node of this.gridNodes_) {
+      node.style.fontSize = null;
+      for (let size = 20;
+           size && (node.scrollWidth > node.clientWidth ||
+                    node.scrollHeight > node.clientHeight);
+           --size) {
+        node.style.fontSize = size + 'px';
+      }
+    }
+  }
+
+  // TODO: fix this
   addLines(pos, cls) {
     let lines = this.lines_.cloneNode(true);
     lines.classList.add(cls);
@@ -156,30 +156,6 @@ class Architype {
     this.grid_.appendChild(lines);
     return lines;
   }
-
-  drawGridNodes(graph) {
-    for (let node of graph.nodes) {
-      node.gridElem = document.createElement('div');
-      node.gridElem.classList.add('gridNode');
-      this.grid_.appendChild(node.gridElem);
-      node.gridElem.innerText = node.getLabel();
-      node.gridElem.style.gridColumn = node.pos[0] + 1;
-      node.gridElem.style.gridRow = node.pos[1] + 1;
-    }
-  }
-
-  fixSizes(nodes) {
-    for (let node of nodes) {
-      let elem = node.gridElem;
-      elem.style.fontSize = null;
-      for (let size = 20;
-           size && (elem.scrollWidth > elem.clientWidth ||
-                    elem.scrollHeight > elem.clientHeight);
-           --size) {
-        elem.style.fontSize = size + 'px';
-      }
-    }
-  }
 }
 
 

EditorNode.js

@@ -8,7 +8,6 @@ class EditorNode extends EditorEntryBase {
     this.input_ = document.createElement('input');
     this.input_.type = 'text';
     this.input_.placeholder = 'node name';
-    this.input_.setAttribute('list', 'arch-targets');
     this.listen(this.input_, 'keydown', (e) => this.onInputKeyDown(e));
     this.listen(this.input_, 'input', (e) => this.onInput());
     this.listen(this.input_, 'blur', (e) => this.onInput());

Layout.js

@@ -143,6 +143,29 @@ class Layout {
         max[1] - min[1] + 1,
     ];
   }
+
+  getDrawSteps() {
+    let steps = [
+      {
+        type: 'size',
+        size: this.size,
+      },
+    ];
+
+    let nodes = Array.from(this.nodesByPos_.values());
+    for (let i of [1, 0]) {
+      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,
+      });
+    }
+
+    return steps;
+  }
 }
 
 <!--# include file="LayoutGroup.js" -->

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,

render.js

@@ -1,6 +1,7 @@
-function onmessage(def) {
+function render(def) {
   let graph = new Graph(def);
   let layout = new Layout(graph);
+  return layout.getDrawSteps();
 }
 
 <!--# include file="Graph.js" -->