Google Blockly UI on jQuery 对话框不可编辑
Google Blockly UI on jQuery Dialog is not editable
在 jQuery 对话框中呈现 Blockly UI 时，它不允许编辑输入。
原因是 Blockly 添加一个 div 到 DOM，输入字段如下：
<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 对话框下。输入字段直接附加到 html 正文。
当我在 Dialog 中移动 blocklyWidgetDiv 时，它显示了页面中某处的输入字段，而不是在确切的编辑器位置呈现。
尝试使用以下代码根据您的面板调整 svg 的大小，重新初始化 svg 可能会奏效一段时间 Blockly.svgResize(Blockly.getMainWorkspace())
我同时发现并解决了我这边的问题
TL;DR：Blockly 工作区的其中一个容器的缩放系数不同于 1，这是导致任何输入元素的大小和位置错误的原因！
更长的解释
在输入期间通过 HTML 表单元素在其工作区内块状地覆盖 SVG 显示区域。虽然工作空间可以在文档深处的任何地方找到，但输入元素被放置在文档主体的直接子元素中（并且定位完全取决于 SVG 区域的位置）。如果任何工作区父级的缩放因子不为 1，则计算出的位置与实际位置不同，并且输入元素错位
可能的解决方案
- 摆脱那个缩放因子（对我来说不可行，因为它是由我正在使用的库设置的）
- 让 Blockly 开发人员将任何表单元素放置在靠近工作区的位置（例如，作为公共容器中最外层 SVG 元素的同级元素）——这将是最可靠的解决方案（因为“缩放”不是很好）这些天支持）
- 正确支持“缩放”（这似乎不可行）
- 编写一个可以正确重塑输入元素的 hack
很遗憾，我不得不选择最后一个。
我做了什么：
- 让 MutationObserver 查找那些臭名昭著的表单元素并
- 每当出现新的表单元素时，计算该元素的正确位置和大小（这有点棘手）
- 然后给表单元素指定适当的大小和原始位置与适当位置的差异（因为该表单元素的容器也起到定位和调整大小的作用）
- 此外，根据任何用户输入调整表单元素的大小
- 并聆听布局的变化，例如由于 window 调整大小...
结果是一个奇怪的 hack，这就是为什么我不想向 public 显示代码 - 在很长一段时间内，我肯定会建议将表单元素放置在更靠近 Blockly 工作区的位置。 .
编辑：
不幸的是，这个 hack 无法解决当尝试将缩放因子远大于 1 的方块拖入垃圾桶时出现的问题。
在 jQuery 对话框中呈现 Blockly UI 时，它不允许编辑输入。
原因是 Blockly 添加一个 div 到 DOM，输入字段如下：
<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 对话框下。输入字段直接附加到 html 正文。
当我在 Dialog 中移动 blocklyWidgetDiv 时，它显示了页面中某处的输入字段，而不是在确切的编辑器位置呈现。
尝试使用以下代码根据您的面板调整 svg 的大小，重新初始化 svg 可能会奏效一段时间 Blockly.svgResize(Blockly.getMainWorkspace())
我同时发现并解决了我这边的问题
TL;DR：Blockly 工作区的其中一个容器的缩放系数不同于 1，这是导致任何输入元素的大小和位置错误的原因！
更长的解释
在输入期间通过 HTML 表单元素在其工作区内块状地覆盖 SVG 显示区域。虽然工作空间可以在文档深处的任何地方找到，但输入元素被放置在文档主体的直接子元素中（并且定位完全取决于 SVG 区域的位置）。如果任何工作区父级的缩放因子不为 1，则计算出的位置与实际位置不同，并且输入元素错位
可能的解决方案
- 摆脱那个缩放因子（对我来说不可行，因为它是由我正在使用的库设置的）
- 让 Blockly 开发人员将任何表单元素放置在靠近工作区的位置（例如，作为公共容器中最外层 SVG 元素的同级元素）——这将是最可靠的解决方案（因为“缩放”不是很好）这些天支持）
- 正确支持“缩放”（这似乎不可行）
- 编写一个可以正确重塑输入元素的 hack
很遗憾，我不得不选择最后一个。
我做了什么：
- 让 MutationObserver 查找那些臭名昭著的表单元素并
- 每当出现新的表单元素时，计算该元素的正确位置和大小（这有点棘手）
- 然后给表单元素指定适当的大小和原始位置与适当位置的差异（因为该表单元素的容器也起到定位和调整大小的作用）
- 此外，根据任何用户输入调整表单元素的大小
- 并聆听布局的变化，例如由于 window 调整大小...
结果是一个奇怪的 hack，这就是为什么我不想向 public 显示代码 - 在很长一段时间内，我肯定会建议将表单元素放置在更靠近 Blockly 工作区的位置。 .
编辑：
不幸的是，这个 hack 无法解决当尝试将缩放因子远大于 1 的方块拖入垃圾桶时出现的问题。