I want to taken an action in one pane (i.e. a container content item) when a resize event occurs (whether resizing the panes, the whole browser, or zoom). The below works, but... if I then drag around the panes, even go from left-right, to right-left, or top-bottom, it stops working.

I'm assuming re-arranging panes resets something, and there is a proper way to get a persistent event handler. But I cannot work it out from the docs.

myLayout.on('initialised',initPanes);

function initPanes(){
myLayout.root.contentItems[0].contentItems[0].on('resize',function(){
    console.log("First pane resized");  //TEMP
    });
myLayout.root.contentItems[0].contentItems[1].on('resize',function(){
    console.log("Second pane resized");  //TEMP
    });
//...
}

I want to taken an action in one pane (i.e. a container content item) when a resize event occurs (whether resizing the panes, the whole browser, or zoom). The below works, but... if I then drag around the panes, even go from left-right, to right-left, or top-bottom, it stops working.

I'm assuming re-arranging panes resets something, and there is a proper way to get a persistent event handler. But I cannot work it out from the docs.

myLayout.on('initialised',initPanes);

function initPanes(){
myLayout.root.contentItems[0].contentItems[0].on('resize',function(){
    console.log("First pane resized");  //TEMP
    });
myLayout.root.contentItems[0].contentItems[1].on('resize',function(){
    console.log("Second pane resized");  //TEMP
    });
//...
}

• javascript
• layout
• golden-layout

2 Answers 2

Most probably you bind your resize handler to some intermediate layout object, like stack or column, and these might be destroyed and re-created when you re-arrange the layout, killing your listener in the process.

You can check the object type like that:

%myLayout.root.contentItems[0].contentItems[0].type
"stack"

You should bind your "resize" listener to the Component's container instead:

myLayout.on('ponentCreated',function(ponent) {
    ponent.container.on('resize',function() {
        console.log('ponent.resize',ponent.ponentName);
    });
});

to prevent it from being removed when you re-arrange the layout.

With GoldenLayout, if you want to generically detect anytime some panel is moved or resized, the stateChanged property captures changes to the layout:

myLayout.on( 'stateChanged', function(){
            // do something
});

If you want to detect a specific panel resizing, you can use a ResizeObserver:

 let ro = new ResizeObserver( entries => {
 for (let entry of entries) {
           console.log(entry.contentRect.height + ", " + entry.contentRect.width);
           //do something with the height and width of the panel
       }
});

ro.observe(document.querySelector('#panel1'));