摩纳哥编辑器动态设置视区的高度

Question

我使用 monaco 编辑器的 OverlayWidget 和 Viewzone api 在 monaco 编辑器中插入内联文本，如 monaco 编辑器示例 https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-listening-to-mouse-events。

但是当我改变 OverlayWidget 的高度时，Viewzone 的高度没有改变。

我尝试使用 layoutZone api 来重置 viewzone 的高度，但似乎不起作用。

editor.changeViewZones((accessor => {
       accessor.layoutZone(viewZoneId);
       this.doLayout(host, layoutInfo);
}))

那么动态设置视区高度的正确方法是什么？

谢谢！

Answer 1

我解决了这个问题。

是的，accessor.layoutZone(viewZoneId);将重新渲染视区。

关键是使用viewzone的heightInPx属性的getter方法，如下所示；

const viewZone = {
      afterLineNumber: lineNumber,
      get heightInPx() {
          return host.offsetHeight;
      },
      domNode,
          onDomNodeTop: (top) => {host.style.top = top + 'px'},
     }