From 0ea005969621faf041608232520a1d5f4d0689ff Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Sun, 29 Jul 2018 22:00:15 +0200
Subject: [PATCH] Fixed switching from object/array to auto/string and vice
 versa

---
 src/js/Node.js        | 44 ++++++++++++++++++++++++++++++++++++++++++-
 src/js/treemode.js    |  5 ++---
 test/test_update.html |  6 +++---
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/js/Node.js b/src/js/Node.js
index bcd7e5d..4954c9c 100644
--- a/src/js/Node.js
+++ b/src/js/Node.js
@@ -332,6 +332,7 @@ Node.prototype.setValue = function(value, type) {
   var childValue, child, visible;
   var i, j;
   var notUpdateDom = false;
+  var previousChilds = this.childs;
 
   this.type = this._getType(value);
 
@@ -431,15 +432,56 @@ Node.prototype.setValue = function(value, type) {
   else {
     // value
     this.hideChilds();
-    this.childs = undefined;
+
+    delete this.append;
+    delete this.showMore;
+    delete this.expanded;
+    delete this.childs;
+
     this.value = value;
   }
 
+  // recreate the DOM if switching from an object/array to auto/string or vice versa
+  // needed to recreated the expand button for example
+  if (Array.isArray(previousChilds) !== Array.isArray(this.childs)) {
+    this.recreateDom();
+  }
+
   this.updateDom({'updateIndexes': true});
 
   this.previousValue = this.value;
 };
 
+/**
+ * Remove the DOM of this node and it's childs and recreate it again
+ */
+Node.prototype.recreateDom = function() {
+  var table = this.dom.tr ? this.dom.tr.parentNode : undefined;
+  var lastTr;
+  if (this.expanded) {
+    lastTr = this.getAppendDom();
+  }
+  else {
+    lastTr = this.getDom();
+  }
+  var nextTr = (lastTr && lastTr.parentNode) ? lastTr.nextSibling : undefined;
+
+  // hide current field and all its childs
+  this.hide({ resetVisibleChilds: false });
+  this.clearDom();
+
+  // create new DOM
+  if (table) {
+    if (nextTr) {
+      table.insertBefore(this.getDom(), nextTr);
+    }
+    else {
+      table.appendChild(this.getDom());
+    }
+  }
+  this.showChilds();
+};
+
 /**
  * Get value. Value is a JSON structure
  * @return {*} value
diff --git a/src/js/treemode.js b/src/js/treemode.js
index 81280d3..7885136 100644
--- a/src/js/treemode.js
+++ b/src/js/treemode.js
@@ -200,12 +200,11 @@ treemode.set = function (json, name) {
 };
 
 treemode.update = function (json) {
-  // TODO
-  // this.content.removeChild(this.table);  // Take the table offline
+  this.content.removeChild(this.table);  // Take the table offline
 
   this.node.setValue(json);
 
-  // this.content.appendChild(this.table);  // Put the table online again
+  this.content.appendChild(this.table);  // Put the table online again
 };
 
 /**
diff --git a/test/test_update.html b/test/test_update.html
index 93c2ff5..029e2ff 100644
--- a/test/test_update.html
+++ b/test/test_update.html
@@ -61,7 +61,7 @@
         "arrayGrow": [1, 2, 3],
         "arrayShrink": [1, 2, 3],
         "autoToArray": 123,
-        "ArrayToAuto": [1, 2, 3],
+        "arrayToAuto": [1, 2, 3],
         "objectGrow": {"a": "b", "c": "d"},
         "objectShrink": {"a": "b", "c": "d"},
         "objectToArray": {"a": "b", "c": "d"},
@@ -72,8 +72,8 @@
         "arrayToObject": {"a": "b", "c": "d"},
         "arrayGrow": [1, 2, 3, 4, 5],
         "arrayShrink": [1, 3],
-        // "autoToArray": [1, 2, 3], // FIXME: doesn't work yet (misses expand button)
-        // "ArrayToAuto": 123,  // FIXME: doesn't work yet (throws error)
+        "autoToArray": [1, 2, 3],
+        "arrayToAuto": 123,
         "objectGrow": {"a": "b", "c": "ddd", "e": "f"},
         "objectShrink": {"c": "d"},
         "objectToArray": [1, 2, 3],