container.Base: createItem() => automatically remove items from existing parents #6689

Author: tobiu

apps/colors/view/ViewportController.mjs

@@ -89,14 +89,12 @@ class ViewportController extends Controller {
                 {windowId}   = data,
                 url          = await Neo.Main.getByPath({path: 'document.URL', windowId}),
                 widgetName   = new URL(url).searchParams.get('name'),
-                widget       = me.getReference(widgetName),
-                widgetParent = widget.up();
+                widget       = me.getReference(widgetName);
 
             me.connectedApps.push(widgetName);
 
             me.getReference(`detach-${widgetName}-button`).disabled = true;
 
-            widgetParent.remove(widget, false);
             mainView.add(widget)
         }
     }
@@ -111,12 +109,10 @@ class ViewportController extends Controller {
             {appName, windowId} = data,
             url                 = await Neo.Main.getByPath({path: 'document.URL', windowId}),
             widgetName          = new URL(url).searchParams.get('name'),
-            widget              = me.getReference(widgetName),
-            widgetParent        = widget.up();
+            widget              = me.getReference(widgetName);
 
         // Closing a non-main app needs to move the widget back into its original position & re-enable the show button
         if (appName === 'ColorsWidget') {
-            widgetParent.remove(widget, false);
             me.component.insert(me.widgetIndexMap[widgetName], widget);
 
             me.getReference(`detach-${widgetName}-button`).disabled = false

apps/sharedcovid/view/MainContainerController.mjs

@@ -263,15 +263,13 @@ class MainContainerController extends ComponentController {
     onAppConnect(data) {
         let me   = this,
             name = data.appName,
-            parentView, style, toolbar, view;
-
-        console.log('onAppConnect', name);
+            style, toolbar, view;
 
         switch(name) {
             case 'SharedCovidChart':
                 view       = me.getReference('controls-panel');
-                parentView = view.parent;
-                parentView.storeReferences();
+
+                view.parent.storeReferences();
 
                 toolbar = me.getReference('controls-panel-header');
                 style   = toolbar.style || {};
@@ -301,9 +299,6 @@ class MainContainerController extends ComponentController {
         if (view) {
             NeoArray.add(me.connectedApps, name);
 
-            parentView = parentView ? parentView : view.isTab ? view.up('tab-container') : Neo.getComponent(view.parentId);
-            parentView.remove(view, false);
-
             Neo.apps[name].on('render', () => {
                 me.timeout(100).then(() => {
                     me.getMainView(name).add(view)
@@ -323,8 +318,6 @@ class MainContainerController extends ComponentController {
             view       = parentView.items[0],
             index, style, toolbar;
 
-        console.log('onAppDisconnect', name);
-
         switch (name) {
             case 'SharedCovid':
                 Neo.Main.windowClose({
@@ -342,8 +335,6 @@ class MainContainerController extends ComponentController {
         if (view) {
             NeoArray.remove(me.connectedApps, name);
 
-            parentView.remove(view, false);
-
             switch (name) {
                 case 'SharedCovidChart':
                     toolbar = me.getReference('controls-panel-header');

examples/component/multiWindowCoronaGallery/ViewportController.mjs

@@ -73,16 +73,13 @@ class ViewportController extends Controller {
             {appName} = data;
 
         if (appName === 'GalleryControls') {
-            let controlsPanel = me.getReference('controls-panel'),
-                {mainView}    = Neo.apps[appName];
+            let {mainView} = Neo.apps[appName];
 
             me.connectedApps.push(appName);
 
-            controlsPanel.parent.remove(controlsPanel, false);
-
             this.getReference('header-toolbar').hidden = true;
 
-            mainView.add(controlsPanel)
+            mainView.add(me.getReference('controls-panel'))
         }
     }
 
@@ -96,16 +93,12 @@ class ViewportController extends Controller {
             {appName, windowId} = data;
 
         if (appName === 'GalleryControls') {
-            let controlsPanel = me.getReference('controls-panel');
-
-            controlsPanel.parent.remove(controlsPanel, false);
-
             me.getReference('header-toolbar').hidden = false;
 
-            me.component.add(controlsPanel)
+            me.component.add(me.getReference('controls-panel'))
         }
         // Close popup windows when closing or reloading the main window
-        else if (appName === 'Neo.examples.component.multiWindowCoronaGallery') {console.log('close', me.connectedApps);
+        else if (appName === 'Neo.examples.component.multiWindowCoronaGallery') {
             Neo.Main.windowClose({names: me.connectedApps, windowId})
         }
     }

examples/component/multiWindowHelix/ViewportController.mjs

@@ -78,8 +78,6 @@ class ViewportController extends Controller {
 
             me.connectedApps.push(appName);
 
-            controlsPanel.parent.remove(controlsPanel, false);
-
             this.getReference('header-toolbar').hidden = true;
 
             mainView.add(controlsPanel)
@@ -96,13 +94,9 @@ class ViewportController extends Controller {
             {appName, windowId} = data;
 
         if (appName === 'HelixControls') {
-            let controlsPanel = me.getReference('controls-panel');
-
-            controlsPanel.parent.remove(controlsPanel, false);
-
             me.getReference('header-toolbar').hidden = false;
 
-            me.component.add(controlsPanel)
+            me.component.add(me.getReference('controls-panel'))
         }
         // Close popup windows when closing or reloading the main window
         else if (appName === 'Neo.examples.component.multiWindowHelix') {

src/container/Base.mjs

@@ -304,7 +304,7 @@ class Container extends Component {
         let me       = this,
             config   = {appName: me.appName, parentId: me.id, parentIndex: index, windowId: me.windowId},
             defaults = {...me.itemDefaults},
-            lazyLoadItem, module;
+            lazyLoadItem, module, parent;
 
         if (defaults) {
             if (item.module) {
@@ -328,6 +328,12 @@ class Container extends Component {
             }
 
             case 'NeoInstance': {
+                parent = item.parent;
+
+                if (parent && parent !== me) {
+                    parent.remove(item, false)
+                }
+
                 item.set(config);
 
                 // In case an item got created outside a stateProvider based hierarchy, there might be bindings or string