Golden-layout, Проблемы с динамическим добавлением элементов

Question

Пожалуйста, смотрите вопрос:

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> 

я могу добавить новые строки, нажав кнопку Добавить. как только я закрываю все вновь добавленные строки, и пытаюсь снова с кнопкой добавления, это меняет режим на вложенные столбцы, я хочу, чтобы это было как строка спасибо

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

я использую этот метод для добавления нового элемента

Answer 1

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

Причина, по которой это происходит, заключается в том, что когда дети удаляются из ContentItem оставляя только одного ребенка, библиотека убирает вещи. Так что он говорит, эй, я остался один, так что мой ContentItem больше не нужен. Он вызывает метод с именем replaceChild на его родителя. Это берет единственный оставшийся потомок и делает его потомком своего родителя вместо этого и удаляет ContentItem как часть уборки.

Теперь, почему это продолжает добавлять справа, когда это происходит? Это потому, что родитель - это корень, который всегда является стеком. Поэтому, когда он заменяет, он заменяет собой стек. В этом можно убедиться, добавив следующую инструкцию в журнал перед добавлением нового элемента.

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

Это докажет, что, как только это произойдет, это будет часть стека, а не столбец. Такое поведение ожидается для того, чтобы навести порядок.

Чего не ожидается, так это того, что существуют условия для такого поведения. Если последний пункт isClosable = false тогда он этого не делает.

Ваша конфигурация имеет это как ложное. Однако, если вы добавите следующий оператор журнала перед добавлением нового:

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

Выход true когда вы ожидаете, что это будет false тем самым соблюдая условие его замены.

Так что это говорит мне, что по какой-то причине он инициализируется неправильно. Вы можете видеть, что значок закрытия отсутствует, но это происходит только при инициализации. Так что какой-то момент после этого конфиг устанавливается на true,

Answer 2

Чтобы проверить, существует ли уже компонент перед добавлением нового

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

}