2

在 jQuery Dialog 中渲染 Blockly UI 时，它不允许编辑输入。

Jquery 对话框中的 Blockly UI

原因是 Blockly 向 DOM 添加一个 div，其输入字段如下所示：

<div class="blocklyWidgetDiv" style="direction: ltr; display: block; left: 514.052px; top: 133.094px; width: 91.5547px;">
  <input class="blocklyHtmlInput" value="dfgfdgdfgdfg">
</div>

但实际的 blocklyDiv 附加在 jQuery Dialog 下。直接附加到 html 正文的输入字段。

当我在 Dialog 中移动 blocklyWidgetDiv 时，它会在页面中的某个位置显示输入字段，而不是在确切的编辑器位置呈现。

在此处输入图像描述

4

2 回答 2

1

尝试使用以下代码根据您的面板调整 svg 的大小，这可能会通过重新初始化 svg 来工作一段时间Blockly.svgResize(Blockly.getMainWorkspace())

于 2020-01-08T11:16:42.793 回答
0

同时，我发现并解决了我这边的问题。

TL;DR：Blockly 工作区的一个容器的缩放因子不同于 1，这是任何输入元素大小和位置错误的原因！

更长的解释

在输入期间通过 HTML 表单元素块状地覆盖其工作空间内的 SVG 显示区域。虽然工作空间可以在文档深处的任何位置找到，但输入元素被放置在文档正文的直接子元素中（并且绝对定位取决于 SVG 区域的位置）。如果任何工作空间父级的缩放系数不为 1，则计算出的位置与实际位置不同，并且输入元素放错了位置

可能的解决方案

  • 摆脱那个缩放因子（对我来说不可行，因为它是由我正在使用的库设置的）
  • 让 Blockly 开发人员将任何表单元素放置在更靠近工作区的位置（例如，作为公共容器中最外层 SVG 元素的兄弟）——这将是最强大的解决方案（因为现在“缩放”不太支持）
  • 正确支持“缩放”（这似乎不可行）
  • 编写一个可以正确重塑输入元素的 hack

不幸的是，我不得不选择最后一个。

我做了什么：

  • 让 MutationObserver 寻找那些臭名昭著的表单元素和
  • 每当出现新的表单元素时，计算该元素的正确位置和大小（这有点棘手）
  • 然后为表单元素分配适当的大小以及原始位置和适当位置之间的差异（因为该表单元素的容器也在定位和调整大小中起作用）
  • 此外，根据任何用户输入调整表单元素的大小
  • 并听取布局的变化，例如由于窗口大小调整......

结果是一个奇怪的 hack，这就是为什么我不想向公众展示代码的原因 - 在很长一段时间内，我肯定会建议将表单元素放置在更靠近 Blockly 工作区的地方......

编辑：

不幸的是，这个 hack 无法处理在尝试将块拖入垃圾箱时出现的问题，而缩放因子远大于 1。

于 2020-10-14T16:33:44.943 回答