From ccf4299d5a81836269636079078e6c4ce1ce9d39 Mon Sep 17 00:00:00 2001
From: Ian Gulliver <ian@flamingcow.tv>
Date: Tue, 16 Jul 2019 16:05:29 +0000
Subject: [PATCH] Switch from attribute+observer to bubbling events for comms

---
 Architype.js       | 26 +++++++++++++++-----------
 EditorEntryBase.js |  8 +++++++-
 EditorInputBase.js |  5 +++--
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/Architype.js b/Architype.js
index a468e28..8fba368 100644
--- a/Architype.js
+++ b/Architype.js
@@ -46,9 +46,13 @@ class Architype {
     }
 
     this.observer_ = new MutationObserver(() => { this.onChange(); });
-    this.observer2_ = new MutationObserver(() => { this.snapshot(false); });
     this.observe();
 
+    this.container_.addEventListener('renderRequest',
+                                     () => { this.onRenderRequest(); });
+    this.container_.addEventListener('snapshotRequest',
+                                     () => { this.onSnapshotRequest(); });
+
     this.render();
     this.snapshot(true);
   }
@@ -62,14 +66,6 @@ class Architype {
 
   observe() {
     this.observer_.observe(this.editorElem_, {
-      attributes: true,
-      attributeFilter: ['data-arch-render'],
-      childList: true,
-      subtree: true,
-    });
-    this.observer2_.observe(this.editorElem_, {
-      attributes: true,
-      attributeFilter: ['data-arch-snapshot'],
       childList: true,
       subtree: true,
     });
@@ -77,7 +73,6 @@ class Architype {
 
   unobserve() {
     this.observer_.disconnect();
-    this.observer2_.disconnect();
   }
 
   serialize() {
@@ -168,11 +163,20 @@ class Architype {
     this.first_ = (e.state == 'first');
   }
 
-  onChange() {
+  onRenderRequest() {
     ++this.generation_;
     this.render();
   }
 
+  onSnapshotRequest() {
+    this.snapshot(false);
+  }
+
+  onChange() {
+    this.onRenderRequest();
+    this.onSnapshotRequest();
+  }
+
   snapshot(first) {
     this.serialized_ = this.serialize();
     this.serializedStr_ = JSON.stringify(this.serialized_);
diff --git a/EditorEntryBase.js b/EditorEntryBase.js
index 52ef7ec..771f4b5 100644
--- a/EditorEntryBase.js
+++ b/EditorEntryBase.js
@@ -54,7 +54,8 @@ class EditorEntryBase extends ListenUtils {
       elem.classList.toggle('highlight', highlight);
     }
     // Do NOT refresh: this bypasses the rendering pipeline
-    this.elem_.setAttribute('data-arch-snapshot', '');
+    this.elem_.dispatchEvent(
+        new CustomEvent('snapshotRequest', { bubbles: true }));
   }
 
   toggleHighlight() {
@@ -78,6 +79,11 @@ class EditorEntryBase extends ListenUtils {
   afterDomAdd() {
   }
 
+  requestRender() {
+    this.elem_.dispatchEvent(
+        new CustomEvent('renderRequest', { bubbles: true }));
+  }
+
   static addBefore(container, elem, ...rest) {
     let entry = new this(null, ...rest);
     container.insertBefore(entry.getElement(), elem);
diff --git a/EditorInputBase.js b/EditorInputBase.js
index 0245195..c3abfc1 100644
--- a/EditorInputBase.js
+++ b/EditorInputBase.js
@@ -41,7 +41,7 @@ class EditorInputBase extends EditorEntryBase {
   }
 
   onInput() {
-    this.elem_.setAttribute('data-arch-render', '');
+    this.requestRender();
     let objs = document.getElementsByClassName('grid-' + this.getId());
     if (objs.length == 1) {
       objs[0].innerText = this.getLabel();
@@ -52,7 +52,8 @@ class EditorInputBase extends EditorEntryBase {
   onBlur() {
     if (this.getLabel() != this.lastSnapshotLabel_) {
       this.lastSnapshotLabel_ = this.getLabel();
-      this.elem_.setAttribute('data-arch-snapshot', '');
+      this.elem_.dispatchEvent(
+          new CustomEvent('snapshotRequest', { bubbles: true }));
     }
   }