jQuery Dialog 上的 Google Blockly UI 不可编辑答案

【问题标题】：Google Blockly UI on jQuery Dialog is not editablejQuery Dialog 上的 Google Blockly UI 不可编辑
【发布时间】：2020-03-30 01:23:44
【问题描述】：

在 jQuery Dialog 中渲染 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 时，它会在页面中的某个位置显示输入字段，而不是在确切的编辑器位置呈现。

【问题讨论】：

你能提供一些工作 sn-p 的代码，我们可以帮助你
这个问题暂时解决了吗？
因为我原来的评论似乎被削弱了：到目前为止我发现了什么：$('g.blocklyEditableText.editing') 和 $('body .blocklyWidgetDiv') 报告相同的 .position( ) 和 .offset() 虽然在显示器上显然彼此相距几个像素-这种差异似乎取决于诸如文档大小之类的细微细节-但有时它也会消失-非常奇怪（因此，也很难复制）

标签： jquery blockly google-blockly

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

更长的解释

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

可能的解决方案

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

很遗憾，我不得不选择最后一个。

我做了什么：

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

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

编辑：

不幸的是，此 hack 无法处理尝试将块拖入垃圾箱且缩放系数远大于 1 时出现的问题。

【讨论】：