Merge branch 'master' into data-visualization-view-naafi

1 files changed, 42 insertions, 18 deletions

diff --git a/src/client/goldenLayout.js b/src/client/goldenLayout.js
index 012ee163c..9cb20d834 100644
--- a/src/client/goldenLayout.js
+++ b/src/client/goldenLayout.js
@@ -459,7 +459,7 @@
                     this._bDragging = false;
                     this.emit('dragStop', oEvent, this._nOriginalX + this._nX);
                 } else  { // make title receive pointer events to allow setting insertion position or selecting texst range
-                    const classname = typeof oEvent.target?.className === "string" ? oEvent.target.className : "";
+                    const classname = oEvent.target ? (typeof oEvent.target.className === "string" ? oEvent.target.className : ""): "";
                     if (classname.includes("lm_title_wrap")) {
                         oEvent.target.children[0].style.pointerEvents = "all";
                         oEvent.target.children[0].focus();
@@ -3263,12 +3263,6 @@
                 const canDelete = rowOrCol && !rowOrCol.isRoot && (rowOrCol.contentItems.length > 1 || (parRowOrCol && parRowOrCol.contentItems.length > 1)); // bcz: added test for last stack
                 if (canDelete) {
                     rowOrCol.removeChild(stack);
-                    if (rowOrCol.contentItems.length === 1 && parRowOrCol.contentItems.length === 1 && !parRowOrCol.isRoot) {
-
-                        saveScrollTops(rowOrCol.contentItems[0].element);
-                        parRowOrCol.replaceChild(rowOrCol, rowOrCol.contentItems[0]);
-                        restoreScrollTops(rowOrCol.contentItems[0].element);
-                    }
                 }
             }
         },
@@ -4062,6 +4056,14 @@
             lm.items.AbstractContentItem.prototype.removeChild.call(this, contentItem, keepChild);
 
             if (this.contentItems.length === 1 && this.config.isClosable === true) {
+                if (["row","column"].includes(this.contentItems[0].type) || ["row","column"].includes(this.parent.type)) {
+                    let parent = this.parent;
+                    let correctRowOrCol = this.contentItems[0];
+                    saveScrollTops(correctRowOrCol.element);
+                    parent.replaceChild(this, correctRowOrCol);
+                    restoreScrollTops(correctRowOrCol.element);
+                } 
+
                 // bcz: this has the effect of removing children from the DOM and then re-adding them above where they were before.
                 //      in the case of things like an iFrame with a YouTube video, the video will reload for now reason.  So let's try leaving these "empty" rows alone.
                 // childItem = this.contentItems[0];
@@ -4724,15 +4726,35 @@
                  */
             } else {
                 type = isVertical ? 'column' : 'row';
-                rowOrColumn = this.layoutManager.createContentItem({ type: type }, this);
-                this.parent.replaceChild(this, rowOrColumn);
+                if (this.parent.contentItems.length === 1) {
+                    let grandparent = this.parent.parent;
+                    let correctRowOrCol = this.layoutManager.createContentItem({ type: type }, this);
+                    grandparent.replaceChild(this.parent, correctRowOrCol);
+                    correctRowOrCol.addChild(contentItem, 0, true);
+                    let newstack = this.contentItems[0];
+                    if (newstack.isComponent) {
+                        newstack = this.layoutManager.createContentItem({
+                            type: 'stack',
+                            header: contentItem.config.header || {}
+                        }, this);
+                        newstack._$init();
+                        newstack.addChild(this.contentItems[0]);
+                    }
+                    correctRowOrCol.addChild(newstack,  insertBefore ? 0 : undefined, true);
+                    newstack.config[dimension] = 50;
+                    contentItem.config[dimension] = 50;
+                    correctRowOrCol.callDownwards('setSize');
+                } else {
+                    rowOrColumn = this.layoutManager.createContentItem({ type: type }, this);
+                    this.parent.replaceChild(this, rowOrColumn);
 
-                rowOrColumn.addChild(contentItem, insertBefore ? 0 : undefined, true);
-                rowOrColumn.addChild(this, insertBefore ? undefined : 0, true);
+                    rowOrColumn.addChild(contentItem, insertBefore ? 0 : undefined, true);
+                    rowOrColumn.addChild(this, insertBefore ? undefined : 0, true);
 
-                this.config[dimension] = 50;
-                contentItem.config[dimension] = 50;
-                rowOrColumn.callDownwards('setSize');
+                    this.config[dimension] = 50;
+                    contentItem.config[dimension] = 50;
+                    rowOrColumn.callDownwards('setSize');
+                }
             }
         },
 
@@ -5369,10 +5391,11 @@
          * @returns {void}
          */
         _render: function () {
-            this._reactComponent = ReactDOM.render(this._getReactComponent(), this._container.getElement()[0]);
-            this._originalComponentWillUpdate = this._reactComponent.componentWillUpdate || function () {
+            this._reactComponent = ReactDOM.createRoot(this._container.getElement()[0])
+            this._reactComponent.render(this._getReactComponent());
+            this._originalComponentWillUpdate = this._reactComponent.componentDidUpdate || function () {
             };
-            this._reactComponent.componentWillUpdate = this._onUpdate.bind(this);
+            this._reactComponent.componentDidUpdate = this._onUpdate.bind(this);
             if (this._container.getState()) {
                 this._reactComponent.setState(this._container.getState());
             }
@@ -5385,7 +5408,8 @@
          * @returns {void}
          */
         _destroy: function () {
-            ReactDOM.unmountComponentAtNode(this._container.getElement()[0]);
+            this._reactComponent.unmount();
+          //  ReactDOM.unmountComponentAtNode(this._container.getElement()[0]);
             this._container.off('open', this._render, this);
             this._container.off('destroy', this._destroy, this);
         },