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

【问题标题】：How to listen on resize of SplitPanel in JupyterLab?如何在 JupyterLab 中监听 SplitPanel 的大小调整？
【发布时间】：2020-10-31 09:57:30
【问题描述】：

我目前正在尝试为 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://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

【问题讨论】：

标签： javascript jupyter-lab

【解决方案1】：

红色的 div 是我的“layoutContainer”。一个 ResizeObserver 做到了：

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

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

【讨论】：