Golden-layout: popout not returning to previous location

[nreisch]

Most of the time, the popout window will not return to the previous location on popIn but rather as a child of the root, and (I think this is pretty well understood but I'll say it anyway) this is because the parent of the contentItem is usually removed on popout or replaced in the tree hierarchy.

A common solution I see is to have isClosable set to false, but that does not allow for resizing of the contentItems, creates noticeable white space and triggers problems with dragging items.
I also considered using local storage to save the configuration before popout, but if there are multiple popouts this causes issues as to which configuration should be loaded.

I'm curious to see if this is a problem for anyone else using Golden Layout? Have there been any potential solutions to this issue that just haven't been pursued?

I don't see this issue getting as much attention as I think it should, and I've begun to consider potential solutions and working on it.

If anyone else has any interest in looking into this let me know.

[progys]

I personally disabled popin functionality. I allow only popout by cloning the existing element. This library seems to be dead... There is some activity in master branch, but nobody releases anything. There are nasty issues with React integration. Had to do a lot of dirty hacks :(

[nreisch]

@progys Yeah I know how you feel :(

As of now, I'm working through patches on my own branch to continue moving forward with what I need accomplished (i.e: better popIn functionality). I figured I would reach out here anyway, I'm hopeful there will be a revival at some point.

[progys]

It is interesting that there is so little interest in this awesome library. As far as I was able to research - I was not able to find any alternative which would offer window management..

[martin31821]

I use this code to make the popIn procedure better:

/**
 * Returns the popped out item to its original position. If the original
 * parent isn't available anymore it falls back to the layout's topmost element
 */
export function popout_popIn(): void {
  var childConfig,
    parentItem,
    index = this._indexInParent;

  if( this._parentId ) {

    /*
     * The $.extend call seems a bit pointless, but it's crucial to
     * copy the config returned by this.getGlInstance().toConfig()
     * onto a new object. Internet Explorer keeps the references
     * to objects on the child window, resulting in the following error
     * once the child window is closed:
     *
     * The callee (server [not server application]) is not available and disappeared
     */
    childConfig = $.extend( true, {}, this.getGlInstance().toConfig() ).content[ 0 ];
    parentItem = this._layoutManager.root.getItemsById( this._parentId )[ 0 ];

    /*
     * Fallback if parentItem is not available. Either add it to the topmost
     * item or make it the topmost item if the layout is empty
     */
    if( !parentItem ) {
      if( this._layoutManager.root.contentItems.length > 0 ) {
        parentItem = this._layoutManager.root.contentItems[ 0 ];
      } else {
        parentItem = this._layoutManager.root;
      }
      index = 0;
    }
  }

  parentItem.addChild( childConfig, this._indexInParent );
  this._onClose();
};

It tries to search an adjacent item and walks up the tree. (tested against 1.5.7)

[nreisch]

@martin31821 The method you posted above seems to be the exact same as the one in the source code.

I'm currently considering an approach where on pop-out, if a RowOrColumn was replaced, the new parent will hold a reference to a cloned sub-tree of soon to be deleted nodes from contentItems. The sub-tree could hold a reference to its contentItems before being replaced up the main tree, and then later on popIn if the sub-tree and main-tree share similar nodes we consider wiring our sub-tree back into the main tree and having subtree.parent set to the new main tree parent, the main tree parent being that one which was referenced in the initial call to replaceChild.

This is a rough sketch, and I'm not sure if this will be feasible yet, but if anyone else has ideas I'm open to any suggestions for this issue.

[martin31821]

Indeed, it seems I don't have these patches around anymore...
Just an idea:

Why not change the whole state handling to a state tree, including subwindows, which would open the possibility to have panels docked out to existing popout windows (i.e. discarding the root/child behavior and just having multiple windows with layouts each)

[nreisch]

I recently spent some time, since this issue was first opened, working on a potential solution. This solution (https://github.com/nreisch/golden-layout/commit/d2ae6cdbe58907fea98ce9f512a5a9ca163931e4) does a much better job of reinstating nodes back into the content tree at its previous location, however, there are still some issues with multiple pop-outs so the backup case is it adds the node to the root.

Demo
Run the es6_tree, if you nest components within one another, traditionally the component will strictly return to root, with the improvement it should return to its nested location.

Solution
Store the replaced oldChild node of replaceChild(), hold the ids of the children it previously referenced. On popIn we traverse through the content tree to see if there is a parent node of the child that we have saved as childIds. If we find the parent then we know where in the content tree we want to reinstate our oldChild and then eventually addChild() to it. Does some other things as well such as updating the header content items and replacing the html elements.

Checkout the most recent commit (https://github.com/nreisch/golden-layout/commit/d2ae6cdbe58907fea98ce9f512a5a9ca163931e4) to look at the changes.

Feel free to use this patch, do note that more investigation in this commit is needed so any thoughts on this is appreciated. Perhaps this could get merged into master at some point.

Thanks!