Switch from attribute+observer to bubbling events for comms

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_);

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);

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 }));
     }
   }