如何在JupyterLab中监听SplitPanel的大小调整？

Question

我目前正在尝试为JupyterLab改编一些JupyterNotebook扩展(https://github.com/stefaneidelloth/treezjs)。

如果垂直SplitPanel被移动，我想更新我的TreeView的大小。

不幸的是，以下代码不起作用。所有事件都不会记录垂直拆分器的移动：

app.shell.add(treezPlugin, 'left', { rank: 200 });

app.shell.layoutModified.connect(()=>{
    updateGoldenLayout(layout, layoutContainer);
}); 

app.shell.onResize(()=>{
    updateGoldenLayout(layout, layoutContainer);
}); 
        
window.onresize = ()=>{
    updateGoldenLayout(layout, layoutContainer);
};  

function updateGoldenLayout(layout, layoutContainer){
    var rect = layoutContainer.getBoundingClientRect();
    layout.updateSize(rect.width, rect.height);
}

红色区域显示水平大小不匹配：

​

​

=>怎样才能正确地监听水平SplitPanel的变化？

我试着访问SplitPanel，但还不知道怎么做。

相关信息：

https://github.com/golden-layout/golden-layout/issues/456

https://discourse.jupyter.org/t/seeking-suggestions-for-the-best-way-to-implement-a-split-view-jupyterlab-notebook-extension/2740

https://github.com/jupyterlab/jupyterlab/issues/9269

Answer 1

红色的div是我的"layoutContainer“。ResizeObserver做到了这一点：

let resizeObserver = new ResizeObserver( () => {
   updateGoldenLayout(layout, layoutContainer);
});
resizeObserver.observe(layoutContainer);

现在我可以对我的JupyterLab扩展使用GoldenLayout了

​

​