Column removed after close a children

[Abdullah0991]

Hi, having a layout like this:

{
  content: [{
    type: 'row',
    content: [{
      type: 'column',
      content: [{
        type: 'component',
        componentName: 'first-component'
      }, {
          type: 'component',
          componentName: 'second-component'
        }]
      },{
        type: 'column',
        id: 'sec-col',
        content: [{
           type: 'component',
           componentName: 'third-component'
        }]
      }]
    }]
}

Current behavior

In my project, I add a new component as child in second column (bellow third-component) using id, after I close the new added component, the column sec-col get removed, and the component third-component get added to root row.

Expected behavior:

Column should stay as it already still has a child third-component.

[wowoName]

I found an example of a similar function：

http://www.javasc.cn/layout/index.html#/

[Abdullah0991]

@wowoName Link doesn't work!

[ButchMonkey]

@Abdullah0991 Please can you post an example. I am unable to replicate your issue. I have found some strange behavior but not what you have described.

Please use the following codepen to replicate. I have copied your config over already.
https://codepen.io/ButchMonkey/pen/GRKLeVo

Also, which version of GoldenLayout are you using?

[wowoName]

@Abdullah0991
sorry website needs to put on record again the day after tomorrow should be able to visit

[Abdullah0991]

@Abdullah0991 Please can you post an example. I am unable to replicate your issue. I have found some strange behavior but not what you have described.

Please use the following codepen to replicate. I have copied your config over already.
https://codepen.io/ButchMonkey/pen/GRKLeVo

Also, which version of GoldenLayout are you using?

Ok, I will prepare an example.

I use gl_v1.5.9 with ngx-golden-layout_v0.0.22 for my Angular 8.2 project.

[Abdullah0991]

Hi, here is the codpen:
https://codepen.io/ak_47/pen/ExYzQxx?editors=0010

I forked you pen and add a button which will add new component at column id = 'sec-col', at first time everything goes well, now close the new added component, and try again, the sec-col will not found.

[martin31821]

As I already mentioned in my repo, you have a column with a single child (=> a stack) and when you close the newly added component, it will normalize the whole state, which causes items (Rows/Columns) with only one child to be flattened out in order to save dom elements and achieve better performance.
If you want to create a new component in a new stack, first insert a column as child, move the child stack into your newly added column and add the second stack there.

[Abdullah0991]

hmm, It's because of the normalization process. I will try your suggestions.
Thanks.

[Abdullah0991]

If you want to create a new component in a new stack, first insert a column as child, move the child stack into your newly added column and add the second stack there.

In second step, how to move the child stack into the newly added column ? without remove and recreate again ?

[martin31821]

use removeChild(child, true) to prevent _$destroy to be called and then just call addChild(child)

[Abdullah0991]

use removeChild(child, true) to prevent _$destroy to be called and then just call addChild(child)

It worked, but It cause another problem, the new added column will take new width (the layout will be divided equally between the root children).
I tried to get the container width of the old child but it was in pixels not percent, so I need now to calculate the percent of the old child before removing and adding it to the new added column. I think this will not be always accurate.

Is there another idea ? or is there a way to disable the normalization process for some time like (pause-resume) or disable it for specific child ?

[Abdullah0991]

I updated the pen to see the problem, steps:
1- press add button to add new component (component 4)
2- close the new added component.
3- resize the component 3.
4- press add button again.

you will see the layout will be divided equally, so component 3 width will not preserved.

[Abdullah0991]

Any suggestions?

[martin31821]

You must calculate the original width, there is no other option, I think.

[Abdullah0991]

You must calculate the original width, there is no other option, I think.

Thanks for your precious time.

@ButchMonkey Is there a possibility to add new option to contentItem so it skipped in normalization process, for example, isStatic = true means this item will be skipped and not deleted by normalization.

[Abdullah0991]

@ButchMonkey Is there a possibility to add new option to contentItem so it skipped in normalization process, for example, isStatic = true means this item will be skipped and not deleted by normalization.

Or if you can tell me where the normalization process happens, maybe I can prepare a PR (with some help from you).

[Abdullah0991]

According to:

golden-layout/src/js/items/RowOrColumn.js

Line 131 in 12ef17a

if( this.contentItems.length === 1 && this.config.isClosable === true ) {

It gives me an idea to make the column undeletable:

var secCol = layout.root.getItemsById('sec-col');
secCol[0].config.isClosable = false;

Or even just change isClosable to false in the initial layout config. And it worked well.

[Abdullah0991]

According to:

golden-layout/src/js/items/RowOrColumn.js

Line 131 in 12ef17a

if( this.contentItems.length === 1 && this.config.isClosable === true ) {

It gives me an idea to make the column undeletable:

var secCol = layout.root.getItemsById('sec-col');
secCol[0].config.isClosable = false;

Or even just change isClosable to false in the initial layout config. And it worked well.

This method makes the column removed or maybe hidden when it dragged! Why?

[Abdullah0991]

Need help, What's the proper method to change a component width/height?
I tried setSize but doesn't work!