还有另一种调整 Blockly 工作区大小的方法吗？

Question

我正在尝试在 div 中调整我的 Blockly workspace。我希望如果页面变小，它里面的 div 和 Blockly workspace 也会变小。

我知道 Google 在其 documentation 中提供了一种方法，但我认为它有点 "dirty" 并且您必须使用大量代码来调整它的大小.

查看 Google Chrome 的调试器，我看到我可以将 max-height 设置为 svg 对象，但我不知道如何更改 height 时您注入工作区：

var workspace = Blockly.inject('blocklyDiv',
    {toolbox: document.getElementById('toolbox')});

总之，它根本无法解决我的问题（只是在调整页面大小之前避免工作空间大于div）。

我也尝试更改我的 blocklyDiv，其中我将 Blockly workspace 注入 display: flex;，但它没有任何改变。

是否有比 Google's 示例更好的方法来调整 Blockly workspace 的大小？

提前致谢！

Answer 1

正如我在上面的评论中所说，我允许调整宽度，同时固定块中的高度 div。

<div id="blocklyDiv" style="height: 800px; width: 100%;"></div>

在这里你可以使用 JSFiddle： blockly workspace resizing.

Answer 2

我使用 CSS 只是为了获得相同的行为...

只需为块状编辑器创建一个任意大小和相对位置的容器，然后将一个块状编辑器放入其中，绝对位置。

HTML代码：

<section id="blocklyContainer">
    <div id="blocklyDiv"></div>
</section>

CSS代码：

#blocklyContainer {
  position: relative;
  width: 100%;
  height: 100vh;
}

#blocklyDiv {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

这里有一个CodePen可以看：blockly resize

Answer 3

我用Blockly.svgResizeapi解决了这个问题，注意如果尺寸随着transition变化，你必须设置一个超时函数，在回调中调用api超时，延迟就是过渡时间。

还有另一种调整 Blockly 工作区大小的方法吗？

Is there another way to resize Blockly workspace?

css

blockly