Golden-layout , Having issues while adding items dynamically

Question

Please see the issue:

function newLayOutObj() {
    var config = {
        settings: {
            "hasHeaders": true,
            "constrainDragToContainer": false,
            "reorderEnabled": false,
            "selectionEnabled": false,
            "popoutWholeStack": false,
            "blockedPopoutsThrowError": false,
            "closePopoutsOnUnload": false,
            "showPopoutIcon": false,
            "showMaximiseIcon": true,
            "showCloseIcon": true,
            "responsiveMode": "onload"
        },
        content: [{
            type: 'column',
            content: [{
                    type: 'component',
                    "reorderEnabled": false,
                    "hasHeaders": false,
                    "isClosable": false,
                    "showPopoutIcon": false,
                    "showMaximiseIcon": false,
                    "showCloseIcon": false,
                    componentName: 'parrent',
                    componentState: {
                        text: 'Component 1',
                        id: "4587645"
                    }
                }


            ]
        }]
    };
    return config;
};
function add() {
    var newItemConfig = {
        type: 'component',
        componentName: 'parrent',
        width: 38.197,
    };
    layout.root.contentItems[0].addChild(newItemConfig);
};
layOutObj = new newLayOutObj();
layout = new GoldenLayout(layOutObj);
layout.container = "#golden";
layout.registerComponent('parrent', function (container, state) {
    container.getElement().html(`<h2 class="cname" >Component </h2>`);
});

layout.init();

$(function(){
$('#add').click(function(){ add(); })
})

body{ padding: 0px; background: #DDD; margin: 0px;}
.cname{ color:#FFF; text-align:center}

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
<link type="text/css" rel="stylesheet" href="//golden-layout.com/files/latest/css/goldenlayout-base.css" />
<link type="text/css" rel="stylesheet" href="//golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" />

<div id="ss" style="width: 800px; height:30px; margin:5px auto"> <button id="add"> Add </button> </div>   
<div id="golden" style="width: 800px; height:280px; margin:0px auto"> </div> 

i can add new rows by clicking Add button. once i close all newly added rows , and try again with add button it change the mode to nested columns, i want this to as row thanks

 var newItemConfig = {
        type: 'component',
        componentName: 'parrent',
        width: 38.197,
    };
 layout.root.contentItems[0].addChild(newItemConfig);

i am using this method to add new item

Answer 1

https://github.com/deepstreamIO/golden-layout/blob/master/src/js/items/RowOrColumn.js#L134

The reason why this is happening is because when children are removed from a ContentItem leaving just 1 child the library cleans things up. So what it does is say hey I am the only one left, so my ContentItem is no longer needed. It calls a method called replaceChild on its parent. This takes the only remaining child and makes it a child of its parent instead and removes the ContentItem as part of the cleanup.

Now why does it then keep adding to the right once this happens? It's because the parent is the root which is always a stack. So when it replaces it replaces as a stack. This can be proven by adding the following log statement before a new item is added.

console.log(layout.root.contentItems[0].type)

This will prove that once this happens it is them part of a stack instead of a column. This behavior is expected in order to clean things up.

What is not expected is that there are conditions to this behavior. If the last item isClosable = false then it does not do this.

Your configuration has that as false. However, if you put the following log statement before you add a new one:

console.log(layout.root.contentItems[0].config.isClosable)

The output is true when you would expect it to be false thereby meeting the condition to replace it.

So this tells me it is not being initialized correctly for some reason. You can see there is no close icon, but that happens in the initialization only. So some point after that the config is being set to true.

Answer 2

To check if component already exist before adding a new one

checkIfCOmponentExist(name: string): boolean {
   let compName = this.layout.root.getComponentsByName(name);
    if (compName && compName.length != 0)
       return true;
    else
       return false;

}