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

Question

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

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

很遗憾，以下代码不起作用。 None 个事件记录了垂直分离器的移动：

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);

现在我可以将 GoldenLayout 用于我的 JupyterLab 扩展

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

How to listen on resize of SplitPanel in JupyterLab?

javascript

jupyter-lab