table editor uses mutations

Author: longhotsummer

indigo_app/static/javascript/indigo/views/document_editor.js

@@ -159,7 +159,7 @@
      * Discard the content of all editors.
      */
     discardChanges: function() {
-      this.tableEditor.discardChanges(null, true);
+      this.tableEditor.discardChanges(true);
       this.aknTextEditor.discardChanges();
       if (this.editing) {
         this.editActivityCancelled();

indigo_app/static/javascript/indigo/views/document_xml_editor.js

@@ -330,9 +330,7 @@ class XMLEditor {
 
   setXmlElement (element) {
     this.xmlElement = element;
-    if (this.visible) {
-      this.render();
-    }
+    this.render();
   }
 
   show() {
@@ -347,17 +345,19 @@ class XMLEditor {
 
   render() {
     // pretty-print the xml
-    const xml = this.xmlElement ? prettyPrintXml(Indigo.toXml(this.xmlElement)) : '';
-    if (this.editor.getValue() !== xml) {
-      const posn = this.editor.getPosition();
+    if (this.visible) {
+      const xml = this.xmlElement ? prettyPrintXml(Indigo.toXml(this.xmlElement)) : '';
+      if (this.editor.getValue() !== xml) {
+        const posn = this.editor.getPosition();
 
-      // ignore the onDidChangeModelContent event triggered by setValue
-      this.updating = true;
-      this.editor.setValue(xml);
-      this.updating = false;
+        // ignore the onDidChangeModelContent event triggered by setValue
+        this.updating = true;
+        this.editor.setValue(xml);
+        this.updating = false;
 
-      this.editor.setPosition(posn);
-      this.editor.layout();
+        this.editor.setPosition(posn);
+        this.editor.layout();
+      }
     }
   }
 
@@ -397,19 +397,18 @@ class XMLEditor {
     switch (model.getMutationImpact(mutation, this.xmlElement)) {
       case 'replaced':
         this.xmlElement = mutation.addedNodes[0];
+        this.render();
         break;
       case 'changed':
+        this.render();
         break;
       case 'removed':
         // the change removed xmlElement from the tree
         console.log('Mutation removes SourceEditor.xmlElement from the tree');
         this.xmlElement = null;
+        this.render();
         break;
     }
-
-    if (this.visible) {
-      this.render();
-    }
   }
 
   onNavTabChanged(e) {

indigo_app/static/javascript/indigo/views/table_editor.js

@@ -30,10 +30,9 @@
     },
 
     initialize: function(options) {
-      var self = this;
-
       this.parent = options.parent;
       this.documentContent = options.documentContent;
+      this.documentContent.on('mutation', this.onDomMutated.bind(this));
       this.tableWrapper = this.$('.table-editor-wrapper').removeClass('d-none').remove()[0];
       this.editing = false;
 
@@ -77,6 +76,30 @@
       return true;
     },
 
+    /**
+     * The XML document has changed, re-render if it impacts our table element.
+     *
+     * @param model documentContent model
+     * @param mutation a MutationRecord object
+     */
+    onDomMutated (model, mutation) {
+      if (!this.editing) return;
+
+      switch (model.getMutationImpact(mutation, this.table)) {
+        case 'replaced':
+          this.discardChanges(true);
+          break;
+        case 'changed':
+          this.discardChanges(true);
+          break;
+        case 'removed':
+          // the change removed xmlElement from the tree
+          console.log('Mutation removes TableEditor.table from the tree');
+          this.discardChanges(true);
+          break;
+      }
+    },
+
     saveChanges: function(e) {
       if (!this.editing || !this.table) return;
 
@@ -111,7 +134,7 @@
       this.trigger('save');
     },
 
-    discardChanges: function(e, force) {
+    discardChanges: function(force) {
       if (!this.editing || !this.table) return;
       if (!force && !confirm($t("You'll lose your changes, are you sure?"))) return;