From 3d0d0d5fd027b43d8d5a8f066428018040defb35 Mon Sep 17 00:00:00 2001
From: Ian Gulliver <ian@flamingcow.tv>
Date: Wed, 3 Jul 2019 22:10:36 +0000
Subject: [PATCH] render in worker thread

---
 Architype.js | 42 ++++++++++++++++++++++++++++++++++++------
 render.js    | 13 +++++++++----
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/Architype.js b/Architype.js
index a1c149e..6bdbedb 100644
--- a/Architype.js
+++ b/Architype.js
@@ -25,6 +25,13 @@ class Architype {
     this.grid_.classList.add('grid');
     this.container_.appendChild(this.grid_);
 
+    this.generation_ = 0;
+    this.drawGeneration_ = -1;
+
+    this.render_ = new Worker('render.js');
+    this.render_.addEventListener('message', (e) => { this.onRender(e); });
+    this.renderPending_ = false;
+
     this.unserialize(JSON.parse(localStorage.getItem('currentState')));
 
     this.observer_ = new MutationObserver(e => { this.onChange(e); });
@@ -41,6 +48,7 @@ class Architype {
   serialize() {
     return {
       version: 1,
+      generation: this.generation_,
       editor: this.editor_.serialize(),
     };
   }
@@ -52,6 +60,7 @@ class Architype {
 
     switch (ser.version) {
       case 1:
+        this.generation_ = ser.generation;
         this.editor_.unserialize(ser.editor);
         break;
 
@@ -62,10 +71,33 @@ class Architype {
   }
 
   onChange(e) {
-    let serialized = this.serialize();
-    this.draw(render(serialized));
-    localStorage.setItem('currentState', JSON.stringify(serialized));
-    this.fixSizes();
+    ++this.generation_;
+    this.serialized_ = this.serialize();
+
+    if (!this.renderPending_) {
+      this.startRender();
+    }
+
+    localStorage.setItem('currentState', JSON.stringify(this.serialized_));
+  }
+
+  onRender(e) {
+    this.renderPending_ = false;
+
+    if (e.data.generation > this.drawGeneration_) {
+      this.draw(e.data.steps);
+      this.fixSizes();
+      this.drawGeneration_ = e.data.generation;
+    }
+
+    if (this.generation_ > this.drawGeneration_) {
+      this.startRender();
+    }
+  }
+
+  startRender() {
+    this.renderPending_ = true;
+    this.render_.postMessage(this.serialized_);
   }
 
   onKeyDown(e) {
@@ -166,6 +198,4 @@ class Architype {
 
 <!--# include file="utils.js" -->
 
-<!--# include file="render.js" -->
-
 new Architype(document.getElementById('architype'));
diff --git a/render.js b/render.js
index 762c287..6f9530a 100644
--- a/render.js
+++ b/render.js
@@ -1,8 +1,13 @@
-function render(def) {
-  let graph = new Graph(def);
+addEventListener('message', (e) => {
+  let graph = new Graph(e.data);
   let layout = new Layout(graph);
-  return layout.getDrawSteps();
-}
+  postMessage({
+    generation: e.data.generation,
+    steps: layout.getDrawSteps(),
+  });
+});
 
 <!--# include file="Graph.js" -->
 <!--# include file="Layout.js" -->
+
+<!--# include file="utils.js" -->