How to use the babylonjs-editor.Layout function in babylonjs-editor

public async create(): Promise {
        // Layout
        this.layout = new Layout(this.divElement.id);
        this.layout.panels = [
            { type: 'top', size: 30, resizable: false, content: '<div style="width: 100%; height: 100%;" id="METADATA-EDITOR-TOOLBAR"></div>' },
            { type: 'main', content: '<div style="width: 100%; height: 100%;" id="METADATA-EDITOR-EDITOR"></div>' }
        ]
        this.layout.build(this.divElement.id);

        // Toolbar
        this.toolbar = new Toolbar('METADATA-EDITOR-TOOLBAR');
        this.toolbar.build('METADATA-EDITOR-TOOLBAR');

        // Create json editor
        this.code = new CodeEditor('json', '{\n\n}');
        this.code.onChange = (value) =&gt; {
            if (!this.selectedNode)
                return;

public async create(): Promise {
        const div = $(this.divElement);

        // Create layout
        this.layout = new Layout('Code');
        this.layout.panels = [
            { type: 'top', content: '<div id="CODE-BEHAVIOR-TOOLBAR"></div>', size: 30, resizable: false },
            { type: 'left', content: '<div style="width: 100%; height: 100%;" id="CODE-BEHAVIOR-LIST"></div>', size: 250, overflow: 'auto', resizable: true },
            { type: 'main', content: '<div style="width: 100%; height: 100%;" id="CODE-BEHAVIOR-EDITOR"></div>', resizable: true }
        ];
        this.layout.build(div.attr('id'));

        // Add toolbar
        this.toolbar = new Toolbar('CodeToolbar');
        this.toolbar.items = [{ id: 'add', text: 'Add...', caption: 'Add...', img: 'icon-add' }];
        this.toolbar.build('CODE-BEHAVIOR-TOOLBAR');

        // Add grid
        this.grid = new Grid('CodeGrid', {
            toolbarReload: false,
            toolbarSearch: false,

public async create(): Promise {
        // Layout
        this.layout = new Layout(this.divElement.id);
        this.layout.panels = [
            { type: 'top', resizable: false, size: 30, content: '<div style="width: 100%; height: 100%" id="GRAPH-EDITOR-TOOLBAR"></div>' },
            { type: 'left', content: '<div style="width: 100%; height: 100%;" id="GRAPH-EDITOR-LIST"></div>', size: 250, overflow: 'auto', resizable: true },
            { type: 'main', content: '<canvas style="width: 100%; height: 100%;" class="graphcanvas" id="GRAPH-EDITOR-EDITOR"></canvas>', resizable: true }
        ];
        this.layout.build(this.divElement.id);

        // Add toolbar
        this.toolbar = new Toolbar('GRAPH-EDITOR-TOOLBAR');
        this.toolbar.items = [
            { id: 'save', text: 'Save', caption: 'Save', img: 'icon-export', },
            { type: 'break' },
            { id: 'play-stop', text: 'Start / Stop', caption: 'Start / Stop', img: 'icon-play-game' },
            //{ type: 'break' },
            //{ id: 'import', text: 'Import from...', caption: 'Import from...', img: 'icon-add' }
        ];