在 GoldenLayout 中捕获窗格调整大小事件的正确方法

Question

我想在发生调整大小事件（无论是调整窗格、整个浏览器还是缩放）时在一个窗格（即容器内容项）中执行操作。下面的工作，但是......如果我然后在窗格周围拖动，甚至从左到右，到右到左，或从上到下，它就会停止工作。

我假设重新排列窗格会重置某些内容，并且有一种正确方法来获取持久事件处理程序。但是我无法从文档中解决它。

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
    });
//...
}

Answer 1

很可能您将 resize 处理程序绑定到某个中间布局对象，例如 stack 或 column，当您重新安排布局，在此过程中杀死你的听众。

您可以这样检查对象类型：

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

您应该将 "resize" 侦听器绑定到组件的容器：

myLayout.on('componentCreated',function(component) {
    component.container.on('resize',function() {
        console.log('component.resize',component.componentName);
    });
});

以防止它在您重新安排布局时被删除。

Answer 2

使用 GoldenLayout，如果您想在任何时候移动或调整某个面板的大小时进行一般检测，stateChanged 属性会捕获布局的更改：

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

如果要检测特定面板的大小调整，可以使用 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'));

在 GoldenLayout 中捕获窗格调整大小事件的正确方法

Proper way to catch resize events for a pane in GoldenLayout

javascript

layout

golden-layout